/* AAOS 2.0 — Raum-Stylesheet (02.10.2026, Fassung 5: Market Intelligence; v32: Holo-Kopfzeile, Bubbles-Knopf; v33: Top-20-Laufliste links, Kopfzeile ohne Nummer; v34: Laufliste halb so groß, grün/rot, Schreibmaschine, zwei Durchläufe; v35: Laufliste scroll-/klickbar, Palette + Glow + Tempo-Regler; v36: Lauf per JS, Rad zusätzlich; v41: Calls-Kachel, Schriftwahl, Hintergrund, Schaufenster-Abzeichen). Baut auf styles.css auf; ändert dort nichts. Gleich große Kacheln (.panel) schweben als CSS3D-Objekte auf einem Ring um die Punkt-Erde (aaos2.js). Farbsprache: Grün = bullisch, Rot = bearisch (Erde, Balken, Indikatoren); Blau/Violett/Cyan sind Raum-Akzente (Glas, Knöpfe, Lichtkanten). */ :root { --bull: #22c55e; --bear: #ef4444; --raum-akzent: #3b82f6; --kachel-b: 440px; --kachel-h: 600px; --glas: linear-gradient(160deg, #0d1526e6, #0a1020dc); --glas-rand: #3b82f655; --glas-schein: 0 0 0 1px #0b1a3a inset, 0 0 42px #3b82f61c, 0 32px 70px #00000099; } :root[data-thema="hell"] { --glas: linear-gradient(160deg, #ffffffe0, #eef2fad0); --glas-rand: #b3c2de; --glas-schein: 0 0 0 1px #ffffff inset, 0 0 42px #3b82f618, 0 32px 70px #1f2a4433; } html, body.raum { height: 100%; overflow: hidden; } body.raum { background: var(--raum-hintergrund, #05070f); } /* Hintergrundfarbe aus dem Zahnrad-Menü (03.10. abends) */ :root[data-thema="hell"] body.raum { background: #e8edf8; } /* Bühne und CSS3D-Ebene ───────────────────────────────────────────── */ #buehne { position: fixed; inset: 0; z-index: 0; } #welt { display: block; width: 100%; height: 100%; } /* Randnebel (10.10.2026, Nutzerauftrag: "minimaler violett-blauer Nebelschimmer, hauptsaechlich an den Bildschirmraendern"). Eine CSS-Ebene INNERHALB von #buehne: liegt damit ueber der Leinwand und unter #css3d, kostet keinen Frame und keine WebGL-Flaeche. Die Bildmitte bleibt frei — Kugel, Kacheln, Charts und Schrift stehen unveraendert davor. Merker "weiche Scheine zeichnen ihren Kasten": ein radial-gradient zeigt seine Kastenseiten bei 70,7 % — darum liegen alle Mittelpunkte AUSSERHALB des Bildes und alle Stopps unter 70 %. Deckkraefte bewusst im Bereich 0,05..0,085: auf dem tiefen Schwarz-Blau reicht das fuer Tiefe, ohne den Kontrast der Kacheln anzutasten. */ #himmelsschein { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 1; transition: opacity .5s ease; will-change: transform; background: radial-gradient(62% 52% at -6% 104%, rgba(124, 92, 236, .085), rgba(124, 92, 236, 0) 64%), radial-gradient(56% 46% at 104% -6%, rgba(56, 108, 224, .075), rgba(56, 108, 224, 0) 62%), radial-gradient(74% 34% at 50% 110%, rgba(84, 72, 196, .055), rgba(84, 72, 196, 0) 66%), radial-gradient(40% 64% at 106% 72%, rgba(138, 96, 230, .05), rgba(138, 96, 230, 0) 66%); } body.ohne-randnebel #himmelsschein { opacity: 0; } /* ── Lesemodus (12.10.2026, berichtigte Fassung) ─────────────────────────────────────────────── Nutzer: „wenn ich aktiviere soll es alles andere ausblenden, die anderen kachel, das News und Coins Fenster und das Chart-Fenster. alles was bleiben soll ist das claude chat fenster und die einstellungen dazu. also einfach nur sternen hintergrund." Der Himmel bleibt deshalb unangetastet — er IST der gewünschte Hintergrund. Es tritt alles andere ab. Sichtbar bleiben: die offene Kachel, die Claude-Leiste (#frageBox samt Menüs), die Werkzeugleiste (sonst käme man nicht mehr heraus) und das Raum-Menü, wenn es offen ist. `visibility` statt `display`, damit die Kacheln ihre Lage im Ring behalten und beim Verlassen ohne Neuaufbau wieder dastehen. */ body.lesemodus-an .panel:not(.aktiv) { visibility: hidden !important; pointer-events: none !important; } /* 13.10. (Nutzer: „doppelt so breites kachel im lese modus"): die offene Kachel wird im Lesemodus doppelt so breit. Den Wert schreibt leseBreiteSetzen() gemessen als --kachel-b-lese; der Rueckfall sind volle 2×, falls das JS nicht dazu kommt. */ body.lesemodus-an .panel.aktiv { width: var(--kachel-b-lese, calc(var(--kachel-b) * 2)); } body.dreid .panel { transition: opacity .35s ease, box-shadow .35s ease, width .38s ease; } body.lesemodus-an #topliste, body.lesemodus-an #kerzen, body.lesemodus-an #fgTacho, body.lesemodus-an #marke { opacity: 0; pointer-events: none; } /* Bubble-Blick (13.10., Nutzer: „der news und chart kacheln sollen ausgeschalten sein auf esc oder knopf druck soll ich wieder zurueck kommen"): Leiste links und Kerzen-Chart treten ab, solange der Blick links auf dem Bubble-Feld steht. Werkzeugleiste und Claude-Leiste bleiben — sonst gaebe es keinen Knopf fuer den Rueckweg. */ body.bubble-blick #topliste, body.bubble-blick #kerzen, body.bubble-blick #frageBox, body.bubble-blick #kachelSuche { opacity: 0; pointer-events: none; } body.bubble-blick #kachelSuche *, body.bubble-blick #frageBox * { pointer-events: none; } /* die Kinder setzen in #werkzeuge selbst pointer-events: auto (Merker 265) — unsichtbar hieße sonst noch klickbar */ /* 15.10.2026 (Nutzer: „Öffnen und Leuchten muss weg … und das Claude-Chat-Fenster auch mit den Einstellungen"): im Bubble-Blick auch Kachel-Suche und Claude-Leiste weg — beide wirken nur auf den Ring */ /* 15.10.2026: der Pixel-Tacho ist durch die 3D-Kugel im Bubble-Feld ersetzt (aaos2.js fg3d…, FG_PIXEL_AUS) — das DOM-Element bleibt nur stehen */ #fgTacho, body.bubble-blick #fgTacho { display: none; } /* ── Daily Briefing und KI News (13.10.) ───────────────────────────────────────────────────── Zwei Kacheln, ein Bau: Standzeile, Ueberschrift, Fliesstext, darunter drei bis sechs Punkte. Der Text ist zum LESEN da — deshalb hier bewusst mehr Zeilenhoehe als in den Datenkacheln. */ .panel-brief .brief-inhalt { gap: 8px; } .brief-stand { flex: 0 0 auto; font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--stand-farbe, #95a0b0); } .brief-ziel { flex: 1; min-height: 0; overflow: auto; } .brief-ueberschrift { font-size: 15px; font-weight: 700; line-height: 1.25; margin-bottom: 6px; color: #e8eefc; } .brief-text { margin: 0 0 10px; font-size: 12.5px; line-height: 1.55; color: var(--text); } .brief-punkt { border-top: 1px solid var(--rand); padding: 7px 0; } .brief-punkt-titel { font-size: 12.5px; font-weight: 600; line-height: 1.35; } .brief-punkt-warum { font-size: 11.5px; line-height: 1.45; color: var(--gedaempft); margin-top: 2px; } .brief-punkt-fuss { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 9.5px; letter-spacing: .06em; color: var(--gedaempft); margin-top: 3px; opacity: .8; } :root[data-thema="hell"] .brief-ueberschrift { color: #0f172a; } /* Knopf „↻ Neu" im Daily Briefing (23.10.2026): klein, rechts neben der Standzeile; während des Laufs gelb und pulsierend, der Text zählt die Sekunden (aaos2.js briefKnopfSetzen) */ .brief-kopf { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; } .brief-kopf .brief-stand { flex: 1; min-width: 0; } .brief-neu { flex: 0 0 auto; font: 600 10px/1 "JetBrains Mono", ui-monospace, Menlo, monospace; letter-spacing: .06em; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--glas-rand, #ffffff2a); background: transparent; color: var(--titel-farbe, #7dd3fc); cursor: pointer; white-space: nowrap; } .brief-neu:hover:not(:disabled) { border-color: currentColor; } .brief-neu:disabled { cursor: default; } .brief-neu.laeuft { color: #ffd60a; border-color: #ffd60a66; animation: brief-puls 1.6s ease-in-out infinite; } @keyframes brief-puls { 50% { opacity: .55; } } @media (prefers-reduced-motion: reduce) { .brief-neu.laeuft { animation: none; } } .brief-lauf { flex: 0 0 auto; font-size: 11.5px; line-height: 1.4; color: #ff9c9c; } :root[data-thema="hell"] .brief-neu { color: #0369a1; } /* Token-Unlocks des Berichtstags im Daily Briefing (23.10.2026): eigener Block zwischen Fließtext und Punkten, Stufe färbt das Symbol (hoch rot, mittel gelb — wie im Unlock-Kalender), Vergangenes abgeblendet */ .brief-unlocks { margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--rand); border-radius: 10px; background: #ffffff05; } .brief-unl-kopf { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--titel-farbe, #7dd3fc); } .brief-unl-kopf span { font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--gedaempft); font-size: 10.5px; } .brief-unl-zeile { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; border-top: 1px solid #ffffff0d; font-size: 12px; line-height: 1.4; } .brief-unl-zeile:first-of-type { border-top: 0; } .brief-unl-zeile.vorbei { opacity: .55; } .brief-unl-zeit { flex: 0 0 38px; font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 10.5px; color: var(--gedaempft); } .brief-unl-sym { flex: 0 0 auto; min-width: 42px; } .brief-unl-zeile.w-hoch .brief-unl-sym { color: var(--rot); } .brief-unl-zeile.w-mittel .brief-unl-sym { color: var(--gelb); } .brief-unl-tags { flex: 0 0 auto; display: flex; gap: 3px; } .brief-unl-tags i { font-style: normal; font-size: 8.5px; font-weight: 700; letter-spacing: .06em; padding: 1px 4px; border-radius: 4px; color: var(--gedaempft); border: 1px solid var(--rand); } .brief-unl-tags i.hl { color: #67e8f9; border-color: #67e8f944; } .brief-unl-text { flex: 1; min-width: 0; color: var(--gedaempft); } .brief-unl-text b { color: var(--text); font-weight: 600; } .brief-unl-leer { font-size: 11.5px; color: var(--leise); padding: 2px 0; } :root[data-thema="hell"] .brief-unlocks { background: #00000004; } /* ── Zahlen in der offenen Kachel (13.10.) ─────────────────────────────────────────────────── Nutzer: „zahlen muessen besser hervorgehoben werden"; auf Rueckfrage: nur in der OFFENEN Kachel, im Ring bleibt es wie bisher (dort ist die Schrift ohnehin klein und die Zahl steht nur zur Orientierung). Gross gesetzt werden die Wert-Elemente der Label/Wert-Zeilen (Muster span = Label, b = Wert, siehe app.js setupKarte) und die benannten *-wert-Klassen. tabular-nums haelt die Ziffernbreite gleich — sonst springt die Spalte bei jedem Tick. */ body.dreid .panel.aktiv :is(.setup-zeile, .senti-zeile, .indi-zeile, .hlt-zeile, .liq-kopf, .richtung-wk) b, body.dreid .panel.aktiv :is(.indi-wert, .inv-wert, .mi-wert, .messer-wert, .impact-wert) { font-family: "Share Tech Mono", "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 1.32em; font-weight: 700; letter-spacing: .012em; line-height: 1.15; } /* Farbe nur, wo sie nichts bedeutet: bull/bear und die Richtungsfarben behalten ihre eigene. */ body.dreid .panel.aktiv :is(.setup-zeile, .hlt-zeile) b:not([class]), body.dreid .panel.aktiv .indi-wert:not([class*="bull"]):not([class*="bear"]) { color: #f2f7ff; text-shadow: 0 0 10px #60a5fa3d; } :root[data-thema="hell"] body.dreid .panel.aktiv :is(.setup-zeile, .hlt-zeile) b:not([class]), :root[data-thema="hell"] body.dreid .panel.aktiv .indi-wert:not([class*="bull"]):not([class*="bear"]) { color: #0f172a; text-shadow: none; } /* Die Beschriftung tritt dafuer einen Schritt zurueck — der Kontrast macht die Hervorhebung. */ body.dreid .panel.aktiv :is(.setup-zeile, .indi-zeile) span:not([class]), body.dreid .panel.aktiv .indi-name { font-size: .94em; letter-spacing: .01em; } body.lesemodus-an .raum-label { opacity: 0; } #topliste, #kerzen, #fgTacho, #marke { transition: opacity .35s ease; } @media (prefers-reduced-motion: reduce) { #topliste, #kerzen, #fgTacho, #marke { transition: none; } } :root[data-thema="hell"] #himmelsschein { opacity: 0; } @media (prefers-reduced-motion: reduce) { #himmelsschein { transition: none; } } /* Rueckfall ohne WebGL (10.10.): zwei SVG-Kacheln in verschiedenen Groessen ergeben zwei Tiefenebenen eines statischen Sternhimmels — der Randnebel darueber bleibt ohnehin CSS. aaos2.js setzt body.kein-webgl, wenn der WebGLRenderer nicht anlaeuft. */ body.kein-webgl #buehne { background-color: var(--raum-hintergrund, #05070f); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='430' height='430' viewBox='0 0 430 430'%3E%3Ccircle cx='211.5' cy='213.2' r='0.51' fill='%23dfe8ff' opacity='0.081'/%3E%3Ccircle cx='154.0' cy='16.0' r='0.45' fill='%23fff1de' opacity='0.06'/%3E%3Ccircle cx='93.4' cy='283.3' r='0.72' fill='%23ffffff' opacity='0.161'/%3E%3Ccircle cx='203.0' cy='11.3' r='0.49' fill='%23ffffff' opacity='0.074'/%3E%3Ccircle cx='64.7' cy='159.4' r='1.21' fill='%23cfddff' opacity='0.339'/%3E%3Ccircle cx='262.3' cy='7.0' r='0.5' fill='%23cfddff' opacity='0.078'/%3E%3Ccircle cx='297.9' cy='332.0' r='0.48' fill='%23ffffff' opacity='0.07'/%3E%3Ccircle cx='365.3' cy='218.9' r='0.96' fill='%23cfddff' opacity='0.248'/%3E%3Ccircle cx='29.5' cy='374.2' r='0.55' fill='%23fff1de' opacity='0.095'/%3E%3Ccircle cx='124.0' cy='199.2' r='0.48' fill='%23ffffff' opacity='0.072'/%3E%3Ccircle cx='20.5' cy='232.4' r='0.45' fill='%23ffffff' opacity='0.06'/%3E%3Ccircle cx='173.0' cy='408.1' r='0.55' fill='%23fff1de' opacity='0.098'/%3E%3Ccircle cx='420.7' cy='113.9' r='0.53' fill='%23ffffff' opacity='0.091'/%3E%3Ccircle cx='275.9' cy='321.6' r='0.61' fill='%23fff1de' opacity='0.117'/%3E%3Ccircle cx='43.6' cy='266.5' r='0.66' fill='%23ffffff' opacity='0.138'/%3E%3Ccircle cx='329.3' cy='379.9' r='0.53' fill='%23fff1de' opacity='0.089'/%3E%3Ccircle cx='296.8' cy='77.8' r='0.64' fill='%23cfddff' opacity='0.13'/%3E%3Ccircle cx='265.2' cy='392.0' r='1.11' fill='%23dfe8ff' opacity='0.303'/%3E%3Ccircle cx='165.3' cy='211.3' r='0.54' fill='%23ffffff' opacity='0.093'/%3E%3Ccircle cx='355.5' cy='194.0' r='0.57' fill='%23cfddff' opacity='0.102'/%3E%3Ccircle cx='319.2' cy='190.3' r='0.53' fill='%23dfe8ff' opacity='0.088'/%3E%3Ccircle cx='232.8' cy='339.2' r='0.64' fill='%23cfddff' opacity='0.129'/%3E%3Ccircle cx='251.0' cy='327.8' r='0.56' fill='%23ffffff' opacity='0.099'/%3E%3Ccircle cx='44.0' cy='219.3' r='1.03' fill='%23fff1de' opacity='0.273'/%3E%3Ccircle cx='20.5' cy='257.3' r='1.03' fill='%23ffffff' opacity='0.275'/%3E%3Ccircle cx='133.5' cy='314.2' r='1.37' fill='%23fff1de' opacity='0.397'/%3E%3Ccircle cx='12.5' cy='88.4' r='0.45' fill='%23fff1de' opacity='0.06'/%3E%3Ccircle cx='12.9' cy='313.8' r='0.54' fill='%23fff1de' opacity='0.092'/%3E%3Ccircle cx='409.6' cy='241.7' r='1.32' fill='%23cfddff' opacity='0.38'/%3E%3Ccircle cx='181.1' cy='303.4' r='0.9' fill='%23cfddff' opacity='0.227'/%3E%3Ccircle cx='331.8' cy='345.4' r='1.21' fill='%23ffffff' opacity='0.339'/%3E%3Ccircle cx='282.3' cy='424.5' r='1.38' fill='%23ffffff' opacity='0.401'/%3E%3Ccircle cx='247.6' cy='394.8' r='0.94' fill='%23dfe8ff' opacity='0.242'/%3E%3Ccircle cx='207.1' cy='216.7' r='1.7' fill='%23cfddff' opacity='0.519'/%3E%3Ccircle cx='157.8' cy='276.9' r='0.64' fill='%23fff1de' opacity='0.13'/%3E%3Ccircle cx='69.1' cy='194.6' r='0.46' fill='%23ffffff' opacity='0.064'/%3E%3Ccircle cx='379.4' cy='227.3' r='0.83' fill='%23cfddff' opacity='0.201'/%3E%3Ccircle cx='363.3' cy='73.4' r='0.85' fill='%23ffffff' opacity='0.207'/%3E%3Ccircle cx='315.7' cy='352.9' r='0.76' fill='%23dfe8ff' opacity='0.172'/%3E%3Ccircle cx='128.3' cy='355.6' r='0.5' fill='%23ffffff' opacity='0.08'/%3E%3Ccircle cx='247.6' cy='7.5' r='0.81' fill='%23dfe8ff' opacity='0.193'/%3E%3Ccircle cx='367.7' cy='233.6' r='0.54' fill='%23ffffff' opacity='0.092'/%3E%3Ccircle cx='35.7' cy='15.8' r='0.48' fill='%23fff1de' opacity='0.071'/%3E%3Ccircle cx='366.8' cy='332.0' r='0.45' fill='%23fff1de' opacity='0.06'/%3E%3Ccircle cx='142.6' cy='272.8' r='0.65' fill='%23cfddff' opacity='0.134'/%3E%3Ccircle cx='365.6' cy='222.6' r='0.82' fill='%23ffffff' opacity='0.196'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760' viewBox='0 0 760 760'%3E%3Ccircle cx='266.1' cy='503.2' r='0.45' fill='%23fff1de' opacity='0.06'/%3E%3Ccircle cx='250.3' cy='248.5' r='0.48' fill='%23ffffff' opacity='0.071'/%3E%3Ccircle cx='126.4' cy='581.0' r='0.45' fill='%23fff1de' opacity='0.06'/%3E%3Ccircle cx='249.0' cy='459.7' r='0.46' fill='%23fff1de' opacity='0.064'/%3E%3Ccircle cx='221.0' cy='82.2' r='0.45' fill='%23dfe8ff' opacity='0.061'/%3E%3Ccircle cx='64.7' cy='242.2' r='1.05' fill='%23cfddff' opacity='0.27'/%3E%3Ccircle cx='224.7' cy='44.0' r='0.54' fill='%23cfddff' opacity='0.091'/%3E%3Ccircle cx='426.4' cy='744.7' r='0.65' fill='%23ffffff' opacity='0.13'/%3E%3Ccircle cx='629.0' cy='162.1' r='0.45' fill='%23fff1de' opacity='0.06'/%3E%3Ccircle cx='592.2' cy='231.7' r='0.69' fill='%23cfddff' opacity='0.145'/%3E%3Ccircle cx='395.4' cy='513.6' r='1.1' fill='%23cfddff' opacity='0.29'/%3E%3Ccircle cx='76.1' cy='8.9' r='0.6' fill='%23fff1de' opacity='0.113'/%3E%3Ccircle cx='121.7' cy='488.3' r='0.63' fill='%23cfddff' opacity='0.125'/%3E%3Ccircle cx='115.9' cy='411.4' r='0.85' fill='%23fff1de' opacity='0.201'/%3E%3Ccircle cx='418.2' cy='447.9' r='0.55' fill='%23fff1de' opacity='0.095'/%3E%3Ccircle cx='263.3' cy='58.6' r='0.49' fill='%23fff1de' opacity='0.075'/%3E%3Ccircle cx='39.4' cy='23.3' r='0.77' fill='%23ffffff' opacity='0.172'/%3E%3Ccircle cx='483.8' cy='197.1' r='0.45' fill='%23ffffff' opacity='0.06'/%3E%3Ccircle cx='110.4' cy='525.3' r='0.67' fill='%23dfe8ff' opacity='0.138'/%3E%3Ccircle cx='507.9' cy='402.6' r='0.63' fill='%23ffffff' opacity='0.122'/%3E%3Ccircle cx='169.4' cy='301.4' r='0.91' fill='%23ffffff' opacity='0.221'/%3E%3Ccircle cx='431.4' cy='189.1' r='0.45' fill='%23dfe8ff' opacity='0.06'/%3E%3Ccircle cx='686.8' cy='619.2' r='1.26' fill='%23cfddff' opacity='0.346'/%3E%3Ccircle cx='382.6' cy='7.6' r='0.46' fill='%23fff1de' opacity='0.063'/%3E%3Ccircle cx='2.4' cy='580.4' r='0.92' fill='%23cfddff' opacity='0.226'/%3E%3Ccircle cx='580.1' cy='29.3' r='0.7' fill='%23cfddff' opacity='0.149'/%3E%3Ccircle cx='599.5' cy='172.6' r='0.53' fill='%23fff1de' opacity='0.089'/%3E%3Ccircle cx='85.3' cy='565.5' r='0.62' fill='%23ffffff' opacity='0.122'/%3E%3Ccircle cx='532.0' cy='540.7' r='0.75' fill='%23cfddff' opacity='0.165'/%3E%3Ccircle cx='566.7' cy='744.7' r='1.17' fill='%23dfe8ff' opacity='0.313'/%3E%3Ccircle cx='226.2' cy='267.5' r='1.29' fill='%23dfe8ff' opacity='0.355'/%3E%3Ccircle cx='757.5' cy='173.3' r='0.74' fill='%23cfddff' opacity='0.163'/%3E%3Ccircle cx='506.6' cy='574.5' r='0.95' fill='%23fff1de' opacity='0.237'/%3E%3Ccircle cx='316.3' cy='687.7' r='0.46' fill='%23fff1de' opacity='0.065'/%3E%3Ccircle cx='15.0' cy='181.6' r='0.76' fill='%23dfe8ff' opacity='0.17'/%3E%3Ccircle cx='66.0' cy='237.6' r='0.7' fill='%23ffffff' opacity='0.147'/%3E%3Ccircle cx='256.2' cy='657.9' r='0.59' fill='%23dfe8ff' opacity='0.11'/%3E%3Ccircle cx='744.4' cy='188.2' r='0.54' fill='%23dfe8ff' opacity='0.091'/%3E%3Ccircle cx='311.9' cy='390.4' r='0.87' fill='%23fff1de' opacity='0.209'/%3E%3Ccircle cx='439.1' cy='702.7' r='0.45' fill='%23ffffff' opacity='0.06'/%3E%3Ccircle cx='320.1' cy='382.1' r='0.7' fill='%23dfe8ff' opacity='0.15'/%3E%3Ccircle cx='551.8' cy='508.8' r='0.72' fill='%23cfddff' opacity='0.157'/%3E%3Ccircle cx='612.9' cy='87.1' r='1.21' fill='%23dfe8ff' opacity='0.328'/%3E%3Ccircle cx='40.7' cy='415.6' r='0.45' fill='%23cfddff' opacity='0.06'/%3E%3Ccircle cx='291.1' cy='506.6' r='1.08' fill='%23fff1de' opacity='0.281'/%3E%3Ccircle cx='290.0' cy='67.9' r='1.17' fill='%23dfe8ff' opacity='0.315'/%3E%3Ccircle cx='741.3' cy='488.2' r='0.5' fill='%23fff1de' opacity='0.079'/%3E%3Ccircle cx='114.0' cy='56.0' r='0.86' fill='%23dfe8ff' opacity='0.204'/%3E%3Ccircle cx='163.4' cy='613.7' r='1.17' fill='%23dfe8ff' opacity='0.316'/%3E%3Ccircle cx='525.0' cy='178.4' r='0.45' fill='%23ffffff' opacity='0.06'/%3E%3Ccircle cx='545.4' cy='552.8' r='0.47' fill='%23ffffff' opacity='0.066'/%3E%3Ccircle cx='377.7' cy='622.4' r='0.74' fill='%23ffffff' opacity='0.161'/%3E%3Ccircle cx='69.8' cy='480.2' r='0.51' fill='%23ffffff' opacity='0.081'/%3E%3Ccircle cx='187.9' cy='204.9' r='0.64' fill='%23ffffff' opacity='0.128'/%3E%3Ccircle cx='669.2' cy='276.2' r='0.99' fill='%23dfe8ff' opacity='0.251'/%3E%3Ccircle cx='456.8' cy='22.0' r='0.64' fill='%23cfddff' opacity='0.126'/%3E%3Ccircle cx='610.6' cy='485.0' r='0.65' fill='%23fff1de' opacity='0.132'/%3E%3Ccircle cx='318.4' cy='6.5' r='0.47' fill='%23cfddff' opacity='0.067'/%3E%3Ccircle cx='174.5' cy='361.0' r='0.49' fill='%23cfddff' opacity='0.075'/%3E%3Ccircle cx='139.8' cy='598.7' r='1.03' fill='%23cfddff' opacity='0.265'/%3E%3Ccircle cx='348.4' cy='461.3' r='0.57' fill='%23cfddff' opacity='0.102'/%3E%3Ccircle cx='708.8' cy='351.5' r='0.45' fill='%23ffffff' opacity='0.06'/%3E%3Ccircle cx='241.7' cy='346.3' r='1.05' fill='%23ffffff' opacity='0.272'/%3E%3Ccircle cx='522.3' cy='151.4' r='0.56' fill='%23fff1de' opacity='0.099'/%3E%3Ccircle cx='551.2' cy='1.2' r='1.22' fill='%23ffffff' opacity='0.331'/%3E%3Ccircle cx='170.2' cy='645.4' r='0.59' fill='%23fff1de' opacity='0.108'/%3E%3Ccircle cx='395.7' cy='244.8' r='0.79' fill='%23fff1de' opacity='0.18'/%3E%3Ccircle cx='7.9' cy='714.8' r='0.67' fill='%23dfe8ff' opacity='0.138'/%3E%3Ccircle cx='287.3' cy='135.7' r='0.46' fill='%23cfddff' opacity='0.064'/%3E%3Ccircle cx='628.3' cy='729.0' r='0.66' fill='%23fff1de' opacity='0.133'/%3E%3Ccircle cx='610.4' cy='428.5' r='0.46' fill='%23fff1de' opacity='0.064'/%3E%3Ccircle cx='127.0' cy='724.8' r='0.56' fill='%23cfddff' opacity='0.097'/%3E%3Ccircle cx='341.4' cy='506.4' r='0.76' fill='%23ffffff' opacity='0.171'/%3E%3Ccircle cx='648.9' cy='173.3' r='0.46' fill='%23fff1de' opacity='0.065'/%3E%3Ccircle cx='245.1' cy='166.8' r='0.74' fill='%23fff1de' opacity='0.161'/%3E%3Ccircle cx='677.1' cy='2.3' r='0.55' fill='%23ffffff' opacity='0.094'/%3E%3Ccircle cx='50.8' cy='615.3' r='0.73' fill='%23dfe8ff' opacity='0.159'/%3E%3Ccircle cx='105.6' cy='68.9' r='0.45' fill='%23cfddff' opacity='0.06'/%3E%3Ccircle cx='352.1' cy='670.4' r='0.98' fill='%23dfe8ff' opacity='0.246'/%3E%3Ccircle cx='352.6' cy='341.2' r='0.55' fill='%23ffffff' opacity='0.095'/%3E%3Ccircle cx='104.5' cy='88.5' r='0.51' fill='%23cfddff' opacity='0.083'/%3E%3Ccircle cx='159.3' cy='584.1' r='0.7' fill='%23dfe8ff' opacity='0.147'/%3E%3Ccircle cx='96.6' cy='87.2' r='0.61' fill='%23fff1de' opacity='0.117'/%3E%3Ccircle cx='617.9' cy='82.5' r='1.19' fill='%23ffffff' opacity='0.32'/%3E%3Ccircle cx='395.4' cy='397.7' r='0.54' fill='%23fff1de' opacity='0.09'/%3E%3Ccircle cx='435.9' cy='216.4' r='1.22' fill='%23fff1de' opacity='0.331'/%3E%3Ccircle cx='145.8' cy='677.8' r='0.51' fill='%23ffffff' opacity='0.082'/%3E%3Ccircle cx='461.8' cy='87.9' r='1.15' fill='%23fff1de' opacity='0.306'/%3E%3Ccircle cx='301.2' cy='369.1' r='0.52' fill='%23cfddff' opacity='0.085'/%3E%3Ccircle cx='557.6' cy='125.8' r='0.57' fill='%23dfe8ff' opacity='0.102'/%3E%3Ccircle cx='699.3' cy='591.9' r='0.63' fill='%23ffffff' opacity='0.123'/%3E%3Ccircle cx='92.5' cy='679.1' r='1.13' fill='%23dfe8ff' opacity='0.301'/%3E%3Ccircle cx='484.2' cy='151.3' r='0.74' fill='%23dfe8ff' opacity='0.163'/%3E%3Ccircle cx='485.5' cy='686.8' r='0.49' fill='%23cfddff' opacity='0.075'/%3E%3Ccircle cx='14.6' cy='429.2' r='0.55' fill='%23fff1de' opacity='0.095'/%3E%3Ccircle cx='281.7' cy='70.9' r='1.27' fill='%23fff1de' opacity='0.351'/%3E%3Ccircle cx='654.9' cy='261.1' r='0.45' fill='%23cfddff' opacity='0.061'/%3E%3Ccircle cx='178.3' cy='265.0' r='1.16' fill='%23ffffff' opacity='0.311'/%3E%3Ccircle cx='297.6' cy='207.3' r='0.45' fill='%23cfddff' opacity='0.061'/%3E%3Ccircle cx='684.6' cy='220.4' r='1.12' fill='%23ffffff' opacity='0.295'/%3E%3Ccircle cx='227.9' cy='422.4' r='0.48' fill='%23dfe8ff' opacity='0.071'/%3E%3Ccircle cx='280.4' cy='509.0' r='0.58' fill='%23dfe8ff' opacity='0.106'/%3E%3Ccircle cx='260.0' cy='264.2' r='0.45' fill='%23dfe8ff' opacity='0.06'/%3E%3Ccircle cx='10.5' cy='394.1' r='0.47' fill='%23ffffff' opacity='0.066'/%3E%3Ccircle cx='311.9' cy='241.2' r='0.48' fill='%23ffffff' opacity='0.072'/%3E%3Ccircle cx='521.3' cy='731.8' r='0.46' fill='%23fff1de' opacity='0.065'/%3E%3Ccircle cx='472.6' cy='108.9' r='0.46' fill='%23ffffff' opacity='0.064'/%3E%3Ccircle cx='537.4' cy='614.4' r='0.51' fill='%23dfe8ff' opacity='0.082'/%3E%3Ccircle cx='311.4' cy='213.5' r='0.49' fill='%23ffffff' opacity='0.075'/%3E%3Ccircle cx='342.8' cy='746.6' r='0.47' fill='%23cfddff' opacity='0.068'/%3E%3Ccircle cx='205.2' cy='206.9' r='0.79' fill='%23cfddff' opacity='0.18'/%3E%3Ccircle cx='394.7' cy='452.1' r='0.68' fill='%23fff1de' opacity='0.142'/%3E%3Ccircle cx='525.3' cy='106.2' r='1.0' fill='%23dfe8ff' opacity='0.253'/%3E%3Ccircle cx='283.3' cy='403.2' r='1.15' fill='%23ffffff' opacity='0.306'/%3E%3Ccircle cx='525.4' cy='620.5' r='0.72' fill='%23cfddff' opacity='0.156'/%3E%3Ccircle cx='499.9' cy='20.6' r='0.59' fill='%23fff1de' opacity='0.111'/%3E%3Ccircle cx='284.1' cy='624.9' r='1.09' fill='%23cfddff' opacity='0.287'/%3E%3Ccircle cx='597.3' cy='744.5' r='0.83' fill='%23fff1de' opacity='0.195'/%3E%3Ccircle cx='199.8' cy='133.8' r='0.52' fill='%23dfe8ff' opacity='0.084'/%3E%3Ccircle cx='223.1' cy='33.4' r='1.16' fill='%23ffffff' opacity='0.312'/%3E%3Ccircle cx='555.2' cy='699.2' r='0.45' fill='%23cfddff' opacity='0.061'/%3E%3Ccircle cx='372.9' cy='441.5' r='0.75' fill='%23fff1de' opacity='0.167'/%3E%3Ccircle cx='168.9' cy='3.4' r='1.12' fill='%23cfddff' opacity='0.295'/%3E%3Ccircle cx='176.0' cy='597.1' r='1.24' fill='%23dfe8ff' opacity='0.338'/%3E%3Ccircle cx='94.3' cy='408.3' r='0.91' fill='%23cfddff' opacity='0.221'/%3E%3Ccircle cx='308.6' cy='197.9' r='1.25' fill='%23ffffff' opacity='0.343'/%3E%3Ccircle cx='724.6' cy='279.8' r='0.48' fill='%23dfe8ff' opacity='0.069'/%3E%3Ccircle cx='623.4' cy='666.7' r='0.45' fill='%23cfddff' opacity='0.061'/%3E%3Ccircle cx='56.8' cy='179.3' r='0.96' fill='%23dfe8ff' opacity='0.242'/%3E%3Ccircle cx='336.1' cy='418.8' r='0.81' fill='%23dfe8ff' opacity='0.188'/%3E%3Ccircle cx='640.5' cy='167.5' r='1.07' fill='%23dfe8ff' opacity='0.28'/%3E%3Ccircle cx='703.6' cy='647.1' r='1.1' fill='%23dfe8ff' opacity='0.29'/%3E%3Ccircle cx='261.1' cy='533.2' r='1.09' fill='%23cfddff' opacity='0.284'/%3E%3Ccircle cx='686.7' cy='683.0' r='0.65' fill='%23fff1de' opacity='0.129'/%3E%3Ccircle cx='263.1' cy='496.7' r='0.46' fill='%23cfddff' opacity='0.064'/%3E%3Ccircle cx='75.7' cy='657.4' r='0.47' fill='%23fff1de' opacity='0.068'/%3E%3Ccircle cx='411.2' cy='203.4' r='1.07' fill='%23dfe8ff' opacity='0.277'/%3E%3Ccircle cx='256.6' cy='213.9' r='0.46' fill='%23cfddff' opacity='0.064'/%3E%3Ccircle cx='55.6' cy='243.0' r='0.45' fill='%23fff1de' opacity='0.06'/%3E%3Ccircle cx='229.0' cy='295.6' r='0.46' fill='%23cfddff' opacity='0.063'/%3E%3Ccircle cx='551.0' cy='21.1' r='1.17' fill='%23ffffff' opacity='0.313'/%3E%3Ccircle cx='67.8' cy='200.6' r='0.48' fill='%23ffffff' opacity='0.07'/%3E%3Ccircle cx='267.6' cy='372.5' r='0.61' fill='%23dfe8ff' opacity='0.115'/%3E%3Ccircle cx='651.6' cy='347.4' r='0.68' fill='%23dfe8ff' opacity='0.143'/%3E%3Ccircle cx='481.5' cy='695.0' r='0.51' fill='%23ffffff' opacity='0.08'/%3E%3Ccircle cx='91.6' cy='355.6' r='0.48' fill='%23fff1de' opacity='0.07'/%3E%3Ccircle cx='754.7' cy='4.6' r='0.45' fill='%23fff1de' opacity='0.06'/%3E%3Ccircle cx='664.9' cy='642.7' r='0.49' fill='%23ffffff' opacity='0.075'/%3E%3Ccircle cx='35.2' cy='409.8' r='0.5' fill='%23cfddff' opacity='0.079'/%3E%3Ccircle cx='204.4' cy='569.8' r='0.65' fill='%23dfe8ff' opacity='0.13'/%3E%3C/svg%3E"); background-size: 430px 430px, 760px 760px; background-repeat: repeat, repeat; } :root[data-thema="hell"] body.kein-webgl #buehne { background-image: none; } #css3d { position: fixed; inset: 0; z-index: 1; overflow: hidden; touch-action: none; } #css3d > div { user-select: none; touch-action: none; } body.dreid #panelquelle { display: none; } /* Rückfall ohne WebGL: Kacheln bleiben als gestapelte Seite bedienbar */ #panelquelle { position: relative; z-index: 2; display: grid; gap: 16px; max-width: 1100px; margin: 0 auto; padding: 70px 16px 90px; overflow: auto; max-height: 100%; } body:not(.dreid) .panel { width: auto !important; height: auto !important; } /* Marke, fest oben links ─────────────────────────────────────────── */ #marke { position: fixed; left: 18px; top: 14px; z-index: 6; display: flex; align-items: center; gap: 10px; pointer-events: none; } #marke .logo-mark { width: 36px; height: 36px; } #marke .logo-name { font-size: 20px; font-weight: 800; } #marke .logo-name .zwei { color: var(--hellblau); font-weight: 600; font-size: 14px; } #marke .logo-sub { font-size: 8px; letter-spacing: .12em; color: var(--gedaempft); } /* Kachel-Grundform: alle gleich groß ─────────────────────────────── */ .panel { box-sizing: border-box; width: var(--kachel-b); height: var(--kachel-h); display: flex; flex-direction: column; background: var(--glas); border: 1px solid var(--glas-rand); border-radius: 18px; padding: 14px 16px; color: var(--text); box-shadow: var(--glas-schein); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); overflow: visible; cursor: pointer; /* visible seit 02.10. (Holo-Kopfzeile hängt über der Box); den Inhalt clippt .kachel-inhalt */ transition: opacity .35s ease, box-shadow .35s ease; } .panel.aktiv { cursor: auto; padding-top: 44px; /* 14.10.: Kopfstreifen für den Lesen-Knopf (28 px + Luft) — der Knopf liegt IN der Kachel, aber über keinem Inhalt */ box-shadow: var(--kachel-aktiv-schein, 0 0 0 1px #60a5fa inset, 0 0 60px #3b82f655, 0 32px 70px #00000099); } body.gezoomt .panel:not(.aktiv):not(.panel-score) { opacity: .55; } .panel.hinter-kamera { visibility: hidden; pointer-events: none; } /* hinter der Kamera: kein Treffer-Fang */ .panel.vor-erde:not(.aktiv) { opacity: .07 !important; pointer-events: none; } /* würde die Erde verdecken */ .panel.karte { background: var(--glas); border-color: var(--glas-rand); } .panel::before { /* feine Lichtkante oben */ content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, #93c5fd99, #c4b5fd99, transparent); pointer-events: none; } .kachel-titel { flex: 0 0 auto; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 2px 2px 10px; min-height: 29px; box-sizing: border-box; border-bottom: 1px solid var(--rand); margin-bottom: 10px; color: var(--titel-farbe, #7dd3fc); text-shadow: var(--titel-schein, 0 0 6px #38bdf8cc, 0 0 16px #0ea5e988, 0 0 30px #0ea5e944); } /* Neonblau; Farbe/Schein seit 03.10. über die Palette (aaos2.js farbenAnwenden, Kategorie „Kacheltitel") */ :root[data-thema="hell"] .kachel-titel { color: #0369a1; text-shadow: 0 0 8px #38bdf866; } /* Schreibmaschine: die Kachel vor der Kugel tippt ihre Überschrift (aaos2.js) — beim Tippen neongelb, danach wieder blau */ .kachel-titel.tippt { color: #ffd60a !important; text-shadow: 0 0 6px #ffd60acc, 0 0 16px #facc1588, 0 0 30px #facc1544 !important; } .kachel-titel.tippt::after { content: "▍"; margin-left: 1px; color: #ffd60a; animation: tipp-cursor .8s steps(1, end) infinite; } .kachel-titel.tippt > * { display: none; } /* 24.10.: Unterelemente (Stand-Spans) bleiben im DOM, nur während des Tippens weg — sonst stünde der Cursor hinter dem Stand */ @keyframes tipp-cursor { 50% { opacity: 0; } } .kachel-inhalt { flex: 1; min-height: 0; overflow: auto; } /* Holo-Kopfzeile ÜBER jeder Kachel (aaos2.js panelAnlegen) — Nutzer 02.10.: „zusätzlicher Header, links über jeder, in Computer-Holo-Schrift, weiß, leicht leuchtend". Oxanium (Gaming-HUD, variabel 200–800, aus ~/Services/fonts), Laufnummer fett + Titel, feine Linie über die Kachelbreite. Hängt außerhalb der Kachelbox (bottom: 100 %), deshalb .panel overflow: visible. 26 px, weil die Kachel in der Übersicht nur ~0,26–0,36-fach erscheint (12-px-Titel wären dort 3–4 px). */ @font-face { font-family: "Oxanium"; src: url("vendor/fonts/Oxanium.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; } .kachel-holo { position: absolute; left: 2px; right: 2px; bottom: calc(100% + 10px); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; font-family: "Oxanium", "JetBrains Mono", ui-monospace, sans-serif; font-size: 26px; font-weight: 400; /* 400 statt 500: „Schrift ein bisschen dünner" (02.10.); Nummer raus */ letter-spacing: .14em; text-transform: uppercase; line-height: 1; color: var(--holo-farbe, #ffffff); /* Farbe/Schein setzt aaos2.js farbenAnwenden (Palette + Glow) */ text-shadow: var(--holo-schein, 0 0 5px #ffffffb3, 0 0 14px #bfe6ff80, 0 0 30px #7dd3fc44); opacity: .94; } .kachel-holo::after { content: ""; display: block; height: 1px; margin-top: 8px; background: var(--holo-linie, linear-gradient(90deg, #ffffffcc, #ffffff33 55%, transparent)); } body.anordnen .kachel-holo { opacity: .4; } /* Lesemodus-Knopf rechts oben IN der Kachel (12.10., aaos2.js panelAnlegen) — klein, erst wenn die Kachel offen ist (.panel.aktiv), sonst gar nicht im Layout. Kein [hidden]-Attribut, sondern display über die Klasse der Kachel; aktiv wird über Farbe und Schein gezeigt, nicht über den Hintergrund. */ .panel .kachel-lesen { display: none; } .panel.aktiv .kachel-lesen { display: flex; align-items: center; justify-content: center; position: absolute; top: 8px; right: 9px; z-index: 6; /* 14.10. zweite Fassung: im Kopfstreifen (.panel.aktiv padding-top 44px). Die erste Fassung „über der Kachelkante" (top −42px) lag bei hohen Kacheln außerhalb des Bildes und sonst unter der Werkzeugleiste — gemessen: Nachrichten y −64, Trades unter #werkzeuge. Davor 9/9 px ohne Streifen, wo er „aktualisieren" und „Alle Nachrichten →" verdeckte. */ width: 28px; height: 28px; padding: 0; border-radius: 9px; cursor: pointer; background: #0b1020cc; border: 1px solid var(--rand); color: var(--gedaempft); transition: color .2s ease, border-color .2s ease, box-shadow .2s ease; } .panel.aktiv .kachel-lesen svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .panel.aktiv .kachel-lesen:hover { color: #e6edf7; border-color: #60a5fa88; box-shadow: 0 0 12px #3b82f655; } .panel.aktiv .kachel-lesen.aktiv { color: #ffd60a; border-color: #ffd60a99; box-shadow: 0 0 14px #ffd60a55; } /* 14.10.: kein padding-right an .kachel-titel mehr — der Lesen-Knopf sitzt über der Kachelkante, nicht mehr in der Titelzeile */ :root[data-thema="hell"] .panel.aktiv .kachel-lesen { background: #ffffffe6; color: #475569; border-color: #cbd5e1; } :root[data-thema="hell"] .panel.aktiv .kachel-lesen.aktiv { color: #b45309; border-color: #f59e0b99; } :root[data-thema="hell"] .kachel-holo { color: #17233c; text-shadow: 0 0 6px #ffffff; } :root[data-thema="hell"] .kachel-holo::after { background: linear-gradient(90deg, #17233c99, transparent); } .panel .ansicht { display: block; } .panel.karte > .indi-liste, .panel.karte > .news-liste { flex: 1; min-height: 0; overflow: auto; } .panel.karte .karten-titel { flex: 0 0 auto; } .senti-fuss { margin-top: 14px; } /* Paar-Kachel */ #view-analyse .suche { max-width: none; margin-bottom: 10px; } #view-analyse .suche input { padding: 11px 48px 11px 42px; font-size: 14px; } #view-analyse .such-los { top: 5px; right: 6px; height: 32px; } #view-analyse .symbol-kopf { gap: 12px 18px; padding: 12px 14px; margin-bottom: 10px; } #view-analyse .coin-icon { width: 48px; height: 48px; font-size: 20px; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; } #view-analyse .coin-icon:hover { transform: scale(1.08); box-shadow: 0 0 18px #60a5fa88; } #view-analyse .preis { font-size: 24px; } .paar-hinweis { margin-top: 4px; } /* KI-Kachel: die Chat-Einleitung („Analysiere … bitte." / „Hier ist meine aktuelle Analyse …" samt Zeit und Avataren) bleibt weg — nur die direkten Kinder von #chat; Fragen und Antworten in #antworten nutzen dieselben Klassen und bleiben. */ [data-panel="ki"] #chat > .nutzer-zeile, [data-panel="ki"] #chat > .ki-zeile > .ki-avatar, [data-panel="ki"] #chat > .ki-zeile > div > .ki-blase:first-child, [data-panel="ki"] #chat > .ki-zeile > div > .ki-blase:first-child + .zeit { display: none; } [data-panel="ki"] #chat > .ki-zeile > div > .setup-raster:first-of-type { margin-top: 0 !important; } /* KI-Kachel: Chat rollt, Frage-Zeile bleibt unten */ .kachel-ki { display: flex; flex-direction: column; overflow: hidden; } .kachel-ki .tab { flex: 1; min-height: 0; overflow: auto; } .kachel-ki .eingabe-zeile { flex: 0 0 auto; margin-top: 10px; } .panel .tab { padding: 12px 14px; } .panel .setup-raster, .panel .liq-raster { grid-template-columns: 1fr; } /* Score-Quelle: app.js schreibt hinein, aaos2.js liest aus — nie sichtbar. ([hidden] verliert gegen das display:flex von .panel, daher !important.) */ .panel-score { display: none !important; } /* X-Kachel (11.10.2026): je Konto ein Kopf (Link · Posts holen · ×) und darunter die zuletzt gelesenen Posts. Konten kommen aus /api/x, nicht mehr aus dem HTML. */ /* KEIN overflow hier: ein eigener overflow macht die Liste zum Scroll-Behaelter, und position:sticky der Eingabezeile haette dann keinen Scrollweg. Gescrollt wird .kachel-inhalt (gemessen 11.10.: clientH 531 / scrollH 670). */ [data-panel="social"] .x-liste { display: flex; flex-direction: column; gap: 10px; } /* 23.10.: X ist ein Reiter der Kachel „Social Media“ */ .x-konto { border-bottom: 1px solid var(--rand); padding-bottom: 8px; } .x-konto:last-of-type { border-bottom: 0; } .x-kopf { display: flex; align-items: center; gap: 8px; } .x-kopf .x-chip { flex: 1; min-width: 0; } .x-kopf .x-holen { flex: 0 0 auto; font-size: 11px; padding: 4px 9px; cursor: pointer; } .x-kopf .x-holen:disabled { opacity: .55; cursor: default; } .x-posts { margin-top: 4px; padding-left: 4px; border-left: 2px solid #38bdf840; } .x-stand { font-size: 10.5px; color: var(--gedaempft); padding: 2px 0 2px 8px; } .x-post { align-items: flex-start; } .x-post .news-text { white-space: normal; } .panel .kanal-zeile { background: var(--karte-voll); border-radius: 10px; } /* Market Intelligence: dunkle Luxus-Kachel, Violett/Cyan-Akzente, Glas und Licht ── */ .panel-mi { background: radial-gradient(130% 80% at 50% -10%, #a855f71a, transparent 55%), linear-gradient(165deg, #070910f4, #04060cf2); border-color: #a855f73d; box-shadow: 0 0 0 1px #0e1226 inset, 0 0 48px #a855f71c, 0 0 90px #22d3ee0f, 0 34px 70px #000000b8; } .panel-mi::before { background: linear-gradient(90deg, transparent, #22d3eeb3, #a855f7b3, transparent); } .mi-inhalt { display: flex; flex-direction: column; gap: 10px; container-type: inline-size; } .mi-hero { position: relative; flex: 0 0 auto; padding: 12px 14px 10px; border-radius: 14px; background: radial-gradient(120% 90% at 50% 0%, #22d3ee14, transparent 60%), linear-gradient(180deg, #0b0f1fd9, #06080fd9); box-shadow: 0 0 0 1px #ffffff0c inset, 0 12px 30px #00000066; } .mi-hero::after { /* Glanzkante links oben */ content: ""; position: absolute; left: 14px; top: 0; width: 42%; height: 1px; background: linear-gradient(90deg, #67e8f9aa, transparent); pointer-events: none; } .mi-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #67e8f9; display: flex; align-items: center; gap: 6px; } .mi-wert { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; } .mi-coin { font-size: 22px; font-weight: 800; letter-spacing: .04em; color: #e9ecff; } .mi-richtung { font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gedaempft); } .mi-richtung.long { color: var(--bull); } .mi-richtung.short { color: var(--bear); } .mi-prozent { margin-left: auto; font-size: 42px; font-weight: 800; letter-spacing: -1px; line-height: 1; color: #fff; text-shadow: 0 0 16px #ffffff55, 0 0 40px #22d3ee4d; } .panel-mi .senti-balken { margin-top: 10px; height: 8px; background: #ef44443a; } .panel-mi .senti-fuellung { background: linear-gradient(90deg, #15803d, #22c55e); box-shadow: 0 0 12px #22c55e66; } .panel-mi .senti-zeile { margin-top: 7px; font-size: 12.5px; } .panel-mi .senti-zeile .bull { color: var(--bull); } .panel-mi .senti-zeile .bear { color: var(--bear); } .mi-fuss { margin-top: 8px; font-size: 11px; line-height: 1.45; } .panel-mi .score-info { margin-top: 10px; background: #0a0d1ae6; border: 1px solid #a855f733; border-radius: 12px; padding: 10px 12px; font-size: 12px; line-height: 1.5; color: var(--gedaempft); } .mi-trenner { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #c4b5fd; } .mi-trenner::before, .mi-trenner::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #a855f766, transparent); } .panel-mi .indi-liste { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: 1fr; gap: 0 18px; align-content: start; } .panel-mi .indi-zeile { font-size: 12.5px; padding: 5px 2px; border-top-color: #ffffff0f; } .panel-mi .indi-name { color: #aab7d6; } @container (min-width: 560px) { .panel-mi .indi-liste { grid-template-columns: 1fr 1fr; } .panel-mi .indi-zeile:nth-child(2) { border-top: 0; } } :root[data-thema="hell"] .panel-mi { background: var(--glas); border-color: #a855f766; box-shadow: 0 0 0 1px #ffffff inset, 0 0 42px #a855f722, 0 32px 70px #1f2a4433; } :root[data-thema="hell"] .mi-hero { background: linear-gradient(180deg, #ffffffd9, #eef2fad9); box-shadow: 0 0 0 1px #c7d2fe inset, 0 12px 30px #1f2a4422; } :root[data-thema="hell"] .mi-coin, :root[data-thema="hell"] .mi-prozent { color: #17233c; text-shadow: none; } :root[data-thema="hell"] .mi-label { color: #0e7490; } :root[data-thema="hell"] .mi-trenner { color: #6d28d9; } :root[data-thema="hell"] .panel-mi .score-info { background: #ffffffe6; } :root[data-thema="hell"] .panel-mi .indi-zeile { border-top-color: var(--rand); } /* Long- und Short-Kachel: grün bzw. violett gekennzeichnet ───────── */ /* 15.10.2026 spät (Nutzer: „beim Long, beim Short und beim Custom Trade nicht ganz so leuchten, ein bisschen weniger"): Schein in allen Stufen (Grund, aktiv, Schimmer, stark) auf rund 80 % Reichweite und 75 % Deckkraft */ .panel-long { border-color: #22c55ecc; box-shadow: 0 0 0 1px #14532d inset, 0 0 56px #22c55e4d, 0 0 120px #22c55e24, 0 32px 70px #00000099; /* 14.10.: heller als jede andere Kachel (Nutzer: „das short long fenster muss heller leuchten als alle andern"); Grundkachel 42 px/11 %, aktiv 60 px/33 % */ background: linear-gradient(165deg, #05070cf7, #020308f5); } /* schwarze Füllung wie Market Intelligence */ .panel-long::before { background: linear-gradient(90deg, transparent, #22c55ecc, #86efacaa, transparent); } .panel-long .kachel-titel { color: #4ade80; border-bottom-color: #22c55e44; text-shadow: 0 0 6px #4ade80cc, 0 0 16px #22c55e88; } .panel-long .kachel-titel.tippt::after { color: #4ade80; } /* 15.10.2026 (Nutzer: Long ist grün leuchtend wie jetzt, das Short wechselt auf rot): alle .panel-short-Töne Violett zu Rot */ .panel-short { border-color: #ef4444cc; box-shadow: 0 0 0 1px #450a0a inset, 0 0 56px #ef44444d, 0 0 120px #ef444424, 0 32px 70px #00000099; background: linear-gradient(165deg, #05070cf7, #020308f5); } .panel-short::before { background: linear-gradient(90deg, transparent, #ef4444cc, #fca5a5aa, transparent); } .panel-short .kachel-titel { color: #f87171; border-bottom-color: #ef444444; text-shadow: 0 0 6px #f87171cc, 0 0 16px #ef444488; } .panel-short .kachel-titel.tippt::after { color: #f87171; } .panel-long.aktiv { box-shadow: 0 0 0 1px #4ade80 inset, 0 0 72px #22c55e73, 0 0 150px #22c55e33, 0 32px 70px #00000099; } .panel-short.aktiv { box-shadow: 0 0 0 1px #f87171 inset, 0 0 72px #ef444473, 0 0 150px #ef444433, 0 32px 70px #00000099; } /* 15.10.2026 (Nutzer: „die Begründung vom Long und die Begründung vom Short sollen nicht leuchten, nur das Long- und das Short-Fenster"): die beiden Begründungs-Kacheln tragen dieselben Klassen panel-long/-short (Titelfarbe) — hier bekommen sie Rahmen und Schein einer normalen Kachel zurück, die Überschrift behält ihre Farbe, aber ohne Leuchtschatten. */ .panel[data-panel="begruendungLong"], .panel[data-panel="begruendungShort"] { border-color: var(--glas-rand); box-shadow: var(--glas-schein); } .panel[data-panel="begruendungLong"].aktiv, .panel[data-panel="begruendungShort"].aktiv { box-shadow: var(--kachel-aktiv-schein, 0 0 0 1px #60a5fa inset, 0 0 60px #3b82f655, 0 32px 70px #00000099); } .panel[data-panel="begruendungLong"] .kachel-titel, .panel[data-panel="begruendungShort"] .kachel-titel { text-shadow: none; } /* ── Alarm: neue Meldung ab 40 % Auswirkung (aaos2.js alarmAktualisieren) ── Nachrichten-Kachel: bernsteinfarben aufleuchten (Rahmen, Schein, Titel) und blinken, bis sie angeklickt wird. Der Puls läuft über ein Pseudo-Element mit Innenschein, animiert wird nur dessen Opacity — der Blur-Hintergrund der Kachel muss so nicht je Frame neu gezeichnet werden. */ .panel.alarm { border-color: #ffd60a; box-shadow: 0 0 0 1px #ffd60a inset, 0 0 70px #ffd60a77, 0 32px 70px #00000099; } .panel.alarm::before { background: linear-gradient(90deg, transparent, #ffd60a, #fff3b0, transparent); } .panel.alarm .kachel-titel { color: #ffd60a; border-bottom-color: #ffd60a55; text-shadow: 0 0 6px #ffd60acc, 0 0 16px #facc1588, 0 0 30px #facc1544; } .panel.alarm::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 2px #ffd60a inset, 0 0 48px #ffd60a99 inset; background: radial-gradient(ellipse at 50% 0%, #ffd60a33, transparent 60%); animation: kachel-alarm 1s ease-in-out infinite; } @keyframes kachel-alarm { 0%, 100% { opacity: 1; } 50% { opacity: .06; } } :root[data-thema="hell"] .panel.alarm .kachel-titel { color: #b45309; text-shadow: 0 0 8px #f59e0b66; } /* Long-/Short-Kachel: Schimmer — ein Lichtstreifen wandert von links nach rechts über die Kachel (grün bzw. violett), dazu ein etwas hellerer Schein; läuft, solange eine ungesehene Meldung ab 40 % in diese Richtung vorliegt. */ .panel.schimmer::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background-image: linear-gradient(115deg, transparent 38%, #ffffff2e 48%, #ffffff55 50%, #ffffff2e 52%, transparent 62%); background-size: 260% 100%; background-repeat: no-repeat; background-position: 100% 0; animation: kachel-schimmer 2.8s ease-in-out infinite; } .panel-long.schimmer::after { background-image: linear-gradient(115deg, transparent 38%, #86efac33 48%, #bbf7d088 50%, #86efac33 52%, transparent 62%); } .panel-short.schimmer::after { background-image: linear-gradient(115deg, transparent 38%, #fca5a533 48%, #fee2e288 50%, #fca5a533 52%, transparent 62%); } .panel-long.schimmer:not(.aktiv) { border-color: #22c55edd; box-shadow: 0 0 0 1px #14532d inset, 0 0 64px #22c55e66, 0 0 130px #22c55e33, 0 32px 70px #00000099; } .panel-short.schimmer:not(.aktiv) { border-color: #ef4444dd; box-shadow: 0 0 0 1px #450a0a inset, 0 0 64px #ef444466, 0 0 130px #ef444433, 0 32px 70px #00000099; } /* Hintergrundbild 2,6-fach breit: Position 100 % = Streifen links außerhalb, 0 % = rechts außerhalb; die Pause am Ende ist Absicht (ein Streifen alle 2,8 s, nicht Dauerglanz) */ @keyframes kachel-schimmer { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0% 0; } } /* ── Leuchten der Long-/Short-Kachel nach Prozent (aaos2.js scoreLesen): seit 08.10. spät STUFENLOS statt Schwelle 70 % (Nutzer: „nicht so stark, auch bei 88 % wirklich dezent — von normal langsam immer heller"). --st = (Anteil − 50 %) / 50 % als Inline-Variable; .stark liegt an, sobald die Seite über 50 % hat. Bei --st 0 entspricht die Regel exakt dem Grundzustand (42 px, 13 %), bei --st 1 höchstens 30 % innen und 14 % außen — weit unter dem alten Stark-Schein (53/40 %). Ein Zustand, kein Alarm: kein Blinken, kein Quittieren; dreifache Klassen-Spezifität gegen `.schimmer:not(.aktiv)`/`.aktiv`. */ /* 14.10.: Grundwerte angehoben (70 px / 40 % statt 42 px / 13 %), damit die Richtungs-Kacheln auch ohne Übergewicht heller sind als jede andere Kachel; bei --st 1 höchstens 65 % innen und 35 % außen */ .panel.panel-long.stark { --st: 0; border-color: color-mix(in srgb, #4ade80 calc(80% + 20% * var(--st)), transparent); box-shadow: 0 0 0 1px color-mix(in srgb, #4ade80 calc(45% * var(--st)), #14532d) inset, 0 0 calc(56px + 16px * var(--st)) color-mix(in srgb, #22c55e calc(30% + 20% * var(--st)), transparent), 0 0 calc(120px + 40px * var(--st)) color-mix(in srgb, #22c55e calc(14% + 11% * var(--st)), transparent), 0 32px 70px #00000099; } .panel.panel-short.stark { --st: 0; border-color: color-mix(in srgb, #f87171 calc(80% + 20% * var(--st)), transparent); box-shadow: 0 0 0 1px color-mix(in srgb, #f87171 calc(45% * var(--st)), #450a0a) inset, 0 0 calc(56px + 16px * var(--st)) color-mix(in srgb, #ef4444 calc(30% + 20% * var(--st)), transparent), 0 0 calc(120px + 40px * var(--st)) color-mix(in srgb, #ef4444 calc(14% + 11% * var(--st)), transparent), 0 32px 70px #00000099; } .panel-long.stark .kachel-titel { color: color-mix(in srgb, #4ade80, #bbf7d0 calc(55% * var(--st))); text-shadow: 0 0 6px #4ade80cc, 0 0 16px #22c55e88, 0 0 calc(30px * var(--st)) color-mix(in srgb, #22c55e calc(45% * var(--st)), transparent); } .panel-short.stark .kachel-titel { color: color-mix(in srgb, #f87171, #fecaca calc(55% * var(--st))); text-shadow: 0 0 6px #f87171cc, 0 0 16px #ef444488, 0 0 calc(30px * var(--st)) color-mix(in srgb, #ef4444 calc(45% * var(--st)), transparent); } /* Die Karten darin folgen der Kachelfarbe (Klassik bleibt Blau/Magenta) */ .panel .richtung-karte.long { border-color: #22c55e88; box-shadow: 0 0 22px #22c55e22; } .panel .richtung-karte.short { border-color: #ef444488; box-shadow: 0 0 22px #ef444422; } /* 15.10.: rot wie die Short-Kachel */ .panel .long .richtung-icon { background: linear-gradient(135deg, #15803d, #4ade80); } .panel .short .richtung-icon { background: linear-gradient(135deg, #b91c1c, #f87171); } .panel .long .richtung-name, .panel .long .richtung-wk b { color: #4ade80; } .panel .short .richtung-name { color: #f87171; } .panel .short .richtung-wk b { color: #f87171; } .panel .long .tv-zeichnen:hover, .panel .short .tv-zeichnen:hover { color: #ffc999; border-color: #fb923c; background: #f9731618; } /* 14.10.: orange in beiden Richtungen (Nutzer: „levels in tradingview einzeichnen lassen soll orange sein"); Grundfarbe in styles.css .tv-zeichnen */ .setup-ziel .richtung-karte { padding: 14px 16px; background: #05070cd9; } .setup-ziel .setup-zeile { padding: 7px 0; } .setup-ziel .marken { margin-top: 2px; border-top: 1px dashed #ffffff22; } .setup-ziel .marken .setup-zeile span { color: #aab7d6; } .setup-kachel { display: flex; flex-direction: column; gap: 10px; } .setup-kachel .setup-ziel { flex: 0 0 auto; } .news-kurz-block { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; } .news-kurz { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; } .news-kurz-zeile { display: flex; gap: 10px; align-items: baseline; padding: 6px 2px; border-top: 1px solid #ffffff0f; color: var(--text); text-decoration: none; font-size: 12px; line-height: 1.35; } .news-kurz-zeile:first-child { border-top: 0; } .news-kurz-zeile:hover span { color: var(--hellblau); } .news-kurz-zeile b { flex: 0 0 44px; font-size: 14px; font-weight: 800; letter-spacing: -.02em; } .news-kurz-zeile span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .news-kurz-zeile.r-bullish b { color: #4ade80; } .news-kurz-zeile.r-bearish b { color: #ef4444; } .news-kurz-zeile.r-gemischt b { color: #facc15; } .news-kurz-zeile.r-neutral b { color: var(--gedaempft); } /* X-Konten: Links untereinander */ [data-panel="social"] .x-liste { flex-direction: column; align-items: stretch; gap: 8px; } .x-chip { display: flex; flex-direction: column; gap: 2px; text-decoration: none; text-align: left; padding: 8px 14px; } .x-chip b { font-size: 13.5px; color: var(--text); } .x-chip span { font-size: 11.5px; color: var(--gedaempft); font-weight: 500; } .x-chip:hover b { color: var(--hellblau); } [data-panel="social"] #xHinweis { margin-top: 12px; } [data-panel="social"] .reddit-reiter { margin: 0 0 10px; } [data-panel="social"] .social-teil > .karten-fuss:not(#xHinweis) { margin-bottom: 8px; } /* Social Media (23.10.2026, Acht-Punkte-Runde Punkt 3): Reiter X · Reddit · Telegram · Weitere; je Kanal/Feed ein Kopf (Name → Quelle, Kennung, ×), Telegram-Nachrichten mehrzeilig mit höchstens sechs Zeilen. */ [data-panel="social"] .social-reiter { margin: 0 0 12px; align-items: center; gap: 8px; } [data-panel="social"] .social-reiter .chip[data-social] { padding: 7px 12px; font-size: 13px; } /* schmaler als 8/16 px, sonst bricht der Stand rechts in eine zweite Zeile (gemessen 23.10.) */ .social-staende { margin-left: auto; white-space: nowrap; display: inline-flex; align-items: center; } /* Stand des Reiters rechts — nicht im .kachel-titel (Tipp-Effekt löschte bis 24.10. Unterelemente) */ .social-neu { margin-left: 8px; width: 22px; height: 22px; padding: 0; line-height: 20px; border: 1px solid var(--rand-hell); border-radius: 50%; background: transparent; color: var(--gedaempft); font-size: 13px; cursor: pointer; } .social-neu:hover { border-color: #38bdf880; color: var(--hellblau); } .social-neu:disabled { opacity: .4; cursor: wait; } .social-gruppe { display: flex; align-items: baseline; gap: 6px; color: #fb923c; } .social-gruppe a { color: inherit; text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .social-gruppe a:hover { color: var(--hellblau); } .social-zusatz { font-weight: 500; color: var(--gedaempft); text-transform: none; letter-spacing: 0; white-space: nowrap; } .social-gruppe .kanal-weg { margin-left: auto; flex: 0 0 auto; } .tg-post .news-text { white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; } .feed-post .news-text { white-space: normal; } .kanal-zeile.feed-zeile { flex-wrap: wrap; } .kanal-zeile.feed-zeile input[name=url] { flex: 1 1 100%; } /* Watchlist: Paare untereinander */ [data-panel="watchlist"] .chip-reihe { flex-direction: column; align-items: stretch; gap: 8px; } [data-panel="watchlist"] .chip { text-align: left; width: 100%; } .setup-ziel .leer-hinweis { color: var(--gedaempft); font-size: 13px; } /* Begründungs-Karten in ihren Kacheln: Farbe folgt der Kachel */ .setup-ziel .begruendung-karte { margin-top: 0; } .panel .begruendung-karte.long { border-color: #22c55e66; } .panel .begruendung-karte.short { border-color: #a855f766; } .panel .long-haken { background: #22c55e33; color: #4ade80; } .panel .short-haken { background: #a855f733; color: #c084fc; } /* Coin links, Prozent rechts der Kugel (DOM im Raum, aaos2.js labelsBauen) ─── Filigran und computerhaft: dünne Monospace (JetBrains Mono 200), kleine Kennzeile darüber, feine Linie darunter, Leuchten nur als Hauch. */ @font-face { font-family: "JetBrains Mono"; src: url("vendor/fonts/JetBrains_Mono.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; } .raum-label { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 92px; font-weight: 200; letter-spacing: .1em; line-height: 1; white-space: nowrap; text-align: center; color: #dbeafe; text-shadow: 0 0 8px #2ea8ff55; transition: opacity .35s ease, color .6s ease; } .raum-label::before { content: attr(data-oben); display: block; font-size: 13px; font-weight: 400; letter-spacing: .34em; color: #67e8f9aa; margin-bottom: 14px; text-shadow: none; } .raum-label::after { content: ""; display: block; height: 1px; margin: 14px auto 0; width: 70%; background: linear-gradient(90deg, transparent, currentColor, transparent); opacity: .55; } #labelProzent { font-variant-numeric: tabular-nums; text-shadow: 0 0 10px currentColor; } /* 11.10. (Nutzer: eigenes Farbpanel für „BTC" links): --label-coin wird nur bei eigener Wahl gesetzt, sonst gilt je Thema der bisherige Wert. Die ID schlägt .raum-label UND die Hell-Regel darunter. */ #labelCoin { color: var(--label-coin, #dbeafe); } :root[data-thema="hell"] #labelCoin { color: var(--label-coin, #17233c); } body.gezoomt .raum-label, body.anordnen .raum-label { opacity: 0; } :root[data-thema="hell"] .raum-label { color: #17233c; text-shadow: none; } :root[data-thema="hell"] .raum-label::before { color: #0e7490; } /* Einstellungen: Ausrichtung der Kacheln ─────────────────────────── */ .raum-karte { margin-bottom: 12px; padding: 14px 16px; } .raum-karte .karten-titel { font-size: 13px; margin-bottom: 10px; } .raum-karte .chip { padding: 6px 12px; font-size: 12.5px; } .raum-karte .karten-fuss { margin-top: 10px; } /* Einstellungen: Regler (Tempo, Glow) und Farbpalette (02.10. spät) ──────── */ .regler-zeile { display: flex; align-items: center; gap: 10px; margin: 6px 0; } .regler-zeile input[type=range] { flex: 1; min-width: 0; accent-color: var(--raum-akzent); cursor: pointer; } .regler-zeile output { flex: 0 0 60px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text); } /* Farb-Gruppen (Nutzer 10.10. nachts: "die Farben müssen besser kategorisiert sein — Kacheln, Objekt in der Mitte, News, Coins, Candles usw."): eine schmale Überschrift je Kategorie mit Trennlinie darüber. Reine Beschriftung, die Farbzeilen darunter bleiben unverändert (aaos2.js sucht sie per querySelectorAll im ganzen Dokument). */ .farb-gruppe { margin: 14px 0 7px; padding-top: 9px; border-top: 1px solid var(--rand-hell); font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--raum-akzent); opacity: .85; } /* NICHT :first-of-type — das zaehlt den ELEMENTTYP (div), und das erste div in der Karte ist der Kartentitel. Gemessen: die Regel griff nie, die oberste Gruppe trug weiter eine Linie. Der Geschwisterselektor trifft. */ .karten-titel + .farb-gruppe { margin-top: 2px; padding-top: 0; border-top: 0; } .farb-zeile { display: flex; align-items: center; gap: 8px; margin: 7px 0; } .farb-name { flex: 0 0 92px; font-size: 12px; color: var(--gedaempft); } /* 92 statt 84: „Claude-Leiste" (09.10. abends) */ .farb-tupfen { display: flex; gap: 5px; flex-wrap: wrap; flex: 1; } .farb-tupfe { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; background: var(--f); box-shadow: 0 0 6px color-mix(in srgb, var(--f) 60%, transparent); } .farb-tupfe.aktiv { border-color: #ffffff; box-shadow: 0 0 0 2px #0b1a3a, 0 0 10px var(--f); } .farb-zeile input[type=color] { flex: 0 0 28px; width: 28px; height: 22px; padding: 0; border: 1px solid var(--rand-hell); border-radius: 6px; background: transparent; cursor: pointer; } #strahlenWahl { margin-top: 8px; } /* Anordnen-Modus ─────────────────────────────────────────────────── */ body.anordnen .panel:not(.panel-score) { outline: 1px dashed #60a5fa; outline-offset: 3px; padding-top: 46px; cursor: default; } .griff-leiste { display: none; position: absolute; left: 6px; right: 6px; top: 6px; height: 30px; align-items: center; gap: 6px; padding: 0 6px 0 10px; z-index: 40; background: #0f1a33f2; border: 1px solid var(--raum-akzent); border-radius: 10px; font-size: 12px; font-weight: 700; color: #dbeafe; cursor: grab; box-shadow: 0 6px 18px #0008; } .griff-leiste:active { cursor: grabbing; } .griff-name { flex: 1; letter-spacing: .04em; } .griff-leiste button { border: 1px solid #3b82f680; background: #1d4ed833; color: #dbeafe; font: inherit; font-size: 11px; font-weight: 700; border-radius: 7px; padding: 2px 7px; cursor: pointer; } .griff-leiste button:hover { background: #3b82f6; color: #fff; } body.anordnen .griff-leiste { display: flex; } /* Werkzeuge (fest am Bildschirm) ─────────────────────────────────── */ #werkzeuge { position: fixed; right: 18px; top: 14px; z-index: 6; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; /* 14.10.: die Leiste selbst schluckt keine Klicks mehr (gemessen: der Lesen-Knopf einer offenen Kachel lag darunter) — nur ihre Bedienelemente */ } #werkzeuge button, #werkzeuge input, #werkzeuge nav, #werkzeuge .wz-hinweis { pointer-events: auto; } .wz-reihe { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; } .wz-knopf { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 12px; cursor: pointer; text-decoration: none; background: #0d1526d9; border: 1px solid var(--rand-hell); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .wz-knopf:hover { border-color: var(--raum-akzent); } .wz-knopf.primaer { background: var(--raum-akzent); border-color: var(--raum-akzent); color: #fff; } .wz-knopf.aktiv { border-color: var(--raum-akzent); box-shadow: 0 0 0 3px #3b82f633; } .wz-knopf svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } #werkzeuge .rund-knopf { width: 38px; height: 38px; } /* 08.10. spät (Nutzer: „die Icons in der Menüleiste sollen keine Umrandung haben, sondern nur so im Raum schweben"): kein Glas, kein Rand, kein Schatten — nur das Symbol mit weichem Schein; aktiv/offen = weiß mit Akzent-Schein statt Ring. Die Zustandsregeln weiter unten (#top20Knopf, #kerzenKnopf) setzen Rand/Schatten — hier mit höherer Spezifität überstimmt. */ #werkzeuge .rund-knopf, #werkzeuge .wz-knopf, #werkzeuge .ansicht-schalter { background: none; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } #werkzeuge .rund-knopf, #werkzeuge .wz-knopf { color: #bfe6ffd0; filter: drop-shadow(0 0 5px #000c) drop-shadow(0 0 10px #3b82f633); transition: color .2s ease, filter .2s ease; } #werkzeuge .rund-knopf:hover, #werkzeuge .wz-knopf:hover { color: #fff; border-color: transparent; filter: drop-shadow(0 0 5px #000c) drop-shadow(0 0 9px #3b82f6cc); } #werkzeuge .rund-knopf svg { width: 22px; height: 22px; } #werkzeuge .wz-knopf.nur-icon { width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: 50%; } #werkzeuge .wz-knopf.nur-icon svg { width: 21px; height: 21px; } #werkzeuge .wz-knopf.aktiv { color: #fff; box-shadow: none; filter: drop-shadow(0 0 5px #000c) drop-shadow(0 0 9px var(--raum-akzent)); } #werkzeuge .wz-knopf.primaer { background: var(--raum-akzent); color: #fff; filter: none; } #werkzeuge #raumKnopf[aria-expanded="true"], #werkzeuge #top20Knopf[aria-pressed="true"], #werkzeuge #kerzenKnopf[aria-pressed="true"], #werkzeuge #fgKnopf[aria-pressed="true"], #werkzeuge #kachelnKnopf[aria-pressed="true"], #werkzeuge #mitteKnopf[aria-pressed="true"] { color: #fff; border-color: transparent; box-shadow: none; filter: drop-shadow(0 0 5px #000c) drop-shadow(0 0 8px #3b82f6dd); } #werkzeuge #top20Knopf[aria-pressed="false"], #werkzeuge #kerzenKnopf[aria-pressed="false"], #werkzeuge #fgKnopf[aria-pressed="false"], #werkzeuge #kachelnKnopf[aria-pressed="false"], #werkzeuge #mitteKnopf[aria-pressed="false"] { opacity: .55; } #werkzeuge .ansicht-schalter { padding: 0; gap: 2px; } #werkzeuge .ansicht-schalter > * { padding: 6px 7px; color: #bfe6ff99; text-shadow: 0 0 6px #000c; } #werkzeuge .ansicht-schalter > a:hover { color: #fff; } #werkzeuge .ansicht-schalter > .aktiv { background: none; color: #fff; box-shadow: none; text-shadow: 0 0 6px #000c, 0 0 10px var(--raum-akzent), 0 0 18px #3b82f699; } #werkzeuge .glocke .punkt { top: 9px; right: 9px; box-shadow: 0 0 8px var(--violett, #a855f7); } :root[data-thema="hell"] #werkzeuge .rund-knopf, :root[data-thema="hell"] #werkzeuge .wz-knopf { background: none; color: #334a6e; filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px #ffffffcc); } :root[data-thema="hell"] #werkzeuge .rund-knopf:hover, :root[data-thema="hell"] #werkzeuge .wz-knopf:hover, :root[data-thema="hell"] #werkzeuge .wz-knopf.aktiv, :root[data-thema="hell"] #werkzeuge #raumKnopf[aria-expanded="true"], :root[data-thema="hell"] #werkzeuge #top20Knopf[aria-pressed="true"], :root[data-thema="hell"] #werkzeuge #kerzenKnopf[aria-pressed="true"], #werkzeuge #fgKnopf[aria-pressed="true"], :root[data-thema="hell"] #werkzeuge #kachelnKnopf[aria-pressed="true"], :root[data-thema="hell"] #werkzeuge #mitteKnopf[aria-pressed="true"] { color: #1d4ed8; } :root[data-thema="hell"] #werkzeuge .wz-knopf.primaer { color: #fff; } :root[data-thema="hell"] #werkzeuge .ansicht-schalter { background: none; } :root[data-thema="hell"] #werkzeuge .ansicht-schalter > * { color: #334a6eaa; text-shadow: 0 0 6px #fff; } :root[data-thema="hell"] #werkzeuge .ansicht-schalter > .aktiv { color: #1d4ed8; text-shadow: 0 0 6px #fff, 0 0 10px #3b82f666; } /* Raum-Menü (03.10. nachmittags): fest unter der Werkzeugleiste, Glas wie die Knöpfe, scrollt bei wenig Höhe; z 7 über den Kacheln — ein Menü, das hinter den Ring rutscht, wäre nicht bedienbar */ #raumMenue { position: fixed; right: 18px; top: 92px; width: min(400px, calc(100vw - 36px)); max-height: calc(100vh - 110px); overflow: auto; z-index: 7; padding: 12px 14px 6px; border-radius: 16px; background: #0d15264d; border: 1px solid var(--rand-hell); box-shadow: 0 24px 60px #00000066; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); text-shadow: 0 0 6px #000c; } /* 09.10. spät (Nutzer: „das Einstellungsmenü muss stark transparent"): Fläche 30 % statt 90 %, Blur 5 statt 12 px — der Raum bleibt dahinter sichtbar; Textschatten hält die Schrift über Kacheln und Erde lesbar */ #raumMenue[hidden] { display: none; } #raumMenue .raum-menue-kopf { display: flex; justify-content: space-between; align-items: center; margin: 0 2px 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #dbeafe; } #raumMenue .raum-menue-zu { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--rand-hell); background: transparent; color: var(--gedaempft); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } #raumMenue .raum-menue-zu:hover { color: var(--text); border-color: var(--raum-akzent); } #raumMenue .raum-menue-zu svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } #raumMenue .raum-karte { margin-bottom: 10px; } :root:not([data-thema="hell"]) #raumMenue .raum-karte { background: #0d152633; border-color: #27395f80; backdrop-filter: none; -webkit-backdrop-filter: none; } /* 09.10. spät: Karten 20 % statt 80 % — ein Blur (das Menü) reicht, zwei verschachtelte kosten nur */ :root:not([data-thema="hell"]) #raumMenue .chip { background: #0d152680; } /* Chips 50 % statt deckend — sonst stehen dunkle Klötze auf dem durchsichtigen Menü */ :root:not([data-thema="hell"]) #raumMenue .chip.aktiv { background: #3b82f633; } :root[data-thema="hell"] #raumMenue { background: #ffffffe6; text-shadow: none; } :root[data-thema="hell"] #raumMenue .raum-menue-kopf { color: #17233c; } /* Top-20-Knopf neben dem Mond: gedrückt (an) = Akzentring und helles Symbol; aus = gedämpft mit Strich */ #top20Knopf .aus-strich { display: none; } #top20Knopf[aria-pressed="true"] { color: #bfe6ff; border-color: var(--raum-akzent); box-shadow: 0 0 0 3px #3b82f633, 0 0 14px #3b82f655; } #top20Knopf[aria-pressed="false"] { opacity: .7; } #top20Knopf[aria-pressed="false"] .aus-strich { display: block; } /* Top-20-Laufliste links (aaos2.js toplisteLaden) — Nutzer 02.10.: „die Bubbles vorerst weg; die Top 20 sollen links 25 % von oben bis 25 % von unten im Bild durchlaufen, wie Scrollen, nur von alleine, in derselben Schrift wie BTC und 75 % in der Mitte". Band 25–75 % der Höhe, fest links, Schrift wie .raum-label (JetBrains Mono 200), oben/unten weich ausgeblendet. Die Liste steht ZWEIMAL untereinander und wandert um ihre halbe Höhe → nahtlose Schleife. Seit 03.10. (Nutzer: „trotzdem von alleine den scroll-effekt, aber zusätzlich scrollen können") läuft sie per JS (aaos2.js topSchritt, 12 px/s = eine Zeile je 3 s, zwei Runden, dann Stillstand): das Rad verschiebt die Position sofort, der Lauf setzt nach 2,5 s von dort weiter an; Position wird modulo Listenhöhe gewickelt → endlos in beide Richtungen. */ #topliste { position: fixed; left: 22px; top: calc((100% - var(--top-hoehe, 50%)) / 2); height: var(--top-hoehe, 50%); width: var(--top-breite, 128px); z-index: 0; pointer-events: auto; /* 09.10. spät: Breite/Höhe per Regler (--top-breite/-hoehe), senkrecht mittig */ /* z 0 + später im DOM: über dem Canvas, UNTER den Kacheln (#css3d z 1) — der Ring zieht davor vorbei; 128 px enden vor der linkesten Kachel (gemessen 02.10. spät: Kachelrand je nach Ringstellung bis x ≈ 170 bei 1774 px Breite; bei 11 px Schrift reichen 128 px) */ display: flex; flex-direction: column; font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; color: var(--top-farbe, #dbeafe); transition: opacity .35s ease; } #topliste[hidden] { display: none; } /* Kopf = zwei Reiter (08.10.: TOP 500 | NEWS). .24em statt .34em: bei 128 px Breite brach der frühere Kopf „TOP 20 · 24 H" sonst dreizeilig um (gemessen 02.10. spät); „· 24 H" steht jetzt in der Statuszeile darunter. Die Reiter sind Knöpfe UNTER #css3d — pointer-events auto nur für den Hit-Test (aaos2.js leisteKnopfUnter), der Klick kommt synthetisch. */ #topliste .top-kopf { display: flex; gap: 10px; align-items: baseline; margin: 0 0 4px 2px; white-space: nowrap; } /* 23.10.2026: drei Reiter (COINS | NEWS | WATCH) in derselben Breite (Nutzer: „das Fenster darf sich nicht verbreitern"). Die Schrift folgt der Leistenbreite (Container-Einheit cqi): 10,2 px bei 128 px Standard, 11 px ab ~137 px, nie unter 8 px — so passen die drei Wörter auch in eine per Regler schmaler gezogene Leiste (100 px). Rechnung: 14 Zeichen × (0,6 + 0,12) em + 2 Lücken à 7 px + 2 px Rand ≤ Breite. Laufweite .12 statt .24em, sonst reicht es bei 128 px nicht. */ #topliste { container-type: inline-size; } #topliste .top-kopf { gap: 7px; } #topliste .top-tab { pointer-events: auto; appearance: none; -webkit-appearance: none; background: none; border: 0; border-bottom: 1px solid transparent; padding: 0 0 3px; margin: 0; font: inherit; font-size: clamp(8px, calc((100cqi - 18px) / 10.8), 11px); font-weight: 400; letter-spacing: .12em; color: var(--reiter-farbe, var(--top-kopf, #67e8f9aa)); /* --reiter-farbe: eigene Zeile „Reiter" (09.10. spät); ohne sie 67 % der Leistenfarbe wie bisher */ opacity: .5; cursor: pointer; white-space: nowrap; transition: opacity .25s ease, color .25s ease; } #topliste .top-tab.aktiv { opacity: 1; border-bottom-color: currentColor; } #topliste .top-tab.ruht { opacity: 1; color: #fff; } /* Sortierung (08.10. spät): VOL | +% | −% — kleine Chips unter den Reitern, nur in der Coins-Ansicht; Klick per Hit-Test wie die Reiter */ /* 11.10.: vier Chips (MC · VOL · +% · −%) statt drei — bei 128 px Standardbreite passen sie in eine Zeile (gemessen), bei schmaler gezogener Leiste brechen sie um statt über den Rand zu laufen. */ #topliste .top-sortier { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 5px 2px; } #topliste.news-modus .top-sortier, #topliste.watch-modus .top-sortier { display: none; } /* 23.10.: Sortier-Chips nur in COINS — die Watchlist behält die Reihenfolge des Hinzufügens */ /* 11.10.: Die Sortier-Chips gelten nur den Coins, die News-Werkzeuge nur den News — beide Reihen stehen an derselben Stelle unter den Reitern, je nach Ansicht ist genau eine da. */ #topliste .top-news-werkzeug { display: none; } #topliste.news-modus .top-news-werkzeug { display: flex; } #topliste #newsNeuesteKnopf { letter-spacing: .08em; } #topliste #newsNeuesteKnopf.laeuft { opacity: 1; color: #ffd60a; border-color: currentColor; } #topliste .top-sort { pointer-events: auto; appearance: none; -webkit-appearance: none; background: none; border: 1px solid transparent; border-radius: 6px; padding: 1px 5px; margin: 0; font: inherit; font-size: 9px; font-weight: 400; letter-spacing: .12em; color: var(--reiter-farbe, var(--top-kopf, #67e8f9aa)); opacity: .5; cursor: pointer; transition: opacity .25s ease, color .25s ease, border-color .25s ease; } #topliste .top-sort.aktiv { opacity: 1; border-color: currentColor; } #topliste .top-sort.ruht { opacity: 1; color: #fff; } :root[data-thema="hell"] #topliste .top-sort { color: #0e7490; } :root[data-thema="hell"] #topliste .top-sort.ruht { color: #17233c; } /* Statuszeile: in der Top-Ansicht „24 H · BINANCE", nach einem Klick „ANALYSE SOL …" → „SOL · LONG 53 %" (tippt sich); in der News-Ansicht der Daten-Stand */ #topliste .top-status { font-size: 10px; font-weight: 300; letter-spacing: .12em; color: var(--stand-farbe, var(--top-kopf, #67e8f9aa)); margin: 0 0 8px 2px; /* --stand-farbe: eigener Regler „Stand/Uhrzeit" (09.10. spät) */ min-height: 14px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #topliste .top-status[hidden] { display: none; } #topliste .top-status.laeuft { color: #ffd60a; text-shadow: 0 0 6px #ffd60a66; } #topliste .top-status.long { color: var(--bull, #4ade80); text-shadow: 0 0 8px currentColor; } #topliste .top-status.short { color: var(--bear, #f87171); text-shadow: 0 0 8px currentColor; } #topliste .top-status.fehler { color: var(--bear, #f87171); opacity: .75; } #topliste .top-fenster { flex: 1; min-height: 0; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); } /* Watchlist steht fest (23.10.): die erste Zeile beginnt oben und darf nicht im Verlauf verblassen; ausgeblendet wird nur an der Kante, hinter der noch Zeilen liegen (aaos2.js topZeichnen setzt .mehr-oben / .mehr-unten je nach Radstellung) */ #topliste.watch-modus .top-fenster { -webkit-mask-image: none; mask-image: none; } #topliste.watch-modus .top-fenster.mehr-unten { -webkit-mask-image: linear-gradient(180deg, #000 0 86%, transparent); mask-image: linear-gradient(180deg, #000 0 86%, transparent); } #topliste.watch-modus .top-fenster.mehr-oben { -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%); mask-image: linear-gradient(180deg, transparent, #000 14%); } #topliste.watch-modus .top-fenster.mehr-oben.mehr-unten { -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); } #topliste .top-lauf { display: flex; flex-direction: column; will-change: transform; } /* transform setzt aaos2.js topSchritt (keine CSS-Animation mehr seit 03.10.) */ /* 02.10. spät: halb so groß (22 → 11 px), der Zeilenabstand von 36 px bleibt; Gewicht 300 statt 200, weil die Hairline bei 11 px auf dunklem Grund zerfällt (Merker aus Teil 468: JetBrains Mono 200 klein = nur Schatten) */ /* 23.10.: Lücke 8 → 4 px und Laufweite .08 → .05em, damit die Stern-Spalte in die 128 px passt und fünf Zeichen Coin-Name (z. B. „ARKM") weiter ganz stehen: 2 + 18,9 Platz + 4 + 35,8 Coin + 4 + 11 Stern + 4 + 46 Prozent + 2 = 127,7 px. */ #topliste .top-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; height: 36px; line-height: 36px; padding: 0 2px; font-size: 11px; font-weight: 300; letter-spacing: .05em; white-space: nowrap; } /* Platz (08.10.: „1 BTC, 2 ETH usw."): kleine Nummer links, rechtsbündig bis 3 Stellen; lange Coin-Namen werden mit … gekürzt, damit die Prozentzahl rechts immer ganz zu sehen ist (128 px Breite) */ #topliste .top-rang { flex: 0 0 auto; min-width: 2.1em; text-align: right; font-size: 9px; letter-spacing: .04em; color: var(--top-kopf, #67e8f9aa); font-variant-numeric: tabular-nums; } #topliste .top-coin { min-width: 0; margin-right: auto; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 8px #2ea8ff33; } /* margin-right auto: Stern und Prozent stehen rechts in einer Flucht */ #topliste .top-pct { flex: 0 0 auto; min-width: 4.6em; text-align: right; font-size: 10px; font-variant-numeric: tabular-nums; text-shadow: 0 0 10px currentColor; } #topliste .top-pct.offen { color: var(--top-kopf, #67e8f9aa); opacity: .6; text-shadow: none; } /* Watchlist-Paar ohne Kurs in der Liste: „–" */ /* Stern = Watchlist an/aus (23.10.2026). 11 px breit im Fluss; Polster 3 px links/rechts mit gleich großem negativem Rand machen die Trefferfläche 17 px breit, ohne die Zeile zu verbreitern; align-self stretch = volle Zeilenhöhe (36 px) als Ziel. Leer und gedämpft = nicht beobachtet, gelb gefüllt mit Schein = in der Watchlist (Gelb wie der Stern im Paarkopf). */ #topliste .top-stern { flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; justify-content: center; width: 11px; padding: 0 3px; margin: 0 -3px; color: var(--top-kopf, #67e8f9aa); opacity: .6; transition: opacity .2s ease, color .2s ease; } #topliste .top-stern svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; } #topliste .top-stern.ruht { opacity: 1; color: #fff; } #topliste .top-zeile.beobachtet .top-stern { opacity: 1; color: #ffd60a; } #topliste .top-zeile.beobachtet .top-stern svg { fill: currentColor; filter: drop-shadow(0 0 3px #ffd60a99); } :root[data-thema="hell"] #topliste .top-stern { color: #0e7490; } :root[data-thema="hell"] #topliste .top-zeile.beobachtet .top-stern { color: #b45309; } :root[data-thema="hell"] #topliste .top-zeile.beobachtet .top-stern svg { filter: none; } #topliste .top-leer.watch-leer { font-size: 10px; line-height: 1.5; letter-spacing: .04em; padding: 6px 2px; white-space: normal; color: var(--stand-farbe, var(--top-kopf, #67e8f9aa)); } /* Analyse läuft (Klick auf einen Coin): die gewählte Zeile pulsiert, bis die Antwort da ist */ #topliste .top-zeile.laeuft .top-coin { color: #ffd60a; text-shadow: 0 0 8px #ffd60a88; animation: topPuls 1s ease-in-out infinite; } @keyframes topPuls { 50% { opacity: .35; } } @media (prefers-reduced-motion: reduce) { #topliste .top-zeile.laeuft .top-coin { animation: none; } } /* NEWS-Ansicht (08.10.): Zeile = Kopf „19:31 · DECRYPT · 70 %" + Titel bis fünf Zeilen; Richtung aus der Eilbewertung färbt den Titel */ #topliste .top-zeile.news { flex-direction: column; align-items: stretch; justify-content: flex-start; height: auto; line-height: 1.35; padding: 7px 2px 8px; gap: 3px; white-space: normal; letter-spacing: .02em; } #topliste .top-zeile.news .top-coin { margin-right: 0; font-size: 9px; letter-spacing: .12em; color: var(--stand-farbe, var(--top-kopf, #67e8f9aa)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: none; } #topliste .top-zeile.news .top-pct { margin-left: 0; min-width: 0; text-align: left; font-size: 11px; font-variant-numeric: normal; text-shadow: none; color: var(--top-farbe, #dbeafe); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } /* fünf Zeilen à ~16 Zeichen: die meisten Schlagzeilen passen ganz, längere enden mit … (Stellschraube) */ /* Auswirkungs-Rating je Nachricht (11.10., Nutzer: „auch dort muss es ein rating zur auswirkung geben wie beim nachrichten center"): eigene schmale Zeile zwischen Kopf und Titel — Zahl plus Balken, Breite = w. Bewusst NICHT grün/rot: die beiden Farben tragen in dieser Leiste schon die Richtung (Titelfarbe). Die Höhe zeigt sich über Helligkeit und Glühen: ab 40 % hell, ab 70 % mit Schein — dieselbe 40-%-Schwelle wie der Alarm und die Market-Intelligence-Kachel. Ohne Bewertung steht ein Strich, nie eine erfundene Zahl. */ #topliste .news-wirkung { display: flex; align-items: center; gap: 5px; font-size: 9px; letter-spacing: .06em; color: var(--stand-farbe, var(--top-kopf, #67e8f9aa)); opacity: .72; } #topliste .news-wirkung b { flex: 0 0 auto; min-width: 2.6em; font-weight: 400; font-variant-numeric: tabular-nums; } /* Spur und Füllung in EINEM Verlauf. Zuerst stand hier opacity: .22 auf der Spur und ein ::before mit opacity: 1 darin — gemessen am Bild blieb die Füllung unsichtbar, weil die Opazität des Elternelements sich auf das Kind multipliziert (0,22 × 1 = 0,22). */ #topliste .news-wirkung i { flex: 1 1 auto; min-width: 0; height: 2px; border-radius: 1px; background: linear-gradient(to right, currentColor 0 var(--w, 0%), #ffffff26 var(--w, 0%) 100%); background: linear-gradient(to right, currentColor 0 var(--w, 0%), color-mix(in srgb, currentColor 22%, transparent) var(--w, 0%) 100%); } :root[data-thema="hell"] #topliste .news-wirkung i { background: linear-gradient(to right, currentColor 0 var(--w, 0%), #17233c26 var(--w, 0%) 100%); } #topliste .news-wirkung.stark { opacity: 1; } #topliste .news-wirkung.stark b { color: #ffd60a; } #topliste .news-wirkung.sehr-stark b { color: #ffd60a; text-shadow: 0 0 8px #ffd60aaa; } #topliste .news-wirkung.sehr-stark i { box-shadow: 0 0 6px currentColor; } #topliste .news-wirkung.offen { opacity: .4; } #topliste .news-wirkung.offen i { display: none; } #topliste .top-zeile.news.bull .top-pct { color: var(--bull, #4ade80); } #topliste .top-zeile.news.bear .top-pct { color: var(--bear, #f87171); } #topliste .top-zeile.news.tippt .top-pct { color: #ffd60a; } #topliste .top-zeile.news.gewaehlt .top-pct { color: #ffffff; text-shadow: 0 0 10px #ffffffaa; } #topliste .top-pct.bull { color: var(--bull, #4ade80); } /* Grün für Plus (02.10. spät; vorher Neonblau); seit 03.10. Palette „Steigend" */ #topliste .top-pct.bear { color: var(--bear, #f87171); } /* Rot für Minus (vorher Neonviolett); Palette „Fallend" */ #topliste .top-pct.neutral { color: #ffd60a; } /* Schreibmaschine beim ersten Erscheinen (aaos2.js tippeZeile): die Zeile tippt Coin, dann Prozent, der Cursor „▍" hängt am getippten Text; während des Tippens leuchtet die Zeile leicht gelb wie die Kacheltitel */ #topliste .top-zeile.tippt .top-coin { color: #ffd60a; text-shadow: 0 0 6px #ffd60a88; } #topliste .top-leer { font-size: 13px; color: var(--leise); } /* Scrollen und Klicken (02.10. spät): die Liste liegt UNTER #css3d und bekommt selbst keine Ereignisse — pointer-events: auto macht sie nur für elementsFromPoint hit-testbar; #css3d reicht Rad und Klick durch (aaos2.js topZeileUnter). Zeiger darüber (Klasse ruht) hält den Lauf an, das Rad verschiebt die Liste zusätzlich zum Lauf, ein Klick auf eine Zeile lädt die Analyse des Coins. */ #topliste .top-zeile.gewaehlt .top-coin { color: #ffffff; text-shadow: 0 0 10px #ffffffaa; } body.anordnen #topliste { opacity: .35; } :root[data-thema="hell"] #topliste { color: #17233c; } :root[data-thema="hell"] #topliste .top-coin { text-shadow: none; } :root[data-thema="hell"] #topliste .top-kopf { color: #0e7490; } :root[data-thema="hell"] #topliste .top-pct { text-shadow: none; } :root[data-thema="hell"] #topliste .top-tab, :root[data-thema="hell"] #topliste .top-status, :root[data-thema="hell"] #topliste .top-rang { color: #0e7490; } :root[data-thema="hell"] #topliste .top-tab.ruht { color: #17233c; } :root[data-thema="hell"] #topliste .top-status.long { color: #15803d; text-shadow: none; } :root[data-thema="hell"] #topliste .top-status.short, :root[data-thema="hell"] #topliste .top-status.fehler { color: #b91c1c; text-shadow: none; } :root[data-thema="hell"] #topliste .top-zeile.news .top-pct { color: #17233c; } :root[data-thema="hell"] #topliste .top-zeile.news.bull .top-pct { color: #15803d; } :root[data-thema="hell"] #topliste .top-zeile.news.bear .top-pct { color: #b91c1c; } /* Erklärvideo-Overlay (03.10.): ganz oben (z 30, über Menü und Hinweisen), schwarzer Grund, Video mittig bis 92 vw / 78 vh, darunter die Leiste mit Ton-Knopf (nur bei geblocktem Autoplay), Merk-Haken und Überspringen. Ausblenden über .weg (Opacity, 450 ms), danach setzt aaos2.js hidden. */ #intro { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; background: #05070f; transition: opacity .45s ease; } #intro[hidden] { display: none; } #intro.weg { opacity: 0; pointer-events: none; } #intro video { max-width: min(92vw, 1600px); max-height: 78vh; width: auto; height: auto; border-radius: 14px; box-shadow: 0 0 0 1px #3b82f655, 0 0 60px #3b82f633, 0 40px 90px #000000cc; background: #000; } #intro .intro-leiste { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; } html.kein-intro #intro { display: none; } /* Head-Skript in aaos2.html: schon gesehen → nie sichtbar, kein Aufblitzen */ #intro .wz-knopf svg { width: 16px; height: 16px; } /* ── Geführter Rundgang (10.10.) ─────────────────────────────────────────────────────────────────────────── z 20: über Werkzeugen (6), Hinweisen und Menü (7) und dem Alarm (8), aber UNTER dem Erklärvideo (30) — beides soll nie gleichzeitig laufen, und falls doch, gewinnt das Video. Die vier Schattenflächen sind einfarbig (ein weicher Schein würde seinen eigenen Kasten zeichnen) und fangen Klicks ab; das Loch bleibt frei, das hervorgehobene Element ist also wirklich bedienbar. Der Rahmen hat pointer-events: none, damit er den Klick nicht abfängt. Maße setzt aaos2.js je Frame (rundgangSchritt). */ #rundgang[hidden] { display: none; } #rundgang { position: fixed; inset: 0; z-index: 20; } #rundgang .rg-schatten { position: fixed; left: 0; top: 0; width: 0; height: 0; background: var(--rg-schatten, #04070fb8); pointer-events: auto; } #rundgang .rg-rahmen { position: fixed; left: 0; top: 0; width: 0; height: 0; border-radius: 16px; pointer-events: none; box-shadow: 0 0 0 2px var(--raum-akzent), 0 0 0 7px color-mix(in srgb, var(--raum-akzent) 22%, transparent), 0 0 34px color-mix(in srgb, var(--raum-akzent) 45%, transparent); animation: rg-puls 2.4s ease-in-out infinite; } #rundgang .rg-rahmen[hidden] { display: none; } @keyframes rg-puls { 0%, 100% { opacity: 1; } 50% { opacity: .62; } } #rundgang .rg-blase { position: fixed; left: 0; top: 0; width: min(420px, calc(100vw - 32px)); max-height: min(78vh, 560px); display: flex; flex-direction: column; gap: 9px; padding: 14px 16px 15px; border-radius: 18px; background: var(--glas); border: 1px solid var(--glas-rand); box-shadow: var(--glas-schein); backdrop-filter: blur(9px); pointer-events: auto; } #rundgang .rg-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; } #rundgang .rg-zaehler { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; opacity: .72; } #rundgang .rg-zu { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 9px; background: none; border: 1px solid transparent; color: inherit; cursor: pointer; opacity: .7; } #rundgang .rg-zu:hover { opacity: 1; border-color: var(--glas-rand); } #rundgang .rg-zu svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } #rundgang .rg-balken { height: 3px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--raum-akzent) 16%, transparent); } #rundgang .rg-balken span { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--raum-akzent); transition: width .3s ease; } #rundgang .karten-titel { margin: 0; } #rundgang .rg-text { margin: 0; min-height: 0; overflow-y: auto; font-size: 13px; line-height: 1.52; opacity: .92; } #rundgang .rg-knoepfe { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } #rundgang .rg-knoepfe .chip[disabled] { opacity: .38; cursor: default; pointer-events: none; } #rundgang .rg-weiter { border-color: var(--raum-akzent); background: color-mix(in srgb, var(--raum-akzent) 20%, transparent); } /* Schmales Fenster: die Blase wird ein Band am unteren Rand (bzw. am oberen, wenn das Ziel unten liegt — die Lage setzt aaos2.js über .rg-oben). */ @media (max-width: 760px), (max-height: 560px) { #rundgang .rg-blase { left: 16px !important; right: 16px; width: auto; top: auto !important; bottom: 16px; max-height: 46vh; } #rundgang .rg-blase.rg-oben { top: 16px !important; bottom: auto; } } @media (prefers-reduced-motion: reduce) { #rundgang .rg-rahmen { animation: none; } #rundgang .rg-balken span { transition: none; } } :root[data-thema="hell"] { --rg-schatten: #1f2a44a6; } #intro #introTon svg { fill: none; stroke: currentColor; stroke-width: 1.8; } :root[data-thema="hell"] #intro { background: #e8edf8; } /* Kerzen-Knopf (Pixel-Kerzen rechts, 03.10.) — dieselben Zustände wie der Top-20-Knopf */ #kerzenKnopf .aus-strich { display: none; } #kerzenKnopf[aria-pressed="true"] { color: #bfe6ff; border-color: var(--raum-akzent); box-shadow: 0 0 0 3px #3b82f633, 0 0 14px #3b82f655; } #kerzenKnopf[aria-pressed="false"] { opacity: .7; } #kerzenKnopf[aria-pressed="false"] .aus-strich { display: block; } /* Fear-&-Greed-Knopf (Tacho rechts oben, 13.10.) — dieselben Zustände wie der Kerzen-Knopf */ #fgKnopf .aus-strich { display: none; } #fgKnopf[aria-pressed="true"] { color: #bfe6ff; border-color: var(--raum-akzent); box-shadow: 0 0 0 3px #3b82f633, 0 0 14px #3b82f655; } #fgKnopf[aria-pressed="false"] { opacity: .7; } #fgKnopf[aria-pressed="false"] .aus-strich { display: block; } /* Bubble-Knopf (14.10.2026, Nutzer: „wenn bubble modus ein ist soll das bubble icon alle 10 sec blau aufleuchten"): im Bubble-Blick (aria-pressed="true") weiß wie die anderen Ein-Zustände, dazu alle 10 s ein kurzes blaues Aufleuchten — animiert werden nur color und filter, kein Layout. */ #werkzeuge #bubbleKnopf[aria-pressed="true"] { color: #60a5fa; filter: drop-shadow(0 0 5px #000c) drop-shadow(0 0 10px #3b82f6) drop-shadow(0 0 18px #3b82f6aa); } /* 15.10. spät (Nutzer: „soll blau leuchten und zwar durchgehend, wenn es eingeschaltet ist"): Dauerleuchten statt 10-s-Puls */ @keyframes bubble-puls { 0%, 7%, 100% { color: #fff; filter: drop-shadow(0 0 5px #000c) drop-shadow(0 0 8px #3b82f6dd); } 2%, 5% { color: #60a5fa; filter: drop-shadow(0 0 5px #000c) drop-shadow(0 0 14px #3b82f6) drop-shadow(0 0 26px #60a5fa); } } @media (prefers-reduced-motion: reduce) { #werkzeuge #bubbleKnopf[aria-pressed="true"] { animation: none; color: #60a5fa; } } /* Kacheln an/aus und Mitte an/aus (09.10. spät): gleiche Zustandsoptik wie Leiste und Kerzen. Kacheln aus = body.ohne-kacheln blendet jede .panel samt Holo-Kopf (Kind) aus; #css3d bleibt Zeigerfläche (Ring drehen, Laufliste und Kerzen-Knöpfe per elementsFromPoint — unsichtbare Kacheln sind dort nicht mehr „davor"). Mitte aus = WebGL-Objekte per aaos2.js mitteSchalten; hier nur die Raum-Labels. */ #kachelnKnopf .aus-strich, #mitteKnopf .aus-strich { display: none; } #kachelnKnopf[aria-pressed="false"], #mitteKnopf[aria-pressed="false"] { opacity: .7; } #kachelnKnopf[aria-pressed="false"] .aus-strich, #mitteKnopf[aria-pressed="false"] .aus-strich { display: block; } /* Lesemodus-Knopf (12.10.2026): dieselbe Mechanik wie oben — ohne diese Regel bliebe der Durchstreich-Strich dauerhaft stehen und der Knopf zeigte „aus", obwohl der Modus läuft (so beim ersten Messen gesehen). Der aktive Zustand selbst kommt aus `#werkzeuge .wz-knopf.aktiv` (weiß + Akzent-Schein); ein Rahmen wäre zwecklos, weil `#werkzeuge .wz-knopf` Rand und Hintergrund mit höherer Spezifität wegnimmt. */ #wzLesen .aus-strich { display: none; } #wzLesen[aria-pressed="false"] { opacity: .7; } #wzLesen[aria-pressed="false"] .aus-strich { display: block; } body.ohne-kacheln .panel { visibility: hidden !important; pointer-events: none !important; } body.ohne-mitte .raum-label { opacity: 0; } /* Pixel-Kerzen rechts (aaos2.js kerzenZeichnen) — Nutzer 03.10.: „futuristische, pixelbasierte Darstellung statt klassischer Candlesticks … rechts, zum Paar, ein- und ausschaltbar". Spiegelbild der Laufliste: fest rechts, Band 25–75 %, z-index 0 = UNTER den Kacheln (der Ring zieht davor vorbei); kein Kasten, kein Rand — der Hintergrund bleibt der schwarze Raum. Breite 20 vw (240–420 px): bei der Startkamera (Abstand 8412, 03.10.) endet die rechteste Kachel bei ≈ 0,74 der Bildbreite, das Band beginnt bei ≈ 0,78. */ #kerzen { position: fixed; right: 22px; top: calc((100% - var(--kerzen-hoehe, 50%)) / 2); height: var(--kerzen-hoehe, 50%); width: var(--kerzen-breite, 270px); z-index: 0; pointer-events: none; /* 09.10. spät: Breite/Höhe per Regler (--kerzen-breite/-hoehe aus aaos2.js masseAnwenden), senkrecht mittig */ display: flex; flex-direction: column; font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; color: #dbeafe; transition: opacity .35s ease; } #kerzen[hidden] { display: none; } /* ── Fear-&-Greed-Tacho rechts oben (13.10.2026): unter der Werkzeugleiste (top 14 px + 38 px Knöpfe + Luft), so breit wie der Chart (--kerzen-breite), Schrift und Farben wie die Pixel-Kerzen; z-index 0 wie #kerzen, liegt also unter #css3d. Steht der Chart per Regler auf mehr als ~80 % Höhe, schiebt er sich unter den Tacho — dann Höhe zurücknehmen. */ /* 14.10.2026 nachmittags (Nutzer: „der fear and greed tacho soll auf die bubble seite und bubbles drum herum und soll dieselbe größe haben wie der erste entwurf wieder"): zurück auf 270×118 und in die Bildmitte des Bubble-Blicks — die Bubbles lassen dort drei Rasterplätze frei (aaos2.js BUBBLE_LOCH). Außerhalb des Bubble-Blicks ist er unsichtbar. Vorher: unten rechts 90×40 (14.10. vormittags), davor oben rechts an der Kerzenbreite. */ #fgTacho { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 270px; height: 118px; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .4s ease; display: flex; flex-direction: column; font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; color: #dbeafe; transition: opacity .35s ease; } #fgTacho[hidden] { display: none; } #fgTacho .fg-kopf, #fgTacho .fg-fuss { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 11px; font-weight: 300; letter-spacing: .24em; color: color-mix(in srgb, var(--kerzen-farbe, #67e8f9) 67%, transparent); white-space: nowrap; } #fgTacho .fg-kopf { margin: 0 2px 4px; } #fgTacho .fg-fuss { margin: 2px 2px 0; letter-spacing: .08em; } #fgTacho .fg-rechts { font-size: 9px; letter-spacing: .12em; } #fgTacho canvas { flex: 1; min-height: 0; width: 100%; display: block; } #fgTacho .fg-wert { font-family: "Share Tech Mono", "JetBrains Mono", ui-monospace, monospace; font-size: 15px; font-weight: 400; font-variant-numeric: tabular-nums; text-shadow: 0 0 10px currentColor; } #fgTacho .fg-text { font-size: 10px; } #fgTacho .fg-angst { color: var(--bear, #f87171); } #fgTacho .fg-mitte { color: #ffd60a; } #fgTacho .fg-gier { color: var(--bull, #4ade80); } body.anordnen #fgTacho { opacity: .35; } :root[data-thema="hell"] #fgTacho { color: #17233c; } :root[data-thema="hell"] #fgTacho .fg-angst { color: #b91c1c; } :root[data-thema="hell"] #fgTacho .fg-mitte { color: #a16207; } :root[data-thema="hell"] #fgTacho .fg-gier { color: #15803d; } /* ── POC / Value Area High unter dem Chart (13.10.2026) ─────────────────────────────────────────────────── */ #kerzen .kerzen-poc { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 4px 2px 0; font-size: 10px; font-weight: 300; letter-spacing: .08em; font-variant-numeric: tabular-nums; white-space: nowrap; color: color-mix(in srgb, var(--kerzen-farbe, #67e8f9) 67%, transparent); } #kerzen .kerzen-poc[hidden] { display: none; } #kerzen .kerzen-poc i { font-style: normal; letter-spacing: .18em; font-size: 9px; } #kerzen .kerzen-poc b { font-weight: 400; } #kerzen .kerzen-poc .poc b { color: #ffd60a; text-shadow: 0 0 8px #ffd60a88; } #kerzen .kerzen-poc .vah b { color: #67e8f9; text-shadow: 0 0 8px #67e8f966; } #kerzen .kerzen-poc .poc-fenster { font-size: 9px; letter-spacing: .12em; } :root[data-thema="hell"] #kerzen .kerzen-poc .poc b { color: #a16207; text-shadow: none; } :root[data-thema="hell"] #kerzen .kerzen-poc .vah b { color: #0e7490; text-shadow: none; } /* Fear & Greed als zweite Zeile darunter (15.10.2026, Nutzer: „auf der normalen Seite … unten klein drunter geschrieben, so wie POC … einfach darunter leicht geschrieben"): gleicher Satz wie die POC-Zeile, Wert in der Ampelfarbe; an/aus mit #fgKnopf */ #kerzen .kerzen-fg { margin-top: 2px; } #kerzen .kerzen-fg .fg-angst { color: var(--bear, #f87171); } #kerzen .kerzen-fg .fg-mitte { color: #ffd60a; } #kerzen .kerzen-fg .fg-gier { color: var(--bull, #4ade80); } :root[data-thema="hell"] #kerzen .kerzen-fg .fg-angst { color: #b91c1c; } :root[data-thema="hell"] #kerzen .kerzen-fg .fg-mitte { color: #a16207; } :root[data-thema="hell"] #kerzen .kerzen-fg .fg-gier { color: #15803d; } /* POC-Chip im Chartkopf neben dem TradingView-Knopf: ein Kerzen-Chip mit Text; aus = halb durchsichtig */ #kerzen .kerzen-poc-knopf { margin-right: 2px; } #kerzen .kerzen-poc-knopf[aria-pressed="false"] { opacity: .5; } #kerzen .kerzen-kopf, #kerzen .kerzen-fuss { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 11px; font-weight: 300; letter-spacing: .24em; color: color-mix(in srgb, var(--kerzen-farbe, #67e8f9) 67%, transparent); white-space: nowrap; } /* --kerzen-farbe: Palette „Pixel-Kerzen" (09.10. abends), Abstufungen per color-mix */ #kerzen .kerzen-kopf { margin: 0 2px 8px; } #kerzen .kerzen-fuss { margin: 8px 2px 0; letter-spacing: .08em; } #kerzen canvas { flex: 1; min-height: 0; width: 100%; display: block; } #kerzen .kerzen-kurs { font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums; text-shadow: 0 0 10px currentColor; } #kerzen .kerzen-chg { font-size: 10px; font-variant-numeric: tabular-nums; } #kerzen .bull { color: var(--bull, #4ade80); } #kerzen .bear { color: var(--bear, #f87171); } /* Kopf rechts: Intervall + kleiner TradingView-Knopf. Der Knopf ist das EINZIGE hit-testbare Element der Leiste (pointer-events auto nur hier) — die Klicks landen auf #css3d und werden per elementsFromPoint durchgereicht, wenn keine Kachel davor liegt (aaos2.js kerzenTVUnter, Muster der Laufliste). */ #kerzen .kerzen-rechts { display: inline-flex; align-items: center; gap: 8px; } #kerzen .kerzen-tv { pointer-events: auto; width: 20px; height: 20px; padding: 0; border-radius: 6px; cursor: pointer; border: 1px solid color-mix(in srgb, var(--kerzen-farbe, #67e8f9) 40%, transparent); background: #0d152699; color: color-mix(in srgb, var(--kerzen-farbe, #67e8f9) 80%, transparent); display: inline-flex; align-items: center; justify-content: center; } #kerzen .kerzen-tv svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #kerzen .kerzen-tv.ruht { color: #fff; border-color: var(--kerzen-farbe, #3b82f6); box-shadow: 0 0 10px color-mix(in srgb, var(--kerzen-farbe, #3b82f6) 53%, transparent); } /* Intervall-Chips direkt im Chartkopf (08.10., Nutzer: „15/30/1h/4h/Daily, die Einstellung soll in dem Fenster sein"): wie der TradingView-Knopf hit-testbar unter #css3d (aaos2.js leisteKnopfUnter), synchron mit dem Zahnrad-Menü */ #kerzen .kerzen-wahl { display: flex; flex-wrap: wrap; gap: 5px; margin: -2px 2px 8px; } /* 08.10.: acht Chips (5M … 1W). 12.10. gemessen: ab 268 px stehen alle acht in EINER Reihe, bei 267 fällt 1W um — Standard und Regler-Untergrenze liegen deshalb bei 270 px (Nutzer: „das chart fenster muss genau so breit sein, dass der 1W noch in der reihe steht") */ #kerzen .kerzen-chip { pointer-events: auto; appearance: none; -webkit-appearance: none; font: inherit; font-size: 9px; font-weight: 400; letter-spacing: .12em; line-height: 1.3; padding: 2px 6px; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--chips-farbe, var(--kerzen-farbe, #67e8f9)) 20%, transparent); background: #0d152666; color: color-mix(in srgb, var(--chips-farbe, var(--kerzen-farbe, #67e8f9)) 67%, transparent); cursor: pointer; white-space: nowrap; /* --chips-farbe: eigene Zeile „Kerzen-Chips" (09.10. spät); ohne sie folgt sie --kerzen-farbe */ transition: color .2s ease, border-color .2s ease, background .2s ease; } #kerzen .kerzen-chip.aktiv { color: #fff; border-color: var(--chips-farbe, var(--kerzen-farbe, #3b82f6)); background: color-mix(in srgb, var(--chips-farbe, var(--kerzen-farbe, #3b82f6)) 20%, transparent); box-shadow: 0 0 8px color-mix(in srgb, var(--chips-farbe, var(--kerzen-farbe, #3b82f6)) 33%, transparent); } #kerzen .kerzen-chip.ruht { color: #fff; border-color: color-mix(in srgb, var(--chips-farbe, var(--kerzen-farbe, #67e8f9)) 67%, transparent); } :root[data-thema="hell"] #kerzen .kerzen-chip { color: #0e7490; border-color: #0e749055; background: #ffffffaa; } :root[data-thema="hell"] #kerzen .kerzen-chip.aktiv { color: #fff; background: var(--raum-akzent, #3b82f6); border-color: var(--raum-akzent, #3b82f6); box-shadow: none; } #kerzen .neutral { color: #ffd60a; } body.anordnen #kerzen { opacity: .35; } :root[data-thema="hell"] #kerzen { color: #17233c; } :root[data-thema="hell"] #kerzen .kerzen-kopf, :root[data-thema="hell"] #kerzen .kerzen-fuss { color: #0e7490; } :root[data-thema="hell"] #kerzen .kerzen-kurs { text-shadow: none; } :root[data-thema="hell"] #kerzen .bull { color: #15803d; } :root[data-thema="hell"] #kerzen .bear { color: #b91c1c; } .wz-hinweis { font-size: 12px; color: var(--leise); text-shadow: 0 0 8px #000; background: #05070f99; padding: 4px 8px; border-radius: 8px; } .wz-anordnen-hinweis { color: #dbeafe; } :root[data-thema="hell"] .wz-hinweis { text-shadow: none; background: #ffffffaa; } /* Die ständige Hinweiszeile unter den Werkzeugen ist seit 08.10. spät weg (Nutzer: „die Erklärung darunter weg"); ihr Text steckt in den Tooltips. .wz-hinweis bleibt für den Anordnen-Hinweis. */ :root[data-thema="hell"] .wz-knopf { background: #ffffffd9; color: #17233c; } :root[data-thema="hell"] .wz-knopf.primaer { background: var(--raum-akzent); color: #fff; } /* Umschalter „3D | 2D" in der Werkzeugleiste (Grundregel in styles.css; die schwebende Fassung steht oben bei #werkzeuge) */ .hinweis-box { z-index: 7; } @media (prefers-reduced-motion: reduce) { .panel, .coin-icon { transition: none; } .panel.alarm::after { animation: none; opacity: .7; } /* leuchten statt blinken */ .panel.schimmer::after { animation: none; background-position: 50% 0; opacity: .6; } /* Streifen steht in der Mitte */ } /* ── Schriftwahl (Nutzer 03.10. abends: „fünf verschiedene Schriftarten … die Originale bleibt derweil Standard"): html[data-schrift] setzt aaos2.js aus tm2.schrift (Head-Skript in aaos2.html vorab). font-size-adjust gleicht die x-Höhe an Inter (≈0,55) an, damit Schrift- und Serifenschriften nicht winzig wirken; Zahlen-Elemente (Raum-Labels, Laufliste, Kerzenkopf) behalten JetBrains Mono und ihre Größe. Dateien in vendor/fonts (HASHES.txt). ─────────── */ @font-face { font-family: "Pacifico"; src: url("vendor/fonts/Pacifico.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Share Tech Mono"; src: url("vendor/fonts/Share_Tech_Mono.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Cormorant Garamond"; src: url("vendor/fonts/Cormorant_Garamond.woff2") format("woff2"); font-weight: 300 700; font-display: swap; } @font-face { font-family: "Space Grotesk"; src: url("vendor/fonts/Space_Grotesk.woff2") format("woff2"); font-weight: 300 700; font-display: swap; } @font-face { font-family: "Playfair Display"; src: url("vendor/fonts/Playfair_Display.woff2") format("woff2"); font-weight: 400 900; font-display: swap; } html[data-schrift="brush"] { --schrift: "Pacifico", "Inter", cursive; --schrift-adjust: 0.5; } html[data-schrift="computer"] { --schrift: "Share Tech Mono", ui-monospace, Menlo, monospace; --schrift-adjust: 0.5; } html[data-schrift="filigran"] { --schrift: "Cormorant Garamond", Georgia, serif; --schrift-adjust: 0.5; } html[data-schrift="modern"] { --schrift: "Space Grotesk", "Inter", sans-serif; --schrift-adjust: none; } html[data-schrift="editorial"] { --schrift: "Playfair Display", Georgia, serif; --schrift-adjust: 0.5; } html[data-schrift]:not([data-schrift="original"]) body.raum, html[data-schrift]:not([data-schrift="original"]) body.raum :is(button, input, select, textarea, .kachel-holo) { font-family: var(--schrift); } html[data-schrift]:not([data-schrift="original"]) body.raum { font-size-adjust: var(--schrift-adjust); } html[data-schrift="filigran"] body.raum { font-weight: 300; } html[data-schrift="filigran"] body.raum :is(b, strong, .kachel-titel, .karten-titel, th) { font-weight: 600; } html[data-schrift] body.raum :is(.raum-label, #topliste, #kerzen) { font-size-adjust: none; } .chip.schrift-brush { font-family: "Pacifico", cursive; } .chip.schrift-computer { font-family: "Share Tech Mono", monospace; } .chip.schrift-filigran { font-family: "Cormorant Garamond", serif; font-weight: 300; font-size: 14px; } .chip.schrift-modern { font-family: "Space Grotesk", sans-serif; } .chip.schrift-editorial { font-family: "Playfair Display", serif; } /* ── Calls-Kachel (03.10. abends): bernsteinfarbene Kante wie ein Logbuch ── */ .panel-calls::before { background: linear-gradient(90deg, transparent, #fbbf24cc, #fde68aaa, transparent); } .panel-calls .kachel-titel { color: #fbbf24; border-bottom-color: #f59e0b44; text-shadow: 0 0 6px #fbbf24aa, 0 0 16px #f59e0b66; } .panel-calls .kachel-titel.tippt::after { color: #fbbf24; } :root[data-thema="hell"] .panel-calls .kachel-titel { color: #b45309; text-shadow: none; } /* ── Schaufenster (Cloudflare ohne Server, 03.10.): kleines Abzeichen unten, html.schaufenster setzt app.js ── */ html.schaufenster body.raum::after { content: "SCHAUFENSTER · Stand " attr(data-stand); position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 8; padding: 4px 12px; border-radius: 999px; border: 1px solid #fbbf2466; background: #0b1020e6; color: #fbbf24; font: 600 11px/1.4 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .12em; pointer-events: none; white-space: nowrap; } /* Investoren-Kachel (07.10.2026): die Liste wird lang — die Kachel bekommt deshalb eine feste Höhe mit eigenem Scroll. Merker: ein Flex-Kind mit overflow-y braucht min-height: 0, sonst scrollt es nicht. */ .panel-inv .kachel-inhalt { display: flex; flex-direction: column; } .panel-inv .inv-liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; } /* 08.10.: eine Liste untereinander statt Chips (aaos2.js investorenFolgen) — schmalere Spalten für die Kachelbreite */ .panel-inv .inv-kurz .inv-stueck { flex-basis: 108px; } .panel-inv .inv-kurz .inv-wert { flex-basis: 100px; } .panel-inv .inv-kurz .news-abschnitt { margin-top: 12px; } .panel-inv .inv-kurz .inv-herkunft { margin-top: 10px; } /* ── Eingabefenster über der Leiste links (08.10.): Frage an Claude + Steckbrief-Knopf. Über #css3d (z 3) — ein Eingabefeld braucht echten Fokus; 128 px wie die Leiste, mit Fokus oder laufender Anfrage 320 px breit. */ .frage-box { position: fixed; left: 22px; bottom: calc(75% + 18px); width: var(--top-breite, 128px); min-width: 128px; z-index: 3; /* 14.10. zweiter Auftrag: „claude chat soll mit dem news coins fenster abschliessen" — Breite = Leiste links (--top-breite, Regler „Breite der Leiste links"); davor 336 = doppelt, davor 168 */ display: flex; align-items: center; gap: 6px; font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; transition: width .25s ease; } .frage-box:focus-within, .frage-box.laeuft { width: 480px; } .frage-box input { flex: 1 1 auto; min-width: 0; height: 26px; padding: 0 8px; border-radius: 7px; border: 1px solid color-mix(in srgb, var(--claude-farbe, #67e8f9) 27%, transparent); background: #0d1526cc; /* --claude-farbe: Palette „Claude-Leiste" (09.10. abends) */ color: #dbeafe; font: inherit; font-size: 10.5px; letter-spacing: .06em; outline: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .frage-box input::placeholder { color: color-mix(in srgb, var(--claude-farbe, #67e8f9) 53%, transparent); letter-spacing: .12em; } .frage-box input:focus { border-color: var(--claude-farbe, #3b82f6); box-shadow: 0 0 0 3px color-mix(in srgb, var(--claude-farbe, #3b82f6) 13%, transparent), 0 0 14px color-mix(in srgb, var(--claude-farbe, #3b82f6) 33%, transparent); } .frage-box button { flex: 0 0 auto; width: 14px; height: 14px; padding: 0; border-radius: 4px; /* 14×14 statt 26×26 (14.10., Nutzer: „die prompts und der einstellungs button daneben doppelt so klein") */ border: 1px solid color-mix(in srgb, var(--claude-farbe, #67e8f9) 40%, transparent); background: #0d152699; color: color-mix(in srgb, var(--claude-farbe, #67e8f9) 80%, transparent); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .frage-box button svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .frage-box button:hover { color: #fff; border-color: var(--claude-farbe, #3b82f6); box-shadow: 0 0 10px color-mix(in srgb, var(--claude-farbe, #3b82f6) 53%, transparent); } .frage-box button:disabled { opacity: .5; cursor: wait; box-shadow: none; } #stopKnopf svg { fill: currentColor; stroke: none; } #stopKnopf:not([disabled]) { color: var(--bear, #f87171); border-color: #f8717188; cursor: pointer; } #stopKnopf[disabled] { cursor: default; opacity: .35; } /* Während eine Anfrage läuft (Nutzer 08.10. spät: „die Ränder sollen langsam in verschiedenen Farben aufleuchten"): Rahmen und Schein des Feldes und der Knöpfe wandern über Blau → Violett → Grün → Gelb, 8 s je Runde */ @keyframes regenbogen-rand { 0% { border-color: #2ea8ff; box-shadow: 0 0 0 2px #2ea8ff33, 0 0 16px #2ea8ff99; } 25% { border-color: #c084fc; box-shadow: 0 0 0 2px #c084fc33, 0 0 16px #c084fc99; } 50% { border-color: #4ade80; box-shadow: 0 0 0 2px #4ade8033, 0 0 16px #4ade8099; } 75% { border-color: #ffd60a; box-shadow: 0 0 0 2px #ffd60a33, 0 0 16px #ffd60a99; } 100% { border-color: #2ea8ff; box-shadow: 0 0 0 2px #2ea8ff33, 0 0 16px #2ea8ff99; } } .frage-box.laeuft input, .frage-box.laeuft input:focus { animation: regenbogen-rand 8s linear infinite; } .frage-box.laeuft button { animation: regenbogen-rand 8s linear infinite; animation-delay: -2.5s; } .frage-box.laeuft button:disabled { animation: none; } @media (prefers-reduced-motion: reduce) { .frage-box.laeuft input, .frage-box.laeuft button { animation: none; border-color: #ffd60a; } } .frage-box .frage-stand { position: absolute; left: 2px; top: 100%; margin-top: 3px; font-size: 9px; letter-spacing: .12em; color: #ffd60a; white-space: nowrap; text-shadow: 0 0 6px #ffd60a66; } .frage-box .frage-stand[hidden] { display: none; } .frage-box .frage-stand.fehler { color: var(--bear, #f87171); text-shadow: none; } /* ── Untermenüs der Leiste (12.10.2026): Zeitrahmen am Analyse-Knopf, Modell/Effort am Chip-Knopf. Sie öffnen nach UNTEN (die Leiste sitzt im oberen Viertel, darunter ist Platz) und liegen über dem Stand-Text. Die Breite ist fest, damit die Leiste beim Öffnen nicht springt — sie ist selbst nur 168 px schmal und wächst erst bei Fokus auf 320. ── */ .frage-box .leisten-menue { position: absolute; left: 0; top: calc(100% + 16px); width: 234px; z-index: 6; padding: 12px 15px 11px; border-radius: 16px; border: 1px solid var(--glas-rand); /* 14.10.: Glasfläche wie #erklaerTipp (Nutzer: „alle pop ups müssen aussehen wie die bei den erklärungen") */ background: var(--glas); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); box-shadow: var(--glas-schein); font-size: 9.5px; letter-spacing: .1em; color: var(--text); } .frage-box .leisten-menue[hidden] { display: none; } .frage-box .lm-titel { color: color-mix(in srgb, var(--claude-farbe, #67e8f9) 72%, transparent); margin: 0 0 6px; font-size: 8.5px; } .frage-box .lm-reihe + .lm-titel { margin-top: 9px; } .frage-box .lm-reihe { display: flex; flex-wrap: wrap; gap: 4px; } /* Eigene Breite/Höhe: die allgemeine .frage-box button-Regel macht 26×26 quadratisch — hier sind es Chips */ .frage-box .lm-reihe button { width: auto; height: 20px; min-width: 34px; padding: 0 7px; border-radius: 6px; font: inherit; font-size: 9px; letter-spacing: .08em; line-height: 1; border: 1px solid color-mix(in srgb, var(--claude-farbe, #67e8f9) 28%, transparent); background: #0d152699; color: color-mix(in srgb, var(--claude-farbe, #67e8f9) 78%, transparent); } .frage-box .lm-reihe button:hover { color: #fff; border-color: var(--claude-farbe, #3b82f6); } .frage-box .lm-reihe button.aktiv { color: #061018; background: var(--claude-farbe, #67e8f9); border-color: var(--claude-farbe, #67e8f9); box-shadow: 0 0 10px color-mix(in srgb, var(--claude-farbe, #67e8f9) 55%, transparent); } .frage-box .lm-reihe button:disabled { opacity: .45; cursor: wait; box-shadow: none; } .frage-box .lm-fuss { margin-top: 7px; font-size: 8.5px; line-height: 1.5; letter-spacing: .04em; color: #95a0b0; white-space: normal; } .frage-box .lm-fuss.fehler { color: var(--bear, #f87171); } :root[data-thema="hell"] .frage-box .leisten-menue { background: var(--glas); color: var(--text); border-color: var(--glas-rand); } :root[data-thema="hell"] .frage-box .lm-reihe button { background: #ffffffcc; color: #0e7490; border-color: #0e749055; } :root[data-thema="hell"] .frage-box .lm-reihe button.aktiv { color: #fff; background: #0e7490; border-color: #0e7490; } :root[data-thema="hell"] .frage-box .lm-fuss { color: #475569; } @media (max-width: 430px) { .frage-box .leisten-menue { width: calc(100vw - 52px); } } body.anordnen .frage-box { opacity: .35; } :root[data-thema="hell"] .frage-box input { background: #ffffffcc; color: #17233c; border-color: #0e749055; } :root[data-thema="hell"] .frage-box input::placeholder { color: #0e7490aa; } :root[data-thema="hell"] .frage-box button { background: #ffffffaa; color: #0e7490; border-color: #0e749055; } :root[data-thema="hell"] .frage-box .frage-stand { color: #b45309; text-shadow: none; } /* ── STECKBRIEF-Kachel (08.10.): Antworten untereinander. Nutzer 08.10. spät: „nicht mehr leuchten, sondern dasselbe Schwarz wie das Long-Fenster" → schwarze Füllung wie .panel-long, Rahmen/Schein in Cyan statt Grün, kein Leuchten nach der Antwort. ── */ .panel-steckbrief { border-color: #22d3ee55; box-shadow: 0 0 0 1px #061418 inset, 0 0 42px #22d3ee1f, 0 32px 70px #00000099; background: linear-gradient(165deg, #05070cf7, #020308f5); } .panel-steckbrief::before { background: linear-gradient(90deg, transparent, #22d3eecc, #a5f3fcaa, transparent); } .panel-steckbrief.aktiv { box-shadow: 0 0 0 1px #67e8f9 inset, 0 0 60px #22d3ee55, 0 32px 70px #00000099; } .panel-steckbrief .kachel-titel { color: #67e8f9; border-bottom-color: #22d3ee44; text-shadow: 0 0 6px #67e8f9aa, 0 0 16px #22d3ee66; } .sb-werkzeuge { display: flex; gap: 8px; align-items: center; } .sb-speichern { font: inherit; font-size: 11px; letter-spacing: .08em; padding: 4px 10px; border-radius: 7px; border: 1px solid #67e8f966; background: #0d152699; color: #67e8f9; cursor: pointer; } .sb-speichern:hover { color: #fff; border-color: #67e8f9; } .sb-speichern[disabled] { color: var(--bull, #4ade80); border-color: #4ade8066; cursor: default; } /* BIBLIOTHEK-Kachel (08.10. spät): kleine Einträge, Klick öffnet den Steckbrief, ✕ entfernt */ .bib-inhalt { display: flex; flex-direction: column; gap: 6px; } .bib-eintrag { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--glas-rand, #1e293b); background: #0d152666; color: var(--text, #e5edff); cursor: pointer; font: inherit; } .bib-eintrag:hover { border-color: #67e8f9aa; background: #0d1526aa; } .bib-coin { flex: 0 0 auto; min-width: 4.5em; font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-weight: 600; font-size: 13px; letter-spacing: .08em; color: #67e8f9; text-shadow: 0 0 8px #22d3ee55; } .bib-titel { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--gedaempft, #94a3b8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bib-zeit { flex: 0 0 auto; font-size: 10.5px; color: var(--leise, #64748b); font-variant-numeric: tabular-nums; } .bib-weg { flex: 0 0 auto; width: 22px; height: 22px; padding: 0; border-radius: 6px; border: 1px solid transparent; background: none; color: var(--leise, #64748b); cursor: pointer; font: inherit; font-size: 13px; line-height: 1; } .bib-weg:hover { color: var(--bear, #f87171); border-color: #f8717166; } :root[data-thema="hell"] .bib-coin { color: #0e7490; text-shadow: none; } :root[data-thema="hell"] .bib-eintrag { background: #ffffff88; } .panel-steckbrief .kachel-titel.tippt::after { color: #67e8f9; } :root[data-thema="hell"] .panel-steckbrief .kachel-titel { color: #0e7490; text-shadow: none; } .sb-inhalt { display: flex; flex-direction: column; gap: 10px; } .sb-meta { font-size: 10.5px; letter-spacing: .1em; color: var(--leise, #64748b); text-transform: uppercase; } .sb-kopf { font-size: 15px; font-weight: 700; color: var(--text, #e5edff); } .sb-kopf small { display: block; font-weight: 400; font-size: 12px; color: var(--gedaempft, #94a3b8); margin-top: 2px; } .sb-abschnitt { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #67e8f9; margin-top: 4px; padding-bottom: 3px; border-bottom: 1px solid #22d3ee33; } .sb-text { font-size: 12.5px; line-height: 1.5; color: var(--text, #e5edff); } .sb-liste { margin: 0; padding-left: 16px; font-size: 12.5px; line-height: 1.5; color: var(--text, #e5edff); } .sb-liste li { margin: 2px 0; } .sb-zeile { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.45; } .sb-zeile b { flex: 0 0 104px; color: var(--gedaempft, #94a3b8); font-weight: 600; } .sb-zeile span { min-width: 0; color: var(--text, #e5edff); } .sb-quellen a { color: var(--hellblau, #7dd3fc); text-decoration: none; word-break: break-all; } .sb-quellen a:hover { text-decoration: underline; } .sb-frage { font-size: 12px; color: #ffd60a; font-style: italic; } .sb-md { font-size: 12.5px; line-height: 1.5; color: var(--text, #e5edff); } .sb-md h3 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #67e8f9; margin: 8px 0 4px; } .sb-md p { margin: 4px 0; } .sb-md ul { margin: 4px 0; padding-left: 16px; } .sb-md code { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 11.5px; } .sb-md a { color: var(--hellblau, #7dd3fc); word-break: break-all; } .sb-laeuft { color: #ffd60a; font-size: 12px; } .sb-laeuft::after { content: "▍"; margin-left: 2px; animation: tipp-cursor .8s steps(1, end) infinite; } :root[data-thema="hell"] .sb-abschnitt, :root[data-thema="hell"] .sb-md h3 { color: #0e7490; border-bottom-color: #0e749033; } :root[data-thema="hell"] .sb-frage, :root[data-thema="hell"] .sb-laeuft { color: #b45309; } /* ── Ranking-Block zuerst im Steckbrief (Nutzer 08.10. spät: „beim Steckbrief immer erst ein Ranking: Name, welcher Platz nach MC, MC, TVL, große Investoren") — aaos2.js steckbriefRendern baut ihn aus antwort.ranking (ältere Antworten: aus MC-Rang/Wert + Investoren) */ .sb-ranking { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; align-items: baseline; padding: 9px 11px; border-radius: 10px; border: 1px solid #22d3ee33; background: linear-gradient(135deg, #22d3ee12, #22d3ee04); font-size: 12.5px; line-height: 1.45; } .sb-ranking .sb-rang-kopf { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; margin-bottom: 2px; } .sb-ranking .sb-rang-name { font-size: 15px; font-weight: 700; color: var(--text, #e5edff); } .sb-ranking .sb-rang-platz { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 13px; font-weight: 600; color: #67e8f9; text-shadow: 0 0 8px #22d3ee66; letter-spacing: .06em; white-space: nowrap; } .sb-ranking b { color: var(--gedaempft, #94a3b8); font-weight: 600; white-space: nowrap; } .sb-ranking span { min-width: 0; color: var(--text, #e5edff); overflow-wrap: anywhere; } :root[data-thema="hell"] .sb-ranking { background: #0e74900d; border-color: #0e749033; } :root[data-thema="hell"] .sb-ranking .sb-rang-platz { color: #0e7490; text-shadow: none; } /* ── Analyse nach App-Kriterien (08.10. spät, aaos2.js analyseRendern): Prozent je Richtung groß, Kriterien als Zeilen, Setups wie in der App ── */ .sb-score { display: flex; gap: 14px; align-items: baseline; font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; } .sb-score b { font-size: 22px; font-weight: 600; letter-spacing: .04em; } .sb-score .long { color: var(--bull, #4ade80); text-shadow: 0 0 10px #22c55e66; } .sb-score .short { color: var(--bear, #f87171); text-shadow: 0 0 10px #a855f766; } .sb-score small { font-size: 10px; letter-spacing: .14em; color: var(--leise, #64748b); margin-right: 4px; } .sb-kriterium { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1px 10px; padding: 5px 0; border-bottom: 1px solid #ffffff0c; font-size: 12px; line-height: 1.45; } /* Punkte dürfen umbrechen — eine lange Punktezeile drückte den Namen sonst auf drei Zeilen (gemessen 08.10. spät) */ .sb-kriterium:last-child { border-bottom: 0; } .sb-kriterium .sb-k-name { color: var(--text, #e5edff); font-weight: 600; } .sb-kriterium .sb-k-punkte { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 11px; text-align: right; overflow-wrap: anywhere; color: var(--gedaempft, #94a3b8); } .sb-kriterium.long .sb-k-punkte { color: var(--bull, #4ade80); } .sb-kriterium.short .sb-k-punkte { color: var(--bear, #f87171); } .sb-kriterium .sb-k-befund { grid-column: 1 / -1; color: var(--gedaempft, #94a3b8); font-size: 11.5px; } .sb-setup { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 11px; } .sb-setup div { padding: 5px 6px; border-radius: 8px; background: #ffffff08; border: 1px solid #ffffff0c; min-width: 0; overflow-wrap: anywhere; } .sb-setup small { display: block; font-size: 9px; letter-spacing: .12em; color: var(--leise, #64748b); margin-bottom: 2px; } .sb-setup.long div { border-color: #22c55e33; } .sb-setup.short div { border-color: #a855f733; } /* ── 09.10. (Nutzer): „wenn ich über die Icons in der Menüleiste fahre, sollen die zum Leuchten beginnen" ────────────── Überfahren: weiß, leicht größer, weißer Kern + Akzent-Schein, der weich an- und abschwillt; gilt auch für gedrückte/offene Knöpfe (spätere Regel, gleiche Spezifität wie die Zustandsregeln oben). Reduced motion: kein Pulsieren, kein Wachsen. */ #werkzeuge .rund-knopf, #werkzeuge .wz-knopf { transition: color .25s ease, filter .3s ease, transform .25s ease, opacity .25s ease; } #werkzeuge .rund-knopf:hover, #werkzeuge .wz-knopf:hover, #werkzeuge .wz-knopf.aktiv:hover, #werkzeuge #raumKnopf[aria-expanded="true"]:hover, #werkzeuge #top20Knopf:hover, #werkzeuge #kerzenKnopf:hover { color: #fff; opacity: 1; transform: scale(1.14); filter: drop-shadow(0 0 4px #000c) drop-shadow(0 0 8px #ffffffcc) drop-shadow(0 0 16px var(--raum-akzent)) drop-shadow(0 0 30px #3b82f688); animation: wz-leuchten 1.3s ease-in-out infinite alternate; } #werkzeuge .ansicht-schalter > a:hover { color: #fff; text-shadow: 0 0 6px #000c, 0 0 10px #fff, 0 0 18px var(--raum-akzent), 0 0 30px #3b82f688; } @keyframes wz-leuchten { from { filter: drop-shadow(0 0 4px #000c) drop-shadow(0 0 8px #ffffffcc) drop-shadow(0 0 14px var(--raum-akzent)) drop-shadow(0 0 24px #3b82f666); } to { filter: drop-shadow(0 0 4px #000c) drop-shadow(0 0 10px #ffffff) drop-shadow(0 0 20px var(--raum-akzent)) drop-shadow(0 0 40px #3b82f6aa); } } @media (prefers-reduced-motion: reduce) { #werkzeuge .rund-knopf:hover, #werkzeuge .wz-knopf:hover { animation: none; transform: none; } } /* ── 09.10. (Nutzer): „eine Farbpalette mit 8 Variationen für die Kachel, eine mit Holo-Effekt" — html[data-kachelstil] ─────── Glas = Standard (kein Attribut; folgt der Kachel-Farbe aus farbenAnwenden). Die Werte stehen auf .panel selbst, damit sie die Inline-Variablen am html-Element (--glas-rand/--glas-schein aus farbenAnwenden) für die Kachel überstimmen. Neon nimmt die Kachel-Farbe (--kachel-akzent) als Leuchtrand; Holo = wandernder Regenbogenrand (Rand-Verlauf hinter der Glasfläche, background-clip) plus Schimmer-Overlay (::after, screen); die übrigen bringen ihre Tönung mit. .panel.karte setzt background/border eigens → mitgelistet. */ /* Holo, umgebaut 09.10. abends (Nutzer: „Holo-Kacheln gehen nicht, die blinken nur"): Die erste Fassung animierte den Hintergrund der Kachel selbst — die hat backdrop-filter, jede Animationsstufe zeichnet den Blur neu — und legte einen screen-geblendeten ::after-Schimmer darüber; außerdem lief der 1-px-Rand mit 3 Verläufen je 9 s so schnell, dass er flackerte statt zu wandern. Jetzt: Kachelfläche und Blur bleiben ruhig (statische, leicht irisierende Tönung); der Regenbogen ist ein 2-px-Ring auf ::before (Maske schneidet die Mitte frei, eigene Compositor-Ebene per will-change), der in 12 s einmal durchwandert (150 % = genau ein Verlauf → nahtlose Schleife); kein mix-blend-mode; ::after bleibt frei für Alarm und Schimmer. */ html[data-kachelstil="holo"] .panel, html[data-kachelstil="holo"] .panel.karte { --glas: linear-gradient(115deg, #ff6ec71c, #22d3ee16 30%, #facc1510 55%, #a855f71c 80%, #ff6ec71c), linear-gradient(160deg, #0b1324f0, #0a1020ea); --glas-rand: transparent; --glas-schein: 0 0 0 1px #ffffff14 inset, 0 0 42px #22d3ee2a, 0 0 70px #a855f722, 0 32px 70px #00000099; background: var(--glas); border-color: var(--glas-rand); box-shadow: var(--glas-schein); } html[data-kachelstil="holo"] .panel::before { left: -1px; right: -1px; top: -1px; bottom: -1px; height: auto; border-radius: 19px; padding: 2px; background: linear-gradient(120deg, #ff6ec7, #22d3ee, #facc15, #a855f7, #22d3ee, #ff6ec7) 0% 0 / 300% 100% repeat; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; will-change: transform; animation: holo-rand 12s linear infinite; } html[data-kachelstil="holo"] .panel.aktiv { box-shadow: 0 0 0 1px #ffffff33 inset, 0 0 70px #22d3ee44, 0 0 90px #a855f733, 0 32px 70px #00000099; } @keyframes holo-rand { from { background-position: 0% 0; } to { background-position: 150% 0; } } @media (prefers-reduced-motion: reduce) { html[data-kachelstil="holo"] .panel::before { animation: none; } } html[data-kachelstil="neon"] .panel, html[data-kachelstil="neon"] .panel.karte { --glas: linear-gradient(160deg, #070b16f5, #05080ff0); --glas-rand: var(--kachel-akzent, #3b82f6); --glas-schein: 0 0 0 1px var(--kachel-akzent, #3b82f6) inset, 0 0 28px color-mix(in srgb, var(--kachel-akzent, #3b82f6) 55%, transparent), 0 0 70px color-mix(in srgb, var(--kachel-akzent, #3b82f6) 25%, transparent), 0 32px 70px #00000099; } html[data-kachelstil="nacht"] .panel, html[data-kachelstil="nacht"] .panel.karte { --glas: linear-gradient(160deg, #04060cfa, #020308f8); --glas-rand: #ffffff16; --glas-schein: 0 0 0 1px #000 inset, 0 30px 70px #000d; } html[data-kachelstil="frost"] .panel, html[data-kachelstil="frost"] .panel.karte { --glas: linear-gradient(160deg, #1b2740cc, #121a2ec2); --glas-rand: #c7d7ff55; --glas-schein: 0 0 0 1px #ffffff14 inset, 0 0 40px #93c5fd22, 0 32px 70px #00000088; backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); } html[data-kachelstil="kupfer"] .panel, html[data-kachelstil="kupfer"] .panel.karte { --glas: linear-gradient(160deg, #1a1208ea, #0f0a05e0); --glas-rand: #f59e0b66; --glas-schein: 0 0 0 1px #3a2a10 inset, 0 0 42px #f59e0b22, 0 32px 70px #00000099; } html[data-kachelstil="smaragd"] .panel, html[data-kachelstil="smaragd"] .panel.karte { --glas: linear-gradient(160deg, #06201ae8, #04140fe0); --glas-rand: #34d39966; --glas-schein: 0 0 0 1px #0b3a2e inset, 0 0 42px #34d39922, 0 32px 70px #00000099; } html[data-kachelstil="violett"] .panel, html[data-kachelstil="violett"] .panel.karte { --glas: linear-gradient(160deg, #150a2ae8, #0c0618e0); --glas-rand: #a855f766; --glas-schein: 0 0 0 1px #2a1250 inset, 0 0 42px #a855f726, 0 32px 70px #00000099; } /* Schwebend (Nutzer 09.10. abends: „noch eine Kachel-Farben-Option ohne Umrandung, also einfach, dass die Schrift schwebt, aber die Anordnung gleich bleibt"): keine Fläche, kein Rand, kein Schein, kein Blur, keine Lichtkante — Maße, Abstände und Lage der Kachel bleiben, nur die Hülle verschwindet. Die Alarm-Pulsierung (::after) bleibt als Hinweis bestehen. Mitgelistet sind alle Zustände, die sonst Rand/Schein eigens setzen (aktiv, alarm, stark, schimmer), damit keine Hülle zurückkommt. */ /* 15.10.2026 spät: Schwebend ist jetzt die Grundeinstellung — die drei Handelsfenster (Long, Short, Custom Trade) sind davon ausgenommen und behalten Kasten und Leuchten (Nutzer: „Long grün leuchtend wie jetzt, Short rot, Trade orange"); gemessen war ihr Schein unter Schwebend „none". Alle anderen Kacheln schweben wie bisher. */ html[data-kachelstil="schwebend"] .panel:not([data-panel="long"]):not([data-panel="short"]):not([data-panel="custom"]):not([data-panel="zeitmaschine"]), html[data-kachelstil="schwebend"] .panel.karte:not([data-panel="long"]):not([data-panel="short"]):not([data-panel="custom"]):not([data-panel="zeitmaschine"]), html[data-kachelstil="schwebend"] .panel.aktiv:not([data-panel="long"]):not([data-panel="short"]):not([data-panel="custom"]):not([data-panel="zeitmaschine"]), html[data-kachelstil="schwebend"] .panel.alarm:not([data-panel="long"]):not([data-panel="short"]):not([data-panel="custom"]):not([data-panel="zeitmaschine"]), html[data-kachelstil="schwebend"] .panel.stark:not([data-panel="long"]):not([data-panel="short"]):not([data-panel="custom"]):not([data-panel="zeitmaschine"]), html[data-kachelstil="schwebend"] .panel.schimmer:not(.aktiv):not([data-panel="long"]):not([data-panel="short"]):not([data-panel="custom"]):not([data-panel="zeitmaschine"]) { --glas: transparent; --glas-rand: transparent; --glas-schein: none; background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } html[data-kachelstil="schwebend"] .panel:not([data-panel="long"]):not([data-panel="short"]):not([data-panel="custom"]):not([data-panel="zeitmaschine"])::before { display: none; } /* Schild (Nutzer 10.10. abends: "eine weitere Auswahl beim Kachel-Stil: Schild"): eine gepanzerte Platte statt einer Glasscheibe. Das Wabenraster sind DREI repeating-linear-gradients (0 Grad, +60, -60) in der Kachel-Akzentfarbe — ein echtes Dreiecksgitter, ohne SVG und ohne zweite Ebene. Darueber eine Lichtkante oben (gewoelbtes Metall), 2 px Rand (box-sizing: border-box, also layoutneutral) und ein kraeftigeres Kantenlicht. Bewusst statisch: nichts animiert, der Blur bleibt unberuehrt (Merker 119). */ html[data-kachelstil="schild"] .panel, html[data-kachelstil="schild"] .panel.karte { --schild-linie: color-mix(in srgb, var(--kachel-akzent, #3b82f6) 30%, transparent); --glas: linear-gradient(180deg, #ffffff18, #ffffff00 20%), repeating-linear-gradient(60deg, var(--schild-linie) 0 1px, transparent 1px 21px), repeating-linear-gradient(-60deg, var(--schild-linie) 0 1px, transparent 1px 21px), repeating-linear-gradient(0deg, var(--schild-linie) 0 1px, transparent 1px 36px), linear-gradient(160deg, #0d1322f2, #070b13ee); --glas-rand: color-mix(in srgb, var(--kachel-akzent, #3b82f6) 70%, #e2e8f5); --glas-schein: 0 0 0 1px #ffffff1c inset, 0 0 24px color-mix(in srgb, var(--kachel-akzent, #3b82f6) 34%, transparent) inset, 0 0 30px color-mix(in srgb, var(--kachel-akzent, #3b82f6) 26%, transparent), 0 32px 70px #000000a6; background: var(--glas); border: 2px solid var(--glas-rand); box-shadow: var(--glas-schein); } html[data-kachelstil="schild"] .panel.aktiv { box-shadow: 0 0 0 1px #ffffff2e inset, 0 0 36px color-mix(in srgb, var(--kachel-akzent, #3b82f6) 48%, transparent) inset, 0 0 70px color-mix(in srgb, var(--kachel-akzent, #3b82f6) 34%, transparent), 0 32px 70px #000000a6; } /* Vorschau-Chips in der Einstellungen-Kachel tragen ihren Ton */ #kachelStilWahl .chip[data-stil="holo"] { background: linear-gradient(120deg, #ff6ec733, #22d3ee33, #facc1533, #a855f733); } #kachelStilWahl .chip[data-stil="schwebend"]:not(.aktiv) { background: transparent; border-color: transparent; text-shadow: 0 0 8px #ffffff99; } #kachelStilWahl .chip[data-stil="neon"] { box-shadow: 0 0 0 1px var(--kachel-akzent, #3b82f6) inset, 0 0 10px color-mix(in srgb, var(--kachel-akzent, #3b82f6) 60%, transparent); } #kachelStilWahl .chip[data-stil="nacht"] { background: #04060c; } #kachelStilWahl .chip[data-stil="frost"] { background: #1b2740cc; } #kachelStilWahl .chip[data-stil="kupfer"] { background: #1a1208; border-color: #f59e0b66; } #kachelStilWahl .chip[data-stil="smaragd"] { background: #06201a; border-color: #34d39966; } #kachelStilWahl .chip[data-stil="violett"] { background: #150a2a; border-color: #a855f766; } #kachelStilWahl .chip[data-stil="schild"] { background: repeating-linear-gradient(60deg, #ffffff1f 0 1px, transparent 1px 9px), repeating-linear-gradient(-60deg, #ffffff1f 0 1px, transparent 1px 9px), #0d1322; border-color: color-mix(in srgb, var(--kachel-akzent, #3b82f6) 70%, #e2e8f5); } /* ── Erklär-Tipp (10.10., Nutzer mit Bild des grauen Systemkastens: „das muss so aussehen wie die erklärungs kacheln"): ersetzt den nativen Browser-Tooltip. aaos2.js (erklaerInit) zieht jedes title= nach data-tipp um; gezeigt wird stattdessen diese Kachel — dieselbe Glasfläche, derselbe Rand und derselbe Titelstil wie die Erklär-Karten im Zahnrad-Menü (.raum-karte) und die Rundgang-Blase. Steht in den ersten Zeichen des Textes ein „: ", wird der Teil davor zur Titelzeile. z 31 = über allem (auch über Rundgang z 20 und Erklärvideo z 30); pointer-events: none, die Kachel kann also nichts verdecken, was bedient wird. Bewusst OHNE Transition/Animation: das Element trägt backdrop-filter (Merker 119). */ #erklaerTipp[hidden] { display: none; } #erklaerTipp { position: fixed; left: 0; top: 0; z-index: 31; pointer-events: none; box-sizing: border-box; width: max-content; max-width: min(360px, calc(100vw - 24px)); padding: 12px 15px 13px; border-radius: 16px; background: var(--glas); border: 1px solid var(--glas-rand); box-shadow: var(--glas-schein); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); color: var(--text); } #erklaerTipp .erkl-titel[hidden] { display: none; } #erklaerTipp .erkl-titel { font-size: 13.5px; font-weight: 700; line-height: 1.3; margin-bottom: 7px; color: var(--text); } #erklaerTipp .erkl-text { margin: 0; font-size: 12.5px; line-height: 1.52; color: var(--gedaempft); } /* Todesstern-Treffer (10.10., Nutzer: „die soll sich in sich pixel fur pixel aufloesen und nach 5 sec wieder aufbauen"): Waehrend die Maske laeuft, bleibt der Blur aus — sonst zeichnet backdrop-filter jede Stufe neu (Merker 119). Die Kachel nimmt in dieser Zeit keine Klicks an; der Treffer selbst blitzt kurz auf. */ .panel.zerfaellt { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; pointer-events: none; } .panel.getroffen { filter: brightness(1.9) saturate(1.25); } /* ── Kachel-Suche in der Werkzeugleiste (13.10.2026, aaos2.js sucheInit) ───────────────────────────── */ /* 14.10.2026 (Nutzer: „die suchleiste soll über btc usdt liegen"): aus der Werkzeugleiste herausgelöst und fest über den Kopf des Kerzen-Charts gelegt — gleiche Breite und gleicher rechter Rand wie #kerzen, 8 px darüber. Die Lage folgt dem Höhen-Regler: Chart-Oberkante = (100% − Höhe)/2 von oben, also (100% + Höhe)/2 von unten. */ #werkzeuge .wz-suche { position: fixed; right: 22px; bottom: calc((100% + var(--kerzen-hoehe, 50%)) / 2 + 8px); width: var(--kerzen-breite, 270px); box-sizing: border-box; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin: 0; } #werkzeuge .wz-suche input { flex: 1 1 60px; min-width: 0; } /* das Feld gibt nach, die Chips bleiben lesbar */ body.ohne-kerzen #werkzeuge .wz-suche { bottom: 22px; } /* ohne Chart kein Bezugspunkt — dann unten rechts */ /* 14.10.2026 (Nutzer: „das such fenster soll die selbe farbe haben wie claude kachel"): Feld und Chips in den Farben der Claude-Leiste (--claude-farbe, Palette „Claude-Leiste") — dieselben Mischungen wie .frage-box input / button */ #werkzeuge .wz-suche input { width: 170px; height: 28px; padding: 0 10px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--claude-farbe, #67e8f9) 27%, transparent); background: #0d1526cc; color: #dbeafe; font: inherit; font-size: 12.5px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); outline: none; } #werkzeuge .wz-suche input:focus { border-color: var(--claude-farbe, #3b82f6); box-shadow: 0 0 0 3px color-mix(in srgb, var(--claude-farbe, #3b82f6) 13%, transparent), 0 0 14px color-mix(in srgb, var(--claude-farbe, #3b82f6) 33%, transparent); } #werkzeuge .wz-suche input::placeholder { color: color-mix(in srgb, var(--claude-farbe, #67e8f9) 53%, transparent); } #werkzeuge .wz-suche .chip { border-color: color-mix(in srgb, var(--claude-farbe, #67e8f9) 40%, transparent); color: color-mix(in srgb, var(--claude-farbe, #67e8f9) 80%, transparent); background: #0d152699; } #werkzeuge .wz-suche .chip:hover { color: #fff; border-color: var(--claude-farbe, #3b82f6); } #werkzeuge .wz-suche .chip.aktiv { color: #061018; background: var(--claude-farbe, #67e8f9); border-color: var(--claude-farbe, #67e8f9); } #werkzeuge .wz-suche input::-webkit-search-cancel-button { -webkit-appearance: none; } #werkzeuge .wz-suche .chip { font-size: 11px; padding: 4px 9px; } #werkzeuge .wz-suche-stand { flex: 1 0 100%; text-align: right; font-size: 11px; color: var(--leise); text-shadow: 0 0 8px #000; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.lesemodus-an #kachelSuche, body.lesemodus-an #kachelSuche * { opacity: 0; pointer-events: none; } /* Treffer „Leuchten": die Kachel pulsiert fünfmal gelb im Ring */ .panel.gesucht { animation: gesucht .85s ease-in-out 5; } @keyframes gesucht { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 6px #ffd60aaa, 0 0 60px 18px #ffd60a99; } } @media (prefers-reduced-motion: reduce) { .panel.gesucht { animation: none; box-shadow: 0 0 0 6px #ffd60aaa, 0 0 60px 18px #ffd60a99; } } /* ── Kachel-Liste, Orbit-Ebene, Freilauf im Zahnrad-Menü (13.10.2026) ─────────────────────────────── */ #kachelListeWahl .chip { font-size: 11px; padding: 4px 8px; } #kachelListeWahl .chip:not(.aktiv) { opacity: .45; text-decoration: line-through; } #kachelListeStand { align-self: center; margin: 0; } #orbitNeigungWahl .farb-name, #dsFreilaufWahl .farb-name { align-self: center; } /* ── Kachel „Offene Trades" (14.10.2026, Nutzer mit Bild: „das muss besser formatiert sein"): je Position eine eigene Karte mit Rand und Lesebreite — in der doppelt breiten Lese-Kachel liefen Kopfzeile, TP-Zeilen und Beträge sonst über die ganze Breite auseinander. Spalten der TP/SL-Zeilen fest, Beträge rechtsbündig in einer Flucht. Nur die Trades-Kachel — die Box unten in der Long-/Short-Kachel (.hlt-in-karte) bleibt, wie sie ist. ──────────────────────────────────────── */ .panel #hlTradesListe { display: flex; flex-direction: column; gap: 10px; } .panel #hlTradesListe .hlt { max-width: 760px; padding: 12px 14px 10px; border: 1px solid #ffffff1a; border-radius: 12px; background: #ffffff06; } .panel #hlTradesListe .hlt:first-child { border-top: 1px solid #ffffff1a; padding-top: 12px; } .panel #hlTradesListe .hlt-kopf { gap: 12px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid #ffffff12; } .panel #hlTradesListe .hlt-warn { margin: 8px 0; } .panel #hlTradesListe .hlt-knoepfe { margin-top: 10px; } .panel #hlTradesFuss { margin-top: 10px; } /* Vergangene Trades (23.10.2026): dieselbe Karte je Trade wie die Offenen Trades, die Liste scrollt in der Kachel */ .panel.karte > #hlVerlaufListe { flex: 1; min-height: 0; overflow: auto; } .panel #hlVerlaufListe { display: flex; flex-direction: column; gap: 10px; } .panel #hlVerlaufListe .hlt { max-width: 760px; padding: 10px 14px 9px; border: 1px solid #ffffff1a; border-radius: 12px; background: #ffffff06; } .panel #hlVerlaufListe .hlt:first-child { border-top: 1px solid #ffffff1a; padding-top: 10px; } .panel #hlVerlaufListe .hlt-kopf { gap: 12px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid #ffffff12; } .panel #hlVerlaufSumme, .panel #hlVerlaufFuss { flex: 0 0 auto; } .panel #hlVerlaufFuss { margin-top: 10px; } :root[data-thema="hell"] .panel #hlVerlaufListe .hlt { border-color: #0000001a; background: #00000006; } :root[data-thema="hell"] .panel #hlTradesListe .hlt { border-color: #0000001a; background: #00000006; } /* ── Verlaufs-Blase zu den Eingabefeldern (14.10.2026, aaos2.js verlaufInit): ersetzt die graue Vorschlagsliste des Browsers (autocomplete="off" an #frageFeld, #fragefeld, #suchfeld) — dieselbe Glasfläche wie #erklaerTipp (Nutzer mit Bild: „alle pop ups müssen aussehen wie die bei den erklärungen"). z 31 wie der Erklär-Tipp, aber klickbar. ───────────────────────────── */ #verlaufTipp[hidden] { display: none; } #verlaufTipp { position: fixed; left: 0; top: 0; z-index: 31; box-sizing: border-box; max-width: min(440px, calc(100vw - 24px)); padding: 8px; border-radius: 16px; background: var(--glas); border: 1px solid var(--glas-rand); box-shadow: var(--glas-schein); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); color: var(--text); font-size: 12.5px; line-height: 1.4; } #verlaufTipp .vl-titel { padding: 4px 10px 6px; font-size: 9.5px; letter-spacing: .12em; color: var(--leise); } #verlaufTipp .vl-zeile { padding: 7px 10px; border-radius: 10px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--gedaempft); } #verlaufTipp .vl-zeile:hover, #verlaufTipp .vl-zeile.aktiv { background: #3b82f626; color: var(--text); } /* ── Notizen-Kachel (14.10.2026, aaos2.js notizInit): ein Textfeld füllt die Kachel, Standzeile darunter ───────────── */ .panel-notiz .notiz-inhalt { display: flex; flex-direction: column; gap: 6px; overflow: hidden; } .panel-notiz textarea { flex: 1; min-height: 0; width: 100%; box-sizing: border-box; resize: none; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--rand); background: #0b1020b3; color: var(--text); font: inherit; font-size: 13px; line-height: 1.55; outline: none; } .panel-notiz textarea:focus { border-color: var(--raum-akzent); box-shadow: 0 0 0 3px #3b82f633; } .panel-notiz textarea::placeholder { color: var(--leise); } .panel-notiz .notiz-stand { flex: 0 0 auto; font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--stand-farbe, #95a0b0); } :root[data-thema="hell"] .panel-notiz textarea { background: #ffffffcc; color: #17233c; border-color: #b3c2de; } /* ── Feedback-Fenster (15.10.2026) — Lage und Glas wie das Zahnrad-Menü (#raumMenue), damit beide Fenster gleich wirken ── */ #feedbackFenster { position: fixed; right: 18px; top: 92px; width: min(380px, calc(100vw - 36px)); z-index: 8; padding: 12px 14px 14px; border-radius: 16px; background: var(--glas); border: 1px solid var(--glas-rand); box-shadow: var(--glas-schein); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--text, #dbeafe); } #feedbackFenster[hidden] { display: none; } #feedbackFenster .feedback-kopf { display: flex; justify-content: space-between; align-items: center; margin: 0 2px 8px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } #feedbackFenster .feedback-zu { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--rand-hell); background: transparent; color: var(--gedaempft); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } #feedbackFenster .feedback-zu:hover { color: var(--text); border-color: var(--raum-akzent); } #feedbackFenster .feedback-zu svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } #feedbackFenster .feedback-label { display: block; margin: 0 2px 6px; font-size: 12px; color: var(--gedaempft); } #feedbackFenster textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 110px; max-height: 50vh; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--glas-rand); background: #060a1499; color: inherit; font: 14px/1.45 Inter, system-ui, sans-serif; } #feedbackFenster textarea:focus { outline: none; border-color: var(--raum-akzent); box-shadow: 0 0 0 3px #3b82f633; } #feedbackFenster .feedback-fuss { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; } #feedbackFenster .feedback-stand { font-size: 11px; line-height: 1.35; color: var(--gedaempft); } #feedbackFenster .feedback-senden { flex: none; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--raum-akzent); background: #3b82f633; color: #dbeafe; font: 600 13px Inter, system-ui, sans-serif; cursor: pointer; } #feedbackFenster .feedback-senden:hover:not(:disabled) { background: #3b82f655; } #feedbackFenster .feedback-senden:disabled { opacity: .45; cursor: default; } #werkzeuge #feedbackKnopf[aria-expanded="true"] { color: #fff; filter: drop-shadow(0 0 5px #000c) drop-shadow(0 0 9px #3b82f6cc); } :root[data-thema="hell"] #feedbackFenster textarea { background: #ffffffcc; } :root[data-thema="hell"] #feedbackFenster .feedback-senden { color: #1d4ed8; background: #3b82f61a; } /* ── Custom-Trade-Kachel (15.10.2026) — Glühen kommt von panel-long/panel-short (Richtung), hier nur das Formular ── */ .ct-inhalt { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 0; } .ct-kopf { display: flex; gap: 10px; align-items: flex-end; } .ct-coin { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gedaempft); } .ct-inhalt input { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--glas-rand); background: #060a14b3; color: var(--text); font: 500 14px/1.2 "JetBrains Mono", ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; } .ct-inhalt input:focus { outline: none; border-color: var(--raum-akzent); box-shadow: 0 0 0 3px #3b82f633; } .ct-inhalt input:disabled { opacity: .6; } .ct-schalter { display: inline-flex; gap: 4px; align-items: center; padding: 3px; border-radius: 10px; border: 1px solid var(--glas-rand); background: #060a1480; } .ct-schalter button { padding: 6px 12px; border-radius: 8px; border: 0; background: transparent; color: var(--gedaempft); font: 600 12px Inter, system-ui, sans-serif; cursor: pointer; } .ct-schalter button[aria-pressed="true"] { background: #3b82f633; color: var(--text); } #ctRichtung button[data-richtung="long"][aria-pressed="true"] { background: #22c55e33; color: #4ade80; box-shadow: 0 0 12px #22c55e44; } #ctRichtung button[data-richtung="short"][aria-pressed="true"] { background: #ef444433; color: #f87171; box-shadow: 0 0 12px #ef444444; } .ct-modus { align-self: flex-start; } .ct-klein { font-size: 10px; letter-spacing: .04em; text-transform: none; color: var(--gedaempft); margin-left: 6px; } .ct-gitter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; } .ct-gitter label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gedaempft); } .ct-gitter .ct-breit { grid-column: 1 / -1; } .ct-rechnung { font-size: 12px; line-height: 1.5; color: var(--text); min-height: 2.6em; } .ct-warn { color: #fbbf24; } .ct-plus { color: #4ade80; } .ct-minus { color: #f87171; } .ct-knoepfe { display: flex; flex-direction: column; gap: 8px; } .ct-knoepfe button, .ct-schliessen { width: 100%; padding: 11px 14px; border-radius: 11px; font: 700 13px Inter, system-ui, sans-serif; letter-spacing: .03em; cursor: pointer; } .ct-oeffnen.ct-long { border: 1px solid #22c55e; background: #16a34a40; color: #bbf7d0; box-shadow: 0 0 18px #22c55e33; } .ct-oeffnen.ct-short { border: 1px solid #ef4444; background: #dc262640; color: #fecaca; box-shadow: 0 0 18px #ef444433; } .ct-oeffnen:disabled { opacity: .45; cursor: default; box-shadow: none; } .ct-zeichnen { border: 1px solid #fb923c; background: #f9731618; color: #ffc999; } .ct-zeichnen:hover { background: #f9731630; } .ct-schliessen { border: 1px solid #94a3b8; background: transparent; color: var(--text); } .ct-schliessen.ct-scharf { border-color: #ef4444; background: #ef444433; color: #fecaca; } .ct-position { font-size: 12px; padding: 8px 10px; border-radius: 9px; border: 1px dashed var(--glas-rand); } .ct-stand { font-size: 12px; line-height: 1.5; padding: 8px 10px; border-radius: 9px; background: #060a1480; border: 1px solid var(--glas-rand); } .ct-stand-ok { border-color: #22c55e88; } .ct-stand-fehler { border-color: #ef4444; color: #fecaca; } .ct-stand-warn { border-color: #fbbf24aa; } .ct-stand-laeuft { border-color: var(--raum-akzent); } :root[data-thema="hell"] .ct-inhalt input, :root[data-thema="hell"] .ct-schalter, :root[data-thema="hell"] .ct-stand { background: #ffffffcc; } /* ── Custom Trade leuchtet orange (15.10.2026 spät, Nutzer: „Trade soll in Orange leuchten"; Stärke wie Long/Short nach der Abschwächung) ── */ .panel-custom { border-color: #f97316cc; box-shadow: 0 0 0 1px #431407 inset, 0 0 56px #f973164d, 0 0 120px #f9731624, 0 32px 70px #00000099; background: linear-gradient(165deg, #05070cf7, #020308f5); } .panel-custom::before { background: linear-gradient(90deg, transparent, #f97316cc, #fdba74aa, transparent); } .panel-custom .kachel-titel { color: #fb923c; border-bottom-color: #f9731644; text-shadow: 0 0 6px #fb923ccc, 0 0 16px #f9731688; } .panel-custom.aktiv { box-shadow: 0 0 0 1px #fb923c inset, 0 0 72px #f9731673, 0 0 150px #f9731633, 0 32px 70px #00000099; } /* ── Raster-Ansicht (15.10.2026) — Kacheln gleich groß nebeneinander, scrollbar; Kugel/Coin/Prozent, Leiste links, Kerzen, Kachel-Suche und Claude-Leiste treten ab (der ganze Bildschirm gehört den Kacheln). Mechanik in aaos2.js rasterSetzen. ── */ #raster { display: none; } body.raster #raster { display: grid; position: fixed; top: 0; bottom: 0; left: calc(var(--top-breite, 128px) + 56px); right: calc(var(--kerzen-breite, 270px) + 56px); z-index: 4; /* 15.10. spät: zwischen Leiste links und Kerzen rechts (Nutzer: „rechts die Candles, links die News, schön strukturiert in der Mitte") */ box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; padding: 150px 4px 40px; gap: 96px 22px; align-content: start; /* oben/zwischen den Reihen Platz für die Holo-Titel, die über jeder Kachel hängen (gemessen: sonst Titel der nächsten Reihe in der Kachel darüber) */ grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); grid-auto-rows: 560px; } body.raster #raster > .panel { position: relative !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; transform: none !important; visibility: visible; pointer-events: auto; opacity: 1; min-width: 0; } body.raster #raster > .panel.hinter-kamera { visibility: visible; pointer-events: auto; } body.raster.gezoomt #raster > .panel:not(.aktiv) { opacity: .35; } body.raster #raster > .panel.aktiv { position: fixed !important; z-index: 9; top: 140px !important; bottom: 24px; left: max(3vw, calc(50% - 600px)) !important; right: max(3vw, calc(50% - 600px)); height: auto !important; } body.raster.gezoomt #raster::before { content: ""; position: fixed; inset: 0; z-index: 8; background: #02040acc; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } body.raster .raum-label { opacity: 0 !important; } /* 15.10. spät: Leiste links, Kerzen, Suche und Claude-Leiste bleiben im Raster sichtbar */ #werkzeuge #rasterKnopf[aria-pressed="true"] { color: #fff; filter: drop-shadow(0 0 5px #000c) drop-shadow(0 0 9px #3b82f6cc); } /* ── Orbit-Stopp und zwei Säulen (15.10.2026 spät) — hintere Kacheln der Säulen blasser (aaos2.js saeuleSetzen setzt --saeule-hell) ── */ body.saeulen .panel:not(.aktiv) { opacity: var(--saeule-hell, 1); } #werkzeuge #orbitStoppKnopf[aria-pressed="true"], #werkzeuge #saeulenKnopf[aria-pressed="true"] { color: #fff; filter: drop-shadow(0 0 5px #000c) drop-shadow(0 0 9px #3b82f6cc); } /* ── 15.10.2026 spät: Werkzeugleiste und Säulen nach Reppa v4 ── */ #werkzeuge #fgKnopf { display: none; } body.bubble-blick #werkzeuge #fgKnopf { display: inline-flex; } /* Tacho-Schalter nur im Bubble-Blick, rechts neben dem Bubble-Knopf */ /* Säulen wie Reppa v4: Kacheln quer 720 × 300 und blickdicht (Reppa: „blickdicht, hintere nur dunkler"); die geöffnete Kachel bekommt ihre volle Größe zurück. Long/Short/Custom behalten ihre eigene Hülle. */ body.saeulen .panel:not(.aktiv) { width: 864px !important; height: 360px !important; } /* 23.10. (Gate 7, Nutzer: „Kacheln etwas größer"): 1,2× von 720 × 300; Höhe = SAEULE_KACHEL_H in aaos2.js */ body.saeulen .panel:not(.aktiv):not([data-panel="long"]):not([data-panel="short"]):not([data-panel="custom"]):not([data-panel="zeitmaschine"]) { background: linear-gradient(165deg, #0a1122fa, #050811f7) !important; border-color: #27395f !important; } /* Kerzen-Stil (23.10.2026): eigene Gruppe über den Intervall-Chips — mit Abstand, sonst liest man beide Reihen als eine. */ #kerzenStilWahl { margin-bottom: 12px; } /* Watchlist-Stern rechts neben der Prozentzahl (23.10.2026 spät, Einstellung „Stern rechts neben %", Standard): nur die Reihenfolge im Fluss — dieselben Spalten, dieselbe Breite (127,7 px bei 128), die Leiste wird nicht breiter. „Mitte" = ohne Klasse wie bisher. */ #topliste.stern-rechts .top-zeile .top-stern { order: 1; margin-right: 0; } /* ohne den rechten Negativrand: sonst ragt die Klickfläche 1 px und das Symbol ½ px über die Leistenkante (gemessen: Zeile scrollWidth > clientWidth in allen 14 Zeilen) */ #sternLageWahl { margin-bottom: 10px; } /* ── Schalter-Farben (23.10.2026 spät, Acht-Punkte-Runde Gate 4; Nutzer: alle Schalter-Icons gleiche Farben — eingeschaltet neongrün leuchtend, ausgeschaltet goldorange; Bubble-Knopf aktiv = grün statt dauerblau aus UEP 564). Gilt für die sechs Knöpfe, die ein Objekt ein- oder ausblenden: Bubble-Blick, Tacho, Leiste links, Kerzen, Kacheln, Mitte. Der Durchstreich-Strich im Aus-Zustand bleibt als zweites Signal neben der Farbe. 23.10.2026 ≈ 23:05 (Nutzer: „ich will die aktuell grünen hellblau"): Ein-Farbe #00ff00 → Hellblau #38bdf8 (hell #0284c7). Bewusst kräftiger als das blasse Ruhe-Blau der übrigen Symbole (#bfe6ffd0, Zahnrad/Auge/Mond) — sonst sähe „an" aus wie „kein Schalter". Steht am Dateiende und überstimmt damit die älteren Zustandsregeln gleicher Spezifität (um Zeile 602–613, 639–641, 858–879; dort setzte Zeile 613 den Tacho-Knopf auch im DUNKLEN Design auf #1d4ed8 — fehlendes :root-Präfix, hier mit überstimmt). Überfahren behält die Zustandsfarbe, nur der Schein pulsiert (sonst würde jeder Knopf weiß und der Zustand unsichtbar). Gate 5 (Nutzer: „auch Raster anordnen"): dieselben Regeln für die sechs Ansichtsknöpfe Raster, Anordnen, Orbit-Stopp, Säulen, Kippen und Lesemodus. Zustand dort aria-pressed bzw. die Klasse .aktiv (Anordnen; Kippen ist .aktiv bei 45°/90°, 0° = aus). Gedrückt heißt „die Funktion des Knopfs läuft" — der Stopp-Knopf leuchtet also in der An-Farbe, solange der Orbit steht. Einen Strich bekommen die Ansichtsknöpfe nicht: „aus" ist bei ihnen der Normalzustand, kein weggeschaltetes Objekt; nur der Lesemodus behält seinen. Konkurrenten der Ansichtsknöpfe wiegen weniger oder stehen früher: Z. 600 `.wz-knopf.aktiv` (1,2,0), Z. 885 `#wzLesen[…]` (1,1,0), Z. 1206 Überfahren (1,3,0), Z. 1485/1489 (2,1,0), hell Z. 610–613 (1,3,0)/(1,4,0). */ #werkzeuge, .kachel-lesen { --wz-an: #38bdf8; --wz-aus: #ffaa00; } :root[data-thema="hell"] :is(#werkzeuge, .kachel-lesen) { --wz-an: #0284c7; --wz-aus: #b45309; } /* Hellblau/Goldorange tragen auf Weiß nicht */ /* 23.10.2026 ≈ 23:15 (Nutzer: „bubble und einstellungs knopf violet"): Bubble-Knopf und Zahnrad in BEIDEN Zuständen violett (--violett aus styles.css). Der Zustand bleibt am Schein ablesbar: an = dreifacher Schein, aus = schwach. Beim Zahnrad heißt „an" = Menü offen (aria-expanded, aaos2.js raumMenueSetzen). Die Farbe kommt über die Variablen — alle Regeln unten gelten weiter. */ /* 24.10.2026 (Nutzer: „Mache raster, Anordnen, säule auch violet"): dieselbe Regel für Raster, Anordnen und Säule — beide Zustände violett, an = kräftiger Schein. Orbit-Stopp und Kippen sind seit demselben Tag ausgeblendet (aaos2.html hidden); in der Leiste bleiben hellblau/goldorange damit die fünf Objekt-Schalter (Tacho, Leiste links, Kerzen, Kacheln, Mitte) und der Lesemodus. */ #werkzeuge :is(#bubbleKnopf, #raumKnopf, #rasterKnopf, #wzAnordnen, #saeulenKnopf) { --wz-an: var(--violett, #a855f7); --wz-aus: var(--violett, #a855f7); } :root[data-thema="hell"] #werkzeuge :is(#bubbleKnopf, #raumKnopf, #rasterKnopf, #wzAnordnen, #saeulenKnopf) { --wz-an: #9333ea; --wz-aus: #9333ea; } #werkzeuge :is(#rasterKnopf, #orbitStoppKnopf, #saeulenKnopf, #wzLesen)[aria-pressed="true"], #werkzeuge :is(#wzAnordnen, #orbitKippKnopf).aktiv, #werkzeuge #raumKnopf[aria-expanded="true"], #werkzeuge #bubbleKnopf[aria-pressed="true"], #werkzeuge #fgKnopf[aria-pressed="true"], #werkzeuge #top20Knopf[aria-pressed="true"], #werkzeuge #kerzenKnopf[aria-pressed="true"], #werkzeuge #kachelnKnopf[aria-pressed="true"], #werkzeuge #mitteKnopf[aria-pressed="true"] { color: var(--wz-an); opacity: 1; animation: none; border-color: transparent; box-shadow: none; filter: drop-shadow(0 0 4px #000c) drop-shadow(0 0 6px color-mix(in srgb, var(--wz-an) 90%, transparent)) drop-shadow(0 0 16px color-mix(in srgb, var(--wz-an) 55%, transparent)); } #werkzeuge :is(#rasterKnopf, #orbitStoppKnopf, #saeulenKnopf, #wzLesen)[aria-pressed="false"], #werkzeuge :is(#wzAnordnen, #orbitKippKnopf):not(.aktiv), #werkzeuge #raumKnopf[aria-expanded="false"], #werkzeuge #bubbleKnopf[aria-pressed="false"], #werkzeuge #fgKnopf[aria-pressed="false"], #werkzeuge #top20Knopf[aria-pressed="false"], #werkzeuge #kerzenKnopf[aria-pressed="false"], #werkzeuge #kachelnKnopf[aria-pressed="false"], #werkzeuge #mitteKnopf[aria-pressed="false"] { color: var(--wz-aus); opacity: 1; animation: none; filter: drop-shadow(0 0 4px #000c) drop-shadow(0 0 6px color-mix(in srgb, var(--wz-aus) 40%, transparent)); } #werkzeuge :is(#rasterKnopf, #orbitStoppKnopf, #saeulenKnopf, #wzLesen)[aria-pressed="true"]:hover, #werkzeuge :is(#wzAnordnen, #orbitKippKnopf).aktiv:hover, #werkzeuge #raumKnopf[aria-expanded="true"]:hover, #werkzeuge #bubbleKnopf[aria-pressed="true"]:hover, #werkzeuge #fgKnopf[aria-pressed="true"]:hover, #werkzeuge #top20Knopf[aria-pressed="true"]:hover, #werkzeuge #kerzenKnopf[aria-pressed="true"]:hover, #werkzeuge #kachelnKnopf[aria-pressed="true"]:hover, #werkzeuge #mitteKnopf[aria-pressed="true"]:hover { color: var(--wz-an); transform: scale(1.14); animation: wz-an-leuchten 1.3s ease-in-out infinite alternate; } #werkzeuge :is(#rasterKnopf, #orbitStoppKnopf, #saeulenKnopf, #wzLesen)[aria-pressed="false"]:hover, #werkzeuge :is(#wzAnordnen, #orbitKippKnopf):not(.aktiv):hover, #werkzeuge #raumKnopf[aria-expanded="false"]:hover, #werkzeuge #bubbleKnopf[aria-pressed="false"]:hover, #werkzeuge #fgKnopf[aria-pressed="false"]:hover, #werkzeuge #top20Knopf[aria-pressed="false"]:hover, #werkzeuge #kerzenKnopf[aria-pressed="false"]:hover, #werkzeuge #kachelnKnopf[aria-pressed="false"]:hover, #werkzeuge #mitteKnopf[aria-pressed="false"]:hover { color: var(--wz-aus); transform: scale(1.14); animation: wz-aus-leuchten 1.3s ease-in-out infinite alternate; } @keyframes wz-an-leuchten { from { filter: drop-shadow(0 0 4px #000c) drop-shadow(0 0 7px var(--wz-an)) drop-shadow(0 0 16px color-mix(in srgb, var(--wz-an) 60%, transparent)); } to { filter: drop-shadow(0 0 4px #000c) drop-shadow(0 0 10px var(--wz-an)) drop-shadow(0 0 28px color-mix(in srgb, var(--wz-an) 75%, transparent)); } } @keyframes wz-aus-leuchten { from { filter: drop-shadow(0 0 4px #000c) drop-shadow(0 0 7px color-mix(in srgb, var(--wz-aus) 70%, transparent)) drop-shadow(0 0 14px color-mix(in srgb, var(--wz-aus) 40%, transparent)); } to { filter: drop-shadow(0 0 4px #000c) drop-shadow(0 0 10px var(--wz-aus)) drop-shadow(0 0 24px color-mix(in srgb, var(--wz-aus) 60%, transparent)); } } :root[data-thema="hell"] #werkzeuge #raumKnopf[aria-expanded], :root[data-thema="hell"] #werkzeuge #bubbleKnopf[aria-pressed], :root[data-thema="hell"] #werkzeuge #fgKnopf[aria-pressed], :root[data-thema="hell"] #werkzeuge #top20Knopf[aria-pressed], :root[data-thema="hell"] #werkzeuge #kerzenKnopf[aria-pressed], :root[data-thema="hell"] #werkzeuge #kachelnKnopf[aria-pressed], :root[data-thema="hell"] #werkzeuge #mitteKnopf[aria-pressed], :root[data-thema="hell"] #werkzeuge :is(#rasterKnopf, #orbitStoppKnopf, #saeulenKnopf, #wzLesen, #wzAnordnen, #orbitKippKnopf) { animation: none; filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px #ffffffcc); } /* helles Design: die alte Regel :root[data-thema="hell"] … [aria-pressed="true"] { color: #1d4ed8 } wiegt (2,3,0) — gleich schwer und später */ :root[data-thema="hell"] #werkzeuge #raumKnopf[aria-expanded="true"], :root[data-thema="hell"] #werkzeuge #bubbleKnopf[aria-pressed="true"], :root[data-thema="hell"] #werkzeuge #fgKnopf[aria-pressed="true"], :root[data-thema="hell"] #werkzeuge #top20Knopf[aria-pressed="true"], :root[data-thema="hell"] #werkzeuge #kerzenKnopf[aria-pressed="true"], :root[data-thema="hell"] #werkzeuge #kachelnKnopf[aria-pressed="true"], :root[data-thema="hell"] #werkzeuge #mitteKnopf[aria-pressed="true"] { color: var(--wz-an); } :root[data-thema="hell"] #werkzeuge #raumKnopf[aria-expanded="false"], :root[data-thema="hell"] #werkzeuge #bubbleKnopf[aria-pressed="false"], :root[data-thema="hell"] #werkzeuge #fgKnopf[aria-pressed="false"], :root[data-thema="hell"] #werkzeuge #top20Knopf[aria-pressed="false"], :root[data-thema="hell"] #werkzeuge #kerzenKnopf[aria-pressed="false"], :root[data-thema="hell"] #werkzeuge #kachelnKnopf[aria-pressed="false"], :root[data-thema="hell"] #werkzeuge #mitteKnopf[aria-pressed="false"] { color: var(--wz-aus); } @media (prefers-reduced-motion: reduce) { #werkzeuge #raumKnopf[aria-expanded]:hover, #werkzeuge #bubbleKnopf[aria-pressed]:hover, #werkzeuge #fgKnopf[aria-pressed]:hover, #werkzeuge #top20Knopf[aria-pressed]:hover, #werkzeuge #kerzenKnopf[aria-pressed]:hover, #werkzeuge #kachelnKnopf[aria-pressed]:hover, #werkzeuge #mitteKnopf[aria-pressed]:hover, #werkzeuge :is(#rasterKnopf, #orbitStoppKnopf, #saeulenKnopf, #wzLesen, #wzAnordnen, #orbitKippKnopf).wz-knopf:hover { /* .wz-knopf hebt auf (2,2,0) wie die Überfahren-Regeln oben — ohne ihn (2,1,0) gewann der Puls (gemessen) */ animation: none; transform: none; } } /* Lesen-Knopf in der geöffneten Kachel (Gate 5): derselbe Schalter wie #wzLesen, darum dieselben Farben. Bisher aktiv gelb #ffd60a (hell #b45309 — genau der neue Aus-Ton) neben dem dann grünen Leistenknopf. Glas-Chip mit Rand bleibt; Rand und Schein in der Zustandsfarbe. (0,4,0) am Dateiende schlägt Z. 247/248; hell wiegt Z. 250/251 (0,5,0)/(0,6,0) → eigene Regeln (0,6,0). */ .panel.aktiv .kachel-lesen[aria-pressed="true"] { color: var(--wz-an); border-color: color-mix(in srgb, var(--wz-an) 60%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--wz-an) 45%, transparent); } .panel.aktiv .kachel-lesen[aria-pressed="false"] { color: var(--wz-aus); border-color: color-mix(in srgb, var(--wz-aus) 45%, transparent); box-shadow: none; } .panel.aktiv .kachel-lesen[aria-pressed="true"]:hover { box-shadow: 0 0 20px color-mix(in srgb, var(--wz-an) 70%, transparent); } .panel.aktiv .kachel-lesen[aria-pressed="false"]:hover { box-shadow: 0 0 14px color-mix(in srgb, var(--wz-aus) 55%, transparent); } :root[data-thema="hell"] .panel.aktiv .kachel-lesen[aria-pressed="true"] { color: var(--wz-an); border-color: color-mix(in srgb, var(--wz-an) 60%, transparent); } :root[data-thema="hell"] .panel.aktiv .kachel-lesen[aria-pressed="false"] { color: var(--wz-aus); border-color: color-mix(in srgb, var(--wz-aus) 45%, transparent); } /* ── Aktiv = orange (26.10.2026, Nutzer: „immer wenn eins aktiv ist, soll es orange leuchten, damit man sieht, welches gerade aktiv ist und welchen ich klicken muss, damit es wieder zurückkommt; 3D und 2D auch in hellblau"). „Aktiv" heißt: der Klick hat die Ansicht vom Startzustand weggeschaltet — Bubble-Blick, Zahnrad-Menü offen, Raster, Anordnen, Säule, Lesemodus. Diese sechs tauschen ihre Zustandsfarben: an = Goldorange #ffaa00 (der bisherige Aus-Ton), aus = ihre Ruhefarbe (violett; Lesemodus hellblau). Die fünf Objekt-Schalter (Tacho, Leiste links, Kerzen, Kacheln, Mitte) erfüllen die Regel schon: an = Ruhe hellblau, weggeschaltet = orange — unverändert. Nur die Variablen wechseln; alle Zustands-, Überfahren- und Puls-Regeln oben gelten weiter. Spezifität: gleich schwer wie Z. 1533/1534 (1,0,1 bzw. 2,2,1), aber später → gewinnt. */ #werkzeuge :is(#bubbleKnopf, #raumKnopf, #rasterKnopf, #wzAnordnen, #saeulenKnopf) { --wz-an: #ffaa00; --wz-aus: var(--violett, #a855f7); } #werkzeuge #wzLesen, .panel.aktiv .kachel-lesen { --wz-an: #ffaa00; --wz-aus: #38bdf8; } :root[data-thema="hell"] #werkzeuge :is(#bubbleKnopf, #raumKnopf, #rasterKnopf, #wzAnordnen, #saeulenKnopf) { --wz-an: #b45309; --wz-aus: #9333ea; } :root[data-thema="hell"] :is(#werkzeuge #wzLesen, .panel.aktiv .kachel-lesen) { --wz-an: #b45309; --wz-aus: #0284c7; } /* 3D | 2D in Hellblau statt Weiß (gleicher Ton wie die Ruhefarbe der Objekt-Schalter); die aktuelle Seite trägt den Schein, der Link ist leicht zurückgenommen. Überstimmt Z. 607–609 und 1212 (gleiche Spezifität, später). */ #werkzeuge .ansicht-schalter > * { color: #38bdf8b3; } #werkzeuge .ansicht-schalter > .aktiv { color: #38bdf8; text-shadow: 0 0 6px #000c, 0 0 10px #38bdf8, 0 0 18px #38bdf899; } #werkzeuge .ansicht-schalter > a:hover { color: #38bdf8; text-shadow: 0 0 6px #000c, 0 0 10px #38bdf8, 0 0 18px #38bdf888; } :root[data-thema="hell"] #werkzeuge .ansicht-schalter > * { color: #0284c7aa; } :root[data-thema="hell"] #werkzeuge .ansicht-schalter > .aktiv { color: #0284c7; text-shadow: 0 0 6px #fff, 0 0 10px #0284c766; } /* ── Leisten-Umbau (26.10.2026, Nutzer: „das Kachel-Suchen mit Öffnen und Leuchten unter den Candlestick-Chart; das Claude-Fenster unter das Fenster von den Coins; anstatt Claude soll Analyse drinnen stehen; das Chat-Fenster so lang wie das Coin-Fenster; die Einstellungspunkte [die vier Mini-Knöpfe] unter dem Chat-Fenster"). Beides folgt weiter den Höhen-Reglern: Unterkante der Leiste links = (100% + --top-hoehe)/2 von oben, Unterkante des Charts = (100% + --kerzen-hoehe)/2. Breite der Claude-Leiste bleibt --top-breite (14.10.); erst die eigene Knopfzeile gibt dem Feld die volle Breite. Fokus-Wachstum auf 480 px bleibt (sonst ließe sich in 128 px keine Frage tippen). Überstimmt Z. 1052 und Z. 1337/1340 (gleiche Spezifität, später). Die Untermenüs (Z. 1088) öffnen jetzt nach OBEN: gemessen 26.10. bei 914 px Höhe ragte das Modell-Menü (192 px) nach unten 43 px aus dem Bild; nach oben liegt es als Glasfläche (z 6) vorübergehend über der Leiste links (z 0). */ .frage-box { top: calc((100% + var(--top-hoehe, 50%)) / 2 + 18px); bottom: auto; flex-wrap: wrap; row-gap: 5px; } .frage-box input { flex: 1 0 100%; } #werkzeuge .wz-suche { top: calc((100% + var(--kerzen-hoehe, 50%)) / 2 + 8px); bottom: auto; } body.ohne-kerzen #werkzeuge .wz-suche { top: auto; bottom: 22px; } .frage-box .leisten-menue { top: auto; bottom: calc(100% + 16px); } /* ── Lage-Schalter (26.10.2026, Nutzer: „Analyse und Kachel suchen nach oben und nach unten switchen, jedes einzeln"): Klassen am body aus aaos2.js lageSetzen. „oben" = die Lage von vor dem 26.10. (über der Leiste links bzw. über dem Chart); die Untermenüs der Leiste öffnen dann wieder nach unten. Ohne Chart bleibt die Suche unten rechts (22 px), egal wie geschaltet. */ body.analyse-oben .frage-box { top: auto; bottom: calc((100% + var(--top-hoehe, 50%)) / 2 + 18px); } body.analyse-oben .frage-box .leisten-menue { bottom: auto; top: calc(100% + 16px); } body.suche-oben #werkzeuge .wz-suche { top: auto; bottom: calc((100% + var(--kerzen-hoehe, 50%)) / 2 + 8px); } body.ohne-kerzen.suche-oben #werkzeuge .wz-suche { top: auto; bottom: 22px; } /* 27.10.2026 (Nutzer: „die Headers beim Menü … sollen neongelb sein, damit sie gut gehighlightet sind und man sieht, was die Header ist und was die Einstellungen sind"): Kartentitel, Farb-Untergruppen und Menükopf der Raum-Einstellungen in Neongelb — im Zahnrad-Menü UND in der Einstellungen-Kachel (raumKartenVerschieben trägt dieselben Karten hin und her). Hell: dunkles Gelb, weil Neongelb auf Weiß nicht lesbar ist (#7a6c00 ≈ 5,3 : 1). */ :root:not([data-thema="hell"]) :is(.raum-karte .karten-titel, .raum-karte .farb-gruppe, #raumMenue .raum-menue-kopf > span) { color: #eeff00; opacity: 1; text-shadow: 0 0 6px #000c, 0 0 12px #eeff0040; } :root[data-thema="hell"] :is(.raum-karte .karten-titel, .raum-karte .farb-gruppe, #raumMenue .raum-menue-kopf > span) { color: #7a6c00; opacity: 1; } /* Hintergrundvideo lädt erst beim Klick (bis 20 MB) — so lange trägt das Chip drei Punkte, ohne Bewegung */ #hintergrundVideoWahl .chip.laedt::after { content: ' …'; } /* ── Zahnrad-Menü aufgeräumt (27.10.2026, Nutzer: „nur eine Reihe Farben pro Einstellung … wenn eine Einstellung etwas mit Ein- und Ausschalten ist, ein Ein- und Ausschaltknopf … besser strukturiert, schöner aufgeräumt, nicht so verwirrend"). Ein Raster für alle Einstellungen: Name links in fester Spalte (96 px), Bedienelement rechts; .einst-breit = Name darüber. Zwei bis neun Stufen = Segment-Leiste, viele Wahlen = gleich breite Kacheln (.raster, Spalten über --sp), Ein/Aus = .schalter (baut aaos2.js einAusSchalterInit). Gilt in beiden Lagen der Karten (Zahnrad-Menü und Einstellungen-Kachel); wird eine Karte schmaler als 350 px Inhalt, rückt der Name über die Farbtupfen (Container-Abfrage), damit die zwölf Tupfen in EINER Reihe bleiben. Spezifität: die Regeln für Chips stehen unter :is(#raumMenue, #raumKartenKachel), weil die älteren Menü-Regeln oben eine ID tragen (Zeile ~634: #raumMenue .chip) und sonst gewinnen. ── */ #raumMenue { width: min(440px, calc(100vw - 36px)); } .raum-karte { container-type: inline-size; } .raum-karte .farb-name { flex: 0 0 96px; font-size: 12px; line-height: 1.3; color: var(--gedaempft); } .raum-karte :is(.einst, .farb-zeile, .regler-zeile) { display: flex; align-items: center; gap: 10px; margin: 8px 0; min-height: 26px; } .raum-karte .einst > .chip-reihe { flex: 1 1 auto; min-width: 0; } .raum-karte .einst-breit { flex-direction: column; align-items: stretch; gap: 6px; margin-top: 12px; } .raum-karte .einst-breit > .farb-name { flex: none; } .raum-karte .einst-breit > .karten-fuss { margin: 0; } .raum-karte .chip-reihe { gap: 6px; } .raum-karte .karten-titel + .einst-breit { margin-top: 0; } #strahlenWahl { margin-top: 0; } .einst-hinweis { font-size: 11px; color: var(--gedaempft); } .einst-knoepfe { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; } :is(#raumMenue, #raumKartenKachel) .einst-knoepfe > .chip { padding: 5px 12px; font-size: 12px; } /* Farbtupfen: zwölf Spalten in EINER Reihe; die Tupfen schrumpfen mit (höchstens 18 px), statt umzubrechen */ .raum-karte .farb-tupfen { display: grid; grid-template-columns: repeat(12, minmax(0, 18px)); justify-content: space-between; gap: 4px; flex: 1 1 0; min-width: 0; } /* Basis 0: sonst rutscht am Telefon der Farbwähler in eine eigene Zeile (gemessen 390 px) */ .raum-karte .farb-tupfe { width: 100%; height: auto; aspect-ratio: 1; } .raum-karte .farb-zeile input[type=color] { flex: 0 0 26px; width: 26px; } @container (max-width: 349px) { .raum-karte .farb-zeile { flex-wrap: wrap; row-gap: 5px; } .raum-karte .farb-zeile > .farb-name { flex: 1 0 100%; } .raum-karte .einst:has(> .segment) { flex-direction: column; align-items: stretch; gap: 6px; } .raum-karte .einst:has(> .segment) > .farb-name { flex: none; } } /* Segment-Leiste: eine Reihe, Stufen nebeneinander in einer gemeinsamen Fassung */ :is(#raumMenue, #raumKartenKachel) .raum-karte .segment { display: flex; flex-wrap: nowrap; gap: 2px; padding: 2px; border: 1px solid var(--rand-hell); border-radius: 10px; background: #0d152680; } :is(#raumMenue, #raumKartenKachel) .raum-karte .segment > .chip { flex: 1 1 auto; min-width: 0; padding: 5px 6px; border: 0; border-radius: 8px; background: transparent; font-size: 12px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :is(#raumMenue, #raumKartenKachel) .raum-karte .segment > .chip.aktiv { background: #3b82f640; color: var(--hellblau); box-shadow: inset 0 0 0 1px var(--blau); } /* Raster: gleich breite Kacheln statt flatternder Pillen */ :is(#raumMenue, #raumKartenKachel) .raum-karte .raster { display: grid; grid-template-columns: repeat(var(--sp, 3), minmax(0, 1fr)); gap: 6px; } :is(#raumMenue, #raumKartenKachel) .raum-karte .raster > .chip { min-width: 0; padding: 6px 4px; border-radius: 9px; font-size: 12px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Ein/Aus-Schalter: die beiden Chips bleiben als Zustandsträger im DOM (ihre Handler unverändert), sichtbar ist nur der Schalter */ .raum-karte [data-schalter] > .chip { display: none; } .raum-karte .einst > [data-schalter] { flex: none; } .schalter { flex: none; position: relative; width: 38px; height: 22px; padding: 0; border-radius: 11px; cursor: pointer; border: 1px solid var(--rand-hell); background: #33415599; transition: background-color .18s, border-color .18s, box-shadow .18s; } .schalter::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #cbd5e1; box-shadow: 0 1px 3px #0008; transition: transform .18s ease-out, background-color .18s; } .schalter[aria-checked="true"] { background: var(--raum-akzent); border-color: var(--raum-akzent); box-shadow: 0 0 10px color-mix(in srgb, var(--raum-akzent) 50%, transparent); } .schalter[aria-checked="true"]::after { transform: translateX(16px); background: #ffffff; } .schalter:hover { border-color: var(--hellblau); } .schalter:focus-visible { outline: 2px solid var(--hellblau); outline-offset: 2px; } /* Kacheln einzeln an/aus: zugeklappt; jede Kachel eine Zeile mit kleinem Schalter (reines CSS am Chip, Zustand weiter .aktiv) */ .einst-klapp { margin: 12px 0 2px; padding-top: 8px; border-top: 1px solid var(--rand-hell); } .einst-klapp > summary { display: flex; align-items: center; gap: 10px; min-height: 26px; cursor: pointer; list-style: none; } .einst-klapp > summary::-webkit-details-marker { display: none; } .einst-klapp > summary::after { content: ''; margin: 0 6px 0 auto; width: 7px; height: 7px; border-right: 2px solid var(--gedaempft); border-bottom: 2px solid var(--gedaempft); transform: translateY(-2px) rotate(45deg); transition: transform .18s; } .einst-klapp[open] > summary::after { transform: translateY(2px) rotate(-135deg); } .einst-klapp > summary:hover::after { border-color: var(--text); } .einst-wert { font-size: 12px; color: var(--text); } #kachelListeStand { margin: 0; } .raum-karte .schalter-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; margin-top: 8px; } :is(#raumMenue, #raumKartenKachel) #kachelListeWahl .chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 0; padding: 4px 0; border: 0; border-radius: 0; background: transparent; font-size: 11.5px; font-weight: 500; color: var(--text); text-align: left; opacity: 1; text-decoration: none; } :is(#raumMenue, #raumKartenKachel) #kachelListeWahl .chip:not(.aktiv) { color: var(--gedaempft); opacity: 1; text-decoration: none; } #kachelListeWahl .chip::after { content: ''; flex: none; width: 28px; height: 16px; border-radius: 8px; background: radial-gradient(circle at 8px 50%, #cbd5e1 5px, transparent 5.6px), #33415599; } #kachelListeWahl .chip.aktiv::after { background: radial-gradient(circle at 20px 50%, #ffffff 5px, transparent 5.6px), var(--raum-akzent); } @media (prefers-reduced-motion: reduce) { .schalter, .schalter::after, .einst-klapp > summary::after { transition: none; } } /* helles Thema */ :root[data-thema="hell"] :is(#raumMenue, #raumKartenKachel) .raum-karte .segment { background: #ffffffb3; } :root[data-thema="hell"] :is(#raumMenue, #raumKartenKachel) .raum-karte .segment > .chip.aktiv { background: #dbeafe; color: #1d4ed8; } :root[data-thema="hell"] .schalter:not([aria-checked="true"]) { background: #cbd5e1; } /* :not — sonst schlägt die Hell-Regel (0,3,0) das An-Blau (0,2,0); gemessen: an sah grau aus */ /* hell: der weiße Tupfen verschwand auf weißem Grund, die dunklen Kachel-Stil-Muster trugen dunkle Schrift (beides schon vor dem Umbau) */ :root[data-thema="hell"] .raum-karte .farb-tupfe:not(.aktiv) { border-color: #17233c26; } :root[data-thema="hell"] #kachelStilWahl .chip:is([data-stil="schild"], [data-stil="nacht"], [data-stil="frost"], [data-stil="kupfer"], [data-stil="smaragd"], [data-stil="violett"]) { color: #e6edff; } :root[data-thema="hell"] .schalter::after { background: #ffffff; box-shadow: 0 1px 3px #0004; } :root[data-thema="hell"] #kachelListeWahl .chip::after { background: radial-gradient(circle at 8px 50%, #ffffff 5px, transparent 5.6px), #cbd5e1; } /* Kachel-Stil in fünf Spalten: „Schwebend" passt bei 12 px nicht in 70 px (gemessen: abgeschnitten, auch bei 11,5 px) */ :is(#raumMenue, #raumKartenKachel) #kachelStilWahl { gap: 4px; } :is(#raumMenue, #raumKartenKachel) #kachelStilWahl > .chip { padding-inline: 1px; font-size: 11px; } /* schmale Karte (Telefon, unter 350 px Inhalt): weniger Spalten, Segmente dürfen umbrechen, Kachel-Schalter einspaltig */ @container (max-width: 349px) { :is(#raumMenue, #raumKartenKachel) .raum-karte .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } :is(#raumMenue, #raumKartenKachel) #kachelStilWahl { grid-template-columns: repeat(3, minmax(0, 1fr)); } :is(#raumMenue, #raumKartenKachel) .raum-karte .segment { flex-wrap: wrap; } :is(#raumMenue, #raumKartenKachel) .raum-karte .segment > .chip { padding-inline: 3px; } .raum-karte .schalter-liste { grid-template-columns: minmax(0, 1fr); } } /* ── Zeitmaschine-Kachel (27.10.2026, Nutzer: „eher eine orangene Kachel, nicht so viel Glow, aber abgesondert"): orange GEFÜLLT (dunkles Orange-Glas statt Schwarz), Rahmen orange, Schein rund ein Viertel von Custom Trade (14/30 px statt 56/120 px). Behält wie Long/Short/Custom ihre Hülle auch im Stil „Schwebend" und in den Säulen (Ausnahmen oben mitgeführt). Inhalt: aaos2.js zeitmaschineRendern. ── */ .panel-zeit { border-color: #f97316b3; background: linear-gradient(165deg, #3a1a07f0, #1f0d04f2); box-shadow: 0 0 0 1px #5a2608 inset, 0 0 14px #f973162e, 0 0 30px #f9731614, 0 32px 70px #00000099; } .panel-zeit::before { background: linear-gradient(90deg, transparent, #fb923ccc, #fed7aa99, transparent); } .panel-zeit .kachel-titel { color: #fdba74; border-bottom-color: #f9731655; text-shadow: 0 0 6px #fb923c88; } .panel-zeit.aktiv { box-shadow: 0 0 0 1px #fb923c inset, 0 0 22px #f9731640, 0 0 44px #f973161c, 0 32px 70px #00000099; } .panel-zeit .kachel-titel.tippt::after { color: #fdba74; } body.saeulen .panel-zeit:not(.aktiv) { background: linear-gradient(165deg, #3a1a07f0, #1f0d04f2) !important; border-color: #f97316b3 !important; } :root[data-thema="hell"] .panel-zeit { background: linear-gradient(165deg, #fff1e4f2, #ffe4ccf0); border-color: #ea580c99; box-shadow: 0 0 0 1px #fdba74 inset, 0 0 12px #f9731626, 0 24px 60px #00000022; } :root[data-thema="hell"] .panel-zeit .kachel-titel { color: #b45309; text-shadow: none; } .zm-inhalt { display: flex; flex-direction: column; gap: 9px; } .zm-lauf { display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; border-bottom: 1px dashed #f9731655; } .zm-lauf:last-of-type { border-bottom: 0; } .zm-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; line-height: 1.4; color: var(--text, #e5edff); } .zm-seite { flex: 0 0 auto; font-size: 10.5px; letter-spacing: .14em; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; } .zm-seite.long { color: var(--bull, #4ade80); } .zm-seite.short { color: var(--bear, #f87171); } .zm-gesamt { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; border: 1px solid #f9731655; background: #f9731614; font-size: 12.5px; line-height: 1.45; color: var(--text, #e5edff); } .zm-badge { flex: 0 0 auto; font-size: 10px; letter-spacing: .12em; font-weight: 700; padding: 3px 8px; border-radius: 999px; border: 1px solid currentColor; } .zm-badge.positiv { color: var(--bull, #4ade80); } .zm-badge.negativ { color: var(--bear, #f87171); } .zm-badge.neutral { color: #fdba74; } .zm-abschnitt { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #fdba74; margin-top: 2px; padding-bottom: 3px; border-bottom: 1px solid #f9731633; } .zm-tab { width: 100%; border-collapse: collapse; font-size: 11.5px; line-height: 1.35; font-variant-numeric: tabular-nums; color: var(--text, #e5edff); } .zm-tab td, .zm-tab th { padding: 3px 5px; border-bottom: 1px solid #f9731622; text-align: right; vertical-align: top; } .zm-tab td:first-child, .zm-tab th:first-child { text-align: left; color: var(--gedaempft, #94a3b8); white-space: nowrap; } .zm-tab td:last-child { text-align: left; color: var(--gedaempft, #94a3b8); font-size: 10.5px; } .zm-tab td:nth-child(2) { white-space: nowrap; } /* gemessen 27.10.: „70,00 $ × 5x" brach um */ .zm-tab th { font-weight: 600; color: #fdba74; font-size: 10px; letter-spacing: .08em; } .zm-tab .plus { color: var(--bull, #4ade80); } .zm-tab .minus { color: var(--bear, #f87171); } .zm-text { font-size: 12px; line-height: 1.5; color: var(--text, #e5edff); } .zm-note { font-size: 10.5px; line-height: 1.45; color: var(--gedaempft, #94a3b8); } .zm-warn { font-size: 11.5px; line-height: 1.45; color: #fbbf24; } .zm-laeuft { font-size: 12.5px; color: #fdba74; } .zm-werkzeuge { display: flex; gap: 8px; flex-wrap: wrap; } .zm-knopf { display: inline-block; font: inherit; font-size: 11px; letter-spacing: .08em; padding: 4px 10px; border-radius: 7px; border: 1px solid #fb923c88; background: #f9731618; color: #fdba74; cursor: pointer; text-decoration: none; } .zm-knopf:hover { color: #fff; border-color: #fb923c; background: #f9731630; } .zm-details summary { cursor: pointer; font-size: 11px; letter-spacing: .08em; color: #fdba74; } .zm-pre { margin: 6px 0 0; font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 10px; line-height: 1.45; white-space: pre; overflow-x: auto; color: var(--text, #e5edff); background: #00000040; padding: 8px; border-radius: 8px; } :root[data-thema="hell"] .zm-abschnitt, :root[data-thema="hell"] .zm-badge.neutral, :root[data-thema="hell"] .zm-knopf, :root[data-thema="hell"] .zm-details summary, :root[data-thema="hell"] .zm-laeuft, :root[data-thema="hell"] .zm-tab th { color: #b45309; } :root[data-thema="hell"] .zm-pre { background: #ffffff99; } :root[data-thema="hell"] .zm-gesamt { background: #f9731612; } /* ── Kachel-Stil „Matt" (28.10.2026, UEP 657; Nutzer: „die Kacheln, die so abgeschnitten sind, sollen so werden wie die Orange — nicht orange, aber alle bis ganz unten; alle gleich beginnen und gleich schließen, auch wenn kein Text drin steht, die Lücken schön geschlossen"): eine matte, blickdichte Platte ohne Leuchten — dieselbe Hülle wie die Zeitmaschine, nur neutral dunkel. Ersetzt Schwebend als Grundeinstellung (einmalige Umstellung im Head-Skript von aaos2.html; Schwebend bleibt im Zahnrad wählbar). :where() hält die Spezifität bei (0,1,0): Long/Short/Custom/Zeitmaschine behalten ihre eigene Hülle, und .aktiv, .alarm, .stark, .schimmer sowie die Säulen (body.saeulen, !important) gewinnen weiter wie im Stil Glas. Die Lichtkante (::before) bleibt. */ :where(html[data-kachelstil="matt"]) .panel:where(:not([data-panel="long"]):not([data-panel="short"]):not([data-panel="custom"]):not([data-panel="zeitmaschine"])) { --glas: linear-gradient(165deg, #0c1322f4, #070b14f6); --glas-rand: #8ea2c433; --glas-schein: 0 0 0 1px #ffffff0a inset, 0 26px 60px #00000088; background: var(--glas); border-color: var(--glas-rand); box-shadow: var(--glas-schein); backdrop-filter: none; -webkit-backdrop-filter: none; } :where(html[data-thema="hell"][data-kachelstil="matt"]) .panel:where(:not([data-panel="long"]):not([data-panel="short"]):not([data-panel="custom"]):not([data-panel="zeitmaschine"])) { --glas: linear-gradient(165deg, #ffffffee, #eef2faf2); --glas-rand: #1e293b2a; --glas-schein: 0 0 0 1px #ffffff inset, 0 26px 60px #1f2a4426; } #kachelStilWahl .chip[data-stil="matt"] { background: linear-gradient(165deg, #0c1322, #070b14); border-color: #8ea2c455; } :root[data-thema="hell"] #kachelStilWahl .chip[data-stil="matt"] { color: #e6edf7; } /* ── Custom Trade: „An die Zeitmaschine" (28.10.2026) — orange wie die Zeitmaschine-Kachel, matt, kein Leuchten ── */ .ct-zeitmaschine { border: 1px solid #f97316b3; background: linear-gradient(165deg, #3a1a07b3, #1f0d04c0); color: #fdba74; } .ct-zeitmaschine:hover { background: #f9731633; color: #ffedd5; border-color: #fb923c; } .ct-zeitmaschine:disabled { opacity: .5; cursor: default; } :root[data-thema="hell"] .ct-zeitmaschine { background: linear-gradient(165deg, #fff1e4, #ffe4cc); color: #9a3412; border-color: #ea580c99; } /* ── Datensammler-Kachel (28.10.2026, UEP 657): Tacho aus Inline-SVG (aaos2.js dsBauen) — 240°-Bogen mit Verlauf, Zeiger um (100,100), Zahl in der Mitte in Share Tech Mono; darunter Zufluss-Balken, Zahlenraster, Coin-Balken, Ströme. Bewegung nur per Transition (Zeiger, Bogen, Balken) und ein ruhiger Puls am Zufluss; prefers-reduced-motion schaltet beides ab. ── */ .ds-inhalt { display: flex; flex-direction: column; gap: 10px; } .ds-tacho { position: relative; width: 100%; max-width: 310px; margin: 0 auto; } .ds-tacho svg { width: 100%; height: auto; display: block; overflow: visible; } .ds-bogen-grund { fill: none; stroke: #ffffff14; stroke-width: 12; stroke-linecap: round; } .ds-bogen-fuell { fill: none; stroke: url(#dsVerlauf); stroke-width: 12; stroke-linecap: round; filter: drop-shadow(0 0 6px #22d3ee66); transition: stroke-dashoffset 1.1s cubic-bezier(.2, .8, .2, 1); } .ds-nadel { stroke: #f8fafc; stroke-width: 2.4; stroke-linecap: round; transform-origin: 100px 100px; transform-box: view-box; filter: drop-shadow(0 0 4px #ffffffaa); transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); } .ds-nabe { fill: #0b1222; stroke: #f8fafc; stroke-width: 2; } .ds-tick { stroke: #ffffff3a; stroke-width: 1.5; } .ds-skala { font: 9.5px "Share Tech Mono", "JetBrains Mono", ui-monospace, monospace; fill: #94a3b8; letter-spacing: .04em; } .ds-zahl { font: 400 24px "Share Tech Mono", "JetBrains Mono", ui-monospace, monospace; fill: #e6edf7; letter-spacing: .02em; font-variant-numeric: tabular-nums; filter: drop-shadow(0 0 6px #22d3ee88); } /* SVG-Text unter der Nabe (28.10.) */ .ds-einheit { font: 400 7px Inter, system-ui, sans-serif; letter-spacing: .18em; fill: #7dd3fc; } .ds-unter { font-size: 10.5px; line-height: 1.4; color: #94a3b8; margin-top: -2px; padding: 0 14px; text-align: center; } .ds-zufluss { display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; font-size: 11px; color: #cbd5e1; font-variant-numeric: tabular-nums; } .ds-zufluss-balken { height: 8px; border-radius: 999px; background: #ffffff12; overflow: hidden; } .ds-zufluss-fuell { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #22d3ee, #a855f7); box-shadow: 0 0 10px #22d3ee66; transition: width .9s ease; } .ds-puls { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; animation: ds-puls 1.6s ease-in-out infinite; } .ds-puls.aus { background: #ef4444; box-shadow: 0 0 8px #ef4444; animation: none; } @keyframes ds-puls { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.7); } } .ds-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; } .ds-feld { padding: 7px 9px; border-radius: 9px; background: #ffffff08; border: 1px solid #ffffff10; min-width: 0; } .ds-feld b { display: block; font: 400 14px/1.2 "Share Tech Mono", "JetBrains Mono", ui-monospace, monospace; color: #e6edf7; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-feld span { display: block; margin-top: 2px; font-size: 9.5px; line-height: 1.35; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; } .ds-abschnitt { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #7dd3fc; padding-bottom: 3px; border-bottom: 1px solid #ffffff14; } .ds-coins { display: flex; flex-direction: column; gap: 4px; } .ds-coin { display: grid; grid-template-columns: 46px minmax(0, 1fr) 62px 76px; gap: 8px; align-items: center; font-size: 11px; color: #cbd5e1; } .ds-coin b { color: #e6edf7; font-weight: 700; letter-spacing: .04em; } .ds-coin-balken { height: 6px; border-radius: 999px; background: #ffffff10; overflow: hidden; } .ds-coin-fuell { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #3b82f6, #22d3ee); transition: width .9s ease; } .ds-coin .ds-klein { font-size: 10px; color: #94a3b8; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .ds-note { font-size: 10.5px; line-height: 1.45; color: #94a3b8; } .ds-warn { font-size: 11.5px; line-height: 1.45; color: #fbbf24; } @media (prefers-reduced-motion: reduce) { .ds-bogen-fuell, .ds-nadel, .ds-zufluss-fuell, .ds-coin-fuell { transition: none; } .ds-puls { animation: none; } } :root[data-thema="hell"] .ds-zahl { fill: #0f172a; filter: none; } :root[data-thema="hell"] .ds-nabe { fill: #fff; stroke: #0f172a; } :root[data-thema="hell"] .ds-nadel { stroke: #0f172a; filter: none; } :root[data-thema="hell"] .ds-bogen-grund { stroke: #0f172a14; } :root[data-thema="hell"] .ds-tick { stroke: #0f172a33; } :root[data-thema="hell"] .ds-abschnitt { color: #0369a1; } :root[data-thema="hell"] .ds-einheit { fill: #0369a1; } :root[data-thema="hell"] :is(.ds-unter, .ds-skala, .ds-note, .ds-feld span, .ds-coin .ds-klein) { color: #475569; fill: #475569; } :root[data-thema="hell"] :is(.ds-zufluss, .ds-coin) { color: #1e293b; } :root[data-thema="hell"] :is(.ds-feld b, .ds-coin b) { color: #0f172a; } :root[data-thema="hell"] .ds-feld { background: #0f172a08; border-color: #0f172a14; } :root[data-thema="hell"] :is(.ds-zufluss-balken, .ds-coin-balken) { background: #0f172a14; } :root[data-thema="hell"] .ds-abschnitt { border-bottom-color: #0f172a1a; } /* ── Füllfarbe je Kachel (29.10.2026, Nutzer: „jede Kachel die Füllfarbe ändern") ───────────────────────────────────── aaos2.js fuellAnwenden setzt --fuell und .hat-fuell an der Kachel. Die #css3d-Regel mit !important gewinnt über jeden Kachelstil, über Säulen und über die orange Zeitmaschine (die setzen selbst !important). Oben die Farbe fast deckend, unten zu Schwarz gemischt — so bleibt eine helle Wahl an der Unterkante noch lesbar. Rand, Schein und Zustände bleiben. */ #css3d .panel.hat-fuell, #css3d .panel.karte.hat-fuell, body.saeulen #css3d .panel.hat-fuell:not(.aktiv) { background: linear-gradient(165deg, color-mix(in srgb, var(--fuell) 94%, transparent), color-mix(in srgb, var(--fuell) 62%, #000 38%)) !important; } .fuell-wahl { display: flex; align-items: center; gap: 8px; margin: 9px 0 2px; } .fuell-wahl select { flex: 1 1 0; min-width: 0; height: 26px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--rand-hell); background: #070b14; color: inherit; font: inherit; font-size: 12px; } :root[data-thema="hell"] .fuell-wahl select { background: #ffffff; color: #17233c; } .fuell-wahl .chip { flex: 0 0 auto; } /* ── Analyse-Leiste „Mitte unten" (29.10.2026, Nutzer: „eine dritte Einstellungsmöglichkeit für das Analyse-Chat-Fenster … dass es einfach im unteren Bereich mittig ist"): aaos2.js lageSetzen → body.analyse-mitte. Breiter als an der Leiste links, Feld und die fünf Knöpfe in EINER Zeile; die Untermenüs öffnen wie bei „unten" nach oben. */ body.analyse-mitte .frage-box { top: auto; bottom: 26px; left: 50%; translate: -50% 0; flex-wrap: nowrap; width: min(560px, calc(100vw - 2 * (var(--top-breite, 128px) + 56px))); } body.analyse-mitte .frage-box input { flex: 1 1 auto; height: 30px; } body.analyse-mitte .frage-box:focus-within, body.analyse-mitte .frage-box.laeuft { width: min(720px, calc(100vw - 2 * (var(--top-breite, 128px) + 56px))); } body.analyse-mitte .frage-box .leisten-menue { top: auto; bottom: calc(100% + 16px); } /* ── Raster klein und ganz (29.10.2026, Nutzer: „Kacheln kleiner, so dass keine abgeschnitten ist — 3, 6, 9 auf einen Blick"): Spalten, Reihen, Lücken und Abstände setzt aaos2.js rasterMassSetzen inline; hier nur: Kachel in ihrem echten Maß 440 × 600, per zoom verkleinert (--rz), und reihenweises Einrasten beim Scrollen. Die große Kachel (aktiv) bleibt ohne Zoom. */ body.raster #raster { scroll-snap-type: y mandatory; justify-content: center; } body.raster #raster > .panel { width: 440px !important; height: 600px !important; zoom: var(--rz, 1); scroll-snap-align: start; } body.raster #raster > .panel.aktiv { width: auto !important; height: auto !important; zoom: 1; }