/* Send & Return – Website. Identity „Studio Rack“ (05_Design/Identity_Studio-Rack.md) */
:root{
  --bg:#111214; --panel:#1C1D21; --deep:#0B0B0C; --line:#2C2E35; --soft:#26282E;
  --ink:#ECEDEF; --muted:#9A9DA6;
  --p1:#3D8BFF; --p2:#FFC93C; --p3:#FF7A2F; --p4:#B455F2; --p4t:#C27DF5;
  --red:#E5484D; --remix:#1EC8A5; --joker:#E8388A; --alu:#E4E6EA; --ok:#4CC781;
  --f-display:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --r:12px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--f-display);-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.1;margin:0;letter-spacing:-.01em}
h2{font-size:clamp(30px,4.4vw,48px);font-weight:700;max-width:18ch;margin-bottom:18px}
h3{font-size:21px;font-weight:700}
p{margin:0}
.wrap{max-width:1160px;margin:0 auto;padding-inline:max(16px,env(safe-area-inset-left,0px))}
.narrow{max-width:780px}
.label,.code,.claim,.mtag,.tag,.dl,.kp{font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:600}
.label{color:var(--muted);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.intro{color:var(--muted);font-size:19px;max-width:62ch;margin-bottom:44px}
.note{color:var(--muted);font-size:15px;margin-top:18px}
.led{width:8px;height:8px;border-radius:50%;background:var(--line);display:inline-block}
.led.on{background:var(--ok);box-shadow:0 0 8px var(--ok);animation:blink 2.4s infinite}
@keyframes blink{50%{opacity:.35}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--deep);font:700 16px var(--f-display);text-decoration:none;cursor:pointer;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-1px);background:#fff}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink);background:transparent}
.btn.small{min-height:36px;padding:6px 16px;font-size:14px}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--p1);outline-offset:3px}

