/* Skip-Link (Accessibility — unsichtbar außer bei Keyboard-Focus) */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.skip-link:focus{position:fixed;top:0;left:0;width:auto;height:auto;padding:8px 16px;background:#ff6b00;color:#000;font-size:.8rem;z-index:9999;outline:2px solid #000;}

/* ══ RESET & ROOT ════════════════════════════════════════════════ */
.para-shape{position:absolute;pointer-events:none;z-index:1;}
.ps-sq{width:var(--sz,60px);height:var(--sz,60px);background:var(--o);opacity:var(--op,.08);}
.ps-rect{border:1px solid rgba(255, 107, 0,var(--bop,.15));width:var(--w,120px);height:var(--h,80px);}
.ps-line{width:1px;height:var(--len,150px);background:linear-gradient(180deg,transparent,rgba(255, 107, 0,var(--op,.25)),transparent);}
.ps-dot{width:var(--sz,8px);height:var(--sz,8px);border-radius:50%;background:var(--o);opacity:var(--op,.7);box-shadow:0 0 var(--glow,20px) var(--glow2,5px) rgba(255, 107, 0,.4);}
#shopBgFloor{
  position:fixed;bottom:-6vh;left:-20vw;right:-20vw;height:70vh;
  transform:rotateX(65deg);transform-origin:bottom center;
  background:repeating-linear-gradient(90deg,rgba(255, 107, 0,.04) 0,rgba(255, 107, 0,.04) 1px,transparent 1px,transparent 60px),
             repeating-linear-gradient(0deg,rgba(255, 107, 0,.04) 0,rgba(255, 107, 0,.04) 1px,transparent 1px,transparent 60px);
  pointer-events:none;z-index:0;opacity:.72;
  transition:opacity .5s var(--ez);
}
body.detail-active #shopBgFloor{opacity:.35;}
:root{
  --o:#ff6b00; --ob:rgba(255,107,0,.12); --og:rgba(255,107,0,.05);
  --bg:#141414; --bg2:#1a1a1a; --bg3:#1f1f1f;
  --fg:#e8e8e8; --dim:#484848; --mid:#888;
  --f:'G',sans-serif; --ez:cubic-bezier(.16,1,.3,1);
  --nav-h:72px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{overflow-x:hidden; scroll-behavior:auto;} /* Lenis übernimmt smooth scroll */
body{
  font-family:var(--f); background:var(--bg); color:var(--fg);
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
/* Custom Cursor — native Cursor verstecken */
body, body *, body button, body a, body input, body select {
  cursor: none !important;
}
a{color:inherit;text-decoration:none;}
img{display:block;}
input,textarea,button,select{font-family:var(--f);outline:none;border:none;background:none;}
/* FIX N11 — Fokus-Sichtbarkeit für Keyboard-Navigation (WCAG 2.1 AA) */
:focus-visible{outline:2px solid var(--o);outline-offset:2px;border-radius:2px;}

/* Film-Grain Overlay */
body::after{
  content:'';position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.018;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:300px;
}
::-webkit-scrollbar{width:2px;}
::-webkit-scrollbar-thumb{background:var(--o);}

/* ══ CURSOR — Maus = obere rechte Ecke; Feld nach unten links; Text zentriert ══ */
#cur{position:fixed;top:0;left:0;z-index:99999;pointer-events:none;will-change:transform;font-family:var(--f);}
.c-box{position:absolute;left:0;top:0;transform:translate(-100%,0);}
.c-label-wrap{
  position:relative;width:11px;min-height:11px;transform-origin:top right;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  transform:scale(1) translate(0,0);
  transition:width .48s cubic-bezier(.16,1,.3,1),min-height .48s cubic-bezier(.16,1,.3,1),transform .48s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s,box-shadow .35s,opacity .2s;
}
.c-dot{position:absolute;top:0;right:0;width:11px;height:11px;background:var(--o);z-index:2;pointer-events:none;animation:hb-dot 3.4s cubic-bezier(.4,0,.6,1) infinite;}
.c-t{
  position:relative;z-index:1;font-family:var(--f);font-size:.5rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--o);
  white-space:nowrap;text-align:center;width:100%;opacity:0;max-width:0;padding:0;overflow:hidden;box-sizing:border-box;
  transition:opacity .3s .06s,max-width .45s cubic-bezier(.16,1,.3,1),padding .45s cubic-bezier(.16,1,.3,1);
}
.c-box.h .c-label-wrap{
  width:100px;min-height:30px;background:rgba(10,10,10,.96);border:1px solid var(--o);border-radius:1px;
  box-shadow:0 8px 28px rgba(0,0,0,.42);animation:c-field-in .56s cubic-bezier(.16,1,.3,1) both;
}
.c-box.h .c-t{opacity:1;max-width:100%;padding:6px 8px 6px 10px;}
.c-box.h .c-dot{animation:none;}
@media (prefers-reduced-motion:reduce){.c-box.h .c-label-wrap{animation:none;width:100px;min-height:30px;}}
@keyframes hb-dot{0%,100%{transform:scale(1);}50%{transform:scale(1.35);background:rgba(255, 107, 0,.75);}}
@keyframes c-field-in{
  0%{width:11px;min-height:11px;transform:scale(.52) translate(14px,-12px);opacity:.92;box-shadow:0 0 0 rgba(0,0,0,0);}
  100%{width:100px;min-height:30px;transform:scale(1) translate(0,0);opacity:1;box-shadow:0 8px 28px rgba(0,0,0,.42);}
}

/* ══ TOPBAR / NAV ════════════════════════════════════════════════ */
#nav{ /* FIX SHP-01: Markup nutzt <nav id="nav">, nicht #topbar */
  position:fixed;top:0;left:0;right:0;z-index:850;
  display:flex;align-items:center;
  padding:28px 52px;
  background:transparent;
  transition:background .4s,border-color .4s;
}
.n-logo{
  font-size:.78rem;font-weight:700;letter-spacing:.35em;text-transform:uppercase;
  color:var(--fg);text-decoration:none;flex-shrink:0;
}
.n-links{
  display:flex;gap:36px;margin-left:auto;margin-right:28px;
}
.n-a{
  font-size:.72rem;font-weight:400;letter-spacing:.22em;text-transform:lowercase;
  color:var(--dim);transition:color .3s;
  position:relative;text-decoration:none;
}
body.detail-active .n-a{ color:rgba(255,255,255,.45); }
.n-a::after{
  content:'';position:absolute;bottom:-3px;left:0;
  width:0;height:1px;background:var(--o);
  transition:width .35s var(--ez);
}
.n-a:hover{color:var(--o);}
.n-a:hover::after,.n-a--active::after{width:100%;}
.n-a--active{color:var(--o);}
@media(max-width:900px){.n-links{display:none;}}

@keyframes fadeIn{to{opacity:1;}}

/* Zurück-Button */
#btnBack{
  background:none;border:none;color:rgba(255,255,255,.3);
  cursor:none;display:none;align-items:center;gap:10px;
  font-family:var(--f);font-size:.52rem;letter-spacing:.28em;text-transform:uppercase;
  padding:0;margin-right:18px;transition:color .3s;flex-shrink:0;
}
#btnBack.visible{display:flex;}
#btnBack:hover{color:var(--o);}
#btnBack .back-arrow{font-size:.8rem;color:var(--o);transition:transform .25s var(--ez);}
#btnBack:hover .back-arrow{transform:translateX(-4px);}
/* Im Detail-Modus: nur Zurück + Titel + Sprachschalter (kein Warenkorb) */
body.detail-active .n-links{ display:none; }
body.detail-active .n-logo{ display:none; }
body.detail-active #nav{ /* FIX SHP-01: Markup nutzt <nav id="nav">, nicht #topbar */
  background:transparent;
  backdrop-filter:none;
  padding:28px 52px;
}
body.detail-active #cartBtn{ display:none !important; }
body.detail-active #topbarRight{
  margin-left:auto !important;
  gap:0 !important;
}
body.detail-active #shopLangBtnFeed{ display:none !important; }
body.detail-active #topbarControls{ display:flex; }
#navDetailTitle{
  font-size:.6rem;font-weight:700;letter-spacing:.35em;text-transform:uppercase;
  color:rgba(255,255,255,.2);display:none;
}
body.detail-active #navDetailTitle{ display:block; }

/* Logo */

#shopLogo a{color:var(--fg);transition:color .25s;}
#shopLogo a:hover{color:var(--o);}

#cartBtn:hover{color:var(--o);}
#cartCount{
  display:none;font-size:.55rem;background:var(--o);color:#111;
  padding:1px 5px;font-weight:700;letter-spacing:.05em;
}
#cartCount.visible{display:inline;}

/* ══ PROGRESS BAR ════════════════════════════════════════════════ */
#prog{
  position:fixed;top:0;left:0;height:1px;
  width:0;background:var(--o);z-index:8000;pointer-events:none;
  transition:width .1s linear;
}

/* ══ MAIN VIEWS ══════════════════════════════════════════════════ */
#viewFeed,#viewDetail{
  min-height:100vh;padding-top:var(--nav-h);
  will-change:transform,opacity;
}

/* Feed: editorial atmosphere (nicht „flaches Katalog-UI“) */
#viewFeed{
  position:relative;
  isolation:isolate;
  overflow-x:hidden;
}
#viewFeed::before{
  content:'';
  position:absolute;left:0;right:0;top:0;
  height:min(125vh, 1500px);
  pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 95% 75% at 10% 0%, rgba(255, 107, 0,.085), transparent 55%),
    radial-gradient(ellipse 65% 50% at 92% 18%, rgba(255, 107, 0,.05), transparent 50%),
    linear-gradient(185deg, rgba(16,14,12,.75) 0%, rgba(14,14,14,.15) 38%, transparent 72%);
}
body.detail-active #viewFeed::before{
  opacity:0;transition:opacity .45s var(--ez);
}
html.nx-reduced-motion #viewFeed::before{transition:none;}

/* Feed initial sichtbar */
#viewFeed{display:block;}
#viewDetail{display:none;opacity:0;}

/* Transitions */
#viewFeed.leaving{
  animation:slideOutLeft .4s var(--ez) forwards;
}
#viewDetail.entering{
  animation:slideInRight .45s var(--ez) forwards;
}
#viewFeed.returning{
  animation:slideInLeft .4s var(--ez) forwards;
}
#viewDetail.leaving{
  animation:slideOutRight .35s var(--ez) forwards;
}

@keyframes slideOutLeft{
  from{opacity:1;transform:translateX(0);}
  to  {opacity:0;transform:translateX(-40px);}
}
@keyframes slideInRight{
  from{opacity:0;transform:translateX(60px);}
  to  {opacity:1;transform:translateX(0);}
}
@keyframes slideInLeft{
  from{opacity:0;transform:translateX(-30px);}
  to  {opacity:1;transform:translateX(0);}
}
@keyframes slideOutRight{
  from{opacity:1;transform:translateX(0);}
  to  {opacity:0;transform:translateX(60px);}
}

/* ══ FEED: FULLSCREEN HERO + SLIDER (100vw × 100vh) ═══════════════ */
.feed-hero-mega{
  position:relative;z-index:3;
  width:100vw;
  min-height:100vh;
  min-height:100dvh;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  overflow:hidden;
  isolation:isolate;
}
.feed-hero-slides{
  position:absolute;inset:0;
  z-index:0;
}
.feed-hero-slide{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity 1.15s var(--ez);
  pointer-events:none;
}
.feed-hero-slide.is-active{
  opacity:1;
  z-index:1;
  pointer-events:auto;
}
.feed-hero-slide img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1.06);
  transition:transform 12s linear;
}
.feed-hero-slide.is-active img{transform:scale(1);}
html.nx-reduced-motion .feed-hero-slide img{transition:none;transform:none!important;}

.feed-hero-scrim{
  position:absolute;inset:0;z-index:2;
  pointer-events:none;
  background:
    linear-gradient(to top, rgba(10,10,12,.92) 0%, rgba(10,10,12,.35) 38%, rgba(10,10,12,.12) 55%, rgba(8,8,10,.5) 100%),
    linear-gradient(to right, rgba(8,8,10,.55) 0%, transparent 45%);
}

/* Hintergrund-Watermark — auf Mega-Container */
.feed-hero-mega::before{
  content:'SHOP';
  position:absolute;right:-2vw;top:42%;transform:translateY(-50%);z-index:2;
  font-size:clamp(7rem,16vw,20rem);font-weight:950;font-style:italic;
  color:rgba(255, 107, 0,.06);letter-spacing:-.04em;pointer-events:none;
  line-height:1;
}

.feed-hero-inner{
  position:relative;z-index:4;
  box-sizing:border-box;
  width:100%;
  max-width:min(1200px, 94vw);
  margin:0 auto;
  /* Volle Hero-Höhe → Typo wirkt „editorial“ unten im Bild */
  min-height:100vh;
  min-height:100dvh;
  padding:calc(var(--nav-h) + 24px) 8vw clamp(168px, 22vh, 260px);
  display:flex;flex-direction:column;justify-content:flex-end;
  align-items:flex-start;
  pointer-events:auto;
}

