/* Sprachen-App: was NUR diese App braucht.
   Alles Gemeinsame steht in /app/basis.css und wird davor geladen: Farbtokens,
   Raster, Kopfzeile, Knoepfe, Werbestreifen, Begruessung, Toast, Bewegung.

   Die Lernflaechen sind die des Englisch-Spiels aus der Spiele-App, hier als
   spr-* Klassen: eine Aenderung dort soll nicht ungefragt hier durchschlagen.
   Die Buehne ist die einzige Flaeche, die scrollt, alle Flaechen sind fuer
   EINEN Daumen gebaut, und jede Farbe hat ihr Dunkelmodus-Paar. @media erhoeht
   die Spezifitaet nicht: wer nur den Hellwert setzt, hat den Dunkelmodus
   kaputtgemacht. */

:root {
  /* Eigene Namen, damit sie nichts aus der Basis ueberschreiben. */
  --spr-blau:   #0091c8;
  --spr-gruen:  #17864a;   /* richtig */
  --spr-gelb:   #e8a800;   /* Sterne */
  --spr-rot:    #d32f2f;   /* falsch */
  --spr-tinte:  #1a1a1a;   /* Schrift auf hellen Flaechen */
}

@media (prefers-color-scheme: dark) {
  :root {
    /* PAARWEISE mitziehen, sonst leuchten helle Felder nachts wie Scheinwerfer. */
    --spr-blau:   #35b4e0;
    --spr-gruen:  #3ddc84;
    --spr-gelb:   #f2c14e;
    --spr-rot:    #f16b6b;
    --spr-tinte:  #10131a;
  }
}

/* Kopf (oder Leiste), Buehne, Werbung. Ein Element mit display:none belegt
   keine Rasterzeile, deshalb stimmt die Zahl in beiden Zustaenden. */
.app { grid-template-rows: auto minmax(0, 1fr) auto; }

/* Das Hinweiszeichen in der Kopfzeile, wie bei den Geschwistern. */
.kopf-knopf {
  flex: none;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--linie);
  border-radius: 50%;
  background: var(--karte);
  color: var(--blau);
  font-family: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

/* ---------- Die schmale Leiste ab der Kategorie-Wahl ---------- */

/* :not(.hidden) ist Pflicht: die Basis kennt .hidden mit display:none, wird
   aber VOR dieser Datei geladen. Ein schlichtes display:grid haette bei
   gleicher Spezifitaet gewonnen, und die Leiste stuende auch im Menue. */
.spielleiste:not(.hidden) {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 6px;
  padding: 0 2px;
}
.sl-zurueck, .sl-neu {
  min-height: 40px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--leise);
  font-family: inherit;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.sl-mitte {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}
.sl-name {
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sl-stand {
  font-size: 14px;
  font-weight: 700;
  color: var(--leise);
  white-space: nowrap;
}

/* ---------- Die Buehne ---------- */

.buehne {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 2px 2px 6px;
  /* Fuer den Abschluss-Vorhang des Quiz, der absolut darueberliegt. */
  position: relative;
}

/* ---------- Gemeinsame Bausteine ---------- */

.spr-knopf {
  min-height: 42px;
  padding: 0 16px;
  border: 2px solid var(--linie);
  border-radius: 12px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: transform .08s ease;
}
.spr-knopf:active { transform: scale(.96); }

.spr-hinweis {
  font-size: 12.5px;
  color: var(--gedimmt);
  text-align: center;
  line-height: 1.35;
  margin: 8px 0 0;
}

/* ---------- Ebene 1: Sprachwahl ---------- */

.spr-sprachgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.spr-sprache {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-height: 96px;
  padding: 10px 6px;
  border: 1px solid transparent;
  border-left: 4px solid var(--spr-blau);
  border-radius: 14px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: transform .08s ease;
}
.spr-sprache:active { transform: scale(.97); }
.spr-flagge { font-size: 34px; line-height: 1; }
.spr-sprachname { font-size: 15px; font-weight: 800; text-align: center; }
.spr-sprachsterne { font-size: 12px; font-weight: 700; color: var(--spr-gelb); }

/* ---------- Ebene 2: Kategorie-Wahl ---------- */

.spr-katgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.spr-kat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-height: 92px;
  padding: 10px 6px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: transform .08s ease;
}
.spr-kat:active { transform: scale(.97); }
.spr-kat-symbol { font-size: 30px; line-height: 1; }
.spr-kat-name { font-size: 14px; font-weight: 700; text-align: center; }
.spr-kat-sterne { font-size: 13px; color: var(--spr-gelb); letter-spacing: 2px; }

/* ---------- Ebene 3: Wege-Wahl ---------- */

.spr-wege { display: grid; gap: 8px; max-width: 430px; margin: 8px auto 0; width: 100%; }
.spr-weg {
  min-height: 66px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 18px;
}
.spr-weg small { font-size: 12.5px; font-weight: 600; color: var(--leise); }

/* ---------- Ebene 4a: Anschauen ---------- */

