:root { --bg:#0a0a0a; --fg:#f5f5f2; --mid:#b4b4ae; --dim:#6e6e6a; --line:#262624; }
* { margin:0; padding:0; box-sizing:border-box; }
html, body { min-height:100%; }
body {
  background:var(--bg); color:var(--fg);
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100svh;
  padding:clamp(20px,4vw,48px);
}
/* film grain */
body::after {
  content:""; position:fixed; inset:-50%; pointer-events:none; z-index:10; opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform:translate(0,0); } 20% { transform:translate(-3%,2%); } 40% { transform:translate(2%,-3%); }
  60% { transform:translate(-2%,-1%); } 80% { transform:translate(3%,3%); } 100% { transform:translate(0,0); }
}

/* language switch: only the active language is shown */
html.de .en, html.en .de { display:none !important; }

header, footer {
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
}
.lang { display:flex; gap:8px; }
.lang button {
  background:none; border:0; font:inherit; letter-spacing:inherit; color:var(--dim); cursor:pointer; padding:2px 0;
}
.lang button[aria-pressed="true"] { color:var(--fg); }

a { color:var(--fg); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .3s, color .3s; }
a:hover, a:focus-visible { border-color:var(--fg); outline:none; }
footer a { color:var(--mid); }
footer a:hover { color:var(--fg); }
footer .row { display:flex; flex-wrap:wrap; gap:clamp(14px,2.5vw,28px); }

/* home */
main.home { flex:1; display:flex; flex-direction:column; justify-content:center; }
h1 {
  font-weight:400; font-size:clamp(64px,13vw,180px);
  line-height:.92; letter-spacing:-.04em;
  opacity:0; animation:in 1.8s cubic-bezier(.2,.7,.2,1) .2s forwards;
}
h1 span { color:var(--dim); }
.sub {
  margin-top:clamp(20px,3vw,36px);
  font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--dim);
  opacity:0; animation:in 1.8s cubic-bezier(.2,.7,.2,1) .7s forwards;
}
.text {
  margin-top:18px; max-width:34ch;
  font-size:clamp(15px,1.4vw,18px); line-height:1.55; color:var(--mid);
  opacity:0; animation:in 1.8s cubic-bezier(.2,.7,.2,1) 1.2s forwards;
}
@keyframes in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }

/* legal pages */
main.legal { flex:1; width:100%; max-width:640px; margin:clamp(48px,10vh,120px) 0 64px; }
main.legal h1 { font-size:clamp(36px,6vw,64px); animation:none; opacity:1; margin-bottom:40px; }
main.legal h2 {
  font-weight:400; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
  margin:36px 0 10px; padding-top:20px; border-top:1px solid var(--line);
}
main.legal p, main.legal li { font-size:14px; line-height:1.7; color:var(--mid); }
main.legal p + p { margin-top:10px; }
main.legal ul { list-style:none; }
main.legal li::before { content:"— "; color:var(--dim); }
main.legal a { color:var(--fg); border-color:var(--line); }

@media (prefers-reduced-motion: reduce) {
  h1, .sub, .text { animation:none; opacity:1; }
  body::after { animation:none; }
}
@media (max-width:560px) {
  footer { flex-direction:column; align-items:flex-start; gap:14px; }
}