@font-face{font-family:"Fredoka";src:url(img/fredoka.ttf) format("truetype");font-weight:300 700;font-display:swap}
:root{--bg:#1c120c;--bg2:#2c1c12;--card:#fff6e4;--ink:#3b2412;--muted:#8a6b4a;--gold:#f2b33b;--gold2:#ffd36a;--cream:#f3e2c4}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--cream);font-family:"Fredoka",system-ui,sans-serif;font-size:18px;line-height:1.55}
a{color:var(--gold2)}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
header.top{position:sticky;top:0;z-index:5;background:rgba(28,18,12,.92);backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,211,106,.15)}
header.top .wrap{display:flex;align-items:center;gap:14px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:600;font-size:20px;color:#fff;text-decoration:none}
.logo .cup{width:34px;height:34px;border-radius:10px;background:linear-gradient(#ffd36a,#f2b33b);display:grid;place-items:center;color:#4a2a08;font-size:18px;box-shadow:0 3px 0 #a8741a}
nav{margin-left:auto;display:flex;gap:18px;align-items:center}
nav a{color:var(--cream);text-decoration:none;font-size:16px}
nav a:hover{color:var(--gold2)}
.lang{display:flex;border:1px solid rgba(255,255,255,.2);border-radius:999px;overflow:hidden}
.lang button{background:none;border:0;color:var(--cream);font:inherit;font-size:14px;padding:4px 12px;cursor:pointer}
.lang button.on{background:var(--gold);color:#4a2a08}
.hero{background:radial-gradient(ellipse at 50% -20%,rgba(242,179,59,.35),transparent 60%),linear-gradient(var(--bg2),var(--bg));padding:56px 0 40px}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.hero h1{font-size:clamp(40px,7vw,68px);line-height:1;margin:0 0 14px;color:#fff;text-shadow:0 4px 0 #3a1f0a}
.hero p.sub{font-size:21px;margin:0 0 22px}
.hero img.banner{width:100%;border-radius:22px;box-shadow:0 10px 0 rgba(0,0,0,.4);border:4px solid var(--gold)}
.btn{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(#5ed470,#33a14a);color:#fff;text-decoration:none;font-weight:600;font-size:20px;padding:14px 26px;border-radius:18px;box-shadow:0 6px 0 #1f6e30;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.btn.soon{background:linear-gradient(#ffdc7a,#f2b33b);color:#4a2a08;box-shadow:0 6px 0 #a8741a;text-shadow:none}
.note{font-size:15px;color:var(--muted);margin-top:12px}
section{padding:46px 0}
h2{font-size:34px;color:#fff;margin:0 0 20px}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);color:var(--ink);border-radius:22px;padding:22px;box-shadow:0 7px 0 rgba(0,0,0,.35)}
.card h3{margin:6px 0 6px;font-size:22px}
.card p{margin:0;color:#6b4e33;font-size:17px}
.card .ico{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:30px;background:#f6e5c3}
.shots{display:flex;gap:18px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory}
.shots img{height:440px;border-radius:20px;border:4px solid var(--gold);scroll-snap-align:start;flex:none}
.studio{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center}
.studio img{width:150px;image-rendering:pixelated}
footer{border-top:1px solid rgba(255,211,106,.15);padding:28px 0;color:var(--muted);font-size:15px}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
footer nav{margin-left:auto}
footer a{color:var(--cream)}
/* Rechtstexte */
.legal{background:var(--card);color:var(--ink);border-radius:22px;padding:32px clamp(18px,4vw,44px);margin:36px auto;max-width:860px;box-shadow:0 7px 0 rgba(0,0,0,.35);font-size:17px}
.legal h1{font-size:34px;margin:0 0 6px;color:var(--ink)}
.legal h2{font-size:23px;color:var(--ink);margin:28px 0 8px}
.legal h3{font-size:19px;margin:18px 0 6px}
.legal a{color:#b05a10}
.legal .stand{color:var(--muted);margin:0 0 18px}
.legal .todo{background:#ffe08a;padding:0 4px;border-radius:4px}
[data-lang]{display:none}
html[lang=de] [data-lang=de],html[lang=en] [data-lang=en]{display:revert}
@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr}
  .feats{grid-template-columns:1fr}
  nav a.hide-m{display:none}
  .shots img{height:360px}
  .studio{grid-template-columns:1fr}
}