/* Deutsch -- Silben & Worttrennung (Issue #193). Gleicher heller Papierstil
   wie textDetective.css/poemMemory.css -- kein Canvas, kein Spielbildschirm,
   das genaue Hinschauen/Hoeren ist hier die eigentliche Lernhandlung. */
.syllable-view {
  height: 100%;
  overflow-y: auto;
  background: var(--paper-light);
  color: var(--ink-primary);
  padding: calc(var(--safe-top) + 20px) calc(var(--safe-right) + 20px) calc(var(--safe-bottom) + 20px) 20px;
}

.syllable-note {
  color: var(--ink-secondary);
  line-height: 1.5;
  margin: 4px 0 12px;
}

.syllable-progress {
  color: var(--ink-secondary);
  margin: 0 0 12px;
}

.syllable-button {
  min-height: 48px;
  padding: 10px 20px;
  border: 1px solid var(--paper-shadow);
  border-radius: 8px;
  background: var(--paper-warm);
  color: var(--ink-primary);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.syllable-button-primary {
  background: var(--magic-cyan);
  color: var(--paper-light);
  border-color: transparent;
}

/* Wortzeile: gross und gut lesbar (Issue), Buchstaben und Tippflaechen als
   gleichrangige, im Textfluss stehende Elemente statt eines starren Grids
   -- funktioniert dadurch bei jeder Wortlaenge ohne eigene Layoutregel je
   Silbenzahl.

   Bewusst KEIN Zeilenumbruch (Stephi-Feedback: "Buchstaben ziehen sich
   ueber mehrere Zeilen, das ist schwierig") -- ein Umbruch mitten im Wort
   macht unklar, zu welchem Buchstabenpaar eine Tippflaeche noch gehoert.
   syllableView.js verkleinert die Buchstaben bereits abhaengig von der
   Wortlaenge, damit die meisten Woerter ohnehin auf eine Zeile passen; als
   letzte Stufe fuer sehr lange Woerter bleibt die Zeile horizontal
   scrollbar statt umzubrechen -- die Tippflaechen behalten dabei immer
   ihre volle Mindestgroesse (siehe .syllable-tap unten). */
.syllable-word-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  margin: 20px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.syllable-letter {
  flex-shrink: 0;
  font-size: 40px; /* Fallback; syllableView.js setzt die tatsaechliche, laengenabhaengige Groesse inline. */
  font-weight: 700;
  line-height: 1;
  color: var(--ink-primary);
}

/* Tippflaeche zwischen zwei Buchstaben: deutlich groesser als die sichtbare
   Markierung selbst (Issue: "Tippflaechen muessen deutlich groesser sein
   als die sichtbare Trennmarkierung"), mindestens 44x44px (Accessibility-
   Anforderung). Zunaechst visuell zurueckhaltend (Issue) -- ein kleiner
   Punkt statt eines auffaelligen Knopfes; Markierung ist ein echter
   Zeichenwechsel ('-' statt '·'), nicht nur eine Farbaenderung (Issue:
   "Trennstellen nicht ausschliesslich ueber Farbe kennzeichnen"). */
.syllable-tap {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink-secondary);
  font-size: 28px;
  font-weight: 700;
  cursor: pointer;
}

.syllable-tap:focus-visible {
  outline: 2px solid var(--magic-cyan);
  outline-offset: 2px;
  border-radius: 6px;
}

.syllable-tap-set {
  color: var(--magic-cyan);
}

.syllable-scroll-hint {
  color: var(--ink-secondary);
  font-size: 13px;
  margin: -8px 0 12px;
}

.syllable-audio-row,
.syllable-help-area {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
}

.syllable-audio-button {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--paper-shadow);
  border-radius: 6px;
  background: var(--paper-light);
  color: var(--ink-primary);
  font-size: 14px;
  cursor: pointer;
}

.syllable-visual-help {
  width: 100%;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-primary);
  margin: 4px 0 0;
}

/* Ruhiges Feedback (Issue: "keine rote Fehleranimation", "keine
   Bestrafung") -- bewusst dieselbe unauffaellige Textfarbe fuer richtig
   und falsch, kein Rot/Gruen-Kontrast, der wie eine Bewertung wirkt. */
.syllable-message {
  color: var(--ink-primary);
  font-weight: 600;
  margin: 8px 0;
}

.syllable-summary h2,
.syllable-home h2 {
  margin: 0 0 8px;
}