/* Editorial-Säule — schließt sich am unteren Textblock an */
.feed-hero-inner::after{
  content:'';
  position:absolute;left:0;top:14%;bottom:clamp(100px, 14vh, 160px);
  width:1px;
  background:linear-gradient(180deg, transparent 0%, rgba(255, 107, 0,.45) 35%, rgba(255, 107, 0,.25) 65%, transparent 100%);
  pointer-events:none;
}
@media(max-width:640px){
  .feed-hero-inner::after{opacity:.75;}
}

#feedHeroNum{
  font-size:.5rem;letter-spacing:.5em;text-transform:uppercase;
  color:var(--o);margin-bottom:1.5rem;
}

#feedHeroTitle{
  font-size:clamp(3.5rem,9vw,8rem);
  font-weight:100;
  line-height:.95;
  letter-spacing:-.03em;
  color:var(--fg);
  margin-bottom:.4rem;
  text-shadow:0 4px 80px rgba(0,0,0,.45), 0 0 100px rgba(255, 107, 0,.09);
}

#feedHeroTitle strong{font-weight:700;color:var(--fg);}
#feedHeroSub{
  font-size:.72rem;color:rgba(200,200,200,.85);letter-spacing:.15em;
  text-transform:uppercase;margin-top:.5rem;
  max-width:36em;line-height:1.65;
  text-shadow:0 2px 24px rgba(0,0,0,.5);
}

#feedHeroCaption{
  margin-top:1.25rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
  text-shadow:0 2px 16px rgba(0,0,0,.6);
  min-height:1.6em;
}
.feed-hero-cap-title{color:var(--fg);letter-spacing:.12em;}
.feed-hero-cap-cat{color:var(--o);opacity:.9;}
.feed-hero-cap-link{
  color:var(--o);border-bottom:1px solid rgba(255, 107, 0,.45);
  padding-bottom:2px;text-decoration:none;letter-spacing:.28em;
  transition:color .2s,border-color .2s;
}
.feed-hero-cap-link:hover{color:#fff;border-bottom-color:var(--o);}

.feed-hero-controls{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  pointer-events:none;
}
.feed-hero-controls button{pointer-events:auto;}
.feed-hero-arrows{
  display:flex;gap:10px;
}
.feed-hero-arrow{
  width:42px;height:42px;border-radius:1px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(8,8,10,.55);
  color:rgba(255,255,255,.75);
  font-size:1.35rem;line-height:1;
  padding:0;
  cursor:none;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:border-color .2s,color .2s,background .2s;
}
.feed-hero-arrow:hover{border-color:rgba(255, 107, 0,.45);color:var(--o);background:rgba(12,10,8,.75);}

.feed-hero-dots{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:90vw;}
.feed-hero-dot{
  width:28px;height:3px;padding:0;border:none;border-radius:1px;
  background:rgba(255,255,255,.18);
  cursor:none;
  transition:background .35s,width .35s;
}
.feed-hero-dot.is-on{background:var(--o);width:40px;}

.feed-hero-scroll{
  position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:5;
  font-size:1rem;color:rgba(255,255,255,.35);
  text-decoration:none;letter-spacing:.2em;
  animation:feedHeroBounce 2.4s ease-in-out infinite;
  pointer-events:auto;
}
.feed-hero-scroll:hover{color:var(--o);}
@keyframes feedHeroBounce{
  0%,100%{transform:translateX(-50%) translateY(0);opacity:.4;}
  50%{transform:translateX(-50%) translateY(6px);opacity:1;}
}
html.nx-reduced-motion .feed-hero-scroll{animation:none;}

/* ══ FEED: EDITORIAL MARKETING (unter Hero, vor Katalog) ═══════ */
.shop-feed-editorial{
  position:relative;z-index:2;
  max-width:1680px;margin:clamp(56px, 9vh, 140px) auto 8px;
  padding:0 8vw 12px;
  box-sizing:border-box;
}
.shop-strip-print{
  display:block;position:relative;overflow:hidden;border-radius:2px;
  min-height:clamp(200px,28vh,340px);
  margin-bottom:clamp(28px,5vw,56px);
  text-decoration:none;color:inherit;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.shop-strip-print-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.03);transition:transform 1.2s var(--ez);
}
.shop-strip-print:hover .shop-strip-print-bg{transform:scale(1.08);}
.shop-strip-print-scrim{
  position:absolute;inset:0;
  background:linear-gradient(105deg, rgba(8,8,10,.88) 0%, rgba(8,8,10,.45) 45%, transparent 78%);
  pointer-events:none;
}
.shop-strip-print-inner{
  position:relative;z-index:2;padding:clamp(28px,5vw,52px) clamp(24px,4vw,48px);
  max-width:min(720px,92%);
}
.shop-strip-print-kicker{
  font-size:.5rem;letter-spacing:.45em;text-transform:uppercase;color:var(--o);margin-bottom:14px;
}
.shop-strip-print-title{
  font-size:clamp(1.6rem,4.2vw,3.2rem);font-weight:100;line-height:1.05;letter-spacing:-.02em;color:var(--fg);
  margin:0 0 20px;
}
.shop-strip-print-title em{font-style:normal;font-weight:950;color:var(--o);}
.shop-strip-print-cta{
  display:inline-block;padding:12px 22px;font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;
  background:var(--o);color:#111;font-weight:700;border:1px solid var(--o);
}

.shop-split-brush{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);
  align-items:center;margin-bottom:clamp(36px,6vw,72px);
  padding:clamp(8px,2vw,16px) 0;
  border-top:1px solid rgba(255, 107, 0,.14);
  border-bottom:1px solid rgba(255, 107, 0,.1);
}
.shop-split-brush-img{
  min-height:clamp(260px,36vh,420px);border-radius:2px;background-size:cover;background-position:center;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 20px 50px rgba(0,0,0,.3);
}
.shop-split-brush-kicker{font-size:.5rem;letter-spacing:.42em;text-transform:uppercase;color:var(--o);margin-bottom:16px;}
.shop-split-brush-title{
  font-size:clamp(1.85rem,3.8vw,3rem);font-weight:100;line-height:1.08;margin:0 0 16px;letter-spacing:-.02em;
}
.shop-split-brush-sub{font-size:.88rem;color:var(--mid);line-height:1.75;font-weight:300;max-width:38em;margin-bottom:24px;}
.shop-split-brush-btn{
  display:inline-block;padding:12px 24px;font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;
  background:transparent;color:var(--o);border:1px solid rgba(255, 107, 0,.45);text-decoration:none;
  transition:background .25s,color .25s,border-color .25s;
}
.shop-split-brush-btn:hover{background:rgba(255, 107, 0,.1);border-color:var(--o);color:#fff;}

.shop-wp-show{
  position:relative;margin-bottom:clamp(40px,7vw,88px);
  min-height:clamp(320px,52vh,620px);border-radius:2px;overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 28px 70px rgba(0,0,0,.38);
}
.shop-wp-track{position:absolute;inset:0;}
.shop-wp-slide{
  position:absolute;inset:0;opacity:0;transition:opacity 1s var(--ez);
  background-size:cover;background-position:center;
}
.shop-wp-slide.is-active{opacity:1;z-index:1;}
.shop-wp-scrim{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(6,6,8,.92) 0%, rgba(10,10,12,.35) 50%, rgba(8,8,10,.55) 100%);
  pointer-events:none;
}
.shop-wp-content{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(28px,5vw,56px) clamp(24px,5vw,64px);
  max-width:min(560px,94%);
}
.shop-wp-kicker{font-size:.48rem;letter-spacing:.4em;text-transform:uppercase;color:var(--o);margin-bottom:12px;}
.shop-wp-title{font-size:clamp(1.5rem,3.5vw,2.6rem);font-weight:100;margin:0 0 10px;line-height:1.1;}
.shop-wp-sub{font-size:.82rem;color:rgba(220,220,220,.85);line-height:1.65;margin-bottom:20px;font-weight:300;}
.shop-wp-btn{
  display:inline-block;padding:11px 20px;font-size:.55rem;letter-spacing:.24em;text-transform:uppercase;
  background:rgba(255, 107, 0,.15);color:var(--o);border:1px solid rgba(255, 107, 0,.4);text-decoration:none;
}
.shop-wp-btn:hover{background:rgba(255, 107, 0,.25);color:#fff;}
.shop-wp-dots{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:4;
  display:flex;gap:8px;
}
.shop-wp-dot{
  width:32px;height:3px;padding:0;border:none;border-radius:1px;
  background:rgba(255,255,255,.2);cursor:none;transition:background .3s,width .3s;
}
.shop-wp-dot.is-on{background:var(--o);width:44px;}

.shop-merch-poll{
  padding:clamp(36px,6vw,56px) clamp(20px,4vw,40px);
  background:rgba(255, 107, 0,.04);
  border:1px solid rgba(255, 107, 0,.18);border-radius:2px;margin-bottom:clamp(32px,5vw,48px);
}
.shop-merch-poll-inner{max-width:640px;margin:0 auto;text-align:center;}
.shop-merch-poll-title{
  font-size:clamp(1.5rem,3.2vw,2.4rem);font-weight:100;margin:0 0 14px;letter-spacing:-.02em;
}
.shop-merch-poll-title em{font-style:normal;font-weight:950;color:var(--o);}
.shop-merch-poll-text{font-size:.85rem;color:var(--mid);line-height:1.75;margin:0 0 22px;font-weight:300;}
.shop-merch-poll-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.shop-merch-poll-btn{
  font-family:var(--f);padding:12px 28px;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  cursor:none;border-radius:1px;border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.25);color:var(--fg);transition:border-color .2s,background .2s,color .2s;
}
.shop-merch-poll-yes{border-color:rgba(255, 107, 0,.45);color:var(--o);}
.shop-merch-poll-yes:hover{background:rgba(255, 107, 0,.12);}
.shop-merch-poll-no:hover{border-color:rgba(255,255,255,.25);}
.shop-merch-poll-btn:disabled{opacity:.45;pointer-events:none;}
.shop-merch-poll-stats{font-size:.65rem;color:var(--dim);letter-spacing:.12em;margin:16px 0 0;}
.shop-merch-poll-thanks{font-size:.72rem;color:var(--o);letter-spacing:.14em;margin-top:10px;}

