:root {--bg: #F4F6F8;--karte: #FFFFFF;--text: #0B1B2B;--leise: #4A5B6C;--rand: #C9D2DB;--akzent: #FFB020;--fehler: #B42318;--fehler-bg: #FDECEA;--ok-bg: #E8F5EC;color-scheme: light;}@media (prefers-color-scheme: dark) {:root {--bg: #0B1B2B;--karte: #13263A;--text: #EEF2F6;--leise: #A9B8C7;--rand: #2E4560;--fehler: #FFB4A9;--fehler-bg: #3A1D1A;--ok-bg: #173325;color-scheme: dark;}}* { box-sizing: border-box; }body {margin: 0;min-height: 100vh;display: grid;place-items: center;padding: 16px;background: var(--bg);color: var(--text);font: 1rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;}.karte {width: 100%;max-width: 400px;background: var(--karte);border: 1px solid var(--rand);border-radius: 16px;padding: 24px 20px;}.marke { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-weight: 700; font-size: 1.2rem; }h1 { font-size: 1.4rem; margin: 8px 0 16px; }label { display: block; margin: 0 0 14px; font-weight: 600; }input {display: block;width: 100%;margin-top: 6px;min-height: 48px;padding: 10px 12px;font: inherit;color: inherit;background: transparent;border: 1px solid var(--rand);border-radius: 10px;}button, .knopf {display: inline-block;width: 100%;min-height: 48px;padding: 12px 16px;font: inherit;font-weight: 700;text-align: center;text-decoration: none;color: #0B1B2B;background: var(--akzent);border: 0;border-radius: 10px;cursor: pointer;}button.zweit, .knopf { background: transparent; color: var(--text); border: 1px solid var(--rand); }input:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }a { color: inherit; }.meldung { padding: 10px 12px; border-radius: 10px; }.fehler { background: var(--fehler-bg); color: var(--fehler); }.ok { background: var(--ok-bg); }.klein { color: var(--leise); font-size: .9rem; }dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 16px; }dt { color: var(--leise); }dd { margin: 0; overflow-wrap: anywhere; }form { margin: 0 0 12px; }h2 { font-size: 1.1rem; margin: 20px 0 8px; }details { margin: 0 0 12px; }summary { cursor: pointer; font-weight: 600; }code { font-family: ui-monospace, Consolas, monospace; }.qr { display: block; width: 220px; max-width: 100%; height: auto; margin: 8px auto; border: 1px solid var(--rand); border-radius: 10px; }.geheim { display: inline-block; padding: 6px 8px; border: 1px dashed var(--rand); border-radius: 8px; letter-spacing: .08em; overflow-wrap: anywhere; }.codes { columns: 2; list-style: none; padding: 0; margin: 0 0 16px; }.codes li { break-inside: avoid; padding: 4px 0; font-size: 1.05rem; }.schritte { padding-left: 20px; margin: 0 0 8px; }.schutz { list-style: none; padding: 0; margin: 0 0 16px; }.schutz li { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 6px 0; border-top: 1px solid var(--rand); }.schutz .zeichen { font-weight: 700; text-align: center; }.schutz li.an .zeichen { color: #1B7F3B; }.schutz li.aus .zeichen { color: var(--fehler); }.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }.ansicht-form { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--rand); }.ansicht-knopf { min-height: 56px; font-size: 1.1rem; line-height: 1.3; white-space: normal; }.ansicht-hinweis { margin: 8px 0 0; }html.einfach { --leise: var(--text); }html.einfach body { font-size: 1.25rem; }html.einfach .karte { max-width: 480px; padding: 28px 22px; }html.einfach h1 { font-size: 1.9rem; }html.einfach label { font-size: 1.2rem; }html.einfach input { min-height: 60px; padding: 12px 14px; font-size: 1.25rem; letter-spacing: .02em; }html.einfach button, html.einfach .knopf { min-height: 60px; font-size: 1.2rem; }html.einfach .klein { font-size: 1.05rem; }html.einfach .meldung { font-size: 1.15rem; }html.einfach a { text-underline-offset: .2em; }html.einfach input:focus-visible, html.einfach button:focus-visible, html.einfach a:focus-visible { outline-width: 4px; }
