/* @font-face: css/nx-fonts.css (einbinden vor dieser Datei) */

:root{
  --o:#ff6b00;--ob:rgba(255,107,0,.12);--og:rgba(255,107,0,.05);
  --bg:#141414;--fg:#e8e8e8;--dim:#484848;--mid:#888;
  --f:'G',sans-serif;--ez:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{overflow-x:hidden;}
body{font-family:var(--f);background:var(--bg);color:var(--fg);cursor:none;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{display:block;}
input,textarea,button{font-family:var(--f);outline:none;border:none;background:none;}
/* FIX N11 — Fokus-Sichtbarkeit für Keyboard-Navigation (WCAG 2.1 AA)
   :focus-visible greift nur bei Tastatur-Fokus, NICHT bei Mausklick */
:focus-visible{outline:2px solid var(--o);outline-offset:2px;border-radius:2px;}

body::after{content:'';position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.022;
  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);}

#prog{position:fixed;top:0;left:0;height:1px;width:0;background:var(--o);z-index:8000;pointer-events:none;}

/* \═\═\═ PRELOADER \═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═ */
#pre{position:fixed;inset:0;z-index:9500;background:var(--bg);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:28px;}
.pre-letters{display:flex;}
.pre-l{font-size:clamp(3rem,9vw,8rem);font-weight:100;letter-spacing:.45em;opacity:0;transform:translateY(110%);display:inline-block;}
.pre-bar-wrap{width:200px;height:1px;background:rgba(255,255,255,.06);overflow:hidden;}
.pre-bar{width:0%;height:100%;background:var(--o);}
.pre-sub{font-size:.54rem;letter-spacing:.55em;text-transform:uppercase;color:var(--o);opacity:0;}

/* \═\═\═ CURSOR — Maus = obere rechte Ecke; Feld wächst nach unten links; Text zentriert \═\═ */
#cur{position:fixed;top:0;left:0;z-index:99999;pointer-events:none;will-change:transform;}
.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);
  }
}

/* \═\═\═ NAV \═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═ */
#nav{position:fixed;top:0;left:0;right:0;z-index:400;padding:28px 52px;display:flex;align-items:center;justify-content:space-between;opacity:0;transition:opacity .4s;}
.n-logo{flex-shrink:0;}
.n-links{margin-left:auto;margin-right:28px;}
.n-logo{font-size:.78rem;font-weight:700;letter-spacing:.35em;text-transform:uppercase;}
.n-links{display:flex;gap:36px;}
.n-a{font-size:.72rem;font-weight:400;letter-spacing:.22em;text-transform:lowercase;color:var(--dim);transition:color .3s;position:relative;}
.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{width:100%;}

/* \═\═\═ WORLD \═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═ */
#world{
  position:relative;overflow-x:hidden;
  background:
    radial-gradient(ellipse 110vw 65vh at 62%  3%,  rgba(255,107,0,.09) 0%,transparent 65%),
    radial-gradient(ellipse 75vw  50vh at 12%  28%, rgba(255,107,0,.055)0%,transparent 60%),
    radial-gradient(ellipse 85vw  55vh at 80%  55%, rgba(255,107,0,.07) 0%,transparent 65%),
    radial-gradient(ellipse 65vw  45vh at 30%  78%, rgba(255,107,0,.05) 0%,transparent 55%),
    radial-gradient(ellipse 70vw  50vh at 55%  110%,rgba(255,107,0,.06) 0%,transparent 60%),
    var(--bg);
}
.wt{position:absolute;pointer-events:none;z-index:0;white-space:nowrap;user-select:none;}
.para-shape{position:absolute;pointer-events:none;z-index:5;}
.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);}
.ps-letter{font-family:var(--f);font-weight:950;font-style:italic;color:rgba(255,107,0,var(--op,.025));letter-spacing:-.04em;line-height:1;font-size:var(--fs,10rem);}
.s{position:relative;z-index:1;}

/* \═\═\═ \§ 01  HELLO \═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═ */
.s-hello{min-height:100vh;display:flex;align-items:center;padding:0 8vw;overflow:visible;position:relative;}
.hello-stage{position:absolute;inset:0;perspective:1800px;perspective-origin:50% 38%;pointer-events:none;}
.hello-floor{position:absolute;bottom:-6vh;left:-20vw;right:-20vw;height:70vh;transform:rotateX(65deg);transform-origin:bottom center;
  background:repeating-linear-gradient(90deg,rgba(255,107,0,.05) 0,rgba(255,107,0,.05) 1px,transparent 1px,transparent 100px),
             repeating-linear-gradient(0deg,rgba(255,107,0,.05) 0,rgba(255,107,0,.05) 1px,transparent 1px,transparent 100px);
  will-change:transform;}
