/* =========================================================
   TerraSkyGuard – Front Page CSS (matching your template)
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --bg:#0A0F1C;
  --panel:#121A2C;
  --text:#FFFFFF;
  --muted:#B4C0CC;
  --primary:#3EC6FF;
  --accent:#6EF2B4;

  --radius:16px;
  --radius-sm:12px;
  --b1:1px solid rgba(255,255,255,.08);
  --b2:1px solid rgba(255,255,255,.12);
  --sh1:0 8px 20px rgba(0,0,0,.18);
  --sh2:0 12px 24px rgba(0,0,0,.22);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.6;
}
a{color:var(--primary);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 16px}

/* ---------- Typography & helpers ---------- */
.display{font-size:clamp(44px,6.5vw,72px);font-weight:800;letter-spacing:.6px;margin:0 0 12px}
.h2{font-size:clamp(28px,4.5vw,42px);margin:6px 0 12px}
.h3{font-size:clamp(24px,3.8vw,32px);margin:6px 0 10px}
.h4{font-size:20px;margin:6px 0}
.h5{font-size:18px;margin:6px 0}
.h6{font-size:16px;margin:6px 0}
.lead,.section-lead{color:var(--muted);max-width:860px;margin:0 auto 28px}
.muted{color:var(--muted)}
.mt-40{margin-top:40px}

.section{padding:68px 0}
.section--center .container{text-align:center}
.eyebrow{
  margin:0 0 8px; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); opacity:.9;
}
.panel{background:var(--panel);border-block:1px solid rgba(255,255,255,.06)}
.halo{position:relative;isolation:isolate}
.halo::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(62,198,255,.10), transparent 60%),
    radial-gradient(50% 45% at 90% 20%, rgba(110,242,180,.07), transparent 60%);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;padding:10px 16px;border-radius:var(--radius-sm);
  font-weight:700;border:1px solid transparent;transition:.15s ease;transform:translateY(0)
}
.btn-lg{font-size:18px;padding:14px 26px}
.btn-primary{background:var(--primary);color:#071018}
.btn-accent{background:var(--accent);color:#061510}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:.96}
.actions{margin-top:8px}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;isolation:isolate;min-height:78vh;display:grid;align-items:center;
  background:
    linear-gradient(180deg,rgba(10,15,28,.65),rgba(10,15,28,.85)),
    url('/wp-content/themes/tertaskyguard-sponsor-classic/assets/img/hero-fallback.jpg') center/cover no-repeat;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(65% 55% at 50% 30%,rgba(99,227,255,.16),transparent 60%),
    radial-gradient(40% 35% at 80% 20%,rgba(110,242,180,.10),transparent 60%);
}
.hero .container{text-align:center}

/* =========================================================
   GRID
   ========================================================= */
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* =========================================================
   CARD
   ========================================================= */
.card{
  background:rgba(255,255,255,.04);border:var(--b1);border-radius:var(--radius);
  padding:18px;text-align:left;box-shadow:var(--sh1);transition:.18s ease
}
.section--center .card{ text-align:left } /* Karten-Inhalt bleibt links lesbar */
.card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.16);box-shadow:0 16px 32px rgba(0,0,0,.28)}
.card--center{display:grid;place-items:center;text-align:center}
.card--tight{padding:18px 18px 14px}
.card--glass{
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);box-shadow:0 10px 24px rgba(0,0,0,.25)
}

/* Icons & Chips */
.icon{
  width:44px;height:44px;display:grid;place-items:center;margin:2px 0 10px;
  font-size:22px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)
}
.icon--glass{margin:2px auto 10px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chips--bottom{margin-top:auto}
.chip{
  padding:6px 10px;border-radius:999px;font-size:12.5px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff
}
.chip--fill{background:linear-gradient(90deg,var(--primary),var(--accent));color:#061015;font-weight:700;border:0}

/* ---------- Bulleted lists (clean) ---------- */
.bullet{margin:0;padding-left:18px}
.bullet li{margin:6px 0;color:var(--muted)}
.bullet li strong{color:var(--text)}

/* =========================================================
   ANSATZ – Flow-Karten (Tags unten)
   ========================================================= */
.card--flow{display:flex;flex-direction:column;gap:8px;min-height:260px}
.card--flow .chips{margin-top:auto;padding-top:8px;border-top:1px dashed rgba(255,255,255,.10)}
.section--center #ansatz .container{text-align:center}
#ansatz .grid{margin-top:6px}
#ansatz .card{ text-align:center }

/* =========================================================
   ZIELE
   ========================================================= */
.goals .card{position:relative;text-align:center;padding-top:30px}
.badge{
  position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  width:30px;height:30px;display:grid;place-items:center;font-weight:800;font-size:13px;
  border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 6px 14px rgba(0,0,0,.18)
}

/* =========================================================
   METHODEN & WORKFLOW
   ========================================================= */
#methoden .container{display:flex;flex-direction:column;align-items:center}
#methoden .section-lead{max-width:720px;margin:8px auto 32px}
.steps{
  list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:22px;justify-content:center
}
.steps li{width:160px;display:grid;justify-items:center;gap:6px}
.dot{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:linear-gradient(90deg,var(--primary),var(--accent));color:#0A0F1C;font-weight:800;
  box-shadow:0 8px 18px rgba(0,0,0,.25)
}
.steps strong{font-size:15px}
.steps small{color:var(--muted);font-size:13px}

/* =========================================================
   ROADMAP (vertical with connectors)
   ========================================================= */
.timeline{position:relative;margin:28px auto 0;max-width:900px;min-height:760px;padding:28px 0}
.rail{
  position:absolute;left:50%;top:0;bottom:0;transform:translateX(-50%);
  width:4px;border-radius:6px;background:linear-gradient(180deg,var(--primary),var(--accent));
  box-shadow:0 0 12px rgba(62,198,255,.28)
}
.rail .now{
  position:absolute;top:8px;left:50%;transform:translateX(calc(-50% - 10px));
  padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);font-size:12px
}
.year{
  position:absolute;left:50%;transform:translate(-50%,-50%);
  padding:6px 10px;border-radius:999px;font-weight:700;font-size:12.5px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)
}
.y1{top:110px}.p1{top:140px}
.y2{top:360px}.p2{top:390px} /* Phase 2 bewusst unterhalb der Jahresmarke */
.y3{top:640px}.p3{top:620px}

.phase{position:absolute;width:45%}
.right{right:0}.left{left:0}

/* connector vom Rail zur Kartenmitte */
.phase .card::before{
  content:"";position:absolute;top:50%;width:44px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--primary),var(--accent));box-shadow:0 0 10px rgba(62,198,255,.25);
  transform:translateY(-50%)
}
.right .card::before{left:-52px}
.left  .card::before{right:-52px}

.list>div{margin:6px 0;color:var(--muted)}
.res{display:flex;align-items:center;gap:10px;margin-top:10px}
.meter{
  position:relative;width:160px;height:10px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.25)
}
.meter::before{
  content:"";position:absolute;left:0;top:0;bottom:0;
  background:linear-gradient(90deg,var(--primary),var(--accent));box-shadow:0 0 10px rgba(62,198,255,.25)
}
.m-40::before{width:40%}.m-60::before{width:60%}.m-80::before{width:80%}
.current{border-color:rgba(255,255,255,.16);box-shadow:0 16px 32px rgba(0,0,0,.30)}

@media(max-width:900px){
  .timeline{max-width:unset}
  .phase{position:relative;width:auto;margin:16px 0}
  .right .card::before,.left .card::before{display:none}
  .rail{left:24px;transform:none;width:3px}
  .rail .now{left:24px;transform:none}
  .year{left:24px;transform:none;margin-left:10px}
}

/* =========================================================
   NETZWERK (Cluster minimal)
   ========================================================= */
.cluster{position:relative;margin:0 auto;max-width:980px}
.center{
  margin:0 auto 18px;max-width:520px;text-align:center
}
.pill{
  display:inline-block;padding:4px 10px;border-radius:999px;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#0A0F1C;
  background:linear-gradient(90deg,var(--primary),var(--accent));margin-bottom:8px
}
.ring{position:relative;aspect-ratio:16/10;border:var(--b1);border-radius:18px;padding:24px;overflow:hidden;
  background:
    radial-gradient(42% 36% at 50% 46%, rgba(62,198,255,.14), transparent 65%),
    radial-gradient(34% 30% at 70% 60%, rgba(110,242,180,.08), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  box-shadow:var(--sh2)
}
.tile{
  position:absolute;width:260px;max-width:32%;text-align:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);padding:16px;color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.26)
}
.tile .muted{font-size:13.5px}
.t-top{left:50%;transform:translate(-50%,0);top:40px}
.t-rt{right:60px;top:150px}
.t-rb{right:60px;bottom:150px}
.t-bottom{left:50%;transform:translate(-50%,0);bottom:36px}
.t-lb{left:60px;bottom:150px}
.t-lt{left:60px;top:150px}

.roles .role{min-height:200px;display:flex;flex-direction:column}
.roles .chips{margin-top:auto}

/* Responsive Cluster */
@media(max-width:760px){
  .ring{aspect-ratio:auto;padding:16px;background:transparent;border:0;box-shadow:none}
  .tile{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;width:100%;max-width:100%;margin:10px 0;text-align:left}
}

/* =========================================================
   BUDGET
   ========================================================= */
.tag{
  display:inline-block;padding:4px 8px;border-radius:999px;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)
}
.note{
  margin-top:18px;padding:14px 16px;border-radius:14px;text-align:center;color:var(--muted);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10)
}

