/* ===================================================
   beyond-bubbles Blasen Aquarell
   =================================================== */

#bb-bubbles {
  position: fixed;
  inset: 0;
  pointer-events: none; /* Links/Text darunter bleiben bedienbar */
  /* Negativer z-index: Blasen liegen hinter dem Seiteninhalt. Flaechen mit
     eigenem Hintergrund (farbige Gruppen) verdecken sie. */
  z-index: -1;
  overflow: hidden;
  /* Die ganze Blasen-Ebene multipliziert sich mit dem, was darunter liegt
     (Papierton, gemalte Flaechen): Blasen ueber einer Flaeche wirken wie
     eine weitere Lasur. */
  mix-blend-mode: multiply;
}

.bb-bubble {
  position: fixed;
  pointer-events: none;
  opacity: 0;
  scale: 0.6;
  /* Multiplizieren wie lasierende Farbe: wo sich zwei Blasen ueberlagern,
     mischen sich die Farben, statt sich zu verdecken. */
  mix-blend-mode: multiply;
  /* Langsam einblenden und dabei wachsen */
  transition: opacity 2.2s ease-out, scale 2.2s ease-out;
}

.bb-bubble.bb-in {
  opacity: var(--target-opacity, 0.9);
  scale: 1;
}

.bb-bubble-inner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: auto;
  background: center / contain no-repeat;
}

/* Spruehstoss: schnell sichtbar werden statt langsam aufbluehen */
.bb-bubble.bb-stoss {
  scale: 0.3;
  transition: opacity 0.35s ease-out, scale 0.5s ease-out;
}
.bb-bubble.bb-stoss.bb-in {
  scale: 1;
}

/* Verschwinden: kurz groesser werden und ausblenden */
.bb-bubble.bb-pop {
  transition-duration: 0.6s;
  opacity: 0;
  scale: 1.25;
}

/* Ende der Lebensdauer: sanft ausklingen */
.bb-bubble.bb-ausklingen {
  transition: opacity var(--bb-fade-out, 1.8s) ease-in;
  opacity: 0;
}

.bb-bubble.bb-pop .bb-bubble-inner,
.bb-bubble.bb-ausklingen .bb-bubble-inner {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #bb-bubbles {
    display: none;
  }
}

/* ---------------------------------------------------------------
   Mischen mit den Blasen
   Bloecke mit der zusaetzlichen CSS-Klasse "bb-mischen" (Block ->
   Erweitert -> Zusaetzliche CSS-Klasse) verrechnen sich wie Lasur mit
   allem, was dahinter liegt: Wandert eine Blase hinter das Logo,
   vertiefen sich dort die Farben.
   Funktioniert nur, solange kein umgebender Bereich eine eigene Ebene
   bildet (z.B. fixierter Header mit z-index oder Hintergrundfarbe).
   --------------------------------------------------------------- */
.bb-mischen img,
img.bb-mischen {
  mix-blend-mode: multiply;
}

/* Schalter "Blasen aus / an": kleine Blase oben links neben dem Play-Knopf */
#bb-blasen-schalter {
  position: absolute;
  top: 12px;
  left: 58px;
  z-index: 99998;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bb-schalter-blase) center / contain no-repeat;
  cursor: pointer;
  transition: scale 0.2s ease, opacity 0.2s ease;
}
#bb-blasen-schalter:hover,
#bb-blasen-schalter:focus-visible { scale: 1.1; }
#bb-blasen-schalter:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
/* Blasen an: Blase durchgestrichen = "ausschalten" */
#bb-blasen-schalter::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 2.5px;
  margin: -1.25px 0 0 -13px;
  background: #000;
  border-radius: 2px;
  rotate: -45deg;
}
/* Blasen aus: blasser, ohne Strich = "einschalten" */
#bb-blasen-schalter.bb-aus { opacity: 0.45; }
#bb-blasen-schalter.bb-aus::after { display: none; }
#bb-blasen-schalter.bb-aus:hover,
#bb-blasen-schalter.bb-aus:focus-visible { opacity: 0.8; }
.admin-bar #bb-blasen-schalter { top: calc(32px + 12px); }
@media (max-width: 782px) { .admin-bar #bb-blasen-schalter { top: calc(46px + 12px); } }
#bb-overlay:not([hidden]) ~ #bb-blasen-schalter,
html.has-modal-open #bb-blasen-schalter { display: none; }