/* Teil 109: Leistungsseiten (Pneuwechsel, Winter-Paket) */
.sx{background:var(--white);color:var(--ink)}
.sx-hero{background:var(--foot);color:#fff;position:relative;overflow:hidden;padding:clamp(28px,6vw,64px) 0 clamp(34px,7vw,72px)}
.sx-hero:after{content:"";position:absolute;right:-14%;top:0;bottom:0;width:34%;background:var(--accent);box-shadow:inset 0 0 0 999px var(--accent);transform:skewX(-18deg);opacity:.95}
.sx-hero .in{position:relative;z-index:1}
.sx-crumb{font-size:13px;letter-spacing:.06em;color:#b9bdc3;margin:0 0 18px}
.sx-crumb a{color:#b9bdc3}
.sx-hero h1{font-family:'Titillium Web',sans-serif;font-weight:700;font-size:clamp(32px,7vw,56px);line-height:1.02;margin:0 0 14px;max-width:16ch}
.sx-hero .sx-lead{font-size:clamp(16px,4vw,19px);line-height:1.5;color:#d6d8dc;max-width:40ch;margin:0 0 22px}
.sx-tag{display:inline-flex;align-items:baseline;gap:8px;background:var(--accent);box-shadow:inset 0 0 0 999px var(--accent);color:#fff;padding:6px 20px 6px 16px;border-left:6px solid #fff;transform:skewX(-12deg);margin:0 0 24px}
.sx-tag>*{transform:skewX(12deg)}
.sx-tag small{font-size:14px;font-weight:600}
.sx-tag b{font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:800;font-size:clamp(34px,8vw,46px);line-height:1}
.sx-btns{display:flex;flex-wrap:wrap;gap:12px 16px}
.sx-btn{display:inline-flex;align-items:center;min-height:50px;padding:0 26px;text-decoration:none;transform:skewX(-12deg);font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase;background:var(--accent);box-shadow:inset 0 0 0 999px var(--accent);color:#fff}
.sx-btn>span{transform:skewX(12deg)}
.sx-btn.ghost{background:transparent;box-shadow:inset 0 0 0 2px #fff}
.sx-sec{padding:clamp(36px,7vw,72px) 0}
.sx-sec.alt{background:var(--soft-bg,#F6F6F8)}
.sx-sec h2{font-family:'Titillium Web',sans-serif;font-weight:700;font-size:clamp(26px,5.5vw,38px);line-height:1.1;margin:0 0 10px}
.sx-sec .sx-intro{color:var(--muted);font-size:17px;line-height:1.55;max-width:60ch;margin:0 0 26px}
.sx-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.sx-card{background:#fff;border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:var(--r-s,12px);padding:22px}
.sx-sec.alt .sx-card{border-color:var(--bd,#D9DCE0);border-top-color:var(--accent)}
.sx-card h3{font-size:19px;margin:0 0 6px}
.sx-price{font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:800;font-size:34px;line-height:1.1;color:var(--accent);margin:4px 0 8px}
.sx-price small{font-family:Barlow,sans-serif;font-style:normal;font-weight:600;font-size:14px;color:var(--muted);margin-right:6px}
.sx-card p{margin:0;color:var(--muted);line-height:1.5}
.sx-card a{color:var(--ink);font-weight:700}
.sx-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;counter-reset:s;list-style:none;padding:0;margin:0}
.sx-steps li{border-left:4px solid var(--accent);padding:2px 0 2px 16px;line-height:1.5;color:var(--muted)}
.sx-steps li:before{counter-increment:s;content:counter(s);display:block;font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:800;font-size:32px;color:var(--accent);line-height:1}
.sx-steps b{color:var(--ink)}
.sx-list{list-style:none;padding:0;margin:0;display:grid;gap:12px;max-width:62ch}
.sx-list li{position:relative;padding-left:26px;line-height:1.5}
.sx-list li:before{content:"";position:absolute;left:0;top:7px;width:12px;height:12px;background:var(--accent);box-shadow:inset 0 0 0 999px var(--accent);transform:skewX(-12deg)}
.sx-faq{max-width:780px;display:grid;gap:10px}
.sx-faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r-s,12px);padding:0 20px}
.sx-faq summary{cursor:pointer;list-style:none;font-weight:700;font-size:17px;padding:18px 28px 18px 0;position:relative}
.sx-faq summary::-webkit-details-marker{display:none}
.sx-faq summary:after{content:"+";position:absolute;right:0;top:14px;font-size:24px;color:var(--accent)}
.sx-faq details[open] summary:after{content:"–"}
.sx-faq p{margin:0 0 18px;line-height:1.6;color:var(--muted)}
.sx-cta{background:var(--foot);color:#fff;padding:clamp(34px,7vw,60px) 0}
.sx-cta h2{color:#fff}
.sx-cta p{color:#c9ccd0;margin:0 0 22px;font-size:17px}
.sx-area{font-size:15px;color:var(--muted);margin-top:22px}
.sx-more{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:6px}
.sx-more a{color:var(--ink);font-weight:700}
.sx-bar{display:none}
@media (max-width:700px){
  .sx .in{padding-left:16px;padding-right:16px}
  .sx-hero:after{right:-40%;width:55%;opacity:.25}
  .sx-btn{flex:1 1 100%;justify-content:center}
  .sx-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--foot);padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:10px}
  .sx-bar a{flex:1;text-align:center;min-height:46px;display:flex;align-items:center;justify-content:center;font-weight:700;text-decoration:none;color:#fff;border-radius:10px;box-shadow:inset 0 0 0 1px #3a3d42}
  .sx-bar a.b{background:var(--accent);box-shadow:inset 0 0 0 999px var(--accent)}
  .sx-pad{height:76px}
}
.sx-area-d{color:#9ea3aa}
.sx-mt{margin-top:22px}
.sx-soon{border:2px dashed var(--bd,#D9DCE0);border-radius:var(--r-s,12px);padding:22px;max-width:620px}
.sx-soon b{display:block;font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:800;font-size:26px;color:var(--accent);text-transform:uppercase}
.sx-soon p{margin:6px 0 0;color:var(--muted);line-height:1.5}
.sx-saison{display:flex;flex-direction:column}
.sx-saison.sommer-zuerst #sommer{order:-1}
.sx-more-d{margin-top:18px}
.sx-more-d a{color:#fff}
/* Teil 109: Kopf mit Bildern (laufen nacheinander durch) */
.sx-show{position:absolute;top:0;bottom:0;right:0;left:max(38%,calc(50% - 40px));clip-path:polygon(14% 0,100% 0,100% 100%,4px 100%);overflow:hidden}
.sx-show img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%;opacity:0;animation:sxshow 24s linear infinite both}
.sx-show img:only-child{opacity:1;animation:none}
.sx-show img:nth-child(1){animation-delay:-1s}
.sx-show img:nth-child(2){animation-delay:5s}
.sx-show img:nth-child(3){animation-delay:11s}
.sx-show img:nth-child(4){animation-delay:17s}
.sx-show:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,19,22,.55),rgba(17,19,22,0) 45%)}
@keyframes sxshow{0%{opacity:0;transform:scale(1)}4%{opacity:1}25%{opacity:1}29%{opacity:0;transform:scale(1.06)}100%{opacity:0;transform:scale(1.06)}}
.sx-hero.mit-bild:after{left:max(38%,calc(50% - 40px));right:0;width:auto;transform:none;opacity:.9;clip-path:polygon(calc(14% - 4px) 0,14% 0,4px 100%,0 100%);z-index:1}
.sx-hero.mit-bild .in>*{max-width:min(540px,44vw)}
.sx-hero.mit-bild{min-height:440px}
@media (prefers-reduced-motion:reduce){.sx-show img{animation:none}.sx-show img:nth-child(1){opacity:1}}
@media (max-width:700px){
  .sx-show{left:0;width:100%;clip-path:none}
  .sx-show img{object-position:62% 60%}
  .sx-show:after{background:linear-gradient(180deg,rgba(17,19,22,.7),rgba(17,19,22,.82))}
  .sx-hero.mit-bild:after{display:none}
  .sx-hero.mit-bild .in>*{max-width:none}
  .sx-hero.mit-bild{min-height:0}
}
/* Teil 109: Bilder-Band «Aus unserer Werkstatt» (laeuft langsam durch) */
.sx-gal{background:var(--foot);color:#fff;padding:clamp(34px,6vw,60px) 0;overflow:hidden}
.sx-gal h2{font-family:'Titillium Web',sans-serif;font-weight:700;font-size:clamp(26px,5vw,36px);margin:0 0 8px}
.sx-gal p{color:#c9ccd1;margin:0 0 24px}
.sx-gal-band{overflow:hidden}
.sx-gal-track,.sx-gal-dup{display:flex;gap:14px}
.sx-gal-track{width:max-content;animation:sxlauf 45s linear infinite}
.sx-gal-dup{padding-left:0}
.sx-gal-band:hover .sx-gal-track{animation-play-state:paused}
.sx-gal img{display:block;height:clamp(190px,26vw,330px);width:auto;aspect-ratio:1440/930;object-fit:cover;border-radius:var(--r-s,6px);border-bottom:4px solid var(--accent)}
@keyframes sxlauf{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 7px))}}
@media (prefers-reduced-motion:reduce){.sx-gal-track{animation:none}.sx-gal-band{overflow-x:auto}.sx-gal-dup{display:none}}
.sx-hero.mit-bild h1{font-size:clamp(32px,3.8vw,56px)}
@media (max-width:700px){.sx-hero.mit-bild h1{font-size:clamp(32px,7vw,56px)}}