/* Ein Stil fuer alle Stufen. Alles in einer Datei, keine externen Quellen. */
:root {
  --grund: #fbfbfa; --karte: #fff; --linie: #e6e4df; --text: #23211e;
  --leise: #6b6862; --akzent: #2f6f4f; --warn: #a4442c; --ton: #f4f2ee;
}
@media (prefers-color-scheme: dark) {
  :root { --grund:#17171a; --karte:#1f1f23; --linie:#32323a; --text:#eceaf0;
          --leise:#a3a0ab; --akzent:#6fbf92; --warn:#e08a6f; --ton:#26262c; }
}
* { box-sizing: border-box; }
body { margin:0; padding:24px 16px; background:var(--grund); color:var(--text);
       font:15px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
main { max-width: 760px; margin: 0 auto; }
.karte { background:var(--karte); border:1px solid var(--linie); border-radius:12px;
         padding:22px; margin-bottom:16px; }
h1 { font-size:22px; margin:0 0 4px; letter-spacing:-.01em; }
h2 { font-size:15px; margin:22px 0 8px; text-transform:uppercase;
     letter-spacing:.06em; color:var(--leise); }
p { margin:8px 0; }
.leise { color:var(--leise); font-size:14px; }
.stufe { display:inline-block; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
         color:var(--akzent); border:1px solid var(--akzent); border-radius:999px;
         padding:2px 10px; margin-bottom:10px; }
button { font:inherit; padding:9px 16px; border-radius:8px; border:1px solid var(--akzent);
         background:var(--akzent); color:#fff; cursor:pointer; }
button.leer { background:transparent; color:var(--akzent); }
button:disabled { opacity:.45; cursor:not-allowed; }
pre { background:var(--ton); border:1px solid var(--linie); border-radius:8px;
      padding:12px; overflow-x:auto; font-size:13px; margin:8px 0; }
code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.warnung { border-left:3px solid var(--warn); padding-left:14px; margin:16px 0; }
.warnung strong { color:var(--warn); }
.reihe { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:14px 0; }
.marke { display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--leise); }
.punkt { width:8px; height:8px; border-radius:50%; background:var(--akzent); }
ul { margin:8px 0; padding-left:20px; }
li { margin:4px 0; }
table { border-collapse:collapse; width:100%; font-size:14px; margin:8px 0; }
th,td { text-align:left; padding:7px 10px; border-bottom:1px solid var(--linie); }
th { color:var(--leise); font-weight:600; }