/* Shop-Hub → Katalog (Editorial → Filter/Grid) */
.shop-hub-to-catalog{
  max-width:1680px;margin:0 auto clamp(40px, 6vw, 72px);
  padding:clamp(36px, 5vw, 56px) clamp(24px, 5vw, 48px);
  box-sizing:border-box;
  text-align:center;
  border:1px solid rgba(255, 107, 0,.16);
  border-radius:2px;
  background:linear-gradient(165deg, rgba(255, 107, 0,.07) 0%, rgba(8,8,10,.45) 100%);
}
.shop-hub-to-catalog-kicker{
  font-size:.5rem;letter-spacing:.45em;text-transform:uppercase;color:var(--o);margin:0 0 14px;
}
.shop-hub-to-catalog-title{
  font-size:clamp(1.6rem, 3.5vw, 2.6rem);font-weight:100;margin:0 0 12px;letter-spacing:-.02em;color:var(--fg);
}
.shop-hub-to-catalog-sub{
  font-size:.85rem;color:var(--mid);line-height:1.7;margin:0 auto 24px;max-width:36em;font-weight:300;
}
.shop-hub-to-catalog-btn{
  display:inline-block;padding:14px 28px;font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;
  background:var(--o);color:#111;font-weight:700;border:1px solid var(--o);text-decoration:none;
  transition:filter .2s, transform .2s;
}
.shop-hub-to-catalog-btn:hover{filter:brightness(1.08);transform:translateY(-2px);}
#shopCatalog{scroll-margin-top:calc(var(--nav-h, 72px) + 16px);}
.shop-catalog-intro{
  max-width:1680px;margin:0 auto clamp(36px, 5vw, 64px);
  padding:0 8vw 4px;
  position:relative;z-index:2;
}
.shop-catalog-intro-back{
  display:inline-block;font-size:.52rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--o);margin-bottom:clamp(18px, 2.5vw, 28px);border-bottom:1px solid rgba(255, 107, 0,.35);padding-bottom:4px;
}
.shop-catalog-intro-back:hover{color:#fff;}
.shop-catalog-intro-kicker{font-size:.5rem;letter-spacing:.45em;text-transform:uppercase;color:var(--o);margin:0 0 14px;}
.shop-catalog-intro-title{font-size:clamp(1.5rem, 3vw, 2.4rem);font-weight:100;margin:0;letter-spacing:-.02em;}

/* Sortiment: sticky Tag-Chips + schwebende Suche/Filter */
.shop-catalog-toolbar{
  position:sticky;top:calc(var(--nav-h) - 1px);z-index:800;
  max-width:1680px;margin:0 auto 12px;padding:10px 8vw 12px;
  background:linear-gradient(180deg, rgba(14,14,14,.96) 0%, rgba(14,14,14,.82) 70%, rgba(14,14,14,.4) 100%);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255, 107, 0,.12);
  box-sizing:border-box;
}
.feed-tag-bar{display:flex;flex-direction:column;gap:10px;}
.feed-tag-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.feed-tag-row--tags{padding-top:8px;border-top:1px solid rgba(255,255,255,.06);}
.feed-tag-chip{
  font-family:var(--f);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  padding:8px 14px;border:1px solid rgba(255,255,255,.12);color:var(--dim);
  background:rgba(255,255,255,.03);border-radius:999px;cursor:none;transition:all .2s;
}
.feed-tag-chip:hover{border-color:rgba(255, 107, 0,.4);color:var(--o);}
.feed-tag-chip.is-on{border-color:var(--o);color:var(--o);background:rgba(255, 107, 0,.1);}
.shop-filter-dock{
  position:fixed;right:max(14px, 2.8vw);bottom:max(22px, 3.5vh);z-index:8400;
  display:flex;flex-direction:column;gap:10px;
  pointer-events:auto;
}
.shop-fab{
  width:50px;height:50px;border-radius:50%;border:1px solid rgba(255, 107, 0,.4);
  background:rgba(10,10,12,.94);color:var(--o);
  box-shadow:0 12px 36px rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;cursor:none;
  transition:transform .2s,border-color .2s;
}
.shop-fab:hover{transform:scale(1.05);border-color:var(--o);}
.shop-fab svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;}
html.nx-reduced-motion .shop-fab:hover{transform:none;}
body.detail-active .shop-filter-dock,
body.detail-active .shop-catalog-toolbar{display:none!important;}
.shop-filter-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.52);z-index:8450;backdrop-filter:blur(3px);}
.shop-filter-sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:8460;
  max-height:min(75vh, 540px);
  background:var(--bg2);border-top:1px solid rgba(255, 107, 0,.28);
  border-radius:14px 14px 0 0;
  box-shadow:0 -24px 64px rgba(0,0,0,.55);
  padding:22px 8vw 32px;overflow-y:auto;
}
.shop-filter-sheet-inner{max-width:640px;margin:0 auto;position:relative;padding-top:8px;}
.shop-sheet-close{
  position:absolute;top:0;right:0;background:none;border:none;color:var(--dim);
  font-size:1.15rem;line-height:1;cursor:none;padding:4px 8px;
}
.shop-filter-sheet .flt-wrap{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
#feedFilters.sheet-only{
  display:flex;flex-direction:column;gap:14px;margin:0;padding:0;
  background:transparent;border:none;box-shadow:none;backdrop-filter:none;max-width:none;
}
#feedFilters.sheet-only #filterSep{display:none;}
#feedFilters.sheet-only #filterSearch{margin-left:0;width:100%;min-width:0;}

@media(max-width:900px){
  .shop-split-brush{grid-template-columns:1fr;gap:28px;}
  .shop-split-brush-img{min-height:220px;order:0;}
  .shop-split-brush-copy{order:1;}
}
@media(max-width:640px){
  .shop-feed-editorial{padding:0 5vw 8px;}
}

/* ══ FEED: FILTER (nur im Bottom-Sheet — Klasse .sheet-only) ═══════ */
#feedFilters{display:none;}
#feedFilters.sheet-only{display:flex;}

.flt-btn{
  font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;
  padding:8px 16px;border:1px solid rgba(255,255,255,.12);color:var(--dim);
  background:rgba(255,255,255,.02);transition:all .2s;cursor:none;border-radius:1px;
}
.flt-btn:hover{border-color:rgba(255, 107, 0,.45);color:var(--o);background:rgba(255, 107, 0,.04);}
.flt-btn.on{border-color:var(--o);color:var(--o);background:var(--ob);box-shadow:0 0 0 1px rgba(255, 107, 0,.15);}
#filterSep{width:1px;height:22px;background:rgba(255,255,255,.1);margin:0 8px;transform:skewX(-12deg);}
#filterSearch{
  font-size:.7rem;letter-spacing:.08em;color:var(--fg);
  background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.1);
  padding:8px 14px;min-width:min(220px, 42vw);transition:border-color .2s, box-shadow .2s;border-radius:1px;
  margin-left:auto;
}
#filterSearch:focus{border-color:rgba(255, 107, 0,.45);box-shadow:0 0 0 1px rgba(255, 107, 0,.12);}
#filterSearch::placeholder{color:var(--dim);}
@media(max-width:720px){
  #filterSearch{margin-left:0;width:100%;min-width:0;}
}

/* ══ FEED: PRODUKT-GRID ══════════════════════════════════════════ */
#feedGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:clamp(12px, 1.4vw, 20px);
  padding:0 8vw 100px;
  max-width:1680px;
  margin:0 auto;
  position:relative;z-index:2;
}
@media(max-width:640px){
  #feedGrid{
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
    gap:10px;
    padding:0 5vw 80px;
  }
}


@keyframes fadeUp{
  from{opacity:0;transform:translateY(18px);}
  to  {opacity:1;transform:translateY(0);}
}

/* Produkt-Karte */
.prod-card{
  position:relative;overflow:hidden;
  background:linear-gradient(165deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.008) 100%);
  border:1px solid rgba(255,255,255,.07);
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.2) inset, 0 12px 32px rgba(0,0,0,.12);
  cursor:none;
  transition:border-color .35s,transform .5s var(--ez),box-shadow .45s var(--ez);
  transform-style:preserve-3d;
}
.prod-card:hover{
  border-color:rgba(255, 107, 0,.28);
  transform:translateY(-7px);
  box-shadow:0 28px 56px rgba(0,0,0,.38), 0 0 0 1px rgba(255, 107, 0,.1) inset;
}
html.nx-reduced-motion .prod-card:hover{transform:none;}
.prod-card-img{
  position:relative;overflow:hidden;
  aspect-ratio:3/4;background:var(--bg2);
  pointer-events:none;
}
.prod-card-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ez), filter .4s ease;display:block;
}
.prod-card:hover .prod-card-img img{transform:scale(1.06);filter:brightness(1.08);}

/* Badge */
.prod-badge{
  position:absolute;top:12px;left:12px;z-index:2;
  font-size:.48rem;letter-spacing:.3em;text-transform:uppercase;
  padding:3px 8px;font-weight:500;
}
.prod-badge.digital{background:rgba(20,20,20,.85);color:var(--o);border:1px solid rgba(255, 107, 0,.3);}
.prod-badge.print  {background:rgba(20,20,20,.85);color:var(--fg);border:1px solid rgba(255,255,255,.12);}
.prod-badge.merch  {background:rgba(20,20,20,.85);color:var(--mid);border:1px solid var(--dim);}
.prod-badge.sold-out{background:rgba(255,87,34,.15);color:#FF5722;border:1px solid rgba(255,87,34,.3);}

/* Auflagen-Badge */
.prod-edition{
  position:absolute;top:12px;right:12px;z-index:2;
  font-size:.46rem;letter-spacing:.2em;text-transform:uppercase;
  padding:3px 8px;background:rgba(20,20,20,.85);color:var(--mid);
  border:1px solid var(--dim);
}
.prod-edition--low{
  color:var(--o);
  border-color:rgba(255, 107, 0,.45);
  animation:nxLowPulse 2.2s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){
  .prod-edition--low{animation:none;}
}
@keyframes nxLowPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255, 107, 0,.2);}
  50%{box-shadow:0 0 14px 1px rgba(255, 107, 0,.25);}
}
.nx-low-stock-pulse{font-size:.62rem;letter-spacing:.12em;color:var(--o);margin-top:6px;animation:nxLowPulse 2.2s ease-in-out infinite;}
.detail-share{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 10px;}
.detail-share button{font-size:.52rem;letter-spacing:.2em;text-transform:uppercase;padding:8px 14px;background:rgba(255, 107, 0,.1);border:1px solid rgba(255, 107, 0,.25);color:var(--o);cursor:none;}
.detail-share button:hover{background:rgba(255, 107, 0,.18);}
.cart-wizard-hint{font-size:.52rem;letter-spacing:.25em;color:var(--dim);margin:8px 16px 4px;}
.cart-step{display:none;}
.cart-step.active{display:block;}
.cart-wizard-nav{display:flex;gap:10px;flex-wrap:wrap;padding:12px 16px 8px;}
.cart-wizard-nav button{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;padding:10px 18px;background:rgba(255, 107, 0,.12);border:1px solid rgba(255, 107, 0,.35);color:var(--o);cursor:none;}
.cart-wizard-nav button.secondary{background:transparent;border-color:rgba(255,255,255,.12);color:var(--mid);}

/* Hover-Overlay — Klicks gehen zur darunterliegenden .prod-card-hit */
.prod-card-ov{
  position:absolute;inset:0;z-index:3;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(to top,rgba(20,20,20,.75) 0%,rgba(20,20,20,.15) 60%,transparent 100%);
  opacity:0;transition:opacity .4s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.prod-card:hover .prod-card-ov{opacity:1;}
/* Echter Link zur Unterseite ?p=… (SPA bleibt per JS) */
.prod-card-hit{
  position:absolute;inset:0;z-index:2;border-radius:inherit;
}
.prod-card-hit:focus-visible{outline:2px solid var(--o);outline-offset:3px;}
/* Icon-Gruppe unten rechts */
.prod-card-icons{
  position:absolute;bottom:10px;right:10px;z-index:4;
  display:flex;gap:6px;align-items:center;
  pointer-events:auto;
}
/* Wunschliste + Cart — gemeinsamer Icon-Button-Stil */
.wl-heart-btn,.prod-cart-btn{
  background:rgba(0,0,0,.45);border:none;color:rgba(255,255,255,.45);
  width:32px;height:32px;border-radius:50%;
  cursor:none;display:flex;align-items:center;justify-content:center;
  transition:color .2s,background .2s,transform .2s;backdrop-filter:blur(4px);
}
.wl-heart-btn{font-size:1rem;}
.prod-cart-btn svg{width:15px;height:14px;}
.wl-heart-btn:hover,.wl-heart-btn.wl-active{color:#ff4466;background:rgba(0,0,0,.65);transform:scale(1.12);}
.prod-cart-btn:hover{color:var(--o);background:rgba(0,0,0,.65);transform:scale(1.12);}
.prod-cart-btn.added{color:#4CAF50;}
/* Wunschlisten-Modal */
#wlModal{position:fixed;inset:0;z-index:9990;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);}
#wlModal.open{display:flex;}
#wlModalBox{background:var(--bg2);border:1px solid var(--border);padding:36px;max-width:420px;width:90%;position:relative;}
.wl-modal-title{font-size:.6rem;letter-spacing:.4em;text-transform:uppercase;color:var(--o);margin-bottom:20px;}
.wl-modal-input{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--fg);font-family:var(--f);font-size:.85rem;padding:10px 14px;margin-bottom:12px;box-sizing:border-box;}
.wl-share-box{margin-top:16px;padding:12px;background:var(--bg);border:1px solid rgba(255, 107, 0,.2);display:none;}
.wl-share-url{font-size:.72rem;color:var(--o);word-break:break-all;margin-bottom:8px;}

.prod-ov-cta{
  font-size:.56rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--o);border-bottom:1px solid rgba(255, 107, 0,.4);
  padding-bottom:2px;text-align:center;
}

/* Info-Block — Klicks zur .prod-card-hit durchreichen */
.prod-card-info{padding:16px 18px 20px;pointer-events:none;}
.prod-card-name{
  font-size:.88rem;font-weight:500;color:var(--fg);
  margin-bottom:5px;letter-spacing:.02em;
}
.prod-card-sub{
  font-size:.68rem;color:var(--dim);letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:10px;
}
.prod-card-price{
  font-size:1rem;font-weight:700;color:var(--o);
  display:flex;align-items:baseline;gap:6px;
}
.prod-card-price-orig{
  font-size:.72rem;color:var(--dim);text-decoration:line-through;
}

/* Leerzustand */
#feedEmpty{
  grid-column:1/-1;text-align:center;padding:80px 20px;
  color:var(--dim);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
}

/* ══ DETAIL-ANSICHT — FULLSCREEN ════════════════════════════════ */
#viewDetail{
  position:fixed;inset:0;z-index:800;
  display:none;opacity:0;
  overflow:hidden;
}

/* Hintergrund-Ebene: Bild oder Video */
#detailBg{
  position:fixed;inset:0;z-index:0;
  background:var(--bg);
  display:none;
}
#viewDetail.detail-active #detailBg,
body.detail-active #detailBg{
  display:block;
}
#detailBgImg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  transform:scale(1.06);
  transition:transform 1.2s var(--ez),opacity .8s;
  opacity:0;
}
#detailBgImg.loaded{opacity:1;transform:scale(1);}
#detailBgVideo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  opacity:0;transition:opacity .8s;
}
#detailBgVideo.loaded{opacity:1;}

