/* Werkstattkampagne Winter 2026/27 (/fahrradservice-winter/). Baut auf site.css auf (Farben, Lato, Buttons).
   Bewegung: --p läuft je Abschnitt von 0 nach 1, gekoppelt ans Scrollen (animation-timeline).
   Ohne Unterstützung startet kampagne.js dieselbe Bewegung einmalig beim Sichtkontakt. */
@property --p{syntax:'<number>';inherits:true;initial-value:1}
.p-fahrradservice-winter{--io:cubic-bezier(.65,0,.35,1);--gut:max(35px,calc((100vw - 1122px)/2))}
@keyframes kwP{from{--p:0}to{--p:1}}
/* Usercentrics setzt bei offenem Banner body.overflowHidden{overflow:hidden!important}. Weil html overflow-x:clip trägt, wird body damit
   zum eigenen Scroll-Container (der nie scrollt): alle view()-Zeitachsen hängen dann an ihm und stehen still. Gescrollt wird ohnehin im Fenster. */
body.p-fahrradservice-winter.overflowHidden{overflow:clip visible!important}

/* ---------- Hero: Satz oben, Foto öffnet sich beim Scrollen auf volle Breite ---------- */
.kw-hero{background:var(--off);padding-top:calc(81px + clamp(32px,5vw,68px))}
.kw-hero h1{font-size:clamp(34px,6.1vw,74px);line-height:1.03;font-weight:900;letter-spacing:-.025em;max-width:21ch;margin:0}
.kw-hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
.kw-hero h1 .w>span{display:inline-block}
.kw-hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 56px;flex-wrap:wrap;margin-top:clamp(20px,2.6vw,32px)}
.kw-lead{font-size:clamp(17px,1.5vw,19.5px);line-height:1.55;max-width:50ch;margin:0;color:var(--body)}
.kw-ctas{display:flex;gap:12px;flex-wrap:wrap}
.kw-shot{margin:clamp(32px,4.4vw,60px) 0 0;height:clamp(300px,58vw,780px);overflow:hidden;clip-path:inset(0 var(--gut) round var(--r))}
.kw-shot img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
@keyframes kwRise{from{transform:translateY(108%)}to{transform:none}}
@keyframes kwFade{from{opacity:.001;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes kwOpen{to{clip-path:inset(0 0 round 0)}}
@keyframes kwZoom{from{transform:scale(1.16)}to{transform:scale(1)}}
@media(prefers-reduced-motion:no-preference){
  .js .kw-hero h1 .w>span{animation:kwRise .9s var(--eo) both;animation-delay:calc(var(--i)*45ms + 60ms)}
  .js .kw-hero-row{animation:kwFade .9s var(--eo) .42s both}
  .js .kw-shot{animation:kwFade 1s var(--eo) .5s both}
  @supports (animation-timeline:scroll()){
    .js .kw-shot{animation:kwFade 1s var(--eo) .5s both,kwOpen linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 560px}
    .js .kw-shot img{animation:kwZoom linear both;animation-timeline:scroll(root);animation-range:0 900px}
  }
}

/* ---------- Leitsatz: Wörter leuchten beim Scrollen der Reihe nach auf ---------- */
.kw-say{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(32px,6vw,96px);align-items:center}
.kw-big{font-size:clamp(28px,3.7vw,50px);line-height:1.13;letter-spacing:-.02em;margin:0 0 26px;text-wrap:pretty}
.kw-big .w{opacity:clamp(.17,calc(var(--p)*var(--n) - var(--i)),1)}
.kw-say-txt p{font-size:18px;max-width:46ch;margin:0;color:var(--body)}
.kw-say-img{margin:0;border-radius:var(--r);overflow:hidden;overflow:clip}   /* clip: sonst hängt view() des Bildes an der Figur statt an der Seite */
.kw-say-img img{width:100%;height:auto}
@keyframes kwReveal{from{clip-path:inset(100% 0 0 0 round var(--r))}to{clip-path:inset(0 0 0 0 round var(--r))}}
@keyframes kwSettle{from{transform:scale(1.18)}to{transform:scale(1)}}

/* ---------- Symptome: Liste links, festes Bild rechts blendet über ---------- */
.kw-check{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(32px,5vw,80px);align-items:start}
.kw-check .sub{margin-bottom:22px}
.kw-syms{border-top:1px solid var(--line)}
.kw-syms li{border-bottom:1px solid var(--line)}
.kw-sym{width:100%;display:flex;align-items:center;gap:18px;padding:19px 12px;margin:0 -12px;width:calc(100% + 24px);background:none;border:0;border-radius:10px;text-align:left;cursor:pointer;transition:background-color .14s ease,transform .12s ease-out}
.kw-sym-t{font-size:clamp(19px,2vw,25px);line-height:1.22;font-weight:900;color:var(--ink);letter-spacing:-.01em;transition:color .14s ease}
.kw-box{flex:none;width:32px;height:32px;border-radius:50%;border:1.5px solid #AEBBA3;display:flex;align-items:center;justify-content:center;color:#fff;background:#fff;transition:background-color .16s ease,border-color .16s ease,transform .2s var(--eo)}
.kw-box .ic{width:16px;height:16px;stroke-width:3;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .28s var(--eo) .04s}
.kw-sym[aria-pressed=true] .kw-box{background:var(--wald);border-color:var(--wald);transform:scale(1.06)}
.kw-sym[aria-pressed=true] .kw-box .ic{stroke-dashoffset:0}
.kw-sym[aria-pressed=true] .kw-sym-t{color:var(--wald)}
.kw-sym:active{transform:scale(.99)}
.kw-sym:focus-visible{outline:3px solid var(--gruen);outline-offset:0}
@media(hover:hover) and (pointer:fine){.kw-sym:hover{background:#fff}.kw-sym:hover .kw-box{border-color:var(--wald)}}
.kw-pick{display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;margin-top:26px}
.kw-pick p{margin:0;font-weight:700;color:var(--slate)}
.kw-pick.has p{color:var(--wald)}
.kw-view{position:sticky;top:110px;margin:0;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--line)}
.kw-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);filter:blur(8px);transition:opacity .45s ease,transform .7s var(--eo),filter .45s ease}
.kw-view img.on{opacity:1;transform:none;filter:none}

/* ---------- Preise: Umschalter, Zahlen wechseln gestaffelt ---------- */
.kw-price-h{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;margin-bottom:26px}
.kw-price-h h2{margin:0}
.kw-seg{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:var(--rb);background:var(--off);border:1px solid var(--line)}
.kw-seg button{position:relative;z-index:1;height:44px;padding:0 18px;border:0;background:none;border-radius:9px;font-weight:700;font-size:14.5px;color:var(--slate);cursor:pointer;white-space:nowrap;transition:color .16s ease,transform .12s ease-out}
.kw-seg button[aria-pressed=true]{color:var(--ink)}
.kw-seg button:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.kw-seg button:hover{color:var(--wald)}}
.kw-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:9px;background:#fff;box-shadow:0 1px 2px rgba(27,42,16,.14),0 4px 12px rgba(27,42,16,.07);transition:transform .32s var(--eo)}
[data-set=b]>.kw-price-h .kw-thumb{transform:translateX(100%)}
.kw-prices{border-top:1px solid var(--line);margin-bottom:22px}
.kw-price>.small{margin-bottom:0}
.kw-prices li{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:clamp(14px,1.8vw,22px) 0;border-bottom:1px solid var(--line)}
.kw-pn{font-size:clamp(19px,2.1vw,26px);font-weight:900;color:var(--ink);letter-spacing:-.01em}
.kw-pv{display:inline-grid;overflow:hidden;font-size:clamp(34px,5.2vw,66px);line-height:1.05;font-weight:900;color:var(--wald);letter-spacing:-.03em;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;padding-bottom:.04em}
.kw-pv span{grid-area:1/1;transition:transform .5s var(--eo),opacity .3s ease,filter .3s ease;transition-delay:calc(var(--i)*45ms)}
[data-set=a] .kw-pv [data-set=b]{transform:translateY(70%);opacity:0;filter:blur(5px)}
[data-set=b] .kw-pv [data-set=a]{transform:translateY(-70%);opacity:0;filter:blur(5px)}

/* ---------- Hol- und Bringservice: die Fahrt zieht eine Reifenspur über drei Stationen ---------- */
.kw-hb{background:var(--wald-tief);color:rgba(255,255,255,.88)}
.kw-hb h2,.kw-hb h3{color:#fff}
.kw-hb-top{max-width:780px}
.kw-hb-top h2{font-size:clamp(30px,4vw,52px);letter-spacing:-.02em;line-height:1.08}
.kw-hb-top p{font-size:18px;max-width:60ch;margin:0}
.kw-hb a.lnk{color:#fff}
.kw-trip{margin-top:clamp(40px,5vw,68px)}
.kw-route{position:relative;height:44px;margin-bottom:26px}
.kw-line,.kw-tread{position:absolute;left:0;right:0;clip-path:inset(0 calc((1 - var(--p))*100%) 0 0)}
.kw-line{bottom:6px;height:2px;border-radius:2px;background:var(--gruen)}
.kw-route::before{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;border-radius:2px;background:rgba(255,255,255,.14)}
.kw-tread{bottom:14px;height:10px;background:rgba(255,255,255,.34);
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='10'%3E%3Cpath d='M2 9.2 6 .8' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") round no-repeat left center/8px 10px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='10'%3E%3Cpath d='M2 9.2 6 .8' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") round no-repeat left center/8px 10px}
.kw-van-w{position:absolute;inset:0;transform:translateX(calc(var(--p)*100% - var(--p)*46px))}
.kw-van{position:absolute;left:0;bottom:-4px;width:46px;height:46px;border-radius:50%;background:var(--gruen);color:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.28)}
.kw-van .ic{width:24px;height:24px}
.kw-stops{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px clamp(24px,4vw,56px)}
.kw-stops li{opacity:clamp(.38,calc((var(--p) - var(--at))*7 + .38),1)}
.kw-stop-n{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--gruen);color:var(--gruen);font-weight:900;font-variant-numeric:tabular-nums;margin-bottom:14px}
.kw-stops h3{font-size:21px;margin:0 0 8px}
.kw-stops p{margin:0;font-size:16px;max-width:36ch}
.kw-hb-foot{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;margin-top:clamp(36px,4.6vw,60px);padding-top:28px;border-top:1px solid rgba(255,255,255,.16)}
.kw-km{display:flex;align-items:baseline;gap:14px;margin:0}
.kw-km strong{font-size:clamp(40px,5vw,62px);line-height:1;font-weight:900;color:var(--gruen);letter-spacing:-.03em;white-space:nowrap}
.kw-km span{font-size:18px;color:#fff}

/* ---------- Werkstatt-Streifen: fährt beim Scrollen seitlich durch ---------- */
.kw-strip{padding:clamp(40px,5vw,72px) 0;overflow-x:auto;scrollbar-width:none}
.kw-strip::-webkit-scrollbar{display:none}
.kw-strip ul{display:flex;gap:16px;width:max-content;padding:0 var(--gut);margin:0}
.kw-strip li{flex:none;height:clamp(240px,30vw,400px);border-radius:var(--r);overflow:hidden}
.kw-strip img{height:100%;width:auto;max-width:none}
.kw-strip+.faq-sec{padding-top:clamp(8px,2vw,24px)}   /* Streifen bringt seinen Abstand selbst mit, sonst doppelt */

/* ---------- Feste Leiste auf dem Handy ---------- */
.kw-bar{display:none}

/* ---------- Scroll-gekoppelte Bewegung ---------- */
@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .js [data-kw-p]{animation:kwP linear both;animation-timeline:view()}
    .js .kw-big{animation-range:cover 12% cover 46%}
    .js .kw-trip{animation-range:entry 45% cover 48%}
    @media(max-width:860px){.js .kw-trip{animation-range:entry 22% entry 96%}}
    .js .kw-strip{overflow:clip}   /* clip, nicht hidden: hidden macht den Streifen zum eigenen Scroll-Container, view() hängt dann an ihm und --p bleibt bei 0.5 stehen */
    .js .kw-strip ul{animation-range:entry 0% exit 100%;transform:translateX(calc(var(--p)*(100vw - 100%)))}
    .js .kw-say-img{animation:kwReveal linear both;animation-timeline:view();animation-range:entry 10% cover 34%}
    .js .kw-say-img img{animation:kwSettle linear both;animation-timeline:view();animation-range:entry 10% cover 50%}
  }
  /* Ersatz ohne animation-timeline: einmal abspielen, sobald sichtbar (Klasse kommt aus kampagne.js) */
  .kw-nost [data-kw-p]:not(.kw-run){--p:0}
  .kw-nost [data-kw-p].kw-run{animation:kwP 1.7s var(--io) both}
  .kw-nost .kw-strip ul{--p:0;animation:none}
  .kw-nost .kw-say-img:not(.kw-run){clip-path:inset(100% 0 0 0 round var(--r))}
  .kw-nost .kw-say-img.kw-run{animation:kwReveal 1s var(--eo) both}
}
@media(prefers-reduced-motion:reduce){
  .kw-view img,.kw-pv span,.kw-thumb,.kw-box,.kw-box .ic,.kw-sym,.kw-bar{transition:none}
}

