:root {
  --font-headline: 'Rodney', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --color-deep-forest: #201f18;
  --color-forest-olive: #656833;
  --color-source-green: #add882;
  --color-calm-sand: #eae2d6;
  --color-hero-headline: #f5f6f8;
  --color-hero-lead: #ffffff;

  --container-padding: clamp(1.25rem, 4vw, 5rem);
  --header-height: 5.5rem;
  --site-header-pad-x: 1.5rem;
  --site-header-pad-top: 1.5rem;
  /* Keep hero offsets in sync with the fluid logo (296×193) */
  --site-logo-width: min(18rem, 42vw);
  --site-logo-height: calc(var(--site-logo-width) * 193 / 296);
  --site-header-gap-below: clamp(3.25rem, 5.5vw, 4.75rem);
  --site-header-clearance: calc(
    var(--site-header-pad-top) + var(--site-logo-height) +
      var(--site-header-gap-below)
  );

  --moments-r: min(max(52rem, 84vw), 1800px);
  --moments-arc-rise: clamp(3.5rem, 16.5vw, 19.5rem);
  --moments-arc-gap: clamp(4.5rem, 10vw, 9rem);

  /* Fine grain baked into painted surfaces (scrolls with the page) */
  --grain-image: url('/assets/images/textures/grain.png');
  --grain-size: 64px;

  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--color-deep-forest);
  --bs-body-bg: var(--color-calm-sand);
  --bs-link-color: var(--color-deep-forest);
  --bs-link-hover-color: var(--color-forest-olive);
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  /* Keep scrollbar space reserved so the page doesn't jump when the loader hides */
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

@media (min-width: 992px) {
  :root {
    --site-header-pad-top: 3rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --site-header-pad-x: 3rem;
  }
}

body {
  font-family: var(--font-body);
  overflow-x: hidden;
  background-color: var(--color-calm-sand);
  background-image: var(--grain-image);
  background-repeat: repeat;
  background-size: var(--grain-size);
  background-attachment: scroll;
}

/* Page load – pulsing circle */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background-color: var(--color-calm-sand);
  background-image: var(--grain-image);
  background-repeat: repeat;
  background-size: var(--grain-size);
  transition:
    opacity 0.4s ease,
    visibility 0.4s ease;
}

.page-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-loader__inner {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  padding: 1.5rem;
}

.page-loader__circle {
  width: clamp(3.5rem, 10vw, 5rem);
  height: clamp(3.5rem, 10vw, 5rem);
  border-radius: 50%;
  background-color: var(--color-source-green);
  animation: page-loader-pulse 1.35s ease-in-out infinite;
}

.page-loader__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--color-deep-forest);
}

