/* THAL-636 · v56 — Werbe-Reels: drei iPhones im Karussell (nach 21st.dev „Phone Mockups“)
   plus nummerierte Liste mit Fortschritt (nach „Features With Panel“). Bühne Navy.
   Ohne JS: Liste + mittleres Handy mit Poster und nativer Wiedergabe. */
.reels{overflow:hidden}
.reels .sec-head .lead{max-width:36ch}
.reel-show{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,96px);align-items:center;max-width:1160px;margin:0 auto}

/* Liste */
.reel-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.reel-item{position:relative;display:grid;grid-template-columns:2.6em 1fr;align-items:start;gap:4px 10px;width:100%;padding:16px 20px 18px;border:0;border-radius:20px;background:transparent;color:inherit;text-align:left;cursor:pointer;overflow:hidden;transition:background-color .35s var(--ease),box-shadow .35s var(--ease)}
.reel-item:hover{background:rgba(255,255,255,.05)}
.reel-item[aria-selected=true]{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.ri-n{font-size:14px;font-weight:500;line-height:1.75;color:var(--steel-2);font-variant-numeric:tabular-nums;transition:color .3s var(--ease)}
.reel-item[aria-selected=true] .ri-n{color:var(--sky)}
.ri-t{display:grid;gap:3px}
.ri-t b{font-size:clamp(19px,1.7vw,23px);font-weight:600;letter-spacing:-.018em;color:#fff;opacity:.62;transition:opacity .3s var(--ease)}
.reel-item[aria-selected=true] .ri-t b,.reel-item:hover .ri-t b{opacity:1}
.ri-t small{font-size:15px;line-height:1.4;color:var(--steel-2);transition:color .3s var(--ease)}
.reel-item[aria-selected=true] .ri-t small{color:var(--ice)}
.ri-tag{justify-self:start;margin-top:6px;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--sky);box-shadow:inset 0 0 0 1px #60a5fa66;display:none}
.reel-item[aria-selected=true] .ri-tag{display:inline-block}
.ri-bar{position:absolute;left:20px;right:20px;bottom:8px;height:2px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden;opacity:0;transition:opacity .3s}
.ri-bar::after{content:"";position:absolute;inset:0;background:var(--sky);transform-origin:left;transform:scaleX(var(--p,0))}
.reel-item[aria-selected=true] .ri-bar{opacity:1}

/* Bühne mit drei Handys */
.reel-stage{position:relative;display:grid;justify-items:center;gap:26px}
.reel-phones{position:relative;width:100%;height:calc(var(--rw) * 1.813);--rw:clamp(230px,21vw,292px);perspective:1400px}
.reel-ph{position:absolute;left:calc(50% - var(--rw) / 2);top:0;margin:0;width:var(--rw);cursor:pointer;transform-origin:50% 60%;transition:transform .85s var(--ease),opacity .7s var(--ease),filter .7s var(--ease);will-change:transform}
.reel-ph .phone.rp{--pw:var(--rw)}
.phone.rp{aspect-ratio:1/1.813;box-shadow:0 0 0 calc(var(--pw)*.008) #3a4a6e inset,0 50px 90px -30px rgba(0,0,0,.65),0 18px 40px -20px rgba(0,0,0,.5)}
.phone.rp::before{top:calc(var(--pw)*.047);height:calc(var(--pw)*.062);width:28%}
.rp .ph-screen{padding-top:calc(var(--pw)*.09);background:#000;isolation:isolate;-webkit-clip-path:inset(0 round calc(var(--pw)*.135));clip-path:inset(0 round calc(var(--pw)*.135));transform:translateZ(0)}
.rp .ph-screen img,.rp .ph-screen video{position:absolute;left:0;right:0;bottom:0;top:calc(var(--pw)*.09);width:100%;height:calc(100% - var(--pw)*.09);object-fit:cover;border-radius:0 0 calc(var(--pw)*.135) calc(var(--pw)*.135)}
.reel-ph video{opacity:0;transition:opacity .45s var(--ease);background:#000}
.reel-ph.playing video{opacity:1}
/* Rollen: Mitte, links, rechts, verborgen */
.reel-ph{transform:translateX(0) scale(.6);opacity:0;pointer-events:none;z-index:0}
.reel-ph.is-cur{transform:none;opacity:1;z-index:3;pointer-events:auto;cursor:default}
.reel-ph.is-prev{transform:translateX(-64%) scale(.8) rotateY(16deg);opacity:.5;z-index:2;pointer-events:auto;filter:saturate(.55) brightness(.8)}
.reel-ph.is-next{transform:translateX(64%) scale(.8) rotateY(-16deg);opacity:.5;z-index:2;pointer-events:auto;filter:saturate(.55) brightness(.8)}
.reel-ph.is-prev:hover,.reel-ph.is-next:hover{opacity:.75;filter:none}
.reel-ph.is-off-l{transform:translateX(-110%) scale(.6) rotateY(24deg)}
.reel-ph.is-off-r{transform:translateX(110%) scale(.6) rotateY(-24deg)}
.reel-ph .tap{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:none;border:0;cursor:pointer}
.reel-ph .tap span{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);opacity:0;transform:scale(.9);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.reel-ph .tap span::before{content:"";margin-left:5px;border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent}
.reel-ph.is-cur:not(.playing) .tap span{opacity:1;transform:none}

/* Steuerung: schwebende Pille wie im Vorbild */
.reel-ctrl{display:flex;align-items:center;gap:4px;padding:5px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.reel-ctrl button{display:grid;place-items:center;min-width:44px;height:44px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:#fff;font:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .25s var(--ease)}
.reel-ctrl button:hover{background:rgba(255,255,255,.12)}
.reel-ctrl .rc-prev::before,.reel-ctrl .rc-next::before{content:"";width:7px;height:12px;background:currentColor;-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat}
.reel-ctrl .rc-prev::before{transform:rotate(180deg)}
.rc-play span{width:10px;height:12px;border-left:3px solid #fff;border-right:3px solid #fff}
.rc-play[aria-pressed=true] span{width:0;height:0;margin-left:3px;border:0;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.rc-sound{display:flex!important;gap:8px;padding:0 16px 0 12px!important}
.rc-sound i{width:16px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M1 5h3l4-3.5v11L4 9H1z' fill='%23000'/%3E%3Cpath d='M11 4.5c1.2 1.4 1.2 3.6 0 5M13 2.5c2.2 2.6 2.2 6.4 0 9' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M1 5h3l4-3.5v11L4 9H1z' fill='%23000'/%3E%3Cpath d='M11 4.5c1.2 1.4 1.2 3.6 0 5M13 2.5c2.2 2.6 2.2 6.4 0 9' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.55}
.rc-sound[aria-pressed=true] i{opacity:1}
.rc-sound[aria-pressed=true]{background:rgba(255,255,255,.14)}

.reel-foot{display:grid;justify-items:center;gap:18px;margin-top:clamp(48px,6vw,80px);text-align:center}
.reel-note{font-size:13px;color:var(--steel-2);max-width:60ch}

/* Hell (Unterseite auf Weiß/Nebel) */
.reels-light .reel-item:hover{background:#fff}
.reels-light .reel-item[aria-selected=true]{background:#fff;box-shadow:0 0 0 1px var(--ice),0 20px 40px -26px #0d235155}
.reels-light .ri-t b{color:var(--navy)}
.reels-light .ri-t small,.reels-light .reel-item[aria-selected=true] .ri-t small{color:var(--text-2)}
.reels-light .reel-item[aria-selected=true] .ri-n,.reels-light .ri-tag{color:var(--blue)}
.reels-light .ri-tag{box-shadow:inset 0 0 0 1px #1855c066}
.reels-light .ri-bar{background:var(--ice)}
.reels-light .ri-bar::after{background:var(--blue)}
.reels-light .reel-ctrl{background:#fff;box-shadow:0 0 0 1px var(--ice),0 14px 30px -18px #0d235166}
.reels-light .reel-ctrl button{color:var(--navy)}
.reels-light .reel-ctrl button:hover,.reels-light .rc-sound[aria-pressed=true]{background:var(--mist)}
.reels-light .rc-play span{border-color:var(--navy)}
.reels-light .rc-play[aria-pressed=true] span{border-left-color:var(--navy)}
.reels-light .reel-note{color:var(--text-2)}
.reels-light .reel-ph.is-prev,.reels-light .reel-ph.is-next{filter:saturate(.7);opacity:.55}

/* Startzustand ohne JS: Liste + mittleres Handy */
html:not(.reels-js) .reel-ph:first-child{transform:none;opacity:1;pointer-events:auto}
html:not(.reels-js) .reel-ctrl{display:none}

@media(max-width:900px){
  .reel-show{grid-template-columns:minmax(0,1fr);gap:28px}
  .reel-list,.reel-stage{min-width:0}
  .reel-stage{order:-1}
  .reel-phones{--rw:clamp(200px,58vw,260px)}
  .reel-ph.is-prev{transform:translateX(-58%) scale(.78) rotateY(14deg)}
  .reel-ph.is-next{transform:translateX(58%) scale(.78) rotateY(-14deg)}
  .reel-list{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gutter) * -1);padding:4px var(--gutter);scrollbar-width:none}
  .reel-list::-webkit-scrollbar{display:none}
  .reel-list li{flex:none;scroll-snap-align:center}
  .reel-item{grid-template-columns:auto;padding:12px 18px 14px;min-width:200px;max-width:240px}
  .ri-n{display:none}
  .ri-t small{display:none}
  .reel-item[aria-selected=true] .ri-tag{display:none}
}
@media(prefers-reduced-motion:reduce){.reel-ph{transition:none}}

/* Unterseite: Handy richtet sich beim Scrollen auf (nach 21st.dev „Phone Scroll Hero“),
   Text bleibt frei – die Grafik liegt nie über Überschrift oder Buttons. */
.reel-hero{background:var(--mist);padding:0 0 clamp(64px,8vw,110px)}
.rh-stage{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(20px,4vw,64px);perspective:1600px}
.rh-phone{--pw:clamp(230px,24vw,320px);transform-origin:50% 0}
.rh-phone .phone{--pw:inherit;width:var(--pw)}
.rh-phone video{opacity:0;transition:opacity .45s var(--ease)}
.rh-phone.playing video{opacity:1}
.rh-chip{display:grid;gap:2px;padding:14px 22px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--ice),0 24px 48px -28px #0d235166}
.rh-chip b{font-size:clamp(20px,2vw,26px);font-weight:600;letter-spacing:-.02em;color:var(--navy)}
.rh-chip span{font-size:14px;color:var(--text-2)}
.rh-l{justify-self:end;transform:rotate(-3deg)}
.rh-r{justify-self:start;transform:rotate(3deg)}
.tx-motion:not(.tx-fallback) .rh-phone{transform:rotateX(26deg) scale(.86) translateY(40px)}
@media(max-width:760px){.rh-stage{grid-template-columns:1fr}.rh-chip{display:none}.rh-phone{justify-self:center;--pw:clamp(220px,64vw,280px)}}
.process .hiw{max-width:1100px;margin:0 auto}