/*
* VENTZ ONE – zentralisierte seitenbezogene Komponenten
*
* Diese Regeln wurden aus aktiven Jinja-Templates extrahiert. Jede Sektion
* ist auf eine eindeutige Seitenmarkierung begrenzt, damit gleichnamige
* Altklassen verschiedener Module nicht gegeneinander kaskadieren.
*/
/* ========================================================================== */
/* Administration – Benutzerverwaltung
* Quelle: app/templates/admin/users.html
* Seitenscope verhindert Kollisionen mit anderen Modulen.
*/
/* ========================================================================== */
@scope (:root:has(.page-style-admin-users)) {
.admin-split{grid-template-columns:minmax(0,.95fr) minmax(420px,1.05fr)!important;align-items:start}
.admin-left-stack{display:contents!important}
.admin-left-stack>.panel{grid-column:1;grid-row:1}
.admin-split>.panel{grid-column:2;grid-row:1}
.admin-split>.admin-left-stack>.central-permission-panel{grid-column:1/-1;grid-row:2;margin:0}
.admin-left-stack>.panel,.admin-split>.panel{width:auto!important;max-width:none!important;min-width:0!important;margin-left:0!important;margin-right:0!important}
.central-permission-panel{margin-top:4px}
.central-permission-panel .panel-head{margin-bottom:18px}
.central-role-rules{display:grid;gap:16px}
.role-rule-grid{display:grid;gap:12px}
.role-rule-card{border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden}
.role-rule-card summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 18px;cursor:pointer}
.role-rule-card summary>span{display:grid;gap:4px;min-width:0}
.role-rule-card summary small{color:var(--muted);font-weight:650}
.role-rule-card[open] summary{border-bottom:1px solid var(--line);background:#f8f9fa}
.role-rule-cascade{display:grid;gap:16px;padding:18px}
.role-rule-toolbar{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(260px,1fr) minmax(220px,.7fr);gap:14px;align-items:end}
.role-rule-toolbar label{margin:0}
.role-rule-selection{display:grid;gap:3px;min-height:48px;padding:10px 13px;border:1px solid var(--line);border-radius:8px;background:#f7f8fa}
.role-rule-selection b{font-size:14px}
.role-rule-selection span{color:var(--muted);font-size:12px}
.role-rule-hint{padding:14px 16px;border:1px dashed #cbd2dc;border-radius:8px;background:#f8fafc;color:var(--muted)}
.central-role-rules .role-cost-centers{min-width:0;margin:0;padding:0;border:0;max-height:none!important;overflow:visible!important}
.role-cost-center-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.role-cost-center-option{display:flex;align-items:center;gap:11px;min-width:0;margin:0;padding:13px 14px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;font-weight:700}
.role-cost-center-option:hover{border-color:#b7bec8;background:#fafbfc}
.role-cost-center-option:has(input:checked){border-color:var(--red);background:#fff4f5}
.role-cost-center-option input{appearance:none;-webkit-appearance:none;display:grid;place-content:center;width:20px!important;height:20px!important;min-width:20px;margin:0!important;padding:0!important;border:1.5px solid #aeb6c2!important;border-radius:5px!important;background:#fff!important;box-shadow:none!important;flex:0 0 20px}
.role-cost-center-option input:checked{border-color:var(--red)!important;background:var(--red)!important}
.role-cost-center-option input:checked:after{content:"";width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-1px) rotate(-45deg)}
.role-cost-center-option span{min-width:0;overflow-wrap:anywhere}
.role-cost-center-empty{margin:0}
.role-cost-center-option[hidden],.role-cost-centers[hidden],.role-cost-center-empty[hidden],.role-rule-hint[hidden]{display:none!important}
@media(max-width:1100px){
.admin-split{grid-template-columns:1fr!important}
.admin-left-stack{display:grid!important;gap:18px}
.admin-left-stack>.panel,.admin-split>.panel,.admin-split>.admin-left-stack>.central-permission-panel{grid-column:1;grid-row:auto}
.admin-split>.panel{order:2}.central-permission-panel{order:3}
.role-rule-toolbar{grid-template-columns:1fr 1fr}.role-rule-selection{grid-column:1/-1}
.role-cost-center-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
.role-rule-card summary{align-items:flex-start;flex-direction:column;gap:8px}
.role-rule-cascade{padding:14px}
.role-rule-toolbar,.role-cost-center-grid{grid-template-columns:1fr}
.role-rule-selection{grid-column:auto}
}
}
/* ========================================================================== */
/* Administration – Datenbereichsauswahl
* Quelle: app/templates/admin/_data_scope_picker.html
* Seitenscope verhindert Kollisionen mit anderen Modulen.
*/
/* ========================================================================== */
@scope (:root:has(.page-style-admin-data-scope)) {
.data-scope-picker .data-scope-intro h3{margin:0 0 .25rem;font-size:1.05rem}
.data-scope-picker .switch-line{position:relative;overflow:hidden}
.data-scope-picker .switch-line>input{width:1px!important;height:1px!important;padding:0!important;border:0!important;margin:0!important}
.data-scope-picker details{border:1px solid var(--line,#e7e7eb);border-radius:12px;padding:10px 14px;margin:8px 0;background:#fff}
.data-scope-picker details.scope-disabled{opacity:.55}
.data-scope-picker summary{cursor:pointer;font-weight:800}
.data-scope-picker .scope-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-top:10px;max-height:280px;overflow:auto}
.data-scope-picker .scope-chip{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line,#e7e7eb);border-radius:10px;font-size:.9rem}
.data-scope-picker .scope-chip:has(input:checked){border-color:var(--accent,#df1025);background:color-mix(in srgb,var(--accent,#df1025) 8%,#fff)}
.data-scope-picker .scope-chip input{appearance:none!important;-webkit-appearance:none!important;display:inline-grid!important;place-content:center!important;width:18px!important;height:18px!important;min-width:18px!important;padding:0!important;margin:0!important;border:1.5px solid var(--choice-border,#cfd4dc)!important;border-radius:999px!important;background:#fff!important;flex:0 0 18px!important}
.data-scope-picker .scope-chip input:checked{border-color:var(--choice-active,var(--red,#df1025))!important;background:radial-gradient(circle at center,var(--choice-active,var(--red,#df1025)) 0 4px,transparent 4.5px),#fff!important}
.data-scope-picker .scope-chip small{display:block;color:var(--muted);font-weight:500}
.data-scope-picker [data-company-scope-option]>span{min-width:0}
.data-scope-picker [data-company-scope-option][hidden]{display:none!important}
.data-scope-picker .scope-history-warning{margin:12px 0 0}
.data-scope-picker .scope-history-warning p{margin:.35rem 0 0}
.data-scope-picker .sap-scope-builder{min-width:0;max-width:100%;margin:10px 0 8px;padding:14px;border:1px solid var(--line,#e7e7eb);border-radius:14px;background:#fff;overflow:hidden}
.data-scope-picker .sap-scope-builder-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.data-scope-picker .sap-scope-builder-head h4{margin:0 0 .25rem;font-size:1rem}
.data-scope-picker .sap-scope-builder-head p{margin:0}
.data-scope-picker .sap-scope-builder-head .btn{min-height:44px;flex:0 0 auto}
.data-scope-picker .sap-scope-rules{display:grid;gap:10px;margin-top:12px}
.data-scope-picker .sap-scope-rule{min-width:0;max-width:100%;padding:12px;border:1px solid var(--line,#e7e7eb);border-radius:12px;background:var(--surface-subtle,#f8f9fb);overflow:hidden}
.data-scope-picker .sap-scope-rule-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:10px;min-width:0;max-width:100%}
.data-scope-picker .sap-scope-rule-grid label{display:grid;gap:6px;min-width:0;font-size:.78rem;font-weight:800}
.data-scope-picker .sap-scope-rule-grid select{width:100%;min-width:0;max-width:100%;min-height:44px;padding:9px 34px 9px 10px;text-overflow:ellipsis}
.data-scope-picker .sap-scope-rule-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:9px;min-width:0}
.data-scope-picker .sap-scope-rule-footer>span{flex:1 1 240px;min-width:0;color:var(--muted);font-size:.78rem;line-height:1.4;overflow-wrap:anywhere}
.data-scope-picker .sap-scope-remove{flex:0 0 auto;min-height:44px;margin-left:auto}
.data-scope-picker .sap-scope-example{margin-top:12px;padding:12px;border-radius:12px;background:color-mix(in srgb,var(--accent,#df1025) 6%,#fff);font-size:.84rem;overflow-wrap:anywhere}
.data-scope-picker .sap-scope-example p{margin:.35rem 0 0;line-height:1.45}
@media(max-width:640px){
.data-scope-picker .sap-scope-builder-head,.data-scope-picker .sap-scope-rule-footer{align-items:stretch;flex-direction:column}
.data-scope-picker .sap-scope-rule-grid{grid-template-columns:1fr}
.data-scope-picker .sap-scope-builder-head .btn,.data-scope-picker .sap-scope-remove{width:100%}
}
body.theme-dark .data-scope-picker details,body.theme-dark .data-scope-picker .scope-chip{background:#1b1c22}
body.theme-dark .data-scope-picker .sap-scope-builder,body.theme-dark .data-scope-picker .sap-scope-rule{background:#1b1c22}
}
.performance-scope-diagnostics{margin:0 0 22px;padding:16px;border:1px solid var(--line);border-radius:10px;background:#fafafa}
.performance-scope-diagnostics h3{margin:.2rem 0 .4rem}
.performance-scope-diagnostics .account-status-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin:14px 0}
/* ========================================================================== */
/* Betriebsveranstaltungen – Druckbericht
* Quelle: app/templates/bv/report.html
* Seitenscope verhindert Kollisionen mit anderen Modulen.
*/
/* ========================================================================== */
@scope (:root:has(.page-style-bv-report)) {
body { font-family: Arial, sans-serif; margin: 40px; color: #222; font-size: 14px; }
h1 { margin-bottom: 0; }
h2 { margin-top: 2rem; border-bottom: 1px solid #ccc; padding-bottom: .25rem; }
table { border-collapse: collapse; width: 100%; margin-top: .75rem; }
th, td { border: 1px solid #ccc; padding: 6px 10px; text-align: left; }
th { background: #f5f5f5; }
.meta { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem .75rem; margin: 1rem 0; }
.meta dt { color: #666; }
.meta dd { font-weight: bold; margin: 0; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.green { background: #d1fae5; color: #065f46; }
.yellow { background: #fef3c7; color: #92400e; }
.red { background: #fee2e2; color: #991b1b; }
.gray { background: #f3f4f6; color: #374151; }
.total-row { font-weight: bold; background: #f9f9f9; }
@media print { body { margin: 20px; } }
}
/* ========================================================================== */
/* Dokumentencenter – Vorlagenstudio
* Quelle: app/templates/document_center/template_edit.html
* Seitenscope verhindert Kollisionen mit anderen Modulen.
*/
/* ========================================================================== */
@scope (:root:has(.page-style-document-template-edit)) {
/* Demo-Redesign Vorlagenstudio · page-local, additiv, kein Eingriff in app.css */
.vzx-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:5px;margin:24px 24px 0;border-radius:14px;background:#f3f4f6}
.vzx-tab{position:relative;border:0;background:transparent;padding:10px 16px;border-radius:11px;font-size:13px;font-weight:800;color:#5f6673;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.vzx-tab:hover{color:#171a22}
.vzx-tab.is-active{background:#fff;color:#171a22;box-shadow:0 4px 14px rgba(16,20,28,.1)}
.vzx-tab-dot{width:7px;height:7px;border-radius:999px;background:var(--red)}
.vzx-tab-panel[hidden]{display:none}
.vzx-tab-panel .template-studio-section:first-of-type{padding-top:24px!important}
.vzx-studio-spacer{height:12px}
/* Eingabefelder klar als editierbar erkennbar machen */
.template-studio-main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.template-studio-main select,
.template-studio-main textarea{
border:1.5px solid #d7dbe2!important;
box-shadow:0 1px 2px rgba(16,20,28,.04)!important;
transition:border-color .15s ease,box-shadow .15s ease;
}
.template-studio-main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.template-studio-main select:focus,
.template-studio-main textarea:focus{
outline:none!important;
border-color:var(--red)!important;
box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 14%,transparent)!important;
}
.template-option:has(input:checked){
border-color:var(--red)!important;
background:color-mix(in srgb,var(--red) 5%,#fff)!important;
}
/* Lange Listen in der Seitenleiste scrollbar machen statt die ganze Seite zu strecken */
.template-placeholder-panel .placeholder-list{max-height:220px;overflow-y:auto;padding-right:4px}
.vzx-scroll-list{max-height:340px;overflow-y:auto;padding-right:4px;margin-bottom:10px}
}
/* ========================================================================== */
/* Öffentliche Seite – Impressum
* Quelle: app/templates/home/impressum.html
* Seitenscope verhindert Kollisionen mit anderen Modulen.
*/
/* ========================================================================== */
@scope (:root:has(.page-style-home-impressum)) {
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:scope{
--bg:#08090f;--bg2:#0e0f1a;--bg3:#13141f;
--border:rgba(255,255,255,.08);--border2:rgba(255,255,255,.12);
--text:#f0f0f5;--muted:rgba(240,240,245,.55);--muted2:rgba(240,240,245,.3);
--red:#e63946;--accent2:#ff6b6b;
--radius:12px;
}
:scope{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;line-height:1.7;min-height:100vh}
.nav{position:sticky;top:0;z-index:100;padding:.9rem 2rem;display:flex;align-items:center;justify-content:space-between;backdrop-filter:blur(20px);background:rgba(8,9,15,.9);border-bottom:1px solid var(--border)}
.nav-brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.nav-brand img{width:30px;height:30px}
.nav-brand-text b{color:#fff;font-size:.9rem;letter-spacing:.05em}
.nav-back{color:var(--muted);text-decoration:none;font-size:.85rem;font-weight:500;display:flex;align-items:center;gap:.4rem;transition:color .15s}
.nav-back:hover{color:#fff}
.page{max-width:760px;margin:0 auto;padding:3.5rem 2rem 5rem}
.page-header{margin-bottom:3rem}
.page-header-label{font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--accent2);margin-bottom:.6rem}
.page-header h1{font-size:clamp(1.8rem,4vw,2.5rem);font-weight:900;letter-spacing:-.03em;line-height:1.15;margin-bottom:.75rem}
.page-header p{font-size:.9rem;color:var(--muted)}
.imp-section{margin-bottom:2.5rem}
.imp-section h2{font-size:1rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted2);margin-bottom:.9rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)}
.imp-section h3{font-size:1rem;font-weight:700;margin-bottom:.35rem;color:#fff}
.imp-section p{font-size:.92rem;color:var(--muted);margin-bottom:.5rem}
.imp-section p:last-child{margin-bottom:0}
.imp-section a{color:var(--accent2);text-decoration:none}
.imp-section a:hover{text-decoration:underline}
.imp-section ul{list-style:none;padding:0}
.imp-section ul li{font-size:.92rem;color:var(--muted);padding:.25rem 0}
.imp-section ul li::before{content:'→ ';color:var(--muted2)}
.imp-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:1.4rem 1.6rem;margin-top:1rem}
.imp-card p{margin-bottom:.3rem}
.imp-card p:last-child{margin-bottom:0}
.imp-highlight{background:rgba(230,57,70,.06);border:1px solid rgba(230,57,70,.18);border-radius:var(--radius);padding:1.2rem 1.5rem;margin-top:1rem;font-size:.88rem;color:var(--muted)}
.imp-highlight strong{color:#fff}
.footer{background:var(--bg2);border-top:1px solid var(--border);padding:1.8rem 2rem;text-align:center}
.footer a{font-size:.82rem;color:var(--muted);text-decoration:none;margin:0 .8rem;transition:color .15s}
.footer a:hover{color:#fff}
.footer p{font-size:.75rem;color:var(--muted2);margin-top:.8rem}
}
/* ========================================================================== */
/* Öffentliche Seite – Startseite
* Quelle: app/templates/home/index.html
* Seitenscope verhindert Kollisionen mit anderen Modulen.
*/
/* ========================================================================== */
@scope (:root:has(.page-style-home-index)) {
*,*::before,*::after{box-sizing:border-box}
:scope{scroll-behavior:smooth}
body{margin:0;background:#07080d;color:#f7f7fb;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;line-height:1.55;overflow-x:hidden}
a{color:inherit}
img{display:block;max-width:100%}
:scope{--red:#e50922;--red2:#ff4056;--ink:#10131b;--muted:rgba(247,247,251,.68);--soft:rgba(247,247,251,.1);--line:rgba(247,247,251,.14);--card:#11131d;--white:#fff}
.site-nav{position:fixed;left:0;right:0;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px clamp(18px,4vw,56px);background:rgba(7,8,13,.78);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:max-content}
.brand img{width:42px;height:42px;border-radius:12px;box-shadow:0 10px 32px rgba(229,9,34,.35)}
.brand b{display:block;font-size:16px;line-height:1;letter-spacing:.06em}
.brand span span{display:block;margin-top:3px;color:var(--muted);font-size:10px;letter-spacing:.22em;text-transform:uppercase}
.nav-links{display:flex;gap:24px;align-items:center}
.nav-links a{text-decoration:none;color:var(--muted);font-size:14px;font-weight:700}
.nav-links a:hover{color:#fff}
.nav-actions{display:flex;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:999px;text-decoration:none;font-weight:850;border:1px solid transparent;white-space:nowrap;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 18px 38px rgba(229,9,34,.28)}
.btn-soft{background:rgba(255,255,255,.06);border-color:var(--line);color:#fff}
.btn:hover{transform:translateY(-1px)}
.hero{position:relative;min-height:760px;padding:132px clamp(18px,4vw,56px) 72px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-20% -10% auto;height:760px;background:radial-gradient(circle at 50% 10%,rgba(229,9,34,.42),transparent 34%),radial-gradient(circle at 16% 38%,rgba(63,80,255,.18),transparent 30%),radial-gradient(circle at 84% 34%,rgba(255,184,77,.14),transparent 30%);filter:blur(8px);pointer-events:none;animation:heroGlow 14s ease-in-out infinite alternate}
.hero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:72px 72px;mask-image:radial-gradient(circle at 50% 25%,#000,transparent 68%);pointer-events:none;animation:gridDrift 18s linear infinite}
.hero-inner{position:relative;z-index:1;max-width:1220px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,520px);gap:54px;align-items:center}
.kicker{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(229,9,34,.35);background:rgba(229,9,34,.12);color:#ff8b99;border-radius:999px;padding:8px 13px;font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;animation:fadeUp .72s ease both}
.kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red2);box-shadow:0 0 18px var(--red2)}
h1{margin:24px 0 20px;font-size:clamp(44px,6.6vw,84px);line-height:.96;letter-spacing:-.065em;font-weight:950;animation:fadeUp .72s .08s ease both}
.gradient{background:linear-gradient(115deg,#fff 0%,#ffb5bf 42%,#ff4056 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-text{max-width:680px;color:var(--muted);font-size:clamp(17px,2vw,21px);animation:fadeUp .72s .16s ease both}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px;animation:fadeUp .72s .24s ease both}
.proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:42px;max-width:720px}
.proof-card{border:1px solid var(--line);background:rgba(255,255,255,.055);border-radius:16px;padding:16px;animation:fadeUp .62s ease both;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.proof-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.075)}
.proof-card:nth-child(1){animation-delay:.3s}.proof-card:nth-child(2){animation-delay:.38s}.proof-card:nth-child(3){animation-delay:.46s}.proof-card:nth-child(4){animation-delay:.54s}
.proof-card b{display:block;font-size:24px}
.proof-card span{display:block;color:var(--muted);font-size:12px;font-weight:750;text-transform:uppercase;letter-spacing:.1em}
.product-frame{position:relative;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.045));border-radius:28px;padding:18px;box-shadow:0 35px 100px rgba(0,0,0,.42);animation:panelFloat 7s ease-in-out infinite,fadeIn .8s .18s ease both}
.product-frame::before{content:"";position:absolute;inset:auto 12% -34px;height:80px;background:radial-gradient(ellipse,rgba(229,9,34,.36),transparent 72%);filter:blur(26px)}
.mock-window{position:relative;overflow:hidden;border-radius:20px;background:#f2f3f7;color:#11131b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.mock-top{height:42px;background:#12141e;display:flex;align-items:center;gap:8px;padding:0 16px;color:#aeb3c1;font-size:12px}
.traffic{width:10px;height:10px;border-radius:50%;background:#ff5f57;box-shadow:18px 0 #febc2e,36px 0 #28c840;margin-right:40px}
.mock-body{padding:22px;display:grid;gap:16px}
.dash-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.dash-head img{width:52px;height:52px;border-radius:14px}
.dash-head h3{margin:0;font-size:23px;letter-spacing:-.04em}
.dash-head p{margin:2px 0 0;color:#737987;font-size:13px}
.mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mini{background:#fff;border:1px solid #e3e6ed;border-radius:15px;padding:16px;min-height:104px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.mini:hover{transform:translateY(-3px);border-color:#cdd3de;box-shadow:0 14px 28px rgba(17,19,27,.08)}
.mini small{display:block;color:var(--red);font-size:10px;font-weight:950;letter-spacing:.18em;text-transform:uppercase}
.mini b{display:block;margin-top:8px;font-size:20px;line-height:1.05}
.mini p{margin:6px 0 0;color:#6b7280;font-size:12px}
.wide-mini{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;background:#11131b;color:#fff}
.wide-mini .node{width:54px;height:54px;border-radius:16px;background:radial-gradient(circle,#ff4056 0 5px,transparent 6px),linear-gradient(135deg,#272a36,#151720)}
.wide-mini p{color:rgba(255,255,255,.62)}
.wide-mini span{color:#ff8b99;font-weight:900}
section{padding:86px clamp(18px,4vw,56px)}
.wrap{max-width:1220px;margin:0 auto}
.section-head{max-width:760px;margin:0 auto 38px;text-align:center}
.eyebrow{margin:0 0 10px;color:var(--red2);font-weight:950;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
h2{margin:0;color:#fff;font-size:clamp(32px,4.2vw,56px);line-height:1.03;letter-spacing:-.05em}
.section-head p{margin:16px auto 0;color:var(--muted);font-size:18px}
.module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.module-card{position:relative;min-height:208px;padding:24px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));overflow:hidden;transition:transform .2s ease,border-color .2s ease,background .2s ease}
.module-card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.28);background:linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.045))}
.module-card::after{content:"";position:absolute;right:-52px;top:-52px;width:150px;height:150px;border-radius:50%;background:var(--glow,rgba(229,9,34,.16));filter:blur(6px)}
.module-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(229,9,34,.14);border:1px solid rgba(229,9,34,.24);color:#fff;font-weight:950;letter-spacing:.02em}
.module-card h3{position:relative;margin:22px 0 8px;color:#fff;font-size:22px;line-height:1.08;letter-spacing:-.03em}
.module-card p{position:relative;margin:0;color:var(--muted);font-size:14px}
.feature-band{background:#f3f4f7;color:#11131b}
.feature-band h2{color:#11131b}
.feature-band .section-head p{color:#646a76}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.story-card{background:#fff;border:1px solid #dfe3ea;border-radius:24px;padding:28px;box-shadow:0 24px 70px rgba(18,21,30,.08);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.story-card:hover{transform:translateY(-4px);border-color:#cfd5df;box-shadow:0 30px 80px rgba(18,21,30,.12)}
.story-card.dark{background:#11131b;color:#fff;border-color:#242838}
.story-card h3{margin:0 0 14px;font-size:28px;letter-spacing:-.04em}
.story-card p{margin:0 0 18px;color:#666d7a}
.story-card.dark p{color:rgba(255,255,255,.65)}
.flow{display:grid;gap:12px}
.flow-step{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:flex-start}
.flow-step span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--red);color:#fff;font-weight:900}
.flow-step b{display:block}
.flow-step small{display:block;color:#6f7684;margin-top:2px}
.story-card.dark .flow-step small{color:rgba(255,255,255,.58)}
.candidate-panel{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;margin-top:26px}
.portal-preview{border-radius:22px;background:#11131b;color:#fff;padding:24px;min-height:300px;position:relative;overflow:hidden;animation:softPulse 8s ease-in-out infinite}
.portal-preview::before{content:"";position:absolute;inset:-80px -60px auto auto;width:260px;height:260px;border-radius:50%;background:rgba(229,9,34,.36);filter:blur(38px)}
.portal-preview h3{position:relative;margin:0;font-size:28px;letter-spacing:-.04em}
.portal-card{position:relative;margin-top:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:18px}
.portal-card b{display:block;margin-bottom:4px}
.portal-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.pill{display:inline-flex;align-items:center;min-height:36px;border-radius:999px;padding:0 14px;background:#fff;color:#11131b;font-weight:850;font-size:13px}
.pill.red{background:var(--red);color:#fff}
.asset-row{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:24px}
.asset{height:92px;border:1px solid #e1e5ed;background:#fff;border-radius:18px;display:grid;place-items:center;padding:14px;text-align:center;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.asset:hover{transform:translateY(-5px);border-color:#cfd5df;box-shadow:0 18px 36px rgba(18,21,30,.12)}
.asset img{width:74px;max-height:42px;object-fit:contain;margin:0 auto}
.asset.outlook img,.asset.m365 img{width:48px;max-height:48px}
.asset-badge{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-weight:900;letter-spacing:.02em;color:#fff;box-shadow:0 12px 24px rgba(15,23,42,.12);animation:badgeBreath 3.8s ease-in-out infinite}
.asset:nth-child(2) .asset-badge{animation-delay:.25s}.asset:nth-child(3) .asset-badge{animation-delay:.5s}.asset:nth-child(4) .asset-badge{animation-delay:.75s}.asset:nth-child(5) .asset-badge{animation-delay:1s}
.asset small{display:block;margin-top:8px;color:#526179;font-weight:800;font-size:12px}
.asset.sap .asset-badge{background:#1f7ed0}
.asset.m365 .asset-badge{background:#2f7cf6}
.asset.outlook .asset-badge{background:#0f6cbd}
.asset.docs .asset-badge{background:#4053d6}
.asset.identity .asset-badge{background:#17a673}
.cta{padding:96px clamp(18px,4vw,56px);background:linear-gradient(135deg,#11131b,#26090f 62%,#11131b)}
.cta-box{max-width:900px;margin:0 auto;text-align:center}
.cta-box p{color:var(--muted);font-size:18px;margin:18px auto 28px;max-width:680px}
.footer{border-top:1px solid var(--line);padding:34px clamp(18px,4vw,56px);background:#08090f;color:var(--muted)}
.footer-inner{max-width:1220px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-links{display:flex;gap:20px;flex-wrap:wrap}
.footer-links a{text-decoration:none;color:var(--muted);font-weight:700;font-size:14px}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition:none!important}
}
@media(max-width:980px){
.hero{min-height:auto;padding-top:112px}
.hero-inner{grid-template-columns:1fr}
.product-frame{max-width:620px;margin:0 auto}
.module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.story-grid,.candidate-panel{grid-template-columns:1fr}
.nav-links{display:none}
}
@media(max-width:640px){
.site-nav{align-items:flex-start;padding:12px 14px}
:scope,body{max-width:100%;overflow-x:hidden}
.site-nav,.brand,.brand>span,.nav-actions,.hero-inner,.product-frame,.mock-window,.mock-body,.dash-head,.mini-grid{min-width:0;max-width:100%}
.brand{min-width:0;gap:8px}
.brand>span{min-width:0}
.brand b,.brand span span,h1,h2,h3,p{overflow-wrap:anywhere}
.product-frame{width:100%;padding:10px;border-radius:20px}
.mock-body{padding:14px}
.dash-head{align-items:flex-start}
.brand img{width:36px;height:36px}
.brand b{font-size:14px}
.brand span span{font-size:9px}
.nav-actions .btn-soft{display:none}
.nav-actions .btn{min-height:38px;padding:0 12px;font-size:13px}
.hero{padding:92px 16px 48px}
h1{font-size:43px}
.hero-text{font-size:16px}
.proof{grid-template-columns:repeat(2,minmax(0,1fr))}
.mini-grid{grid-template-columns:1fr}
.wide-mini{grid-template-columns:1fr}
section{padding:58px 16px}
.module-grid{grid-template-columns:1fr}
.asset-row{grid-template-columns:repeat(2,1fr)}
.story-card{padding:22px}
.footer-inner{align-items:flex-start;flex-direction:column}
}
}
/* Animationsdefinitionen; wirksam nur über die oben scoped Selektoren. */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes heroGlow{from{transform:translate3d(-18px,-10px,0) scale(1)}to{transform:translate3d(18px,10px,0) scale(1.04)}}
@keyframes gridDrift{from{background-position:0 0,0 0}to{background-position:72px 72px,72px 72px}}
@keyframes panelFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes softPulse{0%,100%{box-shadow:0 0 0 rgba(229,9,34,0)}50%{box-shadow:0 0 46px rgba(229,9,34,.14)}}
@keyframes badgeBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
/* ========================================================================== */
/* HR – Auftragsarbeitsliste
* Quelle: app/templates/hr/tasks.html
* Seitenscope verhindert Kollisionen mit anderen Modulen.
*/
/* ========================================================================== */
@scope (:root:has(.page-style-task-worklist)) {
.vzx-wrap{--vzx-red:#df1025;--vzx-red-d:#b9091b;--vzx-ink:#1a1c23;--vzx-ink2:#3b3f4a;--vzx-mut:#6b7280;--vzx-mut2:#9aa0ab;--vzx-line:#eceef2;--vzx-line2:#e2e4ea;--vzx-red-soft:#fdecef;--c-onb:#6d5ef5;--c-onb-bg:#efedfe;--c-off:#e08334;--c-off-bg:#fbeede;--c-abw:#2f6df0;--c-abw-bg:#e9f1fe;--c-per:#1f9d57;--c-per-bg:#e7f6ee;--c-com:#0fa3a3;--c-com-bg:#e1f5f5;--s-blue:#2f6df0;--s-blue-bg:#e9f1fe;--s-viol:#6d5ef5;--s-viol-bg:#efedfe;--p-red:#df1025;--p-red-bg:#fdecef;--p-org:#e08334;--p-org-bg:#fbeede;--p-grn:#1f9d57;--p-grn-bg:#e7f6ee;--due-tod:#e08334;color:var(--vzx-ink)}
.vzx-wrap *{box-sizing:border-box}.vzx-wrap svg{display:block}
.vzx-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.vzx-topbar h1{margin:0;font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--vzx-ink)}
.vzx-topbar p{margin:4px 0 0;color:var(--vzx-mut);font-size:14px}
.vzx-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.vzx-search{position:relative;display:block;width:min(340px,36vw);min-width:300px;height:52px;padding:0!important;background:transparent!important;border:0!important;border-radius:14px!important;margin:0!important;box-shadow:none!important}
.vzx-search svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);z-index:2;width:18px;height:18px;stroke:var(--vzx-mut2);stroke-width:1.9;fill:none;pointer-events:none}
.vzx-search input{display:block!important;width:100%!important;height:52px!important;border:1px solid var(--vzx-line2)!important;outline:0!important;background:#fff!important;border-radius:14px!important;font:inherit!important;font-weight:700!important;color:var(--vzx-ink)!important;padding:0 18px 0 48px!important;box-shadow:0 8px 22px rgba(20,24,40,.06)!important;appearance:none!important;-webkit-appearance:none!important}
.vzx-search input:focus{border-color:var(--vzx-red)!important;box-shadow:0 0 0 4px var(--vzx-red-soft),0 10px 26px rgba(20,24,40,.08)!important}
.vzx-search input::placeholder{color:var(--vzx-mut2)}
.vzx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 18px;border-radius:14px;font:inherit;font-weight:750;font-size:14px;cursor:pointer;border:1px solid var(--vzx-line2);background:#fff;color:var(--vzx-ink2)}
.vzx-btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.9;fill:none}.vzx-btn:hover{border-color:var(--vzx-mut2)}
.vzx-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:22px}
.vzx-kpi{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--vzx-line);border-radius:14px;padding:18px;box-shadow:0 4px 16px rgba(20,24,40,.05)}
.vzx-kpi-ic{width:48px;height:48px;border-radius:13px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.vzx-kpi-ic svg{width:23px;height:23px;stroke-width:1.9;fill:none}.k-accent{background:var(--vzx-red-soft)}.k-accent svg{stroke:var(--vzx-red)}.k-orange{background:var(--p-org-bg)}.k-orange svg{stroke:var(--p-org)}.k-blue{background:var(--s-blue-bg)}.k-blue svg{stroke:var(--s-blue)}.k-green{background:var(--p-grn-bg)}.k-green svg{stroke:var(--p-grn)}.k-gray{background:#eef1f6}.k-gray svg{stroke:#64748b}
.vzx-kpi small{display:block;color:var(--vzx-mut);font-size:12.5px;font-weight:650}.vzx-kpi b{display:block;font-size:26px;font-weight:800;line-height:1.15;color:var(--vzx-ink)}.vzx-kpi em{font-style:normal;color:var(--vzx-mut2);font-size:12px}
.vzx-board{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}
.vzx-board-head{display:grid;grid-template-columns:minmax(0,1fr) 260px;align-items:stretch;gap:20px;padding:0;border-bottom:0}
.vzx-tabs{display:flex;gap:4px;flex-wrap:wrap;overflow:visible;background:#fff;border:1px solid var(--vzx-line);border-radius:18px;padding:4px 18px 0;box-shadow:0 10px 28px rgba(20,24,40,.045)}
.vzx-tabs a{padding:15px 12px;color:var(--vzx-mut);font-weight:750;font-size:13.5px;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.vzx-tabs a:hover{color:var(--vzx-ink2)}.vzx-tabs a.is-active{color:var(--vzx-red);border-bottom-color:var(--vzx-red)}
.vzx-tabs span{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;margin-left:5px;padding:0 7px;border-radius:999px;background:#f1f2f5;color:var(--vzx-mut);font-size:11px}
.vzx-tabs a.is-active span{background:var(--vzx-red-soft);color:var(--vzx-red)}
.vzx-bulk{display:grid;gap:8px;margin:0}.vzx-bulk .vzx-btn{width:100%;height:44px;border-color:transparent;background:linear-gradient(145deg,var(--vzx-red),var(--vzx-red-d));color:#fff;box-shadow:0 8px 18px rgba(223,16,37,.22)}.vzx-bulk .vzx-btn:disabled{opacity:.42;cursor:not-allowed;box-shadow:none;background:#eef0f4;color:#8b93a0}
.vzx-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:20px;align-items:start;margin-top:12px}
.vzx-tablewrap{min-width:0;padding:0;background:#fff;border:1px solid var(--vzx-line);border-radius:18px;box-shadow:0 18px 38px rgba(20,24,40,.06);overflow:hidden}.vzx-tablescroll{overflow-x:hidden}.vzx-table{width:100%;border-collapse:collapse;min-width:0;table-layout:fixed}
.vzx-table thead th{text-align:left;padding:14px 9px;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--vzx-mut2);border-top:1px solid var(--vzx-line);border-bottom:1px solid var(--vzx-line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vzx-table thead th:first-child,.vzx-table tbody td:first-child{width:30px;padding-left:8px;padding-right:4px;text-align:center}
.vzx-table thead th:nth-child(2),.vzx-table tbody td:nth-child(2){width:24%}
.vzx-table thead th:nth-child(3),.vzx-table tbody td:nth-child(3){width:13%}
.vzx-table thead th:nth-child(4),.vzx-table tbody td:nth-child(4){width:17%}
.vzx-table thead th:nth-child(5),.vzx-table tbody td:nth-child(5){width:11%}
.vzx-table thead th:nth-child(6),.vzx-table tbody td:nth-child(6){width:8%}
.vzx-table thead th:nth-child(7),.vzx-table tbody td:nth-child(7){width:17%}
.vzx-table thead th:nth-child(8),.vzx-table tbody td:nth-child(8){width:10%}
.vzx-table tbody td{padding:15px 9px;border-bottom:1px solid var(--vzx-line);vertical-align:middle;min-width:0}.vzx-table tbody tr[data-href]{cursor:pointer}.vzx-table tbody tr[data-href]:hover{background:#fafbfc}.vzx-table tbody tr:last-child td{border-bottom:0}
.vzx-check{width:16px!important;height:16px!important;min-width:16px;border:1.5px solid var(--vzx-line2);border-radius:5px;appearance:none;-webkit-appearance:none;cursor:pointer;position:relative;top:2px;margin:0;padding:0!important}
.vzx-check:checked{background:var(--vzx-red);border-color:var(--vzx-red)}
.vzx-tt b{display:block;font-weight:750;font-size:14px;color:var(--vzx-ink);line-height:1.25}.vzx-tt small{display:block;color:var(--vzx-mut2);font-size:12.5px;margin-top:2px}
.vzx-person{display:block;min-width:0}.vzx-ava2{display:none}.vzx-person span:last-child{display:block;font-size:13px;font-weight:650;color:var(--vzx-ink2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vzx-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:750;white-space:nowrap}
.b-onb{background:var(--c-onb-bg);color:var(--c-onb)}.b-off{background:var(--c-off-bg);color:var(--c-off)}.b-abw{background:var(--c-abw-bg);color:var(--c-abw)}.b-per{background:var(--c-per-bg);color:var(--c-per)}.b-com{background:var(--c-com-bg);color:var(--c-com)}
.vzx-due b{display:block;font-size:13.5px;font-weight:750}.vzx-due small{display:block;font-size:12px;color:var(--vzx-mut2);margin-top:1px}.due-over{color:var(--vzx-red)}.due-tod{color:var(--due-tod)}.due-norm{color:var(--vzx-ink2)}
.vzx-pill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:750;white-space:nowrap}.pr-high{background:var(--p-red-bg);color:var(--p-red)}.pr-mid{background:var(--p-org-bg);color:var(--p-org)}.pr-low{background:var(--p-grn-bg);color:var(--p-grn)}.st-open{background:var(--s-blue-bg);color:var(--s-blue)}.st-wait{background:var(--s-viol-bg);color:var(--s-viol)}
.vzx-created{color:var(--vzx-mut);font-size:13px;white-space:nowrap}
.vzx-owner{min-width:0}.vzx-owner b{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.2px;color:var(--vzx-ink2);line-height:1.2}.vzx-owner .empty{color:var(--vzx-mut2)}
.vzx-rail{border-left:0;padding:0;background:transparent}.vzx-railcard,.vzx-bulk{background:#fff;border:1px solid var(--vzx-line);border-radius:14px;padding:16px;box-shadow:0 4px 16px rgba(20,24,40,.05)}.vzx-railhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.vzx-railhead h2{margin:0;font-size:15px;font-weight:800}.vzx-railhead a{color:var(--vzx-red);font-size:12.5px;font-weight:750}
.vzx-field{display:block;margin-bottom:12px}.vzx-field span{display:block;font-size:12.5px;font-weight:750;color:var(--vzx-ink2);margin-bottom:6px}.vzx-field select,.vzx-railcard input[type=search]{width:100%;height:40px;padding:0 12px;border:1px solid var(--vzx-line2);border-radius:9px;background:#fff;font:inherit;color:var(--vzx-ink);appearance:none;-webkit-appearance:none}.vzx-field select{background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 12px center}.vzx-field select:focus,.vzx-railcard input:focus{outline:none;border-color:var(--vzx-red);box-shadow:0 0 0 3px var(--vzx-red-soft)}
.vzx-apply{width:100%;height:42px;border:0;border-radius:9px;background:linear-gradient(145deg,var(--vzx-red),var(--vzx-red-d));color:#fff;font:inherit;font-weight:750;cursor:pointer;box-shadow:0 8px 18px rgba(223,16,37,.25)}
.vzx-pager{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-top:1px solid var(--vzx-line);flex-wrap:wrap}.vzx-pager .info{color:var(--vzx-mut);font-size:13px}.vzx-pagenav{display:flex;align-items:center;gap:6px}.vzx-pagenav a{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 6px;border:1px solid var(--vzx-line2);border-radius:9px;color:var(--vzx-ink2);font-weight:750;font-size:13px}.vzx-pagenav a.is-active{background:linear-gradient(145deg,var(--vzx-red),var(--vzx-red-d));color:#fff;border-color:transparent}.vzx-empty{padding:54px 22px;text-align:center;color:var(--vzx-mut)}.vzx-empty h2{margin:0 0 6px;color:var(--vzx-ink);font-size:20px}
@media(max-width:1320px){.vzx-kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1120px){.vzx-board-head,.vzx-layout{grid-template-columns:1fr}.vzx-rail{border-left:0;border-top:0}}
@media(max-width:640px){.vzx-kpis{grid-template-columns:repeat(2,1fr)}.vzx-search{min-width:0;flex:1 1 100%}}
@media(max-width:440px){.vzx-kpis{grid-template-columns:1fr}}
@media(max-width:760px){
.vzx-topbar{gap:14px;margin-bottom:16px}.vzx-topbar h1{font-size:28px}.vzx-actions{width:100%}.vzx-actions .vzx-search{width:100%;min-width:0}.vzx-actions .vzx-btn{display:none}
.vzx-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}.vzx-kpi{min-height:96px;padding:12px;align-items:flex-start}.vzx-kpi-ic{width:38px;height:38px;border-radius:11px}.vzx-kpi-ic svg{width:19px;height:19px}.vzx-kpi small{font-size:11.5px}.vzx-kpi b{font-size:22px}.vzx-kpi em{font-size:11px}
.vzx-board{overflow:visible;border-radius:0}.vzx-board-head{grid-template-columns:1fr;gap:10px;padding:0}.vzx-tabs{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:0;padding:0 8px;border-radius:14px 14px 0 0}.vzx-tabs a{justify-content:center;text-align:center;padding:13px 6px;font-size:12.5px}
.vzx-bulk{padding:10px;margin:0}.vzx-bulk .vzx-btn{height:42px}
.vzx-layout{display:flex;flex-direction:column;gap:12px;margin-top:10px}.vzx-tablewrap{padding:0 0 12px;border-radius:14px}.vzx-tablescroll{overflow:visible}.vzx-table,.vzx-table tbody{display:block;width:100%}.vzx-table thead{display:none}
.vzx-table tbody tr{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px 10px;margin:10px 12px 0;padding:14px;border:1px solid var(--vzx-line);border-radius:14px;background:#fff;box-shadow:0 4px 14px rgba(20,24,40,.045)}
.vzx-table tbody td{display:flex;align-items:center;gap:8px;grid-column:2;border:0;padding:0;min-width:0}.vzx-table tbody td:first-child{grid-column:1;grid-row:1 / span 7;width:30px;padding:2px 0 0;text-align:left;align-items:flex-start}
.vzx-table tbody td:nth-child(2){display:block}.vzx-table tbody td:nth-child(2),.vzx-table tbody td:nth-child(3),.vzx-table tbody td:nth-child(4),.vzx-table tbody td:nth-child(5),.vzx-table tbody td:nth-child(6),.vzx-table tbody td:nth-child(7),.vzx-table tbody td:nth-child(8){width:auto}
.vzx-table tbody td:nth-child(n+3)::before{flex:0 0 82px;color:var(--vzx-mut2);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.vzx-table tbody td:nth-child(3)::before{content:"Mitarbeiter"}.vzx-table tbody td:nth-child(4)::before{content:"Kategorie"}.vzx-table tbody td:nth-child(5)::before{content:"Fällig"}.vzx-table tbody td:nth-child(6)::before{content:"Prio"}.vzx-table tbody td:nth-child(7)::before{content:"Bearbeiter"}.vzx-table tbody td:nth-child(8)::before{content:"Erstellt"}
.vzx-tt b{font-size:15px;line-height:1.22}.vzx-tt small{font-size:12.5px;line-height:1.35}.vzx-person span:last-child,.vzx-owner b,.vzx-created{font-size:13px}.vzx-due b,.vzx-due small{display:inline;margin:0}.vzx-due{flex-wrap:wrap}.vzx-pager{padding:12px 14px}.vzx-pagenav{display:none}
.vzx-rail{border-left:0;border-top:0;padding:0;background:transparent}.vzx-railcard{padding:14px;box-shadow:none}.vzx-railhead h2{font-size:16px}
}
}
/* ========================================================================== */
/* Legal – Fallarbeitsliste
* Quelle: app/templates/legal/cases.html
* Seitenscope verhindert Kollisionen mit anderen Modulen.
*/
/* ========================================================================== */
@scope (:root:has(.page-style-legal-cases)) {
.vzx-wrap{--vzx-red:#df1025;--vzx-red-d:#b9091b;--vzx-ink:#1a1c23;--vzx-ink2:#3b3f4a;--vzx-mut:#6b7280;--vzx-mut2:#9aa0ab;--vzx-line:#eceef2;--vzx-line2:#e2e4ea;--vzx-red-soft:#fdecef;--s-blue:#2f6df0;--s-blue-bg:#e9f1fe;--p-org:#e08334;--p-org-bg:#fbeede;--p-grn:#1f9d57;--p-grn-bg:#e7f6ee;color:var(--vzx-ink)}
.vzx-wrap *{box-sizing:border-box}.vzx-wrap svg{display:block}
.vzx-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.vzx-topbar h1{margin:0;font-size:30px;font-weight:800;letter-spacing:0;color:var(--vzx-ink)}
.vzx-topbar p{margin:4px 0 0;color:var(--vzx-mut);font-size:14px}
.vzx-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.vzx-search{position:relative;display:block;width:min(340px,36vw);min-width:300px;height:52px;margin:0}
.vzx-search svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);z-index:2;width:18px;height:18px;stroke:var(--vzx-mut2);stroke-width:1.9;fill:none;pointer-events:none}
.vzx-search input{display:block!important;width:100%!important;height:52px!important;border:1px solid var(--vzx-line2)!important;border-radius:14px!important;background:#fff!important;padding:0 18px 0 48px!important;font:inherit!important;font-weight:700!important;color:var(--vzx-ink)!important;box-shadow:0 8px 22px rgba(20,24,40,.06)!important}
.vzx-search input:focus{border-color:var(--vzx-red)!important;box-shadow:0 0 0 4px var(--vzx-red-soft),0 10px 26px rgba(20,24,40,.08)!important;outline:none!important}
.vzx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 18px;border-radius:14px;font:inherit;font-weight:800;font-size:14px;cursor:pointer;border:1px solid var(--vzx-line2);background:#fff;color:var(--vzx-ink2);text-decoration:none}
.vzx-btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.9;fill:none}.vzx-btn:hover{border-color:var(--vzx-mut2)}
.vzx-btn--primary,.vzx-apply{border-color:transparent;background:linear-gradient(145deg,var(--vzx-red),var(--vzx-red-d));color:#fff;box-shadow:0 8px 18px rgba(223,16,37,.22)}
.vzx-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:22px}
.vzx-kpi{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--vzx-line);border-radius:14px;padding:18px;box-shadow:0 4px 16px rgba(20,24,40,.05)}
.vzx-kpi-ic{width:48px;height:48px;border-radius:13px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.vzx-kpi-ic svg{width:23px;height:23px;stroke-width:1.9;fill:none}.k-accent{background:var(--vzx-red-soft)}.k-accent svg{stroke:var(--vzx-red)}.k-orange{background:var(--p-org-bg)}.k-orange svg{stroke:var(--p-org)}.k-blue{background:var(--s-blue-bg)}.k-blue svg{stroke:var(--s-blue)}.k-green{background:var(--p-grn-bg)}.k-green svg{stroke:var(--p-grn)}.k-gray{background:#eef1f6}.k-gray svg{stroke:#64748b}
.vzx-kpi small{display:block;color:var(--vzx-mut);font-size:12.5px;font-weight:650}.vzx-kpi b{display:block;font-size:26px;font-weight:800;line-height:1.15;color:var(--vzx-ink)}.vzx-kpi em{font-style:normal;color:var(--vzx-mut2);font-size:12px}
.vzx-board{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}
.vzx-board-head{display:grid;grid-template-columns:minmax(0,1fr) 260px;align-items:stretch;gap:20px;padding:0;border-bottom:0}
.vzx-tabs{display:flex;gap:4px;flex-wrap:wrap;overflow:visible;background:#fff;border:1px solid var(--vzx-line);border-radius:18px;padding:4px 18px 0;box-shadow:0 10px 28px rgba(20,24,40,.045)}
.vzx-tabs a{padding:15px 12px;color:var(--vzx-mut);font-weight:800;font-size:13.5px;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none}
.vzx-tabs a:hover{color:var(--vzx-ink2)}.vzx-tabs a.is-active{color:var(--vzx-red);border-bottom-color:var(--vzx-red)}
.vzx-tabs span{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;margin-left:5px;padding:0 7px;border-radius:999px;background:#f1f2f5;color:var(--vzx-mut);font-size:11px}
.vzx-tabs a.is-active span{background:var(--vzx-red-soft);color:var(--vzx-red)}
.vzx-create{display:grid;gap:8px;margin:0;background:#fff;border:1px solid var(--vzx-line);border-radius:14px;padding:16px;box-shadow:0 4px 16px rgba(20,24,40,.05)}
.vzx-create .vzx-btn{width:100%;height:44px}
.vzx-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:20px;align-items:start;margin-top:12px}
.vzx-tablewrap{min-width:0;padding:0;background:#fff;border:1px solid var(--vzx-line);border-radius:18px;box-shadow:0 18px 38px rgba(20,24,40,.06);overflow:hidden}.vzx-tablescroll{overflow-x:hidden}
.vzx-table{width:100%;border-collapse:collapse;min-width:0;table-layout:fixed}
.vzx-table thead th{text-align:left;padding:14px 9px;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--vzx-mut2);border-top:1px solid var(--vzx-line);border-bottom:1px solid var(--vzx-line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vzx-table tbody td{padding:15px 9px;border-bottom:1px solid var(--vzx-line);vertical-align:middle;min-width:0}.vzx-table tbody tr[data-href]{cursor:pointer}.vzx-table tbody tr[data-href]:hover{background:#fafbfc}.vzx-table tbody tr:last-child td{border-bottom:0}
.vzx-table th:nth-child(1),.vzx-table td:nth-child(1){width:13%;padding-left:18px}.vzx-table th:nth-child(2),.vzx-table td:nth-child(2){width:12%}.vzx-table th:nth-child(3),.vzx-table td:nth-child(3){width:18%}.vzx-table th:nth-child(4),.vzx-table td:nth-child(4){width:12%}.vzx-table th:nth-child(5),.vzx-table td:nth-child(5){width:12%}.vzx-table th:nth-child(6),.vzx-table td:nth-child(6){width:12%}.vzx-table th:nth-child(7),.vzx-table td:nth-child(7){width:11%}.vzx-table th:nth-child(8),.vzx-table td:nth-child(8){width:10%;padding-right:18px}
.vzx-tt b,.vzx-sub b{display:block;font-weight:800;font-size:14px;color:var(--vzx-ink);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vzx-tt small,.vzx-sub small{display:block;color:var(--vzx-mut2);font-size:12.5px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vzx-badge,.vzx-pill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}.vzx-badge{background:var(--s-blue-bg);color:var(--s-blue)}.vzx-pill{background:#eef1f6;color:#64748b}.vzx-pill.is-hot{background:var(--vzx-red-soft);color:var(--vzx-red)}
.vzx-rail{border-left:0;padding:0;background:transparent}.vzx-railcard{background:#fff;border:1px solid var(--vzx-line);border-radius:14px;padding:16px;box-shadow:0 4px 16px rgba(20,24,40,.05)}.vzx-railhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.vzx-railhead h2{margin:0;font-size:15px;font-weight:800}.vzx-railhead a{color:var(--vzx-red);font-size:12.5px;font-weight:800;text-decoration:none}
.vzx-field{display:block;margin-bottom:12px}.vzx-field span{display:block;font-size:12.5px;font-weight:800;color:var(--vzx-ink2);margin-bottom:6px}.vzx-field select,.vzx-field input{width:100%;height:40px;padding:0 12px;border:1px solid var(--vzx-line2);border-radius:9px;background:#fff;font:inherit;color:var(--vzx-ink);appearance:none;-webkit-appearance:none}
.vzx-field select{background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 12px center}.vzx-field select:focus,.vzx-field input:focus{outline:none;border-color:var(--vzx-red);box-shadow:0 0 0 3px var(--vzx-red-soft)}
.vzx-apply{width:100%;height:42px;border:0;border-radius:9px;font:inherit;font-weight:800;cursor:pointer}
.vzx-empty{padding:54px 22px;text-align:center;color:var(--vzx-mut)}.vzx-empty h2{margin:0 0 6px;color:var(--vzx-ink);font-size:20px}
@media(max-width:1320px){.vzx-kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1120px){.vzx-board-head,.vzx-layout{grid-template-columns:1fr}}
@media(max-width:760px){.vzx-topbar{gap:14px;margin-bottom:16px}.vzx-topbar h1{font-size:28px}.vzx-actions{width:100%}.vzx-actions .vzx-search{width:100%;min-width:0}.vzx-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}.vzx-kpi{min-height:96px;padding:12px;align-items:flex-start}.vzx-kpi-ic{width:38px;height:38px;border-radius:11px}.vzx-kpi b{font-size:22px}.vzx-board-head{gap:10px}.vzx-tabs{display:grid;grid-template-columns:1fr 1fr 1fr;width:100%;gap:0;padding:0 8px;border-radius:14px}.vzx-tabs a{text-align:center;padding:13px 6px;font-size:12.5px}.vzx-layout{gap:12px;margin-top:10px}.vzx-tablewrap{border-radius:14px}.vzx-tablescroll{overflow:visible}.vzx-table,.vzx-table tbody{display:block;width:100%}.vzx-table thead{display:none}.vzx-table tbody tr{display:grid;gap:8px;margin:10px 12px 0;padding:14px;border:1px solid var(--vzx-line);border-radius:14px;background:#fff;box-shadow:0 4px 14px rgba(20,24,40,.045)}.vzx-table tbody td{display:grid;grid-template-columns:92px minmax(0,1fr);gap:8px;align-items:start;border:0;padding:0!important;width:auto!important}.vzx-table tbody td::before{content:attr(data-label);color:var(--vzx-mut2);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.vzx-railcard{box-shadow:none}}
}
/* ========================================================================== */
/* Lifecycle – Personalbewegungen
* Quelle: app/templates/lifecycle/index.html
* Seitenscope verhindert Kollisionen mit anderen Modulen.
*/
/* ========================================================================== */
@scope (:root:has(.page-style-lifecycle-index)) {
.vzx-wrap{--vzx-red:#df1025;--vzx-red-d:#b9091b;--vzx-ink:#1a1c23;--vzx-ink2:#3b3f4a;--vzx-mut:#6b7280;--vzx-mut2:#9aa0ab;--vzx-line:#eceef2;--vzx-line2:#e2e4ea;--vzx-red-soft:#fdecef;--s-blue:#2f6df0;--s-blue-bg:#e9f1fe;--p-grn:#1f9d57;--p-grn-bg:#e7f6ee;--p-org:#e08334;color:var(--vzx-ink)}
.vzx-wrap *{box-sizing:border-box}.vzx-wrap svg{display:block}
.vzx-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.vzx-topbar h1{margin:0;font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--vzx-ink)}
.vzx-topbar p{margin:4px 0 0;color:var(--vzx-mut);font-size:14px}
.vzx-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vzx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 16px;border-radius:11px;font:inherit;font-weight:750;font-size:14px;cursor:pointer;border:1px solid var(--vzx-line2);background:#fff;color:var(--vzx-ink2);text-decoration:none}
.vzx-btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.9;fill:none}.vzx-btn:hover{border-color:var(--vzx-mut2)}
.vzx-btn--primary{background:linear-gradient(145deg,var(--vzx-red),var(--vzx-red-d));color:#fff;border-color:transparent;box-shadow:0 8px 18px rgba(223,16,37,.22)}.vzx-btn--primary svg{stroke-width:2.2}
.vzx-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.vzx-kpi{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--vzx-line);border-radius:14px;padding:18px;box-shadow:0 4px 16px rgba(20,24,40,.05)}
.vzx-kpi-ic{width:48px;height:48px;border-radius:13px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.vzx-kpi-ic svg{width:23px;height:23px;stroke-width:1.9;fill:none}
.k-accent{background:var(--vzx-red-soft)}.k-accent svg{stroke:var(--vzx-red)}.k-blue{background:var(--s-blue-bg)}.k-blue svg{stroke:var(--s-blue)}.k-green{background:var(--p-grn-bg)}.k-green svg{stroke:var(--p-grn)}.k-gray{background:#eef1f6}.k-gray svg{stroke:#64748b}
.vzx-kpi small{display:block;color:var(--vzx-mut);font-size:12.5px;font-weight:650}.vzx-kpi b{display:block;font-size:26px;font-weight:800;line-height:1.15;color:var(--vzx-ink)}.vzx-kpi em{font-style:normal;color:var(--vzx-mut2);font-size:12px}
.vzx-board{background:#fff;border:1px solid var(--vzx-line);border-radius:16px;box-shadow:0 10px 30px rgba(20,24,40,.06);overflow:hidden}
.vzx-board-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:4px 18px 0;border-bottom:1px solid var(--vzx-line);flex-wrap:wrap}
.vzx-board-count{color:var(--vzx-mut);font-size:13px;font-weight:650;padding:10px 0}
.vzx-tabs{display:flex;gap:4px;flex-wrap:wrap}
.vzx-tabs a{padding:15px 12px;color:var(--vzx-mut);font-weight:750;font-size:13.5px;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none}
.vzx-tabs a:hover{color:var(--vzx-ink2)}.vzx-tabs a.is-active{color:var(--vzx-red);border-bottom-color:var(--vzx-red)}
.vzx-layout{display:grid;grid-template-columns:minmax(0,1fr) 288px}
.vzx-tablewrap{min-width:0;padding:4px 2px}.vzx-tablescroll{overflow-x:auto}
.vzx-table{width:100%;border-collapse:collapse;table-layout:fixed}
.vzx-table thead th{text-align:left;padding:13px 12px;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--vzx-mut2);border-bottom:1px solid var(--vzx-line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vzx-table thead th:nth-child(1),.vzx-table tbody td:nth-child(1){width:23%}
.vzx-table thead th:nth-child(2),.vzx-table tbody td:nth-child(2){width:13%}
.vzx-table thead th:nth-child(3),.vzx-table tbody td:nth-child(3){width:26%}
.vzx-table thead th:nth-child(4),.vzx-table tbody td:nth-child(4){width:12%}
.vzx-table thead th:nth-child(5),.vzx-table tbody td:nth-child(5){width:14%}
.vzx-table thead th:nth-child(6),.vzx-table tbody td:nth-child(6){width:12%}
.vzx-table tbody td{padding:14px 12px;border-bottom:1px solid var(--vzx-line);vertical-align:middle;min-width:0}
.vzx-table tbody tr{cursor:pointer}.vzx-table tbody tr:hover{background:#fafbfc}.vzx-table tbody tr:last-child td{border-bottom:0}
.vzx-tt b{display:block;font-weight:750;font-size:14px;color:var(--vzx-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vzx-tt small{display:block;color:var(--vzx-mut2);font-size:12.5px;margin-top:2px}
.vzx-sub b{display:block;font-size:13.5px;color:var(--vzx-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vzx-sub small{display:block;color:var(--vzx-mut2);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vzx-created{color:var(--vzx-ink2);font-size:13px;white-space:nowrap}
.lc-type-badge{display:inline-flex;align-items:center;border-radius:999px;padding:4px 10px;background:var(--vzx-red-soft);color:#c01020;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.vzx-table .status-pill{font-size:11.5px;font-weight:700}
.vzx-prog{display:flex;align-items:center;gap:8px}.vzx-prog b{font-size:12.5px;color:var(--vzx-ink2);white-space:nowrap}.vzx-prog-bar{flex:1;min-width:36px;height:6px;background:#eef0f4;border-radius:999px;overflow:hidden}.vzx-prog-bar span{display:block;height:100%;background:var(--p-grn);border-radius:inherit}
.vzx-rail{border-left:1px solid var(--vzx-line);padding:18px;background:#fcfcfd;display:flex;flex-direction:column;gap:16px}
.vzx-railcard{background:#fff;border:1px solid var(--vzx-line);border-radius:14px;padding:16px;box-shadow:0 4px 16px rgba(20,24,40,.05)}
.vzx-railhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.vzx-railhead h2{margin:0;font-size:15px;font-weight:800}.vzx-railhead a{color:var(--vzx-red);font-size:12.5px;font-weight:750;text-decoration:none}
.vzx-field{display:block;margin-bottom:12px}.vzx-field span{display:block;font-size:12.5px;font-weight:750;color:var(--vzx-ink2);margin-bottom:6px}
.vzx-field select,.vzx-railcard input[type=search]{width:100%;height:40px;padding:0 12px;border:1px solid var(--vzx-line2);border-radius:9px;background:#fff;font:inherit;color:var(--vzx-ink);appearance:none;-webkit-appearance:none}
.vzx-field select{background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 12px center}
.vzx-field select:focus,.vzx-railcard input:focus{outline:none;border-color:var(--vzx-red);box-shadow:0 0 0 3px var(--vzx-red-soft)}
.vzx-apply{width:100%;height:42px;border:0;border-radius:9px;background:linear-gradient(145deg,var(--vzx-red),var(--vzx-red-d));color:#fff;font:inherit;font-weight:750;cursor:pointer;box-shadow:0 8px 18px rgba(223,16,37,.25)}
.vzx-pager{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border-top:1px solid var(--vzx-line);flex-wrap:wrap}.vzx-pager .info{color:var(--vzx-mut);font-size:13px}
.vzx-empty{padding:48px 22px;text-align:center;color:var(--vzx-mut)}.vzx-empty h3{margin:0 0 6px;color:var(--vzx-ink);font-size:18px}
@media(max-width:1200px){.vzx-kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1120px){.vzx-layout{grid-template-columns:1fr}.vzx-rail{border-left:0;border-top:1px solid var(--vzx-line)}}
@media(max-width:520px){.vzx-kpis{grid-template-columns:1fr}}
}
/* ========================================================================== */
/* Academy – Meine Kurse
* Quelle: app/templates/training/my.html
* Seitenscope verhindert Kollisionen mit anderen Modulen.
*/
/* ========================================================================== */
@scope (:root:has(.page-style-training-my)) {
:scope{--vz-red:#df1025;--vz-red-d:#b9091b;--vz-ink:#1a1c23;--vz-mut:#6b7280;--vz-mut2:#9aa0ab;--vz-line:#eceef2;--vz-line2:#e2e4ea;--vz-red-soft:#fdecef}
.page-head{display:flex!important;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;max-width:none;margin-bottom:22px}
.page-head h1{font-size:30px!important;font-weight:800;letter-spacing:-.02em;margin:2px 0 4px!important}
.page-head .eyebrow{color:var(--vz-red)!important;letter-spacing:.12em}
.page-head p{color:var(--vz-mut);font-size:14px!important}
.panel{background:#fff!important;border:1px solid var(--vz-line)!important;border-radius:16px!important;box-shadow:0 4px 16px rgba(20,24,40,.05)!important;padding:20px!important;margin-bottom:20px!important}
.panel>h2{font-size:17px!important;font-weight:800;margin:0 0 14px!important}
.training-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important;gap:16px!important}
.training-card{display:flex!important;flex-direction:column;gap:8px;align-items:stretch!important;text-align:left!important;background:#fff!important;border:1px solid var(--vz-line)!important;border-radius:14px!important;padding:18px!important;box-shadow:0 4px 16px rgba(20,24,40,.05)!important;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}
.training-card h2,.training-card p{text-align:left!important}
.training-card:hover{border-color:var(--vz-red)!important;box-shadow:0 12px 30px rgba(20,24,40,.1)!important;transform:translateY(-2px)}
.training-card h2{font-size:16px!important;font-weight:800;margin:4px 0 0!important;line-height:1.3;color:var(--vz-ink)}
.training-card p{color:var(--vz-mut)!important;font-size:13px!important;line-height:1.5;margin:0!important}
.training-category{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:#eef1f6!important;color:#5b6472!important;font-size:11.5px;font-weight:750;width:fit-content}
.training-card-footer{margin-top:auto;padding-top:8px;display:flex;align-items:center;justify-content:space-between;color:var(--vz-red)!important;font-weight:750;font-size:13.5px}
.training-card-footer a{color:var(--vz-red)!important;text-decoration:none}
.training-status-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:750;width:fit-content}
.training-status-confirmed{background:#e7f6ee!important;color:#1f7a45!important}
.training-status-pending{background:#fbeede!important;color:#a35a12!important}
.training-status-waitlist{background:#e9f1fe!important;color:#2f6df0!important}
.training-status-cancelled{background:#eef1f6!important;color:#5b6472!important}
.btn.primary{background:linear-gradient(145deg,var(--vz-red),var(--vz-red-d))!important;color:#fff!important;border:1px solid transparent!important;border-radius:10px!important;height:42px;padding:0 18px!important;font-weight:750;display:inline-flex;align-items:center;box-shadow:0 8px 18px rgba(223,16,37,.2);text-decoration:none}
.certificate-download{margin-top:10px;height:38px;align-self:flex-start}
.muted{color:var(--vz-mut)!important;font-size:13.5px!important}
}
/* ========================================================================== */
/* Academy – Schulungssuche
* Quelle: app/templates/training/search.html
* Seitenscope verhindert Kollisionen mit anderen Modulen.
*/
/* ========================================================================== */
@scope (:root:has(.page-style-training-search)) {
:scope{--vz-red:#df1025;--vz-red-d:#b9091b;--vz-ink:#1a1c23;--vz-mut:#6b7280;--vz-mut2:#9aa0ab;--vz-line:#eceef2;--vz-line2:#e2e4ea;--vz-red-soft:#fdecef}
.page-head{max-width:none;margin-bottom:20px}
.page-head h1{font-size:30px!important;font-weight:800;letter-spacing:-.02em;margin:2px 0 0!important}
.page-head .eyebrow{color:var(--vz-red)!important;letter-spacing:.12em}
.search-row{display:flex!important;gap:10px;align-items:center;background:#fff!important;border:1px solid var(--vz-line)!important;border-radius:14px!important;box-shadow:0 4px 16px rgba(20,24,40,.05)!important;padding:12px!important;margin-bottom:20px!important}
.search-row input,.search-row select{height:42px;border:1px solid var(--vz-line2)!important;border-radius:10px!important;padding:0 14px!important;font:inherit;margin:0;background:#fff!important}
.search-row input{flex:1 1 360px;min-width:260px}
.search-row select{flex:0 0 320px!important;min-width:240px!important;width:auto!important}
.search-row input:focus,.search-row select:focus{outline:none;border-color:var(--vz-red)!important;box-shadow:0 0 0 3px var(--vz-red-soft)}
.training-search-form{align-items:center!important}
.training-search-form .btn{flex:0 0 auto!important;white-space:nowrap!important}
.training-category-filter{display:flex!important;flex-wrap:wrap!important;gap:8px!important;margin:-6px 0 22px!important}
.training-category-filter a{display:inline-flex!important;align-items:center!important;min-height:34px!important;padding:0 12px!important;border:1px solid var(--vz-line)!important;border-radius:999px!important;background:#fff!important;color:#475467!important;font-size:12px!important;font-weight:800!important;text-decoration:none!important}
.training-category-filter a:hover,.training-category-filter a.active{border-color:var(--vz-red)!important;background:var(--vz-red-soft)!important;color:#b9091b!important}
@media(max-width:760px){.training-search-form{flex-direction:column!important;align-items:stretch!important}.search-row input,.search-row select,.training-search-form .btn{width:100%!important;min-width:0!important;flex:0 0 auto!important}}
.training-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important;gap:16px!important}
.training-card{display:flex!important;flex-direction:column;gap:8px;align-items:stretch!important;text-align:left!important;background:#fff!important;border:1px solid var(--vz-line)!important;border-radius:14px!important;padding:18px!important;box-shadow:0 4px 16px rgba(20,24,40,.05)!important;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}
.training-card h2,.training-card p{text-align:left!important}
.training-card:hover{border-color:var(--vz-red)!important;box-shadow:0 12px 30px rgba(20,24,40,.1)!important;transform:translateY(-2px)}
.training-card h2{font-size:16px!important;font-weight:800;margin:4px 0 0!important;line-height:1.3;color:var(--vz-ink)}
.training-card p{color:var(--vz-mut)!important;font-size:13px!important;line-height:1.5;margin:0!important}
.training-card-date{font-weight:750!important;color:#344054!important}
.training-card-content{display:grid!important;gap:5px!important;margin-top:4px!important;padding:12px 14px!important;border:1px solid var(--vz-line)!important;border-radius:12px!important;background:#f8fafc!important}
.training-card-content>span,.training-card-meta b{color:var(--vz-red)!important;font-size:10.5px!important;font-weight:900!important;letter-spacing:.1em!important;text-transform:uppercase!important}
.training-card-content p{display:-webkit-box!important;overflow:hidden!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical!important;color:#4b5565!important}
.training-card-meta{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin-top:2px!important}
.training-card-meta span{display:grid!important;gap:4px!important;min-width:0!important;padding:8px 10px!important;border-radius:10px!important;background:#f3f5f7!important;color:#344054!important;font-size:12px!important;font-weight:750!important}
.training-card-meta span>*{min-width:0!important}
.training-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.training-category{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:#eef1f6!important;color:#5b6472!important;font-size:11.5px;font-weight:750;width:fit-content}
.training-card-footer{margin-top:auto;padding-top:8px;display:flex!important;align-items:center;justify-content:flex-start!important;gap:6px;color:var(--vz-red)!important;font-weight:750;font-size:13.5px;text-align:left!important}
.capacity-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--vz-mut)}
.capacity-status i{width:8px;height:8px;border-radius:50%;background:#1f9d57;display:inline-block}
.capacity-high i,.capacity-full i,.capacity-critical i{background:var(--vz-red)}.capacity-medium i{background:#e08334}
.btn.primary{background:linear-gradient(145deg,var(--vz-red),var(--vz-red-d))!important;color:#fff!important;border:1px solid transparent!important;border-radius:10px!important;height:42px;padding:0 18px!important;font-weight:750;display:inline-flex;align-items:center;box-shadow:0 8px 18px rgba(223,16,37,.2);cursor:pointer}
.panel.empty{background:#fff!important;border:1px solid var(--vz-line)!important;border-radius:16px!important;text-align:center;color:var(--vz-mut);padding:44px 22px!important}.panel.empty h2{color:var(--vz-ink)!important;font-size:18px!important}
}
/* ==========================================================================
Semantische Template-Hilfsklassen
========================================================================== */
.grid-span-full{grid-column:1/-1!important}
.section-gap-top-xs{margin-top:.4rem!important}
.section-gap-top-md{margin-top:.6rem!important}
.section-gap-top{margin-top:.75rem!important}
.section-gap-top-sm{margin-top:12px!important}
.section-gap-top-lg{margin-top:18px!important}
.section-gap-top-xl{margin-top:24px!important}
.message-gap-bottom{margin-bottom:14px!important}
.message-gap-bottom-lg{margin-bottom:18px!important}
.muted-note-top{margin-top:.4rem!important}
.progressive-section-offset{margin:.2rem 0 0!important}
.form-actions-flush{margin:0!important}
.collapsible-heading{cursor:pointer;list-style:none}
.compact-status-form{gap:.5rem!important;margin:0!important}
.numeric-cell{text-align:right!important;font-variant-numeric:tabular-nums}
.inline-action-form{display:inline}
.subsection-title{margin:0!important;font-size:1.4rem!important}
.subsection-title-spaced{margin:0 0 14px!important;font-size:1.4rem!important}
.subsection-copy{margin:.2rem 0 0!important;color:var(--muted);font-size:.85rem}
.table-head-spaced{margin-bottom:14px!important}
.document-row-stretch{align-items:stretch!important}
.document-letterhead-form{flex:1}
.inventory-camera-shell{display:none;max-width:420px;margin-bottom:1rem}
.inventory-camera-video{width:100%;border-radius:12px;background:#000}
.inventory-camera-hint{margin-top:.5rem!important}
.list-row-top{align-items:flex-start!important}
.fleet-step-actions{min-width:300px}
.help-screenshot-figure{margin:0 0 18px}
.help-screenshot-image{max-width:100%;height:auto;border:1px solid var(--line,#e7e7eb);border-radius:10px}
.help-screenshot-caption{margin-top:6px!important}
.payroll-col-date{width:110px}.payroll-col-kind{width:96px}.payroll-col-reference{width:116px}.payroll-col-next{width:118px}.payroll-col-action{width:82px}
.module-card-time{--glow:rgba(20,184,166,.2)}.module-card-absence{--glow:rgba(34,197,94,.2)}
.module-card-payroll{--glow:rgba(245,158,11,.22)}.module-card-hr{--glow:rgba(59,130,246,.22)}
.module-card-documents{--glow:rgba(168,85,247,.22)}.module-card-talent{--glow:rgba(236,72,153,.2)}
.module-card-candidate{--glow:rgba(229,9,34,.22)}.module-card-academy{--glow:rgba(6,182,212,.2)}
.module-card-events{--glow:rgba(132,204,22,.2)}.module-card-it{--glow:rgba(250,204,21,.18)}
.module-card-external{--glow:rgba(99,102,241,.2)}.module-card-ai{--glow:rgba(255,255,255,.12)}
.hero-actions-centered{justify-content:center}.imp-response-note{margin-top:.8rem!important;font-size:.84rem;color:var(--muted2)}.imp-dispute-note{margin-top:.8rem!important}
.report-kicker{color:#666;font-size:12px}.report-disclaimer{font-size:12px;color:#666;margin-top:1.5rem}.report-footer-note{margin-top:3rem;font-size:11px;color:#999}
.bv-kpi-grid-three{grid-template-columns:repeat(3,minmax(0,1fr))!important}.bv-status-top{margin-top:14px!important}
.bv-tax-signal{font-weight:850}.bv-tax-signal-green{color:#10b981}.bv-tax-signal-yellow{color:#f59e0b}.bv-tax-signal-red{color:#ef4444}.bv-tax-signal-gray{color:#9ca3af}
.bv-status{display:inline-flex;align-items:center;padding:.15rem .6rem;border-radius:999px;font-size:.8rem;font-weight:700}
.bv-status-belege-offen{background:#fff4dd;color:#825800}.bv-status-eingereicht{background:#e9f2ff;color:#225eaa}
.bv-status-in-pruefung{background:#f2eaff;color:#7135a5}.bv-status-zurueckgewiesen{background:#fff0f0;color:#a5272f}
.bv-status-freigegeben{background:#eaf8ef;color:#197443}.bv-status-an-buha-uebergeben{background:#ececff;color:#4748a8}
.bv-status-abgeschlossen{background:#eef1f4;color:#525a65}
.wizard-head-spaced{margin:22px 0 10px!important}.wizard-head-spaced-lg{margin:24px 0 10px!important}.option-panel-equal{grid-template-columns:1fr 1fr!important}
#dev-panel .dp-dev-title{font-size:.82rem;font-weight:800;letter-spacing:.12em;color:#ff3944}
#dev-panel .dp-close{display:inline-grid;place-items:center;min-width:44px;min-height:44px;border:0;background:none;color:rgba(255,255,255,.35);font-size:1.1rem;cursor:pointer;line-height:1;padding:0}
#dev-panel .dp-entry-copy{min-width:0;flex:1}
.dp-role-admin{--dp-role-color:#ff3944;--dp-role-bg:rgba(255,57,68,.15)}
.dp-role-payroll{--dp-role-color:#f97316;--dp-role-bg:rgba(249,115,22,.15)}
.dp-role-hr,.dp-role-shop-settings{--dp-role-color:#22c55e;--dp-role-bg:rgba(34,197,94,.12)}
.dp-role-it{--dp-role-color:#60a5fa;--dp-role-bg:rgba(96,165,250,.13)}.dp-role-legal{--dp-role-color:#a855f7;--dp-role-bg:rgba(168,85,247,.13)}
.dp-role-fuhrpark{--dp-role-color:#84cc16;--dp-role-bg:rgba(132,204,22,.13)}.dp-role-document-template-manager{--dp-role-color:#38bdf8;--dp-role-bg:rgba(56,189,248,.13)}
.dp-role-fi-controlling{--dp-role-color:#7c3aed;--dp-role-bg:rgba(124,58,237,.13)}.dp-role-manager{--dp-role-color:#3b82f6;--dp-role-bg:rgba(59,130,246,.13)}
.dp-role-time{--dp-role-color:#14b8a6;--dp-role-bg:rgba(20,184,166,.13)}.dp-role-talent-management{--dp-role-color:#f59e0b;--dp-role-bg:rgba(245,158,11,.13)}
.dp-role-academy-management{--dp-role-color:#06b6d4;--dp-role-bg:rgba(6,182,212,.13)}.dp-role-event-management{--dp-role-color:#f43f5e;--dp-role-bg:rgba(244,63,94,.13)}
.dp-role-performance-hr{--dp-role-color:#db2777;--dp-role-bg:rgba(219,39,119,.13)}.dp-role-performance-hr-monitor{--dp-role-color:#ec4899;--dp-role-bg:rgba(236,72,153,.13)}
.dp-role-data-protection-officer{--dp-role-color:#e11d48;--dp-role-bg:rgba(225,29,72,.13)}.dp-role-aueg-management{--dp-role-color:#0f766e;--dp-role-bg:rgba(15,118,110,.13)}
.dp-role-candidate-offer{--dp-role-color:#fb7185;--dp-role-bg:rgba(251,113,133,.13)}.dp-role-external-doc-user{--dp-role-color:#94a3b8;--dp-role-bg:rgba(148,163,184,.13)}
.dp-role-employee{--dp-role-color:rgba(255,255,255,.35);--dp-role-bg:rgba(255,255,255,.04)}.dp-role-no-access{--dp-role-color:rgba(255,255,255,.24);--dp-role-bg:rgba(255,255,255,.03)}
#dev-panel .dp-group-label[class*="dp-role-"]{color:var(--dp-role-color)!important}
#dev-panel .dp-group-label[class*="dp-role-"] .dp-dot{background:currentColor!important}
#dev-panel .dp-entry[class*="dp-role-"]:hover{background:var(--dp-role-bg)!important}
#dev-panel .dp-avatar[class*="dp-role-"]{background:color-mix(in srgb,var(--dp-role-color) 13%,transparent)!important;border:1px solid color-mix(in srgb,var(--dp-role-color) 32%,transparent)!important;color:var(--dp-role-color)!important}
#dev-panel .dp-badge[class*="dp-role-"]{background:color-mix(in srgb,var(--dp-role-color) 13%,transparent)!important;border:1px solid color-mix(in srgb,var(--dp-role-color) 27%,transparent)!important;color:var(--dp-role-color)!important}
#dev-panel .dp-badge-generic{background:rgba(255,255,255,.06);color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.14)}
#dev-panel .dp-badge-no-access{background:rgba(255,255,255,.05);color:rgba(255,255,255,.36);border:1px solid rgba(255,255,255,.1)}
#dev-panel .dp-badge-self-service{background:rgba(255,255,255,.06);color:rgba(255,255,255,.3)}
@media(max-width:720px){.fleet-step-actions{min-width:0;width:100%}.option-panel-equal{grid-template-columns:1fr!important}}
/* Zugänglicher Sprunglink für bewusst eigenständige öffentliche/printbare Seiten. */
.standalone-skip-link {
position: fixed;
top: 10px;
left: 10px;
z-index: 10000;
padding: 10px 14px;
border-radius: 10px;
background: #ffffff;
color: #11131b;
font: 700 14px/1.2 system-ui, sans-serif;
box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
transform: translateY(-160%);
transition: transform .15s ease;
}
.standalone-skip-link:focus { transform: translateY(0); }
/* CUSTOMER bootstrap security */
.bootstrap-security-page {
width: min(100%, 1040px);
margin: 0 auto;
padding: clamp(1rem, 3vw, 2.5rem) 0;
}
.bootstrap-security-head {
max-width: 760px;
margin-bottom: 1.5rem;
}
.bootstrap-security-head h1 {
margin: .35rem 0 .65rem;
font-size: clamp(2rem, 4vw, 3.25rem);
line-height: 1.02;
letter-spacing: -.045em;
}
.bootstrap-security-head > p:last-child {
margin: 0;
color: var(--muted, #5b687d);
line-height: 1.6;
}
.bootstrap-security-card {
overflow: hidden;
border: 1px solid rgba(148, 163, 184, .32);
border-radius: 24px;
background: #fff;
box-shadow: 0 24px 60px rgba(15, 23, 42, .09);
}
.bootstrap-security-intro {
display: flex;
gap: 1rem;
align-items: flex-start;
padding: clamp(1.25rem, 3vw, 2rem);
color: #fff;
background:
radial-gradient(circle at 92% 0, rgba(232, 0, 40, .34), transparent 34%),
linear-gradient(135deg, #10131c 0%, #1e1118 100%);
}
.bootstrap-security-intro h2 {
margin: .2rem 0 .45rem;
color: #fff;
font-size: clamp(1.35rem, 2.6vw, 1.85rem);
}
.bootstrap-security-intro p:last-child {
max-width: 690px;
margin: 0;
color: rgba(255, 255, 255, .72);
line-height: 1.55;
}
.bootstrap-security-icon {
display: grid;
flex: 0 0 48px;
width: 48px;
height: 48px;
place-items: center;
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 15px;
background: rgba(255, 255, 255, .09);
}
.bootstrap-security-icon svg {
width: 25px;
fill: none;
stroke: #fff;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.8;
}
.bootstrap-security-body {
display: grid;
grid-template-columns: minmax(260px, .8fr) minmax(320px, 1.2fr);
gap: clamp(1.25rem, 4vw, 3rem);
padding: clamp(1.25rem, 3vw, 2rem);
}
.bootstrap-security-summary {
display: grid;
gap: 0;
margin: 0;
overflow: hidden;
align-self: start;
border: 1px solid #e5e9f0;
border-radius: 16px;
background: #f8fafc;
}
.bootstrap-security-summary > div {
display: grid;
gap: .25rem;
padding: .9rem 1rem;
border-bottom: 1px solid #e5e9f0;
}
.bootstrap-security-summary > div:last-child { border-bottom: 0; }
.bootstrap-security-summary dt {
color: #64748b;
font-size: .72rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.bootstrap-security-summary dd {
margin: 0;
color: #111827;
font-weight: 750;
overflow-wrap: anywhere;
}
.bootstrap-security-state {
display: inline-flex;
width: fit-content;
align-items: center;
gap: .45rem;
color: #9a6700;
}
.bootstrap-security-state::before {
width: .55rem;
height: .55rem;
border-radius: 999px;
background: #f59e0b;
content: "";
}
.bootstrap-security-state.is-ready { color: #087443; }
.bootstrap-security-state.is-ready::before { background: #16a36a; }
.bootstrap-security-action { align-self: center; }
.bootstrap-security-action > p:first-child {
margin: 0 0 .35rem;
color: #111827;
font-size: 1.08rem;
}
.bootstrap-security-action .muted {
margin: 0 0 1.15rem;
line-height: 1.55;
}
.bootstrap-security-feedback {
min-height: 1.4rem;
margin: .7rem 0 0;
color: #087443;
font-size: .88rem;
font-weight: 700;
}
.bootstrap-security-footer {
display: flex;
flex-wrap: wrap;
gap: .75rem;
align-items: center;
padding: 1rem clamp(1.25rem, 3vw, 2rem);
border-top: 1px solid #e5e9f0;
background: #fbfcfe;
}
.bootstrap-security-locked {
color: #64748b;
font-size: .9rem;
}
@media (max-width: 760px) {
.bootstrap-security-body { grid-template-columns: 1fr; }
.bootstrap-security-intro { flex-direction: column; }
}