
: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:30px;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:850;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:18px;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:14px;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:14px;padding:12px 16px;background:var(--blue);color:#fff;font-weight:760;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:14px;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:14px;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(-2px)}.kpi .label{color:var(--muted);font-size:13px}.kpi .value{font-size:30px;font-weight:850;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:750}.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}.bar{flex:1;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:900}.profile-head{display:flex;gap:18px;align-items:center}.avatar{width:62px;height:62px;border-radius:20px;background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;display:grid;place-items:center;font-weight:900;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:10px;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:18px;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:14px;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:38px;background:#f6f9fd;padding:18px;box-shadow:var(--shadow)}.phone .mobile-card{background:#fff;border-radius:20px;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:18px;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:18px;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:750;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:20px;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:18px;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:14px;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:18px;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:#9fc3ff;transform:translateY(-1px)}.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:13px;cursor:pointer;color:#d8e8ff;font-size:14px;font-weight:750;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:9px;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:850;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:24px;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:20px;padding:18px;box-shadow:var(--shadow);cursor:pointer;transition:.18s;position:relative;overflow:hidden}.company-card:hover{transform:translateY(-3px);border-color:#a9c8ff}.company-card .company-icon{width:44px;height:44px;border-radius:14px;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:14px;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:14px;padding:10px 13px;font-weight:800;cursor:pointer}.note-fab{position:fixed;right:24px;bottom:24px;width:54px;height:54px;border:0;border-radius:18px;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:20px;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:10px;padding:7px 9px;cursor:pointer;font-size:12px;font-weight:750}.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,#0f172a)}
.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:20px;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}
.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 .2s ease}
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:13px;padding:8px 10px;color:var(--sidebar-text,#fff);font-size:14px;font-weight:850;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:10px;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:900;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:9px;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:900;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:13px;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:900}

/* 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:14px;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}
#appScreen > .topbar > *{transition:opacity .14s ease,transform .18s ease}
#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:18px;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:14px!important}
.urqivo-sidebar .sidebar-code{font-size:12px;font-weight:900;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:750;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)}
/* 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--sm{padding:6px 10px;font-size:12px;border-radius:9px;gap:6px}
.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}
.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:650;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:#172033}
.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:10px;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 */
.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 0 auto;flex-wrap:nowrap}
@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 <label> direkt in .uq-field (fängt Module ab, deren
   lokale Label-Regeln nach der Klassen-Migration verwaist sind). */
