/* === Light Grey Theme ==================================================== */
:root{
  --bg:#f6f7f9;
  --panel:#ffffff;
  --muted:#4b5563;
  --text:#0b0f14; /* almost black */
  --border:#e2e5ea;
  --primary:#111827; /* dark for text/buttons */
  --primary-600:#000000;
  --accent:#6b7280; /* neutral grey accent */
  --green:#6b7280; /* neutralized to grey */
  --amber:#9ca3af;
  --red:#6b7280;
  --radius:12px;
  --shadow:0 2px 8px rgba(0,0,0,.05);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;color:var(--text);background:var(--bg)}
h1,h2,h3{margin:0 0 8px 0;color:var(--text)}
h1{font-size:28px;font-weight:800}
h2{font-size:22px;font-weight:700}
h3{font-size:18px;font-weight:700}

a{color:#374151;text-decoration:none}
a:hover{text-decoration:underline}

.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow)}
.btn{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:8px 12px;cursor:pointer;color:var(--text)}
.btn:hover{border-color:#d1d5db;background:#fafafa}
.btn-primary{background:#f3f4f6;border-color:#d1d5db;color:#111}
.btn-primary:hover{background:#e5e7eb}

input,select,textarea{background:#fff;border:1px solid var(--border);border-radius:10px;padding:6px 10px;outline:none;color:var(--text)}
input:focus,select:focus,textarea:focus{border-color:#9ca3af;box-shadow:0 0 0 3px rgba(156,163,175,.25)}

table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--panel)}
th,td{padding:10px;border-bottom:1px solid var(--border);text-align:left;color:var(--text)}
th{background:#f8fafc;font-weight:600}
tr:last-child td{border-bottom:none}

.badge{font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid var(--border);background:#f3f4f6;color:#111;display:inline-block}
.pill{display:inline-block;padding:2px 8px;border-radius:999px;background:#eef2f7;border:1px solid #e5e7eb;color:#111}
.small{font-size:12px;color:#374151}

.grid{display:grid;gap:8px}
.container{max-width:1200px;margin:0 auto;padding:18px}

/* === Calendar cells ===================================================== */
.head,.cell,.name{background:var(--panel);border:1px solid var(--border);border-radius:10px}
.head,.name{font-weight:600}
.cell{padding:8px}
.name{padding:10px}
.util{font-size:12px;margin-top:4px}
.util .bar{height:8px;background:#eceff3;border-radius:6px;overflow:hidden}
.util .bar > span{display:block;height:100%;background:#9aa0a6}
.k-green{background:#f5f6f8;border-color:#e5e7eb}
.k-yellow{background:#f7f7f7;border-color:#e7e7e7}
.k-red{background:#f5f6f8;border-color:#e5e7eb}
.abs{background:repeating-linear-gradient(45deg,#f1f1f1,#f1f1f1 6px,#ffffff 6px,#ffffff 12px)!important}

/* === Gantt ============================================================== */
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0}
.gantt-wrap{border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow);overflow:auto}
.months-grid{display:grid; position:sticky; top:0; z-index:12; background:#f8fafc; border-bottom:1px solid var(--border)}
.lefthead{padding:10px;border-right:1px solid var(--border);color:#111}
.months{display:flex}
.month{flex:none;border-right:1px solid var(--border);text-align:center;font-size:12px;padding:8px 0;color:#111}
.gantt-body{display:grid}
.row{display:grid;grid-template-columns:320px 1fr;border-bottom:1px solid var(--border)}
.row .left{position:sticky;left:0;background:#fff;z-index:5;border-right:1px solid var(--border);padding:8px 10px;white-space:nowrap;color:#111}
.row .right{position:relative;height:32px;background:#fff}
.tick{position:absolute;top:0;bottom:0;border-right:1px dashed #e5e7eb}
.today{position:absolute;top:0;bottom:0;border-left:2px dashed #111}
.bar{position:absolute;height:18px;border-radius:10px;background:#c9cdd3;box-shadow:inset 0 -1px 0 rgba(0,0,0,.06)}
.bar .label{position:absolute;left:8px;top:0;font-size:12px;line-height:18px;color:#0b0f14}
.legend{margin:8px 0;font-size:12px;display:flex;gap:12px;flex-wrap:wrap;color:#111}
.legend .swatch{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:middle}

/* Statusfarben – alle in Grautönen */
.s-geplant{background:#e5e7eb}
.s-laufend{background:#d1d5db}
.s-pausiert{background:#e9ecef}
.s-abgeschlossen{background:#f3f4f6}

.gantt-body{display:block}
.row{display:grid;grid-template-columns:320px 1fr;align-items:center}
.row .right{position:relative;height:28px}
.row+.row{border-top:1px solid var(--border)}