/* =========================================================
   FAZIT (Band)
   ========================================================= */
.band{background:linear-gradient(180deg,#0D1728,#0A0F1C);border-block:1px solid rgba(255,255,255,.06)}
.band .container{text-align:center}

/* =========================================================
   Partner / Logos
   ========================================================= */
.logos img{max-height:64px;filter:grayscale(100%);opacity:.9}
.logo-item{
  display:grid;place-items:center;min-height:80px;background:rgba(255,255,255,.03);
  border:var(--b1);border-radius:12px
}

/* =========================================================
   Autor / Bio Footer
   ========================================================= */
.bio{background:#0D1728;border-top:1px solid rgba(255,255,255,.06)}
.bio-grid{
  display:grid;gap:20px;grid-template-columns:1.4fr 1fr 1fr 1fr;align-items:start
}
@media(max-width:900px){.bio-grid{grid-template-columns:1fr}}
/* ========== Roadmap: Feinschliff ========== */

/* "Heute" ausblenden */
.timeline .rail .now { display: none; }

/* Einheitlicher Abstand von der Achse */
.timeline { --axis: 50%; --gap: 52px; } /* gap = Abstand von Karte zur Achse */

/* Year-Badges: rechts neben der Achse, nicht über dem Strich */
.timeline .year{
  left: calc(var(--axis) + 16px);         /* 16px rechts neben der Rail */
  transform: translateY(-50%);            /* nur vertikal zentrieren */
  z-index: 2;
}
/* kleiner Tick von der Rail zum Jahr */
.timeline .year::before{
  content:""; position:absolute; left:-16px; top:50%;
  width:12px; height:2px; border-radius:2px;
  background: linear-gradient(90deg,var(--primary),var(--accent));
  transform: translateY(-50%);
  box-shadow: 0 0 6px rgba(62,198,255,.35);
}

/* Karten-Connectoren exakt mittig an die Rail setzen */
.timeline .phase .card::before{
  content:""; position:absolute; top:50%;
  height:2px; border-radius:2px;
  background: linear-gradient(90deg,var(--primary),var(--accent));
  box-shadow: 0 0 10px rgba(62,198,255,.25);
  transform: translateY(-50%);
}

/* rechts stehende Karten: Linie geht nach links bis zur Achse */
.timeline .phase.right .card::before{
  left: calc(-1 * var(--gap));
  width: var(--gap);
}

/* links stehende Karten: Linie geht nach rechts bis zur Achse */
.timeline .phase.left  .card::before{
  right: calc(-1 * var(--gap));
  width: var(--gap);
}

/* Positionen bleiben wie gehabt – Phase 2 liegt bewusst unter der Jahresmarke */
.timeline .y1{ top:110px }  .timeline .p1{ top:140px }
.timeline .y2{ top:360px }  .timeline .p2{ top:390px }
.timeline .y3{ top:640px }  .timeline .p3{ top:620px }

/* Responsive: Jahre neben der Rail beibehalten, Connectoren ausblenden wie vorher */
@media (max-width:900px){
  .timeline .year{ left: 48px; transform:none; }  /* rechts der mobilen Rail */
  .timeline .year::before{ left:-14px; }
  .timeline .phase .card::before{ display:none; }
}
/* ===== Roadmap – Rail, Labels & Connector-Finish ===== */
.timeline{
  /* Stellschrauben */
  --rail-w: 4px;          /* Breite des Zeitstrahls */
  --rail-gap: 0px;        /* 0 = bündig, z.B. 6px = kleiner Abstand */
}

/* Rail neu aufbauen: unsichtbarer 'Maskenrand' + echter Strich darüber */
.timeline .rail{
  position:absolute; left:50%; top:0; bottom:0; transform:translateX(-50%);
  z-index: 30; /* unter Jahreslabels, über Connectors */
}

/* Maskenrand: über Connectors, unter Labels – schneidet die letzten Pixel sauber ab */
.timeline .rail::before{
  content:""; position:absolute; inset:0;
  transform:translateX(0); /* bereits zentriert durch .rail */
  width: calc(var(--rail-w) + var(--rail-gap) * 2);
  margin: 0 auto;
  background: var(--bg);        /* Hintergrund deiner Seite */
  z-index: 31;
}

/* Der eigentliche, leuchtende Strich */
.timeline .rail::after{
  content:""; position:absolute; inset:0;
  width: var(--rail-w);
  margin: 0 auto;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--primary), var(--accent));
  box-shadow: 0 0 12px rgba(62,198,255,.28);
  z-index: 32;
}

/* Jahres-Badges immer VOR dem Strich */
.timeline .year{
  position:absolute; left:50%; transform:translate(-50%, -50%);
  z-index: 50; /* ganz vorn */
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  padding: 6px 10px; border-radius: 999px; font-weight:700; font-size:12.5px;
}

/* „Heute“-Marker ausblenden (falls noch im HTML) */
.timeline .now{ display:none !important; }

/* Connector-Linien: bleiben wie in deinem Setup – 
   durch die Rail-Maske wirken sie nun bündig oder mit Abstand (siehe --rail-gap) */
.timeline .phase.right .card::before,
.timeline .phase.left  .card::before{
  content:""; position:absolute; top:50%;
  height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  box-shadow: 0 0 10px rgba(62,198,255,.25);
  transform: translateY(-50%);
  z-index: 20; /* unter der Rail-Maske */
}

/* Länge der Connectoren:  passt du bei Bedarf an – 
   die letzten Pixel werden durch die Maske abgeschnitten. */
.timeline .phase.right .card::before{ left: -44px; width: 44px; }
.timeline .phase.left  .card::before{ right:-44px; width: 44px; }


/* ===== Netzwerk (Halo-Layout, dezenter Hover) ===== */
.net-stage{
  position:relative;
  margin:22px auto 0;
  width:min(980px,94vw);
  aspect-ratio:16/10;
  padding:24px;
  border-radius:18px;
  overflow:hidden;
  background:
    radial-gradient(42% 36% at 50% 46%, rgba(62,198,255,.14), transparent 65%),
    radial-gradient(34% 30% at 70% 60%, rgba(110,242,180,.08), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 28px rgba(0,0,0,.22);
}

/* zentrale Karte */
.net-center{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  text-align:center;
  padding:16px 18px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  min-width:260px;
}

/* Satelliten-Tiles (ohne Linien) */
.net-tile{
  position:absolute; width:260px; max-width:32%;
  text-align:left;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  padding:16px;
  box-shadow:0 8px 18px rgba(0,0,0,.22);
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.net-tile:hover{                   /* sehr dezenter Hover */
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 12px 22px rgba(0,0,0,.26);
}
.net-tile h3{ margin:0 0 6px; }

/* präzise Positionen im Ring */
.t-top     { left:50%; transform:translate(-50%,0); top:42px; }
.t-rt      { right:60px; top:150px; }
.t-rb      { right:60px; bottom:150px; }
.t-bottom  { left:50%; transform:translate(-50%,0); bottom:42px; }
.t-lb      { left:60px; bottom:150px; }
.t-lt      { left:60px; top:150px; }

/* Rollen-Kacheln unten – Chips am Rand */
.roles .card.role{ display:flex; flex-direction:column; min-height:220px; }
.roles .chips--bottom{ margin-top:auto; }

/* Mobil: alles stapeln, Bühne wird flach */
@media (max-width: 760px){
  .net-stage{ aspect-ratio:auto; padding:16px; background:transparent; border:0; box-shadow:none; }
  .net-center{ position:relative; left:auto; top:auto; transform:none; width:100%; margin-bottom:10px; }
  .net-tile{
    position:relative; left:auto; right:auto; top:auto; bottom:auto; transform:none;
    width:100%; max-width:100%; margin:10px 0; text-align:left;
  }
}
/* === Roadmap: Jahr-Badges lesbar + keine Minustriche === */
.timeline .year{
  position:absolute;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:4;                            /* vor dem Rail */
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:12.5px;
  color:#fff;
  background:rgba(7,12,20,.92);         /* dunkler Chip */
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px);
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  text-shadow:0 1px 0 rgba(0,0,0,.55);  /* Kontrast auf hellem Rail */
}

/* Falls in deinem CSS die Jahr-Badges eine kleine Linie zeichnen: abschalten */
.timeline .year::before,
.year::before{
  content:none !important;
}

/* Optional: Rail minimal entschärfen, damit die Schrift noch klarer wirkt */
.timeline .rail{
  box-shadow:0 0 10px rgba(62,198,255,.22), 0 0 18px rgba(110,242,180,.16);
}
/* === Netzwerk: zentrale Box nur "TerraSkyGuard™", textzentriert, kein Hover === */

/* Center-Box reduzieren */
#netz .center{
  text-align:center;
  padding:14px 16px;
}
#netz .center .pill,
#netz .center small{ display:none !important; }
#netz .center strong{
  display:block;
  font-size:18px;
  letter-spacing:.2px;
}

/* Kacheln: Text mittig */
#netz .tile{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center;
}
#netz .tile h3{ margin:0 0 6px; text-align:center; }
#netz .tile p{ margin:0; text-align:center; }

/* Hover-Effekte in diesem Abschnitt vollständig deaktivieren */
#netz .card,
#netz .tile,
#netz .center{
  transition:none !important;
}
#netz .card:hover,
#netz .tile:hover,
#netz .center:hover{
  transform:none !important;
  box-shadow:inherit !important;
  border-color:inherit !important;
}