.spr-karten { display: grid; gap: 6px; }
.spr-karte {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.spr-karte:active { transform: scale(.98); }
.spr-karte-bild { flex: none; font-size: 28px; line-height: 1; }
.spr-karte-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.spr-karte-text b { font-size: 17px; }
.spr-karte-text small { font-size: 12.5px; color: var(--leise); }
/* Die Aussprachehilfe bei Russisch und Griechisch: leiser als das Wort,
   damit die Originalschrift der Star bleibt. */
.spr-umschrift { font-size: 15px; font-weight: 700; color: var(--text); opacity: .82; }
.spr-karte-ton { flex: none; font-size: 18px; opacity: .6; }

/* ---------- Ebene 4b: Quiz ---------- */

.spr-frage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 0 2px;
}
.spr-frage-bild { font-size: clamp(64px, 22vw, 96px); line-height: 1.1; }
.spr-frage-wort {
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: clamp(26px, 8vw, 38px);
  font-weight: 800;
  line-height: 1.15;
  cursor: pointer;
}
/* Aus der leisen Nebenzeile wird eine richtige Frage (Manni,
   01.08.2026: "Was ist das auf Englisch?" war zu klein). */
.spr-frage small { font-size: 17px; font-weight: 700; color: var(--text); line-height: 1.35; }
/* Die Aussprachehilfe IM Fragewort ist etwas anderes als die Fragezeile
   darunter: sie gehoert unter das Wort, nicht daneben. Ohne display:block
   klebte sie hinter dem Lautsprecher. */
.spr-frage-wort small {
  display: block;
  margin-top: 2px;
  font-size: 17px;
  font-weight: 700;
  color: inherit;
  opacity: .74;
  letter-spacing: .2px;
}

.spr-antworten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(100%, 430px);
  margin: 8px auto 0;
}
.spr-a {
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 6px 8px;
  border: 2px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
}
/* Die Aussprachehilfe bei Griechisch und Russisch ist fuer jeden, der diese
   Schrift nicht liest, der EINZIGE lesbare Teil der Antwort (Manni,
   01.08.2026: "fremde Buchstaben im Quiz"). Mit 11,5 Pixeln war ausgerechnet
   sie die kleinste Schrift auf dem Bildschirm. Jetzt steht sie fast so gross
   wie das Wort selbst und in kraeftigerer Farbe. */
.spr-a small {
  font-size: 15px;
  font-weight: 700;
  color: inherit;
  opacity: .78;
  letter-spacing: .2px;
}
.spr-antworten.bilder .spr-a { min-height: 84px; font-size: 44px; }
.spr-a:active { transform: scale(.97); }
/* Die Aufloesung: richtig wird gruen, der eigene Fehlgriff rot, der Rest tritt
   zurueck. Schrift im Dunkelmodus auf Tinte gerechnet: die aufgehellten
   Gruen- und Rottoene tragen kein Weiss mehr. */
