/* Entwurf A only. Shared ss-* classes/tokens retain their original definitions. */
.ss-resonanzlinie {
  --rl-space: clamp(64px, 7.8vw, 112px);
  --rl-mask: url('./hero-organic-mask.svg');
  --rl-hero-media-max: 520px;
  --rl-hero-media-ratio: 900 / 1080;
}

/* Der WordPress-/Theme-Seitentitel gehört nicht zum Entwurf. */
.ss-resonanzlinie .page-header,
.ss-resonanzlinie .entry-title {
  display: none;
}

.ss-resonanzlinie main {
  overflow: clip;
}
.ss-resonanzlinie main .ss-hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(24px, 3vw, 44px) var(--rl-space);
  background:
    radial-gradient(ellipse 62% 56% at 86% 30%, rgba(167, 187, 174, 0.22), transparent 68%),
    radial-gradient(ellipse 46% 42% at 68% 6%, rgba(79, 143, 150, 0.07), transparent 70%),
    radial-gradient(ellipse 52% 62% at 6% 88%, rgba(201, 161, 91, 0.05), transparent 72%);
}
.ss-resonanzlinie main .ss-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: 0;
  background: url('./header-botanical.webp') center top / 100% auto no-repeat;
  opacity: 0;
  animation: rl-header-botanical-in 1600ms ease 180ms forwards;
}
@keyframes rl-header-botanical-in {
  to {
    opacity: 0.56;
  }
}
.ss-resonanzlinie main .ss-hero__stage {
  position: relative;
}
.ss-resonanzlinie main .ss-hero__stage::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: 6%;
  right: 1%;
  width: 44%;
  height: 74%;
  background: radial-gradient(
    ellipse at 58% 40%,
    rgba(167, 187, 174, 0.22),
    rgba(167, 187, 174, 0.07) 52%,
    transparent 72%
  );
  filter: blur(10px);
}
/* Grosse Botanik: Position/Grösse stecken in der globalen Elementor-Klasse. */
.ss-resonanzlinie .ss-hero-plant--right {
  transform: rotate(6deg);
  translate: 0 var(--rl-plant-shift, 0px);
  transform-origin: top right;
  background: url('./hero-plant-right.webp') center / contain no-repeat;
  opacity: var(--rl-plant-opacity, 0.95);
  animation: rl-plant-right-in 2800ms ease 3600ms both;
  transition: translate 180ms linear;
}
@keyframes rl-plant-right-in {
  from {
    opacity: 0;
  }
  to {
    opacity: var(--rl-plant-opacity, 0.95);
  }
}
.ss-resonanzlinie main .ss-hero__text {
  position: relative;
}
/* .ss-resonanzlinie main .ss-hero__text::after {
  content: '';
  position: absolute;
  left: -14px;
  bottom: -54px;
  pointer-events: none;
  width: clamp(130px, 14vw, 200px);
  aspect-ratio: 320 / 360;
  opacity: calc(0.62 * var(--rl-left-plant-opacity, 1));
  translate: 0 var(--rl-left-plant-shift, 0px);
  transform: rotate(-6deg);
  animation: rl-plant-left-in 2800ms ease 3600ms both;
  transition: translate 180ms linear;
  background: url('./hero-plant-left.webp') center / contain no-repeat;
} */
@keyframes rl-plant-left-in {
  from {
    opacity: 0;
  }
  to {
    opacity: calc(0.62 * var(--rl-left-plant-opacity, 1));
  }
}