/* Falls die frühere Sunburst-Variante aktiv ist */
.sunburst .sb-center .badge-center,
.sunburst .sb-center span{ display:none !important; }   /* nur "TerraSkyGuard™" stehen lassen */
.sunburst .sb-center strong{ display:block; font-size:18px; letter-spacing:.2px; }

.sunburst .sb-card{ text-align:center; }
.sunburst .sb-card h3{ margin:0 0 6px; text-align:center; }
.sunburst .sb-card p{ margin:0; text-align:center; }

.sunburst .sb-card,
.sunburst .sb-center{
  transition:none !important;
}
.sunburst .sb-card:hover,
.sunburst .sb-center:hover{
  transform:none !important;
  box-shadow:inherit !important;
  border-color:inherit !important;
}
/* === Roadmap: Year badges besser lesbar ================================== */
.timeline { position: relative; }
.timeline .rail { position: absolute; z-index: 0; }        /* Linie hinten */
.timeline .phase,
.timeline .phase .card { position: relative; z-index: 1; } /* Karten über Linie */

/* Grundstil für alle Jahreschips */
.timeline .year{
  position:absolute;
  left:50%;
  transform:translate(-50%, -50%);
  z-index: 2;                         /* über dem Zeitstrahl */
  padding:6px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:12.5px;
  letter-spacing:.2px;
  color:#EAF7FF;
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  box-shadow:
    0 0 0 2px rgba(10,15,28,.55),     /* dunkler Rand gegen die leuchtende Linie */
    0 6px 16px rgba(0,0,0,.25);
}

/* Individuelle Akzentverläufe */
.timeline .year.y1{ /* 2026–2027 */
  background:linear-gradient(90deg, rgba(62,198,255,.35), rgba(62,198,255,.22));
}
.timeline .year.y2{ /* 2028–2029 */
  background:linear-gradient(90deg, rgba(110,242,180,.35), rgba(62,198,255,.22));
}
.timeline .year.y3{ /* ab 2030 */
  background:linear-gradient(90deg, rgba(110,242,180,.40), rgba(110,242,180,.22));
}

/* Falls irgendwo kleine Ticks/Striche per ::before gesetzt wurden – aus */
.timeline .year::before{ content:none !important; }

/* Anschlusslinien von Karten zum Rail bündig (kein Überstand) */
.timeline .phase.right .card::before,
.timeline .phase.left  .card::before{
  height:3px;
  margin-top:-1.5px;     /* exakt mittig auf Höhe der Kartenmitte */
  /* Optional minimaler Abstand zum Rail:
  width:42px;  -> kürzer als zuvor, damit nichts „in“ die Rail ragt
  */
}
/* === Netzwerk: ruhig & zentriert ===================================== */
/* Deckt beide Varianten ab: .nxv2 (Halo-Layout) und .cluster/.tile (minimal) */

/* Kacheln: keine Animation/Bewegung/Scale mehr */
.nxv2-tile,
.cluster .tile {
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

/* Hover vollständig neutralisieren */
.nxv2-tile:hover,
.cluster .tile:hover {
  transform: none !important;
  box-shadow: inherit;        /* optional: keine stärkere Shadow-Änderung */
  border-color: inherit;
}

/* Inhalt sauber zentrieren (horizontal + vertikal) */
.nxv2-center,
.nxv2-tile,
.cluster .center,
.cluster .tile {
  display: flex;
  flex-direction: column;
  justify-content: center;    /* vertikale Zentrierung */
  align-items: center;        /* horizontale Zentrierung */
  text-align: center;
}

/* Typo in den Kacheln zentriert */
.nxv2-tile h3,
.nxv2-tile p,
.nxv2-center strong,
.nxv2-center small,
.cluster .tile h3,
.cluster .tile p,
.cluster .center strong,
.cluster .center small {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Falls noch ein altes „Floating“ aktiv ist (z. B. .nx-card @keyframes) – hart aus */
.nx-card { animation: none !important; transform: none !important; }

/* Optional: gleiche Mindesthöhe, damit nichts optisch „springt“ beim Reflow */
.nxv2-tile,
.cluster .tile { min-height: 110px; }
.roles .card,
.nxv2-roles .nxv2-role {
  text-align: center;
}
/* === NETWORK HOT-FIX (restore positions, center text, no jump) === */

/* 1) Keine Animationen/Transitions, aber Basis-transform NICHT anfassen */
.nxv2-tile,
.cluster .tile{
  animation: none !important;
  transition: none !important;
}

/* 2) Hover neutralisieren – keine Bewegung/Verstärkung */
.nxv2-tile:hover,
.cluster .tile:hover{
  transform: none !important;       /* nur beim Hover neutralisieren */
  box-shadow: inherit !important;
  border-color: inherit !important;
}

/* 3) ZENTRIERTER Inhalt (ohne die Positionierung zu verändern) */
.nxv2-center,
.nxv2-tile,
.cluster .center,
.cluster .tile{
  display: flex;
  flex-direction: column;
  justify-content: center;           /* vertikal */
  align-items: center;               /* horizontal */
  text-align: center;
}

.nxv2-tile h3,
.nxv2-tile p,
.nxv2-center strong,
.nxv2-center small,
.cluster .tile h3,
.cluster .tile p,
.cluster .center strong,
.cluster .center small{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* 4) EXPLIZIT die Kacheln, die per translate zentriert werden, wieder herstellen */
.nxv2 .t-top,
.nxv2 .t-bottom,
.cluster .t-top,
.cluster .t-bottom{
  transform: translate(-50%,0) !important;
}

/* 5) kleine Sicherheitsnetze */
.nx-card{ animation: none !important; }      /* alte Floating-Anim aus */
.nxv2-tile, .cluster .tile{ min-height: 110px; }   /* ruhige Höhe */
/* === Roadmap: Rail sauber innerhalb der Sektion halten === */
#roadmap .timeline{
  position: relative;          /* Bezugsrahmen für absolute Kinder */
  padding-bottom: 64px;        /* Luft unterhalb der letzten Phase */
  overflow: hidden;            /* schneidet Rail + Glow am Abschnittsende ab */
  z-index: 1;                  /* über Normalinhalten, aber egal für next section */
}

/* Rail selbst – keine „Überlänge“ durch Schatten */
#roadmap .timeline .rail{
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;                   /* endet exakt mit .timeline */
  transform: translateX(-50%);
  width: 4px;
  border-radius: 6px;
  background: linear-gradient(180deg,var(--primary),var(--accent));
  box-shadow: 0 0 12px rgba(62,198,255,.28); /* moderater Glow */
}

/* Jahr-Badges sicher über dem Rail und ohne seitliche Striche */
#roadmap .timeline .year{
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;                  /* über dem Rail */
  background: rgba(8,14,24,.75);   /* bessere Lesbarkeit auf dem Strahl */
  border: 1px solid rgba(255,255,255,.16);
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12.5px;
  backdrop-filter: blur(6px);
}
#roadmap .timeline .year::before,
#roadmap .timeline .year::after{ display:none; } /* sicherheitshalber */

/* Verbinder von Karten zur Rail enden bündig am Strahl */
#roadmap .timeline .phase.right .card::before,
#roadmap .timeline .phase.left  .card::before{
  content:"";
  position:absolute;
  top:50%;
  width:44px;                  /* kontrollierte Länge */
  height:3px;
  border-radius:3px;
  background: linear-gradient(90deg,var(--primary),var(--accent));
  box-shadow: 0 0 8px rgba(62,198,255,.22);
  transform: translateY(-50%);
}
#roadmap .timeline .phase.right .card::before{ left:-52px; }  /* bündig zur Rail */
#roadmap .timeline .phase.left  .card::before{ right:-52px; }

/* Extra Abstand oberhalb des Netzwerk-Blocks, falls notwendig */
#netz.section,
#netzwerk.section{ padding-top: 72px; }
/* === Roadmap – Clean Pill Years, bündige Verbinder, kein Überlaufen === */

/* 1) Bühne der Timeline sauber abschließen */
#roadmap .timeline{
  position:relative;
  padding: 8px 0 72px;      /* Luft nach unten */
  overflow:hidden;          /* Rail + Glow enden innerhalb der Sektion */
  z-index:1;
}

/* 2) Vertikale Rail (dezenter Glow) */
#roadmap .timeline .rail{
  position:absolute; left:50%; top:0; bottom:0;
  transform:translateX(-50%);
  width:4px; border-radius:6px;
  background:linear-gradient(180deg,var(--primary),var(--accent));
  box-shadow:0 0 10px rgba(62,198,255,.25), 0 0 18px rgba(110,242,180,.18);
}

/* 3) Jahres-Badges – farbige, gut lesbare Pills über dem Strahl */
#roadmap .timeline .year{
  position:absolute;
  left:50%; transform:translate(-50%, -50%);
  z-index:2;                          /* vor der Rail */
  padding:6px 12px;
  border-radius:999px;
  font-weight:800; font-size:12.5px;
  color:#08121a;                       /* dunkle Schrift */
  background:linear-gradient(90deg,var(--primary),var(--accent));
  border:none;
  box-shadow:0 6px 14px rgba(0,0,0,.22);
  backdrop-filter:none;
}
/* falls alte Deko-Striche existieren → aus */
#roadmap .timeline .year::before,
#roadmap .timeline .year::after{ display:none !important; }

/* 4) Verbinder von den Karten zur Rail
      – wähle GAP=0 (bündig) oder 6px (kleiner Abstand) */
