/* Schattenreich Gaming — Dark Mode Elegance.
   Vantablack-Basis, keine klassischen Schatten. Signature: Hover-Glow nur an Karten,
   der das Cover aus der Dunkelheit hebt. Versteckter Header, fade-from-black Hero. */

:root{
  --base:#000; --paper:#0a0a0c; --paper-2:#121214;
  --ink:#f4f4f6; --ink-muted:#aeaeb8; --line:#1c1c20;
  --accent:#c8ccd0;            /* Silber */
  --cta:#fff;                  /* reines Weiß */
  --glow:rgba(255,255,255,.22);
  --maxw:1320px;
  --f-display:'Cormorant Garamond',Georgia,serif;
  --f-body:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--base); color:var(--ink); font-family:var(--f-body);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; letter-spacing:.01em}
h1,h2,h3,.display{font-family:var(--f-display); font-weight:500; line-height:1.08; margin:0 0 .4em}
h1{font-size:clamp(2.4rem,6vw,5rem); letter-spacing:-.01em}
h2{font-size:clamp(1.7rem,3.4vw,2.8rem)}
h3{font-size:1.4rem}
a{color:inherit; text-decoration:none}
p{margin:0 0 1.1em; color:var(--ink)}
img{max-width:100%; display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(22px,5vw,56px)}
.section{padding:clamp(70px,11vw,160px) 0}
.kicker{font-family:var(--f-body); font-size:.7rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--ink-muted); margin:0 0 1.6em}
.muted{color:var(--ink-muted)}
.center{text-align:center}

/* ---------- Versteckter Header (erscheint bei Scroll nach oben) ---------- */
.hdr{position:fixed; inset:0 0 auto 0; z-index:60; background:rgba(0,0,0,.72);
  backdrop-filter:blur(14px) saturate(120%); border-bottom:1px solid var(--line);
  transform:translateY(-100%); transition:transform .45s cubic-bezier(.22,1,.36,1)}
