/* Leistungen-Seite v13 (Runde 7): eine Leistung nach der anderen, Vorher/Nachher am Scroll. Erzeugt von tools/leist13.py */
.leist13 main,.leist13{--lgold:#FFC56B;--lline:rgba(238,242,246,.14)}
.lr{opacity:0;filter:blur(6px);transition:opacity .9s var(--ease),filter .9s var(--ease)}
.lr.in{opacity:1;filter:none}
@media (max-width:700px){.lr{filter:none}}
@media (prefers-reduced-motion:reduce){.lr{opacity:1;filter:none;transition:none}}

.lhero{padding:150px 0 40px}
.lh{font:200 clamp(40px,6.4vw,96px)/1.02 var(--sans);letter-spacing:-.045em;margin:16px 0 18px;max-width:14ch}
.lh span{display:block}
.lh em{font-family:var(--serif3,var(--serif));font-style:italic;font-weight:400;color:var(--lgold);letter-spacing:-.01em}
.lhero .lead{max-width:640px}
.ljump{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.ljump a{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:99px;border:1px solid var(--lline);background:rgba(238,242,246,.05);color:var(--text);text-decoration:none;font:400 14px/1 var(--sans);transition:background .25s,border-color .25s}
.ljump a:hover{background:rgba(238,242,246,.1);border-color:rgba(255,197,107,.45)}
.ljump b{font:400 11px/1 var(--mono);color:var(--lgold);letter-spacing:.08em}

.lsec{padding:90px 0;scroll-margin-top:70px}
.lsec h2{font:200 clamp(34px,4.4vw,64px)/1.04 var(--sans);letter-spacing:-.04em;margin:12px 0 16px}
.lsec h2 em{font-family:var(--serif3,var(--serif));font-style:italic;font-weight:400;color:var(--lgold);letter-spacing:-.01em}
.ltxt p{font-size:17px;line-height:1.6;color:var(--text2);max-width:520px}
.ltxt--w{max-width:760px;margin-bottom:34px}
.ltxt--w p{max-width:640px}
.lgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(30px,5vw,80px);align-items:center}
.lgrid--v{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr)}
.lgrid--s{grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr)}
.lpts{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.lpts li{display:flex;gap:12px;align-items:baseline;font-size:15.5px;color:var(--text)}
.lpts li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--glut);box-shadow:0 0 10px var(--glut);translate:0 -2px}
.lsub{font:300 clamp(22px,2.2vw,30px)/1.2 var(--sans);letter-spacing:-.02em;margin:54px 0 20px}

