:root{--ink:#16171A;--accent:#F26522;--paper:#F4F1EC;--pad:clamp(20px,4vw,64px)}
*{box-sizing:border-box;margin:0}
@font-face{font-family:"Instrument Sans";font-weight:400 700;font-display:block;src:url("instrument-sans-latin.woff2?v=2ee17598a9") format("woff2")}
body{font-family:"Instrument Sans",system-ui,sans-serif;background:var(--ink);color:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent,#F26522)}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3{margin:0;letter-spacing:-.04em;font-weight:700;text-wrap:balance}
/* Kopfzeile: gemeinsam.css */
.sec{padding:clamp(54px,9vh,124px) var(--pad)}
.sec>*{max-width:1520px;margin-left:auto;margin-right:auto}
.sec>.secH,.sec>.lead,.sec>.baCap{margin-left:0;margin-right:auto}
.cta-end>.secH,.cta-end>.lead{margin-left:auto}
.light{background:var(--paper);color:var(--ink)}
.eyebrow{display:inline-block;font-size:clamp(10.5px,.72vw,12px);letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--accent);margin-bottom:clamp(14px,2.2vh,24px)}
.secH{font-size:clamp(28px,3.4vw,58px);line-height:1.03;max-width:17ch}
.secH span{display:block}
.secH .dim{color:rgba(255,255,255,.56)}
.light .secH .dim{color:rgba(22,23,26,.54)}
.lead{font-size:clamp(14px,1.05vw,18px);line-height:1.6;color:rgba(255,255,255,.72);max-width:58ch;text-wrap:pretty}
.light .lead{color:rgba(22,23,26,.72)}
/* 01 Hero */
.cHero{position:relative;overflow:hidden;padding:clamp(44px,8vh,104px) var(--pad) clamp(44px,8vh,104px)}
.cHero::before{content:"";position:absolute;inset:0;background:radial-gradient(64vw 60vh at 88% 8%,rgba(242,101,34,.15),transparent 68%);pointer-events:none}
.cHero>*{position:relative;z-index:1;max-width:1520px;margin:0 auto}
.heroGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,3.6vw,72px);align-items:center}
@media(max-width:960px){.heroGrid{grid-template-columns:minmax(0,1fr);gap:clamp(26px,4vh,40px)}}
.cHero h1{font-size:clamp(32px,4.2vw,68px);line-height:1.01}
.cHero h1 span{display:block}
.cHero h1 .accent{color:var(--accent)}
.cHero .lead{margin-top:clamp(16px,2.4vh,24px);max-width:48ch}
.metaList{margin-top:clamp(24px,3.6vh,40px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr));gap:clamp(16px,2vw,32px);border-top:1px solid rgba(255,255,255,.18);padding-top:clamp(18px,2.6vh,26px)}
.metaList dt{font-size:clamp(10px,.7vw,11.5px);letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.58);margin-bottom:8px}
.metaList dd{margin:0;font-size:clamp(13.5px,.95vw,16px);font-weight:600;line-height:1.45}
.liveLink{margin-top:clamp(22px,3.2vh,32px);display:inline-flex;align-items:center;gap:10px;font-size:clamp(13.5px,.95vw,16px);font-weight:700;color:#fff;border-bottom:1px solid var(--accent);padding-bottom:5px}
.liveLink:hover{color:var(--accent)}
.heroShot{position:relative}
.frame{position:relative;background:#0F1012;border:1px solid rgba(255,255,255,.14);overflow:hidden;aspect-ratio:16/10}
.light .frame{background:#E7E2DA;border-color:rgba(22,23,26,.14)}
.frame img{width:100%;height:100%;object-fit:cover;object-position:top}
/* Rahmen: gemeinsam.css (6. Handy-Rahmen). Hier nur Groesse und Lage. */
.heroPhone{position:absolute;right:clamp(-8px,1vw,18px);bottom:-14%;width:clamp(116px,22%,220px)}
.heroShot{margin-bottom:clamp(40px,6vw,90px)}
@media(max-width:620px){.heroPhone{width:32%;bottom:-20%}.heroShot{margin-bottom:22%}}
/* 02 Ausgangslage */
.splitH{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,3.4vw,72px);align-items:start}
@media(max-width:900px){.splitH{grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vh,30px)}}
.probs{margin-top:clamp(36px,6vh,80px)}
.prob{display:grid;grid-template-columns:clamp(56px,6vw,120px) minmax(0,1fr) minmax(0,26ch);gap:clamp(14px,2.2vw,44px);align-items:start;border-top:1px solid rgba(22,23,26,.16);padding:clamp(22px,3.8vh,48px) 0}
.prob:last-child{border-bottom:1px solid rgba(22,23,26,.16)}
@media(max-width:900px){.prob{grid-template-columns:clamp(48px,11vw,90px) minmax(0,1fr)}.prob p{grid-column:2}}
.prob .n{font-size:clamp(28px,4vw,72px);line-height:.86;font-weight:700;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.4px var(--accent)}
.prob h3{font-size:clamp(21px,2.9vw,46px);line-height:1.02;letter-spacing:-.04em}
.prob p{font-size:clamp(13.5px,.95vw,16px);line-height:1.6;color:rgba(22,23,26,.7);text-wrap:pretty;padding-top:.45em}
/* 03 Vorher/Nachher */
.ba{position:relative;margin-top:clamp(30px,5vh,64px);width:100%;aspect-ratio:16/9;background:#0F1012;border:1px solid rgba(255,255,255,.14);overflow:hidden;touch-action:pan-y;user-select:none}
.ba .layer{position:absolute;inset:0}
.ba .after{clip-path:inset(0 0 0 var(--x,55%))}
.ba.demo .after{transition:clip-path .9s cubic-bezier(.4,0,.2,1)}
.ba.demo .handle{transition:left .9s cubic-bezier(.4,0,.2,1)}
.ba img{width:100%;height:100%;object-fit:cover;object-position:top}
.ba .tag{position:absolute;top:0;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:8px 12px;z-index:3;pointer-events:none}
.ba .tagB{left:0;background:rgba(255,255,255,.9);color:var(--ink)}
.ba .tagA{right:0;background:var(--accent);color:#fff}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--x,55%);width:2px;background:#fff;z-index:4;cursor:ew-resize}
.ba .handle::after{content:"\2194";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;font-size:17px;box-shadow:0 6px 24px rgba(0,0,0,.4)}
.baCap{margin-top:clamp(16px,2.4vh,24px);font-size:clamp(13.5px,.98vw,16.5px);line-height:1.6;color:rgba(255,255,255,.7);max-width:64ch;text-wrap:pretty}
/* 04 Strategie */
.strat{margin-top:clamp(30px,5vh,64px)}
.sec>.strat{margin-left:0}
.stepRow{display:grid;grid-template-columns:minmax(0,22ch) minmax(0,1fr);gap:clamp(14px,2.4vw,52px);border-top:1px solid rgba(255,255,255,.18);padding:clamp(20px,3.4vh,42px) 0}
.stepRow:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
@media(max-width:760px){.stepRow{grid-template-columns:minmax(0,1fr);gap:12px}}
.stepRow .lbl{font-size:clamp(10.5px,.74vw,12px);letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--accent);padding-top:.5em}
.stepRow h3{font-size:clamp(20px,2vw,33px);line-height:1.1}
.stepRow p{margin-top:11px;font-size:clamp(13.5px,.98vw,16.5px);line-height:1.6;color:rgba(255,255,255,.7);max-width:56ch;text-wrap:pretty}
/* 05 Showcase */
.shots{margin-top:clamp(34px,5.5vh,72px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,36px)}
.shot{grid-column:span 12}
.shot.desktop{grid-column:span 8}
.shot.mobile{grid-column:span 4}
.shot.half{grid-column:span 6}
.shot.wide{grid-column:span 10}
.shot.wide .frame{aspect-ratio:16/8}
@media(max-width:900px){.shot,.shot.desktop,.shot.mobile,.shot.half,.shot.wide{grid-column:span 12}}
.shot .frame{aspect-ratio:16/9}
/* „Mobil“ steht im Handy-Rahmen (gemeinsam.css 6.), so hoch wie der Desktop-Rahmen daneben. */
.shot.mobile .shotHandy{width:min(100%,220px);margin:0 auto}
.shot.mobile .cap{text-align:center}
.shot .cap{margin-top:12px;font-size:clamp(11px,.76vw,12.5px);letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:rgba(22,23,26,.62)}
.shot .frame img{transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.shot:hover .frame img{transform:scale(1.015)}
/* 06 Ergebnis */
.results{margin-top:clamp(34px,5.5vh,72px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:clamp(20px,2.4vw,48px)}
.res{border-top:1px solid rgba(255,255,255,.2);padding-top:clamp(14px,2vh,20px)}
.res b{display:block;font-size:clamp(10.5px,.74vw,12px);letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.res h3{font-size:clamp(18px,1.6vw,27px);line-height:1.12}
.res p{margin-top:9px;font-size:clamp(13.5px,.95vw,16px);line-height:1.6;color:rgba(255,255,255,.72);text-wrap:pretty}
.kpis{margin-top:clamp(28px,4.4vh,52px);display:flex;flex-wrap:wrap;gap:clamp(24px,3.4vw,64px);border-top:1px solid rgba(255,255,255,.2);padding-top:clamp(20px,3vh,32px)}
.kpi strong{display:block;font-size:clamp(30px,3.4vw,56px);line-height:1;letter-spacing:-.045em}
.kpi span{display:block;margin-top:9px;font-size:clamp(11px,.78vw,13px);letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.62)}
/* 07 Stimme – leicht abgesetzte Flaeche, damit sie sich vom dunklen Ergebnis-Block loest */
.quote{background:#1B1C20;border-top:1px solid rgba(255,255,255,.1)}
/* Layout richtet sich nach den vorhandenen Assets */
.qGrid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3.4vw,64px);align-items:center}
.q-portrait .qGrid,.q-vid .qGrid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
@media(max-width:860px){.q-portrait .qGrid,.q-vid .qGrid{grid-template-columns:minmax(0,1fr)}}
.quote blockquote{margin:0;font-size:clamp(23px,3vw,50px);line-height:1.12;letter-spacing:-.04em;font-weight:700;max-width:22ch;text-wrap:balance}
.quote .by{margin-top:clamp(20px,3vh,30px);font-size:clamp(13px,.92vw,15.5px);line-height:1.5;color:rgba(255,255,255,.7)}
.quote .by b{display:block;color:#fff;font-size:clamp(14px,1vw,17px)}
/* Kundenlogo: nie verzerren, nur in der Hoehe begrenzen. */
.cLogo{margin-top:clamp(18px,2.6vh,26px);max-height:clamp(28px,3vw,44px);width:auto;max-width:200px;object-fit:contain;opacity:.9}
.tPortrait{aspect-ratio:4/5;overflow:hidden;background:#0F1012;border:1px solid rgba(255,255,255,.14)}
.tPortrait img{width:100%;height:100%;object-fit:cover}
.tVideo{position:relative;display:block}
.tVideo .frame{aspect-ratio:16/10}
.tVideo img{width:100%;height:100%;object-fit:cover}
.tVideo .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:19px;padding-left:4px;transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.tVideo:hover .play{transform:translate(-50%,-50%) scale(1.06)}
/* Leistungsumfang, im Ergebnis-Block */
.scope{margin-top:clamp(30px,5vh,60px);border-top:1px solid rgba(255,255,255,.2);padding-top:clamp(20px,3vh,32px)}
.scope h3{font-size:clamp(10.5px,.74vw,12px);letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.58);margin-bottom:clamp(12px,1.8vh,18px)}
.scope .liveLink{margin-top:clamp(20px,3vh,28px)}
.sumList{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:0 clamp(20px,2.4vw,48px)}
.sumList li{border-top:1px solid rgba(255,255,255,.16);padding:13px 0;font-size:clamp(13.5px,.95vw,16px);font-weight:600;display:flex;align-items:center;gap:12px}
.sumList li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}
/* 09 Nächster Case */
.nextCase{display:block;color:inherit}
.nextCase:hover{color:inherit}
.nextGrid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,3vw,56px);align-items:center}
@media(max-width:820px){.nextGrid{grid-template-columns:minmax(0,1fr)}}
.nextGrid .frame{aspect-ratio:16/9}
.nextCase .frame img{transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.nextCase:hover .frame img{transform:scale(1.015)}
.nextMeta .who{font-size:clamp(11px,.76vw,12.5px);letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--accent);margin-bottom:12px;display:block}
.nextMeta h3{font-size:clamp(22px,2.4vw,40px);line-height:1.06}
.nextMeta .go{margin-top:18px;display:inline-flex;align-items:center;gap:10px;font-size:clamp(13.5px,.95vw,16px);font-weight:700;color:var(--ink);transition:gap .35s ease,color .3s ease}
.nextCase:hover .go{gap:16px;color:var(--accent)}
/* 10 CTA */
.cta-end{text-align:center;position:relative;overflow:hidden}
.cta-end::before{content:"";position:absolute;inset:0;background:radial-gradient(60vw 60vh at 50% 112%,rgba(242,101,34,.22),transparent 70%);pointer-events:none}
.cta-end>*{position:relative;z-index:1;max-width:1000px;margin-left:auto;margin-right:auto}
.cta-end h2{font-size:clamp(30px,4vw,64px);line-height:1.03}
.cta-end h2 span{display:block;color:rgba(255,255,255,.56)}
.cta-end .lead{margin:clamp(16px,2.4vh,24px) auto 0;max-width:52ch}
.ctaRow{margin-top:clamp(24px,4vh,40px);display:flex;flex-wrap:wrap;gap:14px 20px;justify-content:center}
.btn{background:var(--accent);color:#fff;font-size:clamp(13.5px,1vw,16px);font-weight:700;padding:clamp(14px,1.9vh,18px) clamp(20px,1.9vw,30px);display:inline-flex;align-items:center;gap:12px}
.btn:hover{background:var(--accent,#F26522);color:#fff}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.28);color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.5);color:#fff}
.cta-end .note{margin-top:16px;font-size:clamp(11.5px,.8vw,13px);letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.62)}
/* Motion */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.shot .frame img,.nextCase .frame img{transition:none}}