.spwk-pattern__hero-collage {
  --hero-intro-inline-size: 515px;
  --hero-intro-min-inline-size: 400px;
  --hero-collage-inline-size: 793px;
  --hero-collage-inline-share: 62%;
  --hero-collage-aspect: 793 / 632;
  --hero-lead-inline-size: 444px;
  --hero-photo-radius: var(--wp--preset--border-radius--small);
  --hero-marker-size: 92px;
  --hero-disc-size: 64px;
  --hero-pill-block-size: 22px;
  --hero-collage-gap: 20px;
  --hero-disc-ring: 5px;
  --hero-pill-offset: 5px;
  --hero-wash-end: 66%;
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.spwk-pattern__hero-collage::before {
  position: absolute;
  inset: 0;
  z-index: var(--wp--custom--z-index--below);
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--wp--preset--color--primary), rgba(0, 0, 0, 0) 60%) 0%, color-mix(in srgb, var(--wp--preset--color--primary), rgba(0, 0, 0, 0) 80%) calc(var(--hero-wash-end) * 0.3), color-mix(in srgb, var(--wp--preset--color--primary), rgba(0, 0, 0, 0) 92%) calc(var(--hero-wash-end) * 0.6), transparent var(--hero-wash-end));
  background-repeat: no-repeat;
  content: "";
  pointer-events: none;
}
.spwk-pattern__hero-collage .hero-collage__inner {
  position: relative;
  flex-wrap: nowrap;
  align-items: center;
  z-index: var(--wp--custom--z-index--base);
  gap: var(--wp--preset--spacing--20);
}
.spwk-pattern__hero-collage .hero-collage__intro {
  flex: 1 1 auto;
  min-inline-size: 0;
  max-inline-size: var(--hero-intro-inline-size);
}
.spwk-pattern__hero-collage .hero-collage__lead {
  margin-block-start: var(--wp--preset--spacing--15);
  max-inline-size: var(--hero-lead-inline-size);
}
.spwk-pattern__hero-collage .hero-collage__actions {
  margin-block-start: var(--wp--preset--spacing--20);
}
.spwk-pattern__hero-collage .hero-collage__collage {
  display: grid;
  position: relative;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: 0 0 var(--hero-collage-inline-share);
  aspect-ratio: var(--hero-collage-aspect);
  min-inline-size: 0;
  max-inline-size: min(var(--hero-collage-inline-size), 100% - var(--hero-intro-min-inline-size) - var(--wp--preset--spacing--20));
  min-block-size: 0;
  gap: var(--hero-collage-gap);
}
@media (min-width: 783px) {
  .spwk-pattern__hero-collage .hero-collage__collage {
    grid-template-rows: repeat(8, minmax(0, 1fr));
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--hero-collage-gap);
  }
}
.spwk-pattern__hero-collage .hero-collage__photo {
  margin: 0;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 0;
}
.spwk-pattern__hero-collage .hero-collage__photo a {
  display: block;
  border-radius: var(--hero-photo-radius);
  block-size: 100%;
}
.spwk-pattern__hero-collage .hero-collage__photo img {
  border-radius: var(--hero-photo-radius);
  inline-size: 100%;
  block-size: 100%;
}
.spwk-pattern__hero-collage .hero-collage__item {
  display: grid;
  position: relative;
  margin-block: 0;
  min-block-size: 0;
}
.spwk-pattern__hero-collage .hero-collage__item--bad {
  grid-row: 1/6;
  grid-column: 1;
}
.spwk-pattern__hero-collage .hero-collage__item--klima {
  grid-row: 1/3;
  grid-column: 2;
}
.spwk-pattern__hero-collage .hero-collage__item--heizung {
  grid-row: 3/6;
  grid-column: 2;
}
.spwk-pattern__hero-collage .hero-collage__marker {
  display: flex;
  position: absolute;
  inset: -19px auto auto -19px;
  flex-wrap: nowrap;
  align-items: flex-start;
  z-index: var(--wp--custom--z-index--base);
  margin: 0;
  pointer-events: none;
}
.spwk-pattern__hero-collage .hero-collage__marker::before {
  flex-shrink: 0;
  border: var(--hero-disc-ring) var(--wp--custom--border--style--default) var(--wp--preset--color--light);
  border-radius: var(--wp--preset--border-radius--circle);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  inline-size: var(--hero-disc-size);
  block-size: var(--hero-disc-size);
  overflow: hidden;
  content: "";
}
.spwk-pattern__hero-collage .hero-collage__pill {
  position: relative;
  margin: 0;
  padding-block: 0;
  padding-inline: var(--wp--preset--spacing--5);
  min-block-size: var(--hero-pill-block-size);
  white-space: nowrap;
  border-start-end-radius: var(--wp--preset--border-radius--rounded);
  border-end-end-radius: var(--wp--preset--border-radius--rounded);
}
.spwk-pattern__hero-collage .hero-collage__pill, .spwk-pattern__hero-collage .hero-collage__pill:is(:root :where(.is-layout-flow) > :first-child) {
  margin-block-start: var(--hero-pill-offset);
}
.spwk-pattern__hero-collage .hero-collage__marker--bad .hero-collage__pill::before,
.spwk-pattern__hero-collage .hero-collage__marker--klima .hero-collage__pill::before,
.spwk-pattern__hero-collage .hero-collage__marker--heizung .hero-collage__pill::after {
  position: absolute;
  inset-inline-end: 100%;
  z-index: var(--wp--custom--z-index--below);
  background: inherit;
  inline-size: calc(var(--hero-disc-size) / 2);
  block-size: 100%;
  content: "";
}
.spwk-pattern__hero-collage .hero-collage__marker--bad::before {
  background-color: var(--wp--preset--color--blau);
  background-image: url("/wp-content/themes/SPiNNthemeFSE/assets/images/geist/service-bad.svg");
  background-repeat: no-repeat;
}
.spwk-pattern__hero-collage .hero-collage__marker--bad .hero-collage__pill {
  background-color: var(--wp--preset--color--blau);
}
.spwk-pattern__hero-collage .hero-collage__marker--klima::before {
  background-color: var(--wp--preset--color--gruen);
  background-image: url("/wp-content/themes/SPiNNthemeFSE/assets/images/geist/service-climate.svg");
  background-repeat: no-repeat;
}
.spwk-pattern__hero-collage .hero-collage__marker--klima .hero-collage__pill {
  background-color: var(--wp--preset--color--gruen);
}
.spwk-pattern__hero-collage .hero-collage__marker--heizung {
  inset: -19px -19px auto auto;
  flex-direction: row-reverse;
}
.spwk-pattern__hero-collage .hero-collage__marker--heizung::before {
  background-color: var(--wp--preset--color--altrosa);
  background-image: url("/wp-content/themes/SPiNNthemeFSE/assets/images/geist/service-heating.svg");
  background-repeat: no-repeat;
}
.spwk-pattern__hero-collage .hero-collage__marker--heizung .hero-collage__pill {
  background-color: var(--wp--preset--color--altrosa);
  border-start-start-radius: var(--wp--preset--border-radius--rounded);
  border-end-start-radius: var(--wp--preset--border-radius--rounded);
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.spwk-pattern__hero-collage .hero-collage__marker--heizung .hero-collage__pill::after {
  inset-inline: 100% auto;
}
@media (min-width: 783px) {
  .spwk-pattern__hero-collage .hero-collage__item--bad {
    grid-row: 1/5;
    grid-column: 2/5;
  }
  .spwk-pattern__hero-collage .hero-collage__item--klima {
    grid-row: 5/9;
    grid-column: 1/5;
  }
  .spwk-pattern__hero-collage .hero-collage__item--heizung {
    grid-row: 3/7;
    grid-column: 5/8;
  }
}
@media (max-width: 1100px) {
  .spwk-pattern__hero-collage {
    --hero-wash-end: 24%;
  }
  .spwk-pattern__hero-collage .hero-collage__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--wp--preset--spacing--30);
  }
  .spwk-pattern__hero-collage .hero-collage__intro,
  .spwk-pattern__hero-collage .hero-collage__collage {
    flex: 0 0 auto;
  }
  .spwk-pattern__hero-collage .hero-collage__intro {
    max-inline-size: none;
  }
  .spwk-pattern__hero-collage .hero-collage__collage {
    max-inline-size: none;
  }
  .spwk-pattern__hero-collage .hero-collage__lead {
    max-inline-size: none;
  }
}
@media (max-width: 782px) {
  .spwk-pattern__hero-collage {
    --hero-marker-size: 76px;
    --hero-disc-size: 54px;
  }
  .spwk-pattern__hero-collage .hero-collage__collage {
    --hero-collage-aspect: 375 / 291;
  }
  .spwk-pattern__hero-collage .hero-collage__pill {
    display: none;
  }
}

.entry-content > .spwk-pattern__hero-collage.wp-block-group:not(.no-spacing) {
  padding-block-end: var(--wp--preset--spacing--20);
}
.entry-content > .spwk-pattern__hero-collage.wp-block-group:not(.no-spacing) + .wp-block-group {
  padding-block-start: var(--wp--preset--spacing--20);
}

/*# sourceMappingURL=hero-collage.css.map */