/* ============ Design-System: Werkzeug-/Industrie-Look ============ */
:root{
  --bg:#16181d; --panel:#1f232b; --panel-2:#272c36; --line:#343a46;
  --ink:#eef1f5; --muted:#9aa3b2; --faint:#6b7382;
  --amber:#ffb627; --amber-ink:#1a1206;
  --green:#39c07a; --red:#ff5c5c; --blue:#5aa9ff;
  --r:14px; --tap:48px;
  --mono:ui-monospace,SFMono-Regular,"DejaVu Sans Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.45; -webkit-text-size-adjust:100%;
  padding-bottom:env(safe-area-inset-bottom);
}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.01em}
a{color:var(--blue)}

/* Kopfzeile */
header.top{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; padding-top:calc(14px + env(safe-area-inset-top));
  background:linear-gradient(180deg,#1b1f27,#16181d);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.02em}
.brand .bolt{
  width:30px;height:30px;border-radius:8px;background:var(--amber);
  display:grid;place-items:center;color:var(--amber-ink);font-weight:900;flex:none;
}
.top .spacer{flex:1}
.top .btn.sm{padding:0 10px}
@media (max-width:420px){ .brand span:last-child{display:none} }
.sync-dot{width:10px;height:10px;border-radius:50%;background:var(--faint)}
.sync-dot.online{background:var(--green)} .sync-dot.offline{background:var(--red)}
.sync-dot.busy{background:var(--amber);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.3}}

main{max-width:760px;margin:0 auto;padding:16px;padding-bottom:96px}

/* Buttons */
.btn{
  min-height:var(--tap); padding:0 16px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--panel-2); color:var(--ink);
  font-weight:600; cursor:pointer; display:inline-flex; align-items:center;
  justify-content:center; gap:8px; transition:transform .06s, background .15s;
}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--amber); color:var(--amber-ink); border-color:var(--amber)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--red); border-color:#5a2a2a}
.btn.block{width:100%}
.btn.sm{min-height:38px;padding:0 12px;font-size:14px}

/* FAB */
.fab{
  position:fixed; right:18px; bottom:calc(20px + env(safe-area-inset-bottom));
  width:60px;height:60px;border-radius:50%; border:none; z-index:30;
  background:var(--amber); color:var(--amber-ink); font-size:30px; font-weight:700;
  box-shadow:0 8px 24px rgba(0,0,0,.45); cursor:pointer;
}
.fab:active{transform:scale(.94)}

/* Karten / Listen */
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:14px; margin-bottom:12px;
}
.card.tap{cursor:pointer}
.card.tap:active{background:var(--panel-2)}
.card h3{font-size:17px}
.row{display:flex; align-items:center; gap:10px}
.row.wrap{flex-wrap:wrap}
.between{justify-content:space-between}
.meta{color:var(--muted); font-size:13px}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}

