/* Roadmap / Transform Campus Nordhessen (Subpage) */

.roadmap-page .hero {
  padding-top: clamp(4.5rem, 11vh, 6.5rem);
}

.roadmap-page .roadmap-campus-logo-wrap {
  text-align: center;
  margin-bottom: 1.2rem;
}

.roadmap-page .roadmap-campus-logo {
  width: 88px;
  height: auto;
  max-width: none;
  margin: 0 auto;
  display: block;
  object-fit: contain;
  aspect-ratio: 1;
  opacity: 0.88;
}

/* ================================================================
   HERO – Dark, centered, roadmap feel
   ================================================================ */
.hero{min-height:100vh;background:var(--nx);position:relative;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;opacity:.03;background-image:
  linear-gradient(rgba(255,255,255,.3) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.3) 1px,transparent 1px);
  background-size:60px 60px}
.hero-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:800px;height:800px;background:radial-gradient(circle,rgba(226,138,47,.08) 0%,transparent 55%);pointer-events:none}
.hero .wrap{position:relative;z-index:2;max-width:780px}
.hero-badge{display:inline-flex;align-items:center;gap:.4rem;background:rgba(226,138,47,.1);border:1px solid rgba(226,138,47,.2);padding:.3rem .75rem;border-radius:100px;font-size:.64rem;font-weight:600;color:var(--og);letter-spacing:.04em;text-transform:uppercase;margin-bottom:1.2rem}
.hero-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--or)}
.hero h1{font-size:clamp(2.2rem,5vw,3.2rem);font-weight:800;color:#fff;line-height:1.08;letter-spacing:-.03em;margin-bottom:1rem}
.hero h1 span{color:var(--or);font-style:italic}
.hero-sub{font-size:.98rem;color:rgba(255,255,255,.48);line-height:1.85;margin-bottom:2rem;max-width:580px;margin-left:auto;margin-right:auto}
.hero-btns{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-bottom:3rem}
/* Hero stats row */
.hero-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem;border-top:1px solid rgba(255,255,255,.06);padding-top:1.8rem}
.hs{text-align:center}.hs-n{font-size:1.5rem;font-weight:800;color:var(--or);line-height:1}.hs-l{font-size:.62rem;color:rgba(255,255,255,.3);margin-top:.15rem;text-transform:uppercase;letter-spacing:.04em}
.scroll-hint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:3;color:rgba(255,255,255,.2);font-size:.62rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:.3rem;animation:pulse 2.5s ease infinite}
.scroll-hint::after{content:'';width:1px;height:24px;background:linear-gradient(180deg,rgba(226,138,47,.4),transparent)}
@keyframes pulse{0%,100%{opacity:.3;transform:translateX(-50%) translateY(0)}50%{opacity:.6;transform:translateX(-50%) translateY(5px)}}

/* ================================================================
   BEDARFSANALYSE – Why this matters
   ================================================================ */
.bedarf{background:var(--sp)}
.bedarf-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.bedarf-challenges{display:flex;flex-direction:column;gap:.8rem;margin-top:1.2rem}
.bc{display:flex;gap:.7rem;align-items:flex-start;padding:1rem;background:var(--w);border-radius:10px;border-left:3px solid var(--or);transition:all .25s var(--e)}
.bc:hover{box-shadow:0 4px 16px rgba(0,0,0,.04);transform:translateX(4px)}
.bc-icon{font-size:1.2rem;flex-shrink:0;margin-top:.1rem}
.bc h4{font-size:.84rem;font-weight:700;color:var(--nd);margin-bottom:.12rem}
.bc p{font-size:.78rem;color:var(--tl);line-height:1.6}
.bedarf-quote{background:var(--nd);border-radius:14px;padding:2rem;position:relative;margin-top:1rem}
.bedarf-quote::before{content:'„';font-size:3rem;color:var(--or);line-height:.5;display:block;margin-bottom:.5rem}
.bedarf-quote p{color:rgba(255,255,255,.6);font-size:.9rem;line-height:1.75;font-style:italic}
.bedarf-quote cite{display:block;margin-top:.8rem;font-style:normal;font-size:.72rem;color:var(--or);font-weight:600}
.bedarf-img{border-radius:14px;overflow:hidden;box-shadow:0 12px 36px rgba(0,0,0,.08);margin-bottom:1.5rem}
.bedarf-img img{display:block;width:100%}

/* ================================================================
   VERTICAL ROADMAP TIMELINE
   ================================================================ */