.hdr.is-visible{transform:translateY(0)}
.hdr__row{display:flex; align-items:center; gap:30px; height:68px}
.hdr__brand{font-family:var(--f-display); font-size:1.35rem; letter-spacing:.04em; white-space:nowrap}
.hdr__nav{display:flex; gap:6px; flex:1; flex-wrap:wrap}
.hdr__nav a{font-size:.82rem; letter-spacing:.04em; color:var(--ink-muted); padding:8px 12px; border-radius:2px}
.hdr__nav a:hover{color:var(--ink)}
.hdr__nav a.is-current span{border-bottom:1px solid var(--cta); padding-bottom:3px; color:var(--ink)}
@media(max-width:820px){
  .hdr__row{padding-right:58px}
  .hdr__row{height:56px; gap:14px}
  .hdr__nav{flex-wrap:nowrap; overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none}
  .hdr__nav::-webkit-scrollbar{display:none}
  .hdr__nav a{white-space:nowrap; padding:8px 9px; font-size:.78rem}
  .hdr__brand{font-size:1.1rem}
}
.cart-link{display:inline-flex; align-items:center; gap:9px; font-size:.82rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink); white-space:nowrap}
.cart-link b{min-width:20px; height:20px; padding:0 5px; display:grid; place-items:center;
  background:var(--cta); color:#000; border-radius:11px; font-size:.72rem}

/* ---------- Sichtbarer Header-Trigger (immer da, auch bei verstecktem Header) ---------- */
.hdr-trigger{position:fixed; top:22px; right:clamp(18px,4vw,40px); z-index:70;
  display:inline-flex; align-items:center; gap:10px; padding:11px 18px; cursor:pointer;
  background:rgba(10,10,12,.55); backdrop-filter:blur(10px); border:1px solid var(--line);
  color:var(--ink); font-family:var(--f-body); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  border-radius:2px; transition:.3s}
.hdr-trigger:hover{border-color:var(--accent); box-shadow:0 0 30px -8px var(--glow)}
.hdr-trigger__lines{display:inline-flex; flex-direction:column; gap:3px}
.hdr-trigger__lines span{width:18px; height:1px; background:currentColor; transition:.3s}
.hdr.is-visible ~ * .hdr-trigger,.hdr-trigger.is-open .hdr-trigger__lines span:first-child{transform:none}
.hdr-trigger.is-open .hdr-trigger__lines span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.hdr-trigger.is-open .hdr-trigger__lines span:nth-child(2){opacity:0}
.hdr-trigger.is-open .hdr-trigger__lines span:nth-child(3){transform:translateY(-4px) rotate(-45deg)}
/* Brand-Anker oben links, immer sichtbar (Orientierung + SEO) */
.brand-anchor{position:fixed; top:22px; left:clamp(18px,4vw,40px); z-index:70;
  font-family:var(--f-display); font-size:1.25rem; letter-spacing:.04em; color:var(--ink); mix-blend-mode:difference}

/* ---------- Buttons — weiß, kein Schatten ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--f-body); font-size:.82rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:17px 34px; border:0; border-radius:2px; cursor:pointer; background:var(--cta); color:#000;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s}
.btn:hover{box-shadow:0 0 40px -6px var(--glow)}
.btn--ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
.btn--ghost:hover{border-color:var(--accent); box-shadow:none}
.btn--block{width:100%}

/* ---------- HERO: fade-from-black ---------- */
.hero{min-height:100svh; display:grid; place-items:center; text-align:center; position:relative; background:var(--base)}
.hero__inner{padding:8vh 0; opacity:0; animation:rise 1.5s cubic-bezier(.22,1,.36,1) .25s forwards}
.hero__eyebrow{opacity:0; animation:fade 1.2s ease .1s forwards}
.hero__cover{width:min(46vh,420px); aspect-ratio:3/4; object-fit:cover; margin:0 auto 36px;
  opacity:0; transform:scale(1.04); animation:reveal 1.8s cubic-bezier(.22,1,.36,1) .5s forwards;
  box-shadow:0 0 90px -20px var(--glow)}
.hero__title{opacity:0; animation:rise 1.3s cubic-bezier(.22,1,.36,1) .9s forwards}
.hero__cta-wrap{opacity:0; animation:rise 1.1s cubic-bezier(.22,1,.36,1) 1.25s forwards; margin-top:10px}
.hero__scroll{position:absolute; bottom:30px; left:50%; transform:translateX(-50%); color:var(--ink-muted);
  font-size:.68rem; letter-spacing:.4em; text-transform:uppercase; opacity:0; animation:fade 1s ease 1.8s forwards}
@keyframes reveal{to{opacity:1; transform:scale(1)}}
@keyframes rise{from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:translateY(0)}}
@keyframes fade{to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .hero__inner,.hero__eyebrow,.hero__cover,.hero__title,.hero__cta-wrap,.hero__scroll{animation:none; opacity:1; transform:none}
}

/* ---------- Sparse Galerie: 1–2 Riesenkarten/Reihe, große gaps ---------- */
.gallery{display:grid; grid-template-columns:1fr; gap:clamp(60px,9vw,150px)}
@media(min-width:980px){.gallery--duo{grid-template-columns:1fr 1fr; gap:clamp(48px,5vw,90px)}}

.piece{position:relative; display:block}
.piece__frame{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--paper-2);
  transition:box-shadow .5s ease}
.gallery--duo .piece__frame{aspect-ratio:4/5}
.piece__frame img{width:100%; height:100%; object-fit:cover; filter:brightness(.82) saturate(.9);
  transition:filter .6s ease, transform .8s cubic-bezier(.22,1,.36,1)}
