/* Explore Liquidity (20.10.2026): Showcase der V3-Referenz-Bots, modules/exploreLiquidityTab.js. Erzeugt aus der abgenommenen Vorlage WebApp/Tests/previews/explore-liquidity/vorschau.html (Skript dort: tools/explore-liquidity-port.py – nicht von Hand pflegen, sondern Vorlage ändern und neu bauen). Alles auf #exploreLiquidityView begrenzt; Oberfläche englisch (läuft auch in der Web3-Kopie). Maße: die Vorlage rechnet in rem (html 8 px); hier als Einheit --el-u (Desktop 8 px, Tablet 9,6, Handy 8,64). Tokens: privates FRF aus design-tokens.css, Web3-Design aus den --w3-*-Tokens (web3-design.css), Kategoriefarben als eigene Tokens --el-* (DESIGN.md § 2.3). */ @font-face { font-family: 'Geist'; src: url('fonts/geist-variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Mono'; src: url('fonts/geist-mono-variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } /* ── Tokens: die Plattform-Werte der Vorlage (DESIGN.md § 2), eigener Namensraum --el-*, dunkel wie hell. Nutzerentscheid 20.10.2026: der Reiter sieht GENAU wie die Vorschau aus – auch im privaten FRF; darum hier keine Umlegung auf die Katalog-Tokens. Kategoriefarben = eigene Tokens --el-volatil … (§ 2.3). ── */ :root { /* Grundmaß: die Vorlage rechnet in rem bei html{font-size: clamp(6.4px, 800vw/1600, 8px)} (Tablet 60 %, Handy 54 % von 16 px); hier dieselbe Skala als Einheit, damit das FRF-Dokument unberührt bleibt. */ --el-u: clamp(6.4px, 0.5vw, 8px); --el-bg: #040811; --el-fg: #ffffff; --el-fg-70: rgba(255,255,255,.70); --el-fg-60: rgba(255,255,255,.60); --el-fg-50: rgba(255,255,255,.50); --el-fg-45: rgba(255,255,255,.45); --el-fg-40: rgba(255,255,255,.40); --el-fg-30: rgba(255,255,255,.30); --el-fg-25: rgba(255,255,255,.25); --el-fg-15: rgba(255,255,255,.15); --el-fg-10: rgba(255,255,255,.10); --el-fg-08: rgba(255,255,255,.08); --el-fg-06: rgba(255,255,255,.06); --el-fg-05: rgba(255,255,255,.05); --el-card: rgba(255,255,255,.05); --el-surface: #11141d; --el-popover: #0a1120; --el-primary: #9ed3ff; --el-primary-fg: #040811; --el-primary-light: #6abef2; --el-chart-3: #1783ff; --el-positive: #9effa2; --el-negative: #e3465b; --el-negative-text: #ff6369; --el-destructive: #e84142; --el-warn: #ffb224; --el-border: rgba(255,255,255,.10); --el-border-quiet: rgba(255,255,255,.06); --el-input: rgba(255,255,255,.05); --el-ring: #9ed3ff; --el-radius: 1rem; --el-hint-bg: #141b2b; --el-hint-shadow: 0 12px 40px -9px rgba(0,0,0,.6); --el-overlay: rgba(0,0,0,.7); --el-karte: radial-gradient(121.97% 89.31% at 100% 105.16%, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 70.54%), rgba(255,255,255,.02); --el-kante: inset -1px -1px 0 0 rgba(0,0,0,.10), inset 1px 1px 0 0 rgba(255,255,255,.10); --el-karte-oben: radial-gradient(120% 120% at 100% 0%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 45%), rgba(255,255,255,.02); --el-kante-feld: inset -1px -1px 0 0 rgba(0,0,0,.1), inset 1px 1px 0 0 rgba(255,255,255,.05); --el-glas: linear-gradient(332deg, rgba(255,255,255,.20) -20.44%, rgba(255,255,255,0) 59.87%), rgba(255,255,255,.05); --el-seitenschein: radial-gradient(116.43% 88.19% at 108.98% -37.26%, rgba(158,211,255,.20) 0%, rgba(158,211,255,0) 100%); --el-dialog: linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.05)), #040811; --el-dialog-schatten: inset 1px 1px 0 0 rgba(255,255,255,.10), 0 12px 80px -9px rgba(0,0,0,.6); --el-volatil: #fe963c; --el-stetig: #8eff99; --el-meme: #c4a7ff; --el-rwa: #f5c242; --el-top10: #ff8fb8; --el-highlight: #9ed3ff; --el-live: #5eead4; --el-apr-verlauf: linear-gradient(92deg, #ffffff 0%, #9ed3ff 55%, #9effa2 100%); --el-range-band: rgba(158,211,255,.22); --el-range-band-leise: rgba(158,211,255,.06); --el-range-min: #ff6369; --el-range-max: #9effa2; --el-preis: #ffffff; --el-preis-ring: rgba(255,255,255,.15); --el-ema50: rgba(196,167,255,.75); --el-ema200: rgba(255,255,255,.5); --el-ausserhalb: #ffb224; --el-skelett: rgba(255,255,255,.05); --el-skelett-schimmer: rgba(255,255,255,.09); --el-trennlinie: rgba(255,255,255,.25); } @media (max-width: 1024px) { :root { --el-u: 9.6px; } } @media (max-width: 640px) { :root { --el-u: 8.64px; } } /* Hell: die abgestimmte Ableitung der Vorlage (FRF-Schalter data-theme, thema.js; im Web3-Modus bleibt es dunkel). */ html[data-theme="light"] { --el-bg: #f3f6fb; --el-fg: #0b1220; --el-fg-70: rgba(11,18,32,.74); --el-fg-60: rgba(11,18,32,.66); --el-fg-50: rgba(11,18,32,.58); --el-fg-45: rgba(11,18,32,.56); --el-fg-40: rgba(11,18,32,.54); --el-fg-30: rgba(11,18,32,.40); --el-fg-25: rgba(11,18,32,.25); --el-fg-15: rgba(11,18,32,.15); --el-fg-10: rgba(11,18,32,.10); --el-fg-08: rgba(11,18,32,.08); --el-fg-06: rgba(11,18,32,.06); --el-fg-05: rgba(11,18,32,.05); --el-card: #ffffff; --el-surface: #ffffff; --el-popover: #ffffff; --el-primary: #0b6fe0; --el-primary-fg: #ffffff; --el-primary-light: #3b8ff0; --el-chart-3: #0b6fe0; --el-positive: #15803d; --el-negative: #d6304a; --el-negative-text: #b91c35; --el-destructive: #d6304a; --el-warn: #b45309; --el-border: rgba(11,18,32,.12); --el-border-quiet: rgba(11,18,32,.07); --el-input: rgba(11,18,32,.04); --el-ring: #0b6fe0; --el-hint-bg: #ffffff; --el-hint-shadow: 0 12px 40px -9px rgba(11,18,32,.25); --el-overlay: rgba(11,18,32,.45); --el-karte: #ffffff; --el-kante: inset 0 0 0 1px rgba(11,18,32,.10); --el-karte-oben: linear-gradient(180deg, #ffffff, #f8fafd); --el-kante-feld: inset 0 0 0 1px rgba(11,18,32,.10); --el-glas: linear-gradient(332deg, rgba(11,18,32,.08) -20%, rgba(11,18,32,0) 60%), rgba(11,18,32,.04); --el-seitenschein: radial-gradient(116.43% 88.19% at 108.98% -37.26%, rgba(11,111,224,.14) 0%, rgba(11,111,224,0) 100%); --el-dialog: #ffffff; --el-dialog-schatten: inset 0 0 0 1px rgba(11,18,32,.10), 0 12px 80px -9px rgba(11,18,32,.35); --el-volatil: #c2560c; --el-stetig: #15803d; --el-meme: #6d28d9; --el-rwa: #a16207; --el-top10: #be185d; --el-highlight: #0b6fe0; --el-live: #0f766e; --el-apr-verlauf: linear-gradient(92deg, #0b1220 0%, #0b6fe0 100%); --el-range-band: rgba(11,111,224,.16); --el-range-band-leise: rgba(11,111,224,.06); --el-range-min: #b91c35; --el-range-max: #15803d; --el-preis: #0b1220; --el-preis-ring: rgba(11,18,32,.15); --el-ema50: rgba(109,40,217,.7); --el-ema200: rgba(11,18,32,.5); --el-ausserhalb: #b45309; --el-skelett: rgba(11,18,32,.05); --el-skelett-schimmer: rgba(11,18,32,.09); --el-trennlinie: rgba(11,18,32,.25); } #exploreLiquidityView { color: var(--el-fg); } /* ============================================================ Explore Liquidity – Vorschau (nur Design, fiktive Daten) Tokens nach DESIGN.md §2. Dunkel ist der Standard der Plattform, hell ist die abgestimmte Ableitung aus dem FRF-Web3-Hellblock. ============================================================ *//* Helle Ableitung (DESIGN.md §2.2) – Betriebssystem hell, solange nicht ausdrücklich dunkel */ /* ---- Grundmaß: var(--el-u) wie die Plattform (8 px bei 1920, 7,2 bei 1440, 9,6 bei 1024, 8,64 bei 390) ---- */ #exploreLiquidityView .el-seite { color: var(--el-fg); font-family: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: max(12px, calc(1.75 * var(--el-u))); line-height: 1.4; -webkit-font-smoothing: antialiased; } #exploreLiquidityView .mono { font-family: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; } #exploreLiquidityView button, #exploreLiquidityView select, #exploreLiquidityView input { font: inherit; color: inherit; } #exploreLiquidityView button { cursor: pointer; } #exploreLiquidityView :focus-visible { outline: 2px solid color-mix(in srgb, var(--el-ring) 50%, transparent); outline-offset: calc(.25 * var(--el-u)); } #exploreLiquidityView .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } #exploreLiquidityView .tnum { font-variant-numeric: tabular-nums; }/* Grundgröße für alle Icons (niedrigste Spezifität, Charts/Sparklines überschreiben sie) */ #exploreLiquidityView :where(.el-seite, .el-dialog) svg { width: calc(1.75 * var(--el-u)); height: calc(1.75 * var(--el-u)); } #exploreLiquidityView .el-grund svg { width: calc(1.75 * var(--el-u)); height: calc(1.75 * var(--el-u)); vertical-align: calc(-.3 * var(--el-u)); margin-right: calc(.25 * var(--el-u)); }/* ---- Seite ---- */ #exploreLiquidityView .el-seite { --rand-l: max(16px, env(safe-area-inset-left, 0px)); --rand-r: max(16px, env(safe-area-inset-right, 0px)); padding-left: var(--rand-l); padding-right: var(--rand-r); padding-block: calc(4 * var(--el-u)) calc(10 * var(--el-u)); position: relative; min-height: 100vh; } @media (min-width: 1025px) { #exploreLiquidityView .el-seite { --rand-l: max(calc(7 * var(--el-u)), env(safe-area-inset-left, 0px)); --rand-r: max(calc(7 * var(--el-u)), env(safe-area-inset-right, 0px)); padding-block: calc(9 * var(--el-u)) calc(10 * var(--el-u)); } } @media (min-width: 641px) and (max-width: 1024px) { #exploreLiquidityView .el-seite { --rand-l: max(calc(4 * var(--el-u)), env(safe-area-inset-left, 0px)); --rand-r: max(calc(4 * var(--el-u)), env(safe-area-inset-right, 0px)); } } /* Phone and tablet: the view already has the shell gutter, so the page adds no side margin of its own and its cards line up with the other tabs. 1024 px and up keep their margins (responsive pass 25.10.2026). */ @media (max-width: 1023px) { #exploreLiquidityView .el-seite { --rand-l: env(safe-area-inset-left, 0px); --rand-r: env(safe-area-inset-right, 0px); } } #exploreLiquidityView .el-seitenschein { position: absolute; inset: 0 0 auto 0; height: calc(80 * var(--el-u)); background: var(--el-seitenschein); pointer-events: none; z-index: 0; } #exploreLiquidityView .el-inhalt { position: relative; z-index: 1; max-width: calc(168 * var(--el-u)); margin: 0 auto; }/* ---- Kopf ---- */ /* Kopf (Übersicht-Umbau 21.10.2026): Titel, Untertitel und KPI-Karten entfallen; die Signature-Zahlen stehen im Block am Ende. */ #exploreLiquidityView .el-stand { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--el-u); color: var(--el-fg-50); font-size: max(12px, calc(1.625 * var(--el-u))); } #exploreLiquidityView .el-stand .el-punkt { width: var(--el-u); height: var(--el-u); border-radius: 50%; background: var(--el-positive); box-shadow: 0 0 0 calc(.4 * var(--el-u)) color-mix(in srgb, var(--el-positive) 20%, transparent); } #exploreLiquidityView .el-stand .el-veraltet { color: var(--el-warn); border: 1px solid color-mix(in srgb, var(--el-warn) 40%, transparent); border-radius: 999px; padding: calc(.25 * var(--el-u)) calc(1.25 * var(--el-u)); } #exploreLiquidityView .el-abzeichen { display: inline-flex; align-items: center; margin-left: calc(.5 * var(--el-u)); padding: calc(.3 * var(--el-u)) var(--el-u); border-radius: 999px; background: var(--el-fg-10); color: var(--el-fg-60); font-size: max(12px, calc(1.5 * var(--el-u))); letter-spacing: .04em; text-transform: uppercase; cursor: help; } #exploreLiquidityView .el-hilfe { display: inline-block; vertical-align: middle; width: calc(1.75 * var(--el-u)); height: calc(1.75 * var(--el-u)); margin-left: calc(.5 * var(--el-u)); color: var(--el-fg-40); cursor: help; } #exploreLiquidityView .el-hilfe svg { width: 100%; height: 100%; display: block; } /* ---- Pillen, Knöpfe, Segmente ---- */ #exploreLiquidityView .el-pille { display: inline-flex; align-items: center; gap: calc(.5 * var(--el-u)); border-radius: calc(.75 * var(--el-u)); padding: calc(.5 * var(--el-u)) var(--el-u); font-size: max(12px, calc(1.625 * var(--el-u))); line-height: 1; background: var(--el-fg-10); color: var(--el-fg-70); white-space: nowrap; } #exploreLiquidityView .el-pille.pos { background: color-mix(in srgb, var(--el-positive) 12%, transparent); color: var(--el-positive); } #exploreLiquidityView .el-pille.neg { background: color-mix(in srgb, var(--el-negative-text) 12%, transparent); color: var(--el-negative-text); } #exploreLiquidityView .el-pille.warn { background: color-mix(in srgb, var(--el-warn) 12%, transparent); color: var(--el-warn); } #exploreLiquidityView .el-pille.kat { background: color-mix(in srgb, var(--a) 10%, transparent); color: var(--a); } #exploreLiquidityView .el-pille svg { width: calc(1.5 * var(--el-u)); height: calc(1.5 * var(--el-u)); } #exploreLiquidityView .el-knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--el-u); border: 0; border-radius: 999px; height: calc(5 * var(--el-u)); padding: 0 calc(2.5 * var(--el-u)); font-size: max(12px, calc(1.75 * var(--el-u))); font-weight: 500; background: var(--el-fg-05); color: var(--el-fg); transition: background .15s ease; } #exploreLiquidityView .el-knopf:hover { background: var(--el-fg-10); } #exploreLiquidityView .el-knopf:active { transform: translateY(1px); } #exploreLiquidityView .el-knopf svg { width: calc(2 * var(--el-u)); height: calc(2 * var(--el-u)); } #exploreLiquidityView .el-knopf.primaer { background: var(--el-primary); color: var(--el-primary-fg); height: calc(5.5 * var(--el-u)); padding: 0 calc(3 * var(--el-u)); } #exploreLiquidityView .el-knopf.primaer:hover { background: color-mix(in srgb, var(--el-primary) 80%, transparent); } #exploreLiquidityView .el-knopf.rund { width: calc(4 * var(--el-u)); height: calc(4 * var(--el-u)); padding: 0; } @media (max-width: 640px) { #exploreLiquidityView .el-knopf.rund { width: calc(5.5 * var(--el-u)); height: calc(5.5 * var(--el-u)); } } #exploreLiquidityView .el-seg { display: inline-flex; background: var(--el-input); box-shadow: var(--el-kante-feld); border-radius: 999px; padding: calc(.375 * var(--el-u)); gap: calc(.25 * var(--el-u)); } #exploreLiquidityView .el-seg button { border: 0; background: transparent; color: var(--el-fg-50); border-radius: 999px; height: calc(3.75 * var(--el-u)); padding: 0 calc(1.75 * var(--el-u)); font-size: max(12px, calc(1.625 * var(--el-u))); white-space: nowrap; transition: background .15s, color .15s; } #exploreLiquidityView .el-seg button[aria-checked="true"] { background: var(--el-fg-10); color: var(--el-fg); } #exploreLiquidityView .el-seg button:hover { color: var(--el-fg); }/* ---- Filterleiste ---- */ /* Filterleiste scrollt mit (Nutzer 21.10.2026: nicht mehr klebend); liegt über den Kategorien, damit die Dropdown-Menüs vorn sind. */ #exploreLiquidityView .el-filter { position: relative; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: calc(1.25 * var(--el-u)); margin: calc(6 * var(--el-u)) 0 calc(2 * var(--el-u)); padding: calc(1.5 * var(--el-u)) 0; } #exploreLiquidityView .el-feld { position: relative; display: inline-flex; align-items: center; gap: calc(.75 * var(--el-u)); background: var(--el-input); box-shadow: var(--el-kante-feld); border-radius: 999px; height: calc(4.5 * var(--el-u)); padding: 0 calc(1.5 * var(--el-u)) 0 calc(1.75 * var(--el-u)); font-size: max(12px, calc(1.625 * var(--el-u))); color: var(--el-fg-70); } #exploreLiquidityView .el-feld label { color: var(--el-fg-45); white-space: nowrap; } #exploreLiquidityView .el-feld input { border: 0; background: transparent; color: var(--el-fg); font-size: max(12px, calc(1.625 * var(--el-u))); height: 100%; padding: 0; min-width: calc(9 * var(--el-u)); outline-offset: -2px; } #exploreLiquidityView .el-feld input { min-width: calc(16 * var(--el-u)); } #exploreLiquidityView .el-feld input::placeholder { color: var(--el-fg-40); } /* No square box inside a rounded field (user 22.10.2026): the field itself shows the ring, never the inner input. */ #exploreLiquidityView .el-feld input:focus, #exploreLiquidityView .el-feld input:focus-visible, #exploreLiquidityView .el-feld:focus-visible { outline: none; } #exploreLiquidityView .el-feld:focus-within { box-shadow: var(--el-kante-feld), 0 0 0 2px color-mix(in srgb, var(--el-ring) 50%, transparent); } #exploreLiquidityView .el-filter .el-knopf.klein { height: calc(4.5 * var(--el-u)); padding: 0 calc(2 * var(--el-u)); font-size: max(12px, calc(1.625 * var(--el-u))); font-weight: 400; color: var(--el-fg-60); } @media (max-width: 640px) { #exploreLiquidityView .el-feld { flex: 1 1 45%; } #exploreLiquidityView .el-feld input { min-width: 0; width: 100%; } }/* ---- Ticker ---- */ #exploreLiquidityView .el-hl-sektion { margin-top: var(--el-u); } #exploreLiquidityView .el-sektion-kopf { display: flex; align-items: center; justify-content: space-between; gap: calc(2 * var(--el-u)); flex-wrap: wrap; } #exploreLiquidityView .el-sektion-kopf h2, #exploreLiquidityView .el-kat-kopf h2 { display: flex; align-items: center; gap: calc(1.5 * var(--el-u)); font-size: calc(2.75 * var(--el-u)); font-weight: 500; letter-spacing: calc(-0.06 * var(--el-u)); margin: 0; } #exploreLiquidityView .el-sektion-kopf h2 .el-icon, #exploreLiquidityView .el-kat-kopf h2 .el-icon { width: calc(5 * var(--el-u)); height: calc(5 * var(--el-u)); border-radius: calc(.75 * var(--el-u)); display: inline-grid; place-items: center; background: color-mix(in srgb, var(--a, var(--el-primary)) 12%, transparent); color: var(--a, var(--el-primary)); flex: none; } #exploreLiquidityView .el-sektion-kopf h2 .el-icon svg, #exploreLiquidityView .el-kat-kopf h2 .el-icon svg { width: calc(3 * var(--el-u)); height: calc(3 * var(--el-u)); } #exploreLiquidityView .el-sektion-kopf .el-hinweis, #exploreLiquidityView .el-kat-kopf .el-hinweis, #exploreLiquidityView .el-hl-sektion .el-hinweis { color: var(--el-fg-50); font-size: max(12px, calc(1.75 * var(--el-u))); margin: calc(.5 * var(--el-u)) 0 0; max-width: calc(72 * var(--el-u)); } @property --schein { syntax: ''; inherits: false; initial-value: 10%; } #exploreLiquidityView .el-band { --W: calc(40 * var(--el-u)); --H: calc(50 * var(--el-u)); --G: calc(3 * var(--el-u)); /* Basisgröße = Größe in der Mitte (scale 1), Nachbarn nur kleiner */ --mitte: var(--el-primary); position: relative; margin-top: 0; margin-left: calc(-1 * var(--rand-l)); margin-right: calc(-1 * var(--rand-r)); overflow: hidden; overflow-x: clip; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); } @media (max-width: 1024px) { #exploreLiquidityView .el-band { --W: calc(32 * var(--el-u)); --H: calc(42 * var(--el-u)); --G: calc(2.5 * var(--el-u)); } } @media (max-width: 640px) { #exploreLiquidityView .el-band { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); } } #exploreLiquidityView .el-band::before { /* Lichtkegel in der Bandmitte, Farbe der Mittelkachel */ content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(44% 70% at 50% 52%, color-mix(in srgb, var(--mitte) 22%, transparent), transparent 70%); transition: background 600ms ease; } #exploreLiquidityView .el-spur { position: relative; height: calc(var(--H) + calc(6 * var(--el-u))); } #exploreLiquidityView .el-rand { position: absolute; top: 0; bottom: 0; width: 10%; pointer-events: none; z-index: 12; backdrop-filter: blur(calc(.5 * var(--el-u))); -webkit-backdrop-filter: blur(calc(.5 * var(--el-u))); } #exploreLiquidityView .el-rand.l { left: 0; -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent); } #exploreLiquidityView .el-rand.r { right: 0; -webkit-mask-image: linear-gradient(270deg, #000, transparent); mask-image: linear-gradient(270deg, #000, transparent); } @media (prefers-reduced-transparency: reduce) { #exploreLiquidityView .el-rand { display: none; } } @supports not (backdrop-filter: blur(1px)) { #exploreLiquidityView .el-rand { display: none; } } #exploreLiquidityView .el-hl { position: absolute; left: 0; top: 0; width: var(--W); height: var(--H); margin: 0; border: 0; text-align: left; color: var(--el-fg); border-radius: calc(1.5 * var(--el-u)); padding: calc(2.75 * var(--el-u)); background: linear-gradient(46deg, color-mix(in srgb, var(--a) 10%, transparent) -6%, transparent 60%), var(--el-karte); box-shadow: var(--el-kante); display: flex; flex-direction: column; gap: calc(1.5 * var(--el-u)); overflow: hidden; transform: translate3d(0, calc(3 * var(--el-u)), 0); transform-origin: 50% 50%; will-change: transform, opacity; backface-visibility: hidden; --glow: 0; } @media (max-width: 1024px) { #exploreLiquidityView .el-hl { padding: calc(2.25 * var(--el-u)); gap: calc(1.25 * var(--el-u)); } #exploreLiquidityView .el-hl .el-spark { height: calc(4 * var(--el-u)); } #exploreLiquidityView .el-hl .el-apr-gross .z { font-size: calc(5.5 * var(--el-u)); } #exploreLiquidityView .el-hl .el-kennzahlen .w { font-size: max(12px, calc(1.875 * var(--el-u))); } } #exploreLiquidityView .el-hl::after { /* Glow der Mittelkachel, Schatten liegt fest, nur die Opazität wechselt */ content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 1px color-mix(in srgb, var(--a) 65%, transparent), 0 0 calc(1.5 * var(--el-u)) color-mix(in srgb, var(--a) 55%, transparent), 0 0 calc(4 * var(--el-u)) color-mix(in srgb, var(--a) 48%, transparent), 0 0 calc(10 * var(--el-u)) color-mix(in srgb, var(--a) 40%, transparent), 0 calc(3 * var(--el-u)) calc(12 * var(--el-u)) calc(-2 * var(--el-u)) color-mix(in srgb, var(--a) 65%, transparent); opacity: var(--glow); } #exploreLiquidityView .el-hl:focus-visible { outline: 0; box-shadow: var(--el-kante), 0 0 0 calc(.25 * var(--el-u)) var(--el-bg), 0 0 0 calc(.625 * var(--el-u)) color-mix(in srgb, var(--el-primary) 50%, transparent); } #exploreLiquidityView :where(.el-hl > span) { display: block; } #exploreLiquidityView .el-hl .el-zeile { display: flex; align-items: center; gap: calc(1.5 * var(--el-u)); } #exploreLiquidityView .el-hl .el-titel { flex: 1; min-width: 0; font-size: calc(2.25 * var(--el-u)); font-weight: 500; letter-spacing: calc(-0.06 * var(--el-u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #exploreLiquidityView .el-hl .el-titel.lang { font-size: max(12px, calc(1.875 * var(--el-u))); } #exploreLiquidityView .el-titel .q { color: var(--el-fg-50); } #exploreLiquidityView .el-meta { display: flex; align-items: center; gap: var(--el-u); height: calc(2 * var(--el-u)); font-size: max(12px, calc(1.5 * var(--el-u))); text-transform: uppercase; color: var(--el-fg-40); letter-spacing: .04em; white-space: nowrap; overflow: hidden; } #exploreLiquidityView .el-meta .t { display: inline-block; width: 1px; height: calc(1.25 * var(--el-u)); background: var(--el-trennlinie); flex: none; } #exploreLiquidityView .el-meta .kat { color: var(--a); display: inline-flex; align-items: center; gap: calc(.5 * var(--el-u)); } #exploreLiquidityView .el-meta .kat svg { width: calc(1.5 * var(--el-u)); height: calc(1.5 * var(--el-u)); } #exploreLiquidityView .el-label { font-size: max(12px, calc(1.5 * var(--el-u))); text-transform: uppercase; color: var(--el-fg-40); letter-spacing: .04em; } #exploreLiquidityView .el-apr-gross { display: flex; align-items: baseline; gap: calc(1.5 * var(--el-u)); } #exploreLiquidityView .el-apr-gross .z { font-size: calc(6 * var(--el-u)); line-height: 1; font-weight: 500; letter-spacing: calc(-0.06 * var(--el-u)); background: var(--el-apr-verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; } #exploreLiquidityView .el-apr-gross .z small { font-size: max(12px, .55em); } #exploreLiquidityView .el-apr-gross .el-pille { margin-left: auto; } #exploreLiquidityView .el-rangeleiste { display: block; position: relative; height: calc(.75 * var(--el-u)); border-radius: 999px; background: var(--el-fg-08); margin: var(--el-u) 0 calc(.5 * var(--el-u)); } #exploreLiquidityView .el-rangeleiste .band { position: absolute; top: 0; bottom: 0; background: var(--el-range-band); } #exploreLiquidityView .el-rangeleiste .min, #exploreLiquidityView .el-rangeleiste .max { position: absolute; top: calc(-.375 * var(--el-u)); bottom: calc(-.375 * var(--el-u)); width: 2px; } #exploreLiquidityView .el-rangeleiste .min { background: var(--el-range-min); } #exploreLiquidityView .el-rangeleiste .max { background: var(--el-range-max); } #exploreLiquidityView .el-rangeleiste .preis { position: absolute; top: 50%; width: calc(1.5 * var(--el-u)); height: calc(1.5 * var(--el-u)); margin: calc(-.75 * var(--el-u)) 0 0 calc(-.75 * var(--el-u)); border-radius: 50%; background: var(--el-preis); box-shadow: 0 0 0 calc(.375 * var(--el-u)) var(--el-preis-ring); transition: box-shadow .3s; } #exploreLiquidityView .el-rangeleiste .preis.aussen { background: var(--el-ausserhalb); box-shadow: 0 0 0 calc(.375 * var(--el-u)) color-mix(in srgb, var(--el-ausserhalb) 20%, transparent); display: grid; place-items: center; color: var(--el-bg); font-size: max(12px, calc(1.25 * var(--el-u))); line-height: 1; font-weight: 600; } #exploreLiquidityView .el-rangezahlen { display: flex; justify-content: space-between; gap: var(--el-u); font-size: max(12px, calc(1.5 * var(--el-u))); color: var(--el-fg-50); } #exploreLiquidityView .el-rangezahlen > span { white-space: nowrap; } #exploreLiquidityView .el-rangezahlen .m { min-width: 0; overflow: hidden; text-overflow: ellipsis; } #exploreLiquidityView .el-rangezahlen .m { color: var(--el-fg-40); } #exploreLiquidityView .el-spark { display: block; width: 100%; height: calc(5 * var(--el-u)); overflow: visible; } #exploreLiquidityView .el-spark polyline, #exploreLiquidityView .el-spark path, #exploreLiquidityView .el-spark line { vector-effect: non-scaling-stroke; } #exploreLiquidityView .el-kennzahlen { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: auto; } #exploreLiquidityView .el-kennzahlen > span { display: block; padding: 0 calc(1.25 * var(--el-u)); border-left: 1px solid var(--el-fg-06); } #exploreLiquidityView .el-kennzahlen > span:first-child { padding-left: 0; border-left: 0; } #exploreLiquidityView .el-kennzahlen .w { display: block; font-size: calc(2 * var(--el-u)); font-weight: 500; letter-spacing: calc(-0.03 * var(--el-u)); } #exploreLiquidityView .el-kennzahlen .l { display: block; font-size: max(12px, calc(1.625 * var(--el-u))); color: var(--el-fg-45); white-space: nowrap; } @media (max-width: 1024px) { #exploreLiquidityView .el-kennzahlen > span { padding: 0 calc(.75 * var(--el-u)); } } #exploreLiquidityView .el-kennzahlen .w.aussen { color: var(--el-ausserhalb); }/* Paar-Icons, Logos */ #exploreLiquidityView .el-paar { position: relative; width: calc(5 * var(--el-u)); height: calc(5 * var(--el-u)); flex: none; } #exploreLiquidityView .el-paar .b, #exploreLiquidityView .el-paar .q { position: absolute; border-radius: 50%; background: var(--el-glas); box-shadow: 0 0 0 calc(.25 * var(--el-u)) var(--el-bg); display: grid; place-items: center; font-weight: 600; letter-spacing: -.02em; color: var(--el-fg); } #exploreLiquidityView .el-paar .b { inset: 0; font-size: max(12px, calc(1.5 * var(--el-u))); } #exploreLiquidityView .el-paar .q { width: 65%; height: 65%; right: -20%; bottom: -15%; font-size: max(12px, calc(1.1 * var(--el-u))); background: var(--el-surface); color: var(--el-fg-70); box-shadow: 0 0 0 calc(.25 * var(--el-u)) var(--el-bg), var(--el-kante); } #exploreLiquidityView .el-paar.klein { width: calc(4 * var(--el-u)); height: calc(4 * var(--el-u)); } #exploreLiquidityView .el-paar.klein .b { font-size: max(12px, calc(1.25 * var(--el-u))); } #exploreLiquidityView .el-paar.klein .q { font-size: max(12px, var(--el-u)); } #exploreLiquidityView .el-logo { width: calc(4 * var(--el-u)); height: calc(4 * var(--el-u)); flex: none; border-radius: calc(.75 * var(--el-u)); background: var(--el-glas); box-shadow: var(--el-kante); display: grid; place-items: center; font-size: max(12px, calc(1.375 * var(--el-u))); font-weight: 600; color: var(--el-fg-70); } #exploreLiquidityView .el-logo.klein { width: calc(3.5 * var(--el-u)); height: calc(3.5 * var(--el-u)); font-size: max(12px, calc(1.25 * var(--el-u))); } #exploreLiquidityView .el-logo svg { width: 60%; height: 60%; } /* Das Band läuft auch bei reduced motion (Nutzer 21.10.), darum kein statisches Snap-Band mehr. */ /* ---- Kategorie-Sektionen ---- */ #exploreLiquidityView .el-kat { margin-top: calc(9 * var(--el-u)); } @media (max-width: 640px) { #exploreLiquidityView .el-kat { margin-top: calc(6 * var(--el-u)); } } /* Kategorie-Kopf (Übersicht-Umbau 21.10.2026): links Name mit Tooltip, Mitte die Kennzahlen, rechts die Pfeile. */ #exploreLiquidityView .el-kat-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: calc(1.5 * var(--el-u)) calc(3 * var(--el-u)); align-items: center; padding-bottom: calc(2 * var(--el-u)); position: relative; } #exploreLiquidityView .el-kat-kopf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--a) 20%, transparent), transparent 60%); } #exploreLiquidityView .el-kat-zahlen { display: flex; gap: calc(5 * var(--el-u)); align-items: baseline; justify-content: center; text-align: center; } #exploreLiquidityView .el-kat-zahlen .l { display: block; font-size: max(12px, calc(1.5 * var(--el-u))); text-transform: uppercase; color: var(--el-fg-40); letter-spacing: .04em; } #exploreLiquidityView .el-kat-zahlen .w { display: block; font-size: calc(2.75 * var(--el-u)); font-weight: 500; letter-spacing: calc(-0.04 * var(--el-u)); } #exploreLiquidityView .el-kat-kopf .el-kat-pfeile { justify-self: end; } @media (max-width: 640px) { #exploreLiquidityView .el-kat-kopf { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titel pfeile" "zahlen zahlen"; } #exploreLiquidityView .el-kat-titel { grid-area: titel; } #exploreLiquidityView .el-kat-zahlen { grid-area: zahlen; gap: calc(3 * var(--el-u)); } #exploreLiquidityView .el-kat-kopf .el-kat-pfeile { grid-area: pfeile; } #exploreLiquidityView .el-kat-zahlen .w { font-size: calc(2.25 * var(--el-u)); } } /* Kategorie-Karussell: volle Breite, Snap, Randmaske wie beim Band, kein Autolauf */ #exploreLiquidityView .el-raster { display: flex; gap: calc(2.5 * var(--el-u)); margin-top: var(--el-u); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; margin-left: calc(-1 * var(--rand-l)); margin-right: calc(-1 * var(--rand-r)); padding-inline: var(--rand-l) var(--rand-r); padding-block: calc(3 * var(--el-u)) var(--el-u); scroll-padding-inline: var(--rand-l) var(--rand-r); scrollbar-width: none; cursor: grab; user-select: none; -webkit-user-select: none; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); } #exploreLiquidityView .el-raster::-webkit-scrollbar { display: none; } #exploreLiquidityView .el-raster.ziehen { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; } #exploreLiquidityView .el-raster.auto { scroll-snap-type: none; scroll-behavior: auto; }/* Rand-Autoscroll: Snap erst nach dem Abbremsen */ #exploreLiquidityView .el-raster > * { flex: none; width: calc(34 * var(--el-u)); scroll-snap-align: start; } #exploreLiquidityView .el-raster > .el-leer { width: 100%; } @media (max-width: 640px) { #exploreLiquidityView .el-raster { gap: calc(2 * var(--el-u)); } #exploreLiquidityView .el-raster > * { width: calc(32 * var(--el-u)); } } #exploreLiquidityView .el-kat-pfeile { display: flex; gap: var(--el-u); } #exploreLiquidityView .el-kachel { position: relative; top: 0; margin: 0; border: 0; text-align: left; color: var(--el-fg); border-radius: var(--el-u); padding: calc(2.5 * var(--el-u)); background: linear-gradient(46deg, color-mix(in srgb, var(--a) var(--schein, 10%), transparent) -6%, transparent 60%), var(--el-karte-oben); box-shadow: var(--el-kante); display: flex; flex-direction: column; gap: calc(1.25 * var(--el-u)); min-height: calc(36 * var(--el-u)); transition: top 180ms ease-out, box-shadow 180ms ease-out, --schein 180ms ease-out; } @media (max-width: 1024px) { #exploreLiquidityView .el-kachel { padding: calc(2.25 * var(--el-u)); min-height: calc(34 * var(--el-u)); } } #exploreLiquidityView .el-kachel:hover { top: calc(-.25 * var(--el-u)); --schein: 16%; box-shadow: var(--el-kante), 0 0 0 1px color-mix(in srgb, var(--a) 25%, transparent); } #exploreLiquidityView .el-kachel:hover .el-spark .linie { stroke-width: 2px; } #exploreLiquidityView .el-kachel:hover .el-rangeleiste .preis:not(.aussen) { animation: el-puls 600ms ease-out 1; } @keyframes el-puls { 50% { box-shadow: 0 0 0 calc(.75 * var(--el-u)) var(--el-preis-ring); } } #exploreLiquidityView .el-kachel:focus-visible { outline: 0; box-shadow: var(--el-kante), 0 0 0 calc(.25 * var(--el-u)) var(--el-bg), 0 0 0 calc(.625 * var(--el-u)) color-mix(in srgb, var(--el-primary) 50%, transparent); } #exploreLiquidityView :where(.el-kachel > span) { display: block; } #exploreLiquidityView .el-kachel .el-rang { position: absolute; top: calc(-2.25 * var(--el-u)); left: calc(.25 * var(--el-u)); font-size: max(12px, calc(1.5 * var(--el-u))); color: var(--el-fg-30); } #exploreLiquidityView .el-kachel .el-rang.top { color: var(--a); } #exploreLiquidityView .el-kachel .el-stale { position: absolute; top: calc(1.25 * var(--el-u)); right: calc(1.25 * var(--el-u)); width: var(--el-u); height: var(--el-u); border-radius: 50%; background: var(--el-warn); } #exploreLiquidityView .el-kachel .el-zeile { display: flex; align-items: center; gap: calc(1.25 * var(--el-u)); } #exploreLiquidityView .el-kachel .el-titel { flex: 1; min-width: 0; font-size: calc(2 * var(--el-u)); font-weight: 500; letter-spacing: calc(-0.06 * var(--el-u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #exploreLiquidityView .el-kachel .el-aprzeile { display: flex; align-items: center; justify-content: space-between; gap: calc(1.5 * var(--el-u)); margin-top: calc(.5 * var(--el-u)); } #exploreLiquidityView .el-kachel .el-apr { display: block; font-size: calc(4 * var(--el-u)); line-height: 1; font-weight: 500; letter-spacing: calc(-0.06 * var(--el-u)); white-space: nowrap; } #exploreLiquidityView .el-kachel .el-apr small { font-size: max(12px, .55em); } #exploreLiquidityView .el-kachel .el-apr .l { display: block; font-size: max(12px, calc(1.5 * var(--el-u))); letter-spacing: .04em; color: var(--el-fg-40); text-transform: uppercase; font-weight: 400; margin-bottom: calc(.25 * var(--el-u)); } #exploreLiquidityView .el-kachel .el-spark { width: calc(12 * var(--el-u)); height: calc(4 * var(--el-u)); flex: none; } #exploreLiquidityView .el-kachel .el-rangezeile { display: block; font-size: max(12px, calc(1.5 * var(--el-u))); color: var(--el-fg-50); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #exploreLiquidityView .el-kachel .el-kz { display: block; font-size: max(12px, calc(1.625 * var(--el-u))); color: var(--el-fg-60); margin-top: auto; } #exploreLiquidityView .el-kachel .el-kz b { font-weight: 500; color: var(--el-fg); } #exploreLiquidityView .el-kachel .el-kz b.aussen { color: var(--el-ausserhalb); } #exploreLiquidityView .el-kachel .el-kz .t { color: var(--el-fg-30); margin: 0 calc(.5 * var(--el-u)); } #exploreLiquidityView .el-kachel .el-kz .z { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #exploreLiquidityView .el-kachel .el-flags { display: flex; flex-wrap: wrap; gap: calc(.5 * var(--el-u)); } #exploreLiquidityView .el-kachel .el-flags .el-pille { font-size: max(12px, calc(1.375 * var(--el-u))); padding: calc(.375 * var(--el-u)) calc(.875 * var(--el-u)); }/* Leerzustand */ #exploreLiquidityView .el-leer { width: 100%; border-radius: var(--el-u); background: var(--el-karte-oben); box-shadow: var(--el-kante); padding: calc(4 * var(--el-u)); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--el-u); } #exploreLiquidityView .el-leer svg { width: calc(4 * var(--el-u)); height: calc(4 * var(--el-u)); color: var(--el-fg-30); } #exploreLiquidityView .el-leer .t { font-size: calc(2 * var(--el-u)); } #exploreLiquidityView .el-leer .k { font-size: max(12px, calc(1.75 * var(--el-u))); color: var(--el-fg-50); max-width: calc(72 * var(--el-u)); }/* ---- Skelett ---- */ #exploreLiquidityView .el-skelett .sk { display: block; border-radius: calc(.75 * var(--el-u)); background: var(--el-skelett); position: relative; overflow: hidden; } #exploreLiquidityView .el-skelett .sk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--el-skelett-schimmer), transparent); background-size: 200% 100%; animation: el-schimmer 1.4s linear infinite; } #exploreLiquidityView .el-rm .el-skelett .sk::after { animation: none; } @keyframes el-schimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } #exploreLiquidityView .el-skelett .sk.kreis { border-radius: 50%; }/* ---- Eintritt ---- */ #exploreLiquidityView .el-ein { animation: el-fade-up 500ms ease-out both; } #exploreLiquidityView .el-ein-kachel { animation: el-fade-up 500ms ease-out both; animation-delay: calc(var(--i, 0) * 60ms); } #exploreLiquidityView .el-neu { animation: el-fade-up 320ms ease-out both; animation-delay: calc(var(--i, 0) * 40ms); } @keyframes el-fade-up { from { opacity: 0; transform: translateY(calc(.75 * var(--el-u))); } to { opacity: 1; transform: none; } } #exploreLiquidityView .el-rm .el-ein, #exploreLiquidityView .el-rm .el-ein-kachel, #exploreLiquidityView .el-rm .el-neu { animation: none; } #exploreLiquidityView .el-versteckt { visibility: hidden; } #exploreLiquidityView .el-blink { animation: el-blink 900ms ease-out 1; } @keyframes el-blink { from { text-shadow: 0 0 calc(1.5 * var(--el-u)) color-mix(in srgb, var(--a, var(--el-primary)) 60%, transparent); } to { text-shadow: none; } }/* ---- Hint (Tooltip) ---- */ #exploreLiquidityView .el-tip { position: relative; display: inline-flex; } #exploreLiquidityView .el-tip .el-tip-box { position: absolute; left: 50%; top: calc(100% + calc(.75 * var(--el-u))); transform: translateX(calc(-50% + var(--tip-dx, 0px))); z-index: 25; width: max-content; max-width: min(calc(60 * var(--el-u)), calc(100vw - 32px)); background: var(--el-hint-bg); border: 1px solid var(--el-border); border-radius: calc(.75 * var(--el-u)); box-shadow: var(--el-hint-shadow); padding: calc(1.25 * var(--el-u)) calc(1.5 * var(--el-u)); font-size: max(12px, calc(1.625 * var(--el-u))); color: var(--el-fg-70); text-transform: none; letter-spacing: 0; font-family: "Geist", "Inter", system-ui, sans-serif; opacity: 0; pointer-events: none; transition: opacity .15s; white-space: normal; text-align: left; } #exploreLiquidityView .el-tip:hover .el-tip-box, #exploreLiquidityView .el-tip:focus-within .el-tip-box, #exploreLiquidityView .el-tip[data-an] .el-tip-box { opacity: 1; pointer-events: auto; } #exploreLiquidityView .el-tip[data-zu]:not([data-an]) .el-tip-box { opacity: 0; pointer-events: none; } #exploreLiquidityView .el-tip > button { border: 0; background: transparent; padding: 0; color: var(--el-fg-40); display: inline-grid; place-items: center; width: calc(2.25 * var(--el-u)); height: calc(2.25 * var(--el-u)); border-radius: 50%; } #exploreLiquidityView .el-tip > button svg { width: calc(1.75 * var(--el-u)); height: calc(1.75 * var(--el-u)); } #exploreLiquidityView .el-tip > button:hover { color: var(--el-fg); }/* ---- Detail-Dialog ---- */ #exploreLiquidityView .el-dialog { border: 0; padding: 0; margin: auto; width: min(calc(92 * var(--el-u)), calc(100vw - calc(4 * var(--el-u)))); max-height: 90vh; max-height: 90dvh; background: var(--el-dialog); color: var(--el-fg); border-radius: calc(1.25 * var(--el-u)); box-shadow: var(--el-dialog-schatten); overflow: hidden; display: none; flex-direction: column; } #exploreLiquidityView .el-dialog[open] { display: flex; animation: el-zoom 180ms ease-out; } #exploreLiquidityView .el-dialog::backdrop { background: var(--el-overlay); backdrop-filter: blur(calc(.5 * var(--el-u))); -webkit-backdrop-filter: blur(calc(.5 * var(--el-u))); } @keyframes el-zoom { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } } #exploreLiquidityView .el-rm .el-dialog[open] { animation: none; } #exploreLiquidityView .el-dialog .griff { display: none; } @media (max-width: 1024px) { #exploreLiquidityView .el-dialog { width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto 0 0; border-radius: calc(1.5 * var(--el-u)) calc(1.5 * var(--el-u)) 0 0; } #exploreLiquidityView .el-dialog[open] { animation: el-hoch 220ms ease-out; } @keyframes el-hoch { from { transform: translateY(8%); opacity: 0; } to { transform: none; opacity: 1; } } #exploreLiquidityView .el-dialog .griff { display: block; width: calc(5 * var(--el-u)); height: calc(.5 * var(--el-u)); border-radius: 999px; background: var(--el-fg-15); margin: calc(1.25 * var(--el-u)) auto 0; } } #exploreLiquidityView .el-dlg-kopf { position: relative; padding: calc(2.5 * var(--el-u)) calc(3 * var(--el-u)) calc(1.25 * var(--el-u)); flex: none; overflow: hidden; } #exploreLiquidityView .el-dlg-kopf::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--a) 14%, transparent), transparent 60%); pointer-events: none; } #exploreLiquidityView .el-dlg-kopf > * { position: relative; } #exploreLiquidityView .el-dlg-kopf .el-zeile { display: flex; align-items: center; gap: calc(1.5 * var(--el-u)); flex-wrap: wrap; } #exploreLiquidityView .el-dlg-kopf .el-titel { font-size: calc(2.75 * var(--el-u)); font-weight: 500; letter-spacing: calc(-0.06 * var(--el-u)); } #exploreLiquidityView .el-dlg-kopf .el-pillen { display: flex; gap: calc(.75 * var(--el-u)); flex-wrap: wrap; } #exploreLiquidityView .el-dlg-kopf .el-stand { margin-left: auto; } #exploreLiquidityView .el-dlg-kopf .el-meta { margin-top: var(--el-u); height: auto; white-space: normal; } #exploreLiquidityView .el-dlg-kopf .el-grund { margin-top: var(--el-u); color: var(--el-fg-60); font-size: max(12px, calc(1.75 * var(--el-u))); } #exploreLiquidityView .el-dlg-x { position: absolute; top: calc(1.75 * var(--el-u)); right: calc(1.75 * var(--el-u)); width: calc(4 * var(--el-u)); height: calc(4 * var(--el-u)); border: 0; border-radius: 50%; background: var(--el-fg-05); color: var(--el-fg-70); display: grid; place-items: center; } #exploreLiquidityView .el-dlg-x svg { width: calc(2 * var(--el-u)); height: calc(2 * var(--el-u)); } #exploreLiquidityView .el-dlg-x:hover { background: var(--el-fg-10); color: var(--el-fg); } #exploreLiquidityView .el-dlg-inhalt { overflow: auto; padding: calc(2.5 * var(--el-u)) calc(3 * var(--el-u)); flex: 1 1 auto; overscroll-behavior: contain; } #exploreLiquidityView .el-dlg-fuss { flex: none; display: flex; justify-content: space-between; align-items: center; gap: calc(1.5 * var(--el-u)); padding: calc(2 * var(--el-u)) calc(3 * var(--el-u)); border-top: 1px solid var(--el-border-quiet); background: color-mix(in srgb, var(--el-bg) 60%, transparent); flex-wrap: wrap; } @media (max-width: 640px) { #exploreLiquidityView .el-dlg-kopf, #exploreLiquidityView .el-dlg-inhalt, #exploreLiquidityView .el-dlg-fuss { padding-inline: calc(2 * var(--el-u)); } #exploreLiquidityView .el-dlg-fuss .el-knopf { flex: 1; } } #exploreLiquidityView .el-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(1.25 * var(--el-u)); } @media (max-width: 1024px) { #exploreLiquidityView .el-stats { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { #exploreLiquidityView .el-stats { grid-template-columns: repeat(2, 1fr); } } #exploreLiquidityView .el-stat { background: var(--el-karte-oben); box-shadow: var(--el-kante); border-radius: var(--el-u); padding: calc(2 * var(--el-u)); min-width: 0; } #exploreLiquidityView .el-stat .l { display: block; font-size: max(12px, calc(1.5 * var(--el-u))); text-transform: uppercase; color: var(--el-fg-40); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #exploreLiquidityView .el-stat .w { display: block; font-size: calc(2.75 * var(--el-u)); font-weight: 500; letter-spacing: calc(-0.06 * var(--el-u)); margin-top: calc(.5 * var(--el-u)); white-space: nowrap; } #exploreLiquidityView .el-stat .w small { font-size: max(12px, .55em); } #exploreLiquidityView .el-stat.apr .w { background: var(--el-apr-gruen); -webkit-background-clip: text; background-clip: text; color: transparent; } #exploreLiquidityView .el-stat .w.aussen { color: var(--el-ausserhalb); } #exploreLiquidityView .el-dlg-abschnitt { margin-top: calc(3 * var(--el-u)); } #exploreLiquidityView .el-dlg-abschnitt h3 { display: flex; align-items: center; justify-content: space-between; gap: calc(2 * var(--el-u)); font-size: max(12px, calc(1.875 * var(--el-u))); font-weight: 500; letter-spacing: calc(-0.03 * var(--el-u)); margin: 0 0 calc(1.25 * var(--el-u)); flex-wrap: wrap; } #exploreLiquidityView .el-chart { display: block; width: 100%; height: calc(32 * var(--el-u)); border-radius: calc(.75 * var(--el-u)); background: var(--el-fg-05); box-shadow: var(--el-kante-feld); } @media (max-width: 1024px) { #exploreLiquidityView .el-chart { height: calc(26 * var(--el-u)); } } #exploreLiquidityView .el-chart text { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; fill: var(--el-fg-40); } #exploreLiquidityView .el-chart .linie { stroke: var(--el-primary); stroke-width: 1.5; fill: none; } #exploreLiquidityView .el-chart .aussen { stroke: var(--el-ausserhalb); stroke-width: 1.5; fill: none; } #exploreLiquidityView .el-chart .level { stroke: var(--el-fg-06); stroke-width: 1; } #exploreLiquidityView .el-chart .min { stroke: var(--el-range-min); stroke-dasharray: 4 4; stroke-width: 1; } #exploreLiquidityView .el-chart .max { stroke: var(--el-range-max); stroke-dasharray: 4 4; stroke-width: 1; } #exploreLiquidityView .el-chart .band { fill: var(--el-range-band-leise); } #exploreLiquidityView .el-chart .marker { fill: var(--el-ausserhalb); } #exploreLiquidityView .el-chart .jetzt { fill: var(--el-preis); stroke: var(--el-preis-ring); stroke-width: 4; } /* Price chart (user 23.10.2026): axis on the right, pills for price now / Max / Min, volume profile and EMA 50/200 behind the price line. */ #exploreLiquidityView .el-chart .ay.rechts { text-anchor: start; } #exploreLiquidityView .el-chart .pille rect { stroke: none; } #exploreLiquidityView .el-chart .pille text { text-anchor: middle; font-size: 11px; font-weight: 600; } #exploreLiquidityView .el-chart .pille.p-jetzt rect { fill: var(--el-preis); } #exploreLiquidityView .el-chart .pille.p-jetzt text { fill: var(--el-bg); } #exploreLiquidityView .el-chart .pille.p-max rect { fill: var(--el-range-max); } #exploreLiquidityView .el-chart .pille.p-max text { fill: var(--el-bg); } #exploreLiquidityView .el-chart .pille.p-min rect { fill: var(--el-range-min); } #exploreLiquidityView .el-chart .pille.p-min text { fill: var(--el-bg); } #exploreLiquidityView .el-chart .profil rect { fill: var(--el-fg-10); } #exploreLiquidityView .el-chart .ema { fill: none; stroke-width: 1; } #exploreLiquidityView .el-chart .ema50 { stroke: var(--el-ema50); } #exploreLiquidityView .el-chart .ema200 { stroke: var(--el-ema200); } #exploreLiquidityView .el-chart-wrap { position: relative; } #exploreLiquidityView .el-chart-apr { display: block; width: 100%; height: calc(22 * var(--el-u)); border-radius: calc(.75 * var(--el-u)); background: var(--el-fg-05); box-shadow: var(--el-kante-feld); overflow: visible; } #exploreLiquidityView .el-chart-apr .raster { stroke: var(--el-fg-06); stroke-width: 1; } #exploreLiquidityView .el-chart-apr .pkt { fill: transparent; stroke: transparent; cursor: pointer; } #exploreLiquidityView .el-chart-apr .pkt:focus-visible { outline: 0; stroke: var(--el-positive); stroke-width: 2; } #exploreLiquidityView .el-chart-apr .pkt.an { fill: var(--el-positive); } #exploreLiquidityView .el-chart-apr .ende { fill: var(--el-preis); stroke: var(--el-preis-ring); stroke-width: 4; } #exploreLiquidityView .el-chart-apr .ende-label { fill: var(--el-fg); font-family: "Geist", "Inter", system-ui, sans-serif; font-size: 12px; font-weight: 500; } #exploreLiquidityView .el-tipp { position: absolute; z-index: 5; pointer-events: none; background: var(--el-hint-bg); border: 1px solid var(--el-border); border-radius: calc(.75 * var(--el-u)); box-shadow: var(--el-hint-shadow); padding: calc(.75 * var(--el-u)) calc(1.25 * var(--el-u)); font-size: max(12px, calc(1.5 * var(--el-u))); white-space: nowrap; transform: translate(-50%, calc(-100% - var(--el-u))); opacity: 0; transition: opacity .12s; } #exploreLiquidityView .el-tipp[data-an] { opacity: 1; } #exploreLiquidityView .el-tipp b { display: block; font-size: max(12px, calc(1.75 * var(--el-u))); font-weight: 500; } #exploreLiquidityView .el-chart-apr text { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; fill: var(--el-fg-40); } #exploreLiquidityView .el-chart-apr .linie { stroke: var(--el-positive); stroke-width: 1.5; fill: none; } #exploreLiquidityView .el-zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: calc(2.5 * var(--el-u)); } @media (max-width: 640px) { #exploreLiquidityView .el-zweispaltig { grid-template-columns: 1fr; } } #exploreLiquidityView .el-param { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: calc(.75 * var(--el-u)) calc(2 * var(--el-u)); font-size: max(12px, calc(1.75 * var(--el-u))); } #exploreLiquidityView .el-param dt { color: var(--el-fg-50); } #exploreLiquidityView .el-param dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; } #exploreLiquidityView .el-param dd .n { color: var(--el-fg-50); font-size: max(12px, calc(1.5 * var(--el-u))); } #exploreLiquidityView .el-warum { background: var(--el-hint-bg); border: 1px solid var(--el-border); border-radius: calc(.75 * var(--el-u)); padding: calc(1.75 * var(--el-u)) calc(2 * var(--el-u)); font-size: max(12px, calc(1.75 * var(--el-u))); color: var(--el-fg-70); } #exploreLiquidityView .el-warum .k { display: flex; align-items: center; gap: var(--el-u); margin-bottom: var(--el-u); } #exploreLiquidityView .el-warum .r { display: flex; gap: var(--el-u); align-items: flex-start; margin-top: calc(1.25 * var(--el-u)); color: var(--el-fg-60); font-size: max(12px, calc(1.625 * var(--el-u))); } #exploreLiquidityView .el-warum .r svg { width: calc(2 * var(--el-u)); height: calc(2 * var(--el-u)); flex: none; color: var(--el-warn); } #exploreLiquidityView .el-zerlegung { display: flex; height: calc(1.25 * var(--el-u)); border-radius: 999px; overflow: hidden; background: var(--el-fg-08); margin: var(--el-u) 0 calc(.75 * var(--el-u)); } #exploreLiquidityView .el-zerlegung i { display: block; height: 100%; } #exploreLiquidityView .el-legende { display: flex; flex-wrap: wrap; gap: calc(.75 * var(--el-u)) calc(2 * var(--el-u)); font-size: max(12px, calc(1.5 * var(--el-u))); color: var(--el-fg-50); } #exploreLiquidityView .el-legende i { display: inline-block; width: var(--el-u); height: var(--el-u); border-radius: 2px; margin-right: calc(.5 * var(--el-u)); vertical-align: middle; } #exploreLiquidityView .el-simdemo { margin-top: calc(2 * var(--el-u)); background: var(--el-hint-bg); border: 1px solid var(--el-border); border-radius: calc(.75 * var(--el-u)); padding: calc(1.75 * var(--el-u)) calc(2 * var(--el-u)); font-size: max(12px, calc(1.625 * var(--el-u))); display: none; } #exploreLiquidityView .el-simdemo[data-an] { display: block; } #exploreLiquidityView .el-simdemo code { display: block; margin-top: var(--el-u); padding: calc(1.25 * var(--el-u)); background: var(--el-fg-05); border-radius: calc(.5 * var(--el-u)); font-family: "Geist Mono", ui-monospace, monospace; font-size: max(12px, calc(1.5 * var(--el-u))); white-space: pre-wrap; word-break: break-all; color: var(--el-fg-70); } #exploreLiquidityView .el-simdemo .kv { display: grid; grid-template-columns: auto 1fr; gap: calc(.5 * var(--el-u)) calc(2 * var(--el-u)); margin-top: var(--el-u); } #exploreLiquidityView .el-simdemo .kv span:nth-child(odd) { color: var(--el-fg-50); } #exploreLiquidityView .el-toast { position: fixed; left: 50%; bottom: calc(3 * var(--el-u)); transform: translateX(-50%); z-index: 50; background: var(--el-hint-bg); border: 1px solid var(--el-border); border-radius: 999px; padding: calc(1.25 * var(--el-u)) calc(2.5 * var(--el-u)); font-size: max(12px, calc(1.625 * var(--el-u))); box-shadow: var(--el-hint-shadow); opacity: 0; pointer-events: none; transition: opacity .2s; max-width: calc(100vw - calc(4 * var(--el-u))); } #exploreLiquidityView .el-toast[data-an] { opacity: 1; } #exploreLiquidityView table.el-austritte { font-size: max(12px, calc(1.5 * var(--el-u))); } /* ── FRF-Einbettung: Grund, Rand und Abstände der Vorlage gelten unverändert (Nutzerentscheid 20.10.2026); nur der Grund liegt auf der Seite selbst (die Vorlage setzt ihn auf body) und box-sizing wie die Vorlage. ── */ #exploreLiquidityView .el-seite { background: var(--el-bg); min-height: 0; } #exploreLiquidityView .el-seite *, #exploreLiquidityView .el-seite *::before, #exploreLiquidityView .el-seite *::after { box-sizing: border-box; } #exploreLiquidityView .el-seite { font-size: max(12px, calc(1.75 * var(--el-u))); line-height: 1.4; } /* Echte Symbole (Regel „UI immer mit Symbolen“): Asset über den MDS (market-icons/token), Börse aus exchange-icons/; lädt das Bild nicht, bleiben die Buchstaben darunter stehen. */ #exploreLiquidityView .el-paar .b { position: absolute; overflow: hidden; } #exploreLiquidityView .el-paar .b img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: var(--surface); } #exploreLiquidityView .el-logo { position: relative; overflow: hidden; } #exploreLiquidityView .el-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } #exploreLiquidityView .el-logo .rh { position: absolute; right: 0; bottom: 0; font-size: max(12px, calc(1 * var(--el-u))); line-height: 1; padding: .1em .25em; border-radius: .4em 0 0 0; background: var(--el-bg); color: var(--el-fg-70); } /* Zustände: Daten nicht verfügbar */ #exploreLiquidityView .el-fehler { margin: calc(4 * var(--el-u)) 0; } #exploreLiquidityView .el-fehler .el-knopf { margin-top: calc(1 * var(--el-u)); } /* Dialog: Scrollen nur im Inhalt (der Dialog selbst ist das eine erlaubte Fenster, Karussell und Band bleiben wie die Vorlage) */ #exploreLiquidityView .el-dialog { font-size: max(12px, calc(1.75 * var(--el-u))); } /* ---- Detail breit (Nutzer 21.10.): links APR, Kennzahlen, Warum und die Knöpfe, rechts Preis & Range mit Zeitleiste, Zerlegung und Parameter – alles auf einen Blick, ohne Scrollen. Unter 1024 px eine Spalte. ---- */ #exploreLiquidityView .el-dialog { width: min(calc(180 * var(--el-u)), calc(100vw - calc(4 * var(--el-u)))); max-height: 94vh; max-height: 94dvh; } #exploreLiquidityView .el-dlg-inhalt { padding: calc(2.5 * var(--el-u)) calc(3 * var(--el-u)) 0; } #exploreLiquidityView .el-dlg-details { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: calc(4 * var(--el-u)); } #exploreLiquidityView .el-dlg-links { display: flex; flex-direction: column; min-width: 0; } #exploreLiquidityView .el-dlg-rechts { min-width: 0; padding-bottom: calc(2.5 * var(--el-u)); } #exploreLiquidityView .el-dlg-links .el-dlg-fuss { margin: auto calc(-3 * var(--el-u)) 0; padding: calc(2 * var(--el-u)) calc(3 * var(--el-u)); border-top: 0; background: var(--el-dialog); justify-content: flex-start; position: sticky; bottom: 0; } #exploreLiquidityView .el-dlg-links .el-dlg-fuss .el-knopf.primaer { margin-left: auto; } #exploreLiquidityView .el-dlg-abschnitt { margin-top: calc(2.25 * var(--el-u)); } #exploreLiquidityView .el-dlg-abschnitt h3 { margin-bottom: var(--el-u); } #exploreLiquidityView .el-dlg-links .el-stats { grid-template-columns: repeat(3, 1fr); gap: var(--el-u); } #exploreLiquidityView .el-dlg-links .el-stat { padding: calc(1.5 * var(--el-u)) calc(1.75 * var(--el-u)); } #exploreLiquidityView .el-dlg-links .el-stat .w { font-size: calc(2.375 * var(--el-u)); } #exploreLiquidityView .el-dlg-links .el-chart-apr { height: calc(24 * var(--el-u)); } #exploreLiquidityView .el-param { grid-template-columns: auto 1fr auto 1fr; gap: calc(.75 * var(--el-u)) calc(2 * var(--el-u)); font-size: max(12px, calc(1.625 * var(--el-u))); } #exploreLiquidityView .el-param dt:nth-of-type(2n) { padding-left: calc(2 * var(--el-u)); border-left: 1px solid var(--el-border-quiet); } #exploreLiquidityView .el-kursanteil { margin: var(--el-u) 0 0; font-size: max(12px, calc(1.5 * var(--el-u))); color: var(--el-fg-50); cursor: help; } #exploreLiquidityView .el-kursanteil i { display: inline-block; width: var(--el-u); height: var(--el-u); border-radius: 2px; margin-right: calc(.5 * var(--el-u)); vertical-align: middle; } #exploreLiquidityView .el-kursanteil b { color: var(--el-fg); font-weight: 500; } #exploreLiquidityView .el-logo.bild img { position: absolute; inset: 0; } @media (max-width: 1024px) { #exploreLiquidityView .el-dialog { width: 100vw; max-width: 100vw; max-height: 92dvh; } #exploreLiquidityView .el-dlg-inhalt { padding-bottom: 0; } #exploreLiquidityView .el-dlg-details { grid-template-columns: minmax(0, 1fr); gap: 0; } #exploreLiquidityView .el-dlg-links { display: contents; } #exploreLiquidityView .el-dlg-links .el-dlg-fuss { order: 3; margin: 0 calc(-3 * var(--el-u)); background: var(--el-dialog); border-top: 1px solid var(--el-border-quiet); } #exploreLiquidityView .el-dlg-rechts { order: 2; } #exploreLiquidityView .el-param { grid-template-columns: auto 1fr; } #exploreLiquidityView .el-param dt:nth-of-type(2n) { padding-left: 0; border-left: 0; } } @media (max-width: 640px) { #exploreLiquidityView .el-dlg-links .el-dlg-fuss { margin-inline: calc(-2 * var(--el-u)); padding-inline: calc(2 * var(--el-u)); } #exploreLiquidityView .el-dlg-links .el-stats { grid-template-columns: repeat(2, 1fr); } } /* Preis-Chart in echten Pixeln (keine verzerrte Schrift): Preisachse links, jeder Tag unten, Hover-Linie */ #exploreLiquidityView #elDlgChart .el-chart { width: 100%; height: auto; overflow: visible; } #exploreLiquidityView .el-chart .raster { stroke: var(--el-fg-06); stroke-width: 1; } #exploreLiquidityView .el-chart .achse { stroke: var(--el-fg-15); stroke-width: 1; } #exploreLiquidityView .el-chart .tag { stroke: var(--el-fg-15); stroke-width: 1; } #exploreLiquidityView .el-chart text.ay { text-anchor: end; } #exploreLiquidityView .el-chart text.ax { text-anchor: middle; font-size: 12px; } #exploreLiquidityView .el-chart text.am { text-anchor: start; font-size: 12px; fill: var(--el-fg-60); } #exploreLiquidityView .el-dlg-kopf .el-zeile { padding-right: calc(5.5 * var(--el-u)); } #exploreLiquidityView .el-chart .kreuz { stroke: var(--el-fg-40); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; } /* Zeitleiste wie im Fundingrates-Reiter: Fläche der ganzen Reihe, Fenster mit Griffen */ #exploreLiquidityView .el-nav { display: grid; grid-template-columns: calc(5 * var(--el-u)) minmax(0, 1fr); grid-template-rows: calc(5 * var(--el-u)) auto; column-gap: var(--el-u); row-gap: calc(.5 * var(--el-u)); margin-top: var(--el-u); } #exploreLiquidityView .el-nav-tage { align-self: center; justify-self: end; color: var(--el-fg-40); font-size: max(12px, calc(1.5 * var(--el-u))); white-space: nowrap; } #exploreLiquidityView .el-nav-flaeche { position: relative; border-radius: calc(.75 * var(--el-u)); background: var(--el-fg-05); box-shadow: var(--el-kante-feld); cursor: pointer; touch-action: none; user-select: none; } #exploreLiquidityView .el-nav-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } #exploreLiquidityView .el-nav-svg polygon { fill: var(--el-fg-10); } #exploreLiquidityView .el-nav-fenster { position: absolute; top: 1px; bottom: 1px; box-sizing: border-box; border: 1px solid color-mix(in srgb, var(--el-primary) 70%, transparent); border-radius: calc(.75 * var(--el-u)); background: color-mix(in srgb, var(--el-primary) 14%, transparent); cursor: grab; } #exploreLiquidityView .el-nav-flaeche.ziehen .el-nav-fenster { cursor: grabbing; } #exploreLiquidityView .el-nav-griff { position: absolute; top: 50%; width: 6px; height: 18px; margin-top: -9px; border-radius: 3px; background: var(--el-primary); cursor: ew-resize; } #exploreLiquidityView .el-nav-griff.l { left: -4px; } #exploreLiquidityView .el-nav-griff.r { right: -4px; } #exploreLiquidityView .el-nav-beschriftung { grid-column: 2; display: flex; justify-content: space-between; gap: calc(1.5 * var(--el-u)); color: var(--el-fg-40); font-size: max(12px, calc(1.375 * var(--el-u))); } /* Versteckte Tooltip-Boxen am rechten Rand machten die Seite auf dem Handy breiter (Layout-Viewport 520 statt 390 px); clip statt hidden, damit die klebende Filterleiste weiter klebt. */ #exploreLiquidityView .el-seite { overflow-x: clip; } /* ---- APR-Zusammensetzung (Nutzer 21.10.): Rechenzeilen und Formel-Tipp ---- */ #exploreLiquidityView .el-formel { display: flex; flex-wrap: wrap; align-items: center; gap: calc(.75 * var(--el-u)); margin-top: var(--el-u); } #exploreLiquidityView .el-glied { display: inline-flex; align-items: baseline; gap: calc(.75 * var(--el-u)); padding: calc(.5 * var(--el-u)) calc(1.125 * var(--el-u)); border-radius: calc(.75 * var(--el-u)); background: var(--el-fg-05); box-shadow: var(--el-kante-feld); font-size: max(12px, calc(1.5 * var(--el-u))); color: var(--el-fg-60); cursor: help; white-space: nowrap; } #exploreLiquidityView .el-glied i { display: inline-block; width: var(--el-u); height: var(--el-u); border-radius: 2px; align-self: center; } #exploreLiquidityView .el-glied b { color: var(--el-fg); font-weight: 500; font-size: max(12px, calc(1.625 * var(--el-u))); } #exploreLiquidityView .el-glied.stark { background: color-mix(in srgb, var(--el-primary) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--el-primary) 40%, transparent); color: var(--el-fg-70); } #exploreLiquidityView .el-glied:hover, #exploreLiquidityView .el-glied:focus-visible { background: var(--el-fg-10); } #exploreLiquidityView .el-op { color: var(--el-fg-40); font-size: max(12px, calc(1.75 * var(--el-u))); font-family: "Geist Mono", ui-monospace, monospace; } #exploreLiquidityView .el-stat[data-formel] { cursor: help; } #exploreLiquidityView .el-stat[data-formel]:hover, #exploreLiquidityView .el-stat[data-formel]:focus-visible { box-shadow: var(--el-kante), inset 0 0 0 1px var(--el-fg-15); } #exploreLiquidityView .el-formel-tipp { position: absolute; z-index: 40; left: 0; top: 0; width: max-content; max-width: min(calc(46 * var(--el-u)), calc(100% - 16px)); padding: calc(1.5 * var(--el-u)) calc(1.75 * var(--el-u)); background: var(--el-hint-bg); border: 1px solid var(--el-border); border-radius: var(--el-u); box-shadow: var(--el-hint-shadow); font-size: max(12px, calc(1.625 * var(--el-u))); color: var(--el-fg-70); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease; } #exploreLiquidityView .el-formel-tipp[data-an] { opacity: 1; visibility: visible; } #exploreLiquidityView .el-filter-formel { position: fixed; z-index: 60; } /* filter bar tooltips (22.10.2026) */ #exploreLiquidityView .el-filter-formel .el-rechnung .op { padding-right: calc(.75 * var(--el-u)); } #exploreLiquidityView .el-filter-formel .el-rechnung .n { white-space: normal; } #exploreLiquidityView .el-formel-tipp .t { color: var(--el-fg); font-weight: 500; margin-bottom: calc(.75 * var(--el-u)); } #exploreLiquidityView .el-rechnung { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; } #exploreLiquidityView .el-rechnung td { padding: calc(.25 * var(--el-u)) 0; vertical-align: baseline; } #exploreLiquidityView .el-rechnung .op { width: calc(2.5 * var(--el-u)); color: var(--el-fg-40); font-family: "Geist Mono", ui-monospace, monospace; } #exploreLiquidityView .el-rechnung .n { padding-right: calc(3 * var(--el-u)); white-space: nowrap; } #exploreLiquidityView .el-rechnung .n i { display: inline-block; width: var(--el-u); height: var(--el-u); border-radius: 2px; margin-right: calc(.75 * var(--el-u)); vertical-align: middle; } #exploreLiquidityView .el-rechnung .w { text-align: right; color: var(--el-fg); white-space: nowrap; font-family: "Geist Mono", ui-monospace, monospace; } #exploreLiquidityView .el-rechnung tr.summe td { border-top: 1px solid var(--el-fg-15); padding-top: calc(.75 * var(--el-u)); color: var(--el-fg); font-weight: 600; } #exploreLiquidityView .el-rechnung tr.mitte td { color: var(--el-fg); font-weight: 600; background: var(--el-fg-05); } #exploreLiquidityView .el-formel-tipp .notiz { margin: var(--el-u) 0 0; color: var(--el-fg-50); font-size: max(12px, calc(1.5 * var(--el-u))); line-height: 1.45; white-space: normal; } /* Übersicht-Umbau 21.10.2026 ───────────────────────────────────────────────────────────────────────────── Nutzerwünsche: Signature-Zahlen statt Kopf und KPI-Karten, Filterleiste scrollt mit, Katalog-Dropdowns (Exchange mit Mehrfachwahl), Score | APR und Kacheln | Liste global in der Leiste, Kategorie-Kopf mit Tooltip und mittigen Kennzahlen, Listenansicht je Kategorie. Nur --el-*-Tokens, Schrift ≥ 12 px. */ /* ---- Signature-Zahlen: siehe Block „Signature-Bühne“ am Ende der Datei (Prüfung 21.10.2026) ---- */ /* ---- Filterleiste: Suche, Score | APR, Dropdowns, Reset, ⓘ; rechts Kacheln | Liste und der Stand ---- */ #exploreLiquidityView .el-filter .el-feld, #exploreLiquidityView .el-filter .el-feld input, #exploreLiquidityView .el-filter .el-seg button, #exploreLiquidityView .el-filter .el-knopf.klein { font-size: max(12px, calc(1.625 * var(--el-u))); } #exploreLiquidityView .el-feld-icon { width: calc(1.75 * var(--el-u)); height: calc(1.75 * var(--el-u)); color: var(--el-fg-40); flex: none; } #exploreLiquidityView .el-filter-rechts { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; gap: calc(2 * var(--el-u)); flex-wrap: wrap; } #exploreLiquidityView .el-filter .el-stand { font-size: max(12px, calc(1.5 * var(--el-u))); color: var(--el-fg-40); } #exploreLiquidityView .el-ansicht button { display: inline-flex; align-items: center; gap: calc(.75 * var(--el-u)); } #exploreLiquidityView .el-ansicht button svg { width: calc(1.75 * var(--el-u)); height: calc(1.75 * var(--el-u)); } #exploreLiquidityView .el-filter-tip .el-tip-box { max-width: min(calc(60 * var(--el-u)), calc(100vw - 32px)); font-size: max(12px, calc(1.625 * var(--el-u))); } #exploreLiquidityView .el-knopf:disabled { opacity: .35; cursor: default; transform: none; } #exploreLiquidityView .el-knopf:disabled:hover { background: var(--el-fg-05); } /* ---- Katalog-Dropdown (Designkatalog Dropdown/standard, Werte auf --el-* gelegt) ---- */ #exploreLiquidityView .el-dd { position: relative; display: inline-flex; } #exploreLiquidityView .el-dd-knopf { border: 0; cursor: pointer; gap: calc(.75 * var(--el-u)); padding-right: calc(1.25 * var(--el-u)); transition: background .15s ease; } #exploreLiquidityView .el-dd-knopf:hover { background: var(--el-fg-08); } #exploreLiquidityView .el-dd-knopf .lbl { color: var(--el-fg-45); white-space: nowrap; } #exploreLiquidityView .el-dd-knopf .wert { color: var(--el-fg); font-weight: 500; white-space: nowrap; max-width: calc(20 * var(--el-u)); overflow: hidden; text-overflow: ellipsis; } #exploreLiquidityView .el-dd-knopf .pfeil { width: calc(1.75 * var(--el-u)); height: calc(1.75 * var(--el-u)); color: var(--el-fg-40); flex: none; transition: transform .15s ease; } #exploreLiquidityView .el-dd.offen .el-dd-knopf .pfeil { transform: rotate(180deg); } #exploreLiquidityView .el-dd.gesetzt .el-dd-knopf { box-shadow: var(--el-kante-feld), inset 0 0 0 1px color-mix(in srgb, var(--el-primary) 40%, transparent); } #exploreLiquidityView .el-dd-menue { position: absolute; top: calc(100% + var(--el-u)); left: 0; z-index: 30; min-width: max(100%, calc(30 * var(--el-u))); max-width: calc(100vw - 32px); padding: var(--el-u) 0; border-radius: calc(1.5 * var(--el-u)); background: var(--el-popover); border: 1px solid var(--el-border); box-shadow: var(--el-hint-shadow); outline: none; animation: el-dd-auf .14s ease-out; } #exploreLiquidityView .el-dd-menue[hidden] { display: none; } #exploreLiquidityView .el-dd-menue:focus-visible { box-shadow: var(--el-hint-shadow), 0 0 0 2px color-mix(in srgb, var(--el-ring) 50%, transparent); } @keyframes el-dd-auf { from { opacity: 0; transform: translateY(calc(-.5 * var(--el-u))); } to { opacity: 1; transform: none; } } #exploreLiquidityView .el-rm .el-dd-menue { animation: none; } #exploreLiquidityView .el-dd-opt { display: flex; align-items: center; gap: calc(1.25 * var(--el-u)); padding: calc(1.25 * var(--el-u)) calc(2 * var(--el-u)); font-size: max(13px, calc(1.75 * var(--el-u))); font-weight: 500; color: var(--el-fg); cursor: pointer; white-space: nowrap; transition: background .12s ease; } #exploreLiquidityView .el-dd-opt.aktiv { background: var(--el-fg-06); } #exploreLiquidityView .el-dd-opt .text { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: var(--el-u); } #exploreLiquidityView .el-dd-opt .zusatz { color: var(--el-fg-40); font-weight: 400; font-size: max(12px, calc(1.5 * var(--el-u))); overflow: hidden; text-overflow: ellipsis; } #exploreLiquidityView .el-dd-opt .haken { width: calc(2 * var(--el-u)); height: calc(2 * var(--el-u)); display: inline-grid; place-items: center; color: var(--el-positive); opacity: 0; flex: none; } #exploreLiquidityView .el-dd-opt[aria-selected="true"] .haken { opacity: 1; } #exploreLiquidityView .el-dd-opt .haken svg, #exploreLiquidityView .el-dd-opt .kasten svg { width: calc(1.75 * var(--el-u)); height: calc(1.75 * var(--el-u)); } #exploreLiquidityView .el-dd-opt .kasten { width: calc(2.25 * var(--el-u)); height: calc(2.25 * var(--el-u)); border-radius: calc(.5 * var(--el-u)); display: inline-grid; place-items: center; flex: none; box-shadow: inset 0 0 0 1.5px var(--el-fg-30); color: transparent; transition: background .12s ease, box-shadow .12s ease; } #exploreLiquidityView .el-dd-opt[aria-selected="true"] .kasten { background: var(--el-primary); box-shadow: none; color: var(--el-primary-fg); } #exploreLiquidityView .el-dd-opt .el-logo { width: calc(2.75 * var(--el-u)); height: calc(2.75 * var(--el-u)); } #exploreLiquidityView .el-dd-trenner { height: 1px; margin: calc(.75 * var(--el-u)) var(--el-u); background: var(--el-border-quiet); } @media (max-width: 640px) { #exploreLiquidityView .el-filter .el-suche { flex: 1 1 100%; } #exploreLiquidityView .el-filter .el-dd { flex: 1 1 40%; min-width: 0; } #exploreLiquidityView .el-filter .el-dd .el-dd-knopf { width: 100%; } #exploreLiquidityView .el-dd-knopf .wert { flex: 1; min-width: 0; max-width: none; text-align: left; } #exploreLiquidityView .el-filter-rechts { margin-left: 0; width: 100%; justify-content: space-between; } } /* ---- Kategorie-Kopf: Name mit Tooltip (Erklärung + Kriterien), Kennzahlen mittig ---- */ #exploreLiquidityView .el-kat-titel { display: flex; align-items: center; gap: var(--el-u); min-width: 0; justify-self: start; } #exploreLiquidityView .el-kat-titel h2 { cursor: help; min-width: 0; } #exploreLiquidityView .el-kat-titel > .el-tip-box { left: 0; transform: translateX(var(--tip-dx, 0px)); max-width: min(calc(64 * var(--el-u)), calc(100vw - 32px)); font-size: max(12px, calc(1.625 * var(--el-u))); } #exploreLiquidityView .el-tip-box .satz { display: block; color: var(--el-fg); margin-bottom: calc(.75 * var(--el-u)); } #exploreLiquidityView .el-tip-box .krit { display: block; color: var(--el-fg-60); } /* ---- Ansicht: Kacheln (Karussell) oder Liste je Kategorie ---- */ #exploreLiquidityView .el-seite[data-ansicht="liste"] .el-raster { display: none; } #exploreLiquidityView .el-seite:not([data-ansicht="liste"]) .el-liste { display: none; } #exploreLiquidityView .el-seite[data-ansicht="liste"] .el-kat-pfeile { visibility: hidden; } #exploreLiquidityView .el-liste { margin-top: calc(1.5 * var(--el-u)); } #exploreLiquidityView .el-seite .el-suchtreffer .el-liste { display: block; } /* search result is always a list */ #exploreLiquidityView .el-liste-kopf, #exploreLiquidityView .el-lzeile { display: grid; align-items: center; column-gap: calc(2 * var(--el-u)); grid-template-columns: calc(4 * var(--el-u)) minmax(calc(14 * var(--el-u)), 1.3fr) minmax(calc(12 * var(--el-u)), 1fr) calc(9 * var(--el-u)) calc(11 * var(--el-u)) minmax(calc(16 * var(--el-u)), 1.4fr) calc(9 * var(--el-u)) calc(10 * var(--el-u)) calc(9 * var(--el-u)); } #exploreLiquidityView .el-liste-kopf { padding: 0 calc(2.5 * var(--el-u)) var(--el-u); font-size: max(12px, calc(1.375 * var(--el-u))); text-transform: uppercase; letter-spacing: .04em; color: var(--el-fg-40); } #exploreLiquidityView .el-liste-kopf span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #exploreLiquidityView .el-liste-kopf .r { text-align: right; } #exploreLiquidityView .el-liste-rumpf { display: flex; flex-direction: column; gap: var(--el-u); max-height: calc(53 * var(--el-u)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: calc(.75 * var(--el-u)) calc(.5 * var(--el-u)) var(--el-u); margin: 0 calc(-.5 * var(--el-u)); } #exploreLiquidityView .el-liste-rumpf > .el-leer { flex: none; } #exploreLiquidityView .el-lzeile { position: relative; top: 0; flex: none; width: 100%; margin: 0; border: 0; text-align: left; color: var(--el-fg); cursor: pointer; min-height: calc(7.5 * var(--el-u)); border-radius: var(--el-u); padding: calc(1.25 * var(--el-u)) calc(2 * var(--el-u)); background: linear-gradient(90deg, color-mix(in srgb, var(--a) 8%, transparent) -10%, transparent 40%), var(--el-karte-oben); box-shadow: var(--el-kante); transition: top 160ms ease-out, box-shadow 160ms ease-out; } #exploreLiquidityView .el-lzeile:hover { top: calc(-.25 * var(--el-u)); box-shadow: var(--el-kante), 0 0 0 1px color-mix(in srgb, var(--a) 25%, transparent), 0 calc(.75 * var(--el-u)) calc(2 * var(--el-u)) calc(-1 * var(--el-u)) color-mix(in srgb, var(--a) 30%, transparent); } #exploreLiquidityView .el-lzeile:focus-visible { outline: 0; box-shadow: var(--el-kante), 0 0 0 calc(.25 * var(--el-u)) var(--el-bg), 0 0 0 calc(.625 * var(--el-u)) color-mix(in srgb, var(--el-primary) 50%, transparent); } #exploreLiquidityView .el-rm .el-lzeile { transition: none; } #exploreLiquidityView .el-lzeile > span { min-width: 0; } #exploreLiquidityView .el-lzeile .rang { font-size: max(12px, calc(1.5 * var(--el-u))); color: var(--el-fg-30); } #exploreLiquidityView .el-lzeile .rang.top { color: var(--a); } #exploreLiquidityView .el-lzeile .asset { display: flex; align-items: center; gap: calc(1.25 * var(--el-u)); } #exploreLiquidityView .el-lzeile .el-titel { min-width: 0; font-size: calc(2 * var(--el-u)); font-weight: 500; letter-spacing: calc(-0.04 * var(--el-u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #exploreLiquidityView .el-lzeile .boerse { display: flex; align-items: center; gap: var(--el-u); color: var(--el-fg-60); font-size: max(12px, calc(1.625 * var(--el-u))); } #exploreLiquidityView .el-lzeile .boerse .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #exploreLiquidityView .el-lzeile .zelle { text-align: right; white-space: nowrap; } #exploreLiquidityView .el-lzeile .zelle .l { display: none; } #exploreLiquidityView .el-lzeile .zelle b { font-weight: 500; font-size: max(12px, calc(1.75 * var(--el-u))); } #exploreLiquidityView .el-lzeile .zelle b.aussen { color: var(--el-ausserhalb); } #exploreLiquidityView .el-lzeile .apr b { font-size: calc(2.25 * var(--el-u)); color: var(--el-positive); } #exploreLiquidityView .el-lzeile .range .el-rangeleiste { margin: calc(.25 * var(--el-u)) 0 calc(.75 * var(--el-u)); } #exploreLiquidityView .el-lzeile .range .zahlen { display: block; font-size: max(12px, calc(1.375 * var(--el-u))); color: var(--el-fg-50); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Liste 641–1024 und Handy: siehe Block „Prüfung 21.10.2026“ am Ende (901–1024 ohne Fee/Runtime, bis 900 px Umbruch). */ /* Dialog-Umbau 21.10.2026 (Nutzer): Reiter Details / Exchanges / Asset, Einstiegsampel, APR grün, Achsen mit Innenabstand */ #exploreLiquidityView { --el-apr-gruen: linear-gradient(92deg, color-mix(in srgb, var(--el-positive) 45%, var(--el-fg)) 0%, var(--el-positive) 100%); } html[data-theme="light"] #exploreLiquidityView { --el-apr-gruen: linear-gradient(92deg, color-mix(in srgb, var(--el-positive) 72%, var(--el-bg)) 0%, var(--el-positive) 100%); } /* Reiterleiste: Unterstrich-Reiter, monochrom (Katalog Tabs: kein Blau), aktiv = Text + Linie in --el-fg */ #exploreLiquidityView .el-dlg-reiter { flex: none; display: flex; gap: calc(3 * var(--el-u)); padding: 0 calc(3 * var(--el-u)); border-bottom: 1px solid var(--el-border-quiet); } #exploreLiquidityView .el-dlg-reiter [role="tab"] { position: relative; border: 0; background: transparent; padding: calc(1.25 * var(--el-u)) 0; color: var(--el-fg-50); font-size: max(13px, calc(1.875 * var(--el-u))); font-weight: 500; white-space: nowrap; transition: color .15s; } #exploreLiquidityView .el-dlg-reiter [role="tab"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: transparent; transition: background .15s; } #exploreLiquidityView .el-dlg-reiter [role="tab"]:hover { color: var(--el-fg-70); } #exploreLiquidityView .el-dlg-reiter [role="tab"][aria-selected="true"] { color: var(--el-fg); } #exploreLiquidityView .el-dlg-reiter [role="tab"][aria-selected="true"]::after { background: var(--el-fg); } #exploreLiquidityView .el-dlg-inhalt > [role="tabpanel"][hidden] { display: none; } #exploreLiquidityView .el-dlg-panel { padding-bottom: calc(2.5 * var(--el-u)); } #exploreLiquidityView .el-dlg-panel:focus-visible { outline-offset: calc(-.25 * var(--el-u)); } #exploreLiquidityView .el-dlg-zustand { margin: calc(2 * var(--el-u)) 0; } @media (max-width: 640px) { #exploreLiquidityView .el-dlg-reiter { padding-inline: calc(2 * var(--el-u)); gap: calc(2.5 * var(--el-u)); } } /* Einstiegsampel in den Kennzahlen: drei Punkte, der aktive leuchtet; Stufe in ihrer Farbe, darunter der Satz */ #exploreLiquidityView .el-stat.einstieg .w { display: flex; align-items: center; gap: var(--el-u); font-size: max(14px, calc(2 * var(--el-u))); letter-spacing: 0; } #exploreLiquidityView .el-ampel { display: inline-flex; gap: calc(.5 * var(--el-u)); padding: calc(.5 * var(--el-u)) calc(.75 * var(--el-u)); border-radius: 999px; background: var(--el-fg-05); box-shadow: var(--el-kante-feld); flex: none; } #exploreLiquidityView .el-ampel i { display: block; width: max(10px, calc(1.375 * var(--el-u))); height: max(10px, calc(1.375 * var(--el-u))); border-radius: 50%; background: var(--el-fg-15); } #exploreLiquidityView .el-ampel i.gruen.an { background: var(--el-positive); box-shadow: 0 0 calc(1.25 * var(--el-u)) color-mix(in srgb, var(--el-positive) 70%, transparent); } #exploreLiquidityView .el-ampel i.gelb.an { background: var(--el-warn); box-shadow: 0 0 calc(1.25 * var(--el-u)) color-mix(in srgb, var(--el-warn) 70%, transparent); } #exploreLiquidityView .el-ampel i.rot.an { background: var(--el-negative-text); box-shadow: 0 0 calc(1.25 * var(--el-u)) color-mix(in srgb, var(--el-negative-text) 70%, transparent); } #exploreLiquidityView .el-stat.st-gruen .w .n { color: var(--el-positive); } #exploreLiquidityView .el-stat.st-gelb .w .n { color: var(--el-warn); } #exploreLiquidityView .el-stat.st-rot .w .n { color: var(--el-negative-text); } #exploreLiquidityView .el-stat.einstieg .s { display: block; margin-top: calc(.5 * var(--el-u)); color: var(--el-fg-50); font-size: max(12px, calc(1.5 * var(--el-u))); line-height: 1.3; } /* Einstiegszonen im Preis-Chart: sehr dezent, das Band bleibt lesbar */ #exploreLiquidityView .el-chart .zone.gut { fill: color-mix(in srgb, var(--el-positive) 11%, transparent); } #exploreLiquidityView .el-chart .zone.hoch { fill: color-mix(in srgb, var(--el-negative-text) 9%, transparent); } /* APR je Tag: Achsen wie im Preis-Chart (Beschriftung rechtsbündig vor der Fläche, Daten unten mittig) */ #exploreLiquidityView .el-chart-apr text.ay { text-anchor: end; } #exploreLiquidityView .el-chart-apr text.ax { text-anchor: middle; } #exploreLiquidityView .el-chart-apr .achse, #exploreLiquidityView .el-chart-apr .tag { stroke: var(--el-fg-15); stroke-width: 1; } /* Reiter „Exchanges“: je Börse eine Kachel, APR groß und grün, Teilwerte als kleine Kacheln */ #exploreLiquidityView .el-vgl-kopf p { margin: 0; color: var(--el-fg-60); font-size: max(12px, calc(1.75 * var(--el-u))); max-width: calc(110 * var(--el-u)); } #exploreLiquidityView .el-vgl-annahmen { display: flex; flex-wrap: wrap; align-items: center; gap: calc(.75 * var(--el-u)); margin-top: calc(1.25 * var(--el-u)); } #exploreLiquidityView .el-vgl-annahmen .el-pille { font-size: max(12px, calc(1.5 * var(--el-u))); } #exploreLiquidityView .el-vgl-stand { margin-left: auto; color: var(--el-fg-40); font-size: max(12px, calc(1.5 * var(--el-u))); } #exploreLiquidityView .el-vgl-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(210px, calc(28 * var(--el-u))), 1fr)); gap: calc(1.5 * var(--el-u)); margin-top: calc(2 * var(--el-u)); } #exploreLiquidityView .el-vgl-karte { display: flex; flex-direction: column; gap: calc(1.5 * var(--el-u)); min-width: 0; padding: calc(2 * var(--el-u)); border-radius: calc(1.25 * var(--el-u)); background: var(--el-karte-oben); box-shadow: var(--el-kante); } #exploreLiquidityView .el-vgl-karte.eigene { box-shadow: var(--el-kante), inset 0 0 0 1px var(--el-fg-25); } #exploreLiquidityView .el-vgl-karte.beste { box-shadow: var(--el-kante), inset 0 0 0 1px color-mix(in srgb, var(--el-positive) 55%, transparent), 0 0 calc(3 * var(--el-u)) calc(-1 * var(--el-u)) color-mix(in srgb, var(--el-positive) 40%, transparent); } #exploreLiquidityView .el-vgl-karte.aus { opacity: .55; } #exploreLiquidityView .el-vgl-karte.el-skelett { min-height: calc(30 * var(--el-u)); } #exploreLiquidityView .el-vgl-zeile { display: flex; align-items: center; gap: var(--el-u); min-width: 0; } #exploreLiquidityView .el-vgl-name { display: flex; flex-direction: column; min-width: 0; } #exploreLiquidityView .el-vgl-name .n { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #exploreLiquidityView .el-vgl-name .m { color: var(--el-fg-40); font-size: max(12px, calc(1.375 * var(--el-u))); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #exploreLiquidityView .el-vgl-marken { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: calc(.5 * var(--el-u)); } #exploreLiquidityView .el-vgl-marken .el-pille { font-size: max(12px, calc(1.375 * var(--el-u))); } #exploreLiquidityView .el-vgl-eigene { background: var(--el-fg-10); color: var(--el-fg); } #exploreLiquidityView .el-vgl-apr .l { display: block; color: var(--el-fg-40); font-size: max(12px, calc(1.5 * var(--el-u))); letter-spacing: .04em; } #exploreLiquidityView .el-vgl-apr .w { display: inline-block; font-size: calc(4 * var(--el-u)); font-weight: 500; letter-spacing: calc(-0.06 * var(--el-u)); line-height: 1.1; white-space: nowrap; background: var(--el-apr-gruen); -webkit-background-clip: text; background-clip: text; color: transparent; } #exploreLiquidityView .el-vgl-apr .w small { font-size: max(12px, .55em); } #exploreLiquidityView .el-vgl-teile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(.75 * var(--el-u)); } #exploreLiquidityView .el-vgl-teil { min-width: 0; padding: calc(.75 * var(--el-u)) var(--el-u); border-radius: calc(.75 * var(--el-u)); background: var(--el-fg-05); box-shadow: var(--el-kante-feld); } #exploreLiquidityView .el-vgl-teil .l { display: flex; align-items: center; gap: calc(.5 * var(--el-u)); color: var(--el-fg-50); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #exploreLiquidityView .el-vgl-teil .l i { flex: none; width: calc(.875 * var(--el-u)); height: calc(.875 * var(--el-u)); border-radius: 2px; } #exploreLiquidityView .el-vgl-teil b { display: block; margin-top: calc(.25 * var(--el-u)); font-weight: 500; font-size: max(12px, calc(1.625 * var(--el-u))); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #exploreLiquidityView .el-vgl-werte { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: calc(.5 * var(--el-u)) calc(1.5 * var(--el-u)); font-size: max(12px, calc(1.5 * var(--el-u))); } #exploreLiquidityView .el-vgl-werte dt { color: var(--el-fg-50); } #exploreLiquidityView .el-vgl-werte dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } #exploreLiquidityView .el-vgl-werte dd.aussen { color: var(--el-ausserhalb); } #exploreLiquidityView .el-vgl-grund { margin: 0; display: flex; align-items: center; gap: calc(.75 * var(--el-u)); color: var(--el-fg-70); } #exploreLiquidityView .el-vgl-grund svg { flex: none; color: var(--el-fg-40); } @media (max-width: 640px) { #exploreLiquidityView .el-vgl-raster { grid-template-columns: minmax(0, 1fr); } #exploreLiquidityView .el-vgl-werte { grid-template-columns: auto 1fr auto 1fr; } #exploreLiquidityView .el-vgl-stand { margin-left: 0; width: 100%; } } /* Reiter „Asset“: links Name, Klasse/Sektor, Beschreibung; rechts Stabilitäts-Skala, Eckdaten, Quelle */ #exploreLiquidityView .el-asset { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: calc(4 * var(--el-u)); } #exploreLiquidityView .el-asset.el-skelett .sk + .sk { margin-top: var(--el-u); } #exploreLiquidityView .el-asset-kopf { display: flex; align-items: center; gap: calc(1.5 * var(--el-u)); } #exploreLiquidityView .el-asset-titel { display: flex; flex-direction: column; min-width: 0; } #exploreLiquidityView .el-asset-titel .n { font-size: calc(2.75 * var(--el-u)); font-weight: 500; letter-spacing: calc(-0.06 * var(--el-u)); line-height: 1.15; overflow-wrap: anywhere; } #exploreLiquidityView .el-asset-titel .b { color: var(--el-fg-40); font-size: max(12px, calc(1.5 * var(--el-u))); } #exploreLiquidityView .el-asset-pillen { display: flex; flex-wrap: wrap; gap: calc(.75 * var(--el-u)); margin-top: calc(1.5 * var(--el-u)); } #exploreLiquidityView .el-asset-pillen .el-pille { font-size: max(12px, calc(1.5 * var(--el-u))); } #exploreLiquidityView .el-asset-klasse { color: var(--el-fg); font-weight: 500; } #exploreLiquidityView .el-asset-text { margin: calc(2 * var(--el-u)) 0 0; color: var(--el-fg-70); font-size: max(13px, calc(1.875 * var(--el-u))); line-height: 1.55; max-width: 70ch; } #exploreLiquidityView .el-asset-leer { margin-top: calc(2 * var(--el-u)); display: flex; align-items: flex-start; gap: var(--el-u); padding: calc(1.75 * var(--el-u)) calc(2 * var(--el-u)); border-radius: calc(.75 * var(--el-u)); background: var(--el-hint-bg); border: 1px solid var(--el-border); color: var(--el-fg-60); } #exploreLiquidityView .el-asset-leer svg { flex: none; margin-top: calc(.25 * var(--el-u)); color: var(--el-fg-40); } #exploreLiquidityView .el-asset-skala-block h3 { margin: 0 0 calc(1.5 * var(--el-u)); font-size: max(12px, calc(1.875 * var(--el-u))); font-weight: 500; letter-spacing: calc(-0.03 * var(--el-u)); } #exploreLiquidityView .el-skala-balken { position: relative; height: max(8px, var(--el-u)); border-radius: 999px; background: linear-gradient(90deg, var(--el-positive) 0%, color-mix(in srgb, var(--el-positive) 50%, var(--el-warn)) 30%, var(--el-warn) 62%, var(--el-negative-text) 100%); } #exploreLiquidityView .el-skala-balken > i { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--el-dialog); } #exploreLiquidityView .el-skala-marke { position: absolute; top: 50%; width: max(16px, calc(2.25 * var(--el-u))); height: max(16px, calc(2.25 * var(--el-u))); border-radius: 50%; background: var(--el-preis); box-shadow: 0 0 0 calc(.5 * var(--el-u)) var(--el-preis-ring), var(--el-hint-shadow); transform: translate(-50%, -50%); } #exploreLiquidityView .el-skala-stufen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(.5 * var(--el-u)); margin-top: calc(1.5 * var(--el-u)); color: var(--el-fg-40); font-size: max(12px, calc(1.5 * var(--el-u))); line-height: 1.25; } #exploreLiquidityView .el-skala-stufen .seg { text-align: center; } #exploreLiquidityView .el-skala-stufen .seg:first-child { text-align: left; } #exploreLiquidityView .el-skala-stufen .seg:last-child { text-align: right; } #exploreLiquidityView .el-skala-stufen .seg.an { color: var(--el-fg); font-weight: 600; } #exploreLiquidityView .el-skala-satz { margin: calc(1.25 * var(--el-u)) 0 0; color: var(--el-fg-60); font-size: max(12px, calc(1.625 * var(--el-u))); } #exploreLiquidityView .el-skala-satz b { color: var(--el-fg); font-weight: 500; } #exploreLiquidityView .el-asset-fakten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--el-u); margin-top: calc(2.5 * var(--el-u)); } #exploreLiquidityView .el-asset-fakt { min-width: 0; padding: calc(1.5 * var(--el-u)) calc(1.75 * var(--el-u)); border-radius: var(--el-u); background: var(--el-karte-oben); box-shadow: var(--el-kante); } #exploreLiquidityView .el-asset-fakt .l { display: block; color: var(--el-fg-40); font-size: max(12px, calc(1.5 * var(--el-u))); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #exploreLiquidityView .el-asset-fakt .w { display: block; margin-top: calc(.5 * var(--el-u)); font-size: calc(2.125 * var(--el-u)); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #exploreLiquidityView .el-asset-fakt .w small { font-size: max(12px, .6em); color: var(--el-fg-50); } #exploreLiquidityView .el-asset-fakt a { color: inherit; text-decoration: underline; text-decoration-color: var(--el-fg-25); text-underline-offset: 3px; } #exploreLiquidityView .el-asset-fakt a:hover { text-decoration-color: var(--el-fg); } #exploreLiquidityView .el-asset-quelle { margin: calc(1.5 * var(--el-u)) 0 0; color: var(--el-fg-40); font-size: 12px; } @media (max-width: 1024px) { #exploreLiquidityView .el-asset { grid-template-columns: minmax(0, 1fr); gap: calc(3 * var(--el-u)); } } /* Backend-Abgleich 21.10.2026: Signature ohne Engines-Zahlen (Web3-Modus, Stand > 3 h), Ladehinweis Vergleich */ #exploreLiquidityView .el-vgl-laden { display: flex; align-items: center; flex-wrap: wrap; gap: var(--el-u) calc(1.5 * var(--el-u)); margin: 0 0 calc(2 * var(--el-u)); color: var(--el-fg-70); font-size: max(12px, calc(1.625 * var(--el-u))); } #exploreLiquidityView .el-vgl-balken { flex: 1 0 100%; height: 3px; border-radius: 999px; background: var(--el-fg-10); overflow: hidden; } #exploreLiquidityView .el-vgl-balken i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(.02); background: var(--el-positive); animation: el-vgl-lauf 3s cubic-bezier(.2,.6,.3,1) forwards; } @keyframes el-vgl-lauf { to { transform: scaleX(.92); } } #exploreLiquidityView.el-rm .el-vgl-balken i, #exploreLiquidityView .el-rm .el-vgl-balken i { animation: none; transform: scaleX(.5); opacity: .5; } #exploreLiquidityView .el-spinner { flex: none; width: calc(2 * var(--el-u)); height: calc(2 * var(--el-u)); border-radius: 50%; border: 2px solid var(--el-fg-15); border-top-color: var(--el-positive); animation: el-dreh .8s linear infinite; } @keyframes el-dreh { to { transform: rotate(360deg); } } #exploreLiquidityView .el-rm .el-spinner { animation-duration: 2.4s; } /* ═══ Prüfung 21.10.2026 (zwei Skeptiker-Runden) ═════════════════════════════════════════════════════════════ Signature-Bühne, Liste responsiv, APR-Farbe einheitlich, Ampel in Kachel und Liste, Schrift ≥ 12 px. */ /* ---- Signature-Bühne: eine durchgehende Fläche mit Verlauf und Glow, die Zahlen durch feine Linien getrennt. Die Zahlgröße folgt der Zellbreite (Container Query, cqi): --zf % der Zellbreite, bei breiteren Zellen (--m-fach) entsprechend weniger, damit alle Zahlen einer Reihe gleich groß sind; Deckel 5 × --el-u (unter der Karussell-APR), Boden 22 px. Ein Nachmessen im Browser (exploreLiquidityTab.js passeSignaturAn) verkleinert nur, falls eine ungewöhnlich lange Zahl doch nicht passt. ---- */ #exploreLiquidityView .el-sig { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 0; padding: 0; margin: 0 0 calc(5 * var(--el-u)); border-radius: calc(2 * var(--el-u)); background: radial-gradient(48% 120% at 8% 0%, color-mix(in srgb, var(--el-primary) 20%, transparent) 0%, transparent 70%), radial-gradient(42% 130% at 96% 100%, color-mix(in srgb, var(--el-positive) 16%, transparent) 0%, transparent 70%), radial-gradient(30% 90% at 55% 0%, color-mix(in srgb, var(--el-chart-3) 10%, transparent) 0%, transparent 75%), linear-gradient(100deg, color-mix(in srgb, var(--el-primary) 5%, transparent), color-mix(in srgb, var(--el-positive) 4%, transparent)), var(--el-karte-oben); box-shadow: var(--el-kante), 0 calc(3 * var(--el-u)) calc(10 * var(--el-u)) calc(-4 * var(--el-u)) color-mix(in srgb, var(--el-primary) 22%, transparent); } #exploreLiquidityView .el-sig::before { /* Lichtkante oben über die ganze Reihe */ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; pointer-events: none; z-index: 2; background: linear-gradient(90deg, transparent 0%, var(--el-primary) 25%, var(--el-chart-3) 50%, var(--el-positive) 78%, transparent 100%); opacity: .8; } #exploreLiquidityView .el-sig::after { /* Glanz: läuft beim Einblenden einmal über die ganze Bühne */ content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--el-fg) 8%, transparent) 50%, transparent 65%); transform: translateX(-110%); animation: el-glanz 1.8s ease-out .4s 1 both; } #exploreLiquidityView .el-rm .el-sig::after { animation: none; display: none; } #exploreLiquidityView .el-sig-zelle { container-type: inline-size; --zf: 30; --m: 1; position: relative; z-index: 1; min-width: 0; overflow: visible; display: flex; flex-direction: column; gap: var(--el-u); padding: calc(2.5 * var(--el-u)) calc(2 * var(--el-u)) calc(2.25 * var(--el-u)); border-radius: 0; background: none; /* feine Trennlinien links und oben; an den Außenkanten schneidet die Bühne (overflow: hidden) sie weg */ box-shadow: -1px 0 0 0 var(--el-fg-10), 0 -1px 0 0 var(--el-fg-08); } #exploreLiquidityView .el-sig-zelle::before, #exploreLiquidityView .el-sig-zelle::after { content: none; } #exploreLiquidityView .el-sig-zelle.boersen { --m: 1.45; } #exploreLiquidityView .el-sig-zelle .l { font-size: max(12px, calc(1.5 * var(--el-u))); text-transform: uppercase; letter-spacing: .06em; color: var(--el-fg-50); white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.3; } #exploreLiquidityView .el-sig-zelle .w { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: calc(1.5 * var(--el-u)); min-width: 0; } #exploreLiquidityView .el-sig-zelle .z { display: inline-block; white-space: nowrap; line-height: 1.02; font-weight: 500; /* never larger than the carousel APR (6 × --el-u), user 22.10.2026: a bit below it */ font-size: clamp(22px, calc(var(--zf) / var(--m) * 1cqi), calc(5 * var(--el-u))); letter-spacing: -0.035em; background: var(--el-apr-verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 calc(2.5 * var(--el-u)) color-mix(in srgb, var(--el-primary) 30%, transparent)); } #exploreLiquidityView .el-sig-zelle .z small { font-size: max(12px, .42em); font-weight: 500; letter-spacing: 0; margin-left: .06em; } #exploreLiquidityView .el-sig-zelle .paar { display: inline-flex; flex-direction: column; gap: calc(.5 * var(--el-u)); min-width: 0; } #exploreLiquidityView .el-sig-zelle .u { font-size: max(12px, calc(1.5 * var(--el-u))); color: var(--el-fg-45); white-space: nowrap; } #exploreLiquidityView .el-sig-zelle .trenner { align-self: flex-start; font-size: clamp(18px, calc(var(--zf) / var(--m) * .6cqi), calc(3 * var(--el-u))); line-height: 1.6; color: var(--el-fg-25); } #exploreLiquidityView .el-sig-zelle .f { font-size: max(12px, calc(1.625 * var(--el-u))); color: var(--el-fg-50); margin-top: calc(-.25 * var(--el-u)); overflow-wrap: anywhere; } #exploreLiquidityView .el-sig-zelle .f .apr-wert { font-weight: 600; background: var(--el-apr-gruen); -webkit-background-clip: text; background-clip: text; color: transparent; } #exploreLiquidityView .el-sig-zelle .f .apr-wert.neg { background: none; color: var(--el-negative-text); } #exploreLiquidityView .el-sig-zelle.el-skelett { min-height: calc(13 * var(--el-u)); } /* Zwei Zahlen in einer schmalen Zelle: untereinander statt abgeschnitten */ @container (max-width: 230px) { #exploreLiquidityView .el-sig-zelle .w { flex-direction: column; gap: var(--el-u); } #exploreLiquidityView .el-sig-zelle .trenner { display: none; } } #exploreLiquidityView .el-sig.ohne-engines { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } /* 641–1024: höchstens drei Spalten – oben Setups + Börsen/Märkte (2 + 4 von 6), unten die drei Engines-Zahlen */ @media (max-width: 1024px) { #exploreLiquidityView .el-sig { grid-template-columns: repeat(6, minmax(0, 1fr)); } #exploreLiquidityView .el-sig-zelle { grid-column: span 2; padding: calc(2.75 * var(--el-u)) calc(2 * var(--el-u)); } #exploreLiquidityView .el-sig-zelle.boersen { grid-column: span 4; --m: 2.2; } #exploreLiquidityView .el-sig.ohne-engines { grid-template-columns: repeat(6, minmax(0, 1fr)); } } /* Handy: zwei Spalten; Börsen/Märkte über die ganze Breite (dense füllt die Lücke mit den Engines) */ @media (max-width: 640px) { #exploreLiquidityView .el-sig { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: calc(3 * var(--el-u)); border-radius: calc(1.5 * var(--el-u)); } #exploreLiquidityView .el-sig-zelle { grid-column: span 1; padding: calc(2 * var(--el-u)) calc(2 * var(--el-u)) calc(2.25 * var(--el-u)); } #exploreLiquidityView .el-sig-zelle.boersen { grid-column: span 2; --m: 2.2; } #exploreLiquidityView .el-sig-zelle.einnahmen:nth-child(5) { grid-column: span 1; } #exploreLiquidityView .el-sig.ohne-engines { grid-template-columns: repeat(2, minmax(0, 1fr)); } #exploreLiquidityView .el-sig.ohne-engines .el-sig-zelle.setups { grid-column: span 2; --m: 2.2; } } /* ---- Filterleiste: die Stand-Zeile entfällt, nur die gelbe Pille bleibt (veraltet) ---- */ #exploreLiquidityView .el-stand[hidden] { display: none; } #exploreLiquidityView .el-filter .el-stand .el-veraltet { font-size: max(12px, calc(1.5 * var(--el-u))); } /* ---- APR einheitlich grün mit Verlauf hellgrün → grün; negative APR rot ---- */ #exploreLiquidityView .el-apr-gross .z, #exploreLiquidityView .el-kachel .el-apr .z, #exploreLiquidityView .el-lzeile .apr b, #exploreLiquidityView .el-kat-zahlen [data-kz="apr"] { background: var(--el-apr-gruen); -webkit-background-clip: text; background-clip: text; color: transparent; } #exploreLiquidityView .el-apr-gross .z.neg, #exploreLiquidityView .el-kachel .el-apr .z.neg, #exploreLiquidityView .el-lzeile .apr b.neg, #exploreLiquidityView .el-stat.apr.neg .w, #exploreLiquidityView .el-vgl-apr .w.neg { background: none; color: var(--el-negative-text); } /* ---- Highlight-Kachel: nichts schrumpft (die Meta-Zeile lag ≤ 1024 px halb unter der Titelzeile), nur die Sparkline gibt nach; Delta-Abzeichen bricht um statt abgeschnitten zu werden ---- */ #exploreLiquidityView .el-hl > * { flex-shrink: 0; } #exploreLiquidityView .el-hl > .el-spark { flex: 0 1 auto; min-height: calc(2.5 * var(--el-u)); } #exploreLiquidityView .el-meta { height: auto; min-height: calc(2 * var(--el-u)); line-height: 1.3; } #exploreLiquidityView .el-apr-gross { flex-wrap: wrap; row-gap: calc(.75 * var(--el-u)); } #exploreLiquidityView .el-apr-gross .el-delta { white-space: nowrap; } @media (max-width: 1024px) { #exploreLiquidityView .el-hl { gap: var(--el-u); } #exploreLiquidityView .el-hl .el-zeile { gap: var(--el-u); } #exploreLiquidityView .el-hl .el-paar { width: calc(4.25 * var(--el-u)); height: calc(4.25 * var(--el-u)); } #exploreLiquidityView .el-hl .el-pille[style] { margin-top: calc(.75 * var(--el-u)) !important; } } /* ---- Einstiegsampel klein (Kachel, Liste): Punkt in Stufenfarbe + Kurztext ---- */ #exploreLiquidityView .el-ampel-klein { display: inline-flex; align-items: center; gap: calc(.75 * var(--el-u)); font-size: max(12px, calc(1.5 * var(--el-u))); font-weight: 500; line-height: 1.2; white-space: nowrap; color: var(--el-fg-50); } #exploreLiquidityView .el-ampel-klein i { flex: none; width: max(8px, var(--el-u)); height: max(8px, var(--el-u)); border-radius: 50%; background: var(--el-fg-25); } #exploreLiquidityView .el-ampel-klein.st-gruen { color: var(--el-positive); } #exploreLiquidityView .el-ampel-klein.st-gelb { color: var(--el-warn); } #exploreLiquidityView .el-ampel-klein.st-rot { color: var(--el-negative-text); } #exploreLiquidityView .el-ampel-klein.st-gruen i { background: var(--el-positive); box-shadow: 0 0 calc(.75 * var(--el-u)) color-mix(in srgb, var(--el-positive) 70%, transparent); } #exploreLiquidityView .el-ampel-klein.st-gelb i { background: var(--el-warn); box-shadow: 0 0 calc(.75 * var(--el-u)) color-mix(in srgb, var(--el-warn) 70%, transparent); } #exploreLiquidityView .el-ampel-klein.st-rot i { background: var(--el-negative-text); box-shadow: 0 0 calc(.75 * var(--el-u)) color-mix(in srgb, var(--el-negative-text) 70%, transparent); } /* Kachel: oben rechts über der Kachel, gegenüber dem Rang – die Kachel wird nicht höher */ #exploreLiquidityView .el-kachel .el-ampel-klein.oben { position: absolute; top: calc(-2.5 * var(--el-u)); right: calc(.25 * var(--el-u)); } /* ---- Börsensymbol: „RH“ in 12 px als kleines Abzeichen über der Ecke statt im Bild ---- */ #exploreLiquidityView .el-logo { overflow: visible; } #exploreLiquidityView .el-logo .rh { font-size: 12px; right: -.5em; bottom: -.45em; padding: 1px 3px; border-radius: 4px; font-weight: 600; line-height: 1; letter-spacing: 0; background: var(--el-bg); color: var(--el-fg-70); box-shadow: 0 0 0 1px var(--el-border); z-index: 1; } #exploreLiquidityView .el-paar .b { letter-spacing: -.03em; } /* ---- Liste: Spalten mit Mindestbreiten in px (Kopf „EXITS 7 D“ passt), Ampel-Spalte „Entry“; 901–1024 px ohne Fee und Runtime, bis 900 px der Handy-Umbruch (Prüfung 21.10.) ---- */ #exploreLiquidityView .el-liste-kopf, #exploreLiquidityView .el-lzeile { grid-template-columns: max(28px, calc(4 * var(--el-u))) minmax(max(90px, calc(14 * var(--el-u))), 1.3fr) minmax(max(80px, calc(12 * var(--el-u))), 1fr) max(60px, calc(9 * var(--el-u))) max(84px, calc(12 * var(--el-u))) minmax(max(100px, calc(15 * var(--el-u))), 1.4fr) max(100px, calc(13 * var(--el-u))) max(70px, calc(9 * var(--el-u))) max(78px, calc(10 * var(--el-u))) max(88px, calc(11 * var(--el-u))); } #exploreLiquidityView .el-liste-kopf span { overflow: visible; text-overflow: clip; } #exploreLiquidityView .el-lzeile .einstieg { text-align: left; } #exploreLiquidityView .el-lzeile .einstieg .l { display: none; } @media (max-width: 1024px) and (min-width: 901px) { #exploreLiquidityView .el-liste-kopf, #exploreLiquidityView .el-lzeile { column-gap: calc(1.25 * var(--el-u)); grid-template-columns: max(28px, calc(3.5 * var(--el-u))) minmax(max(90px, calc(11 * var(--el-u))), 1.2fr) max(32px, calc(4 * var(--el-u))) max(84px, calc(11.5 * var(--el-u))) minmax(max(100px, calc(12 * var(--el-u))), 1.2fr) max(100px, calc(11 * var(--el-u))) max(70px, calc(8 * var(--el-u))) max(84px, calc(8.75 * var(--el-u))); } #exploreLiquidityView .el-liste-kopf .fee, #exploreLiquidityView .el-liste-kopf .laufzeit, #exploreLiquidityView .el-lzeile .zelle.fee, #exploreLiquidityView .el-lzeile .zelle.laufzeit { display: none; } #exploreLiquidityView .el-lzeile .boerse .name { display: none; visibility: visible; } #exploreLiquidityView .el-liste-kopf span:nth-child(3) { visibility: hidden; } } @media (max-width: 900px) { #exploreLiquidityView .el-liste-kopf { display: none; } #exploreLiquidityView .el-lzeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--el-u) calc(1.75 * var(--el-u)); padding: calc(1.5 * var(--el-u)) calc(1.75 * var(--el-u)); } #exploreLiquidityView .el-lzeile .rang { order: 1; } #exploreLiquidityView .el-lzeile .asset { order: 2; flex: 1 1 0; } #exploreLiquidityView .el-lzeile .apr { order: 3; } #exploreLiquidityView .el-lzeile .range { order: 4; flex: 1 1 100%; } #exploreLiquidityView .el-lzeile .boerse { order: 5; } #exploreLiquidityView .el-lzeile .einstieg { order: 6; } #exploreLiquidityView .el-lzeile .fee { order: 7; } #exploreLiquidityView .el-lzeile .inrange { order: 8; } #exploreLiquidityView .el-lzeile .exits { order: 9; } #exploreLiquidityView .el-lzeile .laufzeit { order: 10; } #exploreLiquidityView .el-lzeile .boerse .name { display: none; visibility: visible; } #exploreLiquidityView .el-lzeile .zelle { text-align: left; } #exploreLiquidityView .el-lzeile .apr .l, #exploreLiquidityView .el-lzeile .einstieg .l { display: none; } #exploreLiquidityView .el-lzeile .zelle:not(.apr):not(.einstieg) .l { display: inline; margin-right: calc(.5 * var(--el-u)); color: var(--el-fg-45); font-size: 12px; } #exploreLiquidityView .el-lzeile .zelle:not(.apr) b { font-size: 12px; } #exploreLiquidityView .el-lzeile .el-ampel-klein { font-size: 12px; } #exploreLiquidityView .el-liste-rumpf { max-height: min(70vh, calc(78 * var(--el-u))); } } /* ---- Eigene Parameter neu rechnen (Nutzer 21.10.2026 abends): Range low/high und Fee rate als Eingabefelder im Abschnitt „Parameters“, daneben Calculate (primär, Lade-Zustand) und Reset; Kennzeichnung „Simulated“ im Akzent. Katalog Inputs/standard (Feld mit Innenkante, Fokusring, Fehler rot mit Text darunter) und Buttons/loading (Spinner + Text). ---- */ #exploreLiquidityView .el-param-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: var(--el-u) calc(1.5 * var(--el-u)); margin-bottom: calc(1.25 * var(--el-u)); } #exploreLiquidityView .el-param-kopf h3 { margin: 0; } #exploreLiquidityView .el-param-knoepfe { display: flex; align-items: center; gap: var(--el-u); margin-left: auto; } #exploreLiquidityView .el-param-knoepfe .el-knopf, #exploreLiquidityView .el-sim-meldung .el-knopf { height: calc(4.25 * var(--el-u)); padding: 0 calc(2 * var(--el-u)); font-size: max(12px, calc(1.625 * var(--el-u))); } #exploreLiquidityView .el-param-knoepfe .el-knopf:disabled, #exploreLiquidityView .el-param-knoepfe .el-knopf[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; } #exploreLiquidityView .el-param-knoepfe .el-knopf.primaer[aria-disabled="true"]:hover { background: var(--el-primary); } #exploreLiquidityView .el-param-knoepfe .el-knopf:disabled:hover { background: var(--el-fg-05); } #exploreLiquidityView .el-param-knoepfe .el-knopf.laedt, #exploreLiquidityView .el-param-knoepfe .el-knopf.laedt[aria-disabled="true"] { opacity: .85; cursor: progress; } #exploreLiquidityView .el-param-knoepfe .el-spinner { display: none; width: calc(1.75 * var(--el-u)); height: calc(1.75 * var(--el-u)); border-color: color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; } #exploreLiquidityView .el-param-knoepfe .laedt .el-spinner { display: inline-block; } #exploreLiquidityView .el-pille.sim { background: color-mix(in srgb, var(--el-primary) 14%, transparent); color: var(--el-primary); font-weight: 500; } /* Beschriftung mittig zur Feldbox (Box 4 Einheiten, davon 3 im Zeilenfluss) */ #exploreLiquidityView .el-eingabe { display: inline-flex; align-items: center; gap: calc(.5 * var(--el-u)); width: min(100%, calc(15 * var(--el-u))); height: calc(4 * var(--el-u)); margin-block: calc(-.5 * var(--el-u)); padding: 0 calc(1.25 * var(--el-u)); border-radius: calc(.75 * var(--el-u)); background: var(--el-input); box-shadow: var(--el-kante-feld); transition: box-shadow .15s ease; cursor: text; } #exploreLiquidityView .el-eingabe:hover { box-shadow: var(--el-kante-feld), inset 0 0 0 1px var(--el-fg-15); } #exploreLiquidityView .el-eingabe:focus-within { box-shadow: var(--el-kante-feld), inset 0 0 0 1px var(--el-fg-30), 0 0 0 2px color-mix(in srgb, var(--el-ring) 50%, transparent); } #exploreLiquidityView .el-eingabe input { flex: 1 1 auto; min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: var(--el-fg); font: inherit; font-size: max(12px, calc(1.625 * var(--el-u))); font-variant-numeric: tabular-nums; text-align: right; } /* Fokus zeigt der Rahmen (focus-within), das Feld selbst braucht keinen zweiten Ring */ #exploreLiquidityView .el-eingabe input:focus-visible { outline: none; } #exploreLiquidityView .el-eingabe .suffix { flex: none; color: var(--el-fg-50); } #exploreLiquidityView .el-eingabe.fehler { box-shadow: var(--el-kante-feld), inset 0 0 0 1px var(--el-negative-text); } #exploreLiquidityView .el-eingabe.fehler:focus-within { box-shadow: var(--el-kante-feld), inset 0 0 0 1px var(--el-negative-text), 0 0 0 2px color-mix(in srgb, var(--el-negative-text) 45%, transparent); } #exploreLiquidityView .el-feld-fehler { display: block; max-width: 100%; margin-top: calc(.5 * var(--el-u)); color: var(--el-negative-text); font-size: max(12px, calc(1.5 * var(--el-u))); line-height: 1.3; text-align: right; } #exploreLiquidityView .el-feld-fehler[hidden] { display: none; } #exploreLiquidityView .el-sim-hinweis { display: flex; align-items: flex-start; gap: calc(.75 * var(--el-u)); margin: calc(1.5 * var(--el-u)) 0 0; color: var(--el-fg-60); font-size: max(12px, calc(1.5 * var(--el-u))); } #exploreLiquidityView .el-sim-hinweis svg { flex: none; width: calc(1.75 * var(--el-u)); height: calc(1.75 * var(--el-u)); margin-top: calc(.125 * var(--el-u)); color: var(--el-primary); } #exploreLiquidityView .el-sim-meldung { display: flex; align-items: center; flex-wrap: wrap; gap: var(--el-u) calc(1.5 * var(--el-u)); margin-top: calc(1.25 * var(--el-u)); } #exploreLiquidityView .el-sim-meldung:empty { display: none; } #exploreLiquidityView .el-sim-meldung .text { display: inline-flex; align-items: center; gap: calc(.75 * var(--el-u)); color: var(--el-fg-70); font-size: max(12px, calc(1.625 * var(--el-u))); } #exploreLiquidityView .el-sim-meldung .text svg { flex: none; width: calc(2 * var(--el-u)); height: calc(2 * var(--el-u)); } #exploreLiquidityView .el-sim-meldung .text.fehler { color: var(--el-negative-text); } #exploreLiquidityView .el-sim-meldung .text.warten { color: var(--el-warn); } #exploreLiquidityView .el-hinweis.el-apr-leer { display: flex; align-items: center; justify-content: center; gap: var(--el-u); min-height: calc(24 * var(--el-u)); margin: 0; border-radius: calc(.75 * var(--el-u)); background: var(--el-fg-05); box-shadow: var(--el-kante-feld); color: var(--el-fg-50); font-size: max(12px, calc(1.625 * var(--el-u))); text-align: center; padding: 0 calc(2 * var(--el-u)); } #exploreLiquidityView .el-hinweis.el-apr-leer svg { flex: none; width: calc(2 * var(--el-u)); height: calc(2 * var(--el-u)); } @media (max-width: 640px) { #exploreLiquidityView .el-param-knoepfe { margin-left: 0; width: 100%; } #exploreLiquidityView .el-param-knoepfe .el-knopf { flex: 1; } #exploreLiquidityView .el-eingabe { width: min(100%, calc(17 * var(--el-u))); } } /* ---- Calculate/Reset nach der Skeptiker-Prüfung (21.10.2026 spät, Befunde A1–A12) ---- Reihenfolge im DOM: Felder → Calculate → Reset (Tastatur). Seit 22.10.2026 (Nutzer) rechts unten unter der letzten Zeile, sichtbar Reset | Calculate (row-reverse, Calculate ganz rechts); bis 640 px volle Breite, je Knopf halb. */ #exploreLiquidityView .el-param-abschnitt > .el-param-knoepfe { flex-direction: row-reverse; justify-content: flex-start; margin: calc(1.75 * var(--el-u)) 0 0; } /* Editable values as round pills in one row with Reset | Calculate (user 23.10.2026); the fixed values below as a table. */ #exploreLiquidityView .el-param-zeile { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--el-u); margin-bottom: calc(1.75 * var(--el-u)); } #exploreLiquidityView .el-param-feld { display: flex; flex-direction: column; gap: calc(.5 * var(--el-u)); min-width: 0; } #exploreLiquidityView .el-eingabe.el-param-pille { width: auto; height: calc(4.25 * var(--el-u)); margin-block: 0; padding: 0 calc(1.75 * var(--el-u)); border-radius: 999px; gap: var(--el-u); } #exploreLiquidityView .el-param-pille label { flex: none; color: var(--el-fg-50); font-size: max(12px, calc(1.625 * var(--el-u))); white-space: nowrap; cursor: text; } #exploreLiquidityView .el-param-pille input { flex: 0 1 auto; width: calc(9 * var(--el-u)); } #exploreLiquidityView .el-param-feld .el-feld-fehler { padding-left: calc(1.75 * var(--el-u)); } #exploreLiquidityView .el-param-zeile > .el-param-knoepfe { flex-direction: row-reverse; margin-left: auto; } @media (max-width: 640px) { #exploreLiquidityView .el-param-feld { flex: 1 1 100%; } #exploreLiquidityView .el-eingabe.el-param-pille { width: 100%; } #exploreLiquidityView .el-param-pille input { flex: 1 1 auto; } #exploreLiquidityView .el-param-zeile > .el-param-knoepfe { margin-left: 0; width: 100%; } } @media (max-width: 640px) { /* 16 px gegen das automatische Zoomen von iOS beim Fokus – nur in den drei Feldern (A12) */ #exploreLiquidityView .el-eingabe input { font-size: 16px; } } /* Hinweiszeilen unter den Feldern: nachgeführte Range (Info), Preis weit außerhalb (weiche Warnung), „Changed – press Calculate“ */ #exploreLiquidityView .el-sim-hinweis[hidden] { display: none; } #exploreLiquidityView .el-sim-hinweis.warnung { color: var(--el-warn); } #exploreLiquidityView .el-sim-hinweis.warnung svg { color: var(--el-warn); } #exploreLiquidityView .el-sim-hinweis.geaendert { color: var(--el-fg-70); } /* Felder ≠ gezeigte Rechnung (A6): Kennzahlen leicht gedämpft, bis gerechnet oder zurückgesetzt wird */ #exploreLiquidityView .el-dlg-details .el-stats, #exploreLiquidityView .el-dlg-details #elDlgAprChart, #exploreLiquidityView .el-dlg-details #elDlgChart, #exploreLiquidityView .el-dlg-details .el-zerlegung, #exploreLiquidityView .el-dlg-details .el-formel, #exploreLiquidityView .el-dlg-details .el-warum, #exploreLiquidityView .el-dlg-details .el-param dd { transition: opacity .2s ease; } #exploreLiquidityView .el-dlg-details.el-sim-veraltet .el-stats, #exploreLiquidityView .el-dlg-details.el-sim-veraltet #elDlgAprChart, #exploreLiquidityView .el-dlg-details.el-sim-veraltet #elDlgChart, #exploreLiquidityView .el-dlg-details.el-sim-veraltet .el-zerlegung, #exploreLiquidityView .el-dlg-details.el-sim-veraltet .el-formel, #exploreLiquidityView .el-dlg-details.el-sim-veraltet .el-warum, #exploreLiquidityView .el-dlg-details.el-sim-veraltet .el-param dd { opacity: .45; } /* Exchanges während einer eigenen Rechnung (A11) */ #exploreLiquidityView .el-vgl-simhinweis { display: flex; align-items: flex-start; gap: calc(.75 * var(--el-u)); margin: 0 0 calc(2 * var(--el-u)); padding: calc(1.25 * var(--el-u)) calc(1.75 * var(--el-u)); border-radius: calc(.75 * var(--el-u)); background: color-mix(in srgb, var(--el-primary) 10%, transparent); color: var(--el-fg-70); font-size: max(12px, calc(1.625 * var(--el-u))); } #exploreLiquidityView .el-vgl-simhinweis[hidden] { display: none; } #exploreLiquidityView .el-vgl-simhinweis svg { flex: none; width: calc(1.75 * var(--el-u)); height: calc(1.75 * var(--el-u)); margin-top: calc(.125 * var(--el-u)); color: var(--el-primary); } /* ---- Mentoring-APR (Nutzer 21.10.2026, nur Academy): durchgestrichen, kleiner, gedämpft neben der APR, darunter das Label „Mentoring-APR“ als Tipp-Auslöser (Formel-Tipp-Muster, ohne Unterstreichung). ---- */ #exploreLiquidityView .el-stat-zeile { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: var(--el-u); margin-top: calc(.5 * var(--el-u)); min-width: 0; } #exploreLiquidityView .el-stat-zeile > .w { margin-top: 0; } #exploreLiquidityView .el-ment-w { color: var(--el-fg-50); text-decoration: line-through; text-decoration-thickness: 1px; font-size: max(12px, calc(1.625 * var(--el-u))); font-weight: 400; white-space: nowrap; } #exploreLiquidityView .el-ment-l { display: inline-block; margin-top: calc(.25 * var(--el-u)); color: var(--el-fg-40); font-size: 12px; line-height: 1.3; letter-spacing: 0; text-transform: none; cursor: help; border-radius: calc(.5 * var(--el-u)); } #exploreLiquidityView .el-ment-l:hover { color: var(--el-fg-70); } #exploreLiquidityView .el-ment-l:focus-visible { outline: 2px solid var(--el-ring); outline-offset: 2px; color: var(--el-fg-70); } /* Academy (22.10.2026, user): the struck Mentoring APR with its caption on top, the own APR below */ #exploreLiquidityView .el-ment-oben { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: var(--el-u); margin-top: calc(.5 * var(--el-u)); min-width: 0; } #exploreLiquidityView .el-ment-oben .el-ment-l { margin-top: 0; } #exploreLiquidityView .el-ment-oben + .w { margin-top: calc(.25 * var(--el-u)); } #exploreLiquidityView .el-vgl-apr .el-ment { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--el-u); margin-top: calc(.25 * var(--el-u)); } #exploreLiquidityView .el-vgl-apr .el-ment .el-ment-l { margin-top: 0; } /* Asset-Symbol: Ersatzbuchstaben nur ohne geladenes Bild (transparente Logos wie SOL/ETH, Nutzer 21.10.2026) */ #exploreLiquidityView .el-paar .b.bild-da > .t { visibility: hidden; } /* ---- Asset-Vorauswahl (Nutzer 21.10.2026 spät, BACKEND-FELDER § 8) ───────────────────────────────────────── Mittig in der Filterleiste zwischen der linken Gruppe und Kacheln | Liste (beide Seiten margin auto; die rechte Gruppe verliert dann ihr eigenes auto). Admin: orange leuchtende Pille (Token der Kategorie Volatile als Orange, hell wie dunkel abgestimmt) mit Zwei-Spalten-Menü; Team/Admin: Segment All | Curated. Handy: eigene Zeile, Spalten untereinander. Listen scrollen nur in sich (overflow-y), das Menü selbst nicht. */ #exploreLiquidityView .el-auswahl { display: inline-flex; align-items: center; gap: var(--el-u); margin-inline: auto; min-width: 0; } #exploreLiquidityView .el-auswahl[hidden], #exploreLiquidityView .el-ass-dd[hidden], #exploreLiquidityView .el-umfang[hidden] { display: none; } #exploreLiquidityView .el-auswahl:not([hidden]) ~ .el-filter-rechts { margin-left: 0; } #exploreLiquidityView .el-ass-dd { --a: var(--el-volatil); position: relative; } /* Always-visible notice on the pill's top edge: only admins see this pill (user 25.10.2026) */ #exploreLiquidityView .el-ass-admin { position: absolute; top: 0; left: calc(2 * var(--el-u)); transform: translateY(-55%); z-index: 1; padding: 0 calc(.5 * var(--el-u)); border-radius: var(--el-u); background: var(--el-bg); color: var(--a); font-size: 10px; font-weight: 600; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; pointer-events: none; } #exploreLiquidityView .el-ass-dd .el-ass-knopf { color: var(--el-fg); background: color-mix(in srgb, var(--a) 9%, var(--el-input)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a) 75%, transparent), 0 0 calc(2.5 * var(--el-u)) 0 color-mix(in srgb, var(--a) 42%, transparent); transition: background .15s ease, box-shadow .15s ease; } #exploreLiquidityView .el-ass-dd .el-ass-knopf:hover, #exploreLiquidityView .el-ass-dd.offen .el-ass-knopf { background: color-mix(in srgb, var(--a) 16%, var(--el-input)); box-shadow: inset 0 0 0 1px var(--a), 0 0 calc(3 * var(--el-u)) 0 color-mix(in srgb, var(--a) 60%, transparent); } #exploreLiquidityView .el-ass-dd.gesetzt:not(.offen) .el-ass-knopf:not(:hover) { box-shadow: inset 0 0 0 1px var(--a), 0 0 calc(2.5 * var(--el-u)) 0 color-mix(in srgb, var(--a) 50%, transparent); } #exploreLiquidityView .el-ass-knopf .lbl, #exploreLiquidityView .el-ass-knopf .el-ass-icon { color: var(--a); font-weight: 600; } #exploreLiquidityView .el-ass-knopf .el-ass-icon { width: calc(1.625 * var(--el-u)); height: calc(1.625 * var(--el-u)); flex: none; } #exploreLiquidityView .el-ass-knopf .trenn { color: color-mix(in srgb, var(--a) 60%, transparent); } #exploreLiquidityView .el-ass-knopf .pfeil { color: var(--a); } /* Role preview "View as" (22.10.2026): always glowing, only team sees it */ #exploreLiquidityView .el-vorschau-leiste:not([hidden]) { display: flex; justify-content: flex-end; margin: 0 0 calc(1.5 * var(--el-u)); } #exploreLiquidityView .el-rolle-dd .el-rolle-knopf { --a: var(--el-primary); color: var(--el-fg); background: color-mix(in srgb, var(--a) 10%, var(--el-input)); box-shadow: inset 0 0 0 1px var(--a), 0 0 calc(2.5 * var(--el-u)) 0 color-mix(in srgb, var(--a) 45%, transparent); } #exploreLiquidityView .el-rolle-dd .el-rolle-knopf:hover, #exploreLiquidityView .el-rolle-dd.offen .el-rolle-knopf { background: color-mix(in srgb, var(--a) 18%, var(--el-input)); } #exploreLiquidityView .el-rolle-dd.gesetzt .el-rolle-knopf { box-shadow: inset 0 0 0 1.5px var(--a), 0 0 calc(3.5 * var(--el-u)) 0 color-mix(in srgb, var(--a) 65%, transparent); } #exploreLiquidityView .el-rolle-knopf .lbl, #exploreLiquidityView .el-rolle-knopf .el-rolle-icon, #exploreLiquidityView .el-rolle-knopf .pfeil { color: var(--a); } #exploreLiquidityView .el-rolle-knopf .lbl { font-weight: 600; } #exploreLiquidityView .el-rolle-knopf .el-rolle-icon { width: calc(1.625 * var(--el-u)); height: calc(1.625 * var(--el-u)); flex: none; } #exploreLiquidityView .el-ass-punkt { display: inline-block; width: var(--el-u); height: var(--el-u); border-radius: 50%; background: var(--el-volatil); flex: none; box-shadow: 0 0 0 calc(.35 * var(--el-u)) color-mix(in srgb, var(--el-volatil) 25%, transparent); } #exploreLiquidityView .el-ass-punkt[hidden] { display: none; } #exploreLiquidityView .el-umfang button[aria-disabled="true"] { opacity: .4; cursor: not-allowed; } #exploreLiquidityView .el-umfang button[aria-disabled="true"]:hover { color: var(--el-fg-50); } /* Umschalten: alter Stand bleibt abgedimmt stehen, bis der neue da ist */ #exploreLiquidityView .el-seite[aria-busy="true"] :is(#elKpis, #elHighlights, #elKategorien) { opacity: .45; pointer-events: none; transition: opacity .2s ease; } #exploreLiquidityView .el-seite[aria-busy="true"] .el-umfang { cursor: progress; } #exploreLiquidityView .el-seite[aria-busy="true"] .el-umfang button[aria-checked="true"] { animation: el-umfang-puls 1s ease-in-out infinite alternate; } @keyframes el-umfang-puls { to { opacity: .55; } } #exploreLiquidityView .el-rm .el-umfang button { animation: none; } /* Menü: zwei Spalten im Katalogstil (Dropdown/searchable), unten Fuß mit Status, Cancel und Save */ #exploreLiquidityView .el-ass-menue { width: min(calc(96 * var(--el-u)), calc(100vw - 32px)); min-width: 0; padding: 0; display: flex; flex-direction: column; overflow: hidden; } #exploreLiquidityView .el-ass-spalten { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); min-height: 0; } #exploreLiquidityView .el-ass-links, #exploreLiquidityView .el-ass-rechts { display: flex; flex-direction: column; gap: var(--el-u); padding: calc(1.5 * var(--el-u)); min-width: 0; } #exploreLiquidityView .el-ass-links { border-right: 1px solid var(--el-border-quiet); } #exploreLiquidityView .el-ass-rechts { background: var(--el-fg-05); } #exploreLiquidityView .el-ass-menue .el-ass-suche { flex: none; width: 100%; } #exploreLiquidityView .el-ass-menue .el-ass-suche input { flex: 1; min-width: 0; width: 100%; outline: none; } /* Fokus am Feld statt am nackten input (sonst eckiger Rahmen in der runden Pille) */ #exploreLiquidityView .el-ass-menue .el-ass-suche:focus-within { box-shadow: var(--el-kante-feld), 0 0 0 2px color-mix(in srgb, var(--el-ring) 50%, transparent); } #exploreLiquidityView .el-ass-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--el-u); min-height: calc(3 * var(--el-u)); padding: 0 calc(.5 * var(--el-u)); color: var(--el-fg-50); font-size: max(12px, calc(1.5 * var(--el-u))); } #exploreLiquidityView .el-ass-kopf h3 { margin: 0; font-size: max(12px, calc(1.625 * var(--el-u))); font-weight: 600; color: var(--el-fg); } #exploreLiquidityView .el-ass-link { border: 0; background: transparent; color: var(--el-primary); padding: calc(.25 * var(--el-u)) calc(.75 * var(--el-u)); border-radius: calc(.75 * var(--el-u)); font-size: max(12px, calc(1.5 * var(--el-u))); font-weight: 500; white-space: nowrap; } #exploreLiquidityView .el-ass-link:hover { background: var(--el-fg-06); } #exploreLiquidityView .el-ass-link:disabled { color: var(--el-fg-30); cursor: default; background: transparent; } #exploreLiquidityView .el-ass-liste, #exploreLiquidityView .el-ass-gewaehlt { height: min(calc(46 * var(--el-u)), 50vh); overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 0; list-style: none; border-radius: var(--el-u); } #exploreLiquidityView .el-ass-liste:focus-visible { outline-offset: -2px; } #exploreLiquidityView .el-ass-opt { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; gap: calc(1.25 * var(--el-u)); padding: var(--el-u) calc(1.25 * var(--el-u)); border-radius: var(--el-u); cursor: pointer; font-size: max(13px, calc(1.75 * var(--el-u))); transition: background .12s ease; } #exploreLiquidityView .el-ass-opt.aktiv { background: var(--el-fg-06); } #exploreLiquidityView .el-ass-opt.el-skelett { cursor: default; grid-template-columns: auto auto minmax(0, 1fr); } #exploreLiquidityView .el-ass-opt .kasten { width: calc(2.25 * var(--el-u)); height: calc(2.25 * var(--el-u)); border-radius: calc(.5 * var(--el-u)); display: inline-grid; place-items: center; flex: none; box-shadow: inset 0 0 0 1.5px var(--el-fg-30); color: transparent; transition: background .12s ease, box-shadow .12s ease; } #exploreLiquidityView .el-ass-opt .kasten svg { width: calc(1.75 * var(--el-u)); height: calc(1.75 * var(--el-u)); } #exploreLiquidityView .el-ass-opt[aria-selected="true"] .kasten { background: var(--el-volatil); box-shadow: none; color: var(--el-primary-fg); } #exploreLiquidityView .el-ass-opt .bas { display: flex; align-items: baseline; gap: var(--el-u); min-width: 0; } #exploreLiquidityView .el-ass-opt .sym { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #exploreLiquidityView .el-ass-opt .nm { color: var(--el-fg-45); font-size: max(12px, calc(1.5 * var(--el-u))); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #exploreLiquidityView .el-ass-menue mark { background: transparent; color: var(--el-primary); font-weight: 700; } #exploreLiquidityView .el-ass-opt .kats { display: inline-flex; gap: calc(.5 * var(--el-u)); } #exploreLiquidityView .el-ass-kat { display: inline-flex; align-items: center; gap: calc(.4 * var(--el-u)); padding: calc(.25 * var(--el-u)) calc(.75 * var(--el-u)); border-radius: 999px; background: color-mix(in srgb, var(--a) 12%, transparent); color: var(--a); font-size: 12px; line-height: 1.25; white-space: nowrap; } #exploreLiquidityView .el-ass-kat svg { width: calc(1.375 * var(--el-u)); height: calc(1.375 * var(--el-u)); } #exploreLiquidityView .el-ass-opt .n { color: var(--el-fg-45); font-size: max(12px, calc(1.5 * var(--el-u))); text-align: right; white-space: nowrap; min-width: calc(4 * var(--el-u)); } #exploreLiquidityView .el-ass-gew { display: flex; align-items: center; gap: var(--el-u); padding: calc(.5 * var(--el-u)) calc(.5 * var(--el-u)) calc(.5 * var(--el-u)) var(--el-u); border-radius: var(--el-u); font-size: max(13px, calc(1.75 * var(--el-u))); } #exploreLiquidityView .el-ass-gew:hover { background: var(--el-fg-05); } #exploreLiquidityView .el-ass-gew .bas { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #exploreLiquidityView .el-ass-gew.fehlt .bas, #exploreLiquidityView .el-ass-fehlt { color: var(--el-warn); } #exploreLiquidityView .el-ass-fehlt { font-size: 12px; white-space: nowrap; } #exploreLiquidityView .el-ass-weg { border: 0; background: transparent; color: var(--el-fg-50); width: calc(3.5 * var(--el-u)); height: calc(3.5 * var(--el-u)); border-radius: 50%; display: inline-grid; place-items: center; flex: none; padding: 0; } #exploreLiquidityView .el-ass-weg:hover { background: var(--el-fg-10); color: var(--el-fg); } #exploreLiquidityView .el-ass-weg svg { width: calc(1.5 * var(--el-u)); height: calc(1.5 * var(--el-u)); } #exploreLiquidityView .el-ass-leer { display: flex; flex-direction: column; align-items: center; gap: var(--el-u); padding: calc(4 * var(--el-u)) calc(1.5 * var(--el-u)); color: var(--el-fg-50); text-align: center; font-size: max(12px, calc(1.625 * var(--el-u))); } #exploreLiquidityView .el-ass-leer.fehler { color: var(--el-negative-text); } #exploreLiquidityView .el-ass-hinweis { display: flex; align-items: center; gap: var(--el-u); margin: 0; padding: var(--el-u) calc(1.5 * var(--el-u)); border-bottom: 1px solid var(--el-border-quiet); color: var(--el-fg-50); font-size: max(12px, calc(1.5 * var(--el-u))); line-height: 1.4; } #exploreLiquidityView .el-ass-hinweis svg { flex: none; width: calc(1.75 * var(--el-u)); height: calc(1.75 * var(--el-u)); } #exploreLiquidityView .el-ass-fuss { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: calc(1.5 * var(--el-u)); padding: calc(1.25 * var(--el-u)) calc(1.5 * var(--el-u)); border-top: 1px solid var(--el-border-quiet); } #exploreLiquidityView .el-ass-status { display: inline-flex; align-items: center; gap: calc(.75 * var(--el-u)); min-width: 0; color: var(--el-fg-50); font-size: max(12px, calc(1.5 * var(--el-u))); } #exploreLiquidityView .el-ass-status.warn { color: var(--el-volatil); font-weight: 500; } #exploreLiquidityView .el-ass-status.fehler { color: var(--el-negative-text); } #exploreLiquidityView .el-ass-knoepfe { display: flex; gap: var(--el-u); margin-left: auto; } #exploreLiquidityView .el-ass-fuss .el-knopf.primaer { height: calc(4.5 * var(--el-u)); padding: 0 calc(2.5 * var(--el-u)); color: var(--el-primary-fg); font-weight: 600; } #exploreLiquidityView .el-ass-fuss .el-knopf.primaer:disabled:hover { background: var(--el-primary); } #exploreLiquidityView .el-ass-fuss .el-knopf.gefahr { color: var(--el-negative-text); font-weight: 500; } #exploreLiquidityView .el-ass-fuss .el-spinner { border-color: color-mix(in srgb, var(--el-primary-fg) 25%, transparent); border-top-color: var(--el-primary-fg); width: calc(1.75 * var(--el-u)); height: calc(1.75 * var(--el-u)); } @media (max-width: 640px) { #exploreLiquidityView .el-auswahl { flex: 1 1 100%; margin-inline: 0; } #exploreLiquidityView .el-auswahl .el-ass-dd { flex: 1 1 auto; } #exploreLiquidityView .el-auswahl .el-umfang { flex: none; } #exploreLiquidityView .el-ass-spalten { grid-template-columns: minmax(0, 1fr); } #exploreLiquidityView .el-ass-links { border-right: 0; border-bottom: 1px solid var(--el-border-quiet); } #exploreLiquidityView .el-ass-liste { height: min(calc(34 * var(--el-u)), 30vh); } #exploreLiquidityView .el-ass-gewaehlt { height: auto; min-height: calc(6 * var(--el-u)); max-height: 16vh; } #exploreLiquidityView .el-ass-opt .n .w, #exploreLiquidityView .el-ass-kat .nm { display: none; } #exploreLiquidityView .el-ass-kat { padding: calc(.4 * var(--el-u)); } } /* ---- „Copy to PerpPilot“ im Dialog-Fuß (Nutzer 22.10.2026): noch ohne Funktion – sekundär, ausgegraut, nicht fokussierbar (disabled), Kennzeichen „Coming soon“ als kleine Pille auf der oberen Kante des Knopfs (so bleibt der Knopf schmal und der Fuß passt bei 1440 px in eine Zeile). Links neben dem primären „Open in V3 Simulator“, damit die Hauptaktion außen rechts bleibt wie bei Reset | Calculate. Beide in einer Gruppe rechts: wird der Fuß zu schmal, bricht die Gruppe als Ganzes unter „Share link“ um und bleibt rechtsbündig. Tooltip an der Hülle (disabled bekommt keine Mausereignisse). ---- */ /* Der Fuß klebt unten (sticky) und steht im DOM vor der rechten Spalte: ohne z-index malten gedämpfte Elemente (opacity = eigener Stapelkontext, z. B. „Calculate“ aus) beim Scrollen über ihn. */ #exploreLiquidityView .el-dlg-links .el-dlg-fuss { z-index: 2; } #exploreLiquidityView .el-dlg-fuss-rechts { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--el-u); margin-left: auto; } #exploreLiquidityView .el-dlg-links .el-dlg-fuss .el-dlg-fuss-rechts .el-knopf.primaer { margin-left: 0; } #exploreLiquidityView .el-bald-huelle { display: inline-flex; cursor: not-allowed; } #exploreLiquidityView .el-knopf.bald, #exploreLiquidityView .el-knopf.bald:disabled { position: relative; opacity: 1; background: var(--el-fg-05); color: var(--el-fg-40); cursor: not-allowed; pointer-events: none; transform: none; } #exploreLiquidityView .el-knopf.bald:disabled:hover { background: var(--el-fg-05); } #exploreLiquidityView .el-pille.bald { position: absolute; top: calc(-1.25 * var(--el-u)); right: calc(1.25 * var(--el-u)); padding: calc(.375 * var(--el-u)) calc(.75 * var(--el-u)); font-size: 12px; font-weight: 500; background: var(--el-dialog); box-shadow: inset 0 0 0 1px var(--el-fg-15); color: var(--el-fg-60); } /* Equal buttons in the dialog footer (user 23.10.2026), sized by the left column: three in a row when they fit with their full labels, otherwise Share link | Copy to PerpPilot equal and the simulator below in full width. Hidden buttons (live position) leave no gap. */ #exploreLiquidityView .el-dlg-links { container: eldlglinks / inline-size; } #exploreLiquidityView .el-dlg-links .el-dlg-fuss { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } #exploreLiquidityView .el-dlg-links .el-dlg-fuss .el-dlg-fuss-rechts { display: contents; } #exploreLiquidityView .el-dlg-links .el-dlg-fuss .el-knopf, #exploreLiquidityView .el-dlg-links .el-dlg-fuss .el-bald-huelle { width: 100%; min-width: 0; height: calc(5 * var(--el-u)); margin: 0; justify-content: center; white-space: nowrap; } #exploreLiquidityView .el-dlg-links .el-dlg-fuss .el-knopf { padding-inline: calc(1.5 * var(--el-u)); } #exploreLiquidityView .el-dlg-links .el-dlg-fuss .el-bald-huelle .el-knopf { flex: 1; } #exploreLiquidityView .el-dlg-links .el-dlg-fuss #elDlgSim { grid-column: 1 / -1; } /* Three in a row from 470 px (the simulator label needs ~151 px at 12 px), 13 px from 540 px. */ @container eldlglinks (min-width: 470px) { #exploreLiquidityView .el-dlg-links .el-dlg-fuss { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; } #exploreLiquidityView .el-dlg-links .el-dlg-fuss .el-knopf { font-size: 12px; padding-inline: 6px; } #exploreLiquidityView .el-dlg-links .el-dlg-fuss #elDlgSim { grid-column: auto; } } @container eldlglinks (min-width: 540px) { #exploreLiquidityView .el-dlg-links .el-dlg-fuss { gap: var(--el-u); } #exploreLiquidityView .el-dlg-links .el-dlg-fuss .el-knopf { font-size: 13px; padding-inline: var(--el-u); } } @media (max-width: 640px) { /* Share link | Copy to PerpPilot in einer Zeile, darunter „Open in V3 Simulator“ in voller Breite */ #exploreLiquidityView .el-dlg-fuss-rechts { display: contents; } #exploreLiquidityView .el-dlg-fuss #elDlgLink, #exploreLiquidityView .el-bald-huelle { flex: 1 1 calc(50% - .75 * var(--el-u)); min-width: 0; } #exploreLiquidityView .el-dlg-fuss .el-bald-huelle .el-knopf { flex: 1; min-width: 0; padding-inline: calc(1.5 * var(--el-u)); white-space: nowrap; } #exploreLiquidityView .el-dlg-links .el-dlg-fuss .el-knopf.primaer { flex-basis: 100%; } } /* Pills under a highlight tile */ #exploreLiquidityView .el-hl-pillen { display: flex; flex-wrap: wrap; align-items: center; gap: calc(.75 * var(--el-u)); margin-top: calc(2 * var(--el-u)); } #exploreLiquidityView .el-dlg-kopf .el-ersatz { color: var(--el-fg-70); } /* Vergleich: Zeile ohne 30-Tage-Lauf (modell 'kachel') – kleines ⓘ neben den Marken */ #exploreLiquidityView .el-vgl-modell > button { color: var(--el-fg-40); } #exploreLiquidityView .el-vgl-modell .el-tip-box { left: auto; right: 0; transform: translateX(var(--tip-dx, 0px)); max-width: min(calc(36 * var(--el-u)), calc(100vw - 32px)); } /* ---- Range-Pillen Degen | Steady | Wide (Nutzer 22.10.2026) ---- Im Kopf von „Parameters“ rechts über den Range-Feldern; aktiv = die Felder zeigen genau den Vorschlag der Pille. Unter Mentoring sichtbar, aber gesperrt: Knöpfe disabled (kein Fokus, keine Mausereignisse), Tooltip an der Hülle wie bei „Copy to PerpPilot“, dazu eine kleine Unterzeile. Bis 640 px volle Breite, je Pille ein Drittel. */ #exploreLiquidityView .el-range-wahl { display: flex; flex-direction: column; align-items: flex-end; gap: calc(.5 * var(--el-u)); margin-left: auto; min-width: 0; } #exploreLiquidityView .el-range-pillen button { font-weight: 500; } #exploreLiquidityView .el-range-pillen button[aria-pressed="true"] { background: var(--el-fg-10); color: var(--el-fg); box-shadow: inset 0 0 0 1px var(--el-fg-15); } #exploreLiquidityView .el-range-wahl.gesperrt { cursor: not-allowed; } #exploreLiquidityView .el-range-wahl.gesperrt .el-range-pillen { opacity: .8; } #exploreLiquidityView .el-range-pillen button:disabled { color: var(--el-fg-40); cursor: not-allowed; pointer-events: none; } #exploreLiquidityView .el-range-wahl-hinweis { color: var(--el-fg-50); font-size: max(12px, calc(1.375 * var(--el-u))); text-align: right; } @media (max-width: 640px) { #exploreLiquidityView .el-range-wahl { margin-left: 0; width: 100%; align-items: stretch; } #exploreLiquidityView .el-range-pillen { display: flex; } #exploreLiquidityView .el-range-pillen button { flex: 1 1 0; min-width: 0; padding-inline: var(--el-u); } #exploreLiquidityView .el-range-wahl-hinweis { text-align: left; } } /* ---- Live positions in the band and in the admin menu (user 22.10.2026, BACKEND-FELDER § 11) ---- Own accent --el-live (teal, distinct from Steady green). A live tile keeps the highlight frame; instead of the sparkline two figures (Collected fees, Volume). Pill „Live“ with a slowly pulsing dot (static with reduced motion). ---- */ #exploreLiquidityView .el-live-punkt { display: inline-block; width: calc(.875 * var(--el-u)); height: calc(.875 * var(--el-u)); border-radius: 50%; background: var(--el-live); flex: none; box-shadow: 0 0 0 calc(.3 * var(--el-u)) color-mix(in srgb, var(--el-live) 25%, transparent); animation: el-live-puls 2.4s ease-in-out infinite; } @keyframes el-live-puls { 0%, 100% { box-shadow: 0 0 0 calc(.3 * var(--el-u)) color-mix(in srgb, var(--el-live) 25%, transparent); } 50% { box-shadow: 0 0 0 calc(.6 * var(--el-u)) color-mix(in srgb, var(--el-live) 8%, transparent); } } #exploreLiquidityView .el-rm .el-live-punkt { animation: none; } @media (prefers-reduced-motion: reduce) { #exploreLiquidityView .el-live-punkt { animation: none; } } #exploreLiquidityView .el-pille.el-live-pille { background: color-mix(in srgb, var(--el-live) 14%, transparent); color: var(--el-live); font-weight: 600; } #exploreLiquidityView .el-hl.el-live .el-meta .kat .el-live-punkt { width: calc(.75 * var(--el-u)); height: calc(.75 * var(--el-u)); } #exploreLiquidityView .el-hl.el-live .el-hl-pillen { margin-top: calc(1.25 * var(--el-u)); } #exploreLiquidityView .el-live-werte { display: grid; grid-template-columns: 1fr 1fr; gap: var(--el-u); } #exploreLiquidityView .el-live-werte > span { display: block; min-width: 0; padding: calc(1.25 * var(--el-u)) calc(1.5 * var(--el-u)); border-radius: var(--el-u); background: var(--el-fg-05); } #exploreLiquidityView .el-live-werte .l { display: block; font-size: max(12px, calc(1.5 * var(--el-u))); color: var(--el-fg-45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #exploreLiquidityView .el-live-werte .w { display: block; margin-top: calc(.25 * var(--el-u)); font-size: calc(2.125 * var(--el-u)); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #exploreLiquidityView .el-rangeleiste.leer { background: var(--el-fg-05); } @media (max-width: 1024px) { #exploreLiquidityView .el-live-werte > span { padding: var(--el-u) calc(1.25 * var(--el-u)); } #exploreLiquidityView .el-live-werte .w { font-size: max(12px, calc(1.875 * var(--el-u))); } } /* Phone: the tile keeps the band height – the fee rate moves to the dialog, so Live and the range status fit one line */ @media (max-width: 640px) { #exploreLiquidityView .el-hl.el-live .el-live-fee { display: none; } #exploreLiquidityView .el-hl.el-live .el-hl-pillen { margin-top: var(--el-u); } } /* Dialog of a live position: key figures left, price & range right, footer and the setup tabs hidden */ #exploreLiquidityView .el-dlg-fuss[hidden] { display: none; } #exploreLiquidityView .el-live-stats { grid-template-columns: repeat(3, 1fr); } #exploreLiquidityView .el-live-formel { margin: calc(1.25 * var(--el-u)) 0 0; color: var(--el-fg-50); font-size: max(12px, calc(1.5 * var(--el-u))); } #exploreLiquidityView .el-live-range { padding: calc(2 * var(--el-u)); border-radius: var(--el-u); background: var(--el-karte-oben); box-shadow: var(--el-kante); } #exploreLiquidityView .el-live-range .el-rangeleiste { height: var(--el-u); margin-top: calc(.5 * var(--el-u)); } #exploreLiquidityView .el-live-werte-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--el-u); margin: calc(1.25 * var(--el-u)) 0 0; } #exploreLiquidityView .el-live-zeile { min-width: 0; padding: calc(1.25 * var(--el-u)) calc(1.5 * var(--el-u)); border-radius: var(--el-u); background: var(--el-fg-05); } #exploreLiquidityView .el-live-zeile dt { color: var(--el-fg-45); font-size: max(12px, calc(1.5 * var(--el-u))); text-transform: uppercase; letter-spacing: .04em; } #exploreLiquidityView .el-live-zeile dd { margin: calc(.25 * var(--el-u)) 0 0; font-size: calc(2.125 * var(--el-u)); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #exploreLiquidityView .el-live-zeile.aussen dd { color: var(--el-ausserhalb); } #exploreLiquidityView .el-live-zeile.drin dd { color: var(--el-positive); } #exploreLiquidityView .el-live-hinweis { display: flex; align-items: flex-start; gap: var(--el-u); margin: calc(1.5 * var(--el-u)) 0 0; padding: calc(1.25 * var(--el-u)) calc(1.5 * var(--el-u)); border-radius: var(--el-u); background: var(--el-hint-bg); box-shadow: var(--el-kante); color: var(--el-fg-60); font-size: max(12px, calc(1.625 * var(--el-u))); } #exploreLiquidityView .el-live-hinweis svg { flex: none; margin-top: calc(.25 * var(--el-u)); color: var(--el-live); } /* Live bot dialog (22.10.2026 evening): note while the bot tile is calculated; live block above the backtest figures */ #exploreLiquidityView .el-live-laedt { display: flex; align-items: center; gap: var(--el-u); margin: 0 0 calc(1.5 * var(--el-u)); color: var(--el-fg-60); font-size: max(12px, calc(1.625 * var(--el-u))); } #exploreLiquidityView .el-live-laedt svg { flex: none; color: var(--el-live); } #exploreLiquidityView .el-live-block { margin-bottom: calc(3 * var(--el-u)); } #exploreLiquidityView .el-live-block h3 { color: var(--el-live); } @media (max-width: 1024px) { #exploreLiquidityView .el-dlg-live .el-dlg-rechts { padding-top: calc(2.5 * var(--el-u)); } } @media (max-width: 640px) { #exploreLiquidityView .el-live-stats { grid-template-columns: repeat(2, 1fr); } } /* Tab „Weekly“: the table in the Livecall design – date left, numbers right with tabular figures, the row „current“ highlighted, Diff green/red. Up to 640 px every row becomes a small card (label left, value right): no sideways scroll. */ #exploreLiquidityView .el-woche-titelzeile { display: flex; align-items: center; justify-content: space-between; gap: var(--el-u); margin-bottom: var(--el-u); } #exploreLiquidityView .el-woche-titelzeile h3 { display: inline-flex; align-items: center; gap: calc(.5 * var(--el-u)); margin: 0; font-size: max(12px, calc(1.5 * var(--el-u))); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--el-fg-70); } #exploreLiquidityView .el-woche-takt { color: var(--el-fg-45); font-size: max(12px, calc(1.5 * var(--el-u))); } #exploreLiquidityView .el-woche .el-live-hinweis { margin: 0 0 calc(1.5 * var(--el-u)); } #exploreLiquidityView .el-woche-tabelle { border-radius: var(--el-u); box-shadow: var(--el-kante); background: var(--el-karte-oben); padding: calc(.5 * var(--el-u)) calc(1.25 * var(--el-u)); font-size: max(12px, calc(1.625 * var(--el-u))); } #exploreLiquidityView .el-woche-zeile { display: grid; grid-template-columns: minmax(calc(17 * var(--el-u)), 1.25fr) repeat(5, minmax(0, 1fr)) minmax(0, 1.3fr); gap: calc(1.5 * var(--el-u)); align-items: baseline; padding: calc(1.125 * var(--el-u)) calc(.75 * var(--el-u)); border-top: 1px solid var(--el-border-quiet); } #exploreLiquidityView .el-woche-zeile.kopf { border-top: 0; align-items: end; color: var(--el-fg-50); font-size: max(12px, calc(1.375 * var(--el-u))); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; line-height: 1.3; } #exploreLiquidityView .el-woche-zeile .z { min-width: 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #exploreLiquidityView .el-woche-zeile.kopf .z { white-space: normal; } #exploreLiquidityView .el-woche-zeile .z.datum, #exploreLiquidityView .el-woche-zeile .z:first-child, #exploreLiquidityView .el-woche-zeile .z.text, #exploreLiquidityView .el-woche-zeile.kopf .z:last-child { text-align: left; } #exploreLiquidityView .el-woche-zeile .z.datum { font-weight: 500; color: var(--el-fg); } #exploreLiquidityView .el-woche-zeile .z.text { white-space: normal; overflow-wrap: anywhere; color: var(--el-fg-70); } #exploreLiquidityView .el-woche-zeile .z.pos { color: var(--el-positive); } #exploreLiquidityView .el-woche-zeile .z.neg { color: var(--el-negative-text); } #exploreLiquidityView .el-woche-zeile.aktuell { background: color-mix(in srgb, var(--el-live) 9%, transparent); border-radius: calc(.75 * var(--el-u)); border-top-color: transparent; } #exploreLiquidityView .el-woche-zeile.aktuell .z.datum { color: var(--el-live); font-weight: 600; } @media (max-width: 640px) { #exploreLiquidityView .el-woche-tabelle { padding: calc(.5 * var(--el-u)); background: transparent; box-shadow: none; } #exploreLiquidityView .el-woche-zeile.kopf { display: none; } #exploreLiquidityView .el-woche-zeile { grid-template-columns: minmax(0, 1fr) auto; gap: calc(.5 * var(--el-u)) var(--el-u); padding: calc(1.25 * var(--el-u)); margin-bottom: var(--el-u); border: 0; border-radius: var(--el-u); background: var(--el-karte-oben); box-shadow: var(--el-kante); } #exploreLiquidityView .el-woche-zeile .z.datum { grid-column: 1 / -1; margin-bottom: calc(.25 * var(--el-u)); } #exploreLiquidityView .el-woche-zeile .z[data-l] { display: contents; } #exploreLiquidityView .el-woche-zeile .z[data-l]::before { content: attr(data-l); color: var(--el-fg-50); text-align: left; white-space: normal; } #exploreLiquidityView .el-woche-zeile .z.leer { display: none; } #exploreLiquidityView .el-woche-zeile .z.text { grid-column: 1 / -1; } } /* Admin menu: third column „Bots“ (only admin, only when the snapshot carries the field). Menu wider on desktop; up to 1024 px the column moves under the two others, up to 640 px everything is stacked. */ #exploreLiquidityView .el-ass-menue.mit-live { width: min(calc(136 * var(--el-u)), calc(100vw - 32px)); } #exploreLiquidityView .el-ass-spalten.mit-live { grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr) minmax(0, 1.15fr); } #exploreLiquidityView .el-ass-live[hidden] { display: none; } #exploreLiquidityView .el-ass-live { display: flex; flex-direction: column; gap: var(--el-u); padding: calc(1.5 * var(--el-u)); min-width: 0; border-left: 1px solid var(--el-border-quiet); background: color-mix(in srgb, var(--el-live) 4%, var(--el-fg-05)); } #exploreLiquidityView .el-live-sofort { color: var(--el-fg-45); font-size: 12px; white-space: nowrap; } #exploreLiquidityView .el-live-form { display: flex; gap: var(--el-u); margin: 0; } #exploreLiquidityView .el-live-feld { flex: 1; min-width: 0; } #exploreLiquidityView .el-live-feld input { flex: 1; min-width: 0; width: 100%; outline: none; font-family: "Geist Mono", ui-monospace, monospace; font-size: max(12px, calc(1.5 * var(--el-u))); } #exploreLiquidityView .el-live-feld:focus-within { box-shadow: var(--el-kante-feld), 0 0 0 2px color-mix(in srgb, var(--el-ring) 50%, transparent); } #exploreLiquidityView .el-live-plus { flex: none; width: calc(4.5 * var(--el-u)); height: calc(4.5 * var(--el-u)); border: 0; border-radius: 50%; display: inline-grid; place-items: center; background: var(--el-live); color: var(--el-primary-fg); padding: 0; transition: transform .12s ease, opacity .12s ease; } html[data-theme="light"] #exploreLiquidityView .el-live-plus { color: #ffffff; } #exploreLiquidityView .el-live-plus svg { width: calc(2 * var(--el-u)); height: calc(2 * var(--el-u)); } #exploreLiquidityView .el-live-plus:hover:not(:disabled) { transform: scale(1.06); } #exploreLiquidityView .el-live-plus:disabled { opacity: .45; cursor: default; } #exploreLiquidityView .el-live-plus .el-spinner { width: calc(1.75 * var(--el-u)); height: calc(1.75 * var(--el-u)); border-color: color-mix(in srgb, var(--el-primary-fg) 25%, transparent); border-top-color: var(--el-primary-fg); } #exploreLiquidityView .el-live-status { margin: 0; min-height: calc(2 * var(--el-u)); color: var(--el-fg-50); font-size: max(12px, calc(1.5 * var(--el-u))); line-height: 1.35; } #exploreLiquidityView .el-live-status:empty { min-height: 0; } #exploreLiquidityView .el-live-status.fehler { color: var(--el-negative-text); } #exploreLiquidityView .el-live-status.warn { color: var(--el-warn); } #exploreLiquidityView .el-live-status.ok { color: var(--el-positive); } #exploreLiquidityView .el-live-eintrag .bas { display: flex; align-items: baseline; gap: var(--el-u); } #exploreLiquidityView .el-live-eintrag .sym { font-weight: 600; } #exploreLiquidityView .el-live-eintrag .id { color: var(--el-fg-50); font-weight: 400; font-size: max(12px, calc(1.5 * var(--el-u))); overflow: hidden; text-overflow: ellipsis; } #exploreLiquidityView .el-live-ohne { width: calc(3 * var(--el-u)); height: calc(3 * var(--el-u)); border-radius: 50%; flex: none; background: color-mix(in srgb, var(--el-live) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--el-live) 40%, transparent); } #exploreLiquidityView .el-ass-gew.el-skelett { gap: var(--el-u); } @media (max-width: 1024px) { #exploreLiquidityView .el-ass-menue.mit-live { width: min(calc(96 * var(--el-u)), calc(100vw - 32px)); } #exploreLiquidityView .el-ass-spalten.mit-live { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } #exploreLiquidityView .el-ass-spalten.mit-live .el-ass-live { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--el-border-quiet); } #exploreLiquidityView .el-ass-spalten.mit-live .el-live-liste { height: auto; min-height: calc(6 * var(--el-u)); max-height: 22vh; } } @media (max-width: 640px) { #exploreLiquidityView .el-ass-spalten.mit-live { grid-template-columns: minmax(0, 1fr); } #exploreLiquidityView .el-ass-spalten.mit-live .el-live-liste { max-height: 16vh; } } /* Addendum § 11 (22.10.2026): in the dialog of a live position the footer keeps only „Open in V3 Simulator“ (when the tile carries a simulator prefill); in the admin column a quiet pill marks positions that no longer run. */ #exploreLiquidityView .el-dlg-fuss [hidden] { display: none; } #exploreLiquidityView .el-pille.el-live-gestoppt { flex: none; background: transparent; box-shadow: inset 0 0 0 1px var(--el-fg-15); color: var(--el-fg-50); font-size: 12px; cursor: help; } #exploreLiquidityView .el-live-eintrag:has(.el-live-gestoppt) .bas { opacity: .7; } /* Dialog key figures centred in their cards (user 23.10.2026). */ #exploreLiquidityView .el-dlg-links .el-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } #exploreLiquidityView .el-dlg-links .el-stat .l { max-width: 100%; } #exploreLiquidityView .el-dlg-links .el-stat.einstieg .w, #exploreLiquidityView .el-dlg-links .el-stat-zeile { justify-content: center; }