/* Sicherheitsbüro Daum – Arbeitsschutz-Tool. Stilanlehnung an die vorhandene Gutachten-App
   (gleiche Farbpalette/Navigationslogik), eigenständig neu aufgesetzt. */
:root {
  --navy: #1e3553; --navy-hell: #2c4a70; --blau: #2f6fb3; --blau-hell: #e8f0fa;
  --gruen: #2e8b57; --gruen-hell: #e6f4ec; --rot: #c0392b; --rot-hell: #fbeaea;
  --gelb: #d9a300; --gelb-hell: #fff6d6; --grau: #7f8c8d; --grau-hell: #eef0f2;
  --linie: #d5dae0; --text: #1c2430; --text-schwach: #5b6675; --hintergrund: #f3f5f8;
  --weiss: #ffffff; --schatten: 0 1px 3px rgba(0,0,0,.08), 0 4px 14px rgba(0,0,0,.06);
  --radius: 8px; --sidebar-breite: 260px; --schrift: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; }
body { font-family: var(--schrift); font-size:14px; color:var(--text); background:var(--hintergrund); }
h1,h2,h3,h4 { margin:0 0 .5em; color:var(--navy); font-weight:600; }
h1{font-size:22px;} h2{font-size:18px;} h3{font-size:15px;} h4{font-size:14px;}
a{color:var(--blau);}
p{margin:0 0 .7em;}
[hidden]{display:none !important;}
.klein{font-size:12px; color:var(--text-schwach);}
.fett{font-weight:600;}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit; font-size:14px; padding:8px 10px; border:1px solid var(--linie); border-radius:6px; width:100%; background:var(--weiss); color:var(--text);}
label{display:block; margin-bottom:12px; font-size:13px; color:var(--text-schwach);}
label input, label select, label textarea{margin-top:4px;}

/* ---------- Login ---------- */
.login-screen{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--navy);}
.login-box{background:var(--weiss); padding:32px 30px; border-radius:var(--radius); width:100%; max-width:340px; box-shadow:var(--schatten);}
.login-box h1{font-size:19px; margin-bottom:2px;}
.login-box .klein{margin-bottom:20px;}
.login-box .btn{width:100%; margin-top:6px;}
.fehler{background:var(--rot-hell); color:var(--rot); padding:8px 10px; border-radius:6px; font-size:13px; margin-bottom:12px;}

