/* Schluesselfenster keys.pqc.li — eigene, kleine Datei. Keine externen Schriften, keine
   Bilder von fremden Ursprüngen: die CSP erlaubt nur 'self'. */
:root { color-scheme: dark; --bg: #040B16; --karte: #0A121E; --rand: #1B2A40; --text: #E8EDF4; --leise: #9AA3B2; --orange: #F7931A; --tinte: #0A121E; --fehler: #F87171; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
main { max-width: 440px; margin: 0 auto; padding: 24px 18px 40px; }
h1 { font: 700 22px/1.2 Georgia, "Times New Roman", serif; color: var(--orange); margin: 0 0 18px; }
h2 { font: 700 20px/1.3 Georgia, "Times New Roman", serif; margin: 8px 0 12px; }
p { margin: 0 0 14px; }
.meldung { border: 1px solid var(--rand); background: var(--karte); border-radius: 10px; padding: 12px 14px; }
.meldung.fehler { border-color: var(--fehler); color: var(--fehler); }
.zeilen { display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; background: var(--karte); border: 1px solid var(--rand); border-radius: 12px; padding: 14px; margin: 0 0 16px; }
.zeilen dt { color: var(--leise); }
.zeilen dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.nachricht { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--karte); border: 1px solid var(--rand); border-radius: 12px; padding: 14px; max-height: 40vh; overflow: auto; }
.knoepfe { display: flex; gap: 10px; margin-top: 16px; }
.knoepfe.senkrecht { flex-direction: column; }
.knoepfe > button { flex: 1; }
button { font: inherit; font-weight: 700; border-radius: 10px; padding: 13px 16px; border: 1px solid transparent; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
.primaer { background: var(--orange); color: var(--tinte); }
.sekundaer { background: transparent; color: var(--text); border-color: var(--rand); }
.leise { background: transparent; color: var(--leise); font-weight: 400; }
label { display: block; color: var(--leise); margin: 12px 0 6px; }
input { width: 100%; font: inherit; color: var(--text); background: var(--karte); border: 1px solid var(--rand); border-radius: 10px; padding: 12px; }
input:focus, button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.regeln { padding-left: 20px; margin: 0 0 16px; }
.regeln li { margin-bottom: 8px; }
/* Die Woerter: gross, nummeriert, markier- und kopierbar (Weisung 01.10.2026). */
.woerter { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 18px; padding: 14px 14px 14px 38px; margin: 0 0 16px; background: var(--karte); border: 1px solid var(--rand); border-radius: 12px; font: 600 18px/1.4 ui-monospace, Menlo, Consolas, monospace; }
.klein { color: var(--leise); font-size: 13px; margin-top: 18px; }
.trenner { border-top: 1px solid var(--rand); margin: 22px 0 6px; }
.leise { font-size: 14px; }
.warnung { color: var(--text); }
textarea { width: 100%; font: 16px/1.5 ui-monospace, Menlo, Consolas, monospace; color: var(--text); background: var(--karte); border: 1px solid var(--rand); border-radius: 10px; padding: 12px; resize: vertical; }
textarea:focus { outline: 2px solid var(--orange); outline-offset: 2px; }
details.datei { margin-top: 18px; border: 1px solid var(--rand); border-radius: 12px; padding: 12px 14px; background: var(--karte); }
details.datei summary { cursor: pointer; color: var(--leise); }
details.datei[open] summary { margin-bottom: 10px; }
.meldung.warnung { border-color: var(--orange); }
.fortschritt { color: var(--leise); font-variant-numeric: tabular-nums; }
/* Aufschrieb pruefen: freiwillig, aber sichtbar — orangefarbener Rahmen, mittig. */
.pruefen-zeile { display: flex; justify-content: center; margin: 26px 0 8px; }
.pruefen { background: transparent; color: var(--orange); border: 2px solid var(--orange); min-width: 66%; }
.pruefen:hover { background: rgba(247, 147, 26, .08); }
.eingaben { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 18px; padding: 0 0 0 26px; margin: 0 0 16px; font: 600 16px/1.4 ui-monospace, Menlo, Consolas, monospace; }
.eingaben li { padding-left: 2px; }
.eingaben input { padding: 8px 10px; font: inherit; }
.eingaben input.falsch { border-color: var(--fehler); }
h3 { font-size: 16px; margin: 18px 0 8px; }
input[type="file"] { padding: 9px; }