/* ═══════════════════════════════════════════════
   HOFMANN PORTAL – Tischlerei Hofmann Design
   Licht-Theme · Holz · Gold · Handwerk
   ═══════════════════════════════════════════════ */

:root {
  --bg:#FFFFFF; --bg2:#F7F5F1; --bg3:#EDE9E2; --bg4:#E4DDD2;
  --sidebar-bg:#1C1108; --sidebar-w:220px;
  --accent:#B8732A; --accent2:#D4913E; --accent3:#E8A84E;
  --accent-pale:#F5EBD8; --accent-pale2:#FBF4E8;
  --green:#2D7D4A; --green-bg:#EAF5ED;
  --red:#C0392B;   --red-bg:#FCECEA;
  --yellow:#B8870A;--yellow-bg:#FDF6E3;
  --blue:#1A5FA8;  --blue-bg:#E8F1FB;
  --text:#1A1208; --text2:#5C4A2A; --text3:#9C8060; --text4:#BBA888;
  --border:#E4DDD2; --border2:#D4C8A8;
  --topbar-h:58px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Source Sans 3',system-ui,sans-serif;background:var(--bg2);color:var(--text)}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}

/* ─── LOGIN ─── */
#login-screen{display:flex;align-items:center;justify-content:center;height:100vh;background:var(--bg2)}
.login-box{background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:48px 40px;width:400px;box-shadow:0 4px 40px rgba(28,17,8,.10)}
.login-logo{text-align:center;margin-bottom:32px}
.login-logo-icon{width:64px;height:64px;border-radius:14px;background:var(--sidebar-bg);margin:0 auto 14px;display:flex;align-items:center;justify-content:center}
.login-logo h1{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;color:var(--text);letter-spacing:.5px}
.login-logo p{color:var(--text3);font-size:12px;margin-top:4px}
.login-err{color:var(--red);font-size:13px;margin-top:12px;text-align:center}
.login-hint{margin-top:20px;color:var(--text4);font-size:11px;text-align:center}

/* ─── APP SHELL ─── */
#app{display:none;height:100vh;flex-direction:column}
#app.visible{display:flex}

/* ─── TOPBAR ─── */
.topbar{display:flex;align-items:center;justify-content:space-between;height:var(--topbar-h);background:var(--bg);border-bottom:1px solid var(--border);padding:0 20px;flex-shrink:0;box-shadow:0 1px 4px rgba(28,17,8,.06)}
.topbar-logo{display:flex;align-items:center}
.topbar-logo-icon{width:38px;height:38px;border-radius:9px;background:var(--sidebar-bg);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.topbar-logo-text{margin-left:12px}
.topbar-logo-name{font-size:14px;font-weight:700;color:var(--text);line-height:1.1}
.topbar-logo-sub{font-size:9px;color:var(--accent);letter-spacing:1.5px;text-transform:uppercase;font-weight:600}
.topbar-divider{width:1px;height:30px;background:var(--border);margin:0 16px}
.topbar-portal{font-size:11px;color:var(--text3);font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.topbar-right{display:flex;align-items:center;gap:10px}
.user-chip{display:flex;align-items:center;gap:8px;padding:4px 12px 4px 5px;border:1px solid var(--border);border-radius:24px;background:var(--bg2)}
.user-avatar{width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;text-transform:uppercase}
.user-chip-name{font-size:13px;font-weight:600;color:var(--text)}

/* ─── LAYOUT ─── */
.main-layout{display:flex;flex:1;overflow:hidden}

/* ─── SIDEBAR ─── */
.sidebar{width:var(--sidebar-w);background:var(--sidebar-bg);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}
.sidebar-logo{padding:16px;border-bottom:1px solid rgba(255,255,255,.07)}
.sidebar-logo-row{display:flex;align-items:center;gap:10px}
.sidebar-logo-icon{width:32px;height:32px;border-radius:7px;background:rgba(212,145,62,.18);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.sidebar-logo-text .name{font-size:13px;font-weight:700;color:#F5EBD8;letter-spacing:.3px}
.sidebar-logo-text .sub{font-size:8px;color:var(--accent2);letter-spacing:1.8px;text-transform:uppercase;margin-top:1px}
.sidebar-section{padding:18px 16px 5px;font-size:9px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:rgba(245,235,216,.3)}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 16px;cursor:pointer;font-size:13px;color:rgba(245,235,216,.5);border-left:3px solid transparent;transition:all .15s}
.nav-item:hover{background:rgba(212,145,62,.08);color:rgba(245,235,216,.8)}
.nav-item.active{color:#F5EBD8;border-left-color:var(--accent2);background:rgba(212,145,62,.12)}
.nav-item.active svg{stroke:var(--accent2)!important}
.nav-item svg{width:16px;height:16px;flex-shrink:0;stroke:rgba(245,235,216,.4)}
.nav-badge{margin-left:auto;background:var(--red);color:#fff;border-radius:10px;font-size:9px;font-weight:700;padding:1px 6px;min-width:18px;text-align:center}

/* ─── CONTENT ─── */
.content{flex:1;overflow-y:auto;padding:24px;background:var(--bg2)}
.page{display:none}.page.active{display:block}
.page-header{margin-bottom:22px}
.page-header h2{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:700;color:var(--text)}
.page-header p{color:var(--text3);font-size:13px;margin-top:4px}

/* ─── FORMS ─── */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:11px;font-weight:600;color:var(--text3);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.form-group input,.form-group select,.form-group textarea{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:10px 14px;color:var(--text);font-size:14px;font-family:inherit;transition:border-color .2s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(184,115,42,.1)}
.form-group select option{background:var(--bg);color:var(--text)}
.form-group textarea{resize:vertical}

/* ─── BUTTONS ─── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border:none;border-radius:7px;font-size:14px;font-family:inherit;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent2)}
.btn-secondary{background:var(--bg);color:var(--text2);border:1px solid var(--border)}.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}
.btn-success{background:var(--green);color:#fff}
.btn-danger{background:var(--red);color:#fff}
.btn-warning{background:var(--yellow);color:#fff}
.btn-blue{background:var(--blue);color:#fff}
.btn-sm{padding:6px 14px;font-size:12px}
.btn-full{width:100%;justify-content:center}

/* ─── CARDS ─── */
.card{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:20px;margin-bottom:16px}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.card-title{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:700;color:var(--text)}

/* ─── STAT CARDS ─── */
.stat-card{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:18px 20px;border-top:3px solid var(--accent)}
.stat-card.danger{border-top-color:var(--red)}.stat-card.success{border-top-color:var(--green)}.stat-card.info{border-top-color:var(--blue)}
.stat-num{font-family:'Barlow Condensed',sans-serif;font-size:38px;font-weight:700;color:var(--accent);line-height:1}
.stat-card.danger .stat-num{color:var(--red)}.stat-card.success .stat-num{color:var(--green)}.stat-card.info .stat-num{color:var(--blue)}
.stat-label{color:var(--text3);font-size:11px;margin-top:4px;font-weight:600;text-transform:uppercase;letter-spacing:.3px}

/* ─── TABLES ─── */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{background:var(--bg2);color:var(--text3);font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:600;padding:10px 14px;text-align:left;border-bottom:2px solid var(--border)}
td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text)}
tr:hover td{background:var(--bg2)}
tr:last-child td{border-bottom:none}

/* ─── BADGES ─── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap}
.badge-green{background:var(--green-bg);color:var(--green)}
.badge-red{background:var(--red-bg);color:var(--red)}
.badge-yellow{background:var(--yellow-bg);color:var(--yellow)}
.badge-blue{background:var(--blue-bg);color:var(--blue)}
.badge-gray{background:var(--bg3);color:var(--text3)}
.badge-orange{background:var(--accent-pale);color:var(--accent)}

/* ─── MODALS ─── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(28,17,8,.45);z-index:1000;align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:28px;width:580px;max-width:95vw;max-height:90vh;overflow-y:auto;box-shadow:0 8px 40px rgba(28,17,8,.18)}
.modal h3{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;color:var(--text);margin-bottom:20px}
.modal-footer{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}

/* ─── TABS ─── */
.tabs{display:flex;border-bottom:2px solid var(--border);margin-bottom:20px}
.tab{padding:10px 18px;cursor:pointer;font-size:13px;font-weight:600;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;color:var(--text3)}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.tab:hover:not(.active){color:var(--text2)}

/* ─── TICKET CARDS ─── */
.ticket-card{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:all .2s;border-left:4px solid var(--border2)}
.ticket-card:hover{border-color:var(--accent);box-shadow:0 2px 12px rgba(184,115,42,.1)}
.ticket-card.prio-hoch{border-left-color:var(--red)}
.ticket-card.prio-normal{border-left-color:var(--accent)}
.ticket-card.prio-niedrig{border-left-color:var(--text4)}
.ticket-card.closed{opacity:.6}
.ticket-title{font-weight:700;font-size:14px;color:var(--text);margin-top:4px}
.ticket-id{color:var(--text4);font-size:11px}
.ticket-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}

/* ─── WOCHENPLAN ─── */
.wochenplan-grid{overflow-x:auto}
.wp-table{border-collapse:collapse;min-width:900px;font-size:12px;width:100%}
.wp-table th{background:var(--bg3);padding:10px;text-align:center;border:1px solid var(--border);min-width:130px;font-size:11px;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.wp-table td{border:1px solid var(--border);padding:4px;vertical-align:top}
.wp-col-name{min-width:110px;text-align:left!important}
.wp-row-label{background:var(--bg3);font-weight:700;text-align:center;padding:8px 10px;color:var(--text2);font-size:11px}
.wp-row-special{color:var(--text4)!important;font-style:italic;font-size:10px!important}
.wp-cell{position:relative;min-height:80px}
.wp-cell .wp-textarea{width:100%;background:transparent;border:none;color:var(--text);font-size:11px;resize:none;min-height:70px;font-family:inherit;line-height:1.5;padding:4px;padding-top:22px}
.wp-cell .wp-textarea:focus{outline:none;background:rgba(184,115,42,.04);border-radius:4px}
.wp-cell .wp-textarea:disabled{cursor:default;opacity:.9}
.wp-td{transition:background .2s}
.wp-holiday-header{color:var(--red);font-size:10px;font-weight:700}
.wp-legend{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:10px 6px 14px}
.wp-legend-title{font-size:11px;color:var(--text3);font-weight:600;margin-right:4px}
.wp-legend-chip{display:inline-block;width:14px;height:14px;border-radius:4px;border:1.5px solid}
.wp-legend-label{font-size:11px;color:var(--text3);margin-right:8px}

/* ─── FARBWÄHLER ─── */
.wp-picker-anchor{position:absolute;top:3px;right:3px;z-index:20}
.wp-color-btn{width:18px;height:18px;border-radius:50%;border:2px solid var(--border2);background:var(--bg3);cursor:pointer;padding:2px;display:flex;align-items:center;justify-content:center;transition:transform .15s}
.wp-color-btn:hover{transform:scale(1.2);border-color:var(--accent)}
.wp-color-btn-dot{width:8px;height:8px;border-radius:50%;background:var(--border2);display:block;pointer-events:none}
.wp-picker-popup{display:none;position:absolute;top:24px;left:0;background:var(--bg);border:1px solid var(--border2);border-radius:10px;padding:12px;width:230px;box-shadow:0 8px 32px rgba(28,17,8,.15);z-index:999;flex-direction:column;gap:10px}
.wp-picker-popup.open{display:flex}
.wp-picker-popup.wp-picker-left{left:auto;right:0}
.wp-picker-title{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.8px;font-weight:700}
.wp-quick-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.wp-quick-opt{width:34px;height:34px;border-radius:7px;border:2px solid rgba(0,0,0,.08);cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;transition:transform .1s,box-shadow .1s}
.wp-quick-opt:hover{transform:scale(1.15);box-shadow:0 2px 8px rgba(0,0,0,.15)}
.wp-quick-clear{background:transparent!important;border:2px dashed var(--border2)!important;color:var(--text3)}
.wp-quick-clear:hover{border-color:var(--red)!important;color:var(--red)}
.wp-custom-row{display:flex;align-items:center;gap:8px;padding-top:8px;border-top:1px solid var(--border)}
.wp-custom-label{font-size:11px;color:var(--text3);white-space:nowrap}
.wp-custom-input{width:36px;height:30px;border:1px solid var(--border);border-radius:6px;padding:2px;background:var(--bg2);cursor:pointer;flex-shrink:0}
.wp-custom-input::-webkit-color-swatch-wrapper{padding:0}
.wp-custom-input::-webkit-color-swatch{border:none;border-radius:4px}
.wp-custom-apply{flex:1;background:var(--accent);color:#fff;border:none;border-radius:5px;padding:5px 8px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit}
.wp-custom-apply:hover{background:var(--accent2)}

/* ─── ACTIVITY LOG ─── */
.log-entry{border-left:3px solid var(--border2);padding:8px 16px;margin-bottom:12px;position:relative}
.log-entry::before{content:'';position:absolute;left:-5px;top:12px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.log-time{font-size:11px;color:var(--text4)}
.log-author{font-size:12px;font-weight:700;color:var(--accent)}

/* ─── FILE UPLOAD ─── */
.upload-zone{border:2px dashed var(--border2);border-radius:8px;padding:18px;text-align:center;cursor:pointer;transition:all .2s;font-size:13px;color:var(--text3)}
.upload-zone:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-pale2)}
.file-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.file-chip{background:var(--accent-pale);border:1px solid var(--border2);border-radius:20px;padding:4px 12px;font-size:12px;display:flex;align-items:center;gap:6px}
.file-chip a{color:var(--accent);text-decoration:none}.file-chip a:hover{text-decoration:underline}
.file-chip .rm{cursor:pointer;color:var(--red);font-weight:700}

/* ─── FILTER BAR ─── */
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.filter-bar select,.filter-bar input{background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:8px 12px;color:var(--text);font-size:13px;font-family:inherit}
.filter-bar select:focus,.filter-bar input:focus{outline:none;border-color:var(--accent)}
.search-box{width:240px}

/* ─── GRID / LAYOUT HELPERS ─── */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.flex{display:flex;align-items:center;gap:10px}
.flex-between{display:flex;align-items:center;justify-content:space-between}

/* ─── UTILITY ─── */
.mt8{margin-top:8px}.mt16{margin-top:16px}
.text-muted{color:var(--text3);font-size:13px}
.text-accent{color:var(--accent)}
.hidden{display:none!important}
.divider{border:none;border-top:1px solid var(--border);margin:16px 0}
.empty-state{text-align:center;padding:48px 20px;color:var(--text3)}
.empty-state .icon{font-size:40px;margin-bottom:12px}

/* ─── TOAST ─── */
.toast{position:fixed;bottom:24px;right:24px;z-index:9999;padding:12px 20px;border-radius:8px;font-size:14px;font-weight:600;animation:slideIn .3s ease;box-shadow:0 4px 20px rgba(28,17,8,.2)}
.toast-ok{background:var(--green);color:#fff}.toast-err{background:var(--red);color:#fff}
@keyframes slideIn{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ─── DASHBOARD WELCOME BANNER ─── */
.dash-welcome{background:var(--sidebar-bg);border-radius:12px;padding:20px 24px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between}
.dash-welcome-text h2{font-family:'Barlow Condensed',sans-serif;font-size:24px;font-weight:700;color:#F5EBD8}
.dash-welcome-text p{font-size:12px;color:rgba(245,235,216,.6);margin-top:3px}
.dash-quick-actions{display:flex;gap:8px}
.dash-qa-btn{background:rgba(212,145,62,.2);border:1px solid rgba(212,145,62,.3);color:var(--accent3);border-radius:7px;padding:8px 14px;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;font-family:inherit;transition:background .2s}
.dash-qa-btn:hover{background:rgba(212,145,62,.3)}
.dash-qa-btn svg{width:14px;height:14px}

/* ─── DASHBOARD: ACTIVITY FEED ─── */
.activity-item{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.activity-item:last-child{border-bottom:none}
.activity-icon{width:32px;height:32px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.activity-icon svg{width:15px;height:15px}
.activity-body{flex:1}
.activity-title{font-size:13px;font-weight:600;color:var(--text)}
.activity-meta{font-size:11px;color:var(--text3);margin-top:2px}
.activity-time{font-size:11px;color:var(--text4);white-space:nowrap}

/* ─── DASHBOARD: WOCHENPLAN MINI ─── */
.wp-mini-table{width:100%;border-collapse:collapse;font-size:11px}
.wp-mini-table th{background:var(--bg2);padding:6px 8px;text-align:center;border:1px solid var(--border);color:var(--text3);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.wp-mini-table td{border:1px solid var(--border);padding:4px 6px;vertical-align:top;font-size:11px;color:var(--text)}
.wp-mini-table .rl{background:var(--bg3);font-weight:700;color:var(--text2);text-align:center;min-width:70px;font-size:10px}
.wp-mini-today{background:rgba(184,115,42,.07)!important}
.wp-mini-hl{font-size:10px;border-radius:3px;padding:1px 4px;margin:1px 0;display:block}

/* ─── FARBVERWALTUNG ─── */
.farb-liste{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.farb-row{display:grid;grid-template-columns:24px 36px 28px 1fr 36px;align-items:center;gap:10px;padding:8px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;cursor:grab}
.farb-row:active{cursor:grabbing}
.farb-row.dragging{opacity:.5;background:var(--bg3)}
.farb-row.drag-over{border-color:var(--accent);background:var(--accent-pale2)}
.farb-drag-handle{color:var(--text4);font-size:16px;cursor:grab;user-select:none;text-align:center}
.farb-color-input{width:36px;height:30px;border:1px solid var(--border);border-radius:6px;padding:2px;background:var(--bg);cursor:pointer}
.farb-color-input::-webkit-color-swatch-wrapper{padding:0}
.farb-color-input::-webkit-color-swatch{border:none;border-radius:4px}
.farb-preview{width:24px;height:24px;border-radius:50%;border:2px solid;transition:background .2s;flex-shrink:0}
.farb-label-input{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:7px 10px;color:var(--text);font-size:13px;font-family:inherit;width:100%}
.farb-label-input:focus{outline:none;border-color:var(--accent)}
.farb-delete{padding:5px 8px!important;font-size:14px!important}
.farb-preview-section{padding-top:16px;border-top:1px solid var(--border);margin-top:4px}

/* ─── HAMBURGER & OVERLAY ─── */
.hamburger-btn{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:38px;height:38px;background:var(--bg2);border:1px solid var(--border);border-radius:7px;cursor:pointer;padding:0;flex-shrink:0}
.hamburger-btn span{display:block;width:18px;height:2px;background:var(--text2);border-radius:2px;transition:transform .2s,opacity .2s}
.hamburger-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger-btn.open span:nth-child(2){opacity:0}
.hamburger-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(28,17,8,.4);z-index:200}
.sidebar-overlay.active{display:block}
.mobile-bottom-nav{display:none}

/* ═══ TABLET ≤1024px ═══ */
@media(max-width:1024px){
  .hamburger-btn{display:flex}
  .topbar-divider,.topbar-portal,.topbar-logo-text{display:none}
  .sidebar{position:fixed;top:var(--topbar-h);left:0;bottom:0;z-index:300;transform:translateX(-100%);transition:transform .25s ease;width:260px;box-shadow:4px 0 20px rgba(28,17,8,.2)}
  .sidebar.open{transform:translateX(0)}
  .content{padding:16px}
  .grid3{grid-template-columns:1fr 1fr}
  .dash-quick-actions{display:none}
}

/* ═══ MOBIL ≤640px ═══ */
@media(max-width:640px){
  .login-box{width:95vw;padding:28px 20px}
  .topbar{padding:0 12px}
  .user-chip-name{display:none}
  .content{padding:12px;padding-bottom:80px}
  .grid2,.grid3{grid-template-columns:1fr}
  #dash-stats{grid-template-columns:1fr 1fr}
  .stat-num{font-size:28px}
  .dash-welcome{flex-direction:column;align-items:flex-start;gap:12px;padding:16px}
  .page-header.flex-between{flex-direction:column;align-items:flex-start;gap:10px}
  .page-header h2{font-size:22px}
  .page-header .flex,.page-header>.btn{width:100%}
  .filter-bar{flex-direction:column;align-items:stretch}
  .filter-bar select,.filter-bar input,.search-box{width:100%}
  .tabs{overflow-x:auto;flex-wrap:nowrap}
  .tab{white-space:nowrap;flex-shrink:0}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:480px}
  .modal-overlay{align-items:flex-end}
  .modal{width:100vw!important;max-width:100vw;max-height:92vh;border-radius:16px 16px 0 0;padding:20px 16px;margin:0}
  .modal .grid2{grid-template-columns:1fr}
  .btn{min-height:42px}
  .form-group input,.form-group select,.form-group textarea{font-size:16px;padding:12px 14px}
  .wochenplan-grid{overflow-x:auto}
  .wp-table{font-size:10px}
  .wp-table th{min-width:85px;padding:5px 4px;font-size:9px}
  .wp-cell textarea{min-height:52px;font-size:10px}
  #wp-kw-label{min-width:unset!important;font-size:12px;order:-1;width:100%}
  #page-wochenplan .page-header>.flex{flex-wrap:wrap;gap:6px}
  #wp-extra .grid3{grid-template-columns:1fr!important}
  .mobile-bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;height:64px;background:var(--bg);border-top:1px solid var(--border);z-index:150;box-shadow:0 -2px 12px rgba(28,17,8,.08)}
  .mob-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;color:var(--text3);font-size:10px;font-weight:600;transition:color .15s;position:relative;padding-bottom:4px;-webkit-tap-highlight-color:transparent;border:none;background:none}
  .mob-nav-item svg{width:22px;height:22px;stroke:currentColor}
  .mob-nav-item.active{color:var(--accent)}
  .mob-badge{position:absolute;top:5px;right:calc(50% - 20px);background:var(--red);color:#fff;border-radius:10px;font-size:9px;font-weight:700;padding:1px 5px;min-width:16px;text-align:center}
  .toast{bottom:76px;right:12px;left:12px;text-align:center}
  #st-rows>div{display:flex!important;flex-direction:column;gap:6px;padding:10px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;margin-bottom:8px}
  #admin-content .table-wrap table{min-width:600px}
  .farb-row{grid-template-columns:24px 36px 1fr 36px}
  .farb-preview{display:none}
}

/* ═══════════════════════════════════════════════
   MITARBEITER-VERZEICHNIS
   ═══════════════════════════════════════════════ */

/* ─── Grid ─── */
.ma-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
}

/* ─── Karte ─── */
.ma-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 16px 16px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  transition: box-shadow .2s, transform .2s;
  position: relative;
  overflow: hidden;
}
.ma-card:hover {
  box-shadow: 0 4px 20px rgba(28,17,8,.10);
  transform: translateY(-2px);
}

/* ─── Foto-Bereich ─── */
.ma-photo-wrap {
  position: relative;
  margin-bottom: 14px;
}
.ma-avatar-ring {
  width: 100px; height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--border2);
  position: relative;
  background: var(--bg3);
  box-shadow: 0 2px 10px rgba(28,17,8,.08);
}
.ma-photo-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
}
.ma-initials {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700; color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 1px;
}

/* ─── Upload Overlay ─── */
.ma-photo-overlay {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: rgba(28,17,8,.55);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; cursor: pointer;
  opacity: 0; transition: opacity .2s;
  color: #fff; font-size: 10px; font-weight: 600; letter-spacing: .5px;
}
.ma-photo-wrap:hover .ma-photo-overlay { opacity: 1; }

/* ─── Löschen-Button ─── */
.ma-delete-photo {
  position: absolute; top: -2px; right: -2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--red); color: #fff;
  border: 2px solid var(--bg);
  font-size: 10px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s;
  z-index: 5;
}
.ma-photo-wrap:hover .ma-delete-photo { opacity: 1; }

/* ─── Infos ─── */
.ma-info { width: 100%; }
.ma-name {
  font-size: 15px; font-weight: 700; color: var(--text);
  margin-bottom: 3px; line-height: 1.2;
}
.ma-position {
  font-size: 12px; color: var(--text3); margin-bottom: 8px;
}
.ma-role { margin-bottom: 6px; }
.ma-email {
  font-size: 11px; color: var(--text4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  width: 100%;
}

/* ─── Aktionen ─── */
.ma-card-actions {
  margin-top: 12px; width: 100%;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.ma-card-actions .btn { width: 100%; justify-content: center; font-size: 12px; padding: 6px; }

/* ─── Filter/Suche ─── */
.ma-filter-bar {
  display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap; margin-bottom: 20px;
}
.ma-filter-bar input  { flex: 1; min-width: 200px; }
.ma-filter-bar select { width: 180px; }

/* ─── Responsive ─── */
@media (max-width: 1024px) {
  .ma-grid { grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 12px; }
}
@media (max-width: 640px) {
  .ma-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ma-card { padding: 18px 12px 12px; }
  .ma-avatar-ring { width: 80px; height: 80px; }
  .ma-initials { font-size: 22px; }
  .ma-name { font-size: 13px; }
  .ma-filter-bar { flex-direction: column; align-items: stretch; }
  .ma-filter-bar input, .ma-filter-bar select { width: 100%; }
}

/* ═══════════════════════════════════════════════
   GEBURTSTAGS-WIDGET
   ═══════════════════════════════════════════════ */
.bday-list { display: flex; flex-direction: column; gap: 0; }
.bday-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0; border-bottom: 1px solid var(--border);
  gap: 12px;
}
.bday-row:last-child { border-bottom: none; }
.bday-row-today {
  background: var(--accent-pale2);
  border-radius: 8px; padding: 9px 10px; margin: 2px -10px;
  border-bottom: none !important;
}

.bday-cake-dot {
  position: absolute; bottom: -2px; right: -2px;
  font-size: 14px; line-height: 1;
}

/* Tags */
.bday-today-tag {
  background: var(--accent); color: #fff;
  border-radius: 20px; font-size: 10px; font-weight: 700;
  padding: 2px 8px; letter-spacing: .3px;
}
.bday-soon-tag {
  background: var(--yellow-bg); color: var(--yellow);
  border-radius: 20px; font-size: 10px; font-weight: 700;
  padding: 2px 8px;
}
.bday-week-tag {
  background: var(--green-bg); color: var(--green);
  border-radius: 20px; font-size: 10px; font-weight: 700;
  padding: 2px 8px;
}
.bday-days {
  font-size: 11px; color: var(--text3); font-weight: 600;
}

/* Dashboard bottom-grid: 3-spaltig angepasst */
@media (max-width: 1280px) {
  #dash-bottom.grid3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  #dash-bottom.grid3 { grid-template-columns: 1fr; }
}

/* ─── Date-Picker Styling ─────────────────────── */
.birthday-input,
input[type="date"] {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 10px 14px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color .2s;
  cursor: pointer;
}
.birthday-input:focus,
input[type="date"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(184,115,42,.1);
}
/* Chrome/Edge: Kalender-Icon einfärben */
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: .6;
  cursor: pointer;
  filter: brightness(0) saturate(100%) invert(47%) sepia(52%) saturate(490%) hue-rotate(357deg) brightness(95%);
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* ═══════════════════════════════════════════════
   SCHWARZES BRETT
═══════════════════════════════════════════════ */
.sb-card { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:18px 20px; margin-bottom:12px; }
.sb-pinned { border-left:4px solid var(--accent); background:var(--accent-pale2); }
.sb-card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.sb-title { font-size:16px; font-weight:700; color:var(--text); }
.sb-meta  { font-size:11px; color:var(--text3); white-space:nowrap; }
.sb-inhalt{ font-size:13px; color:var(--text2); line-height:1.7; white-space:pre-wrap; }

/* ═══════════════════════════════════════════════
   URLAUBSKALENDER
═══════════════════════════════════════════════ */
.kal-table { border-collapse:collapse; width:100%; font-size:11px; }
.kal-name-th { min-width:90px; background:var(--bg3); padding:8px; text-align:left; border:1px solid var(--border); font-size:11px; font-weight:700; color:var(--text3); position:sticky; left:0; z-index:2; }
.kal-day-th  { min-width:28px; width:28px; background:var(--bg3); padding:5px 2px; text-align:center; border:1px solid var(--border); color:var(--text3); font-weight:600; }
.kal-weekend { background:var(--bg4) !important; }
.kal-today   { background:var(--accent-pale) !important; color:var(--accent) !important; }
.kal-name-cell { background:var(--bg2); padding:6px 10px; border:1px solid var(--border); font-weight:600; font-size:11px; color:var(--text2); position:sticky; left:0; z-index:1; }
.kal-cell  { border:1px solid var(--border); padding:2px; text-align:center; height:28px; transition:background .2s; }
.kal-we-cell { background:var(--bg3); }
.kal-dot   { display:inline-block; width:18px; height:18px; border-radius:3px; background:currentColor; }
.kal-legend { display:flex; align-items:center; gap:8px; padding:8px 0 14px; font-size:11px; color:var(--text3); flex-wrap:wrap; }
.kal-legend-chip { display:inline-block; width:16px; height:16px; border-radius:4px; }

/* ═══════════════════════════════════════════════
   BAUSTELLEN
═══════════════════════════════════════════════ */
.bs-card { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:18px 20px; margin-bottom:12px; }
.bs-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; gap:12px; }
.bs-name { font-size:16px; font-weight:700; color:var(--text); }
.bs-meta { display:flex; flex-wrap:wrap; gap:14px; font-size:12px; color:var(--text3); margin-bottom:10px; }
.bs-progress-wrap { height:8px; background:var(--bg3); border-radius:4px; overflow:hidden; margin-bottom:4px; }
.bs-progress-bar  { height:100%; background:var(--accent); border-radius:4px; transition:width .3s; }
.bs-progress-label{ font-size:11px; color:var(--text3); margin-bottom:8px; }
.bs-notizen { font-size:12px; color:var(--text2); background:var(--bg2); padding:8px 12px; border-radius:6px; margin-top:8px; white-space:pre-wrap; }

/* ═══════════════════════════════════════════════
   FAHRZEUGE & GERÄTE
═══════════════════════════════════════════════ */
.fz-gruppe { margin-bottom:24px; }
.fz-gruppe-title { font-family:'Barlow Condensed',sans-serif; font-size:18px; font-weight:700; color:var(--text); margin-bottom:12px; padding-bottom:6px; border-bottom:2px solid var(--border); }
.fz-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.fz-card { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:16px; }
.fz-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; gap:8px; }
.fz-name { font-size:14px; font-weight:700; color:var(--text); }
.fz-desc { font-size:12px; color:var(--text3); margin-bottom:8px; }
.fz-res-list { margin:8px 0; min-height:32px; }
.fz-res-item { display:flex; align-items:center; justify-content:space-between; font-size:11px; color:var(--text2); padding:4px 0; border-bottom:1px solid var(--border); }
.fz-card-footer { display:flex; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }

/* ═══════════════════════════════════════════════
   DOKUMENTE
═══════════════════════════════════════════════ */
.dok-gruppe { margin-bottom:24px; }
.dok-gruppe-title { font-family:'Barlow Condensed',sans-serif; font-size:18px; font-weight:700; color:var(--text); margin-bottom:12px; padding-bottom:6px; border-bottom:2px solid var(--border); }
.dok-grid { display:flex; flex-direction:column; gap:8px; }
.dok-card { background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:12px 16px; display:flex; align-items:center; gap:14px; transition:box-shadow .2s; }
.dok-card:hover { box-shadow:0 2px 10px rgba(28,17,8,.08); }
.dok-icon { font-size:28px; flex-shrink:0; }
.dok-info { flex:1; min-width:0; }
.dok-name { font-size:13px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dok-meta { font-size:11px; color:var(--text3); }
.dok-actions { display:flex; gap:6px; flex-shrink:0; }

/* ═══════════════════════════════════════════════
   URLAUBSKONTINGENT
═══════════════════════════════════════════════ */
.kontingent-bar { background:var(--accent-pale); border:1px solid var(--border2); border-radius:8px; padding:12px 16px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.kontingent-item { text-align:center; }
.kontingent-num  { font-family:'Barlow Condensed',sans-serif; font-size:24px; font-weight:700; color:var(--accent); }
.kontingent-label{ font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:.5px; }
.kontingent-rest { color:var(--green); }
.kontingent-sep  { width:1px; height:36px; background:var(--border2); }

@media(max-width:640px){
  .fz-grid { grid-template-columns:1fr; }
  .dok-card { flex-wrap:wrap; }
  .kal-table { font-size:9px; }
  .kal-day-th { min-width:20px; width:20px; }
}

/* ═══════════════════════════════════════════════
   AUSWERTUNGEN – Modern
═══════════════════════════════════════════════ */

/* KPI Karten */
.aus-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.aus-kpi {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.aus-kpi-icon {
  width: 42px; height: 42px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.aus-kpi-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px; font-weight: 700; color: var(--text);
  line-height: 1.1;
}
.aus-kpi-label {
  font-size: 11px; color: var(--text3);
  margin-top: 2px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .3px;
}

/* Chart-Layouts */
.aus-row-wide {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.aus-row-equal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

/* Chart Card */
.aus-chart-card, .aus-chart-card-wide, .aus-chart-card-narrow {
  margin-bottom: 0;
}
.aus-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.aus-chart-wrap {
  position: relative;
  width: 100%;
}
.aus-chart-wrap canvas {
  max-width: 100%;
}

/* Responsive */
@media (max-width: 1100px) {
  .aus-kpi-grid  { grid-template-columns: 1fr 1fr; }
  .aus-row-wide  { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .aus-kpi-grid  { grid-template-columns: 1fr 1fr; }
  .aus-row-equal { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .aus-kpi-grid  { grid-template-columns: 1fr; }
  .aus-kpi       { padding: 12px; }
}