.spr-a.richtig { background: var(--spr-gruen); border-color: var(--spr-gruen); color: #fff; }
.spr-a.falsch  { background: var(--spr-rot); border-color: var(--spr-rot); color: #fff; }
.spr-a.richtig small, .spr-a.falsch small { color: inherit; opacity: .85; }
.spr-a.leise   { opacity: .45; }
@media (prefers-color-scheme: dark) {
  .spr-a.richtig, .spr-a.falsch { color: var(--spr-tinte); }
}

.spr-info {
  margin: 8px 0 0;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
}

/* ---------- Rundenende ---------- */

.spr-ende {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(8, 10, 13, .62);
  border-radius: 14px;
  animation: sprAuf .2s ease-out;
}
.spr-ende-kasten {
  background: var(--karte);
  border-radius: 16px;
  padding: 18px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  display: grid;
  gap: 10px;
}
.spr-ende-kasten h3 { margin: 0; font-size: 24px; }
.spr-ende-kasten p { margin: 0; font-size: 16px; color: var(--leise); line-height: 1.4; }
.spr-ende-kasten .gross { font-size: 20px; font-weight: 800; color: var(--text); }
.spr-endsterne { color: var(--spr-gelb); letter-spacing: 6px; }
@keyframes sprAuf { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Kleine Bildschirme ---------- */

@media (max-height: 640px) {
  .spr-sprache, .spr-kat { min-height: 78px; padding: 7px 6px; }
  .spr-flagge { font-size: 28px; }
  .spr-kat-symbol { font-size: 24px; }
  .spr-frage-bild { font-size: clamp(52px, 18vw, 76px); }
  .spr-antworten.bilder .spr-a { min-height: 70px; font-size: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .spr-ende { animation: none; }
}

/* ---------- Woerterbuch-Suche ----------
   Der schnelle Weg fuer "was heisst ... auf ...": Suchfeld wie in der
   Flecken-App, darunter Flaggen-Chips fuer die Zielsprache, Treffer als
   Karten mit tippbaren Sprach-Pillen (Tipp = Aussprache). */
.spr-suche { display: grid; gap: 7px; margin: 0 0 12px; }
.spr-suchfeld {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 2px solid var(--linie);
  border-radius: 999px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
}
.spr-suchfeld:focus { outline: none; border-color: var(--blau); }
.spr-suchfeld::placeholder { color: var(--gedimmt); }

.spr-fchips { display: flex; flex-wrap: wrap; gap: 5px; }
.spr-fchip {
  min-height: 34px;
  min-width: 40px;
  padding: 0 9px;
  border: 2px solid var(--linie);
  border-radius: 10px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.spr-fchip:active { transform: scale(.94); }
.spr-fchip.an { border-color: var(--blau); background: var(--blau); color: #fff; }

.spr-treffer { display: grid; gap: 6px; }
.spr-tref {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--karte);
  border-left: 4px solid var(--blau);
}
.spr-tref-bild { flex: none; font-size: 32px; line-height: 1.1; }
.spr-tref-rest { flex: 1; min-width: 0; display: grid; gap: 6px; }
.spr-tref-kopf { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.spr-tref-kopf b { font-size: 17px; }
.spr-tref-kopf small { font-size: 12px; color: var(--leise); }
.spr-tref-pillen { display: flex; flex-wrap: wrap; gap: 5px; }
.spr-pille {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 2px 10px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.spr-pille:active { transform: scale(.95); }
.spr-pille i { font-style: normal; color: var(--leise); font-size: 12px; }

/* ---------- Lautsprecher an der Bild-Frage ----------
   Jede Frage traegt oben ihren Ton (Manni, 01.08.2026). Bei Bild-zu-Wort
   ist er bis zur Antwort gesperrt, sonst verriete er die Loesung. */
.spr-frage-bild { position: relative; display: inline-block; }
.spr-frage-ton {
  position: absolute;
  right: -44px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border: 2px solid var(--linie);
  border-radius: 50%;
  background: var(--karte);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.spr-frage-ton.gesperrt { opacity: .35; cursor: default; }

/* ---------- Die grosse Aufloesung ----------
   Zwei fette Zeilen auf eigener Karte, gut lesbar, steht zwei Sekunden
   (vorher: kleine Zeile, 1,1 Sekunden, nicht lesbar). */
.spr-aufloesung-gross {
  margin: 10px auto 0;
  width: min(100%, 430px);
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--karte);
  border-left: 5px solid var(--blau);
  display: grid;
  gap: 4px;
  text-align: center;
  animation: spAuf .18s ease-out;
}
.spr-aufloesung-gross .ag-fremd {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.25;
}
.spr-aufloesung-gross .ag-umschrift {
  font-size: 16px;
  color: var(--leise);
}
.spr-aufloesung-gross .ag-deutsch {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
}
@media (prefers-reduced-motion: reduce) {
  .spr-aufloesung-gross { animation: none; }
}

/* ---------- Saetze ---------- */
.spr-stufen { display: flex; gap: 6px; justify-content: center; margin: 0 0 10px; }
.spr-satzliste { display: grid; gap: 7px; }
.spr-satz {
  display: grid;
  gap: 3px;
  padding: 12px 44px 12px 14px;
  position: relative;
  border: 1px solid transparent;
  border-left: 4px solid var(--blau);
  border-radius: 14px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.spr-satz:active { transform: scale(.99); }
.spr-satz-fremd { font-size: 17.5px; font-weight: 800; line-height: 1.35; }
.spr-satz-umschrift { font-size: 13px; color: var(--leise); }
.spr-satz-de { font-size: 14px; color: var(--leise); line-height: 1.3; }
.spr-satz-ton {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  opacity: .6;
}
.spr-satzfrage { font-size: 21px; font-weight: 800; color: var(--text); line-height: 1.35; }
.spr-satzantworten { grid-template-columns: 1fr; }
.spr-as {
  min-height: 52px;
  padding: 10px 14px;
  border: 2px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.spr-as:active { transform: scale(.98); }
.spr-as.richtig { background: var(--sp-gruen, #17864a); border-color: var(--sp-gruen, #17864a); color: #fff; }
.spr-as.falsch { background: var(--sp-rot, #d32f2f); border-color: var(--sp-rot, #d32f2f); color: #fff; }
.spr-as.leise { opacity: .45; }
/* Lange Saetze brauchen in der grossen Aufloesung eine Nummer weniger. */
.spr-aufloesung-gross.satz .ag-fremd { font-size: 21px; }
.spr-aufloesung-gross.satz .ag-deutsch { font-size: 17px; }

/* ---------- Die Joker ----------
   Eigener, gestrichelt umrandeter Kasten ZWISCHEN Frage und Antworten,
   damit die goldenen Pillen nie mit Antworten verwechselt werden. Sie
   wackeln ab und zu, damit niemand sie uebersieht. Verbraucht heisst
   grau und durchgestrichen. Farben paarweise hell und dunkel. */
:root {
  --spr-joker:   #e8a800;
  --spr-joker-t: #1a1a1a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --spr-joker:   #f2c14e;
    --spr-joker-t: #10131a;
  }
}
.spr-joker {
  margin: 10px 0 2px;
  padding: 8px 10px 10px;
  border: 2px dashed var(--spr-joker);
  border-radius: 14px;
  text-align: center;
}
.spr-joker-titel {
  display: block;
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .3px;
  color: var(--gedimmt);
}
.spr-joker-knoepfe {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.spr-jokerknopf {
  min-height: 40px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: var(--spr-joker);
  color: var(--spr-joker-t);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
}
.spr-jokerknopf:active { transform: scale(.95); }
/* Auf schmalen Handys ruecken die beiden Pillen enger zusammen,
   damit sie NEBENEINANDER bleiben statt untereinander zu rutschen. */
@media (max-width: 420px) {
  .spr-joker { padding: 8px 6px 10px; }
  .spr-joker-knoepfe { gap: 6px; }
  .spr-jokerknopf { padding: 0 9px; font-size: 12.5px; min-height: 38px; }
}
.spr-jokerknopf.verbraucht {
  background: var(--linie);
  color: var(--gedimmt);
  text-decoration: line-through;
  box-shadow: none;
}
/* Das Wackeln: kurz alle paar Sekunden, nicht dauernd. */
.spr-jokerknopf.wackelt { animation: sprJokerWackel 4.5s ease-in-out infinite; }
@keyframes sprJokerWackel {
  0%, 88%, 100% { transform: rotate(0); }
  90% { transform: rotate(-4deg); }
  93% { transform: rotate(4deg); }
  96% { transform: rotate(-2deg); }
}

/* Vom Joker weggenommene Antworten drehen sich weg. */
.spr-a, .spr-as { transition: transform .35s ease, opacity .35s ease; }
.spr-a.joker-weg, .spr-as.joker-weg {
  transform: rotateY(90deg) scale(.6);
  opacity: 0;
  pointer-events: none;
}

/* Der Drehtausch: alle Antworten drehen einmal um sich selbst, waehrend
   sie die Plaetze tauschen. */
.spr-a.dreht, .spr-as.dreht { animation: sprDreht .5s ease-in-out; }
@keyframes sprDreht {
  0% { transform: rotate(0) scale(1); }
  50% { transform: rotate(180deg) scale(.85); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Das Tipp-Maennchen mit seiner Blase. Es haengt AM Antwortknopf. */
.spr-a, .spr-as { position: relative; }
/* Die Regeln des Tipp-Maennchens standen hier und sind mit ihm gegangen. */


@media (prefers-reduced-motion: reduce) {
  .spr-jokerknopf.wackelt, .spr-a.dreht, .spr-as.dreht { animation: none; }
  .spr-a, .spr-as { transition: none; }
}


/* ---------- Die grosse Wörterbuch-Suche ----------
   Sie steht seit 01.08.2026 UNTER der gewählten Sprache und ist bewusst
   auffällig: eigener Kasten, großes Feld, die Wörterzahl als Pille darunter
   und zwar in der jeweiligen Sprache geschrieben. */
.spr-suche.gross {
  margin: 4px 0 12px;
  padding: 12px 12px 10px;
  border: 2px solid var(--blau);
  border-radius: 16px;
  background: var(--karte);
}
.spr-such-titel { font-size: 16px; font-weight: 800; margin-bottom: 8px; }
.spr-suche.gross .spr-suchfeld {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 2px solid var(--linie);
  border-radius: 14px;
  background: var(--grund);
  color: var(--text);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  box-sizing: border-box;
}
.spr-suche.gross .spr-suchfeld:focus { outline: none; border-color: var(--blau); }
.spr-such-fuss { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.spr-such-fuss .spr-fchip {
  min-height: 36px;
  padding: 0 12px;
  border: 2px solid var(--linie);
  border-radius: 999px;
  background: var(--grund);
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}
.spr-such-fuss .spr-fchip.an { background: var(--blau); border-color: var(--blau); color: #fff; }
.spr-anzahl {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(0, 145, 200, .14);
  color: var(--blau);
  font-size: 12.5px;
  font-weight: 800;
}
.spr-sprachzahl {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--gedimmt);
}


/* ---------- Gratis-Pille und die deutsche Wortzahl ----------
   Die Gratis-Pille steht überall VOR der Wortzahl. Grün, weil kostenlos eine
   gute Nachricht ist, und in beiden Modi als Paar gedacht. Darunter steht
   dieselbe Zahl auf Deutsch, damit auch die fremdsprachige Zeile verständlich
   bleibt. */
:root { --spr-gratis: #17864a; --spr-gratis-t: #ffffff; }
@media (prefers-color-scheme: dark) {
  :root { --spr-gratis: #3ddc84; --spr-gratis-t: #10131a; }
}
.spr-gratis {
  display: inline-block;
  margin-right: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--spr-gratis);
  color: var(--spr-gratis-t);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
  vertical-align: middle;
}
.spr-anzahlzeile {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.spr-anzahlzeile .spr-anzahl { margin-top: 0; }
.spr-anzahl.de {
  background: transparent;
  color: var(--gedimmt);
  font-weight: 700;
  padding-left: 0;
}
/* An den Sprachkacheln wird es enger, dort steht die deutsche Zahl in einer
   eigenen Zeile unter der fremdsprachigen. */
.spr-zahl-de {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  font-weight: 600;
  color: var(--gedimmt);
}
.spr-sprachzahl .spr-gratis { font-size: 10px; padding: 1px 7px; }


/* Das deutsche Wort als Frage, wenn es zum Eintrag kein Bild gibt. So sieht
   "Alles gemischt" aus, seit es aus dem ganzen Wörterbuch schöpft. */
.spr-frage-de {
  font-size: clamp(26px, 8vw, 38px);
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
}
/* Das Symbol des Themas über der Frage. Es steht dort, wo das Wortbild
   stünde, ist aber bewusst KLEINER als dieses: es zeigt das Thema, nicht das
   Wort, und darf sich nicht als Lösungshinweis ausgeben. Vorher hatten nur
   die ersten Fragen ein Bild und der Rest gar keins (Manni, 02.08.2026). */
.spr-frage-thema {
  font-size: clamp(38px, 13vw, 58px);
  line-height: 1;
  opacity: .85;
}
/* Der Hinweis unter der Auflösung: die Wartezeit ist abkürzbar. */
.spr-weiter-tipp {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gedimmt);
}


/* ---------- Die Knopfzeile unter der Auflösung ----------
   Seit 01.08.2026 springt nichts mehr von allein weiter. Wer die Auflösung
   gelesen hat, tippt selbst. Zurück ist nur zum Nachlesen, deshalb sind die
   Antworten dort gesperrt. */
.spr-nav {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.spr-navknopf {
  flex: 1;
  min-height: 52px;
  padding: 0 12px;
  border: 2px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.spr-navknopf.vor {
  background: var(--blau);
  border-color: var(--blau);
  color: #fff;
}
.spr-navknopf:disabled {
  opacity: .38;
  cursor: default;
}
.spr-navknopf:active:not(:disabled) { transform: scale(.97); }

/* Der Satz Mut unter der Auflösung. Bei einem Fehlgriff kein Tadel, sondern
   ein Schubs weiter. */
.spr-mut {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--spr-gruen);
}
.spr-aufloesung-gross.daneben .spr-mut { color: var(--blau); }

/* Der Schalter für die laufende Design-Probe. Bewusst unauffällig als
   Textknopf unter der Sprachliste: er ist ein Versuch, keine Einstellung. */
.spr-designknopf {
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: transparent;
  color: var(--blau);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  min-height: 34px;
  padding: 0 14px;
  cursor: pointer;
  touch-action: manipulation;
}


/* ---------- Der Kippschalter für die Design-Probe ----------
   Maße und Verhalten aus dem ManniMindset-Designsystem: 46 mal 26, Pille,
   an ist die Akzentfläche mit dunklem Knopf, aus ist die stille Linie mit
   grauem Knopf. Steht oben über den Sprachen. */
.spr-designzeile {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  margin: 0 2px 8px;
}
.spr-designtext {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gedimmt);
}
.spr-kipp {
  flex: none;
  position: relative;
  width: 46px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--linie);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 180ms cubic-bezier(.2, .7, .2, 1);
}
.spr-kipp-knopf {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gedimmt);
  transition: transform 180ms cubic-bezier(.2, .7, .2, 1), background 180ms ease;
}
.spr-kipp.an { background: var(--blau); }
.spr-kipp.an .spr-kipp-knopf { transform: translateX(20px); background: var(--karte); }
@media (prefers-reduced-motion: reduce) {
  .spr-kipp, .spr-kipp-knopf { transition: none; }
}

/* ---------- Sätze: normal oder langsam anhören ----------
   Zwei Zeichen statt einem. Die Schildkröte sagt ohne ein Wort Erklärung,
   was passiert, und genau deshalb steht sie da. */
.spr-satz-toene {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.spr-satz-ton {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 19px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.spr-satz-ton:active { background: var(--linie); }
.spr-satz-ton.langsam { font-size: 21px; }


/* ---------- Die Lernstufen ----------
   Vier Chips über den Wegen, mit der Wortzahl der gewählten Sprache darunter.
   Voreingestellt ist Grundwortschatz: wer eine Sprache anfängt, soll Brot und
   Straße lernen, nicht Grünschnabel. */
.spr-lernstufen {
  margin: 2px 0 10px;
  padding: 9px 10px 10px;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
}
.spr-stufen-titel {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3px;
  color: var(--gedimmt);
  text-transform: uppercase;
}
.spr-stufen-chips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}
.spr-stufen-chips .spr-fchip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-height: 46px;
  padding: 4px 2px;
  border: 2px solid var(--linie);
  border-radius: 12px;
  background: var(--grund);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  cursor: pointer;
  touch-action: manipulation;
}
.spr-stufen-chips .spr-fchip small {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--gedimmt);
}
.spr-stufen-chips .spr-fchip.an {
  background: var(--blau);
  border-color: var(--blau);
  color: #fff;
}
.spr-stufen-chips .spr-fchip.an small { color: rgba(255, 255, 255, .85); }


/* Überschrift über einem Block von Kacheln. Trennt die Situationen von den
   Sachthemen, ohne eine zweite Ebene einzuziehen. */
.spr-blocktitel {
  margin: 10px 2px 6px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--gedimmt);
}
.spr-blocktitel:first-child { margin-top: 2px; }
/* Die Situationskacheln tragen eine eigene Kante, damit man beide Blöcke
   auch beim Scrollen auseinanderhält. */
.spr-situation { border-left: 4px solid var(--spr-gruen); }

/* Die Marke der Design-Probe saß über dem Zurück-Pfeil. Sie rutscht nach
   rechts, dort ist Platz. */
[data-mm] .mm-probe { left: auto; right: 8px; }


/* ---------- Aufklappbare Bereiche ----------
   Manni hat die Zweiteilung im ersten Moment nicht gesehen. Eine Überschrift
   allein reicht dafür nicht, ein Kopf mit Pfeil und Zahl schon: er sagt, dass
   sich darunter etwas verbirgt, und er sagt wie viel.
   Bewegung nach den Regeln des Designsystems: 220 ms, Kurve .2/.7/.2/1. */
.spr-klapper {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 46px;
  margin: 10px 0 6px;
  padding: 0 12px;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.spr-klapper:first-child { margin-top: 2px; }
.spr-klapp-pfeil {
  flex: none;
  font-size: 20px;
  line-height: 1;
  color: var(--blau);
  transition: transform 220ms cubic-bezier(.2, .7, .2, 1);
}
.spr-klapper.offen .spr-klapp-pfeil { transform: rotate(90deg); }
.spr-klapp-text { flex: 1; min-width: 0; }
.spr-klapp-zahl {
  flex: none;
  min-width: 26px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--linie);
  color: var(--gedimmt);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.spr-klapper.offen .spr-klapp-zahl { background: var(--blau); color: #fff; }
/* Zugeklappt heisst wirklich weg: ein Gitter mit Hoehe 0 laesst sonst Luecken. */
.spr-klappinhalt.zu { display: none; }

@media (prefers-reduced-motion: reduce) {
  .spr-klapp-pfeil { transition: none; }
}


/* Die Satzkacheln tragen eine eigene Kante, wie die Situationen ihre. Drei
   Bereiche, drei Farben, damit man beim Scrollen weiss, wo man ist. */
.spr-satzkachel { border-left: 4px solid var(--spr-gelb); }

/* Unsichtbare Luft am Ende der Übersicht. Sie entsteht nur, wenn ein kurzer
   Bereich sonst nicht weit genug nach oben gescrollt werden könnte, und
   verschwindet beim nächsten Aufbau von selbst. */
.spr-luft { width: 100%; }

/* Der Hinweis bei Latein, der einzigen Sprache ohne Vorlesestimme. Ruhig
   gehalten: es ist eine Erklaerung, keine Warnung. */
.spr-stumm-hinweis {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--karte);
  color: var(--leise);
  font-size: 13px;
  line-height: 1.4;
}


/* ============================================================
   GRAMMATIK  (V30, Manni 05.08.2026: "bitte noch Grammatik mit rein")

   Vierter Bereich neben Situationen, Themen und Saetzen. Eigene Kantenfarbe
   (gruen), damit man beim Scrollen weiss, wo man ist: Situationen blau,
   Themen ohne, Saetze gelb, Grammatik gruen.

   Das QUIZ hat bewusst KEINE eigenen Regeln: es nutzt .spr-frage, .spr-as und
   .spr-aufloesung-gross vom Satz-Quiz. Ein zweites Aussehen zu pflegen heisst,
   dass beim naechsten Designwechsel eines davon durchfaellt.
   ============================================================ */

.spr-gramkachel { border-left: 4px solid var(--spr-gruen); }

/* Der Satz unter den Stufenchips: was diese Stufe von einem will. */
.spr-gram-vor {
  margin: 10px 0 12px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--leise);
}

/* ---------- Die Lektionsliste ---------- */

.spr-gramliste { display: grid; gap: 8px; }

.spr-gramzeile {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 14px;
  gap: 11px;
  align-items: center;
  width: 100%;
  padding: 13px 12px;
  border: 1px solid transparent;
  border-left: 4px solid var(--spr-gruen);
  border-radius: 14px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.spr-gramzeile:active { border-color: var(--spr-gruen); }

/* Die Nummer sagt die Reihenfolge, ohne dass ein Wort dafuer noetig ist.
   Aufeinander aufbauend sind die Lektionen einer Stufe naemlich schon. */
.spr-gramzeile-nr {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--spr-gruen);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.spr-gramzeile-text { display: grid; gap: 3px; min-width: 0; }
.spr-gramzeile-text b { font-size: 16px; font-weight: 800; line-height: 1.3; }
.spr-gramzeile-text small {
  font-size: 13px;
  line-height: 1.4;
  color: var(--leise);
}
.spr-gramzeile-pfeil { color: var(--spr-gruen); font-size: 20px; }

/* ---------- Die Lektion ---------- */

.spr-gramkopf {
  padding: 14px 15px;
  border-radius: 14px;
  background: var(--karte);
  border-left: 4px solid var(--spr-gruen);
  margin-bottom: 12px;
}
.spr-gram-titel { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.3; }
.spr-gram-merk {
  margin: 7px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--leise);
}

.spr-gram-bsp { display: grid; gap: 7px; margin-bottom: 14px; }

/* Eine Beispielzeile. Die fremde Form gross und oben, die deutsche klein
   darunter - dieselbe Ordnung wie bei den Saetzen, damit das Auge sie
   wiedererkennt. */
.spr-gram-zeile {
  display: grid;
  gap: 3px;
  padding: 11px 42px 11px 13px;
  position: relative;
  border-radius: 12px;
  background: var(--karte);
  cursor: pointer;
}
.spr-gram-fremd { font-size: 16.5px; font-weight: 700; line-height: 1.35; }
.spr-gram-um { font-size: 13px; color: var(--leise); }
.spr-gram-de { font-size: 13.5px; color: var(--leise); line-height: 1.35; }
.spr-gram-ton {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 17px;
  opacity: .55;
}

/* Die Umschrift unter einer Quiz-Antwort. Kleiner und leiser als die Antwort
   selbst: gewaehlt wird nach der Schrift, die Umschrift ist die Lesehilfe. */
.spr-ag-um {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  opacity: .75;
}

/* ---------- Enge Handys ---------- */
@media (max-width: 360px) {
  .spr-gramzeile { grid-template-columns: 26px minmax(0, 1fr) 12px; gap: 9px; padding: 11px 10px; }
  .spr-gramzeile-nr { width: 26px; height: 26px; font-size: 13px; }
  .spr-gramzeile-text b { font-size: 15px; }
  .spr-gram-titel { font-size: 17px; }
  .spr-gram-fremd { font-size: 15.5px; }
}


/* ============================================================
   WITZE UND REDEWENDUNGEN  (V31, Manni 05.08.2026)

   Zwei weitere Bereiche neben Situationen, Themen, Saetzen und Grammatik.
   Eigene Kantenfarben, damit man beim Scrollen weiss, wo man ist:
   Situationen blau, Themen ohne, Saetze gelb, Grammatik gruen,
   Witze orange, Redewendungen violett.
   ============================================================ */

:root {
  --spr-orange:  #d2691e;
  --spr-violett: #7b5ea7;
}
@media (prefers-color-scheme: dark) {
  :root {
    --spr-orange:  #f0a05a;
    --spr-violett: #b49ae0;
  }
}

.spr-witzkachel { border-left: 4px solid var(--spr-orange); }
.spr-wendkachel { border-left: 4px solid var(--spr-violett); }

.spr-witz-vor { margin: 10px 0 12px; }

/* ---------- Die Witze ---------- */

.spr-witzliste { display: grid; gap: 9px; }

.spr-witz {
  position: relative;
  display: grid;
  gap: 5px;
  padding: 13px 46px 13px 14px;
  border: 1px solid transparent;
  border-left: 4px solid var(--spr-orange);
  border-radius: 14px;
  background: var(--karte);
  cursor: pointer;
}
.spr-witz:active { border-color: var(--spr-orange); }

/* Woher der Witz kommt: Nasreddin Hodscha, Bula, Stirlitz. Das ist die
   halbe Landeskunde und gehoert deshalb sichtbar darueber. */
.spr-witz-art {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--spr-orange);
}
/* pre-line, weil Witze aus Rede und Gegenrede bestehen und die Zeilenumbrueche
   in den Daten stehen. Ohne das klebt die Pointe an der Frage. */
.spr-witz-fremd {
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.45;
  white-space: pre-line;
}
.spr-witz-um {
  font-size: 12.5px;
  color: var(--leise);
  line-height: 1.4;
  white-space: pre-line;
}

/* Die Loesung ist zugeklappt, bis jemand tippt. Kein max-height-Trick,
   sondern schlicht aus- und einblenden: bei mehrzeiligen Witzen laesst sich
   die Hoehe nicht vorhersagen, und eine geratene Hoehe schneidet ab. */
.spr-witz-loesung { display: grid; gap: 4px; margin-top: 3px; }
.spr-witz-loesung.zu { display: none; }
.spr-witz-de {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--text);
  white-space: pre-line;
}
/* Warum es funktioniert. Bei Wortspielen ist DAS der eigentliche Inhalt -
   eine uebersetzte Pointe ohne Erklaerung ist keine Pointe. */
.spr-witz-warum {
  font-size: 13px;
  line-height: 1.45;
  color: var(--leise);
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--bg);
  border-left: 3px solid var(--spr-orange);
}
.spr-witz-tipp {
  font-size: 12px;
  font-weight: 700;
  color: var(--spr-orange);
}

.spr-witz-ton {
  position: absolute;
  right: 10px;
  top: 12px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 17px;
  cursor: pointer;
  opacity: .6;
}
.spr-witz-ton:active { background: var(--linie); opacity: 1; }

/* ---------- Die Redewendungen ---------- */

.spr-wendliste { display: grid; gap: 9px; }

.spr-wend {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 13px 46px 13px 14px;
  border-left: 4px solid var(--spr-violett);
  border-radius: 14px;
  background: var(--karte);
}
.spr-wend-art {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--spr-violett);
}
.spr-wend-fremd { font-size: 16.5px; font-weight: 700; line-height: 1.35; }
.spr-wend-um { font-size: 12.5px; color: var(--leise); }

/* Die woertliche Uebersetzung ist der Witz an der Sache und steht deshalb
   hervorgehoben - nicht als Fussnote. */
.spr-wend-woertlich {
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
  font-style: italic;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--bg);
  margin-top: 2px;
}
.spr-wend-bedeutung { font-size: 13.5px; line-height: 1.45; color: var(--leise); }

/* ---------- Enge Handys ---------- */
@media (max-width: 360px) {
  .spr-witz, .spr-wend { padding: 11px 42px 11px 11px; }
  .spr-witz-fremd, .spr-wend-fremd { font-size: 15.5px; }
  .spr-witz-de { font-size: 14px; }
}


/* ============================================================
   DER EINSTIEGSWEG  (V32, Manni 06.08.2026: "ich finde total schwierig den
   Einstieg")

   Er steht GANZ OBEN und ist der einzige Bereich, der offen beginnt. Damit
   das nicht wie ein siebter gleichwertiger Bereich wirkt, hat er eine eigene
   Form: keine Klapper-Leiste, sondern ein Kasten mit Ueberschrift und
   nummerierten Zeilen.
   ============================================================ */

:root { --spr-weg: #0091c8; }
@media (prefers-color-scheme: dark) { :root { --spr-weg: #35b4e0; } }

.spr-weg-block {
  padding: 14px;
  margin-bottom: 14px;
  border-radius: 16px;
  background: var(--karte);
  border: 2px solid var(--spr-weg);
}
.spr-weg-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}
.spr-weg-titel { font-size: 18px; font-weight: 800; }
/* Der Zaehler ist die halbe Miete: er sagt, dass es ueberhaupt ein Ende gibt. */
.spr-weg-zahl {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--spr-weg);
  white-space: nowrap;
}
.spr-weg-vor { margin: 0 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--leise); }

.spr-stationen { display: grid; gap: 7px; }

.spr-station {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 14px;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px 11px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.spr-station:active { border-color: var(--spr-weg); }
/* Die naechste offene Station wird hervorgehoben - und NUR sie. Leuchtet
   alles, leuchtet nichts. */
.spr-station.dran { border-color: var(--spr-weg); }
.spr-station.fertig { opacity: .62; }

.spr-station-nr {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--linie);
  color: var(--leise);
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.spr-station.dran .spr-station-nr { background: var(--spr-weg); color: #fff; }
.spr-station.fertig .spr-station-nr { background: var(--spr-gruen, #17864a); color: #fff; }
.spr-station-text { display: grid; gap: 2px; min-width: 0; }
.spr-station-text b { font-size: 15px; font-weight: 800; line-height: 1.3; }
.spr-station-text small { font-size: 12.5px; line-height: 1.35; color: var(--leise); }
.spr-station-pfeil { color: var(--spr-weg); font-size: 17px; }

/* ALLES GESCHAFFT: der Weg schrumpft auf eine Zeile. Ein Einstieg, der ewig
   oben steht, wird fuer alle anderen zum Aergernis. */
.spr-wegfertig {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  margin-bottom: 12px;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: transparent;
  color: var(--leise);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  /* EINE Zeile, nicht zwei. Beim ersten Anlauf brach der Text um und die
     "schmale Zeile" war 74 statt 40 Pixel hoch - der halbe Sinn dahin. */
  white-space: nowrap;
  overflow: hidden;
}
.spr-wegfertig:active { border-color: var(--spr-weg); }
.spr-wegfertig-haken {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--spr-gruen, #17864a);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  flex: none;
}
.spr-wegfertig span:nth-child(2) { flex: 1; }
.spr-wegfertig-pfeil { color: var(--spr-weg); }

/* ---------- In der Station ---------- */

.spr-station-kopf {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--karte);
  border-left: 4px solid var(--spr-weg);
  margin-bottom: 12px;
}
.spr-station-kopf h2 { margin: 0; font-size: 18px; font-weight: 800; }
.spr-station-kopf p { margin: 5px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--leise); }

/* Die Aussprache ist keine Wortliste, sondern eine Tabelle: links das
   Zeichen, daneben wie es klingt und ein Beispiel zum Anhoeren. */
.spr-klangliste { display: grid; gap: 7px; margin-bottom: 12px; }
.spr-klang {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--karte);
  cursor: pointer;
}
.spr-klang:active { background: var(--linie); }
.spr-klang-z {
  font-family: var(--schrift-zahl, monospace);
  font-size: 19px;
  font-weight: 800;
  color: var(--spr-weg);
  text-align: center;
  line-height: 1.15;
  word-break: break-word;
}
.spr-klang-text { display: grid; gap: 3px; min-width: 0; }
.spr-klang-text b { font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.spr-klang-text small { font-size: 12.5px; line-height: 1.4; color: var(--leise); }
.spr-klang-ton { font-size: 17px; opacity: .55; }

/* ---------- Enge Handys ---------- */
@media (max-width: 360px) {
  .spr-station { grid-template-columns: 24px minmax(0, 1fr) 12px; gap: 8px; }
  .spr-station-nr { width: 24px; height: 24px; font-size: 12px; }
  .spr-station-text b { font-size: 14px; }
  .spr-klang { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 9px; }
  .spr-klang-z { font-size: 16px; }
}