/* ===== Leistungs-Unterseiten ===== */
:root{--radius:16px;--sec:clamp(72px,9vw,136px)}
.hl{color:var(--signal)}
.svc h1,.svc h2,.svc h3{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.02;text-wrap:balance;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.svc p{margin:0}

/* Hero */
.svc-hero{padding-top:clamp(28px,4vw,48px);padding-bottom:clamp(36px,5vw,64px)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--muted);margin-bottom:clamp(40px,7vw,96px)}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--signal)}
.crumbs [aria-current]{color:var(--fog)}
.svc-hero__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,5vw,80px);align-items:end}
.svc-h1{font-size:clamp(42px,7.4vw,112px);line-height:.96;letter-spacing:-.04em;margin-top:18px!important}
.svc-lead{font-size:clamp(17px,1.4vw,20px);color:var(--fog);line-height:1.6}
.svc-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.svc-ctas .btn{min-height:48px;padding:14px 24px}

/* Feature-Video */
.svc-feature{padding-bottom:var(--sec)}
.feature{position:relative;aspect-ratio:16/9;border-radius:clamp(14px,2vw,28px);overflow:hidden;background:var(--deep);cursor:pointer}
.feature .corner{z-index:2;width:clamp(40px,6vw,88px)}
.feature .corner--tr{top:5%;right:3.5%}
.feature .corner--bl{position:absolute;bottom:5%;left:3.5%;border-bottom-width:clamp(5px,.7vw,9px);border-left-width:clamp(5px,.7vw,9px)}
.feature .slot__ph{justify-content:flex-end;padding-bottom:7%;outline:none}
.feature__play{position:absolute;z-index:2;left:50%;top:50%;width:clamp(64px,8vw,112px);height:clamp(64px,8vw,112px);margin:calc(clamp(64px,8vw,112px) / -2) 0 0 calc(clamp(64px,8vw,112px) / -2);border-radius:50%;background:var(--signal);display:flex;align-items:center;justify-content:center;transition:transform .3s}
@media (hover:hover){.feature:hover .feature__play{transform:scale(1.08)}}
.feature .slot__img{transition:transform 1s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.feature:hover .slot__img{transform:scale(1.03)}}
.feature:focus-visible{outline:2px solid var(--signal);outline-offset:4px}

/* Section heads */
.svc-h2{font-size:clamp(32px,4.4vw,60px)}
.svc-sechead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 40px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,48px)}
.svc-sechead p{max-width:420px;color:var(--fog)}

/* Doku-Cases */
.svc-cases{padding-top:clamp(24px,4vw,56px);padding-bottom:var(--sec)}
.case{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);grid-template-areas:"film info" "stills stills";gap:clamp(16px,2vw,28px) clamp(24px,4vw,64px);align-items:center}
.case + .case{margin-top:clamp(64px,8vw,120px)}
.case--rev{grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-areas:"info film" "stills stills"}
.case__film{grid-area:film}
.case__info{grid-area:info;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.case__info h3{font-size:clamp(28px,3.2vw,48px);letter-spacing:-.03em}
.case__info p{color:var(--fog)}
.case__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px 16px;margin:6px 0 8px;width:100%;border-top:1px solid var(--line);padding-top:14px}
.case__facts dt{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.case__facts dd{margin:4px 0 0;font-size:15px;color:#fff}
.case__stills{grid-area:stills;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}
.case__stills .pf{aspect-ratio:3/2;flex:none}
@media (max-width:1100px){
  .case,.case--rev{grid-template-columns:1fr;grid-template-areas:"film" "info" "stills"}
}
@media (max-width:700px){
  .case__stills{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case__stills .pf:first-child{grid-column:span 2}
  .case__stills .pf{aspect-ratio:3/2}
}

/* Offer */
.svc-offer{padding-bottom:var(--sec)}
.offer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.4vw,32px);margin-top:clamp(28px,4vw,48px)}
.offer__item{border-top:1px solid var(--line);padding-top:22px;display:flex;flex-direction:column;gap:10px}
.offer__num{font:800 14px var(--display);color:var(--signal)}
.offer__item h3{font-size:clamp(19px,1.6vw,23px);letter-spacing:-.02em;line-height:1.2}
.offer__item p{color:var(--fog);font-size:16px}

/* Portfolio (justiertes Raster: gleiche Höhe je Reihe) */
.svc-portfolio{padding-bottom:var(--sec)}
.pf-grid{display:flex;flex-direction:column;gap:clamp(10px,1.2vw,16px)}
.pf-row{display:flex;gap:clamp(10px,1.2vw,16px)}
.pf{position:relative;flex:var(--ar) 1 0;min-width:0;aspect-ratio:var(--ar);border:0;padding:0;border-radius:12px;overflow:hidden;background:var(--deep);color:#fff;cursor:pointer;font:inherit;text-align:left;display:block}
.pf .slot__img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.pf::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,14,21,.8));opacity:.9;pointer-events:none;transition:opacity .3s}
.pf__cap{position:absolute;left:14px;right:14px;bottom:12px;z-index:1;font:600 13px/1.3 var(--text);color:#fff;pointer-events:none}
.pf__play{position:absolute;z-index:1;top:12px;right:12px;width:36px;height:36px;border-radius:50%;background:var(--signal);display:flex;align-items:center;justify-content:center;transition:transform .3s}
@media (hover:hover){.pf:hover .slot__img{transform:scale(1.05)}.pf:hover .pf__play{transform:scale(1.12)}}
.pf:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
@media (min-width:701px){.pf-row--short .pf{flex:none;height:clamp(260px,30vw,440px);width:auto}}

/* Prozess */
.svc-process{padding-bottom:var(--sec)}
.psteps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(28px,4vw,48px);counter-reset:s}
.pstep{background:var(--navy);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:8px;position:relative}
.pstep__num{font:800 32px var(--display);color:var(--signal);letter-spacing:-.03em}
.pstep b{font-family:var(--display);font-size:19px;letter-spacing:-.01em}
.pstep span:last-child{color:var(--fog);font-size:15px;line-height:1.5}

