/* ==========================================================================
   Sprechstudio — nur auf der Seite des Sprechstudios geladen
   (tools/seiten_sprechen.py, `kopfzusatz`). Ausschliesslich die Token aus
   stil.css, damit hell und dunkel ohne eigene Farben stimmen.

   Rot heisst auf dieser Seite „falsch“. Die laufende Aufnahme ist deshalb
   nicht rot, sondern `--akzent`, mit Rand und dem Wort „Aufnahme läuft“ —
   die Farbe allein sagt nichts.
   ========================================================================== */

.sprech-schutz-titel { font-size: 1.05rem; margin: 0 0 .35rem; }
.sprech-schutz-liste { margin: .2rem 0 0; padding-left: 1.2rem; }
.sprech-schutz-liste li { margin: .3rem 0; max-width: var(--lesebreite); }

.sprech-studio {
  display: grid; gap: 1.25rem;
  margin: 1.6rem 0 2.2rem;
}
.sprech-titel { font-size: 1.3rem; margin: 0; }

.sprech-etikett {
  display: block; margin: 0 0 .35rem;
  font-size: .88rem; font-weight: 600; color: var(--ink-2);
}

/* --- Wahl: Stufe und Uebungsart ---------------------------------------- */

.sprech-wahl {
  display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: flex-start;
}
.sprech-feld { display: flex; flex-direction: column; min-width: 0; }
.sprech-feld select { min-width: min(16rem, 100%); }

.sprech-modi { display: flex; flex-wrap: wrap; gap: .5rem; }
.sprech-modus {
  display: grid; gap: .1rem; text-align: left;
  min-height: 44px; padding: .5rem .9rem;
  font: inherit; color: var(--ink); cursor: pointer;
  background: var(--karte);
  border: 1px solid var(--linie-kraeftig); border-radius: var(--rund);
  transition: border-color .15s, background .15s;
}
.sprech-modus b { font-weight: 650; font-size: .95rem; }
.sprech-modus span { font-size: .82rem; color: var(--ink-3); }
.sprech-modus:hover { border-color: var(--flaeche-umriss); }
.sprech-modus[aria-pressed="true"] {
  background: var(--marke-weich); border-color: var(--marke);
  box-shadow: inset 0 0 0 1px var(--marke);
}
.sprech-modus[aria-pressed="true"] span { color: var(--ink-2); }

.sprech-kopfhoerer { margin: 0; }

/* --- Der Satz ------------------------------------------------------------ */

.sprech-satzkarte {
  background: var(--karte-2);
  border: 1px solid var(--linie); border-radius: var(--rund);
  padding: 1.1rem 1.25rem 1.2rem;
}
.sprech-kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 0;
}
.sprech-kopf .marke-schild { margin-bottom: 0; }
.sprech-schild {
  display: inline-block; padding: .08rem .6rem;
  border-radius: var(--rund-voll);
  font-size: .78rem; font-weight: 700;
  background: var(--akzent-weich); color: var(--akzent-ink);
}
.sprech-sag { margin: .6rem 0 0; color: var(--ink-2); font-weight: 600; }
.sprech-satz {
  margin: .45rem 0 .5rem;
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.8rem);
  line-height: 1.5; font-weight: 500; color: var(--ink);
  overflow-wrap: anywhere;
}
.sprech-bedeutung { margin: 0 0 .2rem; color: var(--ink-2); }
.sprech-bedeutung summary {
  cursor: pointer; font-size: .92rem; color: var(--marke-ink);
  font-weight: 600; width: max-content; max-width: 100%;
}
.sprech-bedeutung p { margin: .4rem 0 0; }

.sprech-knoepfe {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  margin-top: .8rem;
}
.sprech-paarknoepfe { display: inline-flex; flex-wrap: wrap; gap: .6rem; }
.sprech-knoepfe .knopf { min-height: 44px; }
.sprech-knoepfe .knopf svg { width: 19px; height: 19px; flex: none; }

/* --- Der Aufnahmeknopf ---------------------------------------------------- */

.sprech-aufnahme {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem;
}
.sprech-mikro {
  display: inline-flex; flex-direction: column; align-items: center; gap: .45rem;
  padding: .25rem; margin: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--ink);
  border-radius: var(--rund);
}
.sprech-mikro-kreis {
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--marke); color: var(--knopf-ink);
  border: 2px solid transparent;
  box-shadow: var(--schatten-2);
  transition: background .18s, box-shadow .18s, transform .12s;
}
.sprech-mikro-kreis svg { width: 28px; height: 28px; grid-area: 1 / 1; }
.sprech-mikro-kreis svg + svg { display: none; }
.sprech-mikro:hover .sprech-mikro-kreis { box-shadow: var(--schatten-3); }
.sprech-mikro:active .sprech-mikro-kreis { transform: translateY(1px); }
.sprech-mikro:focus-visible { outline: none; }
.sprech-mikro:focus-visible .sprech-mikro-kreis { box-shadow: var(--ring), var(--schatten-2); }