/* Header */
header.top{position:sticky;top:0;z-index:20;background:rgba(17,18,20,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:20px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand svg{width:28px;height:28px;flex:none}
.brand b{font:700 20px/1 var(--f-display);letter-spacing:-.005em}
#nav{display:flex;align-items:center;gap:26px;margin-left:auto}
#nav a:not(.btn){text-decoration:none;color:var(--muted);font-size:15px;font-weight:500}
#nav a:not(.btn):hover{color:var(--ink)}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line);color:var(--ink);font:600 12px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;border-radius:8px;cursor:pointer}
@media (max-width:860px){
  .menu-btn{display:block}
  #nav{display:none;position:absolute;left:0;right:0;top:64px;flex-direction:column;align-items:stretch;gap:0;background:var(--panel);border-bottom:1px solid var(--line);padding:8px 16px 16px}
  #nav.open{display:flex}
  #nav a:not(.btn){padding:12px 0;border-bottom:1px solid var(--line);font-size:17px}
  #nav .btn{margin-top:14px}
}

/* Hero */
.hero{position:relative;overflow:hidden;padding:72px 0 96px;background:
  radial-gradient(600px 400px at 85% 30%,rgba(61,139,255,.13),transparent 70%),
  radial-gradient(500px 360px at 70% 85%,rgba(180,85,242,.12),transparent 70%)}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(64px,10vw,128px);font-weight:700;line-height:.92;letter-spacing:-.01em}
.claim{color:var(--muted);letter-spacing:.34em;font-size:clamp(12px,1.4vw,15px);margin:20px 0 28px}
.lead{font-size:20px;max-width:34ch;color:#cfd1d6}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.specs{list-style:none;padding:0;margin:40px 0 0;display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);border-radius:var(--r);width:fit-content;max-width:100%}
.specs li{padding:12px 20px;font:500 12px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-right:1px solid var(--line)}
.specs li:last-child{border-right:0}
.specs b{display:block;font:700 22px var(--f-display);color:var(--ink);letter-spacing:0}
.hero-visual{position:relative;height:520px}
.fan{position:absolute;inset:0;transform:scale(var(--s,.8));transform-origin:50% 60%}
.fan .card{position:absolute;left:50%;top:40px;transform-origin:50% 120%;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.fan .c1{transform:translateX(-50%) rotate(-21deg) translate(-40px,30px)}
.fan .c2{transform:translateX(-50%) rotate(-7deg) translate(-14px,4px)}
.fan .c3{transform:translateX(-50%) rotate(7deg) translate(14px,4px)}
.fan .c4{transform:translateX(-50%) rotate(21deg) translate(40px,30px)}
.hero-visual:hover .c1{transform:translateX(-50%) rotate(-26deg) translate(-60px,24px)}
.hero-visual:hover .c4{transform:translateX(-50%) rotate(26deg) translate(60px,24px)}
.hero-visual .dice-pair{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);z-index:5}

/* Karte (Poker 63×88) */
.card{width:232px;aspect-ratio:63/88;background:var(--panel);border:1px solid var(--line);border-radius:13px;overflow:hidden;padding:20px 18px 16px;display:flex;flex-direction:column;box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
.card .strip{position:absolute;inset:0 0 auto;height:8px;background:var(--c)}
.card{position:relative}
.card .code{color:var(--ct);font-size:10px;letter-spacing:.14em;margin-top:2px}
.card .sym{width:46px;height:46px;margin:22px 0 18px;color:var(--ct)}
.card p{font-size:16px;line-height:1.35;font-weight:500;flex:1}
.meter{display:flex;gap:5px}
.meter i{flex:1;height:5px;border-radius:3px;background:var(--line)}
.p1{--c:var(--p1);--ct:var(--p1)} .p2{--c:var(--p2);--ct:var(--p2)} .p3{--c:var(--p3);--ct:var(--p3)} .p4{--c:var(--p4);--ct:var(--p4t)}
.p1 .meter i:nth-child(-n+1),.p2 .meter i:nth-child(-n+2),.p3 .meter i:nth-child(-n+3),.p4 .meter i:nth-child(-n+4){background:var(--c);box-shadow:0 0 6px var(--c)}
.sym{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* Würfel */
.dice-pair{display:flex;gap:18px}
.die{width:72px;height:72px;border-radius:16px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:12px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.25),0 18px 30px -10px rgba(0,0,0,.7)}
.die.red{background:var(--red)}
.die.black{background:var(--deep);border:1px solid var(--line)}
.die i{width:12px;height:12px;border-radius:50%;background:#fff;place-self:center}
.die.pip5 i:nth-child(1){grid-area:1/1}.die.pip5 i:nth-child(2){grid-area:1/3}.die.pip5 i:nth-child(3){grid-area:2/2}.die.pip5 i:nth-child(4){grid-area:3/1}.die.pip5 i:nth-child(5){grid-area:3/3}
.die.pip3 i:nth-child(1){grid-area:1/1}.die.pip3 i:nth-child(2){grid-area:2/2}.die.pip3 i:nth-child(3){grid-area:3/3}
.die .q{grid-area:1/1/4/4;place-self:center;font:700 30px var(--f-mono);color:rgba(255,255,255,.75)}
.die.rolling{animation:roll .6s cubic-bezier(.3,.6,.3,1)}
@keyframes roll{0%{transform:rotate(0) scale(1)}40%{transform:rotate(200deg) scale(.86)}100%{transform:rotate(360deg) scale(1)}}

/* Blöcke */
.block{padding:112px 0;border-top:1px solid var(--line)}
.block.alt{background:var(--panel)}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.features article{border:1px solid var(--line);border-radius:var(--r);padding:28px;background:var(--panel)}
.ficon{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:12px;background:var(--soft);margin-bottom:22px}
.ficon svg{width:28px;height:28px;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.features h3{margin-bottom:10px}
.features p{color:var(--muted);font-size:16px}

/* Ablauf */
.steps{list-style:none;padding:0;margin:0 0 64px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}
.steps li{display:flex;flex-direction:column;gap:16px;padding-top:22px;border-top:2px solid var(--line)}
.steps li:nth-child(1){border-color:var(--p1)}.steps li:nth-child(2){border-color:var(--p2)}.steps li:nth-child(3){border-color:var(--p3)}.steps li:nth-child(4){border-color:var(--p4)}
.num{font:700 13px var(--f-mono);color:var(--muted);letter-spacing:.14em}
.steps h3{margin-bottom:8px}
.steps p{color:var(--muted);font-size:16px}
.t-red{color:var(--red)}

.roller{border:1px solid var(--line);border-radius:18px;background:var(--bg);padding:32px;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.roller-head{margin-bottom:20px}
.roller-head .label{margin-bottom:8px}
.roller-head h3{font-size:26px}
.genres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.genres button{background:var(--panel);border:1px solid var(--line);color:var(--muted);font:500 15px var(--f-display);padding:10px 16px;border-radius:999px;cursor:pointer;min-height:44px}
.genres button[aria-checked="true"]{color:var(--deep);background:var(--ink);border-color:var(--ink)}
.roller-body{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center}
.dice-pair.big .die{width:84px;height:84px;padding:14px}
.dice-pair.big .die i{width:14px;height:14px}
.display{background:#0a1410;border:1px solid #1d2b24;border-radius:10px;padding:16px 20px;display:grid;grid-template-columns:1fr auto;gap:20px;box-shadow:inset 0 0 30px rgba(76,199,129,.06)}
.display>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.dl{color:#5f8a73;font-size:11px}
.dv{font:700 clamp(20px,2.6vw,28px)/1.1 var(--f-mono);color:#8ff0b8;text-shadow:0 0 12px rgba(76,199,129,.45);overflow-wrap:anywhere}

/* Phasen */
.phases{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.phase{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px 22px 22px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.phase::before{content:"";position:absolute;inset:0 0 auto;height:6px;background:var(--c);box-shadow:0 0 18px var(--c)}
.phase header{display:flex;justify-content:space-between;align-items:center}
.phase .sym{width:40px;height:40px;color:var(--ct)}
.phase .code{color:var(--ct);font-size:11px}
.phase h3{font-size:22px}
.phase p{color:var(--muted);font-size:15px}
.phase blockquote{margin:6px 0 0;padding:14px 16px;border-radius:10px;background:var(--bg);border-left:3px solid var(--c);font-size:15px;line-height:1.45;flex:1}
.kp{color:var(--muted);font-size:11px}
.sub{margin:64px 0 20px;font-size:24px}
.specials{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.special{border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:10px;border:1px solid var(--line)}
.special h4{font-size:22px}
.special p{font-size:16px;flex:1}
.special small{color:var(--muted);font-size:14px}
.tag{font-size:11px}
.stoer{background:var(--deep);position:relative;padding-top:38px}
.stoer::before{content:"";position:absolute;inset:0 0 auto;height:14px;border-radius:var(--r) var(--r) 0 0;background:repeating-linear-gradient(-45deg,var(--p2) 0 10px,var(--deep) 10px 20px)}
.stoer .tag{color:var(--p2)}
.joker{background:var(--alu);color:#1C1D21;border-color:var(--alu)}
.joker .tag{color:#A3165F}
.joker small{color:#5b5e66}
.remix{background:var(--panel);border-color:rgba(30,200,165,.4)}
.remix .tag{color:var(--remix)}

/* Modi */
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.modes article{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.mtag{color:var(--muted);font-size:11px;display:block;margin-bottom:14px}
.modes h3{font-size:24px;margin-bottom:12px}
.modes p{color:var(--muted);font-size:16px}
.variants{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px;font-size:15px;color:var(--muted)}
.variants b{color:var(--ink)}
.levels{margin-top:16px;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.levels div{padding:20px 24px;display:flex;flex-direction:column;gap:4px;border-right:1px solid var(--line);background:var(--bg)}
.levels div:last-child{border-right:0}
.levels .code{color:var(--muted);font-size:11px}
.levels b{font-size:20px}
.levels span:last-child{color:var(--muted);font-size:15px}

/* Ränge */
.ranks{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.ranks li{position:relative;border:1px solid var(--line);border-radius:10px;padding:22px 18px 18px;background:var(--panel);display:flex;flex-direction:column;gap:6px}
.ranks li::before{content:"";height:5px;border-radius:3px;margin-bottom:12px;background:linear-gradient(90deg,var(--p1),var(--p2),var(--p3),var(--p4));clip-path:inset(0 calc(100% - var(--w)) 0 0)}
.ranks li:nth-child(1){--w:20%}.ranks li:nth-child(2){--w:40%}.ranks li:nth-child(3){--w:60%}.ranks li:nth-child(4){--w:80%}.ranks li:nth-child(5){--w:100%}
.rl{font-size:22px;font-weight:700}
.ranks small{color:var(--muted);font:500 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.ranks .tc{border-style:dashed}
.ranks .top{border:1px solid #d8d9de;background:linear-gradient(160deg,#2b2c31,#1C1D21)}
.techcheck{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;padding:16px 20px;border:1px solid var(--line);border-radius:10px;font:500 14px var(--f-mono);color:var(--muted)}
.techcheck .code{color:var(--ok)}

/* Box */
.box-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.contents{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:0}
.contents li{padding:14px 0;border-bottom:1px solid var(--line);font-size:17px}
.contents b{display:inline-block;min-width:44px;font-family:var(--f-mono);color:var(--ink)}
.boxart{perspective:1200px;display:flex;justify-content:center}
.lid{position:relative;width:min(100%,420px);aspect-ratio:1;background:linear-gradient(160deg,#25262b,#18191c);border:1px solid #33353c;border-radius:14px;padding:28px;box-shadow:0 40px 80px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.05);transform:rotateX(8deg) rotateZ(-3deg);display:flex;flex-direction:column}
.screw{position:absolute;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#6a6d75,#2a2c31);box-shadow:inset 0 0 0 1px #1a1b1e}
.screw::after{content:"";position:absolute;left:2px;right:2px;top:5px;height:2px;background:#1a1b1e;transform:rotate(35deg)}
.s1{top:12px;left:12px}.s2{top:12px;right:12px}.s3{bottom:12px;left:12px}.s4{bottom:12px;right:12px}
.jacks{position:absolute;top:24px;right:34px;display:flex;gap:14px}
.jacks span{display:flex;flex-direction:column;align-items:center;gap:4px;font:600 8px var(--f-mono);letter-spacing:.14em;color:var(--muted)}
.jacks i{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle,#050505 34%,#8a8d95 36%,#4a4c52 60%,#2a2c31 62%)}
.lcd{align-self:flex-start;font:600 10px var(--f-mono);letter-spacing:.1em;color:#8ff0b8;background:#0a1410;border:1px solid #1d2b24;padding:6px 10px;border-radius:5px;text-shadow:0 0 8px rgba(76,199,129,.5);margin-top:4px}
.lidmark{width:22%;margin-top:auto}
.lidname{font:700 clamp(34px,5.4vw,52px)/.95 var(--f-display);margin-top:14px}
.lidclaim{font:600 10px var(--f-mono);letter-spacing:.32em;color:var(--muted);margin-top:10px}
.lidleds{display:flex;gap:8px;margin-top:18px}
.lidleds i{width:9px;height:9px;border-radius:50%}
.l1{background:var(--p1);box-shadow:0 0 8px var(--p1)}.l2{background:var(--p2);box-shadow:0 0 8px var(--p2)}.l3{background:var(--p3);box-shadow:0 0 8px var(--p3)}.l4{background:var(--p4);box-shadow:0 0 8px var(--p4)}
.lidinfo{font:500 8.5px var(--f-mono);letter-spacing:.12em;color:var(--muted);margin-top:14px}

/* CTA */
.cta-block{text-align:center;background:
  radial-gradient(700px 300px at 50% 0%,rgba(76,199,129,.10),transparent 70%),var(--bg)}
.cta-block .label{justify-content:center}
.cta-block h2{margin-inline:auto}
.cta-block .intro{margin-inline:auto;margin-bottom:0}
.cta-block .cta{justify-content:center}

/* FAQ */
details{border-bottom:1px solid var(--line)}
details:first-of-type{border-top:1px solid var(--line);margin-top:12px}
summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;font-size:19px;font-weight:600;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font:400 26px var(--f-mono);color:var(--muted);transition:transform .2s}
details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
details p{color:var(--muted);padding:0 0 24px;max-width:64ch}

/* Footer */
.foot{border-top:1px solid var(--line);padding:40px 0 48px;background:var(--deep)}
.foot-grid{display:flex;flex-wrap:wrap;align-items:center;gap:20px 40px}
.foot nav{display:flex;gap:24px}
.foot nav a{color:var(--muted);text-decoration:none;font-size:15px}
.foot nav a:hover{color:var(--ink)}
.foot small{margin-left:auto;color:var(--muted);font:500 12px var(--f-mono);letter-spacing:.06em}

/* Rechtstexte */
.legal{padding:72px 0 112px}
.legal h1{font-size:clamp(36px,6vw,56px);margin-bottom:32px}
.legal h2{font-size:22px;margin:40px 0 10px;max-width:none}
.legal p,.legal li{color:#cfd1d6;font-size:16px;max-width:70ch}
.legal p+p{margin-top:12px}
.legal a{color:var(--p1)}
.ph{background:rgba(255,201,60,.14);color:var(--p2);padding:0 4px;border-radius:3px}

/* Responsive */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{height:460px;max-width:520px;width:100%;margin:0 auto}
  .phases{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:36px}
  .box-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  body{font-size:16px}
  .block{padding:76px 0}
  .hero{padding:44px 0 64px}
  .features,.specials,.modes{grid-template-columns:1fr}
  .ranks{grid-template-columns:1fr 1fr}
  .ranks li:last-child{grid-column:1/-1}
  .levels{grid-template-columns:1fr}
  .levels div{border-right:0;border-bottom:1px solid var(--line)}
  .levels div:last-child{border-bottom:0}
  .roller{padding:22px 18px}
  .roller-body{grid-template-columns:1fr;gap:22px;justify-items:center}
  .display{width:100%;grid-template-columns:1fr}
  .roller-body .btn{width:100%}
  .foot small{margin-left:0}
  .specs li{padding:10px 14px}
}
@media (max-width:560px){
  .phases,.steps{grid-template-columns:1fr}
  .hero-visual{height:330px;margin-top:-24px}
  .card{width:178px;padding:16px 14px 12px}
  .card p{font-size:12.5px}
  .card .sym{width:34px;height:34px;margin:14px 0 12px}
  .card .code{font-size:8px}
  .fan .card{top:20px}
  .hero-visual .die{width:58px;height:58px;padding:10px}
  .hero-visual .die i{width:10px;height:10px}
}