/* Vignette über dem Hintergrund */
#detailVignette{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to right, rgba(20,20,20,.85) 0%, rgba(20,20,20,.2) 55%, rgba(20,20,20,.0) 75%),
    linear-gradient(to left,  rgba(20,20,20,.6) 0%, transparent 25%),
    linear-gradient(to top, rgba(20,20,20,.6) 0%, transparent 40%),
    linear-gradient(to bottom, rgba(20,20,20,.5) 0%, transparent 30%);
}

/* ── Topbar-Controls: Media + Sprache — schieben sich weg wenn Panel einfährt ── */
#topbarControls{
  position:fixed;
  top:0;right:0;
  z-index:860;
  display:none; /* nur in Detail-Ansicht sichtbar */
  align-items:center;
  gap:18px;
  padding:0 52px;
  height:var(--nav-h);
  /* Gleiche Transition wie detailInfo (.6s) */
  transition:transform .6s var(--ez);
  pointer-events:auto;
}
body.detail-active #topbarControls{
  display:flex;
}
body.detail-active.info-panel-open #topbarControls{
  transform:translateX(calc(-1 * min(420px, 40vw)));
}
/* Gleiche horizontale Verschiebung wie #detailInfo — nie -100vw (würde Controls aus dem Screen schieben) */
@media (max-width:1023px){
  body.detail-active.info-panel-open #topbarControls{
    transform:translateX(calc(-1 * min(88vw, 560px)));
  }
}
@media (max-width:767px){
  body.detail-active.info-panel-open #topbarControls{
    transform:translateX(-90vw);
  }
}

/* Video + Audio Steuerung */
/* Media controls in topbar — inline, kein Rahmen */
#btnVideoToggle,#btnAudio{
  background:none;border:none;
  color:rgba(255,255,255,.45);
  cursor:none;display:flex;align-items:center;justify-content:center;
  padding:0;
  transition:color .2s;
  flex-shrink:0;
}
#btnVideoToggle:hover,#btnAudio:hover{color:var(--o);}
#btnAudio.audio-on{color:var(--o);}
@keyframes audioPulse{
  0%,100%{opacity:1;}
  50%{opacity:.55;}
}
#btnAudio.audio-on{animation:audioPulse 2s ease-in-out infinite;}

/* Overlay-Panel rechts — fährt beim Öffnen ein */
#detailInner{
  position:absolute;inset:0;z-index:10;
  display:block;
  pointer-events:none;
}
/* Linke Spalte: volle Fläche, klickbar */
#detailMedia{
  pointer-events:auto;cursor:none;
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:flex-end;
}

/* Immersiver Titel+Preis+CTA Block links unten */
#detailHeroInfo{
  padding:0 52px 52px;
  pointer-events:none;
  z-index:5;
}

/* Gradient von unten damit Text lesbar */
#detailHeroInfo::before{
  content:'';position:absolute;
  inset:-120px 0 0 0;
  background:linear-gradient(to top,
    rgba(14,14,14,.85) 0%,
    rgba(14,14,14,.4) 50%,
    transparent 100%);
  pointer-events:none;z-index:-1;
}

.dhi-cat{
  font-size:.52rem;letter-spacing:.5em;text-transform:uppercase;
  color:var(--o);margin-bottom:12px;opacity:.9;
}
.dhi-title{
  font-size:clamp(2.4rem,4.5vw,4.2rem);font-weight:100;
  line-height:1.0;letter-spacing:-.02em;
  color:var(--fg);margin-bottom:8px;
}
.dhi-title strong{font-weight:800;}
.dhi-tagline{
  font-size:.78rem;color:rgba(255,255,255,.45);
  letter-spacing:.06em;line-height:1.65;
  margin-bottom:28px;
  max-width:520px;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.dhi-price-row{
  display:flex;align-items:center;gap:20px;
  margin-bottom:28px;
}
.dhi-price{
  font-size:2rem;font-weight:700;color:var(--o);
  letter-spacing:-.01em;
}
.dhi-price-orig{
  font-size:.85rem;color:rgba(255,255,255,.3);
  text-decoration:line-through;
}
.dhi-edition{
  font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.35);
}
.dhi-sold-out{
  font-size:.58rem;letter-spacing:.4em;text-transform:uppercase;
  color:#ff5722;background:rgba(255,87,34,.1);
  padding:4px 10px;border:1px solid rgba(255,87,34,.3);
}

/* CTA-Buttons Gruppe */
.dhi-actions{
  display:flex;gap:10px;flex-wrap:wrap;
  pointer-events:auto;
}
#btnHeroBuy{
  padding:15px 36px;
  background:var(--o);color:#111;
  font-size:.62rem;letter-spacing:.45em;text-transform:uppercase;
  font-weight:800;cursor:none;
  transition:background .2s,transform .25s var(--ez),letter-spacing .2s;
  border:none;
}
#btnHeroBuy:hover{background:#ff8533;transform:translateY(-3px);letter-spacing:.5em;}
#btnHeroBuy:disabled{background:rgba(255,255,255,.1);color:rgba(255,255,255,.3);transform:none;}
#btnHeroDetail{
  padding:14px 24px;
  border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.6);
  font-size:.58rem;letter-spacing:.4em;text-transform:uppercase;
  cursor:none;background:rgba(0,0,0,.3);backdrop-filter:blur(4px);
  transition:border-color .2s,color .2s,transform .25s var(--ez);
}
#btnHeroDetail:hover{border-color:rgba(255, 107, 0,.5);color:var(--o);transform:translateY(-2px);}

@media(max-width:820px){
  #detailHeroInfo{display:none;}
}
/* Rechte Spalte: Scroll-Panel */
/* ── UNIFIED PANEL TABS ── */
#panelTabBar{
  display:flex;align-items:stretch;gap:0;
  border-bottom:1px solid rgba(255,255,255,.07);
  flex-shrink:0;
  background:rgba(8,8,8,.6);
}
.panel-tab{
  display:flex;align-items:center;justify-content:center;gap:6px;
  background:none;border:none;border-bottom:2px solid transparent;
  color:rgba(255,255,255,.3);
  padding:11px 8px;flex:1;
  cursor:none;transition:color .2s,border-color .2s,background .2s;
  position:relative;
  font-size:.46rem;letter-spacing:.15em;text-transform:uppercase;font-family:var(--f);
}
.panel-tab:hover{color:rgba(255,255,255,.6);background:rgba(255,255,255,.03);}
.panel-tab.active{color:var(--o);border-bottom-color:var(--o);}
.panel-tab svg{transition:opacity .2s;flex-shrink:0;}
.panel-tab-lbl{white-space:nowrap;}
#panelCartContent{
  display:none;flex-direction:column;flex:1;
  overflow-y:auto;padding:20px 28px 40px;
}
#panelCartContent.visible{display:flex;}
#panelCheckoutContent{
  display:none;flex-direction:column;flex:1;
  overflow-y:auto;
}
#panelCheckoutContent.visible{display:flex;}
.panel-step-indicator{
  font-size:.48rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--dim);padding:14px 28px;border-bottom:1px solid rgba(255,255,255,.05);
  flex-shrink:0;
}
#panelProductContent{
  display:flex;flex-direction:column;flex:1;
  padding:28px 36px 60px;min-height:0;
  overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(255, 107, 0,.2) transparent;
}
#panelProductContent.hidden{display:none;}

#detailInfo{
  position:fixed;top:0;right:0;bottom:0;
  width:min(420px, 40vw);
  z-index:820;
  height:100vh;
  display:flex;flex-direction:column;
  /* Glasmorphism — dunkel, fast durchsichtig */
  background:linear-gradient(160deg, rgba(10,10,10,.6) 0%, rgba(16,14,12,.6) 100%);
  backdrop-filter:blur(24px) saturate(1.2) brightness(.85);
  -webkit-backdrop-filter:blur(24px) saturate(1.2) brightness(.85);
  border-left:1px solid rgba(255, 107, 0,.08);
  padding:var(--nav-h) 0 0 0;
  pointer-events:auto;
  overflow:hidden;/* kein scroll am Container selbst — jeder Tab scrollt für sich */
  transform:translateX(100%);
  transition:transform .6s var(--ez), visibility 0s .6s;
  visibility:hidden;
  scrollbar-width:thin;scrollbar-color:rgba(255, 107, 0,.2) transparent;
  /* Subtiler Glow am linken Rand */
  box-shadow:-1px 0 40px rgba(0,0,0,.5), -1px 0 0 rgba(255, 107, 0,.06);
}
#detailInfo.panel-in{
  transform:translateX(0);
  visibility:visible;
  transition:transform .6s var(--ez), visibility 0s 0s;
}
#detailInfo::-webkit-scrollbar{width:2px;}
#detailInfo::-webkit-scrollbar-thumb{background:rgba(255, 107, 0,.25);}

@media(max-width:820px){
  #detailInner{grid-template-columns:1fr;}
  #detailMedia{display:none;}
  #detailInfo{
    height:100vh;
    background:rgba(14,14,14,.97);
    border-left:none;
    padding-top:var(--nav-h);
  }
}

/* Legacy: Thumbnail-Leiste (im neuen Layout ausgeblendet,
   Thumbnails erscheinen ggf. als Mini-Leiste oben im Panel) */
#detailThumbs{
  display:flex;gap:6px;overflow-x:auto;margin-bottom:20px;
  scrollbar-width:none;
}
#detailThumbs::-webkit-scrollbar{display:none;}
.d-thumb{
  width:56px;height:72px;flex-shrink:0;overflow:hidden;
  border:1px solid var(--dim);cursor:none;opacity:.55;
  transition:opacity .2s,border-color .2s;
}
.d-thumb:hover,.d-thumb.on{opacity:1;border-color:var(--o);}
.d-thumb img{width:100%;height:100%;object-fit:cover;}

/* Info-Spalte */
#detailCat{
  font-size:.42rem;letter-spacing:.6em;text-transform:uppercase;
  color:rgba(255, 107, 0,.6);margin-bottom:10px;
  display:flex;align-items:center;gap:8px;
}
#detailCat::before{
  content:'';display:block;width:16px;height:1px;
  background:rgba(255, 107, 0,.4);
}
#detailTitle{
  font-size:clamp(2rem,3.2vw,3rem);font-weight:100;
  letter-spacing:-.02em;line-height:1.0;margin-bottom:6px;
  color:var(--o);
}
#detailTitle strong{font-weight:950;font-style:italic;color:var(--o);}
#detailTagline{
  font-size:.76rem;color:rgba(255,255,255,.4);letter-spacing:.06em;
  margin-bottom:20px;line-height:1.6;
  font-style:italic;
  border-left:2px solid rgba(255, 107, 0,.25);
  padding-left:10px;
}
#detailLoreTeaser{
  font-size:.76rem;color:var(--mid);line-height:1.8;letter-spacing:.04em;
  font-style:italic;margin-bottom:16px;
  padding-left:12px;border-left:2px solid rgba(255, 107, 0,.3);
}
#btnLoreOpen{
  font-size:.52rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--o);cursor:none;background:none;border:none;
  padding:0;margin-bottom:24px;display:flex;align-items:center;gap:8px;
  transition:letter-spacing .2s;
}
#btnLoreOpen:hover{letter-spacing:.5em;}
#btnLoreOpen::before{content:'◈';font-size:.65rem;}

/* Preis + Kauf */
#detailPriceRow{
  display:flex;align-items:baseline;gap:14px;
  margin-bottom:20px;padding:20px 0 18px;
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
}
#detailPrice{
  font-size:2.2rem;font-weight:700;color:var(--o);
  letter-spacing:-.02em;line-height:1;
}
#detailPriceOrig{
  font-size:.85rem;color:var(--dim);text-decoration:line-through;
}
#detailEdition{
  font-size:.52rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--dim);margin-left:auto;
}

/* Kaufen-Button */
#btnBuy{
  width:100%;padding:16px 20px;margin-bottom:10px;
  background:var(--o);color:#111;
  font-size:.6rem;letter-spacing:.48em;text-transform:uppercase;
  font-weight:800;cursor:none;
  transition:background .25s,transform .25s var(--ez),letter-spacing .2s;
  position:relative;overflow:hidden;
}
#btnBuy::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 60%);
  opacity:0;transition:opacity .2s;
}
#btnBuy:hover{background:#ff8533;transform:translateY(-2px);letter-spacing:.54em;}
#btnBuy:hover::after{opacity:1;}
#btnBuy:disabled{background:rgba(255,255,255,.08);color:rgba(255,255,255,.25);transform:none;}

