/* ===================================================================== * Agentovo Reporting-Dashboard – Styles * Branding laut Arbeitsauftrag: Agentovo, nicht Kunden-Branding. * ===================================================================== */ /* ── Farbwelten ──────────────────────────────────────────────────────── * * Fünf Varianten, umschaltbar über data-theme am -Element. * "agentovo" ist die Vorgabe und gilt auch ohne Attribut. * * Die beiden Diagrammfarben (--series-*) sind in JEDER Variante * durchgerechnet, nicht nach Gefühl gewählt. Geprüft wurde für jede * Palette gegen ihre eigene Kartenfläche: * - Helligkeit im zulässigen Band der jeweiligen Modusart * - Farbigkeit über dem Graustufen-Grenzwert * - Abstand bei Rot-Grün-Sehschwäche (ΔE ≥ 8) * - Abstand bei Normalsicht (ΔE ≥ 15) * - Kontrast gegen die Fläche (≥ 3:1) * Die erreichten Werte stehen bei jeder Variante dabei. Wer eine Farbe * ändert, sollte sie neu prüfen – zwei Serien, die sich nur in der * Sättigung unterscheiden, sind für einen Teil der Leser identisch. * * --primary/--accent/--gradient sind reine Oberflächenfarben (Buttons, * Verlauf, aktive Zustände) und dürfen näher beieinander liegen. * ------------------------------------------------------------------- */ :root, :root[data-theme='agentovo'] { /* Agentovo · dunkles Marineblau. Diagramm ΔE: 18,1 (CVD) / 19,8 (normal) */ --primary: #3b82f6; --accent: #06b6d4; --gradient: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%); --bg: #0c0c18; --surface: #12122a; --surface-2: #171735; --border: rgba(59, 130, 246, 0.15); --border-strong: rgba(59, 130, 246, 0.35); --text: #f0f0f8; --text-muted: rgba(240, 240, 248, 0.55); --text-faint: rgba(240, 240, 248, 0.32); /* Bewusst NICHT die Marken-Hexwerte: das Marken-Cyan liegt außerhalb des Helligkeitsbands für dunkle Flächen und stünde dem Marken-Blau zu nah. */ --series-email: #2563eb; --series-chat: #22a5c4; --chart-grid: rgba(240, 240, 248, 0.08); --chart-axis: rgba(240, 240, 248, 0.32); --track: rgba(240, 240, 248, 0.06); --danger: #f87171; /* Aurora: Marken-Blau, Logo-Cyan #22D3EE (laut Branding der Glow-Akzent) und das Website-Violett #4C4FE8 – Blau → Türkis → Violett wie die Design-Referenz. */ --aurora-1: rgba(59, 130, 246, 0.26); --aurora-2: rgba(34, 211, 238, 0.17); --aurora-3: rgba(76, 79, 232, 0.24); } :root[data-theme='terminal'] { /* Terminal · Schwarz mit Grün. Diagramm ΔE: 29,2 (CVD) / 41,7 (normal) */ --primary: #16a34a; --accent: #22c55e; --gradient: linear-gradient(135deg, #15803d 0%, #22c55e 100%); --bg: #060806; --surface: #0d110d; --surface-2: #131a13; --border: rgba(22, 163, 74, 0.22); --border-strong: rgba(22, 163, 74, 0.5); --text: #e6f2e6; --text-muted: rgba(230, 242, 230, 0.55); --text-faint: rgba(230, 242, 230, 0.32); --series-email: #16a34a; --series-chat: #9333ea; --chart-grid: rgba(230, 242, 230, 0.09); --chart-axis: rgba(230, 242, 230, 0.35); --track: rgba(230, 242, 230, 0.07); --danger: #f87171; /* Aurora in den Diagrammfarben der Variante: Grün und Violett */ --aurora-1: rgba(34, 197, 94, 0.20); --aurora-2: rgba(147, 51, 234, 0.20); --aurora-3: rgba(16, 185, 129, 0.13); } :root[data-theme='sunset'] { /* Sunset · warmes Schwarz mit Orange. Diagramm ΔE: 31,4 (CVD) / 38,6 (normal) */ --primary: #e2610f; --accent: #f59e0b; --gradient: linear-gradient(135deg, #e2610f 0%, #f59e0b 100%); --bg: #120d0b; --surface: #1a1210; --surface-2: #241814; --border: rgba(226, 97, 15, 0.2); --border-strong: rgba(226, 97, 15, 0.45); --text: #f7ece5; --text-muted: rgba(247, 236, 229, 0.55); --text-faint: rgba(247, 236, 229, 0.32); --series-email: #e2610f; --series-chat: #2563eb; --chart-grid: rgba(247, 236, 229, 0.09); --chart-axis: rgba(247, 236, 229, 0.35); --track: rgba(247, 236, 229, 0.07); --danger: #f87171; /* Aurora: Orange und Amber als Träger, ein Hauch des Chart-Blaus als Tiefe */ --aurora-1: rgba(226, 97, 15, 0.21); --aurora-2: rgba(245, 158, 11, 0.13); --aurora-3: rgba(37, 99, 235, 0.14); } :root[data-theme='signal'] { /* Signal · Weiß mit Rot, helle Variante. Diagramm ΔE: 31,3 (CVD) / 36,2 (normal) */ --primary: #b91c1c; --accent: #dc2626; --gradient: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%); --bg: #f1f3f6; --surface: #ffffff; --surface-2: #f8fafc; --border: rgba(185, 28, 28, 0.16); --border-strong: rgba(185, 28, 28, 0.4); --text: #16181d; --text-muted: rgba(22, 24, 29, 0.62); --text-faint: rgba(22, 24, 29, 0.45); --series-email: #b91c1c; --series-chat: #2563eb; --chart-grid: rgba(22, 24, 29, 0.1); --chart-axis: rgba(22, 24, 29, 0.5); --track: rgba(22, 24, 29, 0.08); --danger: #b91c1c; /* Aurora auf heller Fläche: kräftiger als in der ersten Fassung, sonst verschwinden die Akzente auf Weiß fast völlig – aber noch weich genug, dass es nach Licht aussieht, nicht nach Flecken */ --aurora-1: rgba(220, 38, 38, 0.20); --aurora-2: rgba(37, 99, 235, 0.17); --aurora-3: rgba(185, 28, 28, 0.13); } :root[data-theme='papier'] { /* Papier · warmes Beige mit Petrol, helle Variante. Diagramm ΔE: 16,0 (CVD) / 27,1 (normal) */ --primary: #0d9488; --accent: #0f766e; --gradient: linear-gradient(135deg, #0f766e 0%, #0d9488 100%); --bg: #ece5d9; --surface: #f7f3ec; --surface-2: #efe8dc; --border: rgba(13, 148, 136, 0.22); --border-strong: rgba(13, 148, 136, 0.45); --text: #23201b; --text-muted: rgba(35, 32, 27, 0.62); --text-faint: rgba(35, 32, 27, 0.45); --series-email: #0d9488; --series-chat: #9a3412; --chart-grid: rgba(35, 32, 27, 0.1); --chart-axis: rgba(35, 32, 27, 0.5); --track: rgba(35, 32, 27, 0.09); --danger: #9a3412; /* Aurora auf Beige: Petrol und Rost, jetzt kräftiger sichtbar */ --aurora-1: rgba(13, 148, 136, 0.24); --aurora-2: rgba(154, 52, 18, 0.17); --aurora-3: rgba(15, 118, 110, 0.19); } :root { --radius: 16px; --radius-sm: 10px; } * { box-sizing: border-box; } /* Muss vor allen display-Regeln stehen: Klassen wie .login-wrap (display:flex) schlagen sonst das hidden-Attribut des Browsers, und ausgeblendete Ansichten bleiben sichtbar. */ [hidden] { display: none !important; } body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } button { font: inherit; cursor: pointer; } h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.01em; } /* ── Aurora-Hintergrund ──────────────────────────────────────────────── * Drei weiche Farbflächen hinter allem Inhalt. Bewegung macht aurora.js * (nur transform/opacity, GPU). Die Weichheit kommt aus dem Alpha-Verlauf * der Gradients – bewusst KEIN filter: blur(), das wäre auf 90vmax großen * Flächen ein Performance-Killer. * * z-index: -1 legt den Layer hinter die Karten, aber über den * body-Hintergrund. pointer-events: none, damit er nie Klicks schluckt. */ .aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .aurora span { position: absolute; border-radius: 50%; opacity: 0.85; will-change: transform, opacity; transform: translate3d(0, 0, 0); } .aurora .a1 { width: 95vmax; height: 95vmax; left: -28vmax; top: -38vmax; background: radial-gradient(circle closest-side, var(--aurora-1) 0%, transparent 68%); } .aurora .a2 { width: 80vmax; height: 80vmax; right: -30vmax; top: 6vmax; background: radial-gradient(circle closest-side, var(--aurora-2) 0%, transparent 68%); } .aurora .a3 { width: 88vmax; height: 88vmax; left: 6vmax; bottom: -44vmax; background: radial-gradient(circle closest-side, var(--aurora-3) 0%, transparent 68%); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ── Login ─────────────────────────────────────────────────────────── */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .login-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px 32px; } .login-logo { height: 34px; margin-bottom: 28px; display: block; } .login-card h1 { font-size: 22px; margin-bottom: 6px; } .login-card .sub { color: var(--text-muted); font-size: 14px; margin: 0 0 28px; } .field { margin-bottom: 16px; } .field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--text-muted); } .field input { width: 100%; padding: 12px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font: inherit; } .field input:focus { outline: none; border-color: var(--border-strong); box-shadow: 0 0 0 3px var(--border); } .btn-primary { width: 100%; padding: 13px 20px; margin-top: 8px; background: var(--gradient); border: none; border-radius: var(--radius-sm); color: #fff; font-weight: 600; } .btn-primary:disabled { opacity: 0.55; cursor: default; } .form-error { margin-top: 16px; padding: 12px 14px; background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.3); border-radius: var(--radius-sm); color: var(--danger); font-size: 14px; } .form-error[hidden] { display: none; } /* ── Kopfzeile ─────────────────────────────────────────────────────── */ .topbar { display: flex; align-items: center; gap: 16px; padding: 18px 32px; border-bottom: 1px solid var(--border); background: var(--surface); flex-wrap: wrap; } .topbar img { height: 26px; } /* Das Agentovo-Logo ist für dunkle Hintergründe gezeichnet und geht auf den hellen Farbwelten unter. Statt es umzufärben (und damit die Markenfarben zu verfälschen) bekommt es dort eine dunkle Kachel. */ :root[data-theme='signal'] .topbar img, :root[data-theme='papier'] .topbar img, :root[data-theme='signal'] .login-logo, :root[data-theme='papier'] .login-logo { background: #0c0c18; border-radius: 7px; padding: 4px 6px; } .topbar .client { font-weight: 600; padding-left: 16px; border-left: 1px solid var(--border); } .topbar .spacer { flex: 1; } .topbar .user { color: var(--text-muted); font-size: 14px; } .btn-ghost { padding: 8px 14px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); } .btn-ghost:hover { border-color: var(--border-strong); color: var(--text); } /* ── Design-Umschalter ─────────────────────────────────────────────── */ .themes { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; } .themes .themes-label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .swatch { width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 2px solid transparent; box-shadow: 0 0 0 1px var(--border-strong); transition: transform 0.1s; } .swatch:hover { transform: scale(1.15); } .swatch[aria-pressed='true'] { border-color: var(--surface); box-shadow: 0 0 0 2px var(--text); } /* Jede Kachel zeigt die beiden Diagrammfarben ihrer Variante. Die Werte stehen bewusst hier und nicht im JavaScript – so gibt es pro Farbwelt genau eine Stelle, an der Farben definiert sind. */ .swatch[data-theme-id='agentovo'] { background: linear-gradient(135deg, #2563eb 0 50%, #22a5c4 50% 100%); } .swatch[data-theme-id='terminal'] { background: linear-gradient(135deg, #16a34a 0 50%, #9333ea 50% 100%); } .swatch[data-theme-id='sunset'] { background: linear-gradient(135deg, #e2610f 0 50%, #2563eb 50% 100%); } .swatch[data-theme-id='signal'] { background: linear-gradient(135deg, #b91c1c 0 50%, #2563eb 50% 100%); } .swatch[data-theme-id='papier'] { background: linear-gradient(135deg, #0d9488 0 50%, #9a3412 50% 100%); } /* ── Layout ────────────────────────────────────────────────────────── */ main { padding: 28px 32px 64px; max-width: 1240px; margin: 0 auto; } .controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .range-btn { padding: 8px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); } .range-btn:hover { border-color: var(--border-strong); color: var(--text); } .range-btn[aria-pressed='true'] { background: var(--gradient); border-color: transparent; color: #fff; font-weight: 600; } .custom-range { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 14px; color: var(--text-muted); } .custom-range[hidden] { display: none; } .custom-range input { padding: 7px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font: inherit; color-scheme: dark; } .range-note { margin: 14px 0 22px; font-size: 13px; color: var(--text-faint); } .grid { display: grid; gap: 18px; } .kpis { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 18px; } /* Feste zwei Spalten: bei automatischer Spaltenzahl entstünde auf breiten Bildschirmen eine 3+1-Reihe mit einer einsamen Karte am Ende. */ .two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; } @media (max-width: 760px) { .two-col { grid-template-columns: 1fr; } } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; } .card h2 { font-size: 16px; margin-bottom: 4px; } .card .card-sub { color: var(--text-muted); font-size: 13px; margin: 0 0 18px; } /* ── KPI-Kacheln ───────────────────────────────────────────────────── */ .kpi .kpi-label { font-size: 13px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .kpi .kpi-value { font-size: 38px; font-weight: 700; line-height: 1.15; margin: 10px 0 4px; letter-spacing: -0.02em; } .kpi .kpi-hint { font-size: 13px; color: var(--text-faint); } .badge { display: inline-block; margin-left: 8px; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--primary); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; vertical-align: middle; } /* ── Diagramme ─────────────────────────────────────────────────────── */ .chart-scroll { overflow-x: auto; } svg.chart { display: block; width: 100%; height: auto; overflow: visible; } .legend { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; font-size: 13px; color: var(--text-muted); } .legend span { display: inline-flex; align-items: center; gap: 7px; } .legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex: none; } .tooltip { position: fixed; z-index: 20; pointer-events: none; opacity: 0; transition: opacity 0.1s; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 13px; line-height: 1.45; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); white-space: nowrap; } .tooltip strong { display: block; margin-bottom: 4px; font-size: 12px; color: var(--text-muted); } .tooltip .row { display: flex; align-items: center; gap: 7px; } .tooltip i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; } /* ── Balkenlisten (Kategorien, Themen) ─────────────────────────────── */ .bars { display: flex; flex-direction: column; gap: 12px; } .bar-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; } .bar-row .bar-label { font-size: 14px; } .bar-row .bar-value { font-size: 14px; font-weight: 600; color: var(--text-muted); } /* display:block ist hier Pflicht, nicht Kosmetik: als inline-Elemente ignorieren die Spans width und height – die Balken wären unsichtbar. */ .bar-row .bar-track { grid-column: 1 / -1; display: block; height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; } .bar-row .bar-fill { display: block; height: 100%; border-radius: 4px; } /* ── Sprachverteilung ──────────────────────────────────────────────── */ .lang-block + .lang-block { margin-top: 20px; } .lang-head { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 8px; } .lang-head .muted { color: var(--text-muted); } .lang-bar { display: flex; gap: 2px; height: 10px; } .lang-bar span:first-child { border-radius: 5px 0 0 5px; } .lang-bar span:last-child { border-radius: 0 5px 5px 0; } .lang-bar span:only-child { border-radius: 5px; } /* ── Zustände ──────────────────────────────────────────────────────── */ .state { padding: 48px 24px; text-align: center; color: var(--text-muted); } .state.error { color: var(--danger); } .state button { margin-top: 16px; } .empty { color: var(--text-faint); font-size: 14px; padding: 8px 0; } /* ── Tabellenansicht ───────────────────────────────────────────────── */ details.table-view { margin-top: 26px; } details.table-view summary { cursor: pointer; color: var(--text-muted); font-size: 14px; padding: 8px 0; } details.table-view summary:hover { color: var(--text); } .table-scroll { overflow-x: auto; margin-top: 12px; } table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; } th, td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; } th { color: var(--text-muted); font-weight: 600; font-size: 13px; } td.num, th.num { text-align: right; } footer { padding: 28px 32px 40px; text-align: center; font-size: 13px; color: var(--text-faint); } footer a { color: var(--primary); } @media (max-width: 640px) { .topbar { padding: 14px 18px; } main { padding: 20px 18px 48px; } .card { padding: 18px; } .kpi .kpi-value { font-size: 30px; } } /* ── Tab-Navigation (Report · Wissen · Test) ───────────────────────── */ .topbar .tabname { color: var(--text-faint); font-weight: 400; margin-left: -6px; } .tabbar { display: flex; gap: 8px; flex-wrap: wrap; max-width: 1240px; margin: 0 auto; padding: 18px 32px 0; } .tab-btn { padding: 10px 22px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-muted); font-weight: 600; } .tab-btn:hover { color: var(--text); border-color: var(--border); } .tab-btn[aria-selected='true'] { background: var(--gradient); color: #fff; } .tab-intro { max-width: 720px; color: var(--text-muted); margin: 4px 0 22px; } /* ── Wissen-Tab ────────────────────────────────────────────────────── */ /* Amber als Warnfarbe funktioniert auf allen fünf Farbwelten */ .hinweis-karte { background: rgba(245, 158, 11, 0.10); border: 1px solid rgba(245, 158, 11, 0.35); border-radius: var(--radius); padding: 14px 18px; margin: 4px 0 20px; font-size: 14px; } .field textarea { width: 100%; padding: 12px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font: inherit; resize: vertical; } .field textarea:focus { outline: none; border-color: var(--border-strong); box-shadow: 0 0 0 3px var(--border); } .row-buttons { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } /* btn-primary ist im Login volle Breite – in den Tabs inline */ .btn-primary.btn-inline { width: auto; padding: 11px 18px; margin-top: 0; } .btn-ghost .icon { width: 15px; height: 15px; vertical-align: -2px; margin-right: 6px; } .btn-ghost[aria-pressed='true'] { border-color: var(--danger); color: var(--danger); } .mini-status { font-size: 13px; color: var(--text-muted); min-height: 18px; margin: 10px 0 0; } .mini-status.ok { color: var(--accent); } .mini-status.fehler { color: var(--danger); } .mini-hinweis { font-size: 13px; color: var(--text-faint); margin: 12px 0; } .dropzone { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 16px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; text-align: center; transition: border-color 0.15s, background 0.15s; } .dropzone:hover, .dropzone.aktiv { border-color: var(--primary); background: var(--surface-2); } .dropzone-hint { font-size: 12px; color: var(--text-faint); } .datei-liste { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; } .datei-liste .datei { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); } .datei-liste .datei .groesse { color: var(--text-faint); white-space: nowrap; } .kb-verlauf-liste { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; } .kb-verlauf-liste .eintrag { font-size: 13px; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text-muted); } .kb-verlauf-liste .eintrag strong { color: var(--text); } .recrawl-karte { margin-top: 18px; } /* ── Test-Tab ──────────────────────────────────────────────────────── */ .chat-fenster { height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 12px; } .chat-fenster .leer { margin: auto; color: var(--text-faint); font-size: 14px; text-align: center; } .chat-blase { max-width: 85%; padding: 9px 13px; border-radius: 14px; font-size: 14px; white-space: pre-wrap; overflow-wrap: break-word; } .chat-blase.kunde { align-self: flex-end; background: var(--gradient); color: #fff; border-bottom-right-radius: 4px; } .chat-blase.bot { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; } .chat-blase.tippt { color: var(--text-faint); font-style: italic; } .chat-eingabe { display: flex; gap: 8px; } .chat-eingabe input { flex: 1; padding: 11px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font: inherit; min-width: 0; } .chat-eingabe input:focus { outline: none; border-color: var(--border-strong); } .mail-entwurf { margin-top: 14px; padding: 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; white-space: pre-wrap; } .mail-entwurf .meta { font-size: 12px; color: var(--text-faint); border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 10px; white-space: normal; } /* ═══════════════════════════════════════════════════════════════════ * Dashboard v2 (25.07.2026) * Profil-Menü · Test-Notizen · Konversations-Review * * Alle Farben kommen aus den [data-theme]-Variablen weiter oben – die * neuen Bausteine funktionieren dadurch in allen fünf Farbwelten, ohne * dass hier ein einziger fester Farbwert steht. Einzige Ausnahme sind * die zwei Signalfarben für Badges (Amber/Rot), die demselben Muster * folgen wie die bestehende .hinweis-karte. * ═══════════════════════════════════════════════════════════════════ */ /* ── Profil-Menü in der Kopfzeile ──────────────────────────────────── */ .profil { position: relative; } .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: transparent; color: var(--text-muted); border: 1px solid var(--border); border-radius: 10px; transition: color 0.15s, border-color 0.15s; } .btn-icon:hover { color: var(--text); border-color: var(--border-strong); } .btn-icon:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .profil-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 190px; padding: 6px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); } .profil-menu button { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font-size: 14px; } .profil-menu button:hover { background: var(--surface-2); } /* ── Overlays ──────────────────────────────────────────────────────── */ .modal-huelle { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.55); } .modal-huelle[hidden] { display: none; } .modal { width: 100%; max-width: 440px; max-height: calc(100vh - 40px); overflow-y: auto; padding: 24px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45); } .modal-breit { max-width: 760px; } .modal-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .modal-kopf h2 { font-size: 18px; } .modal-zu { font-size: 15px; line-height: 1; } .modal-fuss { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; } .modal-fuss .btn-ghost { width: auto; } .feld-hinweis { font-size: 12px; color: var(--text-faint); margin: 6px 0 0; } .btn-klein { padding: 7px 13px !important; font-size: 13px; } .rechnungen td:last-child { text-align: right; } /* Allgemeiner Leer-Zustand (bisher nur im Chat-Fenster definiert) */ .leer { color: var(--text-faint); font-size: 14px; text-align: center; padding: 28px 12px; } /* ── Notiz unter einer Testantwort ─────────────────────────────────── */ .notiz { margin-top: 10px; } .notiz-auf { background: transparent; border: 0; padding: 0; color: var(--text-faint); font-size: 12px; text-decoration: underline; } .notiz-auf:hover { color: var(--primary); } .notiz-feld textarea { width: 100%; margin-top: 6px; padding: 10px 12px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 13px; resize: vertical; } .notiz-feld textarea:focus { outline: none; border-color: var(--border-strong); } .notiz-aktionen { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; } .notiz-aktionen .btn-ghost { width: auto; } .notiz .mini-status { font-size: 12px; min-height: 0; margin-top: 6px; } /* Im Chat sitzt die Notiz in der Blase – dort etwas kompakter */ .chat-blase .notiz { margin-top: 8px; } .chat-blase .notiz-auf { font-size: 11px; } /* ── Konversations-Review ──────────────────────────────────────────── */ .karten-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; } .karten-fortschritt { font-size: 13px; color: var(--text-muted); } .kv-karte { display: flex; flex-direction: column; gap: 16px; } .kv-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); padding-bottom: 12px; border-bottom: 1px solid var(--border); } .kv-trenner { color: var(--text-faint); } .kv-meta .badge { margin-left: 0; } /* Die zwei Signal-Badges folgen dem Muster der .hinweis-karte: eingefärbte Fläche + Rand in derselben Farbe, damit sie auf hellen wie dunklen Farbwelten lesbar bleiben. */ .badge-warn { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.45); color: #d97706; } .badge-danger { background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.45); color: var(--danger); } .kv-turn { display: flex; flex-direction: column; gap: 6px; } .kv-rolle { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); } .kv-frage, .kv-antwort { padding: 14px 16px; border-radius: 12px; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; } .kv-frage { background: var(--surface-2); border: 1px solid var(--border); } .kv-antwort { background: color-mix(in srgb, var(--primary) 8%, transparent); border: 1px solid var(--border-strong); } .kv-frage p, .kv-antwort p { margin: 0 0 10px; } .kv-frage p:last-child, .kv-antwort p:last-child { margin-bottom: 0; } .kv-frage ul, .kv-antwort ul { margin: 0 0 10px; padding-left: 20px; } .kv-frage code, .kv-antwort code { background: var(--track); padding: 1px 5px; border-radius: 5px; font-size: 13px; } .kv-aktionen { display: flex; gap: 10px; flex-wrap: wrap; } .kv-aktionen[hidden] { display: none; } .btn-daumen { flex: 1 1 200px; padding: 13px 18px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 12px; font-size: 14px; font-weight: 600; transition: border-color 0.15s, background 0.15s; } .btn-daumen:hover:not(:disabled) { border-color: var(--border-strong); } .btn-daumen.hoch:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 14%, transparent); } .btn-daumen.runter:hover:not(:disabled) { background: rgba(239, 68, 68, 0.12); } .btn-daumen:disabled { opacity: 0.5; cursor: default; } /* Emoji sonst direkt am Text kleben */ .btn-daumen span { margin-right: 7px; } .btn-daumen:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .kv-grund { display: flex; flex-direction: column; gap: 8px; } .kv-grund[hidden] { display: none; } .kv-grund label { font-size: 13px; font-weight: 600; color: var(--text-muted); } .kv-grund textarea { width: 100%; padding: 12px 14px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 14px; resize: vertical; } .kv-grund textarea:focus { outline: none; border-color: var(--border-strong); } .kv-grund-aktionen { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } .kv-grund-aktionen .btn-ghost { width: auto; } @media (max-width: 640px) { .modal { padding: 18px; } .btn-daumen { flex-basis: 100%; } .profil-menu { min-width: 170px; } /* Rechnungstabelle darf horizontal scrollen statt die Seite zu sprengen */ #rg-inhalt { overflow-x: auto; } } /* ── E-Mail-Schritt vorm Login (06.08.2026) ─────────────────────────── */ .login-andere-email { display: block; width: 100%; margin-top: 12px; text-align: center; }