:root{
  --rm-connector: 40px;   /* Länge des Verbinders */
  --rm-gap: 6px;          /* 0 = bündig am Strahl, 6px = kleiner Abstand */
}
#roadmap .timeline .phase.right .card::before,
#roadmap .timeline .phase.left  .card::before{
  content:""; position:absolute; top:50%;
  width:var(--rm-connector); height:3px; transform:translateY(-50%);
  border-radius:3px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  box-shadow:0 0 8px rgba(62,198,255,.22);
}
#roadmap .timeline .phase.right .card::before{ left: calc(-1 * (var(--rm-connector) + var(--rm-gap))); }
#roadmap .timeline .phase.left  .card::before{ right: calc(-1 * (var(--rm-connector) + var(--rm-gap))); }

/* 5) Responsive – auf schmalen Screens verbinden wir nicht zur Rail */
@media (max-width: 900px){
  #roadmap .timeline .phase.right .card::before,
  #roadmap .timeline .phase.left  .card::before{ display:none; }
  #roadmap .timeline .rail{ left:24px; transform:none; width:3px; }
  #roadmap .timeline .year{ left:24px; transform:translateY(-50%); }
}
/* Roadmap: Abschnitthöhe & Overflow korrigieren, damit Phase 3 sichtbar ist */
#roadmap .timeline{
  /* vorher: overflow:hidden; padding-bottom:72px; */
  overflow: visible;           /* nichts mehr abschneiden */
  padding-bottom: 180px;       /* genug Luft für Phase 3 und den Glow */
  margin-bottom: 40px;         /* Abstand zur nächsten Sektion */
}

/* Falls dein Rail unten optisch „übersteht“, etwas kürzen */
#roadmap .timeline .rail{
  bottom: 16px;                /* Rail endet etwas vor dem Containerende */
}

