.oo-hero{--oo-fig-w: clamp(340px, 36vw, 520px);--oo-fig-right: clamp(0px, 4vw, 70px);display:block}.oo-hero__inner{padding-top:16px}.oo-hero__card{position:relative;border-radius:var(--oo-radius-hero);background:var(--oo-frost);box-shadow:0 30px 60px -40px rgb(var(--oo-shadow-rgb) / 55%),inset 0 0 0 1px #ffffffb3}.oo-hero__sky{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;border-radius:inherit;pointer-events:none}.oo-hero__layer{position:absolute;top:-60px;right:0;bottom:-60px;left:0}.oo-hero__layer--b{top:-110px;right:-40px;bottom:-110px;left:-40px}.oo-hero__sway{position:absolute;top:0;right:0;bottom:0;left:0}.oo-hero__snow{position:absolute;top:-180px;right:0;bottom:0;left:0}.oo-hero__snow--b{top:-340px;right:0;bottom:0;left:0;opacity:.85}.oo-hero__petals{display:block;width:100%;height:100%}.oo-hero__glow{position:absolute;top:-30%;right:8%;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,#ffffffbf,#fff0 65%)}.oo-hero__content{position:relative;z-index:2;display:flex;flex-direction:column;gap:18px;padding:32px 22px 24px}.oo-hero__accent{display:block;color:var(--oo-pink-ink)}.oo-hero__lead{max-width:460px}.oo-hero__search{display:flex;align-items:center;gap:8px;max-width:480px;padding:6px 6px 6px 16px;border:1px solid var(--oo-line);border-radius:var(--oo-radius-pill);background:#ffffffd9;box-shadow:0 14px 30px -20px rgb(var(--oo-shadow-rgb) / 60%)}.oo-hero__search-icon{flex:none;color:var(--oo-muted)}.oo-hero__input{flex:1 1 auto;min-width:0;height:44px;padding:0;border:0;background:transparent;font-size:1rem;color:var(--oo-ink);text-overflow:ellipsis}.oo-hero__input::placeholder{color:var(--oo-muted);opacity:1}@supports selector(:has(*)){.oo-hero__input:focus-visible{outline:none}.oo-hero__search:has(.oo-hero__input:focus-visible){outline:3px solid var(--oo-teal);outline-offset:3px}}.oo-hero__submit{flex:none;min-height:44px;padding:0 20px}.oo-hero__popular{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.oo-hero__popular-label{margin-right:2px;font-size:.875rem;color:var(--oo-ink-2)}.oo-hero__chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}.oo-hero__chip-missing{border-style:dashed;border-color:var(--oo-ink-2)}.oo-hero__snow-toggle{display:none;align-items:center;align-self:flex-start;gap:8px;min-height:44px;padding:0 14px 0 4px;border:0;border-radius:var(--oo-radius-pill);background:transparent;color:var(--oo-ink-2);font-size:.8125rem;font-weight:700}@media(prefers-reduced-motion:no-preference){.js.oo-motion .oo-hero__snow-toggle{display:inline-flex}.js.oo-motion .oo-hero:not(:defined) .oo-hero__snow-toggle{visibility:hidden}}@media(prefers-reduced-motion:reduce){.js.oo-motion .oo-hero.is-offer-auto .oo-hero__snow-toggle{display:inline-flex}}.oo-hero__snow-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#ffffffb3;color:var(--oo-ink)}.oo-hero__snow-toggle:hover .oo-hero__snow-icon{background:var(--oo-white)}.oo-hero__snow-toggle[data-paused] .oo-hero__snow-icon--pause,.oo-hero__snow-toggle:not([data-paused]) .oo-hero__snow-icon--play{display:none}.oo-hero__figure,.oo-hero__blossom,.oo-hero__chip,.oo-hero__torii{display:none}.oo-hero__offer{position:relative;z-index:2;display:grid;grid-template-columns:84px minmax(0,1fr);align-items:center;gap:14px;margin:0 14px 14px;padding:8px 10px 8px 8px;border:1px solid var(--oo-line);border-radius:22px;background:var(--oo-surface-strong);box-shadow:0 16px 34px -22px rgb(var(--oo-shadow-rgb) / 70%)}.oo-hero__figure--offers{position:relative;display:block;aspect-ratio:4 / 5;overflow:hidden;border-radius:var(--oo-radius-small);background:var(--oo-white)}.oo-hero__figure--offers .oo-hero__float,.oo-hero__figure--offers .oo-hero__tilt{position:absolute;top:0;right:0;bottom:0;left:0}.oo-hero__slide{position:absolute;top:0;right:0;bottom:0;left:0;display:none;margin:0}.oo-hero__slide.is-active,.oo-hero__slide.is-leaving{display:block}.oo-hero__photo{width:100%;height:100%;object-fit:cover}.oo-hero__offer-chips{min-width:0}.oo-hero__offer .oo-hero__chip{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 10px}.oo-hero__offer .oo-hero__chip-link{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}@media(max-width:860px){.oo-hero__card:has(.oo-hero__offer) .oo-hero__content{gap:14px;padding-top:26px;padding-bottom:14px}.oo-hero__popular{flex-wrap:nowrap}.oo-hero__chips{flex-wrap:nowrap;min-width:0;margin-inline-end:-22px;padding:2px 32px 2px 2px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-mask-image:linear-gradient(to left,transparent,var(--oo-ink) 28px);mask-image:linear-gradient(to left,transparent,var(--oo-ink) 28px)}.oo-hero__chips .oo-chip{white-space:nowrap}}@media(min-width:600px){.oo-hero__content{gap:20px;padding:clamp(32px,4.4vw,60px) clamp(22px,4vw,60px) clamp(28px,4vw,44px)}.oo-hero__search{padding-left:20px}.oo-hero__submit{padding:0 22px}}@media(min-width:861px){.oo-hero__inner{padding-top:clamp(48px,7vw,110px)}.oo-hero:has(.oo-hero__offer) .oo-hero__inner{padding-top:clamp(40px,3.5vw,52px)}.oo-hero__card{min-height:440px}.oo-hero__snow-toggle{position:absolute;bottom:6px;left:calc(clamp(22px,4vw,60px) - 4px)}.oo-hero--klassisch .oo-hero__content{max-width:min(560px,calc(100% - var(--oo-fig-w) - var(--oo-fig-right) + 60px));padding-bottom:clamp(52px,5vw,64px)}.oo-hero--klassisch .oo-hero__offer{display:contents}.oo-hero--klassisch .oo-hero__figure{position:absolute;right:var(--oo-fig-right);bottom:0;z-index:1;display:block;width:var(--oo-fig-w);height:calc(var(--oo-fig-w) * 1.2);overflow:visible;border-radius:0;background:none;pointer-events:none;clip-path:inset(-200px -200px 0)}.oo-hero--klassisch .oo-hero__float{position:absolute;top:0;right:0;bottom:0;left:0}.oo-hero--klassisch .oo-hero__tilt{position:absolute;top:0;left:0;width:100%}.oo-hero__img{width:100%;height:auto;filter:drop-shadow(0 30px 40px rgb(var(--oo-shadow-rgb) / 25%))}.oo-hero--klassisch .oo-hero__figure--offers .oo-hero__tilt{inset:2% auto auto 8%;width:84%;aspect-ratio:4 / 5}.oo-hero--klassisch .oo-hero__slide{rotate:-2.5deg}.oo-hero--klassisch .oo-hero__photo{border:6px solid var(--oo-white);border-radius:var(--oo-radius-card);background:var(--oo-white);box-shadow:var(--oo-shadow-lift)}.oo-hero__blossom{position:absolute;top:-34px;right:clamp(380px,33vw,480px);z-index:3;display:block;overflow:visible;transform:rotate(-8deg)}.oo-hero__blossom path{fill:var(--oo-pink);stroke:var(--oo-white);stroke-width:1.2}.oo-hero__blossom circle{fill:#f6d27a}.oo-hero--klassisch .oo-hero__chip,.oo-hero--maskottchen .oo-hero__card>.oo-hero__chip{position:absolute;right:clamp(16px,2vw,30px);bottom:24px;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 14px;width:max-content;max-width:min(380px,calc(var(--oo-fig-w) + var(--oo-fig-right) - 16px));padding:10px 10px 10px 18px;border:1px solid var(--oo-line);border-radius:22px;background:var(--oo-surface-strong);box-shadow:0 16px 34px -22px rgb(var(--oo-shadow-rgb) / 70%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.oo-hero--klassisch .oo-hero__offer .oo-hero__chip-link{display:inline;overflow:visible;-webkit-line-clamp:none;line-clamp:none}}.oo-hero__chip[data-oo-offer-chip]:not(.is-active){display:none}.oo-hero__chip-text{display:flex;flex-direction:column;grid-area:1 / 1;gap:2px;min-width:0}.oo-hero__chip-meta{font-size:.8125rem;line-height:1.4;color:var(--oo-ink-2)}.oo-hero__chip-link{font-size:.9375rem;font-weight:800;line-height:1.3;text-decoration:none}.oo-hero__chip-link:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;border-radius:inherit}.oo-hero__chip:hover .oo-hero__chip-link{text-decoration:underline}.oo-hero__chip-link:focus-visible{outline:none}.oo-hero__chip-link:focus-visible:after{outline:3px solid var(--oo-teal);outline-offset:3px}.oo-hero__chip .oo-price,.oo-hero__chip .oo-price__row{display:contents}.oo-hero__chip .oo-price__current{grid-area:1 / 2;justify-self:end;padding:9px 14px;border-radius:var(--oo-radius-small);background:var(--oo-teal);color:var(--oo-white);font-size:.9375rem;white-space:nowrap}.oo-hero__chip .oo-price__ref,.oo-hero__chip .oo-price__unit,.oo-hero__chip .oo-price__note{grid-column:1 / -1;color:var(--oo-ink-2)}.oo-hero--maskottchen{--oo-masc-bust-w: clamp(150px, 42vw, 270px);--oo-masc-bust-top: clamp(20px, 5vw, 34px);--oo-masc-w: calc(clamp(330px, 34vw, 470px) * var(--oo-masc-scale, 1));--oo-masc-right: clamp(8px, 3vw, 48px);--oo-masc-top: clamp(28px, 3vw, 44px)}.oo-hero__mascot{position:absolute;top:calc(-1 * var(--oo-masc-bust-top));right:0;z-index:1;width:var(--oo-masc-bust-w);aspect-ratio:480 / 378;pointer-events:none}.oo-hero__mascot-move,.oo-hero__mascot-pic{display:block;width:100%;height:100%}.oo-hero__mascot-img{display:block;width:100%;height:100%;object-fit:contain}.oo-hero__mascot-img--zuschnitt{object-fit:cover;object-position:60% 0;-webkit-mask-image:linear-gradient(to top,transparent,var(--oo-ink) 30%);mask-image:linear-gradient(to top,transparent,var(--oo-ink) 30%)}.oo-hero--maskottchen-mobil-aus .oo-hero__mascot{display:none}@media(max-width:860px){.oo-hero--maskottchen:not(.oo-hero--maskottchen-mobil-aus) .oo-hero__inner{padding-top:calc(16px + var(--oo-masc-bust-top))}.oo-hero--maskottchen:not(.oo-hero--maskottchen-mobil-aus) .oo-hero__content>.oo-eyebrow{max-width:calc(100% - var(--oo-masc-bust-w) + 12px);min-height:calc(var(--oo-masc-bust-w) * .79 - var(--oo-masc-bust-top) - 40px)}}@media(max-width:599px){.oo-hero--maskottchen .oo-hero__title{font-size:clamp(1.75rem,8.6vw,2.25rem)}}@media(min-width:600px)and (max-width:860px){.oo-hero--maskottchen:not(.oo-hero--maskottchen-mobil-aus) :is(.oo-hero__title,.oo-hero__lead){max-width:calc(100% - var(--oo-masc-bust-w) + 40px)}.oo-hero--maskottchen:not(.oo-hero--maskottchen-mobil-aus) .oo-hero__content>.oo-eyebrow{min-height:0}}@media(min-width:861px){.oo-hero.oo-hero--maskottchen .oo-hero__inner{padding-top:calc(var(--oo-masc-top) + 16px)}.oo-hero--maskottchen .oo-hero__card{min-height:calc(var(--oo-masc-w) * 1.338 * .94 - var(--oo-masc-top))}.oo-hero--maskottchen .oo-hero__content{max-width:min(680px,calc(100% - var(--oo-masc-w) - var(--oo-masc-right)));padding-bottom:clamp(56px,5vw,68px)}.oo-hero--maskottchen .oo-hero__mascot{top:auto;right:var(--oo-masc-right);bottom:0;display:block;width:var(--oo-masc-w);height:calc(var(--oo-masc-w) * 1.338 * .94);aspect-ratio:auto;clip-path:inset(-80px -80px 0)}.oo-hero--maskottchen .oo-hero__mascot-move{position:absolute;inset:0 0 auto;height:auto}.oo-hero--maskottchen .oo-hero__mascot-pic,.oo-hero--maskottchen .oo-hero__mascot-img{height:auto}.oo-hero--maskottchen .oo-hero__mascot-img--zuschnitt{object-fit:contain;-webkit-mask-image:none;mask-image:none}.oo-hero--maskottchen .oo-hero__offer{position:absolute;bottom:clamp(18px,2vw,28px);left:calc(100% - var(--oo-masc-right) - var(--oo-masc-w) - 20px);z-index:3;grid-template-columns:92px minmax(0,1fr);width:min(340px,calc(var(--oo-masc-w) * .78 + 60px));margin:0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}}.oo-hero--nacht .oo-hero__card{--oo-ink: #f6f3ff;--oo-ink-2: #cfc9e6;--oo-muted: #a9a3c8;--oo-teal-ink: #cbb2ff;--oo-line: rgb(255 255 255 / 16%);--oo-surface-strong: rgb(22 26 48 / 86%);--oo-shadow-rgb: 6 8 24;--oo-night-pink: #ff6cbf;--oo-night-teal: #45d8d2;color:var(--oo-ink);background:radial-gradient(120% 90% at 100% 100%,#e85bb53d,#e85bb500 55%),radial-gradient(80% 70% at 0% 0%,#8652d933,#8652d900 60%),linear-gradient(160deg,#151b35,#0f1326 55%,#1a1729);box-shadow:0 40px 70px -46px #0e1226d9,inset 0 0 0 1px #ffffff12}.oo-hero--nacht .oo-hero__layer{opacity:.8}.oo-hero--nacht .oo-hero__glow{top:-18%;right:2%;background:radial-gradient(circle,#45d8d233,#45d8d200 62%)}.oo-hero--nacht .oo-eyebrow{display:flex;align-items:center;gap:14px;color:var(--oo-ink);font-size:.8125rem;letter-spacing:.28em;text-transform:uppercase}.oo-hero--nacht .oo-eyebrow:before{content:"";flex:none;width:36px;height:2px;border-radius:2px;background:var(--oo-night-pink)}@media(max-width:599px){.oo-hero--nacht .oo-eyebrow{gap:10px;font-size:.75rem;letter-spacing:.18em}.oo-hero--maskottchen.oo-hero--nacht .oo-eyebrow:before{display:none}}.oo-hero--nacht .oo-hero__accent{color:var(--oo-night-pink)}@supports (background-clip: text){.oo-hero--nacht .oo-hero__accent{margin-block:-.12em -.24em;padding-block:.12em .24em;background:linear-gradient(95deg,#ff7cc6,#ff5fb4 45%,#c79bff);background-clip:text;-webkit-text-fill-color:transparent}}.oo-hero--nacht .oo-hero__search{border-color:#ffffff3d;background:#ffffff0f;box-shadow:0 18px 36px -24px #000000b3}.oo-hero--nacht .oo-hero__search:has(.oo-hero__input:focus-visible){outline-color:var(--oo-night-teal)}.oo-hero--nacht .oo-chip{border-color:#fff3;background:#ffffff0d;color:var(--oo-ink)}.oo-hero--nacht .oo-chip:hover{border-color:#ff6cbf99;background:#ff6cbf1f;color:var(--oo-white)}.oo-hero--nacht :is(.oo-chip,.oo-hero__submit,.oo-hero__snow-toggle):focus-visible,.oo-hero--nacht .oo-hero__chip-link:focus-visible:after{outline-color:var(--oo-night-teal)}.oo-hero--nacht .oo-hero__snow-icon{background:#ffffff1a;color:var(--oo-ink)}.oo-hero--nacht .oo-hero__snow-toggle:hover .oo-hero__snow-icon{background:#ffffff2e}.oo-hero--nacht .oo-hero__offer,.oo-hero--nacht .oo-hero__card>.oo-hero__chip{border-color:#ffffff24}@media(min-width:861px){.oo-hero--nacht .oo-hero__torii{position:absolute;right:calc(var(--oo-masc-right) - var(--oo-masc-w) * .12);bottom:0;display:block;width:calc(var(--oo-masc-w) * 1.24);height:auto;overflow:visible}}@media(prefers-reduced-motion:no-preference){.oo-motion .oo-hero:defined .oo-hero__snow--a{animation:oo-hero-fall-a 10s linear infinite}.oo-motion .oo-hero:defined .oo-hero__snow--b{animation:oo-hero-fall-b 16s linear infinite}.oo-motion .oo-hero:defined .oo-hero__sway{animation:oo-hero-sway 7s ease-in-out infinite alternate}.oo-motion .oo-hero.is-offscreen :is(.oo-hero__snow,.oo-hero__sway),.oo-motion .oo-hero.is-snow-paused :is(.oo-hero__snow,.oo-hero__sway){animation-play-state:paused}.oo-motion .oo-hero__blossom{animation:oo-hero-bob 1.6s ease-in-out .4s 1 both}}.oo-motion .oo-hero.is-offer-motion .oo-hero__slide{transform:translateZ(0);transition:opacity 0s,transform .6s cubic-bezier(.65,0,.35,1)}.oo-motion .oo-hero.is-offer-motion .oo-hero__slide.is-active{z-index:1}.oo-motion .oo-hero.is-offer-motion .oo-hero__slide.is-entering{opacity:1;transform:translate3d(100%,0,0)}.oo-motion .oo-hero.is-offer-motion .oo-hero__slide.is-leaving{opacity:1;transform:translate3d(-100%,0,0);transition:opacity 0s,transform .6s cubic-bezier(.65,0,.35,1)}.oo-motion .oo-hero.is-offer-motion .oo-hero__chip[data-oo-offer-chip].is-active{animation:oo-hero-chip-in .5s ease .15s both}@media(min-width:861px){.oo-motion .oo-hero--klassisch.is-offer-motion .oo-hero__slide{transform:perspective(1100px) translateZ(0) rotateY(0) scale(1);transition:opacity .45s ease,transform .75s cubic-bezier(.2,.8,.2,1)}.oo-motion .oo-hero--klassisch.is-offer-motion .oo-hero__slide.is-entering{opacity:0;transform:perspective(1100px) translate3d(200px,0,-120px) rotateY(-45deg) scale(.9)}.oo-motion .oo-hero--klassisch.is-offer-motion .oo-hero__slide.is-leaving{opacity:0;transform:perspective(1100px) translate3d(-200px,0,-120px) rotateY(45deg) scale(.9);transition:opacity .35s ease-in .4s,transform .75s cubic-bezier(.4,0,.6,1)}}@media(prefers-reduced-motion:reduce){.oo-motion .oo-hero.is-offer-motion .oo-hero__slide{transition-duration:.45s,.75s!important}.oo-motion .oo-hero.is-offer-motion .oo-hero__slide.is-leaving{transition-duration:.35s,.75s!important}.oo-motion .oo-hero.is-offer-motion .oo-hero__chip[data-oo-offer-chip].is-active{animation-duration:.5s!important}}@supports (animation-timeline: view()){@media(prefers-reduced-motion:no-preference){.oo-motion .oo-hero{view-timeline:--oo-hero block}.oo-motion .oo-hero :is(.oo-hero__layer,.oo-hero__float){animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--oo-hero;animation-range:cover 0% cover 100%}.oo-motion .oo-hero .oo-hero__layer--a{animation-name:oo-hero-par-a}.oo-motion .oo-hero .oo-hero__layer--b{animation-name:oo-hero-par-b}@media(min-width:861px){.oo-motion .oo-hero--klassisch .oo-hero__float{animation-name:oo-hero-par-fig}}}}@supports not (animation-timeline: view()){@media(prefers-reduced-motion:no-preference){.oo-motion .oo-hero .oo-hero__layer--a{transform:translate3d(0,calc((var(--oo-scroll, .5) - .5) * 80px),0)}.oo-motion .oo-hero .oo-hero__layer--b{transform:translate3d(0,calc((var(--oo-scroll, .5) - .5) * 180px),0)}@media(min-width:861px){.oo-motion .oo-hero--klassisch .oo-hero__float{transform:translate3d(0,calc((.5 - var(--oo-scroll, .5)) * 120px),0)}}}}@media(hover:hover)and (pointer:fine)and (prefers-reduced-motion:no-preference){.oo-motion .oo-hero--klassisch .oo-hero__tilt{transform:perspective(1200px) rotateY(calc(var(--oo-tilt-x, 0) * -10deg)) rotateX(calc(var(--oo-tilt-y, 0) * 6deg)) translate3d(calc(var(--oo-tilt-x, 0) * -16px),calc(var(--oo-tilt-y, 0) * -10px),0);transition:transform .5s ease-out}}@media(prefers-reduced-motion:no-preference){.oo-motion .oo-hero--maskottchen-bewegt .oo-hero__mascot-move{animation:oo-masc-ankommen 1.1s var(--oo-ease) both}.oo-motion .oo-hero--maskottchen-bewegt :is(.oo-hero__glow,.oo-hero__torii){animation:oo-masc-licht 1.4s ease-out .15s both}.oo-motion .oo-hero--maskottchen-bewegt:defined .oo-hero__mascot-pic{animation:oo-masc-schweben 6.5s ease-in-out 1.2s infinite alternate}.oo-motion .oo-hero--maskottchen-bewegt.is-offscreen .oo-hero__mascot-pic,.oo-motion .oo-hero--maskottchen-bewegt.is-snow-paused .oo-hero__mascot-pic{animation-play-state:paused}.oo-motion .oo-hero--maskottchen-bewegt .oo-hero__mascot-img{transform-origin:58% 100%;transition:transform .6s var(--oo-ease)}.oo-motion .oo-hero--maskottchen-bewegt:has(.oo-hero__search:focus-within) .oo-hero__mascot-img{transform:translate3d(-6px,-3px,0) rotate(-1.2deg)}}@keyframes oo-hero-fall-a{to{transform:translate3d(0,180px,0)}}@keyframes oo-hero-fall-b{to{transform:translate3d(0,340px,0)}}@keyframes oo-hero-sway{0%{transform:translate3d(-18px,0,0)}to{transform:translate3d(18px,0,0)}}@keyframes oo-hero-chip-in{0%{opacity:0;transform:translate3d(24px,0,0)}}@keyframes oo-hero-bob{0%,to{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-10px) rotate(6deg)}}@keyframes oo-hero-par-a{0%{transform:translate3d(0,-40px,0)}to{transform:translate3d(0,40px,0)}}@keyframes oo-hero-par-b{0%{transform:translate3d(0,-90px,0)}to{transform:translate3d(0,90px,0)}}@keyframes oo-hero-par-fig{0%{transform:translate3d(0,60px,0)}to{transform:translate3d(0,-60px,0)}}@keyframes oo-masc-ankommen{0%{transform:translate3d(0,22px,0)}}@keyframes oo-masc-licht{0%{opacity:0}}@keyframes oo-masc-schweben{to{transform:translate3d(0,-6px,0)}}
/*# sourceMappingURL=/cdn/shop/t/47/assets/oo-hero.css.map */