:root{ /* Der Grund war blaugrau und damit kuehl. Jetzt ein warmes Papierweiss: dieselbe Helligkeit, aber ein Hauch Gelb darin. Die Flaechen bleiben ruhig, die Seite wirkt weniger nach Buerosoftware. */ --bg:#faf8f4; --panel:#ffffff; --panel2:#f4f1ea; --line:#e5ded2; --txt:#1b2430; --muted:#6b6357; --accent:#b45309; --green:#15803d; --red:#a52a2a; --blue:#1d4ed8; /* Je Bereich ein eigener Ton. Er faerbt nur Kleinigkeiten — Kopfstreifen, aktive Punkte, Ueberschriften —, damit man am Farbton merkt, wo man ist, ohne dass es bunt wird. */ --ton:#b45309; --ton-weich:rgba(180,83,9,.10); } /* Eine Leiter aus Blau: Der erste Menuepunkt traegt das tiefste Marine, und mit jedem weiteren wird es eine Stufe heller. Die Farbe ordnet damit auch, statt nur zu unterscheiden. Fuer Text steht jeweils der dunklere Ton bereit — das helle Blau allein traegt auf hellem Grund nicht genug Kontrast. */ body[data-bereich="maerkte"] {--ton:#0d3b66;--ton-weich:rgba(13,59,102,.10)} body[data-bereich="tagebuch"] {--ton:#15568a;--ton-weich:rgba(21,86,138,.10)} body[data-bereich="werkzeuge"]{--ton:#1c71ad;--ton-weich:rgba(28,113,173,.10)} body[data-bereich="strategie"]{--ton:#1d72a6;--ton-weich:rgba(36,137,199,.10)} [data-b="maerkte"] {--eigen:#0d3b66;--eigen2:#0a2f52;--eigen-weich:rgba(13,59,102,.12)} [data-b="tagebuch"] {--eigen:#15568a;--eigen2:#114670;--eigen-weich:rgba(21,86,138,.12)} [data-b="werkzeuge"]{--eigen:#1c71ad;--eigen2:#175d8e;--eigen-weich:rgba(28,113,173,.12)} [data-b="strategie"]{--eigen:#2489c7;--eigen2:#1d72a6;--eigen-weich:rgba(36,137,199,.12)} *{box-sizing:border-box;margin:0;padding:0} [hidden]{display:none!important} body{background:var(--bg);color:var(--txt);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.55;padding:0;margin:0} /* Die Kopfleiste laeuft ueber die ganze Breite, der Inhalt bleibt in einer lesbaren Spalte. Frueher trug die Breite — dann konnte die Leiste nur so breit werden wie der Text. */ .inhalt{max-width:980px;margin:0 auto;padding:0 20px 20px} /* Der Fuss laeuft ueber die ganze Bildschirmbreite, wie die Kopfleiste. */ .fuss-in{max-width:none;margin:0;padding:0 clamp(16px,2.6vw,36px)} a{color:var(--blue);text-decoration:none} a:hover{text-decoration:underline} h1{font-size:1.55rem;font-weight:700;letter-spacing:.3px} h2{font-size:1.05rem;margin:26px 0 12px;color:var(--ton);text-transform:uppercase;letter-spacing:1px;font-weight:600;border-bottom:1px solid var(--line);padding-bottom:6px} .sub{color:var(--muted);font-size:.85rem;margin-top:4px} .header{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px;border-bottom:2px solid var(--ton-weich);padding-bottom:16px} h1{color:var(--txt)} /* Ein schmaler Streifen in der Bereichsfarbe ueber der Seite. */ .inhalt{position:relative} .bereich-streifen{height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,var(--ton),var(--ton-weich));margin:0 0 18px} .badge{display:inline-block;padding:6px 14px;border-radius:20px;font-weight:700;font-size:.9rem} .badge.bullish{background:rgba(46,204,113,.15);color:var(--green);border:1px solid var(--green)} .badge.bearish{background:rgba(255,91,91,.15);color:var(--red);border:1px solid var(--red)} .badge.neutral{background:rgba(74,163,255,.15);color:var(--blue);border:1px solid var(--blue)} .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:18px} .card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:0 1px 2px rgba(16,32,52,.05)} .card .label{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.6px} .card .price{font-size:1.6rem;font-weight:700;margin-top:6px} .card .chg{font-size:.88rem;margin-top:2px;font-weight:600} .up{color:var(--green)} .down{color:var(--red)} .flat{color:var(--blue)} .fazit{background:var(--ton-weich);border-left:4px solid var(--ton);border-radius:8px;padding:16px 18px;margin-top:18px} table{width:100%;border-collapse:collapse;margin-top:6px;font-size:.92rem} th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)} th{color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.6px} td.lvl{font-weight:700;font-variant-numeric:tabular-nums} .res{color:var(--red)} .sup{color:var(--green)} .piv{color:var(--blue)} ul.drv{list-style:none;margin-top:6px} ul.drv li{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:11px 14px;margin-bottom:9px} ul.drv li b{color:var(--accent)} .scen{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px} .scen .box{border-radius:10px;padding:15px;border:1px solid var(--line)} .scen .bull{background:rgba(46,204,113,.07);border-color:rgba(46,204,113,.4)} .scen .bear{background:rgba(255,91,91,.07);border-color:rgba(255,91,91,.4)} .scen h3{font-size:.95rem;margin-bottom:8px} .scen .bull h3{color:var(--green)} .scen .bear h3{color:var(--red)} .scen p{font-size:.88rem} .disc{margin-top:26px;background:var(--panel2);border:1px dashed var(--line);border-radius:10px;padding:14px 16px;font-size:.78rem;color:var(--muted)} .tag{display:inline-block;font-size:.72rem;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:2px 8px;margin-right:6px;margin-bottom:4px} /* Landing / instrument tiles */ .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:20px} .tile{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;display:block;transition:border-color .15s,box-shadow .15s;box-shadow:0 1px 2px rgba(16,32,52,.05)} .tile:hover{box-shadow:0 4px 14px rgba(16,32,52,.09)} .tile:hover{border-color:var(--accent);text-decoration:none} .tile .t-name{font-size:1.15rem;font-weight:700;color:var(--txt)} .tile .t-sym{color:var(--muted);font-size:.78rem;margin-top:2px} .tile .t-price{font-size:1.7rem;font-weight:700;margin-top:12px;color:var(--txt)} .tile .t-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px} .archive{list-style:none;margin-top:6px} .archive li{border-bottom:1px solid var(--line);padding:10px 2px;display:flex;justify-content:space-between;align-items:center} .archive li .a-date{font-variant-numeric:tabular-nums;font-weight:600} .archive li .a-meta{color:var(--muted);font-size:.85rem} .tvchart{position:relative;height:480px;width:100%;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:8px;background:var(--panel)} .fs-btn{position:absolute;top:10px;right:10px;z-index:6;background:rgba(255,255,255,.92);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:5px 11px;font-size:.8rem;cursor:pointer} .fs-btn:hover{border-color:var(--accent);color:var(--accent)} .chart-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px} .chart-toolbar .ct-label{color:var(--muted);font-size:.8rem;margin-right:2px} .chart-toolbar .ct-sep{width:1px;height:18px;background:var(--line);margin:0 6px} .chart-toolbar button{background:var(--panel);color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:5px 12px;font-size:.82rem;cursor:pointer} .chart-toolbar button:hover{border-color:var(--accent);color:var(--txt)} .chart-toolbar button.active{background:rgba(180,83,9,.10);color:var(--accent);border-color:var(--accent)} .tvchart:fullscreen{height:100vh;width:100vw;border:0;border-radius:0;margin:0} .tvchart:-webkit-full-screen{height:100vh;width:100vw} details.deep{margin-top:14px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:0 14px} details.deep>summary{cursor:pointer;padding:13px 0;font-weight:600;color:var(--accent);list-style:none} details.deep>summary::-webkit-details-marker{display:none} details.deep>summary::before{content:"▸ "} details.deep[open]>summary::before{content:"▾ "} .deep-body{padding:2px 0 14px;font-size:.92rem} .deep-body p{margin-bottom:10px} .deep-body .warn{background:rgba(180,83,9,.06);border-left:3px solid var(--accent);padding:9px 12px;border-radius:6px;font-size:.84rem;color:var(--muted);margin-bottom:12px} .setups{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:6px 0} .setup{border:1px solid var(--line);border-radius:8px;padding:12px} .setup.long{background:rgba(46,204,113,.06);border-color:rgba(46,204,113,.4)} .setup.short{background:rgba(255,91,91,.06);border-color:rgba(255,91,91,.4)} .setup h4{font-size:.9rem;margin-bottom:8px} .setup.long h4{color:var(--green)} .setup.short h4{color:var(--red)} .setup p{font-size:.85rem;margin-bottom:6px} @media(max-width:560px){.setups{grid-template-columns:1fr}} /* Ein Fuss fuer alle Seiten: ueber die ganze Breite abgesetzt, der Text in derselben Spalte wie der Inhalt darueber. */ .fuss{margin-top:40px;padding:22px 0 28px;background:var(--panel2); border-top:1px solid var(--line);color:var(--muted);font-size:.78rem; line-height:1.65} .fuss p{margin:0;max-width:60ch} .fuss-text{display:grid;gap:10px 34px;margin-bottom:4px} @media(min-width:900px){.fuss-text{grid-template-columns:repeat(3,1fr)} .fuss p{max-width:none}} .fuss-tags{margin-bottom:10px} /* Auf dem Telefon rueckt der Fuss enger zusammen — derselbe Text, weniger Luft. Die Rechtslinks stehen im Konto-Menue oben links und nicht noch einmal hier. */ @media(max-width:700px){ .fuss{margin-top:24px;padding:14px 0 18px;font-size:.74rem} .fuss-zeile{margin-top:8px;padding-top:8px;font-size:.72rem} } .fuss-zeile{display:flex;justify-content:space-between;align-items:baseline; gap:14px;flex-wrap:wrap;margin-top:14px;padding-top:12px; border-top:1px solid var(--line)} .fuss-links a{color:var(--muted);margin-left:16px;text-decoration:underline} .fuss-links a:hover{color:var(--ton)} /* ---- Strategie-Bereich ---- */ .subnav{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 18px} .subnav a{font-size:.86rem;padding:5px 13px;border:1px solid var(--line);border-radius:999px; background:var(--panel);color:var(--muted)} .subnav a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none} .subnav a.active{background:rgba(180,83,9,.10);border-color:var(--accent);color:var(--accent);font-weight:600} figure.fig{margin:20px 0} img.chart{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:12px; background:var(--panel);box-shadow:0 1px 3px rgba(16,32,52,.06)} figure.fig figcaption{color:var(--muted);font-size:.8rem;margin-top:8px;line-height:1.5} ol.steps{margin:10px 0 0 0;padding-left:0;list-style:none;counter-reset:st} ol.steps li{counter-increment:st;position:relative;padding:11px 14px 11px 46px;margin-bottom:9px; background:var(--panel);border:1px solid var(--line);border-radius:8px} ol.steps li::before{content:counter(st);position:absolute;left:12px;top:11px;width:23px;height:23px; border-radius:50%;background:rgba(180,83,9,.10);color:var(--accent);font-size:.78rem;font-weight:700; display:flex;align-items:center;justify-content:center} p{margin-bottom:11px} /* ---- Startseiten-Dashboard ---- */ .dash{margin-top:22px;border:1px solid var(--line);border-radius:16px;background:var(--panel); box-shadow:0 1px 3px rgba(16,32,52,.06);overflow:hidden} .dash-bar{display:flex;justify-content:space-between;align-items:baseline;gap:10px; flex-wrap:wrap;padding:13px 18px 0} .dash-title{color:var(--accent);font-size:.78rem;text-transform:uppercase;letter-spacing:1px; font-weight:700} .dash-hint{color:var(--muted);font-size:.74rem} .dash-stage{position:relative;padding:14px 18px 20px;min-height:232px} .slide{display:none;animation:fade .5s ease} .slide.is-active{display:block} @keyframes fade{from{opacity:0}to{opacity:1}} .s-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap} .s-name{font-size:1.5rem;font-weight:700;line-height:1.2} .s-sym{color:var(--muted);font-size:.8rem;margin-top:2px} .s-price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:14px} .s-val{font-size:2.5rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1} .s-chg{font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums} .s-levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px; margin-top:18px} .s-levels .lv{background:var(--panel2);border:1px solid var(--line);border-radius:10px; padding:9px 12px;display:flex;justify-content:space-between;align-items:baseline;gap:8px} .s-levels .lv span{color:var(--muted);font-size:.72rem;text-transform:uppercase; letter-spacing:.5px} .s-levels .lv b{font-variant-numeric:tabular-nums;font-size:.95rem} .s-levels .lv.res b{color:var(--red)} .s-levels .lv.sup b{color:var(--green)} .s-levels .lv.piv b{color:var(--blue)} .s-note{color:var(--muted);font-size:.86rem;margin-top:14px} .s-link{display:inline-block;margin-top:12px;font-size:.88rem;font-weight:600} .dash-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--line)} .dash-progress i{display:block;height:100%;width:100%;background:var(--accent); transform-origin:left;animation:sweep 5s linear infinite} .dash.is-paused .dash-progress i{animation-play-state:paused} @keyframes sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}} .dash-dots{display:flex;gap:8px;justify-content:center;padding:12px 0 16px; border-top:1px solid var(--line)} .dash-dots .dot{width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer; border:1px solid var(--line);background:var(--panel2);transition:all .15s} .dash-dots .dot:hover{border-color:var(--accent)} .dash-dots .dot.is-active{background:var(--accent);border-color:var(--accent);width:26px; border-radius:5px} @media(max-width:560px){ .s-val{font-size:2rem} .dash-stage{min-height:280px;padding:14px 14px 20px} } @media(prefers-reduced-motion:reduce){ .slide{animation:none} .dash-progress i{animation:none;transform:scaleX(1)} } /* Kachel-Fußzeile: Badge und Datum sollen sich nicht drängeln */ .tile .t-foot{flex-wrap:wrap;gap:8px} .tile .badge{font-size:.76rem;padding:5px 11px;line-height:1.35} .tile .a-meta{color:var(--muted);font-size:.8rem;white-space:nowrap;margin-left:auto} /* ---- Dashboard: Leiste, Tabs, Kacheln ---- */ .dash-bar{align-items:center} .dash-left,.dash-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .fresh{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;color:var(--muted)} .fresh i{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block} .fresh.warn i{background:var(--accent)} .fresh.alt i{background:var(--red)} .mood{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;color:var(--muted)} .mood i{width:7px;height:7px;border-radius:50%;display:inline-block} .mood i.bullish{background:var(--green)} .mood i.bearish{background:var(--red)} .mood i.neutral{background:var(--blue)} .s-flags{display:flex;flex-direction:column;align-items:flex-end;gap:6px} .near{font-size:.72rem;color:var(--accent);border:1px solid var(--accent);border-radius:6px; padding:2px 8px;background:rgba(180,83,9,.08);white-space:nowrap} .s-week{color:var(--muted);font-size:.85rem} .s-price .spark{width:132px;height:34px;margin-left:auto} .dash-foot{display:flex;align-items:center;justify-content:center;gap:14px;padding:10px 0 14px; border-top:1px solid var(--line);position:relative} .dash-dots{padding:0;border:0} .pp{position:absolute;left:14px;background:var(--panel2);color:var(--muted); border:1px solid var(--line);border-radius:8px;padding:3px 9px;font-size:.7rem;cursor:pointer; line-height:1.6} .pp:hover{border-color:var(--accent);color:var(--accent)} .dash-dots .dot[hidden]{display:none} .tabs{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 4px} .tab{background:var(--panel);color:var(--muted);border:1px solid var(--line);border-radius:999px; padding:6px 15px;font-size:.86rem;cursor:pointer;display:inline-flex;align-items:center;gap:7px} .tab:hover{border-color:var(--accent);color:var(--accent)} .tab.is-active{background:rgba(180,83,9,.10);border-color:var(--accent);color:var(--accent); font-weight:600} .tab .cnt{font-size:.72rem;background:var(--panel2);border:1px solid var(--line);border-radius:999px; padding:0 7px;line-height:1.6} .tab.is-active .cnt{background:var(--panel);border-color:var(--accent)} .tile[hidden]{display:none} .tile .t-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px} .tile .t-head .spark{width:96px;height:30px;flex:none;opacity:.9} .tile .t-chg{font-size:.9rem;font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums} .tile .t-price{margin-top:10px} @media(max-width:560px){ .s-price .spark{display:none} .dash-bar{gap:6px} .tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px} .tab{flex:none} } /* ---- Kurzanalyse auf der Kopfkarte ---- */ .s-kurz{margin-top:12px;background:var(--panel2);border-left:3px solid var(--accent); border-radius:8px;padding:11px 14px;font-size:.88rem;line-height:1.55} .s-kurz .k-tag{display:block;color:var(--accent);font-size:.68rem;text-transform:uppercase; letter-spacing:.9px;font-weight:700;margin-bottom:4px} /* ---- Tabellenansicht ---- */ .tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel); margin-top:12px;box-shadow:0 1px 2px rgba(16,32,52,.05)} table.board{width:100%;border-collapse:collapse;margin:0;font-size:.9rem;min-width:660px} table.board th{padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap; background:var(--panel2)} table.board th.s-able{cursor:pointer;user-select:none} table.board th.s-able:hover{color:var(--accent)} table.board th.s-able::after{content:"";opacity:.35;margin-left:5px} table.board th.asc::after{content:"▲";opacity:.9;color:var(--accent)} table.board th.desc::after{content:"▼";opacity:.9;color:var(--accent)} table.board td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle} table.board tr:last-child td{border-bottom:0} table.board tbody tr:hover{background:var(--panel2)} table.board .c-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} table.board .c-name a{font-weight:700;color:var(--txt)} table.board .c-name a:hover{color:var(--accent);text-decoration:none} table.board .r-sym{display:block;color:var(--muted);font-size:.74rem;margin-top:1px} table.board .c-bias{white-space:nowrap} table.board .c-bias .badge{font-size:.74rem;padding:4px 10px} table.board .c-near{color:var(--muted)} table.board .c-go{text-align:right;width:1%} table.board .c-go a{font-size:1.1rem;color:var(--muted)} table.board .c-go a:hover{color:var(--accent);text-decoration:none} table.board tr.row[hidden]{display:none} @media(max-width:560px){ .s-kurz{font-size:.85rem} } /* Laufbalken entfernt — der Wechsel selbst ist Signal genug. Zurueckgebliebene Regeln neutralisieren. */ .dash-progress{display:none} .dash-foot{border-top:1px solid var(--line)} /* ---- Kopfzeile / Menü ---- */ body{padding-top:0} .topbar{position:sticky;top:0;z-index:20; margin:0 0 22px;padding:0; background:rgba(250,248,244,.86);backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line)} .topbar-in{display:flex;align-items:center;justify-content:space-between; gap:16px;flex-wrap:wrap;padding:10px clamp(16px,2.6vw,36px)} /* Marke */ .brand{display:flex;align-items:center;gap:11px;text-decoration:none} .brand:hover{text-decoration:none} .brand .mark{width:34px;height:34px;flex:none;border-radius:11px;display:block; box-shadow:0 2px 8px rgba(180,83,9,.22); transition:transform .18s ease, box-shadow .18s ease} .brand:hover .mark{transform:translateY(-1px) rotate(-3deg); box-shadow:0 4px 14px rgba(180,83,9,.3)} .brand-txt{display:flex;flex-direction:column;line-height:1.12} .brand-txt b{font-size:.94rem;font-weight:700;color:var(--txt);letter-spacing:-.1px} .brand-txt i{font-style:normal;font-size:.64rem;font-weight:700;color:var(--accent); letter-spacing:2.6px;text-transform:uppercase} /* Menue als ein Gleis, in dem die aktive Pille sitzt */ .topbar .nav{display:flex;align-items:center;gap:2px;padding:4px; background:var(--panel2);border:1px solid var(--line);border-radius:13px; box-shadow:inset 0 1px 2px rgba(16,32,52,.04)} .topbar .nav .n-punkt{display:flex;align-items:center;gap:7px; font-size:.88rem;font-weight:500;color:var(--muted); padding:7px 13px;border-radius:10px;line-height:1.35; transition:color .16s ease, background .16s ease} .topbar .nav .n-bild{width:16px;height:16px;flex:none;fill:none; stroke:currentColor;stroke-width:1.85; stroke-linecap:round;stroke-linejoin:round;opacity:.85} .topbar .nav .n-punkt:hover{color:var(--eigen2,var(--txt));background:rgba(255,255,255,.9); text-decoration:none} .topbar .nav .n-punkt.is-active{color:#fff;font-weight:600; background:linear-gradient(180deg,var(--eigen,var(--accent)), var(--eigen2,var(--accent))); box-shadow:0 2px 6px rgba(16,32,52,.18)} .topbar .nav .n-punkt.is-active .n-bild{opacity:1;stroke-width:2.1} @media(max-width:860px){ .topbar .nav .n-punkt{padding:7px 11px} .topbar .nav .n-punkt span{display:none} .topbar .nav .n-punkt.is-active span{display:inline} .topbar .nav .n-bild{width:17px;height:17px} } /* Unter 700px fuehrt die untere Leiste; das obere Gleis wird dort weiter unten ohnehin ausgeblendet. */ @media(max-width:560px){ .topbar{margin:0 0 16px} .topbar-in{padding:9px 14px;gap:8px} .brand .mark{width:30px;height:30px} .brand-txt b{font-size:.86rem} } /* ---- Strategie: eine Seite, wechselnder Inhalt ---- Drei Breiten, drei Bedienungen. Breit: das Verzeichnis steht als Spalte daneben und bleibt beim Lesen stehen — acht Titel untereinander liest man auf einen Blick, waagerecht nicht. Mittel: Pillen, die umbrechen. Schmal: gar kein Menue, sondern Abschnitte zum Aufklappen. */ .strat-raster{display:block} .strat-spalte{display:contents} .stabs{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 6px;position:sticky;top:60px; z-index:10;background:var(--bg);padding:8px 0} .stab{display:flex;align-items:center;gap:8px;background:var(--panel); color:var(--muted);border:1px solid var(--line);border-radius:999px; padding:6px 15px 6px 8px;font:inherit;font-size:.9rem;cursor:pointer;line-height:1.4} .st-bild{width:17px;height:17px;flex:none} .stab:hover{border-color:var(--ton);color:var(--ton)} .stab.is-active,.stab.ist-aktiv{background:var(--ton-weich); border-color:var(--ton);color:var(--ton);font-weight:600} @media(max-width:859px){.st-ueber{display:none}} .pane{display:none;animation:fade .35s ease} .pane.is-active{display:block} .pane-h{margin-top:6px} /* Ab mittleren Fenstern schrumpft die Kapitelliste beim Oeffnen zu einer Spur am rechten Bildschirmrand — durchgehend, nur Zeichen, der Titel erscheint beim Zeigen daneben. Sie steht fest am Rand und nicht im Textraster: so bleibt die Gliederung beim Lesen an derselben Stelle, egal wie weit man gescrollt hat. */ @media(min-width:860px){ .strat-raster{display:block} .strat-spalte{display:block} /* Der Platz fuer die Spur wird immer freigehalten, auch auf der Kapiteluebersicht — sonst springt der Text beim Oeffnen zur Seite. */ .inhalt{padding-right:76px} .fuss-in{padding-right:calc(56px + clamp(16px,2.6vw,36px))} .stabs{position:fixed;top:var(--kopfhoehe,58px);right:0;bottom:0;width:56px; z-index:15;display:flex;flex-direction:column;align-items:center;gap:2px; margin:0;padding:10px 0 12px; background:var(--panel);border-left:1px solid var(--line); border-right:0;flex-wrap:nowrap;overflow:visible} .stab{position:relative;display:flex;align-items:center;justify-content:center; width:40px;height:40px;padding:0;gap:0;background:none;border:0; border-radius:9px;color:var(--muted)} .stab:hover{background:var(--panel2);color:var(--ton)} .stab.is-active,.stab.ist-aktiv{background:var(--ton-weich);color:var(--ton)} .st-bild{width:21px;height:21px;display:block} /* Zurueck zur Kapitelliste — oben in der Spur, durch eine Linie abgesetzt. */ .st-ueber{margin-bottom:9px} .st-ueber::after{content:"";position:absolute;left:8px;right:8px;bottom:-5px; height:1px;background:var(--line)} /* Der Titel liegt neben der Spur und wird nur beim Zeigen sichtbar. */ .st-txt{position:absolute;right:calc(100% + 10px);top:50%; transform:translateY(-50%) translateX(4px);white-space:nowrap; padding:5px 11px;border-radius:8px;background:var(--txt);color:var(--bg); font-size:.82rem;font-weight:600;opacity:0;pointer-events:none; transition:opacity .12s,transform .12s} .stab:hover .st-txt,.stab:focus-visible .st-txt{opacity:1; transform:translateY(-50%) translateX(0)} } /* Abschnittstitel doppelt den aktiven Reiter — nur fuer Vorlesesoftware behalten */ .pane-h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); clip-path:inset(50%);white-space:nowrap} table.board tr.row{cursor:pointer} table.board tr.row:focus{outline:2px solid var(--accent);outline-offset:-2px} /* ---- Kalender ---- */ .events{list-style:none;margin:10px 0 0;padding:0} .ev{display:flex;gap:16px;align-items:flex-start;background:var(--panel); border:1px solid var(--line);border-left:4px solid var(--line);border-radius:10px; padding:13px 16px;margin-bottom:9px} .ev.g3{border-left-color:var(--red)} .ev.g2{border-left-color:var(--accent)} .ev.g1{border-left-color:var(--line)} .ev.is-today{background:rgba(180,83,9,.06)} .ev-datum{flex:none;width:112px;line-height:1.3} .ev-datum b{display:block;font-size:1.02rem;font-variant-numeric:tabular-nums} .ev-datum span{color:var(--muted);font-size:.74rem} .ev-haupt{flex:1;min-width:0} .ev-titel{font-weight:700;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .ev-zeit{font-weight:600;color:var(--muted);font-size:.8rem;font-variant-numeric:tabular-nums} .ev-notiz{color:var(--muted);font-size:.86rem;margin-top:3px} .ev-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px} .chip{font-size:.72rem;border:1px solid var(--line);border-radius:999px;padding:2px 10px; color:var(--muted);background:var(--panel2)} .chip:hover{border-color:var(--accent);color:var(--accent);text-decoration:none} /* Kompaktblock auf dem Dashboard */ .next{margin-top:18px;border:1px solid var(--line);border-radius:14px;background:var(--panel); padding:13px 18px 6px;box-shadow:0 1px 2px rgba(16,32,52,.05)} .next-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap} .next-kopf a{font-size:.82rem;font-weight:600} .n-list{list-style:none;margin:8px 0 0;padding:0} .n-ev{display:flex;align-items:baseline;gap:12px;padding:8px 0;border-top:1px solid var(--line)} .n-list li:first-child{border-top:0} .n-dat{flex:none;width:56px;color:var(--muted);font-size:.82rem;font-variant-numeric:tabular-nums} .n-tit{flex:1;font-size:.92rem;font-weight:600} .n-ev.g3 .n-tit{color:var(--red)} .n-zeit{color:var(--muted);font-size:.82rem;font-variant-numeric:tabular-nums} @media(max-width:560px){ .ev{flex-direction:column;gap:6px} .ev-datum{width:auto} } /* Termin in der Kopfkarte */ .s-termin{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-top:12px; background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--line); border-radius:8px;padding:8px 12px;font-size:.86rem} .s-termin.g3{border-left-color:var(--red)} .s-termin.g2{border-left-color:var(--accent)} .s-termin .t-tag{font-size:.66rem;text-transform:uppercase;letter-spacing:.9px; font-weight:700;color:var(--muted)} .s-termin .t-zeit{color:var(--muted);font-variant-numeric:tabular-nums} /* Kalender-Filter */ .kfilter{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 4px} .kbtn{background:var(--panel);color:var(--muted);border:1px solid var(--line);border-radius:999px; padding:6px 15px;font-size:.86rem;cursor:pointer} .kbtn:hover{border-color:var(--accent);color:var(--accent)} .kbtn.is-active{background:rgba(180,83,9,.10);border-color:var(--accent);color:var(--accent); font-weight:600} .ev[hidden]{display:none} /* ============================================================================ Untere Leiste — nur auf dem Handy, dieselben Punkte wie oben Auf kleinen Schirmen liegt die Navigation im Daumenbereich; die Leiste im Kopf wird dort ausgeblendet, damit nichts doppelt steht. ============================================================================ */ .tableiste{display:none} @media(max-width:700px){ .topbar .nav{display:none} body{padding-bottom:84px} /* Platz für die Leiste */ .tableiste{ position:fixed;left:0;right:0;bottom:0;z-index:1200; display:grid;grid-auto-flow:column;grid-auto-columns:1fr; background:var(--panel); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom,0px); box-shadow:0 -2px 14px rgba(16,32,52,.08); } .tableiste .tab{ display:flex;flex-direction:column;align-items:center;justify-content:center; gap:3px;min-height:60px; font-size:.66rem;font-weight:500;color:var(--muted); text-decoration:none;-webkit-tap-highlight-color:transparent; } .tableiste .tab:hover{text-decoration:none;color:var(--txt)} .tab-bild{ width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round; } .tableiste .tab.is-active{color:var(--accent)} .tableiste .tab.is-active .tab-bild{stroke-width:2.2} } /* ---- Handelstagebuch ------------------------------------------------------ Ein Trade ist eine Karte: Kopf mit Instrument, Richtung und Ergebnis in R, darunter die Kurse und die Notizen. Offene Trades sind am Rand markiert. */ .kurve-halter{margin-top:12px;padding:14px 16px} .kurve{width:100%;height:auto;display:block} .trade{background:var(--panel);border:1px solid var(--line);border-radius:12px; padding:16px 18px;margin-top:12px;box-shadow:0 1px 2px rgba(16,32,52,.05)} .trade.ist-offen{border-left:4px solid var(--blue)} .t-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:14px} .trade h3{font-size:1.02rem;font-weight:700;line-height:1.3} .t-richtung{font-size:.78rem;font-weight:600;color:var(--muted);margin-left:6px} .t-erg{font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap} .t-detail{margin-top:10px;padding-top:10px;border-top:1px solid var(--line); font-size:.84rem;color:var(--muted)} .trade p{margin-top:8px;font-size:.92rem} .trade .lehre{background:var(--panel2);border-left:3px solid var(--accent); border-radius:6px;padding:9px 12px} .trade .abweichung{background:rgba(192,57,43,.07);border-left:3px solid var(--red); border-radius:6px;padding:9px 12px} @media(max-width:560px){ .t-kopf{flex-direction:column;gap:6px} .t-erg{font-size:1.1rem} } /* Chartbild im Tagebuch — eingeklappt, damit die Liste kurz bleibt. */ .t-bild{margin-top:10px} .t-bild>summary{cursor:pointer;font-size:.86rem;font-weight:600;color:var(--blue); list-style:none;padding:6px 0} .t-bild>summary::-webkit-details-marker{display:none} .t-bild>summary::before{content:"▸ ";color:var(--muted)} .t-bild[open]>summary::before{content:"▾ "} .t-bild img{width:100%;height:auto;display:block;margin-top:8px; border:1px solid var(--line);border-radius:10px} .t-bild .sub{margin-top:6px} /* ---- Untere Leiste: flach, ohne Knopfform --------------------------------- Der Name .tab war schon von den Kategorie-Reitern im Dashboard belegt — daher .tl-tab, sonst erbt die Leiste deren Pillenform. */ .tableiste{display:none} .schub,.schub-grund{display:none} .konto-zeichen{display:none} @media(max-width:700px){ .topbar .nav{display:none} body{padding-bottom:82px} body:has(.randspur){padding-bottom:130px} /* Die Ansichtsspur wandert ans untere Ende, direkt ueber die Hauptnavigation: derselbe Ort, dieselbe Handhaltung. Nur Zeichen — fuer Woerter ist dort kein Platz, und die Zeichen sind dieselben wie am Schreibtisch. Die Farbe sagt, zu welchem Hauptpunkt sie gehoert. */ .stabs.randspur{ position:fixed;left:0;right:0;z-index:1190; /* Die Grundregel setzt top:60px fuer die klebende Pillenreihe. Ohne top:auto spannt sich die Leiste hier vom Kopf bis zum Fuss. */ top:auto;bottom:calc(58px + env(safe-area-inset-bottom,0px)); display:flex;justify-content:space-around;align-items:center; gap:0;margin:0;padding:5px 6px;flex-wrap:nowrap;overflow-x:auto; background-color:var(--panel); background-image:linear-gradient(var(--ton-weich),var(--ton-weich)); border:0;border-top:1px solid var(--ton-weich); border-radius:0;box-shadow:0 -1px 10px rgba(16,32,52,.06); } .stabs.randspur .stab{ flex:1 0 auto;min-width:46px;height:38px;padding:0;gap:0; display:flex;align-items:center;justify-content:center; background:none;border:0;border-radius:9px;color:var(--muted); } .stabs.randspur .stab.is-active, .stabs.randspur .stab.ist-aktiv{background:var(--ton-weich);color:var(--ton)} .stabs.randspur .st-bild{width:20px;height:20px} .stabs.randspur .st-txt{position:absolute;width:1px;height:1px; overflow:hidden;clip-path:inset(50%)} /* Die Trades-Liste steht auf dem Telefon unter der Leiste — sonst verdeckt sie die letzten Zeilen. */ .ub-feld,.feld{scroll-margin-bottom:130px} .tableiste{ position:fixed;left:0;right:0;bottom:0;z-index:1200; display:grid;grid-auto-flow:column;grid-auto-columns:1fr; background:var(--panel);border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom,0px); box-shadow:0 -2px 14px rgba(16,32,52,.08); } .tl-tab{ display:flex;flex-direction:column;align-items:center;justify-content:center; gap:3px;min-height:58px; background:none;border:0;border-radius:0;padding:0; font:inherit;font-size:.64rem;font-weight:500;color:var(--muted); text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent; } .tl-tab:hover{text-decoration:none;color:var(--txt)} .tl-bild{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} .tl-tab.ist-aktiv{color:var(--eigen2,var(--accent))} .tl-tab.ist-aktiv .tl-bild{stroke-width:2.2} /* Ein kurzer Strich in der Bereichsfarbe ueber dem aktiven Punkt — er bindet die Untermenue-Leiste darueber an den Punkt darunter. */ .tl-tab.ist-aktiv::before{content:"";position:absolute;top:0;left:26%; right:26%;height:3px;border-radius:0 0 3px 3px; background:linear-gradient(90deg,var(--eigen2,var(--accent)), var(--eigen,var(--accent)))} .tl-tab{position:relative} .tl-tab.ist-aktiv .tl-bild{stroke-width:2.2} /* ---- Mehr-Blatt ---- */ /* Das Konto-Menue faehrt von links herein — wie in den Musik-Apps. Es liegt ueber allem, auch ueber den beiden unteren Leisten. */ .konto-zeichen{display:flex;align-items:center;justify-content:center; width:38px;height:38px;flex:none;margin-right:2px;padding:0; background:var(--panel2);border:1px solid var(--line);border-radius:50%; color:var(--muted);cursor:pointer} .konto-zeichen .n-bild{width:19px;height:19px;flex:none;min-width:19px; fill:none;stroke:currentColor; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .konto-zeichen[aria-expanded="true"]{background:var(--ton-weich);color:var(--ton); border-color:var(--ton)} .schub-grund{display:block;position:fixed;inset:0;z-index:1300; background:rgba(16,32,52,.42)} .schub{ display:block;position:fixed;left:0;top:0;bottom:0;z-index:1400; width:min(310px,86vw);background:var(--panel); border-right:1px solid var(--line); box-shadow:8px 0 40px rgba(16,32,52,.22); padding:14px 18px calc(20px + env(safe-area-inset-bottom,0px)); overflow-y:auto; transform:translateX(-100%);transition:transform .24s cubic-bezier(.25,1,.5,1); } .schub.offen{transform:none} .schub-kopf{display:flex;align-items:center;justify-content:space-between; gap:12px;margin-bottom:6px;padding-top:env(safe-area-inset-top,0px)} .schub-kopf h2{margin:0;border:0;padding:0;font-size:1.1rem; text-transform:none;letter-spacing:0;color:var(--txt)} .schub-zu{border:0;background:none;color:var(--muted);font:inherit; font-size:1.6rem;line-height:1;cursor:pointer;padding:2px 6px} body.blatt-offen{overflow:hidden} .blatt-install{display:block;width:100%;padding:13px 12px;margin:14px 0 6px; border:0;background:linear-gradient(180deg,#2e8f8f,#1b6ca8);color:#fff; border-radius:11px;font:inherit;font-weight:600;cursor:pointer} /* Auf dem iPhone gibt es keinen Installationsdialog, den eine Seite ausloesen koennte — dort steht die Anleitung. Sie traegt dieselbe Farbe, aber ungefuellt: gefuellt hiesse antippbar, und antippen tut dort nichts. */ .blatt-install.nur-hinweis{background:var(--ton-weich);color:var(--ton); border:1px solid var(--ton);font-weight:600;cursor:default} .blatt-install[hidden]{display:none!important} .mehr-gruppe{display:grid;gap:2px;margin-top:16px} .mehr-titel{font-size:.68rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);margin-bottom:4px} .mehr-zeile{display:flex;align-items:center;justify-content:space-between; padding:14px 4px;border-bottom:1px solid var(--line); color:var(--txt);text-decoration:none;font-size:1rem} .mehr-zeile:last-child{border-bottom:0} .mehr-zeile:hover{text-decoration:none} .mehr-pfeil{color:var(--muted);font-size:1.2rem;line-height:1} .mehr-fuss{margin-top:18px;font-size:.78rem;line-height:1.5;color:var(--muted)} } /* ---- Netzdiagramm --------------------------------------------------------- */ .netz-halter{background:var(--panel);border:1px solid var(--line);border-radius:12px; padding:18px;margin-top:12px;box-shadow:0 1px 2px rgba(16,32,52,.05); display:grid;grid-template-columns:minmax(300px,1.25fr) 1fr;gap:22px; align-items:center} .netz-halter .sub{grid-column:1/-1} .netz{width:100%;max-width:560px;height:auto;display:block;margin:0 auto} .netz-halter.vorlaeufig .netz{opacity:.72} .netz-werte{list-style:none;display:grid;gap:8px;align-content:center} .netz-werte li{display:flex;justify-content:space-between;gap:14px; border-bottom:1px solid var(--line);padding-bottom:6px;font-size:.9rem} .netz-werte li:last-child{border-bottom:0} .netz-werte span{color:var(--muted)} @media (max-width:760px){ .netz-halter{grid-template-columns:1fr} } .netz-halter.leer{grid-template-columns:1fr;text-align:center} .netz-leer{padding:26px 10px;color:var(--muted)} .netz-zahl{font-size:2.6rem;font-weight:700;color:var(--accent);line-height:1} @media(max-width:700px){ .netz-halter{grid-template-columns:1fr;gap:14px;padding:14px} } .gesichert{color:var(--green);font-weight:600} .t-anp{margin-top:10px;font-size:.86rem;color:var(--muted)} .t-anp ul{list-style:none;margin-top:4px;display:grid;gap:3px} .t-anp li{padding-left:12px;border-left:2px solid var(--green)} .t-strecke{display:grid;gap:14px;margin-top:10px} .t-strecke figure{margin:0} .t-strecke img{width:100%;border-radius:10px;border:1px solid var(--line);display:block} .t-strecke figcaption{margin-top:6px;font-size:.82rem;color:var(--muted)} .t-regeln{margin:18px 0 4px;background:var(--panel);border:1px solid var(--line); border-radius:12px;padding:14px 18px} .t-regeln summary{cursor:pointer;font-weight:600;color:var(--accent); font-size:.92rem;letter-spacing:.3px;text-transform:uppercase} .t-regeln ol{margin:12px 0 2px 20px;display:grid;gap:7px} .t-regeln li{font-size:.93rem;line-height:1.55} /* =========================================================================== Glossar ------------------------------------------------------------------------ Die Zeichnungen sind SVG im Seitentext. Sie erben ihre Farben über currentColor und var(--…), damit sie zum Rest passen und nicht als Fremdkörper wirken. ======================================================================== */ .g-gruppe{margin:26px 0 12px;font-size:.86rem;font-weight:700;color:var(--accent); text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid var(--line); padding-bottom:6px} .g-gruppe:first-of-type{margin-top:18px} .g-eintrag{background:var(--panel);border:1px solid var(--line);border-radius:14px; padding:20px 22px 18px;margin-bottom:16px; box-shadow:0 1px 2px rgba(16,32,52,.05)} .g-eintrag h4{font-size:1.06rem;font-weight:700;margin:0;letter-spacing:-.1px} .g-kurz{color:var(--accent);font-size:.92rem;font-weight:600;margin:3px 0 0} .g-text{font-size:.95rem;line-height:1.62;margin:0} .g-bild{display:block;width:100%;max-width:420px;height:auto;margin:16px 0 16px; background:var(--panel2);border:1px solid var(--line);border-radius:10px} .g-bild text{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto, Helvetica,Arial,sans-serif} /* Beim Sprung aus der Marken-Leiste soll die Überschrift nicht unter der oberen Leiste verschwinden. */ .g-eintrag{scroll-margin-top:110px} @media(max-width:560px){ .g-eintrag{padding:16px 15px 14px} .g-bild{max-width:100%} } /* Rechtstexte: schmalere Spalte, damit lange Absätze lesbar bleiben */ .recht-text{max-width:720px;margin-top:6px} .recht-text h2{font-size:1rem;margin:30px 0 10px} .recht-text h3{font-size:.98rem;font-weight:700;color:var(--txt); text-transform:none;letter-spacing:0;margin:22px 0 6px} .recht-text p{margin:0 0 11px;font-size:.95rem;line-height:1.62} .recht-text ul{margin:0 0 12px 20px;font-size:.95rem;line-height:1.6} .recht-text a{word-break:break-word} /* --- Marker am Trade -------------------------------------------------- */ /* Warnende und gute Merkmale unterscheiden sich in der Farbe, nicht in der Groesse: Ein Etikett soll auffallen, aber die Zahl daneben nicht uebertoenen. */ .t-marker-reihe{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; } .t-marker{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; letter-spacing:.02em; border:1px solid transparent; cursor:help; } .t-marker.warnung{ background:rgba(200,60,60,.10); color:#a52a2a; border-color:rgba(200,60,60,.28); } .t-marker.gut{ background:rgba(40,140,90,.10); color:#1f6b47; border-color:rgba(40,140,90,.28); } .t-marker.frei{ background:rgba(120,120,120,.10); color:#555; border-color:rgba(120,120,120,.28); } .marker-bilanz{ list-style:none; margin:0; padding:0; } .m-zeile{ display:grid; grid-template-columns:1fr auto; column-gap:14px; align-items:baseline; padding:10px 0; border-bottom:1px solid rgba(0,0,0,.07); } .m-zeile:last-child{ border-bottom:0; } .m-name{ font-weight:600; } .m-wert{ font-variant-numeric:tabular-nums; font-weight:700; } .m-sub{ grid-column:1 / -1; font-size:12px; opacity:.65; } .m-zeile.warnung .m-name::before{ content:"\25B2"; font-size:9px; margin-right:7px; color:#a52a2a; vertical-align:middle; } .m-zeile.gut .m-name::before{ content:"\25CF"; font-size:9px; margin-right:7px; color:#1f6b47; vertical-align:middle; } /* --- Ankreuzseite für die Marker ------------------------------------- */ .mk-legende{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px} .mk-legende li{display:flex;align-items:baseline;gap:10px;font-size:.9rem; color:var(--muted)} .mk-legende .t-marker{flex:0 0 auto} .mk-liste{display:grid;gap:12px;margin-top:14px} .mk-trade{background:var(--panel);border:1px solid var(--line);border-radius:12px; padding:14px 16px;box-shadow:0 1px 2px rgba(16,32,52,.05)} .mk-kopf{display:flex;justify-content:space-between;align-items:flex-start; gap:16px;margin-bottom:10px} .mk-kopf .sub{font-size:.78rem;margin-top:3px;display:flex;gap:8px; align-items:center;flex-wrap:wrap} .mk-kopf .price{font-size:1rem;white-space:nowrap} /* Die Kästchen sind selbst die Etiketten: angehakt sehen sie aus wie der Marker am Trade. So muss man nicht zwischen zwei Darstellungen übersetzen. */ .mk-kaesten{display:flex;flex-wrap:wrap;gap:7px} .mk-kasten{display:inline-flex;align-items:center;gap:6px;cursor:pointer; padding:4px 11px 4px 8px;border-radius:999px;font-size:12px;font-weight:600; border:1px solid var(--line);color:var(--muted);background:transparent; user-select:none;transition:background .12s,border-color .12s,color .12s} .mk-kasten:hover{border-color:var(--muted)} .mk-kasten input{accent-color:var(--accent);margin:0} .mk-kasten:has(input:checked){background:rgba(200,60,60,.10);color:#a52a2a; border-color:rgba(200,60,60,.30)} .mk-kasten input:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .mk-ausgabe{width:100%;box-sizing:border-box;margin-top:10px;padding:12px; border:1px solid var(--line);border-radius:10px;background:var(--bg); font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem; line-height:1.6;color:var(--text);resize:vertical} .mk-knoepfe{display:flex;align-items:center;gap:12px;margin-top:12px; flex-wrap:wrap} .btn.still{background:transparent;color:var(--muted);border:1px solid var(--line)} .btn[aria-disabled="true"]{opacity:.45;pointer-events:none} /* Pips tragen die Farbe, R steht klein darunter: die eine Zahl gibt es bei jedem Trade, die andere nur mit bekanntem Stop. */ .t-erg{font-weight:700;font-size:1.05rem;text-align:right;white-space:nowrap} .t-neben{font-size:.78rem;color:var(--muted);text-align:right;margin-top:2px; font-variant-numeric:tabular-nums} .t-neben.leer{opacity:.55;font-style:italic} /* --- Positionsgrößen-Rechner ------------------------------------------ */ .formel{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1rem; background:var(--bg);border:1px solid var(--line);border-radius:8px; padding:12px 14px;display:inline-block} .rechner{display:grid;gap:14px;background:var(--panel);border:1px solid var(--line); border-radius:12px;padding:18px;margin:16px 0; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} .r-feld{display:flex;flex-direction:column;gap:5px} .r-feld label{font-size:.8rem;font-weight:600;color:var(--muted)} .r-feld input,.r-feld select{padding:9px 11px;border:1px solid var(--line); border-radius:8px;background:var(--bg);color:var(--text);font-size:1rem; font-variant-numeric:tabular-nums;width:100%;box-sizing:border-box} .r-feld input:focus,.r-feld select:focus{outline:2px solid var(--accent); outline-offset:1px;border-color:var(--accent)} .r-hinweis{font-size:.72rem;color:var(--muted);opacity:.85} .r-ausgabe{grid-column:1/-1;display:grid;gap:10px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); border-top:1px solid var(--line);padding-top:14px;margin-top:2px} .r-ausgabe span{display:flex;flex-direction:column;gap:3px} .r-ausgabe b{font-size:.75rem;font-weight:600;color:var(--muted)} .r-ausgabe i{font-style:normal;font-size:1.15rem;font-weight:700; font-variant-numeric:tabular-nums} .r-ausgabe.leer,.r-ausgabe.warnung{display:block;font-size:.9rem;color:var(--muted)} .r-ausgabe.warnung{color:#a52a2a} .hinweis-klein{font-size:.82rem;color:var(--muted)} .r-optional{font-weight:400;opacity:.7} .r-urteil{grid-column:1/-1;margin:12px 0 0;padding:10px 12px;border-radius:8px; font-size:.88rem;background:var(--bg);border-left:3px solid var(--line)} .r-urteil.gut{border-left-color:#1f6b47;color:#1f6b47} .r-urteil.schlecht{border-left-color:#a52a2a;color:#a52a2a} .regel-notiz{margin:14px 0 0;padding:12px 14px;border-left:3px solid var(--accent); background:var(--bg);border-radius:0 8px 8px 0;font-size:.86rem;color:var(--muted)} /* --- Umschalter der Ansichten ----------------------------------------- */ .ansicht-schalter{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 10px} .ansicht-knopf{padding:8px 16px;border-radius:999px;border:1px solid var(--line); background:transparent;color:var(--muted);font-size:.88rem;font-weight:600; cursor:pointer;transition:background .14s,color .14s,border-color .14s} .ansicht-knopf:hover{border-color:var(--muted);color:var(--text)} .ansicht-knopf.ist-aktiv{background:var(--accent);border-color:var(--accent); color:#fff} .ansicht-knopf:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .ansicht-hinweis{margin:0 0 14px;font-size:.84rem;color:var(--muted); line-height:1.55} .ansicht-hinweis:empty{display:none} /* --- Felder hinter Knöpfen -------------------------------------------- */ .feld-schalter{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 14px} .feld-knopf{padding:9px 18px;border-radius:10px;border:1px solid var(--line); background:var(--panel);color:var(--muted);font-size:.9rem;font-weight:600; cursor:pointer;transition:background .14s,color .14s,border-color .14s, box-shadow .14s} .feld-knopf:hover{border-color:var(--muted);color:var(--text)} .feld-knopf.ist-aktiv{background:var(--panel);color:var(--accent); border-color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)} .feld-knopf:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* Die Überschrift im Feld ist der Knopf darüber — die zweite wäre doppelt. */ .feld > h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); white-space:nowrap} /* Trennstrich zwischen Prüfzeit und Vorlauf in der Trade-Liste */ .epochen-strich{display:flex;align-items:center;gap:14px;margin:22px 0 6px; color:var(--muted);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase} .epochen-strich::before,.epochen-strich::after{content:"";flex:1;height:1px; background:var(--line)} /* --- Zeitraum ---------------------------------------------------------- */ .zeit-schalter{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center; margin:0 0 16px;padding:12px 14px;background:var(--panel); border:1px solid var(--line);border-radius:12px} .zeit-knoepfe{display:flex;flex-wrap:wrap;gap:8px} .zeit-knopf{padding:7px 14px;border-radius:999px;border:1px solid var(--line); background:transparent;color:var(--muted);font-size:.84rem;font-weight:600; cursor:pointer;transition:background .14s,color .14s,border-color .14s} .zeit-knopf:hover{border-color:var(--muted);color:var(--text)} .zeit-knopf.ist-aktiv{background:var(--accent);border-color:var(--accent);color:#fff} .zeit-knopf.still{border-style:dashed} .zeit-knopf:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .zeit-felder{display:flex;flex-wrap:wrap;gap:8px;align-items:center; font-size:.84rem;color:var(--muted)} .zeit-felder input{padding:6px 9px;border:1px solid var(--line);border-radius:8px; background:var(--bg);color:var(--text);font-size:.86rem} .zeit-felder input:focus{outline:2px solid var(--accent);outline-offset:1px} .zeit-hinweis{margin:0 0 14px;font-size:.84rem;color:var(--muted);line-height:1.55} .zeit-hinweis:empty{display:none} /* --- Kacheln und Profil in einem Raster -------------------------------- */ /* Das Netz sitzt oben rechts und ist so groß wie vier Kacheln; die übrigen Kacheln laufen darunter über die volle Breite weiter. Damit das geht, müssen Kacheln und Netz im selben Raster liegen — die Ansichts-Behälter werden deshalb mit display:contents aus dem Layout genommen. */ .kopf-gitter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;margin:0 0 18px} .kopf-gitter > #karten-server, .kopf-gitter > #karten-js, .kopf-gitter .variante:not(.kopf-netz){display:contents} .kopf-gitter > #karten-server[hidden], .kopf-gitter > #karten-js[hidden], .kopf-gitter .variante[hidden]{display:none} .kopf-gitter .card{margin:0} /* Zwei Spalten mal zwei Zeilen, rechts oben — die Fläche von vier Kacheln. In einer einzelnen Spalte war das Netz zu schmal, um die Achsen zu lesen. */ .kopf-netz{grid-column:3 / span 2;grid-row:1 / span 2;display:flex} .kopf-netz[hidden]{display:none} .netz-klein{display:flex;flex-direction:column;align-items:center; justify-content:center;gap:4px;width:100%;padding:12px 10px; background:var(--panel);border:1px solid var(--line);border-radius:12px; cursor:pointer;box-shadow:0 1px 2px rgba(16,32,52,.05); transition:border-color .15s,box-shadow .15s;font:inherit;color:inherit; text-align:center} button.netz-klein:hover{border-color:var(--accent); box-shadow:0 4px 14px rgba(16,32,52,.10)} button.netz-klein:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .netz-klein .netz{max-width:100%;width:100%;height:auto} .nk-lupe{font-size:.72rem;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--muted)} .netz-klein.leer{cursor:default} .nk-zahl{font-size:2.4rem;font-weight:700;color:var(--accent);line-height:1} .nk-text{font-size:.8rem;color:var(--muted);line-height:1.45} .netz-gross{border:0;border-radius:16px;padding:22px 22px 18px; background:var(--panel);width:min(680px,92vw);max-width:none; box-shadow:0 20px 60px rgba(16,32,52,.28);position:fixed;inset:0; margin:auto;max-height:90vh;overflow:auto} .netz-gross::backdrop{background:rgba(16,32,52,.55)} .netz-gross .netz{max-width:100%;width:100%} .netz-gross .netz-werte{margin-top:14px} .ng-zu{position:absolute;top:10px;right:12px;border:0;background:transparent; color:var(--muted);font-size:1.1rem;cursor:pointer;line-height:1;padding:6px} .ng-zu:hover{color:var(--text)} @media (max-width:1100px){ .kopf-gitter{grid-template-columns:repeat(3,minmax(0,1fr))} .kopf-netz{grid-column:2 / span 2;grid-row:1 / span 2} } @media (max-width:820px){ .kopf-gitter{grid-template-columns:repeat(2,minmax(0,1fr))} .kopf-netz{grid-column:1 / -1;grid-row:auto} .netz-klein{max-width:320px;margin:0 auto} } .ebenen-zeile{margin:14px 0 0;padding:12px 14px;background:var(--bg); border:1px solid var(--line);border-radius:10px;font-size:.9rem;line-height:1.6} .ebenen-zeile .sub{font-size:.82rem} /* Der private Punkt in der oberen Leiste: gestrichelt, damit klar ist, dass er woanders hinführt als die anderen vier. */ .n-punkt.n-privat{border:1px dashed var(--line)} .n-punkt.n-privat{border:1px dashed var(--line)} /* Download-Schaltflächen (Vorlagen im Bereich Strategie) */ .dl{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 8px} .dl-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:9px; background:var(--accent);color:#fff;font-weight:600;font-size:.94rem;text-decoration:none; border:1px solid transparent;transition:filter .15s} .dl-btn::before{content:"↓";font-weight:700} .dl-btn:hover{filter:brightness(1.08)} .dl-zweit{background:transparent;color:var(--accent);border-color:var(--accent)} /* Das JS-Netz sitzt an derselben Rasterstelle wie die Server-Fassung. */ .kopf-gitter > #netz-server{display:contents} .kopf-gitter > #netz-server[hidden]{display:none} #netz-js > .netz-werte{display:none} /* Umschalter Live / Demo. Zwei Links statt eines Schalters: Der Kontostand steht damit in der Adresse und kann nicht durcheinandergeraten. */ .konto-schalter{display:inline-flex;gap:2px;padding:3px;margin:0 0 14px; background:var(--panel2);border:1px solid var(--line);border-radius:10px} .konto-knopf{padding:7px 18px;border-radius:7px;font-size:.9rem;font-weight:600; color:var(--muted);text-decoration:none;transition:background .15s,color .15s} .konto-knopf:hover{color:var(--fg)} .konto-knopf.ist-aktiv{background:var(--panel);color:var(--fg); box-shadow:0 1px 2px rgba(0,0,0,.08)} /* Art des Trades auf der Ankreuzseite */ .mk-art-reihe{display:flex;flex-wrap:wrap;align-items:center;gap:8px; margin:10px 0 2px;padding-top:10px;border-top:1px dashed var(--line)} .mk-art-titel{font-size:.78rem;font-weight:700;color:var(--muted); text-transform:uppercase;letter-spacing:.04em} .mk-veraltet{margin:10px 0 0;padding:9px 12px;border-radius:8px;font-size:.86rem; background:var(--bg);border-left:3px solid var(--accent);color:var(--muted)} /* Strategie auf dem Telefon: acht Zeilen, jede klappt an Ort und Stelle auf. Auf breiten Fenstern sind die Kopfzeilen unsichtbar und die Pillen schalten wie bisher. */ .pane-kopf{display:none} @media(max-width:700px){ .stabs:not(.randspur){display:none} /* Fruher klappten die Kapitel auf dem Telefon einzeln auf. Jetzt schaltet die Zeichenleiste unten — zwei Menues fuer dieselbe Sache waeren eins zu viel, und das untere ist naeher am Daumen. */ .pane{display:none;animation:none} .pane.is-active{display:block} .pane-kopf{display:none} } /* Eine Filterzeile statt dreier Schalterreihen. Konto, Ansicht und Zeitraum beantworten dieselbe Frage — welche Trades — und gehoeren deshalb auf eine Hoehe. */ .filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px; margin:0 0 16px;padding:8px 10px;background:var(--panel); border:1px solid var(--line);border-radius:12px} .filter-gruppe{display:inline-flex;gap:2px;padding:2px;background:var(--panel2); border-radius:8px} .filter .konto-knopf,.filter .ansicht-knopf,.filter .zeit-knopf{ padding:6px 13px;border:0;border-radius:6px;background:none;font:inherit; font-size:.86rem;font-weight:600;color:var(--muted);cursor:pointer; text-decoration:none;line-height:1.4} .filter .konto-knopf:hover,.filter .ansicht-knopf:hover,.filter .zeit-knopf:hover{ color:var(--txt)} .filter .konto-knopf.ist-aktiv,.filter .ansicht-knopf.ist-aktiv, .filter .zeit-knopf.ist-aktiv{background:var(--panel);color:var(--accent); box-shadow:0 1px 2px rgba(16,32,52,.08)} .filter-eigen{margin-left:auto;font-size:.82rem;color:var(--muted)} .filter-eigen summary{cursor:pointer;padding:6px 2px} .filter-eigen .zeit-felder{display:flex;flex-wrap:wrap;align-items:center;gap:6px; padding:8px 0 2px} @media(max-width:560px){ .filter{gap:6px 8px;padding:7px 8px} .filter-eigen{margin-left:0;width:100%} } /* Profil: ein Zeichen in der Kopfleiste, darunter Anmelden und Privat. */ .profil{position:relative} .profil-knopf{background:none;border:0;font:inherit;cursor:pointer} .profil-menue{position:absolute;right:0;top:calc(100% + 8px);z-index:40; min-width:216px;padding:6px;background:var(--panel); border:1px solid var(--line);border-radius:12px; box-shadow:0 10px 34px rgba(16,32,52,.16)} .profil-menue[hidden]{display:none} .profil-zeile{display:block;padding:9px 12px;border-radius:8px; font-size:.9rem;font-weight:600;color:var(--txt);text-decoration:none} .profil-zeile:hover{background:var(--panel2);text-decoration:none} .profil-sub{display:block;font-size:.76rem;font-weight:400;color:var(--muted); margin-top:1px} @media(max-width:860px){.profil-wort{display:none}} /* Spalte "Meine Woche" auf der Marktseite: was ich in dem Instrument tatsaechlich gehandelt habe. Der Bias steht daneben — so sieht man beides in einer Zeile statt auf zwei Seiten. */ .c-mein{white-space:nowrap} .mein-up{color:#1f6b47;font-weight:700} .mein-down{color:#a52a2a;font-weight:700} .mein-flat{color:var(--muted);font-weight:700} .mein-n{display:inline-block;min-width:18px;padding:1px 5px;margin-left:4px; border-radius:5px;background:var(--panel2);color:var(--muted); font-size:.72rem;font-weight:600;text-align:center} @media(max-width:860px){.c-mein,th[data-s="6"]{display:none}} /* Kapitelkarten: die Strategie oeffnet mit einem Inhaltsverzeichnis, das sagt, was in jedem Kapitel steht — nicht nur, wie es heisst. */ .kapitel-liste{display:grid;gap:10px;margin:18px 0 6px} .kapitel-liste[hidden]{display:none} .strat-raster[hidden]{display:none} .kapitel{display:flex;align-items:flex-start;gap:15px;width:100%; padding:16px 18px;background:var(--panel);border:1px solid var(--line); border-radius:13px;font:inherit;text-align:left;cursor:pointer; transition:border-color .15s,transform .15s} .kapitel:hover{border-color:var(--accent);transform:translateY(-1px)} .kap-nr{flex:none;width:28px;height:28px;border-radius:50%;display:grid; place-items:center;background:var(--panel2);color:var(--muted); font-size:.78rem;font-weight:700} .kapitel:hover .kap-nr{background:rgba(180,83,9,.12);color:var(--accent)} .kap-txt{flex:1;min-width:0} .kap-txt b{display:block;font-size:1.04rem;font-weight:650;color:var(--txt); line-height:1.3} .kap-txt i{display:block;margin-top:3px;font-style:normal;font-size:.88rem; color:var(--muted);line-height:1.45} .kap-pfeil{flex:none;color:var(--muted);font-size:1.1rem;padding-top:3px} .kapitel:hover .kap-pfeil{color:var(--accent)} @media(max-width:700px){.kap-fuss{display:none}} .kap-fuss{display:flex;align-items:center;justify-content:space-between;gap:10px; margin-top:34px;padding-top:16px;border-top:1px solid var(--line)} .kf-knopf,.kf-uebersicht{background:none;border:0;font:inherit;font-size:.9rem; font-weight:600;color:var(--muted);cursor:pointer;padding:8px 4px; max-width:44%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .kf-knopf:hover,.kf-uebersicht:hover{color:var(--accent)} .kf-uebersicht{flex:none;padding:8px 14px;border:1px solid var(--line); border-radius:999px} /* Märkte als Raster: fünf Karten nebeneinander statt fünf Zeilen untereinander. Die Tabelle bleibt darunter für den Vergleich. */ .m-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px;margin:14px 0 18px} .m-karte{display:block;padding:16px 17px;background:var(--panel); border:1px solid var(--line);border-radius:14px;text-decoration:none; color:var(--txt);transition:border-color .15s,transform .15s,box-shadow .15s} .m-karte:hover{border-color:var(--ton);transform:translateY(-2px); box-shadow:0 6px 20px rgba(27,36,48,.07);text-decoration:none} .mk-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px} .mk-name{font-weight:650;font-size:1rem} .m-karte .badge{padding:3px 10px;font-size:.72rem;font-weight:700} .mk-kurs{display:flex;align-items:baseline;gap:10px;margin-top:10px; font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums} .mk-chg{font-size:.84rem;font-weight:600} .mk-spark{margin:8px 0 4px;opacity:.9} .mk-spark svg{width:100%;height:auto;display:block} .mk-fuss{display:flex;align-items:center;justify-content:space-between;gap:10px; margin-top:10px;padding-top:10px;border-top:1px solid var(--line); font-size:.78rem;color:var(--muted)} .mk-termin.leer{opacity:.55} .mk-mein{font-weight:700;font-variant-numeric:tabular-nums} .mk-mein.up{color:var(--green)} .mk-mein.down{color:var(--red)} .m-tabelle{margin:6px 0 20px} .m-tabelle summary{cursor:pointer;padding:9px 2px;font-size:.88rem; font-weight:600;color:var(--muted)} .m-tabelle summary:hover{color:var(--ton)} /* Kopfbild: ein gezeichneter Chart über der Überschrift. Als SVG — wenige Kilobyte, scharf auf jedem Bildschirm, in den Farben der Seite. */ /* Kopfzeile der Marktseite: Stand und Stimmungsbild, ohne Karussell. */ .m-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px; margin:16px 0 4px;font-size:.82rem;color:var(--muted)} .m-stimmung{display:flex;flex-wrap:wrap;gap:12px} /* Markentabelle und Analysenliste */ .lv-res{color:var(--red)} .lv-sup{color:var(--green)} .lv-piv{color:var(--muted)} .c-num.nah{font-weight:700;color:var(--ton)} .an-liste{display:grid;gap:10px;margin:14px 0 8px} .an-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px; padding:12px 14px;background:var(--panel);border:1px solid var(--line); border-radius:12px} .an-name{min-width:150px;font-weight:650} .an-tage{display:flex;flex-wrap:wrap;gap:6px} .an-tag{padding:4px 10px;border-radius:7px;background:var(--panel2); font-size:.78rem;font-weight:600;color:var(--muted);text-decoration:none} .an-tag:hover{background:var(--ton-weich);color:var(--ton);text-decoration:none} /* Instrumentenliste: links auswaehlen, rechts steht das Blatt dazu. */ .wl-raster{display:grid;gap:16px;margin:14px 0 6px} /* Die Beobachtungsliste: neben der Analyse, und auf breiten Schirmen ganz am Rand neben der Zeichenspur — wie im Chartprogramm. */ @media(min-width:960px){ /* Die Marktseite bleibt genauso breit wie jede andere Seite — 980 px, an derselben Stelle. Die Beobachtungsliste haengt sich an den rechten Bildschirmrand und nimmt dem Text nichts weg; das geht aber erst, wenn daneben wirklich Platz ist. Darunter steht sie als schmale Spalte neben der Analyse. */ .wl-raster{display:grid;grid-template-columns:minmax(0,1fr) 198px;gap:18px} .wl-liste{position:sticky;top:calc(var(--kopfhoehe,58px) + 14px); align-self:start;max-height:calc(100vh - var(--kopfhoehe,58px) - 28px); overflow-y:auto} } @media(min-width:1360px){ .wl-raster{display:block} .wl-liste{position:fixed;top:var(--kopfhoehe,58px);right:56px;bottom:0; width:198px;z-index:14;border:0;border-left:1px solid var(--line); border-radius:0;overflow-y:auto;max-height:none} .wl-titel{position:sticky;top:0;background:var(--panel);z-index:1} } .wl-titel{padding:8px 11px;font-size:.72rem;font-weight:700;letter-spacing:.8px; text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)} .wl-liste{display:flex;flex-direction:column;background:var(--panel); border:1px solid var(--line);border-radius:13px;overflow:hidden;align-self:start} .wl-zeile{display:grid;grid-template-columns:9px 1fr auto;gap:3px 8px; align-items:center;padding:9px 11px;background:none;border:0; border-bottom:1px solid var(--line);font:inherit;text-align:left;cursor:pointer} .wl-zeile:last-child{border-bottom:0} .wl-zeile:hover{background:var(--panel2)} .wl-zeile.is-active{background:var(--ton-weich)} .wl-punkt{width:8px;height:8px;border-radius:50%;grid-row:span 2} .wl-punkt.bullish{background:var(--green)} .wl-punkt.bearish{background:var(--red)} .wl-punkt.neutral{background:var(--blue)} .wl-name{font-weight:600;font-size:.84rem;line-height:1.25} .wl-kurs{font-variant-numeric:tabular-nums;font-weight:700;font-size:.84rem; white-space:nowrap} .wl-chg{grid-column:2/4;font-size:.72rem;color:var(--muted); font-variant-numeric:tabular-nums} .wl-chg.up{color:var(--green)} .wl-chg.down{color:var(--red)} .wl-feld{background:var(--panel);border:1px solid var(--line);border-radius:13px; padding:18px} .wl-feld .cards{margin-top:14px} .wl-feld h2{margin-top:22px} .wl-kopf{display:flex;justify-content:space-between;align-items:flex-start; gap:12px;flex-wrap:wrap} .wl-kopf h3{font-size:1.1rem} .wl-zahl{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:12px 0 8px} .wl-zahl b{font-size:1.7rem;font-variant-numeric:tabular-nums} .wl-zahl .up{color:var(--green)} .wl-zahl .down{color:var(--red)} .wl-marken{width:auto;margin:10px 0 6px;font-size:.9rem} .wl-marken td{padding:3px 18px 3px 0} .wl-text{margin-top:10px;font-size:.93rem;color:var(--txt)} .wl-fuss{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px; padding-top:12px;border-top:1px solid var(--line);font-size:.87rem} /* Bias-Bilanz und Handelszeiten */ tr.summe td{border-top:2px solid var(--line);font-weight:700} /* Eigener Name, nicht ".warnung": Diese Klasse tragen auch die Marker-Pillen im Tagebuch, und der Kasten hier stand spaeter in der Datei - er hat ihnen Polsterung und Eckenradius aufgezwungen. */ .warnkasten{margin:14px 0;padding:13px 15px;border-radius:11px; background:rgba(180,83,9,.08);border:1px solid rgba(180,83,9,.3); font-size:.9rem;line-height:1.6} tr.ist-auf{background:var(--ton-weich)} .sz-stand{font-size:.78rem;font-weight:700;color:var(--green);white-space:nowrap} tr.ist-auf .sz-stand::before{content:"";display:inline-block;width:7px;height:7px; border-radius:50%;background:var(--green);margin-right:6px;vertical-align:middle} /* Drei Zeitebenen auf einen Blick: 1T / 4H / 1H */ .zl{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 2px} .zl-p{display:inline-flex;align-items:center;gap:5px;padding:3px 9px; border-radius:7px;background:var(--panel2);border:1px solid var(--line); font-size:.76rem;font-variant-numeric:tabular-nums;color:var(--muted)} .zl-p b{font-weight:700;letter-spacing:.4px} .zl-p.bullish{color:var(--green);border-color:rgba(21,128,61,.35); background:rgba(21,128,61,.08)} .zl-p.bearish{color:var(--red);border-color:rgba(165,42,42,.35); background:rgba(165,42,42,.07)} .zl-p.neutral{color:var(--muted)} /* Zeigen alle drei dasselbe, ist das die Lage, auf die man wartet. */ .zl-einig .zl-p{font-weight:700} .zl-klein{margin:8px 0 0} .zl-klein .zl-p{padding:2px 7px;font-size:.7rem} /* Rechner: ein Knopf, der sichtbar etwas tut. Gerechnet wird ohnehin bei jeder Eingabe — der Knopf ist fuer den Moment, in dem man fertig getippt hat und wissen will, ob das Ergebnis dazu gehoert. */ .r-knopf{grid-column:1/-1;justify-self:start;padding:9px 20px;border:0; border-radius:9px;background:var(--ton);color:#fff;font:inherit; font-weight:650;font-size:.9rem;cursor:pointer} .r-knopf:hover{filter:brightness(1.08)} .r-knopf:active{transform:translateY(1px)} .r-ausgabe.frisch{animation:aufblitz .7s ease} @keyframes aufblitz{ 0%{background:var(--ton-weich);box-shadow:0 0 0 3px var(--ton-weich)} 100%{background:none;box-shadow:0 0 0 0 transparent} } /* Die Leiter als Treppe */ .leiter-bild{grid-column:1/-1;margin-top:14px;overflow-x:auto} .tr-svg{width:100%;min-width:560px;height:auto;display:block} .tr-stufe{fill:var(--panel2);stroke:var(--line);stroke-width:1} .tr-stufe.ist-voll{fill:var(--ton-weich);stroke:var(--ton); stroke-dasharray:4 3} .tr-stufe.ist-jetzt{fill:var(--ton);stroke:var(--ton)} .tr-lots{font-size:12px;font-weight:700;fill:var(--muted)} .tr-ab{font-size:10.5px;fill:var(--muted)} .tr-fuss{font-size:10.5px;fill:var(--muted)} /* Auf dem Telefon ist die Beobachtungsliste eine Reihe kurzer Namen: alle fuenf nebeneinander, der Punkt zeigt den Bias, der gewaehlte ist gefuellt. Kurs und Tagesveraenderung stehen ohnehin in der Analyse darunter — sie hier zu wiederholen, kostete nur die Breite, die man braucht, um ueberhaupt alle Instrumente zu sehen. */ .wl-kurz{display:none} @media(max-width:959px){ .wl-raster{display:flex;flex-direction:column;gap:14px} .wl-liste{order:-1;flex-direction:row;gap:5px;overflow-x:auto; -webkit-overflow-scrolling:touch;background:none;border:0; border-radius:0;padding:2px 0} .wl-liste::-webkit-scrollbar{height:0} .wl-titel{display:none} .wl-name,.wl-kurs,.wl-chg{display:none} .wl-kurz{display:block;font-size:.79rem;font-weight:650;line-height:1.2; white-space:nowrap} .wl-zeile{flex:1 1 auto;display:flex;align-items:center;justify-content:center; gap:5px;min-width:0;padding:8px 7px;border:1px solid var(--line); border-radius:9px;background:var(--panel);color:var(--muted)} .wl-zeile.is-active{background:var(--ton);border-color:var(--ton);color:#fff} .wl-zeile.is-active .wl-punkt{box-shadow:0 0 0 2px rgba(255,255,255,.55)} .wl-punkt{width:7px;height:7px;grid-row:auto;flex:none} } /* Was der Rechner beantwortet, bevor man ihn ausfuellt. */ .wz-frage{margin:0 0 14px;padding:11px 14px;background:var(--ton-weich); border-left:3px solid var(--ton);border-radius:0 9px 9px 0;font-size:.9rem; line-height:1.6} /* Die offene Ansicht steht in der Ueberschrift: "Maerkte: Instrumente". */ .h1-teil{font-weight:500;color:var(--ton)} /* Auf dem Telefon stehen Impressum und Datenschutz im Konto-Menue oben links; im Fuss waeren sie ein zweiter Weg zum selben Ort. */ @media(max-width:700px){.fuss-links{display:none}} /* Das Motto. Im Fuss steht es still: Man sieht es beim Weggehen, nicht beim Arbeiten — in der Kopfleiste waere es nach einer Woche unsichtbar. */ .fuss-motto{margin:0 0 12px;font-size:.92rem;font-style:italic;color:var(--ton); max-width:none} .motto{margin:0 0 22px;padding:14px 18px;border-left:3px solid var(--ton); background:var(--ton-weich);border-radius:0 10px 10px 0; font-size:1.02rem;font-style:italic;color:var(--txt);line-height:1.6} @media(max-width:700px){.fuss-motto{font-size:.86rem}} /* Auf dem Telefon steht die Marke in der Mitte: Links sitzt das Konto- Zeichen, rechts ist nichts mehr (das Menue liegt unten) — linksbuendig haette die Marke sonst schief neben dem Knopf geklebt. */ @media(max-width:700px){ .topbar-in{position:relative;justify-content:center;min-height:46px} .konto-zeichen{position:absolute;left:clamp(16px,2.6vw,36px);top:50%; transform:translateY(-50%);margin:0} .brand{margin:0} } /* Zweite Zeile unter einem Menueeintrag: sagt, wann er funktioniert. */ .mehr-zeile small{display:block;margin-top:2px;font-size:.72rem; line-height:1.4;color:var(--muted);font-weight:400} /* Feiertag voraus: sichtbar, aber kein Alarm — es ist eine Planungssache, kein Fehler. Deshalb der Ton des Bereichs und kein Rot. */ .feiertag{margin:16px 0;padding:14px 16px;background:var(--ton-weich); border:1px solid var(--ton);border-left-width:3px;border-radius:0 11px 11px 0; font-size:.9rem;line-height:1.6} .feiertag b{color:var(--ton)} .feiertag ul{margin:8px 0 6px;padding-left:20px} .feiertag li{margin:3px 0} .feiertag .sub{margin-top:6px} /* Entwurf: sichtbar abgesetzt, damit niemand ihn fuer geltendes Regelwerk haelt — auch der Verfasser nicht. */ .entwurf{margin:0 0 20px;padding:13px 16px;border-radius:11px; background:rgba(180,83,9,.08);border:1px solid rgba(180,83,9,.35); font-size:.9rem;line-height:1.6} .entwurf b{color:var(--accent)} /* ---- Neu laden: nur als installierte App --------------------------------- Im Browsertab waere das ein zweiter Knopf fuer etwas, das die Adresszeile schon kann. Die Marke .alsapp setzt das Skript, wenn die Seite ohne Browserrahmen laeuft — vorher ist der Knopf nicht da. */ .neu-laden{display:none} .alsapp .neu-laden{display:flex;align-items:center;justify-content:center; width:38px;height:38px;flex:none;margin-left:8px;padding:0; background:var(--panel2);border:1px solid var(--line);border-radius:50%; color:var(--muted);cursor:pointer;transition:color .15s,border-color .15s} .alsapp .neu-laden:hover{color:var(--ton);border-color:var(--ton)} .neu-laden .n-bild{width:19px;height:19px;flex:none;min-width:19px; fill:none;stroke:currentColor; stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* Solange geraeumt wird, dreht sich das Zeichen — sonst sieht ein Druck, der zwei Sekunden braucht, wie ein nicht getroffener Knopf aus. */ .neu-laden.laedt{color:var(--ton);border-color:var(--ton)} .neu-laden.laedt .n-bild{animation:neudreh .9s linear infinite} @keyframes neudreh{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){ .neu-laden.laedt .n-bild{animation:none;opacity:.5}} /* Auf dem Telefon steht die Marke mittig zwischen zwei gleich grossen Zeichen: Konto links, Neu laden rechts. */ @media(max-width:700px){ .alsapp .neu-laden{position:absolute;right:clamp(16px,2.6vw,36px);top:50%; transform:translateY(-50%);margin:0} .alsapp .neu-laden.laedt .n-bild{transform-origin:50% 50%} } /* ---- Neu laden an der rechten Spur (nur Rechner, nur als App) ----------- Unten rechts in der Spalte, die auf jeder Seite fuer die Spur frei bleibt. Wo eine Spur steht, wirkt der Knopf wie ihr unteres Ende: gleiche Breite, gleicher Grund, gleiche Form. Wo keine steht, sitzt er an derselben Stelle — dieselbe Handbewegung auf jeder Seite. Auf dem Telefon bleibt der Knopf oben in der Leiste; unter 860 Pixeln ist die Spur keine Spur, sondern eine Reihe Pillen im Text. */ .spur-neu{display:none} @media(min-width:860px){ .alsapp .spur-neu{display:flex;position:fixed;right:0;bottom:0;width:56px; z-index:16;align-items:center;justify-content:center;padding:8px 0 12px; background:var(--panel);border-left:1px solid var(--line)} /* Die Linie trennt ihn von den Kapiteln darueber — wie .st-ueber es oben tut. Ohne sie sieht er aus wie ein weiteres Kapitel. */ .alsapp .spur-neu::before{content:"";position:absolute;left:8px;right:8px; top:0;height:1px;background:var(--line)} .alsapp .st-neu{position:relative;display:flex;align-items:center; justify-content:center;width:40px;height:40px;padding:0;gap:0; background:none;border:0;border-radius:9px;color:var(--muted); cursor:pointer;font:inherit} .alsapp .st-neu:hover{background:var(--panel2);color:var(--ton)} .alsapp .st-neu .st-bild{width:21px;height:21px;display:block; fill:none;stroke:currentColor;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} .alsapp .st-neu .st-txt small{display:block;margin-top:1px;font-size:.72rem; font-weight:400;opacity:.75} .alsapp .st-neu.laedt{color:var(--ton);background:var(--ton-weich)} .alsapp .st-neu.laedt .st-bild{animation:neudreh .9s linear infinite} /* Am Rechner steht er in der Spur — oben waere er dann doppelt. */ .alsapp .neu-laden{display:none} } @media(prefers-reduced-motion:reduce){ .alsapp .st-neu.laedt .st-bild{animation:none;opacity:.5}} /* ---- Neu laden im Konto-Menue (Telefon) --------------------------------- Sieht aus wie die uebrigen Zeilen im Schub, ist aber ein Knopf: gleiche Hoehe, gleiche Schrift, rechts das Zeichen statt eines Pfeils — der Pfeil verspricht ein Ziel, hier passiert etwas auf der Stelle. */ .mehr-knopf{width:100%;text-align:left;background:none;border:0; font:inherit;color:inherit;cursor:pointer} .mehr-kreis{width:18px;height:18px;flex:none;fill:none;stroke:currentColor; stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; color:var(--muted)} .mehr-knopf.laedt .mehr-kreis{color:var(--ton); animation:neudreh .9s linear infinite} @media(prefers-reduced-motion:reduce){ .mehr-knopf.laedt .mehr-kreis{animation:none;opacity:.5}} /* Jede Breite hat genau einen Ort fuer den Knopf. Zwischen 701 und 859 Pixeln gibt es weder Spur noch Schub — nur dort bleibt er in der oberen Leiste stehen. */ @media(max-width:700px){.alsapp .neu-laden{display:none}} /* ---- Die R-Stufen als Kurse --------------------------------------------- Abgesetzt vom Urteil darueber: Das Urteil beantwortet "darf ich", diese Zeile beantwortet "was zeichne ich ein". Zwei verschiedene Momente. */ .r-linien{grid-column:1/-1;margin-top:12px;padding:12px 14px; background:var(--ton-weich);border-radius:11px} .r-linien-titel{display:block;font-size:.82rem;color:var(--ton); margin-bottom:9px} .r-linien-reihe{display:flex;flex-wrap:wrap;gap:8px} .r-linien-reihe span{display:flex;flex-direction:column;gap:1px; min-width:92px;padding:7px 11px;background:var(--panel); border:1px solid var(--line);border-radius:9px} .r-linien-reihe b{font-size:.7rem;font-weight:600;color:var(--muted); text-transform:uppercase;letter-spacing:.04em} .r-linien-reihe i{font-style:normal;font-size:1rem;font-weight:600; font-variant-numeric:tabular-nums;color:var(--txt)} .r-linien small{display:block;margin-top:9px;font-size:.76rem; line-height:1.5;color:var(--muted)} @media(max-width:700px){ .r-linien-reihe span{flex:1 1 calc(50% - 4px);min-width:0} } /* ---- Meine Huerden ------------------------------------------------------- Nach jeder Tabelle ein Satz, der sagt, was in ihr steht. Eine Tabelle ohne diesen Satz wird gelesen wie eine Wettervorhersage: zur Kenntnis genommen und vergessen. */ table.board td.c-num.gut{color:#1f6b47;font-weight:700} table.board td.c-num.schlecht{color:#a52a2a;font-weight:700} .huerde-satz{margin:10px 0 24px;padding-left:13px; border-left:3px solid var(--ton);font-size:.9rem;line-height:1.65; color:var(--muted)} .huerde-satz b{color:var(--txt)} .huerde-marker{display:grid;grid-template-columns:1fr 1fr;gap:14px; margin:14px 0 6px} .huerde-marker h4{margin:0 0 8px;font-size:.78rem;text-transform:uppercase; letter-spacing:.05em;color:var(--muted)} .huerde-marker ul{list-style:none;margin:0;padding:0} .huerde-marker li{display:grid;grid-template-columns:1fr auto; align-items:baseline;gap:4px 10px;padding:9px 12px;margin-bottom:6px; background:var(--panel);border:1px solid var(--line);border-radius:10px} .huerde-marker li b{font-size:.9rem;font-weight:600} .huerde-marker li span{font-variant-numeric:tabular-nums;font-weight:700; font-size:.95rem} .huerde-marker li small{grid-column:1/-1;font-size:.74rem;color:var(--muted)} .huerde-marker .gut{color:#1f6b47} .huerde-marker .schlecht{color:#a52a2a} @media(max-width:700px){.huerde-marker{grid-template-columns:1fr}} /* ---- Die drei Regeln ganz oben ------------------------------------------- Vier Zustaende, eine Sprache: gruen heisst "die Bedingung ist erfuellt", gelb "knapp", rot "verletzt", grau "gerade nicht zutreffend". Nur Rot pulsiert, und zwar langsam. Etwas, das immer blinkt, wird nach drei Tagen weggesehen; etwas, das nur im Fehlerfall blinkt, bleibt ein Signal. */ .regelkarte{margin:0 0 18px;padding:14px 16px 16px;border-radius:14px; background:var(--panel);border:1px solid var(--line); border-top:3px solid var(--ton); box-shadow:0 1px 2px rgba(16,32,52,.05)} .rk-kopf{display:flex;align-items:baseline;justify-content:space-between; gap:12px;margin-bottom:12px} .rk-titel{font-size:.74rem;font-weight:700;text-transform:uppercase; letter-spacing:.09em;color:var(--ton)} .rk-mehr{font-size:.78rem;color:var(--muted);text-decoration:none} .rk-mehr:hover{color:var(--ton)} .rk-gitter{display:grid;gap:9px} .rk-feld{display:grid;grid-template-columns:auto 1fr auto; align-items:center;gap:12px;padding:12px 14px;border-radius:11px; border:1px solid var(--line);background:var(--panel2); border-left:4px solid var(--line)} .rk-nr{display:flex;align-items:center;justify-content:center; width:23px;height:23px;flex:none;border-radius:50%; background:var(--line);color:var(--txt); font-size:.74rem;font-weight:700} .rk-text b{display:block;font-size:.95rem;line-height:1.4;color:var(--txt)} .rk-text small{display:block;margin-top:3px;font-size:.78rem;line-height:1.45; color:var(--muted)} .rk-wert{font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums; color:var(--muted);white-space:nowrap} /* Zustaende */ .rk-feld[data-stand="gut"]{border-left-color:#1f6b47; background:rgba(40,140,90,.07)} .rk-feld[data-stand="gut"] .rk-nr{background:#1f6b47;color:#fff} .rk-feld[data-stand="gut"] .rk-wert{color:#1f6b47} .rk-feld[data-stand="knapp"]{border-left-color:#b45309; background:rgba(180,83,9,.07)} .rk-feld[data-stand="knapp"] .rk-nr{background:#b45309;color:#fff} .rk-feld[data-stand="knapp"] .rk-wert{color:#b45309} .rk-feld[data-stand="schlecht"]{border-left-color:#a52a2a; background:rgba(165,42,42,.09);animation:rkpuls 2.4s ease-in-out infinite} .rk-feld[data-stand="schlecht"] .rk-nr{background:#a52a2a;color:#fff} .rk-feld[data-stand="schlecht"] .rk-wert{color:#a52a2a} .rk-feld[data-stand="schlecht"] .rk-text b{color:#a52a2a} .rk-feld[data-stand="ruhig"]{opacity:.72} @keyframes rkpuls{ 0%,100%{box-shadow:0 0 0 0 rgba(165,42,42,0)} 50%{box-shadow:0 0 0 4px rgba(165,42,42,.16)}} @media(prefers-reduced-motion:reduce){ .rk-feld[data-stand="schlecht"]{animation:none; box-shadow:0 0 0 3px rgba(165,42,42,.16)}} /* Der Zaehler */ .rk-zaehler{display:flex;align-items:center;gap:8px;flex-wrap:wrap; justify-content:flex-end} .rk-punkte{display:flex;gap:5px} .rk-punkte i{width:11px;height:11px;border-radius:50%; border:1.5px solid var(--muted);background:transparent} .rk-punkte i.voll{background:currentColor;border-color:currentColor} .rk-feld[data-stand="gut"] .rk-punkte{color:#1f6b47} .rk-feld[data-stand="knapp"] .rk-punkte{color:#b45309} .rk-feld[data-stand="schlecht"] .rk-punkte{color:#a52a2a} .rk-knopf{padding:6px 12px;border-radius:999px;border:1px solid var(--line); background:var(--panel);color:var(--txt);font:inherit;font-size:.8rem; font-weight:600;cursor:pointer;white-space:nowrap} .rk-knopf:hover{border-color:var(--ton);color:var(--ton)} .rk-knopf.still{font-weight:400;color:var(--muted)} @media(max-width:700px){ .regelkarte{padding:12px 13px 14px} .rk-feld{grid-template-columns:auto 1fr;gap:9px 10px;padding:11px 12px} .rk-wert{grid-column:2;justify-self:start;font-size:1.05rem} .rk-zaehler{grid-column:1/-1;justify-content:flex-start;margin-top:2px} .rk-text b{font-size:.9rem} } /* Der laufende Trade: eigene Zeile unter dem Regeltext, damit er nicht mit der Tageszahl verwechselt wird. Die beiden sagen Verschiedenes - wie viele waren es heute, und laeuft gerade einer. */ .rk-laeuft{display:block;margin-top:6px;padding:5px 10px;border-radius:8px; background:var(--panel);border:1px solid currentColor; font-size:.79rem;font-weight:600;line-height:1.4} .rk-feld[data-stand="gut"] .rk-laeuft{color:#1f6b47} .rk-feld[data-stand="knapp"] .rk-laeuft{color:#b45309} .rk-feld[data-stand="schlecht"] .rk-laeuft{color:#a52a2a} @media(max-width:700px){.rk-laeuft{font-size:.76rem}} /* Der laufende Trade steht als Zeile fuer sich, mit den Zahlen, die man im Kopf haben muss. Die Mahnung darunter kleiner: Sie ist die Folge, nicht die Angabe. */ .rk-laeuft b{font-weight:700} .rk-mahnung{display:block;margin-top:3px;font-size:.74rem;font-weight:400; opacity:.85} .rk-zaehler:empty{display:none} /* Die Stundenblick-Kachel taucht nur auf, wenn ein Trade laeuft. Sie ist deshalb schmaler gehalten als die drei Regeln darueber: Die sind immer wahr, diese ist eine Lage. */ .rk-blick .rk-nr{background:transparent;color:var(--muted);font-size:1rem} .rk-blick[data-stand="knapp"] .rk-nr{background:transparent;color:#b45309} .rk-blick .rk-wert{font-size:1rem} .rk-blick .rk-zaehler{gap:10px} @media(max-width:700px){ .rk-blick .rk-zaehler{grid-column:1/-1;justify-content:flex-start} } /* Wie viel Rueckhalt hat der Tagesbias? "mager" heisst: keine der kleineren Ebenen zieht mit. Das ist kein Fehler, aber es gehoert gesehen. */ .bias-einig[data-einig="mager"]{color:var(--red);opacity:.85} .bias-einig[data-einig="halb"]{opacity:.8} .bias-einig[data-einig="gut"]{color:var(--green);opacity:.9}