@keyframes page-loader-pulse {
  0%,
  100% {
    transform: scale(0.88);
    opacity: 0.55;
  }

  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

/* Hero: nur Opacity per CSS, startet nach Page-Loader (body.is-page-ready) */
@keyframes hero-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.hero__title-wrap,
.hero__lead,
.about-hero__title,
.about-hero__portrait,
.about-hero__content,
.blog-hero__title,
.blog-hero__quote,
.blog-hero__intro,
.blog-hero__visual,
.contact-hero__title,
.contact-hero__lead,
.contact-hero__text,
.network-hero__title,
.network-hero__lead,
.network-hero__content,
.network-hero__visual,
.work-hero__primary,
.work-hero__portrait,
.work-hero__aside,
.offer-hero__content,
.offer-hero__aside,
.legal-hero__title {
  opacity: 0;
}

body.is-page-ready .hero__title-wrap,
body.is-page-ready .about-hero__title,
body.is-page-ready .blog-hero__title,
body.is-page-ready .contact-hero__title,
body.is-page-ready .network-hero__title,
body.is-page-ready .work-hero__primary,
body.is-page-ready .offer-hero__content,
body.is-page-ready .legal-hero__title {
  animation: hero-fade-in 0.8s ease-out both;
}

body.is-page-ready .about-hero__portrait,
body.is-page-ready .blog-hero__quote,
body.is-page-ready .contact-hero__lead,
body.is-page-ready .network-hero__lead,
body.is-page-ready .work-hero__portrait {
  animation: hero-fade-in 0.8s ease-out 80ms both;
}

body.is-page-ready .hero__lead,
body.is-page-ready .blog-hero__visual,
body.is-page-ready .network-hero__visual,
body.is-page-ready .work-hero__aside,
body.is-page-ready .offer-hero__aside {
  animation: hero-fade-in 0.8s ease-out 120ms both;
}

body.is-page-ready .about-hero__content,
body.is-page-ready .blog-hero__intro,
body.is-page-ready .contact-hero__text,
body.is-page-ready .network-hero__content {
  animation: hero-fade-in 0.8s ease-out 140ms both;
}

@media (prefers-reduced-motion: reduce) {
  .hero__title-wrap,
  .hero__lead,
  .about-hero__title,
  .about-hero__portrait,
  .about-hero__content,
  .blog-hero__title,
  .blog-hero__quote,
  .blog-hero__intro,
  .blog-hero__visual,
  .contact-hero__title,
  .contact-hero__lead,
  .contact-hero__text,
  .network-hero__title,
  .network-hero__lead,
  .network-hero__content,
  .network-hero__visual,
  .work-hero__primary,
  .work-hero__portrait,
  .work-hero__aside,
  .offer-hero__content,
  .offer-hero__aside,
  .legal-hero__title {
    opacity: 1;
    animation: none;
  }
}

/*
  Grain lives on background fills only (behind text/images),
  and scrolls with those surfaces — not fixed to the viewport.
*/
body,
.page-about,
.page-work,
.page-offer,
.page-network,
.page-blog,
.page-blog-article,
.page-contact,
.page-legal,
.legal-hero,
.legal-content,
.legal-end,
.page-404 .site-header,
.about-page-end,
.about-school--forest,
.about-top-wave,
.blog-article__arc-circle,
.blog-article__body,
.blog-author,
.blog-hero,
.blog-section--olive,
.blog-section--sand,
.blog-topics__arc-circle,
.contact-form-section,
.contact-hero__arc-circle,
.contact-intro,
.hero__panel,
.network-closing,
.network-footer,
.network-hero,
.network-person--green,
.network-person--olive,
.network-person--sand-filled,
.network-sand-wave,
.offer-cta,
.offer-dark,
.offer-end,
.offer-hero,
.offer-program--green,
.offer-program--olive,
.offer-sand-wave,
.offer-vision,
.offer-vision-define,
.offer-vision-way,
.offer-vision-way__arc-circle,
.offer-vision__arc-circle,
.page-blog .site-footer,
.page-blog-article .site-footer,
.page-contact .site-footer,
.section-cta,
.section-intro,
.section-moments__arc-circle,
.section-testimonials,
.sections-sand-wave,
.site-nav__content,
.site-nav__media,
.work-hero,
.work-sand,
.work-sand-wave,
.work-wise,
.work-wise-wrap {
  background-image: var(--grain-image);
  background-repeat: repeat;
  background-size: var(--grain-size);
  background-attachment: scroll;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-headline);
  font-weight: 400;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* Header */
.site-header {
  pointer-events: none;
  z-index: 20;
}

.site-header__logo,
.site-header__menu-btn {
  pointer-events: auto;
}

.site-header__logo {
  display: block;
  width: var(--site-logo-width);
}

.site-header__logo img {
  width: 100%;
  height: auto;
}

.site-header__bar {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.site-header__menu-btn,
.site-nav__close {
  width: 2rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.site-header__menu-btn {
  position: absolute;
  top: 0;
  right: 0;
}

.site-header__menu-btn img,
.site-nav__close img {
  display: block;
  width: 1.75rem;
  height: auto;
}

@media (min-width: 992px) {
  .site-header__menu-btn,
  .site-nav__close {
    width: 2.625rem;
    height: 2rem;
  }

  .site-header__menu-btn img,
  .site-nav__close img {
    width: auto;
  }
}

/* Full-page navigation – Figma „Burgermenü“ @ 1920 */
body.site-nav-open {
  overflow: hidden;
}

.site-nav {
  position: fixed;
  inset: 0;
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}

.site-nav.is-open {
  visibility: visible;
  opacity: 1;
}

.site-nav__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100dvh;
  height: 100%;
}

.site-nav__media {
  background-color: var(--color-deep-forest);
}

.site-nav__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.site-nav__content {
  position: relative;
  background-color: var(--color-forest-olive);
  color: var(--color-calm-sand);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.site-nav__logo {
  position: fixed;
  top: var(--site-header-pad-top);
  left: 50%;
  z-index: 101;
  display: block;
  width: var(--site-logo-width);
  transform: translateX(-50%);
  line-height: 0;
}

.site-nav__logo img {
  width: 100%;
  height: auto;
}

.site-nav__close {
  position: fixed;
  top: var(--site-header-pad-top);
  right: var(--site-header-pad-x);
  z-index: 101;
}

.site-nav__nav {
  position: absolute;
  top: calc(33.7% - 1.25rem);
  left: 15.52%;
  right: clamp(1.25rem, 4vw, 3rem);
  max-height: calc(100dvh - 8rem);
  padding: 0 0 2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.site-nav__list a {
  display: block;
  font-family: var(--font-headline);
  font-size: clamp(2.5rem, 4.167vw, 5rem);
  font-weight: 300;
  line-height: 1.2625;
  color: var(--color-calm-sand);
  transition: color 0.2s ease;
}

.site-nav__list li + li {
  margin-top: 0;
}

.site-nav__list a:hover,
.site-nav__list a:focus-visible {
  color: var(--color-source-green);
}

@media (max-width: 991.98px) {
  .site-nav__inner {
    grid-template-columns: 1fr;
  }

  .site-nav__media {
    display: none;
  }

  .site-nav__nav {
    top: clamp(10rem, calc(34vh - 1.25rem), 14.75rem);
    left: var(--site-header-pad-x);
    right: var(--site-header-pad-x);
    max-height: calc(100dvh - clamp(10rem, 34vh, 14.75rem) - 1.5rem);
  }
}

/* Very narrow phones only */
@media (max-width: 299.98px) {
  .site-nav__list a {
    font-size: clamp(1.45rem, 8vw, 1.85rem);
    line-height: 1.2;
  }
}

/* Desktop below 1080p height: smaller type, list sits lower */
@media (min-width: 992px) and (max-height: 1079.98px) {
  .site-nav__nav {
    top: clamp(16rem, 42vh, 26rem);
    max-height: calc(100dvh - clamp(16rem, 42vh, 26rem) - 1.5rem);
  }

  .site-nav__list a {
    font-size: clamp(2rem, 4.5vh, 3.75rem);
    line-height: 1.2;
  }
}

@media (min-width: 1400px) {
  .site-nav__nav {
    top: 21.5625rem;
    left: 9.3125rem;
  }

  .site-nav__list a {
    font-size: 5rem;
    line-height: 1.2625;
  }
}

@media (min-width: 1400px) and (max-height: 1079.98px) {
  .site-nav__nav {
    top: clamp(18rem, 44vh, 28rem);
    left: 9.3125rem;
  }

  .site-nav__list a {
    font-size: clamp(2.25rem, 5vh, 4rem);
    line-height: 1.2;
  }
}

/* Hero */
.hero {
  position: relative;
  height: 100svh;
  min-height: 36rem;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
}

.hero__panel {
  position: absolute;
  inset: 0;
  background-color: var(--color-forest-olive);
}

.hero__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center top;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.hero__title-wrap {
  position: absolute;
  top: 54.5%;
  left: 53.2%;
  transform: translate(-50%, -50%);
  width: min(49.4vw, 59.2rem);
  max-width: calc(100% - 2 * var(--container-padding));
}

.hero__title {
  margin: 0;
  font-size: 2.25rem;
  line-height: 1;
  letter-spacing: -0.015em;
  text-align: left;
  color: var(--color-hero-headline);
}

.hero__title em {
  font-style: italic;
}

.hero__lead {
  position: absolute;
  left: 58.7%;
  bottom: 5.5%;
  width: min(30.6vw, 36.75rem);
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.4rem;
  letter-spacing: 0.025em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--color-hero-lead);
}

/* Hero typography – Bootstrap breakpoints, Figma values at xxl (≥1400px / 1920 design) */
@media (min-width: 576px) {
  .hero__title {
    font-size: 2.5rem;
  }
}

@media (min-width: 768px) {
  .hero__title {
    font-size: 3rem;
  }

  .hero__lead {
    font-size: 1.125rem;
  }
}

@media (min-width: 992px) {
  .hero__title {
    font-size: 5rem;
  }

  .hero__lead {
    font-size: 1.5rem;
    /* Larger than 2rem type – keep readable leading */
    line-height: 1.27;
  }

  .hero__title-wrap {
    width: min(72vw, 52rem);
    max-width: calc(100% - 2 * var(--container-padding));
  }
}

@media (min-width: 1200px) {
  .hero__title {
    font-size: 6.25rem;
  }

  .hero__lead {
    font-size: 1.875rem;
  }

  .hero__title-wrap {
    width: min(68vw, 56rem);
  }
}

@media (min-width: 1400px) {
  .hero__title {
    font-size: 7.5rem; /* Figma: 120px */
  }

  .hero__lead {
    font-size: 2.3125rem; /* Figma: 37px */
    letter-spacing: 0.04625rem; /* Figma: 0.74px */
  }

  .hero__title-wrap {
    width: 59.2rem; /* Figma: 949px */
  }

  .hero__lead {
    width: 36.75rem; /* Figma: 588px */
  }
}

/* Mobile/tablet: image above, olive text panel below; freeze at 600px when shorter */
@media (max-width: 991.98px) {
  .hero {
    width: 100%;
    height: 100svh;
    min-height: 600px;
    max-height: none;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    background-color: var(--color-forest-olive);
  }

  .hero__bg {
    position: relative;
    inset: auto;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
  }

  .hero__panel {
    display: none;
  }

  .hero__media {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    z-index: 0;
  }

  .hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  .hero__overlay {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: clamp(0.85rem, 2.5vw, 1.25rem);
    padding: clamp(1.5rem, 4.5vw, 2.5rem) var(--container-padding)
      clamp(1.75rem, 5vw, 2.75rem);
    background-color: var(--color-forest-olive);
  }

  .hero__title-wrap {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: none;
    padding: 0;
  }

  .hero__title {
    font-size: clamp(2.1rem, 8.5vw, 3.25rem);
    color: var(--color-hero-headline);
  }

  .hero__lead {
    position: static;
    left: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    color: var(--color-hero-lead);
  }

  .hero__lead br {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .hero__lead {
    font-size: 0.9375rem;
  }
}

@media (max-height: 720px) and (min-width: 992px) {
  .hero__title {
    font-size: 4rem;
  }

  .hero__title-wrap {
    top: 52%;
  }

  .hero__lead {
    bottom: 4%;
  }
}

/* Wer ich bin – Hero (Figma „Hero Alternative“ @ 1920×1388, Pfad 242) */
.page-about {
  --about-life-top: clamp(4rem, 8vw, 10rem);
  --about-section-between: clamp(5rem, 8vw, 8rem);
  --about-school-bottom: clamp(1.5rem, 3vw, 3rem);

  background-color: var(--color-calm-sand);
}

.about-top-wave {
  position: relative;
  background-color: var(--color-calm-sand);
  /* Clip green wave at life-section bottom (also fixes overflow-x/y quirk) */
  overflow: hidden;
}

.about-hero {
  position: relative;
  z-index: 2;
  min-height: clamp(44rem, 72.3vw, 86.75rem);
  padding-bottom: clamp(1rem, 2vw, 3rem);
  overflow: visible;
  color: var(--color-deep-forest);
  background-color: transparent;
}

.about-hero__inner {
  position: relative;
  z-index: 1;
  min-height: inherit;
}

.about-hero__title {
  position: absolute;
  top: clamp(9rem, 25.2vw, 21.875rem);
  left: var(--container-padding);
  z-index: 2;
  margin: 0;
  max-width: min(34vw, 33.6875rem);
  font-family: var(--font-headline);
  font-size: clamp(2.75rem, 6.4vw, 5rem);
  font-weight: 300;
  line-height: 1.075;
}

.about-hero__portrait {
  position: absolute;
  top: clamp(18rem, 45.4vw, 39.375rem);
  left: clamp(1.25rem, 13.6vw, 16.3125rem);
  z-index: 2;
  width: min(42vw, 30.8125rem);
  margin: 0;
}

.about-hero__portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 493 / 596;
  object-fit: cover;
  object-position: center;
}

.about-hero__content {
  position: absolute;
  top: clamp(14rem, 38vw, 33rem);
  left: clamp(1.25rem, 48.2vw, 57.8125rem);
  z-index: 2;
  width: min(42vw, 47.75rem);
  max-width: calc(100% - 2 * var(--container-padding));
  font-size: 1.625rem;
  font-weight: 300;
  line-height: 2rem;
}

.about-hero__content p {
  margin: 0;
}

.about-hero__content p + p {
  margin-top: 1.5rem;
}

.about-hero__content strong {
  font-weight: 500;
}

.about-hero__illustration {
  position: absolute;
  top: clamp(31rem, 73.5vw, 64.5rem);
  left: clamp(12rem, 74.7vw, 89.625rem);
  z-index: 2;
  width: min(24vw, 23.5rem);
  height: auto;
}

.about-hero__wave {
  --about-wave-left: -9.140625vw;
  --about-wave-width: 197.061vw;
  --about-wave-top: 62.1875vw;
  --about-wave-span: clamp(88rem, 271vw, 325.1875rem);

  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.about-hero__wave-circle {
  position: absolute;
  top: var(--about-wave-top);
  left: var(--about-wave-left);
  width: var(--about-wave-width);
  height: auto;
  max-width: none;
  aspect-ratio: 3783.58 / 4009.32;
}

.page-about .about-work-sand {
  position: relative;
  z-index: 1;
  background-color: transparent;
  background-image: none;
  overflow: visible;
}

.page-about .about-work-sand > .work-section.about-life .work-section__inner {
  padding-top: var(--about-life-top);
  padding-bottom: var(--about-section-between);
}

.about-life .work-section__inner {
  padding-top: var(--about-life-top);
  padding-bottom: var(--about-section-between);
}

.about-life__stage {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.about-life .work-section__content {
  max-width: 55.75rem;
  min-width: 0;
}

.about-life__intro p + p {
  margin-top: 0.25rem;
}

.about-life__intro + .work-section__text {
  margin-top: 0;
}

.about-life__photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center top;
}

.about-school {
  background-color: transparent;
}

.about-school--forest {
  position: relative;
  z-index: 3;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--color-forest-olive);
  color: var(--color-calm-sand);
}

.about-school--forest .about-school__title,
.about-school--forest .about-school__text,
.about-school--forest .work-text-link {
  color: var(--color-calm-sand);
}

.about-school--forest .work-accordion__panel a:not(.btn):hover,
.about-school--forest .work-accordion__panel a:not(.btn):focus-visible {
  color: var(--color-source-green);
}

.about-school--forest .btn-pill {
  border-color: var(--color-calm-sand);
  color: var(--color-calm-sand);
}

.about-school--forest .btn-pill:hover,
.about-school--forest .btn-pill:focus-visible {
  background-color: var(--color-calm-sand);
  border-color: var(--color-calm-sand);
  color: var(--color-forest-olive);
}

.about-school--forest .about-school__media {
  margin-top: 0;
}

.about-school--forest .about-school__inner {
  padding: var(--about-section-between) var(--container-padding)
    var(--about-section-between);
}

.about-school__inner {
  padding: var(--about-section-between) var(--container-padding)
    var(--about-school-bottom);
}

.about-school__layout {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
  max-width: 100%;
}

.about-school__content {
  min-width: 0;
}

.about-school__photo,
.about-school__illustration {
  display: block;
  width: 100%;
  height: auto;
}

.about-school__media--illustration {
  width: 100%;
  background-color: transparent;
  padding: 0;
}

.about-school__illustration {
  width: 100%;
  max-width: none;
}

.about-school__title {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  font-family: var(--font-headline);
  font-size: clamp(1.75rem, 3.5vw, 3.75rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.about-school__title span {
  display: block;
}

.about-school__title em {
  font-style: italic;
}

.about-school__title a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.about-school__title a:hover,
.about-school__title a:focus-visible {
  color: var(--color-forest-olive);
}

.about-school__text {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
}

.about-school__text p {
  margin: 0;
}

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

.about-quotes__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: clamp(36rem, 58vw, 70.3125rem);
  padding: clamp(4rem, 8vw, 7rem) var(--container-padding);
}

.about-quotes__mark {
  position: absolute;
  top: clamp(2rem, 5vw, 4.5rem);
  left: var(--container-padding);
  z-index: 2;
  font-family: var(--font-headline);
  font-size: clamp(5rem, 14vw, 11.5rem);
  font-weight: 400;
  line-height: 0.85;
  color: #fff;
  pointer-events: none;
  user-select: none;
}

.about-quotes__photo {
  object-position: center 35%;
}

.about-quotes__photo--44 {
  object-position: 30% center;
}

.about-quotes__photo--71 {
  object-position: center 35%;
}

.about-quotes__spacer {
  display: none;
}

.about-quotes__quote {
  margin: 0 auto;
  max-width: 83.25rem;
  padding: 0;
  border: 0;
  font-family: var(--font-headline);
  font-size: clamp(2rem, 4vw, 4.25rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-align: center;
  color: #fff;
}

.about-quotes__quote span {
  display: block;
}

.about-quotes__quote em {
  font-style: italic;
}

.about-school__text .work-accordion {
  margin-top: 0;
  padding-top: 1.5rem;
}

.about-network__logo-link {
  display: inline-flex;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.about-network__logo-link--wgc {
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.about-network__logo {
  display: block;
  width: auto;
  max-width: min(100%, 24rem);
  height: auto;
}

.about-network__logo--wgc {
  max-width: min(100%, 14rem);
}

.about-network__visual {
  width: min(100%, 20rem);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
}

.about-network__portrait {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.about-network__content {
  min-width: 0;
}

.about-network__block + .about-network__block {
  margin-top: clamp(3rem, 6vw, 5rem);
}

.about-network__block.about-network__block--wgc {
  margin-top: 3.125rem;
}

.about-network__wgc-title {
  margin: 0 0 1rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0;
}

.about-network__wgc-title span {
  display: block;
}

.about-network__wgc-title em {
  font-style: italic;
}

.about-network__wgc-text {
  margin: 0;
}

.about-network__wgc-text p {
  margin: 0;
}

.about-network__text p {
  margin: 0;
}

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

.about-page-end {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: var(--color-calm-sand);
  color: var(--color-deep-forest);
}

.about-page-end .about-network {
  position: relative;
  z-index: 1;
}

.about-page-end .about-network .section-group__inner {
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.page-about .work-section__text a:not(.btn),
.page-about .section-group__text a:not(.btn) {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.page-about .work-section__text a:not(.btn):hover,
.page-about .work-section__text a:not(.btn):focus-visible,
.page-about .section-group__text a:not(.btn):hover,
.page-about .section-group__text a:not(.btn):focus-visible {
  color: var(--color-forest-olive);
}

/* Alte Mobile-Hero-Regeln entfallen – siehe max-width: 1399.98px / 991.98px unten */

@media (min-width: 768px) {
  .about-school__text {
    font-size: 1.125rem;
  }

  .about-network__text,
  .about-network__wgc-text,
  .about-network__wgc-title {
    font-size: 1.125rem;
    line-height: 1.4rem;
  }
}

@media (min-width: 992px) {
  .about-life__stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 31rem);
    column-gap: clamp(3rem, 11vw, 13.25rem);
  }

  .about-life__media {
    padding-top: clamp(2rem, 5vw, 6rem);
    justify-self: end;
  }

  .about-life__photo {
    max-width: none;
  }

  .page-about
    .about-life
    .work-accordion__details[open]
    .work-accordion__panel {
    padding-bottom: clamp(10rem, 14vw, 18rem);
  }

  .page-about
    .about-school
    .work-accordion__details[open]
    .work-accordion__panel {
    padding-bottom: 3.125rem;
  }

  .about-school__layout {
    grid-template-columns: minmax(0, 44rem) minmax(0, 1fr);
    column-gap: clamp(1rem, 2.5vw, 2.5rem);
    width: 100%;
  }

  .about-school__content {
    max-width: none;
    width: 100%;
    justify-self: stretch;
  }

  .about-school__title {
    font-size: 2.75rem;
  }

  .about-school--forest .about-school__media {
    /* Cropped SVG: keep previous visible art size (~74% of old 44rem box) */
    width: min(100%, 28rem);
    max-width: 28rem;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
  }

  .about-school--forest .about-school__layout {
    grid-template-columns: minmax(0, 28rem) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 4vw, 4rem);
  }

  .about-school--forest .about-school__content {
    max-width: none;
    width: 100%;
    padding-left: clamp(1.5rem, 2.5vw, 2.5rem);
    justify-self: stretch;
  }

  .about-school__media {
    width: 100%;
    padding-top: 0;
    margin-top: clamp(-6rem, -8vw, -12rem);
    margin-left: 0;
    justify-self: start;
  }

  .about-school__illustration {
    width: 94%;
    max-width: none;
    margin-left: clamp(0.75rem, 1.5vw, 1.5rem);
  }

  .about-network__visual {
    width: min(100%, 28rem);
    margin: 0;
    justify-self: start;
  }

  .about-network__content {
    max-width: none;
  }
}

/* Wer ich bin – responsive Zwischenstufen; Desktop ab 1400 bleibt unverändert */
@media (max-width: 1399.98px) {
  .about-top-wave {
    overflow-x: clip;
  }

  .about-hero {
    min-height: auto;
    padding-bottom: 0;
  }

  .about-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 3rem);
    min-height: 0;
    padding: var(--site-header-clearance) var(--container-padding)
      clamp(4rem, 10vw, 7rem);
  }

  .about-hero__title,
  .about-hero__portrait,
  .about-hero__content,
  .about-hero__illustration {
    position: static;
    top: auto;
    left: auto;
    max-width: 100%;
  }

  .about-hero__title {
    width: 100%;
    font-size: clamp(3rem, 7vw, 5rem);
  }

  .about-hero__portrait {
    width: min(100%, 30.8125rem);
    justify-self: start;
  }

  .about-hero__content {
    width: min(100%, 47.75rem);
    font-size: 1.125rem;
    line-height: 1.4rem;
  }

  .about-hero__illustration {
    display: block;
    width: min(42vw, 19rem);
    height: auto;
    justify-self: end;
    margin-top: clamp(2rem, 4.5vw, 3.5rem);
    margin-right: clamp(0rem, 6vw, 5rem);
  }

  /* Grüner Kreis: zwischen Hero-Illu und „Mein Leben…“ bis zum Sektionsende */
  .about-hero__wave {
    position: absolute;
    inset: 0;
    height: auto;
    overflow: hidden;
    z-index: 0;
  }

  .about-hero__wave-circle {
    top: 48%;
    right: auto;
    bottom: -8%;
    left: 50%;
    width: 230vw;
    height: auto;
    min-height: calc(52% + 8%);
    aspect-ratio: auto;
    transform: translateX(-48%);
    object-fit: cover;
    object-position: center top;
  }

  .about-hero,
  .about-work-sand {
    position: relative;
    z-index: 1;
  }

  .page-about {
    --about-life-top: clamp(1.5rem, 4vw, 3rem);
  }

  .about-hero {
    padding-bottom: 0;
  }

  .about-life__stage {
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 36%);
    column-gap: clamp(2.5rem, 6vw, 6rem);
  }

  .about-life__media {
    width: 100%;
    max-width: 31rem;
    min-width: 0;
  }

  .about-life__photo {
    max-width: 100%;
  }

  .about-school--forest .about-school__layout {
    grid-template-columns: minmax(15rem, 38%) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 4rem);
  }

  .about-school--forest .about-school__media {
    width: 100%;
    max-width: 26rem;
    margin: 0;
  }

  .about-school--forest .about-school__illustration {
    width: 100%;
    margin-left: 0;
  }

  .about-school--forest .about-school__content {
    min-width: 0;
    padding-left: 0;
  }

  .about-quotes__quote {
    max-width: min(100%, 68rem);
    overflow-wrap: break-word;
  }

  .about-quotes__quote span {
    display: inline;
  }

  .about-network__layout {
    grid-template-columns: minmax(15rem, 36%) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 6vw, 6rem);
  }

  .about-network__visual {
    width: min(100%, 28rem);
  }
}

@media (max-width: 991.98px) {
  .about-hero__inner {
    display: grid;
    gap: clamp(1.5rem, 5vw, 2.5rem);
    padding: var(--site-header-clearance) var(--container-padding)
      clamp(4.5rem, 12vw, 7.5rem);
  }

  .about-hero__title {
    font-size: clamp(2.5rem, 10vw, 3.5rem);
  }

  .about-hero__portrait {
    width: min(100%, 24rem);
    margin: 0;
    justify-self: center;
  }

  .about-hero__content {
    width: 100%;
    font-size: 0.9375rem;
    line-height: 1.4rem;
  }

  .about-hero__illustration {
    display: block;
    width: min(68vw, 18rem);
    justify-self: center;
    margin: clamp(2.5rem, 6.5vw, 3.75rem) 0 0;
  }

  .about-hero__wave-circle {
    top: 52%;
    width: 260vw;
  }

  .page-about {
    --about-life-top: clamp(1.25rem, 4vw, 2.25rem);
  }

  .about-life__stage {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(3rem, 9vw, 5rem);
  }

  .about-life__media {
    width: min(100%, 24rem);
    padding-top: 0;
    justify-self: center;
  }

  .about-life .work-section__title {
    font-size: clamp(2rem, 7.5vw, 3rem);
  }

  /* Quote: mittig, etwas mehr Raum um den Text */
  .about-quotes.section-wilderness {
    display: flex;
    flex-direction: column;
    min-height: clamp(32rem, 88vw, 42rem);
  }

  .about-quotes .section-wilderness__content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }

  .about-quotes__inner {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    padding-block: clamp(3.5rem, 10vw, 5.5rem);
  }

  .about-quotes__spacer {
    display: none;
  }

  .about-quotes__quote {
    font-size: clamp(1.75rem, 7vw, 3rem);
    line-height: 1.14;
  }

  /* School: mehr Luft über dem Titel; Illu etwas kleiner, Abstand oben/unten */
  .about-school--forest .about-school__inner {
    padding: clamp(4.5rem, 12vw, 7rem) var(--container-padding)
      clamp(2.5rem, 7vw, 4rem);
  }

  .about-school--forest .about-school__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .about-school--forest .about-school__content {
    order: 1;
  }

  .about-school--forest .about-school__media {
    order: 2;
    width: min(70vw, 22rem);
    margin: 0.75rem auto 1.25rem;
    justify-self: center;
  }

  .about-school--forest .about-school__illustration {
    width: 100%;
    height: auto;
    display: block;
  }

  .about-school__title {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .about-network__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(3rem, 10vw, 5rem);
  }

  .about-network__visual {
    width: min(76vw, 24rem);
    margin: 0 auto;
    justify-self: center;
  }

  .about-network__logo {
    max-width: min(100%, 19rem);
  }
}

@media (max-width: 575.98px) {
  .about-hero__illustration {
    width: min(74vw, 19rem);
    margin-top: clamp(2.75rem, 7.5vw, 3.75rem);
  }

  .about-hero__wave-circle {
    top: 54%;
    width: 290vw;
  }

  .about-life__intro p + p {
    margin-top: 0.5rem;
  }

  .about-school--forest .about-school__inner {
    padding-top: clamp(4rem, 14vw, 6rem);
    padding-bottom: clamp(2.25rem, 8vw, 3.5rem);
  }

  .about-school--forest .about-school__media {
    width: min(72vw, 18rem);
    max-width: 18rem;
    margin: 1rem auto 1.5rem;
  }

  .about-school--forest .about-school__layout {
    gap: 1.75rem;
  }

  .about-quotes.section-wilderness {
    min-height: clamp(30rem, 100vw, 38rem);
  }

  .about-quotes__inner {
    padding-block: clamp(3rem, 12vw, 4.5rem);
  }

  .about-network__logo-link,
  .about-network__logo-link--wgc {
    display: flex;
    justify-content: flex-start;
    max-width: 100%;
  }

  .about-network__logo {
    max-width: min(100%, 17rem);
  }

  .about-network__logo--wgc {
    max-width: min(100%, 12rem);
  }

  .about-network__wgc-title {
    font-size: 1rem;
  }
}

/* School-Illu + Abstände: Tablet */
@media (min-width: 576px) and (max-width: 991.98px) {
  .about-school--forest .about-school__inner {
    padding-top: clamp(5rem, 10vw, 7.5rem);
    padding-bottom: clamp(2.5rem, 6vw, 3.75rem);
  }

  .about-school--forest .about-school__layout {
    gap: 2.25rem;
  }

  .about-school--forest .about-school__media {
    width: min(52vw, 20rem);
    max-width: 20rem;
    margin: 1rem auto 1.5rem;
    justify-self: center;
  }

  .about-quotes.section-wilderness {
    min-height: clamp(34rem, 70vw, 42rem);
  }
}

@media (min-width: 1400px) {
  .about-hero__content {
    font-size: 1.625rem;
    line-height: 2rem;
  }

  .about-hero__wave {
    --about-wave-left: -10.96875rem;
    --about-wave-width: 236.473625rem;
    --about-wave-top: 74.625rem;
    --about-wave-span: 325.1875rem;
    inset: 0;
    height: auto;
    overflow: hidden;
  }

  .page-about .about-work-sand > .work-section.about-life .work-section__inner,
  .about-life .work-section__inner {
    padding-top: 10rem;
    padding-bottom: 9rem;
  }

  .about-life__stage {
    grid-template-columns: minmax(0, 55.75rem) 31rem;
    column-gap: 11rem;
    justify-content: start;
  }

  .page-about .about-life .work-section__media--portrait {
    width: 31rem;
    max-width: 31rem;
  }

  .page-about
    .about-life
    .work-accordion__details[open]
    .work-accordion__panel {
    padding-bottom: 20rem;
  }

  .page-about
    .about-school
    .work-accordion__details[open]
    .work-accordion__panel {
    padding-bottom: 3.125rem;
  }

  .about-school__inner {
    padding-top: 9rem;
    padding-bottom: 1.5rem;
  }

  .about-school__layout {
    grid-template-columns: 50rem minmax(0, 1fr);
    column-gap: 1.5rem;
    justify-content: start;
    width: 100%;
  }

  .about-school__content {
    max-width: none;
    width: 100%;
    justify-self: stretch;
    padding-right: 0;
  }

  .about-school__media {
    width: 47rem;
    max-width: 100%;
    padding-top: 0;
    margin-top: -24rem;
    margin-left: -3.5rem;
  }

  .about-school__illustration {
    width: 100%;
    max-width: none;
    margin-left: 2rem;
  }

  .about-school--forest .about-school__inner {
    padding: 9rem var(--container-padding) 9rem;
  }

  .about-school--forest .about-school__layout {
    grid-template-columns: 32rem minmax(0, 1fr);
    column-gap: 5rem;
    justify-content: start;
  }

  .about-school--forest .about-school__media {
    /* Match previous visible art size after viewBox crop */
    width: 32rem;
    max-width: 32rem;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
  }

  .about-school--forest .about-school__illustration {
    width: 100%;
    margin-left: 0;
  }

  .about-school--forest .about-school__content {
    max-width: none;
    width: 100%;
    padding-left: 3.5rem;
    justify-self: stretch;
  }

  .about-school__title {
    margin-bottom: 2.5rem;
    font-size: 3.75rem;
    line-height: 4.0625rem;
  }

  .about-school__text {
    max-width: none;
    width: 100%;
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .about-school .work-text-link {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .about-quotes__quote {
    font-size: 4.25rem;
    line-height: 1.08;
  }

  .about-network__layout {
    grid-template-columns: 32rem minmax(0, 1fr);
    column-gap: clamp(3rem, 6vw, 9rem);
    align-items: start;
  }

  .about-network__visual {
    width: 32rem;
    margin-left: 2rem;
  }

  .about-network__content {
    max-width: none;
    width: 100%;
  }

  .about-network__text,
  .about-network__wgc-title,
  .about-network__wgc-text {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .about-network__logo {
    max-width: 28rem;
  }

  .about-network__logo--wgc {
    max-width: 15rem;
  }

  .about-page-end .about-network .section-group__inner {
    padding-bottom: 7rem;
  }
}

/*
  Wer ich bin – Zwischenbreite 1400–1700:
  Absolute Figma-Positionen (für 1920) überlappen hier – Abstand + Illu tiefer.
*/
@media (min-width: 1400px) and (max-width: 1699.98px) {
  .about-hero {
    min-height: clamp(78rem, 94vw, 86rem);
    padding-bottom: clamp(0.5rem, 1vw, 1.25rem);
  }

  .about-hero__title {
    top: clamp(11rem, 24vw, 19rem);
    max-width: min(30vw, 28rem);
    font-size: clamp(2.75rem, 5vw, 4.25rem);
  }

  .about-hero__portrait {
    top: clamp(23rem, 42vw, 38rem);
    left: clamp(1.5rem, 9vw, 10rem);
    width: min(30vw, 26rem);
  }

  .about-hero__content {
    top: clamp(18rem, 36vw, 32rem);
    left: clamp(34rem, 42vw, 44rem);
    width: min(40vw, 38rem);
    font-size: 1.625rem;
    line-height: 2rem;
  }

  .about-hero__illustration {
    top: clamp(54rem, 68vw, 66rem);
    left: auto;
    right: clamp(2rem, 5vw, 4.5rem);
    width: min(24vw, 22rem);
  }

  .about-hero__wave {
    --about-wave-left: -8rem;
    --about-wave-width: 200rem;
    --about-wave-top: clamp(56rem, 68vw, 70rem);
  }

  .page-about .about-work-sand > .work-section.about-life .work-section__inner,
  .about-life .work-section__inner {
    padding-top: clamp(1rem, 2.5vw, 2.25rem);
    padding-bottom: clamp(6rem, 8vw, 9rem);
  }

  .about-life__stage {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem);
    column-gap: clamp(3rem, 5vw, 7rem);
  }

  .page-about .about-life .work-section__media--portrait {
    width: 100%;
    max-width: 26rem;
  }
}

/* Wie ich arbeite – Hero (Figma @ 1920×1443, gleiches Muster wie section-intro) */
.page-work {
  background-color: var(--color-calm-sand);
}

.work-hero {
  position: relative;
  z-index: 2;
  overflow: visible;
  color: var(--color-calm-sand);
  background-color: var(--color-forest-olive);
}

.work-hero__inner {
  --work-hero-text-max: 47.5rem;
  padding: clamp(10rem, 24vw, 13rem) var(--container-padding) 0;
  min-height: clamp(36rem, 75.15625vw, 90.1875rem);
}

.work-hero__layout {
  display: grid;
  gap: 2.5rem;
}

.work-hero__primary {
  display: grid;
  gap: 2rem;
}

.work-hero__title {
  margin: 0;
  max-width: 37.3125rem;
  font-family: var(--font-headline);
  font-size: 2.25rem;
  font-weight: 300;
  line-height: 1.075;
}

.work-hero__title span {
  display: block;
}

.work-hero__title em {
  font-style: italic;
  font-weight: 300;
}

.work-hero__portrait {
  margin: 0;
  width: min(100%, 20rem);
  justify-self: center;
}

.work-hero__portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 493 / 596;
  object-fit: cover;
  object-position: 78% 48%;
}

.work-hero__aside {
  display: grid;
  gap: 2rem;
  min-width: 0;
}

.work-hero__content {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
  min-width: 0;
}

.work-hero__content p {
  margin: 0;
}

.work-hero__content p + p {
  margin-top: 1.5rem;
}

.work-hero__content strong {
  font-weight: 500;
}

.work-hero__illustration-wrap {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  z-index: 5;
  pointer-events: none;
}

.work-hero__illustration {
  display: block;
  width: min(100%, 8.5rem);
  height: auto;
}

@media (min-width: 576px) {
  .work-hero__title {
    font-size: 2.5rem;
  }
}

@media (min-width: 768px) {
  .work-hero__title {
    font-size: 3rem;
  }

  .work-hero__content {
    font-size: 1.125rem;
  }

  .work-hero__portrait {
    width: min(100%, 26rem);
  }

  .work-hero__illustration {
    width: min(100%, 10rem);
  }
}

/* Unter 992: Original-Positionierung / Abstände, Logo-Clearance oben */
@media (max-width: 991.98px) {
  .work-hero__inner {
    padding-top: var(--site-header-clearance);
  }

  .work-hero__primary {
    gap: 2rem;
  }

  .work-hero__portrait {
    justify-self: center;
    margin: 0;
  }
}

/* 992–1199: gestapelt (aktuelles gutes Zwischenlayout) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .work-hero__inner {
    padding: var(--site-header-clearance) var(--container-padding)
      clamp(3rem, 8vw, 5rem);
    min-height: 0;
  }

  .work-hero__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-hero__primary {
    gap: clamp(1.75rem, 4vw, 2.5rem);
  }

  .work-hero__aside {
    width: 100%;
    max-width: none;
  }

  .work-hero__portrait {
    justify-self: start;
    margin: 0;
    width: min(100%, 28rem);
  }

  .work-hero__title {
    font-size: clamp(3.25rem, 5.5vw, 4.25rem);
  }

  .work-hero__content {
    font-size: 1.125rem;
    line-height: 1.4rem;
  }
}

@media (min-width: 1200px) {
  .work-hero__inner {
    padding-top: clamp(10rem, 24vw, 13rem);
    min-height: clamp(42rem, 75.15625vw, 90.1875rem);
  }

  .work-hero__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 4rem);
    align-items: stretch;
    min-height: calc(
      clamp(42rem, 75.15625vw, 90.1875rem) - clamp(10rem, 24vw, 13rem)
    );
  }

  .work-hero__primary {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: clamp(2.5rem, 5vw, 4rem);
    min-height: 100%;
    min-width: 0;
    grid-column: 1;
    grid-row: 1 / -1;
    padding-top: clamp(2rem, 4vw, 4rem);
  }

  .work-hero__title {
    font-size: clamp(3.5rem, 4.2vw, 5rem);
    max-width: none;
  }

  .work-hero__title span {
    white-space: nowrap;
  }

  .work-hero__portrait {
    width: 100%;
    max-width: min(100%, 30.8125rem);
    align-self: flex-start;
    margin: clamp(1.5rem, 3vw, 4.5rem) 0 0 clamp(0rem, 3vw, 9.5rem);
  }

  .work-hero__aside {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
    width: 100%;
    max-width: min(100%, var(--work-hero-text-max));
    grid-column: 2;
    grid-row: 1 / -1;
    justify-self: end;
    margin-right: 0;
    padding-top: clamp(3rem, 6vw, 8rem);
  }

  .work-hero__content {
    font-size: 1.625rem;
    line-height: 2rem;
    width: 100%;
  }

  .work-hero__illustration-wrap {
    align-self: stretch;
    width: 100%;
    margin-top: auto;
    transform: translateY(clamp(0.375rem, 0.75vw, 0.75rem));
  }

  .work-hero__illustration {
    width: 13.8125rem;
    margin-left: auto;
  }
}

@media (min-width: 1400px) {
  .work-hero__inner {
    min-height: 90.1875rem;
    padding: 14rem 5rem 0;
  }

  .work-hero__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 4rem;
    justify-content: start;
    min-height: calc(90.1875rem - 14rem);
  }

  .work-hero__primary {
    padding-top: 7rem;
    gap: 4rem;
  }

  .work-hero__title {
    font-size: 5rem;
    line-height: 1.075;
  }

  /* Kein großer Links-Shift bei ~1400–1600 – sonst läuft das Bild in den Text */
  .work-hero__portrait {
    max-width: min(100%, 30.8125rem);
    margin: 4.5rem 0 0 clamp(0rem, 2vw, 2.5rem);
  }

  .work-hero__aside {
    max-width: min(100%, var(--work-hero-text-max));
    margin-right: clamp(0rem, 2vw, 3rem);
    padding-top: 16rem;
  }

  .work-hero__content {
    font-size: 1.625rem;
    line-height: 2rem;
  }

  .work-hero__illustration-wrap {
    transform: translateY(0.75rem);
  }

  .work-hero__illustration {
    width: 13.8125rem;
  }
}

@media (min-width: 1600px) {
  .work-hero__content {
    font-size: 1.625rem;
    line-height: 2rem;
  }

  .work-hero__portrait {
    margin: 4.5rem 0 0 clamp(2rem, 4vw, 6rem);
  }
}

@media (min-width: 1700px) {
  .work-hero__portrait {
    margin: 4.5rem 0 0 9.5rem;
  }

  .work-hero__aside {
    margin-right: 3rem;
  }
}

/* Wie ich arbeite – Sand-Sektionen (Figma ab y=1443) */
.work-sand {
  position: relative;
  z-index: 1;
  background-color: var(--color-calm-sand);
  color: var(--color-deep-forest);
}

/* Grüner Kreis – gleiches Muster wie .sections-sand-wave auf der Startseite */
.work-sand-wave {
  --work-wave-scale: 0.82;
  --work-wave-circle-left: calc(-41.146vw * var(--work-wave-scale) + 4rem);
  --work-wave-circle-width: calc(208.333vw * var(--work-wave-scale));
  --work-wave-circle-top: clamp(24rem, 34vw, 40rem);
  --work-stage-text-col: minmax(0, 1fr);
  --work-stage-media-col: minmax(0, auto);
  --work-stage-gap: clamp(3rem, 8vw, 11rem);

  position: relative;
  background-color: var(--color-calm-sand);
  color: var(--color-deep-forest);
  overflow: hidden;
}

.work-sand-wave__shape {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.work-sand-wave__circle {
  position: absolute;
  top: var(--work-wave-circle-top);
  left: var(--work-wave-circle-left);
  width: var(--work-wave-circle-width);
  max-width: none;
  height: auto;
  aspect-ratio: 3783.58 / 4009.32;
}

/*
  Mobile + Tablet: Kreis unten halten wie Desktop –
  Kurve sichtbar (nicht abschneiden), Fläche bis zum unteren Rand.
*/
@media (max-width: 1399.98px) {
  .work-sand-wave {
    --work-wave-circle-top: 18%;
    --work-wave-circle-left: 50%;
    --work-wave-circle-width: 240vw;
  }

  .work-sand-wave__circle {
    top: var(--work-wave-circle-top);
    right: auto;
    bottom: -8%;
    left: 50%;
    width: var(--work-wave-circle-width);
    height: auto;
    min-height: calc(100% - var(--work-wave-circle-top) + 8%);
    aspect-ratio: auto;
    transform: translateX(-52%);
    object-fit: cover;
    object-position: center top;
  }
}

@media (max-width: 767.98px) {
  .work-sand-wave {
    --work-wave-circle-top: 22%;
    --work-wave-circle-width: 280vw;
  }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
  .work-sand-wave {
    --work-wave-circle-top: 26%;
  }
}

.page-work .site-footer {
  color: var(--color-deep-forest);
}

.work-section__inner {
  padding: clamp(2.5rem, 5vw, 4rem) var(--container-padding);
}

.work-sand > .work-section:first-child .work-section__inner {
  padding-top: clamp(4rem, 6.3vw, 6.3125rem);
}

.work-sand > .work-section:last-child .work-section__inner {
  padding-bottom: clamp(5rem, 12vw, 11rem);
}

.work-sand > .work-section.work-spirit:last-child .work-section__inner {
  padding-bottom: clamp(2rem, 6vw, 9.25rem);
}

.work-sand-wave > .work-section:first-child .work-section__inner {
  padding-top: clamp(3rem, 5vw, 4rem);
}

.work-sand-wave > .work-section:last-child .work-section__inner {
  padding-bottom: clamp(5rem, 12vw, 11rem);
}

.work-sand-wave > .work-section.work-world .work-section__inner {
  padding-top: 0;
  padding-bottom: clamp(2rem, 5vw, 4rem);
}

.work-section,
.work-natur-flow {
  position: relative;
  z-index: 1;
  background-color: transparent;
}

.work-section__stage {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
}

.work-section__content {
  display: grid;
  gap: 1.5rem;
}

.work-section__title {
  margin: 0;
  font-family: var(--font-headline);
  font-size: clamp(1.75rem, 3.5vw, 3.75rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.work-section__title span {
  display: block;
}

.work-section__title em {
  font-style: italic;
  font-weight: 400;
}

.work-section__text {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
}

.work-section__text p {
  margin: 0;
}

.work-section__content .btn-pill {
  justify-self: start;
  margin-top: 0;
}

.work-accordion {
  --work-accordion-gap: 1.5rem;
  margin-top: 0;
  padding-top: var(--work-accordion-gap);
}

.work-section__text .work-accordion {
  margin-top: 0;
}

.work-accordion__details {
  display: block;
}

.work-accordion__toggle {
  list-style: none;
  cursor: pointer;
}

.work-text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
  color: var(--color-deep-forest);
  text-decoration: none;
}

.work-text-link__text {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.work-text-link__dot {
  flex-shrink: 0;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background-color: var(--color-source-green);
}

@media (min-width: 768px) {
  .work-text-link__dot {
    width: 0.875rem;
    height: 0.875rem;
  }
}

@media (min-width: 992px) {
  .work-text-link__dot {
    width: 1rem;
    height: 1rem;
  }
}

@media (min-width: 1400px) {
  .work-text-link__dot {
    width: 1.25rem;
    height: 1.25rem;
  }
}

.work-accordion__toggle::-webkit-details-marker {
  display: none;
}

.work-accordion__toggle::marker {
  content: '';
}

.work-accordion__details:not([open]) .work-accordion__label--less {
  display: none;
}

.work-accordion__details[open] .work-accordion__label--more {
  display: none;
}

.work-accordion__panel {
  padding-top: var(--work-accordion-gap, 1rem);
}

.page-about .about-life .work-accordion__details[open] .work-accordion__panel {
  padding-bottom: clamp(4rem, 10vw, 12rem);
}

.page-about
  .about-school
  .work-accordion__details[open]
  .work-accordion__panel {
  padding-bottom: clamp(2rem, 4vw, 3.125rem);
}

.work-accordion__panel p + p {
  margin-top: 1rem;
}

.work-accordion__panel em {
  font-style: italic;
}

.work-text-link--sand .work-text-link__dot {
  background-color: var(--color-calm-sand);
}

/* About life: cream dot only below 1400; desktop keeps source-green */
@media (min-width: 1400px) {
  .about-life .work-text-link--sand .work-text-link__dot {
    background-color: var(--color-source-green);
  }
}

.work-accordion__panel a:not(.btn) {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.work-accordion__panel a:not(.btn):hover,
.work-accordion__panel a:not(.btn):focus-visible {
  color: var(--color-deep-forest);
}

.work-accordion__quote {
  margin: 0;
  padding: 0;
  border: none;
  font-family: var(--font-headline);
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.work-accordion__quote p {
  margin: 0;
}

.work-accordion__quote span {
  display: block;
}

.work-accordion__quote cite {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0;
}

.work-accordion__panel .work-accordion__quote {
  margin-top: var(--work-accordion-gap, 1rem);
}

.work-accordion__cta {
  margin: 1.5rem 0 0;
  padding-top: 0;
}

.work-accordion__panel p + p.work-accordion__cta {
  margin-top: 1.5rem;
}

@media (min-width: 1400px) {
  .work-accordion {
    --work-accordion-gap: 1.5rem;
  }

  .work-accordion__quote cite {
    font-size: 1.125rem;
  }
}

.work-section__media {
  margin: 0;
}

.work-section__media img {
  display: block;
  width: 100%;
  height: auto;
}

.work-section__media--portrait {
  max-width: 25.75rem;
  justify-self: center;
}

.work-section__media--portrait img {
  aspect-ratio: 776 / 940;
  object-fit: cover;
  object-position: center center;
}

.work-section__media--landscape {
  max-width: 30.8125rem;
  justify-self: center;
}

.work-section__media--landscape img {
  aspect-ratio: 493 / 351;
  object-fit: cover;
  object-position: center;
}

.work-section__media--illustration {
  max-width: 28rem;
  justify-self: center;
}

@media (max-width: 991.98px) {
  .work-spirit .work-section__stage {
    /* Weniger Abstand Text → Illu */
    gap: clamp(2.5rem, 5vw, 4rem);
  }

  .work-spirit .work-section__content {
    order: 1;
  }

  .work-spirit .work-section__media--illustration {
    order: 2;
    width: min(58%, 16rem);
    max-width: 16rem;
    justify-self: center;
  }

  /* Mehr Abstand unter der Illu */
  .work-sand > .work-section.work-spirit:last-child .work-section__inner {
    padding-bottom: clamp(4rem, 10vw, 7rem);
  }
}

.work-section__media--depth {
  max-width: 38.5625rem;
  justify-self: center;
}

.work-section__media--depth img {
  aspect-ratio: 617 / 756;
  object-fit: cover;
  object-position: center;
}

.work-depth__copy {
  display: grid;
  gap: 1.5rem;
  min-width: 0;
}

.work-natur-flow {
  position: relative;
  z-index: 1;
}

.work-natur-flow__inner {
  display: grid;
  grid-template-columns: var(--work-stage-text-col) var(--work-stage-media-col);
  column-gap: var(--work-stage-gap);
  justify-content: start;
  padding: clamp(3rem, 5vw, 7rem) var(--container-padding)
    clamp(3rem, 6vw, 8rem);
}

.work-natur-flow__quote {
  grid-column: 1 / -1;
  justify-self: end;
  margin: 0;
  max-width: min(100%, 83.25rem);
  font-family: var(--font-headline);
  font-size: clamp(2.25rem, 4vw, 4.25rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-align: right;
}

.work-natur-flow__quote span {
  display: block;
  overflow-wrap: break-word;
}

.work-natur-flow__quote em {
  font-style: italic;
}

/* Weisheit – Figma @ 1920: oliv ab y=5725, quote 5914, foto 5830/659, Zitat 6278 */
.work-wise-wrap {
  position: relative;
  z-index: 2;
  background-color: var(--color-forest-olive);
  color: var(--color-calm-sand);
  overflow: hidden;
}

.work-wise-wrap .site-footer {
  background-color: transparent;
  color: #fff;
}

.work-wise-wrap .site-footer__link {
  color: #fff;
}

.work-wise-wrap .site-footer__link:hover,
.work-wise-wrap .site-footer__link:focus-visible {
  color: var(--color-source-green);
}

.work-wise {
  position: relative;
  z-index: 1;
  background-color: var(--color-forest-olive);
  color: var(--color-calm-sand);
}

.work-wise__inner {
  padding: clamp(4rem, 8vw, 11.8125rem) var(--container-padding)
    clamp(2.5rem, 5vw, 4rem);
}

.work-wise__layout {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3rem);
  align-items: start;
}

.work-wise__content {
  max-width: 42.6875rem;
  text-align: right;
}

.work-wise__quote {
  margin: 0;
  font-family: var(--font-headline);
  font-size: clamp(2.75rem, 5vw, 5rem);
  font-weight: 300;
  line-height: 1.0625;
  text-align: right;
}

.work-wise__quote p {
  margin: 0;
}

.work-wise__quote span {
  display: block;
}

@media (max-width: 991.98px) {
  .work-natur-flow__quote,
  .work-wise__quote {
    font-size: 2.25rem; /* 36px – same as Biologie quote */
    line-height: 1.08;
  }

  .work-wise__quote span {
    display: inline;
  }
}

.work-wise__cite {
  margin: clamp(1.25rem, 2.5vw, 2rem) 0 0;
  font-family: var(--font-body);
  font-size: clamp(0.875rem, 1.1vw, 1.125rem);
  font-weight: 400;
  line-height: 1.3;
  text-align: right;
}

.work-wise__media {
  margin: 0;
  justify-self: center;
  width: min(100%, 41.1875rem);
  max-width: 100%;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  border-radius: 50%;
  overflow: hidden;
}

.work-wise__photo {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

@media (min-width: 992px) {
  .work-wise__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, min(41.1875rem, 42vw));
    column-gap: clamp(1.5rem, 3vw, 5rem);
    align-items: start;
    justify-content: center;
    width: 100%;
  }

  .work-wise__media {
    width: 100%;
    justify-self: end;
    margin-top: clamp(-2rem, -3vw, -3.25rem);
  }
}

@media (min-width: 768px) {
  .work-section__text,
  .work-text-link {
    font-size: 1.125rem;
  }
}

@media (min-width: 992px) {
  .work-section__stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    column-gap: clamp(3rem, 8vw, 11rem);
    align-items: start;
  }

  .work-bridge .work-section__stage,
  .work-world .work-section__stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, min(30.8125rem, 36%));
  }

  .work-bridge .work-section__content,
  .work-world .work-section__content {
    max-width: min(100%, 42.75rem);
    min-width: 0;
  }

  .work-bridge .work-section__media,
  .work-world .work-section__media {
    justify-self: end;
  }

  .work-bridge .work-section__media--portrait {
    width: min(25.75rem, 28vw);
    max-width: 100%;
    margin-top: clamp(2.5rem, 5vw, 4rem);
    margin-right: 0;
  }

  .work-spirit .work-section__stage {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .work-spirit .work-section__content {
    max-width: 47.75rem;
    justify-self: end;
  }

  .work-spirit .work-section__media--illustration {
    width: min(28rem, 30vw);
    max-width: none;
    justify-self: end;
    margin-top: clamp(3rem, 5vw, 5.3125rem);
  }

  .work-world .work-section__content {
    max-width: 42rem;
  }

  .work-world .work-section__media--landscape {
    width: min(30.8125rem, 100%);
    max-width: 100%;
    justify-self: end;
    margin-top: clamp(8rem, 12vw, 14rem);
    margin-right: 0;
    position: relative;
    z-index: 2;
  }

  .work-natur-flow__quote {
    font-size: clamp(2.25rem, 3.5vw, 4.25rem);
    max-width: 100%;
  }

  .work-depth .work-depth__stage {
    grid-template-columns: minmax(0, min(34rem, 40%)) minmax(0, 1fr);
    grid-template-rows: auto;
    column-gap: clamp(2rem, 5vw, 11rem);
    row-gap: clamp(1.5rem, 3vw, 2.75rem);
    align-items: start;
    justify-content: space-between;
    width: 100%;
  }

  .work-depth .work-section__media--depth {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    width: 100%;
    max-width: 34rem;
    justify-self: start;
    margin: 0;
  }

  .work-depth .work-section__media--depth img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center 20%;
  }

  .work-depth .work-depth__copy {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.75rem);
    align-content: start;
    margin-right: 0;
    min-width: 0;
  }

  .work-depth .work-section__text {
    max-width: 100%;
  }

  .work-wise__content {
    text-align: right;
  }

  .work-wise__quote {
    text-align: right;
  }

  .work-wise__cite {
    text-align: right;
  }

  .work-section__title {
    font-size: clamp(2.25rem, 3.5vw, 3.75rem);
  }
}

@media (min-width: 1400px) {
  .work-section__inner {
    padding-inline: 5rem;
    padding-block: 0;
  }

  .work-sand > .work-section:first-child .work-section__inner {
    padding-top: 6.3125rem;
  }

  .work-sand > .work-section:not(:first-child) .work-section__inner {
    padding-top: 8rem;
  }

  .work-sand > .work-section:last-child .work-section__inner {
    padding-bottom: 11rem;
  }

  .work-sand > .work-section.work-spirit:last-child .work-section__inner {
    padding-bottom: 9.25rem;
  }

  .work-sand-wave {
    --work-stage-text-col: 50rem;
    --work-stage-media-col: 30.8125rem;
    --work-stage-gap: 11rem;
    --work-wave-circle-left: calc(-49.375rem * var(--work-wave-scale) + 10rem);
    --work-wave-circle-width: calc(250rem * var(--work-wave-scale));
    --work-wave-circle-top: 40rem;
  }

  .work-sand-wave > .work-section:first-child .work-section__inner {
    padding-top: 4rem;
  }

  .work-sand-wave > .work-section:not(:first-child) .work-section__inner {
    padding-top: 8rem;
  }

  .work-sand-wave > .work-section:last-child .work-section__inner {
    padding-bottom: 11rem;
  }

  .work-sand-wave > .work-section.work-world .work-section__inner {
    padding-top: 0;
    padding-bottom: 4rem;
  }

  .work-bridge .work-section__stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, min(25.75rem, 28%));
    column-gap: clamp(2rem, 5vw, 11rem);
    justify-content: start;
  }

  .work-bridge .work-section__content {
    max-width: min(100%, 55.75rem);
    min-width: 0;
  }

  .work-bridge .work-section__text {
    max-width: 100%;
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .work-bridge .work-text-link {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .work-bridge .work-section__media--portrait {
    width: 100%;
    max-width: 25.75rem;
    margin-top: 4.5rem;
    margin-right: 0;
  }

  .work-spirit .work-section__stage {
    grid-template-columns: minmax(0, min(28rem, 32%)) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 11rem);
    justify-content: start;
  }

  .work-spirit .work-section__content {
    max-width: min(100%, 47.75rem);
    min-width: 0;
    justify-self: end;
  }

  .work-spirit .work-section__text,
  .work-spirit .work-text-link {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .work-spirit .work-section__media--illustration {
    width: min(100%, 27.995625rem);
    margin-top: 5.3125rem;
    justify-self: end;
    margin-right: 0;
  }

  .work-world .work-section__stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, min(30.8125rem, 32%));
    column-gap: clamp(2rem, 5vw, 11rem);
    justify-content: start;
  }

  .work-world .work-section__content {
    max-width: min(100%, 50rem);
    min-width: 0;
  }

  .work-world .work-section__text {
    max-width: 100%;
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 0;
  }

  .work-world .work-text-link {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .work-world .work-section__media--landscape {
    width: 100%;
    max-width: 30.8125rem;
    margin-top: clamp(8rem, 12vw, 22rem);
    margin-right: 0;
    position: relative;
    z-index: 2;
  }

  .work-section__content {
    gap: 2.75rem;
    min-width: 0;
  }

  .work-section__title {
    font-size: clamp(2.5rem, 3.2vw, 3.75rem);
    line-height: 1.08;
  }

  .work-natur-flow__inner {
    padding: 7rem 5rem 8rem;
    /* Eine fluide Spur – sonst läuft die 2-Spalten-Grid bei ~1500 rechts raus */
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .work-natur-flow__quote {
    font-size: clamp(2.5rem, 3.2vw, 4.25rem);
    line-height: 1.08;
    width: auto;
    max-width: 100%;
    justify-self: end;
    text-align: right;
    box-sizing: border-box;
  }

  .work-depth .work-depth__stage {
    grid-template-columns: minmax(0, min(38.5625rem, 42%)) minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 5rem);
    row-gap: 2.75rem;
    justify-content: space-between;
    align-items: start;
    width: 100%;
  }

  .work-depth .work-section__media--depth {
    width: 100%;
    max-width: 38.5625rem;
    margin-left: 0;
  }

  .work-depth .work-section__media--depth img {
    object-position: center 18%;
  }

  .work-depth .work-depth__copy {
    gap: 2.75rem;
    margin-right: 0;
    min-width: 0;
  }

  .work-depth .work-section__text {
    max-width: 100%;
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .work-depth .work-text-link {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .work-wise__inner {
    padding: 11.8125rem 5rem 4rem;
  }

  .work-wise__layout {
    grid-template-columns: minmax(0, 42.6875rem) minmax(0, 41.1875rem);
    column-gap: 5rem;
    justify-content: center;
    width: 100%;
  }

  .work-wise__content {
    justify-self: auto;
    margin-right: 0;
  }

  .work-wise__quote {
    font-size: 5rem;
    line-height: 5.3125rem;
    text-align: right;
  }

  .work-wise__cite {
    margin-top: 2rem;
    font-size: 1.125rem;
    text-align: right;
  }

  .work-wise__media {
    width: min(100%, 41.1875rem);
    max-width: 41.1875rem;
    aspect-ratio: 1 / 1;
    margin-top: -5.25rem;
  }

  .work-wise__photo {
    width: 100%;
    height: 100%;
  }
}

/* Volle Figma-Maße erst ab ausreichend Breite (~1700) */
@media (min-width: 1700px) {
  .work-bridge .work-section__stage {
    grid-template-columns: minmax(0, 55.75rem) 25.75rem;
    column-gap: 11rem;
  }

  .work-bridge .work-section__content,
  .work-bridge .work-section__text {
    max-width: 55.75rem;
  }

  .work-bridge .work-section__text,
  .work-bridge .work-text-link {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .work-bridge .work-section__media--portrait {
    width: 25.75rem;
    margin-right: -1.5rem;
  }

  .work-spirit .work-section__stage {
    grid-template-columns: minmax(0, 1fr) 47.75rem;
    column-gap: 11rem;
  }

  .work-spirit .work-section__text,
  .work-spirit .work-text-link {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .work-spirit .work-section__media--illustration {
    margin-right: 4rem;
  }

  .work-world .work-section__stage {
    grid-template-columns: minmax(0, 50rem) 30.8125rem;
    column-gap: 11rem;
  }

  .work-world .work-section__content,
  .work-world .work-section__text {
    max-width: 50rem;
  }

  .work-world .work-section__text,
  .work-world .work-text-link {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .work-world .work-section__media--landscape {
    width: 30.8125rem;
    margin-top: 22rem;
  }

  .work-section__title {
    font-size: 3.75rem;
    line-height: 4.0625rem;
  }

  .work-natur-flow__inner {
    padding: 7rem 5rem 8rem;
    grid-template-columns: minmax(0, 1fr);
  }

  .work-natur-flow__quote {
    font-size: 4.25rem;
    max-width: min(100%, 83.25rem);
    justify-self: end;
    text-align: right;
  }

  .work-depth .work-depth__stage {
    grid-template-columns: 38.5625rem minmax(0, 46.9375rem);
    column-gap: 0;
  }

  .work-depth .work-section__media--depth {
    width: 38.5625rem;
  }

  .work-depth .work-depth__copy {
    margin-right: -1.5rem;
  }

  .work-depth .work-section__text,
  .work-depth .work-text-link {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .work-depth .work-section__text {
    max-width: 46.9375rem;
  }
}

/* Shared pill button – Figma Rechteck 4 */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 1.75rem;
  border: 2px solid var(--color-deep-forest);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.4rem;
  color: var(--color-deep-forest);
  background-color: transparent;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.btn-pill:hover,
.btn-pill:focus-visible {
  background-color: var(--color-deep-forest);
  border-color: var(--color-deep-forest);
  color: var(--color-calm-sand);
}

@media (min-width: 768px) {
  .btn-pill {
    font-size: 1.125rem;
  }
}

@media (min-width: 1400px) {
  .btn-pill {
    min-height: 4.5rem;
    padding: 0 2.75rem;
    font-size: 1.625rem;
    line-height: 2rem;
  }
}

.btn-pill--sand {
  border-color: var(--color-calm-sand);
  color: var(--color-calm-sand);
}

.btn-pill--sand:hover,
.btn-pill--sand:focus-visible {
  background-color: var(--color-calm-sand);
  border-color: var(--color-calm-sand);
  color: var(--color-deep-forest);
}

/* Intro section – Figma @ 1920: text 80/880, portrait 1075/513, tree 1431/392 */
.section-intro {
  background-color: var(--color-calm-sand);
  color: var(--color-deep-forest);
  overflow-x: clip;
  overflow-y: visible;
}

.section-intro__inner {
  padding: 3rem var(--container-padding)
    calc(var(--moments-arc-rise) + var(--moments-arc-gap));
}

.section-intro__layout {
  display: grid;
  gap: 2.5rem;
}

.section-intro__content {
  max-width: 34.5rem;
}

.section-intro__text {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
}

.section-intro__text strong {
  font-weight: 500;
}

.section-intro__content .btn-pill,
.section-moments__content .btn-pill {
  margin-top: 1.5rem;
}

.section-intro__visual {
  position: relative;
  width: min(100%, 20rem);
  aspect-ratio: 513 / 512;
  margin-inline: auto;
  overflow: visible;
}

.section-intro__portrait {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

.section-intro__tree {
  position: absolute;
  left: 69.4%;
  top: 64.8%;
  width: 76.4%;
  height: auto;
  pointer-events: none;
}

@media (min-width: 768px) {
  .section-intro__text {
    font-size: 1.125rem;
  }

  .section-intro__inner {
    padding-top: 4rem;
  }

  .section-intro__visual {
    width: min(100%, 26rem);
  }
}

@media (min-width: 992px) {
  .section-intro__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 6vw, 7.2rem);
    align-items: start;
  }

  .section-intro__content {
    max-width: none;
    padding-top: 3rem;
  }

  .section-intro__visual {
    width: min(100%, 32rem);
    justify-self: end;
  }
}

@media (min-width: 1400px) {
  .section-intro__inner {
    padding: 8rem 5rem calc(var(--moments-arc-rise) + var(--moments-arc-gap));
  }

  .section-intro__layout {
    /* Stay fluid between 1400 and ~1560 so portrait+tree don't overflow */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 5.5rem);
    justify-content: start;
  }

  .section-intro__content {
    max-width: none;
    padding-top: 5rem;
  }

  .section-intro__text {
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 0;
  }

  .section-intro__text + .section-intro__text {
    margin-top: 0;
  }

  .section-intro__content .btn-pill,
  .section-moments__content .btn-pill {
    margin-top: 2.75rem;
  }

  .section-intro__visual {
    width: min(100%, 28rem);
    justify-self: end;
    margin-left: 0;
    /* Leave room so the overlapping tree stays inside the frame */
    margin-right: clamp(3rem, 10vw, 8rem);
  }

  .section-intro__tree {
    left: 62%;
    top: 64%;
    width: 72%;
  }
}

@media (min-width: 1560px) {
  .section-intro__layout {
    grid-template-columns: 46rem 32.0625rem;
    column-gap: 5.5rem;
  }

  .section-intro__content {
    max-width: 46rem;
  }

  .section-intro__visual {
    width: 32.0625rem;
    justify-self: start;
    margin-left: 5rem;
  }

  .section-intro__tree {
    left: 69.39%;
    top: 64.84%;
    width: 24.48rem;
  }
}

/* Moments section – green comes only from the circle, no flat fill */
.section-moments {
  position: relative;
  background-color: transparent;
  color: var(--color-deep-forest);
  overflow-x: clip;
}

.section-moments__arc {
  position: absolute;
  top: calc(-1 * var(--moments-arc-rise));
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.section-moments__arc-circle {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--moments-r) * 2);
  height: calc(var(--moments-r) * 2);
  margin-left: calc(-1 * var(--moments-r));
  border-radius: 50%;
  background-color: var(--color-source-green);
  background-image: var(--grain-image);
  background-repeat: repeat;
  background-size: var(--grain-size);
}

.section-moments__body {
  position: relative;
  z-index: 1;
  background-color: transparent;
}

.section-moments__inner {
  padding: 0 var(--container-padding) clamp(5.5rem, 14vw, 9rem);
}

.section-moments__layout {
  display: grid;
  gap: 2.5rem;
  transform: translateY(calc(-1 * (var(--moments-arc-rise) - 5rem)));
}

.section-moments__photo {
  display: block;
  width: 100%;
  max-width: 27.25rem;
  height: auto;
}

.section-moments__title {
  margin: 0 0 2rem;
  font-size: 1.75rem;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.section-moments__title br {
  display: none;
}

.section-moments__title em {
  font-style: italic;
}

.section-moments__text {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
}

@media (min-width: 768px) {
  .section-moments__inner {
    padding-bottom: clamp(6.5rem, 12vw, 10rem);
  }

  .section-moments__title {
    font-size: 2.25rem;
  }

  .section-moments__title br {
    display: inline;
  }

  .section-moments__text {
    font-size: 1.125rem;
  }
}

@media (min-width: 992px) {
  .section-moments__inner {
    padding-bottom: clamp(7rem, 10vw, 11rem);
  }

  .section-moments__layout {
    grid-template-columns: minmax(0, 27.25rem) minmax(0, 1fr);
    column-gap: clamp(2rem, 11vw, 13.25rem);
    align-items: start;
  }

  .section-moments__media {
    padding-top: 10rem;
  }

  .section-moments__photo {
    max-width: none;
  }

  .section-moments__title {
    font-size: 2.75rem;
  }
}

@media (min-width: 1400px) {
  .section-moments__inner {
    padding: 0 5rem 3rem;
  }

  .section-moments__layout {
    /* Fluid until the Figma total width (~1620px + padding) actually fits */
    grid-template-columns: minmax(0, 27.25rem) minmax(0, 1fr);
    column-gap: clamp(3rem, 8vw, 13.25rem);
    justify-content: start;
    transform: translateY(calc(-1 * (var(--moments-arc-rise) - 12.8125rem)));
  }

  .section-moments__content {
    max-width: none;
    min-width: 0;
  }

  .section-moments__media {
    padding-top: 11.5rem;
  }

  .section-moments__title {
    font-size: 3.75rem;
    line-height: 4.0625rem;
    margin-bottom: 2.5rem;
  }

  .section-moments__text {
    font-size: 1.5rem;
    line-height: 2rem;
    max-width: 56.25rem;
  }
}

@media (min-width: 1800px) {
  .section-moments__layout {
    grid-template-columns: 27.25rem 60.875rem;
    column-gap: 13.25rem;
  }

  .section-moments__content {
    max-width: 60.875rem;
  }
}

/* Wilderness section – Figma @ 1920: photo 78, title 80/1119, body 80/1095 */
.section-wilderness {
  position: relative;
  min-height: clamp(36rem, 58vw, 70.3125rem);
  color: var(--color-calm-sand);
  overflow: hidden;
}

.section-wilderness__media {
  position: absolute;
  inset: 0;
}

.section-wilderness__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.section-wilderness__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0.2deg,
    rgb(27 29 35 / 0.48) 27.14%,
    rgb(102 104 108 / 0) 74.73%
  );
  mix-blend-mode: multiply;
}

.section-wilderness__content {
  position: relative;
  z-index: 1;
}

.section-wilderness__inner {
  display: flex;
  flex-direction: column;
  min-height: clamp(36rem, 58vw, 70.3125rem);
  padding: 0 var(--container-padding) clamp(4.25rem, 8vw, 5.25rem);
}

.section-wilderness__spacer {
  flex: 1 1 auto;
  min-height: clamp(10rem, 48%, 36.75rem);
}

.section-wilderness__title {
  max-width: 69.9375rem;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  font-family: var(--font-headline);
  font-size: clamp(1.75rem, 3.5vw, 3.75rem);
  font-weight: 400;
  font-style: normal;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #fff;
}

.section-wilderness__title em {
  font-style: italic;
}

.section-wilderness__footer {
  display: grid;
  gap: 1.5rem;
  align-items: end;
  justify-items: stretch;
}

.section-wilderness__footer .btn-pill {
  width: auto;
  max-width: max-content;
  justify-self: start;
  margin-top: 0;
}

.section-wilderness__text {
  max-width: 68.4375rem;
  margin: 0;
  justify-self: stretch;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
}

.section-wilderness__text strong {
  font-weight: 500;
}

/* Mobile/tablet: don't rely on %-based flex spacer (collapses when parent height is auto) */
@media (max-width: 991.98px) {
  .section-wilderness {
    min-height: 0;
  }

  .section-wilderness__inner {
    min-height: 0;
    justify-content: flex-end;
    gap: 1.25rem;
    padding-top: clamp(9rem, 42vw, 16rem);
    /* Match moments’ visual gap below its button (padding minus arc translateY) */
    padding-bottom: calc(
      clamp(5.5rem, 14vw, 9rem) - max(0rem, 5rem - var(--moments-arc-rise))
    );
  }

  .section-wilderness__spacer {
    display: none;
  }

  .section-wilderness__title {
    margin: 0;
    flex-shrink: 0;
  }

  .section-wilderness__footer {
    margin: 0;
    flex-shrink: 0;
    gap: 1rem;
  }

  .section-wilderness__text {
    margin: 0;
  }

  .section-wilderness__footer .btn-pill {
    margin-top: 0;
  }
}

@media (min-width: 768px) {
  .section-wilderness__inner {
    padding-bottom: clamp(4rem, 7vw, 5.5rem);
  }

  .section-wilderness__text {
    font-size: 1.125rem;
  }

  .section-wilderness__footer {
    gap: 1.5rem;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .section-wilderness__inner {
    padding-top: clamp(10rem, 38vw, 18rem);
    padding-bottom: calc(
      clamp(6.5rem, 12vw, 10rem) - max(0rem, 5rem - var(--moments-arc-rise))
    );
  }
}

@media (min-width: 992px) {
  .section-wilderness__inner {
    padding-bottom: clamp(4.5rem, 6vw, 5.5rem);
  }

  .section-wilderness__footer {
    gap: 1.5rem;
  }

  .section-wilderness__footer .btn-pill {
    width: auto;
    max-width: max-content;
    justify-self: start;
    margin: 0;
  }
}

@media (min-width: 1400px) {
  .section-wilderness__inner {
    padding: 0 5rem 5rem;
  }

  .section-wilderness__spacer {
    min-height: 36.75rem;
  }

  .section-wilderness__title {
    font-size: 3.75rem;
    line-height: 4.0625rem;
    margin-bottom: 2.5rem;
  }

  .section-wilderness__text {
    max-width: 68.4375rem;
    font-size: 1.5rem;
    line-height: 2rem;
  }

  /* Side-by-side when wide enough; button right. Narrower desktops stay stacked + left. */
  .section-wilderness__footer {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 3rem;
  }

  .section-wilderness__footer .btn-pill {
    justify-self: end;
  }
}

/* Testimonials – Figma @ 1920: bg 4165/887, title 4259, cards 4421/277×482 */
.section-testimonials {
  background-color: var(--color-forest-olive);
  color: var(--color-calm-sand);
}

.section-testimonials__inner {
  padding: clamp(3.5rem, 5.5vw, 5.875rem) var(--container-padding)
    clamp(4rem, 9vw, 9.3125rem);
}

.section-testimonials__title {
  margin: 0 0 clamp(2rem, 4vw, 2.5rem);
  font-family: var(--font-headline);
  font-size: clamp(2rem, 4vw, 3.75rem);
  font-weight: 400;
  line-height: 1.14;
  text-align: center;
}

.section-testimonials__grid {
  display: flex;
  gap: clamp(1rem, 3vw, 2rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
}

.section-testimonials__item {
  flex: 0 0 min(72vw, 17.3125rem);
  scroll-snap-align: start;
}

.section-testimonials__card {
  margin: 0;
  aspect-ratio: 277 / 482;
  border: 1px solid #707070;
  overflow: hidden;
}

.section-testimonials__card img,
.section-testimonials__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  background-color: #000;
}

@media (min-width: 768px) {
  .section-testimonials__item {
    flex-basis: min(40vw, 17.3125rem);
  }
}

@media (min-width: 1200px) {
  .section-testimonials__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 17.3125rem));
    gap: clamp(2rem, 7vw, 8.5625rem);
    justify-content: center;
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }

  .section-testimonials__item {
    flex: unset;
  }
}