.ss-resonanzlinie main .ss-hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: auto -6% -120px;
  height: clamp(260px, 33vw, 480px);
  background: url('./background-waves.svg') center / 100% 100% no-repeat;
  animation: rl-wave-breathe 14s ease-in-out infinite alternate;
  transform-origin: center;
}
.ss-resonanzlinie main .ss-hero__inner {
  display: grid;
  grid-template-columns: 47% 40%;
  align-items: center;
  gap: 6%;
}
.ss-resonanzlinie main .ss-hero__text {
  width: 100%;
  padding-top: 0;
}
.ss-resonanzlinie main .ss-hero__body {
  max-width: 58ch;
}
/* .ss-resonanzlinie main .ss-hero__title {
  max-width: 9ch;
} */
.ss-resonanzlinie main .ss-hero__media {
  width: min(100%, var(--rl-hero-media-max));
  flex-shrink: 0;
  aspect-ratio: var(--rl-hero-media-ratio);
  margin: 0;
  justify-self: flex-start;
  padding: 0;
  position: relative;
  border-radius: 38% 53% 31% 46%;
  -webkit-mask-image: var(--rl-mask);
  mask-image: var(--rl-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.ss-resonanzlinie main .ss-hero.ss-hero--card .ss-hero__stage {
  filter: none;
}
.ss-resonanzlinie main .ss-hero.ss-hero--card .ss-hero__media {
  -webkit-mask-image: none;
  mask-image: none;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--ss-shadow-soft);
}
.ss-resonanzlinie main .ss-hero.ss-hero--card .ss-hero__bild.ss-hero__bild--home {
  inset: 0;
  width: 100%;
  height: 110%;
  object-position: 11% 36%;
  transform: none;
}
@supports (mask-image: url('')) {
  .ss-resonanzlinie main .ss-hero__media {
    border-radius: 0;
  }
}
.ss-resonanzlinie main .ss-hero__bild.ss-hero__bild--home {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 110%;
  object-fit: cover;
  object-position: 0% 36%;
  transform: translate(0, 11px);
}
.ss-resonanzlinie main .ss-erwartung {
  position: relative;
  isolation: isolate;
  padding-block: 28px clamp(100px, 10vw, 145px);
  background: transparent;
}
.ss-resonanzlinie main .ss-erwartung::before {
  background-image: url('./background-waves.svg');
  opacity: 0.55;
  animation: rl-wave-breathe 14s ease-in-out infinite alternate;
  transform-origin: center;
}
.ss-resonanzlinie main .ss-erwartung__trenner {
  margin-block: 24px 52px;
}
.ss-resonanzlinie main .ss-erwartung__grid {
  position: relative;
  isolation: isolate;
  gap: clamp(32px, 5vw, 72px);
}
.ss-resonanzlinie main .ss-erwartung__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.ss-resonanzlinie main .ss-erwartung__kreis {
  background: #e9dfd26b;
  width: 106px;
  height: 106px;
  flex-shrink: 0;
  box-shadow: 0 8px 28px #1f4f5a07;
}
.ss-resonanzlinie main .ss-erwartung__inhalt {
  align-items: center;
}
.ss-resonanzlinie main .ss-erwartung__titel {
  text-align: center;
}
.ss-resonanzlinie main .ss-erwartung__text {
  max-width: 30ch;
}
.ss-resonanzlinie .ss-resonanzlinie__signature {
  position: absolute;
  top: 6px;
  left: -3%;
  width: 106%;
  height: 145px;
  pointer-events: none;
  z-index: -1;
  overflow: visible;
}
.ss-resonanzlinie main .ss-angebot {
  padding-block: 32px var(--rl-space);
  background: transparent;
}
.ss-resonanzlinie main .ss-angebot__grid {
  gap: clamp(32px, 4.5vw, 65px);
  align-items: center;
}
.ss-resonanzlinie main .ss-angebot__media {
  border-radius: 18px;
  box-shadow: 0 14px 42px #1f4f5a0c;
}
.ss-resonanzlinie main .ss-vertrauen {
  padding-block: 36px var(--rl-space);
  background: transparent;
}
.ss-resonanzlinie main .ss-vertrauen__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(40px, 6vw, 96px);
}
.ss-resonanzlinie main .ss-reviews-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(150px, 15vw, 214px);
  align-self: stretch;
  align-items: start;
  gap: clamp(24px, 3.2vw, 48px);
  height: 100%;
}
.ss-resonanzlinie main .ss-vertrauen__zitat {
  align-items: flex-start;
  justify-content: flex-start;
}
.ss-resonanzlinie main .ss-vertrauen__label {
  color: var(--ss-dusty-tuerkis);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
  margin-bottom: 18px;
  text-transform: none;
  transition:
    opacity 520ms ease,
    transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ss-resonanzlinie main .ss-vertrauen__quote {
  line-height: 1.65;
}
.ss-resonanzlinie main .ss-vertrauen__quote::before {
  content: '';
  display: block;
  width: 56px;
  aspect-ratio: 910 / 637;
  margin-bottom: 12px;
  background: url('./quote-marks.webp') left center / contain no-repeat;
}
.ss-resonanzlinie main .ss-vertrauen__quote.ss-review-changing,
.ss-resonanzlinie main .ss-vertrauen__label.ss-review-changing {
  opacity: 0;
  transform: translateY(5px);
}
.ss-resonanzlinie main .ss-vertrauen__quote {
  transition:
    opacity 520ms ease,
    transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ss-resonanzlinie main .ss-review-controls {
  display: none;
  min-height: 0;
  padding: 0;
}
.ss-resonanzlinie main .ss-review-controls.is-visible {
  display: flex;
  justify-content: flex-start;
  margin: 0 0 32px;
}
.ss-resonanzlinie main .ss-review-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ss-resonanzlinie main .ss-review-arrow {
  display: inline-flex;
  width: 30px;
  height: 30px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ss-rahmen);
  border-radius: 50%;
  background: transparent;
  color: var(--ss-tiefes-teal);
  font: 600 20px/1 var(--ss-font-text);
  cursor: pointer;
}
.ss-resonanzlinie main .ss-review-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ss-rahmen);
  cursor: pointer;
  transition:
    transform 180ms ease,
    background-color 180ms ease;
}
.ss-resonanzlinie main .ss-review-dot.is-active {
  background: var(--ss-dusty-tuerkis);
  transform: scale(1.3);
}
.ss-resonanzlinie main .ss-review-arrow:focus-visible,
.ss-resonanzlinie main .ss-review-dot:focus-visible {
  outline: 2px solid var(--ss-warmes-gold);
  outline-offset: 3px;
}
.ss-resonanzlinie main .ss-vertrauen__personal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 0;
  padding-inline-start: clamp(28px, 4vw, 56px);
  border-inline-start: 1px solid var(--ss-rahmen);
  height: 100%;
}
.ss-resonanzlinie .ss-vertrauen__personal .ss-statement__titel {
  max-width: none;
  text-align: left;
  color: var(--ss-tiefes-teal);
}
.ss-resonanzlinie .ss-vertrauen__personal .ss-trenner {
  align-self: flex-start;
  margin-block: 20px 24px;
}
.ss-resonanzlinie .ss-vertrauen__personal .ss-statement__text {
  max-width: 46ch;
  margin: 0;
  text-align: left;
}
.ss-resonanzlinie main .ss-band {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding: 0;
}
.ss-resonanzlinie main .ss-band .ss-container {
  max-width: none;
  padding-inline: 0;
}
.ss-resonanzlinie main .ss-cta {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  min-height: clamp(470px, 34vw, 520px);
  padding: clamp(82px, 9vw, 116px) max(32px, calc((100vw - 820px) / 2));
  border-radius: 0;
  background: url('./cta-botanical-banner.webp') left center / cover no-repeat;
}
.ss-resonanzlinie main .ss-cta .ss-ornament--mandala {
  right: 13%;
}
.ss-resonanzlinie main .ss-cta__spirale {
  display: none;
}
.ss-resonanzlinie main .ss-btn,
.ss-resonanzlinie main .ss-cta a {
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease;
}
.ss-resonanzlinie main a:focus-visible {
  outline: 2px solid var(--ss-warmes-gold);
  outline-offset: 5px;
}
.ss-resonanzlinie .ss-footer {
  flex-direction: column;
  align-items: stretch;
}
.ss-resonanzlinie .ss-footer__credentials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  gap: 24px 48px;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--ss-rahmen);
}
.ss-resonanzlinie .ss-footer__inner {
  width: 100%;
}
/* Disable inherited section reveal only in this study: each intended element has its own timing. */
.ss-resonanzlinie main .ss-reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
/*
 * Titel fahren beim Erscheinen sanft von unten ein. Der Folgeinhalt wird
 * erst danach sichtbar; die Staffelung kommt aus --rl-delay (JS).
 */