/* CTA */
.svc-cta{padding-bottom:var(--sec)}
.cta-box{position:relative;background:var(--navy);border:1px solid var(--line);border-radius:clamp(18px,2.4vw,28px);padding:clamp(32px,6vw,88px)}
.cta-box .corner--tr{top:clamp(20px,3vw,40px);right:clamp(20px,3vw,40px)}
.cta-box h2{font-size:clamp(32px,5vw,72px);margin-top:18px;max-width:900px}

/* Weitere Leistungen */
.svc-more{padding-bottom:var(--sec)}
.svc-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:clamp(24px,3vw,40px)}
.svc-card{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;text-decoration:none;display:flex;align-items:flex-end;padding:18px;isolation:isolate}
.svc-card__bg{position:absolute;inset:0;z-index:-1;background:var(--deep);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.svc-card__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,14,21,.85));z-index:1}
.svc-card__bg .slot__ph{justify-content:flex-start;padding-top:62px}
.svc-card__bg .slot__meta,.svc-card__bg .slot__hint{display:none}
.svc-card__badge{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;background:var(--signal);display:flex;align-items:center;justify-content:center;transition:transform .35s}
.svc-card__t{font:800 clamp(17px,1.4vw,20px)/1.15 var(--display);letter-spacing:-.02em}
@media (hover:hover){.svc-card:hover .svc-card__bg{transform:scale(1.06)}.svc-card:hover .svc-card__badge{transform:rotate(45deg)}}

/* Reveal */
.js [data-reveal]{opacity:0;transform:translateY(36px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js .svc-h1{opacity:0;transform:translateY(30px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.js .is-ready .svc-h1{opacity:1;transform:none}

/* Responsive */
@media (max-width:1100px){
  .svc-hero__grid{grid-template-columns:1fr}
  .offer{grid-template-columns:repeat(2,minmax(0,1fr))}
  .psteps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:700px){
  .pf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row dense;gap:10px}
  .pf-row{display:contents}
  .pf{aspect-ratio:4/5}
  .pf--wide,.pf--m2{grid-column:span 2;aspect-ratio:16/9}
  .pf__cap{font-size:12px;left:10px;right:10px;bottom:9px}
  .pf__play{width:30px;height:30px;top:8px;right:8px}
  .svc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-cards .svc-card:last-child:nth-child(odd){grid-column:span 2;aspect-ratio:16/9}
  .svc-ctas{flex-direction:column;align-items:stretch}
  .svc-ctas .btn{width:100%}
}
@media (max-width:520px){
  .offer,.psteps{grid-template-columns:1fr}
  .crumbs{margin-bottom:36px}
}
@media (prefers-reduced-motion: reduce){.js [data-reveal],.js .svc-h1{opacity:1;transform:none;transition:none}}