/* ===========================================================================
   Onda – die Sprechblase                        components/buddy/sprechblase.css
   Regeln: R2.1.4 (Wellenbalken = „hier ist etwas zu hören", Ruhelinie in
   der Stille, echte Welle beim Sprechen, kein Text, kein Symbol),
   R5.2.9 (Startseite: die Begrüßung mit Namen steht geschrieben),
   R14.4.10 (neben dem Buddy, auf der von der Kante abgewandten Seite),
   R14.2.6 (Rechteck mit 16 px Radius, kein Blob).
   Stand 2026-09-16 – aus der Probe „Leben im Buddy" freigegeben: Der Text
   ist weg (ein Kind liest ihn nicht), der Lautsprecher steht vor der Welle,
   und die Welle läuft nicht mehr als CSS-Schleife: buddy-leben.js setzt je
   Bild die Höhen aus fünf Frequenzbändern der Ansage, ohne Ton sinken die
   Säulen auf eine Linie aus fünf Punkten (data-still).
   Seit 2026-10-10 ohne Lautsprecher (Entscheidungsboard Mund und Sprechblase,
   nach Miras Call: die Blase sah aus wie ein Lautstärkeregler). Es bleibt
   nur die Welle; Antippen wiederholt die Ansage wie bisher.

   <button class="sprechblase" type="button" data-still="ja" aria-label="Noch einmal hören">
     <span class="wellen"><span></span><span></span><span></span><span></span><span></span></span>
   </button>

   Die Spitze zeigt nach links auf den Buddy und sitzt in der oberen Hälfte:
   Sie zielt auf seinen Kopf, nicht auf seine Mitte.
   =========================================================================== */

.sprechblase {
  position: relative;
  margin: 0;
  border: 0;
  text-align: left;
  background: var(--onda-white);
  border-radius: var(--onda-radius-tile);
  box-shadow: var(--onda-shadow-pop);
  padding: 9px 14px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  transition: transform .12s ease;
}
/* Die Spitze: ein gedrehtes Quadrat hinter der Blase, halb verdeckt – so
   trägt sie denselben Schatten wie die Blase. */
.sprechblase::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 34%;
  width: 14px;
  height: 14px;
  background: var(--onda-white);
  border-radius: 3px;
  transform: translateY(-50%) rotate(45deg);
  box-shadow: var(--onda-shadow-pop);
}
.sprechblase > * { position: relative; z-index: 1; }
.sprechblase:active { transform: scale(.96); }

/* Wellenbalken: fünf Säulen, Sky – Sage – Petrol – Sage – Sky. Die Höhen
   hier sind die Decke je Säule; buddy-leben.js skaliert sie mit dem Band. */
.wellen {
  display: flex;
  align-items: center;
  gap: 2.5px;
  height: 20px;
  flex: 0 0 auto;
}
.wellen span {
  display: block;
  width: 4px;
  border-radius: 2px;
  transition: height .18s ease;
}
.wellen span:nth-child(1) { height: 8px;  background: var(--onda-sky); }
.wellen span:nth-child(2) { height: 17px; background: var(--onda-sage); }
.wellen span:nth-child(3) { height: 12px; background: var(--onda-petrol); }
.wellen span:nth-child(4) { height: 18px; background: var(--onda-sage); }
.wellen span:nth-child(5) { height: 7px;  background: var(--onda-sky); }
/* Ruhelinie: ohne Ton fünf Punkte */
.sprechblase[data-still="ja"] .wellen span { height: 4px !important; }

/* Die eine Ausnahme vom „kein Text": Auf der Startseite und im Themenfeld
   steht die persönliche Begrüßung geschrieben – der Name des Kindes, den es
   erkennt (R5.2.9). In der Übung gibt es kein .blasentext-Element. */
.blasentext {
  min-width: 0;
  font: 400 14px/1.3 var(--onda-font-serif);
  color: var(--onda-text-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Telefon: kleiner */
:root[data-fall="telefon-quer"] .sprechblase,
:root[data-fall="telefon-hoch"] .sprechblase { padding: 7px 10px; gap: 6px; }
:root[data-fall="telefon-quer"] .wellen,
:root[data-fall="telefon-hoch"] .wellen { height: 16px; gap: 2px; }
:root[data-fall="telefon-quer"] .wellen span,
:root[data-fall="telefon-hoch"] .wellen span { width: 3px; }