/* Niklas Hartweg – Shop (ergänzt main.css und partner.css) */
body.shop-page{background:var(--night)}
.smain{position:relative;z-index:2;background:var(--snow)}
/* Hero */
.s-hero{position:relative;height:100vh;height:100dvh;min-height:560px;overflow:hidden;background:var(--night);color:#fff;display:flex;align-items:flex-end}
.sh-media{position:absolute;inset:0;will-change:transform}
.sh-media video{width:100%;height:100%;object-fit:cover}
.sh-media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,20,38,.9) 0%,rgba(12,20,38,.25) 55%,rgba(12,20,38,.45) 100%)}
.sh-in{position:relative;z-index:2;padding-bottom:clamp(110px,14vh,170px);will-change:transform,opacity}
.sh-in .eyebrow{color:var(--ice)}
.sh-title{font-size:clamp(84px,17vw,280px);margin:14px 0 0;display:grid;line-height:.82}
.sh-title em{font-style:normal;color:transparent;-webkit-text-stroke:2px var(--ice)}
.sh-line{display:block;overflow:hidden;padding-bottom:.04em}
.sh-line>*{display:inline-block;transform:translateY(105%);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.sh-line:nth-child(2)>*{transition-delay:.12s}
.ready .sh-line>*{transform:none}
.sh-up{opacity:0;transform:translateY(16px);transition:opacity .8s .4s,transform .9s .4s cubic-bezier(.2,.8,.2,1)}
.ready .sh-up{opacity:1;transform:none}
.sh-lead{max-width:40ch;font-size:clamp(17px,1.5vw,20px);color:#dfe8f4;margin:20px 0 26px}
.sh-marquee{position:absolute;left:0;right:0;bottom:0;z-index:2;overflow:hidden;border-top:1px solid var(--line-dark);background:rgba(12,20,38,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.shm-track{display:flex;gap:28px;width:max-content;padding:14px 0;animation:marq 26s linear infinite;font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 112;font-size:20px;letter-spacing:.04em;color:var(--ice)}
.shm-track i{font-style:normal;color:#fff;opacity:.5}
@keyframes marq{to{transform:translateX(-50%)}}
/* Produkte */
.products{padding:clamp(90px,11vw,150px) 0 clamp(70px,9vw,120px)}
.pr-head{opacity:0;transform:translateY(30px);transition:opacity .8s,transform 1s cubic-bezier(.2,.8,.2,1)}
.pr-head.in{opacity:1;transform:none}
.pr-head .eyebrow{color:var(--navy)}
.pr-title{margin-top:14px;font-size:clamp(48px,8vw,120px);color:var(--navy)}
.pr-title em{font-style:normal;color:#8fa9c8}
.pgrid{margin-top:clamp(36px,5vw,60px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);perspective:1400px}
.pcard2{position:relative;background:#fff;border-radius:26px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.9,.3,1.2),box-shadow .4s,opacity .8s calc(var(--i)*.12s),translate 1s calc(var(--i)*.12s) cubic-bezier(.2,.9,.3,1.1);
  opacity:0;translate:0 60px}
.pcard2.in{opacity:1;translate:0 0}
.pcard2:hover{box-shadow:inset 0 0 0 1px var(--ice),0 40px 70px -40px rgba(12,20,38,.55)}
.pc-media{position:relative;aspect-ratio:4/4.4;overflow:hidden;background:var(--night)}
.pc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1),opacity .6s}
.pc-media img.alt{opacity:0;transform:scale(1.08)}
.pcard2:hover .pc-media img:not(.alt){transform:scale(1.06);opacity:0}
.pcard2:hover .pc-media img.alt{opacity:1;transform:scale(1)}
.pc-tag2{position:absolute;left:14px;top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;background:var(--ice);color:var(--navy);border-radius:999px;padding:5px 10px}
.pc-no{position:absolute;right:16px;bottom:10px;font-family:var(--display);font-weight:900;font-size:64px;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.6);font-variation-settings:"wdth" 112}
.pc-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.pc-body h3{margin:0;font-family:var(--display);font-weight:900;text-transform:uppercase;font-variation-settings:"wdth" 108;font-size:clamp(22px,2vw,28px);color:var(--navy);line-height:1}
.pc-body p{margin:0;color:var(--mute);font-size:15px;line-height:1.45}
.pc-foot{margin-top:auto;padding-top:14px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.pc-price{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--navy)}
.pc-buy{border:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font:500 14px var(--body);padding:12px 18px;border-radius:999px;background:var(--navy);color:#fff;text-decoration:none;transition:transform .3s cubic-bezier(.2,.9,.3,1.4),background .3s}
.pc-buy:hover{transform:translateY(-2px) scale(1.03)}
.pc-buy.is-soon{background:var(--snow);color:var(--navy);box-shadow:inset 0 0 0 1px var(--line)}
.pr-note{margin:22px 0 0;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--mute);opacity:0;transition:opacity .8s .3s}
.pr-note.in{opacity:1}
/* So geht's */
.how{background:var(--navy);color:#fff;padding:clamp(80px,10vw,130px) 0}
.steps{margin-top:clamp(26px,4vw,40px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:s}
.step{border-top:1px solid rgba(192,212,232,.3);padding-top:20px;opacity:0;transform:translateY(30px);transition:opacity .7s calc(var(--n,0)*.12s),transform .9s calc(var(--n,0)*.12s) cubic-bezier(.2,.9,.3,1.2)}
.step:nth-child(2){--n:1}.step:nth-child(3){--n:2}
.step.in{opacity:1;transform:none}
.step b{font-family:var(--display);font-weight:900;font-size:clamp(56px,7vw,100px);line-height:.85;color:transparent;-webkit-text-stroke:1.5px var(--ice);font-variation-settings:"wdth" 112;display:block}
.step h3{margin:14px 0 6px;font-family:var(--display);font-weight:900;text-transform:uppercase;font-variation-settings:"wdth" 110;font-size:clamp(26px,2.6vw,38px)}
.step p{margin:0;color:#dbe5f2;max-width:30ch;line-height:1.5}
/* Fans */
.fans{padding:clamp(80px,10vw,140px) 0;overflow:hidden}
.fans-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,.8fr);gap:clamp(16px,3vw,40px);align-items:center}
.fans-grid figure{margin:0;border-radius:24px;overflow:hidden;box-shadow:0 40px 70px -40px rgba(12,20,38,.6);transform:translate3d(0,var(--py,0px),0)}
.fans-grid img{width:100%;height:100%;object-fit:cover;display:block}
.fan-1{aspect-ratio:4/5;rotate:-2deg}
.fan-2{aspect-ratio:3/4;rotate:2.5deg}
.fan-1 img{object-position:50% 40%}
.fans-txt{opacity:0;transform:translateY(30px);transition:opacity .9s,transform 1.1s cubic-bezier(.2,.8,.2,1)}
.fans-txt.in{opacity:1;transform:none}
.fans-txt .eyebrow{color:var(--navy)}
.fans-txt .display{margin:14px 0 16px;font-size:clamp(40px,5.4vw,80px);color:var(--navy)}
.fans-txt .display em{font-style:normal;color:#8fa9c8}
.fans-txt p:last-child{color:var(--mute);font-size:16px;line-height:1.55;margin:0}
/* Toast */
.toast{position:fixed;left:50%;bottom:24px;z-index:900;transform:translate(-50%,30px);opacity:0;pointer-events:none;max-width:min(520px,calc(100vw - 32px));background:var(--navy);color:#fff;border-radius:16px;padding:14px 18px;font-size:15px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);transition:opacity .35s,transform .5s cubic-bezier(.2,.9,.3,1.3)}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:900px){
  .pgrid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .fans-grid{grid-template-columns:1fr 1fr}
  .fans-txt{grid-column:1 / -1;order:-1}
}
@media (prefers-reduced-motion:reduce){ .sh-line>*,.sh-up,.pcard2,.pr-head,.step,.fans-txt{transition:none!important;transform:none!important;opacity:1!important;translate:none!important} .shm-track{animation:none} }

/* ===== Runde 3: Fanbilder statt Video, Laufband endlos, Fan-Wand ===== */
.sh-slides{position:absolute;inset:0}
.sh-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity 1.4s ease,transform 6s linear}
.sh-slides img.on{opacity:1;transform:scale(1)}
.shm-track{display:flex;gap:0;width:max-content;animation:shmRun var(--dur,20s) linear infinite;text-transform:uppercase}
.shm-set{display:flex;align-items:center;flex:none}
.shm-set>*{margin-right:28px}
@keyframes shmRun{from{transform:translateX(0)}to{transform:translateX(var(--shift,-50%))}}
.pr-gift{margin:26px 0 0;display:inline-flex;align-items:center;gap:12px;padding:12px 18px;border-radius:16px;background:var(--navy);color:#fff;font-size:15px;line-height:1.45;max-width:640px;opacity:0;transform:translateY(16px);transition:opacity .8s .2s,transform .9s .2s cubic-bezier(.2,.8,.2,1)}
.pr-gift::before{content:"✦";color:var(--ice);font-size:18px}
.pr-gift.in{opacity:1;transform:none}
.fans-fun{margin:14px 0 0;font-size:14.5px;color:var(--mute)}
.fans-fun b{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);margin-right:6px}
.fanwall{padding:clamp(70px,9vw,120px) 0;overflow:hidden}
.fan-wall{margin-top:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.fw-track{display:flex;gap:18px;width:max-content;animation:fwRun 60s linear infinite;padding:30px 0 70px}
.fan-wall:hover .fw-track{animation-play-state:paused}
.fw-track figure{margin:0;flex:none;width:clamp(220px,24vw,340px);aspect-ratio:4/3;border-radius:18px;overflow:hidden;box-shadow:0 30px 50px -30px rgba(12,20,38,.5);transform:rotate(var(--r,0deg));transition:transform .4s cubic-bezier(.2,.9,.3,1.4)}
.fw-track figure:nth-child(odd){--r:-1.5deg}.fw-track figure:nth-child(even){--r:1.5deg}
.fw-track figure:hover{transform:rotate(0) scale(1.04)}
.fw-track img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes fwRun{to{transform:translateX(calc(-50% - 9px))}}
@media (prefers-reduced-motion:reduce){ .fw-track,.shm-track{animation:none} .sh-slides img{transition:none} }

/* Zwei Produkte, Preis, Versand, Support */
.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:980px}
.pc-price{display:grid;gap:2px}
.pc-price b{font-family:var(--display);font-weight:900;font-size:22px;letter-spacing:0;color:var(--navy);font-variation-settings:"wdth" 108}
.pc-price small{font-size:10px;letter-spacing:.12em;color:var(--mute)}
.pr-ship{margin:24px 0 0;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy)}
.pr-support{margin:14px 0 0;font-size:15px;color:var(--mute)}
.pr-support a,.xmail{color:var(--navy);font-weight:600;text-decoration:none;border-bottom:1px solid currentColor}
@media (max-width:900px){ .pgrid{grid-template-columns:1fr} }

/* Produktblock zentriert */
.products .wrap{display:grid;justify-items:center;text-align:center}
.pr-head{display:grid;justify-items:center}
.pgrid{width:100%;margin-left:auto;margin-right:auto}
.pc-body{text-align:left}
.pr-ship{justify-content:center}
.pr-gift{text-align:left}

/* ===== Handy-QA: Versandzeile sauber zentriert ===== */
@media (max-width:700px){ .pr-ship{display:block;text-align:center;line-height:1.7} .pr-ship span[aria-hidden]{margin-right:8px} }

/* ===== Mütze 360° ===== */
.pc-media.spin{background:linear-gradient(180deg,#f2f5fa,#e2e8f1)}
.pc-media.spin::after{content:"";position:absolute;left:18%;right:18%;bottom:9%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(40,52,82,.32),transparent);filter:blur(6px);pointer-events:none}
.pc-spin{position:absolute;inset:0;cursor:grab;touch-action:pan-y;z-index:1}
.pc-spin:active{cursor:grabbing}
.pc-spin img{position:absolute;inset:4% 4% 2%;width:92%;height:94%;object-fit:contain;opacity:0;transition:opacity .22s ease;user-select:none;-webkit-user-drag:none;pointer-events:none}
.pc-spin img.on{opacity:1;z-index:2}
.pc-spin img.prev{opacity:1;z-index:1;transition:none}
.pcard2:hover .pc-media.spin img{transform:none}
.pc-spin-hint{position:absolute;left:50%;bottom:14px;translate:-50% 0;z-index:2;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:6px 12px;border-radius:999px;transition:opacity .4s;pointer-events:none}
.pcard2.spun .pc-spin-hint{opacity:0}

/* ===== Schal-Laufband ===== */
.sstrip{position:relative;z-index:3;padding:clamp(20px,3vw,40px) 0 0;margin-bottom:calc(-1 * clamp(40px,5vw,70px));overflow:visible;pointer-events:none}
.sstrip .ss-band{overflow:hidden;padding:30px 0 50px}
.ss-band{transform:rotate(-6deg);margin:0 -10vw}
.ss-track{display:flex;gap:clamp(24px,3vw,48px);width:max-content;animation:ssRun 46s linear infinite;align-items:center}
.ss-track img{height:clamp(48px,6vw,88px);width:auto;filter:drop-shadow(0 18px 18px rgba(20,30,60,.22)) drop-shadow(0 4px 4px rgba(20,30,60,.18))}
.ss-track img:nth-child(odd){transform:rotate(1.2deg)}
.ss-track img:nth-child(even){transform:rotate(-1.2deg) translateY(6px)}
@keyframes ssRun{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .ss-track{animation:none} }

/* Mütze: beim Hovern nicht ausblenden */
.pcard2:hover .pc-media.spin img:not(.alt){opacity:0;transform:none}
.pcard2:hover .pc-media.spin .pc-spin img.on,.pcard2:hover .pc-media.spin .pc-spin img.prev{opacity:1}
.pc-media.spin .pc-spin img:not(.on):not(.prev){opacity:0}
.how{position:relative;z-index:1}

/* ===== Warenkorb ===== */
.pc-add.pop{animation:addPop .45s cubic-bezier(.2,1.5,.3,1)}
@keyframes addPop{40%{transform:scale(1.12)}}
.cart-fab{position:fixed;right:20px;bottom:20px;z-index:880;width:58px;height:58px;border:0;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 18px 40px -16px rgba(10,18,40,.6);transform:scale(0);opacity:0;transition:transform .45s cubic-bezier(.2,1.4,.3,1),opacity .3s}
.cart-fab.has{transform:none;opacity:1}
.cart-fab svg{width:26px;height:26px}
.cart-fab .cart-n{position:absolute;right:-2px;top:-2px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--ice);color:var(--navy);font:700 12px/22px var(--body);text-align:center}
.cart-fab.bump{animation:fabBump .5s cubic-bezier(.2,1.5,.3,1)}
@keyframes fabBump{40%{transform:scale(1.18) rotate(-8deg)}}
.cart{position:fixed;inset:0;z-index:950;visibility:hidden;pointer-events:none}
.cart.open{visibility:visible;pointer-events:auto}
.cart-bg{position:absolute;inset:0;background:rgba(8,14,30,.45);opacity:0;transition:opacity .35s}
.cart.open .cart-bg{opacity:1}
.cart-panel{position:absolute;right:0;top:0;bottom:0;width:min(420px,100vw);background:#fff;color:var(--navy);display:flex;flex-direction:column;gap:18px;padding:24px 24px calc(24px + env(safe-area-inset-bottom));overflow:auto;transform:translateX(102%);transition:transform .5s cubic-bezier(.2,.8,.2,1);box-shadow:-30px 0 60px -30px rgba(0,0,0,.4)}
.cart.open .cart-panel{transform:none}
.cart-head{display:flex;align-items:center;justify-content:space-between}
.cart-head h2{margin:0;font-family:var(--display);font-weight:900;text-transform:uppercase;font-variation-settings:"wdth" 108;font-size:30px}
.cart-x{width:42px;height:42px;border:0;border-radius:50%;background:var(--snow);color:var(--navy);font-size:26px;line-height:1;cursor:pointer}
.cart-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.cart-list li{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--line)}
.cart-list img{width:64px;height:64px;object-fit:cover;border-radius:12px;background:#eef2f7}
.cart-list b{display:block;font-size:15px;line-height:1.25}
.cart-list span{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--mute)}
.cart-q{display:flex;align-items:center;gap:4px;background:var(--snow);border-radius:999px;padding:3px}
.cart-q button{width:32px;height:32px;border:0;border-radius:50%;background:#fff;color:var(--navy);font-size:18px;cursor:pointer}
.cart-q button:disabled{opacity:.35;cursor:default}
.cart-q output{min-width:22px;text-align:center;font-weight:700}
.cart-country{display:grid;gap:8px}
.cart-country span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.cart-country select{appearance:none;-webkit-appearance:none;width:100%;font:500 16px var(--body);color:var(--navy);padding:13px 42px 13px 16px;border-radius:14px;border:1px solid var(--line);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23142a5c' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 16px center/12px 8px}
.cart-sum{margin:0;display:grid;gap:8px}
.cart-sum div{display:flex;justify-content:space-between;font-size:15px}
.cart-sum dt{color:var(--mute)} .cart-sum dd{margin:0;font-weight:600}
.cart-sum .tot{padding-top:10px;border-top:1px solid var(--line);font-size:18px}
.cart-sum .tot dt{color:var(--navy);font-weight:700}
.cart-pay{border:0;cursor:pointer;font:600 16px var(--body);padding:16px 22px;border-radius:999px;background:var(--navy);color:#fff;transition:transform .3s cubic-bezier(.2,.9,.3,1.4)}
.cart-pay:hover{transform:translateY(-2px)} .cart-pay:disabled{opacity:.6;transform:none}
.cart-msg{margin:-6px 0 0;min-height:1em;font-size:14px;color:#b4232c}
.cart-note{margin:-8px 0 0;font-size:13px;color:var(--mute);text-align:center}
.cart-empty{color:var(--mute)}
html.cart-open{overflow:hidden}
@media (max-width:700px){ .cart-fab{right:16px;bottom:16px} .cart-panel{width:100vw} }
.sstrip{overflow-x:clip} body.shop-page{overflow-x:clip}