#btnWishlist{
  width:100%;padding:11px 20px;margin-bottom:24px;
  border:1px solid rgba(255,255,255,.07);color:rgba(255,255,255,.3);
  font-size:.52rem;letter-spacing:.35em;text-transform:uppercase;
  cursor:none;transition:border-color .2s,color .2s,background .2s;
  background:rgba(255,255,255,.02);
}
#btnWishlist:hover{border-color:rgba(255, 107, 0,.3);color:rgba(255, 107, 0,.7);background:rgba(255, 107, 0,.04);}

/* Beschreibung */
#detailDesc{
  font-size:.8rem;color:rgba(255,255,255,.5);line-height:1.9;
  margin-bottom:22px;letter-spacing:.02em;
  font-weight:300;
}

/* Inhalts-Liste */
#detailContents{margin-bottom:24px;}
.d-contents-title{
  font-size:.5rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--dim);margin-bottom:10px;
}
.d-content-item{
  display:flex;align-items:center;gap:10px;
  padding:7px 0;border-bottom:1px solid rgba(255,255,255,.04);
  font-size:.76rem;color:var(--mid);
}
.d-content-item::before{
  content:'';width:4px;height:4px;background:var(--o);
  border-radius:50%;flex-shrink:0;
}

/* Rating */
#detailRating{margin-bottom:24px;}
.rating-stars-row{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.rating-stars{font-size:1.1rem;letter-spacing:.1em;color:var(--o);}
.rating-count{font-size:.68rem;color:var(--dim);letter-spacing:.12em;}
.rating-bar-wrap{display:flex;flex-direction:column;gap:4px;}
.rating-bar-row{display:flex;align-items:center;gap:8px;font-size:.62rem;color:var(--dim);}
.rating-bar{flex:1;height:3px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden;}
.rating-bar-fill{height:100%;background:var(--o);border-radius:2px;transition:width .6s var(--ez);}

/* Druck-Optionen */
#detailPrintOptions{margin-bottom:28px;display:none;}
.d-print-title{font-size:.52rem;letter-spacing:.4em;text-transform:uppercase;color:var(--dim);margin-bottom:12px;}
.d-print-row{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.04);cursor:none;transition:background .15s;}
.d-print-row:hover{background:rgba(255, 107, 0,.03);}
.d-print-row.selected{color:var(--o);}
.d-print-label{font-size:.8rem;color:var(--fg);}
.d-print-size{font-size:.68rem;color:var(--dim);}
.d-print-price{font-size:.85rem;font-weight:600;color:var(--o);}
#btnOpenPrintPopup{
  width:100%;padding:13px 20px;margin-bottom:16px;
  border:1px solid rgba(255, 107, 0,.3);color:var(--o);
  font-size:.6rem;letter-spacing:.38em;text-transform:uppercase;
  cursor:none;background:rgba(255, 107, 0,.05);
  transition:background .2s,border-color .2s,transform .2s var(--ez);
  display:flex;align-items:center;justify-content:center;gap:10px;
}
#btnOpenPrintPopup:hover{background:rgba(255, 107, 0,.1);border-color:rgba(255, 107, 0,.6);transform:translateY(-2px);}
#btnOpenPrintPopup::before{content:'🖨';font-size:.85rem;}
#printSelectedSummary{
  font-size:.72rem;color:var(--dim);margin-bottom:20px;
  letter-spacing:.06em;padding:8px 12px;
  background:rgba(255, 107, 0,.04);border-left:2px solid rgba(255, 107, 0,.3);
  display:none;
}

/* Meta-Zeile — ganz unten */
/* ── Print-Popup Overlay ─────────────────────────────────────── */
/* ══ PRODUKT-DIALOG (STEPPER) ════════════════════════════════════ */
#productDialog{
  position:fixed;inset:0;z-index:1200;
  background:rgba(0,0,0,.85);backdrop-filter:blur(12px);
  display:none;align-items:center;justify-content:center;
}
#productDialog.open{display:flex;}
#pdInner{
  background:var(--bg2);border:1px solid rgba(255,255,255,.08);
  width:min(700px,96vw);max-height:90vh;overflow-y:auto;
  display:flex;flex-direction:column;
}
#pdHeader{
  padding:20px 28px;border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
#pdStepBar{display:flex;padding:0 28px;border-bottom:1px solid rgba(255,255,255,.06);}
.pd-step{
  flex:1;text-align:center;font-size:.48rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);padding:10px 4px;position:relative;transition:color .3s;
}
.pd-step::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:transparent;transition:background .3s;}
.pd-step.active{color:var(--o);}
.pd-step.active::after{background:var(--o);}
.pd-step.done{color:rgba(255,255,255,.3);}
.pd-step.done::after{background:rgba(255,255,255,.1);}
#pdBody{padding:28px;flex:1;min-height:200px;}
#pdFooter{
  padding:16px 28px;border-top:1px solid rgba(255,255,255,.06);
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-shrink:0;
}
.pd-btn-next{
  padding:.65rem 2rem;background:var(--o);color:#111;border:none;
  font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;
  font-family:var(--f);cursor:none;font-weight:700;transition:background .2s;
}
.pd-btn-next:hover{background:#ff8533;}
.pd-btn-next:disabled{background:rgba(255,255,255,.08);color:rgba(255,255,255,.25);}
.pd-btn-back{
  background:none;border:1px solid rgba(255,255,255,.12);color:var(--dim);
  font-size:.52rem;letter-spacing:.18em;text-transform:uppercase;
  font-family:var(--f);cursor:none;padding:.6rem 1.2rem;transition:all .2s;
}
.pd-btn-back:hover{border-color:var(--o);color:var(--o);}
.pd-close{background:none;border:none;color:var(--dim);font-size:1rem;cursor:none;transition:color .2s;padding:0;}
.pd-close:hover{color:var(--o);}
.pd-intro-title{font-size:clamp(1rem,3vw,1.5rem);font-weight:100;margin-bottom:.8rem;letter-spacing:.02em;line-height:1.3;}
.pd-intro-sub{font-size:.78rem;color:var(--mid);line-height:1.8;margin-bottom:1.5rem;}
.pd-steps-preview{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:10px;margin-top:1.2rem;}
.pd-step-tile{background:rgba(255, 107, 0,.05);border:1px solid rgba(255, 107, 0,.15);padding:14px 12px;text-align:center;}
.pd-step-tile-num{font-size:.45rem;color:var(--o);letter-spacing:.3em;margin-bottom:5px;text-transform:uppercase;}
.pd-step-tile-lbl{font-size:.65rem;color:var(--fg);letter-spacing:.08em;}
#pdFormatGroups{max-height:300px;overflow-y:auto;margin-top:8px;}
.pd-summary-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:.78rem;}
.pd-summary-label{color:var(--dim);letter-spacing:.1em;}
.pd-summary-value{color:var(--fg);font-weight:500;}
.pd-total{font-size:1.1rem;font-weight:700;color:var(--o);margin-top:1rem;}

/* ── PRINT POPUP: 3-Schritt-Flow ── */
#printPopup{
  display:none;position:fixed;inset:0;z-index:900;
  background:rgba(0,0,0,.85);backdrop-filter:blur(8px);
  align-items:center;justify-content:center;
}
#printPopupInner{
  background:#1a1a1a;border:1px solid rgba(255,255,255,.08);
  width:min(640px,96vw);max-height:90vh;
  display:flex;flex-direction:column;overflow:hidden;
}
#printPopupHeader{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 28px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0;
}
#printPopupTitle{font-size:.55rem;letter-spacing:.4em;text-transform:uppercase;color:var(--o);}
#printPopupClose{
  background:none;border:none;color:var(--mid);
  font-size:.55rem;letter-spacing:.2em;cursor:none;font-family:var(--f);
  transition:color .2s;
}
#printPopupClose:hover{color:var(--fg);}

/* Step Indicator */
#printStepBar{
  display:flex;align-items:center;gap:0;
  padding:0 28px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0;
}
.print-step-item{
  display:flex;align-items:center;gap:10px;
  padding:14px 0;flex:1;opacity:.3;transition:opacity .3s;
}
.print-step-item.active{opacity:1;}
.print-step-item.done{opacity:.5;}
.print-step-num{
  width:22px;height:22px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:.5rem;letter-spacing:.1em;flex-shrink:0;
}
.print-step-item.active .print-step-num{background:var(--o);border-color:var(--o);color:#111;}
.print-step-item.done .print-step-num{background:rgba(255, 107, 0,.2);border-color:var(--o);color:var(--o);}
.print-step-label{font-size:.48rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mid);}
.print-step-item.active .print-step-label{color:var(--fg);}
.print-step-sep{width:20px;height:1px;background:rgba(255,255,255,.1);flex-shrink:0;}

#printPopupBody{flex:1;overflow-y:auto;padding:28px;}

/* Step 1: Druckerei-Liste */
.printer-option{
  display:flex;align-items:center;gap:16px;
  padding:16px 20px;border:1px solid rgba(255,255,255,.06);
  margin-bottom:8px;cursor:none;transition:border-color .2s,background .2s;
}
.printer-option:hover{border-color:rgba(255, 107, 0,.3);background:rgba(255, 107, 0,.04);}
.printer-option.selected{border-color:var(--o);background:rgba(255, 107, 0,.06);}
.printer-option-name{font-size:.85rem;font-weight:500;color:var(--fg);}
.printer-option-meta{font-size:.62rem;color:var(--dim);margin-top:3px;}
.printer-option-check{
  width:18px;height:18px;border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  margin-left:auto;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.6rem;color:var(--o);
}
.printer-option.selected .printer-option-check{background:var(--o);border-color:var(--o);color:#111;}

/* Step 2: Format-Grid */
.fmt-grid-step{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.print-fmt-card{
  border:1px solid rgba(255,255,255,.07);padding:14px 16px;
  cursor:none;transition:border-color .2s,background .2s;position:relative;
}
.print-fmt-card:hover:not(.unavail){border-color:rgba(255, 107, 0,.3);background:rgba(255, 107, 0,.04);}
.print-fmt-card.selected{border-color:var(--o);background:rgba(255, 107, 0,.06);}
.print-fmt-card.unavail{opacity:.35;pointer-events:none;}
.pfc-std{
  position:absolute;top:8px;right:8px;
  font-size:.42rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.2);
}
.pfc-label{font-size:.9rem;font-weight:500;color:var(--fg);margin-bottom:4px;}
.pfc-dims{font-size:.62rem;color:var(--dim);margin-bottom:6px;}
.pfc-dpi{font-size:.6rem;margin-bottom:6px;}
.pfc-dpi.ok{color:#4CAF50;}
.pfc-dpi.warn{color:var(--o);}
.pfc-dpi.bad{color:#FF5722;}
.pfc-price{font-size:.88rem;font-weight:700;color:var(--o);}
.pfc-selected-check{
  display:none;position:absolute;top:8px;left:8px;
  width:16px;height:16px;background:var(--o);border-radius:50%;
  font-size:.5rem;color:#111;align-items:center;justify-content:center;
}
.print-fmt-card.selected .pfc-selected-check{display:flex;}

/* Step 3: Zusammenfassung */
.print-summary-wrap{display:flex;flex-direction:column;gap:16px;}
.print-summary-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05);
  font-size:.75rem;
}
.print-summary-label{color:var(--dim);letter-spacing:.1em;text-transform:uppercase;font-size:.5rem;}
.print-summary-val{color:var(--fg);font-weight:500;}
.print-summary-price{font-size:1.4rem;font-weight:700;color:var(--o);}
.print-summary-preview{
  display:flex;align-items:center;gap:16px;
  padding:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
}
.print-summary-img{width:60px;height:80px;object-fit:cover;flex-shrink:0;}
.print-summary-text{flex:1;}
.print-summary-title{font-size:.88rem;font-weight:500;color:var(--fg);margin-bottom:4px;}

#printPopupFooter{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;border-top:1px solid rgba(255,255,255,.06);
  flex-shrink:0;gap:12px;
}
.pp-btn-back{
  background:none;border:1px solid rgba(255,255,255,.1);color:var(--mid);
  font-size:.5rem;letter-spacing:.25em;text-transform:uppercase;
  padding:10px 20px;cursor:none;font-family:var(--f);transition:border-color .2s,color .2s;
}
.pp-btn-back:hover{border-color:rgba(255,255,255,.3);color:var(--fg);}
.pp-btn-next{
  background:var(--o);border:none;color:#111;
  font-size:.52rem;letter-spacing:.3em;text-transform:uppercase;font-weight:700;
  padding:12px 28px;cursor:none;font-family:var(--f);transition:background .2s,transform .15s;
  flex:1;max-width:280px;
}
.pp-btn-next:hover{background:#ff8533;transform:translateY(-1px);}
.pp-btn-next:disabled{background:rgba(255,255,255,.1);color:rgba(255,255,255,.3);transform:none;}


/* Meta-Leiste (Print-Specs + Digital-Infos) */
#detailMeta{
  display:flex;gap:0;flex-wrap:nowrap;
  margin-top:auto;margin-bottom:0;
  border-top:1px solid rgba(255,255,255,.07);
  background:rgba(0,0,0,.25);
  border-radius:0 0 2px 2px;
  overflow:visible;/* Tooltip darf rausragen */
}
.d-meta-item{
  display:flex;flex-direction:column;gap:4px;align-items:flex-start;flex:1;min-width:0;
  padding:10px 10px 10px 12px;
  border-right:1px solid rgba(255,255,255,.05);
  position:relative;
  transition:background .18s;
}
.d-meta-item:last-child{border-right:none;}
.d-meta-item:hover{background:rgba(255, 107, 0,.05);}
.d-meta-label{
  font-size:.37rem;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(255,255,255,.22);white-space:nowrap;
}
.d-meta-val{
  font-size:.72rem;font-weight:500;
  color:rgba(255,255,255,.7);letter-spacing:.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .18s;
}
.d-meta-item:hover .d-meta-val{color:rgba(255,255,255,.9);}
.d-meta-val.has-tip{
  cursor:help;
  border-bottom:1px dashed rgba(255, 107, 0,.4);
  color:var(--o);
}
.d-meta-item:hover .d-meta-val.has-tip{color:var(--o);}
/* Tooltip */
.d-meta-tip{
  display:none;
  position:absolute;bottom:calc(100% + 8px);left:0;
  background:#181818;
  border:1px solid rgba(255, 107, 0,.3);
  padding:10px 14px;z-index:400;
  white-space:nowrap;pointer-events:none;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  min-width:180px;
}
.d-meta-tip-row{
  display:flex;align-items:baseline;gap:10px;
  font-size:.58rem;letter-spacing:.08em;color:rgba(255,255,255,.7);line-height:1.9;
}
.d-meta-tip-kuerzel{
  color:var(--o);font-weight:700;
  min-width:52px;flex-shrink:0;font-size:.55rem;letter-spacing:.12em;
}
.d-meta-item:hover .d-meta-tip,
.d-meta-item.tip-open .d-meta-tip{display:block;}

