/* =====================================================================
   WUVO Security – DEMO-Overlay (Mitarbeiter-App + Dashboard)
   Klickbarer Phase-1-Konzeptnachweis mit Demo-Daten, erreichbar über
   den Login-Button. Wird im echten Projekt durch den realen Login
   ersetzt – alles hier ist bewusst vom Rest getrennt (js/demo.js).
   ===================================================================== */
.demo-overlay{
  position:fixed;inset:0;z-index:200;display:none;
  background:rgba(8,8,8,.94);backdrop-filter:blur(18px);
  overflow-y:auto;
}
.demo-overlay.open{display:block}
.demo-shell{max-width:1240px;margin:0 auto;padding:30px 32px 90px}
.demo-top{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:34px}
.demo-title{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.demo-title b{font-family:'Manrope',sans-serif;font-size:17px;letter-spacing:.04em;color:var(--weiss)}
.demo-badge{
  font-family:'Manrope',sans-serif;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid rgba(167,169,172,.4);border-radius:20px;padding:6px 14px;color:var(--silber-hell);
}
.demo-close{
  background:none;border:1px solid rgba(167,169,172,.35);border-radius:50%;
  width:42px;height:42px;color:var(--weiss);font-size:18px;line-height:1;cursor:pointer;
  transition:border-color .25s,background .25s;
}
.demo-close:hover{border-color:var(--weiss);background:rgba(255,255,255,.05)}
.demo-tabs{display:flex;gap:8px;margin-bottom:42px;flex-wrap:wrap}
.demo-tab{
  font-family:'Manrope',sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--silber);background:none;border:1px solid rgba(167,169,172,.3);border-radius:var(--radius);
  padding:12px 22px;cursor:pointer;transition:color .25s,border-color .25s,background .25s;
}
.demo-tab:hover{color:var(--weiss);border-color:rgba(167,169,172,.55)}
.demo-tab.active{background:var(--weiss);color:var(--schwarz);border-color:var(--weiss)}
.demo-pane{display:none}
.demo-pane.active{display:block}

/* ---------- Mitarbeiter-App im Phone-Rahmen ---------- */
.phone{
  width:min(392px,100%);margin:0 auto;
  border:1px solid rgba(167,169,172,.35);border-radius:36px;
  background:var(--schwarz-2);padding:12px;
  box-shadow:0 40px 90px rgba(0,0,0,.65);
}
.phone-screen{border-radius:26px;background:var(--schwarz);border:1px solid var(--linie);overflow:hidden}
.phone-notch{display:flex;justify-content:center;padding:10px 0 4px}
.phone-notch i{width:84px;height:5px;border-radius:3px;background:rgba(167,169,172,.3)}
.app-head{display:flex;justify-content:space-between;align-items:center;padding:14px 20px 16px;border-bottom:1px solid var(--linie)}
.app-head .who small{
  font-family:'Manrope',sans-serif;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--silber);display:block;
}
.app-head .who b{font-family:'Manrope',sans-serif;font-size:15px;color:var(--weiss)}
.app-avatar{
  width:34px;height:34px;border-radius:50%;border:1px solid rgba(167,169,172,.4);
  display:flex;align-items:center;justify-content:center;
  font-family:'Manrope',sans-serif;font-size:11px;font-weight:700;color:var(--silber-hell);
}
.app-body{padding:20px;display:flex;flex-direction:column;gap:16px}
.app-field label{
  font-family:'Manrope',sans-serif;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--silber);display:block;margin-bottom:7px;
}
.app-field select,.app-field input{
  width:100%;background:var(--graphit-soft);border:1px solid var(--linie);border-radius:6px;
  color:var(--weiss);font-family:'Inter',sans-serif;font-size:14px;padding:11px 12px;
  color-scheme:dark;
}
.app-field select:focus-visible,.app-field input:focus-visible{outline:2px solid var(--silber-hell);outline-offset:2px}
.app-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.app-calc{border:1px solid var(--linie);border-radius:6px;padding:14px 16px;background:rgba(13,13,15,.8)}
.app-calc small{
  font-family:'Manrope',sans-serif;font-size:9px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--silber);opacity:.8;display:block;margin-bottom:8px;
}
.app-calc b{font-family:'Manrope',sans-serif;font-size:20px;color:var(--weiss)}
.app-calc .app-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.app-calc .chip{font-size:9.5px;padding:5px 9px}
.app-submit{
  width:100%;display:flex;justify-content:center;align-items:center;gap:12px;
  font-family:'Manrope',sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  background:var(--weiss);color:var(--schwarz);border:none;border-radius:6px;
  padding:15px 20px;cursor:pointer;transition:background .25s;
}
.app-submit:hover{background:var(--silber-hell)}
.app-success{text-align:center;padding:26px 10px 10px;display:none}
.app-success.show{display:block}
.app-success .ok{
  width:54px;height:54px;border-radius:50%;border:1px solid var(--silber-hell);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
  color:var(--weiss);font-size:22px;
}
.app-success b{font-family:'Manrope',sans-serif;font-size:15px;color:var(--weiss);display:block;margin-bottom:6px}
.app-success p{font-size:12.5px;color:var(--silber);line-height:1.6}
.app-again{
  margin-top:16px;background:none;border:1px solid rgba(167,169,172,.35);border-radius:6px;
  color:var(--silber-hell);font-family:'Manrope',sans-serif;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;padding:10px 18px;cursor:pointer;
}
.app-caption{text-align:center;margin-top:24px;font-size:12.5px;color:var(--silber);opacity:.75;max-width:420px;margin-left:auto;margin-right:auto;line-height:1.6}

