/* WordPress integration rules. The visual system remains in the ported source styles. */
:root { --jumpmark-offset: 128px; }
[data-jumpmark] { scroll-margin-top: var(--jumpmark-offset); }
.jumpmark-legacy-alias {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}

.news-feature-copy h2 a,
.news-overview-card h2 a,
.news-card h2 a { color: inherit; text-decoration: none; }
.news-card-media { display: block; color: inherit; text-decoration: none; }
.news-card-media:empty { display: none; }
.news-filters a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-family: var(--font);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}
.news-filters a.is-active { background: #abb9ad; color: var(--green); }
.news-overview.is-loading [data-news-grid] { opacity: .45; transition: opacity .2s ease; }
.news-empty { grid-column: 1 / -1; text-align: center; }
.hero-image,
.inner-hero-image,
.neighborhood-hero-image { object-position: var(--hero-crop-desktop, center center) !important; }
.inner-hero-text p,
.hero-text p { margin: 0; }
.article-media--contained img { width: auto; max-width: 100%; margin-inline: auto; }
.hotspot-item[data-hotspot-category="culture"] summary em { background: var(--hotspot-culture, #aed0f0); }
.hotspot-item[data-hotspot-category="gastronomy"] summary em { background: var(--hotspot-gastronomy, #f6e29b); }
.hotspot-item[data-hotspot-category="parks"] summary em { background: var(--hotspot-parks, #8cc88c); }
.article-body > :first-child { margin-top: 0; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed !important; z-index: 10000; top: 12px; left: 12px; width: auto; height: auto; margin: 0; padding: 12px 18px; clip: auto; background: #fff; color: var(--green); }
.outdoor-nav [data-outdoor-prev] img { transform: rotate(180deg); }
@media (hover:hover) {
  .outdoor-nav [data-outdoor-prev]:hover img { transform: translateX(-5px) rotate(180deg); }
}
@media (max-width: 720px) {
	:root { --jumpmark-offset: 96px; }
  .news-filters a { height: 38px; padding: 0 16.75px; font-size: 12.667px; }
  .hero-image,
  .inner-hero-image,
  .neighborhood-hero-image,
  .building-hero-image { object-position: center center !important; }
  .hotspot-item[data-hotspot-category="culture"] { background: var(--hotspot-culture, #aed0f0); }
  .hotspot-item[data-hotspot-category="gastronomy"] { background: var(--hotspot-gastronomy, #f6e29b); }
  .hotspot-item[data-hotspot-category="parks"] { background: var(--hotspot-parks, #8cc88c); }
}
/* Keep the homepage intro transition visibly rounded over the hero on mobile. */
@media (max-width: 767px) {
  html body .page-frame > main > .intro.round-section {
    border-top-left-radius: 31px !important;
    border-top-right-radius: 31px !important;
    overflow: clip;
  }
}

/* Keep every mobile WordPress page flush with the viewport. */
@media (max-width: 720px) {
  html,
  body { background: var(--page-bg); }

  .page-frame {
    width: 100%;
    max-width: none;
    margin-inline: auto;
    background: #fff;
  }

  /* Keep the WordPress homepage media geometry while the shared copy panel
     determines the mobile hero's final height. */
  html body .page-frame > main > .hero { height: auto; min-height: 0; }
  html body .page-frame > main > .hero > .hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    translate: none;
    transform: none;
    will-change: auto;
  }
  html body .page-frame > main > .hero > .hero-shade {
    position: absolute;
    left: 0;
    width: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, .29) 0%, rgba(102, 102, 102, 0) 100%);
  }

  /* Keep the green hero underneath the intro's rounded overlap. */
  html body .page-frame > main::before { top: 912px; }
  html body .page-frame > main > #quartier::before { display: none; }
}

/* News card read-more links are text-only on mobile. */
@media (max-width: 720px) {
  .news-card-link .button-icon,
  .news-card > a:not(.news-card-media) .button-icon {
    display: none;
  }

  .facts .accordion { border-top: 0; }

  .copy-mobile {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
  }

  .outdoor-panel { border-radius: 0; }

  .inner-page-flow > .inner-main > section:first-child > .content-width > .section-label,
  .inner-page-flow > .inner-main > .macherei-module:first-child > section > .content-width > .section-label,
  .building-flow > .building-main > .building-section:first-child > .content-width > .section-label,
  .building-flow > .building-main > .macherei-module:first-child > .building-section > .content-width > .section-label {
    display: none;
  }

  .building-features .building-feature-list article:last-child { border-bottom: 0; }

  .sharing-controls [data-mobile-prev] img {
    transform: rotate(180deg);
  }

  .inner-page-flow > .inner-main > section.shared-spaces:first-child > .content-width > .section-label,
  .inner-page-flow > .inner-main > .macherei-module:first-child > section.shared-spaces > .content-width > .section-label {
    display: block;
    padding: 0;
    font-size: 31px;
    line-height: 1.2;
    text-align: center;
    text-transform: none;
  }

  .inner-page-flow > .inner-main > section.shared-spaces:first-child > .content-width > .section-label::before,
  .inner-page-flow > .inner-main > section.shared-spaces:first-child > .content-width > .section-label > b,
  .inner-page-flow > .inner-main > .macherei-module:first-child > section.shared-spaces > .content-width > .section-label::before,
  .inner-page-flow > .inner-main > .macherei-module:first-child > section.shared-spaces > .content-width > .section-label > b {
    display: none;
  }

  .inner-page-flow > .inner-main > section.shared-spaces:first-child > .content-width > .section-label > span,
  .inner-page-flow > .inner-main > .macherei-module:first-child > section.shared-spaces > .content-width > .section-label > span {
    text-transform: none;
  }
}