/* Signature Hover-Glow: hebt das Cover aus der Dunkelheit */
.piece:hover .piece__frame{box-shadow:0 0 80px -10px var(--glow)}
.piece:hover .piece__frame img{filter:brightness(1.05) saturate(1.02); transform:scale(1.03)}
.piece__meta{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:22px 4px 0}
.piece__kick{font-size:.66rem; letter-spacing:.34em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:8px}
.piece__name{font-family:var(--f-display); font-size:clamp(1.5rem,2.4vw,2.2rem); line-height:1.05}
.piece__teaser{color:var(--ink-muted); font-size:.96rem; line-height:1.6; margin:10px 0 0; max-width:46ch;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.piece__side{text-align:right; white-space:nowrap}
.piece__price{font-family:var(--f-display); font-size:1.7rem}
.piece__price s{display:block; font-size:.85rem; color:var(--ink-muted)}
.piece__add{margin-top:14px}
.piece__add button{font-family:var(--f-body); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  background:transparent; color:var(--ink); border:1px solid var(--line); padding:11px 18px; border-radius:2px; cursor:pointer;
  transition:.3s}
.piece__add button:hover{border-color:var(--cta); box-shadow:0 0 26px -8px var(--glow)}
@media(max-width:620px){
  .piece__meta{flex-direction:column; align-items:flex-start; gap:14px}
  .piece__side{text-align:left}
}

/* ---------- Hub-Kacheln mit Foto ---------- */
.halls{display:grid; gap:1px; grid-template-columns:repeat(3,1fr); background:var(--line); border:1px solid var(--line)}
@media(max-width:760px){.halls{grid-template-columns:1fr}}
.hall{position:relative; overflow:hidden; min-height:clamp(220px,26vw,320px);
  display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(28px,4vw,44px) 30px}
.hall__bg{position:absolute; inset:0; z-index:0}
.hall__bg img{width:100%; height:100%; object-fit:cover; filter:brightness(.32) saturate(.85); transition:filter .6s, transform .8s cubic-bezier(.22,1,.36,1)}
.hall::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.75) 100%)}
.hall:hover .hall__bg img{filter:brightness(.55) saturate(1); transform:scale(1.05)}
.hall>*{position:relative; z-index:2}
.hall__n{font-family:var(--f-display); font-size:clamp(1.7rem,2.6vw,2.3rem); margin-bottom:8px}
.hall__c{font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-muted)}
.hall:hover .hall__c{color:var(--accent)}

/* ---------- Vollbild-Slider ---------- */
.slider{position:relative; height:100svh; min-height:560px; overflow:hidden; background:#000}
.slide{position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease; pointer-events:none}
.slide.is-active{opacity:1; pointer-events:auto}
.slide__bg{position:absolute; inset:0}
.slide__bg img{width:100%; height:100%; object-fit:cover; filter:brightness(.4) saturate(.9); transform:scale(1.04)}
.slide__veil{position:absolute; inset:0; background:radial-gradient(60% 80% at 50% 45%, transparent, rgba(0,0,0,.82))}
.slide__inner{position:relative; height:100%; display:grid; place-items:center; text-align:center; padding:0 24px}
.slide__cover{width:min(34vh,300px); aspect-ratio:3/4; object-fit:cover; margin:0 auto 30px; box-shadow:0 0 100px -24px var(--glow)}
.slide__kick{font-size:.7rem; letter-spacing:.4em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:18px}
.slide__name{font-family:var(--f-display); font-size:clamp(2.4rem,6vw,5rem); line-height:1.02; margin-bottom:26px}
.slider__dots{position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:12px}
.slider__dots button{width:9px; height:9px; padding:0; border:1px solid var(--ink-muted); background:transparent; border-radius:50%; cursor:pointer; transition:.3s}
.slider__dots button.is-on{background:var(--cta); border-color:var(--cta)}
.slider__arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:54px; height:54px;
  background:rgba(10,10,12,.4); border:1px solid var(--line); color:var(--ink); cursor:pointer; font-size:1.2rem; transition:.3s}
.slider__arrow:hover{border-color:var(--accent); box-shadow:0 0 30px -10px var(--glow)}
.slider__arrow--prev{left:clamp(14px,3vw,40px)} .slider__arrow--next{right:clamp(14px,3vw,40px)}
@media(max-width:600px){.slider__arrow{display:none}}