/* ---------- Schmalere Fenster ---------- */
@media(max-width:860px){
  .kw-say,.kw-check{grid-template-columns:minmax(0,1fr)}
  .kw-say-img{max-width:520px}
  .kw-view{position:relative;top:auto;order:-1;aspect-ratio:3/2}
  .kw-stops{grid-template-columns:minmax(0,1fr);gap:26px}
  .kw-stops p{max-width:none}
  .kw-bar{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#fff;box-shadow:0 -1px 0 var(--line),0 -10px 28px rgba(27,42,16,.10);transform:translateY(110%);transition:transform .32s var(--eo)}
  .kw-bar.on{transform:none}
  .kw-bar .btn{flex:1 1 0;justify-content:center;padding:0 12px}
}
@media(max-width:640px){
  .p-fahrradservice-winter{--gut:20px}
  .kw-hero h1{font-size:clamp(33px,9.7vw,44px)}
  .kw-ctas{width:100%}
  .kw-ctas .btn,.kw-pick .btn,.kw-hb-foot .btn{flex:1 1 100%;justify-content:center}
  .kw-shot{height:74vw}
  .kw-seg{width:100%}
  .kw-seg button{padding:0 8px;font-size:14px}
  .kw-km{flex-direction:column;gap:4px}
  .kw-sym{gap:14px}
}