/* Step-Zurück im Checkout-Header */
.panel-step-back{
  background:none;border:none;color:var(--dim);
  font-size:.85rem;cursor:none;padding:0 10px 0 0;
  line-height:1;transition:color .15s;vertical-align:middle;
  font-family:var(--f);
}
.panel-step-back:hover{color:var(--fg);}

/* Lore-Teaser */
#detailLoreTeaser{
  font-size:.78rem;color:var(--mid);line-height:1.8;letter-spacing:.04em;
  font-style:italic;margin-bottom:20px;
  padding-left:12px;border-left:2px solid rgba(255, 107, 0,.3);
}
#btnLoreOpen{
  font-size:.56rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--o);cursor:none;background:none;border:none;
  padding:0;margin-bottom:28px;display:flex;align-items:center;gap:8px;
  transition:letter-spacing .2s;
}
#btnLoreOpen:hover{letter-spacing:.5em;}
#btnLoreOpen::before{content:'◈';font-size:.7rem;}

/* Rating */
#detailRating{margin-bottom:28px;}
.rating-stars-row{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.rating-stars{font-size:1.1rem;letter-spacing:.1em;color:var(--o);}
.rating-count{font-size:.68rem;color:var(--dim);letter-spacing:.12em;}
.rating-bar-wrap{display:flex;flex-direction:column;gap:4px;}
.rating-bar-row{display:flex;align-items:center;gap:8px;font-size:.62rem;color:var(--dim);}
.rating-bar{flex:1;height:3px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden;}
.rating-bar-fill{height:100%;background:var(--o);border-radius:2px;transition:width .6s var(--ez);}

/* Kommentare */
#detailComments{margin-bottom:28px;display:none;}
#btnShowComments{
  width:100%;padding:10px 16px;margin-bottom:20px;
  border:1px solid rgba(255,255,255,.08);color:var(--dim);
  font-size:.6rem;letter-spacing:.35em;text-transform:uppercase;
  cursor:none;background:none;transition:border-color .2s,color .2s;
}
#btnShowComments:hover{border-color:var(--o);color:var(--o);}
.comment-item{
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.04);
}
.comment-stars{font-size:.75rem;color:var(--o);letter-spacing:.08em;margin-bottom:4px;}
.comment-text{font-size:.78rem;color:var(--mid);line-height:1.7;margin-bottom:6px;}
.comment-meta{font-size:.62rem;color:var(--dim);letter-spacing:.1em;}

/* Panel toggle */
#btnPanelToggle{
  position:absolute;left:-36px;top:50%;transform:translateY(-50%);
  width:36px;height:60px;
  background:rgba(14,14,14,.6);border:1px solid rgba(255,255,255,.07);
  border-right:none;color:rgba(255,255,255,.35);
  font-size:.65rem;cursor:none;display:flex;align-items:center;justify-content:center;
  writing-mode:vertical-rl;letter-spacing:.2em;text-transform:uppercase;
  transition:color .2s,background .2s;
}
#btnPanelToggle:hover{color:var(--o);background:rgba(14,14,14,.9);}
#detailInfo.panel-collapsed #btnPanelToggle{left:-48px;width:48px;}

/* ── Detail-Info: Touch/Tablet — FAB öffnen/schließen (kein Rand-Hover) ── */
#btnDetailPanelOpen{
  display:none;
  position:fixed;
  right:max(0px, env(safe-area-inset-right, 0px));
  top:50%;
  transform:translateY(-50%);
  z-index:835;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:52px;
  min-height:120px;
  padding:14px 8px;
  margin:0;
  border:1px solid rgba(255, 107, 0,.35);
  border-right:none;
  border-radius:10px 0 0 10px;
  background:rgba(12,12,14,.94);
  color:var(--o);
  cursor:none;
  font-family:var(--f);
  box-shadow:-4px 0 24px rgba(0,0,0,.45);
  transition:background .25s,border-color .25s;
}
#btnDetailPanelOpen:hover{background:rgba(20,18,16,.98);border-color:rgba(255, 107, 0,.55);}
.detail-panel-open-fab__lbl{
  font-size:.42rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(255, 107, 0,.85);
  writing-mode:vertical-rl;
  transform:rotate(180deg);
}
.detail-fab-arrows{display:flex;flex-direction:column;align-items:center;gap:1px;}
.detail-fab-arrows .dfa{
  font-size:.72rem;line-height:1;color:rgba(255, 107, 0,.65);
  animation:detailFabPulse 1.6s ease-in-out infinite;
}
.detail-fab-arrows .dfa:nth-child(1){animation-delay:0s;}
.detail-fab-arrows .dfa:nth-child(2){animation-delay:.15s;}
.detail-fab-arrows .dfa:nth-child(3){animation-delay:.3s;}
.detail-fab-arrows--close .dfa{animation-name:detailFabPulseClose;}
@keyframes detailFabPulse{
  0%,100%{opacity:.35;transform:translateX(0);}
  50%{opacity:1;transform:translateX(-4px);}
}
@keyframes detailFabPulseClose{
  0%,100%{opacity:.35;transform:translateX(0);}
  50%{opacity:1;transform:translateX(4px);}
}
#btnDetailPanelClose{
  display:none;
  position:absolute;
  left:0;top:50%;
  transform:translate(-100%,-50%);
  z-index:822;
  width:48px;min-height:104px;
  padding:12px 6px;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;
  margin:0;
  border:1px solid rgba(255, 107, 0,.35);
  border-right:none;
  border-radius:10px 0 0 10px;
  background:rgba(12,12,14,.92);
  color:var(--o);
  cursor:none;
  font-family:var(--f);
  box-shadow:-6px 0 20px rgba(0,0,0,.35);
}
#btnDetailPanelClose:hover{border-color:rgba(255, 107, 0,.55);background:rgba(18,16,14,.96);}
@media (max-width:1023px){
  body.detail-active:not(.info-panel-open):not(.panel-open) #btnDetailPanelOpen{display:flex;}
  body.detail-active.info-panel-open:not(.panel-open) #btnDetailPanelClose{display:flex;}
}
@media (min-width:1024px){
  #btnDetailPanelOpen,#btnDetailPanelClose{display:none !important;}
}

/* Schmale Viewports: Panel war min(420px,40vw) → viel zu schmal auf Phone */
@media (max-width:1023px){
  body.detail-active #detailInfo{
    width:min(88vw, 560px) !important;
    max-width:min(88vw, 560px) !important;
  }
}
@media (max-width:767px){
  body.detail-active #detailInfo{
    width:90vw !important;
    max-width:90vw !important;
  }
}
@media (prefers-reduced-motion:reduce){
  .detail-fab-arrows .dfa{animation:none !important;}
}

/* ══ STATUS: Wartungsmodus ═══════════════════════════════════════ */
#maintenanceBanner{
  display:none;
  text-align:center;padding:20px;
  background:rgba(255,87,34,.08);border-bottom:1px solid rgba(255,87,34,.2);
  font-size:.72rem;letter-spacing:.15em;color:#FF5722;
  text-transform:uppercase;
}

/* ══ FIX #49 — FEED STATES: LOADING / EMPTY / ERROR ═══════════════ */

/* ── Skeleton Loading ──────────────────────────────────────────── */
#feedLoader{display:contents;}/* A04-B6: grid-column entfernt — ignoriert bei display:contents */

.skel-card{
  background:var(--bg2);border:1px solid rgba(255,255,255,.06);
  border-radius:2px;
  aspect-ratio:2/3;position:relative;overflow:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,.15);
}
.skel-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.04) 50%,transparent 100%);
  animation:skelShimmer 1.6s infinite;
}
@keyframes skelShimmer{0%{transform:translateX(-100%);}100%{transform:translateX(100%);}}
.skel-img{background:var(--bg3);height:78%;margin-bottom:0;}
.skel-info{padding:12px 14px;}
.skel-line{height:8px;background:rgba(255,255,255,.06);border-radius:1px;margin-bottom:8px;}
.skel-line-short{width:55%;}

/* ── Empty State ───────────────────────────────────────────────── */
#feedEmpty{
  grid-column:1/-1;text-align:center;padding:80px 20px;
}
.feed-empty-icon{
  font-size:2.5rem;margin-bottom:1.2rem;opacity:.25;display:block;
}
.feed-empty-title{
  font-size:.62rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--dim);margin-bottom:.6rem;
}
.feed-empty-sub{
  font-size:.8rem;color:var(--mid);line-height:1.8;letter-spacing:.06em;
  max-width:280px;margin:0 auto;
}

