/* ===================================================
   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;
}

/* ---------------------------------------------------------------
   Knopf unten links (schlichte Blase ohne Zeichen) und die
   Einstellungs-Blase, die sich aus der Ecke heraus oeffnet.
   --------------------------------------------------------------- */
#bb-blasen-schalter {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: calc(16px + env(safe-area-inset-left, 0px));
  z-index: 100000;
  width: 40px;
  height: 40px;
  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.12; }
#bb-blasen-schalter:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
#bb-blasen-schalter.bb-aus { opacity: 0.5; }
#bb-blasen-schalter.bb-aus:hover,
#bb-blasen-schalter.bb-aus:focus-visible { opacity: 0.85; }
#bb-blasen-schalter[aria-expanded="true"] { scale: 1.12; }

/* Die Einstellungs-Blase: Kreis, auf dessen Rand der Knopf sitzt.
   --d = Durchmesser. Der Kreismittelpunkt liegt diagonal oberhalb des
   Knopfs, im Abstand eines Radius. */
#bb-blasen-panel {
  --d: min(400px, 92vw, 86vh);
  --knopf: calc(36px + env(safe-area-inset-left, 0px));
  position: fixed;
  z-index: 99999;
  left: calc(var(--knopf) - var(--d) * 0.1464);
  bottom: calc(36px + env(safe-area-inset-bottom, 0px) - var(--d) * 0.1464);
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  box-sizing: border-box;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.3;
  /* Aquarellblase, zum Lesen etwas abgedunkelt */
  background:
    radial-gradient(circle at 50% 48%, rgba(20, 18, 50, 0.42), rgba(20, 18, 50, 0.18) 70%, rgba(20, 18, 50, 0) 72%),
    var(--bb-panel-blase) center / cover no-repeat;
  /* geschlossen: auf den Knopf zusammengezogen */
  clip-path: circle(0 at 14.64% 85.36%);
  visibility: hidden;
  transition: clip-path 0.55s cubic-bezier(.3, 1.25, .5, 1), visibility 0s linear 0.55s;
}
#bb-blasen-panel.bb-p-offen {
  clip-path: circle(110% at 14.64% 85.36%);
  visibility: visible;
  transition: clip-path 0.6s cubic-bezier(.3, 1.25, .5, 1), visibility 0s;
}
/* Inhalt im eingeschriebenen Bereich des Kreises */
#bb-blasen-panel .bb-p-inhalt {
  position: absolute;
  inset: 13%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  text-align: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}
#bb-blasen-panel.bb-p-offen .bb-p-inhalt { opacity: 1; transition: opacity 0.3s ease 0.25s; }
#bb-blasen-panel .bb-p-titel {
  margin: 0;
  font-size: 1.35em;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
#bb-blasen-panel fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
#bb-blasen-panel legend {
  padding: 0;
  margin: 0 auto 0.25em;
  font-size: 0.8em;
  opacity: 0.9;
  text-transform: lowercase;
  letter-spacing: 0.04em;
}
#bb-blasen-panel .bb-p-wahl { display: flex; gap: 0.3em; justify-content: center; }
#bb-blasen-panel .bb-p-wahl label { position: relative; cursor: pointer; }
#bb-blasen-panel input[type="radio"],
#bb-blasen-panel input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
#bb-blasen-panel .bb-p-wahl span {
  display: inline-block;
  padding: 0.22em 0.75em;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  font-size: 0.87em;
  transition: background 0.15s ease, color 0.15s ease;
}
#bb-blasen-panel .bb-p-wahl label:hover span { background: rgba(255, 255, 255, 0.18); }
#bb-blasen-panel .bb-p-wahl input:checked + span { background: #fff; color: #222; }
#bb-blasen-panel input:focus-visible + span,
#bb-blasen-panel input:focus-visible + .bb-p-regler { outline: 2px solid #fff; outline-offset: 2px; }

/* Ein/Aus-Regler */
#bb-blasen-panel .bb-p-an {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  cursor: pointer;
}
#bb-blasen-panel .bb-p-regler {
  position: relative;
  width: 2.5em;
  height: 1.4em;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  transition: background 0.2s ease;
}
#bb-blasen-panel .bb-p-regler::after {
  content: "";
  position: absolute;
  top: 0.15em;
  left: 0.15em;
  width: 0.95em;
  height: 0.95em;
  border-radius: 50%;
  background: #fff;
  transition: translate 0.2s ease;
}
#bb-blasen-panel input:checked + .bb-p-regler { background: rgba(255, 255, 255, 0.3); }
#bb-blasen-panel input:checked + .bb-p-regler::after { translate: 1.1em 0; }

/* ausgeschaltet: Auswahl blasser */
#bb-blasen-panel.bb-p-ist-aus fieldset,
#bb-blasen-panel.bb-p-ist-aus .bb-p-probe { opacity: 0.45; }

#bb-blasen-panel .bb-p-probe {
  margin-top: 0.2em;
  padding: 0.35em 1em;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #222;
  font: inherit;
  font-size: 0.87em;
  font-weight: 700;
  cursor: pointer;
}
#bb-blasen-panel .bb-p-probe:hover { background: #f3eedf; }
#bb-blasen-panel .bb-p-probe:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
#bb-blasen-panel .bb-p-probe:disabled { cursor: default; }

#bb-blasen-panel .bb-p-zu {
  position: absolute;
  top: 9%;
  right: 23%;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
#bb-blasen-panel .bb-p-zu:hover { background: rgba(255, 255, 255, 0.18); }
#bb-blasen-panel .bb-p-zu:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 420px) {
  #bb-blasen-panel { font-size: 13px; }
  #bb-blasen-panel .bb-p-inhalt { inset: 12%; gap: 0.45em; }
}

#bb-overlay:not([hidden]) ~ #bb-blasen-schalter,
html.has-modal-open #bb-blasen-schalter,
html.has-modal-open #bb-blasen-panel { display: none; }