.ss-intro[hidden]{display:none!important}
.ss-intro{position:fixed;inset:0;z-index:100000;isolation:isolate;overflow:hidden;background:#25261e;color:#fffaf0;font-family:Arial,sans-serif;opacity:1;transition:opacity .5s ease}
.ss-intro.is-closing{opacity:0;pointer-events:none}
.ss-intro-scenes,.ss-intro-scene,.ss-intro-shade{position:absolute;inset:0}
.ss-intro-scene{background-size:cover;background-position:65% center;opacity:0;transform:scale(1.035)}
.ss-intro-spring{background-image:url(fruehling.jpg)}
.ss-intro-summer{background-image:url(sommer.jpg)}
.ss-intro-autumn{background-image:url(herbst.jpg)}
.ss-intro-winter{background-image:url(winter.jpg)}
.ss-intro.is-playing .ss-intro-scene{animation:ss-intro-scene 6.8s both ease-in-out}
.ss-intro.is-playing .ss-intro-summer{animation-delay:1.6s}
.ss-intro.is-playing .ss-intro-autumn{animation-delay:3.2s}
.ss-intro.is-playing .ss-intro-winter{animation-delay:4.8s}
.ss-intro-shade{background:linear-gradient(90deg,rgba(24,31,22,.9) 0%,rgba(24,31,22,.76) 30%,rgba(24,31,22,.2) 65%,rgba(24,31,22,.1)),linear-gradient(0deg,rgba(20,25,18,.55),transparent 25%)}
.ss-intro-copy{position:absolute;left:clamp(26px,7.5vw,150px);top:50%;transform:translateY(-50%);max-width:620px;right:24px}
.ss-intro-eyebrow{margin:0 0 24px;font-size:11px;font-weight:600;letter-spacing:.25em;text-transform:uppercase;color:#f1dbb1}
#ss-intro-title{margin:0;font:400 clamp(64px,8.7vw,146px)/.88 Georgia,'Times New Roman',serif;letter-spacing:-.055em;color:#fffaf0;text-shadow:0 2px 30px rgba(0,0,0,.12)}
#ss-intro-title span{font-style:italic;color:#e4be82}
.ss-intro-description{margin:26px 0 0;font:400 clamp(17px,1.6vw,24px)/1.5 Georgia,serif;color:#fffaf0}
.ss-intro-stories{position:relative;height:36px;margin-top:12px}
.ss-intro-stories p{position:absolute;inset:0;margin:0;color:#ead9bc;font-size:14px;line-height:1.5;opacity:0}
.ss-intro.is-playing .ss-intro-stories p{animation:ss-intro-story 6.8s both}
.ss-intro.is-playing .ss-intro-stories p:nth-child(2){animation-delay:1.6s}
.ss-intro.is-playing .ss-intro-stories p:nth-child(3){animation-delay:3.2s}
.ss-intro.is-playing .ss-intro-stories p:nth-child(4){animation-delay:4.8s}
.ss-intro button{cursor:pointer;font-family:Arial,sans-serif}
.ss-intro-skip{position:absolute;z-index:2;right:clamp(20px,4vw,70px);top:28px;border:1px solid rgba(255,255,255,.65);border-radius:99px;background:rgba(20,29,20,.6);color:#fffaf0;padding:11px 17px;font-size:12px;display:flex;gap:17px;align-items:center;min-height:44px}
.ss-intro-enter{border:1px solid #e4be82;background:#f4e7cc;color:#253020;padding:15px 24px;display:inline-flex;align-items:center;gap:36px;border-radius:3px;font-size:14px;min-height:48px;margin-top:16px;transition:background .2s}
.ss-intro-enter:hover{background:#fff8e8}
.ss-intro button:focus-visible{outline:3px solid #fff;outline-offset:5px}
.ss-intro-bottom{position:absolute;bottom:30px;left:clamp(26px,7.5vw,150px);right:clamp(20px,4vw,70px);display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#f4e7cc}
.ss-intro-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.15)}
.ss-intro-progress i{display:block;width:0;height:100%;background:#e4be82}
.ss-intro.is-playing .ss-intro-progress i{animation:ss-intro-progress 6.8s linear forwards}
.ss-intro-accessible{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes ss-intro-scene{0%{opacity:0;transform:scale(1.035)}5%,27%{opacity:1}33%,100%{opacity:0;transform:scale(1)}}
@keyframes ss-intro-story{0%{opacity:0;transform:translateY(6px)}5%,23%{opacity:1;transform:translateY(0)}28%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes ss-intro-progress{to{width:100%}}
@media(max-width:650px){.ss-intro-scene{background-position:75% center}.ss-intro-shade{background:linear-gradient(90deg,rgba(24,31,22,.83),rgba(24,31,22,.33)),linear-gradient(0deg,rgba(24,31,22,.75),transparent 70%)}.ss-intro-copy{top:53%;left:26px}.ss-intro-eyebrow{font-size:9px;letter-spacing:.18em;margin-bottom:22px}#ss-intro-title{font-size:clamp(68px,15vw,100px)}.ss-intro-description{font-size:18px;max-width:260px}.ss-intro-stories p{font-size:12px;max-width:270px}.ss-intro-skip{top:20px;right:20px}.ss-intro-bottom{bottom:22px;font-size:8px;letter-spacing:.1em}.ss-intro-bottom span:last-child{display:none}}
@media(max-height:560px){.ss-intro-copy{top:51%}#ss-intro-title{font-size:64px}.ss-intro-eyebrow{margin-bottom:12px}.ss-intro-description{margin-top:14px;font-size:17px}.ss-intro-stories{margin-top:6px;height:22px}.ss-intro-enter{margin-top:8px;padding:10px 18px}.ss-intro-bottom{bottom:15px}}
@media(max-width:650px){.ss-intro-spring{background-image:url(fruehling-mobil.jpg)}.ss-intro-summer{background-image:url(sommer-mobil.jpg)}.ss-intro-autumn{background-image:url(herbst-mobil.jpg)}.ss-intro-winter{background-image:url(winter-mobil.jpg)}}
@media(prefers-reduced-motion:reduce){.ss-intro{transition:none}.ss-intro *{animation:none!important;transition:none!important}.ss-intro-spring{opacity:1;transform:none}.ss-intro-stories p:first-child{opacity:1}}

/* Kompakte Begruessung: ein Motiv, insgesamt drei Sekunden. */
.ss-intro{transition:opacity .3s ease}.ss-intro-welcome{background-image:url(sommer.jpg);opacity:1;transform:none}.ss-intro.is-playing .ss-intro-scene{animation:none}.ss-intro-description{max-width:440px}.ss-intro-enter{margin-top:24px}.ss-intro.is-playing .ss-intro-progress i{animation-duration:2.7s}@media(max-width:650px){.ss-intro-welcome{background-image:url(sommer-mobil.jpg)}.ss-intro-description{max-width:285px}}
/* Übergänge zum Shop (Backend → Design, Logo & Intro): --ue = Dauer */
.ss-intro.is-closing[class*=" ue-"]{opacity:1;transition:none;pointer-events:none}
.ss-intro.is-closing.ue-blenden{animation:ss-ue-blenden var(--ue,.8s) ease forwards}
.ss-intro.is-closing.ue-hoch{animation:ss-ue-hoch var(--ue,.8s) cubic-bezier(.7,0,.25,1) forwards}
.ss-intro.is-closing.ue-runter{animation:ss-ue-runter var(--ue,.8s) cubic-bezier(.7,0,.25,1) forwards}
.ss-intro.is-closing.ue-seite{animation:ss-ue-seite var(--ue,.8s) cubic-bezier(.7,0,.25,1) forwards}
.ss-intro.is-closing.ue-zoom{animation:ss-ue-zoom var(--ue,.8s) cubic-bezier(.5,0,.75,0) forwards}
.ss-intro.is-closing.ue-klein{animation:ss-ue-klein var(--ue,.8s) cubic-bezier(.6,0,.4,1) forwards;border-radius:24px}
.ss-intro.is-closing.ue-kreis{animation:ss-ue-kreis var(--ue,.8s) cubic-bezier(.6,0,.4,1) forwards}
.ss-intro.is-closing.ue-wischen{animation:ss-ue-wischen var(--ue,.8s) cubic-bezier(.6,0,.4,1) forwards}
.ss-intro.is-closing.ue-unschaerfe{animation:ss-ue-unschaerfe var(--ue,.8s) ease forwards}
.ss-intro.is-closing.ue-sofort{display:none}
@keyframes ss-ue-blenden{to{opacity:0}}
@keyframes ss-ue-hoch{to{transform:translateY(-100%)}}
@keyframes ss-ue-runter{to{transform:translateY(100%)}}
@keyframes ss-ue-seite{to{transform:translateX(-100%)}}
@keyframes ss-ue-zoom{to{transform:scale(1.6);opacity:0;filter:blur(4px)}}
@keyframes ss-ue-klein{to{transform:scale(.4);opacity:0}}
@keyframes ss-ue-kreis{from{clip-path:circle(150% at 50% 50%)}to{clip-path:circle(0% at 50% 50%)}}
@keyframes ss-ue-wischen{from{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}to{clip-path:polygon(100% 0,100% 0,100% 0,100% 100%)}}
@keyframes ss-ue-unschaerfe{to{filter:blur(18px);opacity:0;transform:scale(1.04)}}
/* So erscheint der Shop dahinter */
.ss-shop-ein.ss-shop-blenden{animation:ss-shop-blenden var(--ue,.8s) ease both}
.ss-shop-ein.ss-shop-hoch{animation:ss-shop-hoch var(--ue,.8s) cubic-bezier(.2,.7,.2,1) both}
.ss-shop-ein.ss-shop-zoom{animation:ss-shop-zoom var(--ue,.8s) cubic-bezier(.2,.7,.2,1) both}
@keyframes ss-shop-blenden{from{opacity:0}}
@keyframes ss-shop-hoch{from{opacity:0;transform:translateY(40px)}}
@keyframes ss-shop-zoom{from{opacity:0;transform:scale(1.05)}}
@media(prefers-reduced-motion:reduce){.ss-intro.is-closing[class*=" ue-"],.ss-shop-ein{animation:none!important}}