/* ==== Design-Themes v0.5.72 ============================================ Drei umschaltbare App-Designs, aktiviert via [data-app-theme] auf . Ohne Attribut = "editorial" (Standard). "terminal" = dunkler Command-Center-Look. "bureau" = formeller Navy-Serif-Look (fuer Kanzlei-/Verwaltungs-Kunden). Ueberschreibt die --tq-*-Variablen aus site.css/tq-modern.css/clientq-modern.css. */ /* ---------- Fonts (nur was noch nicht in App.razor gelinkt ist) ---------- */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400..600&family=DM+Sans:opsz,wght@9..40,300..700&family=JetBrains+Mono:wght@400;500;600&family=Public+Sans:wght@300..700&family=Source+Serif+4:opsz,wght@8..60,400..600&family=IBM+Plex+Sans:wght@300..600&display=swap'); /* ==== EDITORIAL (Standard) ============================================= Ruhig, Newsreader-Serif als Akzent, Ice-White, deep teal. Keine Aenderungen wenn kein data-app-theme gesetzt ist -- so bleibt Rueckwaertskompatibilitaet: alter Look bis der User bewusst wechselt. */ [data-app-theme="editorial"] { --tq-cyan: #0F5460; /* deep teal statt neon-cyan */ --tq-bg-card: #FFFFFF; --tq-bg-soft: #F1F4F8; --tq-bg-hover: #E8ECF3; --tq-text: #0F1620; --tq-text-muted: #7C8797; --tq-text-soft: #A0A9B8; --tq-border: #E1E5EC; --tq-danger: #B91C1C; --tq-warn: #B8875D; --font-body: 'DM Sans', system-ui, -apple-system, sans-serif; --font-display: 'Newsreader', Georgia, serif; } [data-app-theme="editorial"] body { background: #F1F4F8; font-family: var(--font-body); } [data-app-theme="editorial"] h1, [data-app-theme="editorial"] h2, [data-app-theme="editorial"] .page-head h1 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; } [data-app-theme="editorial"] .dash-card .value, [data-app-theme="editorial"] .cockpit-num { font-family: var(--font-display); font-weight: 500; } /* ==== TERMINAL (Dark Command-Center) =================================== */ [data-app-theme="terminal"] { --tq-cyan: #00E5A0; /* mint als accent */ --tq-cyan-2: #4C7EFF; --tq-bg-card: #12161E; --tq-bg-soft: #1A1F2A; --tq-bg-hover: #232937; --tq-text: #E6E7EA; --tq-text-muted: #8B95A5; --tq-text-soft: #6B7280; --tq-border: #24293A; --tq-danger: #FF6D6D; --tq-warn: #FFB020; --font-body: 'Public Sans', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; } [data-app-theme="terminal"] { background: #0A0D12; color-scheme: dark; } [data-app-theme="terminal"] body { background: #0A0D12; color: var(--tq-text); font-family: var(--font-body); } [data-app-theme="terminal"] .card, [data-app-theme="terminal"] .dash-card, [data-app-theme="terminal"] .mailv2-side, [data-app-theme="terminal"] .mailv2-liste, [data-app-theme="terminal"] .mailv2-detail, [data-app-theme="terminal"] .chat-sb, [data-app-theme="terminal"] .chat-main .card { background: var(--tq-bg-card); border-color: var(--tq-border); color: var(--tq-text); } [data-app-theme="terminal"] .app-main { background: #0A0D12; } [data-app-theme="terminal"] .dash-card .value, [data-app-theme="terminal"] .cockpit-num, [data-app-theme="terminal"] .mailv2-side-count, [data-app-theme="terminal"] .chat-item-title { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } [data-app-theme="terminal"] input, [data-app-theme="terminal"] textarea, [data-app-theme="terminal"] select { background: #1A1F2A; color: var(--tq-text); border-color: var(--tq-border); } [data-app-theme="terminal"] .btn { background: var(--tq-bg-card); color: var(--tq-text); border-color: var(--tq-border); } [data-app-theme="terminal"] .btn-primary { background: var(--tq-cyan); color: #0A0D12; border-color: var(--tq-cyan); } [data-app-theme="terminal"] .btn:hover { border-color: var(--tq-cyan); color: var(--tq-cyan); } [data-app-theme="terminal"] .chip, [data-app-theme="terminal"] .chip-cyan { background: rgba(0,229,160,.12); color: var(--tq-cyan); border-color: transparent; } /* ==== BUREAU (Formal Navy-Serif) ======================================= */ [data-app-theme="bureau"] { --tq-cyan: #005EA5; /* koenigliches blau */ --tq-navy: #001B44; --tq-bg-card: #FFFFFF; --tq-bg-soft: #EEF2F7; --tq-bg-hover: #E1E7F0; --tq-text: #0B1929; --tq-text-muted: #6B7688; --tq-text-soft: #98A2B3; --tq-border: #D5DCE6; --tq-danger: #B8320E; --tq-warn: #A8770E; --font-body: 'IBM Plex Sans', system-ui, sans-serif; --font-display: 'Source Serif 4', Georgia, serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; } [data-app-theme="bureau"] body { background: #EEF2F7; font-family: var(--font-body); } [data-app-theme="bureau"] h1, [data-app-theme="bureau"] h2, [data-app-theme="bureau"] .page-head h1 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.005em; color: var(--tq-navy); } [data-app-theme="bureau"] .dash-card { border-top: 3px solid var(--tq-cyan); border-radius: 4px; } [data-app-theme="bureau"] .dash-card .value { font-family: var(--font-display); font-weight: 500; color: var(--tq-navy); font-variant-numeric: tabular-nums; } [data-app-theme="bureau"] .btn-primary { background: var(--tq-navy); border-color: var(--tq-navy); } /* ---------- Dark-Mode-Kombis fuer editorial + bureau ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-app-theme="editorial"], :root:not([data-theme="light"])[data-app-theme="bureau"] { --tq-bg-card: #1F2937; --tq-bg-soft: #111827; --tq-bg-hover: #2A3441; --tq-text: #E6E7EA; --tq-text-muted: #9CA3AF; --tq-border: #374151; } } :root[data-theme="dark"][data-app-theme="editorial"], :root[data-theme="dark"][data-app-theme="bureau"] { --tq-bg-card: #1F2937; --tq-bg-soft: #111827; --tq-bg-hover: #2A3441; --tq-text: #E6E7EA; --tq-text-muted: #9CA3AF; --tq-border: #374151; }