/* Skip-Link */
.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;}
/* auto: smooth-scroll auf html macht Trackpad/Maus-Scroll oft „klebrig“ (Animation queued) */
html{overflow-x:hidden;scroll-behavior:auto;}
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 SHB-01: Markup nutzt <nav id="nav">, nicht #topbar */
  position:fixed;top:0;left:0;right:0;z-index:8600;
  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);}
/* Nav-Links: Desktop inline · schmale Screens → Hamburger + Drawer (#shopHubMenuBtn) */
@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 SHB-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;
  /* kein transition: bei jedem Scroll-Event sonst Layout-Interpolation → Jank */
}

/* ══ MAIN VIEWS ══════════════════════════════════════════════════ */
#viewFeed,#viewDetail{
  min-height:100vh;padding-top:var(--nav-h);
  /* will-change auf dem ganzen Feed erzeugt große Layer — Hub scrollt nur, keine View-Animation */
}

/* 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-top:calc(-1 * var(--nav-h));
  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;
  /* slides bleiben non-interactive: Wheel/Scroll geht zuverlässig an den Viewport; Klicks auf #feedHeroMega */
  pointer-events:none;
}
.feed-hero-slide img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1.06);
  transition:transform 12s linear;
  pointer-events:none;
}
.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;}
}

/* Hero: Typo auf dem Handy tiefer (mehr Abstand nach unten, Bildfokus etwas höher) */
@media(max-width:767px){
  .feed-hero-inner{
    padding:calc(var(--nav-h) + 12px) 6vw max(200px, calc(env(safe-area-inset-bottom, 0px) + 30vh)) !important;
  }
  .feed-hero-slide img{
    object-position:center 30%;
  }
}

/* ── Mobile: Hamburger + Nav-Drawer ── */
.shop-hub-menu-btn{
  display:none;
  flex-direction:column;justify-content:center;align-items:center;
  gap:5px;width:44px;height:44px;padding:0;margin:0 12px 0 0;
  border:1px solid rgba(255,255,255,.12);border-radius:2px;
  background:rgba(10,10,10,.35);backdrop-filter:blur(8px);
  cursor:none;flex-shrink:0;z-index:2;
  transition:border-color .2s,background .2s;
}
.shop-hub-menu-btn span{
  display:block;width:18px;height:1px;background:rgba(255,255,255,.75);
  transition:transform .25s var(--ez),opacity .2s;
}
.shop-hub-menu-btn:hover{border-color:rgba(255, 107, 0,.35);}
body.shop-hub-nav-open .shop-hub-menu-btn span:nth-child(1){transform:translateY(6px) rotate(45deg);}
body.shop-hub-nav-open .shop-hub-menu-btn span:nth-child(2){opacity:0;}
body.shop-hub-nav-open .shop-hub-menu-btn span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
@media(max-width:900px){
  .shop-hub-menu-btn{display:flex;}
  body.detail-active .shop-hub-menu-btn{display:none;}
}
.shop-hub-nav-backdrop{
  position:fixed;inset:0;z-index:8440;
  background:rgba(0,0,0,.55);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .28s var(--ez);
}
body.shop-hub-nav-open .shop-hub-nav-backdrop{
  opacity:1;pointer-events:auto;
}
.shop-hub-nav-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:8450;
  width:min(300px,86vw);
  background:var(--bg2);border-left:1px solid var(--border);
  padding:calc(var(--nav-h) + 20px) 24px 32px;
  box-shadow:-12px 0 40px rgba(0,0,0,.45);
  transform:translateX(100%);transition:transform .32s var(--ez);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  pointer-events:none;
}
body.shop-hub-nav-open .shop-hub-nav-drawer{
  transform:translateX(0);
  pointer-events:auto;
}
.shop-hub-nav-drawer-inner{
  display:flex;flex-direction:column;gap:4px;
}
.shop-hub-nav-drawer-inner .n-a{
  display:block;padding:14px 12px;font-size:.78rem;
  letter-spacing:.22em;text-transform:lowercase;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.shop-hub-nav-drawer-inner .n-a:hover{color:var(--o);}
.shop-hub-nav-drawer-inner .n-a--active{color:var(--o);}
html.nx-reduced-motion .shop-hub-nav-drawer{transition:none;}

#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;
  width:100%;
  margin:clamp(56px, 9vh, 140px) 0 8px;
  padding:0 0 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) 8vw;
  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 .shop-wp-vid{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  pointer-events:none;
}
.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{
  margin:0 0 clamp(40px, 6vw, 72px);
  padding:clamp(36px, 5vw, 56px) 8vw;
  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);}

