/**
 * Interactive Globe (Mapbox) — stellae resource, ported close to 1:1.
 * REQUIRED SWAPS (not part of the resource):
 * - Haffer Mono / Haffer XH (not licensed here) -> Karla / Spectral, this
 *   site's existing body/headline fonts.
 * - --globe-info-width is referenced by the resource's own CSS
 *   (.globe-info width, .globe-nav right calc()) but never defined
 *   anywhere in it — added here.
 * - #201d1d/#2a2727/#f2f2f2 (resource's fixed dark-UI-on-any-page palette
 *   for the info panel/nav/close button) kept as-is: this panel intentionally
 *   stays a dark UI chrome element in both site modes, same reasoning as
 *   the directional-list modal's own fixed light chrome elsewhere on this
 *   site — flagged rather than silently deviating from the resource.
 */
:root {
  --globe-info-width: 22em;
}

.contact-globe-section {
  padding: 4rem 0;
  /* REQUESTED FIX (not part of the resource): components/header/
     top-navigation.php has a legacy site-wide scroll-reveal — every
     <section> starts hidden and fades in once its top is within
     innerHeight-100px of the viewport, which fires noticeably *earlier*
     than section-s001's own mask-text-reveal trigger ('clamp(top 80%)').
     Since Contact Globe sits right after an s001 instance, that mismatch
     meant the globe could pop in before s001's own headline/content had
     even finished revealing above it. Opting this section out of the
     legacy rule (same technique preloader.css's .crisp-header uses:
     matching selector specificity beats the plain `section` element
     selector) and giving it its own reveal below, on the same trigger
     point as mask-text-reveal, fixes the ordering — and, as a side
     effect, also hides the Mapbox map's own one-time load-time padding
     correction (a init-time jump), since that settles long before the
     user scrolls this far down.
     interactive-globe.js's initContactGlobeReveal() sets autoAlpha via
     GSAP, not visibility directly — set here as a FOUC-prevention
     fallback exactly like mask-text-reveal.css's [data-split="heading"]. */
  opacity: 1;
  visibility: hidden;
  transform: none;
  transition: none;
}

.globe-wrap {
  width: 100%;
  height: min(100vh, 100rem);
  position: relative;
  overflow: clip;
  border-radius: 1em;
}

