/* FiBot Mock-Shell — Soft Dark (Default) + Light, umschaltbar via data-theme am */ /* Dark: Palette des bisherigen AdminKit-Dark-Themes, Akzent Orange */ :root, [data-theme="soft"] { --bg:#19222c; --panel:#222e3c; --panel-2:#2d3846; --border:#384350; --text:#e9eaec; --text-2:#bdc0c5; --text-3:#7a828a; --accent:#ff8a3d; --accent-rgb:255,138,61; --on-accent:#2b1503; --green:#1cbb8c; --green-rgb:28,187,140; --red:#dc3545; --red-rgb:220,53,69; --blue:#3b7ddd; --blue-rgb:59,125,221; --amber:#fcb92c; --amber-rgb:252,185,44; --page-bg:#141c24; --shadow:rgba(0,0,0,.4); --stripe:rgba(255,255,255,.03); } [data-theme="light"] { --bg:#f5f5f3; --panel:#ffffff; --panel-2:#efefec; --border:#e3e3df; --text:#21242a; --text-2:#5b6068; --text-3:#989da6; --accent:#ee6e1f; --accent-rgb:238,110,31; --on-accent:#ffffff; --green:#199d5c; --green-rgb:25,157,92; --red:#d6442f; --red-rgb:214,68,47; --blue:#2f6fed; --blue-rgb:47,111,237; --amber:#b97f0a; --amber-rgb:185,127,10; --page-bg:#e9e9e6; --shadow:rgba(0,0,0,.12); --stripe:rgba(0,0,0,.025); } * { margin:0; padding:0; box-sizing:border-box; } html, body { height:100%; } body { background:var(--bg); color:var(--text); font:400 14.5px/1.5 'Inter',sans-serif; display:flex; flex-direction:column; min-height:100vh; } .material-symbols-outlined { font-size:20px; vertical-align:-5px; } a { color:inherit; text-decoration:none; } /* ---------- Top Navigation ---------- */ .topbar { border-bottom:1px solid var(--border); background:var(--bg); flex-shrink:0; } .tb1 { display:flex; align-items:center; gap:14px; padding:10px 24px; } .logo { display:flex; align-items:center; gap:9px; font-weight:700; font-size:15px; } .logo .mark { width:26px; height:26px; border-radius:7px; background:var(--accent); color:var(--on-accent); display:grid; place-items:center; flex-shrink:0; } .logo .mark span { font-size:16px; } .tarif { font-size:11.5px; font-weight:600; letter-spacing:.06em; color:var(--accent); border:1px solid rgba(var(--accent-rgb),.4); padding:2px 7px; border-radius:4px; } .tb1 .right { margin-left:auto; display:flex; align-items:center; gap:8px; } /* "safe center" statt "center": zentriert, solange Platz ist — bei Überlauf fällt es auf flex-start zurück. Mit reinem "center" wäre der linke Überhang in diesem Scroll-Container abgeschnitten und nicht erreichbar. */ .tabs { display:flex; gap:2px; padding:0 18px; overflow-x:auto; scrollbar-width:none; justify-content:safe center; } .tabs::-webkit-scrollbar { display:none; } .tab { padding:9px 12px 11px; color:var(--text-2); font-weight:400; font-size:14px; text-decoration:none; border-bottom:2px solid transparent; display:flex; gap:5px; align-items:center; white-space:nowrap; } .tab:hover { color:var(--text); } .tab.active { color:var(--text); border-bottom-color:var(--accent); font-weight:600; } .tab .lock { font-size:13px; color:var(--text-3); } .tab.locked { color:var(--text-3); } .tb1 .right .hamburger { display:none; } /* erst unter 900px, siehe Responsive */ .icon-btn { width:34px; height:34px; border-radius:9px; background:var(--panel); border:1px solid var(--border); display:grid; place-items:center; color:var(--text-2); cursor:pointer; } .icon-btn:hover { color:var(--text); } /* Konto-Menü oben rechts: Design, Logs, Einstellungen, Abmelden in einem Dropdown */ .usermenu { position:relative; } .usermenu.open .icon-btn { color:var(--text); border-color:var(--accent); } .usermenu .menu { position:absolute; top:calc(100% + 6px); right:0; min-width:215px; z-index:80; background:var(--panel); border:1px solid var(--border); border-radius:10px; box-shadow:0 12px 32px var(--shadow); padding:6px; display:none; } .usermenu.open .menu { display:block; } .usermenu .menu-item { display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border:none; border-radius:7px; background:none; color:var(--text-2); font:400 14px 'Inter',sans-serif; text-align:left; white-space:nowrap; cursor:pointer; } .usermenu .menu-item:hover { background:var(--panel-2); color:var(--text); } .usermenu .menu-item .material-symbols-outlined { font-size:19px; } .usermenu .menu-item.danger { color:var(--red); } .usermenu .menu-sep { height:1px; background:var(--border); margin:5px 2px; } /* ---------- Content ---------- */ .content { padding:22px 24px; overflow:auto; flex:1; display:flex; flex-direction:column; width:100%; } .container-xxl { width:100%; margin-left:auto; margin-right:auto; padding-left:12px; padding-right:12px; } @media (min-width:1800px) { .container-xxl { max-width:1600px; } } /* umbruchfähig: Titel und Aktions-Buttons passen auf schmalen Schirmen sonst nicht nebeneinander und schieben die ganze Seite in den horizontalen Überlauf */ .head { display:flex; align-items:center; gap:10px; row-gap:12px; margin-bottom:20px; flex-shrink:0; flex-wrap:wrap; } .head h1 { font-size:24px; font-weight:600; letter-spacing:-.02em; } .head .sub { color:var(--text-3); font-size:14px; } .head .grow { flex:1; } .content-flush { padding:0; max-width:none; } .content-flush .container-xxl { max-width:none; padding:0; } .content-flush .head { padding:12px 16px; margin-bottom:0; border-bottom:1px solid var(--border); } /* ---------- Komponenten ---------- */ .btn { font:400 14px 'Inter'; padding:8px 14px; border-radius:8px; background:var(--panel-2); color:var(--text); border:1px solid var(--border); cursor:pointer; display:inline-flex; align-items:center; gap:6px; } .btn .material-symbols-outlined { font-size:17px; } .btn.primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); } .btn.success { background:var(--green); border-color:var(--green); color:#fff; } .btn.warn { background:rgba(var(--amber-rgb),.15); border-color:rgba(var(--amber-rgb),.5); color:var(--amber); } .btn.ok-soft { background:rgba(var(--green-rgb),.12); border-color:rgba(var(--green-rgb),.45); color:var(--green); } .btn.danger { background:rgba(var(--red-rgb),.12); border-color:rgba(var(--red-rgb),.45); color:var(--red); } .btn.sm { padding:5px 10px; font-size:13px; } .card { background:var(--panel); border:1px solid var(--border); border-radius:12px; } .card-h { padding:14px 18px; border-bottom:1px solid var(--border); font-weight:700; font-size:14.5px; display:flex; align-items:center; gap:10px; } .card-h .right { margin-left:auto; display:flex; gap:8px; align-items:center; } .card-b { padding:18px; } .pill { font-size:80%; font-weight:600; padding:.3em .45em; border-radius:6px; display:inline-block; line-height:1; vertical-align:baseline; white-space:nowrap; position:relative; top:-1px; } .pill.ok { background:rgba(var(--green-rgb),.15); color:var(--green); } .pill.warn { background:rgba(var(--amber-rgb),.15); color:var(--amber); } .pill.info { background:rgba(var(--blue-rgb),.15); color:var(--blue); } .pill.danger { background:rgba(var(--red-rgb),.15); color:var(--red); } .pill.muted { background:var(--panel-2); color:var(--text-2); } .pill.pill-lg { font-size:110%; padding:.4em .65em; } table.tbl { width:100%; border-collapse:collapse; font-size:inherit; font-weight:400; } .tbl th { text-align:left; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); font-weight:600; padding:12px 20px; border-bottom:1px solid var(--border); } .tbl td { padding:14px 20px; border-bottom:1px solid var(--border); color:var(--text-2); vertical-align:middle; font-weight:400; } .tbl tr:last-child td { border-bottom:none; } .tbl tbody tr:nth-child(odd) td { background:var(--stripe); } .tbl tr:hover td { background:var(--panel-2); } .tbl td:first-child { color:var(--text); font-weight:400; } .in { color:var(--green); font-weight:700; font-variant-numeric:tabular-nums; } .out { color:var(--red); font-weight:700; font-variant-numeric:tabular-nums; } /* Formulare */ .field { margin-bottom:12px; } .field label { display:block; font-size:13.5px; color:var(--text-2); margin-bottom:4px; font-weight:400; } .inp, .sel { width:100%; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:9px 12px; font:400 14px 'Inter'; color:var(--text); } .sel { appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),linear-gradient(135deg,var(--text-3) 50%,transparent 50%); background-position:calc(100% - 16px) 55%,calc(100% - 11px) 55%; background-size:5px 5px; background-repeat:no-repeat; } .switch { position:relative; width:36px; height:20px; background:var(--border); border-radius:99px; display:inline-block; vertical-align:middle; cursor:pointer; transition:.15s; } .switch::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:.15s; } .switch.on { background:var(--green); } .switch.on::after { left:18px; } /* Modal */ .modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; place-items:center; z-index:50; } .modal-bg.open { display:grid; } .modal { width:480px; max-width:92vw; background:var(--panel); border:1px solid var(--border); border-radius:14px; box-shadow:0 24px 70px var(--shadow); } .modal .m-h { padding:15px 20px; border-bottom:1px solid var(--border); font-weight:700; display:flex; align-items:center; } .modal .m-h .x { margin-left:auto; cursor:pointer; color:var(--text-3); } .modal .m-b { padding:18px 20px; } .modal .m-f { padding:14px 20px; border-top:1px solid var(--border); display:flex; justify-content:end; gap:8px; } /* KPI */ /* auto-fit statt fester Spaltenzahl: das Dashboard hat inzwischen 5 Kacheln, bei repeat(4,1fr) fiel die fünfte allein in eine zweite Reihe. Passt sich jetzt an. */ .kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); gap:14px; margin-bottom:18px; } .kpi { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:16px 18px; } .kpi .k { font-size:13.5px; color:var(--text-2); font-weight:400; display:flex; justify-content:space-between; align-items:center; } .kpi .k .material-symbols-outlined { font-size:19px; } .kpi .v { font-size:24px; font-weight:800; letter-spacing:-.02em; margin-top:6px; font-variant-numeric:tabular-nums; } .kpi .d { font-size:13px; margin-top:3px; color:var(--text-3); } /* ---------- 2026-Stack: Ergänzungen für die echte App ---------- */ .alert { border:1px solid var(--border); border-radius:10px; padding:12px 16px; margin-bottom:14px; font-size:14px; background:var(--panel); color:var(--text-2); } .alert.warn { border-color:rgba(var(--amber-rgb),.4); background:rgba(var(--amber-rgb),.07); } .alert.info { border-color:rgba(var(--blue-rgb),.35); background:rgba(var(--blue-rgb),.06); } .alert.ok { border-color:rgba(var(--green-rgb),.4); background:rgba(var(--green-rgb),.07); } .alert a { color:var(--blue); font-weight:600; } .alert b, .alert .fw-bold { color:var(--text); } /* (topbar hamburger shown only on mobile — see responsive below) */ /* Dashboard */ .thumbs { display:flex; gap:12px; flex-wrap:wrap; } .thumb { width:130px; } .thumb img { width:100%; border-radius:6px; border:1px solid var(--border); background:#f6f6f6; } .thumb small { display:block; color:var(--text-3); font-size:12.5px; margin-top:4px; } .dev-card { border:1px solid var(--border); border-radius:10px; padding:12px 14px; text-align:center; display:block; } .dev-card:hover { background:var(--panel-2); } .dev-card .nm { font-weight:700; } .dev-card .meta { font-size:13.5px; color:var(--text-3); } .dev-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; } .b-danger { box-shadow:inset 0 3px 0 var(--red); } .b-warning { box-shadow:inset 0 3px 0 var(--amber); } .b-success { box-shadow:inset 0 3px 0 var(--green); } .b-danger-subtle { box-shadow:inset 0 3px 0 var(--text-3); } /* Dokumente-Inbox */ .filters { display:flex; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border); background:var(--bg); flex-wrap:wrap; } .filters .sel, .filters .inp { width:auto; min-width:160px; } .filters .sel { padding-right:30px; } .workspace { flex:1; display:flex; min-height:0; } .doclist { width:330px; border-right:1px solid var(--border); background:var(--panel); overflow:auto; flex-shrink:0; } .doc { padding:12px 16px; border-bottom:1px solid var(--border); cursor:pointer; display:block; } .doc:hover { background:var(--panel-2); } .doc.sel { background:var(--panel-2); box-shadow:inset 2px 0 var(--accent); } .doc .t { display:flex; align-items:baseline; gap:8px; } .doc .t b { font-size:14.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .doc .t time { margin-left:auto; font-size:13px; color:var(--text-3); flex-shrink:0; } .doc p { color:var(--text-2); font-size:13.5px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .doc .tags { margin-top:6px; display:flex; gap:5px; flex-wrap:wrap; } .tag { font-size:12px; font-weight:600; padding:2px 8px; border-radius:4px; background:var(--panel-2); color:var(--text-2); border:1px solid var(--border); } .tag.ok { color:var(--green); border-color:rgba(var(--green-rgb),.4); background:rgba(var(--green-rgb),.1); } .tag.warn { color:var(--amber); border-color:rgba(var(--amber-rgb),.4); background:rgba(var(--amber-rgb),.1); } .detail { flex:1; display:flex; min-width:0; min-height:0; } .preview { flex:1; background:var(--page-bg); display:flex; flex-direction:column; align-items:center; justify-content:flex-start; border-right:1px solid var(--border); position:relative; padding:16px; min-width:0; overflow:auto; } .preview .pgwrap { position:relative; width:100%; } .dochead { width:100%; display:flex; align-items:baseline; gap:7px; padding:0 2px 10px; color:var(--text-2); font-size:14px; flex-wrap:wrap; } .dochead b { color:var(--text); font-size:16px; } .dochead .amt { margin-left:auto; color:var(--green); font-weight:700; font-size:15px; font-variant-numeric:tabular-nums; } .preview img.pg { width:100%; max-height:75vh; object-fit:contain; border-radius:4px; background:var(--page-bg); box-shadow:0 18px 50px var(--shadow); } .stamp { position:absolute; top:24px; right:16px; background:rgba(40,167,69,.88); color:#fff; font-weight:800; font-size:1.15em; letter-spacing:.1em; padding:5px 14px; border-radius:4px; transform:rotate(15deg); pointer-events:none; z-index:5; } .pager-row { display:flex; align-items:center; gap:12px; margin-top:12px; color:var(--text-2); font-size:14px; } .pager-row .icon-btn { width:30px; height:30px; } .docmeta { width:340px; padding:16px 18px; overflow:auto; flex-shrink:0; } .docmeta h4 { font-size:12.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--text-3); margin:16px 0 9px; } .docmeta h4:first-child { margin-top:0; } .docmeta .beta { font-size:14px; color:var(--text-2); line-height:1.7; } .ki-fields .ki-f { display:flex; align-items:center; background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:8px 12px; margin-bottom:6px; font-size:14px; } .ki-fields .ki-f.ai { border-color:rgba(106,166,255,.35); } .ki-fields .ki-f label { font-size:13px; color:var(--text-3); font-weight:400; min-width:72px; margin-right:8px; } .ki-fields .ki-f .v { color:var(--text); font-weight:600; } .ki-fields .ai-mark { margin-left:auto; font-size:12px; font-weight:600; color:var(--blue); display:flex; gap:2px; align-items:center; white-space:nowrap; } .ki-fields .ai-mark .material-symbols-outlined { font-size:14px; } .ki-fields .ki-summary { font-size:13px; color:var(--text-3); margin-top:4px; line-height:1.5; } .copy-iban { color:var(--blue); cursor:pointer; font-weight:600; } details.pdftext summary { cursor:pointer; font-size:14px; color:var(--text-2); font-weight:600; margin:10px 0 6px; } details.pdftext textarea { width:100%; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:10px; font-size:13px; color:var(--text-3); min-height:160px; } .actions { display:flex; gap:8px; margin-top:4px; } .actions form { flex:1; display:flex; } .actions .btn { flex:1; justify-content:center; } .w100 { width:100%; justify-content:center; } /* Autotag-Modal Inhalte */ .modal .at-box { border:1px solid var(--border); border-radius:8px; padding:10px 12px; margin-bottom:10px; font-size:14px; } .modal .at-box b.hd { display:block; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); margin-bottom:4px; } .modal .at-box ul { list-style:none; } .modal .at-box li label { margin-left:6px; } /* Page-Subtabs (z.B. Lieferanten / Verträge) */ .subtabs { display:flex; gap:0; border-bottom:2px solid var(--border); margin-bottom:18px; } .subtab { padding:10px 20px; font-size:14.5px; font-weight:400; color:var(--text-3); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:color .15s, border-color .15s; background:none; border-top:none; border-left:none; border-right:none; } .subtab:hover { color:var(--text); } .subtab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; } .tabpanel { display:none; } .tabpanel.active { display:block; } /* Lade-Overlay (analog body.loading im alten Stack) */ body.loading::after { content:''; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:90; } body.loading::before { content:''; position:fixed; top:50%; left:50%; width:38px; height:38px; margin:-19px; border:3px solid var(--accent); border-top-color:transparent; border-radius:50%; z-index:91; animation:spin .7s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } /* ---------- Responsive ---------- */ @media (max-width: 1100px) { .docmeta { width:300px; } } @media (max-width: 900px) { /* Der Hamburger wandert in die Kopfzeile neben das Konto-Menü. Die Tab-Leiste ist damit keine eigene zweite Header-Reihe mehr, sondern erscheint erst beim Aufklappen — und dann als vertikale Liste statt als seitlich scrollbares Band. */ .tb1 .right .hamburger { display:grid; } .tabs { display:none; } .tabs.open { display:flex; flex-direction:column; align-items:stretch; gap:0; padding:6px 10px 10px; overflow-x:visible; border-top:1px solid var(--border); } .tabs.open .tab { padding:11px 12px; border-bottom:none; border-left:2px solid transparent; } .tabs.open .tab.active { border-left-color:var(--accent); } .head .sub { display:none; } .detail { flex-direction:column; overflow:auto; } .preview { border-right:none; border-bottom:1px solid var(--border); flex:none; } .docmeta { width:auto; } .doclist { width:280px; } } @media (max-width: 700px) { /* Seitenränder: .content und .container-xxl polstern beide, das kostete zusammen 72px Breite — auf dem Handy fast ein Fünftel des Schirms. Innenabstände von Karten und Tabellen ziehen sich entsprechend mit zusammen. */ .content { padding:14px 10px; } .container-xxl { padding-left:0; padding-right:0; } .card-h { padding:12px 14px; } .card-b { padding:14px; } .tbl th { padding:10px 12px; } .tbl td { padding:12px 12px; } /* Zwei Kacheln nebeneinander statt einer: auf dem gewonnenen Platz gut lesbar. Steht die letzte Kachel allein in ihrer Reihe, zieht sie sich über die volle Breite. */ .kpis { grid-template-columns:repeat(2,1fr); gap:10px; } .kpis .kpi:last-child:nth-child(odd) { grid-column:1 / -1; } .kpi { padding:13px 14px; } /* .tbl-stack: Zeile wird zur Karte statt zur Tabellenzeile. Die erste Zelle (kurzer Schlüssel, z.B. Datum) steht oben links, die letzte (kurzer Wert, z.B. Betrag) oben rechts, alles dazwischen darunter über die volle Breite. Auto-Placement füllt die Zeilen 2, 3, … von selbst — die Regel ist damit unabhängig von der Spaltenzahl der jeweiligen Tabelle. */ .tbl.tbl-stack, .tbl.tbl-stack tbody { display:block; } .tbl.tbl-stack thead { display:none; } .tbl.tbl-stack tr { display:grid; grid-template-columns:auto 1fr; gap:5px 10px; padding:12px 14px; border-bottom:1px solid var(--border); } .tbl.tbl-stack tr:last-child { border-bottom:none; } .tbl.tbl-stack tbody tr:nth-child(odd) { background:var(--stripe); } .tbl.tbl-stack td { display:block; padding:0; border:none; background:none !important; overflow-wrap:anywhere; } .tbl.tbl-stack td:first-child { grid-row:1; grid-column:1; display:flex; align-items:center; gap:6px; text-align:left !important; color:var(--text-3); font-size:13px; } .tbl.tbl-stack td:first-child img { margin:0 !important; } /* Bank-Logo war zentriert */ .tbl.tbl-stack td:last-child { grid-row:1; grid-column:2; justify-self:end; } .tbl.tbl-stack td:not(:first-child):not(:last-child) { grid-column:1 / -1; } /* Mobile Inbox: Liste ODER Detail */ .workspace.show-detail .doclist { display:none; } .workspace:not(.show-detail) .detail { display:none; } .doclist { width:100%; } .back-to-list { display:inline-flex !important; } } .back-to-list { display:none; } /* Suchergebnis-Raster (bei aktiver Suche/Filter statt Inbox-Liste) */ /* Spaltenzahl wie im alten Template: Suche = 2 Spalten, "Alle anzeigen" = 3 Spalten */ .resultgrid { flex:1; overflow:auto; padding:16px; display:grid; gap:16px; align-content:start; background:var(--page-bg); } .resultgrid.cols-2 { grid-template-columns:repeat(2,1fr); } .resultgrid.cols-3 { grid-template-columns:repeat(3,1fr); } @media (max-width: 1100px) { .resultgrid.cols-3 { grid-template-columns:repeat(2,1fr); } } @media (max-width: 800px) { .resultgrid.cols-2, .resultgrid.cols-3 { grid-template-columns:1fr; } } .gridcard { background:var(--panel); border:1px solid var(--border); border-radius:12px; cursor:pointer; display:flex; flex-direction:column; align-self:start; } .gridcard:hover { border-color:var(--accent); } .gridcard .gc-body { padding:12px 16px; } .gridcard .gc-t { display:flex; align-items:center; gap:8px; } .gridcard .gc-t b { font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gridcard .gc-t time { font-size:13px; color:var(--text-3); flex-shrink:0; } .gridcard .gc-t .gc-btns { margin-left:auto; display:flex; gap:6px; flex-shrink:0; } .gridcard .gc-t .icon-btn { width:30px; height:30px; } .gridcard p { color:var(--text-2); font-size:13.5px; margin-top:2px; } .gridcard .tags { margin-top:6px; display:flex; gap:5px; flex-wrap:wrap; } /* PDF-Seiten in der Kachel: weiß, gestapelt und scrollbar */ .gridcard .imgwrap { position:relative; background:var(--page-bg); border-radius:0 0 11px 11px; overflow-y:auto; overscroll-behavior:contain; } .resultgrid.cols-2 .imgwrap { max-height:960px; } .resultgrid.cols-3 .imgwrap { max-height:640px; } .gridcard .imgwrap img { width:100%; display:block; } .gridcard .imgwrap img + img { border-top:1px solid #d8d8d8; } .gridcard .imgwrap .stamp { top:20px; right:16px; } /* Formular-Validierung (AJAX, analog bpm.js im alten Stack) */ .invalid-feedback { display:none; color:var(--red); font-size:13px; margin-top:3px; } .is-invalid { border-color:var(--red) !important; } .is-invalid + .invalid-feedback, .is-invalid ~ .invalid-feedback { display:block; } .form-alert { display:none; border:1px solid rgba(var(--red-rgb),.4); background:rgba(var(--red-rgb),.07); color:var(--text-2); border-radius:8px; padding:10px 12px; margin-bottom:12px; font-size:14px; } .form-alert.show { display:block; } /* Schalter mit echtem Checkbox-Input */ .swfield { display:flex; align-items:center; gap:10px; margin-bottom:12px; cursor:pointer; color:var(--text-2); font-size:14px; } .swfield input { display:none; } .swfield input:checked + .switch { background:var(--green); } .swfield input:checked + .switch::after { left:18px; } /* Status-Icons in Tabellen */ .check-on { color:var(--green); } .check-off { color:var(--red); } .lowprio { color:var(--amber); cursor:help; } .ocr-term { font-family:ui-monospace,monospace; font-size:13px; background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:2px 8px; color:var(--text-2); } /* Tabellen-Karten wie im alten Theme: nicht abgerundet */ /* Notfalls scrollt die Tabelle in ihrer Karte — vorher schob eine zu breite Tabelle die gesamte Seite in den horizontalen Überlauf. */ .card.card-table { border-radius:0; border-left:none; border-right:none; overflow-x:auto; } /* ---------- Erste Schritte (Onboarding-Checkliste, Schreibtisch) ---------- */ .onboard-progress { height:3px; background:var(--panel-2); } .onboard-progress > div { height:100%; background:var(--accent); transition:width .3s; } .onboard-intro { color:var(--text-2); font-size:14px; margin:0 0 14px; } .onboard-steps { list-style:none; margin:0; padding:0; display:grid; gap:8px; } .onboard-step { display:grid; grid-template-columns:36px 1fr auto; gap:12px; align-items:center; padding:12px 14px; border:1px solid var(--border); border-radius:10px; background:var(--bg); } .onboard-step.done { opacity:.72; } .onboard-step .os-icon { display:grid; place-items:center; } .onboard-step .os-icon .material-symbols-outlined { color:var(--green); font-size:26px; vertical-align:0; } .onboard-step .os-num { width:28px; height:28px; border-radius:50%; background:rgba(var(--accent-rgb),.15); color:var(--accent); font-weight:600; font-size:13px; display:grid; place-items:center; } .onboard-step .os-title { font-weight:600; font-size:14.5px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .onboard-step .os-title .material-symbols-outlined { font-size:18px; color:var(--text-2); vertical-align:0; } .onboard-step .os-text { color:var(--text-2); font-size:13.5px; margin-top:2px; } .onboard-step .os-action .btn { white-space:nowrap; } .onboard-foot { margin-top:14px; color:var(--text-3); font-size:13px; display:flex; align-items:center; gap:6px; } .onboard-foot .material-symbols-outlined { font-size:17px; vertical-align:0; } .onboard-foot a { color:var(--accent); font-weight:600; } @media (max-width:640px) { .onboard-step { grid-template-columns:32px 1fr; } .onboard-step .os-action { grid-column:2; } } /* Beta-Kennzeichnung im Menü */ .tab .beta-tag { font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:1px 5px; border-radius:4px; background:rgba(var(--amber-rgb),.18); color:var(--amber); } /* ---------- Einstellungen (/setup) ---------- */ .setup-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:16px; align-items:start; } .setup-grid .card.setup-wide { grid-column:1 / -1; } .setup-hint { color:var(--text-2); font-size:13.5px; margin:0 0 14px; line-height:1.5; } .setup-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; } .setup-tags { display:flex; flex-direction:column; gap:4px; } .setup-tags-group { font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-3); margin:10px 0 2px; } .setup-tags-group:first-child { margin-top:0; } .setup-tag { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; cursor:pointer; color:var(--text-2); font-size:14px; border:1px solid transparent; } .setup-tag:hover { background:var(--panel-2); } .setup-tag.on { color:var(--text); } .setup-tag input { display:none; } .setup-tag .material-symbols-outlined { font-size:20px; color:var(--text-3); vertical-align:0; } .setup-tag.on .material-symbols-outlined { color:var(--accent); } .setup-radios { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:10px; margin-bottom:12px; } .setup-radio { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--border); border-radius:10px; cursor:pointer; color:var(--text-2); background:var(--bg); } .setup-radio input { display:none; } .setup-radio .material-symbols-outlined { font-size:26px; color:var(--text-3); vertical-align:0; flex-shrink:0; } .setup-radio small { color:var(--text-3); font-size:12.5px; } .setup-radio.on { border-color:var(--accent); color:var(--text); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12); } .setup-radio.on .material-symbols-outlined { color:var(--accent); } .setup-consent { border:1px solid rgba(var(--amber-rgb),.4); background:rgba(var(--amber-rgb),.06); border-radius:10px; padding:10px 12px; margin-bottom:4px; }