socken-show{display:block}.socken-show{--sock-petrol: #123948;--sock-creme: #edf1e3;--sock-rosa: #eec4b4;--sock-tinte: #111a1d;--sock-weiss: #fbfaf6;position:relative;isolation:isolate;color:var(--sock-creme);background-color:var(--sock-petrol);background-image:repeating-linear-gradient(90deg,rgb(237 241 227 / .045) 0 3px,transparent 3px 9px)}.socken-show__buehne{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"bund bund" "kopf motiv" "texte motiv" "schluss motiv";align-content:start;gap:clamp(1.25rem,3vw,2.5rem) clamp(1.5rem,4vw,4rem);padding:clamp(2.5rem,6vw,5rem) max(1.25rem,5vw);overflow:hidden}@media(max-width:46.8rem){.socken-show__buehne{grid-template-columns:minmax(0,1fr);grid-template-areas:"bund" "kopf" "motiv" "texte" "schluss"}}.socken-show__kopf{grid-area:kopf}.socken-show__eyebrow{display:inline-block;margin:0 0 .9rem;padding:.35em .9em;border:2px solid currentColor;border-radius:999px;font-family:Work Sans,ui-sans-serif,system-ui,sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}.socken-show__titel{margin:0;color:var(--sock-weiss);font-family:Permanent Marker,cursive;font-weight:400;font-size:clamp(2.2rem,4.6vw,4.4rem);line-height:1.02}.socken-show__bund{grid-area:bund;margin-inline:calc(-1*max(1.25rem,5vw) - 4vw);padding-block:.55em;background:var(--sock-weiss);color:var(--sock-tinte);border-block:.32em solid var(--sock-tinte);font-family:Work Sans,ui-sans-serif,system-ui,sans-serif;font-weight:700;font-size:clamp(1.4rem,4vw,3rem);line-height:1;white-space:nowrap;overflow:hidden;transform:rotate(-3deg)}.socken-show__bund-spur{display:flex;width:max-content}.socken-show__bund-text{padding-inline:.35em;letter-spacing:-.01em}.socken-show__motiv{grid-area:motiv;position:relative;align-self:center;justify-self:center;height:min(72vh,44rem);width:auto;max-width:100%;aspect-ratio:var(--motiv-ratio, 1)}.socken-show__paar,.socken-show__schwein,.socken-show__banderole,.socken-show__preis{position:absolute}.socken-show__paar{top:0;right:0;bottom:0;left:0;z-index:2}.socken-show__paar-bild,.socken-show__schwein img,.socken-show__banderole img{display:block;width:100%;height:auto}.socken-show__paar-bild{filter:drop-shadow(0 18px 24px rgb(0 0 0 / .35))}.socken-show__schwein{z-index:1;width:64%;top:2%;right:-45%;transform:rotate(9deg)}.socken-show__banderole{z-index:1;width:70%;left:-55%;bottom:-2%;transform:rotate(-6deg);filter:drop-shadow(0 10px 14px rgb(0 0 0 / .4))}.socken-show__preis{z-index:4;right:-48%;bottom:36%;display:grid;place-content:center;width:clamp(5.5rem,10vw,8.5rem);aspect-ratio:1;margin:0;border:3px solid var(--sock-tinte);border-radius:50%;background:var(--sock-rosa);color:var(--sock-tinte);text-align:center;box-shadow:4px 4px 0 var(--sock-tinte);transform:rotate(-10deg)}.socken-show__preis-gross{font-family:Permanent Marker,cursive;font-size:clamp(1.5rem,2.8vw,2.4rem);line-height:1}.socken-show__preis-klein{font-family:Work Sans,ui-sans-serif,system-ui,sans-serif;font-weight:700;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}.socken-show__punkt{position:absolute;left:var(--x);top:var(--y);z-index:5;display:grid;place-items:center;width:2.1rem;height:2.1rem;margin:-1.05rem 0 0 -1.05rem;border:3px solid var(--sock-tinte);border-radius:50%;background:var(--sock-rosa);color:var(--sock-tinte);font-family:Work Sans,ui-sans-serif,system-ui,sans-serif;font-weight:700;font-size:.85rem;box-shadow:0 0 0 4px #edf1e3e6}.socken-show__texte{grid-area:texte;display:grid;gap:1rem;margin:0;padding:0;list-style:none}.socken-show__text{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;align-items:start}.socken-show__text-nr{display:grid;place-items:center;width:2.1rem;height:2.1rem;border:3px solid var(--sock-tinte);border-radius:50%;background:var(--sock-rosa);color:var(--sock-tinte);font-family:Work Sans,ui-sans-serif,system-ui,sans-serif;font-weight:700;font-size:.85rem}.socken-show__text-inhalt{display:grid;gap:.3rem}.socken-show__text-titel{color:var(--sock-weiss);font-family:Permanent Marker,cursive;font-weight:400;font-size:clamp(1.25rem,2.2vw,1.75rem);line-height:1.1}.socken-show__text-body{font-size:clamp(.95rem,1.4vw,1.08rem);line-height:1.5}.socken-show__schluss{grid-area:schluss}.socken-show__fakten{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem;padding:0;list-style:none}.socken-show__fakten li{padding:.4em .9em;border:2px solid var(--sock-creme);border-radius:999px;font-family:Work Sans,ui-sans-serif,system-ui,sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}.socken-show__datum{display:inline-block;margin:0;padding:.5em 1em;border:3px solid var(--sock-rosa);border-radius:6px;color:var(--sock-rosa);font-family:Work Sans,ui-sans-serif,system-ui,sans-serif;font-weight:700;font-size:clamp(.8rem,1.6vw,1rem);letter-spacing:.14em;text-transform:uppercase;transform:rotate(-2deg)}.socken-show__schluss .button{--button-background: 238 196 180;--button-text-color: 17 26 29;--button-outline-color: 238 196 180;background:var(--sock-rosa);color:var(--sock-tinte);border-color:var(--sock-rosa);box-shadow:4px 4px 0 var(--sock-tinte)}.socken-show.is-bewegt{height:360vh;height:360svh}.socken-show.is-bewegt .socken-show__buehne{position:sticky;top:var(--sticky-area-height, 0px);display:block;height:calc(100vh - var(--sticky-area-height, 0px));height:calc(100svh - var(--sticky-area-height, 0px));padding:0}.is-bewegt .socken-show__kopf{position:absolute;z-index:6;top:7%;left:max(1.5rem,5vw);width:min(36vw,32rem);opacity:var(--rein, 1);transform:translate3d(0,calc((1 - var(--rein, 1)) * 24px),0)}.is-bewegt .socken-show__bund{position:absolute;z-index:0;top:50%;left:-6vw;right:-6vw;margin:0;font-size:clamp(2rem,7vh,5rem);transform:translate3d(0,-50%,0) rotate(-4deg)}.is-bewegt .socken-show__bund-spur{transform:translate3d(calc(var(--p, 0) * -40%),0,0)}.is-bewegt .socken-show__motiv{position:absolute;z-index:2;top:52%;left:60%;width:auto;height:80%;max-width:none;transform:translate3d(-50%,-50%,0)}.is-bewegt .socken-show__paar{opacity:calc(.15 + .85 * var(--rein, 1));transform:translate3d(0,calc((1 - var(--rein, 1)) * 70vh),0) rotate(calc((1 - var(--rein, 1)) * -18deg)) scale(calc(.8 + .2 * var(--rein, 1)))}@media(min-width:46.8rem){.is-bewegt .socken-show__schwein{width:70%;right:-64%}.is-bewegt .socken-show__banderole{width:80%;left:auto;right:-84%;bottom:0}.is-bewegt .socken-show__preis{right:-56%}}.is-bewegt .socken-show__schwein{opacity:clamp(0,calc(var(--schwein, 1) * 3),1);transform:translate3d(calc((1 - var(--schwein, 1)) * -70%),calc((1 - var(--schwein, 1)) * 80%),0) rotate(calc(9deg - (1 - var(--schwein, 1)) * 40deg)) scale(calc(.3 + .7 * var(--schwein, 1)))}.is-bewegt .socken-show__banderole{transform:translate3d(calc((1 - var(--banderole, 1)) * 110vw),0,0) rotate(calc(-6deg + (1 - var(--banderole, 1)) * 24deg))}.is-bewegt .socken-show__preis{opacity:clamp(0,calc(var(--raus, 1) * 3),1);transform:rotate(calc(-10deg - (1 - var(--raus, 1)) * 30deg)) scale(var(--raus, 1))}.is-bewegt .socken-show__punkt{opacity:0;transform:scale(.4);transition:opacity .3s ease,transform .35s cubic-bezier(.34,1.56,.64,1)}.is-bewegt .socken-show__punkt.is-aktiv{opacity:1;transform:scale(1)}.is-bewegt .socken-show__punkt.is-aktiv:after{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border:3px solid var(--sock-rosa);border-radius:50%;animation:socken-puls 1.6s ease-out infinite}@keyframes socken-puls{0%{transform:scale(1);opacity:.9}to{transform:scale(2.4);opacity:0}}.is-bewegt .socken-show__texte{position:absolute;z-index:6;left:max(1.5rem,5vw);bottom:11%;width:min(34vw,30rem);height:9.5rem;display:block}.is-bewegt .socken-show__text{position:absolute;inset:auto 0 0 0;opacity:0;transform:translate3d(0,18px,0);transition:opacity .35s ease,transform .35s ease;pointer-events:none}.is-bewegt .socken-show__text.is-aktiv{opacity:1;transform:translateZ(0)}.is-bewegt .socken-show__schluss{position:absolute;z-index:6;left:max(1.5rem,5vw);bottom:11%;width:min(36vw,32rem);opacity:0;visibility:hidden;transform:translate3d(0,18px,0);transition:opacity .35s ease,transform .35s ease,visibility 0s linear .35s}.is-bewegt[data-schluss] .socken-show__schluss{opacity:1;visibility:visible;transform:translateZ(0);transition:opacity .35s ease,transform .35s ease,visibility 0s}@media(max-width:46.8rem){.socken-show.is-bewegt{height:320vh;height:320svh}.is-bewegt .socken-show__kopf{top:4%;left:5vw;right:5vw;width:auto;text-align:center}.is-bewegt .socken-show__titel{font-size:clamp(1.9rem,9vw,2.6rem)}.is-bewegt .socken-show__eyebrow{margin-bottom:.5rem}.is-bewegt .socken-show__bund{top:47%;font-size:clamp(1.4rem,7vw,2.2rem)}.is-bewegt .socken-show__motiv{top:48%;left:50%;height:46%}.socken-show__motiv{height:min(60vh,30rem)}.socken-show__schwein{width:52%;right:-30%;top:-2%}.socken-show__banderole{width:76%;left:-22%;bottom:-4%}.socken-show__preis{right:-28%;bottom:40%}.is-bewegt .socken-show__schwein{width:62%;right:-50%;top:0}.is-bewegt .socken-show__banderole{width:78%;left:-56%;bottom:0}.is-bewegt .socken-show__preis{right:-50%;bottom:38%}.is-bewegt .socken-show__texte,.is-bewegt .socken-show__schluss{left:5vw;right:5vw;bottom:4%;width:auto}.is-bewegt .socken-show__texte{height:8.5rem}.is-bewegt .socken-show__schluss{text-align:center}.is-bewegt .socken-show__fakten{justify-content:center}}@media(min-width:46.8rem)and (max-height:42rem){.is-bewegt .socken-show__motiv{height:68%}.is-bewegt .socken-show__titel{font-size:clamp(1.9rem,6vh,3.2rem)}}@media(prefers-reduced-motion:reduce){.is-bewegt .socken-show__punkt.is-aktiv:after{animation:none}.is-bewegt .socken-show__punkt,.is-bewegt .socken-show__text,.is-bewegt .socken-show__schluss{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/19/assets/socken-show.css.map */