/* ===== Netzwerk – Panel als einheitliche Box ===== */
.nx-panel{
  position:relative;
  margin:22px auto 0;
  width:min(980px,94vw);
  border-radius:18px;
  padding:28px 24px 20px;
  background:
    radial-gradient(42% 36% at 50% 48%, rgba(62,198,255,.14), transparent 65%),
    radial-gradient(34% 30% at 70% 60%, rgba(110,242,180,.08), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 28px rgba(0,0,0,.22);
}

/* obere Bühne */
.nx-canvas{
  position:relative;
  aspect-ratio: 16/9;
  min-height: 420px;
}

/* Zentrum */
.nx-center{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  text-align:center;
  padding:14px 16px 12px;
  border-radius:14px;
  color:#fff;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  box-shadow:0 10px 22px rgba(0,0,0,.22);
}
.nx-center .pill{
  display:inline-block; margin-bottom:8px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:4px 8px; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
  color:#eaf8ff;
}
.nx-center strong{ display:block; font-size:18px; letter-spacing:.2px; }

/* Satelliten-Kacheln – ruhiger, zentrierter Text, kein Hover */
.nx-tile{
  position:absolute; width:260px; max-width:32%;
  padding:16px; border-radius:14px;
  text-align:center;
  color:#fff;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 8px 22px rgba(0,0,0,.26);
  transition:none;               /* kein Hover-Effekt */
}
.nx-tile h3{ margin:0 0 6px; font-size:18px; }
.nx-tile p{ margin:0; color:var(--muted); font-size:13.5px; }

/* präzise Positionen */
.t-top         { left:50%; transform:translate(-50%,0); top:18px; }
.t-rt          { right:34px;  top:118px; }
.t-rb          { right:34px;  bottom:118px; }
.t-bottom      { left:50%; transform:translate(-50%,0); bottom:18px; }
.t-lb          { left:34px;   bottom:118px; }
.t-lt          { left:34px;   top:118px; }

/* Rollen unten – jetzt in derselben Panel-Box */
.nx-roles{
  margin-top:18px;
  display:grid; gap:16px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.nx-role{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:16px;
  text-align:center;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
  display:flex; flex-direction:column;
}

/* Listen ohne Bullets (ruhig, sauber) */
.nx-plain{
  list-style:none; padding:0; margin:6px 0 10px;
  color:var(--muted);
}
.nx-plain li{ margin:4px 0; }

/* Chips unten bündig */
.chips--bottom{ margin-top:auto; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.chip{
  padding:6px 10px; border-radius:999px; font-size:12.5px; line-height:1;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04);
  color:#fff; white-space:nowrap;
}

/* Responsiv: stapeln */
@media (max-width: 760px){
  .nx-canvas{ aspect-ratio:auto; min-height:unset; }
  .nx-tile{
    position:relative; left:auto; right:auto; top:auto; bottom:auto; transform:none;
    width:100%; max-width:100%; margin:8px 0;
  }
  .nx-center{ position:relative; left:auto; top:auto; transform:none; margin:6px auto 12px; }
  .nx-roles{ grid-template-columns:1fr; }
}
/* ===== Roadmap – Layout fix (2 rechts, 1 links) ===== */
.timeline{
  position:relative;
  margin:28px auto 0;
  max-width:980px;
  min-height:980px;                 /* genug Höhe, damit Phase 3 nicht in den nächsten Abschnitt rutscht */
  padding:28px 0 60px;
}

/* Mittlerer Rail */
.timeline .rail{
  position:absolute; left:50%; top:0; bottom:0;
  transform:translateX(-50%);
  width:4px;
  border-radius:6px;
  background:linear-gradient(180deg,var(--primary),var(--accent));
  box-shadow:0 0 12px rgba(62,198,255,.28);
}

/* Jahres-Badges: immer VOR dem Rail und gut lesbar */
.timeline .year{
  position:absolute; left:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  padding:6px 10px;
  border-radius:999px;
  font-weight:700; font-size:12.5px;
  color:#061015;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  box-shadow:0 0 10px rgba(62,198,255,.25);
  border:0;
}
.timeline .y1{ top:210px; }
.timeline .y2{ top:360px; }
.timeline .y3{ top:640px; }

/* Phasen-Container: symmetrisch zur Rail mit konstantem Gap */
.timeline .phase{
  position:absolute;
  width:44%;
}
.timeline .right{ left:calc(50% + 24px); } /* Karten rechts: Start 24px rechts der Rail */
.timeline .left { right:calc(50% + 24px); } /* Karten links:  Start 24px links  der Rail */

/* Vertikale Positionen (fein justiert) */
.timeline .p1{ top:140px; }
.timeline .p2{ top:380px; }
.timeline .p3{ top:620px; }            /* sicher innerhalb der Roadmap */

/* Kartenstyle beibehalten; nur die Verbindungs-Linien präzise bündig */
.timeline .card{
  position:relative;
  background:var(--panel);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:18px;
  box-shadow:0 12px 24px rgba(0,0,0,.22);
}

/* Connector – endet exakt an der Rail, 24px Länge */
.timeline .right .card::before,
.timeline .left  .card::before{
  content:"";
  position:absolute;
  top:50%; transform:translateY(-50%);
  height:3px; width:24px; border-radius:3px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  box-shadow:0 0 10px rgba(62,198,255,.25);
}
.timeline .right .card::before{ left:-24px; }  /* nach links zur Rail */
.timeline .left  .card::before{ right:-24px; } /* nach rechts zur Rail */

/* Ressourcen-Balken etc. bleibt wie gehabt */

/* Responsive – auf Mobil alles untereinander, ohne Connector */
@media (max-width:900px){
  .timeline{ min-height:unset; padding-bottom:20px; }
  .timeline .right, .timeline .left{
    position:relative; left:auto; right:auto; width:auto; margin:16px 0;
  }
  .timeline .card::before{ display:none; }
  .timeline .rail{ left:24px; transform:none; width:3px; }
  .timeline .year{ left:24px; transform:translateY(-50%); }
}
/* === Roadmap: mehr Abstand + bündige Connector === */

/* Abstand der Karten vom Zeitstrahl (vorher 24px) */
.timeline .right { left: calc(50% + 48px); }  /* rechts der Rail */
.timeline .left  { right: calc(50% + 48px); } /* links  der Rail */

/* Connector-Linien exakt bis an die Rail (Breite = Abstand) */
.timeline .right .card::before,
.timeline .left  .card::before{
  height: 3px;
  width: 48px;                /* = Abstand oben */
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  box-shadow: 0 0 10px rgba(62,198,255,.25);
}

.timeline .right .card::before{ left: -48px;  } /* nach links zur Rail */
.timeline .left  .card::before{ right: -48px; } /* nach rechts zur Rail */

/* Jahres-Badges sicher vor der Rail & Karten */
.timeline .year{
  z-index: 3;
  pointer-events: none;       /* verhindert Hover-/Click-Störungen */
}

/* Feintuning: kleine Luft zwischen Badge & Connectors (optional) */
.timeline .y1{ top: 210px; }
.timeline .y2{ top: 360px; }
.timeline .y3{ top: 640px; }

/* Responsive bleibt wie vorher: nichts ändern nötig */
@media (max-width:900px){
  .timeline .right, .timeline .left{ left:auto; right:auto; width:auto; }
  .timeline .card::before{ display:none; }
}
/* --- Basisfarben --- */
:root{
  --bg-0:#0A0F1C;   /* tiefschwarz */
  --bg-1:#0D1422;   /* dunkles Blau */
  --divider:rgba(255,255,255,.06);
}

/* Einheitliche Section-Basis */
.home .section{
  position:relative;
  padding:72px 0;
}

/* Automatischer Farbwechsel (1,3,5… schwarz / 2,4,6… blau) */
.home .section:nth-of-type(odd){  background:var(--bg-0); }
.home .section:nth-of-type(even){ background:var(--bg-1); }

/* zarte Trennung zwischen zwei Blöcken */
.home .section + .section{ border-top:1px solid var(--divider); }
.home .section + .section::before{
  content:"";
  position:absolute; left:0; right:0; top:-1px; height:28px;
  background:linear-gradient(to bottom, var(--divider), transparent 70%);
  pointer-events:none;
}

/* Falls einzelne Blöcke eigene Pane/Halo-Hintergründe haben:
   Hintergrund transparent lassen, damit der Section-Farbwechsel wirkt */
.section.panel,
.section.halo{ background:transparent; }

/* Optional: manuell steuern (überschreibt die Automatik) */
.bg-dark{ background:var(--bg-0) !important; }
.bg-blue{ background:var(--bg-1) !important; }
/* Container für die ganze Startseite */
html, body {
  height: 100%;
}
body {
  overflow-y: auto;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;    /* << Snap aktivieren */
}

/* Jede Sektion als „Seite“ */
.section {
  min-height: 100svh;               /* volle Viewport-Höhe */
  scroll-snap-align: start;         /* oben einrasten */
  scroll-snap-stop: always;         /* nicht überspringen */
  display: grid; place-items: center;  /* optional zentriert Inhalt */
}

/* Weniger „fahrstuhl“-Gefühl, wenn Nutzer Motion reduziert */
@media (prefers-reduced-motion: reduce) {
  html, body { scroll-behavior: auto; }
}
<nav class="snap-dots" aria-label="Inhaltsnavigation">
  <a href="#hero"    aria-label="Hero"></a>
  <a href="#vision"  aria-label="Vision"></a>
  <a href="#ansatz"  aria-label="Ansatz"></a>
  <a href="#ziele"   aria-label="Ziele"></a>
  <a href="#methoden" aria-label="Methoden"></a>
  <a href="#roadmap" aria-label="Roadmap"></a>
  <a href="#netz"    aria-label="Netzwerk"></a>
  <a href="#budget"  aria-label="Budget"></a>
  <a href="#risiken" aria-label="Risiken"></a>
  <a href="#fazit"   aria-label="Fazit"></a>
</nav>
<script>
document.addEventListener('DOMContentLoaded', () => {
  const sections = Array.from(document.querySelectorAll('.section[id]'));
  const dots = Array.from(document.querySelectorAll('.snap-dots a'));
  const byId = id => dots.find(a => a.getAttribute('href') === '#'+id);

  const io = new IntersectionObserver(entries => {
    entries.forEach(e => {
      if (e.isIntersecting && e.intersectionRatio > 0.6) {
        dots.forEach(d => d.classList.remove('is-active'));
        const dot = byId(e.target.id);
        if (dot) dot.classList.add('is-active');
        history.replaceState(null, '', '#'+e.target.id); // URL aktualisieren
      }
    });
  }, { threshold: [0.6] });

  sections.forEach(s => io.observe(s));
});
</script>
<script>
document.addEventListener('keydown', e => {
  const keysNext = ['PageDown','ArrowDown',' '];
  const keysPrev = ['PageUp','ArrowUp','Shift '];
  if (!keysNext.includes(e.key) && !keysPrev.includes(e.key)) return;

  const secs = [...document.querySelectorAll('.section')];
  const y = window.scrollY + window.innerHeight/2;
  const idx = secs.findIndex(s => {
    const r = s.getBoundingClientRect();
    const top = r.top + window.scrollY;
    const bot = top + r.height;
    return y >= top && y < bot;
  });

  if (idx === -1) return;
  e.preventDefault();

  const nextIdx = keysNext.includes(e.key) ? Math.min(idx+1, secs.length-1)
                                           : Math.max(idx-1, 0);
  secs[nextIdx].scrollIntoView({behavior:'smooth', block:'start'});
});
</script>
/* ================= Roadmap – FIX pack ================= */
.timeline{
  /* Layout-Variablen */
  --rail-w: 4px;
  --conn: clamp(44px, 6vw, 84px);   /* Abstand Rail <-> Card  */
  --row-gap: clamp(80px, 9vh, 120px);
  --pad-outer: clamp(8px, 1.2vw, 16px); /* mehr Abstand von den Year-Pills */
  position: relative;
  display: grid;
  grid-template-columns: 1fr var(--conn) var(--rail-w) var(--conn) 1fr; /* 5 Spalten: Card L | Connector | Rail | Connector | Card R */
  row-gap: var(--row-gap);
  align-items: center;
}

/* Rail steht in Spalte 3 über die gesamte Höhe */
.timeline .rail{
  grid-column: 3;
  grid-row: 1 / -1;
  justify-self: center;
  width: var(--rail-w);
  border-radius: 6px;
  background: linear-gradient(180deg,var(--primary),var(--accent));
  box-shadow: 0 0 10px rgba(62,198,255,.35), 0 0 22px rgba(110,242,180,.18);
}

/* Alles aus evtl. absolutem Layout zurückholen */
.timeline .phase,
.timeline .year{
  position: static !important;
  top:auto !important; left:auto !important; right:auto !important;
  margin: 0;
}

/* Grid-Zuordnung je Reihe (kein HTML ändern, wir nutzen deine y1/y2/y3 & p1/p2/p3) */
.timeline .year.y1{ grid-column:3; grid-row:1; justify-self:center; }
.timeline .phase.p1{ grid-column:5; grid-row:1; justify-self:start; }

.timeline .year.y2{ grid-column:3; grid-row:2; justify-self:center; }
.timeline .phase.p2{ grid-column:1; grid-row:2; justify-self:end; }

.timeline .year.y3{ grid-column:3; grid-row:3; justify-self:center; }
.timeline .phase.p3{ grid-column:5; grid-row:3; justify-self:start; }

/* Cards normal positionieren */
.timeline .phase .card{
  position: relative;
  max-width: min(520px, 42vw);
}

/* Connector-Linien: exakt bündig bis an den Rail (Spalte 2/4) */
.timeline .phase.right .card::before,
.timeline .phase.left  .card::before{
  content:"";
  position:absolute; top:50%;
  height:2px; border-radius:2px;
  background: linear-gradient(90deg,var(--primary),var(--accent));
  box-shadow: 0 0 10px rgba(62,198,255,.25);
  transform: translateY(-50%);
}

/* rechts stehende Cards: Linie nach links bis zur Rail-Spalte */
.timeline .phase.right .card::before{
  left: calc(-1 * var(--conn));
  width: var(--conn);
}
/* links stehende Cards: Linie nach rechts bis zur Rail-Spalte */
.timeline .phase.left .card::before{
  right: calc(-1 * var(--conn));
  width: var(--conn);
}

/* Year-Pills: klar über dem Rail + besser lesbar */
.timeline .year{
  z-index: 2;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12.5px;
  color:#05212a;
  background: linear-gradient(90deg,var(--primary),var(--accent));
  border: 0;
  box-shadow:
    0 0 0 2px rgba(6,14,24,.55) inset,       /* dünner innerer Kontrast */
    0 8px 18px rgba(0,0,0,.30);               /* Schwebeschein */
  transform: translateY(0);                   /* falls ältere Styles drin sind */
}

/* Mehr Luft, damit nichts kollidiert */
.timeline .phase.right .card{ margin-left: var(--pad-outer); }
.timeline .phase.left  .card{ margin-right: var(--pad-outer); }

/* Mobile: Cards volle Breite, Connectoren ausblenden */
@media (max-width: 900px){
  .timeline{
    grid-template-columns: 1fr var(--rail-w) 1fr;  /* L | Rail | R */
    row-gap: 56px;
  }
  .timeline .rail{ grid-column:2; }
  .timeline .year{ grid-column:2; }
  .timeline .phase.p1{ grid-column:3; }
  .timeline .phase.p2{ grid-column:1; }
  .timeline .phase.p3{ grid-column:3; }
  .timeline .phase .card::before{ display:none; } /* auf kleinen Screens ohne Connector-Linie */
  .timeline .phase .card{ max-width: 100%; }
}
/* ================= Roadmap – FIX pack ================= */
.timeline{
  /* Layout-Variablen */
  --rail-w: 4px;
  --conn: clamp(44px, 6vw, 84px);   /* Abstand Rail <-> Card  */
  --row-gap: clamp(80px, 9vh, 120px);
  --pad-outer: clamp(8px, 1.2vw, 16px); /* mehr Abstand von den Year-Pills */
  position: relative;
  display: grid;
  grid-template-columns: 1fr var(--conn) var(--rail-w) var(--conn) 1fr; /* 5 Spalten: Card L | Connector | Rail | Connector | Card R */
  row-gap: var(--row-gap);
  align-items: center;
}

/* Rail steht in Spalte 3 über die gesamte Höhe */
.timeline .rail{
  grid-column: 3;
  grid-row: 1 / -1;
  justify-self: center;
  width: var(--rail-w);
  border-radius: 6px;
  background: linear-gradient(180deg,var(--primary),var(--accent));
  box-shadow: 0 0 10px rgba(62,198,255,.35), 0 0 22px rgba(110,242,180,.18);
}

/* Alles aus evtl. absolutem Layout zurückholen */
.timeline .phase,
.timeline .year{
  position: static !important;
  top:auto !important; left:auto !important; right:auto !important;
  margin: 0;
}

/* Grid-Zuordnung je Reihe (kein HTML ändern, wir nutzen deine y1/y2/y3 & p1/p2/p3) */
.timeline .year.y1{ grid-column:3; grid-row:1; justify-self:center; }
.timeline .phase.p1{ grid-column:5; grid-row:1; justify-self:start; }

.timeline .year.y2{ grid-column:3; grid-row:2; justify-self:center; }
.timeline .phase.p2{ grid-column:1; grid-row:2; justify-self:end; }

.timeline .year.y3{ grid-column:3; grid-row:3; justify-self:center; }
.timeline .phase.p3{ grid-column:5; grid-row:3; justify-self:start; }

/* Cards normal positionieren */
.timeline .phase .card{
  position: relative;
  max-width: min(520px, 42vw);
}

/* Connector-Linien: exakt bündig bis an den Rail (Spalte 2/4) */
.timeline .phase.right .card::before,
.timeline .phase.left  .card::before{
  content:"";
  position:absolute; top:50%;
  height:2px; border-radius:2px;
  background: linear-gradient(90deg,var(--primary),var(--accent));
  box-shadow: 0 0 10px rgba(62,198,255,.25);
  transform: translateY(-50%);
}

/* rechts stehende Cards: Linie nach links bis zur Rail-Spalte */
.timeline .phase.right .card::before{
  left: calc(-1 * var(--conn));
  width: var(--conn);
}
/* links stehende Cards: Linie nach rechts bis zur Rail-Spalte */
.timeline .phase.left .card::before{
  right: calc(-1 * var(--conn));
  width: var(--conn);
}

/* Year-Pills: klar über dem Rail + besser lesbar */
.timeline .year{
  z-index: 2;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12.5px;
  color:#05212a;
  background: linear-gradient(90deg,var(--primary),var(--accent));
  border: 0;
  box-shadow:
    0 0 0 2px rgba(6,14,24,.55) inset,       /* dünner innerer Kontrast */
    0 8px 18px rgba(0,0,0,.30);               /* Schwebeschein */
  transform: translateY(0);                   /* falls ältere Styles drin sind */
}

/* Mehr Luft, damit nichts kollidiert */
.timeline .phase.right .card{ margin-left: var(--pad-outer); }
.timeline .phase.left  .card{ margin-right: var(--pad-outer); }

/* Mobile: Cards volle Breite, Connectoren ausblenden */
@media (max-width: 900px){
  .timeline{
    grid-template-columns: 1fr var(--rail-w) 1fr;  /* L | Rail | R */
    row-gap: 56px;
  }
  .timeline .rail{ grid-column:2; }
  .timeline .year{ grid-column:2; }
  .timeline .phase.p1{ grid-column:3; }
  .timeline .phase.p2{ grid-column:1; }
  .timeline .phase.p3{ grid-column:3; }
  .timeline .phase .card::before{ display:none; } /* auf kleinen Screens ohne Connector-Linie */
  .timeline .phase .card{ max-width: 100%; }
}
/* ================= Roadmap – FIX pack ================= */
.timeline{
  /* Layout-Variablen */
  --rail-w: 4px;
  --conn: clamp(44px, 6vw, 84px);   /* Abstand Rail <-> Card  */
  --row-gap: clamp(80px, 9vh, 120px);
  --pad-outer: clamp(8px, 1.2vw, 16px); /* mehr Abstand von den Year-Pills */
  position: relative;
  display: grid;
  grid-template-columns: 1fr var(--conn) var(--rail-w) var(--conn) 1fr; /* 5 Spalten: Card L | Connector | Rail | Connector | Card R */
  row-gap: var(--row-gap);
  align-items: center;
}

/* Rail steht in Spalte 3 über die gesamte Höhe */
.timeline .rail{
  grid-column: 3;
  grid-row: 1 / -1;
  justify-self: center;
  width: var(--rail-w);
  border-radius: 6px;
  background: linear-gradient(180deg,var(--primary),var(--accent));
  box-shadow: 0 0 10px rgba(62,198,255,.35), 0 0 22px rgba(110,242,180,.18);
}

/* Alles aus evtl. absolutem Layout zurückholen */
.timeline .phase,
.timeline .year{
  position: static !important;
  top:auto !important; left:auto !important; right:auto !important;
  margin: 0;
}

/* Grid-Zuordnung je Reihe (kein HTML ändern, wir nutzen deine y1/y2/y3 & p1/p2/p3) */
.timeline .year.y1{ grid-column:3; grid-row:1; justify-self:center; }
.timeline .phase.p1{ grid-column:5; grid-row:1; justify-self:start; }

.timeline .year.y2{ grid-column:3; grid-row:2; justify-self:center; }
.timeline .phase.p2{ grid-column:1; grid-row:2; justify-self:end; }

.timeline .year.y3{ grid-column:3; grid-row:3; justify-self:center; }
.timeline .phase.p3{ grid-column:5; grid-row:3; justify-self:start; }

/* Cards normal positionieren */
.timeline .phase .card{
  position: relative;
  max-width: min(520px, 42vw);
}

/* Connector-Linien: exakt bündig bis an den Rail (Spalte 2/4) */
.timeline .phase.right .card::before,
.timeline .phase.left  .card::before{
  content:"";
  position:absolute; top:50%;
  height:2px; border-radius:2px;
  background: linear-gradient(90deg,var(--primary),var(--accent));
  box-shadow: 0 0 10px rgba(62,198,255,.25);
  transform: translateY(-50%);
}

/* rechts stehende Cards: Linie nach links bis zur Rail-Spalte */
.timeline .phase.right .card::before{
  left: calc(-1 * var(--conn));
  width: var(--conn);
}
/* links stehende Cards: Linie nach rechts bis zur Rail-Spalte */
.timeline .phase.left .card::before{
  right: calc(-1 * var(--conn));
  width: var(--conn);
}

/* Year-Pills: klar über dem Rail + besser lesbar */
.timeline .year{
  z-index: 2;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12.5px;
  color:#05212a;
  background: linear-gradient(90deg,var(--primary),var(--accent));
  border: 0;
  box-shadow:
    0 0 0 2px rgba(6,14,24,.55) inset,       /* dünner innerer Kontrast */
    0 8px 18px rgba(0,0,0,.30);               /* Schwebeschein */
  transform: translateY(0);                   /* falls ältere Styles drin sind */
}

/* Mehr Luft, damit nichts kollidiert */
.timeline .phase.right .card{ margin-left: var(--pad-outer); }
.timeline .phase.left  .card{ margin-right: var(--pad-outer); }

/* Mobile: Cards volle Breite, Connectoren ausblenden */
@media (max-width: 900px){
  .timeline{
    grid-template-columns: 1fr var(--rail-w) 1fr;  /* L | Rail | R */
    row-gap: 56px;
  }
  .timeline .rail{ grid-column:2; }
  .timeline .year{ grid-column:2; }
  .timeline .phase.p1{ grid-column:3; }
  .timeline .phase.p2{ grid-column:1; }
  .timeline .phase.p3{ grid-column:3; }
  .timeline .phase .card::before{ display:none; } /* auf kleinen Screens ohne Connector-Linie */
  .timeline .phase .card{ max-width: 100%; }
}
/* ===== Roadmap – Achse, Badges, Connectoren ===== */
.timeline{position:relative; max-width:980px; margin:26px auto 0;}

.timeline .rail{
  position:absolute; left:50%; top:0; bottom:0; transform:translateX(-50%);
  width:4px; border-radius:6px;
  background:linear-gradient(180deg,var(--primary,#3EC6FF),var(--accent,#6EF2B4));
  box-shadow:0 0 14px rgba(62,198,255,.28);
  z-index:0;
}

/* Year badges: immer vor der Achse, gut lesbar */
.timeline .year{
  position:absolute; left:50%; transform:translate(-50%,-50%);
  z-index:2;                             /* über der Rail */
  padding:6px 10px;
  border-radius:999px; font-weight:800; font-size:12.5px; letter-spacing:.2px;
  color:#061015;
  background:linear-gradient(90deg,var(--primary,#3EC6FF),var(--accent,#6EF2B4));
  box-shadow:0 6px 16px rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.18);
}
.timeline .y1{ top:160px; }
.timeline .y2{ top:360px; }
.timeline .y3{ top:620px; }

/* Phasen-Container links/rechts mit definiertem Offset zur Achse */
.timeline .phase{ position:absolute; width:44%; z-index:1; }
.timeline .phase.right{ right:0; }
.timeline .phase.left { left:0;  }

/* saubere vertikale Positionen (an deine Inhalte angepasst) */
.timeline .p1{ top:220px; }
.timeline .p2{ top:390px; }   /* leicht unter der y2 Marke */
.timeline .p3{ top:660px; }   /* klar innerhalb der Roadmap-Sektion */

/* Karten selbst */
.timeline .phase .card{
  position:relative;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:18px 18px 14px;
  box-shadow:0 12px 24px rgba(0,0,0,.22);
}

/* bündige Connectoren: treffen exakt mittig die Rail */
.timeline .phase.right .card::before,
.timeline .phase.left  .card::before{
  content:"";
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--primary,#3EC
/* ===== Roadmap – Achse, Badges, Connectoren ===== */
.timeline{position:relative; max-width:980px; margin:26px auto 0;}

.timeline .rail{
  position:absolute; left:50%; top:0; bottom:0; transform:translateX(-50%);
  width:4px; border-radius:6px;
  background:linear-gradient(180deg,var(--primary,#3EC6FF),var(--accent,#6EF2B4));
  box-shadow:0 0 14px rgba(62,198,255,.28);
  z-index:0;
}

/* Year badges: immer vor der Achse, gut lesbar */
.timeline .year{
  position:absolute; left:50%; transform:translate(-50%,-50%);
  z-index:2;                             /* über der Rail */
  padding:6px 10px;
  border-radius:999px; font-weight:800; font-size:12.5px; letter-spacing:.2px;
  color:#061015;
  background:linear-gradient(90deg,var(--primary,#3EC6FF),var(--accent,#6EF2B4));
  box-shadow:0 6px 16px rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.18);
}
.timeline .y1{ top:160px; }
.timeline .y2{ top:360px; }
.timeline .y3{ top:620px; }

/* Phasen-Container links/rechts mit definiertem Offset zur Achse */
.timeline .phase{ position:absolute; width:44%; z-index:1; }
.timeline .phase.right{ right:0; }
.timeline .phase.left { left:0;  }

/* saubere vertikale Positionen (an deine Inhalte angepasst) */
.timeline .p1{ top:220px; }
.timeline .p2{ top:390px; }   /* leicht unter der y2 Marke */
.timeline .p3{ top:660px; }   /* klar innerhalb der Roadmap-Sektion */

/* Karten selbst */
.timeline .phase .card{
  position:relative;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:18px 18px 14px;
  box-shadow:0 12px 24px rgba(0,0,0,.22);
}

/* bündige Connectoren: treffen exakt mittig die Rail */
.timeline .phase.right .card::before,
.timeline .phase.left  .card::before{
  content:"";
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--primary,#3EC6FF),var(--accent,#6EF2B4));
  box-shadow:0 0 10px rgba(62,198,255,.25);
}

.timeline .phase.right .card{ margin-right:6px; }  /* etwas Luft zu Badges */
.timeline .phase.left  .card{ margin-left:6px;  }

.timeline .phase.right .card::before{ left:-54px; } /* bis an die Rail */
.timeline .phase.left  .card::before{ right:-54px; }

/* Mehr Abstand damit Jahres-Badges NICHT geschnitten werden */
.timeline .phase.right{ padding-left:24px; }
.timeline .phase.left { padding-right:24px; }

/* Ressourcen-Meter kann bleiben */
.timeline .meter{height:10px;border-radius:999px;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14); overflow:hidden}
.timeline .meter::before{content:"";display:block;height:100%;
  background:linear-gradient(90deg,var(--primary,#3EC6FF),var(--accent,#6EF2B4)); width:60%}

/* Mobile: Karten stapeln, Connector ausblenden */
@media (max-width: 900px){
  .timeline .phase{ position:relative; width:auto; margin:16px 0; }
  .timeline .phase .card::before{ display:none; }
  .timeline .rail{ left:24px; transform:none; width:3px; }
  .timeline .year{ left:24px; transform:none; margin-left:12px; }
}
/* ===== Netzwerk – ruhiger, zentrierter Look ===== */
.network-stage{
  position:relative; margin:24px auto 0; max-width:980px; border-radius:18px;
  padding:28px 24px; background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 28px rgba(0,0,0,.22);
}

/* Zentrum */
.network-center{
  margin:0 auto 16px; max-width:360px; text-align:center;
  padding:14px 16px; border-radius:14px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
}
.network-center strong{ display:block; font-size:18px; }

/* Grid für 6 Kacheln */
.network-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;
}
@media (max-width: 900px){ .network-grid{ grid-template-columns:1fr; } }

.network-card{
  display:grid; place-items:center; text-align:center;
  min-height:120px; padding:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  box-shadow:0 8px 22px rgba(0,0,0,.26);
  transition:none;             /* Hover aus */
}
.network-card h3{ margin:0 0 6px; font-size:18px; }
.network-card p{ margin:0; color:var(--muted,#B4C0CC); }

/* Untere Rollen: ohne Bullet-Points, mit Chips */
.roles{ display:grid; gap:16px; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:22px; }
@media (max-width:900px){ .roles{ grid-template-columns:1fr; } }

.role-card{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10);
  border-radius:14px; padding:16px; text-align:left;
}
.role-card h3{ margin:0 0 8px; font-size:16px; text-align:center; }
.role-card ul{ display:none; } /* Bullets ausblenden */

.role-tags{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.role-tags .chip{
  padding:6px 10px; border-radius:999px; font-size:12.5px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06);
}
/* sanfter Section-Snap (rein CSS) */
html{ scroll-snap-type:y proximity; }
.section{ scroll-snap-align:start; }
/* ===== Roadmap – Fix (rail sichtbar, Jahre lesbar, Connector bündig) ===== */
#roadmap .timeline{
  position: relative;
  margin: 22px auto 0;
  padding: 10px 0 80px;
  max-width: 980px;
}

/* Mittelachse */
#roadmap .timeline .rail{
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  transform:translateX(-50%);
  width:4px;
  border-radius:6px;
  background:linear-gradient(180deg,var(--primary),var(--accent));
  box-shadow:0 0 14px rgba(62,198,255,.35), 0 0 26px rgba(110,242,180,.20);
  z-index:0;                 /* ACHSE hinten, Boxen vorne */
  pointer-events:none;
}

/* Phasen-Spalten */
#roadmap .timeline .phase{
  position: relative;
  width: 46%;
  z-index: 1;                /* vor der Rail */
}
#roadmap .timeline .phase.right{ margin-left: 54%; }  /* rechts der Mitte */
#roadmap .timeline .phase.left { margin-right: 54%; } /* links der Mitte */

/* vertikale Staffelung (Feintuning falls nötig) */
#roadmap .timeline .p1{ margin-top: 40px; }
#roadmap .timeline .p2{ margin-top: 120px; }
#roadmap .timeline .p3{ margin-top: 120px; }

/* Karten-Connector – bündig zur Rail */
#roadmap .timeline .phase .card{
  position: relative;
}
#roadmap .timeline .phase.right .card::before,
#roadmap .timeline .phase.left  .card::before{
  --gap: 8px;                 /* kleiner Sicherheitsabstand vor der Rail */
  content:"";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  height:3px;
  border-radius:3px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  box-shadow:0 0 10px rgba(62,198,255,.25);
}
#roadmap .timeline .phase.right .card::before{
  right: calc(100% + var(--gap));
  width: 56px;
}
#roadmap .timeline .phase.left .card::before{
  left: calc(100% + var(--gap));
  width: 56px;
}

/* Jahres-Badges: vor der Rail, keine Mini-Striche mehr */
#roadmap .timeline .year{
  position:absolute;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:2;                  /* vor der Rail */
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:12.5px;
  color:#0A0F1C;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  box-shadow:0 6px 14px rgba(0,0,0,.25);
  border:0;
  white-space:nowrap;
}
/* Positionen der Jahre (an Höhe der Seite anpassen wenn nötig) */
#roadmap .timeline .y1{ top: 230px; }
#roadmap .timeline .y2{ top: 460px; }
#roadmap .timeline .y3{ top: 740px; }

/* Ressourcen-Meter bleibt */
#roadmap .timeline .meter{
  position:relative; width:160px; height:10px;
  border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.25);
}
#roadmap .timeline .meter::before{
  content:""; position:absolute; left:0; top:0; bottom:0;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  width:40%; box-shadow:0 0 10px rgba(62,198,255,.25);
}
#roadmap .timeline .meter.m-40::before{ width:40%; }
#roadmap .timeline .meter.m-60::before{ width:60%; }
#roadmap .timeline .meter.m-80::before{ width:80%; }

