:root{
  --bg: #0a0a0a;           /* tiefes Schwarz */
  --surface: #111111;       /* dunkle Fläche für Karten */
  --text: #f2f2f2;          /* sehr helles Grau/Weiß für Text */
  --muted: #b9b9b9;
  --accent: #c7b28a;        /* edles Warm-Gold */
  --line: #222222;          /* dezente Linien */
  --btn: #f2f2f2;           /* heller Button */
  --btn-text: #0a0a0a;      /* dunkler Buttontext */
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;display:block}
body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
}
.container{min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto}
header{padding: 48px 24px 16px; display:grid; place-items:center; border-bottom: 1px solid var(--line)}
.brand{text-align:center}
.logo-badge{width: clamp(84px, 14vw, 128px); height: clamp(84px, 14vw, 128px); border-radius: 50%;
  display:grid; place-items:center; margin: 0 auto 14px; background: #151515; box-shadow: 0 8px 24px rgba(0,0,0,0.45); border: 1px solid #1f1f1f}
.brand img{width: 62%; height:auto; filter: contrast(108%)}
.brand .title{font-family: 'Playfair Display', serif; font-weight: 600; font-size: clamp(22px, 3.6vw, 32px); letter-spacing: 0.3px}
.brand .subtitle{font-size: 13px; color: var(--muted); margin-top: 4px}
main{display:grid; place-items:center; padding:48px 24px}
.card{max-width: 880px; width: 100%; background: var(--surface); border:1px solid var(--line); border-radius:18px; padding: clamp(24px,4vw,40px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35); animation: fadeIn 700ms ease-out both}
@keyframes fadeIn{from{opacity:0; transform: translateY(10px)} to{opacity:1; transform: translateY(0)}}
.coming{display:inline-block; font-family:'Playfair Display', serif; font-size:clamp(22px,4.2vw,36px); font-weight:600; letter-spacing:0.4px; margin-bottom:8px; position:relative; padding-bottom:10px}
.coming::after{content:""; position:absolute; left:0; bottom:0; width:72px; height:2px; background: var(--accent)}
.lede{font-size:clamp(16px,2.2vw,18px); color: var(--text); margin:16px 0 20px}
.detail{color: var(--muted); font-size:15px; margin-bottom:24px}
.cta{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:8px}
.cta a.btn{background: var(--btn); color: var(--btn-text); text-decoration:none; border-radius:999px; padding:12px 18px; font-weight:600; font-size:14px; letter-spacing:0.3px; transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease; box-shadow: 0 6px 14px rgba(0,0,0,0.55)}
.cta a.btn:hover{transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,0.65); opacity: 0.98}
.copy{border:1px solid var(--line); background:#141414; color: var(--text); border-radius:999px; padding:10px 14px; font-size:14px; display:inline-flex; gap:10px; align-items:center; cursor:pointer; transition:background 150ms ease, border-color 150ms ease}
.copy:hover{background:#161616; border-color:#2a2a2a}
.copy code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size:13px; color:#e6e6e6}
.note{margin-top:18px; font-size:13px; color:#9a9a9a}
footer{padding:24px; text-align:center; color:#9a9a9a; font-size:13px; border-top:1px solid var(--line)}
.legal{display:inline-flex; gap:16px; flex-wrap:wrap; align-items:center; justify-content:center}
.sep{user-select:none; opacity:0.6}
@media (max-width:420px){.cta{gap:10px}}