/* Parallax, Scroll-Reveal, moderne Effekte */
.hero--parallax{position:relative;overflow:hidden;color:#fff}
.hero-bg{
  position:absolute;inset:-15% 0;height:130%;
  background-image:var(--hero-bg-image, url(hero-schwebebahn.webp));
  background-position:var(--hero-bg-position, center);
  background-size:cover;
  background-repeat:no-repeat;
  will-change:transform;z-index:0
}
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg,rgba(11,31,21,.62) 0%,rgba(16,42,29,.52) 45%,rgba(16,42,29,.38) 100%);
  pointer-events:none
}
.hero-overlay::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(255,255,255,0) 38%,rgba(34,98,68,.12) 50%,rgba(255,255,255,.06) 56%,rgba(255,255,255,0) 68%);
  pointer-events:none
}
.hero-sparkles{
  position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden
}
.hero-sparkles .sparkle{
  position:absolute;will-change:transform,opacity;
  animation:sparkle-drift var(--dur,6s) var(--delay,0s) infinite ease-in-out
}
.hero-sparkles .sparkle--dot{
  width:var(--size,4px);height:var(--size,4px);border-radius:50%;
  background:radial-gradient(circle,#fff 0%,rgba(255,255,255,.4) 45%,transparent 70%);
  box-shadow:0 0 6px rgba(255,255,255,.55)
}
.hero-sparkles .sparkle--star{
  font-size:var(--size,10px);line-height:1;color:rgba(255,236,179,.95);
  text-shadow:0 0 8px rgba(255,176,58,.7),0 0 14px rgba(255,255,255,.45);
  font-family:serif
}
@keyframes sparkle-drift{
  0%{transform:translate3d(0,110%,0) scale(.2) rotate(0deg);opacity:0}
  8%{opacity:var(--op,.85)}
  55%{opacity:var(--op,.85)}
  100%{transform:translate3d(var(--drift,0),-15%,0) scale(1) rotate(var(--rot,180deg));opacity:0}
}
.hero--parallax .hero-grid,.hero--parallax .wrap,.hero--parallax .svc-hero-split{position:relative;z-index:3}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.is-visible{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.08s}
.reveal-delay-2{transition-delay:.16s}
.reveal-delay-3{transition-delay:.24s}

.parallax-band{
  position:relative;overflow:hidden;background-attachment:fixed;
  background-size:cover;background-position:center
}
.parallax-band::before{
  content:"";position:absolute;inset:0;background:rgba(16,42,29,.88)
}
.parallax-band .wrap{position:relative;z-index:1}

/* Moderne Leistungs-Karten (Startseite) */
.services-modern{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px
}
.svc-card{
  position:relative;display:flex;flex-direction:column;gap:12px;
  background:rgba(255,255,255,.88);border-radius:18px;padding:26px 24px 22px;
  text-decoration:none;color:inherit;overflow:hidden;
  border:1px solid rgba(34,98,68,.12);
  box-shadow:0 4px 20px rgba(16,42,29,.05);
  transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s, border-color .25s
}
.svc-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--aqua,#226244),#9FD1B4);
  opacity:0;transition:opacity .25s
}
.svc-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(16,42,29,.12);border-color:rgba(34,98,68,.28)}
.svc-card:hover::before{opacity:1}
.svc-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.svc-num{font-family:'Archivo',sans-serif;font-size:.72rem;font-weight:800;color:var(--aqua,#226244);opacity:.45;letter-spacing:.06em}
.svc-icon{
  width:48px;height:48px;border-radius:14px;
  background:linear-gradient(135deg,#EAF7EF,#D3E4DA);
  color:var(--aqua,#226244);display:flex;align-items:center;justify-content:center;flex-shrink:0
}
.svc-icon svg{width:24px;height:24px}
.svc-card h3{font-family:'Archivo',sans-serif;font-size:1.08rem;font-weight:700;color:var(--ink);line-height:1.25;margin:0}
.svc-card p{font-size:.88rem;color:var(--ink-soft);line-height:1.55;margin:0;flex:1}
.svc-arrow{
  display:inline-flex;align-items:center;gap:6px;font-family:'Archivo',sans-serif;
  font-weight:700;font-size:.85rem;color:var(--aqua-deep,#17472F);margin-top:4px
}
.svc-arrow span{transition:transform .2s}
.svc-card:hover .svc-arrow span{transform:translateX(4px)}

.leistungen-section{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#E6F0EA 0%,#EDF5F0 40%,#E6F0EA 100%)
}
.leistungen-section::before{
  content:"";position:absolute;width:480px;height:480px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,98,68,.07) 0%,transparent 70%);
  top:-120px;right:-80px;pointer-events:none
}
.leistungen-section .sec-head{margin-bottom:32px}
.leistungen-section.leistungen-first .sec-head h2{font-size:clamp(1.45rem,2.8vw,2rem)}

.section-soft{
  background:linear-gradient(180deg,#E3EDE7 0%,#EDF4F0 50%,#E3EDE7 100%)
}
.section-warm{
  background:linear-gradient(180deg,var(--base,#EEF5F1) 0%,#E6F0EA 100%)
}

.about-section{
  background:linear-gradient(125deg,#143D2A 0%,#1E5638 55%,#226244 100%);
  color:#fff
}
.about-section .eyebrow{color:#A9CDB8!important}
.about-section .eyebrow::before{background:#9FD1B4!important}
.about-section h2{
  font-family:'Archivo',sans-serif;font-size:clamp(1.5rem,3vw,2.1rem);
  font-weight:800;margin:12px 0 16px
}
.about-section p{margin-bottom:14px;color:#D3E4DA}
.about-section h2{color:#fff}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.about-stat{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:20px;text-align:center}
.about-stat strong{display:block;font-family:'Archivo',sans-serif;font-size:1.6rem;font-weight:800;color:#9FD1B4}
.about-stat span{font-size:.82rem;color:rgba(255,255,255,.75)}

@media (max-width:900px){
  .services-modern{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .about-stats{grid-template-columns:1fr 1fr}
  .parallax-band{background-attachment:scroll}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-bg{transform:none!important}
  .hero-sparkles{display:none}
}