/* Base sci-fi theme */ 
:root{
  --bg-0:#0b0f1a;--bg-1:#0f172a;--panel:#131c2e;--glass:rgba(18,27,46,.6);
  --line:rgba(148,163,184,.15);--text:#e5e7eb;--muted:#94a3b8;
  --primary:#8bd3ff;--accent:#f59e0b;--success:#34d399;--warning:#fbbf24;--danger:#ef4444;
  --shadow:0 10px 40px rgba(0,0,0,.4), inset 0 0 0 1px var(--line);--radius:16px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;color:var(--text);
  background:radial-gradient(1200px 600px at 80% -10%, rgba(139,211,255,.08), transparent), var(--bg-0);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
}
.container{width:min(1200px,92vw);margin:0 auto;}
.bg{min-height:100vh;}
.muted{color:var(--muted);} .small{font-size:.9rem;} .mt-2{margin-top:.75rem;}
.center{display:flex;align-items:center;justify-content:center;}
.right{display:flex;gap:.75rem;justify-content:flex-end;}
.w-480{max-width:480px;}
.stack{display:grid;gap:.9rem;}
.grid{display:grid;} .grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-span-2{grid-column:1/-1;} .gap{gap:.9rem;}

.card{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005));
  border-radius:var(--radius); box-shadow:var(--shadow); padding:1rem; border:1px solid var(--line);}
.glass{backdrop-filter:blur(8px); background:var(--glass);}
.brand-banner{width:100%; height:120px; object-fit:cover; border-radius:12px; margin-bottom:.75rem;}

.title{margin:.25rem 0 0 0;}
.alert{padding:.75rem 1rem;border-radius:12px;margin-bottom:.75rem;border:1px solid var(--line);}
.alert.error{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.4);}

.field span{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.25rem;}
.field input,.field textarea,.field select{
  width:100%;padding:.7rem .85rem;border-radius:12px;border:1px solid var(--line);background:#0c1424;color:var(--text);
}