/* FAQ */
.shop-hub-faq{
  margin:0 0 clamp(40px, 6vw, 64px);
  padding:clamp(28px, 4vw, 44px) 8vw;
  box-sizing:border-box;
  border:1px solid rgba(255, 107, 0,.14);
  border-radius:2px;
  background:rgba(8,8,10,.35);
}
.shop-hub-faq-kicker{
  font-size:.5rem;letter-spacing:.45em;text-transform:uppercase;color:var(--o);margin:0 0 12px;
}
.shop-hub-faq-title{
  font-size:clamp(1.35rem, 2.8vw, 2rem);font-weight:100;margin:0 0 12px;letter-spacing:-.02em;color:var(--fg);
}
.shop-hub-faq-intro{
  font-size:.82rem;color:var(--mid);line-height:1.75;margin:0 0 28px;max-width:42em;font-weight:300;
}
.shop-hub-faq-list{display:flex;flex-direction:column;gap:10px;}
.shop-hub-faq-item{
  border:1px solid rgba(255,255,255,.08);
  border-radius:2px;
  background:rgba(0,0,0,.2);
}
.shop-hub-faq-item summary{
  cursor:none;
  list-style:none;
  padding:14px 18px;
  font-size:.78rem;font-weight:500;letter-spacing:.04em;color:var(--fg);
  position:relative;
  padding-right:36px;
}
.shop-hub-faq-item summary::-webkit-details-marker{display:none;}
.shop-hub-faq-item summary::after{
  content:'+';position:absolute;right:16px;top:50%;transform:translateY(-50%);
  font-size:1rem;color:var(--o);font-weight:300;
}
.shop-hub-faq-item[open] summary::after{content:'−';}
.shop-hub-faq-ans{
  padding:0 18px 16px 18px;
  font-size:.78rem;color:var(--mid);line-height:1.75;font-weight:300;
  border-top:1px solid rgba(255,255,255,.06);
  margin:0;
  padding-top:14px;
}
html.nx-reduced-motion .shop-hub-faq-item summary::after{transition:none;}

.shop-hub-support-fab{
  position:fixed;left:max(14px,2.8vw);bottom:max(22px,3.5vh);z-index:8400;
  width:54px;height:54px;border-radius:50%;
  border:1px solid rgba(255, 107, 0,.42);
  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-hub-support-fab:hover{transform:scale(1.05);border-color:var(--o);}
html.nx-reduced-motion .shop-hub-support-fab:hover{transform:none;}
.shop-hub-support-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:8450;backdrop-filter:blur(3px);}
.shop-hub-support-panel{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:8460;
  width:min(440px, 92vw);max-height:min(85vh, 620px);overflow-y:auto;
  background:var(--bg2);border:1px solid rgba(255, 107, 0,.28);
  border-radius:4px;box-shadow:0 28px 80px rgba(0,0,0,.55);padding:24px 22px 28px;
}
.shop-hub-support-inner{position:relative;}
.shop-hub-support-close{position:absolute;top:0;right:0;background:none;border:none;color:var(--dim);font-size:1.1rem;cursor:none;padding:4px 8px;}
.shop-hub-support-title{font-size:.55rem;letter-spacing:.35em;text-transform:uppercase;color:var(--o);margin:0 0 8px;}
.shop-hub-support-lead{font-size:.78rem;color:var(--mid);line-height:1.5;margin:0 0 18px;}
.shop-hub-support-label{display:block;font-size:.48rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin:12px 0 6px;}
.shop-hub-support-input,.shop-hub-support-textarea{
  width:100%;background:var(--bg3);border:1px solid rgba(255,255,255,.1);color:var(--fg);
  font-family:var(--f);font-size:.78rem;padding:10px 12px;border-radius:2px;box-sizing:border-box;
}
.shop-hub-support-textarea{resize:vertical;min-height:100px;}
.shop-hub-support-submit{
  margin-top:18px;width:100%;padding:12px;font-family:var(--f);font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;
  background:var(--o);color:#111;font-weight:700;border:1px solid var(--o);cursor:none;
}
.shop-hub-support-note{font-size:.65rem;color:var(--dim);margin-top:12px;min-height:1.2em;}
#shopCatalog{scroll-margin-top:calc(var(--nav-h, 72px) + 16px);}

