:root { --bg:#f3f5f8; --card:#fff; --text:#1f2937; --mut:#6b7280; --acc:#0067c0; --line:#e5e7eb; --ok:#15803d; --err:#b91c1c; }
@media (prefers-color-scheme: dark) { :root { --bg:#111827; --card:#1f2937; --text:#f3f4f6; --mut:#9ca3af; --acc:#60a5fa; --line:#374151; --ok:#4ade80; --err:#f87171; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:"Segoe UI",system-ui,sans-serif; line-height:1.5; }
a { color:var(--acc); }
.wrap { max-width:860px; margin:0 auto; padding:0 16px; }
.kopf { background:var(--card); border-bottom:1px solid var(--line); }
.kopf .wrap { display:flex; align-items:center; gap:16px; min-height:56px; flex-wrap:wrap; }
.marke { font-weight:700; text-decoration:none; color:var(--text); }
.kopf nav { margin-left:auto; display:flex; gap:16px; font-size:.95rem; }
.kopf nav a { text-decoration:none; }
main { padding-top:28px; padding-bottom:40px; }
h1 { font-size:1.8rem; margin:0 0 14px; }
h2 { margin:34px 0 12px; font-size:1.3rem; }
#suche { width:100%; font:inherit; padding:12px 14px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--text); }
.kacheln { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; margin-top:18px; }
.kacheln a { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:4px; }
.kacheln a:hover, details:hover { border-color:var(--acc); }
.kacheln span, .mut { color:var(--mut); }
.klein { font-size:.85rem; }
details { background:var(--card); border:1px solid var(--line); border-radius:10px; margin:0 0 8px; padding:0 14px; }
summary { cursor:pointer; font-weight:600; padding:12px 0; }
details p { margin:0 0 12px; }
code { background:var(--bg); padding:1px 5px; border-radius:4px; }
.karte { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; }
form label { display:block; font-weight:600; margin-bottom:12px; }
form input, form select, form textarea { display:block; width:100%; margin-top:4px; font:inherit; font-weight:400; padding:9px 10px; border-radius:8px; border:1px solid var(--line); background:var(--bg); color:var(--text); }
.hp { position:absolute; left:-9999px; width:1px; height:1px; }
button { font:inherit; font-weight:600; background:var(--acc); color:#fff; border:0; border-radius:8px; padding:10px 18px; cursor:pointer; }
button:disabled { opacity:.6; cursor:wait; }
#meldung.ok { color:var(--ok); } #meldung.err { color:var(--err); }
footer { padding-bottom:30px; }