.btn{padding:.6rem 1rem;border-radius:12px;background:#0c1424;color:var(--text);border:1px solid var(--line);cursor:pointer;}
.btn.primary{background:linear-gradient(90deg,#34d7ff22,#1a7bb622);border-color:#47c0ff55;box-shadow:0 0 22px #0ff3 inset, 0 0 10px rgba(139,211,255,.2);}
.btn.small{padding:.4rem .7rem;font-size:.9rem;} .btn:hover{filter:brightness(1.1);}
.btn.danger{border-color:#ef444433;background:#2b0c13;}

.topbar{position:sticky;top:0;backdrop-filter:blur(8px);background:linear-gradient(180deg, rgba(10,14,24,.85), rgba(10,14,24,.35));
  border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:.6rem 2vw;z-index:9;}
.logo{font-weight:700;letter-spacing:.5px;} .logo span{color: var(--primary);}
.logo em{color: var(--muted); font-style: normal; font-weight:400; margin-left:.25rem;}
.topnav a{color: var(--text); text-decoration:none; margin-left:1rem; border:1px solid var(--line); padding:.4rem .7rem; border-radius:12px;}
.topnav a.danger{color:#fecaca;border-color:#ef444433;}

.wrap{min-height:100vh;}
.card.w-480{width:min(480px,94vw); margin:5vh auto;}

.hero{position:relative;height:220px;display:flex;align-items:flex-end;overflow:hidden;border-bottom:1px solid var(--line);}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.1) contrast(1.05) brightness(.9);}
.hero::after{content:''; position:absolute; inset:0; background: linear-gradient(180deg, transparent, rgba(11,15,26,.8));}
.hero-text{position:relative;padding:1.2rem 2vw;}
.hero-text h1{margin:0;font-size:clamp(1.4rem, 2vw + 1rem, 2.2rem);} .hero-text h1 span{color: var(--primary);}

.sticky-filters{position:sticky;top:0;z-index:8;backdrop-filter:blur(8px);background:linear-gradient(180deg, rgba(11,15,26,.82), rgba(11,15,26,.25));border-bottom:1px solid var(--line);}
.filters{display:flex;gap:.6rem;padding:.6rem 0;}

.kanban{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin:1rem 0 2rem;}
.col{background:linear-gradient(180deg, rgba(139,211,255,.03), rgba(255,255,255,.01)); border:1px solid var(--line); border-radius:var(--radius); padding:.8rem;}
.col-head{display:flex; align-items:center; justify-content:space-between; padding-bottom:.4rem; border-bottom:1px dashed var(--line); margin-bottom:.6rem;}

.badge{border:1px solid var(--line); border-radius:999px; padding:.2rem .6rem; font-size:.85rem; color:var(--muted);}
.badge.in-progress{color:#a5f3fc;border-color:#22d3ee55;}
.badge.planned{color:#fde68a;border-color:#f59e0b55;}
.badge.done{color:#bbf7d0;border-color:#34d39955;}
.badge.paused{color:#fca5a5;border-color:#ef444455;}

.item{display:flex;flex-direction:column;gap:.5rem;}
.item + .item{margin-top:.8rem;}
.item-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;}
.item h3{margin:.2rem 0;font-size:1.05rem;}
.pill{border:1px solid #22d3ee66; color:#a5f3fc; border-radius:999px; padding:.1rem .5rem; font-size:.8rem;}
.meta{display:flex;flex-wrap:wrap;gap:.8rem;font-size:.9rem;color:var(--muted);}

.panel{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border:1px solid var(--line); border-radius:var(--radius); padding:1rem; margin:1rem 0; box-shadow:var(--shadow);}
.panel-title{margin:0 0 .5rem 0;} .panel-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.5rem;}
.cards{display:grid; grid-template-columns: repeat(3,1fr); gap:.9rem;}

.modal.hidden{display:none;}
.modal{position:fixed; inset:0; display:grid; place-items:center; background: rgba(0,0,0,.5); z-index:50;}
.modal-card{width:min(720px,94vw); background:#0b1320; border:1px solid var(--line); border-radius:16px; padding:1rem; box-shadow: var(--shadow);}

.footer{border-top: 1px solid var(--line); margin-top: 2rem;}
.footer .container{display:flex;justify-content:center;padding: 1rem 0;}

@media (max-width:1100px){ .kanban{grid-template-columns:1fr 1fr;} .cards{grid-template-columns:1fr 1fr;} }
@media (max-width:720px){ .kanban{grid-template-columns:1fr;} .cards{grid-template-columns:1fr;} .filters{flex-direction:column;} }

/* --- Timeline (12 months from current month) --- */
.timeline{
  margin:2rem 0;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow);background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005));
}
.timeline-head{
  display:grid;
  grid-template-columns:220px 120px repeat(12, 1fr);  /* Titel | Version | 12 Monate */
  align-items:stretch;
}
.timeline-head .hcell{
  padding:.6rem .5rem;font-size:.9rem;color:var(--muted);
  border-bottom:1px dashed var(--line);border-right:1px dashed var(--line);text-align:center;
}
.timeline-head .hcell:first-child{ text-align:left; }
.timeline-head .hcell:nth-child(2){ text-align:center; }

.timeline-grid{
  display:grid;
  grid-template-columns:220px 120px repeat(12, 1fr);
  position:relative;
}
.timeline-row{display:contents;}

.timeline-cell{min-height:48px;border-right:1px dashed var(--line);border-bottom:1px dashed var(--line);}

/* Titel (max 2 Zeilen, sauberer Umbruch) */
.timeline-cell.label{
  padding:.5rem .6rem; display:flex; align-items:center; gap:.5rem;
}
.timeline-cell.label strong{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; line-height:1.2em; font-size:.95rem; font-weight:600; color:#e2e8f0;
}

/* Version-Spalte */
.timeline-cell.version{
  display:flex; align-items:center; justify-content:center; padding:0 .5rem; border-right:1px dashed var(--line);
}
.timeline-cell.version .pill{
  background:linear-gradient(135deg, #2563eb33, #1e40af33);
  border:1px solid #47c0ff55; color:#cdeafe; font-size:.8em; font-weight:600;
  border-radius:10px; padding:2px 8px; white-space:nowrap;
}

.timeline-bar{
  position:relative;height:24px;margin:10px 6px;border-radius:999px;
  background:linear-gradient(90deg,#34d7ff22,#1a7bb622);
  border:1px solid #47c0ff55;box-shadow:inset 0 0 12px rgba(139,211,255,.25);
}
.timeline-bar.done{background:linear-gradient(90deg,#16a34a33,#16a34a11);border-color:#22c55e55;}
.timeline-bar.planned{background:linear-gradient(90deg,#f59e0b33,#f59e0b11);border-color:#f59e0b55;}
.timeline-bar.paused{background:linear-gradient(90deg,#ef444433,#ef444411);border-color:#ef444455;}

.timeline-now{
  position:absolute;top:0;bottom:0;width:2px;background:#8bd3ff;opacity:.6;
  box-shadow:0 0 12px rgba(139,211,255,.8);pointer-events:none;grid-row:1/-1;
}

.timeline-legend{display:flex;gap:.8rem;align-items:center;padding:.6rem;color:var(--muted);font-size:.9rem;}
.timeline-legend .dot{width:12px;height:12px;border-radius:999px;display:inline-block;margin-right:.35rem;border:1px solid var(--line);}
.timeline-legend .d-planned{background:#f59e0b33;border-color:#f59e0b55;}
.timeline-legend .d-progress{background:#34d7ff22;border-color:#47c0ff55;}
.timeline-legend .d-done{background:#16a34a33;border-color:#22c55e55;}
.timeline-legend .d-paused{background:#ef444433;border-color:#ef444455;}

/* --- Compact timeline --- */
.compact-timeline{margin:.4rem .6rem 1rem;border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.compact-timeline-head{
  display:grid; grid-template-columns:220px 100px repeat(12, 1fr);
}
.compact-timeline-head .hcell{
  padding:.35rem;font-size:.8rem;color:var(--muted);
  border-bottom:1px dashed var(--line);border-right:1px dashed var(--line);text-align:center;
}
.compact-timeline-grid{
  display:grid; grid-template-columns:220px 100px repeat(12, 1fr);
}
.compact-timeline-cell{min-height:28px;border-right:1px dashed var(--line);border-bottom:1px dashed var(--line);}
.compact-timeline-cell.label{
  padding:.3rem .45rem; 
}
.compact-timeline-cell.label strong{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; line-height:1.15em; font-size:.9rem; font-weight:600; color:#e2e8f0;
}
.compact-timeline-cell.version{
  display:flex; align-items:center; justify-content:center; padding:0 .4rem;
}
.compact-timeline-cell.version .pill{
  background:linear-gradient(135deg, #2563eb33, #1e40af33);
  border:1px solid #47c0ff55; color:#cdeafe; font-size:.75em; font-weight:600;
  border-radius:10px; padding:2px 7px; white-space:nowrap;
}
.compact-bar{
  position:relative;height:16px;margin:6px 4px;border-radius:999px;
  background:linear-gradient(90deg,#34d7ff22,#1a7bb622);border:1px solid #47c0ff55;
}
.compact-bar.done{background:linear-gradient(90deg,#16a34a33,#16a34a11);border-color:#22c55e55;}
.compact-bar.planned{background:linear-gradient(90deg,#f59e0b33,#f59e0b11);border-color:#f59e0b55;}
.compact-bar.paused{background:linear-gradient(90deg,#ef444433,#ef444411);border-color:#ef444455;}