/* Ein Dialog, fließender Text und eine klare Hauptaktion; auch mit Bildschirmtastatur scrollbar. */
.rs-overlay {
  position: fixed; inset: 0; z-index: 140; display: grid; place-items: center;
  padding: 12px; background: rgba(3, 8, 26, .78); color: #f4f6ff;
}
.rs-overlay[hidden] { display: none; }
.rs-karte {
  width: min(760px, 100%); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
  overflow: auto; overscroll-behavior: contain; padding: 20px; border-radius: 26px;
  background: #101831; border: 1px solid #465778; box-shadow: 0 12px 50px #0009;
  font-size: 19px; line-height: 1.5; text-align: left;
}
.rs-karte header { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.rs-karte h2 { flex: 1; font-size: 25px; margin: 0; outline: none; }
.rs-karte p { margin: 10px 0; }
.rs-karte .knopf { min-height: 56px; font-size: 19px; margin: 4px 6px 4px 0; }
.rs-karte .zweit { background: #263758; color: #fff; }
.rs-karte .rs-leise { color: #c3cde1; font-size: 16px; }
/* Normales Schriftbild: keine Wortkästen, normale Abstände und keine vorab markierten Fehler. */
.rs-text { font-size: 28px; line-height: 2; padding: 12px; background: #080f24; border-radius: 18px; }
.rs-wort {
  display: inline-block; min-height: 56px; padding: 0; margin: 0; border: 0; border-radius: 0;
  background: transparent; color: inherit; font: inherit; line-height: inherit; letter-spacing: inherit;
  cursor: pointer; touch-action: manipulation; vertical-align: baseline;
}
.rs-wort > span { display: inline-block; }
.rs-wort.rs-richtig { color: #a7f3d0; opacity: 1; cursor: default; text-decoration: underline; text-underline-offset: 5px; }
.rs-buchstabe, .rs-ausgewaehlt { background: #ffe384; color: #15213e; border-radius: 3px; }
.rs-spur .rs-buchstabe, .rs-ausgewaehlt { outline: 2px solid #ffe384; }
.rs-tastatur { display: none; }
.rs-karte:has(.rs-wort:focus-visible) .rs-tastatur { display: block; }
.rs-karte button:focus-visible, .rs-karte textarea:focus-visible { outline: 3px solid #ffe384; outline-offset: 3px; }
.rs-status { min-height: 2.8em; color: #ffe384; font-weight: 700; }
.rs-auswahl { padding-top: 8px; }
.rs-aktionen { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.rs-karte label { display: block; font-weight: 800; margin-top: 14px; }
.rs-karte textarea {
  display: block; width: 100%; min-height: 110px; max-width: 100%; box-sizing: border-box; resize: vertical;
  background: #fff; color: #17233c; border: 3px solid #899bbd; border-radius: 14px; padding: 12px;
  font: inherit; font-size: 22px; line-height: 1.5;
}
.rs-vorlage { padding: 12px; border: 1px solid #91afd7; background: #1a2e50; border-radius: 12px; }
.rs-markierung mark { background: #ffe384; color: #15213e; padding: 3px 8px; border-radius: 6px; }
#r-schreiben { display: block; width: 100%; margin-top: 12px; min-height: 56px; }
#r-schreiben[hidden] { display: none; }
@media (max-width: 560px) {
  .rs-overlay { padding: 6px; place-items: start center; }
  .rs-karte { padding: 14px; max-height: calc(100dvh - 12px); border-radius: 18px; }
  .rs-karte h2 { font-size: 21px; order: -1; flex-basis: 100%; }
  .rs-text { font-size: 26px; line-height: 2.2; padding: 8px; }
  .rs-karte .knopf { font-size: 17px; }
}