@media (min-width: 1400px) {
  .section-testimonials__inner {
    padding-left: clamp(5rem, 9.9vw, 11.875rem);
    padding-right: clamp(5rem, 9.9vw, 11.875rem);
  }

  .section-testimonials__title {
    margin-bottom: 2.5rem;
    font-size: 3.75rem;
    line-height: 5.3125rem;
  }
}

/* Sand wave wrapper – group + trust share green circle (Figma Pfad 207, scaled) */
.sections-sand-wave {
  --sand-wave-scale: 0.82;
  --sand-wave-circle-left: calc(-75.125vw * var(--sand-wave-scale) - 5rem);
  --sand-wave-circle-width: calc(197.2vw * var(--sand-wave-scale));
  --sand-wave-circle-top: clamp(38rem, 56vw, 62rem);

  position: relative;
  background-color: var(--color-calm-sand);
  overflow: hidden;
}

.sections-sand-wave__shape {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.sections-sand-wave__circle {
  position: absolute;
  top: var(--sand-wave-circle-top);
  left: var(--sand-wave-circle-left);
  width: var(--sand-wave-circle-width);
  max-width: none;
  height: auto;
  aspect-ratio: 3783.58 / 4009.32;
}

@media (max-width: 575.98px) {
  .sections-sand-wave {
    --sand-wave-circle-left: 50%;
    /* Hold near the start of Vertrauen; height fills down past the section end */
    --sand-wave-circle-top: 40%;
  }

  .sections-sand-wave__circle {
    top: var(--sand-wave-circle-top);
    left: 50%;
    width: auto;
    /* From 40% top through past the bottom edge */
    height: 75%;
    transform: translateX(-50%);
  }
}

/* Group / network – Figma @ 1920: illustration 169/672, content 984/738 */
.section-group {
  position: relative;
  z-index: 1;
  background-color: transparent;
  color: var(--color-deep-forest);
}

.section-group__inner {
  position: relative;
  z-index: 1;
  padding: clamp(3.5rem, 8vw, 9.125rem) var(--container-padding)
    clamp(6rem, 14vw, 12rem);
}

@media (max-width: 1179.98px) {
  .section-group__inner {
    padding-bottom: clamp(3.5rem, 7vw, 5rem);
  }
}

.section-group__layout {
  display: grid;
  gap: 2.5rem;
  align-items: start;
  width: 100%;
  min-width: 0;
}

.section-group__visual {
  width: 100%;
  max-width: min(100%, 22rem);
  justify-self: center;
  min-width: 0;
}

.section-group__network {
  display: block;
  width: 100%;
  height: auto;
}

.section-group__content {
  max-width: 46.125rem;
  min-width: 0;
}

.section-group__title {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  font-family: var(--font-headline);
  font-size: clamp(1.75rem, 3.5vw, 3.75rem);
  font-weight: 400;
  line-height: 1.08;
  overflow-wrap: break-word;
}

.section-group__title em {
  font-style: italic;
}

.section-group__text {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
  overflow-wrap: break-word;
}

.section-group__content .btn-pill {
  margin-top: 1.5rem;
}

@media (max-width: 575.98px) {
  .section-group__visual {
    max-width: none;
    justify-self: stretch;
  }
}

@media (min-width: 576px) and (max-width: 1179.98px) {
  .section-group__visual {
    max-width: min(100%, 28rem);
  }
}

@media (min-width: 768px) {
  .section-group__text {
    font-size: 1.125rem;
  }
}

@media (min-width: 1180px) {
  .section-group__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 6vw, 11rem);
  }

  .section-group__visual {
    max-width: min(100%, 42rem);
    justify-self: start;
  }

  .section-group__content {
    max-width: 42.75rem;
    padding-top: 0.25rem;
  }
}