.ft{position:absolute;pointer-events:none;font-family:var(--f);}
.ft1{top:27vh;right:20vw;font-size:clamp(.55rem,.9vw,.8rem);font-weight:400;letter-spacing:.52em;text-transform:uppercase;color:rgba(255,107,0,.22);transform:perspective(600px) rotateX(20deg) rotateY(-15deg) rotateZ(-5deg);}
.ft2{bottom:30vh;right:14vw;font-size:clamp(4rem,7vw,9rem);font-weight:950;font-style:italic;color:rgba(255,107,0,.055);transform:perspective(600px) rotateX(28deg) rotateY(-8deg);}
.ft3{top:60vh;left:5.5vw;font-size:clamp(.48rem,.72vw,.65rem);font-weight:300;letter-spacing:.55em;text-transform:uppercase;color:rgba(255,255,255,.1);transform:perspective(400px) rotateX(15deg) rotateZ(90deg);transform-origin:left top;}
.ft4{bottom:13vh;left:50%;transform:translateX(-50%) perspective(500px) rotateX(58deg);transform-origin:top center;font-size:clamp(.58rem,.95vw,.85rem);font-weight:300;letter-spacing:.6em;text-transform:uppercase;color:rgba(255,107,0,.28);white-space:nowrap;}
.hello-body{position:relative;z-index:3;width:100%;padding-top:10vh;}
.h-tag{font-size:.58rem;letter-spacing:.48em;text-transform:uppercase;color:var(--o);margin-bottom:28px;opacity:0;transform:translateY(10px);}
.h-title{line-height:.86;}
.h-line{display:block;font-weight:100;font-size:clamp(4.5rem,10.5vw,12.5rem);letter-spacing:-.03em;opacity:0;transform:translateY(100px) rotateX(28deg);transform-origin:top center;}
.h-line.acc{font-weight:950;font-style:italic;color:var(--o);font-size:clamp(5rem,12vw,14.5rem);}
.h-line.r{text-align:right;}
.h-scroll{display:flex;align-items:center;gap:18px;margin-top:64px;opacity:0;}
.h-scroll-lbl{font-size:.54rem;letter-spacing:.44em;text-transform:uppercase;color:var(--dim);}
.h-track{width:80px;height:1px;background:rgba(255,255,255,.06);overflow:hidden;position:relative;}
.h-track::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--o);animation:scan 2.2s ease-in-out infinite;}
@keyframes scan{0%{left:-100%;}100%{left:100%;}}

/* \═\═\═ \§ 01b  HORIZONTAL CAM \═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═ */
/* Height set by JS after images loaded */
.s-hscroll{position:relative;height:30vh;overflow:hidden;}
.s-hscroll-sticky{display:none;}
.reel-wrap{position:relative;width:100%;height:30vh;overflow:hidden;}
.reel-wrap::before,.reel-wrap::after{content:'';position:absolute;top:0;bottom:0;width:12vw;z-index:3;pointer-events:none;}
.reel-wrap::before{left:0;background:linear-gradient(to right,var(--bg),transparent);}
.reel-wrap::after{right:0;background:linear-gradient(to left,var(--bg),transparent);}
.h-strip{display:flex;gap:4px;align-items:center;height:30vh;width:max-content;animation:reelSlide 48s linear infinite;}
@keyframes reelSlide{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
.h-panel{flex-shrink:0;width:26vw;height:26vh;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.04);cursor:none;}
.h-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ez),filter .6s var(--ez);filter:grayscale(1) brightness(.85);}
.h-panel:hover img{transform:scale(1.04);filter:grayscale(0) brightness(1);}
.h-panel-lbl{position:absolute;top:32px;left:36px;font-size:clamp(3.5rem,6vw,8rem);font-weight:950;font-style:italic;color:rgba(255,255,255,.04);letter-spacing:-.03em;transform:perspective(400px) rotateY(-12deg) rotateX(8deg);pointer-events:none;}
.h-panel-info{position:absolute;bottom:0;left:0;right:0;padding:38px 42px 34px;background:linear-gradient(to top,rgba(0,0,0,.72) 0%,transparent 75%);transition:opacity .4s;}
.h-panel:hover .h-panel-info{opacity:0;}
.h-panel-num{font-size:.5rem;letter-spacing:.38em;text-transform:uppercase;color:var(--o);margin-bottom:8px;}
.h-panel-title{font-size:clamp(1.1rem,2vw,1.9rem);font-weight:100;letter-spacing:-.01em;color:var(--fg);}
.h-dots{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:5;}
.h-dot{width:20px;height:1px;background:rgba(255,255,255,.15);transition:all .3s;}
.h-dot.on{background:var(--o);width:36px;}
.h-cam-lbl{position:absolute;right:6vw;top:50%;transform:translateY(-50%);font-size:.48rem;letter-spacing:.5em;text-transform:uppercase;color:rgba(255,255,255,.08);writing-mode:vertical-rl;pointer-events:none;}
.h-scroll-ctr{position:absolute;top:28px;left:50%;transform:translateX(-50%);font-size:.5rem;letter-spacing:.5em;text-transform:uppercase;color:rgba(255,255,255,.1);}

