ah-admin/AH-Oil-Trader
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dashboard wirklich responsive: Hauptgitter selbstregelnd, Abstaende in rem (v=170)

Browse Source 
User: am Handy passen sich die Groessen nicht an.

HAUPTBEFUND: main hatte FESTE 2 Spalten und brach erst bei <=360px um --
moderne Handys haben 390-430 CSS-Pixel. Auf dem Geraet standen also zwei
Spalten a ~190px nebeneinander. Der Breakpoint war schlicht zu schmal geraten.

Jetzt selbstregelnd, ohne geratenen Breakpoint:
  main{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
  360/390/430px -> 1 Spalte · 768 -> 2 · 1024 -> 3 · 1440 -> 4

ZWEITER BEFUND: 138 Abstaende in px, 0 in rem -- die Schrift skalierte seit dem
13.08., die Polster nicht. Damit sass der Text am Handy eng und auf dem Desktop
verloren. Jetzt 122 von 138 auf rem umgestellt (Basis 18px, passend zur fluiden
Wurzel); die verbleibenden 29 sind Werte < 4px, wo Rundung mehr schadet als
nuetzt. Rahmen, Radien und Punktgroessen bleiben BEWUSST px -- die sollen nicht
mitwachsen.

Auch .trades (5 feste Spalten, sprengte 390px) auf auto-fit umgestellt.

Ausgeliefert verifiziert: auto-fit im CSS, 122 rem-Abstaende, HTML zieht v=170.
Backup web/style.css.bak-2026-08-19.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Axel Hocks
2026-08-19 00:32:07 +02:00
co-authored by Claude Opus 5
parent 3a1d8f7687
commit d03d6a1a50
3 changed files with 649 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/index.html
+2 -2
View File
@@ -6,7 +6,7 @@
<meta name="theme-color" content="#0d1117"> <meta name="theme-color" content="#0d1117">
<title>Oil · MT5</title> <title>Oil · MT5</title>
<link rel="manifest" href="manifest.json"> <link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="style.css?v=169"> <link rel="stylesheet" href="style.css?v=170">
</head> </head>
<body> <body>
<!-- Modul-Menü (ganz oben) --> <!-- Modul-Menü (ganz oben) -->
@@ -356,6 +356,6 @@
</div> </div>
<div id="toast" class="toast hidden"></div> <div id="toast" class="toast hidden"></div>
<script src="app.js?v=169"></script> <script src="app.js?v=170"></script>
</body> </body>
</html> </html>
web/style.css
+111 -103
View File
@@ -57,12 +57,12 @@ body{
/* ── Header (scrollt unter den Tabs) ────── */ /* ── Header (scrollt unter den Tabs) ────── */
header{ header{
background:var(--bg); background:var(--bg);
padding:12px 14px; padding:0.6667rem 0.7778rem;
border-bottom:1px solid var(--border); border-bottom:1px solid var(--border);
} }
.sym-row{display:flex;align-items:center;justify-content:space-between;gap:8px} .sym-row{display:flex;align-items:center;justify-content:space-between;gap:0.4444rem}
#symbol{font-size:1.2222rem;font-weight:700;letter-spacing:.5px;flex:0 0 auto} #symbol{font-size:1.2222rem;font-weight:700;letter-spacing:.5px;flex:0 0 auto}
.hdr-right{display:flex;align-items:center;gap:8px;min-width:0} .hdr-right{display:flex;align-items:center;gap:0.4444rem;min-width:0}
.hdr-meta{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;min-width:0} .hdr-meta{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;min-width:0}
.hdr-meta .session-line{margin-top:1px} .hdr-meta .session-line{margin-top:1px}
.hdr-clock{font-size:0.7778rem;color:var(--dim);font-variant-numeric:tabular-nums; .hdr-clock{font-size:0.7778rem;color:var(--dim);font-variant-numeric:tabular-nums;
@@ -77,10 +77,10 @@ header{
.dot.stale{background:var(--warn,#f0a020);box-shadow:0 0 8px var(--warn,#f0a020); .dot.stale{background:var(--warn,#f0a020);box-shadow:0 0 8px var(--warn,#f0a020);
animation:dotpuls 1.2s ease-in-out infinite} animation:dotpuls 1.2s ease-in-out infinite}
@keyframes dotpuls{0%,100%{opacity:1}50%{opacity:.35}} @keyframes dotpuls{0%,100%{opacity:1}50%{opacity:.35}}
.price-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .price-row{display:flex;flex-wrap:wrap;gap:0.4444rem;margin-top:0.5556rem}
/* flex-basis 28% → 3 Boxen je Reihe, die 5. Box (KURS/G/V) bricht sauber um */ /* flex-basis 28% → 3 Boxen je Reihe, die 5. Box (KURS/G/V) bricht sauber um */
.px{flex:1 1 28%;background:var(--card);border:1px solid var(--border); .px{flex:1 1 28%;background:var(--card);border:1px solid var(--border);
border-radius:var(--r);padding:7px 10px;box-shadow:var(--shadow-sm)} border-radius:var(--r);padding:0.3889rem 0.5556rem;box-shadow:var(--shadow-sm)}
.px label{display:block;font-size:0.7222rem;color:var(--dim);letter-spacing:1px; .px label{display:block;font-size:0.7222rem;color:var(--dim);letter-spacing:1px;
text-transform:uppercase} text-transform:uppercase}
.px span{font-size:1.1111rem;font-weight:600} .px span{font-size:1.1111rem;font-weight:600}
@@ -95,13 +95,13 @@ header{
/* ── Modul-Menü (Tabs, ganz oben & sticky) ─ */ /* ── Modul-Menü (Tabs, ganz oben & sticky) ─ */
#tabs{ #tabs{
position:sticky; top:0; z-index:6; position:sticky; top:0; z-index:6;
display:flex; gap:6px; display:flex; gap:0.3333rem;
padding:calc(8px + env(safe-area-inset-top)) 10px 8px; padding:calc(0.4444rem + env(safe-area-inset-top)) 0.5556rem 0.4444rem;
background:var(--bg); border-bottom:1px solid var(--border); background:var(--bg); border-bottom:1px solid var(--border);
overflow-x:auto; -webkit-overflow-scrolling:touch; overflow-x:auto; -webkit-overflow-scrolling:touch;
} }
.tab{ .tab{
flex:0 0 auto; padding:7px 14px; border-radius:var(--r); cursor:pointer; flex:0 0 auto; padding:0.3889rem 0.7778rem; border-radius:var(--r); cursor:pointer;
background:var(--card); border:1px solid var(--border); background:var(--card); border:1px solid var(--border);
color:var(--dim); font-family:inherit; font-size:0.8889rem; font-weight:600; color:var(--dim); font-family:inherit; font-size:0.8889rem; font-weight:600;
transition:background .15s, color .15s, border-color .15s; transition:background .15s, color .15s, border-color .15s;
@@ -110,20 +110,27 @@ header{
.tab.active{background:var(--accent); color:#0a0d13; border-color:var(--accent); .tab.active{background:var(--accent); color:#0a0d13; border-color:var(--accent);
box-shadow:0 2px 10px #e8a00033} box-shadow:0 2px 10px #e8a00033}
/* Mute-Button: klein, ganz rechts in der Tab-Leiste */ /* Mute-Button: klein, ganz rechts in der Tab-Leiste */
.mute-tab{margin-left:auto;padding:7px 10px;font-size:1rem;line-height:1} .mute-tab{margin-left:auto;padding:0.3889rem 0.5556rem;font-size:1rem;line-height:1}
.mute-tab.muted{opacity:.55} .mute-tab.muted{opacity:.55}
.view.hidden{display:none} .view.hidden{display:none}
.view-head{display:flex;align-items:center;justify-content:space-between; .view-head{display:flex;align-items:center;justify-content:space-between;
padding:10px 12px 4px} padding:0.5556rem 0.6667rem 0.2222rem}
.view-head h2{margin:0;font-size:0.9444rem;letter-spacing:1px;color:var(--bright)} .view-head h2{margin:0;font-size:0.9444rem;letter-spacing:1px;color:var(--bright)}
.reload{background:var(--card);border:1px solid var(--border);color:var(--bright); .reload{background:var(--card);border:1px solid var(--border);color:var(--bright);
border-radius:var(--r);width:34px;height:30px;font-size:1.0556rem;cursor:pointer; border-radius:var(--r);width:34px;height:30px;font-size:1.0556rem;cursor:pointer;
transition:background .15s,border-color .15s} transition:background .15s,border-color .15s}
.reload:hover{border-color:var(--dim)} .reload:hover{border-color:var(--dim)}
/* ── Cards-Grid (Dashboard) ─────────────── */ /* ── Cards-Grid (Dashboard) ─────────────── */
main{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:11px} /* ⚠⚠ SELBSTREGELND statt fester Breakpoint (Fix 2026-08-19, User: „am Handy
passen sich die Groessen nicht an"). Vorher: feste 2 Spalten, Umbruch auf
1 Spalte erst bei <=360px — moderne Handys haben aber 390-430 CSS-Pixel.
Auf dem Geraet standen also ZWEI Spalten a ~190px nebeneinander.
`auto-fit` + `minmax` braucht keinen geratenen Breakpoint: es passen so
viele Spalten hinein, wie je 320px Platz haben — Handy 1, Tablet 2. */
main{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:0.7rem;padding:0.7rem}
.card{background:var(--card);border:1px solid var(--border); .card{background:var(--card);border:1px solid var(--border);
border-radius:var(--r-lg);padding:12px 14px;box-shadow:var(--shadow-sm)} border-radius:var(--r-lg);padding:0.6667rem 0.7778rem;box-shadow:var(--shadow-sm)}
.card.wide{grid-column:1 / -1} .card.wide{grid-column:1 / -1}
/* Karten AUSSERHALB des Dashboard-Grids (Statistik-Tab, 2026-08-05): `main` ist /* Karten AUSSERHALB des Dashboard-Grids (Statistik-Tab, 2026-08-05): `main` ist
ein Grid mit eigenem padding, `#view-stats` ist eine schlichte <section> — ohne ein Grid mit eigenem padding, `#view-stats` ist eine schlichte <section> — ohne
@@ -131,37 +138,37 @@ main{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:11px}
(grid-column) liefe ins Leere. */ (grid-column) liefe ins Leere. */
#view-stats > .card, #view-stats > .card,
#view-siglive > .card, #view-siglive > .card,
#view-siganzeige > .card{margin:11px 10px} #view-siganzeige > .card{margin:0.6111rem 0.5556rem}
#view-stats > .card:last-child, #view-stats > .card:last-child,
#view-siglive > .card:last-child, #view-siglive > .card:last-child,
#view-siganzeige > .card:last-child{margin-bottom:74px} /* Platz für die fixe Leiste */ #view-siganzeige > .card:last-child{margin-bottom:4.1111rem} /* Platz für die fixe Leiste */
/* Untertitel in der View-Kopfzeile: sagt in einem Halbsatz, wonach der Tab /* Untertitel in der View-Kopfzeile: sagt in einem Halbsatz, wonach der Tab
sortiert ist — ohne ihn ist „SIG Live" vs. „SIG Anzeige" nicht selbsterklärend. */ sortiert ist — ohne ihn ist „SIG Live" vs. „SIG Anzeige" nicht selbsterklärend. */
.view-note{font-size:0.6667rem;color:var(--dim);margin-left:auto} .view-note{font-size:0.6667rem;color:var(--dim);margin-left:auto}
.card h2{margin:0 0 9px;font-size:0.7778rem;letter-spacing:1.5px; .card h2{margin:0 0 0.5rem;font-size:0.7778rem;letter-spacing:1.5px;
text-transform:uppercase;color:var(--dim);font-weight:600} text-transform:uppercase;color:var(--dim);font-weight:600}
.kv{display:flex;justify-content:space-between;align-items:baseline; .kv{display:flex;justify-content:space-between;align-items:baseline;
padding:2px 0;font-size:0.8889rem} padding:2px 0;font-size:0.8889rem}
.kv span{color:var(--dim)} .kv span{color:var(--dim)}
.kv b{font-weight:600} .kv b{font-weight:600}
/* ── Aktueller Trade (Leiste über der Gesamtempfehlung) ───────────── */ /* ── Aktueller Trade (Leiste über der Gesamtempfehlung) ───────────── */
.trade-bar{padding:8px 12px;border-color:#2d4a2d} .trade-bar{padding:0.4444rem 0.6667rem;border-color:#2d4a2d}
.trade-bar.hidden{display:none} .trade-bar.hidden{display:none}
#card-trail.hidden{display:none} /* Trailing-Kachel ausgeblendet, 2026-07-22 */ #card-trail.hidden{display:none} /* Trailing-Kachel ausgeblendet, 2026-07-22 */
.tb-title{margin:0 0 8px;font-size:0.7778rem;letter-spacing:1.5px;text-transform:uppercase; .tb-title{margin:0 0 0.4444rem;font-size:0.7778rem;letter-spacing:1.5px;text-transform:uppercase;
color:var(--dim);font-weight:600} color:var(--dim);font-weight:600}
/* Laufzeit-Uhr: im Titel mitlaufend (kompakt) + eigenes Feld in der Zeile */ /* Laufzeit-Uhr: im Titel mitlaufend (kompakt) + eigenes Feld in der Zeile */
.tb-runtime{margin-left:8px;color:var(--bright);font-family:var(--mono); .tb-runtime{margin-left:0.4444rem;color:var(--bright);font-family:var(--mono);
letter-spacing:.5px;text-transform:none} letter-spacing:.5px;text-transform:none}
.tb-field .tb-val.warn{color:var(--accent);border-color:#4a3600} .tb-field .tb-val.warn{color:var(--accent);border-color:#4a3600}
.tb-row{display:flex;flex-wrap:wrap;gap:10px} .tb-row{display:flex;flex-wrap:wrap;gap:0.5556rem}
/* EINHEITLICHES Feld-Design: Anzeige-Boxen (Richtung/Lots/Einsatz) und Eingabe- /* EINHEITLICHES Feld-Design: Anzeige-Boxen (Richtung/Lots/Einsatz) und Eingabe-
Felder (SL/TP/Gewinn-Close/Notfall-Close) sehen identisch aus (Label über Box). */ Felder (SL/TP/Gewinn-Close/Notfall-Close) sehen identisch aus (Label über Box). */
.tb-field{display:flex;flex-direction:column;gap:2px} .tb-field{display:flex;flex-direction:column;gap:2px}
.tb-field label{font-size:0.7222rem;color:var(--dim);letter-spacing:.5px} .tb-field label{font-size:0.7222rem;color:var(--dim);letter-spacing:.5px}
.tb-field input, .tb-field .tb-val{width:88px;background:var(--surface-2); .tb-field input, .tb-field .tb-val{width:88px;background:var(--surface-2);
border:1px solid var(--border);border-radius:var(--r-sm);color:var(--bright); border:1px solid var(--border);border-radius:var(--r-sm);color:var(--bright);
font-size:0.9444rem;font-weight:700;padding:6px 7px;text-align:center; font-size:0.9444rem;font-weight:700;padding:0.3333rem 0.3889rem;text-align:center;
transition:border-color .15s, box-shadow .15s} transition:border-color .15s, box-shadow .15s}
.tb-field .tb-val{display:block} /* nur Anzeige, kein Input */ .tb-field .tb-val{display:block} /* nur Anzeige, kein Input */
.tb-field input:focus{outline:none;border-color:var(--blue); .tb-field input:focus{outline:none;border-color:var(--blue);
@@ -176,41 +183,41 @@ main{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:11px}
.tb-btn:active{filter:brightness(1.3)} .tb-btn:active{filter:brightness(1.3)}
/* ── Gesamtempfehlung ───────────────────── */ /* ── Gesamtempfehlung ───────────────────── */
/* Circuit Breaker Banner (Tagesverlust-Stopp) — ganz oben, rot bei ausgelöst */ /* Circuit Breaker Banner (Tagesverlust-Stopp) — ganz oben, rot bei ausgelöst */
.circuit{margin:0 0 11px;padding:11px 14px;border-radius:var(--r);font-weight:700; .circuit{margin:0 0 0.6111rem;padding:0.6111rem 0.7778rem;border-radius:var(--r);font-weight:700;
font-size:0.8889rem;text-align:center;letter-spacing:.2px} font-size:0.8889rem;text-align:center;letter-spacing:.2px}
.circuit.hidden{display:none} .circuit.hidden{display:none}
.circuit.tripped{background:#3d1a1a;color:#ff6b6b;border:1px solid var(--down); .circuit.tripped{background:#3d1a1a;color:#ff6b6b;border:1px solid var(--down);
box-shadow:0 0 0 1px var(--down)} box-shadow:0 0 0 1px var(--down)}
.circuit.near{background:#2a1f00;color:var(--accent);border:1px solid #4a3600} .circuit.near{background:#2a1f00;color:var(--accent);border:1px solid #4a3600}
/* Chartmuster-Karte (visuell, reine Anzeige) */ /* Chartmuster-Karte (visuell, reine Anzeige) */
#card-patterns .pt-tf{font-size:0.6111rem;color:var(--dim);font-weight:600;margin-left:6px} #card-patterns .pt-tf{font-size:0.6111rem;color:var(--dim);font-weight:600;margin-left:0.3333rem}
.pt-item{background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--line); .pt-item{background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--line);
border-radius:var(--r-sm);padding:9px 12px;margin-bottom:8px} border-radius:var(--r-sm);padding:0.5rem 0.6667rem;margin-bottom:0.4444rem}
.pt-item.up{border-left-color:var(--up)} .pt-item.down{border-left-color:var(--down)} .pt-item.up{border-left-color:var(--up)} .pt-item.down{border-left-color:var(--down)}
.pt-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .pt-head{display:flex;align-items:center;gap:0.4444rem;flex-wrap:wrap}
.pt-svg{flex:0 0 auto;background:var(--bg);border:1px solid var(--border); .pt-svg{flex:0 0 auto;background:var(--bg);border:1px solid var(--border);
border-radius:4px;padding:1px 2px} border-radius:4px;padding:1px 2px}
.pt-name{font-weight:700;font-size:0.8333rem} .pt-name{font-weight:700;font-size:0.8333rem}
.pt-item.up .pt-name{color:var(--up)} .pt-item.down .pt-name{color:var(--down)} .pt-item.up .pt-name{color:var(--up)} .pt-item.down .pt-name{color:var(--down)}
.pt-badge{font-size:0.6111rem;font-weight:700;border-radius:4px;padding:1px 7px} .pt-badge{font-size:0.6111rem;font-weight:700;border-radius:4px;padding:1px 0.3889rem}
.pt-badge.conf{background:#0d2a16;color:var(--up);border:1px solid #1a4731} .pt-badge.conf{background:#0d2a16;color:var(--up);border:1px solid #1a4731}
.pt-badge.form{background:#2a1f00;color:var(--accent);border:1px solid #4a3600} .pt-badge.form{background:#2a1f00;color:var(--accent);border:1px solid #4a3600}
.pt-q{margin-left:auto;font-size:0.6667rem;color:var(--dim);font-family:var(--mono)} .pt-q{margin-left:auto;font-size:0.6667rem;color:var(--dim);font-family:var(--mono)}
.pt-det{font-size:0.7222rem;margin-top:4px;font-family:var(--mono);color:var(--bright)} .pt-det{font-size:0.7222rem;margin-top:0.2222rem;font-family:var(--mono);color:var(--bright)}
.pt-note{font-size:0.6667rem;color:var(--dim);margin-top:3px} .pt-note{font-size:0.6667rem;color:var(--dim);margin-top:3px}
.pt-disclaimer{font-size:0.6667rem;color:var(--dim);margin-top:6px;line-height:1.4} .pt-disclaimer{font-size:0.6667rem;color:var(--dim);margin-top:0.3333rem;line-height:1.4}
.pt-disclaimer code{font-family:var(--mono);font-size:0.6111rem} .pt-disclaimer code{font-family:var(--mono);font-size:0.6111rem}
/* Kerzen-Anatomie — bewusst NEUTRAL gefärbt (keine grün/rot-Ampel): die /* Kerzen-Anatomie — bewusst NEUTRAL gefärbt (keine grün/rot-Ampel): die
Lehrbuch-Deutung ist gemessen invertiert, eine Richtungsfarbe würde Lehrbuch-Deutung ist gemessen invertiert, eine Richtungsfarbe würde
systematisch falsch stupsen. Nur „hot" (Volumen>=2x) wird hervorgehoben. */ systematisch falsch stupsen. Nur „hot" (Volumen>=2x) wird hervorgehoben. */
#card-candles .ca-tf{font-size:0.6111rem;color:var(--dim);font-weight:600;margin-left:6px} #card-candles .ca-tf{font-size:0.6111rem;color:var(--dim);font-weight:600;margin-left:0.3333rem}
.ca-item{background:var(--surface-2);border:1px solid var(--border); .ca-item{background:var(--surface-2);border:1px solid var(--border);
border-left:3px solid var(--line);border-radius:var(--r-sm); border-left:3px solid var(--line);border-radius:var(--r-sm);
padding:8px 12px;margin-bottom:7px} padding:0.4444rem 0.6667rem;margin-bottom:0.3889rem}
.ca-item.hot{border-left-color:var(--accent)} .ca-item.hot{border-left-color:var(--accent)}
.ca-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .ca-head{display:flex;align-items:center;gap:0.4444rem;flex-wrap:wrap}
.ca-name{font-weight:700;font-size:0.8333rem;color:var(--bright)} .ca-name{font-weight:700;font-size:0.8333rem;color:var(--bright)}
.ca-vol{font-size:0.6111rem;font-weight:700;border-radius:4px;padding:1px 7px; .ca-vol{font-size:0.6111rem;font-weight:700;border-radius:4px;padding:1px 0.3889rem;
font-family:var(--mono);background:var(--bg);color:var(--dim); font-family:var(--mono);background:var(--bg);color:var(--dim);
border:1px solid var(--border)} border:1px solid var(--border)}
.ca-vol.hot{background:#2a1f00;color:var(--accent);border-color:#4a3600} .ca-vol.hot{background:#2a1f00;color:var(--accent);border-color:#4a3600}
@@ -220,8 +227,8 @@ main{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:11px}
/* Erwartete Spanne — komprimiert in der Gesamtempfehlung (2026-08-05, die eigene /* Erwartete Spanne — komprimiert in der Gesamtempfehlung (2026-08-05, die eigene
Karte ist entfallen). Bewusst OHNE Richtungsfarbe und ohne Rahmen: die Zeile Karte ist entfallen). Bewusst OHNE Richtungsfarbe und ohne Rahmen: die Zeile
zeigt Streuung, sie darf optisch nicht mit der Bias-Nadel darüber konkurrieren. */ zeigt Streuung, sie darf optisch nicht mit der Bias-Nadel darüber konkurrieren. */
.kx-cone{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap; .kx-cone{display:flex;align-items:baseline;gap:0.4444rem;flex-wrap:wrap;
margin:6px 0 0;padding-top:6px;border-top:1px solid var(--line)} margin:0.3333rem 0 0;padding-top:0.3333rem;border-top:1px solid var(--line)}
.kx-cone-lbl{font-size:0.6667rem;color:var(--dim)} .kx-cone-lbl{font-size:0.6667rem;color:var(--dim)}
.kx-cone-item{font-family:var(--mono);font-size:0.7222rem;color:var(--bright)} .kx-cone-item{font-family:var(--mono);font-size:0.7222rem;color:var(--bright)}
.kx-cone-item i{font-style:normal;font-size:0.6111rem;color:var(--dim);margin-right:3px} .kx-cone-item i{font-style:normal;font-size:0.6111rem;color:var(--dim);margin-right:3px}
@@ -235,7 +242,7 @@ main{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:11px}
#card-pos .squeeze-ind, #card-pos .bounce-ind, #card-pos .cur-near, #card-pos .squeeze-ind, #card-pos .bounce-ind, #card-pos .cur-near,
#card-pos .pos-srhint, #card-pos .pos-stophint, #card-pos .news-conflict, #card-pos .pos-srhint, #card-pos .pos-stophint, #card-pos .news-conflict,
#card-pos .reasons{ #card-pos .reasons{
display:block; margin:0 0 7px; padding:8px 11px; border-radius:var(--r-sm); display:block; margin:0 0 0.3889rem; padding:0.4444rem 0.6111rem; border-radius:var(--r-sm);
background:var(--surface-2); border:1px solid var(--border); background:var(--surface-2); border:1px solid var(--border);
border-left:3px solid var(--line); border-left:3px solid var(--line);
font-size:0.8889rem; line-height:1.4; font-weight:600; letter-spacing:0; box-shadow:none; font-size:0.8889rem; line-height:1.4; font-weight:600; letter-spacing:0; box-shadow:none;
@@ -265,38 +272,39 @@ main{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:11px}
/* Header-KURS-Box färbt sich nahe S/R (rot=Widerstand, grün=Support) */ /* Header-KURS-Box färbt sich nahe S/R (rot=Widerstand, grün=Support) */
.px span.near-res{color:var(--down)} .px span.near-sup{color:var(--up)} .px span.near-res{color:var(--down)} .px span.near-sup{color:var(--up)}
/* ── Signal ─────────────────────────────── */ /* ── Signal ─────────────────────────────── */
.signal{font-size:1.2222rem;font-weight:700;color:var(--dim);margin-bottom:6px} .signal{font-size:1.2222rem;font-weight:700;color:var(--dim);margin-bottom:0.3333rem}
.signal.long{color:var(--up)} .signal.short{color:var(--down)} .signal.long{color:var(--up)} .signal.short{color:var(--down)}
.reasons{font-size:0.8333rem;color:var(--dim);margin-top:6px} .reasons{font-size:0.8333rem;color:var(--dim);margin-top:0.3333rem}
.ell-note{font-size:0.8333rem;color:var(--dim);margin-top:6px} .ell-note{font-size:0.8333rem;color:var(--dim);margin-top:0.3333rem}
/* ── Agent ──────────────────────────────── */ /* ── Agent ──────────────────────────────── */
.agent-head{font-weight:600;font-size:0.9444rem;margin-bottom:4px} .agent-head{font-weight:600;font-size:0.9444rem;margin-bottom:0.2222rem}
.agent-text{font-size:0.8889rem;color:var(--bright)} .agent-text{font-size:0.8889rem;color:var(--bright)}
.risks{margin:8px 0 0;padding-left:16px;font-size:0.8333rem;color:var(--accent)} .risks{margin:0.4444rem 0 0;padding-left:0.8889rem;font-size:0.8333rem;color:var(--accent)}
.risks li{margin:2px 0} .risks li{margin:2px 0}
/* ── Trades ─────────────────────────────── */ /* ── Trades ─────────────────────────────── */
.trades{display:grid;grid-template-columns:repeat(5,1fr);gap:6px} /* 5 feste Spalten sprengen 390px — ab hier selbstregelnd */
.trades{display:grid;grid-template-columns:repeat(auto-fit,minmax(58px,1fr));gap:0.35rem}
.trade{background:var(--bg);border:1px solid var(--border); .trade{background:var(--bg);border:1px solid var(--border);
border-radius:6px;padding:6px 3px;text-align:center} border-radius:6px;padding:0.3333rem 3px;text-align:center}
.trade .p{font-size:0.8889rem;font-weight:700} .trade .p{font-size:0.8889rem;font-weight:700}
.trade .i{font-size:0.7222rem;color:var(--dim);margin-top:2px} .trade .i{font-size:0.7222rem;color:var(--dim);margin-top:2px}
.up{color:var(--up)} .down{color:var(--down)} .dim{color:var(--dim)} .up{color:var(--up)} .down{color:var(--down)} .dim{color:var(--dim)}
@media(max-width:360px){ @media(max-width:360px){
main{grid-template-columns:1fr} /* main regelt sich seit 19.08. selbst (auto-fit) — hier nicht mehr noetig */
.card:not(.wide){grid-column:1 / -1} .card:not(.wide){grid-column:1 / -1}
} }
/* ── Aktionsleiste ──────────────────────── */ /* ── Aktionsleiste ──────────────────────── */
main{padding-bottom:74px} /* Platz für die fixe Leiste */ main{padding-bottom:4.1111rem} /* Platz für die fixe Leiste */
#actions{ #actions{
position:fixed; left:0; right:0; bottom:0; z-index:8; position:fixed; left:0; right:0; bottom:0; z-index:8;
display:flex; gap:7px; display:flex; gap:0.3889rem;
padding:9px 9px calc(9px + env(safe-area-inset-bottom)); padding:0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
background:rgba(10,13,19,.86); border-top:1px solid var(--border); background:rgba(10,13,19,.86); border-top:1px solid var(--border);
backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
} }
.btn{ .btn{
flex:1; border:1px solid var(--border); border-radius:var(--r); flex:1; border:1px solid var(--border); border-radius:var(--r);
padding:12px 4px; font-size:0.9444rem; font-weight:700; color:var(--bright); padding:0.6667rem 0.2222rem; font-size:0.9444rem; font-weight:700; color:var(--bright);
background:#1a1e24; font-family:inherit; cursor:pointer; background:#1a1e24; font-family:inherit; cursor:pointer;
transition:background .12s, opacity .12s, transform .06s; touch-action:manipulation; transition:background .12s, opacity .12s, transform .06s; touch-action:manipulation;
} }
@@ -322,24 +330,24 @@ main{padding-bottom:74px} /* Platz für die fixe Leiste */
oben in der Position/Meldungen-Sektion — nur noch Farbvarianten je Zustand.) */ oben in der Position/Meldungen-Sektion — nur noch Farbvarianten je Zustand.) */
/* Live-Statistik (kompakt) */ /* Live-Statistik (kompakt) */
.stx-row {display:flex;flex-direction:column;gap:8px} .stx-row {display:flex;flex-direction:column;gap:0.4444rem}
.stx-grp {background:var(--card);border:1px solid var(--border);border-radius:8px;padding:8px 10px} .stx-grp {background:var(--card);border:1px solid var(--border);border-radius:8px;padding:0.4444rem 0.5556rem}
.stx-lbl {font-size:0.8333rem;color:var(--text-dim);margin-bottom:5px;letter-spacing:.3px} .stx-lbl {font-size:0.8333rem;color:var(--text-dim);margin-bottom:0.2778rem;letter-spacing:.3px}
.stx-cells {display:flex;flex-wrap:wrap;gap:6px 14px} .stx-cells {display:flex;flex-wrap:wrap;gap:0.3333rem 0.7778rem}
.stx-c {font-size:0.8889rem;color:var(--text-dim)} .stx-c {font-size:0.8889rem;color:var(--text-dim)}
.stx-c b {font-size:1rem;color:var(--text-bright);margin-left:3px} .stx-c b {font-size:1rem;color:var(--text-bright);margin-left:3px}
/* Charts-Tab: M1/M5/M15/M30/H1 untereinander (Lightweight Charts) */ /* Charts-Tab: M1/M5/M15/M30/H1 untereinander (Lightweight Charts) */
/* Kurslücken (Gaps): offene Fill-Magnete */ /* Kurslücken (Gaps): offene Fill-Magnete */
.gaps-list {display:flex;flex-direction:column;gap:6px} .gaps-list {display:flex;flex-direction:column;gap:0.3333rem}
.gap-row {display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;font-size:0.9444rem; .gap-row {display:flex;flex-wrap:wrap;gap:0.4444rem;align-items:baseline;font-size:0.9444rem;
padding:6px 9px;background:var(--card);border:1px solid var(--border);border-radius:7px} padding:0.3333rem 0.5rem;background:var(--card);border:1px solid var(--border);border-radius:7px}
.gap-zone {font-variant-numeric:tabular-nums;color:var(--text-bright);font-weight:600} .gap-zone {font-variant-numeric:tabular-nums;color:var(--text-bright);font-weight:600}
.gap-fill {color:var(--text-dim)} .gap-fill {color:var(--text-dim)}
.gap-date {margin-left:auto;font-size:0.8333rem} .gap-date {margin-left:auto;font-size:0.8333rem}
/* TF-Ampel (Welle): Wende je M1/M5/M15/M30 via EMA12/50-Kreuzung */ /* TF-Ampel (Welle): Wende je M1/M5/M15/M30 via EMA12/50-Kreuzung */
.tf-turns {display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 2px} .tf-turns {display:flex;gap:0.3333rem;flex-wrap:wrap;margin:0.4444rem 0 2px}
.tf-chip {display:inline-flex;align-items:center;gap:4px;padding:3px 8px; .tf-chip {display:inline-flex;align-items:center;gap:0.2222rem;padding:3px 0.4444rem;
border-radius:7px;font-size:0.8889rem;background:var(--card);border:1px solid var(--border); border-radius:7px;font-size:0.8889rem;background:var(--card);border:1px solid var(--border);
color:var(--text-dim)} color:var(--text-dim)}
.tf-chip b {font-weight:600;font-size:0.8333rem;letter-spacing:.3px} .tf-chip b {font-weight:600;font-size:0.8333rem;letter-spacing:.3px}
@@ -347,7 +355,7 @@ main{padding-bottom:74px} /* Platz für die fixe Leiste */
.tf-chip.down {color:#f85149;border-color:#3d1a1a} .tf-chip.down {color:#f85149;border-color:#3d1a1a}
.tf-chip.flat {color:var(--dim)} .tf-chip.flat {color:var(--dim)}
.tf-turn {font-weight:700} .tf-turn {font-weight:700}
.tf-ago {font-size:0.7778rem;opacity:.7;background:var(--surface-2);border-radius:4px;padding:0 4px} .tf-ago {font-size:0.7778rem;opacity:.7;background:var(--surface-2);border-radius:4px;padding:0 0.2222rem}
/* Frische Wende: statisch hervorgehoben (kein Blinken) */ /* Frische Wende: statisch hervorgehoben (kein Blinken) */
.tf-chip.fresh.up {background:#0d2a16;border-color:#3fb950;color:var(--bright)} .tf-chip.fresh.up {background:#0d2a16;border-color:#3fb950;color:var(--bright)}
.tf-chip.fresh.down {background:#2a0d0d;border-color:#f85149;color:var(--bright)} .tf-chip.fresh.down {background:#2a0d0d;border-color:#f85149;color:var(--bright)}
@@ -355,117 +363,117 @@ main{padding-bottom:74px} /* Platz für die fixe Leiste */
.modal{ .modal{
position:fixed; inset:0; z-index:20; display:flex; position:fixed; inset:0; z-index:20; display:flex;
align-items:center; justify-content:center; align-items:center; justify-content:center;
background:#000000aa; padding:20px; background:#000000aa; padding:1.1111rem;
} }
.modal.hidden,.toast.hidden{display:none} .modal.hidden,.toast.hidden{display:none}
.box{ .box{
background:var(--card); border:1px solid var(--accent); background:var(--card); border:1px solid var(--accent);
border-radius:14px; padding:18px; width:100%; max-width:340px; border-radius:14px; padding:1rem; width:100%; max-width:340px;
} }
.box-title{font-size:1.0556rem;font-weight:700;margin-bottom:8px} .box-title{font-size:1.0556rem;font-weight:700;margin-bottom:0.4444rem}
.box-msg{font-size:0.9444rem;color:var(--bright);margin-bottom:14px;white-space:pre-line} .box-msg{font-size:0.9444rem;color:var(--bright);margin-bottom:0.7778rem;white-space:pre-line}
.box-msg.danger{color:var(--down);font-weight:600} .box-msg.danger{color:var(--down);font-weight:600}
#modal-input.hidden{display:none} /* nur im Token-Modus sichtbar */ #modal-input.hidden{display:none} /* nur im Token-Modus sichtbar */
#modal-input{ #modal-input{
width:100%; padding:11px; margin-bottom:14px; font-size:1.0556rem; width:100%; padding:0.6111rem; margin-bottom:0.7778rem; font-size:1.0556rem;
background:var(--bg); border:1px solid var(--border); border-radius:8px; background:var(--bg); border:1px solid var(--border); border-radius:8px;
color:var(--bright); font-family:inherit; color:var(--bright); font-family:inherit;
} }
.box-btns{display:flex;gap:10px} .box-btns{display:flex;gap:0.5556rem}
.mbtn{ .mbtn{
flex:1; padding:12px; border:none; border-radius:9px; font-size:1rem; flex:1; padding:0.6667rem; border:none; border-radius:9px; font-size:1rem;
font-weight:700; font-family:inherit; cursor:pointer; font-weight:700; font-family:inherit; cursor:pointer;
} }
.mbtn.ok{background:var(--accent);color:#000} .mbtn.ok{background:var(--accent);color:#000}
.mbtn.cancel{background:#1a1e24;color:var(--bright);border:1px solid var(--border)} .mbtn.cancel{background:#1a1e24;color:var(--bright);border:1px solid var(--border)}
/* ── Logs ───────────────────────────────── */ /* ── Logs ───────────────────────────────── */
.logbox{ .logbox{
margin:0 10px 10px; padding:10px; background:#000; border:1px solid var(--border); margin:0 0.5556rem 0.5556rem; padding:0.5556rem; background:#000; border:1px solid var(--border);
border-radius:8px; font-size:0.7778rem; line-height:1.45; color:#c9d1d9; border-radius:8px; font-size:0.7778rem; line-height:1.45; color:#c9d1d9;
white-space:pre-wrap; word-break:break-word; max-height:70vh; overflow-y:auto; white-space:pre-wrap; word-break:break-word; max-height:70vh; overflow-y:auto;
} }
/* ── Statistik ──────────────────────────── */ /* ── Statistik ──────────────────────────── */
#stats-body{padding:0 10px 12px} #stats-body{padding:0 0.5556rem 0.6667rem}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:10px; .stat-card{background:var(--card);border:1px solid var(--border);border-radius:10px;
padding:10px 12px;margin-bottom:10px} padding:0.5556rem 0.6667rem;margin-bottom:0.5556rem}
.stat-card h3{margin:0 0 8px;font-size:0.8333rem;letter-spacing:1px;color:var(--accent); .stat-card h3{margin:0 0 0.4444rem;font-size:0.8333rem;letter-spacing:1px;color:var(--accent);
text-transform:uppercase} text-transform:uppercase}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px} .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.2222rem 0.7778rem}
.stat-grid .kv{font-size:0.8889rem} .stat-grid .kv{font-size:0.8889rem}
.stat-grid .kv.net span{color:var(--accent)} .stat-grid .kv.net span{color:var(--accent)}
.sub-h{margin:14px 12px 6px;font-size:0.8333rem;letter-spacing:1px; .sub-h{margin:0.7778rem 0.6667rem 0.3333rem;font-size:0.8333rem;letter-spacing:1px;
color:var(--dim);text-transform:uppercase} color:var(--dim);text-transform:uppercase}
.setup-hint{padding:0 12px 6px;font-size:0.7778rem} .setup-hint{padding:0 0.6667rem 0.3333rem;font-size:0.7778rem}
.setup-row{display:grid;grid-template-columns:1.4fr .9fr 1fr .75fr;gap:6px; .setup-row{display:grid;grid-template-columns:1.4fr .9fr 1fr .75fr;gap:0.3333rem;
align-items:baseline;padding:7px 12px;border-bottom:1px solid var(--border)} align-items:baseline;padding:0.3889rem 0.6667rem;border-bottom:1px solid var(--border)}
.setup-name{font-size:0.8333rem;color:var(--bright);word-break:break-word} .setup-name{font-size:0.8333rem;color:var(--bright);word-break:break-word}
.setup-stat{font-size:0.8333rem;text-align:right} .setup-stat{font-size:0.8333rem;text-align:right}
/* ── News ───────────────────────────────── */ /* ── News ───────────────────────────────── */
.news-sent{margin:4px 10px 8px;font-size:0.8889rem;color:var(--dim)} .news-sent{margin:0.2222rem 0.5556rem 0.4444rem;font-size:0.8889rem;color:var(--dim)}
#news-body{padding:0 10px 12px} #news-body{padding:0 0.5556rem 0.6667rem}
.news-item{display:block;background:var(--card);border:1px solid var(--border); .news-item{display:block;background:var(--card);border:1px solid var(--border);
border-radius:8px;padding:8px 10px;margin-bottom:8px;text-decoration:none} border-radius:8px;padding:0.4444rem 0.5556rem;margin-bottom:0.4444rem;text-decoration:none}
.news-item .t{font-size:0.8889rem;color:var(--bright);line-height:1.35} .news-item .t{font-size:0.8889rem;color:var(--bright);line-height:1.35}
.news-item .s{font-size:0.7222rem;color:var(--dim);margin-top:3px} .news-item .s{font-size:0.7222rem;color:var(--dim);margin-top:3px}
/* ── Toast ──────────────────────────────── */ /* ── Toast ──────────────────────────────── */
.toast{ .toast{
position:fixed; left:50%; bottom:84px; transform:translateX(-50%); position:fixed; left:50%; bottom:84px; transform:translateX(-50%);
z-index:25; background:var(--card); border:1px solid var(--border); z-index:25; background:var(--card); border:1px solid var(--border);
border-radius:10px; padding:10px 16px; font-size:0.9444rem; max-width:90%; border-radius:10px; padding:0.5556rem 0.8889rem; font-size:0.9444rem; max-width:90%;
box-shadow:0 6px 24px #000a; box-shadow:0 6px 24px #000a;
} }
.toast.ok{border-color:var(--up)} .toast.err{border-color:var(--down)} .toast.ok{border-color:var(--up)} .toast.err{border-color:var(--down)}
/* ── Marktstruktur-Karte (M30, reine Anzeige) ───────────────────────── */ /* ── Marktstruktur-Karte (M30, reine Anzeige) ───────────────────────── */
#card-structure h2 .ms-tf{ font-size:0.8333rem; color:var(--dim); font-weight:600; #card-structure h2 .ms-tf{ font-size:0.8333rem; color:var(--dim); font-weight:600;
border:1px solid var(--border); border-radius:var(--r-sm); padding:1px 6px; margin-left:6px; } border:1px solid var(--border); border-radius:var(--r-sm); padding:1px 0.3333rem; margin-left:0.3333rem; }
.ms-top{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:8px 0; } .ms-top{ display:flex; align-items:center; gap:0.6667rem; flex-wrap:wrap; margin:0.4444rem 0; }
.ms-trend{ font-weight:700; font-size:1.0556rem; } .ms-trend{ font-weight:700; font-size:1.0556rem; }
.ms-trend.up{ color:var(--up); } .ms-trend.down{ color:var(--down); } .ms-trend.dim{ color:var(--dim); } .ms-trend.up{ color:var(--up); } .ms-trend.down{ color:var(--down); } .ms-trend.dim{ color:var(--dim); }
.ms-swings{ display:flex; align-items:center; gap:2px; flex-wrap:wrap; } .ms-swings{ display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
.ms-chip{ font:600 0.8889rem/1 var(--mono); padding:3px 6px; border-radius:var(--r-sm); .ms-chip{ font:600 0.8889rem/1 var(--mono); padding:3px 0.3333rem; border-radius:var(--r-sm);
background:var(--surface-2); border:1px solid var(--border); } background:var(--surface-2); border:1px solid var(--border); }
.ms-chip.up{ color:var(--up); border-color:#2ea04333; } .ms-chip.up{ color:var(--up); border-color:#2ea04333; }
.ms-chip.down{ color:var(--down); border-color:#f8514933; } .ms-chip.down{ color:var(--down); border-color:#f8514933; }
.ms-chip.dim{ color:var(--dim); } .ms-chip.dim{ color:var(--dim); }
.ms-arrow{ color:var(--dim); font-size:0.8333rem; } .ms-arrow{ color:var(--dim); font-size:0.8333rem; }
.ms-bos{ display:flex; align-items:center; gap:8px; font-size:0.9444rem; margin:6px 0; } .ms-bos{ display:flex; align-items:center; gap:0.4444rem; font-size:0.9444rem; margin:0.3333rem 0; }
.ms-bos.hidden{ display:none; } .ms-bos.hidden{ display:none; }
.ms-bos-lbl{ font:600 0.8333rem/1 var(--mono); color:var(--dim); .ms-bos-lbl{ font:600 0.8333rem/1 var(--mono); color:var(--dim);
border:1px solid var(--border); border-radius:var(--r-sm); padding:2px 6px; } border:1px solid var(--border); border-radius:var(--r-sm); padding:2px 0.3333rem; }
.ms-bos .up{ color:var(--up); } .ms-bos .down{ color:var(--down); } .ms-bos .up{ color:var(--up); } .ms-bos .down{ color:var(--down); }
.ms-chan{ margin-top:8px; } .ms-chan{ margin-top:0.4444rem; }
.ms-chan-head{ display:flex; justify-content:space-between; align-items:baseline; font-size:0.9444rem; } .ms-chan-head{ display:flex; justify-content:space-between; align-items:baseline; font-size:0.9444rem; }
.ms-chan-head .up{ color:var(--up); font-weight:700; } .ms-chan-head .up{ color:var(--up); font-weight:700; }
.ms-chan-head .down{ color:var(--down); font-weight:700; } .ms-chan-head .down{ color:var(--down); font-weight:700; }
.ms-chan-head .dim{ color:var(--dim); font-weight:700; } .ms-chan-head .dim{ color:var(--dim); font-weight:700; }
.ms-chan-note{ color:var(--dim); font-size:0.8889rem; } .ms-chan-note{ color:var(--dim); font-size:0.8889rem; }
.ms-chan-track{ position:relative; height:8px; margin:6px 0 3px; .ms-chan-track{ position:relative; height:8px; margin:0.3333rem 0 3px;
background:var(--surface-2); border:1px solid var(--border); border-radius:99px; overflow:visible; } background:var(--surface-2); border:1px solid var(--border); border-radius:99px; overflow:visible; }
.ms-chan-fill{ height:100%; border-radius:99px 0 0 99px; .ms-chan-fill{ height:100%; border-radius:99px 0 0 99px;
background:linear-gradient(90deg,#1f6feb55,#58a6ff88); transition:width .4s; } background:linear-gradient(90deg,#1f6feb55,#58a6ff88); transition:width .4s; }
.ms-chan-dot{ position:absolute; top:50%; width:12px; height:12px; margin-left:-6px; .ms-chan-dot{ position:absolute; top:50%; width:12px; height:12px; margin-left:-0.3333rem;
transform:translateY(-50%); border-radius:50%; background:var(--bright); transform:translateY(-50%); border-radius:50%; background:var(--bright);
border:2px solid var(--card); box-shadow:0 0 0 1px var(--border); transition:left .4s; } border:2px solid var(--card); box-shadow:0 0 0 1px var(--border); transition:left .4s; }
.ms-chan-scale{ display:flex; justify-content:space-between; font-size:0.7778rem; color:var(--dim); } .ms-chan-scale{ display:flex; justify-content:space-between; font-size:0.7778rem; color:var(--dim); }
/* ── Auto-Squeeze-Monitor (B4, Statistik-Tab) ───────────────────────── */ /* ── Auto-Squeeze-Monitor (B4, Statistik-Tab) ───────────────────────── */
.sqm-head{ display:flex; align-items:center; gap:10px; margin:4px 0 8px; } .sqm-head{ display:flex; align-items:center; gap:0.5556rem; margin:0.2222rem 0 0.4444rem; }
.sqm-badge{ font:600 0.8889rem/1 var(--mono); padding:3px 8px; border-radius:var(--r-sm); .sqm-badge{ font:600 0.8889rem/1 var(--mono); padding:3px 0.4444rem; border-radius:var(--r-sm);
background:var(--surface-2); border:1px solid var(--border); } background:var(--surface-2); border:1px solid var(--border); }
.sqm-badge.up{ color:var(--up); border-color:#2ea04355; } .sqm-badge.up{ color:var(--up); border-color:#2ea04355; }
.sqm-badge.down{ color:var(--down); border-color:#f8514955; } .sqm-badge.down{ color:var(--down); border-color:#f8514955; }
.sqm-badge.dim{ color:var(--dim); } .sqm-badge.dim{ color:var(--dim); }
.sqm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .sqm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0.5556rem; }
@media(max-width:560px){ .sqm-grid{ grid-template-columns:1fr; } } @media(max-width:560px){ .sqm-grid{ grid-template-columns:1fr; } }
.sqm-col{ background:var(--card); border:1px solid var(--border); border-radius:var(--r); .sqm-col{ background:var(--card); border:1px solid var(--border); border-radius:var(--r);
padding:10px 12px; } padding:0.5556rem 0.6667rem; }
.sqm-h{ font-size:0.8889rem; color:var(--dim); font-weight:600; margin-bottom:6px; } .sqm-h{ font-size:0.8889rem; color:var(--dim); font-weight:600; margin-bottom:0.3333rem; }
.sqm-row{ display:flex; justify-content:space-between; align-items:baseline; .sqm-row{ display:flex; justify-content:space-between; align-items:baseline;
font-size:0.9444rem; padding:2px 0; border-bottom:1px solid var(--line); } font-size:0.9444rem; padding:2px 0; border-bottom:1px solid var(--line); }
.sqm-row:last-child{ border-bottom:none; } .sqm-row:last-child{ border-bottom:none; }
.sqm-row b{ font-family:var(--mono); } .sqm-row b{ font-family:var(--mono); }
.sqm-row b.up{ color:var(--up); } .sqm-row b.down{ color:var(--down); } .sqm-row b.up{ color:var(--up); } .sqm-row b.down{ color:var(--down); }
.sqm-exp{ font-size:0.8333rem; color:var(--dim); margin-top:6px; } .sqm-exp{ font-size:0.8333rem; color:var(--dim); margin-top:0.3333rem; }
.sqm-note{ font-size:0.8889rem; color:var(--dim); margin-top:8px; line-height:1.4; } .sqm-note{ font-size:0.8889rem; color:var(--dim); margin-top:0.4444rem; line-height:1.4; }
/* Kurs aus Hyperliquid (Markt bei Pepperstone geschlossen) - bewusst ANDERS /* Kurs aus Hyperliquid (Markt bei Pepperstone geschlossen) - bewusst ANDERS
gefaerbt als der Broker-Kurs, damit man ihn nicht verwechselt. */ gefaerbt als der Broker-Kurs, damit man ihn nicht verwechselt. */
#hdr-price.hl-price{color:var(--accent)} #hdr-price.hl-price{color:var(--accent)}
@@ -476,29 +484,29 @@ main{padding-bottom:74px} /* Platz für die fixe Leiste */
#card-manual .mt-sub { font-size:0.7222rem; color: var(--dim); font-weight: 400; } #card-manual .mt-sub { font-size:0.7222rem; color: var(--dim); font-weight: 400; }
.mt-grid { .mt-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px; margin-bottom: 10px; gap:0.5556rem; margin-bottom:0.5556rem;
} }
.mt-box { .mt-box {
background: var(--surface-2); border: 1px solid var(--border); background: var(--surface-2); border: 1px solid var(--border);
border-radius: var(--r-sm); padding: 9px 11px; border-radius: var(--r-sm); padding:0.5rem 0.6111rem;
} }
.mt-lbl { font-size:0.7222rem; color: var(--dim); margin-bottom: 3px; } .mt-lbl { font-size:0.7222rem; color: var(--dim); margin-bottom:3px; }
.mt-val { font-family: var(--mono); font-size:1.1667rem; font-weight: 600; } .mt-val { font-family: var(--mono); font-size:1.1667rem; font-weight: 600; }
.mt-sub2 { font-size:0.6667rem; color: var(--dim); font-family: var(--mono); margin-top: 2px; } .mt-sub2 { font-size:0.6667rem; color: var(--dim); font-family: var(--mono); margin-top:2px; }
.mt-split { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .mt-split { display: flex; flex-wrap: wrap; gap:0.4444rem; margin-bottom:0.4444rem; }
.mt-chip { .mt-chip {
background: var(--surface-2); border: 1px solid var(--line); background: var(--surface-2); border: 1px solid var(--line);
border-radius: var(--r-sm); padding: 5px 10px; border-radius: var(--r-sm); padding:0.2778rem 0.5556rem;
font-size:0.7222rem; font-family: var(--mono); font-size:0.7222rem; font-family: var(--mono);
} }
.mt-note { font-size:0.6667rem; line-height: 1.45; } .mt-note { font-size:0.6667rem; line-height: 1.45; }
/* ── Feste Einsatz-Margin in der Order-Leiste (2026-08-04) ──────────────── /* ── Feste Einsatz-Margin in der Order-Leiste (2026-08-04) ────────────────
Sitzt bewusst bei den Order-Buttons, nicht in der Trade-Leiste: die ist nur Sitzt bewusst bei den Order-Buttons, nicht in der Trade-Leiste: die ist nur
bei offener Position sichtbar, der Einsatz muss aber VORHER einstellbar sein. */ bei offener Position sichtbar, der Einsatz muss aber VORHER einstellbar sein. */
.mg-field { display: inline-flex; flex-direction: column; gap: 2px; margin-right: 8px; } .mg-field { display: inline-flex; flex-direction: column; gap:2px; margin-right:0.4444rem; }
.mg-field label { font-size:0.6111rem; color: var(--dim); line-height: 1; } .mg-field label { font-size:0.6111rem; color: var(--dim); line-height: 1; }
.mg-field input { .mg-field input {
width: 74px; padding: 5px 7px; width: 74px; padding:0.2778rem 0.3889rem;
background: var(--surface-2); color: var(--bright); background: var(--surface-2); color: var(--bright);
border: 1px solid var(--border); border-radius: var(--r-sm); border: 1px solid var(--border); border-radius: var(--r-sm);
font-family: var(--mono); font-size:0.7778rem; text-align: right; font-family: var(--mono); font-size:0.7778rem; text-align: right;
@@ -513,7 +521,7 @@ main{padding-bottom:74px} /* Platz für die fixe Leiste */
.mg-field.muted input { border-style: dashed; } .mg-field.muted input { border-style: dashed; }
/* HL-Kontext in den Meldungen — neutral, weil gemessen ohne Prognosewert. */ /* HL-Kontext in den Meldungen — neutral, weil gemessen ohne Prognosewert. */
.hl-note{font-size:0.7222rem;color:var(--dim);font-family:var(--mono); .hl-note{font-size:0.7222rem;color:var(--dim);font-family:var(--mono);
padding:5px 0;border-top:1px solid var(--line);margin-top:5px} padding:0.2778rem 0;border-top:1px solid var(--line);margin-top:0.2778rem}
.hl-note.hidden{display:none} .hl-note.hidden{display:none}
/* ── M15 Setup-Bereitschaft (2026-08-08, Ersatz der Gesamtempfehlung) ────── /* ── M15 Setup-Bereitschaft (2026-08-08, Ersatz der Gesamtempfehlung) ──────
@@ -523,13 +531,13 @@ main{padding-bottom:74px} /* Platz für die fixe Leiste */
auch das NICHT-Handeln ausdruecklich bestaetigt werden. */ auch das NICHT-Handeln ausdruecklich bestaetigt werden. */
#card-m15{border-color:var(--accent)} #card-m15{border-color:var(--accent)}
.m15-status{font-size:1.0556rem;font-weight:700;letter-spacing:.3px; .m15-status{font-size:1.0556rem;font-weight:700;letter-spacing:.3px;
padding:10px 12px;border-radius:var(--r);margin-bottom:10px; padding:0.5556rem 0.6667rem;border-radius:var(--r);margin-bottom:0.5556rem;
background:var(--surface-2);border:1px solid var(--border);color:var(--dim)} background:var(--surface-2);border:1px solid var(--border);color:var(--dim)}
.m15-status.gruen{color:var(--up);border-color:#1d5c2a;background:#0e2413} .m15-status.gruen{color:var(--up);border-color:#1d5c2a;background:#0e2413}
.m15-status.gelb {color:var(--accent);border-color:#4a3600;background:#241d05} .m15-status.gelb {color:var(--accent);border-color:#4a3600;background:#241d05}
.m15-status.rot {color:var(--down);border-color:#5c1a1a;background:#240f0f} .m15-status.rot {color:var(--down);border-color:#5c1a1a;background:#240f0f}
.m15-grid{display:flex;flex-direction:column;gap:5px} .m15-grid{display:flex;flex-direction:column;gap:0.2778rem}
.m15-item{font-size:0.8333rem;color:var(--dim);padding:4px 8px;border-radius:var(--r-sm); .m15-item{font-size:0.8333rem;color:var(--dim);padding:0.2222rem 0.4444rem;border-radius:var(--r-sm);
background:var(--surface-2);border:1px solid var(--line)} background:var(--surface-2);border:1px solid var(--line)}
.m15-item.ok {color:var(--bright);border-color:#1d5c2a} .m15-item.ok {color:var(--bright);border-color:#1d5c2a}
.m15-item.warn{color:var(--accent);border-color:#4a3600} .m15-item.warn{color:var(--accent);border-color:#4a3600}
web/style.css.bak-2026-08-19
+536
View File
@@ -0,0 +1,536 @@
:root{
/* Flächen (Elevation-Leiter: bg < surface-2 < card) */
--bg:#0a0d13; --card:#161b22; --surface-2:#0d1117;
--border:#2a323e; --line:#20262f;
/* Text (--text-* = Aliasse; mehrere Komponenten nutzten sie ohne Definition) */
--bright:#e6edf3; --text-bright:#e6edf3;
--dim:#8b949e; --text-dim:#8b949e;
/* Akzente */
--accent:#e8a000; --up:#3fb950; --down:#f85149; --blue:#58a6ff;
/* Radius / Schatten — einheitliche Design-Tokens */
--r-sm:6px; --r:9px; --r-lg:13px;
--shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.28);
--shadow-sm:0 1px 2px rgba(0,0,0,.4);
--mono:"SF Mono",ui-monospace,"Cascadia Code","Courier New",monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,/* ══════════════════════════════════════════════════════════════════════
FLUIDE SCHRIFTGROESSE (2026-08-13, User-Wunsch: "auf jedem Geraet bzw.
je nach Fenstergroesse automatisch angepasst").
⚠ Umgesetzt mit rem + fluider WURZEL, NICHT mit em: `em` ist relativ zum
ELTERNelement und skaliert NICHT mit dem Fenster — verschachtelt
multipliziert es sich sogar (h2 mit 1,2em in einer Karte mit 1,1em
landet bei 1,32x). `rem` haengt dagegen an genau EINER Stellschraube.
⚠ EINE STUFE KLEINER (2026-08-13 nachmittags, User: "verkleinere alle
Schriftarten um 1em"). Woertlich waere 1em = 100 % = null, gemeint ist
also eine Stufe: -2px, exakt der Schritt, in dem die Groesse am 24.07.
zweimal HOCHgesetzt wurde. Am Handy damit ~16px statt ~18px.
390px -> 15,95px · 800px -> 18px · 1440px -> 21,2px · ab 1600px -> 22px
(davor: clamp(17px, 16px + 0.5vw, 24px) = 17,95 / 20 / 23,2 / 24)
➜ GROESSE GLOBAL AENDERN = NUR DIESE EINE ZEILE. Die 96 rem-Werte bleiben
unberuehrt, alle Groessenverhaeltnisse untereinander auch. Eine Stufe
entspricht 2px in den beiden Zahlen (Minimum und Steigungs-Basis), der
Deckel wandert mit.
⚠ ABSTAENDE bleiben in px. Sie mitzuskalieren waere ein weit groesserer
Eingriff (Grid, Karten, Trade-Leiste) und kann Layouts kippen — die
Anfrage betraf die Schrift. Folge: die Schrift sitzt jetzt etwas
lockerer in den unveraenderten Polstern.
Zurueck auf 18px-Basis: clamp(17px, 16px + 0.5vw, 24px).
Zurueck auf die alte px-Fassung ganz: `web/style.css.bak-2026-08-13`.
══════════════════════════════════════════════════════════════════════ */
html { font-size: clamp(15px, 14px + 0.5vw, 22px); }
body{margin:0;padding:0}
body{
background:var(--bg); color:var(--bright);
/* Sans für Text/Labels + tabellarische Ziffern (saubere Zahlen-Ausrichtung);
Terminal-Charakter bleibt über Mono bei Kursen/Logs. */
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
font-variant-numeric:tabular-nums;
font-size:1rem; line-height:1.45;
padding-bottom:env(safe-area-inset-bottom);
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* Zahlen-lastige Werte in Mono (aligned, Trading-Terminal-Optik) */
#hdr-price,#hdr-pnl,.px span,.tb-val,.tb-field input,
.hdr-clock,.gap-zone,.trade .p{font-family:var(--mono)}
/* ── Header (scrollt unter den Tabs) ────── */
header{
background:var(--bg);
padding:12px 14px;
border-bottom:1px solid var(--border);
}
.sym-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
#symbol{font-size:1.2222rem;font-weight:700;letter-spacing:.5px;flex:0 0 auto}
.hdr-right{display:flex;align-items:center;gap:8px;min-width:0}
.hdr-meta{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;min-width:0}
.hdr-meta .session-line{margin-top:1px}
.hdr-clock{font-size:0.7778rem;color:var(--dim);font-variant-numeric:tabular-nums;
white-space:nowrap}
.dot{width:11px;height:11px;border-radius:50%;display:inline-block}
.dot.on{background:var(--up);box-shadow:0 0 8px var(--up)}
.dot.off{background:var(--down);box-shadow:0 0 8px var(--down)}
/* stale = der Socket behauptet Verbindung, liefert aber nichts mehr (2026-08-07).
Bernstein + Pulsieren, damit der Unterschied zu „verbunden" auf einen Blick
sichtbar ist — genau dieser Zustand erzeugte den G/V-Lag. Schlägt `.on` und
`.off`, deshalb hier NACH beiden. */
.dot.stale{background:var(--warn,#f0a020);box-shadow:0 0 8px var(--warn,#f0a020);
animation:dotpuls 1.2s ease-in-out infinite}
@keyframes dotpuls{0%,100%{opacity:1}50%{opacity:.35}}
.price-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
/* flex-basis 28% → 3 Boxen je Reihe, die 5. Box (KURS/G/V) bricht sauber um */
.px{flex:1 1 28%;background:var(--card);border:1px solid var(--border);
border-radius:var(--r);padding:7px 10px;box-shadow:var(--shadow-sm)}
.px label{display:block;font-size:0.7222rem;color:var(--dim);letter-spacing:1px;
text-transform:uppercase}
.px span{font-size:1.1111rem;font-weight:600}
.px span.up{color:var(--up)} .px span.down{color:var(--down)}
/* KURS + G/V größer als die Konto-Kennzahlen (User-Vorgabe) */
#hdr-price, #hdr-pnl{font-size:1.4444rem;font-weight:700}
#spread{color:var(--blue)}
.session-line{margin-top:3px;font-size:0.7778rem;font-weight:600}
.session-line.ok{color:var(--up)}
.session-line.warn{color:var(--accent)}
.session-line.dim{color:var(--dim)}
/* ── Modul-Menü (Tabs, ganz oben & sticky) ─ */
#tabs{
position:sticky; top:0; z-index:6;
display:flex; gap:6px;
padding:calc(8px + env(safe-area-inset-top)) 10px 8px;
background:var(--bg); border-bottom:1px solid var(--border);
overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.tab{
flex:0 0 auto; padding:7px 14px; border-radius:var(--r); cursor:pointer;
background:var(--card); border:1px solid var(--border);
color:var(--dim); font-family:inherit; font-size:0.8889rem; font-weight:600;
transition:background .15s, color .15s, border-color .15s;
}
.tab:hover{color:var(--bright)}
.tab.active{background:var(--accent); color:#0a0d13; border-color:var(--accent);
box-shadow:0 2px 10px #e8a00033}
/* Mute-Button: klein, ganz rechts in der Tab-Leiste */
.mute-tab{margin-left:auto;padding:7px 10px;font-size:1rem;line-height:1}
.mute-tab.muted{opacity:.55}
.view.hidden{display:none}
.view-head{display:flex;align-items:center;justify-content:space-between;
padding:10px 12px 4px}
.view-head h2{margin:0;font-size:0.9444rem;letter-spacing:1px;color:var(--bright)}
.reload{background:var(--card);border:1px solid var(--border);color:var(--bright);
border-radius:var(--r);width:34px;height:30px;font-size:1.0556rem;cursor:pointer;
transition:background .15s,border-color .15s}
.reload:hover{border-color:var(--dim)}
/* ── Cards-Grid (Dashboard) ─────────────── */
main{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:11px}
.card{background:var(--card);border:1px solid var(--border);
border-radius:var(--r-lg);padding:12px 14px;box-shadow:var(--shadow-sm)}
.card.wide{grid-column:1 / -1}
/* Karten AUSSERHALB des Dashboard-Grids (Statistik-Tab, 2026-08-05): `main` ist
ein Grid mit eigenem padding, `#view-stats` ist eine schlichte <section> — ohne
diese Regel klebten die verschobenen Karten randlos aneinander und `.wide`
(grid-column) liefe ins Leere. */
#view-stats > .card,
#view-siglive > .card,
#view-siganzeige > .card{margin:11px 10px}
#view-stats > .card:last-child,
#view-siglive > .card:last-child,
#view-siganzeige > .card:last-child{margin-bottom:74px} /* Platz für die fixe Leiste */
/* Untertitel in der View-Kopfzeile: sagt in einem Halbsatz, wonach der Tab
sortiert ist — ohne ihn ist „SIG Live" vs. „SIG Anzeige" nicht selbsterklärend. */
.view-note{font-size:0.6667rem;color:var(--dim);margin-left:auto}
.card h2{margin:0 0 9px;font-size:0.7778rem;letter-spacing:1.5px;
text-transform:uppercase;color:var(--dim);font-weight:600}
.kv{display:flex;justify-content:space-between;align-items:baseline;
padding:2px 0;font-size:0.8889rem}
.kv span{color:var(--dim)}
.kv b{font-weight:600}
/* ── Aktueller Trade (Leiste über der Gesamtempfehlung) ───────────── */
.trade-bar{padding:8px 12px;border-color:#2d4a2d}
.trade-bar.hidden{display:none}
#card-trail.hidden{display:none} /* Trailing-Kachel ausgeblendet, 2026-07-22 */
.tb-title{margin:0 0 8px;font-size:0.7778rem;letter-spacing:1.5px;text-transform:uppercase;
color:var(--dim);font-weight:600}
/* Laufzeit-Uhr: im Titel mitlaufend (kompakt) + eigenes Feld in der Zeile */
.tb-runtime{margin-left:8px;color:var(--bright);font-family:var(--mono);
letter-spacing:.5px;text-transform:none}
.tb-field .tb-val.warn{color:var(--accent);border-color:#4a3600}
.tb-row{display:flex;flex-wrap:wrap;gap:10px}
/* EINHEITLICHES Feld-Design: Anzeige-Boxen (Richtung/Lots/Einsatz) und Eingabe-
Felder (SL/TP/Gewinn-Close/Notfall-Close) sehen identisch aus (Label über Box). */
.tb-field{display:flex;flex-direction:column;gap:2px}
.tb-field label{font-size:0.7222rem;color:var(--dim);letter-spacing:.5px}
.tb-field input, .tb-field .tb-val{width:88px;background:var(--surface-2);
border:1px solid var(--border);border-radius:var(--r-sm);color:var(--bright);
font-size:0.9444rem;font-weight:700;padding:6px 7px;text-align:center;
transition:border-color .15s, box-shadow .15s}
.tb-field .tb-val{display:block} /* nur Anzeige, kein Input */
.tb-field input:focus{outline:none;border-color:var(--blue);
box-shadow:0 0 0 2px #58a6ff33}
.tb-field.stop input{border-color:#5c1a1a;color:#f85149} /* SL/Notfall rötlich */
.tb-field.gain input{border-color:#1a4731;color:#3fb950} /* TP/Gewinn grünlich */
.tb-field.stop input::placeholder,.tb-field.gain input::placeholder{color:#8b949e88}
.tb-dir.up{color:var(--up)} .tb-dir.down{color:var(--down)}
/* Auto-Close-Schalter als Box im Feld-Design: grau=AUS, grün=AN */
.tb-btn{cursor:pointer;color:var(--dim)}
.tb-btn.on{background:#0d2a16;border-color:#1a4731;color:#3fb950}
.tb-btn:active{filter:brightness(1.3)}
/* ── Gesamtempfehlung ───────────────────── */
/* Circuit Breaker Banner (Tagesverlust-Stopp) — ganz oben, rot bei ausgelöst */
.circuit{margin:0 0 11px;padding:11px 14px;border-radius:var(--r);font-weight:700;
font-size:0.8889rem;text-align:center;letter-spacing:.2px}
.circuit.hidden{display:none}
.circuit.tripped{background:#3d1a1a;color:#ff6b6b;border:1px solid var(--down);
box-shadow:0 0 0 1px var(--down)}
.circuit.near{background:#2a1f00;color:var(--accent);border:1px solid #4a3600}
/* Chartmuster-Karte (visuell, reine Anzeige) */
#card-patterns .pt-tf{font-size:0.6111rem;color:var(--dim);font-weight:600;margin-left:6px}
.pt-item{background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--line);
border-radius:var(--r-sm);padding:9px 12px;margin-bottom:8px}
.pt-item.up{border-left-color:var(--up)} .pt-item.down{border-left-color:var(--down)}
.pt-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pt-svg{flex:0 0 auto;background:var(--bg);border:1px solid var(--border);
border-radius:4px;padding:1px 2px}
.pt-name{font-weight:700;font-size:0.8333rem}
.pt-item.up .pt-name{color:var(--up)} .pt-item.down .pt-name{color:var(--down)}
.pt-badge{font-size:0.6111rem;font-weight:700;border-radius:4px;padding:1px 7px}
.pt-badge.conf{background:#0d2a16;color:var(--up);border:1px solid #1a4731}
.pt-badge.form{background:#2a1f00;color:var(--accent);border:1px solid #4a3600}
.pt-q{margin-left:auto;font-size:0.6667rem;color:var(--dim);font-family:var(--mono)}
.pt-det{font-size:0.7222rem;margin-top:4px;font-family:var(--mono);color:var(--bright)}
.pt-note{font-size:0.6667rem;color:var(--dim);margin-top:3px}
.pt-disclaimer{font-size:0.6667rem;color:var(--dim);margin-top:6px;line-height:1.4}
.pt-disclaimer code{font-family:var(--mono);font-size:0.6111rem}
/* Kerzen-Anatomie — bewusst NEUTRAL gefärbt (keine grün/rot-Ampel): die
Lehrbuch-Deutung ist gemessen invertiert, eine Richtungsfarbe würde
systematisch falsch stupsen. Nur „hot" (Volumen>=2x) wird hervorgehoben. */
#card-candles .ca-tf{font-size:0.6111rem;color:var(--dim);font-weight:600;margin-left:6px}
.ca-item{background:var(--surface-2);border:1px solid var(--border);
border-left:3px solid var(--line);border-radius:var(--r-sm);
padding:8px 12px;margin-bottom:7px}
.ca-item.hot{border-left-color:var(--accent)}
.ca-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ca-name{font-weight:700;font-size:0.8333rem;color:var(--bright)}
.ca-vol{font-size:0.6111rem;font-weight:700;border-radius:4px;padding:1px 7px;
font-family:var(--mono);background:var(--bg);color:var(--dim);
border:1px solid var(--border)}
.ca-vol.hot{background:#2a1f00;color:var(--accent);border-color:#4a3600}
.ca-ago{margin-left:auto;font-size:0.6667rem;color:var(--dim);font-family:var(--mono)}
.ca-bars{font-size:0.6667rem;margin-top:3px;font-family:var(--mono);color:var(--dim)}
.ca-note{font-size:0.6667rem;color:var(--dim);margin-top:3px;line-height:1.4}
/* Erwartete Spanne — komprimiert in der Gesamtempfehlung (2026-08-05, die eigene
Karte ist entfallen). Bewusst OHNE Richtungsfarbe und ohne Rahmen: die Zeile
zeigt Streuung, sie darf optisch nicht mit der Bias-Nadel darüber konkurrieren. */
.kx-cone{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
margin:6px 0 0;padding-top:6px;border-top:1px solid var(--line)}
.kx-cone-lbl{font-size:0.6667rem;color:var(--dim)}
.kx-cone-item{font-family:var(--mono);font-size:0.7222rem;color:var(--bright)}
.kx-cone-item i{font-style:normal;font-size:0.6111rem;color:var(--dim);margin-right:3px}
.kx-cone-cov{margin-left:auto;font-size:0.6111rem;color:var(--dim)}
/* ⚠ Der Ring zeigt einen SCORE, keine Trefferwahrscheinlichkeit — die Beschriftung
sagt das jetzt mit (gemessen: conf_pct ist nicht kalibriert, in H2 invertiert). */
.kx-selfcal.up{color:var(--up)} .kx-selfcal.down{color:var(--down)}
.kx-selfcal.dim{color:var(--dim);opacity:.75}
.m-name{font-size:0.7778rem;color:var(--dim);font-weight:600}
/* ── Meldungen (EINHEITLICHES Design: Box + farbiger Links-Akzent) ─────────── */
#card-pos .squeeze-ind, #card-pos .bounce-ind, #card-pos .cur-near,
#card-pos .pos-srhint, #card-pos .pos-stophint, #card-pos .news-conflict,
#card-pos .reasons{
display:block; margin:0 0 7px; padding:8px 11px; border-radius:var(--r-sm);
background:var(--surface-2); border:1px solid var(--border);
border-left:3px solid var(--line);
font-size:0.8889rem; line-height:1.4; font-weight:600; letter-spacing:0; box-shadow:none;
}
/* leere Meldungen ausblenden (cur-near/srhint/reasons ohne Inhalt) */
#card-pos .cur-near:empty, #card-pos .pos-srhint:empty, #card-pos .pos-stophint:empty,
#card-pos .pos-srhint.hidden, #card-pos .pos-stophint.hidden, #card-pos .reasons:empty{display:none}
/* Gegen-/Stop-Seiten-Hinweis (reine Anzeige): hält = grün, bricht = rot */
#card-pos .pos-stophint.hold{color:var(--up); border-left-color:var(--up)}
#card-pos .pos-stophint.break{color:var(--down); border-left-color:var(--down)}
/* News-Konflikt (Flow steht gegen Signal/Position) — bernstein wie Warnungen */
#card-pos .news-conflict.warn{color:var(--accent); border-left-color:var(--accent)}
#card-pos .news-conflict.hidden, #card-pos .news-conflict:empty{display:none}
/* Farbvarianten — Links-Akzent + Textfarbe (Fläche bleibt einheitlich) */
#card-pos .squeeze-ind.idle, #card-pos .bounce-ind.idle,
#card-pos .reasons{color:var(--dim)}
#card-pos .bounce-ind.warn, #card-pos .pos-srhint.warn{
color:var(--accent); border-left-color:var(--accent)}
#card-pos .squeeze-ind.armed, #card-pos .pos-srhint.approach{
color:var(--blue); border-left-color:#1f6feb}
#card-pos .squeeze-ind.fire.long, #card-pos .pos-srhint.run,
#card-pos .cur-near.near-sup{color:var(--up); border-left-color:var(--up)}
#card-pos .squeeze-ind.fire.short, #card-pos .cur-near.near-res{
color:var(--down); border-left-color:var(--down)}
/* Setup/Lauf-Zeilen (Metadaten) fügen sich ein */
#card-pos .kv{padding:3px 0}
/* Header-KURS-Box färbt sich nahe S/R (rot=Widerstand, grün=Support) */
.px span.near-res{color:var(--down)} .px span.near-sup{color:var(--up)}
/* ── Signal ─────────────────────────────── */
.signal{font-size:1.2222rem;font-weight:700;color:var(--dim);margin-bottom:6px}
.signal.long{color:var(--up)} .signal.short{color:var(--down)}
.reasons{font-size:0.8333rem;color:var(--dim);margin-top:6px}
.ell-note{font-size:0.8333rem;color:var(--dim);margin-top:6px}
/* ── Agent ──────────────────────────────── */
.agent-head{font-weight:600;font-size:0.9444rem;margin-bottom:4px}
.agent-text{font-size:0.8889rem;color:var(--bright)}
.risks{margin:8px 0 0;padding-left:16px;font-size:0.8333rem;color:var(--accent)}
.risks li{margin:2px 0}
/* ── Trades ─────────────────────────────── */
.trades{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.trade{background:var(--bg);border:1px solid var(--border);
border-radius:6px;padding:6px 3px;text-align:center}
.trade .p{font-size:0.8889rem;font-weight:700}
.trade .i{font-size:0.7222rem;color:var(--dim);margin-top:2px}
.up{color:var(--up)} .down{color:var(--down)} .dim{color:var(--dim)}
@media(max-width:360px){
main{grid-template-columns:1fr}
.card:not(.wide){grid-column:1 / -1}
}
/* ── Aktionsleiste ──────────────────────── */
main{padding-bottom:74px} /* Platz für die fixe Leiste */
#actions{
position:fixed; left:0; right:0; bottom:0; z-index:8;
display:flex; gap:7px;
padding:9px 9px calc(9px + env(safe-area-inset-bottom));
background:rgba(10,13,19,.86); border-top:1px solid var(--border);
backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.btn{
flex:1; border:1px solid var(--border); border-radius:var(--r);
padding:12px 4px; font-size:0.9444rem; font-weight:700; color:var(--bright);
background:#1a1e24; font-family:inherit; cursor:pointer;
transition:background .12s, opacity .12s, transform .06s; touch-action:manipulation;
}
.btn:active{transform:translateY(1px)}
.btn.long {background:#1a6e35}
.btn.short {background:#8b1a1a}
.btn.close {background:#2d2000; color:var(--accent)}
.btn.tog {flex:.8; font-size:0.8889rem}
.btn.tog.on{background:#1f6feb; color:#fff}
/* Auto-Signal-Entry: bernstein statt blau — gemessen NICHT tragfähig (H1 negativ),
läuft nur auf ausdrücklichen User-Wunsch → Farbe signalisiert „Achtung, aktiv". */
.btn.tog.warn-on{background:#9e6a03; color:#fff}
.btn:disabled{opacity:.32; cursor:default}
/* Empfehlungs-Blinken der LONG/SHORT-Buttons */
@keyframes blkLong {0%,100%{background:#1a6e35}50%{background:#22c55e}}
@keyframes blkShort {0%,100%{background:#8b1a1a}50%{background:#ef4444}}
.btn.long.blink {animation:blkLong .7s ease-in-out infinite}
.btn.short.blink {animation:blkShort .7s ease-in-out infinite}
/* CLOSE blinkt, wenn das Signal gegen die offene Position dreht (Auto-Flip) */
@keyframes blkClose {0%,100%{background:#2d2000;color:var(--accent)}50%{background:#e8a000;color:#000}}
.btn.close.blink {animation:blkClose .6s ease-in-out infinite}
/* (Überdehnungs- & Squeeze-Anzeige nutzen jetzt das einheitliche Meldungs-Design
oben in der Position/Meldungen-Sektion — nur noch Farbvarianten je Zustand.) */
/* Live-Statistik (kompakt) */
.stx-row {display:flex;flex-direction:column;gap:8px}
.stx-grp {background:var(--card);border:1px solid var(--border);border-radius:8px;padding:8px 10px}
.stx-lbl {font-size:0.8333rem;color:var(--text-dim);margin-bottom:5px;letter-spacing:.3px}
.stx-cells {display:flex;flex-wrap:wrap;gap:6px 14px}
.stx-c {font-size:0.8889rem;color:var(--text-dim)}
.stx-c b {font-size:1rem;color:var(--text-bright);margin-left:3px}
/* Charts-Tab: M1/M5/M15/M30/H1 untereinander (Lightweight Charts) */
/* Kurslücken (Gaps): offene Fill-Magnete */
.gaps-list {display:flex;flex-direction:column;gap:6px}
.gap-row {display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;font-size:0.9444rem;
padding:6px 9px;background:var(--card);border:1px solid var(--border);border-radius:7px}
.gap-zone {font-variant-numeric:tabular-nums;color:var(--text-bright);font-weight:600}
.gap-fill {color:var(--text-dim)}
.gap-date {margin-left:auto;font-size:0.8333rem}
/* TF-Ampel (Welle): Wende je M1/M5/M15/M30 via EMA12/50-Kreuzung */
.tf-turns {display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 2px}
.tf-chip {display:inline-flex;align-items:center;gap:4px;padding:3px 8px;
border-radius:7px;font-size:0.8889rem;background:var(--card);border:1px solid var(--border);
color:var(--text-dim)}
.tf-chip b {font-weight:600;font-size:0.8333rem;letter-spacing:.3px}
.tf-chip.up {color:#3fb950;border-color:#1a4731}
.tf-chip.down {color:#f85149;border-color:#3d1a1a}
.tf-chip.flat {color:var(--dim)}
.tf-turn {font-weight:700}
.tf-ago {font-size:0.7778rem;opacity:.7;background:var(--surface-2);border-radius:4px;padding:0 4px}
/* Frische Wende: statisch hervorgehoben (kein Blinken) */
.tf-chip.fresh.up {background:#0d2a16;border-color:#3fb950;color:var(--bright)}
.tf-chip.fresh.down {background:#2a0d0d;border-color:#f85149;color:var(--bright)}
/* ── Modal ──────────────────────────────── */
.modal{
position:fixed; inset:0; z-index:20; display:flex;
align-items:center; justify-content:center;
background:#000000aa; padding:20px;
}
.modal.hidden,.toast.hidden{display:none}
.box{
background:var(--card); border:1px solid var(--accent);
border-radius:14px; padding:18px; width:100%; max-width:340px;
}
.box-title{font-size:1.0556rem;font-weight:700;margin-bottom:8px}
.box-msg{font-size:0.9444rem;color:var(--bright);margin-bottom:14px;white-space:pre-line}
.box-msg.danger{color:var(--down);font-weight:600}
#modal-input.hidden{display:none} /* nur im Token-Modus sichtbar */
#modal-input{
width:100%; padding:11px; margin-bottom:14px; font-size:1.0556rem;
background:var(--bg); border:1px solid var(--border); border-radius:8px;
color:var(--bright); font-family:inherit;
}
.box-btns{display:flex;gap:10px}
.mbtn{
flex:1; padding:12px; border:none; border-radius:9px; font-size:1rem;
font-weight:700; font-family:inherit; cursor:pointer;
}
.mbtn.ok{background:var(--accent);color:#000}
.mbtn.cancel{background:#1a1e24;color:var(--bright);border:1px solid var(--border)}
/* ── Logs ───────────────────────────────── */
.logbox{
margin:0 10px 10px; padding:10px; background:#000; border:1px solid var(--border);
border-radius:8px; font-size:0.7778rem; line-height:1.45; color:#c9d1d9;
white-space:pre-wrap; word-break:break-word; max-height:70vh; overflow-y:auto;
}
/* ── Statistik ──────────────────────────── */
#stats-body{padding:0 10px 12px}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:10px;
padding:10px 12px;margin-bottom:10px}
.stat-card h3{margin:0 0 8px;font-size:0.8333rem;letter-spacing:1px;color:var(--accent);
text-transform:uppercase}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}
.stat-grid .kv{font-size:0.8889rem}
.stat-grid .kv.net span{color:var(--accent)}
.sub-h{margin:14px 12px 6px;font-size:0.8333rem;letter-spacing:1px;
color:var(--dim);text-transform:uppercase}
.setup-hint{padding:0 12px 6px;font-size:0.7778rem}
.setup-row{display:grid;grid-template-columns:1.4fr .9fr 1fr .75fr;gap:6px;
align-items:baseline;padding:7px 12px;border-bottom:1px solid var(--border)}
.setup-name{font-size:0.8333rem;color:var(--bright);word-break:break-word}
.setup-stat{font-size:0.8333rem;text-align:right}
/* ── News ───────────────────────────────── */
.news-sent{margin:4px 10px 8px;font-size:0.8889rem;color:var(--dim)}
#news-body{padding:0 10px 12px}
.news-item{display:block;background:var(--card);border:1px solid var(--border);
border-radius:8px;padding:8px 10px;margin-bottom:8px;text-decoration:none}
.news-item .t{font-size:0.8889rem;color:var(--bright);line-height:1.35}
.news-item .s{font-size:0.7222rem;color:var(--dim);margin-top:3px}
/* ── Toast ──────────────────────────────── */
.toast{
position:fixed; left:50%; bottom:84px; transform:translateX(-50%);
z-index:25; background:var(--card); border:1px solid var(--border);
border-radius:10px; padding:10px 16px; font-size:0.9444rem; max-width:90%;
box-shadow:0 6px 24px #000a;
}
.toast.ok{border-color:var(--up)} .toast.err{border-color:var(--down)}
/* ── Marktstruktur-Karte (M30, reine Anzeige) ───────────────────────── */
#card-structure h2 .ms-tf{ font-size:0.8333rem; color:var(--dim); font-weight:600;
border:1px solid var(--border); border-radius:var(--r-sm); padding:1px 6px; margin-left:6px; }
.ms-top{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:8px 0; }
.ms-trend{ font-weight:700; font-size:1.0556rem; }
.ms-trend.up{ color:var(--up); } .ms-trend.down{ color:var(--down); } .ms-trend.dim{ color:var(--dim); }
.ms-swings{ display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
.ms-chip{ font:600 0.8889rem/1 var(--mono); padding:3px 6px; border-radius:var(--r-sm);
background:var(--surface-2); border:1px solid var(--border); }
.ms-chip.up{ color:var(--up); border-color:#2ea04333; }
.ms-chip.down{ color:var(--down); border-color:#f8514933; }
.ms-chip.dim{ color:var(--dim); }
.ms-arrow{ color:var(--dim); font-size:0.8333rem; }
.ms-bos{ display:flex; align-items:center; gap:8px; font-size:0.9444rem; margin:6px 0; }
.ms-bos.hidden{ display:none; }
.ms-bos-lbl{ font:600 0.8333rem/1 var(--mono); color:var(--dim);
border:1px solid var(--border); border-radius:var(--r-sm); padding:2px 6px; }
.ms-bos .up{ color:var(--up); } .ms-bos .down{ color:var(--down); }
.ms-chan{ margin-top:8px; }
.ms-chan-head{ display:flex; justify-content:space-between; align-items:baseline; font-size:0.9444rem; }
.ms-chan-head .up{ color:var(--up); font-weight:700; }
.ms-chan-head .down{ color:var(--down); font-weight:700; }
.ms-chan-head .dim{ color:var(--dim); font-weight:700; }
.ms-chan-note{ color:var(--dim); font-size:0.8889rem; }
.ms-chan-track{ position:relative; height:8px; margin:6px 0 3px;
background:var(--surface-2); border:1px solid var(--border); border-radius:99px; overflow:visible; }
.ms-chan-fill{ height:100%; border-radius:99px 0 0 99px;
background:linear-gradient(90deg,#1f6feb55,#58a6ff88); transition:width .4s; }
.ms-chan-dot{ position:absolute; top:50%; width:12px; height:12px; margin-left:-6px;
transform:translateY(-50%); border-radius:50%; background:var(--bright);
border:2px solid var(--card); box-shadow:0 0 0 1px var(--border); transition:left .4s; }
.ms-chan-scale{ display:flex; justify-content:space-between; font-size:0.7778rem; color:var(--dim); }
/* ── Auto-Squeeze-Monitor (B4, Statistik-Tab) ───────────────────────── */
.sqm-head{ display:flex; align-items:center; gap:10px; margin:4px 0 8px; }
.sqm-badge{ font:600 0.8889rem/1 var(--mono); padding:3px 8px; border-radius:var(--r-sm);
background:var(--surface-2); border:1px solid var(--border); }
.sqm-badge.up{ color:var(--up); border-color:#2ea04355; }
.sqm-badge.down{ color:var(--down); border-color:#f8514955; }
.sqm-badge.dim{ color:var(--dim); }
.sqm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:560px){ .sqm-grid{ grid-template-columns:1fr; } }
.sqm-col{ background:var(--card); border:1px solid var(--border); border-radius:var(--r);
padding:10px 12px; }
.sqm-h{ font-size:0.8889rem; color:var(--dim); font-weight:600; margin-bottom:6px; }
.sqm-row{ display:flex; justify-content:space-between; align-items:baseline;
font-size:0.9444rem; padding:2px 0; border-bottom:1px solid var(--line); }
.sqm-row:last-child{ border-bottom:none; }
.sqm-row b{ font-family:var(--mono); }
.sqm-row b.up{ color:var(--up); } .sqm-row b.down{ color:var(--down); }
.sqm-exp{ font-size:0.8333rem; color:var(--dim); margin-top:6px; }
.sqm-note{ font-size:0.8889rem; color:var(--dim); margin-top:8px; line-height:1.4; }
/* Kurs aus Hyperliquid (Markt bei Pepperstone geschlossen) - bewusst ANDERS
gefaerbt als der Broker-Kurs, damit man ihn nicht verwechselt. */
#hdr-price.hl-price{color:var(--accent)}
#hdr-price-lbl{letter-spacing:.3px}
/* ── Manuelle Trades (2026-08-04) ─────────────────────────────────────────
Bewusst NEUTRAL gehalten: die Karte beschreibt die eigene Historie und
sagt nichts voraus. Farbe nur am Vorzeichen der Summe, keine Ampel. */
#card-manual .mt-sub { font-size:0.7222rem; color: var(--dim); font-weight: 400; }
.mt-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px; margin-bottom: 10px;
}
.mt-box {
background: var(--surface-2); border: 1px solid var(--border);
border-radius: var(--r-sm); padding: 9px 11px;
}
.mt-lbl { font-size:0.7222rem; color: var(--dim); margin-bottom: 3px; }
.mt-val { font-family: var(--mono); font-size:1.1667rem; font-weight: 600; }
.mt-sub2 { font-size:0.6667rem; color: var(--dim); font-family: var(--mono); margin-top: 2px; }
.mt-split { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.mt-chip {
background: var(--surface-2); border: 1px solid var(--line);
border-radius: var(--r-sm); padding: 5px 10px;
font-size:0.7222rem; font-family: var(--mono);
}
.mt-note { font-size:0.6667rem; line-height: 1.45; }
/* ── Feste Einsatz-Margin in der Order-Leiste (2026-08-04) ────────────────
Sitzt bewusst bei den Order-Buttons, nicht in der Trade-Leiste: die ist nur
bei offener Position sichtbar, der Einsatz muss aber VORHER einstellbar sein. */
.mg-field { display: inline-flex; flex-direction: column; gap: 2px; margin-right: 8px; }
.mg-field label { font-size:0.6111rem; color: var(--dim); line-height: 1; }
.mg-field input {
width: 74px; padding: 5px 7px;
background: var(--surface-2); color: var(--bright);
border: 1px solid var(--border); border-radius: var(--r-sm);
font-family: var(--mono); font-size:0.7778rem; text-align: right;
}
.mg-field input:focus { outline: none; border-color: #1f6feb; }
/* aktiv gesetzt = sichtbar hervorgehoben, damit ein fester Einsatz nicht
unbemerkt bestehen bleibt */
.mg-field input.on { border-color: #d29922; color: #d29922; }
/* Prozent-Feld ohne Wirkung, weil links ein FESTER Betrag steht — sichtbar
zurückgenommen, statt zwei scheinbar gleichrangige Felder zu zeigen. */
.mg-field.muted { opacity: .45; }
.mg-field.muted input { border-style: dashed; }
/* HL-Kontext in den Meldungen — neutral, weil gemessen ohne Prognosewert. */
.hl-note{font-size:0.7222rem;color:var(--dim);font-family:var(--mono);
padding:5px 0;border-top:1px solid var(--line);margin-top:5px}
.hl-note.hidden{display:none}
/* ── M15 Setup-Bereitschaft (2026-08-08, Ersatz der Gesamtempfehlung) ──────
Sequenzielle Gate-Kette statt Score-Aggregation. Das Status-Banner ist
bewusst das groesste Element der Karte: die gemessene Kern-Leckage sind
diskretionaere Abweichungen, nicht verpasste Gelegenheiten - deshalb muss
auch das NICHT-Handeln ausdruecklich bestaetigt werden. */
#card-m15{border-color:var(--accent)}
.m15-status{font-size:1.0556rem;font-weight:700;letter-spacing:.3px;
padding:10px 12px;border-radius:var(--r);margin-bottom:10px;
background:var(--surface-2);border:1px solid var(--border);color:var(--dim)}
.m15-status.gruen{color:var(--up);border-color:#1d5c2a;background:#0e2413}
.m15-status.gelb {color:var(--accent);border-color:#4a3600;background:#241d05}
.m15-status.rot {color:var(--down);border-color:#5c1a1a;background:#240f0f}
.m15-grid{display:flex;flex-direction:column;gap:5px}
.m15-item{font-size:0.8333rem;color:var(--dim);padding:4px 8px;border-radius:var(--r-sm);
background:var(--surface-2);border:1px solid var(--line)}
.m15-item.ok {color:var(--bright);border-color:#1d5c2a}
.m15-item.warn{color:var(--accent);border-color:#4a3600}
.m15-item.fail{color:var(--down);border-color:#5c1a1a}