/* Oberflaeche des Cockpits.
   Bewusst eine eigene Datei statt eines <style>-Blocks: so kommt die
   Sicherheitsregel (Content-Security-Policy) ohne 'unsafe-inline' aus. */
:root {
    color-scheme: light dark;
    --rand: color-mix(in srgb, currentColor 18%, transparent);
    --gedaempft: color-mix(in srgb, currentColor 62%, transparent);
    --warnung: #b3261e;
}
@media (prefers-color-scheme: dark) { :root { --warnung: #f2b8b5; } }
body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
main { width: min(30rem, 92vw); padding: 2rem 0; }
h1 { margin: 0 0 .25rem; font-size: 1.6rem; letter-spacing: -.01em; }
.hinweis { margin: 0 0 1.5rem; color: var(--gedaempft); }
label { display: block; margin: 0 0 .35rem; font-weight: 600; font-size: .9rem; }
input[type=text], input[type=password] {
    width: 100%;
    box-sizing: border-box;
    padding: .6rem .7rem;
    font: inherit;
    border: 1px solid var(--rand);
    border-radius: .5rem;
    background: transparent;
    color: inherit;
}
.feld { margin-bottom: 1rem; }
button {
    width: 100%;
    padding: .65rem 1rem;
    font: inherit;
    font-weight: 600;
    border: 0;
    border-radius: .5rem;
    background: currentColor;
    cursor: pointer;
}
button > span { color: Canvas; }
.fehler {
    margin: 0 0 1rem;
    padding: .7rem .8rem;
    border: 1px solid var(--warnung);
    border-radius: .5rem;
    color: var(--warnung);
    font-size: .92rem;
}
.nebenweg { margin: 1.25rem 0 0; font-size: .9rem; }
code, .code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Liste der Wiederherstellungscodes */
.codes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .4rem .8rem;
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid var(--rand);
    border-radius: .5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .04em;
}