:root { /* ============================================================ FARB-TOKENS — Hell (Standard-Theme) Umschalten via (siehe unten). ============================================================ */ color-scheme: light; /* --- Flächen & Linien --- */ --bg: #f6f7f9; --panel: #ffffff; --panel2: #f1f3f6; --panel3: #e7ebf0; --border: #e2e5ea; --border-hover: #c3cad4; --hairline: rgba(16,24,40,.08); --line: #e2e5ea; /* --- Text --- */ --text: #1a1d23; --muted: #5b6572; --on-accent: #ffffff; --on-ok: #ffffff; /* --- Akzent & Status (ruhiges Blau, professionell auf hellem Grau) --- */ --accent: #2563eb; --accent-hover: #1d4ed8; --accent-soft: rgba(37,99,235,.08); --accent-border: rgba(37,99,235,.30); --accent-glow: rgba(37,99,235,.12); --accent-ring: rgba(37,99,235,.45); --ok: #0f7a4e; --ok-soft: rgba(15,122,78,.12); --ok-border: rgba(15,122,78,.40); --info: #2563eb; --info-soft: rgba(37,99,235,.10); --warn: #9a6410; --warn-soft: rgba(245,166,35,.16); --warn-border: rgba(154,100,16,.35); --err: #c62828; --err-soft: rgba(198,40,40,.09); --err-border: rgba(198,40,40,.35); --role-kunde: #7c3aed; /* --- Overlays / Backdrops / Code --- */ --backdrop: rgba(246,247,249,.85); --overlay: rgba(16,24,40,.45); --overlay-strong: rgba(16,24,40,.80); --scrim: rgba(16,24,40,.35); --thumb-btn-bg: rgba(16,24,40,.55); --img-bg: #0e1116; --code-bg: rgba(16,24,40,.06); --log-bg: #eef1f5; /* --- Schatten (sehr dezent für hellen Grund) --- */ --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08); --shadow-md: 0 8px 24px rgba(16,24,40,.10); --shadow-lg: 0 18px 44px rgba(16,24,40,.14); --shadow-accent: 0 8px 22px rgba(37,99,235,.25); /* ============================================================ NICHT-FARBEN (themenunabhängig) ============================================================ */ /* --- Radien --- */ --radius: 14px; --radius-sm: 10px; --radius-xs: 8px; /* --- Abstände --- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; /* --- Layout --- */ --maxw: 1200px; --content-w: 820px; /* --- Fokus-Ring (Tastatur) --- */ --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace; } /* ============================================================ FARB-TOKENS — Dunkel (Override via ) Nur Farb-Tokens; Radien/Abstände/Layout erben aus :root. ============================================================ */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0c0e12; --panel: #14171d; --panel2: #1a1e26; --panel3: #21262f; --border: #262b35; --border-hover: #3a4150; --hairline: rgba(255,255,255,.05); --line: #262b35; --text: #e8eaee; --muted: #8b93a1; --on-accent: #fff; --on-ok: #0c0e12; --accent: #6191f2; --accent-hover: #7ba4f5; --accent-soft: rgba(97,145,242,.14); --accent-border: rgba(97,145,242,.32); --accent-glow: rgba(97,145,242,.12); --accent-ring: rgba(97,145,242,.5); --ok: #3ecf8e; --ok-soft: rgba(62,207,142,.1); --ok-border: rgba(62,207,142,.5); --info: #5ba4f5; --info-soft: rgba(91,164,245,.12); --warn: #f5a623; --warn-soft: rgba(245,166,35,.12); --warn-border: rgba(245,166,35,.35); --err: #ff5c5c; --err-soft: rgba(255,92,92,.1); --err-border: rgba(255,92,92,.4); --role-kunde: #8b5cf6; --backdrop: rgba(12,14,18,.85); --overlay: rgba(0,0,0,.65); --overlay-strong: rgba(0,0,0,.92); --scrim: rgba(0,0,0,.5); --thumb-btn-bg: rgba(12,14,18,.75); --img-bg: #000; --code-bg: rgba(255,255,255,.07); --log-bg: #0b0b0e; --shadow-sm: 0 4px 14px rgba(0,0,0,.3); --shadow-md: 0 12px 40px rgba(0,0,0,.5); --shadow-lg: 0 18px 50px rgba(0,0,0,.55); --shadow-accent: 0 8px 26px rgba(97,145,242,.35); } * { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; } body { background:var(--bg); color:var(--text); font-family:var(--font); min-height:100vh; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } a { color:inherit; text-decoration:none; } /* ---- Globale Fokus-Zustände (Tastatur sichtbar, Maus nicht) ---- */ :focus { outline:none; } :focus-visible { outline:none; box-shadow:var(--focus); border-radius:var(--radius-xs); } a:focus-visible, .tab:focus-visible, .nav-item:focus-visible, .card:focus-visible, .tile:focus-visible, .gitem:focus-visible { box-shadow:var(--focus); } input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow:0 0 0 2px var(--accent-soft); } /* ---- Wiederverwendbare Bausteine ---- */ .spinner { display:inline-block; width:18px; height:18px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; vertical-align:middle; } @keyframes spin { to { transform:rotate(360deg); } } .error-banner { display:flex; align-items:center; gap:10px; background:var(--err-soft); border:1px solid var(--err-border); color:var(--err); border-radius:var(--radius-sm); padding:12px 16px; font-size:13.5px; margin-bottom:16px; max-width:var(--content-w); } .error-banner .eb-close { margin-left:auto; background:transparent; border:none; color:var(--err); cursor:pointer; font-size:16px; opacity:.7; } .error-banner .eb-close:hover { opacity:1; } .empty-state { display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; padding:48px 32px; background:var(--panel); border:1px dashed var(--border); border-radius:var(--radius); max-width:var(--content-w); color:var(--muted); } .empty-state .es-icon { font-size:34px; line-height:1; opacity:.85; } .empty-state .es-title { font-size:15px; font-weight:600; color:var(--text); } .empty-state .es-text { font-size:13.5px; max-width:340px; line-height:1.5; } #toast-host { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:300; display:flex; flex-direction:column; gap:10px; align-items:center; pointer-events:none; } .toast { display:flex; align-items:center; gap:9px; background:var(--panel2); border:1px solid var(--border); color:var(--text); border-radius:var(--radius-sm); padding:11px 16px; font-size:13.5px; box-shadow:var(--shadow-md); opacity:0; transform:translateY(10px); transition:opacity .22s, transform .22s; pointer-events:auto; max-width:min(92vw,440px); } .toast.show { opacity:1; transform:translateY(0); } .toast .t-ico { flex-shrink:0; font-weight:800; } .toast.err { border-color:var(--err-border); } .toast.err .t-ico { color:var(--err); } .toast.ok { border-color:var(--ok-border); } .toast.ok .t-ico { color:var(--ok); } .toast.info .t-ico { color:var(--info); } header { position:sticky; top:0; z-index:50; background:var(--backdrop); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); } .header-inner { max-width:none; margin:0 auto; padding:10px 24px; display:flex; align-items:center; gap:12px; flex-wrap:nowrap; } .logo { font-weight:800; font-size:18px; letter-spacing:-.02em; cursor:pointer; flex-shrink:0; } .logo span { color:var(--accent); } .badge { font-size:11px; font-weight:600; color:var(--accent); background:var(--accent-soft); padding:3px 9px; border-radius:20px; flex-shrink:0; } .hamburger { display:none; background:var(--panel2); border:1px solid var(--border); color:var(--text); border-radius:var(--radius-xs); width:38px; height:38px; font-size:18px; cursor:pointer; flex-shrink:0; align-items:center; justify-content:center; } .hamburger:hover { border-color:var(--border-hover); } .header-right { margin-left:auto; display:flex; align-items:center; gap:14px; } .header-sub { font-size:12.5px; color:var(--muted); } .header-user { font-size:13px; font-weight:600; white-space:nowrap; } .header-user .rolle { color:var(--muted); font-weight:500; font-size:11.5px; margin-left:6px; } .logout-link { color:var(--muted); font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; } .logout-link:hover { color:var(--accent); } .nav-scrim { display:none; } main { max-width:var(--maxw); margin:0 auto; padding:32px 24px 80px; } h1 { font-size:26px; font-weight:700; letter-spacing:-.02em; margin-bottom:6px; } .sub { color:var(--muted); font-size:14px; margin-bottom:28px; } .page-head { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:6px; } .page-head h1 { margin-bottom:0; } /* ---- Buttons ---- */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; background:var(--accent); color:var(--on-accent); border:none; border-radius:var(--radius-sm); padding:9px 16px; font-size:13.5px; font-weight:600; font-family:inherit; cursor:pointer; transition:background .15s, transform .1s, box-shadow .15s; } .btn:hover { background:var(--accent-hover); } .btn:active { transform:translateY(1px); } .btn:disabled { opacity:.5; cursor:default; transform:none; } .btn.ghost { background:var(--panel2); color:var(--text); border:1px solid var(--border); } .btn.ghost:hover { background:var(--panel3); border-color:var(--border-hover); } .btn.danger { background:transparent; color:var(--err); border:1px solid var(--err-border); } .btn.danger:hover { background:var(--err-soft); } .btn.primary { background:var(--accent); } .btn.primary:hover { background:var(--accent-hover); } .btn.sm { padding:6px 12px; font-size:12.5px; } .icon-btn { background:var(--panel2); border:1px solid var(--border); color:var(--muted); border-radius:9px; width:32px; height:32px; font-size:14px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:color .15s, border-color .15s; } .icon-btn:hover { color:var(--text); border-color:var(--border-hover); } /* ---- Login ---- */ /* Hintergrund: Messestand-Handskizze (login-skizze.jpg, ~200 KB) — die eine Stelle, wo Stimmung vor Datendichte geht. Der Schleier (--login-schleier) haelt die Karte lesbar; im Dunkelmodus wird das helle Papier stark abgedunkelt statt invertiert. */ .login-screen { position:fixed; inset:0; z-index:200; background: radial-gradient(1100px 600px at 50% -10%, var(--accent-glow), transparent 60%), var(--login-schleier), url('login-skizze.jpg') center / cover no-repeat, var(--bg); } :root { --login-schleier: linear-gradient(rgba(246,247,249,.4), rgba(246,247,249,.62)); } :root[data-theme="dark"] { --login-schleier: linear-gradient(rgba(9,11,15,.82), rgba(9,11,15,.9)); } .login-screen { display:flex; align-items:center; justify-content:center; padding:24px; } .login-card { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:40px 34px 34px; width:100%; max-width:370px; display:flex; flex-direction:column; gap:13px; box-shadow:var(--shadow-md); } .login-mark { width:56px; height:56px; border-radius:16px; background:var(--accent-soft); border:1px solid var(--accent-border); display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:800; color:var(--accent); margin:0 auto 6px; letter-spacing:-.03em; } .login-card .logo { font-size:25px; text-align:center; cursor:default; margin-bottom:0; } .login-sub { color:var(--muted); font-size:13px; text-align:center; margin-bottom:10px; } .login-card label { font-size:12px; font-weight:600; color:var(--muted); margin-bottom:-8px; } .login-card input { background:var(--panel2); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-family:inherit; font-size:14px; padding:11px 14px; outline:none; transition:border-color .15s; } .login-card input:focus { border-color:var(--accent); } .login-card .btn { padding:11px 16px; margin-top:4px; } .login-err { display:flex; align-items:center; gap:8px; justify-content:center; color:var(--err); background:var(--err-soft); border:1px solid var(--err-border); border-radius:var(--radius-sm); font-size:13px; text-align:center; padding:9px 12px; } .login-foot { text-align:center; font-size:11.5px; color:var(--muted); margin-top:6px; opacity:.75; } /* ---- Projektliste ---- */ .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:20px; } .card { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; cursor:pointer; transition:transform .15s, border-color .15s; } .card:hover { transform:translateY(-3px); border-color:var(--border-hover); } .card-img { width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--panel2); display:block; } .card-img.placeholder { display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:13px; } .card-body { padding:16px 18px 18px; } .card-title { font-weight:700; font-size:16.5px; letter-spacing:-.01em; } .card-meta { color:var(--muted); font-size:13px; margin-top:4px; } .card-tags { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; } .tag { font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:20px; background:var(--panel2); border:1px solid var(--border); color:var(--muted); } .tag.accent { color:var(--accent); background:var(--accent-soft); border-color:transparent; } .konstr-banner { background:var(--warn-soft); border:1px solid var(--warn-border); color:var(--warn); padding:10px 14px; border-radius:8px; font-size:13px; font-weight:600; margin-bottom:10px; } .konstr-warn { margin:0 0 12px 0; padding:8px 14px 8px 30px; font-size:12.5px; color:var(--muted); background:var(--panel2); border-radius:8px; } .konstr-warn li { margin:2px 0; } .table-scroll { width:100%; overflow-x:auto; } .tag.ok { color:var(--ok); background:var(--ok-soft); border-color:transparent; } .card.new-card { border:1.5px dashed var(--border); background:transparent; display:flex; align-items:center; justify-content:center; min-height:220px; color:var(--muted); font-size:15px; font-weight:600; transition:color .15s, border-color .15s, transform .15s; } .card.new-card:hover { color:var(--accent); border-color:var(--accent); } /* ---- Projekt-Detail ---- */ .back { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:13.5px; font-weight:500; margin-bottom:20px; cursor:pointer; } .back:hover { color:var(--text); } .detail-head { display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap; margin-bottom:8px; } .detail-head h1 { margin-bottom:2px; } .facts { display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 26px; } .fact { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:10px 14px; } .fact .k { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-weight:600; } .fact .v { font-size:14.5px; font-weight:600; margin-top:2px; } .tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:24px; overflow-x:auto; } .tab { padding:10px 16px; font-size:14px; font-weight:600; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; } .tab:hover { color:var(--text); } .tab.active { color:var(--accent); border-bottom-color:var(--accent); } .tab .count { font-size:11px; background:var(--panel2); border-radius:10px; padding:1px 7px; margin-left:6px; } .tab-head { display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:820px; margin-bottom:14px; } .tab-head.wide { max-width:none; } /* Briefing Markdown */ .md-wrap { position:relative; max-width:820px; } .md-tools { position:absolute; top:14px; right:14px; z-index:2; } .md { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:26px 30px; line-height:1.65; font-size:14.5px; max-width:820px; } .md h1 { font-size:20px; margin-bottom:14px; } .md h2 { font-size:15px; color:var(--accent); margin:22px 0 10px; text-transform:uppercase; letter-spacing:.04em; } .md h2:first-of-type { margin-top:0; } .md ul { list-style:none; } .md li { padding:5px 0; border-bottom:1px solid var(--hairline); display:flex; gap:10px; align-items:baseline; } .md li:last-child { border-bottom:none; } .md .cb { flex-shrink:0; width:16px; height:16px; border-radius:5px; border:1.5px solid var(--border); display:inline-flex; align-items:center; justify-content:center; font-size:11px; transform:translateY(2px); } .md .cb.done { background:var(--ok); border-color:var(--ok); color:var(--on-ok); font-weight:800; } .md li.cb-click { cursor:pointer; } .md li.cb-click:hover .cb { border-color:var(--accent); } .md li.cb-click:hover .cb.done { border-color:var(--ok); filter:brightness(1.15); } .md strong { font-weight:600; } .md p { margin-bottom:10px; } .md .msg-head { color:var(--accent); font-size:12.5px; font-weight:700; margin-top:18px; } .md-editor { width:100%; max-width:820px; min-height:420px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:13px; line-height:1.6; padding:20px 24px; outline:none; resize:vertical; } .md-editor:focus { border-color:var(--accent); } .editor-actions { display:flex; gap:10px; margin-top:12px; } /* Notizen */ .notiz-row { display:flex; gap:10px; align-items:flex-end; max-width:820px; margin-top:16px; } .notiz-row textarea { flex:1; background:var(--panel); border:1px solid var(--border); border-radius:12px; color:var(--text); font-family:inherit; font-size:14px; line-height:1.5; padding:11px 14px; outline:none; resize:none; } .notiz-row textarea:focus { border-color:var(--accent); } /* Galerie */ .gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; } .gitem { position:relative; background:var(--panel); border:1px solid var(--border); border-radius:12px; overflow:hidden; cursor:pointer; transition:border-color .15s; } .gitem:hover { border-color:var(--border-hover); } .gitem img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--panel2); } .gitem .gname { padding:10px 12px; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .file-list { display:flex; flex-direction:column; gap:10px; max-width:820px; } .frow { display:flex; align-items:center; gap:14px; background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:14px 18px; } .frow .ficon { width:38px; height:38px; border-radius:9px; background:var(--panel2); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; } .frow .fname { font-size:14px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .frow .fsize { margin-left:auto; color:var(--muted); font-size:12.5px; flex-shrink:0; } .frow a.dl { color:var(--accent); font-size:13px; font-weight:600; flex-shrink:0; } .del-x { flex-shrink:0; background:transparent; border:none; color:var(--muted); font-size:15px; cursor:pointer; width:26px; height:26px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; } .del-x:hover { color:var(--err); background:var(--err-soft); } .gitem .del-x { position:absolute; top:8px; right:8px; z-index:2; background:var(--thumb-btn-bg); backdrop-filter:blur(4px); border-radius:8px; } .empty { color:var(--muted); font-size:14px; padding:40px; text-align:center; background:var(--panel); border:1px dashed var(--border); border-radius:var(--radius); max-width:820px; } /* Modal */ .modal-bg { position:fixed; inset:0; z-index:150; background:var(--overlay); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:24px; } .modal { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:28px 30px; width:100%; max-width:460px; max-height:90vh; overflow-y:auto; } .modal h2 { font-size:18px; font-weight:700; margin-bottom:18px; letter-spacing:-.01em; } .modal label { display:block; font-size:12px; font-weight:600; color:var(--muted); margin:14px 0 6px; } .modal input { width:100%; background:var(--panel2); border:1px solid var(--border); border-radius:10px; color:var(--text); font-family:inherit; font-size:14px; padding:10px 13px; outline:none; } .modal input:focus { border-color:var(--accent); } .modal .row2 { display:flex; gap:12px; } .modal .row2 > div { flex:1; } .modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:22px; } .modal-err { color:var(--err); font-size:13px; margin-top:12px; } .modal select { width:100%; background:var(--panel2); border:1px solid var(--border); border-radius:10px; color:var(--text); font-family:inherit; font-size:14px; padding:10px 13px; outline:none; appearance:none; } .modal select:focus { border-color:var(--accent); } .modal textarea { width:100%; background:var(--panel2); border:1px solid var(--border); border-radius:10px; color:var(--text); font-family:inherit; font-size:14px; padding:10px 13px; outline:none; resize:vertical; min-height:70px; } .modal textarea:focus { border-color:var(--accent); } .modal .section-sep { border:none; border-top:1px solid var(--border); margin:16px 0 4px; } /* Einstellungen-Seite (Formulare in Cards) */ .es-lbl { display:block; font-size:12px; font-weight:600; color:var(--muted); margin:12px 0 5px; } .es-inp { width:100%; background:var(--panel2); border:1px solid var(--border); border-radius:10px; color:var(--text); font-family:inherit; font-size:14px; padding:9px 12px; outline:none; transition:border-color .15s; } .es-inp:focus { border-color:var(--accent); } .es-row2 { display:flex; gap:14px; flex-wrap:wrap; } .es-row2 > div { flex:1; min-width:220px; } .es-row3 { display:flex; gap:12px; flex-wrap:wrap; } .es-row3 > div { flex:1; min-width:120px; } .es-hint { font-size:12px; color:var(--muted); line-height:1.5; margin-top:4px; } .es-check { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:var(--text); cursor:pointer; } .es-check input { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; } /* Benutzer-Tabelle */ .bu-table { width:100%; border-collapse:collapse; font-size:13.5px; } .bu-table th { text-align:left; font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; padding:6px 10px; border-bottom:1px solid var(--border); white-space:nowrap; } .bu-table td { padding:9px 10px; border-bottom:1px solid var(--border); vertical-align:middle; } .bu-table tr:last-child td { border-bottom:none; } .bu-act { background:none; border:none; cursor:pointer; font-size:15px; padding:3px 5px; border-radius:6px; opacity:.8; transition:background .12s, opacity .12s; } .bu-act:hover { background:var(--panel2); opacity:1; } /* Lightbox */ .lightbox { position:fixed; inset:0; background:var(--overlay-strong); z-index:100; display:flex; align-items:center; justify-content:center; padding:30px; cursor:zoom-out; } .lightbox img { max-width:100%; max-height:92vh; border-radius:8px; } .hidden { display:none !important; } .loading { color:var(--muted); padding:60px; text-align:center; font-size:14px; display:flex; align-items:center; justify-content:center; gap:10px; } /* ---- Nav ---- */ .nav { display:flex; gap:2px; margin-left:10px; flex-wrap:nowrap; min-width:0; } .nav-item { padding:6px 12px; border-radius:var(--radius-xs); font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; transition:color .15s, background .15s; white-space:nowrap; text-decoration:none; } .nav-item:hover { color:var(--text); background:var(--panel2); } .nav-item.active { color:var(--accent); background:var(--accent-soft); } .vt-form-erfasst { font-size:12.5px; color:var(--muted); background:var(--panel2); border-radius:var(--radius-xs); padding:6px 10px; margin:2px 0 8px; } .vt-form-erfasst strong { color:var(--text); } .vt-form-details { margin:8px 0 2px; border-top:1px solid var(--line); padding-top:6px; } .vt-form-details > summary { cursor:pointer; font-size:13px; font-weight:600; color:var(--muted); padding:4px 0; } .vt-form-details > summary:hover { color:var(--text); } /* ---- Dashboard ---- */ .dash-stats { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px; margin-bottom:36px; } .stat-card { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px; } .stat-label { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; } .stat-val { font-size:38px; font-weight:800; letter-spacing:-.03em; line-height:1; } .stat-sub { font-size:12px; color:var(--muted); margin-top:4px; } .tile-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(175px,1fr)); gap:14px; } .tile { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:24px 20px; cursor:pointer; transition:transform .15s, border-color .15s, background .15s; display:flex; flex-direction:column; align-items:flex-start; gap:10px; } .tile:hover { transform:translateY(-3px); border-color:var(--border-hover); background:var(--panel2); } .tile-icon { width:38px; height:38px; border-radius:10px; background:var(--panel2); border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center; color:var(--muted); transition:color .15s, background .15s; } .tile:hover .tile-icon { color:var(--accent); background:var(--accent-soft); } .tico { width:20px; height:20px; display:block; flex-shrink:0; } .tile-title { font-size:15px; font-weight:700; } .tile-sub { font-size:12px; color:var(--muted); } .tile.soon { opacity:.45; cursor:default; } .tile.soon:hover { transform:none; background:var(--panel); border-color:var(--border); } .section-label { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; } /* Vertrieb = eigene, volle Seite (Board braucht Breite) */ #app.vt-wide { max-width:none; padding:22px 28px 64px; } .vt-pagehead { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; } .vt-pagehead h1 { margin-bottom:0; font-size:21px; } .vt-pagehead .vt-meta { color:var(--muted); font-size:13.5px; } /* --- Vertriebs-Board --- */ .vt-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:16px 0 20px; } .vt-toolbar select, .vt-toolbar input { background:var(--panel2); border:1px solid var(--border); border-radius:9px; color:var(--text); font-family:inherit; font-size:13px; padding:8px 11px; outline:none; } .vt-toolbar input:focus, .vt-toolbar select:focus { border-color:var(--border-hover); box-shadow:var(--focus); } .vt-seg { display:inline-flex; border:1px solid var(--border); border-radius:9px; overflow:hidden; } .vt-seg button { background:var(--panel2); border:none; color:var(--muted); font-family:inherit; font-size:13px; font-weight:600; padding:8px 15px; cursor:pointer; } .vt-seg button.active { background:var(--accent-soft); color:var(--accent); } .vt-tabs { margin:14px 0 4px; } .vt-dq-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 6px; margin-left:6px; border-radius:9px; background:var(--accent); color:var(--on-accent,#fff); font-size:11px; font-weight:700; vertical-align:middle; } .vt-seg button.active .vt-dq-badge { background:var(--accent); color:var(--on-accent,#fff); } .vt-board { display:flex; gap:14px; overflow-x:auto; padding-bottom:10px; align-items:flex-start; } .vt-col { flex:0 0 258px; background:var(--panel2); border:1px solid var(--border); border-radius:var(--radius); padding:11px; display:flex; flex-direction:column; gap:10px; } .vt-col-head { display:flex; align-items:center; justify-content:space-between; font-size:12.5px; font-weight:700; padding:2px 2px 4px; } .vt-col-sum { font-size:11px; color:var(--muted); font-weight:600; } .vt-col-empty { font-size:12px; color:var(--muted); text-align:center; padding:8px 0; } .vt-card { background:var(--panel); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--radius-sm); padding:10px 11px; cursor:pointer; display:flex; flex-direction:column; gap:6px; transition:border-color .15s, transform .1s; } .vt-card:hover { border-color:var(--border-hover); transform:translateY(-1px); } .vt-card:focus-visible { box-shadow:var(--focus); outline:none; } .vt-card-title { font-size:13px; font-weight:700; line-height:1.25; } .vt-card-kunde { font-size:12px; color:var(--muted); } .vt-card-meta { display:flex; flex-wrap:wrap; gap:5px; } .vt-wv { font-size:11px; font-weight:600; color:var(--muted); } .vt-wv.over { color:var(--err); font-weight:700; } .vt-card select { width:100%; margin-top:2px; font-size:11px; padding:4px 6px; background:var(--panel2); border:1px solid var(--border); border-radius:8px; color:var(--text); font-family:inherit; cursor:pointer; } /* --- Aktivitaeten (Vertrieb v3) --- */ .vt-quick { display:flex; gap:4px; } .vt-quick button { flex:1; display:inline-flex; align-items:center; justify-content:center; background:var(--panel2); border:1px solid var(--border); border-radius:8px; color:var(--muted); padding:4px 0; cursor:pointer; transition:color .15s, border-color .15s; } .vt-quick button:hover { color:var(--accent); border-color:var(--accent-border); } .vt-quick .tico { width:14px; height:14px; } .vt-card.gesperrt { opacity:.55; } .vt-sperre { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--err); } .vt-sperre .tico { width:13px; height:13px; } .vt-kein-termin { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:var(--warn); } .vt-kein-termin .tico { width:12px; height:12px; } /* --- Mein Tag / Tages-Cockpit (Block B) --- */ .vt-mt-hint { font-size:12px; color:var(--muted); margin-left:auto; } .vt-mt-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; margin-left:4px; border-radius:9px; background:var(--err); color:#fff; font-size:11px; font-weight:700; line-height:1; } .vt-mt-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px; align-items:start; } .vt-mt-col { background:var(--panel2); border:1px solid var(--border); border-radius:var(--radius); padding:11px; display:flex; flex-direction:column; gap:10px; } .vt-mt-col-head { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:700; padding:2px; } .vt-mt-col-head .tico { width:15px; height:15px; } .vt-mt-col-head.over { color:var(--err); } .vt-mt-col-head.heute { color:var(--accent); } .vt-mt-col-head.kein { color:var(--warn); } .vt-mt-col-head.lead { color:var(--ok, #2e9e5b); } .vt-mt-count { margin-left:auto; font-size:12px; font-weight:700; color:var(--muted); background:var(--panel); border:1px solid var(--border); border-radius:9px; min-width:20px; text-align:center; padding:1px 6px; } .vt-mt-card { background:var(--panel); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--radius-sm); padding:10px 11px; cursor:pointer; display:flex; flex-direction:column; gap:5px; transition:border-color .15s, transform .1s; } .vt-mt-card:hover { border-color:var(--border-hover); transform:translateY(-1px); } .vt-mt-card:focus-visible { box-shadow:var(--focus); outline:none; } .vt-mt-schritt { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; } .vt-mt-schritt .tico { width:14px; height:14px; flex:0 0 auto; } .vt-mt-schritt.over { color:var(--err); } .vt-mt-schritt.heute { color:var(--accent); } .vt-mt-schritt.kein { color:var(--warn); } .vt-mt-schritt.lead { color:var(--ok, #2e9e5b); } .vt-mt-kunde { font-size:13px; font-weight:600; line-height:1.25; } .vt-mt-messe { font-size:12px; color:var(--muted); } .vt-mt-card .vt-card-meta { margin-top:1px; } /* --- Board: eingeklappte leere Phasen-Spalten (Block B) --- */ .vt-col-collapsed { flex:0 0 46px; align-self:stretch; align-items:center; justify-content:flex-start; gap:10px; padding:11px 6px; cursor:pointer; border-top:3px solid var(--accent); background:var(--panel2); border:1px solid var(--border); border-radius:var(--radius); } .vt-col-collapsed:hover { border-color:var(--border-hover); } .vt-col-collapsed:focus-visible { box-shadow:var(--focus); outline:none; } .vt-col-collapsed-title { writing-mode:vertical-rl; transform:rotate(180deg); font-size:12px; font-weight:700; white-space:nowrap; } .vt-col-collapsed-count { font-size:11px; font-weight:700; color:var(--muted); } .vt-timeline { margin-top:4px; } .vt-akti { display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--hairline); } .vt-akti:last-child { border-bottom:none; } .vt-akti-ico { width:28px; height:28px; border-radius:8px; background:var(--panel2); display:flex; align-items:center; justify-content:center; color:var(--muted); flex-shrink:0; } .vt-akti-ico .tico { width:14px; height:14px; } .vt-akti-main { flex:1; min-width:0; } .vt-akti-kopf { font-size:12.5px; font-weight:700; } .vt-akti-kopf .erg { font-weight:500; color:var(--muted); } .vt-akti-notiz { font-size:12.5px; margin-top:2px; white-space:pre-wrap; } .vt-akti-meta { font-size:11px; color:var(--muted); margin-top:3px; } .vt-akti-folge { font-size:11.5px; margin-top:3px; font-weight:600; color:var(--info); } .vt-akti-folge.sperre { color:var(--err); } .vt-folge-box { background:var(--panel2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 14px; margin-top:14px; display:flex; flex-direction:column; gap:8px; } .vt-folge-box label.radio { display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; margin:0; } .vt-folge-box input[type=radio] { width:auto !important; flex:0 0 auto; margin:0; accent-color:var(--accent); } .vt-folge-box input[type=date] { width:auto !important; font-family:inherit; font-size:13px; padding:5px 8px; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text); margin-left:4px; } .vt-typ-seg { display:flex; gap:4px; } .vt-typ-seg button { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; background:var(--panel2); border:1px solid var(--border); border-radius:var(--radius-xs); color:var(--muted); padding:8px 0; font-size:12.5px; font-weight:600; font-family:inherit; cursor:pointer; } .vt-typ-seg button.active { background:var(--accent-soft); border-color:var(--accent-border); color:var(--accent); } .vt-typ-seg .tico { width:14px; height:14px; } .vt-erg-chips { display:flex; gap:5px; flex-wrap:wrap; } .vt-erg-chips button { background:var(--panel2); border:1px solid var(--border); border-radius:20px; color:var(--muted); padding:5px 11px; font-size:12px; font-weight:600; font-family:inherit; cursor:pointer; } .vt-erg-chips button.active { background:var(--accent-soft); border-color:var(--accent-border); color:var(--accent); } .vt-status-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:14px 0 6px; } .vt-status-row select { background:var(--panel2); border:1px solid var(--border); border-radius:9px; color:var(--text); font-family:inherit; font-size:13px; padding:7px 10px; } .vt-dl { display:grid; grid-template-columns:1fr 1fr; gap:2px 18px; margin:10px 0 0; } .vt-drow { display:flex; flex-direction:column; padding:6px 0; border-bottom:1px solid var(--hairline); } .vt-drow dt { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; } .vt-drow dd { margin:1px 0 0; font-size:13.5px; } .vt-notiz { font-size:13px; white-space:pre-wrap; background:var(--panel2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px; } .vt-chk { display:flex; flex-direction:column; gap:7px; } .vt-chk label { display:flex; align-items:center; gap:9px; font-size:13.5px; cursor:pointer; } .vt-chk input { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; } .vt-chk-am { margin-left:auto; font-size:11px; color:var(--muted); } @media (max-width:640px) { .vt-dl { grid-template-columns:1fr; } } /* ---- ExpoCopilot ---- */ .cp-fab { position:fixed; right:26px; bottom:26px; z-index:90; width:52px; height:52px; border-radius:50%; background:var(--accent); color:var(--on-accent); font-size:22px; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow-accent); transition:transform .15s, filter .15s; } .cp-fab:hover { transform:scale(1.07); filter:brightness(1.08); } .cp-wartet { font-size:11px; color:var(--muted); margin-top:4px; font-style:italic; } .cp-panel { position:fixed; right:26px; bottom:92px; z-index:95; width:380px; max-width:calc(100vw - 40px); height:70vh; max-height:70vh; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow-lg); } .cp-head { display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--border); background:var(--panel2); flex-shrink:0; } .cp-head .cp-title { flex:1; font-size:13.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cp-head .cp-title span { color:var(--accent); } .cp-close { margin-left:6px; background:transparent; border:none; color:var(--muted); font-size:18px; cursor:pointer; width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; } .cp-close:hover { color:var(--text); background:var(--panel); } /* Schnell/Deep-Modus-Toggle (nur admin+mitarbeiter) */ /* Kosten-Badge (dezent, nur intern) */ .cp-kosten { align-self:flex-start; font-size:11px; color:var(--muted); background:var(--panel2); border:1px solid var(--border); border-radius:20px; padding:2px 9px; line-height:1.3; } .cp-msgs { flex:1; overflow-y:auto; padding:16px 14px; display:flex; flex-direction:column; gap:10px; } /* KEIN Zusammenquetschen der Eintraege (Befund 01.08.: Luna-Karten waren unsichtbar). .cp-msgs ist ein Spalten-Flexcontainer; Flex-Kinder haben flex-shrink:1. Die automatische Mindesthoehe (min-height:auto) schuetzt sie normalerweise davor, unter ihren Inhalt zu schrumpfen — sie gilt laut Flexbox-Spec aber NUR bei overflow:visible. .cp-karte hat overflow:hidden (Radius-Beschnitt) und damit Mindesthoehe 0: sobald der Verlauf laenger war als die Box, sog die Karte das gesamte Minus auf und fiel auf 2 px (nur noch die Rahmenlinien) zusammen — Bild geladen, aber weggeschnitten. Eintraege behalten ihre Hoehe, die Box scrollt. */ .cp-msgs > * { flex-shrink:0; } .cp-bubble { max-width:85%; padding:10px 13px; border-radius:13px; font-size:13.5px; line-height:1.55; word-wrap:break-word; overflow-wrap:break-word; } .cp-bubble.user { align-self:flex-end; background:var(--accent-soft); border:1px solid var(--accent-border); border-bottom-right-radius:5px; } .cp-bubble.assistant { align-self:flex-start; background:var(--panel2); border:1px solid var(--border); border-bottom-left-radius:5px; } .cp-bubble.assistant img { max-width:100%; border-radius:9px; margin:6px 0; display:block; } .cp-bubble.assistant code { background:var(--code-bg); border-radius:5px; padding:1px 5px; font-family:ui-monospace,Menlo,monospace; font-size:12px; } .cp-line { align-self:flex-start; font-size:12px; color:var(--muted); padding:1px 4px; } .cp-line.err { color:var(--err); } .cp-line.hint { display:flex; align-items:center; gap:10px; } /* Werkzeug-Aufrufe als dezente Chips */ .cp-chips { align-self:flex-start; display:flex; flex-wrap:wrap; gap:5px; padding:1px 2px; } .cp-chip { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--muted); background:var(--panel2); border:1px solid var(--border); border-radius:20px; padding:3px 9px; line-height:1.3; } .cp-chip::before { content:"\2699"; font-size:11px; opacity:.8; } /* "Assistent tippt…" */ .cp-typing { align-self:flex-start; display:flex; align-items:center; gap:7px; font-size:12px; color:var(--muted); padding:2px 4px; } .cp-typing .cp-dots { display:inline-flex; gap:3px; } .cp-typing .cp-dots i { width:5px; height:5px; border-radius:50%; background:var(--muted); display:inline-block; animation:cpblink 1.2s infinite both; } .cp-typing .cp-dots i:nth-child(2){ animation-delay:.2s; } .cp-typing .cp-dots i:nth-child(3){ animation-delay:.4s; } @keyframes cpblink { 0%,80%,100%{opacity:.25;transform:scale(.8);} 40%{opacity:1;transform:scale(1);} } .cp-input { display:flex; gap:8px; align-items:flex-end; padding:12px 14px; border-top:1px solid var(--border); flex-shrink:0; } .cp-input textarea { flex:1; background:var(--panel2); border:1px solid var(--border); border-radius:11px; color:var(--text); font-family:inherit; font-size:13.5px; line-height:1.5; padding:9px 12px; outline:none; resize:none; max-height:110px; } .cp-input textarea:focus { border-color:var(--accent); } .cp-send { background:var(--accent); color:var(--on-accent); border:none; border-radius:10px; width:38px; height:38px; font-size:15px; cursor:pointer; flex-shrink:0; } .cp-send:disabled { opacity:.45; cursor:default; } /* Kopf-Icons (Verlauf, Neuer Chat) */ .cp-icon { background:transparent; border:none; color:var(--muted); font-size:15px; cursor:pointer; width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .cp-icon:hover { color:var(--text); background:var(--panel); } /* Kreativ-Umschalter (nur admin+mitarbeiter): Session-Flag fuer die Kreativ-Pipeline */ /* Attach + Stop */ .cp-attach { background:var(--panel2); border:1px solid var(--border); color:var(--muted); border-radius:10px; width:38px; height:38px; font-size:16px; cursor:pointer; flex-shrink:0; } .cp-attach:hover { color:var(--text); border-color:var(--accent); } .cp-attach:disabled { opacity:.45; cursor:default; } /* Mikrofon (Diktat) — Grundzustand wie Attach, Aufnahme-/Transkribier-States */ .cp-mic { background:var(--panel2); border:1px solid var(--border); color:var(--muted); border-radius:10px; min-width:38px; height:38px; padding:0 8px; font-size:16px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; gap:6px; } .cp-mic:hover { color:var(--text); border-color:var(--accent); } .cp-mic:disabled { opacity:.45; cursor:default; } .cp-mic.aufnahme { background:var(--err); border-color:var(--err); color:var(--on-accent); animation:cpMicPuls 1.1s ease-in-out infinite; } .cp-mic.aufnahme .cp-mic-timer { color:var(--on-accent); font-size:12px; font-variant-numeric:tabular-nums; font-weight:600; } .cp-mic.transkribiert { color:var(--accent); } .cp-mic .cp-mic-ico.spin { display:inline-block; animation:spin .8s linear infinite; } @keyframes cpMicPuls { 0%,100%{ box-shadow:0 0 0 0 var(--accent-ring);} 50%{ box-shadow:0 0 0 5px transparent;} } .cp-stop { background:var(--err); color:var(--on-accent); border:none; border-radius:10px; width:38px; height:38px; font-size:14px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; } /* Upload-Chips im Eingabebereich */ .cp-uploads { display:flex; flex-wrap:wrap; gap:6px; padding:8px 14px 0; } .cp-up-chip { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text); background:var(--panel2); border:1px solid var(--border); border-radius:9px; padding:4px 8px; max-width:100%; } .cp-up-chip img { width:26px; height:26px; object-fit:cover; border-radius:5px; } .cp-up-chip .cp-up-x { cursor:pointer; color:var(--muted); font-weight:700; } .cp-up-chip .cp-up-x:hover { color:var(--err); } .cp-up-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:160px; } /* Inline-Medien in Antworten */ /* B5 (geteilter Vorgangs-Faden): Absender ueber einer FREMDEN Blase. Klein und ruhig — er soll zuordenbar machen, nicht dominieren. */ .cp-bubble.user .cp-von { font-size:11px; color:var(--muted); margin:0 0 3px; font-weight:600; } .cp-bubble.user img, .cp-bubble .cp-media-img { max-width:100%; border-radius:9px; margin:6px 0; display:block; cursor:zoom-in; } .cp-filecard { display:inline-flex; align-items:center; gap:9px; background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:8px 11px; margin:5px 0; text-decoration:none; color:var(--text); max-width:100%; } .cp-filecard .cp-fc-ic { font-size:18px; } .cp-filecard .cp-fc-name { font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Drag&Drop-Overlay */ /* fix: position:relative-Override entfernt — .cp-panel ist position:fixed (Z.274) und damit bereits Anker fuer absolute Kinder */ .cp-drop-overlay { position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; background:var(--accent-soft); border:2px dashed var(--accent); border-radius:var(--radius); font-size:15px; font-weight:700; color:var(--accent); pointer-events:none; } /* Session-Historie-Panel */ .cp-hist { position:absolute; top:52px; left:0; right:0; z-index:6; max-height:60%; overflow-y:auto; background:var(--panel); border-bottom:1px solid var(--border); box-shadow:var(--shadow-md); padding:8px; } .cp-hist-head { display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; padding:4px 8px 8px; } .cp-hist-new { background:var(--accent); color:var(--on-accent); border:none; border-radius:8px; font-size:11.5px; font-weight:600; padding:5px 9px; cursor:pointer; } .cp-hist-item { display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:9px; cursor:pointer; } .cp-hist-item:hover { background:var(--panel2); } .cp-hist-item .cp-hi-main { flex:1; overflow:hidden; } .cp-hist-item .cp-hi-titel { font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Gespraechsliste (parallele Designer-Gespraeche): Punkt vor dem Titel = an diesem Chat haengt ein eigenes Luna-Gespraech mit eigenem Entwurf. */ .cp-hist-item .cp-hi-luna { color:var(--accent); font-size:10px; vertical-align:middle; } .cp-hist-item .cp-hi-meta { font-size:11px; color:var(--muted); margin-top:2px; } .cp-hist-item .cp-hi-del { background:transparent; border:none; color:var(--muted); font-size:14px; cursor:pointer; padding:4px 6px; border-radius:6px; } .cp-hist-item .cp-hi-del:hover { color:var(--err); background:var(--panel); } .cp-hist-empty { font-size:12.5px; color:var(--muted); padding:14px 10px; text-align:center; } /* ---- Render-Push: Gate-/Info-Karten im Chat ---- */ .cp-karte { border:1px solid var(--border); border-radius:12px; background:var(--panel2); margin:10px 0; overflow:hidden; box-shadow:var(--shadow-sm); } .cp-karte.gate { border-color:var(--accent-border); } .cp-karte.fertig { border-color:var(--ok-border); } .cp-karte.fehler { border-color:var(--err-border); background:var(--err-soft); } .cp-karte .ck-head { display:flex; align-items:center; gap:8px; padding:11px 13px 8px; font-size:13.5px; font-weight:700; } .cp-karte.gate .ck-head { color:var(--accent); } .cp-karte.fertig .ck-head { color:var(--ok); } .cp-karte.fehler .ck-head { color:var(--err); } .cp-karte .ck-proj { margin-left:auto; font-size:11px; font-weight:600; color:var(--muted); } .cp-karte .ck-img { display:block; width:100%; max-height:340px; object-fit:contain; cursor:zoom-in; background:var(--img-bg); } .cp-karte .ck-text { padding:9px 13px; font-size:12.5px; color:var(--text); white-space:pre-wrap; line-height:1.5; max-height:150px; overflow-y:auto; } .cp-karte .ck-actions { display:flex; gap:8px; padding:4px 13px 13px; flex-wrap:wrap; } .cp-karte .ck-btn { border:none; border-radius:9px; font-size:12.5px; font-weight:600; padding:8px 13px; cursor:pointer; } .cp-karte .ck-btn.primary { background:var(--accent); color:var(--on-accent); } .cp-karte .ck-btn.primary:hover { filter:brightness(1.08); } .cp-karte .ck-btn.ghost { background:var(--panel); color:var(--text); border:1px solid var(--border); } .cp-karte .ck-btn:disabled { opacity:.55; cursor:default; } .cp-karte .ck-status { padding:0 13px 12px; font-size:12px; color:var(--muted); } .cp-karte .ck-status.ok { color:var(--ok); } /* -- chat-ux: Lauf-Status-Zeile (Designer-Entwurfslauf) ------------------- */ .cp-lauf { align-self:flex-start; display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-border); border-radius:20px; padding:6px 12px; animation:cpLaufPuls 2.2s ease-in-out infinite; } .cp-lauf .cp-lauf-spin { width:12px; height:12px; border:2px solid var(--accent-border); border-top-color:var(--accent); border-radius:50%; flex-shrink:0; animation:spin 1s linear infinite; } .cp-lauf .cp-lauf-text { line-height:1.4; } @keyframes cpLaufPuls { 0%,100% { opacity:1; } 50% { opacity:.72; } } /* -- chat-ux: Luna-Antworten (Designer-Weg) dezent gekennzeichnet --------- */ .cp-luna { align-self:flex-start; max-width:85%; display:flex; flex-direction:column; gap:3px; } .cp-luna .cp-luna-kopf { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--accent); padding-left:4px; } .cp-luna .cp-luna-punkt { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 6px var(--accent); } .cp-luna .cp-bubble.assistant.luna { max-width:100%; border-color:var(--accent-border); } /* -- chat-ux: Karte "Technischer Befund" eingeklappt (natives details) ---- */ details.cp-karte.befund > summary.ck-head { cursor:pointer; list-style:none; color:var(--muted); user-select:none; padding-bottom:11px; } details.cp-karte.befund > summary.ck-head::-webkit-details-marker { display:none; } details.cp-karte.befund .ck-caret { display:inline-block; transition:transform .15s; } details.cp-karte.befund[open] .ck-caret { transform:rotate(90deg); } details.cp-karte.befund[open] > summary.ck-head { padding-bottom:4px; } details.cp-karte.befund .ck-text { font-family:ui-monospace,Menlo,monospace; font-size:11.5px; color:var(--muted); } /* ---- Benachrichtigungs-Glocke (nur admin/mitarbeiter) ---- */ .bell-wrap { position:relative; } .bell-btn { position:relative; background:transparent; border:none; color:var(--text); font-size:19px; cursor:pointer; line-height:1; padding:4px; border-radius:8px; } .bell-btn:hover { background:var(--panel2); } .bell-badge { position:absolute; top:-2px; right:-2px; min-width:16px; height:16px; padding:0 4px; border-radius:9px; background:var(--accent); color:var(--on-accent); font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center; } .bell-badge.hidden { display:none; } .bell-drop { position:absolute; top:38px; right:0; width:340px; max-width:88vw; max-height:60vh; overflow-y:auto; background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg); z-index:120; padding:6px; } .bell-drop.hidden { display:none; } .bell-drop-head { font-size:11.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; padding:8px 10px 6px; } .bell-item { display:flex; align-items:flex-start; gap:9px; padding:9px 10px; border-radius:9px; cursor:pointer; } .bell-item:hover { background:var(--panel2); } .bell-item.ungelesen { background:var(--accent-soft); } .bell-item .bi-ic { font-size:16px; line-height:1.3; } .bell-item .bi-main { flex:1; overflow:hidden; } .bell-item .bi-titel { font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bell-item .bi-meta { font-size:11px; color:var(--muted); margin-top:2px; } .bell-empty { font-size:12.5px; color:var(--muted); padding:16px 10px; text-align:center; } /* ---- Mietmobiliar (Möbel-Kreislauf) ---- */ .moebel-card{border:1px solid var(--line);border-radius:12px;padding:16px} .moebel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap} .moebel-title{font-weight:700;font-size:15px} .moebel-hint{font-size:12px;color:var(--muted);margin-top:6px} .moebel-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)} .moebel-thumb{width:56px;height:56px;object-fit:cover;border-radius:8px;background:var(--panel2);flex:0 0 auto} .moebel-thumb-empty{display:flex;align-items:center;justify-content:center;color:var(--muted)} .moebel-info{flex:1 1 auto;min-width:0} .moebel-name{font-weight:600} .moebel-menge{color:var(--muted);font-weight:400} .moebel-preis{font-size:12px;color:var(--muted);margin-top:2px} .moebel-swap{max-width:220px} /* ---- Rohbau-Viewer (R1/R2) ---- */ .rohbau-frame-wrap { width:100%; height:72vh; min-height:480px; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; background:#0f1113; } #rohbau-frame { width:100%; height:100%; border:0; display:block; } .rohbau-verwahl { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); } .rohbau-verwahl select { padding:6px 8px; } .rohbau-actions { display:flex; gap:8px; flex-wrap:wrap; } .rohbau-shots-head { display:flex; align-items:baseline; gap:12px; margin:22px 0 10px; flex-wrap:wrap; } .rohbau-shots-head h3 { margin:0; font-size:15px; } .rohbau-shots-head .hint { color:var(--muted); font-size:12px; } .rohbau-shots { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; } .rohbau-shots .shot { position:relative; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; background:var(--panel2); } .rohbau-shots .shot img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; cursor:pointer; background:#0f1113; } .rohbau-shots .shot-meta { padding:7px 9px; display:flex; flex-direction:column; gap:1px; } .rohbau-shots .shot-view { font-size:12.5px; font-weight:600; } .rohbau-shots .shot-sub { font-size:11px; color:var(--muted); } .rohbau-shots .empty.small, .empty.small { grid-column:1/-1; padding:16px; color:var(--muted); font-size:13px; } .rohbau-shots .shot-actions { margin-top:6px; display:flex; flex-wrap:wrap; gap:6px; } .btn.ghost.sm, button.btn.sm { padding:5px 9px; font-size:12px; } .shot-badge { font-size:10px; font-weight:700; padding:1px 7px; border-radius:10px; margin-left:4px; vertical-align:middle; } .shot-badge.busy { background:var(--warn-soft,#4a3a12); color:var(--warn,#ffb454); } .shot-badge.done { background:var(--ok-soft,#12321f); color:var(--ok,#4ec98a); } .shot-badge.err { background:var(--err-soft,#3a1414); color:var(--err,#ff6b6b); } .rend-box { margin-top:4px; } .rend-thumb { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius-xs); border:1px solid var(--border); cursor:pointer; display:block; background:#0f1113; } .rend-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; } /* ---- Design & Render (Phase 3) ---- */ .render-wrap { max-width:1000px; } .render-status { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; margin-bottom:16px; } .render-status .rs-badge { width:10px; height:10px; border-radius:50%; background:var(--muted); } .render-status.run .rs-badge { background:var(--warn); animation:pulse 1.2s infinite; } .render-status.done .rs-badge { background:var(--ok); } .render-status.gate .rs-badge { background:var(--info); } .render-status.orphan .rs-badge { background:var(--err); } .render-status .rs-cost { margin-left:auto; font-size:12.5px; color:var(--muted); font-weight:500; } .render-chain { display:flex; align-items:center; flex-wrap:wrap; gap:2px; margin-bottom:22px; } .rst { display:flex; flex-direction:column; align-items:center; gap:5px; min-width:64px; } .rst-dot { width:14px; height:14px; border-radius:50%; background:var(--panel2); border:2px solid var(--border); } .rst-lbl { font-size:10px; color:var(--muted); white-space:nowrap; } .rst-done .rst-dot { background:var(--ok); border-color:var(--ok); } .rst-done .rst-lbl { color:var(--text); } .rst-active .rst-dot { background:var(--warn); border-color:var(--warn); animation:pulse 1.2s infinite; } .rst-active .rst-lbl { color:var(--warn); font-weight:700; } .rst-sep { flex:1; height:2px; min-width:8px; background:var(--border); align-self:flex-start; margin-top:6px; } @keyframes pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.4;transform:scale(.8);} } .render-panel { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:16px; } .rp-title { font-size:14px; font-weight:700; margin-bottom:12px; } .rp-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .rp-lbl { font-size:12px; color:var(--muted); } .rp-row select { background:var(--panel2); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:7px 10px; font-size:13px; } .rp-hint { font-size:12px; color:var(--muted); margin-top:10px; min-height:16px; } .render-warn { background:var(--err-soft); border:1px solid var(--err-border); border-radius:var(--radius); padding:14px 16px; margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; } .render-gate { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:12px 16px; margin-bottom:14px; } .render-gate summary { cursor:pointer; font-weight:600; font-size:13.5px; } .render-gate.gate2 { border-color:var(--info); background:var(--info-soft); } .rg-title { font-size:14px; font-weight:700; margin-bottom:8px; } .gate-md { font-size:13px; margin:10px 0; } .render-galgroup { margin-top:18px; } .render-galgroup .rg-h { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:10px; } .render-log { background:var(--log-bg); border:1px solid var(--border); border-radius:8px; padding:12px; font-size:11.5px; overflow-x:auto; white-space:pre-wrap; margin-top:10px; } /* ---- Material-Tabelle ---- */ .mat-tbl-wrap { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; max-width:1000px; } .mat-tbl { width:100%; border-collapse:collapse; font-size:13.5px; } .mat-tbl th { text-align:left; font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; padding:8px 12px; border-bottom:1px solid var(--border); white-space:nowrap; } .mat-tbl td { padding:10px 12px; border-bottom:1px solid var(--hairline); vertical-align:middle; } .mat-tbl tr:last-child td { border-bottom:none; } .mat-tbl tbody tr:hover td { background:var(--panel2); } .mat-tbl tbody tr[style*="cursor:pointer"]:hover td { background:var(--panel2); } .mat-gesamt { max-width:1000px; text-align:right; padding:12px 16px; font-size:14.5px; color:var(--muted); } .mat-gesamt strong { color:var(--text); font-size:16px; } .mat-menge-inp { background:var(--panel2); border:1px solid var(--border); border-radius:7px; color:var(--text); font-family:inherit; font-size:13px; padding:5px 8px; width:80px; outline:none; } .mat-menge-inp:focus { border-color:var(--accent); } /* ---- Dokumente ---- */ .dok-badge { display:inline-block; font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; text-transform:uppercase; letter-spacing:.04em; } .dok-badge.angebot { color:var(--accent); background:var(--accent-soft); } .dok-badge.auftrag { color:var(--info); background:var(--info-soft); } .dok-badge.rechnung { color:var(--ok); background:var(--ok-soft); } .dok-tbl-wrap { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; max-width:960px; } .dok-tbl { width:100%; border-collapse:collapse; font-size:13.5px; } .dok-tbl th { text-align:left; font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; padding:8px 12px; border-bottom:1px solid var(--border); white-space:nowrap; } .dok-tbl td { padding:9px 12px; border-bottom:1px solid var(--hairline); vertical-align:middle; } .dok-tbl tr:last-child td { border-bottom:none; } .dok-tbl tbody tr { cursor:pointer; } .dok-tbl tbody tr:hover td { background:var(--panel2); } .pos-inp { background:var(--panel2); border:1px solid var(--border); border-radius:7px; color:var(--text); font-family:inherit; font-size:13px; padding:5px 8px; outline:none; width:100%; } .pos-inp:focus { border-color:var(--accent); } .pos-inp:disabled { opacity:.5; cursor:default; } .modal.dok-modal { max-width:920px; } .summen-box { background:var(--panel2); border:1px solid var(--border); border-radius:12px; padding:14px 18px; margin-top:14px; display:flex; gap:28px; flex-wrap:wrap; } .summen-box .s-item { display:flex; flex-direction:column; gap:3px; } .summen-box .s-label { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; } .summen-box .s-val { font-size:15px; font-weight:700; } .summen-box .s-val.brutto { color:var(--accent); font-size:19px; } /* ---- Vault: globale Suche ---- */ .vault-search { position:relative; } .vault-search input { background:var(--panel2); border:1px solid var(--border); border-radius:10px; color:var(--text); font-family:inherit; font-size:13px; padding:8px 12px; outline:none; width:210px; transition:border-color .15s, width .15s; } .vault-search input:focus { border-color:var(--accent); width:260px; } .vault-results { position:absolute; top:calc(100% + 6px); right:0; width:380px; max-height:60vh; overflow-y:auto; background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-md); z-index:80; padding:6px; } .vault-results.hidden { display:none; } .vr-item { padding:9px 11px; border-radius:8px; cursor:pointer; } .vr-item:hover { background:var(--panel2); } .vr-note { font-size:12px; font-weight:700; color:var(--accent); } .vr-snip { font-size:12.5px; color:var(--text); margin-top:2px; line-height:1.4; } .vr-meta { font-size:11px; color:var(--muted); margin-top:2px; } .vr-empty { padding:14px; color:var(--muted); font-size:13px; text-align:center; } /* ---- Vault: Notiz-Ansicht ---- */ .note-layout { display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap; } .note-main { flex:1; min-width:320px; } .note-side { width:280px; flex-shrink:0; } .wikilink { color:var(--accent); cursor:pointer; font-weight:600; border-bottom:1px dashed var(--accent-border); } .wikilink:hover { filter:brightness(1.2); } .wikilink.dead { color:var(--muted); border-bottom-color:transparent; cursor:default; text-decoration:line-through; } .backlink-box { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:16px 18px; } .backlink-box h3 { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:10px; } .backlink-item { padding:7px 0; border-bottom:1px solid var(--hairline); font-size:13.5px; cursor:pointer; color:var(--accent); font-weight:600; } .backlink-item:last-child { border-bottom:none; } .backlink-item:hover { filter:brightness(1.2); } .note-fm { background:var(--panel2); border:1px solid var(--border); border-radius:10px; padding:12px 16px; margin-bottom:16px; font-size:12.5px; } .note-fm .fm-row { display:flex; gap:10px; padding:3px 0; } .note-fm .fm-k { color:var(--muted); min-width:120px; } .note-fm .fm-lock { font-size:11px; color:var(--muted); margin-bottom:8px; display:flex; align-items:center; gap:6px; } /* ---- Verknüpfung ---- */ .verkn-box { display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin:0 0 20px; } .verkn-box .vf { display:flex; flex-direction:column; gap:5px; } .verkn-box label { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; } .verkn-box select { background:var(--panel2); border:1px solid var(--border); border-radius:9px; color:var(--text); font-family:inherit; font-size:13px; padding:8px 11px; outline:none; min-width:200px; } .verkn-box select:focus { border-color:var(--accent); } /* ---- Responsive / Sidebar-Kollaps ---- */ /* BEFUND N4 (am laufenden Kopf gemessen, nicht geschätzt): die Nav-Punkte haben white-space:nowrap, .nav selbst hat min-width:0 — die Leiste SCHRUMPFT also, ihre Punkte nicht. Der Überschuss lief unsichtbar über die Suchbox (bei 1400 px: 245 px Überlappung, bei 1280 px: 321 px; mit sichtbarem Vertriebs-Punkt und Marken-Badge). Gemessen wurde nichts davon, weil nav.getBoundingClientRect() nur den geschrumpften Kasten meldet. Zwei Stellschrauben, beide in der vorhandenen Kaskade: 1. eine Stufe FRÜHER schmal werden (Suche, Badge, Punkt-Polster) — das schafft ~200 px und macht die Leiste bis ~1440 px einzeilig tragfähig; 2. der Drawer beginnt bei 1440 statt 1150 — darunter gibt es keine einzeilige Navigation mehr, also auch keine Überlappung. */ @media (max-width:1660px) { .header-inner { gap:10px; } .vault-search input { width:170px; } .vault-search input:focus { width:210px; } header .badge { display:none; } header .nav-item { padding:6px 9px; } } /* Nav wird unterhalb 1440px zum Off-Canvas-Drawer (Platz reicht nicht mehr für eine einzeilige Navigation — nie wieder mehrzeilig umbrechen und nie über die Suchbox schieben). */ @media (max-width:1440px) { header .hamburger { display:inline-flex; order:0; } header .logo { order:1; } header .badge { display:none; } .header-right { order:2; margin-left:auto; gap:10px; } /* Hinweis: header hat backdrop-filter → wird zum Containing-Block für fixed-Kinder. Deshalb height:100vh statt bottom:0. */ header .nav { order:5; position:fixed; top:0; left:0; height:100vh; height:100dvh; width:250px; max-width:82vw; margin:0; flex-direction:column; flex-wrap:nowrap; gap:4px; z-index:120; background:var(--panel); border-right:1px solid var(--border); padding:64px 14px 20px; box-shadow:var(--shadow-lg); transform:translateX(-105%); transition:transform .22s ease; overflow-y:auto; } body.nav-open header .nav { transform:translateX(0); } header .nav-item { padding:11px 14px; font-size:14.5px; border-radius:var(--radius-sm); } header .nav-scrim { display:block; position:fixed; top:0; left:0; width:100vw; height:100vh; height:100dvh; z-index:110; background:var(--scrim); opacity:0; pointer-events:none; transition:opacity .22s; } body.nav-open header .nav-scrim { opacity:1; pointer-events:auto; } } @media (max-width:900px) { .header-inner { padding:10px 16px; } .header-user .rolle { display:none; } main { padding:24px 16px 72px; } .vault-search input, .vault-search input:focus { width:150px; } .note-side { width:100%; } .cp-panel { right:12px; left:12px; width:auto; bottom:84px; height:72vh; } .cp-fab { right:16px; bottom:16px; } h1 { font-size:22px; } .modal { padding:22px 20px; } .detail-head { gap:10px; } } @media (max-width:560px) { /* BEFUND N4: der Kopf lief auf dem Handy 240 px aus der Seite (documentElement.scrollWidth 630 bei 390 px Fenster) — die Suchbox hat eine feste Breite und schrumpft nicht weiter. Die Vault-Suche ist auf einem Telefon ohnehin kein Werkzeug (Ergebnisliste 380 px breit); sie verschwindet hier, statt die ganze Seite seitlich zu verschieben. */ .vault-search { display:none; } /* Ebenfalls für die Breite: der Anzeigename (er steht in den Einstellungen und im Profil) und ein etwas kleineres Logo. Der Abmelden-Link bleibt. */ .header-user { display:none; } .logo { font-size:15px; } .dash-stats { grid-template-columns:repeat(2,1fr); } .grid { grid-template-columns:1fr; } .gallery { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); } .stat-val { font-size:30px; } .summen-box { gap:16px; } .header-user { font-size:12px; } .logout-link { font-size:11.5px; } /* Copilot als Vollbild-Sheet — das 72vh-Overlay war auf dem Handy kaum bedienbar. 100dvh statt 100vh: beruecksichtigt mobile Browserleisten. */ .cp-panel { top:0; left:0; right:0; bottom:0; width:100%; max-width:100%; height:100vh; height:100dvh; max-height:100dvh; border-radius:0; border:none; z-index:120; } .cp-panel #cp-text { font-size:16px; } /* verhindert iOS-Auto-Zoom beim Fokus */ } /* Tabellen auf schmalen Screens horizontal scrollbar statt Overflow */ @media (max-width:760px) { .mat-tbl-wrap, .dok-tbl-wrap { overflow-x:auto; } .mat-tbl, .dok-tbl { min-width:520px; } } @media (prefers-reduced-motion:reduce) { *, ::before, ::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } /* --- Sprachumschalter (Header) --- */ .lang-switch { position: relative; } .lang-btn { font-size: 12px; font-weight: 700; letter-spacing: .02em; min-width: 46px; } .lang-drop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: 5px; min-width: 150px; display: flex; flex-direction: column; gap: 2px; } .lang-drop button { text-align: left; background: none; border: 0; color: var(--text); font: inherit; font-size: 13px; padding: 8px 10px; border-radius: var(--radius-xs); cursor: pointer; } .lang-drop button:hover { background: var(--panel2); } .lang-drop button.active { background: var(--accent-soft); color: var(--accent); font-weight: 700; } /* ============================================================ Ehemals dynamisch injizierte Styles (qmEnsureStyle/ archivEnsureStyle in app.js) — CSP-Umzug v2026.07.22. Inhalt 1:1, nur statisch statt per JS eingefuegt. ============================================================ */ /* --- QM-Dokumente (frueher qmEnsureStyle()) --- */ .qm-list{display:flex;flex-direction:column;gap:8px;max-width:820px} .qm-row{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px;cursor:pointer;transition:border-color .15s} .qm-row:hover{border-color:var(--accent)} .qm-row-main{display:flex;flex-direction:column;gap:2px} .qm-code{font-size:11px;font-weight:700;color:var(--accent);letter-spacing:.4px} .qm-name{font-size:14px;color:var(--text);font-weight:600} .qm-tr{color:var(--muted);font-weight:400} .qm-row-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);white-space:nowrap} .qm-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;border:1px solid var(--border)} .qm-b-entwurf{color:var(--warn);border-color:var(--warn)} .qm-b-final{color:var(--ok);border-color:var(--ok)} .qm-b-storno{color:var(--muted);text-decoration:line-through} .qm-b-archiv{color:var(--muted);border-style:dashed} .qm-dl{color:var(--warn)} .qm-fehlend{background:var(--panel2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;margin-bottom:14px;font-size:13px;color:var(--text);max-width:820px;line-height:2} .qm-chip{display:inline-block;background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:2px 10px;font-size:12px;margin:0 3px} .qm-form-head{display:flex;justify-content:space-between;align-items:flex-start;max-width:820px;margin-bottom:12px} .qm-form-meta{display:flex;gap:8px;align-items:center} .qm-tf-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;max-width:820px} .qm-tf-tab{padding:7px 14px;border:1px solid var(--border);border-radius:var(--radius-xs);font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;background:var(--panel)} .qm-tf-tab.active{color:var(--on-accent);background:var(--accent);border-color:var(--accent)} .qm-form{max-width:820px} .qm-gruppe{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;margin-bottom:14px} .qm-gruppe h3{font-size:13px;font-weight:700;color:var(--text);margin:0 0 12px} .qm-feld{display:flex;flex-direction:column;gap:5px;margin-bottom:12px} .qm-feld>label{font-size:12.5px;color:var(--muted);font-weight:600} .qm-feld input,.qm-feld textarea,.qm-feld select{background:var(--panel2);border:1px solid var(--border);border-radius:var(--radius-xs);color:var(--text);font-family:inherit;font-size:13.5px;padding:8px 11px;outline:none;width:100%} .qm-feld input:focus,.qm-feld textarea:focus,.qm-feld select:focus{border-color:var(--accent)} .qm-inp-wrap{position:relative;display:flex;align-items:center;gap:8px} .qm-einheit{color:var(--muted);font-size:12px;white-space:nowrap} .qm-pflicht{color:var(--err)} .qm-vorgeschlagen{display:inline-block;background:var(--accent);color:var(--on-accent);font-size:10px;font-weight:700;padding:1px 7px;border-radius:20px;margin-left:4px;opacity:.9} .qm-hinweis{font-size:11.5px;color:var(--muted);font-style:italic} .qm-cb{flex-direction:row!important;display:flex;align-items:center;gap:8px} .qm-cb input{width:auto!important} .qm-pw{display:flex;gap:6px;align-items:center} .qm-pw-toggle{background:var(--panel2);border:1px solid var(--border);border-radius:var(--radius-xs);cursor:pointer;padding:7px 10px;color:var(--muted)} .qm-archiv-origs{display:flex;flex-direction:column;gap:10px;max-width:820px} .qm-archiv-orig{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px} .qm-archiv-orig-icon{font-size:28px;line-height:1} .qm-archiv-orig-meta{flex:1;min-width:0} .qm-archiv-orig-name{font-size:14.5px;font-weight:700;color:var(--text);word-break:break-word} .qm-archiv-orig-sub{font-size:12px;color:var(--muted);margin-top:2px} a.qm-archiv-btn{text-decoration:none;white-space:nowrap} .qm-tabelle{overflow-x:auto} .qm-tabelle table{width:100%;border-collapse:collapse;margin-bottom:8px} .qm-tabelle th{text-align:left;font-size:11px;color:var(--muted);padding:4px 6px;border-bottom:1px solid var(--border);font-weight:700;white-space:nowrap} .qm-tabelle td{padding:3px 4px} .qm-tabelle td input{padding:6px 8px;font-size:12.5px} .qm-delrow{background:transparent;border:none;color:var(--err);cursor:pointer;font-size:16px} .qm-bild-prev{max-height:90px;border-radius:var(--radius-xs);border:1px solid var(--border);display:block;margin-bottom:6px} .qm-bearb{max-width:820px;margin-bottom:12px;display:flex;flex-direction:column;gap:5px} .qm-bearb label{font-size:12.5px;color:var(--muted);font-weight:600} .qm-bearb input{background:var(--panel2);border:1px solid var(--border);border-radius:var(--radius-xs);color:var(--text);font-size:13.5px;padding:8px 11px;max-width:300px} .qm-actions{display:flex;gap:10px;flex-wrap:wrap;max-width:820px;margin-top:6px;align-items:center} .qm-hint{color:var(--muted);font-size:13px} .qm-v{font-variant-numeric:tabular-nums} .btn.ok{background:var(--ok);color:var(--on-accent)} .btn.danger{background:var(--err);color:var(--on-accent)} /* --- Archiv-Integration (frueher archivEnsureStyle()) --- */ .archiv-tag{display:inline-block;font-size:10px;font-weight:700;color:var(--muted);border:1px dashed var(--border);border-radius:20px;padding:1px 7px;margin-left:6px;vertical-align:middle;letter-spacing:.4px} .archiv-sek{margin-top:26px;max-width:820px} .archiv-sek h3{font-size:13px;font-weight:700;color:var(--muted);margin:0 0 10px;letter-spacing:.3px} .archiv-flinks{display:flex;gap:6px;flex-wrap:wrap} .archiv-flink{display:inline-block;font-size:11.5px;font-weight:700;border:1px solid var(--border);border-radius:20px;padding:2px 10px;color:var(--accent);text-decoration:none;background:var(--panel)} .archiv-flink:hover{border-color:var(--accent)} .archiv-tbl{width:100%;border-collapse:collapse} .archiv-tbl th{text-align:left;font-size:11px;color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--border);font-weight:700;white-space:nowrap} .archiv-tbl td{padding:8px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:top} .archiv-status-onayli{color:var(--ok);border-color:var(--ok)} .archiv-status-uretim{color:var(--accent);border-color:var(--accent)}