/* ---------- Split-Sektion (Text + Foto, abwechselnd) ---------- */
.split{display:grid; gap:clamp(30px,5vw,80px); grid-template-columns:1fr; align-items:center}
@media(min-width:880px){.split{grid-template-columns:1fr 1fr} .split--rev .split__media{order:2}}
.split__media{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--paper-2)}
.split__media img{width:100%; height:100%; object-fit:cover; filter:brightness(.78) saturate(.92); transition:filter .6s, transform .9s cubic-bezier(.22,1,.36,1)}
.split:hover .split__media img{filter:brightness(.98); transform:scale(1.03)}
.split__body h2{font-size:clamp(1.8rem,3.2vw,2.8rem)}
.split__body p{font-size:1.06rem; line-height:1.8; color:var(--ink-muted); max-width:50ch}
.split__body .lead{color:var(--ink); font-family:var(--f-display); font-size:1.3rem; line-height:1.5}

/* ---------- Editorial (viel Schwarz, eine Zeile) ---------- */
.editorial{text-align:center}
.editorial p{font-family:var(--f-display); font-size:clamp(1.6rem,3.2vw,2.6rem); line-height:1.3;
  max-width:24ch; margin:0 auto; color:var(--ink)}

/* ---------- News-Strip ---------- */
.news{display:grid; gap:clamp(30px,4vw,56px); grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.news{grid-template-columns:1fr}}
.note{display:block}
.note__img{aspect-ratio:16/10; overflow:hidden; background:var(--paper-2)}
.note__img img{width:100%; height:100%; object-fit:cover; filter:brightness(.8); transition:.6s}
.note:hover .note__img img{filter:brightness(1.02); transform:scale(1.03)}
.note__d{font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-muted); margin:18px 0 8px}
.note__t{font-family:var(--f-display); font-size:1.4rem; line-height:1.15}

/* ---------- Breadcrumbs ---------- */
.crumbs{font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted); padding-top:24px}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current=page]{color:var(--ink)}

