:root{--brand:#6548e8;--text:#242139;--muted:#757184;--line:#e9e6f0;--bg:#f7f6fb}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:var(--brand)}button:focus-visible,a:focus-visible{outline:3px solid #aa99fc;outline-offset:4px}[hidden]{display:none!important}.demo-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 4%;background:white;border-bottom:1px solid var(--line)}.demo-brand img{display:block;max-width:100%;height:auto}.demo-header nav{display:flex;align-items:center;gap:25px}.demo-header nav a{text-decoration:none;font-weight:650}.demo-button{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:10px;background:var(--brand);padding:12px 18px;color:white!important;text-decoration:none;font-weight:700}.demo-banner{display:flex;align-items:center;gap:20px;padding:12px 4%;background:#eee9ff;color:#493698;font-size:12px}.demo-banner>b{white-space:nowrap}.demo-banner button{margin-left:auto;border:1px solid #d3c8ff;background:transparent;color:#493698;border-radius:7px;padding:7px 10px;white-space:nowrap}.demo-shell{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:calc(100vh - 130px)}.demo-sidebar{padding:30px 20px;background:#fff;border-right:1px solid var(--line)}.demo-company{display:flex;gap:10px;align-items:center;margin-bottom:35px}.demo-company i{display:grid;place-items:center;background:#ece6ff;color:var(--brand);width:38px;height:38px;border-radius:12px;font-style:normal;font-weight:800}.demo-company small,.demo-admin small{display:block;margin-top:5px;color:var(--muted);font-size:10px}.demo-sidebar nav{display:grid;gap:8px}.demo-sidebar nav button{display:flex;gap:12px;text-align:left;border:0;border-radius:10px;padding:14px;background:transparent;color:#656077;font-weight:650}.demo-sidebar nav button[aria-current=page]{background:#f0ebff;color:var(--brand)}.demo-side-note{margin-top:70px;padding:18px;border-radius:14px;background:#faf9fe;font-size:12px;line-height:1.7}.demo-side-note a{font-weight:700;text-decoration:none}.demo-main{padding:38px;max-width:1500px;width:100%;margin:auto}.demo-title{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:30px}h1{font-size:clamp(25px,3vw,36px);letter-spacing:-1px;margin:9px 0}h2{font-size:19px;margin:0 0 10px}p{color:var(--muted);line-height:1.65}.demo-eyebrow{font-size:10px;letter-spacing:1.5px;color:var(--brand);font-weight:800}.demo-admin{display:flex;align-items:center;gap:10px;white-space:nowrap;color:var(--brand);font-weight:700}.demo-admin>span{color:var(--text);font-size:12px}.demo-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:25px}.demo-stat{background:#fff;border:1px solid var(--line);border-radius:15px;padding:20px}.demo-stat span,.demo-stat small{display:block;color:var(--muted);font-size:12px}.demo-stat b{display:block;font-size:28px;margin:10px 0}.demo-stat small{font-size:11px}.demo-panel{background:white;border:1px solid var(--line);border-radius:17px;padding:24px;margin-bottom:20px}.demo-panel-head{display:flex;justify-content:space-between;align-items:center;gap:15px}.demo-panel-head p{font-size:12px;margin:5px 0 20px}.demo-pill,.demo-status{font-size:10px;border-radius:20px;background:#eaf7ef;color:#277f50;padding:7px 10px;white-space:nowrap}.demo-legend{display:flex;gap:20px;flex-wrap:wrap;padding:10px 0 20px;font-size:11px;color:var(--muted)}.demo-legend span{display:flex;align-items:center;gap:7px}.demo-legend i{width:9px;height:9px;border-radius:3px}.work{background:var(--brand)}.pause{background:#cfbfff}.sick{background:#ffe2e4;color:#ae3d55}.vacation{background:#d8f3e7;color:#208665}.demo-status.pause{color:#7252bb;background:#eee6ff}.demo-status.done{color:#647080;background:#eef0f5}.demo-row{display:grid;grid-template-columns:220px minmax(120px,1fr) 105px;align-items:center;gap:22px;padding:17px 0 24px;border-top:1px solid var(--line)}.demo-person{display:flex;align-items:center;gap:12px;background:none;border:0;text-align:left;padding:0;color:var(--text)}.demo-avatar{width:36px;height:36px;background:#f0ebff;color:var(--brand);border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;flex-shrink:0}.demo-person b{display:block;font-size:12px}.demo-person small{display:block;color:var(--muted);font-size:10px;margin-top:5px}.demo-track{position:relative;height:34px}.demo-track:before{content:"";position:absolute;top:10px;left:0;right:0;height:9px;border-radius:10px;background:#f0edf6}.demo-segment{position:absolute;top:7px;height:15px;border-radius:5px;min-width:2px}.demo-segment.pause{box-shadow:0 0 0 2px white}.demo-track .axis{position:absolute;top:26px;font-size:9px;color:var(--muted)}.demo-track .axis.mid{left:50%;transform:translateX(-50%)}.demo-track .axis.end{right:0}.demo-absence-bar{position:absolute;inset:0 0 auto;height:24px;border-radius:6px;display:grid;place-items:center;font-size:10px}.demo-bottom{display:grid;grid-template-columns:1fr 1fr;gap:20px}.demo-text-button{background:none;border:0;padding:0;color:var(--brand);font-weight:700;text-align:left}.demo-pay-preview{background:#f0ecff}.demo-table-scroll{overflow:auto}table{border-collapse:collapse;width:100%;font-size:12px}th{text-align:left;color:var(--muted);font-size:11px;white-space:nowrap}td,th{padding:14px 12px;border-bottom:1px solid var(--line)}td:first-child,th:first-child{padding-left:0}td .demo-person{white-space:nowrap}td.numbers{white-space:nowrap;font-variant-numeric:tabular-nums}.demo-help{font-size:12px;background:#faf9fe;border-radius:10px;padding:15px;margin:20px 0}.demo-footer{font-size:11px}.demo-footer>span{float:right}.demo-dialog{border:0;border-radius:20px;padding:30px;width:min(800px,calc(100% - 30px));max-height:90vh;box-shadow:0 25px 100px #21173933;color:var(--text)}.demo-dialog::backdrop{background:#21173977;backdrop-filter:blur(3px)}.demo-close{position:absolute;right:18px;top:13px;border:0;background:transparent;font-size:26px;color:var(--muted)}.demo-dialog h2{font-size:25px;padding-right:20px}.demo-dialog .demo-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.demo-dialog .demo-stat{padding:12px}.demo-dialog .demo-stat b{font-size:20px}.demo-actions{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}.demo-actions button{border:1px solid var(--line);background:#f7f5ff;border-radius:9px;padding:11px 16px;color:var(--brand)}.demo-actions button:disabled{opacity:.5;cursor:default}.demo-report-row{display:grid;grid-template-columns:200px 1fr 150px;gap:15px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}.demo-report-bar{height:10px;background:#eeebf6;border-radius:10px;overflow:hidden}.demo-report-bar i{display:block;height:100%;background:var(--brand);border-radius:10px}.demo-report-row>span{font-size:11px;color:var(--muted)}.demo-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:1100px){.demo-shell{grid-template-columns:210px minmax(0,1fr)}.demo-main{padding:25px}.demo-admin{display:none}.demo-row{grid-template-columns:170px minmax(120px,1fr) 95px;gap:15px}.demo-stats{gap:10px}.demo-stat{padding:15px}}@media(max-width:800px){.demo-shell{display:block}.demo-sidebar{padding:14px;border-bottom:1px solid var(--line)}.demo-company,.demo-side-note{display:none}.demo-sidebar nav{display:flex;overflow:auto;gap:6px}.demo-sidebar nav button{white-space:nowrap;padding:10px;font-size:12px}.demo-main{padding:20px 14px}.demo-bottom{grid-template-columns:1fr}.demo-panel{padding:18px}.demo-panel-head{align-items:flex-start;flex-direction:column}.demo-pill{margin-bottom:12px}.demo-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-report-row{grid-template-columns:150px 1fr}.demo-report-row>span{grid-column:2}.demo-header{padding:15px;gap:10px}.demo-header nav{gap:12px;font-size:11px}.demo-header nav a[href='/preise/']{display:none}.demo-brand img{width:130px}.demo-header .demo-button{padding:10px}.demo-banner{padding:12px 15px;flex-wrap:wrap;gap:8px}.demo-banner>span{flex-basis:100%;order:3}.demo-dialog .demo-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:550px){.demo-row{grid-template-columns:1fr auto;gap:10px}.demo-track{grid-row:2;grid-column:1 / -1;margin-top:5px}.demo-row>.demo-status{grid-column:2;grid-row:1}.demo-header nav>a[href='/']{display:none}.demo-footer>span{float:none;display:block;margin-top:12px}.demo-dialog{padding:22px 18px}}

.demo-status.work{background:#eaf7ef;color:#277f50}