/* beyond bubbles – Footer: Footer-Blase.
   Der umfassenden Gruppe der Footer-Vorlage die CSS-Klasse "bb-fuss" geben (Block -> Erweitert -> Zusätzliche CSS-Klasse),
   die Gruppe auf "Volle Breite" stellen. Die Blase sitzt immer links unten. */
.bb-fuss {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
  min-height: 66vw;
  box-sizing: border-box;
  padding: 1.4rem 1.4rem 1.4rem 1.6rem !important;
  margin-top: 3rem;
  background: transparent !important;
}
.bb-fuss > * { position: relative; z-index: 1; background: transparent !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
.bb-fuss a { color: #111; }

/* Blase links unten, rundum angeschnitten (links und unten), wie in der Zeichnung. Die Links stehen immer links in der Blase,
   der Rest der Fläche bleibt frei (rechts unten z. B. der Knopf "nach oben"). Größe/Lage: width/height, left, bottom. */
.bb-fuss::before {
  content: "";
  position: absolute;
  z-index: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  width: 82vw;
  height: 82vw;
  left: -20vw;
  bottom: -22vw;
  border-radius: 50%;
  background: var(--bb-fuss-farbe, #F7C948);
  transition: background-color 0.7s ease;
}
.bb-fuss { min-height: 70vw; padding-bottom: 1.6rem !important; }

@media (min-width: 782px) {
  .bb-fuss { min-height: 420px; }
  .bb-fuss::before { width: 560px; height: 560px; left: -140px; bottom: -150px; }
}
@media (prefers-reduced-motion: reduce) { .bb-fuss::before { transition: none; } }