/* Responsiv: Rail an den Rand, Connector ausblenden (mobile) */
@media (max-width: 900px){
  #roadmap .timeline{ padding-bottom:40px; }
  #roadmap .timeline .rail{ left:24px; transform:none; width:3px; }
  #roadmap .timeline .phase{ width:auto; margin:16px 0; }
  #roadmap .timeline .phase.right,
  #roadmap .timeline .phase.left{ margin:16px 0; }
  #roadmap .timeline .phase .card::before{ display:none; }
  #roadmap .timeline .year{ left:24px; transform:none; margin-left:10px; }
  #roadmap .timeline .y1{ top: 190px; }
  #roadmap .timeline .y2{ top: 420px; }
  #roadmap .timeline .y3{ top: 690px; }
}
/* ===== Roadmap – Grid-basierter Fix ===== */
#roadmap .timeline{
  display:grid;
  grid-template-columns: 1fr 40px 1fr; /* links | mittlere Spalte | rechts */
  column-gap: 46px;                   /* Abstand Boxen zur Mitte */
  grid-template-rows: auto auto auto; /* 3 Phasen-Zeilen */
  row-gap: 120px;                     /* vertikaler Abstand zwischen Phasen */
  position: relative;
  margin: 24px auto 0;
  max-width: 980px;
}

