/* Text Block Styles */
.is-style-subheading {
  margin: 0 !important;
  font-style: normal;
  font-weight: 600;
  line-height: 1.3;
  font-family: var(--wp--preset--font-family--playpen-sans) !important;
  font-size: var(--wp--preset--font-size--custom-2);
  color: var(--wp--preset--color--brown) !important;
}

.is-style-intro-text {
  font-size: var(--wp--preset--font-size--custom-4);
}

/* Blob Shapes */
/* Transitions for liquid blob shaping */
.is-style-blob-circle,
figure.is-style-blob-circle,
.is-style-blob-rect,
.is-blob-shape,
.is-style-blob-shape-background::before {
  transition:
    border-radius 0.2s cubic-bezier(0.25, 1, 0.5, 1),
    clip-path 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Blob Shapes for images and icons */
.is-style-blob-circle:has(> figure) {
  border-radius: 53% 47% 38% 62% / 36% 67% 33% 64%;
  z-index: 2;
}
.is-style-blob-circle.has-overlapping {
  overflow: visible;
}
.is-style-blob-circle.page-icon {
  position: absolute;
  bottom: -0.5rem;
  right: -0.5rem;
  width: 5rem;
  height: 5rem;
  display: grid;
  place-content: center;
}
.is-style-blob-circle.page-icon img {
  max-width: 3.5rem;
  height: 3rem;
}
.wp-singular:not(.home) .wp-block-column:has(.page-icon) {
  position: relative;
}
.wp-singular:not(.home) .page-icon {
  display: none;
}

figure.is-style-blob-circle {
  border-radius: 53% 47% 38% 62% / 36% 67% 33% 64%;
  overflow: hidden;
  z-index: 2;
}

.wp-block-group.is-style-blob-circle:not(> figure) {
  /* Kein direktes Clipping auf der Gruppe mehr, um Overflows von Deko/Illustrationen nicht abzuschneiden */
  clip-path: none;
}

.wp-block-group.is-style-blob-circle:has(
    > *:not(figure):not(.wp-block-image):not(.illustration):not(.wp-block-acf-illustration)
  ) {
  position: relative;
  background-color: transparent !important;
  padding-top: var(--wp--preset--spacing--three);
  padding-right: var(--wp--preset--spacing--four);
  padding-bottom: var(--wp--preset--spacing--three);
  padding-left: var(--wp--preset--spacing--four);
  border-radius: 0 !important;
}

.wp-block-group.is-style-blob-circle:has(
    > *:not(figure):not(.wp-block-image):not(.illustration):not(.wp-block-acf-illustration)
  )::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--backgroundColor, var(--wp--preset--color--cream));
  clip-path: var(
    --clip-path,
    shape(
      from 10% 2%,
      curve to 90% 2% with 50% 1%,
      curve to 98% 15% with 98% 2%,
      curve to 98% 85% with 99% 50%,
      curve to 90% 98% with 98% 98%,
      curve to 10% 98% with 50% 99%,
      curve to 2% 85% with 2% 98%,
      curve to 2% 15% with 1% 50%,
      curve to 10% 2% with 2% 2%
    )
  );
  transition: clip-path 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.wp-block-group.is-style-blob-circle:where(:not(.alignleft):not(.alignright):not(.alignfull)):has(
    > *:not(figure):not(.wp-block-image):not(.illustration):not(.wp-block-acf-illustration)
  ) {
  max-width: 1050px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Blob Shapes for columns */
.is-style-blob-rect.wp-block-post-template,
.wp-block-columns:has(> .is-style-blob-rect) {
  align-items: flex-start !important;
  background-color: unset !important;
  position: relative;
  padding-bottom: 2.5rem; /* Safety Space for blob at the bottom */
}

.wp-block-column.is-style-blob-rect,
.is-style-blob-rect.wp-block-post-template > li {
  background-color: unset !important;
  position: relative;
}

/* Wenn kein Bild oben ist, bekommt die Spalte oben Padding für den Blob-Rand */
.wp-block-column.is-style-blob-rect:not(:has(figure)),
.is-style-blob-rect.wp-block-post-template > li:not(:has(figure)) {
  padding-top: 2.5rem !important;
}

/* Spacing between elements inside the blob */
.wp-block-column.is-style-blob-rect > *,
.is-style-blob-rect.wp-block-post-template > li > * {
  margin-block-start: 0;
}

.wp-block-column.is-style-blob-rect > *:not(:first-child),
.is-style-blob-rect.wp-block-post-template > li > *:not(:first-child) {
  margin-block-start: 1rem;
  margin-block-end: 0;
}

/* Constrain text elements to 75% width and center them */
.wp-block-column.is-style-blob-rect
  > *:not(
    figure,
    .wp-block-image,
    .wp-block-featured-image,
    .wp-block-post-featured-image,
    .illustration,
    .wp-block-acf-illustration,
    img,
    :has(figure, img, .illustration, .wp-block-image)
  ),
.is-style-blob-rect.wp-block-post-template
  > li
  > *:not(
    figure,
    .wp-block-image,
    .wp-block-featured-image,
    .wp-block-post-featured-image,
    .illustration,
    .wp-block-acf-illustration,
    img,
    :has(figure, img, .illustration, .wp-block-image)
  ) {
  max-width: calc(100% - 4rem);
  margin-inline: auto;
}

.is-style-blob-rect .wp-block-image img,
.is-style-blob-rect .wp-block-featured-image img {
  aspect-ratio: 4/3;
  object-fit: cover;
}

.wp-block-column.is-style-blob-rect::after,
.is-style-blob-rect.wp-block-post-template > li::after {
  content: "";
  display: block;
  position: absolute;
  top: var(--topOffset, 0%);
  left: 0;
  z-index: -1;
  background-color: var(--backgroundColor, var(--wp--preset--color--cream));
  width: 100%;
  height: var(--blobHeight, 100%);
  clip-path: var(
    --clipPath,
    shape(
      from 21.11px 11.11px,
      curve to calc(50% + 0px) 14.71px with calc(0% + 28.71px) 14.71px,
      smooth to calc(100% - 25.41px) 18.41px,
      smooth to calc(100% - 16.41px) 25.41px,
      smooth to calc(100% - 20.45px) calc(50% + 0px),
      smooth to calc(100% - 25.93px) calc(100% - 26.93px),
      smooth to calc(100% - 26.93px) calc(100% - 17.93px),
      smooth to calc(50% + 0px) calc(100% - 11.22px),
      smooth to 20.13px calc(100% - 11.63px),
      smooth to 8.13px calc(100% - 20.13px),
      smooth to 7.43px calc(50% + 0px),
      smooth to 9.12px 20.62px,
      smooth to 21.11px 11.11px
    )
  );
}

/* Blob Background Shape for alignfull content */
.alignfull.is-style-blob-shape-background + .alignfull {
  margin-block-start: 2rem;
}
.is-style-blob-shape-background.has-background {
  background-color: transparent !important;
}
.is-style-blob-shape-background.has-background.has-cream-background-color::before {
  background-color: var(--wp--preset--color--cream) !important;
}
.is-style-blob-shape-background.has-background::before {
  content: "";
  display: block;
  z-index: -1;
  position: absolute;
  inset: 50%;
  transform: translate(-50%, -50%);
  clip-path: var(--clip-path);
  width: 100%;
  height: calc(100% - 1rem);
}
.is-style-blob-shape-background {
  --clip-path: shape(
    from 0 0.4rem,
    curve to 30% 0.4rem with 20% 0.4rem,
    smooth to 50% 0.4rem,
    smooth to 70% 0.4rem,
    smooth to 100% 0.4rem,
    vline to calc(100% - 0.4rem),
    curve to 70% calc(100% - 0.4rem) with 80% calc(100% - 0.4rem),
    smooth to 50% calc(100% - 0.4rem),
    smooth to 30% calc(100% - 0.4rem),
    smooth to 0 calc(100% - 0.4rem),
    vline to 0
  );
}

/* Responsive Blobs */
@media (max-width: 781px) {
  .wp-block-column:has(> figure:not(.wp-block-post-featured-image, .is-style-blob-circle):only-child) img {
    max-height: 20vh;
    width: auto;
  }
  .wp-block-columns .wp-block-column:has(.wp-block-group.is-style-blob-circle) {
    flex-basis: calc(50% - 5vw) !important;
    flex-grow: 1;
  }
}

@media only screen and (min-width: 990px) {
  /* Blob Shapes */
  .is-style-blob-shape-background.has-background::before {
    height: calc(100% - 4rem);
  }
}