:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#17231b; background:#edf1ec; font-synthesis:none; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-height:100vh; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
.login-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at top right,#335f82 0,#173753 42%,#10293d 100%); }
.login-card { width:min(430px,100%); padding:34px; background:#fff; border-radius:24px; box-shadow:0 24px 70px #07130d66; }
.brand { display:flex; align-items:center; gap:13px; font-weight:800; font-size:22px; }
.brand-mark { display:grid; place-items:center; width:44px; height:44px; border-radius:13px; color:#fff; background:#e88206; font-weight:900; }
.login-card h1 { margin:28px 0 8px; font-size:30px; }
.muted { color:#68736b; }
.field { display:grid; gap:7px; margin:18px 0; font-weight:650; }
.field input,.field select,.field textarea { width:100%; padding:13px 14px; border:1px solid #ccd4cd; border-radius:11px; background:#fff; color:#17231b; }
.field textarea { min-height:95px; resize:vertical; }
.primary,.secondary,.ghost,.danger { border:0; border-radius:11px; padding:12px 16px; font-weight:750; }
.primary { background:#e88206; color:#fff; }
.secondary { background:#e8eef3; color:#173753; }
.ghost { background:transparent; color:#315040; }
.danger { background:#ffebe8; color:#9e3026; }
.wide { width:100%; }
.demo-note { margin-top:16px; padding:12px; border-radius:10px; background:#f4f6f2; font-size:13px; }
.shell { min-height:100vh; display:grid; grid-template-columns:250px 1fr; }
.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:24px 16px; color:#edf4f8; background:#173753; }
.sidebar .brand { padding:0 8px 28px; }
.nav { flex:1; min-height:0; display:grid; align-content:start; gap:6px; overflow-y:auto; padding:0 3px 12px 0; }
.nav button { display:flex; gap:11px; align-items:center; width:100%; padding:12px; border:0; border-radius:10px; color:#d9e6de; background:transparent; text-align:left; }
.nav button.active,.nav button:hover { background:#ffffff18; color:#fff; }
.sidebar-foot { margin-top:auto; padding:14px; border-top:1px solid #ffffff22; }
.sidebar-foot small { display:block; color:#a9c0b1; }
.main { min-width:0; padding:30px clamp(18px,4vw,48px) 80px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:26px; }
.topbar h1 { margin:0; font-size:clamp(25px,4vw,36px); }
.actions { display:flex; gap:10px; flex-wrap:wrap; }
.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:24px; }
.stat,.panel,.order-card { background:#fff; border:1px solid #dce3dd; border-radius:16px; box-shadow:0 4px 18px #1d38250b; }
.stat { padding:18px; }
.stat strong { display:block; margin-top:5px; font-size:28px; }
.stat.alert strong { color:#b33d31; }
.toolbar { display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.toolbar input,.toolbar select { padding:11px 13px; border:1px solid #ccd5ce; border-radius:10px; background:#fff; }
.toolbar input { flex:1; min-width:190px; }
.order-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.order-card { padding:19px; border-left:6px solid #83a08c; }
.order-card.priority-sofort { border-left-color:#b9271a; }
.order-card.priority-dringend { border-left-color:#ef6a3b; }
.order-card.priority-wichtig { border-left-color:#e5ad25; }
.order-head { display:flex; justify-content:space-between; gap:14px; }
.order-head h3 { margin:8px 0 5px; font-size:19px; }
.chips { display:flex; gap:7px; flex-wrap:wrap; }
.chip { padding:5px 8px; border-radius:999px; background:#edf1ee; color:#405148; font-size:12px; font-weight:750; }
.chip.sofort { color:#9e2116; background:#ffe5e1; }
.chip.dringend { color:#9e3b17; background:#ffeadf; }
.chip.wichtig { color:#765300; background:#fff1c8; }
.order-meta { display:grid; gap:7px; margin:15px 0; color:#55645b; font-size:14px; }
.order-actions { display:flex; gap:8px; margin-top:15px; }
.panel { padding:22px; }
.panel h2 { margin-top:0; }
.availability { display:grid; gap:10px; }
.day-row { display:grid; grid-template-columns:110px 1fr 1fr auto auto; gap:10px; align-items:center; padding:11px 0; border-bottom:1px solid #e5eae6; }
.day-row input { padding:10px; border:1px solid #ccd5ce; border-radius:9px; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; }
th,td { padding:13px 10px; border-bottom:1px solid #e3e8e4; text-align:left; white-space:nowrap; }
th { color:#647067; font-size:13px; }
.status { display:inline-flex; padding:5px 9px; border-radius:999px; font-size:12px; font-weight:750; background:#e6eef4; color:#173753; }
.material-list { display:grid; gap:10px; margin-top:18px; }
.material-item { display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; padding:14px; border:1px solid #e0e6e9; border-radius:12px; background:#f9fbfc; }
.material-item.done { opacity:.58; text-decoration:line-through; }
.material-item small { display:block; margin-top:4px; color:#6a747c; }
.status.inactive { background:#eee; color:#777; }
.modal-backdrop { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:18px; background:#0b18118f; }
.modal { width:min(700px,100%); max-height:92vh; overflow:auto; padding:25px; border-radius:19px; background:#fff; }
.modal-head { display:flex; justify-content:space-between; align-items:center; }
.modal-head h2 { margin:0; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.span-2 { grid-column:1/-1; }
.customer-choice { display:flex; gap:12px; margin:18px 0 4px; padding:6px; border-radius:12px; background:#eef3f6; }
.customer-choice label { flex:1; padding:11px; border-radius:9px; text-align:center; font-weight:750; background:#fff; color:#173753; cursor:pointer; }
.catalog-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0 22px; }
.catalog-item { display:grid; grid-template-columns:1fr 130px; gap:8px; align-items:center; padding:10px; border:1px solid #dfe6e9; border-radius:10px; background:#f9fbfc; }
.catalog-item span { display:flex; align-items:center; gap:5px; }
.catalog-item input[inputmode="decimal"] { min-width:0; width:72px; padding:8px; border:1px solid #ccd5ce; border-radius:8px; }
.live-head,.live-person,.report-summary { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.live-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.live-card { padding:18px; border:1px solid #dce3dd; border-radius:15px; background:#fff; }
.live-card h3,.live-card p { margin:4px 0; }
.live-person { justify-content:flex-start; align-items:flex-start; }
.live-dot { width:12px; height:12px; margin-top:6px; border-radius:50%; background:#25a55f; box-shadow:0 0 0 5px #25a55f22; }
.map-preview { width:220px; max-width:100%; overflow:hidden; border:1px solid #d7dfe3; border-radius:10px; background:#eef3f5; }
.map-preview iframe { display:block; width:100%; height:110px; border:0; }
.map-preview a { display:block; padding:7px 9px; color:#173753; font-size:12px; font-weight:750; text-decoration:none; }
.report-filter { display:grid; grid-template-columns:2fr 1fr auto; gap:14px; align-items:end; }
.report-summary { margin:22px 0; padding:18px; border-radius:14px; background:#eef3f6; }
.report-summary div span,.report-summary div strong { display:block; }
.report-summary div strong { margin-top:4px; font-size:20px; color:#173753; }
.planning-controls { display:flex; align-items:end; justify-content:space-between; gap:18px; }
.planning-controls .customer-choice { min-width:330px; }
.availability-pill { display:inline-flex; padding:6px 8px; border-radius:8px; font-size:12px; font-weight:750; white-space:nowrap; }
.availability-pill.all-day { background:#dff1e5; color:#21623a; }
.availability-pill.timed { background:#e3eef6; color:#173753; }
.availability-pill.off { background:#f5e5e3; color:#94362d; }
.availability-pill.missing { background:#eee; color:#777; }
.availability-pill.vacation { background:#fff0c9; color:#795500; }
.availability-head { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; }
.availability-head h2 { margin-bottom:5px; }
.availability-row strong small { display:block; margin-top:3px; color:#748078; font-weight:500; }
.vacation-panel { margin-top:18px; }
.vacation-form { display:grid; grid-template-columns:1fr 1fr 2fr auto; gap:12px; align-items:end; }
.vacation-list { display:grid; gap:8px; }
.vacation-list article { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 14px; border:1px solid #e0e6e1; border-radius:11px; }
.vacation-list small { display:block; margin-top:4px; color:#68736b; }
.danger-text { color:#a63328; }
.success-note { display:inline-block; margin-top:12px; padding:10px 12px; border-radius:10px; background:#dff1e5; color:#21623a; }
.user-head { align-items:flex-start; justify-content:space-between; }
.row-actions { display:flex; gap:7px; align-items:center; }
.button-link { display:inline-flex; align-items:center; text-decoration:none; }
.archive-create { display:flex; align-items:end; gap:12px; max-width:480px; margin:20px 0; }
.time-actions { display:flex; align-items:end; gap:12px; margin:18px 0; }
.adjustment-form { display:grid; grid-template-columns:1.2fr 1fr 1fr 2fr auto; gap:10px; align-items:end; margin-bottom:24px; }
.notification-setup { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; padding:12px 14px; border-radius:11px; background:#eef3f6; }
.notification-setup small { display:block; margin-top:3px; color:#68736b; }
.empty.compact { padding:20px; }
.dashboard-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }
.announcement-create textarea { min-height:80px; }
.news-editor-tools { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
.news-upload { padding:13px; border:1px dashed #aebcb2; border-radius:12px; background:#f8faf8; }
.news-content { min-width:0; flex:1; }
.news-content>p { white-space:pre-wrap; line-height:1.55; }
.news-images { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:12px 0; }
.news-images img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; }
.project-photo-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:14px; border:1px solid #dce3dd; border-radius:12px; background:#f8faf8; }
.project-photo-fields small { color:#68736b; }
.news-list,.new-order-list { display:grid; gap:10px; }
.news-list article,.new-order-list article { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:14px; border:1px solid #dfe6e1; border-radius:12px; background:#fafcfa; }
.news-list p,.new-order-list p { margin:5px 0; }
.news-list small,.new-order-list small { color:#68736b; }
.material-news { border-left:5px solid #e88206 !important; background:#fff8ed !important; }
.home-section-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.home-section-head h2,.new-order-list h3 { margin:0; }
.new-order-list article { border-left:5px solid #83a08c; }
.new-order-list article.priority-sofort { border-left-color:#b9271a; }
.new-order-list article.priority-dringend { border-left-color:#ef6a3b; }
.new-order-list article.priority-wichtig { border-left-color:#e5ad25; }
.month-hours { display:grid; gap:5px; margin-bottom:18px; padding:20px 22px; border-radius:16px; color:#fff; background:linear-gradient(135deg,#173753,#335f82); box-shadow:0 8px 24px #1737532b; }
.month-hours strong { font-size:34px; }
.month-hours small { color:#d9e6ee; }
.subnav { display:flex; gap:8px; margin-bottom:18px; padding:5px; border-radius:12px; background:#eef3f0; }
.subnav button { flex:1; padding:11px; border:0; border-radius:9px; background:transparent; color:#536159; font-weight:750; cursor:pointer; }
.subnav button.active { background:#fff; color:#173753; box-shadow:0 2px 8px #17375314; }
.year-vacations { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.year-vacations article { min-height:150px; padding:14px; border:1px solid #dce3dd; border-radius:12px; background:#fafcfa; }
.year-vacations h3 { margin:0 0 10px; text-transform:capitalize; color:#173753; }
.year-vacations p { margin:7px 0; padding-top:7px; border-top:1px solid #e5eae6; }
.year-vacations p span,.year-vacations p small { display:block; margin-top:2px; }
.month-planning { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.month-planning article { padding:12px; border:1px solid #dce3dd; border-radius:12px; background:#fafcfa; }
.month-planning article>strong { display:block; margin-bottom:8px; color:#173753; }
.month-planning article div { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:5px 0; border-top:1px solid #e8ece9; font-size:12px; }
.empty { padding:40px; text-align:center; color:#68736b; background:#fff; border-radius:16px; }
.mobilebar { display:none; }
.catalog-picker { padding:16px; border:1px solid #dce3dd; border-radius:14px; background:#fafcfa; }
.catalog-picker h3 { margin-top:0; }
.picker-row,.new-catalog { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; margin-bottom:12px; }
.new-catalog { grid-template-columns:minmax(0,1.4fr) minmax(110px,.6fr) auto; padding-top:12px; border-top:1px solid #dce3dd; }
.selected-plans { display:grid; gap:8px; margin:10px 0 14px; }
.selected-plan { display:grid; grid-template-columns:minmax(140px,1fr) auto auto auto; align-items:center; gap:8px; padding:9px 10px; border-radius:10px; background:#eef3f0; }
.selected-plan label { display:flex; align-items:center; gap:6px; font-size:12px; }
.selected-plan input { width:90px; }
@media(max-width:850px){
  .shell{display:block}.sidebar{display:none}.main{padding:20px 14px 100px}.stats{grid-template-columns:repeat(2,1fr)}.order-grid,.live-grid,.month-planning,.year-vacations,.dashboard-grid,.project-photo-fields{grid-template-columns:1fr}.topbar{align-items:flex-start}.mobilebar{position:fixed;z-index:8;display:flex;bottom:0;left:0;right:0;gap:2px;padding:8px max(8px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));background:#173753;justify-content:flex-start;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}.mobilebar button{flex:0 0 86px;border:0;background:transparent;color:#e4edf3;padding:8px 5px;font-size:11px;white-space:nowrap}.mobilebar button.active{color:#f39a2e;background:#ffffff12;border-radius:9px}.day-row{grid-template-columns:1fr 1fr}.day-row strong{grid-column:1/-1}.availability-row label{font-size:12px}.form-grid,.report-filter,.vacation-form,.adjustment-form{grid-template-columns:1fr}.span-2{grid-column:auto}.material-item{grid-template-columns:1fr auto}.catalog-grid{grid-template-columns:1fr}.report-summary,.planning-controls,.availability-head,.time-actions{align-items:flex-start;flex-direction:column}.planning-controls .customer-choice{min-width:0;width:100%}.news-images{grid-template-columns:repeat(2,minmax(0,1fr))}.picker-row,.new-catalog,.selected-plan{grid-template-columns:1fr}.selected-plan input{width:100%}}
@media(max-width:480px){.login-card{padding:24px}.stats{grid-template-columns:1fr 1fr}.stat{padding:14px}.stat strong{font-size:23px}.actions .secondary{display:none}}