@media (min-width: 1400px) {
  .sections-sand-wave {
    --sand-wave-circle-left: calc(-75.125rem * var(--sand-wave-scale) - 6rem);
    --sand-wave-circle-width: calc(236.484375rem * var(--sand-wave-scale));
    --sand-wave-circle-top: 62rem;
  }
}

@media (min-width: 1700px) {
  .section-group__inner {
    padding: 9.125rem 5rem 12rem;
  }

  .section-group__layout {
    grid-template-columns: minmax(0, 42.025rem) minmax(0, 42.75rem);
    column-gap: 11rem;
    justify-content: start;
  }

  .section-group__visual {
    width: 42.025rem;
    max-width: 42.025rem;
    margin-left: 3.5rem;
  }

  .section-group__content {
    max-width: 42.75rem;
  }

  .section-group__title {
    margin-bottom: 2.5rem;
    font-size: 3.75rem;
    line-height: 4.0625rem;
    overflow-wrap: normal;
  }

  .section-group__text {
    max-width: 42rem;
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 0;
  }

  .section-group__content .btn-pill {
    margin-top: 2.75rem;
  }
}

/* Trust – Figma @ 1920: title 6180/184px, quote 6398, body 6601/919, photo 1212/625 */
.section-trust {
  position: relative;
  z-index: 1;
  background-color: transparent;
  color: var(--color-deep-forest);
}

