:root{--flaeche:#fbf7ec;--schrift:#26331f;--leise:#4d5a43;--akzent:#2f6b2f;--akzent-schrift:#ffffff;
--rand:#b9c4a6;--feld:#ffffff;--fehler-flaeche:#fde8e4;--fehler-schrift:#7a1d12}
@media (prefers-color-scheme:dark){:root{--flaeche:#1c2418;--schrift:#eef2e6;--leise:#b7c2a8;--akzent:#8fd18f;
--akzent-schrift:#10200f;--rand:#4a5a40;--feld:#263020;--fehler-flaeche:#4a1f19;--fehler-schrift:#ffd9d3}}
*{box-sizing:border-box}
body{margin:0;background:var(--flaeche);color:var(--schrift);font:18px/1.55 system-ui,sans-serif}
main{max-width:34rem;margin:0 auto;padding:2rem 1rem 1rem}
h1{font-size:1.7rem;margin:.2em 0}
h2{font-size:1.3rem}h3{font-size:1.1rem}
.klein{font-size:.9rem;color:var(--leise)}
label{display:block;font-weight:600;margin:1rem 0 .3rem}
input{width:100%;font:inherit;padding:.7rem;border:2px solid var(--rand);border-radius:.6rem;
background:var(--feld);color:var(--schrift);letter-spacing:.08em;text-transform:uppercase}
button,.knopf{display:inline-block;margin-top:1rem;padding:.8rem 1.4rem;font:inherit;font-weight:700;
border:0;border-radius:.6rem;background:var(--akzent);color:var(--akzent-schrift);text-decoration:none;cursor:pointer}
button:focus-visible,.knopf:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--schrift);outline-offset:2px}
.fehler{background:var(--fehler-flaeche);color:var(--fehler-schrift);padding:.7rem 1rem;border-radius:.6rem}
code{word-break:break-all;font-size:.8rem}
footer{max-width:34rem;margin:0 auto;padding:1rem;font-size:.9rem;color:var(--leise)}
a{color:inherit}