/* Universal module stack: instance isolation, semantic palettes and safe seams. */
.module-stack {
  --module-accent: var(--green);
  --module-accent-ink: #fff;
  --module-surface: #fff;
  --module-text: var(--green);
  --module-muted: #607b74;
  --module-border: color-mix(in srgb, var(--module-text) 65%, transparent);
  --module-overlap: 50px;
  position: relative;
  color: var(--module-text);
}

.module-palette--m40 {
  --module-accent: #c5b783;
  --module-accent-ink: var(--green);
}

.module-palette--m50 {
  --module-accent: #041c2c;
  --module-accent-ink: #fff;
}

.module-palette--m60 {
  --module-accent: #a4dd58;
  --module-accent-ink: var(--green);
}

.module-anchor {
  position: relative;
  z-index: 8;
  display: block;
  height: 0;
  scroll-margin-top: 90px;
}

.macherei-module {
  position: relative;
  min-width: 0;
  isolation: isolate;
  display: flow-root;
  /* Accent/media describes a panel, not every pixel of its module. Paint
     padding, captions and following content too (e.g. floor-plan lists). */
  background-color: var(--module-surface);
}

/* Preserve the hero reveal without leaving the first module's base square. */
.module-stack > .macherei-module:first-of-type {
  border-radius: var(--module-overlap) var(--module-overlap) 0 0;
}