/* ---------- PDP ---------- */
.pdp{display:grid; gap:clamp(40px,6vw,90px); grid-template-columns:1fr; padding-top:30px}
@media(min-width:920px){.pdp{grid-template-columns:1.05fr 1fr; align-items:start}}
.pdp__art{position:relative; aspect-ratio:3/4; overflow:hidden; background:#08080a; box-shadow:0 0 46px -30px var(--glow)}
.pdp__art img{width:100%; height:100%; object-fit:contain}
.pdp__price{font-family:var(--f-display); font-size:2.6rem; margin:.2em 0}
.pdp__price s{font-size:1.1rem; color:var(--ink-muted); margin-right:12px}
.spec{width:100%; border-collapse:collapse; margin:24px 0}
.spec td{padding:13px 0; border-bottom:1px solid var(--line); font-size:.9rem}
.spec td:first-child{color:var(--ink-muted); width:40%; letter-spacing:.06em; text-transform:uppercase; font-size:.74rem}
.pdp__desc{font-size:1.06rem; line-height:1.8; color:var(--ink)}

/* ---------- Warenkorb / Kasse ---------- */
.cart-grid{display:grid; gap:50px; grid-template-columns:1.6fr 1fr; padding-top:20px}
@media(max-width:860px){.cart-grid{grid-template-columns:1fr}}
.cart-line{display:flex; align-items:center; gap:20px; padding:22px 0; border-bottom:1px solid var(--line)}
.cart-line__nm{flex:1; font-family:var(--f-display); font-size:1.3rem}
.cart-line__qty{display:flex; align-items:center; gap:10px}
.cart-line__qty button{width:34px; height:34px; background:var(--paper-2); border:1px solid #3a3a44; color:var(--ink); cursor:pointer; border-radius:2px}
.cart-line__pr{font-family:var(--f-display); font-size:1.3rem; min-width:90px; text-align:right}
.cart-line__rm{background:none; border:0; color:#cdcdd4; cursor:pointer}
.cart-line__rm:hover{color:var(--cta)}
.summary{border:1px solid var(--line); padding:30px; align-self:start; background:var(--paper-2)}
.summary__row{display:flex; justify-content:space-between; padding:9px 0; color:#cdcdd4}
.summary__row--total{border-top:1px solid var(--line); margin-top:10px; padding-top:16px; color:var(--ink); font-family:var(--f-display); font-size:1.5rem}
.field{width:100%; padding:14px 16px; background:var(--paper); border:1px solid var(--line); color:var(--ink); border-radius:2px; font-family:inherit}
.steps{display:grid; gap:1px; grid-template-columns:repeat(3,1fr); background:var(--line); border:1px solid var(--line); margin:24px 0}
@media(max-width:680px){.steps{grid-template-columns:1fr}}
.step{background:var(--base); padding:26px}
.step strong{font-family:var(--f-display); font-size:1.2rem}

/* ---------- Footer ---------- */
.foot{border-top:1px solid var(--line); padding:clamp(56px,8vw,100px) 0 50px; background:var(--base)}
.foot__grid{display:grid; gap:40px; grid-template-columns:1.6fr 1fr 1fr 1fr}
@media(max-width:820px){
  .hdr__row{padding-right:58px}.foot__grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.foot__grid{grid-template-columns:1fr}}
.foot__brand strong{font-family:var(--f-display); font-size:1.6rem; display:block; margin-bottom:14px}
.foot h4{font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-muted); margin:0 0 16px}
.foot a{display:block; color:var(--ink-muted); padding:6px 0; font-size:.9rem}
.foot a:hover{color:var(--ink)}
.pay{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px}
.pay__i{height:30px; min-width:46px; padding:5px 8px; background:#fff; border-radius:3px; display:grid; place-items:center}
.pay__i img{height:20px}
.pay__txt{height:30px; padding:0 12px; display:grid; place-items:center; font-size:.72rem; color:var(--ink-muted); border:1px solid var(--line); border-radius:3px}
.foot__legal{border-top:1px solid var(--line); margin-top:50px; padding-top:26px; font-size:.8rem; color:var(--ink-muted)}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}
:focus-visible{outline:1px solid var(--cta); outline-offset:3px}

/* ===== Eingebettete Gamer-Fotos (Hero/Editorial/Footer-BG + Kategorie-Banner) ===== */
.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.16;filter:grayscale(.35) brightness(.7)}
.hero__inner,.hero__scroll{position:relative;z-index:1}
.section.editorial{position:relative;overflow:hidden}
.editorial__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.editorial__bg img{width:100%;height:100%;object-fit:cover;opacity:.14;filter:grayscale(.45) brightness(.6)}
.section.editorial .wrap{position:relative;z-index:1}
.foot{position:relative;overflow:hidden}
.foot__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.foot__bg img{width:100%;height:100%;object-fit:cover;opacity:.10;filter:grayscale(.5) brightness(.6)}
.foot>.wrap{position:relative;z-index:1}
.cat-banner{aspect-ratio:24/7;overflow:hidden;position:relative;margin-bottom:clamp(28px,4vw,52px);border:1px solid rgba(255,255,255,.08)}
.cat-banner img{width:100%;height:100%;object-fit:cover;filter:brightness(.6) grayscale(.2)}
@media(max-width:600px){.cat-banner{aspect-ratio:16/9}}

/* Hero Geschenk-Notiz (bei NieR) */
.hero__gift{display:inline-flex; align-items:center; gap:10px; margin:20px auto 0; padding:9px 18px; border:1px solid var(--line); border-radius:999px; font-size:.8rem; letter-spacing:.02em; color:var(--ink-muted); max-width:max-content; background:rgba(255,255,255,.02)}
.hero__gift strong{color:var(--ink); font-weight:600}
.hero__gift-mark{color:var(--accent); font-size:.95rem}

/* PDP-Galerie */
.pdp__gallery{display:flex; flex-direction:column; gap:12px}
.pdp__thumbs{display:flex; gap:10px; flex-wrap:wrap}
.pdp__thumb{width:84px; height:84px; padding:0; border:1px solid var(--line); background:#000; cursor:pointer; overflow:hidden; opacity:.55; transition:opacity .15s, border-color .15s}
.pdp__thumb img{width:100%; height:100%; object-fit:cover}
.pdp__thumb:hover{opacity:.85}
.pdp__thumb.is-on{opacity:1; border-color:var(--accent)}