.uq-label,.uq-field>label{display:block;font-size:13px;font-weight:650;color:#475569;text-transform:none;letter-spacing:0}
.uq-input,.uq-select,.uq-textarea{width:100%;border:1px solid #dfe6f0;border-radius:10px;padding:8px 10px;font:inherit;font-size:13px;min-height:36px;background:#fff;color:#172033;outline:none}
.uq-textarea{min-height:78px;resize:vertical}
.uq-input:focus,.uq-select:focus,.uq-textarea:focus{border-color:#92b6ff;box-shadow:0 0 0 3px rgba(30,107,255,.10)}
.uq-input::placeholder,.uq-textarea::placeholder{color:#94a3b8}
.uq-input[readonly],.uq-input:disabled,.uq-select:disabled{background:#f1f5f9;color:#64748b;cursor:not-allowed}
.uq-field-locked .uq-label{display:flex;align-items:center;gap:5px}
.uq-field-locked .uq-label::after{content:"🔒";font-size:10px;opacity:.8}
.uq-hint{font-size:12px;color:#64748b}
.uq-inputwrap{position:relative;display:flex;align-items:center;gap:8px}
.uq-inputwrap .uq-input{flex:1}
.uq-iconbtn{flex:0 0 auto;border:1px solid #dfe6f0;border-radius:10px;min-height:36px;min-width:38px;background:#f8fafc;color:#475569;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.uq-iconbtn:hover{background:#eef4ff;color:#1e4fa8}
@media(max-width:720px){.uq-grid{grid-template-columns:1fr}.uq-field.span-2{grid-column:auto}}

/* 12-Spalten-Formular-Grids (re-/ra-/fo-/fp-/gb-/ll-…): kanonische Spannen.
   Ersetzt die durch die Feld-Migration verwaisten lokalen .xx-field.span-*-Regeln.
   Responsive wie im Original-Muster: Desktop exakt → Tablet span 6 → Mobil volle Zeile. */
.uq-field.span-3{grid-column:span 3}
.uq-field.span-4{grid-column:span 4}
.uq-field.span-5{grid-column:span 5}
.uq-field.span-6{grid-column:span 6}
.uq-field.span-8{grid-column:span 8}
.uq-field.span-12{grid-column:span 12}
@media(max-width:1100px){.uq-field.span-3,.uq-field.span-4,.uq-field.span-5{grid-column:span 6}}
@media(max-width:760px){.uq-field[class*="span-"]{grid-column:1/-1}}

/* Kanonische Feld-Zeilen (Masken-Sweep 30.07.2026): Straße+Hausnr., PLZ+Ort und
   Von/Bis stehen IMMER nebeneinander; Spalten sind auf Inhaltsbreite gekappt,
   damit Kurzfelder nicht über die volle Maskenbreite laufen. In jedem Grid
   einsetzbar (grid-column:1/-1 = volle Zeile), stapelt mobil auf eine Spalte. */
.uq-row-str{display:grid;grid-template-columns:minmax(220px,420px) 120px;gap:12px 14px}
.uq-row-plz{display:grid;grid-template-columns:140px minmax(220px,400px);gap:12px 14px}
.uq-row-vonbis{display:grid;grid-template-columns:repeat(2,minmax(140px,200px));gap:12px 14px}
.uq-row-str,.uq-row-plz,.uq-row-vonbis{grid-column:1/-1;min-width:0;justify-content:start}
/* Kinder dieser Zeilen dürfen ihre span-Klasse aus dem umgebenden 12er-Raster NICHT
   mitbringen – sonst sprengt ein span-3-Feld die zweispaltige Adresszeile. Steht
   bewusst NACH den span-Regeln, damit es bei gleicher Spezifität gewinnt. */
.uq-row-str>.uq-field,.uq-row-plz>.uq-field,.uq-row-vonbis>.uq-field,
.uq-row-str>div,.uq-row-plz>div,.uq-row-vonbis>div{grid-column:auto;min-width:0}
/* Breitenkappen für Kurzfelder: aufs .uq-field ODER direkt aufs Eingabeelement.
   Der .module-host-Vorsatz ist nötig, weil `.module-host select{max-width:460px}`
   (weiter oben) sonst gewinnt und die Kappe auf Auswahlfeldern wirkungslos bliebe. */
.uq-w-xs{max-width:120px}.uq-w-sm{max-width:180px}.uq-w-md{max-width:260px}.uq-w-lg{max-width:420px}
.module-host .uq-w-xs{max-width:120px}.module-host .uq-w-sm{max-width:180px}
.module-host .uq-w-md{max-width:260px}.module-host .uq-w-lg{max-width:420px}
@media(max-width:820px){.uq-row-str,.uq-row-plz,.uq-row-vonbis{grid-template-columns:1fr}}
body.uq-mobile .module-host .uq-row-str,body.uq-mobile .module-host .uq-row-plz,body.uq-mobile .module-host .uq-row-vonbis{grid-template-columns:1fr}

/* ============================================================
 * Kanonische Komponenten (modulübergreifend) – Referenz-Optik
 * Ergänzt .uq-act (Buttons) + .uq-field (Felder): Status, Karten,
 * Tabellen, Akten-Reiter, Euro-Feld. Module Stück für Stück umstellen.
 * ========================================================== */
/* Status-Pillen – OHNE Punkt (bewusste Entscheidung) */
.uq-status{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:800;line-height:1.2;white-space:nowrap}
.uq-status--active{background:#e8f8f0;color:#1d9b5f}
.uq-status--warn{background:#fff7ed;color:#b7791f}
.uq-status--inactive{background:#f1f5f9;color:#64748b}
.uq-status--danger{background:#fff0f0;color:#d64545}
.uq-status--info{background:#eef4ff;color:#1e4fa8}
/* Titelzeile der Akte: Name des Datensatzes + Statuspille nebeneinander.
   KANON (31.07.2026): In JEDEM Modul, in dem ein einzelner Datensatz geöffnet wird,
   steht der Status als Pille direkt rechts neben dem Titel – nur zur Anzeige.
   Geändert wird er im Reiter „Allgemein“ per Auswahlfeld, nie in der Aktionsleiste.
   Die Aktionsleiste rechts bleibt reine Handlung: Zurück · Blätterer · Duplizieren ·
   Löschen · Speichern. */
.uq-titelzeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.uq-titelzeile>h1,.uq-titelzeile>h2,.uq-titelzeile>h3,.uq-titelzeile>h4{margin:0}
.uq-titelzeile>.uq-status{flex:0 0 auto}
.uq-titelzeile>.uq-status:empty{display:none}
/* Karten & Sektionen */
.uq-card{background:#fff;border:1px solid #dfe6f0;border-radius:16px;box-shadow:0 10px 28px rgba(23,32,51,.07);overflow:hidden;min-width:0}
.uq-card--pad{padding:16px 18px} /* Karte mit Direktinhalt (ohne uq-card-body) — kanonische Padded-Variante */
.uq-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 15px;border-bottom:1px solid #dfe6f0;background:linear-gradient(180deg,#fff,#fbfdff)}
.uq-card-head>h2,.uq-card-head>h3,.uq-card-head>h4{margin:0}
.uq-card-body{padding:14px}
.uq-section{border:1px solid #dfe6f0;border-radius:14px;background:#fff;padding:12px;min-width:0}
.uq-section>h4{margin:0 0 10px;font-size:14px}
/* Tabellen */
.uq-table-wrap{overflow:auto;border:1px solid #dfe6f0;border-radius:14px}

/* ---- Waagerechte Scrollleiste am sichtbaren Rand (02.08.2026) -------------
   Gemeldet: „Bei allen Modulen, wo man waagerecht scrollen musste, kam man erst
   nach rechts, nachdem man ganz nach unten geblättert hatte."  Ursache: die rund
   vierzig modul-eigenen Tabellenkästen (fp-table-wrap, hrs-tblwrap, ca-tablewrap …)
   haben overflow:auto, aber KEINE Höhenbegrenzung – der Kasten wuchs mit der Liste,
   also lag seine Scrollleiste am Listenende statt am Bildschirmrand.
   Die Kästen heißen in jedem Modul anders, tragen aber alle eine Endung aus
   -table-wrap / -tablewrap / -tblwrap.  Deshalb hier zentral über die Endung, statt
   in vierzig Dateien einzeln.  Die Höhe ist eine OBERgrenze: kurze Tabellen bleiben
   unverändert, nur lange scrollen jetzt in sich.
   Bewusst ausgenommen: Kästen in Dialogfenstern (die haben ihre eigene Höhe) und
   der Druck. */
.module-host [class$="table-wrap"],.module-host [class$="tablewrap"],.module-host [class$="tblwrap"],
.module-host [class*="table-wrap "],.module-host [class*="tablewrap "],.module-host [class*="tblwrap "]{
  max-height:calc(100vh - 230px);
}
/* Nachtrag 02.08.2026: sechs breite Kästen heißen nicht auf -table-wrap, scrollen
   aber genauso waagerecht (Abwesenheitskalender, Zeitkonto-Jahresraster, offene
   Posten, Mein Konto, Parkplatzplan, Kalkulations-Positionen). Ohne sie blieb die
   Leiste dort weiterhin am Listenende. */
.module-host .abk-scroll,.module-host .azk-yg-scroll,.module-host .op-scroll,
.module-host .mk-scroll,.module-host .pp-planwrap,.module-host .kk-pos-wrap{
  max-height:calc(100vh - 230px);
}
@media(max-height:760px){
  .module-host [class$="table-wrap"],.module-host [class$="tablewrap"],.module-host [class$="tblwrap"],
  .module-host [class*="table-wrap "],.module-host [class*="tablewrap "],.module-host [class*="tblwrap "],
  .module-host .abk-scroll,.module-host .azk-yg-scroll,.module-host .op-scroll,
  .module-host .mk-scroll,.module-host .pp-planwrap,.module-host .kk-pos-wrap{max-height:calc(100vh - 170px)}
}
.module-host .uq-modal [class$="table-wrap"],.module-host .uq-modal [class$="tablewrap"],.module-host .uq-modal [class$="tblwrap"],
.module-host [class*="modal"] [class$="table-wrap"],.module-host [class*="modal"] [class$="tablewrap"],.module-host [class*="modal"] [class$="tblwrap"]{max-height:none}
@media print{.module-host [class$="table-wrap"],.module-host [class$="tablewrap"],.module-host [class$="tblwrap"],
  .module-host .abk-scroll,.module-host .azk-yg-scroll,.module-host .op-scroll,
  .module-host .mk-scroll,.module-host .pp-planwrap,.module-host .kk-pos-wrap{max-height:none}}
/* Feststehende Spaltenüberschriften gibt es hier BEWUSST nicht pauschal: 11 der 35
   modul-eigenen Kopfzeilen haben keinen eigenen Hintergrund, eine durchsichtige
   sticky-Kopfzeile würde den durchlaufenden Inhalt überlagern. In den Hauptlisten
   (UqListGrid) steht der Kopf ohnehin – dort ist der Hintergrund gesetzt. */
.uq-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;font-size:13px}
.uq-table th,.uq-table td{padding:9px 10px;border-bottom:1px solid #dfe6f0;text-align:left;white-space:nowrap}
.uq-table th{background:#f8fafc;color:#475569;text-transform:uppercase;font-size:11px;letter-spacing:.05em;font-weight:800;user-select:none}
.uq-table tbody tr:last-child td{border-bottom:0}
.uq-table tbody tr[data-row-id],.uq-table tbody tr[data-id]{cursor:pointer}
.uq-table tbody tr:hover{background:#f4f8ff}
/* Akten-Reiter (Tabs) */
.uq-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid #dfe6f0}
.uq-tab{padding:12px 10px;color:#64748b;cursor:pointer;background:none;border:0;border-bottom:3px solid transparent;font:inherit;font-weight:750} /* font-weight NACH font:inherit — Shorthand resettet sonst auf 400 */
.uq-tab:hover{color:#334155}
.uq-tab.is-active{color:#1e6bff;border-bottom-color:#1e6bff}
/* Datensatz-Blätterer (vor/zurück durch die sichtbare Liste, während man in der Akte ist) */
.uq-recordnav{display:inline-flex;align-items:center;gap:2px;border:1px solid #dfe6f0;border-radius:10px;background:#fff;overflow:hidden;flex:0 0 auto}
.uq-recordnav button{border:0;background:#fff;color:#334155;cursor:pointer;padding:8px 11px;font:inherit;font-size:16px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.uq-recordnav button:hover:not(:disabled){background:#eef4ff;color:#1e4fa8}
.uq-recordnav button:disabled{color:#cbd5e1;cursor:not-allowed}
.uq-recordnav-pos{padding:0 9px;font-size:12px;font-weight:750;color:#64748b;white-space:nowrap;min-width:54px;text-align:center;border-left:1px solid #eef2f7;border-right:1px solid #eef2f7}
/* Euro-/Betragsfeld: rechtsbündig, tabellarische Ziffern, €-Zeichen */
.uq-money,.uq-input.uq-money{text-align:right;font-variant-numeric:tabular-nums}
.uq-moneywrap{position:relative;display:flex;align-items:center}
.uq-moneywrap .uq-input{text-align:right;font-variant-numeric:tabular-nums;padding-right:26px}
.uq-moneywrap::after{content:"€";position:absolute;right:11px;color:#64748b;font-size:13px;pointer-events:none}

/* ============================================================
 * `.uq-*` Design-Tokens + restliche kanonische Komponenten
 * (additiv – Module werden Stück für Stück umgestellt)
 * ========================================================== */
:root{
  --uq-primary:#1e6bff;--uq-primary-ink:#1e4fa8;--uq-primary-soft:#eef4ff;
  --uq-ink:#172033;--uq-muted:#64748b;--uq-border:#dfe6f0;--uq-line:#eef2f7;--uq-soft:#f8fafc;
  --uq-success:#1d9b5f;--uq-success-bg:#e8f8f0;--uq-warn:#b7791f;--uq-warn-bg:#fff7ed;
  --uq-danger:#d64545;--uq-danger-bg:#fff0f0;--uq-info:#1e4fa8;--uq-info-bg:#eef4ff;
  --uq-radius:14px;--uq-radius-sm:10px;--uq-shadow:0 10px 28px rgba(23,32,51,.07)
}

/* --- Formularfelder: Ergänzungen --- */
.uq-pair{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;gap:9px 12px;align-items:start}
.uq-check{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--uq-ink);cursor:pointer}
.uq-check input{width:16px;height:16px;accent-color:var(--uq-primary);cursor:pointer}
.uq-switch{position:relative;display:inline-flex;align-items:center;width:40px;height:22px;flex:0 0 auto}
.uq-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.uq-switch .uq-switch-track{position:absolute;inset:0;background:#cbd5e1;border-radius:999px;transition:background .15s}
.uq-switch .uq-switch-track::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .15s}
.uq-switch input:checked+.uq-switch-track{background:var(--uq-primary)}
.uq-switch input:checked+.uq-switch-track::after{transform:translateX(18px)}
.uq-segmented{display:inline-flex;background:var(--uq-soft);border:1px solid var(--uq-border);border-radius:10px;padding:3px;gap:2px}
.uq-segmented button{border:0;background:none;border-radius:8px;padding:6px 12px;font:inherit;font-size:13px;font-weight:700;color:var(--uq-muted);cursor:pointer;white-space:nowrap}
.uq-segmented button.is-active{background:#fff;color:var(--uq-primary);box-shadow:0 1px 3px rgba(15,40,80,.12)}
.uq-search{position:relative;display:flex;align-items:center;flex:1;min-width:200px;max-width:520px}
.uq-search .uq-search-ic{position:absolute;left:12px;color:var(--uq-muted);pointer-events:none;font-size:14px}
.uq-search .uq-input{padding-left:36px}
.uq-tags{display:flex;flex-wrap:wrap;gap:6px}
.uq-tag{display:inline-flex;align-items:center;gap:6px;background:var(--uq-primary-soft);color:var(--uq-primary-ink);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700}
.uq-tag button{border:0;background:none;color:inherit;cursor:pointer;font-size:13px;line-height:1;padding:0;opacity:.7}
.uq-tag button:hover{opacity:1}
.uq-req::after{content:" *";color:var(--uq-danger);font-weight:800}
.uq-field-error .uq-input,.uq-field-error .uq-select{border-color:var(--uq-danger);box-shadow:0 0 0 3px rgba(214,69,69,.12)}
.uq-error-text{font-size:12px;color:var(--uq-danger);font-weight:650}

/* --- Datenanzeige --- */
.uq-badge{display:inline-flex;align-items:center;gap:5px;border-radius:8px;padding:2px 8px;font-size:11px;font-weight:800;background:#f1f5f9;color:#475569;white-space:nowrap}
.uq-badge--info{background:var(--uq-info-bg);color:var(--uq-info)}
.uq-badge--success{background:var(--uq-success-bg);color:var(--uq-success)}
.uq-badge--warn{background:var(--uq-warn-bg);color:var(--uq-warn)}
.uq-badge--danger{background:var(--uq-danger-bg);color:var(--uq-danger)}
.uq-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--uq-border);border-radius:999px;padding:4px 11px;font-size:12px;font-weight:700;color:#334155;background:#fff}
.uq-chip.is-active{background:var(--uq-primary-soft);border-color:#bcd3ff;color:var(--uq-primary-ink)}
/* Auswahl-Listenzeile in Picker-Modals (kanonisch): helle Zeile mit Hover statt Aktions-Button.
   Bewusst ohne "-btn" im Namen, damit der globale Button-Layer sie nicht blau färbt. */
.uq-pick-item{display:block;width:100%;text-align:left;padding:9px 12px;margin-bottom:7px;border:1px solid var(--uq-border);border-radius:10px;background:#fff;color:var(--uq-ink);font:inherit;font-size:13px;line-height:1.45;cursor:pointer}
.uq-pick-item:hover{background:var(--uq-primary-soft);border-color:#bcd3ff}
.uq-pick-item:focus-visible{outline:2px solid var(--uq-primary);outline-offset:1px}
.uq-pick-item.is-active{background:var(--uq-primary-soft);border-color:#bcd3ff}
.uq-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.uq-kpi{border:1px solid var(--uq-border);border-radius:14px;background:#fff;padding:14px;min-width:0}
.uq-kpi .uq-kpi-label{color:var(--uq-muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em} /* an Mehrheits-/Referenz-Optik angeglichen (51 Module) */
.uq-kpi strong{display:block;font-size:22px;margin-top:6px;color:var(--uq-ink)} /* 22px = Mehrheits-/Referenzgröße */
/* Kanon-Erweiterung 11.07.2026 (schließt die Lücke, die lokale KPI-Kopien erzwang): */
.uq-kpi small{display:block;color:var(--uq-muted);font-size:12px;font-weight:650;margin-top:3px} /* Unterzeile */
.uq-kpi.ok strong{color:var(--uq-success)}
.uq-kpi.warn strong{color:var(--uq-warn)}
.uq-kpi.bad strong{color:var(--uq-danger)} /* Wertfarben (Ampel) */
.uq-kv{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:8px 16px;font-size:13px;align-items:baseline}
.uq-kv>.uq-kv-k{color:var(--uq-muted)}
.uq-kv>.uq-kv-v{color:var(--uq-ink);font-weight:600;min-width:0;overflow-wrap:anywhere}
.uq-empty{border:1px dashed #cbd5e1;background:var(--uq-soft);border-radius:14px;padding:22px;text-align:center;color:var(--uq-muted);font-size:13px}
.uq-avatar{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--uq-primary),#12c7c0);color:#fff;display:inline-grid;place-items:center;font-weight:800;flex:0 0 auto}
.uq-avatar--sm{width:30px;height:30px;border-radius:9px;font-size:12px}
.uq-avatar--lg{width:58px;height:58px;border-radius:18px;font-size:20px}
.uq-meter{height:8px;background:#e8eef7;border-radius:999px;overflow:hidden}
.uq-meter>span{display:block;height:100%;background:linear-gradient(90deg,var(--uq-primary),#12c7c0)}

/* --- Navigation & Struktur --- */
.uq-modulehead{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin:0 0 14px}
.uq-modulehead h2{margin:0;font-size:22px;color:var(--uq-ink)}
.uq-modulehead p{margin:4px 0 0;color:var(--uq-muted);font-size:13px}
.uq-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;padding:16px;border-bottom:1px solid var(--uq-border);background:#fbfdff}
.uq-hero h3{margin:0;font-size:22px;color:var(--uq-ink)}
.uq-hero p{margin:5px 0 0;color:var(--uq-muted);font-size:13px}
.uq-hero-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.uq-toolbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.uq-breadcrumb{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--uq-muted)}
.uq-breadcrumb a{color:var(--uq-primary-ink);text-decoration:none}
.uq-breadcrumb a:hover{text-decoration:underline}
.uq-pagination{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--uq-border);border-radius:10px;overflow:hidden;background:#fff}
.uq-pagination button{border:0;background:#fff;color:#334155;cursor:pointer;padding:7px 11px;font:inherit;font-size:13px}
.uq-pagination button:hover:not(:disabled){background:var(--uq-primary-soft);color:var(--uq-primary-ink)}
.uq-pagination button:disabled{color:#cbd5e1;cursor:not-allowed}
.uq-pagination button.is-active{background:var(--uq-primary);color:#fff}

/* --- Overlays & Feedback --- */
.uq-modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.4);display:none;align-items:center;justify-content:center;padding:20px;z-index:9998}
.uq-modal-backdrop.is-open{display:flex}
.uq-modal{width:min(640px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:18px;box-shadow:0 30px 80px rgba(15,23,42,.25);border:1px solid var(--uq-border)}
.uq-modal-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--uq-border)}
.uq-modal-head h3{margin:0;font-size:18px}
.uq-modal-body{padding:16px}
.uq-modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 16px;border-top:1px solid var(--uq-border)}
.uq-menu{position:absolute;min-width:200px;background:#fff;border:1px solid var(--uq-border);border-radius:12px;box-shadow:var(--uq-shadow);padding:6px;z-index:50}
.uq-menu button,.uq-menu a{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;text-align:left;padding:9px 10px;border-radius:8px;font:inherit;font-size:13px;color:#334155;cursor:pointer;text-decoration:none}
.uq-menu button:hover,.uq-menu a:hover{background:var(--uq-soft)}
.uq-alert{display:flex;gap:10px;align-items:flex-start;border:1px solid;border-radius:12px;padding:11px 13px;font-size:13px;line-height:1.45}
.uq-alert--info{background:var(--uq-info-bg);border-color:#cfe0ff;color:#1e40af}
.uq-alert--success{background:var(--uq-success-bg);border-color:#bbf0d4;color:#166534}
.uq-alert--warn{background:var(--uq-warn-bg);border-color:#fde3b9;color:#92600e}
.uq-alert--danger{background:var(--uq-danger-bg);border-color:#ffd1d1;color:#991b1b}
[data-uq-tip]{position:relative}
[data-uq-tip]:hover::after{content:attr(data-uq-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#172033;color:#fff;font-size:11px;font-weight:600;padding:5px 8px;border-radius:7px;white-space:nowrap;z-index:100;pointer-events:none}
.uq-spinner{width:22px;height:22px;border:3px solid var(--uq-border);border-top-color:var(--uq-primary);border-radius:50%;animation:uq-spin .7s linear infinite;display:inline-block}
@keyframes uq-spin{to{transform:rotate(360deg)}}
.uq-skeleton{background:linear-gradient(90deg,#eef2f7,#f8fafc,#eef2f7);background-size:200% 100%;animation:uq-shimmer 1.2s ease-in-out infinite;border-radius:8px;min-height:14px}
@keyframes uq-shimmer{to{background-position:-200% 0}}
@media(max-width:720px){.uq-pair{grid-column:1/-1;grid-template-columns:1fr}}

/* ============================================================
 * Globale Vereinheitlichung bestehender Modul-Klassen ("in einem Rutsch")
 * Zieht den PRIMÄR-/Basis-Aktionsbutton aller Module (Eigenbau-Klassen
 * `*-btn` ohne Varianten-Suffix) auf die kanonische solide-blaue Optik –
 * ohne 107 Dateien einzeln zu ändern. Ausgeschlossen: Varianten
 * (`*-btn-secondary/-ghost/-danger/-small/-mini/-light`) und Hilfs-Buttons
 * (Datum/Picker/Filter/Icon/Close/Chip/Nav/Sortier-/Spalten-Buttons),
 * damit deren Aussehen erhalten bleibt. !important, um Modul-CSS zu schlagen.
 * ========================================================== */
.module-host [class*="-btn"]:not([class*="-btn-"]):not([class*="date"]):not([class*="picker"]):not([class*="filter"]):not([class*="icon"]):not([class*="close"]):not([class*="chip"]):not([class*="mini"]):not([class*="-dp-"]):not([class*="col-"]):not([class*="nav"]):not([class*="sign"]):not([class*="toggle"]):not([class*="resiz"]):not([class*="ghost"]):not([class*="secondary"]):not([class*="light"]){
  background:#1e6bff !important; color:#fff !important; border-color:transparent !important;
}
.module-host [class*="-btn"]:not([class*="-btn-"]):not([class*="date"]):not([class*="picker"]):not([class*="filter"]):not([class*="icon"]):not([class*="close"]):not([class*="chip"]):not([class*="mini"]):not([class*="-dp-"]):not([class*="col-"]):not([class*="nav"]):not([class*="sign"]):not([class*="toggle"]):not([class*="resiz"]):not([class*="ghost"]):not([class*="secondary"]):not([class*="light"]):hover{
  filter:brightness(.96);
}

/* ===== Benachrichtigungen (App-Shell) ===== */
.notif-btn{position:relative}
.notif-badge{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#e11d48;color:#fff;font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.notif-badge[hidden]{display:none}
.notif-panel{position:fixed;top:60px;right:18px;width:340px;max-height:72vh;overflow:auto;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 24px 60px rgba(15,23,42,.2);z-index:100001}
/* Schwebende Benachrichtigungs-Glocke (erscheint, wenn die obere Leiste eingeklappt ist) */
.notif-fab{position:fixed;left:24px;bottom:24px;width:54px;height:54px;border:0;border-radius:18px;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;transition:top .45s ease,bottom .45s ease,left .45s ease,right .45s ease}
body.uq-notif-fab .notif-fab{display:grid}
.notif-fab .notif-badge{background:#e11d48}
.notif-fab.nf-top-left{top:70px;left:16px;right:auto;bottom:auto;transform:none}
.notif-fab.nf-top-center{top:70px;left:50%;right:auto;bottom:auto;transform:translateX(-50%)}
.notif-fab.nf-top-right{top:70px;right:16px;left:auto;bottom:auto;transform:none}
.notif-fab.nf-middle-left{top:50%;left:16px;right:auto;bottom:auto;transform:translateY(-50%)}
.notif-fab.nf-middle-center{top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%)}
.notif-fab.nf-middle-right{top:50%;right:16px;left:auto;bottom:auto;transform:translateY(-50%)}
.notif-fab.nf-bottom-left{bottom:24px;left:24px;right:auto;top:auto;transform:none}
.notif-fab.nf-bottom-center{bottom:24px;left:50%;right:auto;top:auto;transform:translateX(-50%)}
.notif-fab.nf-bottom-right{bottom:24px;right:24px;left:auto;top:auto;transform:none}
body.uq-notif-fab .notif-panel{top:auto;bottom:88px;left:18px;right:auto}
@media(max-width:720px){body.uq-notif-fab .notif-panel{left:16px;bottom:80px}}
/* Schwebende Stempeluhr: bleibt bei eingeklappter Toolbar sichtbar (sonst verschwindet sie mit der Topbar) */
/* Schwebe-Modus: nur positionieren – das gewählte Erscheinungsbild (Layout, Größe,
   Hintergrund, Symbole) der Toolbar-Uhr bleibt erhalten, damit beide Uhren identisch aussehen. */
body.uq-zeit-fab #appScreen.topbar-collapsed > .topbar > #zeitWidget{position:fixed;z-index:9000;opacity:1!important;pointer-events:auto!important;margin:0!important;box-shadow:0 10px 26px rgba(15,40,80,.30)}
body.uq-zeit-fab.uq-zeitpos-top-left #appScreen.topbar-collapsed #zeitWidget{top:16px;left:16px;right:auto;bottom:auto;transform:none}
body.uq-zeit-fab.uq-zeitpos-top-center #appScreen.topbar-collapsed #zeitWidget{top:16px;left:50%;right:auto;bottom:auto;transform:translateX(-50%)}
body.uq-zeit-fab.uq-zeitpos-top-right #appScreen.topbar-collapsed #zeitWidget{top:16px;right:16px;left:auto;bottom:auto;transform:none}
body.uq-zeit-fab.uq-zeitpos-middle-left #appScreen.topbar-collapsed #zeitWidget{top:50%;left:16px;right:auto;bottom:auto;transform:translateY(-50%)}
body.uq-zeit-fab.uq-zeitpos-middle-center #appScreen.topbar-collapsed #zeitWidget{top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%)}
body.uq-zeit-fab.uq-zeitpos-middle-right #appScreen.topbar-collapsed #zeitWidget{top:50%;right:16px;left:auto;bottom:auto;transform:translateY(-50%)}
body.uq-zeit-fab.uq-zeitpos-bottom-left #appScreen.topbar-collapsed #zeitWidget{bottom:24px;left:24px;right:auto;top:auto;transform:none}
body.uq-zeit-fab.uq-zeitpos-bottom-center #appScreen.topbar-collapsed #zeitWidget{bottom:24px;left:50%;right:auto;top:auto;transform:translateX(-50%)}
body.uq-zeit-fab.uq-zeitpos-bottom-right #appScreen.topbar-collapsed #zeitWidget{bottom:24px;right:24px;left:auto;top:auto;transform:none}
/* Kollisionsvermeidung: teilt sich die schwebende Stempeluhr eine Ecke mit Schnellbuttons,
   rückt sie seitlich neben deren Spalte (bzw. bei „unten mittig" nach oben). */
body.uq-zeit-fab.uq-qb-bottom-right.uq-zeitpos-bottom-right #appScreen.topbar-collapsed #zeitWidget{right:82px}
body.uq-zeit-fab.uq-qb-bottom-left.uq-zeitpos-bottom-left #appScreen.topbar-collapsed #zeitWidget{left:82px}
body.uq-zeit-fab.uq-qb-middle-right.uq-zeitpos-middle-right #appScreen.topbar-collapsed #zeitWidget{right:82px}
body.uq-zeit-fab.uq-qb-middle-left.uq-zeitpos-middle-left #appScreen.topbar-collapsed #zeitWidget{left:82px}
body.uq-zeit-fab.uq-qb-bottom-center.uq-zeitpos-bottom-center #appScreen.topbar-collapsed #zeitWidget{bottom:86px}
.notif-fab .nf-ic{display:inline-block;transform-origin:50% 12%}
@keyframes nf-ring{0%{transform:rotate(0)}8%{transform:rotate(20deg)}18%{transform:rotate(-18deg)}28%{transform:rotate(15deg)}38%{transform:rotate(-12deg)}48%{transform:rotate(9deg)}58%{transform:rotate(-6deg)}70%{transform:rotate(3deg)}82%{transform:rotate(-1.5deg)}100%{transform:rotate(0)}}
@keyframes nf-shake{0%,100%{transform:translateX(0)}15%{transform:translateX(-5px)}30%{transform:translateX(5px)}45%{transform:translateX(-4px)}60%{transform:translateX(4px)}75%{transform:translateX(-2px)}88%{transform:translateX(2px)}}
@keyframes nf-pulse{0%,100%{transform:scale(1)}45%{transform:scale(1.32)}}
@keyframes nf-glow{0%,100%{filter:none}45%{filter:drop-shadow(0 0 9px #ffd34d) brightness(1.35)}}
@keyframes nf-ringglow{0%{transform:rotate(0);filter:none}18%{transform:rotate(18deg);filter:drop-shadow(0 0 8px #ffd34d) brightness(1.3)}36%{transform:rotate(-14deg)}54%{transform:rotate(10deg)}72%{transform:rotate(-6deg)}88%{transform:rotate(3deg)}100%{transform:rotate(0);filter:none}}
.nf-ringing{animation:nf-ring .9s ease}
.nf-ringing.nf-anim-ring{animation:nf-ring .9s ease}
.nf-ringing.nf-anim-shake{animation:nf-shake .7s ease}
.nf-ringing.nf-anim-pulse{animation:nf-pulse .8s ease}
.nf-ringing.nf-anim-glow{animation:nf-glow .9s ease}
.nf-ringing.nf-anim-ringglow{animation:nf-ringglow 1s ease}
.notif-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid #eef2f7}
.notif-list{padding:6px}
.notif-item{display:flex;gap:9px;padding:10px;border-radius:9px;cursor:pointer}
.notif-item:hover{background:#f8fafc}
.notif-item .notif-dot{width:8px;height:8px;border-radius:50%;background:transparent;margin-top:6px;flex:0 0 auto}
.notif-item.is-unread{background:#eff6ff}
.notif-item.is-unread .notif-dot{background:#2563eb}
.notif-item .notif-body{min-width:0}
.notif-item b{font-size:13px}
.notif-item p{margin:2px 0;font-size:12px;color:#475569;overflow-wrap:anywhere}
.notif-item small{color:#94a3b8;font-size:11px}
.notif-empty{padding:24px;text-align:center;color:#94a3b8}
/* ===== Schnellbuttons (App-Shell, schwebend) ===== */
.quick-buttons{position:fixed;inset:0;pointer-events:none;z-index:1400}
.qb-zone{position:fixed;display:flex;flex-direction:column;gap:10px;pointer-events:auto}
.qb-top-left{top:70px;left:16px}
.qb-top-center{top:70px;left:50%;transform:translateX(-50%);flex-direction:row}
.qb-top-right{top:70px;right:16px}
.qb-middle-left{top:50%;left:16px;transform:translateY(-50%)}
.qb-middle-center{top:50%;left:50%;transform:translate(-50%,-50%);flex-direction:row}
.qb-middle-right{top:50%;right:16px;transform:translateY(-50%)}
.qb-bottom-left{bottom:20px;left:16px;flex-direction:column-reverse}
.qb-bottom-center{bottom:20px;left:50%;transform:translateX(-50%);flex-direction:row}
.qb-bottom-right{bottom:20px;right:16px;flex-direction:column-reverse}
.qb-btn{width:50px;height:50px;border-radius:50%;border:0;background:var(--accent,#1769ff);color:#fff;font-size:21px;line-height:1;cursor:pointer;box-shadow:0 8px 20px rgba(15,23,42,.25);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0}
.qb-btn:hover{filter:brightness(1.06)}
.qb-btn img{width:100%;height:100%;object-fit:cover;display:block}
body.qb-active .note-fab{display:none!important}

/* ============================================================
   Mobiler App-Modus: generische Modul-Anpassungen.
   Bewusst unter body.uq-mobile gescoped (nur aktiv, wenn der
   mobile Launcher läuft, Breakpoint ≤820px in mobile-app.js) –
   Desktop und schmale Desktop-Fenster bleiben unberührt.
   ============================================================ */
body.uq-mobile .module-host .uq-grid{grid-template-columns:1fr}
body.uq-mobile .module-host .uq-field[class*="span-"]{grid-column:1/-1}
body.uq-mobile .module-host .uq-pair{grid-column:1/-1;grid-template-columns:1fr}
body.uq-mobile .module-host .cards,body.uq-mobile .module-host .company-grid{grid-template-columns:1fr}
body.uq-mobile .module-host .uq-actionbar{flex-wrap:wrap;gap:8px}
body.uq-mobile .module-host .masterdata-head{display:block}
body.uq-mobile .module-host .masterdata-toolbar{flex-direction:column;align-items:stretch}
body.uq-mobile .module-host .masterdata-toolbar .input{max-width:none}
body.uq-mobile .module-host .btn,body.uq-mobile .module-host .uqlg-btn{min-height:38px}
body.uq-mobile .module-host input,body.uq-mobile .module-host select,body.uq-mobile .module-host textarea{font-size:16px}
body.uq-mobile .module-host [style*="overflow"],body.uq-mobile .module-host .uqlg-table-wrap{-webkit-overflow-scrolling:touch}

/* ---- Foto-Notizen (Handy-Scan "In meine Notizen"): Vorschau, Lightbox, Weiterleiten/Zuordnen ---- */
.note-photo{display:block;max-width:min(320px,100%);max-height:180px;margin-top:10px;border-radius:12px;border:1px solid var(--line);cursor:zoom-in;object-fit:cover;box-shadow:0 6px 16px rgba(7,31,63,.12)}
#uqNoteOverlay{position:fixed;inset:0;z-index:99700;display:flex;align-items:center;justify-content:center;background:rgba(8,16,40,.55);padding:14px}
#uqNoteOverlay .uqno-card{position:relative;width:min(460px,100%);max-height:min(84vh,720px);display:flex;flex-direction:column;background:#fff;border-radius:16px;padding:18px;box-shadow:0 30px 80px rgba(8,16,40,.45)}
#uqNoteOverlay.is-photo .uqno-card{width:auto;max-width:min(920px,96vw);align-items:center}
#uqNoteOverlay h3{margin:0 0 10px;font-size:17px;font-weight:800;color:#0f172a;padding-right:28px}
#uqNoteOverlay .uqno-x{position:absolute;top:10px;right:12px;border:0;background:transparent;font-size:24px;line-height:1;color:#94a3b8;cursor:pointer}
#uqNoteOverlay .uqno-x:hover{color:#0f172a}
#uqNoteOverlay .uqno-body{overflow-y:auto}
#uqNoteOverlay .uqno-img{max-width:100%;max-height:calc(84vh - 90px);border-radius:10px}
#uqNoteOverlay .uqno-hint{font-size:12.5px;color:#64748b;line-height:1.45;margin-bottom:12px}
#uqNoteOverlay label{display:block;font-size:11px;font-weight:800;color:#64748b;text-transform:uppercase;letter-spacing:.04em;margin:10px 0 5px}
#uqNoteOverlay select{width:100%;border:1px solid #dfe6f0;border-radius:10px;padding:10px 12px;font-size:14px;background:#fff}
#uqNoteOverlay .uqno-actions{display:flex;justify-content:flex-end;margin-top:14px}
#uqNoteOverlay .uqno-list{display:flex;flex-direction:column;gap:6px}
#uqNoteOverlay .uqno-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:1px solid #e6ebf4;background:#f8fafd;border-radius:11px;padding:10px 12px;cursor:pointer;font-family:inherit}
#uqNoteOverlay .uqno-row:hover{border-color:#9fc0ff;background:#eef5ff}
#uqNoteOverlay .uqno-row b{flex:0 0 auto;font-size:13px;color:#0f55d8}
#uqNoteOverlay .uqno-row span{flex:1;min-width:0;font-size:13px;color:#172033;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#uqNoteOverlay .uqno-row small{flex:0 0 auto;font-size:11px;color:#94a3b8}
#uqNoteToast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);z-index:99800;background:#0f172a;color:#e8f1ff;font:600 13px Inter,'Segoe UI',Arial,sans-serif;border-radius:12px;padding:11px 16px;box-shadow:0 18px 44px rgba(8,20,50,.45);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;max-width:min(560px,calc(100vw - 28px))}
#uqNoteToast.is-on{opacity:1;transform:translate(-50%,0)}

/* ==========================================================
   Rechtliches (Impressum & Datenschutz) — Footer-Links + Modal
   ==========================================================
   Optik 1:1 vom Login-Popup übernommen (#loginScreen .login-modal /
   .login-modal-card): gleiche Flächen, Rundungen, Schatten, Farben,
   Typografie und dasselbe Verhalten auf Touch-Geräten.
   Inhalte & Logik: assets/js/urqivo-legal.js
   ========================================================== */

/* --- Footer-Links (Buttons, kein Seitenwechsel — wie .login-invite-link) --- */
.uq-legal-links{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;font-size:12px;font-weight:600}
.uq-legal-links button{border:0;background:transparent;padding:4px 3px;font:inherit;font-weight:700;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px;border-radius:8px;transition:.16s}
.uq-legal-links .uq-legal-sep{opacity:.5}
.uq-legal-links button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* Startseite/Login: dezent am unteren Rand, Farben der übrigen Login-Sekundärtexte */
#loginScreen .uq-legal-links{position:fixed;left:0;right:0;bottom:0;z-index:25;padding:14px 16px;color:#86a4cd}
#loginScreen .uq-legal-links button{color:#9fc0ef}
#loginScreen .uq-legal-links button:hover{color:#fff}
#loginScreen.login-bg{padding-bottom:74px}


/* --- Modal --- */
.uq-legal-modal{position:fixed;inset:0;z-index:99900;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(4,12,30,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.uq-legal-modal.open{display:flex}
.uq-legal-card{position:relative;display:flex;flex-direction:column;width:min(760px,100%);max-height:calc(100vh - 48px);margin:auto;background:rgba(15,28,56,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);border-radius:24px;box-shadow:0 40px 90px rgba(2,10,28,.7);color:#e8f1ff;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;animation:uqLegalIn .26s cubic-bezier(.2,.8,.2,1.1) both}
@keyframes uqLegalIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.uq-legal-head{flex:0 0 auto;display:flex;align-items:flex-start;gap:14px;padding:26px 30px 16px;border-bottom:1px solid rgba(255,255,255,.1)}
.uq-legal-headtext{flex:1;min-width:0}
.uq-legal-eyebrow{display:inline-flex;align-items:center;padding:5px 11px;border-radius:999px;background:rgba(23,105,255,.18);color:#bcd8ff;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.uq-legal-title{margin:11px 0 0;font-size:22px;font-weight:850;line-height:1.15;color:#fff}
.uq-legal-lead{margin:7px 0 0;font-size:12.5px;font-weight:600;line-height:1.5;color:#9fc0ef}
.uq-legal-close{flex:0 0 auto;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#cfe1fb;font-size:20px;line-height:1;cursor:pointer;transition:.16s}
.uq-legal-close:hover{background:rgba(255,255,255,.16);color:#fff}
.uq-legal-close:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* Nur der Inhalt scrollt — Kopf & Schließen-Button bleiben stehen */
.uq-legal-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:20px 30px 28px;font-size:13.5px;line-height:1.65;color:#dbe9ff;outline:none}
.uq-legal-body:focus-visible{box-shadow:inset 0 0 0 2px rgba(18,199,192,.3)}
.uq-legal-body h3{margin:22px 0 7px;font-size:14px;font-weight:800;letter-spacing:-.01em;color:#fff}
.uq-legal-body h3:first-child{margin-top:0}
.uq-legal-body p{margin:0 0 12px}
.uq-legal-body address{font-style:normal;line-height:1.75}
.uq-legal-body strong,.uq-legal-body b{color:#fff;font-weight:750}
.uq-legal-body ul{margin:0 0 12px;padding-left:20px}
.uq-legal-body li{margin:4px 0}
.uq-legal-body a{color:#67b5ff;font-weight:650;border-radius:4px}
.uq-legal-body a:hover{color:#9ff9ee;text-decoration:underline}
.uq-legal-body a:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.uq-legal-body hr{border:0;border-top:1px solid rgba(255,255,255,.1);margin:22px 0}
.uq-legal-body .small{color:#86a4cd;font-size:11.5px}
.uq-legal-note{margin:0 0 18px;padding:11px 14px;border:1px solid rgba(23,105,255,.3);border-radius:13px;background:rgba(23,105,255,.12);color:#cfe1fb;font-size:12px;font-weight:600;line-height:1.5}
.uq-legal-note b{color:#fff;font-weight:800}

/* Hintergrund friert ein, solange das Modal offen ist */
body.uq-legal-lock{overflow:hidden}
body.uq-legal-lock #loginScreen{overflow:hidden}

/* Kleine Schirme: nahezu volle Breite & Höhe */
@media(max-width:720px){
  .uq-legal-modal{padding:12px}
  .uq-legal-card{width:100%;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);border-radius:18px}
  .uq-legal-head{padding:20px 18px 14px}
  .uq-legal-title{font-size:19px}
  .uq-legal-body{padding:17px 18px 22px}
}
/* Touch/mobil: teure Effekte aus — wie beim Login-Popup */
@media (max-width:900px),(pointer:coarse){
  .uq-legal-modal{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .uq-legal-card{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(15,28,56,.97)}
}
@media(prefers-reduced-motion:reduce){.uq-legal-card{animation-duration:.01ms!important}}

/* ==========================================================
   Demo-Gate — Zugangscode-Fenster vor der Live-Demo
   Optik am Login-Popup angelehnt (dunkle Karte, Blur, Radius, Schatten).
   Logik: assets/js/urqivo-demo-gate.js
   ========================================================== */
.uq-demogate{position:fixed;inset:0;z-index:99950;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(4,12,30,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.uq-demogate.open{display:flex}
.uq-demogate-card{position:relative;width:min(420px,100%);background:rgba(15,28,56,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);border-radius:24px;box-shadow:0 40px 90px rgba(2,10,28,.7);color:#e8f1ff;font-family:Inter,'Segoe UI',Arial,sans-serif;padding:34px 30px 26px;text-align:center;animation:uqDgIn .26s cubic-bezier(.2,.8,.2,1.1) both}
@keyframes uqDgIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.uq-demogate-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#cfe1fb;font-size:20px;line-height:1;cursor:pointer;transition:.16s}
.uq-demogate-close:hover{background:rgba(255,255,255,.16);color:#fff}
.uq-demogate-close:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.uq-demogate-badge{width:56px;height:56px;margin:4px auto 14px;border-radius:18px;display:grid;place-items:center;font-size:22px;color:#9ff9ee;background:rgba(14,159,142,.22);border:1px solid rgba(18,199,192,.4);box-shadow:0 8px 18px rgba(18,199,192,.18)}
.uq-demogate-title{margin:0;font-size:24px;font-weight:850;color:#fff}
.uq-demogate-sub{margin:8px 0 20px;font-size:13.5px;line-height:1.5;color:#9fc0ef}
.uq-demogate-form{display:flex;flex-direction:column;gap:12px}
.uq-demogate-input{width:100%;box-sizing:border-box;border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:14px 16px;background:rgba(255,255,255,.06);color:#fff;font-size:17px;letter-spacing:.06em;text-align:center;text-transform:uppercase;outline:none;transition:.16s}
.uq-demogate-input::placeholder{color:#7e9ec9;letter-spacing:normal;text-transform:none}
.uq-demogate-input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(23,105,255,.18)}
.uq-demogate-input.is-error{border-color:#ff6b6b;box-shadow:0 0 0 4px rgba(255,107,107,.16)}
.uq-demogate-error{color:#ffb4b4;font-size:12.5px;font-weight:600;min-height:0;margin:-2px 0 0}
.uq-demogate-btn{border:0;border-radius:14px;padding:14px 16px;background:var(--blue);color:#fff;font-weight:760;font-size:15px;cursor:pointer;box-shadow:var(--shadow2);transition:.18s}
.uq-demogate-btn:hover{background:var(--blue2);transform:translateY(-1px)}
.uq-demogate-btn:disabled{opacity:.6;cursor:default;transform:none}
.uq-demogate-hint{margin:16px 0 0;font-size:12px;color:#86a4cd}
.uq-demogate-hint a{color:#9fc0ef;font-weight:650}
.uq-demogate-hint a:hover{color:#fff}
body.uq-demogate-lock{overflow:hidden}
@media(max-width:520px){.uq-demogate{padding:12px}.uq-demogate-card{padding:28px 20px 22px;border-radius:20px}}
@media (max-width:900px),(pointer:coarse){.uq-demogate,.uq-demogate-card{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}.uq-demogate-card{background:rgba(15,28,56,.98)}}
@media(prefers-reduced-motion:reduce){.uq-demogate-card{animation-duration:.01ms!important}}