/* \═\═\═ \§ 02  ABOUT / READ \═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═ */
.s-read{min-height:100vh;padding:140px 8vw;display:flex;align-items:center;overflow:visible;position:relative;}
.wt-r1{top:5%;left:-2vw;font-size:clamp(13rem,28vw,38rem);font-weight:950;color:rgba(255,255,255,.006);letter-spacing:-.05em;line-height:1;}
.read-grid{display:grid;grid-template-columns:1fr 1fr;gap:9vw;align-items:start;width:100%;max-width:1400px;margin:0 auto;position:relative;z-index:2;}
.r-num{font-size:.54rem;letter-spacing:.42em;text-transform:uppercase;color:var(--o);margin-bottom:36px;}
.r-h{font-size:clamp(2.8rem,5.5vw,7rem);font-weight:100;line-height:.9;margin-bottom:36px;transform:perspective(800px) rotateX(-3deg) rotateY(2deg);transform-origin:left top;}
.r-h em{display:block;font-weight:950;font-style:italic;color:var(--o);font-size:clamp(3.2rem,6.5vw,8rem);}
.r-intro{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--o);margin-bottom:20px;}
.r-name{font-size:clamp(1.6rem,3vw,2.8rem);font-weight:100;line-height:1;margin-bottom:28px;}
.r-name strong{font-weight:950;color:var(--o);}
.r-p{font-size:.95rem;font-weight:300;line-height:1.9;color:var(--mid);margin-bottom:18px;max-width:500px;}
.r-p strong{color:var(--fg);font-weight:500;}
/* Festes Raster: immer 4 Spalten → 8 Hobbies = 4+4 (Phone + Tablet wie Desktop) */
#s-read #hobbiesRow.r-hobbies,
#s-read .r-hobbies{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  grid-auto-flow:row;
  gap:20px 16px;
  margin-top:28px;
  width:100%;
  max-width:520px;
  justify-items:center;
  align-items:start;
  box-sizing:border-box;
}
.r-hobby{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);transition:color .3s;width:100%;min-width:0;}
.r-hobby span{text-align:center;line-height:1.3;max-width:100%;word-break:break-word;}
.r-hobby:hover{color:var(--o);}
.r-hobby svg{width:52px;height:52px;stroke:currentColor;fill:none;stroke-width:1.3;opacity:.7;transition:opacity .3s;}
.r-hobby:hover svg{opacity:1;}
.r-right{position:relative;}
.r-shadow{position:absolute;top:26px;left:26px;width:100%;height:100%;border:1px solid rgba(255,107,0,.07);z-index:0;}
.r-frame{aspect-ratio:2/3;border:1px solid rgba(255,255,255,.05);overflow:hidden;position:relative;z-index:1;transform:perspective(1000px) rotateY(-10deg) rotateX(4deg);transform-style:preserve-3d;transition:transform .9s var(--ez);}
.r-frame:hover{transform:perspective(1000px) rotateY(-2deg) rotateX(1deg);}
.r-frame::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,107,0,.08) 0%,transparent 55%);pointer-events:none;z-index:2;}
.r-frame img{width:100%;height:100%;object-fit:cover;display:block;}

/* \═\═\═ \§ 03  SKILLS — scrub-animated \═\═\═\═\═\═\═\═\═\═\═\═\═ */
.s-skills{padding:120px 8vw;overflow:visible;position:relative;}
.skills-head{margin-bottom:80px;position:relative;z-index:2;}
.skills-pre{font-size:.56rem;letter-spacing:.45em;text-transform:uppercase;color:var(--o);margin-bottom:14px;}
.skills-h{font-size:clamp(2.8rem,6vw,7rem);font-weight:100;line-height:.88;transform:perspective(900px) rotateX(-3deg);transform-origin:left center;}
.skills-h em{font-weight:950;font-style:italic;color:var(--o);}
.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 60px;position:relative;z-index:2;}
.skill-item{}
.skill-pct{font-size:clamp(2rem,4vw,3.5rem);font-weight:950;font-style:italic;color:var(--o);line-height:1;margin-bottom:10px;}
.skill-name{font-size:.65rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--fg);margin-bottom:10px;}
.skill-bar-wrap{width:100%;height:1px;background:rgba(255,255,255,.06);margin-bottom:14px;overflow:visible;position:relative;}
/* The bar itself — width driven by CSS custom property set by JS scrub */
.skill-bar{height:1px;background:var(--o);width:0%;position:absolute;top:0;left:0;transition:none;}
.skill-desc{font-size:.82rem;font-weight:300;line-height:1.75;color:var(--mid);}

/* \═\═\═ \§ 04  GALLERY \═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═ */
.s-see{padding:0;overflow:visible;position:relative;}
.see-head{padding:0 8vw 80px;position:relative;z-index:2;}
.see-pre{font-size:.56rem;letter-spacing:.45em;text-transform:uppercase;color:var(--o);margin-bottom:14px;}
.see-h{font-size:clamp(3.5rem,8vw,10rem);font-weight:100;line-height:.87;transform:perspective(900px) rotateX(-4deg);transform-origin:left center;}
.see-h em{font-weight:950;font-style:italic;color:var(--o);}
.gal{display:grid;grid-template-columns:1fr 1fr;gap:3px;width:100%;}
.gi{position:relative;overflow:hidden;background:var(--bg);cursor:none;height:100vh;isolation:isolate;}
.gi:first-child{grid-column:1/-1;}
.gi img{width:100%;height:100%;object-fit:cover;display:block;}

.gi-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,transparent 55%);opacity:0;transition:opacity .5s;display:flex;align-items:flex-end;padding:32px;}
.gi:hover .gi-ov{opacity:1;}
.gi-num{position:absolute;top:20px;right:24px;font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.18);}
.gi-cap{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;}
.gi-sub{font-size:.52rem;letter-spacing:.1em;color:rgba(255,255,255,.45);margin-top:4px;}
#lb{position:fixed;inset:0;z-index:7000;background:rgba(6,6,6,.97);backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .55s;}
#lb.open{opacity:1;pointer-events:all;}
.lb-in{max-width:88vw;max-height:88vh;position:relative;}
.lb-in img{max-width:88vw;max-height:88vh;object-fit:contain;display:block;}
.lb-x{position:absolute;top:-38px;right:0;font-size:.54rem;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);cursor:none;transition:color .3s;}
.lb-x:hover{color:var(--o);}

/* \═\═\═ \§ 05  COMMISSIONS \═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═ */
.s-comm{padding:140px 8vw;overflow:visible;position:relative;}
.comm-head{margin-bottom:80px;position:relative;z-index:2;}
.comm-pre{font-size:.56rem;letter-spacing:.45em;text-transform:uppercase;color:var(--o);margin-bottom:14px;}
.comm-h{font-size:clamp(3rem,6.5vw,8rem);font-weight:100;line-height:.88;transform:perspective(800px) rotateX(-3deg);transform-origin:left center;}
.comm-h em{font-weight:950;font-style:italic;color:var(--o);}
.comm-sub{font-size:.95rem;font-weight:300;color:var(--mid);margin-top:24px;max-width:600px;line-height:1.8;}

/* \─\─ Step label \─\─ */
.comm-step-lbl{font-size:.54rem;letter-spacing:.42em;text-transform:uppercase;color:var(--o);margin-bottom:20px;position:relative;z-index:2;}
.comm-step-lbl span{font-weight:700;}

/* \─\─ Category image tiles — Step 1 (5 tiles: 3+2 centered) \─\─ */
.comm-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;position:relative;z-index:2;margin-bottom:3px;margin-left:-8vw;margin-right:-8vw;width:calc(100% + 16vw);}
.comm-cat{position:relative;height:280px;overflow:hidden;cursor:none;border:1px solid rgba(255,255,255,.04);transition:border-color .4s;}
.comm-cat:hover,.comm-cat.sel{border-color:var(--o);}
.comm-cat-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.2s var(--ez),filter .6s;}
.comm-cat:hover .comm-cat-bg{transform:scale(1.06);filter:brightness(.7);}
.comm-cat.sel .comm-cat-bg{filter:brightness(.5);}
.comm-cat-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.3) 50%,transparent 80%);}
.comm-cat-check{position:absolute;top:16px;right:16px;width:22px;height:22px;border:1px solid var(--o);display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--o);opacity:0;transition:opacity .3s;}
.comm-cat.sel .comm-cat-check{opacity:1;}
.comm-cat-check::before{content:'\✓';}
.comm-cat-hover-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.52rem;letter-spacing:.35em;text-transform:uppercase;color:rgba(255,107,0,.0);transition:color .3s;pointer-events:none;}
.comm-cat:hover .comm-cat-hover-hint{color:rgba(255,107,0,.7);}
.comm-cat-body{position:absolute;bottom:0;left:0;right:0;padding:22px 24px 20px;}
.comm-cat-tag{font-size:.44rem;letter-spacing:.38em;text-transform:uppercase;color:rgba(255,107,0,.7);margin-bottom:6px;}
.comm-cat-name{font-size:clamp(.9rem,1.6vw,1.3rem);font-weight:100;line-height:1.15;margin-bottom:6px;}
.comm-cat-name strong{display:block;font-weight:950;font-style:italic;}
.comm-cat-from{font-size:.72rem;font-weight:700;color:var(--o);}
.comm-cat-from span{display:block;font-size:.5rem;font-weight:300;letter-spacing:.2em;color:var(--mid);margin-top:2px;}

/* \─\─ Step blocks (reveal after selection) \─\─ */
.comm-step-block{display:none;position:relative;z-index:2;margin-top:4px;}
.comm-step-block.vis{display:block;}

/* \─\─ Tile grid for steps 2/3/4 \─\─ */
.comm-grid-full{margin-left:-8vw;margin-right:-8vw;width:calc(100% + 16vw);}
.comm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-bottom:4px;}
.comm-grid.cols2{grid-template-columns:repeat(2,1fr);}
.comm-grid.cols3{grid-template-columns:repeat(3,minmax(0,1fr));}
.comm-grid.cols4{grid-template-columns:repeat(4,1fr);}
.comm-tile{
  padding:26px 28px 22px;border:1px solid rgba(255,255,255,.05);
  background:rgba(255,255,255,.02);position:relative;overflow:hidden;
  cursor:none;transition:border-color .3s,background .3s;
}
.comm-tile:hover{border-color:rgba(255,107,0,.2);background:rgba(255,107,0,.03);}
.comm-tile.sel{border-color:var(--o);background:rgba(255,107,0,.06);}
.comm-tile.sel::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--o);}
.comm-tile-tag{font-size:.58rem;letter-spacing:.35em;text-transform:uppercase;color:rgba(255,107,0,.7);margin-bottom:8px;}
.comm-tile-name{font-size:1.05rem;font-weight:300;margin-bottom:8px;line-height:1.2;}
.comm-tile-price{font-size:clamp(1rem,1.8vw,1.4rem);font-weight:950;font-style:italic;color:var(--o);margin-bottom:8px;}
.comm-tile-inc{font-size:.7rem;font-weight:300;color:rgba(255,255,255,.42);line-height:1.65;}
.comm-tile-ck{position:absolute;top:12px;right:14px;font-size:.65rem;color:var(--o);opacity:0;transition:opacity .25s;}
.comm-tile.sel .comm-tile-ck{opacity:1;}
/* Small tile variant */
.comm-tile.sm{padding:18px 20px 16px;}
.comm-tile.sm .comm-tile-name{font-size:.78rem;}
.comm-tile.sm .comm-tile-price{font-size:.85rem;}
.comm-tile.sm .comm-tile-inc{font-size:.52rem;}

/* \─\─ Character count for Key Visual \─\─ */
/* ─── KV quantity counter (inside tile) ─── */
.kv-count-ctrl{display:flex;flex-direction:column;align-items:stretch;height:100%;gap:0;}
.kv-count-btn{width:100%;flex:1;border:none;background:rgba(255,255,255,.03);color:rgba(255,255,255,.5);font-size:1.1rem;font-weight:300;cursor:none;display:flex;align-items:center;justify-content:center;transition:background .25s,color .25s;font-family:var(--f);}
.kv-count-btn:first-child{border-bottom:1px solid rgba(255,255,255,.08);}
.kv-count-btn:hover{background:rgba(255,107,0,.12);color:var(--o);}
.kv-count-val{font-size:2.2rem;font-weight:950;font-style:italic;color:var(--o);line-height:1;min-width:38px;text-align:center;flex-shrink:0;opacity:.15;}
.kv-base-tile.sel .kv-count-val{opacity:1;}
/* ─── KV Base tile with quantity selector ─── */
.kv-base-tile{display:flex;align-items:stretch;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02);cursor:none;transition:border-color .3s;position:relative;overflow:hidden;}
.kv-base-tile.sel{border-color:rgba(255,107,0,.5);background:rgba(255,107,0,.04);}
.kv-base-tile:hover{border-color:rgba(255,107,0,.25);}
.kv-base-tile-body{flex:1;padding:20px 24px;display:flex;flex-direction:row;align-items:center;gap:18px;}
.kv-base-tile-qty{display:flex;flex-direction:column;align-items:stretch;width:44px;border-left:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.15);flex-shrink:0;}
.kv-base-sel-ck{position:absolute;top:12px;right:64px;width:18px;height:18px;border:1px solid rgba(255,107,0,.3);display:flex;align-items:center;justify-content:center;font-size:.65rem;color:var(--o);opacity:0;transition:opacity .3s;}
.kv-base-tile.sel .kv-base-sel-ck{opacity:1;}
/* ─── KV per-artwork config tiles ─── */
.kv-artwork-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;margin-top:3px;}
.kv-artwork-tile{border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02);padding:0;display:flex;flex-direction:column;position:relative;}
.kv-artwork-tile-remove{position:absolute;top:10px;right:12px;width:24px;height:24px;border:1px solid rgba(255,255,255,.1);background:transparent;color:rgba(255,255,255,.3);font-size:.75rem;cursor:none;display:flex;align-items:center;justify-content:center;transition:border-color .25s,color .25s,background .25s;font-family:var(--f);z-index:3;}
.kv-artwork-tile-remove:hover{border-color:rgba(255,60,60,.5);color:rgba(255,60,60,.8);background:rgba(255,60,60,.06);}
.kv-artwork-tile-head{padding:20px 24px 16px;border-bottom:1px solid rgba(255,255,255,.05);}
.kv-artwork-tile-title{font-size:.78rem;font-weight:700;color:var(--fg);letter-spacing:.08em;text-transform:uppercase;}
.kv-artwork-tile-sub{font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,107,0,.5);margin-top:4px;}
.kv-artwork-tile-body{flex:1;padding:16px 24px 20px;display:grid;grid-template-columns:1fr auto;gap:0 3px;}
/* Left col: chars */
.kv-atile-chars{display:flex;flex-direction:column;gap:10px;border-right:1px solid rgba(255,255,255,.05);padding-right:20px;}
.kv-atile-label{font-size:.44rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,107,0,.55);}
.kv-atile-counter{display:flex;align-items:center;gap:10px;margin-top:4px;}
.kv-atile-val{font-size:2.2rem;font-weight:950;font-style:italic;color:var(--o);min-width:32px;line-height:1;flex-shrink:0;}
.kv-atile-btns{display:flex;flex-direction:column;gap:3px;}
.kv-atile-btn{width:28px;height:24px;border:1px solid rgba(255,255,255,.1);background:transparent;color:rgba(255,255,255,.5);font-size:.9rem;cursor:none;display:flex;align-items:center;justify-content:center;transition:border-color .25s,color .25s,background .25s;font-family:var(--f);}
.kv-atile-btn:hover{border-color:var(--o);color:var(--o);background:rgba(255,107,0,.07);}
.kv-atile-price{font-size:.72rem;font-weight:300;color:rgba(255,255,255,.35);margin-top:4px;}
/* Right col: live wallpaper toggle */
.kv-atile-lw{display:flex;flex-direction:column;gap:10px;padding-left:20px;justify-content:center;}
.kv-lw-toggle{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:none;}
.kv-lw-icon{width:40px;height:40px;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:rgba(255,255,255,.2);transition:border-color .3s,color .3s,background .3s;}
.kv-lw-toggle.sel .kv-lw-icon{border-color:rgba(255,107,0,.5);color:var(--o);background:rgba(255,107,0,.08);}
.kv-lw-toggle-lbl{font-size:.42rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.25);text-align:center;}
.kv-lw-toggle.sel .kv-lw-toggle-lbl{color:rgba(255,107,0,.7);}
.kv-lw-toggle-price{font-size:.7rem;font-weight:300;color:rgba(255,107,0,.6);}

/* \─\─ Summary bar \─\─ */
#commSummary{
  display:none;padding:22px 8vw;background:rgba(255,107,0,.06);
  border-top:1px solid rgba(255,107,0,.25);border-bottom:1px solid rgba(255,107,0,.25);position:relative;z-index:2;
  margin-top:4px;margin-bottom:4px;margin-left:-8vw;margin-right:-8vw;width:calc(100% + 16vw);
}
#commSummary.vis{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
.sum-left{display:flex;flex-direction:column;gap:4px;}
#sumPath{font-size:.52rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,107,0,.6);}
#sumItems{font-size:.85rem;font-weight:300;color:var(--fg);}
.sum-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
.sum-label{font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.45);}

/* \─\─ Invoice-style breakdown \─\─ */
#commBreakdown{
  display:none;border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.015);margin-top:4px;margin-bottom:4px;
  position:relative;z-index:2;margin-left:-8vw;margin-right:-8vw;width:calc(100% + 16vw);
}
#commBreakdown.vis{display:block;}
.breakdown-row{display:flex;justify-content:space-between;align-items:center;padding:12px 28px;border-bottom:1px solid rgba(255,255,255,.04);}
.breakdown-row:last-child{border-bottom:none;}
.breakdown-row.total{background:rgba(255,107,0,.05);border-top:1px solid rgba(255,107,0,.2);}
.breakdown-label{font-size:.82rem;font-weight:300;color:rgba(255,255,255,.55);}
.breakdown-label span{font-size:.6rem;letter-spacing:.2em;color:rgba(255,255,255,.35);display:block;margin-top:2px;}
.breakdown-price{font-size:.92rem;font-weight:700;color:rgba(255,255,255,.8);}
.breakdown-row.total .breakdown-price{color:var(--o);font-size:1.05rem;}
.breakdown-vat{font-size:.62rem;font-weight:300;color:var(--dim);margin-top:2px;display:block;text-align:right;}
/* Expandable KV rows */
.breakdown-row.expandable{cursor:none;transition:background .2s;}
.breakdown-row.expandable:hover{background:rgba(255,107,0,.03);}
.bd-expand-arrow{font-size:.65rem;color:rgba(255,107,0,.4);transition:transform .35s var(--ez);margin-left:10px;display:inline-block;flex-shrink:0;}
.breakdown-row.expandable.open .bd-expand-arrow{transform:rotate(90deg);}
.bd-sub-rows{display:none;background:rgba(0,0,0,.15);border-bottom:1px solid rgba(255,255,255,.04);}
.bd-sub-rows.open{display:block;}
.bd-sub-row{display:flex;justify-content:space-between;align-items:center;padding:8px 28px 8px 44px;border-bottom:1px solid rgba(255,255,255,.03);}
.bd-sub-row:last-child{border-bottom:none;}
.bd-sub-label{font-size:.76rem;font-weight:300;color:rgba(255,255,255,.42);}
.bd-sub-label em{font-style:normal;color:rgba(255,107,0,.5);}
.bd-sub-price{font-size:.78rem;font-weight:300;color:rgba(255,255,255,.45);}

/* \─\─ Commission contact form \─\─ */
#commFormBlock{display:none;padding:40px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.015);position:relative;z-index:2;margin-top:4px;}
#commFormBlock.vis{display:block;}
.comm-form-title{font-size:.56rem;letter-spacing:.42em;text-transform:uppercase;color:var(--o);margin-bottom:28px;}

/* ── Checkout overlay textarea/input hover lines ── */
#checkoutOverlay::-webkit-scrollbar{width:2px;}
#checkoutOverlay::-webkit-scrollbar-thumb{background:var(--o);}
#checkoutOverlay::-webkit-scrollbar-track{background:transparent;}
#checkoutOverlay .cfr input:focus,
#checkoutOverlay .cfr textarea:focus,
#checkoutOverlay #cfWishes:focus,
#checkoutOverlay #cfmsg:focus{border-color:var(--o)!important;outline:none;}
#checkoutOverlay .cfr::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--o);transition:width .5s var(--ez);}
#checkoutOverlay .cfr:focus-within::after{width:100%;}

/* ── Commission locked overlay on section ── */
#s-comm.comm-locked .comm-cats,
#s-comm.comm-locked #commStep2,
#s-comm.comm-locked #commStep3,
#s-comm.comm-locked #commStep4{pointer-events:none;opacity:.35;user-select:none;}
#s-comm.comm-locked .comm-cat{cursor:not-allowed;}

/* ── Status banner colors ── */
#commBannerInner.st-paused{background:rgba(255,152,0,.12);border-bottom:1px solid rgba(255,152,0,.25);color:rgba(255,152,0,.85);}
#commBannerInner.st-closed{background:rgba(255,80,80,.1);border-bottom:1px solid rgba(255,80,80,.2);color:rgba(255,80,80,.8);}
#commBanner.visible{pointer-events:all;}
.comm-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px 28px;}
.cfr{position:relative;margin-bottom:28px;}
.cfr label{display:block;font-size:.5rem;letter-spacing:.32em;text-transform:uppercase;color:var(--dim);margin-bottom:10px;}
.cfr input,.cfr textarea{width:100%;background:transparent;border-bottom:1px solid rgba(255,255,255,.08);color:var(--fg);font-family:var(--f);font-size:.95rem;font-weight:300;padding:10px 0;transition:border-color .3s;}
.cfr input:focus,.cfr textarea:focus{border-color:var(--o);}
.cfr textarea{resize:none;height:120px;}
.cfr::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--o);transition:width .5s var(--ez);}
.cfr:focus-within::after{width:100%;}
.cfr.full{grid-column:1/-1;}
.comm-form-mail{font-size:.58rem;color:var(--dim);margin-top:14px;}
.comm-form-mail a{color:var(--o);}
.cf-row{display:flex;align-items:center;gap:24px;margin-top:8px;}
.cf-note{font-size:.54rem;letter-spacing:.12em;color:var(--dim);}

/* \─\─ Terms bar \─\─ */
.comm-terms-bar{
  display:none;grid-template-columns:repeat(4,1fr);gap:3px;
  padding:0;border:1px solid rgba(255,107,0,.08);
  background:rgba(255,107,0,.02);margin-top:60px;position:relative;z-index:2;
}
.comm-terms-bar.vis{display:grid;}

.cterm{padding:28px 30px;}
.cterm-label{font-size:.48rem;letter-spacing:.36em;text-transform:uppercase;color:var(--o);margin-bottom:10px;}
.cterm-text{font-size:.76rem;font-weight:300;color:var(--mid);line-height:1.65;}
.cterm-text a{color:var(--o);text-decoration:underline;text-underline-offset:3px;}

/* \─\─ Support / Patreon + Gumroad \─\─ */
.support-section{margin-top:60px;position:relative;z-index:2;}
.support-pre{font-size:.54rem;letter-spacing:.42em;text-transform:uppercase;color:var(--o);margin-bottom:28px;}
.support-h{font-size:clamp(1.6rem,3vw,3rem);font-weight:100;margin-bottom:40px;}
.support-h em{font-weight:950;font-style:italic;color:var(--o);}
.support-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px;}
.support-tile{
  padding:48px 44px;border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);position:relative;overflow:hidden;
  cursor:none;transition:border-color .4s,background .4s;
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:260px;
}
.support-tile:hover{border-color:rgba(255,107,0,.35);background:rgba(255,107,0,.04);}
.support-tile::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:transparent;transition:background .4s;}
.support-tile:hover::before{background:var(--o);}
.support-tile-logo{font-size:.52rem;letter-spacing:.4em;text-transform:uppercase;color:var(--dim);margin-bottom:18px;}
.support-tile-name{font-size:clamp(1.8rem,3vw,2.8rem);font-weight:950;font-style:italic;line-height:.9;margin-bottom:16px;color:var(--fg);}
.support-tile-desc{font-size:.82rem;font-weight:300;color:var(--mid);line-height:1.75;margin-bottom:28px;flex-grow:1;}
.support-tile .btn{align-self:flex-start;}

/* \═\═\═ \§ 06  SHOP \═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═ */
.s-dec{padding:140px 0 140px 8vw;overflow:visible;position:relative;}
.dec-layout{display:grid;grid-template-columns:1fr 2fr;gap:6vw;align-items:start;position:relative;z-index:2;}
.dec-n{font-size:.54rem;letter-spacing:.42em;text-transform:uppercase;color:var(--o);margin-bottom:36px;}
.dec-h{font-size:clamp(2.8rem,5.8vw,7.5rem);font-weight:100;line-height:.88;margin-bottom:30px;transform:perspective(800px) rotateX(-3deg) rotateY(1deg);transform-origin:left top;}
.dec-h strong{display:block;font-weight:950;font-size:clamp(3.2rem,7vw,9rem);color:var(--o);}
.dec-p{font-size:.95rem;font-weight:300;line-height:1.9;color:var(--mid);max-width:380px;margin-bottom:48px;}
/* ── Shop-Slider ─────────────────────────────────────────────── */
.shop-slider-wrap{
  position:relative;overflow:hidden;
  /* Breite: rechts bis ans Ende */
  margin-right:-8vw; /* kompensiert dec-layout padding */
}
.shop-slider-track{
  display:flex;gap:3px;
  will-change:transform;
  user-select:none;
  -webkit-user-select:none;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.shop-slider-track.no-transition{transition:none!important;}
.shop-item{
  flex:0 0 calc(25% - 3px);  /* 4 sichtbar auf Desktop */
  position:relative;overflow:hidden;
  background:rgba(255,255,255,.02);cursor:none;
  border:1px solid rgba(255,255,255,.04);
  transition:border-color .3s,transform .6s var(--ez);
  text-decoration:none;display:block;color:inherit;
}
.shop-item:hover{border-color:rgba(255,107,0,.2);transform:perspective(600px) rotateX(-3deg) translateY(-6px);}
.shop-img{aspect-ratio:3/4;overflow:hidden;}
.shop-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ez);}
.shop-item:hover .shop-img img{transform:scale(1.06);}
.shop-info{padding:16px 18px 20px;}
.shop-name{font-size:.7rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px;}
.shop-price{font-size:.85rem;font-weight:700;color:var(--o);}
.shop-tag{font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-top:5px;}
.shop-badge{position:absolute;top:12px;left:12px;font-size:.46rem;letter-spacing:.3em;text-transform:uppercase;background:var(--o);color:#111;padding:3px 9px;z-index:3;}
/* Pfeil-Buttons */
.shop-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:10;
  width:40px;height:40px;
  background:rgba(20,20,20,.75);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.7);font-size:.85rem;cursor:none;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);
  transition:border-color .2s,color .2s,background .2s,opacity .2s;
  opacity:0;
}
.shop-slider-wrap:hover .shop-arrow{opacity:1;}
.shop-arrow:hover{border-color:rgba(255,107,0,.5);color:var(--o);background:rgba(20,20,20,.92);}
.shop-arrow.prev{left:12px;}
.shop-arrow.next{right:12px;}
.shop-arrow.disabled{opacity:0!important;pointer-events:none;}
/* Dots-Navigation */
.shop-dots{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px;max-width:100%;padding:0 8px;box-sizing:border-box;}
.shop-dot{
  width:24px;height:3px;background:rgba(255,255,255,.15);
  transition:background .3s,width .3s;cursor:none;
}
.shop-dot.on{background:var(--o);width:36px;}
/* Responsive */
@media(max-width:900px){
  .shop-item{flex:0 0 calc(33.33% - 2px);}
}
@media(max-width:600px){
  .shop-item{flex:0 0 calc(80% - 2px);}
  .shop-slider-wrap{margin-right:-24px;}
}

/* \═\═\═ \§ 07  SAY HI \═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═\═ */
.s-sayhi{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:140px 8vw 40px;position:relative;overflow:visible;}
.wt-sh{font-size:clamp(16rem,38vw,52rem);font-weight:950;font-style:italic;color:rgba(255,107,0,.013);letter-spacing:-.05em;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;}

/* Two-column contact layout */
.sayhi-inner{display:grid;grid-template-columns:1fr 1fr;gap:10vw;width:100%;max-width:1200px;align-items:start;}
.sayhi-left{position:relative;z-index:2;}
.sh-pre{font-size:.57rem;letter-spacing:.45em;text-transform:uppercase;color:var(--o);margin-bottom:34px;}
.sh-h{font-size:clamp(4rem,10vw,13rem);font-weight:100;line-height:.82;margin-bottom:48px;}
.sh-h em{display:block;font-weight:950;font-style:italic;color:var(--o);font-size:clamp(4.5rem,12vw,15rem);}
.sh-sub{font-size:1rem;font-weight:300;line-height:1.9;color:var(--mid);margin-bottom:36px;max-width:420px;}
.sh-links{display:flex;flex-direction:column;gap:14px;}
.sh-link{display:flex;align-items:center;gap:14px;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);transition:color .3s;}
.sh-link:hover{color:var(--o);}
.sh-link-arrow{font-size:.7rem;color:var(--o);}
.sh-link-line{width:32px;height:1px;background:rgba(255,107,0,.3);transition:width .3s;}
.sh-link:hover .sh-link-line{width:48px;}
/* Right: Form */
.sayhi-right{position:relative;z-index:2;}
.form{width:100%;}
.fr{position:relative;margin-bottom:36px;}
.fr label{display:block;font-size:.53rem;letter-spacing:.38em;text-transform:uppercase;color:var(--dim);margin-bottom:12px;}
.fr input,.fr textarea{width:100%;background:transparent;border-bottom:1px solid rgba(255,255,255,.08);color:var(--fg);font-family:var(--f);font-size:1rem;font-weight:300;padding:12px 0;transition:border-color .3s;}
.fr input:focus,.fr textarea:focus{border-color:var(--o);}
.fr textarea{resize:none;height:96px;}
.fr::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--o);transition:width .55s var(--ez);}
.fr:focus-within::after{width:100%;}
.f-row{display:flex;align-items:center;gap:24px;margin-top:10px;}
.f-note{font-size:.56rem;letter-spacing:.12em;color:var(--dim);}

.btn{display:inline-block;padding:13px 42px;font-family:var(--f);font-size:.62rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;cursor:none;border:1px solid var(--o);color:var(--o);background:transparent;position:relative;overflow:hidden;transition:color .4s;}
.btn::before{content:'';position:absolute;inset:0;background:var(--o);transform:translateX(-101%);transition:transform .45s var(--ez);}
.btn:hover::before{transform:translateX(0);}
.btn:hover{color:#111;}.btn span{position:relative;z-index:1;}

.footer-legal-link{color:var(--dim);text-decoration:none;font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;transition:color .3s;}
.footer-legal-link:hover{color:var(--o);}
.site-footer{width:100%;position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.04);padding-top:32px;margin-top:28px;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);}

/* \─\─ Summary price display \─\─ */
.sum-price{font-size:clamp(1.4rem,2.5vw,2rem);font-weight:950;font-style:italic;color:var(--o);}

[data-rv]{}

/* ── Commission Status Badge ── */
#commStatusBadge{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:22px;padding:7px 16px 7px 12px;
  border:1px solid rgba(255,255,255,.08);
  font-size:.48rem;letter-spacing:.36em;text-transform:uppercase;
}
#commStatusBadge .csb-dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
}
#commStatusBadge.open  { border-color:rgba(80,220,120,.25);color:rgba(80,220,120,.85); }
#commStatusBadge.open  .csb-dot{ background:#50dc78;box-shadow:0 0 6px 1px rgba(80,220,120,.5); }
#commStatusBadge.paused{ border-color:rgba(255,152,0,.3);color:rgba(255,152,0,.9); }
#commStatusBadge.paused .csb-dot{ background:#ff9800;box-shadow:0 0 6px 1px rgba(255,152,0,.55); }
#commStatusBadge.waitlist{ border-color:rgba(255,200,60,.25);color:rgba(255,200,60,.85); }
#commStatusBadge.waitlist .csb-dot{ background:#ffc83c;box-shadow:0 0 6px 1px rgba(255,200,60,.5); }
#commStatusBadge.closed{ border-color:rgba(255,80,80,.2);color:rgba(255,100,100,.7); }
#commStatusBadge.closed .csb-dot{ background:#ff5050;box-shadow:0 0 6px 1px rgba(255,80,80,.4); }


#commStep2 .comm-grid,
#commStep3 .comm-grid,
#commStep4 .comm-grid {
  margin-left:-8vw;
  margin-right:-8vw;
  width:calc(100% + 16vw);
}

#exportStep{margin-left:-8vw;margin-right:-8vw;width:calc(100% + 16vw);}
#exportStep .comm-step-lbl{margin-left:8vw;}

/* ── SEO: screen-reader-only helper — sichtbar für Suchmaschinen, unsichtbar im Design ── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* „Neues & Drops“-Anmeldung gehört nicht auf die Startseite (nur shop.html / shop-hub.html).
   Blendet aus, falls noch altes Markup (#nxUpdates) aus dem Cache geladen wird. */
#nxUpdates,
.nx-updates {
  display: none !important;
}