.brandcoach-hero-blobs {
  --hero-bg: transparent;
  --blob-label-font: inherit;
  --blob-caption-font: inherit;
  --blob-label-size: 42px;
  --blob-caption-size: 52px;
  --blob-caption-color: #111111;
  --blob-label-color: #ffffff;
  --caption-x: 46%;
  --caption-y: 50%;
  position: relative;
  width: 100%;
  min-height: 860px;
  background: var(--hero-bg);
  overflow: clip;
  isolation: isolate;
  contain: layout paint style;
}

.blob-hero__item {
  --blob-x: 50%;
  --blob-y: 50%;
  --blob-w: 320px;
  --blob-h: 300px;
  --blob-rotate: 0deg;
  --blob-duration: 18s;
  --blob-delay: 0s;
  --blob-blur: 24px;
  --blob-core: rgba(223, 53, 85, 0.94);
  --blob-soft: rgba(232, 104, 133, 0.64);
  --blob-pale: rgba(243, 182, 196, 0.34);
  --blob-mist: rgba(248, 220, 227, 0.18);
  --blob-radius-a: 44% 56% 48% 52% / 42% 38% 62% 58%;
  --blob-radius-b: 52% 48% 60% 40% / 54% 42% 58% 46%;
  --blob-radius-c: 48% 52% 44% 56% / 46% 58% 42% 54%;
  --blob-edge-opacity: 0;
  --blob-edge-x: 74%;
  --blob-edge-y: 22%;
  --blob-edge-w: 46%;
  --blob-edge-h: 38%;
  --blob-edge-rotate: -18deg;
  --blob-edge-blur: 6px;
  --hover-x: 0px;
  --hover-y: 0px;
  --hover-scale: 1;
  --hover-rotate: 0deg;
  position: absolute;
  left: var(--blob-x);
  top: var(--blob-y);
  width: var(--blob-w);
  height: var(--blob-h);
  transform:
    translate3d(calc(-50% + var(--hover-x)), calc(-50% + var(--hover-y)), 0)
    scale(var(--hover-scale))
    rotate(var(--hover-rotate));
  transform-origin: center;
  will-change: transform;
}

.blob-hero__motion {
  position: absolute;
  inset: 0;
  isolation: isolate;
  animation: blob-drift calc(var(--blob-duration) * 0.9) ease-in-out infinite alternate;
  animation-delay: calc(var(--blob-delay) * 0.6);
  will-change: transform;
}

.blob-hero__motion::after {
  content: "";
  position: absolute;
  left: var(--blob-edge-x);
  top: var(--blob-edge-y);
  width: var(--blob-edge-w);
  height: var(--blob-edge-h);
  pointer-events: none;
  z-index: 1;
  opacity: var(--blob-edge-opacity);
  border-radius: 60% 40% 76% 24% / 20% 22% 78% 80%;
  transform: translate(-50%, -50%) rotate(var(--blob-edge-rotate));
  filter: blur(var(--blob-edge-blur));
  background:
    radial-gradient(ellipse 54% 48% at 56% 42%, rgba(255, 255, 255, 0.24) 0 10%, var(--blob-core) 34%, var(--blob-soft) 58%, rgba(255, 255, 255, 0) 82%),
    radial-gradient(ellipse 76% 68% at 50% 54%, var(--blob-soft) 18%, var(--blob-pale) 56%, rgba(255, 255, 255, 0) 86%);
}

.blob-hero__shape {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  z-index: 0;
  filter: blur(var(--blob-blur));
  opacity: 0.98;
  border-radius: var(--blob-radius-a);
  background:
    radial-gradient(ellipse 36% 32% at 67% 34%, var(--blob-core) 0 22%, var(--blob-soft) 40%, rgba(255, 255, 255, 0) 74%),
    radial-gradient(ellipse 68% 60% at 44% 56%, var(--blob-soft) 0 24%, var(--blob-pale) 52%, rgba(255, 255, 255, 0) 84%),
    radial-gradient(ellipse 78% 72% at 50% 50%, var(--blob-mist) 18%, rgba(255, 255, 255, 0) 86%);
  will-change: transform, opacity, filter;
  animation:
    blob-float var(--blob-duration) ease-in-out infinite alternate,
    blob-shift calc(var(--blob-duration) * 1.45) ease-in-out infinite;
  animation-delay: var(--blob-delay), calc(var(--blob-delay) * 0.7);
}

.blob-hero__shape::before,
.blob-hero__shape::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.blob-hero__shape::before {
  inset: 3% 8% 2% -2%;
  border-radius: var(--blob-radius-b);
  background:
    radial-gradient(ellipse 38% 34% at 63% 39%, var(--blob-core) 0 16%, var(--blob-soft) 32%, rgba(255, 255, 255, 0) 68%),
    radial-gradient(ellipse 72% 60% at 41% 61%, var(--blob-soft) 0 22%, var(--blob-pale) 46%, rgba(255, 255, 255, 0) 82%);
  opacity: 0.76;
  transform: rotate(-14deg) scale(1.04, 0.94);
  animation:
    blob-pulse calc(var(--blob-duration) * 1.1) ease-in-out infinite alternate,
    blob-tilt calc(var(--blob-duration) * 1.7) ease-in-out infinite;
  animation-delay: calc(var(--blob-delay) * 0.85), calc(var(--blob-delay) * 0.4);
}

