/* Studio — Arcade-Oberfläche: Terrakotta, Creme, dicke Rahmen, harte Schatten */
:root{
  --terra:#c2552e; --terra-d:#8f3a1b; --cream:#fbf0dc; --peach:#f3dcc0; --ink:#241610; --sun:#ffcf33; --cyan:#28afc8;
  --font:"Avenir Next","Helvetica Neue","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --pad:clamp(1.2rem,5vw,4.5rem);
  --ease:cubic-bezier(.16,1,.3,1);
  --b:4px solid var(--ink);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--cream);color:var(--ink);line-height:1.6;font-size:1.06rem;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}ul{list-style:none}button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
::selection{background:var(--sun);color:var(--ink)}
:focus-visible{outline:4px solid var(--sun);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.chip{display:inline-block;font-family:var(--mono);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;background:var(--cream);color:var(--ink);border:3px solid var(--ink);padding:.3rem .8rem;box-shadow:4px 4px 0 var(--ink)}
h1,h2{font-weight:900;letter-spacing:-.045em;line-height:.92;text-transform:uppercase}

/* Nav + Logo */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:.9rem var(--pad);transition:background .3s,border-color .3s;border-bottom:4px solid transparent}
.nav.s{background:rgba(251,240,220,.94);backdrop-filter:blur(10px);border-color:var(--ink)}
.nav nav{display:flex;align-items:center;gap:1.6rem;font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.nav nav a{text-decoration:none}.nav nav a:not(.pill):not(.back):hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:3px}
.nav .back{border:3px solid var(--ink);padding:.3rem .8rem;background:var(--cream)}
.nav .back:hover{background:var(--sun)}
.pill{background:var(--sun);border:3px solid var(--ink);padding:.4rem 1rem;box-shadow:3px 3px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.pill:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.logo.brand{display:inline-flex;align-items:baseline;font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1;font-weight:800;letter-spacing:-.05em;text-decoration:none;color:var(--ink)}
.brand .gap{position:relative;display:inline-block;width:.42em;height:.6em;transition:width .5s var(--ease)}
.brand .gap em{position:absolute;left:50%;top:-.84em;translate:-50% 0;font-style:normal;font-size:.66em;color:var(--cyan);letter-spacing:0;transition:top .5s var(--ease),font-size .5s var(--ease)}
.brand .gap::after{content:"";position:absolute;left:50%;bottom:.04em;width:.22em;height:.22em;border-left:.07em solid var(--cyan);border-top:.07em solid var(--cyan);rotate:45deg;translate:-50% 0;transition:opacity .3s}
.brand:hover .gap{width:.6em}.brand:hover .gap em{top:-.22em;font-size:1em}.brand:hover .gap::after{opacity:0}
.brand .g{align-self:center;margin-left:.7rem;background:var(--ink);color:var(--cream);font-size:.36em;letter-spacing:.16em;text-transform:uppercase;font-weight:800;padding:.55em .9em .5em;rotate:-4deg;transition:rotate .3s var(--ease),background .3s,color .3s}
.brand:hover .g{rotate:3deg;background:var(--sun);color:var(--ink)}
.burger{display:none;width:44px;height:44px;position:relative;z-index:60}
.burger i{display:block;width:26px;height:4px;background:var(--ink);margin:6px auto;transition:transform .3s}
.nav.open .burger i:first-child{transform:translateY(5px) rotate(45deg)}.nav.open .burger i:last-child{transform:translateY(-5px) rotate(-45deg)}

/* Hero */
.hero{position:relative;min-height:100svh;background:var(--terra);color:var(--cream);display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;align-items:center;padding:7rem var(--pad) 5rem;overflow:hidden}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.09) 2px,transparent 2px),linear-gradient(90deg,rgba(255,255,255,.09) 2px,transparent 2px);background-size:48px 48px;mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent)}
.hero-txt,.item{position:relative;z-index:2}
.hero h1{font-size:clamp(3.2rem,9.6vw,9rem);margin:1.4rem 0 1.4rem;text-shadow:.04em .05em 0 var(--ink)}
.hero h1 span{color:var(--sun)}
.lead{font-size:clamp(1.1rem,1.8vw,1.4rem);max-width:30rem;font-weight:600}
.start{display:inline-flex;align-items:center;gap:.8rem;margin-top:2rem;background:var(--sun);color:var(--ink);border:var(--b);box-shadow:7px 7px 0 var(--ink);padding:1rem 1.8rem;font-family:var(--mono);font-weight:800;text-transform:uppercase;letter-spacing:.1em;text-decoration:none;transition:transform .15s,box-shadow .15s}
.start i{font-style:normal;animation:blink 1s steps(2) infinite}
.start:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--ink)}
.start:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}
@keyframes blink{50%{opacity:0}}
.item{background:var(--cream);color:var(--ink);border:var(--b);box-shadow:10px 10px 0 var(--ink);max-width:24rem;justify-self:center;width:100%;margin:0;will-change:transform;rotate:2deg}
.item-img{aspect-ratio:4/5;overflow:hidden;border-bottom:var(--b);background:#f5e2c2}
.item-img img{width:100%;height:100%;object-fit:cover;animation:floaty 5s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-8px) scale(1.03)}}
.item figcaption{padding:1rem 1.2rem 1.3rem}
.rare{display:inline-block;background:var(--sun);border:3px solid var(--ink);font-family:var(--mono);font-weight:800;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding:.15rem .6rem}
.item b{display:block;font-size:1.7rem;font-weight:900;letter-spacing:-.03em;margin-top:.5rem;text-transform:uppercase}
.item em{display:block;margin-top:.3rem;font-size:.95rem;color:#5b3d2e}

/* Zwischensequenz */
.story{padding:clamp(4.5rem,9vw,8rem) var(--pad);background:var(--cream)}
.label{font-family:var(--mono);font-weight:700;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--terra-d);margin-bottom:1.6rem}
.dialog{position:relative;max-width:56rem;margin:0 auto;background:var(--ink);color:var(--cream);padding:2.6rem clamp(1.4rem,4vw,3rem) 1.4rem;box-shadow:0 0 0 4px var(--cream),0 0 0 8px var(--ink),14px 14px 0 8px var(--terra)}
.speaker{position:absolute;top:-1.1rem;left:1.4rem;background:var(--sun);color:var(--ink);border:3px solid var(--ink);font-family:var(--mono);font-weight:800;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;padding:.2rem .9rem}
.line{font-size:clamp(1.15rem,2.2vw,1.55rem);line-height:1.5;min-height:9.5em;font-weight:500}
.line.typing::after{content:"▌";margin-left:2px;animation:blink .8s steps(2) infinite;color:var(--sun)}
.dlg-ctl{display:flex;align-items:center;justify-content:flex-end;gap:.8rem;margin-top:1rem}
.dots{margin-right:auto;display:flex;gap:.5rem}
.dots i{width:12px;height:12px;border:2px solid var(--cream);transition:background .2s}.dots i.on{background:var(--sun);border-color:var(--sun)}
.next,.skip{font-family:var(--mono);font-weight:800;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;border:3px solid var(--cream);padding:.55rem 1.1rem;transition:background .15s,color .15s}
.next{background:var(--sun);color:var(--ink);border-color:var(--sun)}
.next i{font-style:normal;animation:blink 1s steps(2) infinite}
.next:hover{background:var(--cream);border-color:var(--cream)}.skip:hover{background:var(--cream);color:var(--ink)}
.story-static{display:none}
html:not(.js) .dialog{display:none}html:not(.js) .story-static{display:block;max-width:44rem;margin:0 auto}html:not(.js) .story-static p{margin-bottom:1rem}
html.js .story-static{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);display:block}

