/* Investment-Tracker — Styles, abgeleitet aus docs/mockup.html (verbindliche Optik). */ :root { --ground: #eef1f4; --surface: #ffffff; --surface-2: #f6f8fa; --line: #dbe1e7; --ink: #16202a; --ink-2: #4a5763; --ink-3: #7c8896; --accent: #0e6e7d; --accent-soft: #d7ebee; --accent-ink: #0a5460; --gain: #1b7a4b; --gain-soft: #dbf0e4; --loss: #c0392b; --loss-soft: #f7dedb; --warn: #a86611; --warn-soft: #f8ebd2; /* Schriftfarbe AUF gefülltem Grün/Orange (Kauf/Verkauf-Umschalter): hell genug Kontrast mit Weiß. */ --on-gain: #ffffff; --on-warn: #ffffff; /* Schriftfarbe AUF gefülltem Rot (Fehlermeldung). */ --on-loss: #ffffff; /* Schriftfarbe AUF gefuelltem Akzent (schwebender "Erfassen"-Knopf). */ --on-accent: #ffffff; /* Verlauf der türkisen Kacheln (Gesamtkapital, KPI). Als eigene Farben statt aus --accent gemischt: im Dunkelmodus ist --accent HELL, und weiße Schrift darauf lag bei 2,3-3,6:1 (Senior-Review 33). */ --accent-fill-a: #0e6e7d; --accent-fill-b: #0a4550; --grid: #e4e9ee; --shadow: 0 1px 2px rgba(20,32,42,.06), 0 8px 24px rgba(20,32,42,.06); --shadow-lg: 0 16px 48px rgba(20,32,42,.22); --r: 14px; --r-sm: 9px; --font-ui: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; } /* Dunkel-Variablen als eigenes Set, damit sie sowohl automatisch (System) ALS AUCH per manuellem Umschalter greifen. Der Umschalter (js/theme-init.js + makeThemeToggle in app.js) setzt data-theme auf ; ohne gespeicherte Wahl folgt die App dem System (prefers-color-scheme). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground: #0e141a; --surface: #161e27; --surface-2: #1c2732; --line: #29343f; --ink: #e7edf3; --ink-2: #a5b2bf; --ink-3: #71808e; --accent: #46b3c4; --accent-soft: #123138; --accent-ink: #8fdce8; --gain: #46d08a; --gain-soft: #123528; --loss: #f0776b; --loss-soft: #351d1b; --warn: #e6b053; --warn-soft: #33280f; /* Dunkel: Grün/Orange sind hier HELL — weiße Schrift darauf wäre unlesbar (ca. 2:1), daher dunkel. */ --on-gain: #08231a; --on-warn: #2a1e08; /* Rot ist im Dunkelmodus HELL — weisse Schrift darauf lag bei 2,8:1 (Senior-Review Runde 31). */ --on-loss: #2c0d09; /* Akzent ist im Dunkelmodus HELL — weisse Schrift darauf waere unlesbar (2,5:1). */ --on-accent: #06232a; /* Dunkel deutlich gedaempfter fuehren, damit weisse Schrift lesbar bleibt (>= 4,5:1). */ --accent-fill-a: #14535e; --accent-fill-b: #0c333b; --grid: #243039; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); --shadow-lg: 0 18px 52px rgba(0,0,0,.6); } } :root[data-theme="dark"] { --ground: #0e141a; --surface: #161e27; --surface-2: #1c2732; --line: #29343f; --ink: #e7edf3; --ink-2: #a5b2bf; --ink-3: #71808e; --accent: #46b3c4; --accent-soft: #123138; --accent-ink: #8fdce8; --gain: #46d08a; --gain-soft: #123528; --loss: #f0776b; --loss-soft: #351d1b; --warn: #e6b053; --warn-soft: #33280f; --on-gain: #08231a; --on-warn: #2a1e08; /* Rot ist im Dunkelmodus HELL — weisse Schrift darauf lag bei 2,8:1 (Senior-Review Runde 31). */ --on-loss: #2c0d09; /* Akzent ist im Dunkelmodus HELL — weisse Schrift darauf waere unlesbar (2,5:1). */ --on-accent: #06232a; /* Dunkel deutlich gedaempfter fuehren, damit weisse Schrift lesbar bleibt (>= 4,5:1). */ --accent-fill-a: #14535e; --accent-fill-b: #0c333b; --grid: #243039; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); --shadow-lg: 0 18px 52px rgba(0,0,0,.6); } * { box-sizing: border-box; } html, body { margin: 0; } body { font-family: var(--font-ui); color: var(--ink); background: radial-gradient(1200px 600px at 80% -10%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%), var(--ground); min-height: 100vh; line-height: 1.5; -webkit-font-smoothing: antialiased; } .num { font-variant-numeric: tabular-nums; } .hidden { display: none !important; } button { font: inherit; } /* ===== App-Bar (oben) ===== */ /* z-index über dem schwebenden „Erfassen"-Knopf (55): auf sehr flachen Bildschirmen (kleines iPhone im Querformat) überlappten die beiden sonst, und ein Tipp auf „Abmelden" hätte den Knopf getroffen. */ /* Seitliche Sicherheitsabstaende: die Seite laeuft per `viewport-fit=cover` bis unter die abgerundeten Ecken des iPhones. Ohne `env(safe-area-inset-left/right)` steht der Inhalt dort teilweise unter dem Rand — auf Diegos Handy war die rechte Kachel und das ☰ angeschnitten (2026-08-01). Gilt fuer alle Bildschirm-Container gleichermassen. */ .appbar { position: sticky; top: 0; z-index: 65; display: flex; align-items: center; gap: 9px; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--line); background: var(--surface); } .appbar .back { border: 1px solid var(--line); background: var(--surface); color: var(--ink); width: 36px; height: 36px; border-radius: 9px; font-size: 20px; cursor: pointer; display: none; place-items: center; } .appbar .back.show { display: grid; } .appbar .title { font-weight: 660; font-size: 16px; letter-spacing: -.01em; } .appbar .sp { margin-left: auto; } .iconbtn { position: relative; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 15px; display: grid; place-items: center; cursor: pointer; } .iconbtn .dot { position: absolute; top: 5px; right: 6px; width: 8px; height: 8px; background: var(--loss); border-radius: 999px; border: 1.5px solid var(--surface); } .iconbtn.spin { animation: spin .7s linear; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .iconbtn.spin { animation: none; } } .logout-link { background: none; border: 0; color: var(--ink-3); cursor: pointer; font-size: 12.5px; text-decoration: underline; } /* ===== ☰-Menue (nur Eingabe-Ansicht; im Dashboard ist oben genug Platz) ===== Klappt unter dem Knopf auf. [hidden] muss display:none erzwingen, sonst gewinnt das display:grid. */ /* Bewusst KEIN position:relative: das Popup haengt an der Kopfzeile (die ist sticky und damit der Bezugsrahmen), nicht am Knopf — so behaelt es seine 8px Abstand auch dann, wenn der Titel auf schmalen Geraeten zweizeilig wird und die Kopfzeile mitwaechst. */ .menu-wrap { flex: none; } .menu-wrap.on .menu-btn { border-color: var(--accent); color: var(--accent-ink); } /* Unsichtbarer Fänger für den Tipp „daneben" (schließt das Menü, ohne das Element darunter auszulösen). */ /* [hidden] hier ausdruecklich, obwohl der Browser das von sich aus tut: kaeme je ein `display` in diese Regel, waere die Folge eine unsichtbare, bildschirmfuellende Tippsperre ueber der ganzen App. */ .menu-backdrop { position: fixed; inset: 0; z-index: 30; } .menu-backdrop[hidden] { display: none; } /* right: 16px = Innenabstand der Kopfzeile → fluchtet mit den Karten darunter. Breite: min() statt min-width, denn min-width schlaegt max-width — sonst raegte das rechts verankerte Menue bei starker Textvergroesserung ueber den linken Bildrand hinaus. */ .menu-pop { position: absolute; top: calc(100% + 8px); right: 16px; z-index: 40; width: min(212px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-lg); padding: 6px; display: grid; gap: 2px; } .menu-pop[hidden] { display: none; } .menu-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: none; border: 0; color: var(--ink); font-size: 14.5px; padding: 11px 10px; border-radius: 7px; cursor: pointer; } .menu-item:hover { background: var(--surface-2); } .menu-item:focus-visible { background: var(--surface-2); outline: 2px solid var(--accent); outline-offset: -2px; } .menu-item .mi-ic { width: 20px; font-size: 15px; text-align: center; flex: none; } .menu-sep { height: 1px; background: var(--line); margin: 4px 2px; } /* ===== Einstellungen (Eingabe-Ansicht) ===== */ .set-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 15px; margin-bottom: 14px; box-shadow: var(--shadow); } .set-h { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 700; margin-bottom: 10px; } .set-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); } /* Erste Zeile ohne Trennlinie. Ueber Geschwister-Selektor, NICHT :first-of-type/:first-child — das erste Kind der Karte ist die Ueberschrift (.set-h), beide Pseudoklassen griffen deshalb nie. */ .set-h + .set-row { border-top: 0; padding-top: 0; } .set-l { color: var(--ink-2); font-size: 13.5px; flex: none; } .set-v { color: var(--ink); font-weight: 620; font-size: 14px; text-align: right; min-width: 0; overflow-wrap: anywhere; } /* Erklaersaetze in --ink-2: --ink-3 liegt bei dieser Groesse unter dem Lesbarkeits-Mindestkontrast. */ .set-note { color: var(--ink-2); font-size: 12.5px; margin-top: 10px; } /* Warnung in der Karte (z.B. „letzte Kopie ist 5 Tage alt") — muss ins Auge fallen. Textfarbe --ink, NICHT --on-warn: letzteres ist fuer Text auf VOLLEM --warn gedacht und laege auf --warn-soft in beiden Modi bei ~1,2:1 (nachgerechnet). --ink liegt bei 14,0:1 / 12,3:1. */ .set-warn { color: var(--ink); background: var(--warn-soft); border: 1px solid var(--warn); border-radius: 8px; font-size: 12.5px; line-height: 1.4; margin-top: 10px; padding: 9px 11px; } .set-card .cta, .set-card .cta.ghost { margin-top: 12px; } /* Datensicherung: je Zeile eine herunterladbare Kopie. min-height 44px = bequeme Tippfläche. Bewusst ein