/* Styles for the service pages (leistung-*.html) */
.hero{position:relative;overflow:hidden;padding:clamp(3.5rem,7vw,6.5rem) 0}
.hero::before{content:"";position:absolute;inset:-25% -15% auto auto;width:70%;aspect-ratio:1;background:radial-gradient(closest-side,rgba(59,91,255,.2),transparent);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,6vw,5.5rem);align-items:start}
.back-link{display:flex;width:fit-content;align-items:center;gap:.5rem;margin-bottom:1.8rem;color:var(--muted);text-decoration:none;font-size:.95rem;line-height:1.5rem}
.back-link:hover{color:var(--cyan)}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;margin-bottom:1.15rem;color:var(--cyan);font-size:.88rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.eyebrow::before{content:"";width:1.35rem;height:2px;background:var(--grad)}
h1{max-width:15ch;font-size:clamp(2.4rem,5vw,4.2rem);margin-bottom:1.25rem;hyphens:auto}
.lead{max-width:58ch;color:var(--muted);font-size:clamp(1.08rem,1.5vw,1.22rem)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
/* Starts level with the eyebrow text (below the back link) */
.hero-visual{position:relative;margin-top:4.05rem}
.hero-photo{display:block;width:100%;height:auto;aspect-ratio:21 / 20;object-fit:cover;border:1px solid var(--line);border-radius:28px;box-shadow:0 36px 80px -38px rgba(0,0,0,.8)}
.diagram-section{padding:clamp(3.5rem,7vw,6rem) 0;background:linear-gradient(180deg,var(--surface),var(--bg))}
.section-heading{max-width:720px;margin:0 auto 2.5rem;text-align:center}
.section-heading .eyebrow{justify-content:center}
h2{font-size:clamp(1.8rem,3.8vw,2.7rem)}
.section-heading h2{margin-bottom:.8rem}
.section-heading p{color:var(--muted)}
.diagram-card{padding:clamp(1.2rem,4vw,2.5rem);border:1px solid var(--line);border-radius:26px;background:linear-gradient(145deg,var(--surface-2),var(--surface));box-shadow:0 24px 70px -50px rgba(0,0,0,.9)}
.diagram-card figcaption{margin-top:1.4rem;color:var(--muted);font-size:.88rem;text-align:center}
.process-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:clamp(.5rem,2vw,1.2rem)}
.step{min-height:150px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(1rem,2.6vw,1.7rem);border:1px solid var(--line);border-radius:19px;background:rgba(4,10,22,.42)}
.step-num{display:grid;place-items:center;width:34px;height:34px;margin-bottom:1rem;border-radius:50%;background:var(--grad);color:#03102a;font-weight:700;font-size:.88rem}
.step strong{font:700 clamp(1rem,1.7vw,1.2rem)/1.2 var(--head)}
.step small{margin-top:.45rem;color:var(--muted);font-size:.88rem;line-height:1.4}
.arrow{color:var(--cyan);font-size:1.7rem}
.content-section{padding:clamp(4rem,8vw,7rem) 0}
.content-intro{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:2rem}
.content-intro h2{max-width:16ch}
.content-intro p{max-width:45ch;color:var(--muted)}
.content-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.content-card{position:relative;overflow:hidden;padding:clamp(1.3rem,2.5vw,2rem);border:1px solid var(--line);border-radius:20px;background:var(--surface)}
.content-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--grad)}
.content-card span{display:block;margin-bottom:1rem;color:var(--cyan);font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.content-card h3{margin-bottom:.8rem;font-size:1.32rem}
.content-card p{color:var(--muted);font-size:.98rem}
.cta{padding:0 0 clamp(4rem,8vw,7rem)}
.cta-card{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:clamp(1.8rem,5vw,3.5rem);border-radius:28px;background:linear-gradient(115deg,#0d6671,#0c9796 58%,#2c67b4);color:#fff}
.cta-card::after{content:"";position:absolute;width:20rem;aspect-ratio:1;right:10%;top:-90%;border:1px solid rgba(255,255,255,.22);border-radius:50%;box-shadow:0 0 0 35px rgba(255,255,255,.04),0 0 0 70px rgba(255,255,255,.03)}
.cta-copy,.cta-card .btn{position:relative;z-index:1}
.cta-copy h2{max-width:20ch;margin-bottom:.6rem}
.cta-copy p{color:rgba(255,255,255,.84)}
.cta-card .btn{flex:none}
@media (max-width:850px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{max-width:700px;margin-top:0}
  .content-intro{display:block}
  .content-intro h2{margin-bottom:.8rem}
}
@media (max-width:640px){
  .process-flow{grid-template-columns:1fr}
  .step{min-height:auto}
  .arrow{justify-self:center;transform:rotate(90deg)}
  .content-grid{grid-template-columns:1fr}
  .cta-card{align-items:flex-start;flex-direction:column}
}