/* Design Trading-System – hell/dunkel über data-theme am (Standard: Systemeinstellung) */ :root { --bg:#f5f6f8; --flaeche:#ffffff; --flaeche2:#f0f2f5; --rand:#e2e5ea; --text:#141821; --leise:#667085; --akzent:#2563eb; --akzent-weich:#e8efff; --gruen:#15924a; --gruen-weich:#e3f5ea; --rot:#d23b30; --rot-weich:#fbe8e6; --gelb:#a86b00; --gelb-weich:#fff2d6; --schatten:0 1px 2px rgba(16,24,40,.06); color-scheme: light; } :root[data-theme="dunkel"] { --bg:#121315; --flaeche:#1a1b1e; --flaeche2:#222327; --rand:#2b2d31; --text:#ececee; --leise:#9a9ca3; --akzent:#3b82f6; --akzent-weich:#172340; --gruen:#34c46a; --gruen-weich:#14281c; --rot:#f0574c; --rot-weich:#321a18; --gelb:#e6b03c; --gelb-weich:#2e2512; --schatten:none; color-scheme: dark; } * { box-sizing:border-box; } html, body { margin:0; } body { font:15px/1.45 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; background:var(--bg); color:var(--text); } a { color:inherit; } .zahl, .tabelle td.z { font-variant-numeric: tabular-nums; } /* Grundgerüst */ .huelle { display:grid; grid-template-columns:220px 1fr; min-height:100vh; } .seite-links { background:var(--flaeche); border-right:1px solid var(--rand); padding:14px 10px; position:sticky; top:0; height:100vh; } .marke { display:flex; align-items:center; gap:8px; font-weight:700; padding:4px 8px 16px; font-size:1.05rem; } .marke .punkt { width:22px; height:22px; border-radius:6px; background:var(--akzent); display:grid; place-items:center; color:#fff; font-size:.8rem; } .nav a { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; text-decoration:none; color:var(--leise); font-weight:500; } .nav a svg { width:18px; height:18px; flex:none; } .nav a:hover { background:var(--flaeche2); color:var(--text); } .nav a.aktiv { background:var(--akzent-weich); color:var(--akzent); } .nav .trenner { height:1px; background:var(--rand); margin:10px 6px; } .haupt { min-width:0; } .kopf { display:flex; align-items:center; gap:10px; padding:12px 24px; border-bottom:1px solid var(--rand); background:var(--flaeche); position:sticky; top:0; z-index:5; } .kopf h1 { font-size:1.05rem; margin:0; font-weight:600; } .kopf .rechts { margin-left:auto; display:flex; align-items:center; gap:8px; color:var(--leise); } .symbol-knopf { width:34px; height:34px; border-radius:8px; border:1px solid var(--rand); background:var(--flaeche); color:var(--text); display:grid; place-items:center; cursor:pointer; text-decoration:none; } .symbol-knopf svg { width:17px; height:17px; } .inhalt { padding:20px 24px 40px; max-width:1280px; } /* Bausteine */ .raster { display:grid; gap:14px; } .raster.k6 { grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr)); } .raster.k3 { grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); } .raster.k2 { grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr)); } .karte { background:var(--flaeche); border:1px solid var(--rand); border-radius:12px; padding:16px; box-shadow:var(--schatten); min-width:0; } .karte + .karte, .raster + .karte, .karte + .raster, .raster + .raster { margin-top:14px; } .karte h2 { font-size:.95rem; font-weight:600; margin:0 0 12px; display:flex; align-items:center; gap:8px; } .karte h2 .rechts { margin-left:auto; font-weight:500; color:var(--leise); font-size:.85rem; } .kachel .titel { color:var(--leise); font-size:.85rem; font-weight:500; } .kachel .wert { font-size:1.6rem; font-weight:700; margin:6px 0 2px; font-variant-numeric:tabular-nums; } .kachel .unter { color:var(--leise); font-size:.8rem; } .plus { color:var(--gruen); } .minus { color:var(--rot); } .leise, .leer { color:var(--leise); } .leer { margin:8px 0; font-size:.9rem; } .balkenpaar { display:flex; height:6px; border-radius:4px; overflow:hidden; margin-top:8px; background:var(--flaeche2); } .balkenpaar .g { background:var(--gruen); } .balkenpaar .v { background:var(--rot); } .status { font-size:1.05rem; font-weight:600; padding:12px 14px; border-radius:10px; margin-bottom:10px; display:flex; gap:8px; align-items:center; } .gruen { background:var(--gruen-weich); color:var(--gruen); } .rot { background:var(--rot-weich); color:var(--rot); } .gelb { background:var(--gelb-weich); color:var(--gelb); } .blau { background:var(--akzent-weich); color:var(--akzent); } .marker { display:inline-block; padding:2px 8px; border-radius:6px; font-size:.78rem; font-weight:600; } ul.liste { margin:6px 0; padding-left:18px; } ul.liste li { margin:3px 0; } /* Formulare */ label { display:block; font-size:.82rem; color:var(--leise); margin:10px 0 4px; font-weight:500; } input, select, textarea { width:100%; padding:9px 11px; font:inherit; border:1px solid var(--rand); border-radius:8px; background:var(--flaeche2); color:var(--text); } input:focus, select:focus, textarea:focus { outline:2px solid var(--akzent-weich); border-color:var(--akzent); } .felder { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0 12px; } .haken label { display:flex; gap:9px; align-items:flex-start; color:var(--text); margin:7px 0; font-size:.92rem; font-weight:400; } .haken input { width:16px; height:16px; margin-top:2px; flex:none; accent-color:var(--akzent); } .knopf { display:inline-flex; align-items:center; gap:6px; padding:9px 15px; font:inherit; font-weight:600; border:0; border-radius:8px; cursor:pointer; background:var(--akzent); color:#fff; text-decoration:none; } .knopf.zweit { background:var(--flaeche2); color:var(--text); border:1px solid var(--rand); } .knopf.klein { padding:5px 10px; font-size:.85rem; } .knopfreihe { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; } /* Tabellen, Reiter, Filter */ .tabelle { width:100%; border-collapse:collapse; font-size:.9rem; } .tabelle th { text-align:left; font-weight:600; color:var(--leise); font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; padding:8px 10px; background:var(--flaeche2); border-bottom:1px solid var(--rand); } .tabelle td { padding:9px 10px; border-bottom:1px solid var(--rand); } .tabelle td.z, .tabelle th.z { text-align:right; } .tabelle tr:hover td { background:var(--flaeche2); } .tabelle a { text-decoration:none; font-weight:500; } .rollen { overflow-x:auto; } .reiter { display:inline-flex; gap:2px; background:var(--flaeche2); border:1px solid var(--rand); border-radius:9px; padding:3px; margin-bottom:14px; flex-wrap:wrap; } .reiter a { padding:6px 12px; border-radius:7px; text-decoration:none; color:var(--leise); font-weight:500; font-size:.9rem; } .reiter a.aktiv { background:var(--flaeche); color:var(--text); box-shadow:var(--schatten); } .filter { display:flex; gap:10px; flex-wrap:wrap; align-items:end; margin-bottom:14px; } .filter select { width:auto; min-width:120px; max-width:100%; } /* Diagramme */ .diagramm { width:100%; height:auto; display:block; } .d-linie { fill:none; stroke:var(--akzent); stroke-width:2; } .d-flaeche { fill:var(--akzent); opacity:.12; } .d-negativ .d-linie { stroke:var(--rot); } .d-negativ .d-flaeche { fill:var(--rot); } .d-null { stroke:var(--rand); stroke-dasharray:4 4; } .d-achse { fill:var(--leise); font-size:11px; } .d-plus { fill:var(--gruen); } .d-minus { fill:var(--rot); } /* Kalender */ .kalender { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; } .kalender .kopfzeile { color:var(--leise); font-size:.78rem; font-weight:600; text-align:center; padding-bottom:2px; } .kalender .tag { min-height:64px; border:1px solid var(--rand); border-radius:8px; padding:6px 8px; background:var(--flaeche2); font-size:.8rem; } .kalender .tag .d { color:var(--leise); } .kalender .tag .r { font-weight:700; margin-top:4px; font-size:.95rem; } .kalender .tag.plus-bg { background:var(--gruen-weich); border-color:transparent; } .kalender .tag.minus-bg { background:var(--rot-weich); border-color:transparent; } .kalender .tag.aus { background:transparent; border:0; } /* Anmeldung */ .anmelde-huelle { min-height:100vh; display:grid; place-items:center; padding:16px; } .anmelde-huelle .karte { width:100%; max-width:380px; } /* Handy */ @media (max-width: 800px) { .huelle { grid-template-columns:minmax(0,1fr); } .seite-links { min-width:0; position:sticky; height:auto; z-index:6; padding:8px; border-right:0; border-bottom:1px solid var(--rand); } .marke { display:none; } .nav { display:flex; overflow-x:auto; gap:2px; } .nav a { white-space:nowrap; padding:7px 10px; } .nav .trenner, .nav .nur-breit { display:none; } .kopf { position:static; padding:10px 16px; } .inhalt { padding:14px 16px 32px; } .raster.k2, .raster.k3 { grid-template-columns:minmax(0,1fr); } .raster.k6 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .kachel .wert { font-size:1.25rem; } .karte { padding:12px; } .felder { grid-template-columns:minmax(0,1fr); } .kalender { gap:3px; } .kalender .tag { min-height:44px; padding:3px; font-size:.7rem; } .kalender .tag .r { font-size:.72rem; } .kalender .tag .leise { display:none; } }