/* Energy Tracker — Clean SaaS, Hell/Dunkel (manueller Umschalter), System-Schrift. Design bewusst vom Schwesterprojekt „Zeiterfassung" übernommen (gleiche Tokens/Look). */ /* Hell ist die Basis. data-theme="light|dark" auf steuert die Auswahl (dauerhaft in localStorage; ohne Wahl beim ersten Laden an der OS-Präferenz orientiert). */ :root { color-scheme: light; --ground: #f7f8fb; --surface: #ffffff; --surface-2: #fbfcfe; --text: #1e2330; --muted: #66718c; --faint: #97a1b5; --border: #e7eaf1; --border-strong: #d7dce8; --accent: #5b5bd6; --accent-weak: #ececfb; --good: #1f9d63; --error: #c0392b; --shadow: 0 1px 2px rgba(20, 28, 54, .04), 0 8px 24px -12px rgba(20, 28, 54, .18); --radius: 14px; } /* Dunkel-Palette — manuell gewählt (data-theme="dark"). */ :root[data-theme="dark"] { color-scheme: dark; --ground: #0e1119; --surface: #161b26; --surface-2: #1b212e; --text: #e7eaf2; --muted: #9aa4ba; --faint: #6b768f; --border: #283143; --border-strong: #36415a; --accent: #9a9af2; --accent-weak: #23253b; --good: #4ec98a; --error: #f0857a; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -14px rgba(0, 0, 0, .6); } * { box-sizing: border-box; } body { margin: 0; background: var(--ground); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-variant-numeric: tabular-nums; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--accent); } h1 { font-size: 21px; letter-spacing: -.02em; margin: 0 0 2px; } h2 { font-size: 15px; letter-spacing: -.01em; margin: 0 0 10px; } .muted { color: var(--muted); } .small { font-size: 12.5px; } code { background: var(--accent-weak); color: var(--accent); padding: .1rem .35rem; border-radius: 5px; font-size: .9em; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* Scrollbars — dezent, theme-aware. */ html { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: padding-box; } /* App-Leiste */ .topbar { position: sticky; top: 0; z-index: 8; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 24px; padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); background: var(--surface); border-bottom: 1px solid var(--border); } .brand { font-weight: 700; text-decoration: none; color: var(--text); letter-spacing: -.01em; } .topbar-actions { display: flex; align-items: center; gap: 8px; } .topbar-actions form { margin: 0; } /* Icon-Buttons (Theme, Sync, Abmelden) — einheitliches Kästchen, fingerfreundlich (iPhone). */ .icon-btn, .theme-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--border-strong); border-radius: 10px; background: none; color: var(--muted); cursor: pointer; text-decoration: none; font-family: inherit; -webkit-tap-highlight-color: transparent; } .icon-btn[hidden] { display: none; } /* the display above would otherwise beat [hidden] */ .icon-btn:hover, .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } .icon-btn svg, .theme-toggle svg { width: 18px; height: 18px; display: block; } /* Theme-Umschalter: passendes Icon je data-theme. */ .theme-toggle svg { display: none; } :root[data-theme="light"] .theme-toggle .ic-light, :root[data-theme="dark"] .theme-toggle .ic-dark { display: block; } /* Layout */ .container { max-width: 40rem; margin: 26px auto; padding: 0 24px; padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); } .container-wide { max-width: 1000px; } /* Cards */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin: 16px 0; } form.card { max-width: 24rem; display: grid; gap: 1rem; } /* Card header with an inline control (e.g. the Woche/Monat range toggle). */ .card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: 10px; } .card-head h2 { margin: 0; flex: 1 1 auto; min-width: 0; } /* shrinks/wraps so right-side controls stay put */ /* Segmented control: Woche / Monat */ .range-toggle { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; } .range-btn { appearance: none; cursor: pointer; padding: 5px 12px; min-height: 32px; font: inherit; font-size: 13px; font-weight: 600; line-height: 1; color: var(--muted); background: transparent; border: 0; border-radius: 8px; transition: background .15s ease, color .15s ease; } .range-btn:hover { color: var(--accent); } .range-btn.is-active { color: #fff; background: var(--accent); } .page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 6px; } .page-head form { margin: 0; } .page-head-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } /* Kompakte Sync-Statuszeile im Kopf (mobil ohne Scrollen sichtbar). */ .sync-status { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--muted); } .sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; } .sync-status.ok .sync-dot { background: var(--good); } .sync-status.fail { color: var(--error); } .sync-status.fail .sync-dot { background: var(--error); } .sync-clock { color: var(--faint); font-size: 11px; } .sync-clock::before { content: "· "; } /* Flash & status */ .flash { padding: .6rem .85rem; margin-bottom: 1rem; border-radius: 10px; color: var(--good); background: color-mix(in srgb, var(--good) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--good) 30%, var(--border)); font-size: .9rem; transition: opacity .35s ease, transform .35s ease; } .flash-hide { opacity: 0; transform: translateY(-6px); } .error { padding: .6rem .85rem; border-radius: 10px; margin: 0 0 1rem; color: var(--error); background: color-mix(in srgb, var(--error) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--error) 30%, var(--border)); } /* Forms */ label { display: grid; gap: .35rem; font-size: .85rem; color: var(--muted); } input[type="text"], input[type="password"], input[type="month"], select, textarea { padding: .6rem .7rem; font-size: 1rem; font-family: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; } input::placeholder { color: var(--faint); } button, .button { padding: .6rem 1rem; font-size: .95rem; font-weight: 600; font-family: inherit; color: #fff; background: var(--accent); border: 0; border-radius: 10px; cursor: pointer; text-decoration: none; display: inline-block; } button:hover, .button:hover { filter: brightness(1.05); } .button-secondary { padding: .55rem .9rem; font-weight: 600; border-radius: 10px; text-decoration: none; color: var(--text); background: color-mix(in srgb, var(--text) 6%, var(--surface)); border: 1px solid var(--border-strong); display: inline-grid; place-items: center; } .button-secondary:hover { border-color: var(--accent); color: var(--accent); } /* KPI-Kacheln */ .kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* mobil 2 pro Zeile */ gap: 12px; margin: 16px 0; } @media (min-width: 560px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 760px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* max 4 */ .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; } .kpi-label { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); } .kpi-value { font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; } .kpi-cost { font-size: 13px; font-weight: 600; color: var(--accent); } /* Kopf-Aktionen (Tarif + Sync nebeneinander). */ .page-head-actions { display: flex; align-items: center; gap: 8px; } .page-head-actions form { margin: 0; } /* Tarif-Infozeile unter den KPIs. */ .tarif-info { margin: 0 0 4px; } /* Abschlag-Prognose (unter = Guthaben/grün, über = Nachzahlung/rot). */ /* Abschlag/Ist/Prognose als Budget-Balken. */ .budget-status { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; white-space: nowrap; text-align: right; } .budget-status.good { color: var(--good); } .budget-status.warn { color: var(--error); } .budget { position: relative; padding-top: 20px; margin-top: 2px; } .budget-track { position: relative; display: flex; height: 26px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; } .budget-seg { height: 100%; width: 0; transition: width .6s ease; } .budget-seg.bisher { background: var(--accent); } .budget-seg.rest { opacity: .42; } .budget-seg.rest.good { background: var(--good); } .budget-seg.rest.warn { background: var(--error); } /* Abschlag marker: a vertical line across the track + a caption pinned above it. */ .budget-line { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--text); transform: translateX(-1px); } .budget-cap { position: absolute; top: 0; left: 0; transform: translateX(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; } .budget-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font-size: 12.5px; color: var(--muted); } .budget-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; background: var(--faint); } .budget-legend .dot.bisher { background: var(--accent); } .budget-legend .dot.rest.good { background: var(--good); opacity: .55; } .budget-legend .dot.rest.warn { background: var(--error); opacity: .55; } .budget-note { margin: 8px 0 0; } .linklike { padding: 0; width: auto; height: auto; display: inline; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; } .linklike:hover { filter: none; text-decoration: none; } /* Chart-Container: Chart.js ist responsiv, das Canvas füllt eine feste Box. */ .chart-box { position: relative; height: 300px; } @media (max-width: 480px) { .chart-box { height: 240px; } } /* Modal (Popup) — natives , theme-aware. */ .modal { width: min(92vw, 26rem); padding: 0; margin: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow); } .modal::backdrop { background: rgba(10, 14, 25, .5); } .modal-form { display: grid; gap: 1rem; padding: 20px; margin: 0; max-width: none; } .modal-form h2 { margin: 0; } .modal-form p { margin: 0; } .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; } @media (max-width: 480px) { .modal-actions { flex-direction: column-reverse; } .modal-actions button, .modal-actions .button-secondary { width: 100%; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }