/* PORT9 — Site-Styles (Skeleton v1) */
:root{
  --bg:#050408; --panel:#0a0910; --line:#221f2e; --dim:#8b87a0;
  --lila:#b9a6f2; --violet:#7a5fd8; --orange:#ff7a29; --white:#f4f1ff;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--white);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; line-height:1.5;
  min-height:100vh; display:flex; flex-direction:column;
  cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22"><rect x="3" y="3" width="16" height="16" fill="%23ff7a29" opacity="0.22"/><rect x="7" y="7" width="8" height="8" fill="%23ff7a29"/></svg>') 11 11, auto;
}
.mono{font-family:"SF Mono","JetBrains Mono",ui-monospace,Menlo,Consolas,monospace}
a{color:inherit; text-decoration:none}

/* Glut-Cursor (C4): JS blendet ihn ein und versteckt den System-Cursor */
body.glut, body.glut a, body.glut button, body.glut input{cursor:none !important}
#glut0{position:fixed; width:10px; height:10px; background:var(--orange); pointer-events:none; z-index:9999;
  box-shadow:0 0 8px rgba(255,122,41,.9), 0 0 22px rgba(255,122,41,.45); animation:pixburn 1.7s infinite;
  left:0; top:0; display:none}
#glut1{position:fixed; width:8px; height:8px; background:var(--orange); opacity:.28; pointer-events:none; z-index:9998; display:none}
#glut2{position:fixed; width:6px; height:6px; background:var(--orange); opacity:.14; pointer-events:none; z-index:9997; display:none}
#glut0.link{width:16px; height:16px; background:var(--lila);
  box-shadow:0 0 10px rgba(185,166,242,.9), 0 0 26px rgba(185,166,242,.5)}

@keyframes pixburn{0%,100%{opacity:1} 12%{opacity:.4} 13%{opacity:1} 47%{opacity:1} 48%{opacity:.3} 50%{opacity:1} 78%{opacity:.7} 79%{opacity:1}}
@keyframes flicker{0%,7%,9%,100%{opacity:1} 8%{opacity:.55} 38%,40%{opacity:1} 39%{opacity:.75} 64%{opacity:1} 65%{opacity:.45} 66%{opacity:1} 82%{opacity:.85} 83%{opacity:1}}

/* ── Header ── */
header.site{
  position:sticky; top:0; z-index:100; background:rgba(5,4,8,.88); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{max-width:1200px; margin:0 auto; padding:0 24px; height:64px; display:flex; align-items:center; gap:28px}
.brand{display:flex; align-items:center; gap:10px}
.brand svg{display:block; filter:drop-shadow(0 0 5px rgba(185,166,242,.6))}
nav.main{display:flex; gap:22px; margin-left:auto}
nav.main a{
  font-size:11.5px; letter-spacing:.22em; color:var(--dim);
  text-transform:uppercase; padding:6px 2px; transition:color .15s;
}
nav.main a:hover{color:var(--white); text-shadow:0 0 12px rgba(185,166,242,.8)}
nav.main a.active{color:var(--lila)}
nav.main a.active::after{content:""; display:block; height:2px; background:var(--orange); margin-top:3px;
  box-shadow:0 0 8px rgba(255,122,41,.8)}
.nav-icons{display:flex; gap:16px; font-size:11px; letter-spacing:.14em; color:var(--dim)}
.nav-icons span{opacity:.5}

/* ── Footer ── */
footer.site{border-top:1px solid var(--line); margin-top:auto}
.foot-inner{max-width:1200px; margin:0 auto; padding:34px 24px; display:flex; flex-wrap:wrap; gap:18px;
  align-items:center; justify-content:space-between}
.foot-claim{font-size:11px; letter-spacing:.24em; color:var(--dim); text-transform:uppercase}
.foot-claim b{color:var(--lila); font-weight:400}
.foot-links{display:flex; gap:18px; font-size:11px; letter-spacing:.18em; color:var(--dim); text-transform:uppercase}
.foot-links a:hover{color:var(--orange)}

/* ── Hero (Home) ── */
.hero{position:relative; min-height:calc(100vh - 64px); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:34px; overflow:hidden}
.hero::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);}
.hero::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.7) 100%);}
#logoCanvas{display:block; touch-action:none}
.hero .sub{position:relative; z-index:3; font-size:12px; letter-spacing:.34em; color:var(--dim);
  text-transform:uppercase; text-align:center}
.hero .sub b{color:var(--lila); font-weight:400}
.hero .hint{position:absolute; bottom:26px; z-index:3; font-size:10px; letter-spacing:.3em;
  color:var(--dim); text-transform:uppercase; opacity:.6; animation:flicker 5s infinite}

/* ── Sections (Home) ── */
section.strip{border-top:1px solid var(--line)}
.strip-inner{max-width:1200px; margin:0 auto; padding:72px 24px}
.strip h2{font-size:12px; letter-spacing:.3em; color:var(--dim); text-transform:uppercase; margin-bottom:26px}
.bigline{font-size:clamp(26px,4.6vw,54px); font-weight:800; text-transform:uppercase; letter-spacing:-.015em; line-height:1.12}
.bigline .l{color:var(--lila)} .bigline .o{color:var(--orange)}
.strip p.txt{max-width:620px; color:var(--dim); font-size:15px; margin-top:14px}
.pending{
  display:inline-flex; align-items:center; gap:10px; margin-top:22px; border:1px solid var(--line);
  padding:12px 18px; font-size:11px; letter-spacing:.22em; color:var(--dim); text-transform:uppercase}
.pending i{width:8px; height:8px; background:var(--orange); display:block; animation:pixburn 1.7s infinite;
  box-shadow:0 0 8px rgba(255,122,41,.9)}

.cardrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-top:28px}
.ph-card{border:1px solid var(--line); background:var(--panel); aspect-ratio:1/1; position:relative;
  display:flex; align-items:flex-end; padding:16px; overflow:hidden; transition:border-color .2s}
.ph-card:hover{border-color:var(--violet)}
.ph-card .wm{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:.08}
.ph-card:hover .wm{opacity:.16}
.ph-card span{position:relative; font-size:10px; letter-spacing:.2em; color:var(--dim); text-transform:uppercase}

/* Newsletter */
.signal-form{display:flex; gap:0; margin-top:26px; max-width:420px; border:1px solid var(--line)}
.signal-form input{flex:1; background:transparent; border:0; outline:0; color:var(--white);
  padding:14px 16px; font-family:inherit; font-size:13px; letter-spacing:.06em}
.signal-form input::placeholder{color:#55516a}
.signal-form button{background:var(--lila); color:#0a0208; border:0; padding:0 22px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; transition:background .15s}
.signal-form button:hover{background:var(--orange)}

/* ── Platzhalter-Seiten ── */
.placeholder{position:relative; flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:26px; min-height:calc(100vh - 64px); overflow:hidden; text-align:center; padding:40px 24px}
.placeholder::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);}
.placeholder .wm9{position:absolute; opacity:.05; pointer-events:none}
.placeholder h1{font-size:clamp(30px,6vw,64px); font-weight:800; text-transform:uppercase; letter-spacing:-.02em; z-index:2}
.placeholder h1 span{color:var(--lila); text-shadow:0 0 22px rgba(185,166,242,.6)}
.placeholder .term{z-index:2; font-size:15px; color:var(--lila); letter-spacing:.04em}
.placeholder .term .cur{animation:curblink 1s steps(1) infinite}
@keyframes curblink{0%,49%{opacity:1} 50%,100%{opacity:0}}
.placeholder .note{z-index:2; max-width:480px; font-size:13px; color:var(--dim)}
.placeholder .back{z-index:2; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--dim);
  border:1px solid var(--line); padding:11px 20px; transition:all .15s}
.placeholder .back:hover{color:var(--white); border-color:var(--violet)}

/* ── Boot-Overlay ── */
#boot{position:fixed; inset:0; z-index:1000; background:#030207; display:flex;
  align-items:center; justify-content:center; transition:opacity .3s steps(3)}
#boot.done{opacity:0; pointer-events:none}
#boot pre{font-family:"SF Mono","JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:13px; line-height:2; color:var(--lila); text-shadow:0 0 8px rgba(185,166,242,.6)}
#boot pre .ok{color:var(--orange)}

@media (max-width:760px){
  nav.main{gap:14px}
  nav.main a{font-size:10px; letter-spacing:.14em}
  .nav-icons{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}

/* ══════════ V2: 9-Logo links, PORT 9 mittig, Beton-Textur ══════════ */
.nav-inner.v2{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:72px}
.nav-inner.v2 .brand{justify-self:start}
.nav-inner.v2 .brand svg{width:26px; height:32px; filter:drop-shadow(0 0 6px rgba(185,166,242,.55))}
.wordmark{
  justify-self:center; font-weight:800; font-size:clamp(17px,2.6vw,22px);
  letter-spacing:.38em; text-indent:.38em; color:var(--white); text-transform:uppercase;
}
.nav-inner.v2 .nav-icons{justify-self:end}
nav.main.v2{
  display:flex; justify-content:center; gap:26px; margin:0;
  border-top:1px solid var(--line); padding:11px 16px 13px;
}

/* Beton/Metall: fast schwarz, feines Korn + wenige Kratzer, alles prozedural */
body{
  background:
    linear-gradient(158deg, #08070d 0%, #050408 44%, #0a0910 100%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:800; pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0'/%3E%3C/filter%3E%3Crect width='340' height='340' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='700'%3E%3Cg stroke='%23ffffff' fill='none' stroke-linecap='round'%3E%3Cpath d='M80 120 L340 96' stroke-width='0.7' opacity='0.05'/%3E%3Cpath d='M610 60 L880 140' stroke-width='0.5' opacity='0.04'/%3E%3Cpath d='M120 520 L60 660' stroke-width='0.6' opacity='0.05'/%3E%3Cpath d='M700 380 C 760 400 830 380 890 420' stroke-width='0.5' opacity='0.035'/%3E%3Cpath d='M240 300 L520 288' stroke-width='0.4' opacity='0.03'/%3E%3Cpath d='M420 620 L700 650' stroke-width='0.7' opacity='0.045'/%3E%3Cpath d='M30 40 L90 210' stroke-width='0.4' opacity='0.035'/%3E%3Cpath d='M560 180 L590 340' stroke-width='0.5' opacity='0.03'/%3E%3Cpath d='M810 540 L640 560' stroke-width='0.6' opacity='0.05'/%3E%3Cpath d='M370 60 C 420 90 400 150 460 170' stroke-width='0.4' opacity='0.03'/%3E%3C/g%3E%3C/svg%3E");
  background-size:340px 340px, 900px 700px;
  opacity:.3; mix-blend-mode:screen;
}
@media (max-width:760px){
  nav.main.v2{gap:14px}
  .nav-inner.v2{grid-template-columns:auto 1fr auto; height:64px}
}

/* ══════════ V3: Textmarke links, tauscht beim Scrollen gegen das 9-Logo ══════════ */
.brand.swap{position:relative; height:32px; display:flex; align-items:center; min-width:100px}
.brandtext{
  font-weight:600; font-size:15px; letter-spacing:.3em; color:var(--white);
  text-transform:uppercase; transition:opacity .22s steps(3);
}
.brandnine{
  position:absolute; left:0; top:1px; width:24px; height:30px; opacity:0;
  filter:drop-shadow(0 0 6px rgba(185,166,242,.55)); transition:opacity .22s steps(3);
}
header.site.scrolled .brandtext{opacity:0}
header.site.scrolled .brandnine{opacity:1}

/* ══════════ V4/HIGH-END: Signal-Button, Ticker, Progress, Tilt, 909-Strobe ══════════ */
#signalBtn{
  position:relative; z-index:3; background:transparent; border:1px solid var(--line);
  color:var(--lila); font-size:11px; letter-spacing:.26em; padding:12px 22px;
  text-transform:uppercase; transition:all .15s;
}
#signalBtn:hover{border-color:var(--violet); color:var(--white); text-shadow:0 0 10px rgba(185,166,242,.8)}
#signalBtn.on{border-color:var(--orange); color:var(--orange);
  box-shadow:0 0 14px rgba(255,122,41,.25), inset 0 0 14px rgba(255,122,41,.08);
  animation:pixburn 1.7s infinite}

.ticker{border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; padding:10px 0; background:rgba(10,9,16,.6)}
.ticker-track{display:flex; white-space:nowrap; width:max-content; animation:tick 78s linear infinite; will-change:transform}
.ticker-track span{font-size:11px; letter-spacing:.22em; color:var(--dim); text-transform:uppercase}
@keyframes tick{from{transform:translateX(0)} to{transform:translateX(-50%)}}

#progress{position:fixed; top:0; left:0; height:2px; width:0; z-index:1001;
  background:var(--orange); box-shadow:0 0 10px rgba(255,122,41,.8)}

.ph-card{transition:transform .18s ease, border-color .2s; will-change:transform; transform-style:preserve-3d}

body.strobe909{animation:strobe909 .9s steps(2)}
@keyframes strobe909{0%,40%,80%,100%{filter:none} 20%,60%{filter:invert(1) hue-rotate(160deg)}}

/* ══════════ V4: 44LG-Typo (Nova Mono ≈ Orator) + Merch-Grid ══════════ */
body{font-family:"Nova Mono","SF Mono",ui-monospace,Menlo,monospace}
.bigline{font-family:"Nova Mono",ui-monospace,monospace; font-weight:400; letter-spacing:.04em;
  font-size:clamp(22px,3.9vw,44px); text-transform:uppercase}
.brandtext{font-family:"Nova Mono",ui-monospace,monospace; font-weight:400; font-size:16px}
nav.main a{font-family:"Nova Mono",ui-monospace,monospace}
.placeholder h1{font-family:"Nova Mono",ui-monospace,monospace; font-weight:400; text-transform:uppercase;
  font-size:clamp(26px,5vw,52px)}
.meta h3, .strip p.txt, .hero .sub{font-family:"Nova Mono",ui-monospace,monospace}
#signalBtn, .signal-form button, .pending{font-family:"Nova Mono",ui-monospace,monospace}

/* Merch */
.shop-head{max-width:1200px; margin:0 auto; padding:64px 24px 8px}
.shop-head .bigline{margin-bottom:8px}
.shop-note{font-size:11px; letter-spacing:.22em; color:var(--dim); text-transform:uppercase}
.shop-note b{color:var(--orange); font-weight:400}
.prod-grid{max-width:1200px; margin:0 auto; padding:34px 24px 90px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:18px}
.prod-card{border:1px solid var(--line); background:var(--panel); overflow:hidden;
  transition:transform .18s ease, border-color .2s; will-change:transform}
.prod-card:hover{border-color:var(--violet)}
.prod-card .pv{position:relative; aspect-ratio:1/1; background:#0c0b12; display:flex;
  align-items:center; justify-content:center}
.prod-card .pv::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45) 100%)}
.prod-card .pv svg{width:82%; height:82%}
.prod-info{display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:13px 15px; border-top:1px solid var(--line)}
.prod-info .pn{font-size:12px; letter-spacing:.16em; text-transform:uppercase}
.prod-info .pp{font-size:12px; color:var(--dim)}
.prod-tag{position:absolute; top:12px; left:12px; font-size:9px; letter-spacing:.24em;
  color:var(--orange); border:1px solid rgba(255,122,41,.5); padding:4px 8px; text-transform:uppercase;
  background:rgba(5,4,8,.7)}

/* ══════════ V4.1: Eine Schrift, nur Versalien, Merch-Feinschliff ══════════ */
body, .mono, input, button, textarea{font-family:"Nova Mono","SF Mono",ui-monospace,Menlo,monospace}
body{text-transform:uppercase}
#signalBtn{display:none}

.prod-card .pv{background:radial-gradient(ellipse at 50% 30%, #16151f 0%, #0b0a11 72%)}
.prod-card .pv svg{transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.prod-card:hover .pv svg{transform:scale(1.06) translateY(-4px)}
a.prod-card{display:block; color:inherit}
.teaser-more{display:flex; align-items:center; justify-content:center; border:1px dashed var(--line);
  font-size:11px; letter-spacing:.24em; color:var(--dim); transition:all .2s; min-height:200px}
.teaser-more:hover{color:var(--lila); border-color:var(--violet)}

/* ══════════ Newsletter „Join the signal" ══════════ */
.hp{position:absolute; left:-9999px; opacity:0; pointer-events:none}
.signal-ok{margin-top:24px; font-size:12px; letter-spacing:.2em; color:var(--orange);
  border:1px solid rgba(255,122,41,.4); padding:14px 18px; display:inline-block;
  animation:pixburn 1.7s infinite}
.signal-form.sending button{opacity:.5}