/* timeCapt — Marketing-Site (timecapt.de) */ /* Design-Tokens identisch zur App (web/css/main.css) */ :root { --tc-primary: #f57c1f; --tc-primary-hover: #ff8c2a; --tc-primary-fg: #ffffff; --tc-primary-soft: rgba(245, 124, 31, 0.12); --tc-accent-red: #e34f4f; --tc-stat-cyan: #29b6f6; --tc-stat-purple: #ab47bc; --tc-stat-green: #66bb6a; --tc-bg: #2d3a55; --tc-surface: #323f5c; --tc-surface-2: #3a4870; --tc-surface-border: #3d4a68; --tc-text: #e6e8ee; --tc-text-strong: #ffffff; --tc-text-muted: #a0a8bd; --tc-text-dim: #6b7488; --tc-divider: rgba(255, 255, 255, 0.06); --tc-border: rgba(255, 255, 255, 0.10); --tc-input-bg: rgba(0, 0, 0, 0.15); --tc-input-border: rgba(255, 255, 255, 0.12); --tc-input-border-hover: rgba(255, 255, 255, 0.24); --tc-elev-2: 0 2px 6px rgba(0,0,0,0.35); --tc-elev-4: 0 4px 14px rgba(0,0,0,0.4); /* Pastell-Pflichtbuttons (Widerruf/Kündigung) — dunkles Theme */ --tc-legal-widerruf-bg: #e9a8a8; --tc-legal-widerruf-fg: #5a1717; --tc-legal-kuendigen-bg: #aebdec; --tc-legal-kuendigen-fg: #1d2b5e; } [data-theme="light"] { --tc-primary-hover: #e66a00; --tc-primary-soft: rgba(245, 124, 31, 0.10); --tc-bg: #f3f4f8; --tc-surface: #ffffff; --tc-surface-2: #f8f9fc; --tc-surface-border: #e4e7ef; --tc-text: #1f2333; --tc-text-strong: #0f1320; --tc-text-muted: #5f6780; --tc-text-dim: #9aa2b8; /* Pastell-Pflichtbuttons (Widerruf/Kündigung) — helles Theme */ --tc-legal-widerruf-bg: #f6cccc; --tc-legal-widerruf-fg: #8c2020; --tc-legal-kuendigen-bg: #ccd9f7; --tc-legal-kuendigen-fg: #28386f; --tc-divider: rgba(0, 0, 0, 0.06); --tc-border: rgba(0, 0, 0, 0.10); --tc-input-bg: #ffffff; --tc-input-border: #d6dae4; --tc-input-border-hover: #9aa2b8; --tc-elev-2: 0 2px 8px rgba(0,0,0,0.08); --tc-elev-4: 0 6px 20px rgba(0,0,0,0.10); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; } /* Theme-aware Seitenhintergrund — überschreibt den fest verdrahteten Inline-Style im (site.css lädt danach), damit der Hell-/Dunkel-Umschalter wirklich greift. */ html { background: var(--tc-bg); color: var(--tc-text); transition: background-color .2s ease, color .2s ease; } body { font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 15px; line-height: 1.6; color: var(--tc-text); background: var(--tc-bg); -webkit-font-smoothing: antialiased; transition: background-color .2s ease, color .2s ease; } a { color: var(--tc-primary); text-decoration: none; } a:hover { text-decoration: underline; } .tc-container { max-width: 1080px; margin: 0 auto; padding: 0 24px; } /* ---------- Topbar ---------- */ .tc-topbar { position: sticky; top: 0; z-index: 50; background: var(--tc-bg); border-bottom: 1px solid var(--tc-divider); } .tc-topbar-inner { display: flex; align-items: center; gap: 16px; height: 64px; } .tc-logo-img { height: 26px; width: auto; } .tc-topbar-spacer { flex: 1; } .tc-topbar nav { display: flex; align-items: center; gap: 10px; } /* Topbar-Elemente einheitlich: gleiche Höhe (38px), gleiche Optik, klare Gruppen (Navi | Sprache + Theme | Anmelden + CTA) mit dezenten Trennstrichen. Die Trennstriche hängen als Pseudo-Elemente an den Nachbar-LINKS, weil