/* ─── Content Layout ─── */
.content-wrapper {
  max-width:1100px; margin:0 auto; padding:0 20px 80px;
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;
  text-align:left;
}

/* ─── Info Sidebar ─── */
.info-section {
  position:sticky; top:40px; align-self:start; padding-bottom:80px;
}
.info-section h2 { font-size:1.6rem; font-weight:700; margin-bottom:24px; }
.info-section h2 span { color:var(--accent2); }

.info-card {
  position:relative; overflow:hidden;
  background:var(--card); border:1px solid var(--border);
  border-radius:20px; padding:22px; margin-bottom:16px;
  backdrop-filter:blur(8px);
  transition:border-color 0.2s ease;
}
.info-card::after {
  content:""; position:absolute; inset:10px;
  border:1px dashed rgba(255,255,255,0.05); border-radius:13px; pointer-events:none;
}
.info-card:hover { border-color:rgba(167,139,250,0.25); }
.info-card h3 { position:relative; z-index:1; font-size:1rem; margin-bottom:8px; }
.info-card p  { position:relative; z-index:1; color:var(--muted); font-size:0.9rem; }

.info-tag {
  position:relative; z-index:1; display:inline-block; margin-bottom:10px;
  padding:4px 10px; border-radius:999px;
  font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em;
  background:rgba(167,139,250,0.08); border:1px solid rgba(167,139,250,0.2); color:var(--accent3);
}
.info-tag.gaming { background:rgba(124,58,237,0.12); border-color:rgba(124,58,237,0.25); color:#c4b5fd; }
.info-tag.dev    { background:rgba(99,102,241,0.1);  border-color:rgba(99,102,241,0.2);  color:#a5b4fc; }

/* ─── Timeline ─── */
.timeline-section { padding-bottom:80px; }
.timeline-section h2 { font-size:1.6rem; font-weight:700; margin-bottom:36px; }
.timeline-section h2 span { color:var(--accent2); }

.timeline { position:relative; padding-left:32px; }
.timeline::before {
  content:""; position:absolute; left:7px; top:0; bottom:0; width:2px;
  background:linear-gradient(to bottom, var(--accent2), rgba(167,139,250,0.1));
}

.tl-entry {
  position:relative; margin-bottom:36px;
  opacity:0; transform:translateY(20px);
  transition:opacity 0.5s ease, transform 0.5s ease;
}
.tl-entry.visible { opacity:1; transform:translateY(0); }

.tl-dot {
  position:absolute; left:-32px; top:4px;
  width:16px; height:16px; border-radius:50%;
  background:var(--bg);
  border:2px solid var(--accent2);
  box-shadow:0 0 8px rgba(167,139,250,0.5);
}
.tl-dot.planned { border-color:rgba(167,139,250,0.35); box-shadow:none; }
.tl-dot.planned::after {
  content:""; position:absolute; inset:3px; border-radius:50%;
  background:rgba(167,139,250,0.25);
}

.tl-year {
  display:inline-block; margin-bottom:6px;
  font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:0.1em;
  color:var(--accent2);
  background:rgba(167,139,250,0.08); border:1px solid rgba(167,139,250,0.2);
  border-radius:999px; padding:3px 10px;
}
.tl-status {
  display:inline-block; margin-left:6px; margin-bottom:6px;
  font-size:0.68rem; font-weight:600; text-transform:uppercase; letter-spacing:0.09em;
  border-radius:999px; padding:3px 10px;
}
.tl-status.aktuell      { background:rgba(34,197,94,0.1);   border:1px solid rgba(34,197,94,0.3);   color:#86efac; }
.tl-status.geplant      { background:rgba(245,158,11,0.08); border:1px solid rgba(245,158,11,0.25); color:#fcd34d; }
.tl-status.abgeschlossen{ background:var(--card);           border:1px solid var(--border);         color:var(--muted); }

.tl-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:18px 20px;
  backdrop-filter:blur(6px);
  transition:border-color 0.2s ease;
}
.tl-card:hover { border-color:rgba(167,139,250,0.25); }
.tl-card h3 { font-size:1rem; font-weight:600; margin-bottom:6px; }
.tl-card p  { font-size:0.9rem; color:var(--muted); }
.tl-card a  { color:var(--accent2); }
.tl-card a:hover { text-decoration:underline; }

/* ─── Responsive ─── */
@media(max-width:800px) {
  .content-wrapper { grid-template-columns:1fr; gap:48px; }
  .info-section { position:static; padding-bottom:0; }
}

header, .hero, .content-wrapper, footer { width:100%; }