.works{background:var(--ink,#16171A);color:#fff;padding:clamp(56px,10vh,132px) var(--sprint-pad,clamp(24px,4vw,88px)) clamp(48px,8vh,104px)}
.works>*{max-width:1520px;margin-left:auto;margin-right:auto}
.works .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)}
.works h2{margin-left:0;margin-right:auto;font-size:clamp(30px,3.6vw,60px);line-height:1.02;letter-spacing:-.045em;font-weight:700;max-width:14ch;text-wrap:balance}
.works h2 span{display:block;color:rgba(255,255,255,.56)}
.works .sub{margin-left:0;margin-right:auto;margin-top:clamp(14px,2.2vh,22px);font-size:clamp(14px,1.05vw,18px);line-height:1.6;color:rgba(255,255,255,.66);max-width:56ch;text-wrap:pretty}
.cases{margin-top:clamp(40px,7vh,96px);display:flex;flex-direction:column;gap:clamp(48px,9vh,124px)}
.case-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:center;gap:clamp(24px,3.4vw,72px)}
.case-row.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
.case-row.flip .shots{order:2}
@media(max-width:920px){.case-row,.case-row.flip{grid-template-columns:minmax(0,1fr);gap:clamp(20px,4vh,32px)}.case-row.flip .shots{order:0}}
/* Geraete-Rahmen: nur Bezel, der Inhalt kommt als Screenshot hinein. */
.shots{position:relative;padding-bottom:clamp(40px,8vw,120px);padding-right:clamp(16px,3vw,40px)}
.desktop{background:#0F1012;border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:clamp(7px,.7vw,11px);box-shadow:0 30px 70px rgba(0,0,0,.45)}
.desktop .screen{aspect-ratio:16/10;overflow:hidden;border-radius:5px;background:#17181B}
.desktop img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .7s cubic-bezier(.22,.61,.36,1),filter .7s ease}
/* Rahmen: gemeinsam.css (6. Handy-Rahmen). Hier nur Groesse und Lage. */
.mob{position:absolute;right:0;bottom:0;width:clamp(120px,21%,220px)}
@media(max-width:620px){.shots{padding-bottom:30%}.mob{width:34%}}
.mob img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .7s cubic-bezier(.22,.61,.36,1),filter .7s ease}
.case-row:hover .desktop img,.case-row:hover .mob img{transform:scale(1.015);filter:brightness(1.08)}
.info{display:flex;flex-direction:column;gap:clamp(9px,1.4vh,14px)}
.idx{display:flex;align-items:center;gap:14px;font-size:clamp(11px,.76vw,12.5px);letter-spacing:.14em;font-weight:700;color:rgba(255,255,255,.56)}
.idx::after{content:"";height:1px;width:clamp(28px,4vw,64px);background:rgba(255,255,255,.24)}
.caseWho{text-align:left;display:flex;flex-direction:column;gap:5px;font-size:clamp(11px,.76vw,12.5px);letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.caseWho b{color:#fff}
.caseWho i{font-style:normal;color:var(--accent);white-space:normal}
.info h3{margin-top:4px;font-size:clamp(22px,2.1vw,38px);line-height:1.08;letter-spacing:-.04em;font-weight:700;text-wrap:balance}
.info p{font-size:clamp(13.5px,.98vw,16.5px);line-height:1.6;color:rgba(255,255,255,.68);max-width:42ch;text-wrap:pretty}
.info .svc{font-size:clamp(12.5px,.9vw,15px);color:rgba(255,255,255,.6)}
.go{margin-top:clamp(8px,1.6vh,16px);display:inline-flex;align-items:center;gap:14px;font-size:clamp(13px,.92vw,15px);font-weight:700;color:#fff;text-decoration:none;width:max-content}
.go em{font-style:normal;width:clamp(38px,3vw,48px);height:clamp(38px,3vw,48px);border:1px solid var(--accent);border-radius:50%;display:grid;place-items:center;color:var(--accent);font-size:15px;transition:background .35s ease,color .35s ease,transform .35s ease}
.go:hover{color:var(--accent)}
.go:hover em{background:var(--accent);color:#fff;transform:translateX(4px)}
.works.anim .case-row{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.works.anim .case-row.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.works.anim .case-row{opacity:1;transform:none}.desktop img,.mob img{transition:none}}