:root { --blau: #003560; --gruen: #8dae10; --gruen-hell: #f0f5dc; --grau: #6b7385; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #1d2433; background: #fff;
       display: flex; flex-direction: column; }
main { flex: 1; padding: 1.5rem 1.2rem; max-width: 34rem; width: 100%; margin: 0 auto; }
footer { font-size: .75rem; color: var(--grau); text-align: center; padding: .8rem; }
.gross { font-size: 1.35rem; font-weight: 600; color: var(--blau); }
#warten, #fehler { margin-top: 25vh; text-align: center; }
h1 { font-size: 1.3rem; color: var(--blau); line-height: 1.3; }
.zeile { margin: 1.1rem 0; }
.zeile h2 { font-size: 1rem; margin: 0 0 .5rem; color: var(--grau); font-weight: 600; }
.optionen { display: grid; gap: .55rem; }
button { font: inherit; font-size: 1.15rem; text-align: left; padding: .9rem 1rem; border-radius: .7rem;
         border: 2px solid #cfd5df; background: #fff; color: #1d2433; cursor: pointer; }
button[aria-pressed="true"] { border-color: var(--gruen); background: var(--gruen-hell); font-weight: 600; }
.status { min-height: 1.5em; color: var(--grau); }
.status.ok { color: #4f6d00; }
.status.fehler { color: #b3261e; }
.optionen[style] button { text-align: center; padding: .9rem .3rem; }

.wort { font-size: 2rem; font-family: ui-monospace, monospace; letter-spacing: .15em; text-align: center; padding: .6rem;
        border: 2px solid #cfd5df; border-radius: .7rem; margin: 1rem 0; min-height: 3.4rem; word-break: break-all; }
.wort.leer { color: #9aa1ae; }
.tasten button { text-align: center; font-size: 1.6rem; font-family: ui-monospace, monospace; padding: .8rem .3rem; }
button.senden { width: 100%; margin-top: .8rem; text-align: center; background: var(--blau); color: #fff; border-color: var(--blau); font-weight: 600; }
.eigene { color: var(--grau); font-family: ui-monospace, monospace; }