/* Vorher/Nachher: Nachher liegt unten, Vorher darüber und wird beim Scrollen nach links weggewischt. Ziehen geht auch. */
.ba{position:relative;margin:0;aspect-ratio:4/3;border-radius:22px;overflow:hidden;background:#111a2e;box-shadow:0 30px 70px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);touch-action:pan-y;cursor:ew-resize;user-select:none;--x:50%}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.ba__b{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x)) 0 0);will-change:clip-path}
.ba__h{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:rgba(255,255,255,.9);box-shadow:0 0 18px rgba(255,197,107,.7)}
.ba__h i{position:absolute;top:50%;left:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;display:grid;place-items:center;background:rgba(11,18,32,.75);border:1px solid rgba(255,255,255,.5);color:#fff;font-style:normal;font-size:16px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ba__t{position:absolute;top:14px;padding:6px 10px;border-radius:99px;background:rgba(11,18,32,.66);color:#fff;font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;transition:opacity .3s}
.ba__t.l{left:14px}.ba__t.r{right:14px;background:rgba(255,138,61,.92);color:#1b0d03}
.ba figcaption{position:absolute;left:14px;bottom:14px;padding:7px 12px;border-radius:99px;background:rgba(11,18,32,.66);color:#fff;font:400 13px/1 var(--sans)}
.ba--menu{aspect-ratio:3/4;max-width:560px;justify-self:center;width:100%;background:#F3ECE1}
.ba--menu img{object-fit:contain}
.lba3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}

/* Videos: Standbild + Play. Desktop spielt im Bild automatisch (stumm), Handy erst nach Tippen */
.lv{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:16/9;background:#0b1220;box-shadow:0 30px 70px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
.lv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.lv--tall{aspect-ratio:9/16;border-radius:26px}
.lv__play{position:absolute;left:50%;top:50%;width:66px;height:66px;margin:-33px 0 0 -33px;border:0;border-radius:50%;background:rgba(255,255,255,.9);cursor:pointer;display:grid;place-items:center;transition:opacity .35s,scale .35s var(--ease)}
.lv__play i{width:0;height:0;border-left:18px solid #0B1220;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.lv.on .lv__play{opacity:0;scale:.7;pointer-events:none}
.l3{display:flex;align-items:center;gap:10px;margin-top:26px;flex-wrap:wrap}
.l3 img{width:74px;height:56px;border-radius:10px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.l3__k{font:400 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text2)}
.l3__arr{color:var(--lgold);font-size:20px;margin:0 4px}
.lphones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:560px;justify-self:center;width:100%}
.lph{position:relative;padding:8px;border-radius:34px;background:#0d1424;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 40px 80px -30px rgba(0,0,0,.7)}
.lph__tag{position:absolute;z-index:3;top:20px;left:20px;padding:6px 10px;border-radius:99px;background:rgba(11,18,32,.7);color:#fff;font:400 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.lph__cap{position:absolute;z-index:3;left:20px;right:20px;top:54px;color:#fff;font:600 17px/1.25 var(--sans);text-shadow:0 2px 12px rgba(0,0,0,.6)}
.lend{text-align:center;padding:100px 0 120px}
.lend h2{margin-left:auto;margin-right:auto}
.lend .lead{margin:0 auto}
.lacts{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:28px}
.lend .note{margin-top:30px;opacity:.7}

@media (max-width:900px){
  .lgrid,.lgrid--v,.lgrid--s{grid-template-columns:1fr;gap:26px}
  .lba3{grid-template-columns:1fr;gap:14px}
}
@media (max-width:700px){
  .lhero{padding:118px 0 18px}
  .lh{font-size:clamp(38px,11vw,52px)}
  .ljump{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:22px -16px 0;padding:2px 16px}
  .ljump::-webkit-scrollbar{display:none}
  .ljump a{flex:none}
  .lsec{padding:56px 0}
  .lsec h2{font-size:clamp(32px,9.4vw,44px)}
  .ltxt p{font-size:15.5px}
  .ba{border-radius:18px}
  .ba__h i{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(11,18,32,.85)}
  .ba--menu{max-width:none}
  .lphones{gap:12px}
  .lph{padding:5px;border-radius:24px}
  .lv--tall{border-radius:20px}
  .lph__cap{font-size:14px;top:46px;left:14px;right:14px}
  .lph__tag{top:14px;left:14px}
}

/* Runde 8: Videos „In Arbeit“ */
.lsoon{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.lsoon__c{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/3;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:18px;color:#fff;scroll-margin-top:90px;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.lsoon__c img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:saturate(.75) brightness(.7)}
.lsoon__c::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,11,20,.1),rgba(7,11,20,.8))}
.lsoon__c b{font:300 24px/1.15 var(--sans);letter-spacing:-.02em}
.lsoon__c>span:last-child{font-size:14px;opacity:.85}
.lsoon__t{position:absolute;top:14px;left:14px;padding:6px 10px;border-radius:99px;background:rgba(255,197,107,.92);color:#1b0d03;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
@media (max-width:900px){.lsoon{grid-template-columns:1fr;gap:12px}.lsoon__c{aspect-ratio:16/9}}
/* Runde 8: Schieber – Griff deutlicher, beim Ziehen größer */
.ba__h i{transition:scale .25s var(--ease),background .25s}
.ba:hover .ba__h i,.ba.drag .ba__h i{scale:1.12;background:rgba(255,138,61,.95);color:#1b0d03}
.ba:focus-visible{outline:2px solid #FFC56B;outline-offset:3px}