/* Telefonanbindung (Modul T): Leiste, Hoerer-Knopf, Geraetewahl, Marker.
 * Nur Farbvariablen aus farben.css. */

.telefon-leiste {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0 0 1rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--warnung);
  background: var(--warnung-flaeche);
  border-radius: var(--radius);
}

.telefon-leiste .zeile {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.25rem 0;
}

.telefon-leiste .zeile + .zeile {
  border-top: 1px solid var(--rand);
}

.telefon-leiste .zeile.beendet,
.telefon-leiste .zeile.verpasst {
  background: var(--erfolg-flaeche);
  border-radius: var(--radius);
  padding: 0.35rem 0.4rem;
}

.telefon-leiste .zeile.verpasst {
  background: var(--fehler-flaeche);
}

.telefon-leiste .text {
  font-weight: 600;
}

/* Die betreute Person selbst ruft an (26.09.2026). */
.telefon-leiste .zeile.klient-selbst {
  border-left: 4px solid var(--fehler);
  padding-left: 0.5rem;
}

.telefon-leiste .hilfetext {
  flex-basis: 100%;
}

.waehlform {
  display: inline;
  margin-left: 0.3rem;
}

.geraetewahl {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  margin-right: 0.6rem;
}

.geraetewahl select {
  font-size: 1rem;
  max-width: 12rem;
}

.unsichtbar {
  position: absolute;
  left: -9999px;
}

.marker.versand-uebermittlung {
  background: var(--warnung-flaeche);
  color: var(--warnung);
}

.anrufzeile .fristzeile-datum .jahr {
  font-variant-numeric: tabular-nums;
}

.transkript {
  white-space: pre-wrap;
  font: inherit;
  background: var(--flaeche-gedaempft);
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  max-height: 24rem;
  overflow: auto;
}

.webhook-adresse {
  word-break: break-all;
}

.geraetezeile {
  margin-top: 0.4rem;
}

.not-aus-kasten {
  border-color: var(--warnung);
}

.dateiansicht audio {
  width: 100%;
  margin-top: 0.5rem;
}