:root {
  --bg:     #f4f6fa;
  --card:   #ffffff;
  --line:   #e5e7eb;
  --text:   #111827;
  --muted:  #6b7280;
  --blue:   #2563eb;
  --green:  #16a34a;
  --yellow: #d97706;
  --red:    #dc2626;
  --sb:#eff6ff; --sg:#f0fdf4; --sy:#fffbeb; --sr:#fef2f2; --sp:#faf5ff;
  --r:12px;
  --shadow:0 1px 8px rgba(0,0,0,.08);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:system-ui,-apple-system,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;}

/* ── TOPBAR ── */
#topbar{display:flex;align-items:center;gap:10px;padding:10px 20px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100;}
.brand{font-size:18px;font-weight:800;margin-right:auto;letter-spacing:-.3px;}
.brand span{color:var(--blue);}
.role-pill-active{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid var(--line);background:#fff;}
.btn,.sel{border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 13px;font-size:13px;font-family:inherit;cursor:pointer;font-weight:600;transition:filter .12s;}
.btn:hover{filter:brightness(.95);}
.btn.primary{background:var(--blue);color:#fff;border-color:var(--blue);}
.btn.green-btn{background:var(--green);color:#fff;border-color:var(--green);}
.btn.yellow-btn{background:var(--yellow);color:#fff;border-color:var(--yellow);}
.btn.ghost{background:#fff;color:var(--text);}
.btn.sm{padding:4px 10px;font-size:12px;}
.btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none;}
#notif-btn{position:relative;}
#notif-badge{display:none;align-items:center;justify-content:center;background:var(--red);color:#fff;border-radius:50%;width:14px;height:14px;font-size:9px;font-weight:700;position:absolute;top:-3px;right:-3px;}

/* ── SHELL ── */
#shell{display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - 47px);}

/* ── SIDEBAR ── */
#sidebar{background:#fff;border-right:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;gap:5px;position:sticky;top:47px;height:calc(100vh - 47px);overflow-y:auto;}
#sidebar h3{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);padding:0 4px;margin:8px 0 4px;}
.proj-item{padding:9px 11px;border:1px solid var(--line);border-radius:9px;cursor:pointer;transition:all .12s;}
.proj-item:hover{background:var(--sb);}
.proj-item.active{border-color:var(--blue);background:var(--sb);}
.proj-item .pi-name{font-weight:700;font-size:13px;}
.proj-item .pi-meta{font-size:11px;color:var(--muted);margin-top:2px;}
.proj-item .pi-alert{font-size:11px;color:var(--red);margin-top:2px;}
#add-proj{margin-top:auto;background:none;border:1px dashed var(--line);color:var(--muted);padding:8px;border-radius:9px;cursor:pointer;font-family:inherit;font-size:12px;text-align:center;transition:all .12s;}
#add-proj:hover{border-color:var(--blue);color:var(--blue);}

/* ── MAIN ── */
#main{padding:18px;display:flex;flex-direction:column;gap:14px;}

/* ── STATUS BANNER ── */
.status-banner{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 18px;}
.sb-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;}
.sb-title{font-size:22px;font-weight:800;margin-bottom:6px;}
.overall-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-weight:700;font-size:12px;margin-bottom:8px;}
.ob-red{background:var(--sr);color:var(--red);border:1px solid #fecaca;}
.ob-yellow{background:var(--sy);color:var(--yellow);border:1px solid #fde68a;}
.ob-green{background:var(--sg);color:var(--green);border:1px solid #86efac;}
.deadline-box{min-width:190px;background:var(--sy);border:1px solid #fde68a;padding:12px 14px;border-radius:10px;flex-shrink:0;}
.deadline-box.urgent{background:var(--sr);border-color:#fecaca;}
.dl-label{font-size:10px;text-transform:uppercase;font-weight:700;color:#92400e;margin-bottom:2px;}
.deadline-box.urgent .dl-label{color:var(--red);}
.dl-time{font-size:15px;font-weight:800;color:#78350f;}
.deadline-box.urgent .dl-time{color:var(--red);}
.dl-diff{font-size:11px;color:#92400e;margin-top:1px;}
.deadline-box.urgent .dl-diff{color:var(--red);}

/* progress bar */
.prog-row{display:flex;align-items:center;gap:10px;margin-top:12px;}
.prog-bar{flex:1;background:var(--line);border-radius:999px;height:6px;overflow:hidden;}
.prog-fill{height:100%;background:var(--green);transition:width .3s;}
.prog-label{font-size:12px;color:var(--muted);white-space:nowrap;}

/* ── ROLE NOTICE ── */
.role-notice{border-radius:9px;padding:10px 14px;font-size:13px;display:flex;align-items:center;gap:8px;}
.rn-agentur{background:var(--sb);border:1px solid #93c5fd;color:#1e40af;}
.rn-norbert{background:var(--sy);border:1px solid #fde68a;color:#78350f;}
.rn-bettina{background:var(--sp);border:1px solid #c4b5fd;color:#5b21b6;}
.rn-melanie{background:var(--sg);border:1px solid #86efac;color:#166534;}
.rn-produktion{background:#f9fafb;border:1px solid var(--line);color:var(--muted);}
.rn-cc-intern{background:#faf5ff;border:1px solid #d8b4fe;color:#6b21a8;}

/* ── FLÄCHEN CARDS ── */
.flaechen-grid{display:flex;flex-direction:column;gap:8px;}

.flaeche-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);}

/* card body */
.fc-body{padding:14px 16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.fc-name{font-size:15px;font-weight:800;min-width:70px;}
.fc-col{display:flex;flex-direction:column;gap:3px;min-width:120px;}
.fc-col-label{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
.fc-col-val{font-size:13px;}
.fc-col-val.missing{color:var(--red);font-style:italic;}
.fc-col-val.ok{color:var(--green);font-weight:600;}
.fc-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-left:auto;}

/* status pill */
.st-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;}
.st-1{background:#f9fafb;color:var(--muted);border:1px solid var(--line);}
.st-2{background:var(--sb);color:var(--blue);border:1px solid #93c5fd;}
.st-3{background:var(--sy);color:var(--yellow);border:1px solid #fde68a;}
.st-6{background:var(--sr);color:var(--red);border:1px solid #fecaca;animation:pulse-red 1.8s ease-in-out infinite;}
.st-7{background:var(--sy);color:var(--yellow);border:1px solid #fde68a;animation:pulse-yellow 1.8s ease-in-out infinite;}
.st-8{background:#f1f5f9;color:#64748b;border:1px solid #cbd5e1;}
.st-4{background:var(--sp);color:#7c3aed;border:1px solid #c4b5fd;}
.st-5{background:var(--sg);color:var(--green);border:1px solid #86efac;}
.st-9{background:#ede9fe;color:#5b21b6;border:1px solid #a78bfa;}
@keyframes pulse-red{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.25)}50%{box-shadow:0 0 0 4px rgba(220,38,38,0)}}
@keyframes pulse-yellow{0%,100%{box-shadow:0 0 0 0 rgba(217,119,6,.2)}50%{box-shadow:0 0 0 4px rgba(217,119,6,0)}}

/* ampel dot */
.ampel{width:13px;height:13px;border-radius:50%;flex-shrink:0;display:inline-block;}
.ampel.rot{background:var(--red);}
.ampel.gelb{background:var(--yellow);}
.ampel.gruen{background:var(--green);}
.ampel.lila{background:#7c3aed;}

/* masse input inline */
.masse-input{border:1px solid var(--line);border-radius:7px;padding:5px 9px;font-size:13px;font-family:inherit;width:160px;background:#fff;}
.masse-input:focus{outline:none;border-color:var(--blue);}
.masse-input.warn{border-color:#fde68a;background:var(--sy);}

/* file chip */
.file-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;background:#f3f4f6;border:1px solid var(--line);border-radius:6px;font-size:12px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ── BETTINA VIEW ── (#bettina-view und .bv-table sitzen auf demselben <table>) */
#bettina-view.bv-table{width:100%;border-collapse:collapse;table-layout:auto;}
#bettina-view.bv-table th{text-align:left;padding:8px 12px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border-bottom:2px solid var(--line);}
#bettina-view.bv-table td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top;}
#bettina-view.bv-table thead tr:hover td{background:transparent;}
#bettina-view.bv-table > tbody > tr:hover > td{background:#fafafa;}
#bettina-view.bv-table th:first-child,
#bettina-view.bv-table td:first-child{min-width:min(220px,45vw);}
.bv-proj-name{font-weight:700;font-size:14px;display:block;line-height:1.35;color:var(--text);}
.bv-proj-deadline{font-size:11px;color:var(--muted);margin-top:4px;}

/* ── PRODUKTION VIEW ── */
.prod-card{background:#fff;border:1px solid #86efac;border-left:4px solid var(--green);border-radius:var(--r);padding:14px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.prod-card .pc-name{font-size:15px;font-weight:800;}
.prod-card .pc-file{font-size:12px;color:var(--muted);}
.prod-card .pc-masse{font-size:12px;color:var(--green);font-weight:600;}

/* ── NOTIFICATIONS ── */
#notif-panel{position:fixed;top:48px;right:14px;width:280px;background:#fff;border:1px solid var(--line);border-radius:var(--r);z-index:200;display:none;box-shadow:0 8px 24px rgba(0,0,0,.12);overflow:hidden;}
#notif-panel.open{display:block;}
.nh{padding:10px 13px;border-bottom:1px solid var(--line);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);display:flex;justify-content:space-between;align-items:center;}
.ni{padding:10px 13px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .1s;}
.ni:hover{background:var(--sb);}
.ni .ni-t{font-size:12px;font-weight:700;}
.ni .ni-b{font-size:12px;color:var(--muted);}
.ni .ni-d{font-size:10px;color:var(--muted);margin-top:2px;}
.ni.unread{border-left:3px solid var(--blue);}
.n-empty{padding:20px;text-align:center;color:var(--muted);font-size:13px;}

/* ── TOAST ── */
#toasts{position:fixed;bottom:16px;right:16px;z-index:999;display:flex;flex-direction:column;gap:6px;pointer-events:none;}
.toast{background:#fff;border:1px solid var(--line);border-left:3px solid var(--blue);padding:10px 13px;border-radius:10px;min-width:200px;box-shadow:var(--shadow);animation:tin .15s ease;pointer-events:all;}
.toast.tg{border-left-color:var(--green);}
.toast.ty{border-left-color:var(--yellow);}
.toast .tt{font-size:11px;font-weight:700;color:var(--blue);margin-bottom:1px;}
.toast.tg .tt{color:var(--green);}
.toast.ty .tt{color:var(--yellow);}
.toast .tb{font-size:12px;}
@keyframes tin{from{transform:translateX(24px);opacity:0}to{transform:translateX(0);opacity:1}}

/* ── MODAL ── */
#modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:300;display:none;align-items:center;justify-content:center;padding:20px;}
#modal-bg.open{display:flex;}
#modal-box{background:#fff;border-radius:var(--r);padding:24px;width:100%;max-width:440px;max-height:90vh;overflow-y:auto;box-shadow:0 12px 40px rgba(0,0,0,.15);}
#modal-box.wide{max-width:720px;}
#modal-box h2{font-size:17px;font-weight:800;margin-bottom:14px;}
.fg{margin-bottom:11px;}
.fg label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);display:block;margin-bottom:4px;}
.fg input,.fg select,.fg textarea{width:100%;background:#fff;border:1px solid var(--line);color:var(--text);padding:8px 10px;border-radius:7px;font-family:inherit;font-size:13px;}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--blue);}
.fg textarea{min-height:55px;resize:vertical;}
.ma{display:flex;gap:8px;margin-top:14px;}

/* ── MOBILE ── */
@media(max-width:800px){
  #shell{grid-template-columns:1fr;}
  #sidebar{display:none;position:fixed;inset:47px 0 0 0;z-index:150;width:260px;border-right:1px solid var(--line);}
  #sidebar.open{display:flex;}
  #main{padding:12px;}
  #mb-btn{display:flex !important;}
  .fc-body{flex-direction:column;gap:10px;}
  .fc-actions{margin-left:0;}
}
#mb-btn{display:none;background:var(--sb);border:1px solid #93c5fd;color:var(--blue);padding:5px 10px;border-radius:7px;cursor:pointer;font-size:17px;align-items:center;}

/* ── ADMIN-ZENTRALE ── */
.admin-section{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:20px;margin-bottom:16px;}
.admin-section-head{font-size:15px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:10px;}

/* ── CC INTERN – Mobile-optimierte Ansicht ── */
body.role-cc-intern .btn{min-height:44px;padding:10px 18px;font-size:15px;}
body.role-cc-intern .fc-actions .btn{min-height:48px;font-size:15px;padding:12px 20px;}
body.role-cc-intern .wand-card{padding:16px;}
body.role-cc-intern .fc-meta{font-size:14px;}
body.role-cc-intern .fc-name{font-size:16px;font-weight:700;}
body.role-cc-intern .st-pill{font-size:13px;padding:5px 12px;}
@media(max-width:900px){
  body.role-cc-intern .btn{min-height:52px;font-size:16px;}
  body.role-cc-intern .fc-actions{display:flex;flex-direction:column;gap:8px;width:100%;}
  body.role-cc-intern .fc-actions .btn{width:100%;justify-content:center;}
}

/* ── MOBILE (alle Rollen, bedienbare Flächen) ── */
@media(max-width:800px){
  #topbar{flex-wrap:wrap;gap:8px;padding:8px 12px;row-gap:8px;}
  .brand{font-size:16px;margin-right:0;width:100%;order:0;}
  #role-display{max-width:100%;flex:1;min-width:0;font-size:11px;}
  #role-sel,#server-status-indicator,#notif-btn,#mf-logout-btn{min-height:44px;touch-action:manipulation;}
  .btn,.sel{min-height:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
  .proj-item{padding:12px 12px;min-height:48px;}
  #add-proj{min-height:48px;padding:12px;}
  .fc-actions .btn,.fc-actions a.btn{min-height:48px;padding:10px 14px;width:100%;justify-content:center;}
  .fc-actions{display:flex;flex-direction:column;gap:8px;align-items:stretch !important;width:100%;}
  #modal-bg{padding:12px;align-items:flex-end;}
  #modal-box{max-height:92vh;border-radius:12px 12px 0 0;padding:18px 16px;}
  #notif-panel{max-width:100vw;right:0;left:0;}
}