/* ==========================================================================
   Sprechblasen über dem Seitenbild (js/blasen.js, 23.09.2026)

   Die Blase ist ein echter Knopf: Antippen spricht sie, Verweilen und Taster
   treffen sie wie jeden anderen Knopf. Deshalb gilt hier das Mindestmaß der
   Familie — 64 px hoch, nicht weniger.
   ========================================================================== */

/* ⚠️ Der Bildkasten muss ein positionierter Vorfahre sein, sonst rechnen die
   Prozentwerte der Blasen gegen irgendein Element weiter oben — gemessen am
   23.09.2026: Blasen mit `width: 34%` wurden 29 px breit. */
.reader__imgwrap { position: relative; }

/* Die Fläche des Containers ist das BILD, nicht der Kasten: Das Bild steht
   `contain`, also bleibt links und rechts Luft, und eine Blase bei „x: 4"
   säße sonst neben dem Bild. `js/blasen.js` misst das <img> und setzt die
   vier Werte in Pixeln. */
.blasen {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  pointer-events: none;          /* nur die Blasen selbst fangen Klicks */
}

.blase {
  position: absolute;
  pointer-events: auto;
  min-height: 64px;
  margin: 0;
  padding: 10px 14px;
  border: 3px solid var(--blase-farbe, var(--color-border-strong));
  border-radius: 18px;
  background: #fff;
  color: #1a1a1a;
  font-family: var(--font-body);
  font-size: clamp(15px, 2.2vw, 22px);
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  transition: transform .12s ease, box-shadow .12s ease;
  /* ⚠️ `shared/dwell-dom.css` setzt `[data-dwell], button { overflow: hidden }`
     — damit war die Zacke JEDER Blase abgeschnitten (gemessen 24.09.2026),
     und ohne Zacke sieht man ohne Farbe nicht, wer spricht. */
  overflow: visible;
}

.blase__text { display: block; }

/* Die Zacke zeigt zur Figur — sie ist das, was ohne Farbe verrät, wer
   spricht. Deshalb hat JEDE Sprechblase eine, auch die farbigen. */
.blase--sprech::after,
.blase--ruf::after {
  content: '';
  position: absolute;
  left: 22px;
  bottom: -16px;
  width: 0;
  height: 0;
  border: 9px solid transparent;
  border-top-color: var(--blase-farbe, var(--color-border-strong));
}

.blase--sprech::before {
  content: '';
  position: absolute;
  left: 25px;
  bottom: -10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: #fff;
  z-index: 1;
}

/* Denkblase: runde Wolke, die Zacke sind zwei Punkte. */
.blase--denk { border-radius: 40px; }
.blase--denk::after {
  content: '';
  position: absolute;
  left: 26px;
  bottom: -18px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--blase-farbe, var(--color-border-strong));
}

/* Rufblase: gezackter Rand für Lautes. */
.blase--ruf {
  border-radius: 6px;
  font-weight: 700;
  transform: rotate(-1.5deg);
}

/* Geräusch: keine Figur spricht, also keine Zacke und keine Farbe. */
.blase--geraeusch {
  border-style: dashed;
  font-style: italic;
  background: rgba(255, 255, 255, .92);
}

/* Beim Vorlesen: die dran ist, tritt hervor — die anderen bleiben lesbar,
   werden aber ruhiger. Kein Wegblenden: Wer mitliest, soll den ganzen
   Dialog sehen. */
.blasen--liest .blase { opacity: .55; }
.blasen--liest .blase.is-an { opacity: 1; }

.blase.is-an {
  transform: scale(1.04);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blase-farbe, #1a3a6a) 35%, transparent),
              0 4px 10px rgba(0, 0, 0, .3);
}

.blase:focus-visible {
  outline: 3px solid var(--color-focus, #1a3a6a);
  outline-offset: 3px;
}

/* Ist das Bild ausgeblendet (Einstellung `bookimg`), stehen die Blasen als
   Liste im Textkasten — sonst wären sie unsichtbar. */
.blasen--liste {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.blasen--liste .blase {
  position: static;
  width: 100%;
  text-align: left;
}

.blasen--liste .blase::before,
.blasen--liste .blase::after { display: none; }

/* ── Comicseite: das Bild bekommt die ganze Fläche ──────────────────────
   Eine Seite mit Blasen und ohne Seitentext braucht keinen Textkasten. Ohne
   diese Regel stand rechts eine leere Spalte neben einem halb so großen
   Bild — und je kleiner das Bild, desto enger die Blasen. */
.reader[data-comic="1"] .reader__textbox { display: none; }

.reader[data-comic="1"] .reader__page {
  display: block;
}

.reader[data-comic="1"] .reader__imgwrap {
  width: 100%;
  height: 100%;
}

.reader[data-comic="1"] .reader__img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

/* Telefon: Die Blasen stehen untereinander — js/blasen.js schaltet unter
   600 px auf die Listenform um. Nebeneinander passten zwei Blasen nicht ins
   Bild: gemessen am 23.09.2026 auf 390 × 844 stand die rechte Blase 617 px
   außerhalb. Der Bildkasten wird dafür zur Spalte. */
@media (max-width: 600px) {
  .blase { font-size: 16px; padding: 8px 12px; }
  .reader[data-comic="1"] .reader__imgwrap {
    flex-direction: column;
    align-items: center;
    height: auto;
  }
  .reader[data-comic="1"] .reader__img { height: auto; }
  .reader[data-comic="1"] .blasen--liste { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .blase { transition: none; }
  .blase.is-an { transform: none; }
}

/* Sprachcomputer (Serie „Wortblitz", 24.09.2026): Die Figur spricht mit dem
   Gerät, ihr Mund bleibt still. Eckig wie ein Bildschirm, Lautsprecher vorn —
   so sieht man es auch ohne Farbe. Die Zacke zeigt wie immer zur Figur. */
.blase--sprachcomputer {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
  border-width: 4px;
  text-align: left;
}
.blase__laut {
  flex: none;
  width: 1.4em;
  height: 1.4em;
  color: var(--blase-farbe, var(--color-border-strong));
}
.blase--sprachcomputer .blase__text { flex: 1 1 auto; min-width: 0; }
.blase--sprachcomputer::after {
  content: '';
  position: absolute;
  left: 22px;
  bottom: -18px;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: var(--blase-farbe, var(--color-border-strong));
}
.blase--sprachcomputer::before {
  content: '';
  position: absolute;
  left: 26px;
  bottom: -10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: #fff;
  z-index: 1;
}