:root { --grund: #0b1a30; --karte: #132c4b; --text: #eef2f7; --leise: #a9b8cb; --gold: #e2b653; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --grund: #f3f5f8; --karte: #ffffff; --text: #172230; --leise: #5f6f82; --gold: #a8761f; } }
:root[data-theme="dark"] { --grund: #0b1a30; --karte: #132c4b; --text: #eef2f7; --leise: #a9b8cb; --gold: #e2b653; }
html, body { margin: 0; min-height: 100%; background: var(--grund); color: var(--text);
  font: 17px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px; box-sizing: border-box; }
.karte { background: var(--karte); border-radius: 22px; padding: 2rem 1.6rem; width: min(420px, 100%); text-align: center;
  box-shadow: 0 8px 30px rgba(0,0,0,.25); box-sizing: border-box; }
.karte img { border-radius: 22px; }
h1 { margin: .6rem 0 .4rem; font-size: 1.6rem; }
p { color: var(--leise); } b { color: var(--text); }
button { font: inherit; font-weight: 600; background: var(--gold); color: #0b1a30; border: 0; border-radius: 12px; padding: .7rem 1.6rem; cursor: pointer; }
a { color: var(--gold); } .klein { font-size: .85rem; }
[hidden] { display: none !important; }
a.knopf { display: inline-block; font-weight: 600; background: var(--gold); color: #0b1a30; text-decoration: none;
  border-radius: 12px; padding: .75rem 1.8rem; margin: .3rem 0 .6rem; }
button.leise { background: transparent; color: var(--gold); border: 1px solid var(--gold); font-weight: 500; padding: .5rem 1.2rem; }