.chip{
  font-size:12px; padding:3px 9px; border-radius:999px;
  background:var(--panel-2); border:1px solid var(--line); color:var(--muted);
}
.chip.open{color:var(--amber); border-color:#5a4a1a}
.chip.done{color:var(--green); border-color:#1f4a35}
.chip.status{color:var(--blue); border-color:#244a6b}

.stat{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.stat b{font-size:20px}
.stat span{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.stats{display:flex;gap:18px;margin-top:10px}

/* Tabs */
.tabs{display:flex; gap:6px; overflow-x:auto; margin:6px 0 14px; -webkit-overflow-scrolling:touch}
.tab{
  white-space:nowrap; padding:9px 14px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:var(--panel); color:var(--muted); font-size:14px;
}
.tab.active{background:var(--amber); color:var(--amber-ink); border-color:var(--amber); font-weight:700}

/* Formulare */
label{display:block; font-size:13px; color:var(--muted); margin:12px 0 5px}
input,select,textarea{
  width:100%; min-height:var(--tap); padding:11px 12px; border-radius:12px;
  background:var(--panel-2); border:1px solid var(--line); outline:none;
}
textarea{min-height:90px; resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--amber)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}

/* Modal */
.modal-bg{
  position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:40;
  display:flex; align-items:flex-end; justify-content:center;
}
.modal{
  background:var(--panel); width:100%; max-width:560px; max-height:92vh; overflow:auto;
  border-radius:18px 18px 0 0; border:1px solid var(--line); border-bottom:none;
  padding:18px; padding-bottom:calc(18px + env(safe-area-inset-bottom));
  animation:slideup .18s ease-out;
}
@keyframes slideup{from{transform:translateY(40px);opacity:.4}}
.modal h2{margin-bottom:6px}

/* Login */
.login-wrap{min-height:100dvh; display:grid; place-items:center; padding:24px}
.login{width:100%; max-width:380px}
.login .bigbolt{
  width:64px;height:64px;border-radius:16px;background:var(--amber);color:var(--amber-ink);
  display:grid;place-items:center;font-size:34px;font-weight:900;margin:0 auto 16px;
}
.err{color:var(--red); font-size:14px; min-height:20px; margin-top:8px}
.empty{color:var(--faint); text-align:center; padding:40px 10px}

.del-x{margin-left:auto; background:none; border:none; color:var(--faint); font-size:20px; cursor:pointer; padding:4px 8px}
hr.sep{border:none;border-top:1px solid var(--line);margin:14px 0}

/* PDF-Vorschau im Protokoll */
.pdf-grid{display:flex; flex-wrap:wrap; gap:12px; margin-top:12px}
.pdf-item{width:120px}
.pdf-thumb{width:120px; height:150px; border:1px solid var(--line); border-radius:8px;
  overflow:hidden; background:#fff; cursor:pointer}
.pdf-thumb iframe{width:120px; height:150px; border:0; pointer-events:none}
.pdf-name{font-size:11px; color:var(--muted); margin:5px 0; word-break:break-word;
  max-height:28px; overflow:hidden; line-height:1.2}
.pdf-modal{max-width:920px; width:100%; height:92vh; display:flex; flex-direction:column}
.pdf-view{flex:1; width:100%; border:1px solid var(--line); border-radius:10px; margin-top:10px; background:#fff}

/* Drag-and-Drop (Datei-Sektionen der Anlagen) */
.card.dragover{ border-color:var(--amber); box-shadow:inset 0 0 0 2px var(--amber); background:var(--panel-2) }
.card.dragover *{ pointer-events:none }
.drop-hint{ font-size:12px; color:var(--faint) }
@media (hover:none), (max-width:560px){ .drop-hint{ display:none } }

/* Lade-Overlay */
.busy{position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center}
.busy-box{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 22px;
  display:flex; align-items:center; gap:14px; color:var(--ink); font-size:15px; max-width:80%}
.spinner{width:22px; height:22px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--amber);
  animation:spin .8s linear infinite; flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* Kalender */
.kal-head{display:flex; align-items:center; gap:8px; margin-bottom:12px}
.kal-title{flex:1; text-align:center; font-weight:700; font-size:18px}
.kal-row{display:flex; gap:4px; margin-bottom:4px}
.kal-row .kal-kw{width:24px; flex:none; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--faint); font-variant-numeric:tabular-nums}
.kal-week{flex:1; display:grid; grid-template-columns:repeat(7,1fr); gap:3px 4px; align-content:start}
.kal-wd{text-align:center; font-size:11px; color:var(--faint); text-transform:uppercase; letter-spacing:.05em; padding:2px 0}
.kal-num{font-size:12px; color:var(--muted); text-align:center; padding:3px 0; min-height:24px;
  border-radius:8px; background:var(--panel); cursor:pointer; font-variant-numeric:tabular-nums}
.kal-num:active{background:var(--panel-2)}
.kal-num.out{opacity:.35}
.kal-num.today{color:var(--amber-ink); background:var(--amber); font-weight:700}
.kal-ev{height:16px; line-height:16px; border-radius:4px; font-size:10px; font-weight:600;
  color:#0c1118; padding:0 5px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; cursor:pointer}
.kal-legend{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.kal-leg{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted)}
.kal-sw{width:12px; height:12px; border-radius:3px; flex:none}