/* ── Panel-Cart-Styles ─────────────────────────────────────────── */
.panel-cart-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex:1;padding:48px 20px;text-align:center;gap:12px;
}
.panel-cart-empty-icon{font-size:2.2rem;opacity:.25;}
.panel-cart-empty-txt{
  font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);
}
.panel-cart-list{display:flex;flex-direction:column;gap:0;flex:1;}
.panel-cart-item{
  display:flex;align-items:center;gap:14px;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.05);
  transition:background .15s;
}
.panel-cart-item:hover{background:rgba(255,255,255,.02);}
.panel-cart-thumb{
  width:46px;height:60px;object-fit:cover;
  flex-shrink:0;border:1px solid rgba(255,255,255,.06);
}
.panel-cart-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.panel-cart-name{font-size:.8rem;font-weight:500;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.panel-cart-sub{font-size:.6rem;color:var(--dim);letter-spacing:.04em;}
.panel-cart-price{font-size:.78rem;color:var(--o);margin-top:2px;}
.panel-cart-qty{
  display:flex;align-items:center;gap:4px;flex-shrink:0;
}
.panel-cart-qty button{
  background:rgba(255,255,255,.06);border:none;color:var(--fg);
  width:24px;height:24px;cursor:none;font-family:var(--f);font-size:.85rem;
  transition:background .15s;display:flex;align-items:center;justify-content:center;
}
.panel-cart-qty button:hover{background:rgba(255,255,255,.12);}
.panel-cart-qty span{font-size:.72rem;color:var(--fg);min-width:16px;text-align:center;}
.panel-cart-rm{
  background:none !important;color:var(--mid) !important;
  font-size:.85rem;margin-left:4px;
}
.panel-cart-rm:hover{color:var(--fg) !important;}
.panel-cart-footer{
  padding:16px 0 0;border-top:1px solid rgba(255,255,255,.07);
  display:flex;flex-direction:column;gap:8px;
  margin-top:auto;flex-shrink:0;
}
.panel-cart-total-row{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:8px 0 12px;
}
.panel-cart-total-lbl{font-size:.52rem;letter-spacing:.25em;text-transform:uppercase;color:var(--dim);}
.panel-cart-total-val{font-size:1.15rem;font-weight:700;color:var(--o);}
.panel-cta-btn{
  width:100%;background:var(--o);border:none;color:#111;
  font-size:.52rem;font-weight:700;letter-spacing:.35em;text-transform:uppercase;
  padding:14px;cursor:none;font-family:var(--f);
  transition:background .2s,transform .15s;
}
.panel-cta-btn:hover{background:#ff8c00;transform:translateY(-1px);}
.panel-back-btn{
  width:100%;background:none;
  border:1px solid rgba(255,255,255,.1);color:var(--mid);
  font-size:.48rem;letter-spacing:.3em;text-transform:uppercase;
  padding:10px;cursor:none;font-family:var(--f);
  transition:border-color .2s,color .2s;
}
.panel-back-btn:hover{border-color:rgba(255,255,255,.25);color:var(--fg);}

/* Checkout-Steps im Panel */
.panel-checkout-steps{
  display:flex;flex-direction:column;flex:1;
  padding:20px 28px 60px;overflow-y:auto;
}
.panel-checkout-steps .cart-step{display:none;}
.panel-checkout-steps .cart-step.active{display:block;}

/* ── Error State ───────────────────────────────────────────────── */
.feed-error-wrap{
  grid-column:1/-1;text-align:center;padding:60px 20px;
}
.feed-error-icon{font-size:1.5rem;opacity:.3;margin-bottom:1rem;display:block;}
.feed-error-title{
  font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,80,60,.7);margin-bottom:.5rem;
}
.feed-error-sub{font-size:.78rem;color:var(--mid);margin-bottom:1.4rem;letter-spacing:.04em;}
.feed-retry-btn{
  padding:.55rem 1.6rem;background:transparent;
  border:1px solid rgba(255, 107, 0,.4);color:var(--o);
  cursor:pointer;font-size:.58rem;letter-spacing:.25em;text-transform:uppercase;
  transition:background .2s,border-color .2s;
}
.feed-retry-btn:hover{background:rgba(255, 107, 0,.08);border-color:var(--o);}

/* ── Wartungs-Screen ──────────────────────────────────────────── */
.maint-screen{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:80vh;padding:60px 24px;text-align:center;
}
.maint-screen-img{
  max-width:min(480px,88vw);width:100%;height:auto;
  margin-bottom:40px;opacity:.92;
}
.maint-screen-icon{font-size:4rem;margin-bottom:28px;opacity:.35;}
.maint-screen-msg{
  font-size:clamp(1rem,2.5vw,1.35rem);
  color:var(--mid);letter-spacing:.04em;line-height:1.65;
  max-width:520px;
}

/* ── Spinner (infinite scroll) ────────────────────────────────── */
.spinner{
  width:20px;height:20px;border:1px solid var(--dim);
  border-top-color:var(--o);border-radius:50%;
  animation:spin .8s linear infinite;display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ══ CHECKOUT MODAL ══════════════════════════════════════════════ */
/* ── CART OVERLAY ──────────────────────────────────────────────── */
#cartOverlay{
  position:fixed;top:0;right:0;bottom:0;z-index:980;
  width:min(440px,100vw);
  background:rgba(12,12,12,.97);
  backdrop-filter:blur(18px) saturate(.8);
  -webkit-backdrop-filter:blur(18px) saturate(.8);
  border-left:1px solid rgba(255,255,255,.06);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .45s var(--ez);
  pointer-events:none;
}
#cartOverlay.open{transform:translateX(0);pointer-events:auto;}#cartOverlay.open{transform:translateX(0);pointer-events:auto;}

/* ── EDGE INDICATOR ── */
#panelEdge{
  position:fixed;top:50%;right:0;transform:translateY(-50%);
  z-index:970;cursor:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:14px 5px;
  background:rgba(255, 107, 0,.08);
  border:1px solid rgba(255, 107, 0,.15);
  border-right:none;
  backdrop-filter:blur(12px);
  transition:opacity .4s, background .3s;
  width:20px;
  border-radius:4px 0 0 4px;
}
#panelEdge:hover{background:rgba(255, 107, 0,.15);}
#panelEdge:hover .edge-arrows { animation-play-state: running; }
.edge-arrows{display:flex;flex-direction:column;align-items:center;gap:1px;}
.ea{
  font-size:.7rem;color:rgba(255, 107, 0,.5);
  display:block;
  animation:edgePulse 1.8s ease-in-out infinite;
  animation-play-state:running;
}
.ea:nth-child(1){animation-delay:0s;}
.ea:nth-child(2){animation-delay:.2s;}
.ea:nth-child(3){animation-delay:.4s;}
@keyframes edgePulse{
  0%,100%{opacity:.2;transform:translateX(0);}
  50%{opacity:.8;transform:translateX(-3px);}
}
#edgeBadge{
  width:16px;height:16px;border-radius:50%;
  background:var(--o);color:#111;
  font-size:.45rem;font-weight:800;
  display:none;align-items:center;justify-content:center;
  margin-top:4px;
}
#edgeBadge.visible{display:flex;}
/* Hide edge when panel is open */
#cartOverlay.open ~ #panelEdge,
body.panel-open #panelEdge{opacity:0;pointer-events:none;}

#cartScrim{
  position:fixed;inset:0;z-index:979;
  background:rgba(0,0,0,.55);
  opacity:0;transition:opacity .4s;pointer-events:none;
}
#cartScrim.on{opacity:1;pointer-events:auto;}
#cartHeader{
  padding:20px 28px;border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
#cartHeaderTitle{
  font-size:.58rem;letter-spacing:.45em;text-transform:uppercase;color:var(--o);
  display:flex;align-items:center;gap:10px;
}
#cartCount{
  font-size:.6rem;background:var(--o);color:#111;
  padding:1px 6px;font-weight:800;min-width:18px;text-align:center;
}
#btnCartClose{
  background:none;border:1px solid rgba(255,255,255,.12);color:var(--fg);font-family:var(--f);
  font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;cursor:none;
  transition:color .2s,border-color .2s;padding:4px 12px;
}
#btnCartClose:hover{color:var(--o);border-color:var(--o);}

/* Cart Items Area */
#cartItems{
  flex:1;overflow-y:auto;padding:20px 28px;
  scrollbar-width:thin;scrollbar-color:rgba(255, 107, 0,.2) transparent;
}
#cartEmpty{
  text-align:center;padding:60px 20px;
  font-size:.72rem;color:var(--dim);letter-spacing:.2em;text-transform:uppercase;
}
.cart-item{
  display:grid;grid-template-columns:56px 1fr auto;gap:14px;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.04);
  align-items:start;
}
.cart-item-thumb{
  width:56px;height:76px;object-fit:cover;
  background:var(--bg3);border:1px solid rgba(255,255,255,.05);
}
.cart-item-info{min-width:0;}
.cart-item-name{
  font-size:.82rem;color:var(--fg);margin-bottom:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cart-item-variant{font-size:.68rem;color:var(--dim);letter-spacing:.06em;margin-bottom:6px;}
.cart-item-qty{
  display:flex;align-items:center;gap:8px;margin-top:4px;
}
.cart-qty-btn{
  width:22px;height:22px;border:1px solid rgba(255,255,255,.12);
  background:none;color:var(--mid);font-size:.9rem;cursor:none;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .15s,color .15s;
}
.cart-qty-btn:hover{border-color:var(--o);color:var(--o);}
.cart-qty-val{font-size:.8rem;color:var(--fg);min-width:20px;text-align:center;}
.cart-item-price{font-size:.9rem;font-weight:700;color:var(--o);white-space:nowrap;}
.cart-item-remove{
  background:none;border:none;color:rgba(255,255,255,.2);
  font-size:.75rem;cursor:none;padding:0;margin-top:2px;
  transition:color .15s;display:block;
}
.cart-item-remove:hover{color:#ff5722;}

/* Rabatt */
#cartDiscountRow{
  padding:16px 28px;border-top:1px solid rgba(255,255,255,.04);
  flex-shrink:0;
}
.cart-disc-wrap{display:flex;gap:8px;}
#cartDiscountInput{
  flex:1;background:var(--bg3);border:1px solid rgba(255,255,255,.1);
  color:var(--fg);font-family:var(--f);font-size:.8rem;
  padding:9px 12px;letter-spacing:.08em;text-transform:uppercase;
  transition:border-color .2s;
}
#cartDiscountInput:focus{border-color:rgba(255, 107, 0,.4);}
#cartDiscountInput::placeholder{text-transform:none;color:var(--dim);letter-spacing:.04em;}
#btnCartDiscount{
  padding:9px 16px;border:1px solid rgba(255, 107, 0,.3);
  color:var(--o);font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;
  cursor:none;background:rgba(255, 107, 0,.05);transition:background .2s;
}
#btnCartDiscount:hover{background:rgba(255, 107, 0,.12);}
#cartDiscountMsg{font-size:.68rem;margin-top:6px;letter-spacing:.08em;min-height:16px;}
#cartDiscountMsg.ok{color:#4CAF50;}
#cartDiscountMsg.err{color:#ff5722;}

/* ── Rabatt-Effektstufen ─────────────────────────────────────── */

/* Stufe 1: ≥20% — leichter Glow auf Input */
@keyframes discGlow20{
  0%,100%{box-shadow:0 0 0 0 rgba(74,200,100,.0);}
  50%{box-shadow:0 0 12px rgba(74,200,100,.25);}
}
#cartDiscountRow.disc-20 #cartDiscountInput{
  border-color:rgba(74,200,100,.5);
  animation:discGlow20 2.5s ease-in-out infinite;
}
#cartDiscountRow.disc-20 #cartDiscountMsg{
  color:#4CAF50;
}

/* Stufe 2: ≥50% — Farbveränderung + Hintergrund-Schimmer */
@keyframes discShimmer50{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}
@keyframes discGlow50{
  0%,100%{box-shadow:0 0 0 0 rgba(255,200,50,.0);}
  50%{box-shadow:0 0 20px rgba(255,200,50,.3),0 0 40px rgba(255,200,50,.1);}
}
#cartDiscountRow.disc-50{
  background:linear-gradient(135deg,rgba(255,200,50,.04) 0%,transparent 50%,rgba(255,200,50,.04) 100%);
}
#cartDiscountRow.disc-50 #cartDiscountInput{
  border-color:rgba(255,200,50,.6);
  color:#ffd700;
  animation:discGlow50 2s ease-in-out infinite;
}
#cartDiscountRow.disc-50 #cartDiscountMsg{
  color:#ffd700;
}
/* Partikel-Container */
#discParticles{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1;
}
.disc-particle{
  position:absolute;bottom:0;
  width:3px;border-radius:2px;
  animation:particleRise var(--dur,1.5s) var(--delay,0s) ease-out infinite;
  opacity:0;
}
@keyframes particleRise{
  0%{transform:translateY(0) translateX(0) scale(1);opacity:.8;}
  50%{transform:translateY(-40px) translateX(var(--dx,8px)) scale(.7);opacity:.5;}
  100%{transform:translateY(-80px) translateX(var(--dx2,14px)) scale(.2);opacity:0;}
}

/* Stufe 3: ≥80% — dynamische Lichtbewegung */
@keyframes discLight80{
  0%{background-position:-100% 0;}
  100%{background-position:200% 0;}
}
@keyframes discGlow80{
  0%,100%{box-shadow:0 0 0 0 rgba(255, 107, 0,.0);}
  50%{box-shadow:0 0 28px rgba(255, 107, 0,.45),0 0 60px rgba(255, 107, 0,.2);}
}
@keyframes discLightPulse{
  0%,100%{opacity:.0;}
  50%{opacity:1;}
}
#cartDiscountRow.disc-80{
  position:relative;overflow:visible;
}
#cartDiscountRow.disc-80 #cartDiscountInput{
  border-color:rgba(255, 107, 0,.8);
  color:var(--o);
  animation:discGlow80 1.8s ease-in-out infinite;
}
#cartDiscountRow.disc-80::before{
  content:'';position:absolute;inset:-1px;z-index:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255, 107, 0,.15) 50%,transparent 100%);
  background-size:200% 100%;
  animation:discLight80 2s linear infinite;
  pointer-events:none;
}
#cartDiscountRow.disc-80 #cartDiscountMsg{
  color:var(--o);font-weight:600;
}

/* Stufe 4: 100% — stärkste Effektstufe */
@keyframes disc100Glow{
  0%,100%{box-shadow:0 0 0 0 rgba(255, 107, 0,.0);}
  30%{box-shadow:0 0 40px rgba(255, 107, 0,.7),0 0 80px rgba(255, 107, 0,.4),0 0 120px rgba(255, 107, 0,.15);}
  60%{box-shadow:0 0 30px rgba(255,200,50,.6),0 0 60px rgba(255,200,50,.3);}
}
@keyframes disc100Text{
  0%,100%{letter-spacing:.2em;color:#ffd700;}
  50%{letter-spacing:.5em;color:var(--o);}
}
@keyframes disc100Border{
  0%{border-color:rgba(255, 107, 0,.6);}
  33%{border-color:rgba(255,200,50,.9);}
  66%{border-color:rgba(255,255,255,.6);}
  100%{border-color:rgba(255, 107, 0,.6);}
}
#cartDiscountRow.disc-100 #cartDiscountInput{
  animation:disc100Border 2s linear infinite,disc100Glow 2s ease-in-out infinite;
  color:#ffd700;font-weight:700;letter-spacing:.12em;
}
#cartDiscountRow.disc-100 #cartDiscountMsg{
  animation:disc100Text 2.5s ease-in-out infinite;
  font-weight:700;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
}
#cartDiscountRow.disc-100::after{
  content:'✦ GRATIS ✦';
  position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  font-size:.52rem;letter-spacing:.5em;text-transform:uppercase;
  color:var(--o);background:var(--bg2);padding:0 10px;
  animation:discLightPulse 2s ease-in-out infinite;
  pointer-events:none;
}

