/* Leistungs-Detailseiten */
/* Leistungs-Detailseiten — Impressum / Detail */
/* line-art icon primitives (journey.css isn't loaded here) */
.illu{width:100%;height:100%;overflow:visible}
.illu .ln{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.illu .ln.thin{stroke-width:1.6;opacity:.55}
.illu .acc{stroke:var(--blue-bright)}
.illu .fillacc{fill:var(--blue);stroke:none}
.illu .fillw{fill:#fff;stroke:none}

.ld-nav{
  position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;padding-right:70px;background:rgba(7,10,16,.86);border-bottom:1px solid var(--line-soft);backdrop-filter:blur(8px);
}
.ld-nav img{height:28px}
.ld-nav .back{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--fog);display:inline-flex;gap:8px;align-items:center}
.ld-nav .back:hover{color:var(--white)}

.ld-hero{max-width:var(--maxw);margin:0 auto;padding:150px 28px 50px}
.ld-hero .no{font-family:var(--mono);font-size:13px;letter-spacing:.2em;color:var(--blue);display:inline-block}
.ld-hero .no,.ld-hero h1,.ld-hero p{opacity:0;transform:translateY(18px);animation:ldUp .75s var(--ease) forwards}
.ld-hero h1{animation-delay:.08s}
.ld-hero p{animation-delay:.16s}
@keyframes ldUp{to{opacity:1;transform:none}}
.ld-hero h1{font-size:clamp(36px,6vw,68px);margin:14px 0 22px;letter-spacing:-.03em;text-wrap:balance}
.ld-hero p{color:var(--fog);font-size:clamp(17px,1.7vw,20px);max-width:680px;line-height:1.6}
/* animated underline accent under the hero */
.ld-accent{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.ld-accent span{display:block;height:2px;width:0;background:linear-gradient(90deg,var(--blue),transparent);animation:ldLine 1s var(--ease) .3s forwards}
@keyframes ldLine{to{width:160px}}

.ld-grid{max-width:var(--maxw);margin:0 auto;padding:30px 28px 90px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.ld-item{
  border:1px solid var(--line);border-radius:16px;padding:30px;background:var(--panel);position:relative;overflow:hidden;
  opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),border-color .4s,box-shadow .4s var(--ease);
}
.ld-item.in{opacity:1;transform:none}
.ld-item::before{content:"";position:absolute;inset:0;background:radial-gradient(360px 220px at 30% -10%,rgba(46,134,189,.16),transparent 70%);opacity:0;transition:opacity .4s ease}
.ld-item:hover{border-color:rgba(74,166,224,.45);box-shadow:0 16px 44px -26px rgba(46,134,189,.6)}
.ld-item.in:hover{transform:translateY(-4px)}
.ld-item:hover::before{opacity:1}
.ld-item .ic{width:36px;height:36px;margin-bottom:16px;position:relative;transition:transform .4s var(--ease)}
.ld-item.in:hover .ic{transform:translateY(-3px) scale(1.08)}
.ld-item h3{font-size:19px;margin-bottom:10px;position:relative}
.ld-item p{color:var(--muted);font-size:14.5px;line-height:1.6;position:relative}

.ld-cta{max-width:var(--maxw);margin:0 auto 100px;padding:0 28px}
.ld-cta-inner{
  border:1px solid var(--line);border-radius:20px;padding:48px;text-align:center;
  background:linear-gradient(155deg,var(--panel-2),var(--ink));position:relative;overflow:hidden;
}
.ld-cta-inner .glow{position:absolute;left:50%;top:-80px;width:300px;height:300px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(46,134,189,.25),transparent 65%);animation:ctaGlow 4s ease-in-out infinite}
@keyframes ctaGlow{0%,100%{opacity:.7;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.12)}}
.ld-cta h2{font-size:clamp(24px,3vw,36px);margin-bottom:16px;position:relative}
.ld-cta p{color:var(--fog);margin-bottom:28px;position:relative}
.ld-cta .btn{display:inline-flex;width:auto;padding:15px 30px;position:relative}

@media(max-width:760px){.ld-grid{grid-template-columns:1fr}}

/* ============================================================
   Per-item themed icon animations (on hover)
   ============================================================ */
