:root { --text: #1d1d1b; --grund: #fbfaf7; --rand: #c9c5bb; --akzent: #23507a; --fehler: #a01818; --ok: #1f6b2c; }
@media (prefers-color-scheme: dark) {
  :root { --text: #e6e3dc; --grund: #1b1c1e; --rand: #4a4a4a; --akzent: #8db8e0; --fehler: #ff8a80; --ok: #8fd19e; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--grund); color: var(--text);
  font: 17px/1.55 system-ui, sans-serif; }
main { max-width: 40rem; margin: 0 auto; padding: 2rem 16px 4rem; }
h1 { font-size: 1.7rem; margin: 0 0 1rem; }
a { color: var(--akzent); }
details { border: 1px solid var(--rand); padding: .6rem 1rem; margin: 1.2rem 0; }
summary { cursor: pointer; font-weight: 600; }
li { margin: .4rem 0; }
label { display: block; font-weight: 600; margin: 1.2rem 0 .3rem; }
.hinweis { font-weight: 400; opacity: .75; }
textarea, input[type=text] { width: 100%; font: inherit; color: inherit;
  background: transparent; border: 1px solid var(--rand); padding: .5rem; }
input[type=file] { max-width: 100%; }
button { margin-top: 1.5rem; font: inherit; font-weight: 600; padding: .6rem 1.2rem;
  border: 0; background: var(--akzent); color: var(--grund); cursor: pointer; }
button:disabled { opacity: .5; cursor: wait; }
#status { min-height: 1.5em; }
.fehler { color: var(--fehler); }
.ok { color: var(--ok); }
.schluessel { margin-top: 3rem; font-size: .9rem; opacity: .85; }
code { font-size: .85rem; word-break: break-all; }