.sprech-mikro[data-zustand="laeuft"] .sprech-mikro-kreis {
  background: var(--akzent);
  border-color: var(--karte);
  outline: 3px solid var(--akzent); outline-offset: 2px;
}
.sprech-mikro[data-zustand="laeuft"] .sprech-mikro-kreis svg:first-child { display: none; }
.sprech-mikro[data-zustand="laeuft"] .sprech-mikro-kreis svg + svg { display: block; }
.sprech-mikro[disabled] { cursor: not-allowed; opacity: .5; }

@media (prefers-reduced-motion: no-preference) {
  .sprech-mikro[data-zustand="laeuft"] .sprech-mikro-kreis {
    animation: sprech-puls 1.6s ease-in-out infinite;
  }
}
@keyframes sprech-puls {
  0%, 100% { outline-offset: 2px; }
  50% { outline-offset: 6px; }
}

.sprech-aufnahme-text { flex: 1 1 16rem; min-width: 0; }
.sprech-aufnahme-text > * { margin: 0 0 .4rem; }
.sprech-zustand { font-weight: 600; color: var(--ink); min-height: 1.5em; }
.sprech-ohne { margin: 0; }

/* --- Vergleich: das Bild ---------------------------------------------------- */

.sprech-vergleich { display: grid; gap: .7rem; }
.sprech-vergleich > p { margin: 0; }
.sprech-bild { margin: 0; }
.sprech-bild canvas {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 5;
  background: var(--karte);
  border: 1px solid var(--linie); border-radius: var(--rund-s);
}
.sprech-legende {
  display: flex; flex-wrap: wrap; gap: .4rem 1.2rem;
  margin-top: .5rem; font-size: .86rem; color: var(--ink-2);
}
.sprech-leg { display: inline-flex; align-items: center; gap: .45rem; }
.sprech-leg::before {
  content: ""; display: inline-block; width: 1.4rem; flex: none;
  border-radius: 2px;
}
.sprech-leg-vorbild::before { height: .55rem; background: var(--ink-3); }
.sprech-leg-du::before { height: .7rem; background: var(--marke); }
.sprech-leg-ton::before { height: 0; border-top: 3px solid var(--akzent-ink); }
.sprech-dauer { font-weight: 600; color: var(--ink); }

/* --- Selbst einschaetzen -------------------------------------------------- */

.sprech-bewerten > p { margin: 0; }
.sprech-bewertungen { display: flex; flex-wrap: wrap; gap: .6rem; margin: .1rem 0 .5rem; }
.sprech-bew {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px; padding: .55rem 1.15rem;
  font: inherit; font-weight: 600; color: var(--ink); cursor: pointer;
  background: var(--karte);
  border: 1.5px solid var(--linie-kraeftig); border-radius: var(--rund-voll);
  transition: background .15s, border-color .15s;
}
.sprech-bew:hover { border-color: var(--flaeche-umriss); }
.sprech-bew:focus-visible, .sprech-modus:focus-visible {
  outline: none; box-shadow: var(--ring);
}
.sprech-bew[aria-pressed="true"]::before { font-weight: 700; }
.sprech-bew-gleich[aria-pressed="true"] {
  background: var(--ok-weich); border-color: var(--ok); color: var(--ink);
}
.sprech-bew-gleich[aria-pressed="true"]::before { content: "\2713"; color: var(--ok-ink); }
.sprech-bew-fast[aria-pressed="true"] {
  background: var(--warn-weich); border-color: var(--warn); color: var(--ink);
}
.sprech-bew-fast[aria-pressed="true"]::before { content: "\2248"; color: var(--akzent-ink); }
.sprech-bew-noch_nicht[aria-pressed="true"] {
  background: var(--fehler-weich); border-color: var(--fehler); color: var(--ink);
}
.sprech-bew-noch_nicht[aria-pressed="true"]::before { content: "\2715"; color: var(--fehler-ink); }

.sprech-fuss {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .8rem 1.2rem; padding-top: 1rem; border-top: 1px solid var(--linie);
}
.sprech-fuss p { margin: 0; }

.sprech-text h2 { margin-top: 2rem; }

/* --- Telefon -------------------------------------------------------------- */

@media (max-width: 560px) {
  .sprech-studio { padding: 1.05rem; gap: 1.05rem; }
  .sprech-wahl, .sprech-feld, .sprech-feld select { width: 100%; }
  .sprech-modi { display: grid; grid-template-columns: 1fr; }
  .sprech-satzkarte { padding: .95rem 1rem 1rem; }
  .sprech-bew { flex: 1 1 auto; justify-content: center; }
  .sprech-fuss .knopf { width: 100%; }
  .sprech-aufnahme { align-items: flex-start; }
}

/* Hohe Kontraste: Umrisse statt Flaechen. */
@media (forced-colors: active) {
  .sprech-mikro-kreis, .sprech-bew, .sprech-modus { border: 2px solid ButtonText; }
  .sprech-modus[aria-pressed="true"], .sprech-bew[aria-pressed="true"] {
    outline: 3px solid Highlight;
  }
  .sprech-bild canvas { forced-color-adjust: none; }
}