@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-LEISTE ═════════════════════════════════════════ */
#feedFilters{
  margin:0 8vw 28px;
  padding:14px 18px 14px 20px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  position:relative;z-index:2;
  max-width:1680px;
  background:rgba(10,10,12,.58);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.07);
  border-radius:2px;
  box-shadow:0 18px 50px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
}
@media(max-width:640px){
  #feedFilters{margin:0 5vw 22px;padding:12px 14px;}
}

.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)));
}

/* 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{
  position:absolute;
  top:calc(var(--nav-h) + 8px);right:16px;
  z-index:30;
  display:flex;align-items:center;gap:2px;
  background:rgba(12,12,12,.7);
  border:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(8px);
  padding:3px;
  border-radius:4px;
}
.panel-tab{
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;
  color:rgba(255,255,255,.3);
  width:36px;height:36px;border-radius:3px;
  cursor:none;transition:color .2s,background .2s;
  flex-shrink:0;position:relative;
}
.panel-tab:hover{color:rgba(255,255,255,.7);background:rgba(255,255,255,.05);}
.panel-tab.active{color:var(--o);background:rgba(255, 107, 0,.1);}
.panel-tab svg{opacity:.6;transition:opacity .2s;}
.panel-tab.active svg{opacity:1;}
#panelCartContent{
  display:none;flex-direction:column;
  padding:20px 0;
}
#panelCartContent.visible{display:flex;}
#panelProductContent{display:flex;flex-direction:column;flex:1;padding:0 0 40px;min-height:0;}
#panelProductContent.hidden{display:none;}

#detailInfo{
  position:fixed;top:0;right:0;bottom:0;
  width:min(420px, 40vw);
  z-index:820;
  height:100vh;overflow-y:auto;
  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:calc(var(--nav-h) + 52px) 36px 80px;
  pointer-events:auto;
  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:calc(var(--nav-h) + 20px) 24px 80px;
  }
}

/* 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 */
#detailInfo{display:flex;flex-direction:column;gap:0;}

#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-Zeile */
#detailMeta{
  display:flex;gap:0;flex-wrap:nowrap;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.06);
  margin-top:auto;margin-bottom:0;
  overflow:hidden;
}
.d-meta-item{display:flex;flex-direction:column;gap:3px;align-items:flex-start;flex:1;min-width:0;
  padding:8px 10px 8px 0;border-right:1px solid rgba(255,255,255,.04);position:relative;}
.d-meta-item:last-child{border-right:none;}
.d-meta-label{font-size:.36rem;letter-spacing:.35em;text-transform:uppercase;color:rgba(255,255,255,.2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.d-meta-val{font-size:.68rem;color:rgba(255,255,255,.5);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.d-meta-val.has-tip{cursor:help;border-bottom:1px dashed rgba(255, 107, 0,.35);}
.d-meta-tip{display:none;position:absolute;bottom:calc(100% + 6px);left:0;background:#1a1a1a;border:1px solid rgba(255, 107, 0,.25);padding:8px 12px;z-index:200;white-space:nowrap;pointer-events:none;}
.d-meta-tip-row{font-size:.52rem;letter-spacing:.1em;color:rgba(255,255,255,.65);line-height:1.8;}
.d-meta-tip-kuerzel{color:var(--o);font-weight:700;min-width:36px;display:inline-block;}
.d-meta-item:hover .d-meta-tip{display:block;}

/* 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;}

/* ══ 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;
}

/* ── 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);}

/* ── 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 SHB-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); }