.section-trust__inner {
  position: relative;
  z-index: 1;
  padding: 0 var(--container-padding) clamp(4rem, 10vw, 8rem);
}

.section-trust__title {
  width: fit-content;
  max-width: min(100%, 50rem);
  margin: 0 0 clamp(0.75rem, 2vw, 1.375rem);
  font-family: var(--font-headline);
  font-size: clamp(3rem, 9.6vw, 11.5rem);
  font-weight: 400;
  line-height: 1.065;
}

.section-trust__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    'quote'
    'media'
    'text';
  gap: 1.75rem;
  align-items: start;
  width: 100%;
  min-width: 0;
}

.section-trust__quote {
  grid-area: quote;
  max-width: 47.1875rem;
  margin: 0;
  font-family: var(--font-headline);
  font-size: clamp(1.75rem, 3.5vw, 3.75rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.08;
  overflow-wrap: break-word;
}

.section-trust__text {
  grid-area: text;
  max-width: 57.4375rem;
  min-width: 0;
}

.section-trust__text p {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
  overflow-wrap: break-word;
}

.section-trust__media {
  grid-area: media;
  width: 100%;
  min-width: 0;
}

.section-trust__photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media (min-width: 768px) {
  .section-trust__text p {
    font-size: 1.125rem;
  }
}

@media (max-width: 1179.98px) {
  .section-trust__layout {
    gap: 1.5rem;
  }

  .section-trust__quote {
    margin-bottom: 0.25rem;
  }
}

@media (min-width: 1180px) {
  .section-trust__inner {
    padding: clamp(3rem, 6vw, 10rem) var(--container-padding)
      clamp(4rem, 10vw, 8rem);
  }

  .section-trust__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 39rem);
    grid-template-areas:
      'quote media'
      'text media';
    column-gap: clamp(2rem, 6vw, 12.625rem);
    row-gap: clamp(1.5rem, 3vw, 2.5rem);
  }

  .section-trust__media {
    justify-self: end;
    max-width: 39.03125rem;
  }
}

@media (min-width: 1700px) {
  .section-trust__inner {
    padding: 10rem 5rem 8rem;
  }

  .section-trust__title {
    margin-left: 0;
    margin-bottom: 1.375rem;
    font-size: 11.5rem;
    line-height: 12.25rem;
  }

  .section-trust__layout {
    grid-template-columns: minmax(0, 1fr) 39.03125rem;
    column-gap: 12.625rem;
  }

  .section-trust__quote {
    margin-bottom: 0;
    font-size: 3.75rem;
    line-height: 4.0625rem;
  }

  .section-trust__text p {
    max-width: 57.4375rem;
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .section-trust__media {
    margin-top: 1.0625rem;
  }
}

/* Wise – Figma @ 1920: feet bg 7293/1111, title 7741/80px, circle 909/885 */
.section-wise {
  position: relative;
  z-index: 2;
  color: var(--color-calm-sand);
  overflow: hidden;
  background-color: var(--color-deep-forest);
}

.section-wise__media {
  position: absolute;
  inset: 0;
}

.section-wise__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% center;
}

.section-wise__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 8vw, 5.5rem) var(--container-padding);
  min-height: clamp(34rem, 125vw, 44rem);
}

.section-wise__layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 2.25rem);
  width: 100%;
  min-width: 0;
}

.section-wise__title {
  margin: 0;
  width: fit-content;
  max-width: 100%;
  font-family: var(--font-headline);
  font-size: clamp(2.25rem, 9vw, 3.5rem);
  font-weight: 300;
  line-height: 1.06;
  text-align: center;
}

.section-wise__visual {
  display: none;
  line-height: 0;
}

.section-wise__circle {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.section-wise__quote {
  --wise-circle: rgb(101 104 51 / 0.91);
  --wise-size: min(100%, 22rem);

  position: relative;
  align-self: center;
  width: var(--wise-size);
  height: var(--wise-size);
  max-width: 100%;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  min-height: 0;
  margin: 0 auto;
  border-radius: 50%;
  background-color: var(--wise-circle);
  overflow: hidden;
  container-type: size;
  container-name: wise-quote;
}

.section-wise__quote-inner {
  position: absolute;
  inset: 16%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  min-width: 0;
  min-height: 0;
  text-align: center;
}

.section-wise__quote-block {
  margin: 0;
  max-width: 100%;
  font-family: var(--font-headline);
  font-size: clamp(0.95rem, 6.8cqi, 1.25rem);
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: break-word;
}

.section-wise__quote-block em {
  font-style: italic;
}

.section-wise__quote-block--after {
  max-width: 100%;
  text-align: center;
  margin: 0;
  align-self: center;
  justify-self: center;
}

.section-wise__attribution {
  margin: 0.15rem 0 0;
  max-width: 100%;
  font-family: var(--font-headline);
  font-size: clamp(0.875rem, 5.6cqi, 1.0625rem);
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: break-word;
}

@media (min-width: 576px) and (max-width: 1199.98px) {
  .section-wise__inner {
    min-height: clamp(36rem, 90vw, 48rem);
  }

  .section-wise__title {
    font-size: clamp(2.75rem, 6vw, 4rem);
  }

  .section-wise__quote {
    --wise-size: min(100%, 28rem);
  }

  .section-wise__quote-inner {
    inset: 15%;
    gap: 1rem;
  }
}

@media (min-width: 1200px) {
  .section-wise__photo {
    object-position: center;
  }

  .section-wise__inner {
    min-height: 0;
    padding: clamp(3.5rem, 7vw, 5.5rem) var(--container-padding);
  }

  .section-wise__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, min(50%, 50rem));
    column-gap: clamp(1.5rem, 4vw, 5rem);
    align-items: center;
  }

  .section-wise__title {
    font-size: clamp(3rem, 4.2vw, 5rem);
    align-self: center;
    justify-self: start;
    text-align: left;
    width: auto;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.08;
  }

  .section-wise__visual {
    display: block;
    width: 100%;
    max-width: min(100%, 50rem);
    min-width: 0;
    justify-self: end;
    align-self: center;
  }

  .section-wise__quote {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    aspect-ratio: auto;
    background: none;
    flex: none;
  }
}

@media (min-width: 1400px) {
  .section-wise__inner {
    padding: 5.5rem 5rem;
  }

  .section-wise__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 50rem);
    column-gap: 5rem;
    justify-content: space-between;
  }

  .section-wise__title {
    font-size: 5rem;
    line-height: 5.3125rem;
  }
}

@media (min-width: 1700px) {
  .section-wise__title {
    white-space: nowrap;
  }
}

/* CTA + footer wrapper – olive wave into footer (Figma Pfad 54 @ 1920: x -1448, y 9007) */
.section-cta-wrap {
  --cta-wave-scale: 0.82;
  --cta-wave-circle-left: calc(-75.42vw * var(--cta-wave-scale));
  --cta-wave-circle-width: calc(309.3vw * var(--cta-wave-scale));
  --cta-wave-circle-top: clamp(24rem, 32.4vw, 38.875rem);

  position: relative;
  z-index: 1;
  background-color: transparent;
  overflow: hidden;
}

.section-cta-wrap__shape {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

.section-cta-wrap__circle {
  position: absolute;
  top: var(--cta-wave-circle-top);
  left: var(--cta-wave-circle-left);
  width: var(--cta-wave-circle-width);
  max-width: none;
  height: auto;
  aspect-ratio: 5938.67 / 6292.99;
}

/* CTA – Figma @ 1920: sand 8385/1264, title 8523/60px, text 8694, photo 1211/489 */
.section-cta {
  position: relative;
  background-color: var(--color-calm-sand);
  color: var(--color-deep-forest);
  overflow: visible;
}

.section-cta__inner {
  position: relative;
  padding: clamp(3.5rem, 8vw, 8.625rem) var(--container-padding)
    clamp(3.5rem, 8vw, 8rem);
}

.section-cta__layout {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

.section-cta__content {
  position: relative;
  z-index: 3;
  max-width: 48.3125rem;
}

.section-cta__title {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  font-family: var(--font-headline);
  font-size: clamp(1.75rem, 3.5vw, 3.75rem);
  font-weight: 400;
  line-height: 1.08;
}

.section-cta__title em {
  font-style: italic;
}

.section-cta__text {
  max-width: none;
  margin-bottom: 0;
}

.section-cta__text p {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
}

.section-cta__text p:last-child {
  margin-bottom: 0;
}

.section-cta__text strong {
  font-weight: 600;
}

.section-cta__content .btn-pill {
  margin-top: 1.5rem;
}

.section-cta__photo-frame {
  position: relative;
  z-index: 3;
  width: 100%;
  aspect-ratio: 489 / 592;
  overflow: hidden;
}

.section-cta__media {
  position: relative;
  z-index: 3;
}

.section-cta__photo {
  position: absolute;
  top: -17.81%;
  left: -9.79%;
  width: 116.89%;
  height: 144.83%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

@media (min-width: 768px) {
  .section-cta__text p {
    font-size: 1.125rem;
  }
}

@media (max-width: 991.98px) {
  .section-cta-wrap {
    /* Keep the olive wave in the lower/footer zone so copy + button stay clear */
    --cta-wave-circle-top: clamp(36rem, 110vw, 58rem);
  }

  .section-cta__inner {
    padding-bottom: clamp(4rem, 12vw, 6rem);
  }
}

@media (min-width: 992px) {
  .section-cta__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 30.5625rem);
    column-gap: clamp(2rem, 4vw, 5rem);
  }

  .section-cta__content {
    max-width: none;
  }

  .section-cta__media {
    justify-self: end;
    width: 100%;
    max-width: 30.5625rem;
    position: relative;
    z-index: 3;
    margin-bottom: clamp(-2rem, -4vw, -5rem);
  }
}

@media (min-width: 1400px) {
  .section-cta-wrap {
    --cta-wave-circle-left: calc(-90.5rem * var(--cta-wave-scale));
    --cta-wave-circle-width: calc(371.17rem * var(--cta-wave-scale));
    --cta-wave-circle-top: 38.875rem;
  }

  .section-cta__inner {
    padding: 8.625rem 5rem 8rem;
  }

  .section-cta__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 30.5625rem);
    column-gap: clamp(3rem, 5vw, 8rem);
  }

  .section-cta__title {
    margin-bottom: 2.5rem;
    font-size: 3.75rem;
    line-height: 4.0625rem;
  }

  .section-cta__text p {
    font-size: 1.625rem;
    line-height: 2rem;
  }

  .section-cta__content .btn-pill {
    margin-top: 1.25rem;
  }
}

@media (min-width: 1700px) {
  .section-cta__layout {
    grid-template-columns: minmax(0, 48.3125rem) 30.5625rem;
    column-gap: 21.0625rem;
  }

  .section-cta__content {
    max-width: 48.3125rem;
  }

  .section-cta__text {
    max-width: 47.25rem;
  }
}

/* Footer – Figma @ 1920: logo + links bottom-aligned */
.site-footer {
  position: relative;
  z-index: 3;
  background-color: transparent;
  color: var(--color-calm-sand);
  overflow: visible;
}

.section-cta-wrap .site-footer {
  background-color: transparent;
}

.site-footer__inner {
  display: flex;
  align-items: flex-end;
  min-height: clamp(10rem, 16vw, 14rem);
  padding: clamp(2rem, 4vw, 3rem) var(--container-padding)
    clamp(2.75rem, 4.5vw, 4.25rem);
}

.site-footer__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: flex-end;
  gap: 1.5rem;
  width: 100%;
}

.site-footer__link--start {
  justify-self: start;
}

.site-footer__link--end {
  justify-self: end;
}

.site-footer__brand {
  grid-column: 2;
  justify-self: center;
  align-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.site-footer__logo {
  display: block;
  width: min(100%, 12.5rem);
  height: auto;
  max-height: none;
}

/* AOS – subtil, damit Overflow-Wrapper (z. B. work-wise-wrap) nicht clippen */
[data-aos='fade-up'] {
  transform: translate3d(0, 1.5rem, 0);
}

[data-aos='fade-down'] {
  transform: translate3d(0, -1.5rem, 0);
}

[data-aos='fade-right'] {
  transform: translate3d(-1.5rem, 0, 0);
}

[data-aos='fade-left'] {
  transform: translate3d(1.5rem, 0, 0);
}

/* Nur Opacity – kein transform (Hero, Layout-Positionierung bleibt stabil) */
[data-aos='fade'] {
  transform: none !important;
  transition-property: opacity !important;
}

[data-aos='fade'].aos-animate {
  transform: none !important;
}

/* Go to top */
.go-top {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  /* Über Section-Wrappern (z. B. work-wise-wrap) und Header, unter Page-Loader */
  z-index: 9990;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8125rem;
  height: 2.8125rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  line-height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.5rem);
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease;
}

.go-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.go-top__icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.go-top.is-visible:hover,
.go-top.is-visible:focus-visible {
  transform: translateY(-0.15rem);
  outline: none;
}

.go-top.is-visible:focus-visible {
  box-shadow: 0 0 0 2px var(--color-source-green);
}

@media (min-width: 768px) {
  .go-top {
    right: max(1.5rem, env(safe-area-inset-right, 0px));
    bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
    width: 3.25rem;
    height: 3.25rem;
  }
}

.site-footer__link {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.3;
  transition: color 0.2s ease;
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
  color: var(--color-source-green);
}

@media (max-width: 449.98px) {
  .site-footer__bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 1.25rem;
    row-gap: 2.5rem;
  }

  .site-footer__brand {
    flex: 0 0 100%;
    order: -1;
    justify-content: center;
    align-self: center;
    margin-bottom: 0.5rem;
  }

  .site-footer__link--start,
  .site-footer__link--end {
    justify-self: auto;
  }
}

@media (min-width: 768px) {
  .site-footer__link {
    font-size: 1.0625rem;
  }

  .site-footer__logo {
    width: min(100%, 15rem);
  }
}

@media (min-width: 1400px) {
  .site-footer__inner {
    min-height: 14rem;
    padding: 3rem 5rem 4.25rem;
  }

  .site-footer__logo {
    width: 18.5rem;
  }

  .site-footer__link {
    font-size: 1.625rem;
    line-height: 2.125rem;
  }
}

/* Was ich anbiete – Hero: Text links, Titel + Bild rechts */
.page-offer {
  background-color: var(--color-calm-sand);
}

/* Typo-Skala: Mobile 15 / Tablet 18 / Desktop Copy 24 · Hero+CTA 26 */
.page-offer .work-section__text,
.page-offer .work-text-link {
  line-height: 1.4rem;
}

.page-offer .work-accordion {
  --work-accordion-gap: 1.5rem;
}

@media (min-width: 768px) {
  .page-offer .work-section__text,
  .page-offer .work-text-link {
    font-size: 1.125rem;
  }
}

.offer-hero {
  position: relative;
  overflow: visible;
  background-color: var(--color-calm-sand);
  color: var(--color-deep-forest);
}

.offer-hero__inner {
  padding: var(--site-header-clearance) var(--container-padding)
    calc(var(--moments-arc-rise) + clamp(5rem, 9vw, 8rem));
}

.offer-hero__layout {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

.offer-hero__aside {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  justify-items: start;
}

.offer-hero__title {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  font-family: var(--font-headline);
  font-size: clamp(2.5rem, 5vw, 5rem);
  font-weight: 300;
  line-height: 1.075;
}

.offer-hero__media {
  margin: 0;
  width: min(100%, 22rem);
}

.offer-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 986 / 1176;
  object-fit: cover;
  object-position: center;
}

.offer-hero__content {
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
  min-width: 0;
}

.offer-hero__content p {
  margin: 0;
}

.offer-hero__content p + p {
  margin-top: 1.5rem;
}

.offer-hero__content strong {
  font-weight: 500;
}

.offer-hero__ways {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.offer-hero__content .offer-hero__ways-title {
  margin: 0;
  font-weight: 500;
}

.offer-hero__ways-list li + li {
  margin-top: 0.625rem;
}

.offer-hero__ways-list .work-text-link:hover .work-text-link__text,
.offer-hero__ways-list .work-text-link:focus-visible .work-text-link__text {
  color: var(--color-forest-olive);
}

@media (max-width: 1199.98px) {
  .offer-hero__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .offer-hero__aside {
    order: 2;
    width: 100%;
    max-width: none;
    padding-top: 0;
    justify-items: start;
  }

  .offer-hero__content {
    order: 1;
    max-width: none;
    padding-top: 0;
  }

  .offer-hero__media {
    width: min(100%, 26rem);
    max-width: 100%;
    margin-top: 0;
    transform: none;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .offer-hero__content {
    font-size: 1.125rem;
  }

  .offer-hero__media {
    width: min(100%, 28rem);
  }
}

@media (min-width: 1200px) {
  .offer-hero__layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    column-gap: clamp(2rem, 4vw, 5rem);
    align-items: start;
  }

  .offer-hero__content {
    max-width: 42rem;
    padding-top: clamp(3rem, 6vw, 6rem);
    font-size: 1.625rem;
    line-height: 2rem;
  }

  .offer-hero__aside {
    justify-items: end;
    justify-self: end;
    width: 100%;
    max-width: 30rem;
    min-width: 0;
    padding-top: clamp(3rem, 6vw, 6rem);
  }

  .offer-hero__media {
    width: 100%;
    max-width: 28rem;
    margin-top: clamp(2rem, 4vw, 4rem);
    transform: none;
  }

  .offer-hero__ways-list .work-text-link {
    font-size: 1.625rem;
    line-height: 2rem;
  }
}

@media (min-width: 1400px) {
  .offer-hero__inner {
    padding: max(14rem, var(--site-header-clearance)) 5rem
      calc(var(--moments-arc-rise) + clamp(5rem, 9vw, 8rem));
  }

  .offer-hero__layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: clamp(3rem, 6vw, 8rem);
  }

  .offer-hero__content {
    max-width: 40rem;
    padding-top: 8rem;
    font-size: 1.625rem;
    line-height: 2rem;
  }

  .offer-hero__aside {
    max-width: 32rem;
    padding-top: 8rem;
  }

  .offer-hero__media {
    max-width: 30.8125rem;
    margin-top: 10rem;
    transform: translateX(-4rem);
  }

  .offer-hero__ways-list .work-text-link {
    font-size: 1.625rem;
    line-height: 2rem;
  }
}

@media (min-width: 1700px) {
  .offer-hero__media {
    transform: translateX(-8rem);
  }
}

/* Was ich anbiete – Visionssuche: Sand-BG, grüner Kreis bis Begleitung */
.offer-vision {
  --offer-vision-circle-top: clamp(3.5rem, 7vw, 9rem);
  --offer-vision-circle-left: 30%;
  --offer-vision-circle-size: calc(var(--moments-r) * 3.15);

  position: relative;
  color: var(--color-deep-forest);
  background-color: var(--color-calm-sand);
  overflow-x: clip;
}