.ss-resonanzlinie .rl-anim {
  transition:
    opacity 620ms ease,
    transform 720ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--rl-delay, 0ms);
}
.ss-resonanzlinie .ss-hero .rl-anim {
  transition-duration: 440ms;
}
/* Ausgangszustand ohne Transition setzen, sonst blendet der Browser
   beim Setzen der Klasse selbst noch weich aus. */
.ss-resonanzlinie .rl-anim.rl-wait {
  opacity: 0;
  transition: none;
}
.ss-resonanzlinie .rl-title.rl-wait {
  transform: translateY(14px);
}
.ss-resonanzlinie .rl-follow.rl-wait {
  transform: none;
}
.ss-resonanzlinie .rl-photo.rl-wait {
  transform: scale(1.025);
}
.rl-scroll-linked .ss-resonanzlinie .rl-scroll-item {
  opacity: var(--rl-scroll-opacity, 0);
  transition: none;
}
.rl-scroll-linked .ss-resonanzlinie .rl-scroll-item.rl-title {
  transform: translateY(var(--rl-scroll-y, 14px));
}
.rl-scroll-linked .ss-resonanzlinie .rl-scroll-item.rl-follow {
  transform: none;
}
.rl-scroll-linked .ss-resonanzlinie .rl-scroll-item.rl-photo {
  transform: scale(var(--rl-scroll-scale, 1.025));
}
.rl-scroll-linked .ss-resonanzlinie .ss-motion-title,
.rl-scroll-linked .ss-resonanzlinie .ss-motion-text,
.rl-scroll-linked .ss-resonanzlinie .ss-motion-media,
.rl-scroll-linked .ss-resonanzlinie .ss-motion-card {
  opacity: var(--rl-scroll-opacity, 0);
  transition: none;
}
.rl-scroll-linked .ss-resonanzlinie .rl-scroll-item.rl-palette-title,
.rl-scroll-linked .ss-resonanzlinie .rl-scroll-item.rl-palette-text,
.rl-scroll-linked .ss-resonanzlinie .rl-scroll-item.rl-palette-card {
  transform: translateY(var(--rl-scroll-y, 14px));
}
.rl-scroll-linked .ss-resonanzlinie .rl-scroll-item.rl-palette-media {
  transform: scale(var(--rl-scroll-scale, 1.025));
}
.rl-scroll-linked .ss-resonanzlinie .rl-icon-motion {
  opacity: var(--rl-icon-opacity, 0);
  transform: translate(var(--rl-icon-x, 0), var(--rl-icon-y, 16px));
}
.rl-scroll-linked .ss-resonanzlinie .rl-copy-motion {
  opacity: var(--rl-copy-opacity, 0);
  transform: translateY(var(--rl-copy-y, 14px));
}
.rl-scroll-linked .ss-resonanzlinie .rl-offer-media-motion {
  opacity: var(--rl-offer-opacity, 0);
  transform: translate(var(--rl-offer-x, -30%), var(--rl-offer-y, 30%));
}
.ss-resonanzlinie .rl-draw path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2400ms cubic-bezier(0.33, 0.1, 0.25, 1);
}
.ss-resonanzlinie .rl-draw.rl-drawn path {
  stroke-dashoffset: 0;
}
.rl-scroll-linked .ss-resonanzlinie .rl-draw path {
  stroke-dashoffset: var(--rl-draw-offset, 1);
  transition: none;
}
.rl-scroll-linked .ss-resonanzlinie main .ss-hero::after,
.rl-scroll-linked .ss-resonanzlinie main .ss-erwartung::before {
  animation: none;
  transform: translate3d(var(--rl-wave-x, 0px), var(--rl-wave-y, 0px), 0)
    scale(var(--rl-wave-scale, 1));
}
.rl-scroll-linked .ss-resonanzlinie .ss-hero-plant--right {
  animation: none;
  transition: none;
}
.rl-scroll-linked .ss-resonanzlinie main .ss-hero__text::after {
  animation: none;
  transition: none;
}
@keyframes rl-wave-breathe {
  from {
    transform: translate3d(-0.25%, 0, 0) scale(1.002);
  }
  to {
    transform: translate3d(0.25%, -0.4%, 0) scale(1.006);
  }
}
@media (max-width: 1024px) {
  .ss-resonanzlinie main .ss-hero__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .ss-resonanzlinie main .ss-hero__text {
    width: 100%;
  }
  .ss-resonanzlinie main .ss-hero__media {
    width: min(100%, 520px);
    justify-self: center;
    align-self: center;
  }
  .ss-resonanzlinie main .ss-erwartung__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .ss-resonanzlinie main .ss-erwartung__text {
    max-width: 48ch;
    text-align: center;
  }
  .ss-resonanzlinie main .ss-vertrauen__grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .ss-resonanzlinie main .ss-reviews-panel {
    grid-template-columns: minmax(0, 1fr) 180px;
    align-items: start;
  }
  .ss-resonanzlinie main .ss-vertrauen__personal {
    padding: 36px 0 0;
    border-inline-start: 0;
    border-block-start: 1px solid var(--ss-rahmen);
  }
  .ss-resonanzlinie main .ss-cta .ss-ornament--mandala {
    display: block;
    top: 50%;
    right: 20px;
    width: 120px;
    height: 120px;
    opacity: 0.3;
    transform: translateY(-50%);
  }
  .ss-resonanzlinie .ss-resonanzlinie__signature {
    left: 0;
    top: -38px;
    width: 100%;
    height: 54px;
    opacity: 0.6;
  }
  .ss-resonanzlinie main .ss-hero::after {
    inset-block-end: -60px;
  }
  .ss-resonanzlinie main .ss-hero__text::after {
    display: none;
  }
}
@media (max-width: 767px) {
  .ss-resonanzlinie main .ss-hero {
    padding-bottom: 64px;
  }
  .ss-resonanzlinie main .ss-erwartung {
    padding-bottom: 72px;
  }
  .ss-resonanzlinie main .ss-erwartung__trenner {
    margin-bottom: 42px;
  }
  .ss-resonanzlinie main .ss-cta {
    padding-inline: 24px;
  }
  .ss-resonanzlinie main .ss-cta .ss-ornament--mandala {
    display: block;
    right: 18px;
    top: auto;
    bottom: 24px;
    width: 104px;
    height: 104px;
    opacity: 0.22;
    transform: none;
  }
  .ss-resonanzlinie main .ss-vertrauen__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .ss-resonanzlinie main .ss-reviews-panel {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .ss-resonanzlinie main .ss-vertrauen__portrait {
    justify-self: center;
  }
  .ss-resonanzlinie main .ss-vertrauen__personal {
    padding-top: 32px;
  }
  .ss-resonanzlinie .ss-footer__credentials {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-bottom: 22px;
    margin-bottom: 22px;
  }
  .ss-resonanzlinie main .ss-hero__media {
    width: 100%;
    justify-self: stretch;
  }
  .ss-resonanzlinie main .ss-hero::after,
  .ss-resonanzlinie main .ss-erwartung::before {
    animation: none;
    transform: none;
  }
  .rl-scroll-linked .ss-resonanzlinie main .ss-hero::after,
  .rl-scroll-linked .ss-resonanzlinie main .ss-erwartung::before {
    transform: none;
  }
  .ss-resonanzlinie .ss-hero-plant--right {
    opacity: 0.8;
    translate: 0;
    animation: none;
  }
  .ss-resonanzlinie .rl-photo.rl-wait {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ss-resonanzlinie .rl-anim,
  .ss-resonanzlinie .rl-wait {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ss-resonanzlinie .rl-draw path {
    stroke-dashoffset: 0;
    transition: none;
  }
  .ss-resonanzlinie .rl-scroll-item {
    opacity: 1;
    transform: none;
  }
  .ss-resonanzlinie .rl-icon-motion,
  .ss-resonanzlinie .rl-copy-motion {
    opacity: 1;
    transform: none;
  }
  .ss-resonanzlinie .rl-offer-media-motion {
    opacity: 1;
    transform: none;
  }
  .ss-resonanzlinie .ss-hero-plant--right {
    opacity: 0.95;
    translate: 0;
    animation: none;
    transition: none;
  }
  /* .ss-resonanzlinie main .ss-hero__text::after {
    opacity: 0.62;
    translate: 0;
    animation: none;
    transition: none;
  } */
  .ss-resonanzlinie main .ss-hero::after,
  .ss-resonanzlinie main .ss-erwartung::before {
    animation: none;
    transform: none;
  }
  .ss-resonanzlinie main .ss-hero::before {
    opacity: 0.56;
    animation: none;
  }
}