/* die mittlere Rail sitzt in der mittleren Spalte und spannt alle Zeilen */
#roadmap .timeline .rail{
  grid-column: 2;
  grid-row: 1 / -1;                   /* über alle Reihen */
  justify-self: center;
  width: 4px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--primary), var(--accent));
  box-shadow: 0 0 14px rgba(62,198,255,.35), 0 0 26px rgba(110,242,180,.20);
  z-index: 0;                         /* hinter Karten, vor Hintergrund */
  pointer-events: none;
}

/* Phasen sauber links/rechts platzieren */
#roadmap .timeline .phase{
  position: relative;
  z-index: 1;
}
#roadmap .timeline .phase.right{ grid-column: 3; }
#roadmap .timeline .phase.left { grid-column: 1;  }

/* Zeilen-Zuordnung */
#roadmap .timeline .p1{ grid-row: 1; }
#roadmap .timeline .p2{ grid-row: 2; }
#roadmap .timeline .p3{ grid-row: 3; }

/* Jahres-Badges in der Mittelspalte, pro Zeile */
#roadmap .timeline .year{
  grid-column: 2;
  justify-self: center;
  align-self: center;
  z-index: 2;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12.5px;
  color: #0A0F1C;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
  border: 0;
  white-space: nowrap;
}
#roadmap .timeline .y1{ grid-row: 1; }
#roadmap .timeline .y2{ grid-row: 2; }
#roadmap .timeline .y3{ grid-row: 3; }