@keyframes ldSpin{to{transform:rotate(360deg)}}
@keyframes ldDraw{to{stroke-dashoffset:0}}
@keyframes ldPulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes ldFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes ldBlink{0%,100%{opacity:1}50%{opacity:.2}}
.ld-item .ic-cloud,.ld-item .ic-cap{transform-box:fill-box;transform-origin:center}
.ld-item .ic-backup .ring,.ld-item .ic-gear .gear,.ld-item .ic-sync .spin2,.ld-item .ic-phone .phone,.ld-item .ic-wrench .wrench{transform-box:fill-box;transform-origin:center}
.ld-item .ic-chat circle,.ld-item .ic-grid rect,.ld-item .ic-download .arr,.ld-item .ic-levels .la{transform-box:fill-box}
/* wifi */
.ld-item:hover .ic-wifi .w1{animation:ldPulse 1.3s ease-in-out infinite}
.ld-item:hover .ic-wifi .w2{animation:ldPulse 1.3s ease-in-out infinite .2s}
/* server */
.ld-item:hover .ic-server .l1{animation:ldBlink .7s steps(1,end) infinite}
.ld-item:hover .ic-server .l2{animation:ldBlink .7s steps(1,end) infinite .35s}
/* cloud */
.ld-item:hover .ic-cloud{animation:ldFloat 2s ease-in-out infinite}
/* backup */
.ld-item:hover .ic-backup .ring{animation:ldSpin 1.6s linear infinite}
/* gear */
.ld-item:hover .ic-gear .gear{animation:ldSpin 3s linear infinite}
/* phone */
.ld-item:hover .ic-phone .phone{animation:ldRing .5s ease-in-out infinite}
@keyframes ldRing{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
/* chat dots */
.ld-item:hover .ic-chat .d1{animation:ldFloat .8s ease-in-out infinite}
.ld-item:hover .ic-chat .d2{animation:ldFloat .8s ease-in-out infinite .15s}
.ld-item:hover .ic-chat .d3{animation:ldFloat .8s ease-in-out infinite .3s}
/* video / play */
.ld-item:hover .ic-video .play{animation:ldPulse 1s ease-in-out infinite}
/* bulb */
.ld-item:hover .ic-bulb{filter:drop-shadow(0 0 6px rgba(255,214,140,.6))}
.ld-item:hover .ic-bulb .glow{animation:ldPulse 1s ease-in-out infinite}
/* app draw */
.ic-app .up{stroke-dasharray:26;stroke-dashoffset:26}
.ld-item:hover .ic-app .up{animation:ldDraw .8s ease forwards}
/* license / shield draw */
.ic-license .chk,.ic-shield .chk{stroke-dasharray:18;stroke-dashoffset:18}
.ld-item:hover .ic-license .chk,.ld-item:hover .ic-shield .chk{animation:ldDraw .6s ease forwards}
/* database */
.ld-item:hover .ic-db .acc{animation:ldPulse 1.2s ease-in-out infinite}
/* levels */
.ld-item:hover .ic-levels .l3{animation:ldFloat 1.4s ease-in-out infinite}
/* monitor ecg */
.ic-monitor .ecg{stroke-dasharray:46;stroke-dashoffset:46}
.ld-item:hover .ic-monitor .ecg{animation:ldDraw 1.3s linear infinite}
/* wrench */
.ld-item:hover .ic-wrench .wrench{animation:ldWig .5s ease-in-out infinite}
@keyframes ldWig{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
/* mobile / desktop / headset / help / vdi */
.ld-item:hover .ic-mobile .acc,.ld-item:hover .ic-desktop .dot,.ld-item:hover .ic-headset .acc,.ld-item:hover .ic-help .acc,.ld-item:hover .ic-vdi .acc{animation:ldPulse 1s ease-in-out infinite}
/* download */
.ld-item:hover .ic-download .arr{animation:ldDl 1.1s ease-in-out infinite}
@keyframes ldDl{0%{transform:translateY(-3px);opacity:.4}50%{opacity:1}100%{transform:translateY(3px);opacity:.4}}
/* grid */
.ld-item:hover .ic-grid .g1,.ld-item:hover .ic-grid .g4{animation:ldPulse .9s ease-in-out infinite}
.ld-item:hover .ic-grid .g2,.ld-item:hover .ic-grid .g3{animation:ldPulse .9s ease-in-out infinite .45s}
/* sync / cap */
.ld-item:hover .ic-sync .spin2{animation:ldSpin 2s linear infinite}
.ld-item:hover .ic-cap{animation:ldFloat 1.8s ease-in-out infinite}