:root { --text: #1d1d1f; --leise: #6e6e73; --rand: #d2d2d7; --flaeche: #ffffff; --grund: #f5f5f7; --akzent: #714b67; --auf-akzent: #ffffff; --rot: #b42318; --gruen: #067647; --gelb: #b54708; }
@media (prefers-color-scheme: dark) {
  :root { --text: #f5f5f7; --leise: #a1a1a6; --rand: #3a3a3c; --flaeche: #1c1c1e; --grund: #000000; --akzent: #c39bd3; --auf-akzent: #1d1d1f; --rot: #ff6b5f; --gruen: #47d18c; --gelb: #f5a524; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--text); background: var(--grund); }
header { background: var(--flaeche); border-bottom: 1px solid var(--rand); padding: 12px 16px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
header b { margin-right: auto; }
header a { color: var(--akzent); text-decoration: none; }
main { max-width: 980px; margin: 0 auto; padding: 16px; }
section { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 10px; padding: 16px; margin: 0 0 16px; }
h1 { font-size: 22px; margin: 8px 0 16px; } h2 { font-size: 17px; margin: 0 0 12px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; display: block; overflow-x: auto; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--rand); vertical-align: top; white-space: nowrap; }
td.lang { white-space: normal; min-width: 240px; }
button, .knopf { background: var(--akzent); color: var(--auf-akzent); border: 0; border-radius: 8px; padding: 9px 14px; font: inherit; cursor: pointer; text-decoration: none; display: inline-block; }
button.leise { background: transparent; color: var(--akzent); border: 1px solid var(--rand); }
button.rot { background: var(--rot); color: #fff; }
button:disabled { opacity: .5; }
input[type=text], input[type=email], input[type=password], input[type=number], textarea { width: 100%; padding: 8px; border: 1px solid var(--rand); border-radius: 8px; font: inherit; background: var(--grund); color: var(--text); }
textarea { min-height: 120px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
label { display: block; margin: 10px 0 4px; }
label.check { display: flex; gap: 8px; align-items: center; }
.zeile { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.zeile form { margin: 0; }
.meldung { padding: 10px 12px; border-radius: 8px; background: var(--grund); border: 1px solid var(--rand); margin: 12px 0; }
.meldung.fehler { border-color: var(--rot); color: var(--rot); }
.meldung.ok { border-color: var(--gruen); color: var(--gruen); }
.gruen { color: var(--gruen); } .rot { color: var(--rot); } .gelb { color: var(--gelb); } .leise { color: var(--leise); }
code, .link { font-family: ui-monospace, Menlo, monospace; font-size: 13px; word-break: break-all; }
.mitte { max-width: 460px; margin: 40px auto; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; }
h3 { font-size: 15px; margin: 16px 0 4px; }
@media (max-width: 600px) { td.lang { min-width: 160px; } main { padding: 12px; } }