/* Bürokratopia – Minispiel „Beamtendeutsch-Übersetzer“. Präfix s-beamtendeutsch-, nur Variablen aus app.css.
   Ausgelegt auf 340 px im Dialog, drei Knöpfe volle Breite ≥ 56 px hoch, Zeitbalken nur in Stufe 3. */
.s-beamtendeutsch-leiste { height: 6px; background: var(--flaeche3); border-radius: 99px; overflow: hidden; margin: 2px 0 6px; }
.s-beamtendeutsch-leiste i { display: block; height: 100%; width: calc(var(--p, 1) * 100%); background: var(--akzent); border-radius: 99px; }
.s-beamtendeutsch-leiste.abgelaufen i { background: var(--linie2); }
.s-beamtendeutsch-zeithinweis { margin: 0 0 4px; }
.s-beamtendeutsch-blatt { position: relative; margin: 6px 0 12px; padding: 14px 16px 12px; background: var(--flaeche); border: 1px solid var(--linie2); border-left: 5px solid var(--akzent); border-radius: var(--radius-k); box-shadow: var(--schatten); }
.s-beamtendeutsch-blatt.neu { animation: s-beamtendeutsch-rein .3s var(--kurve); }
.s-beamtendeutsch-blatt.notiert { border-left-color: var(--gruen); }
.s-beamtendeutsch-label { margin: 0; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--leise); }
.s-beamtendeutsch-label.unten { margin-top: 10px; }
.s-beamtendeutsch-wort { margin: 4px 0 0; font-size: 1.25rem; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; overflow-wrap: anywhere; hyphens: auto; min-height: 1.6em; }
@media (min-width: 420px) { .s-beamtendeutsch-wort { font-size: 1.4rem; } }
.s-beamtendeutsch-knoepfe { display: grid; gap: 8px; }
.s-beamtendeutsch-knopf { min-height: 56px; padding: 10px 14px; font-size: 1rem; font-weight: 600; border-radius: 12px; text-align: center; overflow-wrap: anywhere; }
.s-beamtendeutsch-knopf:hover:not([disabled]) { border-color: var(--akzent); background: var(--akzent-hell); }
.s-beamtendeutsch-knopf.gewaehlt, .s-beamtendeutsch-knopf.gewaehlt[disabled] { opacity: 1; border-color: var(--akzent); background: var(--akzent-hell); color: var(--akzent-text); }
@keyframes s-beamtendeutsch-rein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .s-beamtendeutsch-blatt.neu { animation: none; } }