:root {
    --grund: #f4f5f7; --karte: #fff; --text: #1d2330; --leise: #5b6475; --linie: #d5d9e0;
    --akzent: #1f5fbf; --akzent-text: #fff; --ok: #e6f4ea; --ok-rand: #1e7b3a;
    --fehler: #fdecea; --fehler-rand: #b3261e; --code: #eef1f5;
}
@media (prefers-color-scheme: dark) {
    :root {
        --grund: #14171c; --karte: #1d2129; --text: #e6e8ec; --leise: #9aa3b2; --linie: #343a46;
        --akzent: #5b9cff; --akzent-text: #0b1220; --ok: #15301f; --ok-rand: #4caf6e;
        --fehler: #3a1a18; --fehler-rand: #f2867c; --code: #262b35;
    }
}
* { box-sizing: border-box; }
body {
    margin: 0; background: var(--grund); color: var(--text);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main {
    max-width: 30rem; margin: 2rem auto; padding: 1.5rem 1.5rem 1rem;
    background: var(--karte); border: 1px solid var(--linie); border-radius: 10px;
}
@media (max-width: 34rem) { main { margin: 0; border-radius: 0; border-width: 0 0 1px; } }
.marke { margin: 0 0 1rem; font-size: .85rem; color: var(--leise); letter-spacing: .02em; }
h1 { font-size: 1.4rem; margin: 0 0 .75rem; }
h2 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; }
p { margin: .5rem 0; }
label { display: block; margin: .9rem 0 0; font-weight: 600; font-size: .95rem; }
input, select {
    display: block; width: 100%; margin-top: .3rem; padding: .6rem .7rem;
    font: inherit; font-weight: 400; color: var(--text); background: var(--karte);
    border: 1px solid var(--linie); border-radius: 6px;
}
input:focus, select:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
button, .knopf {
    display: inline-block; margin-top: 1.2rem; padding: .65rem 1.1rem; font: inherit; font-weight: 600;
    color: var(--akzent-text); background: var(--akzent); border: 0; border-radius: 6px;
    cursor: pointer; text-decoration: none;
}
button.zweitrangig { color: var(--text); background: transparent; border: 1px solid var(--linie); font-weight: 400; }
form.leise button { margin-top: .5rem; }
.ok, .fehler, .hinweis { padding: .6rem .8rem; border-radius: 6px; border-left: 4px solid; }
.ok { background: var(--ok); border-color: var(--ok-rand); }
.fehler { background: var(--fehler); border-color: var(--fehler-rand); }
.hinweis { background: var(--code); border-color: var(--leise); }
.links { padding-left: 1.2rem; }
.links li { margin: .25rem 0; }
a { color: var(--akzent); }
.qr { background: #fff; padding: .75rem; display: inline-block; border-radius: 6px; line-height: 0; }
.qr svg { width: 220px; height: 220px; }
code.geheimnis { display: inline-block; margin: .3rem 0; padding: .3rem .5rem; background: var(--code);
    border-radius: 4px; font-size: 1rem; letter-spacing: .05em; word-break: break-all; }
.klein { font-size: .88rem; color: var(--leise); }
details { margin-top: 1.5rem; border-top: 1px solid var(--linie); padding-top: .75rem; }
summary { cursor: pointer; color: var(--leise); }
details ul { padding-left: 1.2rem; font-size: .92rem; }

/* Passwortfeld mit Auge (zugang.js) */
.pw-feld { position: relative; display: block; margin-top: .3rem; }
.pw-feld input { margin-top: 0; padding-right: 2.9rem; }
.pw-auge {
    position: absolute; top: 50%; right: .3rem; transform: translateY(-50%);
    margin: 0; padding: .35rem; width: 2.3rem; height: 2.3rem;
    display: flex; align-items: center; justify-content: center;
    background: transparent; color: var(--leise); border: 0; border-radius: 4px; cursor: pointer;
}
.pw-auge:hover { color: var(--text); background: var(--code); }
.pw-auge svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }