:root{
  --grund:#0f1117; --flaeche:#171a23; --flaeche2:#1f2330; --rand:#2a2f3e;
  --tinte:#e8e9f0; --tinte2:#a9adbd; --akzent:#9d8cff; --akzent2:#c5b8ff;
  --radius:14px; --breite:1040px;
}
@media (prefers-color-scheme: light){
  :root{ --grund:#f7f7fb; --flaeche:#ffffff; --flaeche2:#eeeef6; --rand:#dddfe8; --tinte:#15171f; --tinte2:#565b6b; --akzent:#5b46e0; --akzent2:#3d2fb0; }
}
*{box-sizing:border-box}
html{color-scheme:dark light}
body{margin:0;background:var(--grund);color:var(--tinte);font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Inter,Ubuntu,Cantarell,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--akzent2);text-decoration:none}
a:hover{text-decoration:underline}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:.92em}
code{background:var(--flaeche2);padding:.1em .4em;border-radius:6px}
pre{background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--radius);padding:16px 18px;overflow:auto;line-height:1.5}
pre code{background:none;padding:0}
.kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:var(--breite);margin:0 auto;padding:18px 16px}
.marke{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--tinte);font-size:1.1em}
.marke img{border-radius:9px}
.kopf nav{display:flex;gap:4px;flex-wrap:wrap}
.kopf nav a{padding:8px 12px;border-radius:999px;color:var(--tinte2)}
.kopf nav a:hover{background:var(--flaeche2);text-decoration:none;color:var(--tinte)}
.kopf nav a.aktiv{background:var(--flaeche2);color:var(--tinte)}
main{max-width:var(--breite);margin:0 auto;padding:0 16px 40px}
.buehne{padding:56px 0 24px}
.vorzeile{color:var(--akzent2);font-weight:600;letter-spacing:.02em;margin:0 0 8px;font-size:.95em}
h1{font-size:clamp(2rem,5vw,3.3rem);line-height:1.1;margin:0 0 18px;letter-spacing:-.01em}
h2{font-size:1.55rem;margin:0 0 12px}
h3{font-size:1.1rem;margin:0 0 6px}
.lead{font-size:1.2em;max-width:52ch;margin:0 0 12px}
.en{color:var(--tinte2);font-style:italic;max-width:60ch;margin:0 0 18px}
.taten{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 0}
.knopf{display:inline-block;background:var(--akzent);color:#fff;padding:10px 18px;border-radius:999px;font-weight:600}
.knopf:hover{text-decoration:none;filter:brightness(1.08)}
.knopf.leise{background:var(--flaeche2);color:var(--tinte)}
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:24px 0}
.karte{display:block;background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--radius);padding:20px 22px;color:var(--tinte)}
a.karte:hover{text-decoration:none;border-color:var(--akzent)}
.karte h2{font-size:1.25rem;margin-bottom:8px}
.karte p{margin:0 0 8px;color:var(--tinte2)}
.abschnitt{padding:28px 0;border-top:1px solid var(--rand)}
.abschnitt:first-child{border-top:0}
.spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.spalten p{margin:0;color:var(--tinte2)}
figure{margin:0}
figure img{width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--rand);display:block}
figcaption{color:var(--tinte2);font-size:.95em;margin-top:8px}
.tabelle{width:100%;border-collapse:collapse;background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--radius);overflow:hidden}
.tabelle th,.tabelle td{text-align:left;padding:10px 12px;vertical-align:top;border-top:1px solid var(--rand)}
.tabelle th{background:var(--flaeche2);border-top:0}
.schritte li{margin:8px 0}
.klein{color:var(--tinte2);font-size:.9em}
.fuss{max-width:var(--breite);margin:0 auto;padding:24px 16px 48px;border-top:1px solid var(--rand);color:var(--tinte2)}
.fuss p{margin:6px 0}
@media (max-width:600px){ body{font-size:16px} .buehne{padding:28px 0 16px} .lead{font-size:1.1em} }