:root { --bg:#fff; --fg:#14181f; --muted:#5a6575; --line:#d9dee6; --accent:#1a56db; --ok:#137333; --warn:#b45309; --bad:#b3261e; --card:#f6f8fb; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#10141b; --fg:#e8ecf2; --muted:#9aa6b8; --line:#2a3342; --accent:#7aa7ff; --ok:#5dd28a; --warn:#f3b562; --bad:#ff8a80; --card:#171d27; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 52rem; margin: 0 auto; padding: 2rem 1rem 4rem; }
header nav, footer { color: var(--muted); font-size: .9rem; }
header nav a, footer a { margin-right: 1rem; }
a { color: var(--accent); }
h1 { font-size: 2rem; line-height: 1.2; margin: 1.5rem 0 .5rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 .5rem; }
.lead { color: var(--muted); font-size: 1.1rem; max-width: 40rem; }
form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin: 1.5rem 0; }
.field { flex: 1 1 18rem; display: flex; flex-direction: column; }
label { font-weight: 600; margin-bottom: .25rem; }
input[type=url] { padding: .7rem .8rem; font: inherit; color: inherit; background: var(--card); border: 1px solid var(--line); border-radius: .5rem; }
button, .btn { padding: .7rem 1.2rem; font: inherit; font-weight: 600; color: #fff; background: var(--accent); border: 0; border-radius: .5rem; cursor: pointer; text-decoration: none; display: inline-block; }
@media (prefers-color-scheme: dark) { button, .btn { color: #0b1020; } }
button:disabled { opacity: .6; cursor: progress; }
.note { color: var(--muted); font-size: .9rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: .75rem; padding: 1rem 1.2rem; margin: 1rem 0; }
.score { display: flex; align-items: baseline; gap: .6rem; }
.score strong { font-size: 3rem; line-height: 1; }
.finding { border-top: 1px solid var(--line); padding: .8rem 0; }
.finding:first-child { border-top: 0; }
.badge { display: inline-block; font-size: .75rem; font-weight: 700; padding: .1rem .5rem; border-radius: 1rem; border: 1px solid currentColor; margin-right: .4rem; }
.ok { color: var(--ok); } .fehlt, .fehler { color: var(--bad); } .blockiert { color: var(--warn); } .info { color: var(--muted); }
.error { color: var(--bad); font-weight: 600; }
pre, code { background: var(--card); border-radius: .3rem; font-size: .9em; }
pre { padding: .8rem 1rem; overflow-x: auto; border: 1px solid var(--line); }
code { padding: .1rem .3rem; }
details { margin: .4rem 0; }
.sr { position:absolute; left:-9999px; }