.offer-vision__arc {
  position: absolute;
  top: calc(-1 * var(--moments-arc-rise));
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.offer-vision__arc-circle {
  position: absolute;
  top: var(--offer-vision-circle-top);
  left: var(--offer-vision-circle-left);
  width: var(--offer-vision-circle-size);
  height: var(--offer-vision-circle-size);
  margin-left: calc(var(--offer-vision-circle-size) / -2);
  border-radius: 50%;
  background-color: var(--color-source-green);
}

/* <1200: Wasserfall unter dem Hero-Foto (Desktop-Illu unverändert ≥1200) */
.offer-hero__illustration {
  display: none;
  width: auto;
  max-width: min(100%, 24rem);
  height: clamp(15rem, 52vw, 23rem);
  margin: 0;
  pointer-events: none;
}

@media (max-width: 1199.98px) {
  .offer-hero__illustration {
    display: block;
    justify-self: center;
    margin-top: clamp(-3.5rem, -7vw, -2rem);
  }

  .offer-vision__illustration {
    display: none;
  }

  /* Weniger Luft unter der Illu bis zum Kreis */
  .offer-hero__inner {
    padding-bottom: calc(
      var(--moments-arc-rise) * 0.55 + clamp(1.25rem, 3vw, 2.25rem)
    );
  }

  .offer-hero__aside {
    gap: clamp(0.5rem, 1.5vw, 1rem);
    justify-items: stretch;
  }

  .offer-hero__media {
    justify-self: start;
  }

  .offer-vision {
    --offer-vision-circle-top: clamp(1.75rem, 4vw, 4rem);
  }

  /* Mehr Abstand vom Kreis zur Überschrift Visionssuche */
  .offer-vision__intro {
    margin-top: clamp(2.5rem, 6vw, 5rem);
  }

  .offer-vision__intro-content {
    max-width: none;
    padding-right: 0;
  }
}

.offer-vision__illustration {
  position: absolute;
  z-index: 2;
  top: calc(
    var(--offer-vision-circle-top) - var(--moments-arc-rise) -
      clamp(8rem, 14vw, 12rem)
  );
  right: clamp(1.25rem, 8vw, 9rem);
  left: auto;
  width: auto;
  height: clamp(22rem, 42vw, 36rem);
  pointer-events: none;
}

/* Mid desktop: keep clear of copy – smaller, further right */
@media (max-width: 1599.98px) and (min-width: 1200px) {
  .offer-vision__illustration {
    top: calc(
      var(--offer-vision-circle-top) - var(--moments-arc-rise) -
        clamp(7rem, 11vw, 10rem)
    );
    right: clamp(0.25rem, 1.5vw, 1.25rem);
    height: clamp(16rem, 26vw, 24rem);
  }

  .offer-vision__intro-content {
    max-width: min(48rem, calc(100% - 12rem));
  }
}

.offer-vision__body {
  position: relative;
  z-index: 1;
  background-color: transparent;
}

.offer-vision__inner {
  padding: 0 var(--container-padding) clamp(4rem, 8vw, 8rem);
}

.offer-vision__intro {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(-4rem, -7vw, -2.5rem);
}

.offer-vision__intro-content {
  display: grid;
  gap: clamp(2rem, 4vw, 3.25rem);
  max-width: 55.75rem;
}

.offer-vision__intro-content .work-section__text p + p {
  margin-top: 1.5rem;
}

.offer-vision__question {
  margin: 0;
  text-align: left;
  font-family: var(--font-headline);
  font-size: clamp(1.75rem, 3.5vw, 3.75rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.offer-vision__question em {
  font-style: italic;
}

.offer-vision .work-section__title,
.offer-vision-define .work-section__title,
.offer-vision-way .work-section__title {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
}

/* Was ist eine Visionssuche – eigene Sektion */
.offer-vision-define {
  position: relative;
  z-index: 1;
  overflow: hidden;
  color: var(--color-calm-sand);
  background-color: var(--color-deep-forest);
}

.offer-vision-define__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.offer-vision-define__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.offer-vision-define__overlay {
  position: absolute;
  inset: 0;
  background: rgb(27 29 35 / 0.42);
}

.offer-vision-define__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  justify-items: center;
  max-width: 72rem;
  margin-inline: auto;
  padding: clamp(9rem, 18vw, 16rem) var(--container-padding);
  text-align: center;
}

.offer-vision-define .work-section__title {
  color: #fff;
  max-width: 100%;
}

.offer-vision-define .work-section__title em {
  font-style: italic;
}

.offer-vision-define .work-section__text {
  color: #fff;
  max-width: 62rem;
}

/* Drei Schritte + Begleitung */
.offer-vision-way {
  --offer-way-circle-size: calc(var(--moments-r) * 2.85);
  --offer-way-circle-right: clamp(-140%, -92vw, -88%);
  --offer-way-circle-top: clamp(58%, 70%, 78%);

  position: relative;
  z-index: 1;
  color: var(--color-deep-forest);
  background-color: var(--color-calm-sand);
  overflow-x: clip;
}

.offer-vision-way__arc {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.offer-vision-way__arc-circle {
  position: absolute;
  top: var(--offer-way-circle-top);
  right: var(--offer-way-circle-right);
  left: auto;
  width: var(--offer-way-circle-size);
  height: var(--offer-way-circle-size);
  border-radius: 50%;
  background-color: var(--color-source-green);
}

.offer-vision-way__inner {
  position: relative;
  z-index: 1;
  padding: clamp(4rem, 9vw, 9rem) var(--container-padding)
    clamp(5rem, 10vw, 10rem);
}

.offer-vision__path {
  margin-top: 0;
}

.offer-vision__path > .work-section__title {
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.offer-vision__steps {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

.offer-vision__step {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  max-width: none;
  width: 100%;
}

.offer-vision__step-content {
  display: grid;
  gap: 0;
  align-content: start;
}

.offer-vision__step-media {
  margin: 0;
  width: 100%;
  overflow: hidden;
}

.offer-vision__step-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  object-position: center;
}

.offer-vision__step-number {
  display: block;
  margin-bottom: 1rem;
  font-family: var(--font-headline);
  font-size: clamp(2.5rem, 4vw, 3.75rem);
  font-weight: 300;
  line-height: 1;
  color: var(--color-forest-olive);
}

.offer-vision__step-title {
  margin: 0 0 1rem;
  font-family: var(--font-headline);
  font-size: clamp(1.375rem, 2.5vw, 2.25rem);
  font-weight: 400;
  line-height: 1.2;
}

.offer-vision__step .work-section__text {
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
}

.offer-vision__companion {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  margin-top: clamp(4.5rem, 10vw, 9rem);
}

.offer-vision__companion-media {
  order: 2;
  margin: 0;
  width: min(100%, 20rem);
  aspect-ratio: 1;
  justify-self: center;
  border-radius: 50%;
  overflow: hidden;
}

.offer-vision__companion-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.offer-vision__companion-content {
  order: 1;
}

.offer-vision__companion-content > .work-section__title {
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

@media (min-width: 768px) {
  .offer-vision__step .work-section__text {
    font-size: 1.125rem;
  }
}

@media (min-width: 992px) {
  .offer-vision__step {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.9fr);
    column-gap: clamp(2.5rem, 6vw, 5rem);
  }

  .offer-vision__step:nth-child(even) {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.05fr);
  }

  .offer-vision__step:nth-child(even) .offer-vision__step-content {
    order: 2;
  }

  .offer-vision__step:nth-child(even) .offer-vision__step-media {
    order: 1;
  }

  .offer-vision__step-media {
    max-width: 32rem;
    justify-self: end;
  }

  .offer-vision__step:nth-child(even) .offer-vision__step-media {
    justify-self: start;
  }

  .offer-vision__steps {
    gap: clamp(3.5rem, 7vw, 6rem);
  }

  .offer-vision__companion {
    grid-template-columns: minmax(0, 28rem) minmax(0, 1fr);
    column-gap: clamp(3rem, 8vw, 11rem);
  }

  .offer-vision__companion-media {
    order: 0;
    width: min(100%, 28rem);
    justify-self: start;
  }

  .offer-vision__companion-content {
    order: 0;
    max-width: 47.75rem;
  }
}

@media (min-width: 1400px) {
  .offer-vision__inner,
  .offer-vision-define__inner,
  .offer-vision-way__inner {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .offer-vision__intro-content .work-section__text,
  .offer-vision-define .work-section__text,
  .offer-vision__step .work-section__text,
  .offer-vision__companion .work-section__text {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

/* Was ich anbiete – Gedicht-Slider + Stimmen (olivgrün) */
.offer-dark {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  background-color: var(--color-forest-olive);
  color: var(--color-calm-sand);
}

/* Bild + Fade nur hinter dem Gedicht – Fade unten immer sichtbar */
.offer-dark__bg {
  grid-row: 1;
  grid-column: 1;
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  pointer-events: none;
  overflow: hidden;
  align-self: stretch;
}

.offer-dark__photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.16;
}

.offer-dark__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(101, 104, 51, 0.1) 0%,
    rgba(101, 104, 51, 0.18) 40%,
    rgba(101, 104, 51, 0.5) 68%,
    var(--color-forest-olive) 88%,
    var(--color-forest-olive) 100%
  );
}

.offer-poem {
  grid-row: 1;
  grid-column: 1;
  position: relative;
  z-index: 1;
}

.offer-voices {
  grid-row: 2;
  grid-column: 1;
  position: relative;
  z-index: 1;
}

.offer-poem__inner {
  padding: clamp(4rem, 8vw, 8rem) var(--container-padding)
    clamp(2rem, 4vw, 3rem);
}

.offer-poem__slider {
  max-width: 62rem;
  margin-inline: auto;
}

.offer-poem__track {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.offer-poem__track::-webkit-scrollbar {
  display: none;
}

.offer-poem__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: flex;
  justify-content: center;
  padding: 0 0.25rem;
}

.offer-poem__quote {
  margin: 0;
  padding: 0;
  border: 0;
  text-align: center;
}

.offer-poem__quote p {
  margin: 0;
}

.offer-poem__quote p + p {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

.offer-poem__poem-title {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
  font-size: clamp(2rem, 3.5vw, 3.25rem);
}

.offer-poem__quote--pt {
  font-family: var(--font-headline);
  font-style: italic;
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: 0.005em;
}

.offer-poem__quote--pt .offer-poem__poem-title {
  font-style: italic;
}

.offer-poem__quote--de {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1.8vw, 1.625rem);
  font-weight: 300;
  line-height: 1.6;
}

.offer-poem__quote--de .offer-poem__poem-title {
  font-family: var(--font-headline);
  font-style: normal;
}

.offer-poem__quote cite {
  display: block;
  margin-top: clamp(1.75rem, 3.5vw, 3rem);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.offer-poem__quote cite span {
  font-weight: 300;
  opacity: 0.85;
}

.offer-poem__nav {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.offer-poem__dot {
  position: relative;
  padding-bottom: 0.375rem;
  font-family: var(--font-headline);
  font-size: clamp(1.0625rem, 1.4vw, 1.375rem);
  font-weight: 400;
  color: var(--color-calm-sand);
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

.offer-poem__dot::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: currentColor;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.offer-poem__dot:hover,
.offer-poem__dot:focus-visible {
  opacity: 0.85;
}

.offer-poem__dot.is-active {
  opacity: 1;
}

.offer-poem__dot.is-active::after {
  opacity: 1;
}

@media (min-width: 1400px) {
  .offer-poem__quote cite {
    font-size: 1.125rem;
  }
}

/* Was ich anbiete – Sand-Bereich mit grünem Kreis */
.offer-sand-wave {
  --offer-wave-scale: 0.82;
  --offer-wave-circle-left: calc(-41.146vw * var(--offer-wave-scale) + 4rem);
  --offer-wave-circle-width: calc(208.333vw * var(--offer-wave-scale));
  --offer-wave-circle-top: clamp(20rem, 30vw, 36rem);

  position: relative;
  background-color: var(--color-calm-sand);
  color: var(--color-deep-forest);
  overflow: hidden;
}

.offer-sand-wave__shape {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.offer-sand-wave__circle {
  position: absolute;
  top: var(--offer-wave-circle-top);
  left: var(--offer-wave-circle-left);
  width: var(--offer-wave-circle-width);
  max-width: none;
  height: auto;
  aspect-ratio: 3783.58 / 4009.32;
}

@media (min-width: 1400px) {
  .offer-sand-wave {
    --offer-wave-circle-left: calc(
      -49.375rem * var(--offer-wave-scale) + 10rem
    );
    --offer-wave-circle-width: calc(250rem * var(--offer-wave-scale));
    --offer-wave-circle-top: 36rem;
  }
}

/* Was ich anbiete – Angebots-Sektionen */
.offer-program {
  position: relative;
  z-index: 1;
  overflow-x: clip;
  overflow-y: visible;
  background-color: transparent;
  color: var(--color-deep-forest);
}

.offer-program__inner {
  padding: clamp(4rem, 8vw, 8rem) var(--container-padding);
}

.offer-program__head {
  max-width: 60rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.offer-program__head--in-stage {
  max-width: none;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.offer-program__kicker {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-forest-olive);
}

.offer-program__title {
  margin: 0;
  font-family: var(--font-headline);
  font-size: clamp(2rem, 4vw, 3.75rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.offer-program__title em {
  font-style: italic;
}

.offer-program__tagline {
  margin: clamp(0.75rem, 1.5vw, 1.25rem) 0 0;
  font-size: clamp(1.0625rem, 1.5vw, 1.625rem);
  font-weight: 300;
  line-height: 1.5;
}

.offer-program__date {
  margin: clamp(0.75rem, 1.5vw, 1.25rem) 0 0;
  font-size: clamp(0.9375rem, 1.2vw, 1.25rem);
  font-weight: 500;
  line-height: 1.5;
}

.offer-program__date a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.offer-program__date a:hover,
.offer-program__date a:focus-visible {
  color: var(--color-forest-olive);
}

.offer-program__stage {
  display: grid;
  gap: 2.5rem;
}

/* Stacked: text first, image below (incl. flip sections like Marokko / Medizin) */
.offer-program__stage .offer-program__content {
  order: 1;
}

.offer-program__stage .offer-program__visual {
  order: 2;
}

.offer-program__content {
  display: grid;
  gap: 1.5rem;
  max-width: 50rem;
}

.offer-program__content .work-section__text p + p {
  margin-top: 1rem;
}

.offer-program__content .work-section__text strong {
  font-weight: 600;
}

.offer-program__content a:not(.btn) {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.offer-program__content a:not(.btn):hover,
.offer-program__content a:not(.btn):focus-visible {
  color: var(--color-forest-olive);
}

.offer-program__place {
  font-weight: 500;
  letter-spacing: 0.02em;
}

.offer-program__list {
  display: grid;
  gap: 0.625rem;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
}

.offer-program__list li {
  position: relative;
  padding-left: 1.25rem;
}

.offer-program__list li::before {
  content: '–';
  position: absolute;
  left: 0;
  top: 0;
  color: currentColor;
  font-weight: 300;
  line-height: inherit;
}

.offer-program__visual {
  position: relative;
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  align-content: start;
  overflow: visible;
}

.offer-program__media-wrap {
  position: relative;
  width: 100%;
  max-width: 30.8125rem;
  justify-self: center;
  overflow: visible;
}

.offer-program__media {
  margin: 0;
  width: 100%;
}

.offer-program__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

.offer-program__media--tall img {
  aspect-ratio: 3 / 4;
  min-height: clamp(22rem, 42vw, 38rem);
}

.offer-program__media--portrait {
  max-width: 25.75rem;
}

.offer-program__media--portrait img {
  aspect-ratio: 3 / 4;
  object-position: center 70%;
}

/* Illu überlappt das Foto (unten mittig), nicht neben dem Text */
.offer-program__illu {
  position: absolute;
  z-index: 2;
  left: 50%;
  right: auto;
  top: auto;
  bottom: -28%;
  width: min(88%, 22rem);
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
}

.offer-program__stage--flip .offer-program__illu {
  left: 50%;
  right: auto;
}

@media (max-width: 991.98px) {
  .offer-program__inner {
    padding-bottom: clamp(6rem, 16vw, 10rem);
  }
}

.offer-program__deko {
  width: min(55%, 15rem);
  height: auto;
  justify-self: end;
  margin-right: clamp(0.5rem, 2vw, 2rem);
}

.offer-program__deko--schwelle {
  width: min(60%, 17rem);
}

/* Varianten: olivgrün + hellgrün */
.offer-program--olive {
  background-color: var(--color-forest-olive);
  color: var(--color-calm-sand);
}

.offer-program--olive .offer-program__kicker {
  color: var(--color-source-green);
}

.offer-program--olive .offer-program__date a:hover,
.offer-program--olive .offer-program__date a:focus-visible,
.offer-program--olive .offer-program__content a:not(.btn):hover,
.offer-program--olive .offer-program__content a:not(.btn):focus-visible {
  color: var(--color-source-green);
}

.offer-program--olive .work-text-link {
  color: var(--color-calm-sand);
}

.offer-program--green {
  background-color: var(--color-source-green);
  color: var(--color-deep-forest);
}

.offer-program--green .work-text-link__dot {
  background-color: var(--color-forest-olive);
}

@media (min-width: 768px) {
  .offer-program__list {
    font-size: 1.125rem;
  }
}

@media (min-width: 992px) {
  .offer-program__stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 30.8125rem);
    column-gap: clamp(3rem, 8vw, 11rem);
    align-items: start;
  }

  .offer-program__stage--flip {
    grid-template-columns: minmax(0, 30.8125rem) minmax(0, 1fr);
  }

  .offer-program__stage--flip .offer-program__content {
    order: 2;
  }

  .offer-program__stage--flip .offer-program__visual {
    order: 1;
    align-self: start;
  }

  .offer-program__stage--content-head {
    align-items: start;
  }

  .offer-program__stage--content-head .offer-program__visual {
    align-self: start;
  }

  .offer-program__visual {
    padding-top: 0.5rem;
  }

  .offer-program__media-wrap {
    justify-self: end;
  }

  .offer-program__stage--flip .offer-program__media-wrap {
    justify-self: start;
  }

  /* Side-by-side Tablet: Illu höher, nicht in die nächste Sektion */
  .offer-program__illu {
    left: auto;
    right: -12%;
    bottom: -30%;
    width: 92%;
    transform: none;
  }

  .offer-program__stage--flip .offer-program__illu {
    left: -12%;
    right: auto;
  }

  .offer-program__stage--flip .offer-program__deko {
    justify-self: start;
    margin-left: clamp(0.5rem, 2vw, 2rem);
    margin-right: 0;
  }
}

@media (min-width: 1400px) {
  /* Desktop: Illu tiefer am Foto */
  .offer-program__illu {
    bottom: -38%;
  }

  .offer-program__inner {
    padding: 8rem 5rem;
  }

  .offer-program__content {
    max-width: 55.75rem;
  }

  .offer-program__content .work-section__text {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .offer-program__content .work-text-link {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .offer-program__list {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .offer-program__title {
    font-size: 3.75rem;
    line-height: 4.0625rem;
  }
}

/* Was ich anbiete – 1:1 Naturcoaching */
.offer-coaching__steps {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

.offer-coaching__step {
  position: relative;
  padding-left: clamp(3.25rem, 5vw, 4.25rem);
}

.offer-coaching__step-number {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.25rem, 3vw, 2.75rem);
  height: clamp(2.25rem, 3vw, 2.75rem);
  border: 2px solid var(--color-forest-olive);
  border-radius: 50%;
  font-family: var(--font-headline);
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  font-weight: 400;
  line-height: 1;
  color: var(--color-forest-olive);
  box-sizing: border-box;
}

.offer-coaching__step-number > span {
  /* Optical centering for Rodney numerals */
  transform: translate(-0.02em, -0.1em);
}

.offer-coaching__step-title {
  margin: 0 0 0.5rem;
  padding-top: 0.375rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4rem;
}

.offer-coaching__step-title span {
  font-weight: 300;
  white-space: nowrap;
}

.offer-coaching__step p {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
}

.offer-coaching.offer-program--olive .offer-coaching__step-number {
  border-color: var(--color-source-green);
  color: var(--color-source-green);
}

.offer-coaching.offer-program--olive .offer-coaching__step-title {
  color: var(--color-calm-sand);
}

.offer-coaching.offer-program--olive .work-section__text strong {
  color: var(--color-calm-sand);
}

/* Was ich anbiete – Termin & Erstkontakt */
.offer-cta {
  position: relative;
  z-index: 1;
  background-color: var(--color-calm-sand);
  color: var(--color-deep-forest);
}

.offer-cta__inner {
  padding: clamp(4rem, 8vw, 8rem) var(--container-padding)
    clamp(1.5rem, 3vw, 2.5rem);
}

.offer-cta__row {
  --bs-gutter-x: clamp(1.5rem, 3vw, 2.5rem);
  --bs-gutter-y: clamp(2rem, 4vw, 3rem);
}

.offer-cta__media {
  margin: 0 auto;
  width: min(100%, 18rem);
}

.offer-cta__portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center center;
}

.offer-cta__content {
  max-width: 40rem;
  text-align: left;
}

.offer-cta__title {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  font-family: var(--font-headline);
  font-size: clamp(1.75rem, 3.5vw, 3.75rem);
  font-weight: 400;
  line-height: 1.08;
}

.offer-cta__text {
  margin: 0;
}

.offer-cta__text p {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
}

.offer-cta__content .btn-pill {
  margin-top: 1.5rem;
}

@media (min-width: 768px) {
  .offer-coaching__step-title,
  .offer-coaching__step p {
    font-size: 1.125rem;
  }

  .offer-cta__text p {
    font-size: 1.125rem;
  }
}

@media (min-width: 992px) {
  .offer-cta__media {
    margin: 0 0 0 auto;
    width: min(100%, 22rem);
  }

  .offer-cta__content {
    max-width: none;
  }
}

@media (min-width: 1400px) {
  .offer-coaching__step-title,
  .offer-coaching__step p {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .offer-cta__inner {
    padding: 8rem 5rem 2.5rem;
  }

  .offer-cta__media {
    width: 24rem;
  }

  .offer-cta__title {
    margin-bottom: 2.5rem;
    font-size: 3.75rem;
    line-height: 4.0625rem;
  }

  .offer-cta__text p {
    font-size: 1.625rem;
    line-height: 2rem;
  }

  .offer-cta__content .btn-pill {
    margin-top: 2.5rem;
  }
}

/* Was ich anbiete – Abschlusszitat + Footer (oliver Kreis) */
.offer-end {
  --offer-end-scale: 0.82;
  --offer-end-circle-left: calc(-105vw * var(--offer-end-scale));
  --offer-end-circle-width: calc(309vw * var(--offer-end-scale));
  --offer-end-circle-top: clamp(4rem, 10vw, 10rem);

  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: var(--color-calm-sand);
  color: var(--color-deep-forest);
}

.offer-end__shape {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.offer-end__circle {
  position: absolute;
  top: var(--offer-end-circle-top);
  left: var(--offer-end-circle-left);
  width: var(--offer-end-circle-width);
  max-width: none;
  height: auto;
  aspect-ratio: 5938.67 / 6292.99;
}

.offer-closing {
  position: relative;
  z-index: 1;
}

.offer-closing__inner {
  display: flex;
  justify-content: center;
  padding: clamp(10rem, 24vw, 22rem) var(--container-padding)
    clamp(3rem, 6vw, 5rem);
}

.offer-closing__quote {
  margin: 0;
  padding: 0;
  border: 0;
  max-width: 62rem;
  font-family: var(--font-headline);
  font-size: clamp(1.75rem, 3.5vw, 4.25rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-align: center;
  color: #fff;
}

.offer-closing__quote p {
  margin: 0;
}

.offer-closing__quote span {
  display: block;
}

.offer-closing__quote em {
  font-style: italic;
}

.offer-closing__quote cite {
  display: block;
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 1.2vw, 1.125rem);
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0.02em;
}

.offer-end .site-footer {
  position: relative;
  z-index: 1;
  background-color: transparent;
}

.page-offer .offer-end .site-footer {
  color: var(--color-calm-sand);
}

.offer-end .site-footer__link {
  color: #fff;
}

.offer-end .site-footer__link:hover,
.offer-end .site-footer__link:focus-visible {
  color: var(--color-source-green);
}

@media (min-width: 1400px) {
  .offer-end {
    --offer-end-circle-left: calc(-130rem * var(--offer-end-scale));
    --offer-end-circle-width: calc(371rem * var(--offer-end-scale));
    --offer-end-circle-top: 10rem;
  }

  .offer-closing__inner {
    padding-top: 24rem;
  }
}

/* Mein Netzwerk – Oliv-Hero, klar anders als Angebot */
.page-network {
  background-color: var(--color-calm-sand);
}

.network-hero {
  position: relative;
  overflow: visible;
  background-color: var(--color-forest-olive);
  color: var(--color-calm-sand);
}

.network-hero__inner {
  padding: var(--site-header-clearance) var(--container-padding)
    clamp(11rem, 20vw, 17rem);
}

.network-hero__intro {
  max-width: 48rem;
}

.network-hero__title {
  margin: 0;
  font-family: var(--font-headline);
  font-size: clamp(2.75rem, 6.4vw, 5rem);
  font-weight: 300;
  line-height: 1.075;
  color: #fff;
}

.network-hero__lead {
  margin: clamp(1.25rem, 2.5vw, 2rem) 0 0;
  font-family: var(--font-headline);
  font-size: clamp(1.25rem, 2.4vw, 2.25rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
  color: #fff;
}

.network-hero__top {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  margin-bottom: 0;
}

.network-hero__content {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
  max-width: 38rem;
}

.network-hero__content p {
  margin: 0;
}

.network-hero__content p + p {
  margin-top: 1.5rem;
}

.network-hero__visual {
  position: relative;
  width: min(100%, 22rem);
  justify-self: center;
  overflow: visible;
}

.network-hero__media {
  margin: 0;
  width: 100%;
}

.network-hero__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
}

.network-hero__illustration {
  position: absolute;
  left: 58%;
  top: 54%;
  z-index: 2;
  display: block;
  width: 88%;
  height: auto;
  margin: 0;
  pointer-events: none;
}

@media (min-width: 768px) {
  .network-hero__content {
    font-size: 1.125rem;
  }

  .network-hero__visual {
    width: min(100%, 26rem);
  }

  .network-person__text {
    font-size: 1.125rem;
  }
}

@media (min-width: 992px) {
  .network-hero__top {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(3rem, 6vw, 7rem);
    align-items: start;
  }

  .network-hero__visual {
    width: 100%;
    max-width: 28rem;
    justify-self: start;
    margin-inline-start: clamp(1rem, 2vw, 2rem);
  }

  .network-hero__content {
    font-size: 1.125rem;
    line-height: 1.4rem;
  }

  .network-hero__illustration {
    left: 54%;
    top: 52%;
    width: 98%;
  }
}

@media (min-width: 1200px) {
  .network-hero__content {
    font-size: 1.625rem;
    line-height: 2rem;
  }
}

@media (min-width: 1400px) {
  .network-hero__inner {
    padding-top: clamp(15rem, 32vw, 22rem);
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .network-hero__content {
    font-size: 1.625rem;
    line-height: 2rem;
  }
}

/* Person sections */
.network-person {
  position: relative;
  z-index: 1;
}

.network-person__inner {
  padding: clamp(4rem, 9vw, 8rem) var(--container-padding);
}

.network-person__layout {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
  min-width: 0;
}

.network-person__portrait {
  margin: 0;
  width: min(100%, 22rem);
  max-width: 100%;
  min-width: 0;
  justify-self: center;
}

.network-person__portrait img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  filter: grayscale(1);
}

.network-person__content {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  min-width: 0;
  text-align: left;
}

.network-person__name {
  margin: 0;
  font-family: var(--font-headline);
  font-size: clamp(1.75rem, 3.5vw, 3.75rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.network-person__text {
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
}

.network-person__text p {
  margin: 0;
}

.network-person__text p + p {
  margin-top: 1.25rem;
}

.network-person__deco {
  display: block;
  width: min(100%, 11rem);
  height: auto;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  opacity: 0.9;
}

/* Sand sections on page background */
.network-person--sand-filled {
  background-color: var(--color-calm-sand);
  color: var(--color-deep-forest);
}

.network-person--deco .network-person__inner {
  position: relative;
  padding-bottom: clamp(5rem, 10vw, 9rem);
}

/* Sand + olive band with circle */
.network-sand-wave {
  --network-wave-scale: 0.82;
  --network-wave-circle-left: calc(
    -41.146vw * var(--network-wave-scale) + 4rem
  );
  --network-wave-circle-width: calc(208.333vw * var(--network-wave-scale));
  --network-wave-circle-top: clamp(1rem, 6vw, 10rem);

  position: relative;
  background-color: var(--color-calm-sand);
  color: var(--color-deep-forest);
  overflow: hidden;
}

.network-sand-wave__shape {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.network-sand-wave__circle {
  position: absolute;
  top: var(--network-wave-circle-top);
  left: var(--network-wave-circle-left);
  width: var(--network-wave-circle-width);
  max-width: none;
  height: auto;
  aspect-ratio: 3783.58 / 4009.32;
  background-color: var(--color-source-green);
  background-image: var(--grain-image);
  background-repeat: repeat;
  background-size: var(--grain-size);
  background-attachment: scroll;
  -webkit-mask-image: url('/assets/images/home/trust-circle.svg');
  mask-image: url('/assets/images/home/trust-circle.svg');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/*
  Mobile + Tablet: Kreis bis zum unteren Rand –
  Kurve sichtbar, Fläche füllt komplett nach unten.
*/
@media (max-width: 1399.98px) {
  .network-sand-wave {
    --network-wave-circle-top: 12%;
    --network-wave-circle-left: 50%;
    --network-wave-circle-width: 240vw;
  }

  .network-sand-wave__circle {
    top: var(--network-wave-circle-top);
    right: auto;
    bottom: -8%;
    left: 50%;
    width: var(--network-wave-circle-width);
    height: auto;
    min-height: calc(100% - var(--network-wave-circle-top) + 8%);
    aspect-ratio: auto;
    transform: translateX(-52%);
  }
}

@media (max-width: 767.98px) {
  .network-sand-wave {
    --network-wave-circle-top: 10%;
    --network-wave-circle-width: 280vw;
  }
}

.network-person--sand {
  position: relative;
  z-index: 1;
  background-color: transparent;
}

.network-person--olive {
  position: relative;
  z-index: 1;
  background-color: var(--color-forest-olive);
  color: var(--color-calm-sand);
}

.network-person--olive .network-person__name {
  color: #fff;
}

.network-person--olive .network-person__text {
  color: #fff;
}

.network-person--green {
  position: relative;
  z-index: 1;
  background-color: var(--color-source-green);
  color: var(--color-deep-forest);
}

@media (min-width: 992px) {
  .network-person__layout {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }

  .network-person--reverse .network-person__layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }

  .network-person--reverse .network-person__portrait {
    order: 2;
  }

  .network-person--reverse .network-person__content {
    order: 1;
    padding-left: clamp(1.5rem, 4vw, 4rem);
  }

  .network-person__portrait {
    width: min(100%, 28rem);
    justify-self: end;
  }

  .network-person--reverse .network-person__portrait {
    justify-self: start;
  }

  .network-person__text {
    font-size: 1.125rem;
    line-height: 1.4rem;
    max-width: 36rem;
  }

  .network-person__deco {
    position: absolute;
    right: var(--container-padding);
    bottom: clamp(2rem, 4vw, 3.5rem);
    margin: 0;
    width: min(14rem, 18vw);
  }
}

@media (min-width: 1400px) {
  .network-sand-wave {
    --network-wave-circle-left: calc(
      -49.375rem * var(--network-wave-scale) + 10rem
    );
    --network-wave-circle-width: calc(250rem * var(--network-wave-scale));
    --network-wave-circle-top: 2rem;
  }

  .network-person__inner {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .network-person__name {
    font-size: 3.75rem;
    line-height: 4.0625rem;
  }

  .network-person__text {
    font-size: 1.5rem;
    line-height: 2rem;
    max-width: 47.75rem;
  }

  .network-person__portrait {
    width: min(100%, 32rem);
  }

  .network-closing__inner {
    gap: 2.5rem;
  }
}

/* Abschlusszitat – eigene Oliv-Sektion */
.network-closing {
  position: relative;
  background-color: var(--color-forest-olive);
  color: var(--color-calm-sand);
}

.network-closing__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(5rem, 10vw, 9rem) var(--container-padding);
  text-align: center;
}

.network-closing__quote {
  margin: 0;
  max-width: 62rem;
  font-family: var(--font-headline);
  font-size: clamp(1.75rem, 3.5vw, 4.25rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #fff;
}

.network-closing__quote span {
  display: block;
}

.network-closing__quote em {
  font-style: italic;
  color: #fff;
}

/* Footer – beige, vom Zitat getrennt */
.network-footer {
  background-color: var(--color-calm-sand);
  color: var(--color-deep-forest);
  padding-top: clamp(3.5rem, 7vw, 6rem);
}

.network-footer .site-footer {
  background-color: transparent;
  color: var(--color-deep-forest);
}

.network-footer .site-footer__link {
  color: var(--color-deep-forest);
}

.network-footer .site-footer__link:hover,
.network-footer .site-footer__link:focus-visible {
  color: var(--color-forest-olive);
}

/* Blog */
.page-blog {
  background-color: var(--color-calm-sand);
}

.blog-hero {
  position: relative;
  overflow: visible;
  background-color: var(--color-calm-sand);
  color: var(--color-deep-forest);
}

.blog-hero__inner {
  padding: var(--site-header-clearance) var(--container-padding)
    calc(var(--moments-arc-rise) + clamp(5.5rem, 10vw, 9rem));
}

.blog-hero__top {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  margin-bottom: 0;
}

.blog-hero__intro-col {
  max-width: 48rem;
}

.blog-hero__visual {
  position: relative;
  width: min(100%, 22rem);
  justify-self: center;
  overflow: visible;
}

.blog-hero__media {
  margin: 0;
  width: 100%;
}

.blog-hero__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}

.blog-hero__illustration {
  position: absolute;
  left: 58%;
  top: 54%;
  z-index: 2;
  display: block;
  width: 88%;
  height: auto;
  margin: 0;
  pointer-events: none;
}

.blog-hero__title {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  font-family: var(--font-headline);
  font-size: clamp(2.75rem, 6.4vw, 5rem);
  font-weight: 300;
  line-height: 1.075;
}

.blog-hero__quote {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding: 0;
  border: 0;
  max-width: 42rem;
  font-family: var(--font-headline);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.blog-hero__quote p {
  margin: 0;
}

.blog-hero__quote cite {
  display: block;
  margin-top: clamp(0.75rem, 1.5vw, 1.25rem);
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 1.2vw, 1.125rem);
  font-style: normal;
  font-weight: 300;
}

.blog-hero__intro {
  max-width: 47.75rem;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
}

.blog-hero__intro p {
  margin: 0;
}

.blog-topics {
  /* Oversized circle, shifted past the right edge so the green
     always fills to the right at the section bottom; the curve
     still reads left-weighted at the top. */
  --blog-topics-arc-r: max(110vw, 85rem);
  --blog-topics-arc-overflow: max(28vw, 18rem);
  --blog-topics-content-inset: clamp(6.5rem, 12vw, 10rem);

  position: relative;
  z-index: 1;
  overflow-x: clip;
  background-color: transparent;
  color: var(--color-deep-forest);
}

.blog-topics__arc {
  position: absolute;
  top: calc(-1 * var(--moments-arc-rise));
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.blog-topics__arc-circle {
  position: absolute;
  top: 0;
  right: calc(-1 * var(--blog-topics-arc-overflow));
  left: auto;
  width: calc(var(--blog-topics-arc-r) * 2);
  height: calc(var(--blog-topics-arc-r) * 2);
  margin: 0;
  border-radius: 50%;
  background-color: var(--color-source-green);
}

.blog-topics__body {
  position: relative;
  z-index: 1;
  background-color: transparent;
}

.blog-topics__inner {
  /* Same vertical rhythm as .blog-section__inner top padding */
  padding: 0 var(--container-padding) clamp(4rem, 9vw, 8rem);
}

.blog-topics__bridge {
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  max-width: 47.75rem;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
  /* Position via transform – daher kein AOS (überschreibt transform) */
  transform: translateY(
    calc(-1 * (var(--moments-arc-rise) - var(--blog-topics-content-inset)))
  );
}

.blog-topics__bridge-fade {
  display: block;
}

.blog-topics__categories {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  transform: translateY(
    calc(-1 * (var(--moments-arc-rise) - var(--blog-topics-content-inset)))
  );
  margin-bottom: calc(
    -1 * (var(--moments-arc-rise) - var(--blog-topics-content-inset))
  );
}

.blog-topics__category {
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
}

.blog-topics__category-title {
  margin: 0 0 clamp(0.75rem, 1.5vw, 1.25rem);
  font-family: var(--font-headline);
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.blog-topics__category-text {
  margin: 0;
  max-width: 42rem;
}

.blog-topics__category-link {
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

.blog-topics__category-link.work-text-link {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.blog-topics__category-link .work-text-link__dot {
  background-color: var(--color-forest-olive);
}

.blog-section {
  position: relative;
  scroll-margin-top: clamp(5rem, 10vw, 7rem);
}

.blog-section__inner {
  padding: clamp(4rem, 9vw, 8rem) var(--container-padding);
}

.blog-section--olive {
  background-color: var(--color-forest-olive);
  color: var(--color-calm-sand);
}

.blog-section--sand {
  background-color: var(--color-calm-sand);
  color: var(--color-deep-forest);
}

.blog-section__head {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  max-width: 47.75rem;
}

.blog-section__title {
  margin: 0;
  font-family: var(--font-headline);
  font-size: clamp(1.75rem, 3.5vw, 3.75rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.blog-section__title span {
  display: block;
}

.blog-section__quote {
  margin: clamp(1rem, 2vw, 1.5rem) 0 0;
  padding: 0;
  border: 0;
  font-family: var(--font-headline);
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.25;
  color: var(--color-deep-forest);
}

.blog-section--olive .blog-section__quote {
  color: var(--color-calm-sand);
}

.blog-section__quote cite {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 300;
}

.blog-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
}

.blog-entry {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid rgb(32 31 24 / 0.12);
}

.blog-section--olive .blog-entry {
  border-bottom-color: rgb(234 226 214 / 0.2);
}

.blog-list__item:last-child .blog-entry {
  padding-bottom: 0;
  border-bottom: 0;
}

.blog-entry__content {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1rem);
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
}

.blog-entry__meta {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
  opacity: 0.85;
}

.blog-entry__excerpt {
  margin: 0;
  max-width: 42rem;
}

.blog-entry__title {
  margin: 0;
  font-family: var(--font-headline);
  font-size: clamp(1.5rem, 2.8vw, 2.5rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.blog-entry__title a {
  color: inherit;
  text-decoration: none;
}

.blog-entry__title a:hover,
.blog-entry__title a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.blog-entry__link {
  justify-self: start;
}

.blog-entry__media {
  position: relative;
  overflow: hidden;
  border-radius: 0.25rem;
}

.blog-entry__image-link {
  display: block;
}

.blog-entry__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.blog-entry__link.work-text-link {
  font-size: inherit;
}

.blog-section--olive .work-text-link {
  color: var(--color-calm-sand);
}

.blog-section--olive .work-text-link__dot {
  background-color: var(--color-source-green);
}

@media (min-width: 992px) {
  .blog-entry {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
  }

  .blog-entry__media {
    width: 100%;
    max-width: 36rem;
    justify-self: end;
  }

  .blog-entry--reverse .blog-entry__content {
    order: 2;
  }

  .blog-entry--reverse .blog-entry__media {
    order: 1;
    justify-self: start;
  }
}

/* Blog article */
.page-blog-article {
  --blog-article-arc-rise: clamp(5rem, 14vw, 10rem);
  --blog-article-arc-drop: clamp(0.5rem, 1.5vw, 1.25rem);
  --blog-article-arc-lift: clamp(2rem, 4.5vw, 3.5rem);
  --blog-article-arc-x: 32%;
  --blog-article-arc-r: var(--moments-r);

  background-color: var(--color-calm-sand);
  color: var(--color-deep-forest);
}

.blog-article__hero {
  position: relative;
  z-index: 2;
  overflow-x: clip;
  overflow-y: visible;
  background-color: transparent;
  color: var(--color-calm-sand);
}

.blog-article__hero-inner {
  --blog-article-gap: clamp(5.5rem, 11vw, 9rem);
  position: relative;
  z-index: 2;
  padding: var(--site-header-clearance) var(--container-padding)
    calc(
      var(--blog-article-arc-rise) + var(--blog-article-gap) -
        var(--blog-article-arc-drop)
    );
}

/* Blog-Detail: unter 450 weniger Padding unter dem Hero-Bild */
@media (max-width: 449.98px) {
  .blog-article__hero-inner {
    --blog-article-gap: 2.75rem;
    padding-bottom: calc(
      var(--blog-article-arc-rise) * 0.7 + var(--blog-article-gap) -
        var(--blog-article-arc-drop)
    );
  }
}

.page-blog-article .site-header__menu-btn img {
  filter: brightness(0) invert(1);
}

.blog-article__back {
  display: inline-flex;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  color: var(--color-calm-sand);
}

@media (max-width: 767.98px) {
  .blog-article__back {
    margin-bottom: clamp(1.5rem, 5vw, 2.25rem);
  }
}

.blog-article__back:hover,
.blog-article__back:focus-visible {
  color: var(--color-source-green);
}

.blog-article__back.work-text-link {
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
}

.blog-article__back .work-text-link__dot {
  background-color: var(--color-source-green);
}

.blog-article__head {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  justify-items: center;
  text-align: center;
}

.blog-article__meta {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
  letter-spacing: normal;
  text-transform: none;
  opacity: 0.85;
}

.blog-article__title {
  margin: 0;
  max-width: 52rem;
  font-family: var(--font-headline);
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #fff;
}

.blog-article__title + .blog-article__figure {
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

.blog-article__figure {
  margin: 0;
  width: 100%;
  max-width: 56rem;
}

.blog-article__image {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: 0.25rem;
}

.blog-article__arc {
  position: absolute;
  top: 0;
  right: 0;
  bottom: calc(
    -1 * var(--blog-article-arc-drop) + var(--blog-article-arc-lift)
  );
  left: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.blog-article__arc-circle {
  position: absolute;
  bottom: 0;
  left: var(--blog-article-arc-x);
  width: calc(var(--blog-article-arc-r) * 2);
  height: calc(var(--blog-article-arc-r) * 2);
  margin-left: calc(-1 * var(--blog-article-arc-r));
  border-radius: 50%;
  background-color: var(--color-forest-olive);
}

.blog-article__body {
  --blog-article-gap: clamp(4rem, 8vw, 6rem);
  position: relative;
  z-index: 0;
  margin-top: calc(-1 * var(--blog-article-arc-drop));
  background-color: var(--color-calm-sand);
  color: var(--color-deep-forest);
}

.blog-article__body-inner {
  padding-block: var(--blog-article-gap, clamp(4rem, 8vw, 6rem));
  padding-inline: var(--container-padding);
}

@media (max-width: 449.98px) {
  .blog-article__body-inner {
    padding-top: 2rem;
  }
}

.blog-article__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  max-width: 58rem;
  margin-inline: auto;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
}

.blog-article__content > * {
  margin: 0;
}

.blog-article__content p,
.blog-article__content ul,
.blog-article__content ol,
.blog-article__content blockquote {
  width: 100%;
}

.blog-article__content > :last-child,
.blog-article__content > div:last-child > :last-child,
.blog-article__content p:last-child {
  margin-bottom: 0;
}

.blog-article__content h2,
.blog-article__content h3,
.blog-article__content h4 {
  margin: 2rem 0 1rem;
  font-family: var(--font-headline);
  font-weight: 400;
  line-height: 1.2;
}

.blog-article__content h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
}

.blog-article__content h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.blog-article__content a {
  color: var(--color-forest-olive);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.blog-article__content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.5rem auto;
  border-radius: 0.25rem;
}

.blog-article__content iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  margin: 1.5rem auto;
  border: 0;
}

.blog-article__content ul,
.blog-article__content ol {
  display: inline-block;
  text-align: left;
  margin-inline: auto;
}

.blog-article__content hr {
  width: 100%;
  max-width: 12rem;
  margin: 0;
  border: 0;
  border-top: 1px solid rgb(32 31 24 / 0.15);
}

.page-blog-article .site-footer {
  background-color: var(--color-forest-olive);
  color: var(--color-calm-sand);
}

.blog-section__outro {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
}

.blog-section__outro a {
  color: inherit;
}

@media (min-width: 768px) {
  .blog-hero__intro,
  .blog-topics__bridge,
  .blog-topics__category,
  .blog-entry__content,
  .blog-entry__meta,
  .blog-article__meta,
  .blog-article__back.work-text-link,
  .blog-article__content,
  .blog-section__outro,
  .blog-author__text {
    font-size: 1.125rem;
  }

  .blog-hero__visual {
    width: min(100%, 26rem);
  }
}

@media (min-width: 992px) {
  .page-blog-article {
    --blog-article-arc-rise: clamp(5rem, 9vw, 8rem);
    --blog-article-arc-drop: clamp(0.75rem, 1.25vw, 1.5rem);
    --blog-article-arc-lift: clamp(2.5rem, 4.5vw, 4rem);
    --blog-article-arc-r: max(var(--moments-r), 95vw);
  }

  .blog-article__hero-inner {
    --blog-article-gap: clamp(7rem, 12vw, 11rem);
  }

  .blog-hero__top {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(3rem, 6vw, 7rem);
    align-items: start;
  }

  .blog-hero__visual {
    width: 100%;
    max-width: 28rem;
    justify-self: start;
    margin-inline-start: clamp(1rem, 3vw, 2rem);
    transform: translateX(calc(-1 * clamp(1.5rem, 4vw, 4rem)));
  }

  .blog-hero__illustration {
    left: 54%;
    top: 52%;
    width: 98%;
  }

  .blog-topics {
    --blog-topics-arc-r: max(105vw, 90rem);
    --blog-topics-arc-overflow: max(32vw, 22rem);
  }

  .blog-topics__categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2.5rem, 5vw, 4rem);
  }
}

@media (min-width: 1200px) {
  .blog-hero__intro {
    font-size: 1.625rem;
    line-height: 2rem;
  }

  .blog-topics__bridge,
  .blog-topics__category,
  .blog-entry__content,
  .blog-entry__meta,
  .blog-article__meta,
  .blog-article__back.work-text-link,
  .blog-article__content,
  .blog-section__outro,
  .blog-author__text {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

@media (min-width: 1400px) {
  .page-blog-article {
    --blog-article-arc-rise: 7rem;
    --blog-article-arc-r: max(var(--moments-r), 110vw);
  }

  .blog-article__hero-inner {
    --blog-article-gap: 12rem;
    padding-top: clamp(15rem, 32vw, 22rem);
  }

  .blog-hero__inner,
  .blog-topics__inner,
  .blog-article__hero-inner,
  .blog-section__inner {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .blog-hero__inner {
    padding-top: clamp(15rem, 32vw, 22rem);
  }

  .blog-entry__media {
    max-width: 42rem;
  }

  .blog-hero__intro {
    font-size: 1.625rem;
    line-height: 2rem;
  }

  .blog-topics__bridge,
  .blog-topics__category,
  .blog-entry__content,
  .blog-entry__meta,
  .blog-article__meta,
  .blog-article__back.work-text-link,
  .blog-article__content,
  .blog-section__outro,
  .blog-author__text {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

.blog-author {
  position: relative;
  z-index: 1;
  background-color: var(--color-calm-sand);
  color: var(--color-deep-forest);
}

.blog-author__inner {
  padding: clamp(3rem, 6vw, 5rem) var(--container-padding);
  border-top: 1px solid rgb(32 31 24 / 0.16);
}

.blog-author__row {
  --bs-gutter-x: clamp(2rem, 4vw, 3.5rem);
  --bs-gutter-y: clamp(1.5rem, 3vw, 2rem);
  justify-content: center;
  max-width: 72rem;
  margin-inline: auto;
}

.blog-author__media {
  position: relative;
  margin: 0 auto;
  width: min(100%, 9.5rem);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
}

.blog-author__portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
  /* Gesicht sitzt unten im Foto → stark reinzoomen */
  object-position: center 70%;
  transform: scale(2.35) translateY(-2%);
  transform-origin: center center;
}

.blog-author__content {
  max-width: none;
}

.blog-author__title {
  margin: 0 0 clamp(0.75rem, 1.5vw, 1rem);
  font-family: var(--font-headline);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.blog-author__text {
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
}

.blog-author__text p {
  margin: 0;
}

.blog-author__text p + p {
  margin-top: 0.85em;
}

@media (min-width: 992px) {
  .blog-author__media {
    margin: 0;
    width: 10.5rem;
  }
}

@media (min-width: 1400px) {
  .blog-author__inner {
    padding: 5rem;
  }

  .blog-author__media {
    width: 11.5rem;
  }

  .blog-author__title {
    font-size: 1.625rem;
  }
}

.page-blog .site-footer {
  background-color: var(--color-forest-olive);
  color: var(--color-calm-sand);
  padding-top: clamp(3.5rem, 7vw, 6rem);
}

/* 404 */
.page-404 .site-header {
  position: relative;
  background-color: var(--color-calm-sand);
}

.page-404 .site-header__menu-btn img {
  filter: brightness(0.35);
}

.page-404 h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
}

.page-404__text {
  max-width: 28rem;
}

.page-404 .btn-outline-dark:hover,
.page-404 .btn-outline-dark:focus-visible {
  background-color: var(--color-deep-forest);
  border-color: var(--color-deep-forest);
  color: var(--color-calm-sand);
}

/* Impressum / legal */
.page-legal {
  background-color: var(--color-calm-sand);
  color: var(--color-deep-forest);
}

.legal-hero {
  position: relative;
  overflow: visible;
  background-color: var(--color-forest-olive);
  color: var(--color-calm-sand);
}

.legal-hero__inner {
  padding: var(--site-header-clearance) var(--container-padding)
    clamp(4.5rem, 10vw, 7.5rem);
}

.legal-hero__title {
  margin: 0;
  font-family: var(--font-headline);
  font-size: clamp(2.75rem, 6.4vw, 5rem);
  font-weight: 300;
  line-height: 1.075;
  color: #fff;
  hyphens: auto;
}

.legal-content {
  background-color: var(--color-calm-sand);
  color: var(--color-deep-forest);
}

.legal-content__inner {
  padding: clamp(3.5rem, 7vw, 6rem) var(--container-padding)
    clamp(3rem, 6vw, 5rem);
}

.legal-content__body {
  max-width: none;
  width: 100%;
}

.legal-content__body h2 {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 1rem;
  font-family: var(--font-headline);
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--color-deep-forest);
}

.legal-content__body h2:first-child {
  margin-top: 0;
}

.legal-content__body h3 {
  margin: clamp(1.75rem, 3.5vw, 2.25rem) 0 0.75rem;
  font-family: var(--font-headline);
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-deep-forest);
}

.legal-content__body h4 {
  margin: 1.5rem 0 0.65rem;
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-deep-forest);
}

.legal-content__body p,
.legal-content__body li {
  margin: 0;
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  font-weight: 300;
  line-height: 1.65;
}

.legal-content__body p + p {
  margin-top: 1rem;
}

.legal-content__body ul {
  margin: 1rem 0 0;
  padding-left: 1.25rem;
}

.legal-content__body li + li {
  margin-top: 0.75rem;
}

.legal-content__emphasis {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.legal-content__body a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  overflow-wrap: anywhere;
}

.legal-content__body a:hover,
.legal-content__body a:focus-visible {
  color: var(--color-forest-olive);
}

/*
  Footer-Kreis: Kurve oben, Olive bis zum unteren Rand.
*/
.legal-end {
  --legal-end-circle-width: 155vw;

  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: var(--color-calm-sand);
  color: var(--color-deep-forest);
  padding-top: clamp(3.5rem, 8vw, 5.5rem);
}

.legal-end__shape {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  /* Olive sicher bis ganz nach unten (Kreis allein deckt oft nicht) */
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 18%,
    var(--color-forest-olive) 42%,
    var(--color-forest-olive) 100%
  );
}

.legal-end__circle {
  position: absolute;
  top: 0;
  right: auto;
  bottom: -12%;
  left: 50%;
  width: var(--legal-end-circle-width);
  max-width: none;
  height: auto;
  min-height: calc(100% + 12%);
  aspect-ratio: auto;
  transform: translateX(-50%);
  object-fit: cover;
  object-position: center top;
}

.legal-end .site-footer {
  position: relative;
  z-index: 1;
  background-color: transparent;
  color: var(--color-calm-sand);
}

.legal-end .site-footer__link {
  color: #fff;
}

.legal-end .site-footer__link:hover,
.legal-end .site-footer__link:focus-visible {
  color: var(--color-source-green);
}

/* Tablet / Desktop unter 1700 */
@media (min-width: 768px) and (max-width: 1699.98px) {
  .legal-end {
    --legal-end-circle-width: 150vw;
    padding-top: clamp(3.25rem, 6vw, 5rem);
  }
}

/* ~450–767 */
@media (min-width: 450px) and (max-width: 767.98px) {
  .legal-end {
    --legal-end-circle-width: 180vw;
    padding-top: clamp(2.75rem, 7vw, 4rem);
  }
}

/* Sehr schmale Phones */
@media (max-width: 449.98px) {
  .legal-end {
    --legal-end-circle-width: 230vw;
    padding-top: 2rem;
  }
}

@media (min-width: 1700px) {
  .legal-end {
    --legal-end-scale: 0.82;
    --legal-end-circle-left: calc(-130rem * var(--legal-end-scale));
    --legal-end-circle-width: calc(371rem * var(--legal-end-scale));
    --legal-end-circle-top: 2rem;
    padding-top: 11rem;
  }

  .legal-end__shape {
    background: none;
  }

  .legal-end__circle {
    top: var(--legal-end-circle-top);
    right: auto;
    bottom: auto;
    left: var(--legal-end-circle-left);
    width: var(--legal-end-circle-width);
    height: auto;
    min-height: 0;
    aspect-ratio: 5938.67 / 6292.99;
    transform: none;
    object-fit: fill;
    object-position: center;
  }
}

/* Kontakt */
.page-contact {
  background-color: var(--color-calm-sand);
  color: var(--color-deep-forest);
}

.page-contact {
  --contact-hero-arc-rise: clamp(5rem, 14vw, 10rem);
  --contact-hero-arc-drop: clamp(0.5rem, 1.5vw, 1.25rem);
  --contact-hero-arc-lift: clamp(2rem, 4.5vw, 3.5rem);
  --contact-hero-arc-x: 32%;
}

.contact-hero {
  position: relative;
  z-index: 2;
  overflow-x: clip;
  overflow-y: visible;
  background-color: transparent;
  color: var(--color-calm-sand);
}

.contact-hero__inner {
  position: relative;
  z-index: 2;
  padding: var(--site-header-clearance) var(--container-padding)
    calc(
      var(--contact-hero-arc-rise) + var(--moments-arc-gap) -
        var(--contact-hero-arc-drop)
    );
}

.contact-hero__content {
  max-width: 48rem;
}

.contact-hero__title {
  margin: 0;
  font-family: var(--font-headline);
  font-size: clamp(2.75rem, 6.4vw, 5rem);
  font-weight: 300;
  line-height: 1.075;
  color: #fff;
}

.contact-hero__lead {
  margin: clamp(1.25rem, 2.5vw, 2rem) 0 0;
  font-family: var(--font-headline);
  font-size: clamp(1.25rem, 2.4vw, 2.25rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
  color: #fff;
}

.contact-hero__text {
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
  max-width: 38rem;
}

.contact-hero__text p {
  margin: 0;
}

.contact-hero__illustration {
  position: absolute;
  right: clamp(0.75rem, 6vw, 4.5rem);
  bottom: calc(
    var(--contact-hero-arc-rise) - var(--contact-hero-arc-drop) +
      clamp(0.25rem, 1.5vw, 1rem)
  );
  z-index: 2;
  display: block;
  width: auto;
  height: clamp(18rem, 36vw, 28rem);
  margin: 0;
  pointer-events: none;
}

.contact-hero__arc {
  position: absolute;
  top: 0;
  right: 0;
  bottom: calc(
    -1 * var(--contact-hero-arc-drop) + var(--contact-hero-arc-lift)
  );
  left: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.contact-hero__arc-circle {
  position: absolute;
  bottom: 0;
  left: var(--contact-hero-arc-x);
  width: calc(var(--moments-r) * 2);
  height: calc(var(--moments-r) * 2);
  margin-left: calc(-1 * var(--moments-r));
  border-radius: 50%;
  background-color: var(--color-forest-olive);
}

.contact-intro {
  position: relative;
  z-index: 0;
  margin-top: calc(-1 * var(--contact-hero-arc-drop));
  padding-bottom: clamp(6rem, 12vw, 10rem);
  background-color: var(--color-calm-sand);
  color: var(--color-deep-forest);
}

.contact-intro__inner {
  padding-top: calc(var(--contact-hero-arc-drop) + clamp(1.5rem, 3vw, 2.5rem));
  padding-inline: var(--container-padding);
  padding-bottom: 0;
}

.contact-intro__layout {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
  min-width: 0;
}

.contact-intro__content {
  min-width: 0;
  padding-top: clamp(3rem, 7vw, 5.5rem);
}

.contact-intro__title {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  font-family: var(--font-headline);
  font-size: clamp(1.75rem, 3.5vw, 3.75rem);
  font-weight: 400;
  line-height: 1.08;
  overflow-wrap: break-word;
  hyphens: auto;
}

.contact-intro__text {
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
  overflow-wrap: break-word;
}

.contact-intro__text p {
  margin: 0;
}

.contact-intro__text p + p {
  margin-top: 1.5rem;
}

.contact-intro__media {
  margin: 0;
  width: min(100%, 20rem);
  max-width: 100%;
  min-width: 0;
  justify-self: start;
}

.contact-intro__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 489 / 592;
  object-fit: cover;
  object-position: center;
}

.contact-form-section {
  background-color: var(--color-source-green);
  color: var(--color-deep-forest);
}

.contact-form-section__inner {
  padding: clamp(4rem, 8vw, 8rem) var(--container-padding);
}

.contact-form-section__layout {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  max-width: 52rem;
}

.contact-form-section__title {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  font-family: var(--font-headline);
  font-size: clamp(1.75rem, 3.5vw, 3.75rem);
  font-weight: 400;
  line-height: 1.08;
}

.contact-form-section__lead {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
}

.contact-form-section__ways {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.contact-form-section__way-label {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.4rem;
}

.contact-form-section__way-detail {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
}

.contact-form-section__link {
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
  color: var(--color-deep-forest);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.contact-form-section__link:hover,
.contact-form-section__link:focus-visible {
  color: var(--color-forest-olive);
}

.contact-form-section__address {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
  opacity: 0.85;
}

.contact-form {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  scroll-margin-top: clamp(5rem, 10vw, 7rem);
}

.contact-form__field {
  display: grid;
  gap: 0.5rem;
}

.contact-form__label {
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
}

.contact-form__input,
.contact-form__select,
.contact-form__textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid rgb(32 31 24 / 0.2);
  border-radius: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
  color: var(--color-deep-forest);
  background-color: transparent;
  transition: border-color 0.2s ease;
}

.contact-form__textarea {
  resize: vertical;
  min-height: 10rem;
}

.contact-form__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23201f18' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
  padding-right: 2.75rem;
  cursor: pointer;
}

.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
  outline: none;
  border-color: var(--color-forest-olive);
}

.contact-form__input.is-invalid,
.contact-form__select.is-invalid,
.contact-form__textarea.is-invalid {
  border-color: #9a4a3a;
}

.contact-form__privacy {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4rem;
}

.contact-form__privacy a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.contact-form__privacy a:hover,
.contact-form__privacy a:focus-visible {
  color: var(--color-forest-olive);
}

.contact-form__submit {
  justify-self: start;
}

.contact-form__submit:disabled {
  opacity: 0.65;
  cursor: wait;
}

.contact-form__actions {
  display: grid;
  gap: 1.5rem;
  justify-items: stretch;
  width: 100%;
}

.contact-form__feedback {
  margin: 0;
  max-width: none;
  width: 100%;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.45;
  box-sizing: border-box;
}

.contact-form__feedback[hidden] {
  display: none !important;
}

.contact-form__feedback--error {
  color: #9a4a3a;
}

.contact-form__feedback--success {
  display: block;
  width: 100%;
  max-width: none;
  padding: 0.85rem 1rem;
  border-radius: 0.5rem;
  background-color: var(--color-calm-sand);
  color: #111;
  font-weight: 400;
}

.page-contact .site-footer {
  background-color: var(--color-calm-sand);
  color: var(--color-deep-forest);
}

.page-contact .site-footer__inner {
  padding-top: clamp(4rem, 8vw, 6rem);
}

.page-contact .site-footer__link {
  color: var(--color-deep-forest);
}

.page-contact .site-footer__link:hover,
.page-contact .site-footer__link:focus-visible {
  color: var(--color-forest-olive);
}

@media (min-width: 768px) {
  .contact-hero__text,
  .contact-intro__text,
  .contact-form-section__lead,
  .contact-form-section__way-label,
  .contact-form-section__way-detail,
  .contact-form-section__link,
  .contact-form-section__address,
  .contact-form__label,
  .contact-form__input,
  .contact-form__select,
  .contact-form__textarea,
  .contact-form__privacy,
  .contact-form__feedback {
    font-size: 1.125rem;
  }
}

@media (min-width: 992px) {
  .contact-hero__text {
    font-size: 1.125rem;
    line-height: 1.4rem;
  }

  .page-contact {
    --contact-hero-arc-rise: clamp(6rem, 12vw, 11rem);
    --contact-hero-arc-drop: clamp(0.75rem, 1.25vw, 1.5rem);
    --contact-hero-arc-lift: clamp(2.5rem, 4.5vw, 4rem);
  }

  .contact-hero__inner {
    padding-bottom: calc(
      var(--contact-hero-arc-rise) + clamp(5rem, 8vw, 7rem) -
        var(--contact-hero-arc-drop)
    );
  }

  .contact-hero__illustration {
    right: clamp(1.5rem, 7vw, 6rem);
    bottom: calc(
      var(--contact-hero-arc-rise) - var(--contact-hero-arc-drop) +
        clamp(0.5rem, 2vw, 1.25rem)
    );
    height: clamp(22rem, 34vw, 34rem);
  }

  .contact-intro__layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(3rem, 6vw, 7rem);
    align-items: start;
  }

  .contact-intro__content {
    padding-top: clamp(4.5rem, 9vw, 8rem);
  }

  .contact-intro__media {
    width: min(100%, 24rem);
    max-width: 100%;
    margin-left: clamp(2.5rem, 7vw, 4.5rem);
    justify-self: start;
  }

  .contact-form-section__layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(3rem, 6vw, 5rem);
    align-items: start;
    max-width: none;
  }
}

/* Kontakt-Hero-Illu: unter 1125 weiter rechts */
@media (max-width: 1124.98px) {
  .contact-hero__illustration {
    right: clamp(-2.5rem, -0.5vw, 0.25rem);
  }
}

/* Kontakt-Hero-Illu: unter 850 kleiner und tiefer */
@media (max-width: 849.98px) {
  .contact-hero__illustration {
    height: clamp(13.5rem, 46vw, 17rem);
    bottom: calc(
      var(--contact-hero-arc-rise) - var(--contact-hero-arc-drop) -
        clamp(7.5rem, 19vw, 10.5rem)
    );
  }
}

@media (min-width: 1200px) {
  .contact-hero__text {
    font-size: 1.625rem;
    line-height: 2rem;
  }

  .contact-intro__text,
  .contact-form-section__lead,
  .contact-form-section__way-label,
  .contact-form-section__way-detail,
  .contact-form-section__link,
  .contact-form-section__address,
  .contact-form__label,
  .contact-form__input,
  .contact-form__select,
  .contact-form__textarea,
  .contact-form__privacy,
  .contact-form__feedback {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

@media (min-width: 1400px) {
  .contact-hero__inner,
  .contact-intro__inner,
  .contact-form-section__inner {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .contact-hero__inner {
    padding-top: clamp(15rem, 32vw, 22rem);
  }

  .contact-hero__text {
    font-size: 1.625rem;
    line-height: 2rem;
  }

  .contact-intro__text,
  .contact-form-section__lead,
  .contact-form-section__way-label,
  .contact-form-section__way-detail,
  .contact-form-section__link,
  .contact-form-section__address,
  .contact-form__label,
  .contact-form__input,
  .contact-form__select,
  .contact-form__textarea,
  .contact-form__privacy,
  .contact-form__feedback {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .contact-intro__title,
  .contact-ways__title,
  .contact-form-section__title {
    font-size: 3.75rem;
    line-height: 4.0625rem;
  }
}