.case{background:var(--paper,#F4F1EC);color:var(--ink,#16171A);padding:clamp(56px,10vh,132px) var(--sec-pad,clamp(24px,4vw,88px)) clamp(52px,9vh,120px)}
.case>*{max-width:1520px;margin-left:auto;margin-right:auto}
.case .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)}
.case h2{margin-left:0;margin-right:auto;font-size:clamp(28px,3.4vw,58px);line-height:1.03;letter-spacing:-.045em;font-weight:700;max-width:18ch;text-wrap:balance}
.case h2 em{font-style:normal;color:var(--accent)}
.case .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(22,23,26,.7);max-width:62ch;text-wrap:pretty}
/* Vorher/Nachher: zwei Ebenen, die obere wird per Regler beschnitten. */
.ba{position:relative;margin-top:clamp(32px,5.5vh,72px);width:100%;aspect-ratio:16/10;background:#E7E2DA;border:1px solid rgba(22,23,26,.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 img{width:100%;height:100%;object-fit:cover;object-position:top}
/* Ohne Vorher-Aufnahme kein Regler: nur die neue Seite, ohne Beschnitt. */
.ba.einzel{cursor:default;touch-action:auto}
.ba.einzel .after{clip-path:none}
.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(22,23,26,.82);color:#fff}
.ba .tagA{right:0;background:var(--accent);color:#fff}
.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 .handle{position:absolute;top:0;bottom:0;left:var(--x,55%);width:2px;background:#fff;box-shadow:0 0 0 1px rgba(22,23,26,.2);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(22,23,26,.28)}
.ba .hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:#fff;background:rgba(22,23,26,.7);padding:7px 13px;pointer-events:none;transition:opacity .4s ease}
.ba.touched .hint{opacity:0}
/* Rahmen: gemeinsam.css (6. Handy-Rahmen). Hier nur Groesse und Lage. */
.phone{position:absolute;right:5%;bottom:-12%;width:clamp(120px,20%,250px);z-index:5}
.ba.einzel{overflow:visible;margin-bottom:clamp(48px,7vw,110px)}
@media(max-width:620px){.phone{width:34%;right:4%;bottom:-22%}.ba.einzel{margin-bottom:26%}}
.points{margin-top:clamp(36px,6vh,72px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(20px,2.4vw,48px)}
.point{border-top:1px solid rgba(22,23,26,.16);padding-top:clamp(14px,2vh,20px);display:flex;flex-direction:column;gap:9px}
.point .n{font-size:clamp(10.5px,.74vw,12px);letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.point h3{font-size:clamp(17px,1.4vw,24px);line-height:1.14;letter-spacing:-.03em;font-weight:700;text-wrap:balance}
.point p{font-size:clamp(13.5px,.95vw,16px);line-height:1.6;color:rgba(22,23,26,.7);text-wrap:pretty}
.caseFoot{margin-top:clamp(34px,5.5vh,66px);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:20px clamp(20px,2.4vw,40px);border-top:1px solid rgba(22,23,26,.16);padding-top:clamp(20px,3vh,32px)}
.caseFoot strong{display:block;font-size:clamp(16px,1.3vw,22px);letter-spacing:-.03em;font-weight:700}
.caseFoot span{display:block;margin-top:7px;font-size:clamp(11.5px,.8vw,13px);letter-spacing:.1em;text-transform:uppercase;color:rgba(22,23,26,.7)}
.caseFoot .btn{background:var(--accent);color:#fff;font-size:clamp(13px,.95vw,15.5px);font-weight:700;padding:clamp(13px,1.6vh,17px) clamp(20px,1.7vw,28px);display:inline-flex;align-items:center;gap:12px;white-space:nowrap;text-decoration:none}

@media(max-width:560px){.caseFoot{grid-template-columns:minmax(0,1fr)}}