/* Totals */
#cartTotals{
  padding:16px 28px;border-top:1px solid rgba(255,255,255,.06);flex-shrink:0;
}
.cart-total-row{
  display:flex;justify-content:space-between;
  font-size:.75rem;color:var(--dim);padding:4px 0;
}
.cart-total-row.grand{
  font-size:1.1rem;font-weight:700;color:var(--o);
  padding-top:12px;margin-top:4px;border-top:1px solid rgba(255,255,255,.08);
}
.cart-total-row.discount-row{color:#4CAF50;}
.cart-total-row.free-row{
  color:#4CAF50;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
}

/* Checkout Footer */
#cartFooter{
  padding:20px 28px;border-top:1px solid rgba(255,255,255,.06);flex-shrink:0;
}
.cart-field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;}
.cart-label{font-size:.52rem;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);}
.cart-tip-btn{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:var(--mid);font-family:var(--f);font-size:.52rem;letter-spacing:.15em;
  padding:7px 14px;cursor:none;transition:all .2s;
}
.cart-tip-btn:hover,.cart-tip-btn.active{
  background:rgba(255, 107, 0,.1);border-color:var(--o);color:var(--o);
}
.cart-input{
  background:var(--bg3);border:1px solid rgba(255,255,255,.1);
  color:var(--fg);font-family:var(--f);font-size:.82rem;
  padding:10px 12px;transition:border-color .2s;
}
.cart-input:focus{border-color:rgba(255, 107, 0,.5);}
#btnCartCheckout{
  width:100%;padding:15px;margin-top:4px;
  background:var(--o);color:#111;
  font-size:.62rem;letter-spacing:.45em;text-transform:uppercase;font-weight:800;
  cursor:none;border:none;transition:background .2s,transform .2s var(--ez);
}
#btnCartCheckout:hover{background:#ff8533;transform:translateY(-2px);}
#btnCartCheckout:disabled{background:var(--dim);color:var(--mid);transform:none;}

/* Legacy: altes Modal verstecken */
#checkoutModal{display:none!important;}
#checkoutInner{display:none!important;}
#checkoutTitle{
  font-size:.6rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--o);margin-bottom:24px;
}
.co-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.co-label{font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);}
.co-input{
  background:var(--bg3);border:1px solid var(--dim);color:var(--fg);
  padding:10px 14px;font-size:.82rem;transition:border-color .2s;
}
.co-input:focus{border-color:rgba(255, 107, 0,.5);}
.co-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
#btnCheckoutSubmit{
  width:100%;padding:15px;margin-top:8px;
  background:var(--o);color:#111;
  font-size:.62rem;letter-spacing:.4em;text-transform:uppercase;font-weight:700;
  cursor:none;transition:background .2s;
}
#btnCheckoutSubmit:hover{background:#ff7a1a;}
#btnCheckoutClose{
  float:right;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--dim);cursor:none;transition:color .2s;margin-bottom:24px;
}
#btnCheckoutClose:hover{color:var(--o);}
.co-summary{
  background:var(--bg3);border:1px solid rgba(255,255,255,.05);
  padding:16px;margin-bottom:20px;
}
.co-summary-item{
  display:flex;justify-content:space-between;
  font-size:.78rem;color:var(--mid);padding:4px 0;
}
.co-summary-total{
  display:flex;justify-content:space-between;
  font-size:.9rem;font-weight:700;color:var(--o);
  padding-top:10px;margin-top:8px;
  border-top:1px solid rgba(255,255,255,.06);
}

/* Rabattcode-Zeile */
#discountRow{display:flex;gap:8px;margin-bottom:16px;}
#discountInput{
  flex:1;background:var(--bg3);border:1px solid var(--dim);color:var(--fg);
  padding:9px 12px;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.1em;transition:border-color .2s;
}
#discountInput:focus{border-color:rgba(255, 107, 0,.4);}
#btnDiscountApply{
  padding:9px 16px;border:1px solid var(--dim);color:var(--mid);
  font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;
  cursor:none;transition:all .2s;
}
#btnDiscountApply:hover{border-color:var(--o);color:var(--o);}
#discountMsg{font-size:.68rem;margin-bottom:8px;min-height:16px;}
#discountMsg.ok{color:#4CAF50;}
#discountMsg.err{color:#FF5722;}

/* ══ MOBILE ══════════════════════════════════════════════════════ */
@media(max-width:680px){
  #nav{ /* FIX SHP-01: Markup nutzt <nav id="nav">, nicht #topbar */padding:0 24px;}
  #shopLogo{display:none;}
  #feedHero,#feedFilters,#feedGrid{padding-left:24px;padding-right:24px;}
  #feedGrid{grid-template-columns:repeat(2,1fr);gap:1px;}
  #detailInner{padding:0 24px 60px;}
}
@media(max-width:400px){
  #feedGrid{grid-template-columns:1fr;}
}
/* ══ CHECKOUT SUCCESS & DOWNLOAD ════════════════════════════════ */

/* ══ ADRESSEINGABE + ORDER-STATUS ═══════════════════════════════ */
#cartAddressSection{
  padding:16px 28px;border-top:1px solid rgba(255,255,255,.04);flex-shrink:0;display:none;
}
.cart-addr-title{
  font-size:.52rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--dim);margin-bottom:12px;
}
.cart-addr-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin-bottom:0;
}
.cart-addr-grid .cart-field{margin-bottom:0;}
.cart-field.full{grid-column:1/-1;}

/* Order Status Banner */
#orderStatusBanner{
  position:fixed;bottom:0;left:0;right:0;z-index:970;
  background:rgba(12,12,12,.97);border-top:1px solid rgba(255, 107, 0,.2);
  padding:16px 28px;
  display:none;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;
  backdrop-filter:blur(12px);
  animation:slideUpBanner .4s var(--ez) both;
}
@keyframes slideUpBanner{from{transform:translateY(100%);}to{transform:translateY(0);}}
#orderStatusBanner.show{display:flex;}
.osb-status{
  display:flex;align-items:center;gap:12px;
}
.osb-dot{
  width:8px;height:8px;border-radius:50%;background:var(--o);
  animation:pulseDot 2s ease-in-out infinite;flex-shrink:0;
}
@keyframes pulseDot{0%,100%{opacity:1;}50%{opacity:.3;}}
.osb-dot.done{background:#4CAF50;animation:none;}
.osb-text{font-size:.72rem;color:var(--mid);letter-spacing:.06em;}
.osb-nr{font-size:.68rem;color:var(--dim);margin-top:2px;letter-spacing:.1em;}
.osb-actions{display:flex;gap:8px;}
.osb-btn{
  padding:8px 16px;border:1px solid rgba(255,255,255,.1);color:var(--mid);
  font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;
  cursor:none;background:none;transition:border-color .2s,color .2s;font-family:var(--f);
}
.osb-btn:hover{border-color:var(--o);color:var(--o);}
.osb-btn.primary{border-color:rgba(255, 107, 0,.3);color:var(--o);background:rgba(255, 107, 0,.06);}
.osb-close{
  background:none;border:none;color:var(--dim);font-size:.75rem;
  cursor:none;padding:0;transition:color .2s;font-family:var(--f);flex-shrink:0;
}
.osb-close:hover{color:var(--o);}
#unlockOverlay{
  position:fixed;inset:0;z-index:990;
  display:none;flex-direction:column;
  align-items:center;justify-content:center;
  background:rgba(12,12,12,.97);
  backdrop-filter:blur(20px);
}
#unlockOverlay.open{display:flex;}

/* Unlock-Animation */
@keyframes unlockRing{
  0%{transform:scale(.6);opacity:0;}
  60%{transform:scale(1.08);}
  100%{transform:scale(1);opacity:1;}
}
@keyframes unlockPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255, 107, 0,0);}
  50%{box-shadow:0 0 0 28px rgba(255, 107, 0,.08),0 0 80px rgba(255, 107, 0,.15);}
}
@keyframes unlockCheck{
  0%{stroke-dashoffset:60;}
  100%{stroke-dashoffset:0;}
}
@keyframes fadeSlideUp{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:translateY(0);}
}
.unlock-ring{
  width:100px;height:100px;border-radius:50%;
  border:2px solid rgba(255, 107, 0,.4);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:32px;
  animation:unlockRing .6s var(--ez) both,unlockPulse 2.5s 0.6s ease-in-out infinite;
}
.unlock-ring svg{
  width:42px;height:42px;
}
.unlock-ring .check-path{
  stroke:var(--o);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:60;stroke-dashoffset:60;fill:none;
  animation:unlockCheck .5s .5s var(--ez) forwards;
}
.unlock-title{
  font-size:clamp(1.6rem,4vw,2.8rem);font-weight:100;
  letter-spacing:-.01em;text-align:center;margin-bottom:8px;
  animation:fadeSlideUp .6s .4s var(--ez) both;
}
.unlock-title strong{font-weight:700;color:var(--o);}
.unlock-subtitle{
  font-size:.78rem;color:var(--mid);letter-spacing:.08em;
  text-align:center;margin-bottom:48px;
  animation:fadeSlideUp .6s .55s var(--ez) both;
}

/* Download-Bereich */
#downloadArea{
  width:100%;max-width:480px;
  animation:fadeSlideUp .6s .7s var(--ez) both;
}
.dl-item{
  background:var(--bg2);border:1px solid rgba(255,255,255,.07);
  padding:20px 24px;margin-bottom:12px;
}
.dl-item-top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;gap:12px;
}
.dl-item-name{
  font-size:.85rem;font-weight:500;color:var(--fg);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;
}
.dl-item-size{font-size:.68rem;color:var(--dim);flex-shrink:0;}
.dl-prog-wrap{
  height:3px;background:rgba(255,255,255,.07);
  border-radius:2px;overflow:hidden;margin-bottom:10px;
  display:none;
}
.dl-prog-bar{
  height:100%;background:var(--o);width:0%;
  transition:width .3s;border-radius:2px;
}
.dl-prog-txt{
  font-size:.68rem;color:var(--dim);margin-bottom:10px;
  letter-spacing:.06em;display:none;
}
.dl-actions{display:flex;gap:8px;flex-wrap:wrap;}
.dl-btn-start{
  padding:10px 24px;background:var(--o);color:#111;
  font-size:.6rem;letter-spacing:.4em;text-transform:uppercase;font-weight:700;
  cursor:none;border:none;transition:background .2s,transform .2s var(--ez);
}
.dl-btn-start:hover{background:#ff8533;transform:translateY(-2px);}
.dl-btn-start:disabled{background:var(--dim);color:var(--mid);transform:none;}
.dl-btn-resume{
  padding:10px 16px;border:1px solid rgba(255, 107, 0,.3);color:var(--o);
  font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;
  cursor:none;background:rgba(255, 107, 0,.05);display:none;
  transition:background .2s;
}
.dl-btn-resume:hover{background:rgba(255, 107, 0,.12);}
.dl-status{font-size:.68rem;color:var(--dim);letter-spacing:.1em;margin-top:6px;}
.dl-status.done{color:#4CAF50;}
.dl-status.err{color:#ff5722;}

#unlockFooter{
  margin-top:28px;
  animation:fadeSlideUp .6s .9s var(--ez) both;
}
#btnUnlockBack{
  background:none;border:none;color:var(--dim);
  font-size:.6rem;letter-spacing:.35em;text-transform:uppercase;
  cursor:none;transition:color .2s;font-family:var(--f);
}
#btnUnlockBack:hover{color:var(--o);}

.star { font-size: 1em; line-height: 1; }
.star-full  { color: #ff6b00; text-shadow: 0 0 6px rgba(255, 107, 0,.6), 0 0 12px rgba(255, 107, 0,.3); }
.star-half  { color: #ff6b00; opacity: .65; text-shadow: 0 0 4px rgba(255, 107, 0,.4); }
.star-empty { color: rgba(255, 107, 0,.2); }
.rating-stars { display: inline-flex; gap: 2px; cursor: pointer; }
.rating-stars:hover .star-full, .rating-stars:hover .star-half { text-shadow: 0 0 10px rgba(255, 107, 0,.9), 0 0 20px rgba(255, 107, 0,.5); }