/* Team */
.team{background:var(--terra);color:var(--cream);padding:clamp(4.5rem,9vw,8rem) var(--pad)}
.team-head{text-align:center;margin-bottom:3rem}
.team-head h2{font-size:clamp(3rem,9vw,8rem);margin-top:1.2rem;text-shadow:.04em .05em 0 var(--ink)}
.hint{font-family:var(--mono);font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;margin-top:1rem;opacity:.9}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,4vw,3rem);max-width:50rem;margin:0 auto}
.card{position:relative;display:block;text-align:left;background:var(--cream);color:var(--ink);border:var(--b);box-shadow:8px 8px 0 var(--ink);padding:0;transition:transform .25s var(--ease),box-shadow .25s,filter .25s;filter:saturate(.55) brightness(.92)}
.card:hover{transform:translateY(-5px);filter:none}
.card.sel{transform:translateY(-10px);filter:none;box-shadow:10px 10px 0 var(--sun),10px 10px 0 4px var(--ink)}
.tag{position:absolute;top:.7rem;left:.7rem;z-index:2;background:var(--ink);color:var(--cream);font-family:var(--mono);font-weight:800;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;padding:.25rem .6rem}
.card.sel .tag{background:var(--sun);color:var(--ink)}.card.sel .tag::before{content:"▶ ";animation:blink 1s steps(2) infinite}
.ph{display:block;aspect-ratio:3/4;overflow:hidden;border-bottom:var(--b);background:#d97c4e}
.ph img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform .8s var(--ease)}
.card:hover .ph img,.card.sel .ph img{transform:scale(1.05)}
.plate{display:block;padding:.8rem 1rem 1rem}
.plate b{display:block;font-size:clamp(1.4rem,3vw,2rem);font-weight:900;letter-spacing:-.03em;text-transform:uppercase;line-height:1}
.plate small{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;margin-top:.3rem;color:#6a3a22}
.details{max-width:50rem;margin:3.5rem auto 0}
.detail{background:var(--cream);color:var(--ink);border:var(--b);box-shadow:10px 10px 0 var(--ink);padding:clamp(1.4rem,4vw,2.6rem)}
html.js .detail[hidden]{display:none}
html.js .detail:not([hidden]){animation:pop .35s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(14px)}}
.detail h3{font-size:clamp(2rem,4.4vw,3.2rem);font-weight:900;letter-spacing:-.04em;text-transform:uppercase;line-height:1}
.detail h3 span{display:block;font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;font-weight:700;color:var(--terra-d);margin-top:.5rem}
.detail>p{margin-top:1rem;max-width:36rem}
.stats{margin-top:1.6rem;display:grid;gap:.8rem}
.stats li{display:grid;grid-template-columns:minmax(9rem,13rem) 1fr;gap:1rem;align-items:center;font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.bar{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;height:18px;border:3px solid var(--ink);padding:2px;background:var(--peach)}
.bar b{background:transparent;transition:background 0s}
.bar b.on{background:var(--terra)}
.stats i{display:none}
.ach-h{margin-top:1.8rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--terra-d)}
.ach{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem}
.ach li{background:var(--sun);border:3px solid var(--ink);font-size:.85rem;font-weight:800;padding:.25rem .8rem;box-shadow:3px 3px 0 var(--ink)}
.ach li::before{content:"★ "}
.mail{display:inline-block;margin-top:1.6rem;font-family:var(--mono);font-weight:800;font-size:.9rem;text-decoration-thickness:3px;text-underline-offset:4px}
.mail:hover{color:var(--terra)}