.macherei-module h2,
.macherei-module h3 {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

/* Long headings must not enlarge a grid track beyond its content container. */
.macherei-module .building-sustainability-lead > * { min-width: 0; }
.macherei-module .building-sustainability-lead > div:only-child { width: 100%; }
.macherei-module .building-section p { overflow-wrap: break-word; }
.macherei-module .building-section .section-label > span { white-space: normal; overflow-wrap: break-word; }

.macherei-module > section {
  position: relative;
}

/* Each section owns its content width. Full-width block sections expand
   naturally; never override the article or neighborhood reading containers. */

.macherei-module--surface-light {
  background-color: var(--module-surface);
  color: var(--module-text);
}

.macherei-module--surface-accent .section-label {
  color: var(--module-accent-ink);
}

.macherei-module--surface-accent .section-label::before {
  background-color: currentColor;
  background-image: none;
  filter: none;
  -webkit-mask: url("../images/section-symbol-green.webp") center / contain no-repeat;
  mask: url("../images/section-symbol-green.webp") center / contain no-repeat;
}

.macherei-module--surface-accent .pill-button.light {
  border-color: var(--module-accent-ink);
  background: var(--module-accent-ink);
  color: var(--module-accent);
}

.macherei-module--surface-accent .pill-button.light:hover {
  background: transparent;
  color: var(--module-accent-ink);
}

/* Flexible content must grow with edited copy. */
.macherei-module .shared-spaces,
.macherei-module .gastro-retail,
.macherei-module .arrival,
.macherei-module .contact-overview,
.macherei-module .developer-section,
.macherei-module .quartier-vision,
.macherei-module .quartier-concept,
.macherei-module .quartier-management {
  height: auto;
}

.macherei-module .outdoor-panel {
  height: auto;
  min-height: 1149px;
  display: flex;
  align-items: flex-end;
}

.macherei-module .outdoor-overlay {
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
  margin-inline: auto;
  padding-bottom: 127px;
}

.macherei-module .shared-spaces,
.macherei-module .gastro-retail,
.macherei-module .arrival,
.macherei-module .contact-overview,
.macherei-module .developer-section,
.macherei-module .quartier-concept,
.macherei-module .quartier-management {
  overflow: visible;
}

.macherei-module .contact-overview,
.macherei-module .developer-section,
.macherei-module .quartier-management,
.macherei-module .quartier-concept { min-height: 0; }

/* These two modules used to be nested in their predecessor. */
.home-sustainability-section .sustainability { height: auto; min-height: 0; margin-top: 0; }
.macherei-module .building-sustainability-strip { height: auto; min-height: 394px; }
.macherei-module .building-sustainability-strip li { height: auto; min-height: 254px; }
.tenants-module .tenant-swiper { margin-top: 0; }

/* Accent modules inherit the destination rather than their source page. */
.macherei-module--home_sharing > .sharing,
.macherei-module--quartier_concept > .quartier-concept {
  background: var(--module-accent);
  color: var(--module-accent-ink);
}

.macherei-module--home_sustainability .sustainability,
.macherei-module--building_units .building-units-panel {
  background: var(--module-accent);
  color: var(--module-accent-ink);
}

.module-palette--m40,
.module-palette--m50,
.module-palette--m60 {
  --building-accent: var(--module-accent);
  --building-ink: var(--module-accent-ink);
}

/* The stack owns the first hero seam; modules own subsequent rounded seams. */
.module-stack.inner-main,
.module-stack.neighborhood-content,
.module-stack.building-main {
  overflow: visible;
  background: transparent;
}

.module-stack--home {
  z-index: 2;
  margin-top: -34px;
}


.module-stack--news {
  width: 100%;
}

.article-body--module-stack { width: 100%; }

.article-module {
  width: min(calc(100% - 48px), 840px);
  margin-inline: auto;
  overflow-wrap: break-word;
}

.article-module h2 { margin: 116px 0 42px; font-size: 46px; line-height: 1.14; font-weight: 700; text-align: center; }
.article-module h3 { margin: 76px 0 24px; font-size: 30px; line-height: 1.22; font-weight: 700; }
.article-module p,
.article-module li { font-size: 23px; line-height: 1.46; font-weight: 300; }
.article-module p { text-align: justify; text-wrap: pretty; }
.article-module p + p { margin-top: 31px; }
.article-module ul,
.article-module ol { margin: 28px 0 0 1.2em; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

.module-stack.neighborhood-content {
  padding-top: 0;
  background: transparent;
}


@media (min-width: 901px) {
  .macherei-module .outdoor-panel { min-height: 100vh; min-height: 100dvh; }
}

@media (max-width: 720px) {
  .module-stack { --module-overlap: 31px; }
  .module-anchor { scroll-margin-top: 72px; }
  .module-stack.inner-main > .macherei-module:first-of-type > section,
  .module-stack.building-main > .macherei-module:first-of-type > section,
  .module-stack--home > .macherei-module:first-of-type > section { border-radius: 31px 31px 0 0; }
  .home-sustainability-section .sustainability { min-height: 0; }
  .macherei-module .outdoor-panel { min-height: 876px; }
  .macherei-module .outdoor-overlay { padding-bottom: 126px; }
  .macherei-module .building-sustainability-strip { min-height: 308px; }
  .macherei-module .building-sustainability-strip li { min-height: 164px; }
  .macherei-module .contact-overview,
  .macherei-module .developer-section { min-height: 0; }
  .article-module {
    width: calc(100% - 48px);
  }
  .article-module h2 { margin: 72px 0 30px; font-size: 34px; }
  .article-module h3 { margin: 48px 0 20px; font-size: 26px; }
  .article-module p,
  .article-module li { font-size: 20px; }
}

/* Layout profiles own ALL external section spacing. Legacy CSS remains useful
   for internal compositions; it cannot add another outer margin/padding. */
.module-stack {
  isolation: isolate;
  z-index: 2;
  --layout-concept-before: 198px;
  --layout-concept-after: 89px;
  --layout-management-before: 198px;
  --layout-management-after: 199px;
  --layout-contact-after: 194px;
  --layout-story-before: 124px;
  --layout-story-after: 100px;
  --layout-units-before: 100px;
  --layout-units-after: 80px;
  --layout-architecture-before: 100px;
  --layout-features-before: 100px;
  --layout-features-after: 100px;
  --layout-sustainability-before: 100px;
  --layout-sustainability-after: 100px;
  --layout-architecture-after: 170px;
  --layout-story-after-mobile: 68px;
  --layout-features-before-mobile: 57px;
  --layout-features-after-mobile: 68px;
  --layout-units-before-mobile: 68px;
  --layout-sustainability-before-mobile: 94px;
  --layout-architecture-after-mobile: 0px;
}

/* A continuous opaque backing below the hero corners prevents image leaks
   around any later rounded panel. It never covers the first hero reveal. */
.module-stack::before {
  content: "";
  display: block;
  position: absolute;
  inset: var(--module-overlap) 0 0;
  z-index: -1;
  background: var(--module-surface);
  pointer-events: none;
}

.module-palette--m40 {
  --layout-architecture-after: 158px;
  --layout-sustainability-before-mobile: 86px;
  --layout-architecture-after-mobile: 200px;
}
.module-palette--m50 {
  --layout-features-after: 97px;
  --layout-sustainability-before: 117px;
  --layout-architecture-after: 97px;
  --layout-story-after-mobile: 100px;
  --layout-features-after-mobile: 17px;
  --layout-units-before-mobile: 17px;
  --layout-sustainability-before-mobile: 85px;
  --layout-architecture-after-mobile: 27px;
}
.module-palette--m60 {
  --layout-features-before: 124px;
  --layout-sustainability-before: 121px;
  --layout-sustainability-after: 96px;
  --layout-architecture-after: 103px;
  --layout-features-before-mobile: 82px;
  --layout-features-after-mobile: 55px;
  --layout-units-before-mobile: 56px;
  --layout-sustainability-before-mobile: 58px;
  --layout-architecture-after-mobile: 96px;
}

.module-stack > .macherei-module {
  --module-before: var(--module-before-desktop);
  --module-after: var(--module-after-desktop);
  --module-edge-overlap: var(--module-overlap-desktop);
  padding-block: max(var(--module-before), var(--module-first-inset, 0px)) calc(var(--module-after) + var(--module-last-inset, 0px));
  margin-block: calc(-1 * var(--module-edge-overlap)) 0;
  border-start-start-radius: max(var(--module-edge-overlap), var(--module-first-radius, 0px));
  border-start-end-radius: max(var(--module-edge-overlap), var(--module-first-radius, 0px));
}
.module-stack > .is-first-module {
  --module-first-radius: var(--module-overlap);
  --module-first-inset: var(--module-hero-inset, 0px);
}
.module-stack > .is-last-module { --module-last-inset: var(--module-footer-inset, 0px); }
.module-stack--news {
  --module-hero-inset: clamp(145px, 11vw, 205px);
  --module-footer-inset: clamp(135px, 10vw, 190px);
}
.article-content-panel--modules { padding-block: 0; min-height: 0; }
.module-stack > [data-module-top-desktop="accent"] {
  background: var(--module-accent);
  color: var(--module-accent-ink);
  border-radius: var(--module-overlap);
}

/* Deliberately stronger than page/palette-specific legacy selectors. */
.module-stack > .macherei-module > section {
  margin-block: 0 !important;
  padding-block: 0 !important;
  height: auto;
  min-height: 0;
  display: flow-root;
  border-radius: inherit;
}
.module-stack > .macherei-module > .outdoor-panel {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}
.module-stack > .macherei-module > .neighborhood-gallery {
  display: grid;
}
.module-stack > .macherei-module > .contact-overview { background: inherit; color: inherit; }

/* Article boundaries include the formerly nested block margins. */
.module-stack .article-module > :first-child { margin-top: 0; }
.module-stack .article-module > :last-child { margin-bottom: 0; }
.module-stack .article-module > .article-facts,
.module-stack .article-module > .article-quote,
.module-stack .article-module > .article-media,
.module-stack .article-module > .article-gallery,
.module-stack .article-module > .article-contact-box,
.module-stack .article-module > .article-cta { margin-block: 0; }
.module-stack .article-module .article-facts h3,
.module-stack .article-module .article-contact-box h2 { margin: 0 0 20px; text-align: left; }
.module-stack .article-module .article-cta h2 { margin-top: 0; }

.module-stack .arrival-copy p,
.module-stack .hotspots-intro,
.module-stack .services-intro { min-height: 0; }
.module-stack .neighborhood-gallery figure { height: auto; min-height: 0; }
.module-stack .content-width > *,
.module-stack .service-card,
.module-stack .shared-grid > * { min-width: 0; }
.module-stack .service-card p,
.module-stack figcaption { overflow-wrap: break-word; }
/* Coverflow intentionally extends beyond its track, but not the page edge.
   Clip only this module horizontally; keep controls and vertical flow intact. */
.module-stack > .macherei-module--home_buildings { overflow-x: clip; }
.module-stack .tenant-brand { min-width: 0; overflow-wrap: break-word; }
.module-stack .tenant-brand img,
.module-stack .tenant-brand .agiori { max-width: 100%; }
.module-stack .overview-grid h2 { white-space: normal; }
.module-stack .building-feature-layout > * { min-width: 0; }
@media (max-width: 900px) {
  .module-stack .building-feature-layout { grid-template-columns: minmax(0, 1fr); }
  .module-stack .building-feature-list { grid-template-columns: minmax(0, 1fr); }
  .module-stack .building-feature-list article { min-height: 0; min-width: 0; }
}

@media (min-width: 721px) and (max-width: 1600px) {
  .module-stack {
    --layout-concept-before: 130px;
    --layout-concept-after: 90px;
    --layout-contact-after: 140px;
  }
}
@media (min-width: 721px) and (max-width: 1200px) {
  .module-stack {
    --layout-management-before: 130px;
    --layout-management-after: 120px;
  }
}
/* Building compositions already switch at 900px; keep their established
   insets while the general module boundary minimum remains desktop-sized. */
@media (min-width: 721px) and (max-width: 900px) {
  .module-stack {
    --layout-story-before: 49px;
    --layout-story-after: var(--layout-story-after-mobile);
    --layout-features-before: var(--layout-features-before-mobile);
    --layout-features-after: var(--layout-features-after-mobile);
    --layout-units-before: var(--layout-units-before-mobile);
    --layout-units-after: 60px;
    --layout-sustainability-before: var(--layout-sustainability-before-mobile);
    --layout-sustainability-after: 68px;
    --layout-architecture-before: 87px;
    --layout-architecture-after: var(--layout-architecture-after-mobile);
  }
}
@media (max-width: 720px) {
  .module-stack--news { --module-hero-inset: 122px; --module-footer-inset: 94px; }
  .module-stack > .macherei-module {
    --module-before: var(--module-before-mobile);
    --module-after: var(--module-after-mobile);
    --module-edge-overlap: var(--module-overlap-mobile);
  }
  .module-stack > [data-module-top-mobile="accent"] {
    background: var(--module-accent);
    color: var(--module-accent-ink);
    border-radius: var(--module-overlap);
  }
  .module-stack > .macherei-module > .outdoor-panel { min-height: 876px; }
  .module-stack > .macherei-module > .neighborhood-gallery { display: block; }
}