/* =========================================================
   Leistungen Seite Final: Hero wie Über-mich + moderne Icons
   Nur Services-Seite, keine JS-Funktionen geändert
   ========================================================= */

.services-modern-page{
  max-width:1220px!important;
  width:min(100% - 32px,1220px)!important;
  margin:0 auto!important;
  padding:0 0 58px!important;
}

.services-hero-pro{
  width:100%!important;
  max-width:980px!important;
  margin:0 auto 48px!important;
  padding:clamp(38px,6vw,74px) 0 8px!important;
  text-align:center!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
}

.services-kicker{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  width:max-content!important;
  max-width:100%!important;
  margin:0 auto 16px!important;
  color:#22e6ff!important;
  text-transform:uppercase!important;
  letter-spacing:.42em!important;
  font-weight:900!important;
  font-size:clamp(.78rem,1vw,.95rem)!important;
  text-align:center!important;
  text-shadow:0 0 18px rgba(34,230,255,.45)!important;
}

.services-kicker::after{
  content:""!important;
  display:block!important;
  width:118px!important;
  height:2px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,transparent,#22e6ff,transparent)!important;
  box-shadow:0 0 16px rgba(34,230,255,.65)!important;
}

.services-hero-pro h1{
  margin:0 0 20px!important;
  text-align:center!important;
  font-size:clamp(3.2rem,7.2vw,6.8rem)!important;
  line-height:.94!important;
  letter-spacing:-.07em!important;
  font-weight:950!important;
  color:transparent!important;
  background:linear-gradient(90deg,#ffffff 0%,#f8fbff 30%,#21d4ff 56%,#2f80ff 76%,#8b5cff 100%)!important;
  background-size:260% 100%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  text-shadow:none!important;
  animation:serviceTitleGradientMove 7s ease-in-out infinite!important;
}

.services-hero-pro h1 span{
  display:inline!important;
  color:inherit!important;
  background:inherit!important;
  background-size:inherit!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
}

@keyframes serviceTitleGradientMove{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}

.services-lead{
  max-width:820px!important;
  margin:0 auto!important;
  text-align:center!important;
  color:rgba(244,249,255,.94)!important;
  font-size:clamp(1rem,1.28vw,1.18rem)!important;
  line-height:1.65!important;
}

.services-hero-line{
  display:none!important;
}

/* moderne service Icons in allen Karten */
.service-icon{
  position:relative!important;
  width:58px!important;
  height:58px!important;
  min-width:58px!important;
  border-radius:16px!important;
  display:grid!important;
  place-items:center!important;
  background:
    radial-gradient(circle at 30% 18%,rgba(255,255,255,.16),transparent 36%),
    linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025))!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 24px color-mix(in srgb,currentColor 24%,transparent)!important;
  color:currentColor!important;
  overflow:hidden!important;
}

.service-icon::after{
  content:""!important;
  position:absolute!important;
  inset:7px!important;
  border-radius:12px!important;
  border:1px solid color-mix(in srgb,currentColor 38%,transparent)!important;
  pointer-events:none!important;
}

.service-icon svg,
.service-icon .srv-icon-svg{
  position:absolute!important;
  top:50%!important;
  left:50%!important;
  transform:translate(-50%,-50%)!important;
  width:30px!important;
  height:30px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  margin:0!important;
  animation:none!important;
  transition:none!important;
  filter:drop-shadow(0 0 8px color-mix(in srgb,currentColor 55%,transparent))!important;
}

/* Karten bleiben responsive/professionell */
.service-pro-card{
  border:1px solid rgba(255,255,255,.075)!important;
  background:linear-gradient(145deg,rgba(8,23,42,.92),rgba(4,12,24,.92))!important;
}

.service-pro-card:hover{
  transform:translateY(-3px)!important;
}

.service-cyan .service-icon{color:#25cfff!important;}
.service-blue .service-icon{color:#2f80ff!important;}
.service-green .service-icon{color:#14f0b7!important;}
.service-purple .service-icon{color:#9b7cff!important;}
.service-orange .service-icon{color:#ffb020!important;}
.service-red .service-icon{color:#ff5c7a!important;}

@media(max-width:900px){
  .services-modern-page{
    width:min(100% - 24px,760px)!important;
  }

  .services-hero-pro{
    padding:32px 0 6px!important;
    margin-bottom:36px!important;
  }

  .services-hero-pro h1{
    font-size:clamp(3rem,10vw,5.2rem)!important;
  }
}

@media(max-width:520px){
  .services-modern-page{
    width:calc(100% - 18px)!important;
  }

  .services-hero-pro{
    padding:26px 0 4px!important;
    margin-bottom:28px!important;
  }

  .services-kicker{
    font-size:.78rem!important;
    letter-spacing:.34em!important;
  }

  .services-kicker::after{
    width:92px!important;
  }

  .services-hero-pro h1{
    font-size:clamp(2.55rem,13vw,3.65rem)!important;
    letter-spacing:-.065em!important;
  }

  .services-lead{
    font-size:.94rem!important;
    line-height:1.55!important;
  }

  .service-icon{
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    border-radius:13px!important;
  }

  .service-icon::after{
    inset:6px!important;
    border-radius:10px!important;
  }

  .service-icon svg,
  .service-icon .srv-icon-svg{
    width:24px!important;
    height:24px!important;
  }
}


/* Header brand color like footer */
.brand{
 color:#ffffff !important;
}
.brand .accent,
.brand-highlight,
.brand span:last-child{
 background:linear-gradient(135deg,#00e5ff,#2dd4ff) !important;
 -webkit-background-clip:text !important;
 -webkit-text-fill-color:transparent !important;
 color:transparent !important;
 font-weight:800 !important;
}