/* app.css – modernes UI, farbig + Progress + Ampel, keine externen Libs */
:root{
  --bg:#0f172a; --bg-2:#111827; --card:#0b1220cc; --card-2:#0f172a80;
  --surface:#111827cc; --border:#1f2937; --text:#e5e7eb; --muted:#9ca3af;
  --brand1:#7c3aed; --brand2:#06b6d4; --ok:#10b981; --warn:#f59e0b; --err:#ef4444;
  --shadow:0 12px 40px rgba(0,0,0,.35);
}
body[data-theme="light"]{
  --bg:#eef2ff; --bg-2:#ffffff; --card:#ffffff; --card-2:#f8fafc;
  --surface:#ffffff; --border:#e5e7eb; --text:#0f172a; --muted:#475569;
  --brand1:#6d28d9; --brand2:#0891b2; --ok:#059669; --warn:#d97706; --err:#dc2626;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; color:var(--text);
  background: radial-gradient(1200px 800px at 80% -10%, #1f2937 20%, #0b1220 60%, #030712 100%),
              linear-gradient(135deg, var(--bg), var(--bg-2));
  font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Color Emoji","Apple Color Emoji";
}
body[data-theme="light"]{
  background: linear-gradient(0deg, var(--bg), var(--bg-2));
}

/* Containers & Cards */
.container{max-width:1200px;margin:0 auto;padding:20px}
.card{
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* Header */
.header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-radius:14px;margin:18px auto;
  background: linear-gradient(90deg,#1a1038cc,#051a26cc); border:1px solid #1f2b45;
}
body[data-theme="light"] .header{
  background: linear-gradient(90deg,#ede9fe,#e0f2fe); border-color:#e5e7eb;
}
.header .brand{display:flex;align-items:center;gap:10px;font-weight:700}
.header .logo{width:34px;height:34px;border-radius:10px;
  background: conic-gradient(from 220deg,var(--brand1),var(--brand2));
  box-shadow: 0 6px 24px rgba(124,58,237,.25), inset 0 0 18px rgba(6,182,212,.25);
}
.actions{display:flex;gap:8px;align-items:center}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;
  border:1px solid #27324d;color:#dbeafe;background:linear-gradient(180deg,#0b1936,#091024);
  text-decoration:none;cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn.primary{border-color:#3b2b73;background:linear-gradient(180deg,#321e7a,#0d1a31);color:#fff}
body[data-theme="light"] .btn{color:#0f172a;background:#fff;border-color:#e5e7eb}
body[data-theme="light"] .btn.primary{background:#4f46e5;color:#fff;border-color:#4338ca}

/* Inputs */
.input{width:100%;padding:12px 14px 12px 44px;border:1px solid var(--border);
  background:#0b1120;color:var(--text);border-radius:12px;outline:0}
body[data-theme="light"] .input{background:#fff}
.field{position:relative} .label{display:block;margin-bottom:6px;color:var(--muted);font-size:13px}

/* Sidebar */
.layout{display:grid;grid-template-columns:260px 1fr;gap:18px}
@media (max-width:980px){ .layout{grid-template-columns:1fr} }
.sidebar{
  position:sticky; top:14px; height:calc(100dvh - 80px);
  padding:12px; overflow:auto
}
.nav .item{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:6px 0;
  border:1px solid var(--border);border-radius:12px;text-decoration:none;color:var(--text);
  background:linear-gradient(180deg,var(--card-2),var(--card))}
.nav .item.active{outline:2px solid var(--brand2)}
.nav .section{margin:10px 6px 4px;color:var(--muted);font-size:12px}

/* Toggle */
.toggle{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;
  border:1px solid var(--border);background:linear-gradient(180deg,var(--card),var(--card-2));cursor:pointer}

/* Grid, KPI, Ring, Bar, Ampel */
.grid{display:grid;gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.grid.cols-3{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}}
.kpi{display:flex;gap:16px;align-items:center;padding:14px;border-radius:14px;border:1px solid var(--border);
  background:linear-gradient(180deg,var(--card-2),var(--card))}
.kpi .meta{flex:1}.kpi .title{font-weight:700}.kpi .sub{font-size:13px;color:var(--muted)}

.ring{--size:96px;--thick:10px;--val:62;width:var(--size);height:var(--size);border-radius:50%;
  background:conic-gradient(var(--brand1) calc(var(--val)*1%),#2b2f40 0),
  radial-gradient(circle calc(50% - var(--thick)),transparent 99%,#0b1120 100%);
  display:grid;place-items:center;position:relative;box-shadow:inset 0 0 0 1px #24283a}
.ring .ring-label{font-weight:700}
.ring.green{background:conic-gradient(var(--ok) calc(var(--val)*1%),#2b2f40 0),
  radial-gradient(circle calc(50% - var(--thick)),transparent 99%,#0b1120 100%)}
.ring.amber{background:conic-gradient(var(--warn) calc(var(--val)*1%),#2b2f40 0),
  radial-gradient(circle calc(50% - var(--thick)),transparent 99%,#0b1120 100%)}
.ring.red{background:conic-gradient(var(--err) calc(var(--val)*1%),#2b2f40 0),
  radial-gradient(circle calc(50% - var(--thick)),transparent 99%,#0b1120 100%)}

.bar{height:10px;border-radius:999px;background:#0b1120;border:1px solid var(--border);overflow:hidden}
body[data-theme="light"] .bar{background:#fff}
.bar .fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--brand2),var(--brand1))}
.ampel{display:flex;gap:10px;align-items:center}
.light{width:12px;height:12px;border-radius:50%;background:#394150;border:1px solid #202634;box-shadow:0 0 0 3px #0b1120,0 0 12px rgba(0,0,0,.35)}
.light.red{background:var(--err)} .light.amber{background:var(--warn)} .light.green{background:var(--ok)}

/* Stepper/Wizard */
.stepper{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.step{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;border:1px solid var(--border)}
.step .dot{width:10px;height:10px;border-radius:50%;background:#475569}
.step.active{outline:2px solid var(--brand2)} .step.done{background:#0b1120}
.step.done .dot{background:var(--ok)}
.step-title{font-size:13px}
.wiz-controls{display:flex;gap:8px;flex-wrap:wrap;justify-content:space-between;margin-top:12px}

/* Print – Dashboard PDF */
@media print{
  .header,.sidebar,.btn,.actions{display:none !important}
  body{background:#fff}
  .container{max-width:none}
  .card{box-shadow:none;border-color:#ddd}
}