.about-home-band {
   --about-curve-radius-y: clamp(3.82rem, 9.4vw, 6.76rem);
   --about-curve-center-offset: clamp(-1.08rem, -1.5vw, -0.61rem);
   position: relative;
   overflow: hidden;
   isolation: isolate;
   background: var(--section-sand);
}

.about-home {
   position: relative;
   padding: clamp(1.75rem, 3vh, 2.5rem) clamp(1rem, 4vw, 2rem) clamp(2.25rem, 4vh, 3rem);
   background: var(--section-sand);
   overflow: hidden;
}

.about-home__inner {
   position: relative;
   z-index: 2;
   width: min(100%, 1180px);
   margin-inline: auto;
}

.page-home .about-home__inner {
   z-index: 1;
}

.about-home__content {
   max-width: 34rem;
}

.about-home__title {
   font-size: clamp(1.9rem, 4.5vw, 3rem);
   font-weight: 300;
   line-height: 1.12;
   letter-spacing: -0.02em;
   color: #3C3C3C;
   margin-bottom: 1.25rem;
}

.about-home__title .word {
   display: inline-block;
   white-space: nowrap;
}

.about-home__title .char {
   display: inline-block;
   will-change: transform, opacity;
}

.about-home__body p {
   font-size: clamp(1rem, 2vw, 1.125rem);
   line-height: 1.65;
   font-weight: 300;
   color: var(--color-text-muted);
}