/* ---------- Dashboard ---------- */
.dash{border:1px solid var(--linie);border-radius:8px;background:rgba(13,13,15,.72);overflow:hidden}
.dash-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 26px;border-bottom:1px solid var(--linie);flex-wrap:wrap}
.dash-head b{font-family:'Manrope',sans-serif;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--weiss)}
.dash-head span{font-size:12.5px;color:var(--silber)}
.dash-kpis{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--linie)}
.kpi{padding:22px 26px;border-right:1px solid var(--linie)}
.kpi:last-child{border-right:none}
.kpi b{font-family:'Manrope',sans-serif;font-size:26px;font-weight:700;color:var(--weiss);display:block;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi span{font-family:'Manrope',sans-serif;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--silber);display:block;margin-top:8px}
.dash-section{padding:26px;border-bottom:1px solid var(--linie)}
.dash-section:last-child{border-bottom:none}
.dash-section-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.dash-section-head h3{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700}
.dash-section-head small{font-size:12px;color:var(--silber)}
.table-scroll{overflow-x:auto}
.dash-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
.dash-table th{
  font-family:'Manrope',sans-serif;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--silber);text-align:left;padding:10px 12px;border-bottom:1px solid var(--linie);font-weight:600;
}
.dash-table td{padding:13px 12px;border-bottom:1px solid rgba(167,169,172,.08);color:var(--silber-hell);white-space:nowrap}
.dash-table td.num{font-variant-numeric:tabular-nums}
.pill{
  font-family:'Manrope',sans-serif;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 11px;border-radius:20px;border:1px solid;display:inline-block;
}
.pill.eingereicht{color:var(--silber);border-color:rgba(167,169,172,.4)}
.pill.geprueft{color:var(--silber-hell);border-color:var(--silber-hell)}
.pill.freigegeben{background:var(--weiss);color:var(--schwarz);border-color:var(--weiss)}
.row-action{
  background:none;border:1px solid rgba(167,169,172,.35);border-radius:4px;cursor:pointer;
  font-family:'Manrope',sans-serif;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--silber-hell);padding:6px 12px;transition:border-color .2s,color .2s;
}
.row-action:hover{border-color:var(--weiss);color:var(--weiss)}
.dash-grid2{display:grid;grid-template-columns:1.15fr .85fr}
.dash-grid2>.dash-section:first-child{border-right:1px solid var(--linie)}
.sub-card{border:1px solid var(--linie);border-radius:6px;padding:16px 18px;margin-bottom:12px;background:rgba(8,8,8,.5)}
.sub-card:last-child{margin-bottom:0}
.sub-card .sub-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.sub-card .sub-top b{font-family:'Manrope',sans-serif;font-size:13.5px;color:var(--weiss)}
.sub-card .sub-top span{font-family:'Manrope',sans-serif;font-size:14px;color:var(--silber-hell);font-variant-numeric:tabular-nums}
.sub-checks{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--silber)}
.sub-checks i{font-style:normal;color:var(--silber-hell);margin-right:5px}
.sub-checks .fehlt{opacity:.55}
.soll-row{margin-bottom:16px}
.soll-row:last-child{margin-bottom:0}
.soll-top{display:flex;justify-content:space-between;font-size:12.5px;color:var(--silber-hell);margin-bottom:7px;gap:12px}
.soll-top span{color:var(--silber);font-variant-numeric:tabular-nums}
.soll-track{height:4px;border-radius:2px;background:rgba(167,169,172,.16)}
.soll-fill{height:4px;border-radius:2px;background:linear-gradient(90deg,#8f9194,#d6d7d9)}
.dash-export{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.dash-export p{font-size:12.5px;color:var(--silber);max-width:520px;line-height:1.6}

@media (max-width:900px){
  .dash-kpis{grid-template-columns:repeat(2,1fr)}
  .kpi:nth-child(2n){border-right:none}
  .kpi{border-bottom:1px solid var(--linie)}
  .dash-grid2{grid-template-columns:1fr}
  .dash-grid2>.dash-section:first-child{border-right:none}
  .demo-shell{padding:22px 18px 70px}
}