
:root{--bg:#E9E7EF}
html,body{margin:0;background:#FFFFFF}
body{-webkit-font-smoothing:antialiased}
.view{transform-origin:0 0;margin:0 auto}
#vd{width:2052px}#vm{width:390px}
.pg{position:relative}
main[hidden]{display:none!important}
#vd main [style*="position:sticky"]{top:90px!important}
[data-go],[data-menu],[data-burger]{cursor:pointer}
.stick{position:sticky;top:0;z-index:60;background:#FFF}
/* ----- Desktop Hover ----- */
#vd .hv-u{text-decoration:underline transparent;text-underline-offset:6px;text-decoration-thickness:1px;transition:text-decoration-color .2s}
#vd .hv-u:hover,#vd .nav.open{text-decoration-color:currentColor}
#vd .card .ph img{transition:opacity .25s ease,transform .5s ease}
#vd .card .hv-alt{position:absolute;inset:0;width:100%;height:100%;opacity:0}
#vd .card.has-alt:hover .hv-main{opacity:0}
#vd .card.has-alt:hover .hv-alt{opacity:1}
#vd .card.hv-zoom:hover .hv-main{transform:scale(1.04)}
#vd .card .hv-pill{position:absolute;left:40px;right:40px;bottom:38px;z-index:3;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;pointer-events:none}
#vd .card .hv-pill .btn{width:100%}
#vd .card:hover .hv-pill{opacity:1;transform:none;pointer-events:auto}
#vd .card:has(.hv-pill):hover .info{opacity:0}
#vd .card .info{transition:opacity .2s}
#vd .card[data-alt="dark"]:hover .heart path{stroke:#FFF}
#vd .card[data-alt="light"]:hover .heart path{stroke:#202020}
.btn{transition:background-color .2s,box-shadow .2s,color .2s}
#vd .btn:not(.hv-w):not([style*="border:0"]):not([style*="border: 0"]):hover{background:#202020!important;border-color:#202020!important;color:#FFF!important}
#vd .btn.hv-w.hv-w.hv-w.hv-w:hover{background:#FFF!important;color:#1F1B3B!important;box-shadow:inset 0 0 0 999px rgba(31,27,59,.08)!important}
#vd .hv-tab{transition:color .2s;cursor:pointer}
#vd .hv-tab:hover{color:#202020!important}
#vd .hv-circ{transition:background-color .2s;cursor:pointer}
#vd .hv-circ:hover{background:#202020!important}
#vd .hv-circ:hover svg{filter:invert(1) brightness(2)}
#vd .hv-ig{position:relative;overflow:hidden}
#vd .hv-ig::after{content:"";position:absolute;inset:0;background:rgba(32,32,32,0);transition:background .2s;pointer-events:none}
#vd .hv-ig:hover::after{background:rgba(32,32,32,.3)}
/* Mega-Menü */
.mm{position:absolute;left:0;right:0;top:100%;z-index:70;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility 0s .2s;box-shadow:0 30px 40px -20px rgba(0,0,0,.25)}
.mm.open{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s}
.mm .bl{cursor:pointer}
.mm .bl:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.mm img{transition:transform .5s ease}
.mm .tile:hover img{transform:scale(1.04)}
.dim{position:fixed;inset:0;background:rgba(32,32,32,.35);z-index:55;opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
.dim.open{opacity:1;visibility:visible;transition:opacity .2s}
/* Auswahl Produkt */
#vd .szsel{cursor:pointer}
/* ----- Mobile ----- */
.mp-gal{position:relative}
.mg{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.mg::-webkit-scrollbar{display:none}
.mg-i{flex:0 0 100%;height:487px;scroll-snap-align:start;background:#F4F4F4}
.mg-i img{width:100%;height:100%;display:block}
.mg-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:6px}
.mg-dots i{width:6px;height:6px;border-radius:50%;background:rgba(32,32,32,.25)}
.mg-dots i.on{background:#202020}
.sw{width:36px;height:36px;border-radius:50%;background:var(--c);border:0;outline:1px solid #D0D0D0;outline-offset:3px;cursor:pointer;padding:0}
.sw.on{outline-color:#202020}
.szb{font-family:'Geist Mono',monospace;font-size:14px;min-width:52px;height:44px;padding:0 12px;border-radius:999px;border:1px solid #D0D0D0;background:#FFF;color:#202020;cursor:pointer}
.szb.on{background:#202020;color:#FFF;border-color:#202020}
.szb.off{border-style:dashed;color:#8A8A8A;text-decoration:line-through;cursor:not-allowed}
.acc{border-top:1px solid #D0D0D0}
.acc summary,.md-d summary{list-style:none;display:flex;justify-content:space-between;align-items:center;height:56px;cursor:pointer}
.acc summary::-webkit-details-marker,.md-d summary::-webkit-details-marker{display:none}
.acc-i::before{content:"+";font-family:'Geist Mono',monospace;font-size:18px}
details[open]>summary .acc-i::before{content:"−"}
.md{position:fixed;inset:0;z-index:90;background:#FFF;overflow-y:auto;font-family:Geist,sans-serif;color:#202020}
.md-h{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid #D0D0D0;position:sticky;top:0;background:#FFF}
.md-x{border:0;background:none;font-size:20px;cursor:pointer;color:#202020;padding:8px}
.md-b{padding:10px 20px 40px}
.md-t{display:flex;justify-content:space-between;align-items:center;height:56px;border-bottom:1px solid #D0D0D0;text-transform:uppercase;font-family:'Geist Mono',monospace;color:#202020;text-decoration:none}
.md-l{display:block;padding:6px 0;color:#202020;text-decoration:none}
.md-tile{display:flex;flex-direction:column;gap:8px;color:#202020;text-decoration:none}
.md-tile img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:#1F1B3B;color:#FFF;font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:12px 18px;border-radius:999px;opacity:0;transition:opacity .25s,transform .25s;z-index:100;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