.about-home__body p.about-home__lead {
   color: var(--color-accent, #C3A843);
   font-weight: 400;
}

.about-home__body p + p {
   margin-top: 1rem;
}

.about-home__link {
   display: inline-block;
   margin-top: 1.5rem;
   text-decoration: none;
   padding: 0.85rem 1.25rem;
   color: #3C3C3C;
   border: 1px solid var(--color-accent);
   border-radius: 999px;
   font-size: 0.78rem;
   font-weight: 500;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   transition: background-color 0.25s ease, color 0.25s ease;
}

.about-home__link:hover {
   background-color: var(--color-accent);
   color: #ffffff;
}

.about-home__reveal {
   opacity: 0;
   transform: translateY(24px);
}

.about-home__shadow {
   pointer-events: none;
   user-select: none;
   line-height: 0;
   display: flex;
   align-items: center;
   justify-content: flex-start;
}

.about-home__shadow img {
   display: block;
   width: auto;
   height: auto;
   object-fit: contain;
   object-position: left center;
}

.about-home-band__portrait {
   position: absolute;
   inset: 0;
   z-index: 3;
   pointer-events: none;
   user-select: none;
   -webkit-mask-image: radial-gradient(
      ellipse 56% var(--about-curve-radius-y) at 50% var(--about-curve-center-offset),
      transparent 99.15%,
      #000 100%
   );
   mask-image: radial-gradient(
      ellipse 56% var(--about-curve-radius-y) at 50% var(--about-curve-center-offset),
      transparent 99.15%,
      #000 100%
   );
}

.about-home__photo {
   position: absolute;
   inset: 0;
   margin: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
   -webkit-mask-image:
      linear-gradient(
         to bottom,
         #000 0,
         #000 calc(100% - var(--section-curve-height)),
         transparent calc(100% - var(--section-curve-height))
      ),
      radial-gradient(
         ellipse 56% var(--about-curve-radius-y) at 50% calc(100% - var(--section-curve-height) + var(--about-curve-center-offset)),
         #000 99.15%,
         transparent 100%
      );
   mask-image:
      linear-gradient(
         to bottom,
         #000 0,
         #000 calc(100% - var(--section-curve-height)),
         transparent calc(100% - var(--section-curve-height))
      ),
      radial-gradient(
         ellipse 56% var(--about-curve-radius-y) at 50% calc(100% - var(--section-curve-height) + var(--about-curve-center-offset)),
         #000 99.15%,
         transparent 100%
      );
   -webkit-mask-composite: source-over;
   mask-composite: add;
}

.about-home__photo img {
   position: absolute;
   inset: 0 0 0 auto;
   display: block;
   width: 50%;
   height: 100%;
   object-fit: contain;
   object-position: right center;
}

.page-home .about-home__cluster {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: clamp(5rem, 11vw, 6.5rem);
   width: 100%;
}

.page-home .about-home > .about-home__shadow {
   position: absolute;
   inset: 0;
   z-index: 0;
   opacity: 0.92;
   pointer-events: none;
   user-select: none;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   width: auto;
   margin: 0;
}

.page-home .about-home > .about-home__shadow img {
   display: block;
   width: min(280%, 82rem);
   max-width: none;
   max-height: 125%;
   margin-left: clamp(-12%, -6vw, -1rem);
   object-fit: contain;
   object-position: left center;
}

.page-home .home-cta {
   z-index: 1;
}

@media (min-width: 900px) and (max-width: 1279px) {
   .about-home__photo img {
      width: 44%;
   }
}

@media (min-width: 900px) {
   .page-home .about-home-band {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto minmax(clamp(24rem, 46vh, 34rem), auto) auto;
      position: relative;
      z-index: 2;
      isolation: auto;
      overflow: hidden;
      background: var(--section-sand);
   }

   .page-home .about-home-band > .section-curve {
      position: relative;
      z-index: 1;
      grid-column: 1;
      pointer-events: none;
   }

   .page-home .about-home-band > .section-curve:first-child {
      grid-row: 1;
   }

   .page-home .about-home-band > .section-curve:last-of-type {
      grid-row: 3;
   }

   .page-home .about-home-band > .about-home {
      grid-row: 2;
      grid-column: 1;
      z-index: 2;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 0;
      padding: clamp(2.75rem, 6vh, 4.5rem) 0 clamp(2.75rem, 6vh, 4.5rem) clamp(1.25rem, 5vw, 3rem);
      overflow: visible;
      background: transparent;
   }

   .page-home .about-home-band .about-home.about-home {
      overflow: visible;
   }

   .page-home .about-home-band .about-home__inner {
      width: 100%;
      max-width: none;
      padding: 0;
      margin-inline: 0;
   }

   .page-home .about-home__cluster {
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: clamp(2rem, 5vw, 4rem);
      max-width: min(100%, 1180px);
      width: 100%;
      margin-inline: auto;
      padding-inline: 0;
   }

   .page-home .about-home__content {
      flex: 1 1 18rem;
      max-width: 34rem;
      text-align: left;
      position: relative;
      z-index: 3;
   }

}

@media (max-width: 899px) {
   .about-home-band {
      position: relative;
      overflow: hidden;
      background: var(--section-sand);
   }

   /* Bögen bleiben im Fluss, Deko liegt darunter */
   .about-home-band > .section-curve {
      position: relative;
      z-index: 3;
   }

   .about-home-band > .section-curve:first-child {
      margin-bottom: -2px;
   }

   .about-home-band > .section-curve:last-of-type {
      margin-top: -2px;
   }

   .about-home-band > .about-home {
      position: relative;
      z-index: 2;
      margin-top: -1px;
      margin-bottom: -1px;
      padding-bottom: clamp(2.25rem, 4vh, 3rem);
   }

   .page-home .about-home__cluster {
      text-align: center;
   }

   .page-home .about-home__body {
      display: flex;
      flex-direction: column;
      align-items: center;
   }

   .page-home .about-home__body p {
      max-width: 32rem;
   }

   .page-home .about-home__link {
      align-self: center;
   }

   .page-home .about-home > .about-home__inner {
      order: 0;
   }

   .page-home .about-home > .about-home__shadow {
      position: absolute;
      left: 0;
      top: 50%;
      right: auto;
      bottom: auto;
      inset: auto;
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: min(52vh, 22rem);
      opacity: 0.88;
      transform: translateY(-50%);
      justify-content: flex-start;
   }

   .page-home .about-home > .about-home__shadow img {
      width: min(240vw, 52rem);
      max-width: none;
      max-height: min(52vh, 22rem);
      margin-left: clamp(-18vw, -4rem, -0.5rem);
      object-position: left top;
   }

   .page-home .about-home {
      min-height: auto;
      padding-bottom: clamp(34rem, 170vw, 46rem);
   }

   .about-home {
      display: flex;
      flex-direction: column;
      gap: clamp(1.25rem, 4vw, 2rem);
      min-height: auto;
      padding-bottom: clamp(1.5rem, 4vh, 2.5rem);
   }

   .about-home-band__portrait {
      top: auto;
      bottom: 0;
      height: clamp(34rem, 170vw, 46rem);
      -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%);
      mask-image: linear-gradient(to bottom, transparent 0, #000 24%);
   }

   .about-home__photo img {
      left: auto;
      right: 0;
      width: 100%;
      max-width: none;
      object-fit: cover;
      object-position: right bottom;
      -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
      mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
   }

   .about-home__content {
      max-width: none;
      margin-inline: auto;
      text-align: center;
   }

   .about-home__body {
      display: flex;
      flex-direction: column;
      align-items: center;
   }

   .about-home__body p {
      max-width: 32rem;
   }

   .about-home__link {
      align-self: center;
   }

}