:root {
  color-scheme: light dark;
  --grund: #f5f6fa; --text: #242424; --text-leise: rgba(36,36,36,.78);
  --marke: #4D6594; --marke-hover: #3f5580; --marke-text: #fff; --marke-hauch: rgba(77,101,148,.25);
  --polster: 32px; --breite: 440px;
  --punkt: 44px; --punkt-rand: 4px; --punkt-abstand: 20px;
  --titel: 1.15rem; --satz: .92rem; --satz-abstand: 20px; --diagnose: .8rem;
  --knopf-polster: 10px 20px; --knopf-hoehe: 40px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema]) { --grund: #1f1f28; --text: #e9e9ee; --text-leise: rgba(233,233,238,.78); }
}
:root[data-thema="dunkel"] { color-scheme: dark; --grund: #1f1f28; --text: #e9e9ee; --text-leise: rgba(233,233,238,.78); }


:root[data-thema="kontrast"] {
  color-scheme: dark; --grund: #000; --text: #fff; --text-leise: #fff;
  --marke: #1aebff; --marke-hover: #fff; --marke-text: #000; --marke-hauch: rgba(26,235,255,.35);
}
html, body { height: 100%; margin: 0; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  display: flex; align-items: center; justify-content: center;
  background: var(--grund); color: var(--text);
}
main { text-align: center; padding: var(--polster); max-width: var(--breite); }
.dot { width: var(--punkt); height: var(--punkt); margin: 0 auto var(--punkt-abstand); border-radius: 50%;
  border: var(--punkt-rand) solid var(--marke-hauch); border-top-color: var(--marke);
  animation: spin 900ms linear infinite; }
.dot.stopp { animation: none; border-color: var(--marke-hauch); }
@keyframes spin { to { transform: rotate(360deg); } }
h1 { font-size: var(--titel); font-weight: 600; margin: 0 0 8px; }
p { margin: 0 0 var(--satz-abstand); color: var(--text-leise); font-size: var(--satz); line-height: 1.45; }
.fehler { font-family: Consolas, monospace; font-size: var(--diagnose); color: var(--text-leise);
  word-break: break-word; margin-bottom: var(--satz-abstand); }
a.btn, button.btn { display: inline-block; text-decoration: none; border: 2px solid transparent; cursor: pointer;
  background: var(--marke); color: var(--marke-text); padding: var(--knopf-polster); border-radius: 8px;
  font-weight: 600; font-size: var(--satz); font-family: inherit; margin: 0 4px;
  min-height: var(--knopf-hoehe); box-sizing: border-box; }
a.btn:hover, button.btn:hover { background: var(--marke-hover); }
a.btn:focus-visible, button.btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.hidden { display: none; }
.version { position: fixed; bottom: 8px; right: 12px; font-size: .7rem; color: var(--text-leise); }
@media (prefers-reduced-motion: reduce) { .dot { animation-duration: 2.4s; } }

@media (forced-colors: active) {
  a.btn, button.btn { background: ButtonFace; color: ButtonText; border-color: ButtonText; }
  .dot { border-color: GrayText; border-top-color: Highlight; }
  .dot.stopp { border-color: GrayText; }
}