.row{ height:38px; position:relative; border-bottom:1px solid var(--border); }
 .bar{ position:absolute; top:6px; height:26px; border-radius:8px; padding:0 8px; display:flex; align-items:center; gap:6px; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.25) }
+/* <<< WICHTIG: Container für absolute Bars */
+.grid{ position:relative; min-height:40px; }

:root{
  --bg:#f6f7fb; --surface:#ffffff; --border:#e8ebf3; --muted:#6b7280; --text:#0f172a;
  --radius:14px; --shadow:0 8px 24px rgba(15,23,42,.06);
  --blue:#2563eb; --green:#22c55e; --yellow:#f59e0b; --red:#ef4444; --violet:#8b5cf6;
  --day:28px; /* JS überschreibt via Zoom */
}
*{box-sizing:border-box;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial}
html,body{height:100%}
body{margin:0;background:linear-gradient(180deg,#f8fafc 0%, var(--bg) 40%);color:var(--text)}
.wrap{max-width:1200px;margin:0 auto;padding:24px}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:18px;overflow:hidden}
.card h2{margin:0;padding:14px 16px;border-bottom:1px solid var(--border);font-size:16px;font-weight:700}
.card .content{padding:16px}

.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.toolbar .btn{padding:10px 12px;border:1px solid var(--border);background:#fff;border-radius:10px;cursor:pointer;font-size:13px}
.toolbar .btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.toolbar .sp{flex:1}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;background:#eef2f7;color:#111827}

/* Tabs */
.tabs{display:flex;gap:8px;align-items:center}
.tab{padding:8px 12px;border:1px solid var(--border);background:#fff;border-radius:999px;cursor:pointer;font-size:13px}
.tab.active{background:#eef2ff;border-color:#c7d7ff}
.tabpane{display:none}
.tabpane.active{display:block}

/* Board (Monday-like) */
.board{border:1px solid var(--border);border-radius:12px;overflow:auto;background:#fff}
.table{width:100%;border-collapse:separate;border-spacing:0}
.table th,.table td{border-bottom:1px solid var(--border);padding:10px 12px;text-align:left;font-size:13px;white-space:nowrap}
.table thead th{position:sticky;top:0;background:#fff;z-index:1}
.table tr:hover td{background:#fafbff}
.cell{display:flex;align-items:center;gap:8px}
.cell input,.cell select{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:#fff}
.actions{display:flex;gap:8px}
.icon-btn{border:1px solid var(--border);background:#fff;border-radius:8px;cursor:pointer;padding:6px 8px}
.icon-btn:hover{background:#f8fafc}
.note{font-size:12px;color:var(--muted)}

/* Timeline */
.gantt{border:1px solid var(--border);border-radius:12px;background:#fff;overflow:auto}
.axis-weeks{display:flex;border-bottom:1px solid var(--border);position:sticky;top:0;background:#fff;z-index:10}
.week{text-align:center;font-size:12px;padding:8px 6px;border-right:1px solid var(--border);white-space:nowrap}
.axis-days{display:flex;position:sticky;top:40px;background:#fff;z-index:9}
.day{text-align:center;font-size:11px;color:#64748b;border-right:1px solid #f1f5f9;width:var(--day);padding:4px 0}

.rows{position:relative}
.row{border-bottom:1px dashed #eef2f7; height:36px; position:relative}

.bar{
  position:absolute; top:7px; height:22px; border-radius:999px;
  color:#fff; font-size:12px; padding:0 10px; line-height:22px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  box-shadow:0 5px 12px rgba(37,99,235,.18);
  cursor:grab; user-select:none; transition:box-shadow .2s ease;
}
.bar.blue{ background: var(--blue); }
.bar.yellow{ background: var(--yellow); color:#111; box-shadow:0 5px 12px rgba(245,158,11,.25); }

.bar .handle{
  position:absolute; top:0; width:8px; height:100%; background:rgba(255,255,255,.45); cursor:ew-resize;
}
.bar .handle.left{ left:0; border-radius:999px 0 0 999px; }
.bar .handle.right{ right:0; border-radius:0 999px 999px 0; }

.today-line{ position:absolute; top:0; bottom:0; width:2px; background:#ef4444; box-shadow:0 0 0 2px rgba(239,68,68,.15); }

/* zweispaltiges Layout */
.split {
  display: grid;
  grid-template-columns: 1.3fr 1fr; /* links Board schlank, rechts Timeline */
  gap: 16px;
}
@media (max-width: 1100px){
  .split { grid-template-columns: 1fr; }
}

/* combo (Such-Dropdown mit Liste + freie Eingabe) */
.combo { position: relative; }
.combo input {
  width: 100%; padding: 8px 10px; border:1px solid var(--border); border-radius:8px;
}
.combo .list {
  position:absolute; left:0; right:0; top:100%; z-index:20;
  background:#fff; border:1px solid var(--border); border-radius:10px; margin-top:4px; max-height:220px; overflow:auto;
  box-shadow: var(--shadow); display:none;
}
.combo.open .list { display:block; }
.combo .item { padding:8px 10px; cursor:pointer; }
.combo .item:hover { background:#f8fafc; }