.blob-hero__shape::after {
  inset: 10% 0 4% 12%;
  border-radius: var(--blob-radius-c);
  background:
    radial-gradient(ellipse 34% 30% at 61% 31%, var(--blob-core) 0 18%, var(--blob-soft) 34%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 60% 56% at 46% 58%, var(--blob-pale) 6%, var(--blob-mist) 44%, rgba(255, 255, 255, 0) 82%);
  opacity: 0.72;
  transform: rotate(18deg) scale(0.92, 1.02);
  animation:
    blob-orbit calc(var(--blob-duration) * 1.25) ease-in-out infinite alternate,
    blob-pulse calc(var(--blob-duration) * 0.95) ease-in-out infinite alternate-reverse;
  animation-delay: calc(var(--blob-delay) * 0.5), calc(var(--blob-delay) * 0.95);
}

.blob-hero__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 12%;
  text-align: center;
  font-family: var(--blob-label-font);
  font-size: var(--blob-label-size);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--blob-label-color);
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

.blob-hero__caption {
  position: absolute;
  left: var(--caption-x);
  top: var(--caption-y);
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: var(--blob-caption-font);
  font-size: var(--blob-caption-size);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: var(--blob-caption-color);
  text-align: center;
  white-space: normal;
  z-index: 3;
}

.brandcoach-hero-blobs[data-reduced-motion="true"] .blob-hero__item,
.brandcoach-hero-blobs[data-reduced-motion="true"] .blob-hero__motion,
.brandcoach-hero-blobs[data-reduced-motion="true"] .blob-hero__shape,
.brandcoach-hero-blobs[data-reduced-motion="true"] .blob-hero__shape::before,
.brandcoach-hero-blobs[data-reduced-motion="true"] .blob-hero__shape::after {
  animation: none;
  transform: none;
}

.brandcoach-hero-blobs[data-reduced-motion="true"] .blob-hero__item {
  transform: translate(-50%, -50%);
}

@keyframes blob-float {
  0% {
    transform: translate3d(-2.5%, 1.5%, 0) rotate(var(--blob-rotate)) scale(0.98, 1.02);
  }
  50% {
    transform: translate3d(1.5%, -1%, 0) rotate(calc(var(--blob-rotate) + 3deg)) scale(1.02, 0.98);
  }
  100% {
    transform: translate3d(2.5%, 2%, 0) rotate(calc(var(--blob-rotate) - 2deg)) scale(0.99, 1.03);
  }
}

@keyframes blob-drift {
  0% {
    transform: translate3d(-10px, 8px, 0) rotate(-1.8deg);
  }
  50% {
    transform: translate3d(6px, -12px, 0) rotate(1.5deg);
  }
  100% {
    transform: translate3d(12px, 6px, 0) rotate(-1deg);
  }
}

@keyframes blob-shift {
  0% {
    border-radius: var(--blob-radius-a);
    opacity: 0.94;
  }
  50% {
    border-radius: var(--blob-radius-b);
    opacity: 0.98;
  }
  100% {
    border-radius: var(--blob-radius-c);
    opacity: 0.95;
  }
}

@keyframes blob-pulse {
  0% {
    transform: rotate(-16deg) scale(0.94, 1.02);
  }
  50% {
    transform: rotate(-8deg) scale(1.02, 0.96);
  }
  100% {
    transform: rotate(-20deg) scale(0.98, 1.04);
  }
}

@keyframes blob-tilt {
  0% {
    border-radius: var(--blob-radius-b);
  }
  50% {
    border-radius: 46% 54% 58% 42% / 50% 38% 62% 50%;
  }
  100% {
    border-radius: 54% 46% 44% 56% / 42% 58% 40% 60%;
  }
}

@keyframes blob-orbit {
  0% {
    transform: translate3d(-2%, 0, 0) rotate(14deg) scale(0.9, 1.04);
  }
  50% {
    transform: translate3d(1.5%, -2.5%, 0) rotate(22deg) scale(0.96, 0.98);
  }
  100% {
    transform: translate3d(2.5%, 2%, 0) rotate(18deg) scale(0.92, 1.02);
  }
}

@media (max-width: 1024px) {
  .brandcoach-hero-blobs {
    min-height: 760px;
  }

  .blob-hero__item {
    width: min(var(--blob-w), 34vw);
    height: min(var(--blob-h), 31vw);
  }

  .blob-hero__caption {
    font-size: var(--blob-caption-size);
  }
}

@media (max-width: 768px) {
  .brandcoach-hero-blobs {
    display: grid;
    grid-template-areas:
      "mensch"
      "caption"
      "substanz"
      "marke";
    gap: 18px;
    min-height: 0;
    padding: 12px 0 28px;
  }

  .blob-hero__item {
    position: relative;
    left: auto;
    top: auto;
    margin: 0 auto;
    width: min(var(--blob-w), 80vw);
    height: min(var(--blob-h), 72vw);
    transform:
      translate3d(var(--hover-x), var(--hover-y), 0)
      scale(var(--hover-scale))
      rotate(var(--hover-rotate));
  }

  .blob-mensch {
    grid-area: mensch;
  }

  .blob-substanz {
    grid-area: substanz;
  }

  .blob-marke {
    grid-area: marke;
  }

  .blob-hero__caption {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    grid-area: caption;
    justify-self: center;
    white-space: normal;
    text-align: center;
    font-size: var(--blob-caption-size);
  }

  .brandcoach-hero-blobs[data-reduced-motion="true"] .blob-hero__item {
    transform: none;
  }
}