/* Kontakt */
.contact{padding:clamp(4.5rem,9vw,8rem) var(--pad)}
.contact-box{max-width:56rem;margin:0 auto;background:var(--sun);border:var(--b);box-shadow:12px 12px 0 var(--ink);padding:clamp(1.8rem,5vw,4rem)}
.contact h2{font-size:clamp(2.2rem,5.4vw,4.6rem);margin:1.2rem 0 1rem}
.contact p{font-weight:600;max-width:34rem}
.cbtns{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center;margin-top:1.6rem}
.cbtns .start{margin-top:0;background:var(--ink);color:var(--sun);box-shadow:7px 7px 0 var(--terra)}
.cbtns .start:hover{box-shadow:10px 10px 0 var(--terra)}
.alt{font-family:var(--mono);font-weight:800;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;text-decoration-thickness:3px;text-underline-offset:4px}.alt:hover{color:var(--terra-d)}

footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding:2rem var(--pad);background:var(--ink);color:var(--cream);font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
footer ul{display:flex;gap:1.5rem;flex-wrap:wrap}footer a{text-decoration:none}footer a:hover{color:var(--sun)}

html.js .rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
html.js .rv.in{opacity:1;transform:none}
html.js .item.rv.in{transform:none}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:6.5rem}.item{max-width:19rem;justify-self:start;margin-left:.5rem}
  .stats li{grid-template-columns:1fr}
  .burger{display:block}.nav nav{display:none}
  .nav.open{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:transparent!important;border-color:transparent!important}
  .nav.open nav{display:flex;flex-direction:column;position:fixed;inset:0;background:var(--terra);color:var(--cream);justify-content:center;align-items:flex-start;gap:1.4rem;padding:6rem var(--pad) 3rem;font-size:1.5rem;z-index:55}
  .nav.open .back{background:transparent;border-color:var(--cream)}
  .nav.open .burger i{background:var(--cream)}
}
@media(max-width:520px){.card{box-shadow:5px 5px 0 var(--ink)}.card.sel{box-shadow:6px 6px 0 var(--sun),6px 6px 0 3px var(--ink)}.tag{font-size:.6rem}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html.js .rv{opacity:1;transform:none}}

.burger:focus:not(:focus-visible){outline:none}

/* Sprachumschalter DE / EN */
.nav>nav{margin-left:auto}
.nav .lang{margin-left:1.2rem;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-weight:800;font-size:.76rem;letter-spacing:.12em;text-decoration:none;border:2px solid currentColor;padding:.28rem .65rem;border-radius:99px;opacity:.85;transition:opacity .2s,background .2s,color .2s;color:inherit;line-height:1}
.nav .lang:hover{opacity:1;background:currentColor}.nav .lang:hover{color:var(--bg,var(--cream,#fff))}
.nav.open .lang{position:relative;z-index:60}
@media(max-width:900px){.nav .lang{margin-left:auto;margin-right:.4rem}.nav>nav{margin-left:0}}
.nav .lang{border-radius:0;border-width:3px;color:var(--ink)}.nav .lang:hover{background:var(--sun);color:var(--ink)}