.globe-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.globe-map {
  z-index: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.globe-info {
  z-index: 10;
  color: #f2f2f2;
  width: var(--globe-info-width);
  background-color: #2a2727;
  border: 1px solid #ffffff1a;
  border-radius: 1em;
  position: absolute;
  top: 1em;
  bottom: 1em;
  right: 1em;
  box-shadow: 0 0 12px #0000001a;
}

/* Info pane */
[data-globe-info] {
  opacity: 1;
  visibility: visible;
  transform: translate(0em, 0px);
  transition: all 0.65s cubic-bezier(0.625, 0.05, 0, 1);
}

[data-globe-init][data-collapsed="true"] [data-globe-info] {
  opacity: 0;
  visibility: hidden;
  transform: translate(4em, 0px);
}

.globe-info__collection {
  width: 100%;
  height: 100%;
}

.globe-info__list {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  position: absolute;
  inset: 0%;
  overflow: hidden auto;
}

.globe-info__list-item {
  /* REQUESTED CHANGE: overall panel height trimmed — less gap between the
     visual/text/fields blocks and less outer padding. */
  grid-column-gap: 1.5em;
  grid-row-gap: 1.5em;
  scroll-snap-align: start;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  min-height: 100%;
  padding: 1.5em;
  display: flex;
}

.globe-info__list-item-visual {
  aspect-ratio: 3 / 2;
  border-radius: .75em;
  width: 100%;
  overflow: hidden;
}

.globe-info__list-item-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.globe-info__list-item-text {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: .5em;
  display: flex;
}

.globe-info__list-item-label {
  opacity: .6;
  text-transform: uppercase;
  margin-bottom: 0;
  font-family: Karla, sans-serif;
  font-size: .75em;
}

.globe-info__list-item-h {
  margin-top: 0;
  margin-bottom: 0;
  font-family: Spectral, serif;
  /* REQUESTED CHANGE: trimmed from 2em so the panel reads shorter overall. */
  font-size: 1.6em;
  font-weight: 400;
  line-height: 1.2;
}

/* REQUESTED ADDITION (not part of the resource): copy paragraph + Adresse/
   Kontakt fields per office, matching this site's own s010 ("Standorte")
   section's field structure/labeling. Stacked (not side-by-side like
   s010's own wider two-column layout) since this panel is only
   --globe-info-width (22em) wide — a real two-column split wouldn't have
   room to breathe here. */
.globe-info__list-item-copy {
  opacity: .8;
  margin: 0;
  font-family: Karla, sans-serif;
  font-size: .9em;
  line-height: 1.45;
}

.globe-info__list-item-fields {
  grid-row-gap: 1em;
  flex-flow: column;
  width: 100%;
  padding-top: 1em;
  margin-top: .5em;
  border-top: 1px solid #ffffff1a;
  display: flex;
}

.globe-info__list-item-field-title {
  margin: 0 0 .35em;
  font-family: Karla, sans-serif;
  font-size: .9em;
  font-weight: 700;
}

.globe-info__list-item-field-content {
  opacity: .8;
  margin: 0;
  font-family: Karla, sans-serif;
  font-size: .85em;
  line-height: 1.45;
}

.globe-info__list-item-link {
  color: inherit;
  text-decoration: none;
}

.globe-close {
  z-index: 11;
  position: absolute;
  top: 1em;
  right: 1em;
}

/* BUG FIX (not part of the resource): unlike .globe-nav__button just below,
   this rule as given never centered its icon (no display:flex/
   justify-content/align-items) — the X sat at its default inline position
   inside the circle instead of centered, reading as oversized/misplaced.
   Added to match .globe-nav__button's own already-correct pattern. */
.globe-close__button {
  color: #201d1d;
  background-color: #f2f2f2;
  border-radius: 100em;
  width: 2.5em;
  height: 2.5em;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.globe-close__icon {
  width: .625em;
}

.globe-nav {
  z-index: 10;
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  color: #f2f2f2;
  bottom: 1em;
  right: calc(var(--globe-info-width)  + 2em);
  background-color: #2a2727;
  border: 1px solid #ffffff1a;
  border-radius: 100em;
  justify-content: center;
  align-items: center;
  padding: .25em;
  display: flex;
  position: absolute;
}

/* Collapse nav to the right */
[data-globe-nav] {
  transition: all 0.65s cubic-bezier(0.625, 0.05, 0, 1);
}

[data-globe-init][data-collapsed="true"] [data-globe-nav] {
  right: 1em;
}

.globe-nav__button {
  background-color: #0000;
  border-radius: 100em;
  justify-content: center;
  align-items: center;
  width: 2em;
  height: 2em;
  padding: 0;
  display: flex;
}

.globe-nav__button-icon {
  width: .75em;
}

.globe-nav__counter {
  text-transform: uppercase;
  margin-bottom: 0;
  font-family: Karla, sans-serif;
  font-size: .875em;
}

.globe-reopen {
  z-index: 12;
  color: #f2f2f2;
  background-color: #2a2727;
  border: 1px solid #ffffff26;
  border-right-style: none;
  border-top-left-radius: .5em;
  border-bottom-left-radius: .5em;
  height: 3em;
  padding: 0 .5em;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
}

.globe-reopen__icon {
  width: 1em;
}

[data-globe-reopen] {
  opacity: 0;
  visibility: hidden;
  transform: translate(2em, 0px);
  transition: all 0.4s cubic-bezier(0.625, 0.05, 0, 1);
}

[data-globe-init][data-collapsed="true"] [data-globe-reopen] {
  opacity: 1;
  visibility: visible;
  transform: translate(0em, 0px);
}

.globe-marker {
  color: #201d1d;
  background-color: #ffe19e;
  border-radius: 100em;
  justify-content: center;
  align-items: center;
  width: 2.5em;
  height: 2.5em;
  padding: .625em;
  display: flex;
  position: relative;
}

.globe-marker__icon {
  width: 100%;
}

[data-globe-marker][data-active="true"] {
  outline: 1px solid #FFF;
  outline-offset: .5em;
}


/* Hide marker template on site */
[data-globe-init="initialized"] [data-globe-marker-template] {
  display: none;
}

/* Style zoom in/out buttons */
.mapboxgl-ctrl-group button {
  background: #2a2727 !important;
}

/* Make default zoom icons white */
.mapboxgl-ctrl button .mapboxgl-ctrl-icon {
  filter: invert(1);
}

/* Hide mapbox logo and info */
.mapboxgl-ctrl-logo, .mapboxgl-ctrl-attrib {
  display: none !important;
}

.mapboxgl-ctrl-group button+button {
  border-top: 1px solid #ffffff1a;
}

@media screen and (max-width: 991px) {
  .globe-wrap {
    flex-flow: column;
    height: auto;
    display: flex;
  }

  .globe-map {
    aspect-ratio: 1;
    flex: none;
    height: auto;
    position: relative;
    inset: auto;
  }

  .globe-info {
    z-index: auto;
    box-shadow: none;
    border-style: solid none none;
    border-radius: 0;
    width: 100%;
    position: relative;
    inset: auto;
  }

  .globe-info__list {
    scroll-snap-type: x mandatory;
    display: flex;
    position: relative;
    inset: auto;
    overflow: auto hidden;
  }

  .globe-info__list-item {
    scroll-snap-align: center;
    border-right: 1px solid #ffffff1a;
    flex: 0 0 80%;
    min-width: 80%;
    /* REQUESTED CHANGE: trimmed further for mobile on top of the base
       reduction above. */
    padding: 1.25em 1.25em 1.5em;
  }

  .globe-info__list-item-text {
    margin-bottom: 0;
  }

  .globe-info__list-item-h {
    font-size: 1.35em;
  }

  .globe-close {
    display: none;
  }

  .globe-nav {
    border-left-style: none;
    border-right-style: none;
    border-radius: 0;
    justify-content: space-between;
    align-items: center;
    padding: 1em 1.5em;
    position: relative;
    inset: auto;
  }

  .globe-reopen {
    display: none;
  }
}

@media screen and (max-width: 479px) {
  .globe-info__list-item {
    grid-column-gap: 1em;
    grid-row-gap: 1em;
    padding-top: 1em;
    padding-left: 1em;
    padding-right: 1em;
  }

  .globe-info__list-item-visual {
    border-radius: .5em;
  }
}