.roadmap{background:var(--w);position:relative}
.rm-header{text-align:center;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.rm-header .sd{margin:0 auto}

/* Central line */
.rm-line{position:relative;max-width:900px;margin:0 auto}
.rm-line::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--or),var(--sky),var(--or));transform:translateX(-50%);opacity:.3}

.rm-item{display:grid;grid-template-columns:1fr 60px 1fr;gap:0;align-items:start;margin-bottom:2.5rem;position:relative}
.rm-item:last-child{margin-bottom:0}

/* Dot on timeline */
.rm-dot{display:flex;justify-content:center;padding-top:.3rem;position:relative;z-index:2}
.rm-dot-inner{width:18px;height:18px;border-radius:50%;background:var(--or);border:3px solid var(--w);box-shadow:0 0 0 3px rgba(226,138,47,.2)}
.rm-dot-inner.big{width:24px;height:24px;box-shadow:0 0 0 4px rgba(226,138,47,.3),0 0 20px rgba(226,138,47,.15)}
.rm-dot-inner.future{background:var(--sky);border-color:var(--w);box-shadow:0 0 0 3px rgba(200,216,232,.3)}

/* Content cards */
.rm-card{background:var(--sp);border-radius:12px;padding:1.5rem;transition:all .3s var(--e);border:1px solid transparent}
.rm-card:hover{box-shadow:0 8px 28px rgba(0,0,0,.06);border-color:rgba(226,138,47,.15);transform:translateY(-2px)}
.rm-card.dark{background:var(--nd);color:#fff}
.rm-card.dark h3{color:var(--og)}.rm-card.dark p{color:rgba(255,255,255,.5)}
.rm-card.dark .rm-tag{background:rgba(226,138,47,.15);color:var(--og)}
.rm-card.highlight{background:var(--or);color:#fff;border:none}
.rm-card.highlight h3{color:#fff}.rm-card.highlight p{color:rgba(255,255,255,.75)}
.rm-card.highlight .rm-tag{background:rgba(255,255,255,.2);color:#fff}
.rm-year{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--or);text-align:center;margin-bottom:.2rem}
.rm-tag{display:inline-flex;padding:.18rem .5rem;border-radius:100px;background:rgba(226,138,47,.1);color:var(--or);font-size:.58rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.6rem}
.rm-card h3{font-size:.95rem;font-weight:700;color:var(--nd);margin-bottom:.3rem}
.rm-card p{font-size:.78rem;color:var(--tm);line-height:1.65}
.rm-card ul{margin-top:.5rem;display:flex;flex-direction:column;gap:.25rem}
.rm-card li{font-size:.74rem;color:var(--tl);padding-left:.8rem;position:relative}
.rm-card li::before{content:'';position:absolute;left:0;top:.48em;width:4px;height:4px;border-radius:50%;background:var(--or)}
.rm-card.dark li{color:rgba(255,255,255,.4)}.rm-card.highlight li{color:rgba(255,255,255,.6)}
.rm-card.highlight li::before{background:#fff}

/* Left/right placement */
.rm-left{text-align:right;padding-right:0}
.rm-right{text-align:left;padding-left:0}
.rm-left .rm-tag{float:right}.rm-left ul{align-items:flex-end}
.rm-empty{/* spacer */}

/* ================================================================
   PROJEKTE – Hexagonal grid of all project areas
   ================================================================ */
.projekte{background:var(--nd);color:#fff;overflow:hidden}
.projekte .st{color:#fff}
.projekte .sd{color:rgba(255,255,255,.45);margin:0 auto}
.pj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.5rem}
.pj{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:1.5rem;transition:all .35s var(--e);position:relative;overflow:hidden}
.pj::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--e)}
.pj:hover{background:rgba(255,255,255,.06);transform:translateY(-4px);border-color:rgba(226,138,47,.2)}.pj:hover::before{transform:scaleX(1)}
.pj-num{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--or);opacity:.5;margin-bottom:.5rem}
.pj-icon{font-size:1.6rem;margin-bottom:.6rem}
.pj h3{font-size:.92rem;font-weight:700;color:var(--og);margin-bottom:.3rem}
.pj p{font-size:.76rem;color:rgba(255,255,255,.4);line-height:1.65}
.pj-target{margin-top:.7rem;padding-top:.6rem;border-top:1px solid rgba(255,255,255,.06);font-size:.68rem;color:rgba(255,255,255,.25)}
.pj-target strong{color:var(--or);font-weight:600}

/* ================================================================
   CAMPUS – Lighthouse project
   ================================================================ */
.campus{background:var(--sp);position:relative;overflow:hidden}
.campus-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.campus-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin-top:1.5rem}
.cs{background:var(--w);border-radius:10px;padding:1rem;text-align:center;transition:all .25s var(--e)}
.cs:hover{box-shadow:0 4px 14px rgba(0,0,0,.04)}
.cs-n{font-size:1.4rem;font-weight:800;color:var(--or);line-height:1}
.cs-l{font-size:.65rem;color:var(--tl);margin-top:.15rem}
.campus-visual{position:relative}
.campus-visual-inner{background:var(--nd);border-radius:16px;padding:clamp(2rem,4vw,3rem);position:relative;overflow:hidden}
.campus-visual-inner::before{content:'';position:absolute;inset:0;opacity:.04;background-image:linear-gradient(rgba(255,255,255,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.4) 1px,transparent 1px);background-size:40px 40px}
.campus-areas{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;position:relative;z-index:2}
.ca{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:.8rem;text-align:center;transition:all .25s var(--e)}
.ca:hover{background:rgba(226,138,47,.1);border-color:rgba(226,138,47,.25)}
.ca-icon{font-size:1.2rem;margin-bottom:.3rem}
.ca-label{font-size:.72rem;font-weight:600;color:rgba(255,255,255,.65)}

/* ================================================================
   ZERTIFIZIERUNG – Steps
   ================================================================ */
.zert{background:var(--w)}
.zert-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2rem}
.zs{background:var(--sp);border-radius:14px;padding:1.8rem;text-align:center;transition:all .3s var(--e);position:relative}
.zs:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,0,0,.06)}
.zs-step{position:absolute;top:-.7rem;left:50%;transform:translateX(-50%);background:var(--or);color:#fff;font-size:.6rem;font-weight:700;padding:.2rem .6rem;border-radius:100px;letter-spacing:.06em}
.zs-step.future{background:var(--sky);color:var(--nd)}
.zs-name{font-size:1.3rem;font-weight:800;color:var(--nd);margin:1rem 0 .2rem}
.zs-full{font-size:.68rem;color:var(--tl);margin-bottom:.6rem}
.zs p{font-size:.8rem;color:var(--tm);line-height:1.65}
.zs-arrow{position:absolute;right:-1.2rem;top:50%;transform:translateY(-50%);font-size:1.2rem;color:var(--or);opacity:.4;z-index:2}

/* ================================================================
   NETZWERK – Partner overview
   ================================================================ */
.netzwerk{background:var(--nd);color:#fff}
.netzwerk .st{color:#fff}
.nw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.nw{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:1.3rem;transition:all .3s var(--e)}
.nw:hover{background:rgba(255,255,255,.06);border-color:rgba(226,138,47,.15)}
.nw-label{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--or);margin-bottom:.5rem}
.nw-items{display:flex;flex-direction:column;gap:.3rem}
.nw-item{font-size:.76rem;color:rgba(255,255,255,.4);padding-left:.7rem;position:relative}
.nw-item::before{content:'';position:absolute;left:0;top:.5em;width:4px;height:4px;border-radius:50%;background:rgba(226,138,47,.4)}

/* ================================================================
   ZIELGRUPPEN – Target numbers
   ================================================================ */
.ziel{background:var(--sp)}
.ziel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2rem}
.zg{background:var(--w);border-radius:14px;padding:1.6rem;border:1px solid transparent;transition:all .3s var(--e)}
.zg:hover{border-color:var(--or);box-shadow:0 8px 24px rgba(0,0,0,.05);transform:translateY(-3px)}
.zg-icon{font-size:1.6rem;margin-bottom:.6rem}
.zg h3{font-size:1rem;font-weight:700;color:var(--nd);margin-bottom:.2rem}
.zg-num{font-size:1.8rem;font-weight:800;color:var(--or);margin-bottom:.15rem;line-height:1}
.zg-sub{font-size:.68rem;color:var(--tl);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.6rem}

@media (max-width: 900px) {
  .hero-stats { grid-template-columns: repeat(3, 1fr); }
  .bedarf-grid, .campus-grid { grid-template-columns: 1fr; }
  .pj-grid, .nw-grid, .ziel-grid, .zert-steps {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }
  .rm-line::before { left: 24px; }
  .rm-item { grid-template-columns: 48px 1fr; gap: 0; }
  .rm-dot { justify-content: flex-start; padding-left: 15px; }
  .rm-left { display: none; }
  .rm-empty { display: none; }
  .rm-right { text-align: left; }
  .campus-areas { grid-template-columns: repeat(3, 1fr); }
  .zs-arrow { display: none; }
}

@media (max-width: 600px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .campus-areas { grid-template-columns: 1fr 1fr; }
  .campus-stats { grid-template-columns: 1fr 1fr; }
}