/* ============================================================ * ⚠⚠⚠ Riegel: `hidden` muss auch wirklich verstecken (04.09.2026) * ------------------------------------------------------------ * Das Attribut `hidden` wirkt nur über eine Regel des BROWSERS * (`[hidden]{display:none}`) — und die verliert gegen JEDE Regel aus dieser * Datei, ganz gleich wie unspezifisch. Wer also `display` auf eine Klasse * setzt, hat `hidden` für alle Elemente dieser Klasse stillgelegt. * * Genau so aufgeschlagen: `historie.html` blendet den Knopf „Verlauf leeren" * über `kb.hidden = true` aus, wenn das Recht `cap:historie_leeren` fehlt. * Der Knopf ist ein `.uq-act`, und `.uq-act` setzt `display:inline-flex`. * Gemessen am 04.09.: Attribut gesetzt, `getComputedStyle` meldet `flex`, * das Feld ist 151 × 37 px groß — der Knopf stand sichtbar da, obwohl * niemand das Recht hatte. * * ⚠⚠⚠ Im Code fällt das NIE auf: `element.hidden` liefert brav `true`. Der * Zustand stimmt, nur die Darstellung nicht. Nachweisen lässt es sich allein * über `getComputedStyle()` oder `getClientRects().length`. * * Die eine Zeile schließt das für das ganze Produkt. Sprengweite vorher * gemessen (Startseite, crm-leads, faktura-rechnungsausgang): von 11 bis 35 * Elementen mit `hidden` war je genau EINES trotzdem sichtbar — `#uqGuideDots`, * leer und 0 × 0. Es geht also nichts verloren, was heute jemand sieht. * ============================================================ */ [hidden]{display:none!important} /* ============================================================ * Markenschrift (Paket 6, Schritt 3, 26.08.2026) * ------------------------------------------------------------ * Befund des Rollen-Durchblicks (Designer, KRITISCH): „Der Font-Stack nennt * Inter an erster Stelle, aber es existiert kein @font-face und kein * Webfont-Link - Inter wird nie ausgeliefert. Auf Windows rendert Segoe UI, * auf macOS Arial; die im CSS verwendeten Gewichte 650/750/760/800/850/900 * existieren in diesen Fallbacks nicht und werden synthetisch verfaelscht." * * Jetzt liegt Inter als VARIABLE woff2 (48 KB, Gewichtsachse 100-900) im * eigenen Ordner. Damit existiert jedes im Produkt verwendete Gewicht * wirklich - auch 650 und 750. Die Skala musste deshalb NICHT eingedampft * werden; sie war nie falsch, nur nie ausgeliefert. * * Selbst gehostet und nicht ueber Google Fonts: Ein Aufruf bei Google * uebertraegt die IP jedes Nutzers in die USA - fuer ein deutsches * B2B-Produkt ein vermeidbares Datenschutzthema. * * ⚠ font-display:swap zeigt zuerst den Fallback und tauscht dann. Das ist * gewollt: lieber sofort lesbarer Text als ein leeres Fenster. * ⚠ Die Marke ?v=inter1 ist EIGEN und haengt NICHT an der App-Version: der * Service Worker cacht nur ?v=-Adressen offline, aber die Schriftdatei * aendert sich praktisch nie. Nur bei einem echten Schriftwechsel * hochzaehlen - hier UND im preload in index.html. * ============================================================ */ @font-face{ font-family:'Inter'; font-style:normal; /* ⚠ Das ist die GEWICHTSACHSE der variablen Schrift, kein Element-Gewicht: zwei Zahlen, von–bis. Der Token-Sweep vom 06.09.2026 hat die 100 hier zunaechst auf 400 gerundet und der Schrift damit die untere Haelfte ihrer Achse genommen — gefunden von `server/test-schrift.mjs`. Nicht anfassen. */ font-weight:100 900; font-display:swap; src:url('../fonts/inter-variable.woff2?v=inter1') format('woff2'); } :root{ --nav:#071f3f;--nav2:#0b2c58;--blue:#1769ff;--blue2:#0f55d8;--teal:#12c7c0;--bg:#f5f8fc;--card:#ffffff;--soft:#eef5ff;--line:#dce6f2;--text:#102033;--muted:#64748b;--success:#12b981;--warn:#f59e0b;--danger:#ef4444;--radius:18px;--shadow:0 18px 45px rgba(15,40,80,.08);--shadow2:0 10px 24px rgba(23,105,255,.12); --topbar:#ffffff;--sidebar-bg:linear-gradient(180deg,var(--nav),#06172f);--sidebar-text:#cfe1fb;--app-pattern:none;--app-pattern-size:auto;--uq-sidebar-w:214px } *{box-sizing:border-box} body{margin:0;font-family:'Inter','Segoe UI',Roboto,Arial,sans-serif;background-color:var(--bg);background-image:var(--app-pattern);background-size:var(--app-pattern-size);background-attachment:fixed;color:var(--text)} .login-bg{min-height:100vh;background:radial-gradient(circle at 20% 20%,rgba(18,199,192,.18),transparent 28%),radial-gradient(circle at 80% 10%,rgba(23,105,255,.20),transparent 32%),linear-gradient(135deg,#f7fbff,#eef6ff);display:grid;place-items:center;padding:28px} .login-card{width:min(1080px,100%);display:grid;grid-template-columns:1.1fr .9fr;background:rgba(255,255,255,.82);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.9);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}.login-hero{padding:58px;background:linear-gradient(135deg,var(--nav),var(--nav2));color:#fff;position:relative}.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:24px}.logo{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--teal));display:grid;place-items:center;box-shadow:0 8px 18px rgba(18,199,192,.25)}.login-hero h1{font-size:46px;line-height:1.05;margin:80px 0 18px}.login-hero p{color:#d9e8ff;font-size:17px;max-width:520px}.mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:38px}.mini{padding:16px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(255,255,255,.08)}.login-form{padding:58px}.login-form h2{font-size:30px;margin:0 0 8px}.field{margin:18px 0}.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:8px}.input,select,textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:13px 14px;background:#fff;color:var(--text);outline:none}.input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(23,105,255,.10)}.btn{border:0;border-radius:12px;padding:12px 16px;background:var(--blue);color:#fff;font-weight:700;cursor:pointer;box-shadow:var(--shadow2);transition:.18s}.btn:hover{transform:translateY(-1px);background:var(--blue2)}.btn.secondary{background:#fff;color:var(--blue);border:1px solid var(--line);box-shadow:none}.btn.ghost{background:transparent;color:var(--muted);box-shadow:none}.app{display:none;min-height:100vh}.topbar{height:72px;background:var(--topbar);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:18px;padding:0 24px;position:sticky;top:0;z-index:10} /* Topbar responsive (Fix 11.07.2026): zwischen Mobil- und Full-Desktop-Breite (~720–1200px) lief die Leiste über (faktische Mindestbreite ~1198px → Seiten-H-Scroll, Ausloggen außerhalb). Lösung: Suche schrumpfbar + Umbruch unterhalb 1200px (Muster der bestehenden 720px-Regel). */ .gsearch-wrap{flex:1 1 220px;min-width:140px;display:flex} .gsearch-wrap .search{min-width:0} @media(max-width:1200px){.topbar{height:auto;min-height:72px;flex-wrap:wrap;row-gap:8px;padding:10px 16px}}.tenant{display:flex;gap:10px;align-items:center;background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:8px 12px;font-size:13px}.search{flex:1;max-width:520px}.iconbtn{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--muted);cursor:pointer}.shell{display:grid;grid-template-columns:var(--uq-sidebar-w,214px) 1fr;min-height:calc(100vh - 72px)}.sidebar{background:var(--sidebar-bg);color:var(--sidebar-text);padding:18px 12px;position:sticky;top:72px;height:calc(100vh - 72px);overflow:auto}.nav-item{display:flex;align-items:center;gap:12px;padding:11px 12px;margin:3px 0;border-radius:12px;cursor:pointer;transition:.15s;font-size:14px}.nav-item:hover,.nav-item.active{background:rgba(255,255,255,.10);color:#fff}.nav-item.active{box-shadow:inset 3px 0 0 var(--teal)}.main{padding:26px;overflow:hidden}.screen{display:none}.screen.active{display:block}.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:22px}.crumb{font-size:13px;color:var(--muted);margin-bottom:8px}.page-head h1{font-size:30px;margin:0}.subtitle{color:var(--muted);margin-top:6px}.layout-with-context{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px}.grid{display:grid;gap:18px}.cards{grid-template-columns:repeat(4,minmax(0,1fr))}.cards3{grid-template-columns:repeat(3,minmax(0,1fr))}.cards2{grid-template-columns:repeat(2,minmax(0,1fr))}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;transition:.18s}.card:hover{transform:translateY(-3px);box-shadow:var(--shadow2);border-color:#bcd6f7}.kpi .label{color:var(--muted);font-size:13px}.kpi .value{font-size:30px;font-weight:800;margin-top:8px}.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 10px;font-size:12px;background:var(--soft);color:var(--blue);font-weight:700}.pill.ok{background:#e8fbf5;color:#059669}.pill.warn{background:#fff7e6;color:#b45309}.pill.bad{background:#fff1f2;color:#be123c}.tabs{display:flex;gap:8px;overflow:auto;margin-bottom:16px}.tab{padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--muted);font-weight:700;font-size:13px}.tab.active{border-color:var(--blue);color:var(--blue);background:#eef5ff}.table{width:100%;border-collapse:separate;border-spacing:0 10px}.table th{text-align:left;color:var(--muted);font-size:12px;font-weight:800;padding:0 12px}.table td{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 12px;font-size:14px}.table td:first-child{border-left:1px solid var(--line);border-radius:14px 0 0 14px}.table td:last-child{border-right:1px solid var(--line);border-radius:0 14px 14px 0}.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}.chart{height:190px;border-radius:16px;background:linear-gradient(180deg,#f7fbff,#fff);border:1px solid var(--line);position:relative;overflow:hidden}.chart:before{content:"";position:absolute;inset:30px 18px;background:linear-gradient(135deg,transparent 48%,rgba(23,105,255,.20) 49%,rgba(23,105,255,.20) 51%,transparent 52%),repeating-linear-gradient(0deg,transparent,transparent 31px,#edf2f7 32px)}.bars{display:flex;align-items:end;gap:12px;height:150px;padding:24px}/* ⚠⚠ KEIN `flex:1` hier: in einer Spalte ersetzt flex-basis die Höhe, und jede eigene height-Angabe der Balken wird wirkungslos — alle stehen dann gleich hoch. Genau so sah das Umsatzdiagramm im CRM-Cockpit aus (12.08.2026). Breite ja, Höhe nein. */ .bar{flex:1 1 auto;align-self:flex-end;border-radius:10px 10px 0 0;background:linear-gradient(180deg,var(--blue),var(--teal));min-height:28px;opacity:.88}.context{position:sticky;top:96px;height:max-content}.org{display:flex;gap:16px;align-items:center;overflow:auto;padding:8px}.node{min-width:155px;text-align:center;border:1px solid var(--line);border-radius:16px;background:#fff;padding:14px;box-shadow:var(--shadow)}.arrow{color:var(--blue);font-weight:800}.profile-head{display:flex;gap:18px;align-items:center}.avatar{width:62px;height:62px;border-radius:16px;background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;display:grid;place-items:center;font-weight:800;font-size:22px}.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}.day{min-height:92px;border:1px solid var(--line);border-radius:16px;background:#fff;padding:10px}.event{margin-top:8px;border-radius:8px;padding:6px 8px;background:#eef5ff;color:var(--blue);font-size:12px}.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.lane{background:#eef4fb;border-radius:16px;padding:12px;min-height:320px}.lane h3{font-size:14px;margin:4px 4px 12px}.ticket{background:#fff;border:1px solid var(--line);border-radius:16px;padding:13px;margin-bottom:10px}.planner{display:grid;grid-template-columns:180px repeat(5,1fr);gap:8px}.slot,.tech{background:#fff;border:1px solid var(--line);border-radius:12px;min-height:72px;padding:10px;font-size:13px}.tech{font-weight:800;background:var(--soft)}.phone{width:360px;max-width:100%;margin:auto;border:12px solid #081f3f;border-radius:16px;background:#f6f9fd;padding:18px;box-shadow:var(--shadow)}.phone .mobile-card{background:#fff;border-radius:16px;padding:16px;margin:12px 0;border:1px solid var(--line)}.docview{display:grid;grid-template-columns:1fr 330px;gap:18px}.preview{height:560px;border-radius:16px;background:linear-gradient(180deg,#fff,#eef5ff);border:1px solid var(--line);display:grid;place-items:center;color:var(--muted)}.flow{display:flex;align-items:center;gap:14px;overflow:auto;padding:20px}.flowbox{min-width:150px;border:1px solid var(--line);border-radius:16px;background:#fff;padding:18px;text-align:center;box-shadow:var(--shadow)}.settings-list{display:grid;gap:12px}.setting{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:16px;background:#fff;padding:14px} .finance-nav{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}.finance-nav button{border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:999px;padding:10px 14px;font-weight:700;cursor:pointer}.finance-nav button.active{background:var(--soft);border-color:var(--blue);color:var(--blue)}.finance-panel{display:none}.finance-panel.active{display:block}.split-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.metric-row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.metric-row:last-child{border-bottom:0}.account-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);font-size:12px} .invoice-dropzone{border:2px dashed #9fc3ff;border-radius:16px;background:linear-gradient(180deg,#f7fbff,#eef6ff);padding:26px;text-align:center;transition:.2s;cursor:pointer;position:relative;overflow:hidden}.invoice-dropzone:hover,.invoice-dropzone.dragover{border-color:var(--blue);background:#eaf3ff;transform:translateY(-1px)}.invoice-dropzone input{position:absolute;inset:0;opacity:0;cursor:pointer}.drop-icon{width:58px;height:58px;border-radius:16px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;margin:0 auto 12px;font-size:28px;box-shadow:var(--shadow2)}.drop-meta{font-size:12px;color:var(--muted);margin-top:8px}.ocr-progress{height:9px;background:#e8eef7;border-radius:999px;overflow:hidden;margin-top:14px;display:none}.ocr-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--teal));transition:width .35s}.invoice-capture{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.85fr);gap:18px;margin-bottom:18px}.invoice-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.invoice-form-grid .field{margin:0}.invoice-form-grid .full{grid-column:1/-1}.file-chip{display:none;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;text-align:left}.file-chip.visible{display:flex}.ocr-status{display:none;margin-top:12px}.ocr-status.visible{display:block}.extraction-note{font-size:12px;color:var(--muted);line-height:1.5;margin-top:10px}.invoice-preview{min-height:355px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,#fff,#f2f6fb);display:flex;align-items:center;justify-content:center;padding:18px;color:var(--muted);text-align:center}.invoice-preview iframe,.invoice-preview img{width:100%;height:355px;border:0;border-radius:12px;object-fit:contain;background:#fff}.invoice-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px} @media(max-width:1100px){.shell{grid-template-columns:82px 1fr}.sidebar .label{display:none}.cards{grid-template-columns:repeat(2,1fr)}.layout-with-context,.docview{grid-template-columns:1fr}.context{position:static}.login-card{grid-template-columns:1fr}.login-hero h1{margin-top:40px}.kanban,.planner{grid-template-columns:1fr}.planner .slot,.planner .tech{min-height:auto}} @media(max-width:720px){.split-list{grid-template-columns:1fr}.invoice-capture{grid-template-columns:1fr}.invoice-form-grid{grid-template-columns:1fr}.invoice-form-grid .full{grid-column:auto}.topbar{height:auto;flex-wrap:wrap;padding:14px}.shell{display:block}.sidebar{height:auto;position:static;display:flex;overflow:auto}.main{padding:16px}.cards,.cards2,.cards3{grid-template-columns:1fr}.page-head{display:block}.calendar{grid-template-columns:1fr}.login-hero,.login-form{padding:30px}.login-hero h1{font-size:34px}.mini-grid{grid-template-columns:1fr}} /* --- Formularfelder: einzeilige Eingaben nicht unnötig breit ziehen ---------- Systemweit für alle Module (regulär, Einstellungen, mobil – alle rendern in #moduleHost). Niemand hat einen so langen Namen, dass ein Feld die halbe Bildschirmbreite braucht: einzeilige Text-/Auswahlfelder bekommen eine sinnvolle Maximalbreite. Grid-Spalten bleiben unverändert, das Feld steht nur links in seiner Zelle statt sie voll auszufüllen. Tunbar über --uq-field-max. Ausnahmen siehe unten. */ .module-host input:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]):not([type=reset]):not([type=image])), .module-host select{max-width:var(--uq-field-max,460px)} /* Ausnahmen – behalten volle Breite: • Composite-Felder (Eingabe direkt gefolgt von Button: Datums-/Auswahl-Picker), sonst würde sich der Button vom Feld lösen • Tabellen-Inline-Felder (behalten ihre Spaltenbreite) • bewusst breite Felder: Attribut data-fieldwide setzen */ .module-host input:has(+ button), .module-host td input,.module-host td select,.module-host th input,.module-host th select, .module-host [data-fieldwide],.module-host [data-fieldwide] input,.module-host [data-fieldwide] select{max-width:none} /* Einheitliches animiertes Urqivo-Logo */ .urqivo-logo-mark{width:42px;height:42px;display:inline-grid;place-items:center;flex:0 0 auto} /* translateZ(0) = eigene Compositing-Ebene (Fix 15.07.2026): ohne sie rundet Chrome beim Neurastern der drop-shadow-Filter pro Animationsframe die Logo-Position neu -> Subpixel-Zittern */ .urqivo-logo-mark svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 10px 18px rgba(36,87,245,.18));will-change:transform;transform:translateZ(0)} .urqivo-logo-mark .base-line{fill:none;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;opacity:.98} .urqivo-logo-mark .base-line.top{stroke:#1f73eb} .urqivo-logo-mark .base-line.left{stroke:#2256d6} .urqivo-logo-mark .base-line.right{stroke:#18b8b3} .urqivo-logo-mark .base-line.bottom{stroke:#1eb4d1} .urqivo-logo-mark .flow-line{fill:none;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:18 92;animation:urqivoDataFlow 2.45s linear infinite;filter:drop-shadow(0 0 8px rgba(25,179,148,.75))} .urqivo-logo-mark .flow-line.blue{stroke:#67b5ff;filter:drop-shadow(0 0 8px rgba(36,87,245,.65))} .urqivo-logo-mark .flow-line.teal{stroke:#9ff9ee} .urqivo-logo-mark .flow-line.delay{animation-delay:.35s} .urqivo-logo-mark .node{fill:#1f73eb}.urqivo-logo-mark .node.dark{fill:#173b83}.urqivo-logo-mark .node.teal{fill:#18b8b3}.urqivo-logo-mark .node.light{fill:#27b8c6}.urqivo-logo-mark .node.bottom-node{fill:#214fd3} .urqivo-logo-mark .core{fill:#2257d8;opacity:1} @keyframes urqivoDataFlow{to{stroke-dashoffset:-110}} .login-hero .urqivo-logo-mark{width:48px;height:48px}.topbar .urqivo-logo-mark{width:40px;height:40px}.phone .urqivo-logo-mark{width:38px;height:38px} /* Firmenlogo ersetzt das Urqivo-Logo in der Topbar: feste Höhe = Logo-Mark (40px) für stabiles Layout, width:auto + object-fit:contain = aspektgetreu (kein Qualitaetsverlust/Verzerren); max-width verhindert Ueberschneidungen */ #appBrand{cursor:pointer} #appBrand.has-company-logo{gap:0} #appBrand .company-logo{height:40px;width:auto;max-width:220px;object-fit:contain;display:block;image-rendering:auto} /* Rollenbasierter Einstieg, Gruppendashboard und aufklappbare Modulnavigation */ .login-role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 18px}.role-card{border:1px solid var(--line);border-radius:16px;padding:13px;background:#fff;cursor:pointer;transition:.18s;text-align:left}.role-card:hover{border-color:#bcd6f7;transform:translateY(-3px);box-shadow:var(--shadow2)}.role-card.active{border-color:var(--blue);background:var(--soft);box-shadow:0 0 0 3px rgba(23,105,255,.08)}.role-card b{display:block;font-size:13px}.role-card span{display:block;font-size:11px;color:var(--muted);margin-top:4px;line-height:1.35}.license-badge{display:inline-flex;align-items:center;gap:6px;margin-top:7px;padding:4px 8px;border-radius:999px;background:#eef5ff;color:var(--blue);font-size:10px;font-weight:800} .topbar .tenant{cursor:pointer}.role-indicator{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);white-space:nowrap}.role-dot{width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(18,199,192,.12)} .sidebar{padding:12px 10px}.nav-home{margin-bottom:9px}.module-group{margin:4px 0}.module-head{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:12px;cursor:pointer;color:#d8e8ff;font-size:14px;font-weight:700;transition:.15s}.module-head:hover,.module-group.open>.module-head,.module-head.active{background:rgba(255,255,255,.10);color:#fff}.module-head .chev{margin-left:auto;font-size:12px;transition:.2s}.module-group.open .chev{transform:rotate(90deg)}.module-sub{display:none;padding:4px 0 7px 37px}.module-group.open .module-sub{display:block}.sub-item{position:relative;padding:7px 10px;border-radius:8px;cursor:pointer;color:#b9cdea;font-size:12.5px;line-height:1.25}.sub-item:hover,.sub-item.active{background:rgba(255,255,255,.08);color:#fff}.sub-label{padding:9px 10px 4px;color:#87a0c1;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.nav-separator{height:1px;background:rgba(255,255,255,.09);margin:9px 7px} .group-hero{background:linear-gradient(135deg,#071f3f,#0b2c58);color:#fff;border-radius:16px;padding:24px;box-shadow:var(--shadow);margin-bottom:20px;position:relative;overflow:hidden}.group-hero:after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;right:-90px;top:-120px;background:radial-gradient(circle,rgba(18,199,192,.32),transparent 68%)}.group-hero .subtitle{color:#d8e8ff}.scope-bar{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.scope-pill{padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);font-size:12px}.company-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.company-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow);cursor:pointer;transition:.18s;position:relative;overflow:hidden}.company-card:hover{transform:translateY(-3px);border-color:#bcd6f7;box-shadow:var(--shadow2)}.company-card .company-icon{width:44px;height:44px;border-radius:12px;background:var(--soft);display:grid;place-items:center;font-size:22px;margin-bottom:13px}.company-card h3{margin:0 0 5px}.company-meta{color:var(--muted);font-size:12px;line-height:1.5}.company-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}.company-kpi{padding:9px;border-radius:12px;background:#f7faff;text-align:center}.company-kpi b{display:block;font-size:15px}.company-kpi span{font-size:10px;color:var(--muted)}.company-open{display:flex;align-items:center;justify-content:space-between;color:var(--blue);font-size:12px;font-weight:800;margin-top:12px}.division-title{display:flex;align-items:center;justify-content:space-between;margin:24px 0 12px}.division-title h2{margin:0;font-size:20px}.back-to-group{display:none}.company-mode .back-to-group{display:inline-flex}.company-mode .group-only{display:none}.access-note{padding:12px 14px;border-radius:12px;background:#fff7e6;color:#92400e;border:1px solid #fde6b5;font-size:12px;margin-bottom:16px} @media(max-width:1100px){.company-grid{grid-template-columns:repeat(2,1fr)}.module-sub{padding-left:8px}.sub-label,.sub-item{display:none}.module-group.open .sub-label,.module-group.open .sub-item{display:block}} /* Hover-Aufklappen nur auf echten Hover-Geräten (Maus). Auf Touch klebt :hover am letzten Tippunkt und ließ die Sidebar bei jedem Tipp auf-/zuspringen. */ @media(max-width:1100px) and (hover:hover) and (pointer:fine){.sidebar:hover{width:270px;position:fixed;z-index:30;left:0}.sidebar:hover .label{display:inline}.sidebar:hover .module-sub{padding-left:37px}} /* Tablets/Touch: Sidebar-Schiene öffnet per Antippen als Overlay (Klasse sidebar-touch-open via app.js). !important + hohe Spezifität, damit sie auch die Modul-Workspace-Regeln aus module-loader.js übersteuert. */ @media(max-width:1100px){ body #appScreen .sidebar.sidebar-touch-open{width:270px !important;min-width:270px !important;max-width:270px !important;position:fixed !important;left:0;z-index:30;padding:12px 10px !important;overflow-y:auto !important;overflow-x:hidden !important;box-shadow:0 24px 60px rgba(7,31,63,.28)} body #appScreen .sidebar.sidebar-touch-open .label{display:inline} body #appScreen .sidebar.sidebar-touch-open .module-sub{padding-left:37px} body #appScreen .sidebar.sidebar-touch-open::after{display:none !important} body #appScreen .sidebar.sidebar-touch-open > *{opacity:1 !important;visibility:visible !important;pointer-events:auto !important} body #appScreen .sidebar.sidebar-touch-open.urqivo-sidebar{width:320px !important;min-width:320px !important;max-width:320px !important} body #appScreen .sidebar.sidebar-touch-open.urqivo-sidebar .sidebar-label,body #appScreen .sidebar.sidebar-touch-open.urqivo-sidebar .sidebar-chev{display:block} body #appScreen .sidebar.sidebar-touch-open.urqivo-sidebar .sidebar-glyph:empty{display:none} body #appScreen .sidebar.sidebar-touch-open.urqivo-sidebar .module-sub{padding-left:14px} } @media(max-width:720px){.login-role-grid{grid-template-columns:1fr}.company-grid{grid-template-columns:1fr}.role-indicator{display:none}.sidebar{display:block;white-space:normal}.module-sub{padding-left:20px}.sub-label,.sub-item{display:block}} .logout-btn{border:1px solid #fecaca;background:#fff;color:#be123c;border-radius:12px;padding:10px 13px;font-weight:800;cursor:pointer}.note-fab{position:fixed;right:24px;bottom:24px;width:54px;height:54px;border:0;border-radius:16px;background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;font-size:23px;display:none;place-items:center;cursor:pointer;box-shadow:0 16px 34px rgba(23,105,255,.28);z-index:40}.note-panel{position:fixed;right:24px;bottom:90px;width:min(390px,calc(100vw - 32px));max-height:calc(100vh - 120px);overflow:auto;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px rgba(7,31,63,.22);padding:16px;z-index:41;display:none}.note-panel.open{display:block}.note-panel-head,.note-actions,.note-entry-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.note-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.note-form-grid .full{grid-column:1/-1}.note-panel label{display:block;font-size:11px;font-weight:800;color:var(--muted);margin-bottom:5px}.note-panel textarea{min-height:130px}.notes-list{display:grid;gap:12px}.note-entry{border:1px solid var(--line);border-radius:16px;padding:15px;background:#fff}.note-entry.done{opacity:.72;background:#f8fafc}.note-entry.done p{text-decoration:line-through}.note-badges,.note-entry-actions,.note-tools{display:flex;gap:8px;flex-wrap:wrap}.note-badges{margin:8px 0}.note-badge{padding:5px 8px;border-radius:999px;background:var(--soft);color:var(--blue);font-size:11px;font-weight:800}.note-badge.high{background:#fff1f2;color:#be123c}.note-badge.medium{background:#fff7e6;color:#b45309}.note-badge.low{background:#e8fbf5;color:#047857}.note-entry p{white-space:pre-wrap}.note-entry-actions{margin-top:12px}.note-mini-btn{border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 9px;cursor:pointer;font-size:12px;font-weight:700}.note-delete{border:0;background:transparent;color:var(--danger);cursor:pointer;font-weight:800}.note-recipient{font-size:12px;color:var(--muted);margin-top:6px}.note-tools{margin-bottom:14px}.note-tools select,.note-tools input{width:auto;min-width:150px}.note-empty{padding:24px;border:1px dashed var(--line);border-radius:16px;text-align:center;color:var(--muted)} @media(max-width:720px){.note-form-grid{grid-template-columns:1fr}.note-form-grid .full{grid-column:auto}.note-panel{right:16px;bottom:82px}.note-fab{right:16px;bottom:16px}.note-tools select,.note-tools input{width:100%}} .note-badge.is-quick{background:#eef2ff;color:#4338ca}.note-badge.is-normal{background:#ecfeff;color:#0e7490}.note-title{margin:8px 0 4px;font-size:15px;font-weight:800;color:var(--ink,#102033)} .full-note-overlay{position:fixed;inset:0;z-index:60;background:rgba(7,31,63,.45);display:none;align-items:center;justify-content:center;padding:20px}.full-note-overlay.open{display:flex} .full-note-card{width:min(680px,100%);max-height:90vh;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 80px rgba(7,31,63,.3);padding:18px} .full-note-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.full-note-head h3{font-size:19px} .full-note-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.full-note-grid .full{grid-column:1/-1}.full-note-grid label{display:block;font-size:11px;font-weight:800;color:var(--muted);margin-bottom:5px}.full-note-grid textarea{min-height:140px;width:100%}.full-note-grid .input,.full-note-grid select,.full-note-grid textarea{width:100%} .full-note-foot{display:flex;align-items:center;gap:10px;margin-top:16px} @media(max-width:720px){.full-note-grid{grid-template-columns:1fr}.full-note-grid .full{grid-column:auto}} /* Sidebar-Personalisierung: Favoriten-Stern + Drag-Reihenfolge */ .sidebar .sub-item{display:flex;align-items:center;justify-content:space-between;gap:8px} .sidebar .sub-item .sub-item-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer} .sidebar .nav-fav{border:0;background:transparent;color:#9fb6da;cursor:pointer;font-size:14px;line-height:1;padding:2px 4px;border-radius:8px;opacity:.55;flex:0 0 auto} .sidebar .sub-item:hover .nav-fav{opacity:1} .sidebar .nav-fav.is-fav{color:#ffd34d;opacity:1} /* Module auf der Stufe „Vorschau": sichtbar, aber innen tot. Gedimmt plus Auge — ⚠ NICHT durchgestrichen und nicht so blass, dass es unlesbar wird: der Eintrag ist anklickbar und soll gelesen werden können, er verspricht nur nichts. */ .sidebar .sub-item.is-vorschau .sub-item-text{opacity:.62;font-style:italic} .sidebar .sub-item.is-vorschau:hover .sub-item-text{opacity:.85} .sidebar .sub-item-vorschau{flex:0 0 auto;opacity:.62;color:#9fb6da} .sidebar .sub-item.is-vorschau:hover .sub-item-vorschau{opacity:.9} .urqivo-sidebar .sub-item.is-vorschau .sub-item-text{opacity:.62;font-style:italic} .urqivo-sidebar .sub-item-vorschau{flex:0 0 auto;opacity:.62} .sidebar .nav-fav:hover{background:rgba(255,255,255,.12)} /* Sidebar: Auto-Einklappen deaktiviert → bleibt dauerhaft offen, auch im Modul-Workspace */ body.uq-sidebar-no-autocollapse #appScreen.module-workspace-active .shell{grid-template-columns:var(--uq-sidebar-w,214px) minmax(0,1fr) !important} body.uq-sidebar-no-autocollapse #appScreen.module-workspace-active .sidebar{width:var(--uq-sidebar-w,214px) !important;min-width:var(--uq-sidebar-w,214px) !important;max-width:var(--uq-sidebar-w,214px) !important;padding:18px 12px !important;overflow:auto !important;cursor:default} body.uq-sidebar-no-autocollapse #appScreen.module-workspace-active .sidebar::after{display:none !important} body.uq-sidebar-no-autocollapse #appScreen.module-workspace-active .sidebar > *{opacity:1 !important;visibility:visible !important;pointer-events:auto !important} body.uq-sidebar-no-autocollapse #appScreen.module-workspace-active .main{padding-left:26px !important} /* Oberer Navigationsbereich: Auto-Einklappen → im Modul-Workspace schlank, bei Hover voll. Nur auf Hover-Geräten – auf Touch bliebe die Topbar sonst 10px hoch und unerreichbar. */ @media(hover:hover) and (pointer:fine){ body.uq-topbar-autocollapse #appScreen.module-workspace-active .topbar{height:10px;overflow:hidden;padding-top:0;padding-bottom:0;transition:height .24s cubic-bezier(.22,.61,.36,1)} body.uq-topbar-autocollapse #appScreen.module-workspace-active .topbar:hover{height:72px;overflow:visible} } /* ===== Öffnen per Klick statt Hover (body.uq-collapse-click) ===== */ /* Sidebar: Hover klappt NICHT mehr auf (bleibt schlank). Nur auf Hover-Geräten – auf Touch würde der klebende :hover die Sidebar beim Antippen auf 10px kollabieren. */ @media(hover:hover) and (pointer:fine){ body.uq-collapse-click #appScreen.module-workspace-active:has(.sidebar:hover) .shell{grid-template-columns:10px minmax(0,1fr) !important} body.uq-collapse-click #appScreen.module-workspace-active .sidebar:hover{width:10px !important;min-width:10px !important;max-width:10px !important;padding-left:0 !important;padding-right:0 !important;overflow:hidden !important;cursor:pointer !important} body.uq-collapse-click #appScreen.module-workspace-active .sidebar:hover::after{opacity:1 !important} body.uq-collapse-click #appScreen.module-workspace-active .sidebar:hover > *{opacity:0 !important;visibility:hidden !important;pointer-events:none !important} } body.uq-collapse-click #appScreen.module-workspace-active .sidebar{cursor:pointer} /* Sidebar: per Klick geöffnet */ body.uq-collapse-click #appScreen.module-workspace-active.sidebar-clicked-open .shell{grid-template-columns:var(--uq-sidebar-w,214px) minmax(0,1fr) !important} body.uq-collapse-click #appScreen.module-workspace-active.sidebar-clicked-open .sidebar{width:var(--uq-sidebar-w,214px) !important;min-width:var(--uq-sidebar-w,214px) !important;max-width:var(--uq-sidebar-w,214px) !important;padding:12px 10px !important;overflow-y:auto !important;overflow-x:hidden !important;cursor:default} body.uq-collapse-click #appScreen.module-workspace-active.sidebar-clicked-open .sidebar::after{opacity:0 !important} body.uq-collapse-click #appScreen.module-workspace-active.sidebar-clicked-open .sidebar > *{opacity:1 !important;visibility:visible !important;pointer-events:auto !important} /* Toolbar: Hover klappt NICHT mehr auf (nur relevant auf Hover-Geräten) */ @media(hover:hover) and (pointer:fine){ body.uq-collapse-click.uq-topbar-autocollapse #appScreen.module-workspace-active .topbar:hover{height:10px !important;overflow:hidden !important} body.uq-collapse-click #appScreen.topbar-collapsed > .topbar:hover{height:var(--urqivo-topbar-collapsed-height) !important} } body.uq-collapse-click #appScreen.topbar-collapsed > .topbar{cursor:pointer} /* Toolbar: per Klick geöffnet */ body.uq-collapse-click #appScreen.topbar-clicked-open.module-workspace-active .topbar, body.uq-collapse-click #appScreen.topbar-clicked-open > .topbar{height:72px !important;min-height:72px !important;overflow:visible !important;padding:0 24px !important} body.uq-collapse-click #appScreen.topbar-clicked-open > .topbar > *{opacity:1 !important;transform:none !important;pointer-events:auto !important} body.uq-collapse-click #appScreen.topbar-clicked-open > .topbar::after{display:none} /* Sidebar-Komponente aus sidebar.html, in die bestehende App integriert */ .sidebar.urqivo-sidebar{width:auto;min-height:calc(100vh - 72px);padding:14px 10px;background:var(--sidebar-bg,linear-gradient(180deg,var(--nav),#06172f));color:var(--sidebar-text,#f5f9ff)} .urqivo-sidebar .sidebar-item,.urqivo-sidebar .module-head{width:100%;min-height:44px;display:grid;grid-template-columns:42px minmax(0,1fr) 18px;align-items:center;gap:8px;border-radius:12px;padding:8px 10px;color:var(--sidebar-text,#fff);font-size:14px;font-weight:800;line-height:1.1;cursor:pointer;user-select:none} /* Modulzeile ohne feste Icon-Spalte: Flex, damit ohne Emoji der Text ganz links steht */ .urqivo-sidebar .module-head{display:flex} .urqivo-sidebar .sidebar-item:hover,.urqivo-sidebar .module-head:hover,.urqivo-sidebar .sidebar-item.active,.urqivo-sidebar .module-group.open>.module-head,.urqivo-sidebar .module-head.active{background:rgba(125,145,180,.16);color:var(--sidebar-text,#fff)} .urqivo-sidebar .sidebar-icon{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--blue),var(--teal));display:grid;place-items:center;font-size:15px;box-shadow:0 9px 20px rgba(18,199,192,.18)} .urqivo-sidebar .sidebar-code{width:42px;display:flex;align-items:center;justify-content:flex-start;color:var(--sidebar-text,#fff);font-weight:800;letter-spacing:.02em;font-size:13px} /* Optionales Emoji je Bereich; leerer Glyph (kein Emoji gewählt) wird ausgeblendet → nur Text sichtbar */ .urqivo-sidebar .sidebar-glyph{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:22px;font-size:15px;line-height:1} .urqivo-sidebar .sidebar-glyph:empty{display:none} .urqivo-sidebar .sidebar-label{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .urqivo-sidebar .sidebar-chev{flex:0 0 auto;justify-self:end;color:var(--sidebar-text,#fff);font-size:13px;transition:transform .18s ease} .urqivo-sidebar .module-group{margin:4px 0} .urqivo-sidebar .module-sub{display:none;padding:4px 0 8px 14px} .urqivo-sidebar .module-group.open .module-sub{display:block} .urqivo-sidebar .module-group.open .sidebar-chev{transform:rotate(90deg)} .urqivo-sidebar .sub-item{color:var(--sidebar-text,#dcecff);font-size:13px;line-height:1.25;padding:6px 8px;border-radius:8px;cursor:pointer;opacity:.92} .urqivo-sidebar .sub-item:hover,.urqivo-sidebar .sub-item.active{background:rgba(125,145,180,.16);color:var(--sidebar-text,#fff);opacity:1} .urqivo-sidebar .sidebar-spacer{height:8px} @media(max-width:1100px){.urqivo-sidebar .sidebar-label,.urqivo-sidebar .sidebar-chev{display:none}.urqivo-sidebar .sidebar-glyph:empty{display:inline-flex}.urqivo-sidebar .sidebar-glyph:empty::before{content:attr(data-initial);font-weight:800;font-size:12px;letter-spacing:.02em}.urqivo-sidebar .module-sub{padding-left:8px}} /* Hover-Aufklappen der urqivo-Sidebar nur auf Hover-Geräten; auf Touch übernimmt sidebar-touch-open (siehe oben). */ @media(max-width:1100px) and (hover:hover) and (pointer:fine){.sidebar:hover.urqivo-sidebar .sidebar-label,.sidebar:hover.urqivo-sidebar .sidebar-chev{display:block}.sidebar:hover.urqivo-sidebar .sidebar-glyph:empty{display:none}.sidebar:hover.urqivo-sidebar{width:320px}.sidebar:hover.urqivo-sidebar .module-sub{padding-left:14px}} @media(max-width:720px){.sidebar.urqivo-sidebar{width:100%;min-height:auto}.urqivo-sidebar .sidebar-label,.urqivo-sidebar .sidebar-chev{display:block}.urqivo-sidebar .sidebar-glyph:empty{display:none}.urqivo-sidebar .sidebar-label{white-space:normal}.urqivo-sidebar .module-sub{padding-left:16px}} .database-login-link{display:flex;align-items:center;gap:13px;margin-top:16px;padding:14px 15px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,#fff,#f7fbff);color:var(--text);text-decoration:none;transition:.18s;box-shadow:0 8px 20px rgba(15,40,80,.05)} .database-login-link:hover{transform:translateY(-1px);border-color:#9fc3ff;box-shadow:var(--shadow2)} .database-login-icon{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;display:grid;place-items:center;font-size:20px;flex:0 0 auto} .database-login-copy{min-width:0;flex:1}.database-login-copy b{display:block;font-size:14px}.database-login-copy span{display:block;margin-top:4px;color:var(--muted);font-size:12px;line-height:1.35}.database-login-arrow{color:var(--blue);font-size:20px;font-weight:800} /* Integrierter Datenbankbereich */ .database-area-overlay{position:fixed;inset:0;z-index:1000;background:#f5f8fc;display:none} .database-area-overlay.open{display:block} .database-area-frame{width:100%;height:100%;border:0;display:block;background:#f5f8fc} .database-area-close{position:fixed;top:14px;right:18px;z-index:1002;border:1px solid #dce6f2;background:#fff;color:#102033;border-radius:12px;padding:10px 14px;font-weight:800;cursor:pointer;box-shadow:0 10px 24px rgba(15,40,80,.15)} .database-area-close:hover{background:#eef5ff;color:#1769ff} body.database-area-open{overflow:hidden} /* Stabile, automatisch einklappende globale Urqivo-Topbar */ #appScreen{ --urqivo-topbar-height:72px; --urqivo-topbar-collapsed-height:12px; } #appScreen > .topbar{ height:var(--urqivo-topbar-height); min-height:var(--urqivo-topbar-height); overflow:hidden; transition:height .22s ease,min-height .22s ease,padding .22s ease; } /* Bei voller Höhe darf Inhalt überstehen (globale Suche: Ergebnis-Panel klappt nach unten auf). Nur im eingeklappten Zustand bleibt overflow:hidden für die Klapp-Animation. */ #appScreen:not(.topbar-collapsed) > .topbar{overflow:visible} /* Gleicher Takt wie die Seitenleiste: sonst wirkt die Toolbar schneller (05.09.2026). */ #appScreen > .topbar > *{transition:opacity .18s ease,transform .18s ease,visibility .18s ease} #appScreen:not(.topbar-collapsed) > .topbar > *{transition:opacity .2s ease .08s,transform .2s ease .08s,visibility .2s ease .08s} #appScreen.topbar-collapsed > .topbar{ height:var(--urqivo-topbar-collapsed-height); min-height:var(--urqivo-topbar-collapsed-height); padding-top:0; padding-bottom:0; cursor:n-resize; } #appScreen.topbar-collapsed > .topbar > *{ opacity:0; transform:translateY(-10px); pointer-events:none; } /* Uhr-Widget: bei eingeklappter Toolbar komplett ausblenden (die Einblend- Animation mit fill:both hielt sonst opacity:1, sodass die Uhr durchscheint). Außerhalb des Schwebe-Modus – body.uq-zeit-fab lässt die Uhr bewusst schweben. Die Klasse topbar-collapsed wird nur im Desktop-Modus gesetzt (beim Wechsel auf Mobil entfernt der Resize-Handler sie), daher keine Mobil-Sonderregel nötig. */ body:not(.uq-zeit-fab) #appScreen.topbar-collapsed > .topbar > #zeitWidget{ animation:none!important; opacity:0!important; pointer-events:none!important; } #appScreen.topbar-collapsed > .topbar::after{ content:""; position:absolute; left:50%;bottom:3px; width:54px;height:3px;border-radius:999px; background:linear-gradient(90deg,var(--blue),var(--teal)); transform:translateX(-50%); } #appScreen.topbar-collapsed .main{padding-top:6px} #appScreen.topbar-collapsed .sidebar{ top:var(--urqivo-topbar-collapsed-height); height:calc(100vh - var(--urqivo-topbar-collapsed-height)); } #appScreen:not(.topbar-collapsed) .sidebar{ top:var(--urqivo-topbar-height); height:calc(100vh - var(--urqivo-topbar-height)); } @media (hover:none),(pointer:coarse),(max-width:720px){ #appScreen > .topbar,#appScreen.topbar-collapsed > .topbar{height:auto;min-height:0;padding:14px} #appScreen.topbar-collapsed > .topbar > *{opacity:1;transform:none;pointer-events:auto} #appScreen.topbar-collapsed > .topbar::after{display:none} } /* Reduzierte Navigation und vorbereitete Stammdaten-Arbeitsflächen */ .masterdata-workspace{width:100%;min-width:0;padding:0} .masterdata-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px} .masterdata-head h1{margin:0;font-size:28px}.masterdata-head p{margin:7px 0 0;color:var(--muted)} .masterdata-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:18px} .masterdata-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px}.masterdata-toolbar .input{max-width:520px} .masterdata-table-wrap{overflow:auto}.masterdata-empty{text-align:center!important;color:var(--muted);padding:38px 18px!important;border-left:1px solid var(--line)!important;border-right:1px solid var(--line)!important;border-radius:12px!important} .urqivo-sidebar .sidebar-code{font-size:12px;font-weight:800;letter-spacing:.04em} @media(max-width:720px){.masterdata-head{display:block}.masterdata-head .btn{margin-top:14px}.masterdata-toolbar{align-items:stretch;flex-direction:column}.masterdata-toolbar .input{max-width:none}} /* ============================================================ * Einheitliche, hochwertige Aktionsleiste (Anlegen / Bearbeiten / Löschen) * Modulübergreifend: .uq-actionbar + .uq-act (+ Varianten) * ========================================================== */ .uq-actionbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 11px;margin:0;align-self:flex-start;background:linear-gradient(180deg,#ffffff,#f6faff);border:1px solid #e6edf6;border-radius:16px;box-shadow:0 8px 22px rgba(15,40,80,.06)} .uq-act{appearance:none;border:1px solid transparent;border-radius:12px;padding:10px 16px;font:inherit;font-weight:700;font-size:13.5px;line-height:1;color:#fff;cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:transform .12s ease,box-shadow .14s ease,background .14s ease,opacity .12s ease} .uq-act .uq-ico{font-size:15px;line-height:1;display:inline-grid;place-items:center} .uq-act:active{transform:translateY(1px)} .uq-act:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(23,105,255,.28)} .uq-act--primary{background:linear-gradient(180deg,#2f81ff,#1763e6);box-shadow:0 8px 18px rgba(23,99,230,.30)} .uq-act--primary:hover{transform:translateY(-1px);box-shadow:0 11px 24px rgba(23,99,230,.42)} .uq-act--edit{background:#eef4ff;color:#1e4fa8;border-color:#dbe7ff;box-shadow:none} .uq-act--edit:hover{background:#e2ecff;transform:translateY(-1px)} .uq-act--danger{background:#fff2f2;color:#d64545;border-color:#ffd7d7;box-shadow:none} .uq-act--danger:hover{background:#ffe5e5;transform:translateY(-1px)} /* --still: die stille Form des Loeschknopfes fuer ZEILEN in Einstellungslisten. Befund (Paket V2): 36 rote Loeschknoepfe in 21 Einstellungsmasken — in einer Liste mit zehn Zeilen schreien zehn rote Knoepfe, und Rot verliert dadurch seine Bedeutung. Die Farbe kommt erst, wenn die Maus darauf steht: dann ist sie eine Warnung und keine Tapete. ⚠ Zusammen mit --danger benutzen, nie allein — --still setzt nur die Ruhe, --danger die Warnfarbe darunter. */ .uq-act--danger.uq-act--still{background:transparent;border-color:transparent;color:#94a3b8} .uq-act--danger.uq-act--still:hover, .uq-act--danger.uq-act--still:focus-visible{background:#ffe5e5;border-color:#ffd7d7;color:#d64545} /* Ergänzt 31.07.2026: Diese zwei Varianten fehlten im Baukasten, weshalb Module sich eigene Kompakt- und Erfolgsknöpfe gebaut haben (crm-act-sm, cl-act-sm, fk-btn-success …). --sm für Knöpfe in Tabellenzeilen und Karten, --success für bestätigende Aktionen. */ .uq-act--success{background:#e9f9f0;color:#15803d;border-color:#c3ecd3;box-shadow:none} .uq-act--success:hover{background:#d8f3e4;transform:translateY(-1px)} .uq-act--ghost{background:#f1f4f9;color:#475569;border-color:#e2e8f0;box-shadow:none;padding:10px 12px} .uq-act--ghost:hover{background:#e7ecf4} /* ⚠ Die GROESSE steht hinter den Farbvarianten. Vorher stand `--sm` davor, und `--ghost` setzte sein eigenes Polster (10/12) darueber: ein `uq-act uq-act--ghost uq-act--sm` war 34 px hoch statt 26 — `--sm` war an jedem Ghost-Knopf wirkungslos, und genau diese Kombination ist der Kanon des Zeilenknopfes. Bei Gleichstand (0,1,0) gewinnt die spaetere Regel. Gefunden beim Vereinheitlichen der „Öffnen"-Knoepfe (06.09.2026, Paket V2). */ .uq-act--sm{padding:6px 10px;font-size:12px;border-radius:8px;gap:6px} .uq-act:disabled,.uq-act[disabled]{opacity:.42;cursor:not-allowed;box-shadow:none;transform:none} .uq-actionbar-spacer{flex:1 1 auto;min-width:8px} .uq-sel-hint{font-size:12px;color:#64748b;font-weight:600;white-space:nowrap;max-width:300px;overflow:hidden;text-overflow:ellipsis} .uq-sel-hint b{color:#1e4fa8;font-weight:800} .md-app .md-table tbody tr.md-row-selected td{background:var(--soft,#eaf2ff)!important} .md-app .md-table tbody tr.md-row-selected{outline:2px solid var(--blue,#1769ff);outline-offset:-2px} .md-app .md-table tbody tr[data-row-id]{cursor:pointer} tr.uq-row-selected>td{background:var(--soft,#eaf2ff)!important} tr.uq-row-selected{outline:2px solid var(--blue,#1769ff);outline-offset:-2px} .ra-table tbody tr[data-row-id]{cursor:pointer}.pa-table tbody tr[data-id]{cursor:pointer} /* Wiederverwendbare Historie-Ansicht (Tabelle + Overlay) */ .uq-hist{overflow:auto;border:1px solid #e6edf6;border-radius:12px} .uq-hist table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;font:13px/1.4 Inter,Segoe UI,Arial,sans-serif} .uq-hist th,.uq-hist td{padding:8px 11px;border-bottom:1px solid #eef2f7;text-align:left;white-space:nowrap;color:#102033} .uq-hist th{position:sticky;top:0;background:#f8fafc;color:#475569;text-transform:uppercase;font-size:11px;letter-spacing:.04em} .uq-hist td:last-child{white-space:normal} .uq-hb{display:inline-flex;border-radius:999px;padding:2px 8px;font-size:11px;font-weight:800} .uq-hb.c{background:#dcfce7;color:#166534}.uq-hb.u{background:#dbeafe;color:#1e40af}.uq-hb.d{background:#fee2e2;color:#991b1b}.uq-hb.s{background:#ede9fe;color:#5b21b6} .uq-hist-empty{padding:26px;text-align:center;color:#64748b;border:1px dashed #d8e2ef;border-radius:12px;background:#fafcff} .uq-hist-ov{position:fixed;inset:0;z-index:100000;background:rgba(15,23,42,.45);display:none;align-items:center;justify-content:center;padding:20px} .uq-hist-ov.open{display:flex} .uq-hist-ov-card{width:min(900px,100%);max-height:86vh;display:flex;flex-direction:column;background:#fff;border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.25);overflow:hidden} .uq-hist-ov-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #e6edf6} .uq-hist-ov-head h3{margin:0;font-size:18px} .uq-hist-x{border:0;background:#f3f5f9;color:#334155;border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:15px} .uq-hist-ov-body{padding:14px 18px;overflow:auto} @media(max-width:720px){.uq-actionbar{padding:10px}.uq-sel-hint,.uq-actionbar-spacer{display:none}} /* Aktionsleiste im Modulkopf: Titel schrumpft, Leiste bleibt einzeilig SOLANGE SIE PASST. ⚠⚠ Hier stand bis zum 04.09.2026 `flex:0 0 auto;flex-wrap:nowrap`. Das erzwang eine einzige Zeile um jeden Preis: die Leiste konnte weder umbrechen noch schrumpfen, also wuchs sie über den Modulhost hinaus. Bei drei bis fünf Knöpfen fällt das nie auf — bei `lohn-abrechnung` mit ELF Knöpfen wurde die Leiste 1853 px breit in einem 1398 px breiten Host: **455 px Überlauf**, rund ein Drittel der Maske außerhalb des Bildschirms, auf jedem üblichen Monitor. `flex:0 1 auto` erlaubt das Schrumpfen, `min-width:0` hebt die Vorgabe `min-width:auto` des Flex-Kindes auf (ohne sie schrumpft es nicht unter seine Inhaltsbreite), und `flex-wrap:wrap` lässt die Knöpfe in eine zweite Reihe. Wo die Leiste passt, ändert sich dadurch NICHTS — an zehn nachgemessenen Modulen (dashboard, controlling-guv, crm-leads, lager-artikel, projektauftraege, stammdaten-personal, hr-cockpit, lager-inventuren, bedarfsmeldungen, buchhaltung-rechnungseingang) blieb jede Leiste auf 58 px Höhe und exakt derselben Breite. Der Umbruch greift nur dort, wo vorher der Überlauf war. */ .md-app .md-head>div:first-child,.ng-app .ng-head>div:first-child,.sg-app .sg-head>div:first-child{min-width:0} .md-app .md-head .uq-actionbar,.ng-app .ng-head .uq-actionbar,.sg-app .sg-head .uq-actionbar{flex:0 1 auto;min-width:0;flex-wrap:wrap} @media(max-width:760px){.md-app .md-head,.ng-app .ng-head,.sg-app .sg-head{flex-wrap:wrap}.md-app .md-head .uq-actionbar,.ng-app .ng-head .uq-actionbar,.sg-app .sg-head .uq-actionbar{flex-wrap:wrap;flex-basis:100%}} /* Einheitliche Modul-Seitentitel: NICHT fett (Nutzer-Standard 11.07.2026). Gilt für alle Modul-h1 sowie die h2-Titel der Topbar-Module (Kunden/Personal). Druck-/PDF-Vorlagen öffnen in eigenen Fenstern ohne dieses Stylesheet. */ .module-host h1, .module-host .ku-topbar h2, .module-host .pe-topbar h2, .module-host .uq-modulehead h2{font-weight:400!important} /* Einheitliche Formularfelder (modulübergreifend) – Referenz-Optik */ .uq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px} .uq-field{display:flex;flex-direction:column;gap:5px;min-width:0} .uq-field.span-2{grid-column:span 2} /* Nutzer-Standard 11.07.2026: Formular-Labels NORMAL beschriftet (keine Versalien). Gilt für .uq-label UND nackte