:root { --grund: #f7f7f5; --text: #1d1d1b; --rand: #d6d6d0; --akzent: #2f5d8a; --fehler: #b3261e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --grund: #18191b; --text: #e8e8e4; --rand: #3a3b3e; --akzent: #8cb4dc; --fehler: #f2b8b5; } }
:root[data-theme="dark"] { --grund: #18191b; --text: #e8e8e4; --rand: #3a3b3e; --akzent: #8cb4dc; --fehler: #f2b8b5; }
body { margin: 0; background: var(--grund); color: var(--text); font: 16px/1.5 system-ui, sans-serif; }
.karte { max-width: 28rem; margin: 3rem auto; padding: 0 1rem; }
label { display: block; margin: .75rem 0; }
input { display: block; width: 100%; box-sizing: border-box; padding: .5rem; border: 1px solid var(--rand); border-radius: 4px; background: transparent; color: inherit; font: inherit; }
button { margin-top: .75rem; padding: .5rem 1rem; border: 0; border-radius: 4px; background: var(--akzent); color: var(--grund); font: inherit; cursor: pointer; }
.fehler { color: var(--fehler); }
.qr { background: #fff; padding: 8px; }
.geheimnis, .codes { font-family: ui-monospace, monospace; letter-spacing: .05em; }

/* Hinweis ohne Verbindung und Leiste bei neuer Version (fahrplan/pwa.js) */
.pwa-leiste{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:10px 16px; border-bottom:1px solid var(--rand); font-size:14px; }