:root { color-scheme: dark; --bg:#0f1720; --fl:#17212c; --tx:#e6edf3; --dim:#94a3b8; --rand:#2a3746; --akz:#22b8d8; --gut:#4ade80; --schlecht:#f87171; --warn:#fbbf24; }  /* fest dunkel, ohne Umschalter (Silvio 28.09.2026) */
* { box-sizing: border-box; }
a { color:var(--akz); }
body { margin:0; background:var(--bg); color:var(--tx); font:15px/1.5 system-ui, "Segoe UI", Roboto, sans-serif; }
.kopf { display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap; padding:.7rem 1.2rem; background:var(--fl); border-bottom:1px solid var(--rand); }
.kopf nav { display:flex; gap:1rem; flex-wrap:wrap; } .kopf a { color:var(--tx); text-decoration:none; font-weight:600; }
.marke { font-size:1.1rem; } .kosten { margin-left:auto; color:var(--dim); font-size:.9rem; } .kosten.ueber { color:var(--schlecht); font-weight:700; }
main { max-width:1150px; margin:1.2rem auto; padding:0 1rem; }
.karte { background:var(--fl); border:1px solid var(--rand); border-radius:12px; padding:1rem 1.2rem; margin-bottom:1rem; overflow-x:auto; }
table { width:100%; border-collapse:collapse; } th, td { padding:.45rem .5rem; border-bottom:1px solid var(--rand); text-align:left; }
th { font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; color:var(--dim); } td.z, th.z { text-align:right; font-variant-numeric:tabular-nums; }
.plus { color:var(--gut); } .minus { color:var(--schlecht); } .dim { color:var(--dim); } .veraltet { color:var(--warn); }
button, .knopf { font:inherit; font-weight:600; padding:.5rem 1rem; border-radius:9px; border:1px solid var(--akz); background:var(--akz); color:#0f1720; cursor:pointer; text-decoration:none; display:inline-block; }
button.leise, .knopf.leise { background:transparent; color:var(--akz); } button.gefahr { background:transparent; color:var(--schlecht); border-color:var(--schlecht); }
input, select, textarea { font:inherit; padding:.4rem .5rem; border:1px solid var(--rand); border-radius:8px; background:var(--bg); color:var(--tx); }
.zeile { display:flex; gap:.6rem; flex-wrap:wrap; align-items:end; } label { display:flex; flex-direction:column; gap:.2rem; font-size:.9rem; color:var(--dim); }
.meldung { max-width:1150px; margin:1rem auto 0; padding:.6rem 1rem; border-radius:10px; } .meldung.ok { background:#123524; color:#bbf7d0; } .meldung.fehler { background:#3b1618; color:#fecaca; }
.stimmung { font-weight:700; } .stimmung.positiv { color:var(--gut); } .stimmung.negativ { color:var(--schlecht); } .stimmung.neutral { color:var(--dim); }
.fuss { max-width:1150px; margin:2rem auto; padding:0 1rem; color:var(--dim); font-size:.85rem; }
.inline { display:inline; } .klein { font-size:.85rem; }
.einpreis { margin:1rem 0; padding:.7rem 1rem; border-left:4px solid var(--warn); background:var(--bg); border-radius:8px; } .einpreis h3 { margin:.1rem 0 .4rem; }
.art-krypto { color:var(--warn); font-weight:600; }
tr.unterzeile td { padding-top:0; border-bottom:1px solid var(--rand); } tr.unterzeile table { margin:.4rem 0; } details.buchungen summary { cursor:pointer; color:var(--akz); }
/* Depot-Kursgrafik (29.09.2026), angelehnt an uupm.cc/demo/fintech-crypto */
.grafik-karte { position:relative; background:radial-gradient(120% 140% at 85% 0%, rgba(74,222,128,.07), transparent 55%), linear-gradient(180deg, #121c27, var(--fl)); }
.grafik-kopf { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; }
.grafik-wert { font-size:2rem; font-weight:700; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.grafik-veraenderung { font-size:1.05rem; font-weight:600; font-variant-numeric:tabular-nums; }
.grafik-flaeche { position:relative; margin:.6rem 0 .3rem; min-height:260px; }
.grafik-svg { display:block; width:100%; height:260px; overflow:visible; }
.grafik-start { stroke:var(--dim); stroke-dasharray:3 5; stroke-width:1; opacity:.5; }
.grafik-achse { fill:var(--dim); font-size:11px; }
.grafik-kreuz { stroke:var(--dim); stroke-width:1; stroke-dasharray:2 3; }
.grafik-marke { stroke:var(--fl); stroke-width:2; } .grafik-marke.kauf { fill:var(--akz); } .grafik-marke.verkauf { fill:var(--warn); }
.grafik-tip { position:absolute; pointer-events:none; min-width:140px; padding:.45rem .6rem; border-radius:10px; font-size:.85rem;
  background:rgba(15,23,32,.92); border:1px solid var(--rand); box-shadow:0 8px 24px rgba(0,0,0,.35); }
.grafik-tip-wert { font-weight:700; font-variant-numeric:tabular-nums; }
.grafik-knoepfe { display:flex; gap:.4rem; margin:.2rem 0 .5rem; }
.grafik-knoepfe button { background:transparent; color:var(--dim); border:1px solid transparent; padding:.3rem .8rem; border-radius:8px; font-size:.85rem; }
.grafik-knoepfe button:hover { color:var(--tx); } .grafik-knoepfe button.aktiv { background:var(--akz); color:#0f1720; }
/* Login (29.09.2026) */
.login-seite { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1rem;
  background:radial-gradient(90% 70% at 70% 10%, rgba(74,222,128,.08), transparent 60%), var(--bg); }
.login-karte { width:100%; max-width:380px; margin:0; } .login-marke { display:flex; align-items:center; gap:.6rem; font-size:1.3rem; font-weight:700; margin-bottom:1rem; }
.login-formular { display:flex; flex-direction:column; gap:.8rem; } .login-formular input:not([type=checkbox]) { width:100%; }
.login-bleiben span { display:flex; gap:.4rem; align-items:center; color:var(--tx); }
.abmelden button { padding:.3rem .7rem; font-size:.85rem; } .login-karte .meldung { margin:0 0 .8rem; } code { font-size:.85em; }