:root {
  --bg: #0b1020;
  --fl: #141a2e;
  --text: #e8ecf8;
  --leise: #8b93ad;
  --akzent: #4cc9f0;
  --fehler: #ff6b6b;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 17px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%; }
main { min-height: 100%; display: flex; flex-direction: column; align-items: center;
  padding: calc(env(safe-area-inset-top) + 24px) 16px calc(env(safe-area-inset-bottom) + 24px);
  gap: 24px; }
header { text-align: center; }
h1 { margin: 0; font-weight: 600; letter-spacing: .08em; }
.hinweis { min-height: 1.4em; margin: 8px 0 0; color: var(--leise); }
.hinweis.fehler { color: var(--fehler); }
.ansicht { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
#laden { align-items: center; color: var(--leise); }
form { display: flex; flex-direction: column; gap: 8px; }
label { color: var(--leise); font-size: 14px; }
input { font-size: 24px; letter-spacing: .15em; text-align: center; padding: 12px; border-radius: 12px;
  border: 1px solid #2a3350; background: var(--fl); color: var(--text); }
button { font: inherit; padding: 14px 16px; border-radius: 12px; border: 1px solid #2a3350;
  background: var(--fl); color: var(--text); cursor: pointer; }
button.primaer { background: var(--akzent); color: #04121a; border: none; font-weight: 600; }
button.leise { background: transparent; color: var(--leise); }
button:disabled { opacity: .5; }
#haupt { align-items: center; flex: 1; justify-content: center; }
.sprechen { width: 220px; height: 220px; border-radius: 50%; border: 3px solid var(--akzent);
  background: radial-gradient(circle at 50% 40%, #1b2a4a, var(--bg)); color: var(--text);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font-size: 24px; box-shadow: 0 0 40px rgba(76, 201, 240, .25); }
.sprechen small { font-size: 13px; color: var(--leise); }
.leiste { display: flex; flex-direction: column; gap: 4px; width: 100%; margin-top: 16px; }
.klein { font-size: 13px; color: var(--leise); text-align: center; }