/* ---------- Grundlayout ---------- */
.app{display:flex; min-height:100vh;}
.sidebar{width:var(--sidebar-breite); background:var(--navy); color:#e6ecf3; display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto; flex-shrink:0; z-index:30;}
.sidebar-kopf{padding:16px 16px 10px; border-bottom:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; align-items:center;}
.marke{display:flex; gap:10px; align-items:center;}
.marke-logo{width:42px; height:42px; border-radius:6px; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; font-size:20px;}
.marke-name{font-weight:700; font-size:14px; line-height:1.2;}
.marke-sub{font-size:11px; opacity:.75;}
.hauptmenu{display:flex; flex-direction:column; padding:8px 0; flex:1;}
.hauptmenu a{color:#dbe4ef; text-decoration:none; padding:9px 16px; display:flex; align-items:center; gap:10px; font-size:13.5px; border-left:3px solid transparent;}
.hauptmenu a:hover{background:rgba(255,255,255,.07);}
.hauptmenu a.aktiv{background:rgba(255,255,255,.12); border-left-color:#8fc1ff; color:#fff; font-weight:600;}
.hauptmenu .ico{width:20px; text-align:center; opacity:.85; font-size:14px;}
.sidebar-fuss{padding:12px 16px; border-top:1px solid rgba(255,255,255,.12); font-size:12px;}
.sidebar-fuss .klein{color:#b7c3d2; margin-bottom:8px;}

.hauptbereich{flex:1; display:flex; flex-direction:column; min-width:0;}
.kopfleiste{height:56px; background:var(--weiss); border-bottom:1px solid var(--linie); display:flex; align-items:center; gap:16px; padding:0 20px; position:sticky; top:0; z-index:20;}
.kopf-titel{font-weight:700; font-size:16px; color:var(--navy); flex:1;}
.btn-icon{background:none; border:none; font-size:18px; color:var(--text-schwach); padding:4px 8px;}
.nur-mobil{display:none;}
.kunden-auswahl select{min-width:220px;}
.view{padding:22px; flex:1; overflow-y:auto;}

/* ---------- Buttons ---------- */
.btn{background:var(--weiss); border:1px solid var(--linie); border-radius:6px; padding:8px 14px; font-size:13.5px; color:var(--text);}
.btn:hover{background:var(--grau-hell);}
.btn-primary{background:var(--blau); border-color:var(--blau); color:#fff;}
.btn-primary:hover{background:#255a92;}
.btn-gruen{background:var(--gruen); border-color:var(--gruen); color:#fff;}
.btn-rot{background:var(--rot); border-color:var(--rot); color:#fff;}
.btn-klein{padding:5px 10px; font-size:12px;}
.btn[disabled]{opacity:.5; cursor:not-allowed;}

/* ---------- Karten / Tabellen ---------- */
.karten-reihe{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:20px;}
.karte{background:var(--weiss); border-radius:var(--radius); box-shadow:var(--schatten); padding:18px; flex:1; min-width:180px;}
.karte .zahl{font-size:26px; font-weight:700; color:var(--navy);}
.karte .label{font-size:12.5px; color:var(--text-schwach);}
.panel{background:var(--weiss); border-radius:var(--radius); box-shadow:var(--schatten); padding:20px; margin-bottom:18px;}
.panel-kopf{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:10px;}

table{width:100%; border-collapse:collapse; font-size:13px;}
th,td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--linie); vertical-align:top;}
th{color:var(--text-schwach); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.02em;}
tr:hover td{background:var(--blau-hell);}
.tabelle-wrap{overflow-x:auto;}

/* ---------- Badges ---------- */
.badge{display:inline-block; padding:2px 9px; border-radius:20px; font-size:11.5px; font-weight:600;}
.badge-gruen{background:var(--gruen-hell); color:var(--gruen);}
.badge-rot{background:var(--rot-hell); color:var(--rot);}
.badge-gelb{background:var(--gelb-hell); color:#8a6d00;}
.badge-grau{background:var(--grau-hell); color:var(--text-schwach);}
.badge-blau{background:var(--blau-hell); color:var(--blau);}

/* ---------- Modal ---------- */
.modal{position:fixed; inset:0; background:rgba(15,20,30,.5); display:flex; align-items:flex-start; justify-content:center; z-index:100; padding:40px 16px; overflow-y:auto;}
.modal-box{background:#fff; border-radius:var(--radius); width:100%; max-width:640px; box-shadow:var(--schatten);}
.modal-kopf{display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--linie); font-weight:700; color:var(--navy);}
.modal-inhalt{padding:20px; max-height:65vh; overflow-y:auto;}
.modal-fuss{padding:14px 20px; border-top:1px solid var(--linie); display:flex; justify-content:flex-end; gap:10px;}

.toasts{position:fixed; bottom:18px; right:18px; z-index:200; display:flex; flex-direction:column; gap:8px;}
.toast{background:var(--navy); color:#fff; padding:10px 16px; border-radius:6px; font-size:13px; box-shadow:var(--schatten); max-width:360px;}
.toast.fehler{background:var(--rot);}

.gitter-2{display:grid; grid-template-columns:1fr 1fr; gap:0 16px;}
.abschnitt{border-top:1px solid var(--linie); margin-top:14px; padding-top:14px;}
.abschnitt textarea{min-height:70px;}
.hinweisbox{background:var(--gelb-hell); border:1px solid #f0dfa0; color:#7a5e00; padding:10px 14px; border-radius:6px; font-size:12.5px; margin-bottom:14px;}
.hinweisbox.info{background:var(--blau-hell); border-color:#c7dcf5; color:var(--navy);}

@media (max-width: 900px) {
  .sidebar{position:fixed; left:0; top:0; transform:translateX(-100%); transition:transform .2s; box-shadow:var(--schatten);}
  .sidebar.offen{transform:translateX(0);}
  .nur-mobil{display:inline-block;}
  .gitter-2{grid-template-columns:1fr;}
}