/* Karten-Connectoren zur Rail, bündig mit kleinem Abstand */
#roadmap .timeline .phase .card{ position: relative; }
#roadmap .timeline .phase.right .card::before,
#roadmap .timeline .phase.left  .card::before{
  --gap: 8px;              /* Sicherheitsabstand vor der Rail */
  content:"";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  height:3px;
  width: 56px;             /* konstante, ruhige Länge */
  border-radius:3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  box-shadow: 0 0 10px rgba(62,198,255,.25);
}
#roadmap .timeline .phase.right .card::before{
  right: calc(100% + var(--gap));
}
#roadmap .timeline .phase.left .card::before{
  left: calc(100% + var(--gap));
}

/* Ressourcen-Meter (wie gehabt) */
#roadmap .timeline .meter{
  position:relative; width:160px; height:10px;
  border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.25);
}
#roadmap .timeline .meter::before{
  content:""; position:absolute; left:0; top:0; bottom:0;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  width:40%; box-shadow:0 0 10px rgba(62,198,255,.25);
}
#roadmap .timeline .meter.m-40::before{ width:40%; }
#roadmap .timeline .meter.m-60::before{ width:60%; }
#roadmap .timeline .meter.m-80::before{ width:80%; }

/* Mobile: Rail an den Rand, Connectoren aus, alles untereinander */
@media (max-width: 900px){
  #roadmap .timeline{
    grid-template-columns: 24px 12px 1fr; /* Rail + kleiner Abstand + Content */
    column-gap: 16px;
    row-gap: 28px;
  }
  #roadmap .timeline .rail{ grid-column:1; }
  #roadmap .timeline .year{ grid-column:2; justify-self:start; }
  #roadmap .timeline .phase{ grid-column:3; }
  #roadmap .timeline .phase .card::before{ display:none; }
}
/* === Roadmap: Reset alter absolute-Layouts (vor dem neuen Block einfügen) === */
#roadmap .timeline .year,
#roadmap .timeline .phase,
#roadmap .timeline .rail{
  position: static !important;    /* Grid übernimmt das Layout */
  top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
  transform:none !important;
}
#roadmap .timeline .phase.right,
#roadmap .timeline .phase.left{
  margin:0;                       /* Sicherheit gegen alte Offsets */
}
/* ===== Roadmap – Grid-basierter Fix ===== */
#roadmap .timeline{
  display:grid;
  grid-template-columns: 1fr 40px 1fr; /* links | mittlere Spalte | rechts */
  column-gap: 46px;                   /* Abstand Boxen zur Mitte */
  grid-template-rows: auto auto auto; /* 3 Phasen-Zeilen */
  row-gap: 120px;                     /* vertikaler Abstand zwischen Phasen */
  position: relative;
  margin: 24px auto 0;
  max-width: 980px;
}

/* die mittlere Rail sitzt in der mittleren Spalte und spannt alle Zeilen */
#roadmap .timeline .rail{
  grid-column: 2;
  grid-row: 1 / -1;                   /* über alle Reihen */
  justify-self: center;
  width: 4px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--primary), var(--accent));
  box-shadow: 0 0 14px rgba(62,198,255,.35), 0 0 26px rgba(110,242,180,.20);
  z-index: 0;                         /* hinter Karten, vor Hintergrund */
  pointer-events: none;
}

/* Phasen sauber links/rechts platzieren */
#roadmap .timeline .phase{
  position: relative;
  z-index: 1;
}
#roadmap .timeline .phase.right{ grid-column: 3; }
#roadmap .timeline .phase.left { grid-column: 1;  }

/* Zeilen-Zuordnung */
#roadmap .timeline .p1{ grid-row: 1; }
#roadmap .timeline .p2{ grid-row: 2; }
#roadmap .timeline .p3{ grid-row: 3; }

/* Jahres-Badges in der Mittelspalte, pro Zeile */
#roadmap .timeline .year{
  grid-column: 2;
  justify-self: center;
  align-self: center;
  z-index: 2;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12.5px;
  color: #0A0F1C;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
  border: 0;
  white-space: nowrap;
}
#roadmap .timeline .y1{ grid-row: 1; }
#roadmap .timeline .y2{ grid-row: 2; }
#roadmap .timeline .y3{ grid-row: 3; }

/* Karten-Connectoren zur Rail, bündig mit kleinem Abstand */
#roadmap .timeline .phase .card{ position: relative; }
#roadmap .timeline .phase.right .card::before,
#roadmap .timeline .phase.left  .card::before{
  --gap: 8px;              /* Sicherheitsabstand vor der Rail */
  content:"";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  height:3px;
  width: 56px;             /* konstante, ruhige Länge */
  border-radius:3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  box-shadow: 0 0 10px rgba(62,198,255,.25);
}
#roadmap .timeline .phase.right .card::before{
  right: calc(100% + var(--gap));
}
#roadmap .timeline .phase.left .card::before{
  left: calc(100% + var(--gap));
}

/* Ressourcen-Meter (wie gehabt) */
#roadmap .timeline .meter{
  position:relative; width:160px; height:10px;
  border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.25);
}
#roadmap .timeline .meter::before{
  content:""; position:absolute; left:0; top:0; bottom:0;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  width:40%; box-shadow:0 0 10px rgba(62,198,255,.25);
}
#roadmap .timeline .meter.m-40::before{ width:40%; }
#roadmap .timeline .meter.m-60::before{ width:60%; }
#roadmap .timeline .meter.m-80::before{ width:80%; }

/* Mobile: Rail an den Rand, Connectoren aus, alles untereinander */
@media (max-width: 900px){
  #roadmap .timeline{
    grid-template-columns: 24px 12px 1fr; /* Rail + kleiner Abstand + Content */
    column-gap: 16px;
    row-gap: 28px;
  }
  #roadmap .timeline .rail{ grid-column:1; }
  #roadmap .timeline .year{ grid-column:2; justify-self:start; }
  #roadmap .timeline .phase{ grid-column:3; }
  #roadmap .timeline .phase .card::before{ display:none; }
}
/* ==== ROADMAP FIX (drop-in override) ==== */

/* Bühne */
.timeline{
  position:relative;
  max-width:980px;
  margin:28px auto 0;
  /* Höhe so bemessen, dass Phase 3 sicher drin ist */
  min-height:840px;
  padding:12px 0 24px;
}

/* durchgehender Mittelstrich */
.timeline .rail{
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  transform:translateX(-50%);
  width:4px;
  border-radius:6px;
  background:linear-gradient(180deg,var(--primary),var(--accent));
  box-shadow:0 0 12px rgba(62,198,255,.28),0 0 26px rgba(110,242,180,.18);
}
/* optional: "Heute" entfernen, falls vorhanden */
.timeline .rail .now{display:none}

/* Jahr-Pills – immer VOR dem Rail sichtbar */
.timeline .year{
  position:absolute;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:3;
  font-weight:800;
  font-size:12px;
  letter-spacing:.2px;
  color:#0a1018;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  padding:6px 10px;
  border-radius:999px;
  box-shadow:0 6px 14px rgba(0,0,0,.22);
  border:0;
}
/* Positionen der Jahresmarken (nach Bedarf feinjustieren) */
.timeline .y1{ top:160px; }
.timeline .y2{ top:390px; }
.timeline .y3{ top:670px; }

/* Phasen-Karten rechts/links der Achse */
.timeline .phase{
  position:absolute;
  width:44%;
  z-index:1;
}
.timeline .phase.right{ right:0; }
.timeline .phase.left { left:0;  }

/* vertikale Platzierung der 3 Phasen */
.timeline .phase.p1{ top:210px; }
.timeline .phase.p2{ top:440px; }
.timeline .phase.p3{ top:700px; }

/* Verbindungslinien exakt bündig zur Achse */
.timeline .phase.right .card::before,
.timeline .phase.left  .card::before{
  content:"";
  position:absolute;
  top:50%;
  height:3px;
  border-radius:3px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  box-shadow:0 0 10px rgba(62,198,255,.25);
  transform:translateY(-50%);
}
.timeline .phase.right .card::before{
  /* Linie nach links bis kurz vor die Achse */
  right:calc(100% + 10px);
  width:44px; /* passt zur Rail-Bündigkeit */
}
.timeline .phase.left .card::before{
  /* Linie nach rechts bis kurz vor die Achse */
  left:calc(100% + 10px);
  width:44px;
}

/* Karte selbst – kein Offset mehr an der Rail-Seite */
.timeline .card.card--tight{
  position:relative;
  margin:0;                 /* keine ungewollten Abstände */
  padding-right:18px;
  padding-left:18px;
}

/* kleine Details */
.timeline .list > div{ margin:6px 0; color:var(--muted); }
.timeline .res{ display:flex; align-items:center; gap:10px; margin-top:10px; }

/* Responsiv: unter 900px stapeln wir, Rail nach links */
@media (max-width: 900px){
  .timeline{
    min-height:unset;
    padding-left:28px;
  }
  .timeline .rail{
    left:20px; transform:none; width:3px;
  }
  .timeline .year{
    left:20px; transform:translate(-50%,-50%);
  }
  .timeline .phase{
    position:relative; width:auto; right:auto; left:auto; margin:18px 0;
  }
  .timeline .phase .card::before{ display:none; }
}