/* Machbar Snapshots — off-grid peek carousel (related-projects pattern) */

.section-cases.machbar-snapshots {
  --machbar-snap-viewport-w: 100vw;
  --machbar-snap-viewport-w: 100svw;
  --machbar-snap-section-pad-x: 100px;
  --machbar-snap-section-pad-y: 120px;
  --machbar-snap-gap: 160px;
  --machbar-snap-avail-w: max(
    0px,
    var(--machbar-snap-viewport-w) - (2 * var(--machbar-snap-section-pad-x))
  );
  --machbar-snap-container-w: min(var(--machbar-content-max, 1600px), var(--machbar-snap-avail-w));
  --machbar-snap-inset: calc(
    var(--machbar-snap-section-pad-x) +
      (var(--machbar-snap-avail-w) - var(--machbar-snap-container-w)) / 2
  );
  /* One full 2-column grid row per slide; next slide peeks at viewport edge */
  --machbar-snap-slide-w: var(--machbar-snap-container-w);

  --machbar-snap-vivid: #5fa898;
  --machbar-snap-bg: color-mix(in srgb, var(--machbar-snap-vivid) 25%, white);
  --machbar-snap-ink: color-mix(in srgb, var(--machbar-snap-vivid) 50%, black);

  background-color: var(--machbar-snap-bg);
  transition: background-color 0.65s ease;
  /* Match Case Studies (.section-cases 120px) — same px top and bottom */
  padding-top: var(--machbar-snap-section-pad-y) !important;
  padding-bottom: var(--machbar-snap-section-pad-y) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow-x: clip;
  overflow-y: visible;
  position: relative;
}

.section-cases.impressionen {
  background-color: transparent;
}

.machbar-snapshots__header {
  padding-left: var(--machbar-snap-section-pad-x);
  padding-right: var(--machbar-snap-section-pad-x);
  box-sizing: border-box;
}

.machbar-snapshots__title,
.machbar-snapshots__title.headline.dunkelgr-n {
  margin-bottom: 40px;
  color: var(--machbar-snap-ink);
  transition: color 0.65s ease;
}

.machbar-snapshots .projectbox---text-bold {
  color: var(--machbar-snap-ink);
  transition: color 0.65s ease;
}

.machbar-snapshots-carousel {
  margin: 0;
  width: 100%;
}

.machbar-snapshots-carousel-shell {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.machbar-snapshots-viewport {
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Allow vertical page scroll; horizontal via drag / arrows / trackpad sideways */
  touch-action: pan-x pan-y;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-left: var(--machbar-snap-inset);
  padding-right: 0;
  scroll-padding-inline: var(--machbar-snap-inset) 0;
  outline: none;
  width: 100%;
  position: relative;
}

.machbar-snapshots-viewport:active {
  cursor: grabbing;
}

.machbar-snapshots .machbar-snapshots-viewport:focus,
.machbar-snapshots .machbar-snapshots-viewport:focus-visible,
.machbar-snapshots .machbar-snapshots-viewport[tabindex]:focus-visible {
  outline: none;
  box-shadow: none;
}

.machbar-snapshots-viewport::-webkit-scrollbar {
  display: none;
}

.machbar-snapshots-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--machbar-snap-gap);
  width: max-content;
  margin: 0;
  padding: 0 var(--machbar-snap-inset) 0 0;
  list-style: none;
}

.machbar-snapshots-slide {
  flex: 0 0 var(--machbar-snap-slide-w);
  width: var(--machbar-snap-slide-w);
  max-width: var(--machbar-snap-slide-w);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-width: 0;
  box-sizing: border-box;
  opacity: 0.5;
  transition: opacity 0.45s ease;
}

.machbar-snapshots-slide.is-active {
  opacity: 1;
}

.machbar-snapshots-card {
  width: 100%;
  max-width: var(--machbar-content-max, 1600px);
  margin: 0;
  box-sizing: border-box;
}

.machbar-snapshots-copy.project-block {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0 10px 0 0;
  box-sizing: border-box;
}

/* Case intro uses block margins, not machbar-grid-column flex gap */
.machbar-snapshots-copy.machbar-grid-column {
  gap: 0;
}

.machbar-snapshots-slide-title.caseteaser_headline {
  margin-bottom: 10px;
  color: var(--machbar-snap-ink);
  transition: color 0.65s ease;
}

.machbar-snapshots-title-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.machbar-snapshots-title-link:hover .machbar-snapshots-slide-title {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

/* —— Snapshot detail page —— */

.machbar-snapshot-page {
  --machbar-snap-vivid: #5fa898;
  --machbar-snap-bg: color-mix(in srgb, var(--machbar-snap-vivid) 25%, white);
  --machbar-snap-ink: color-mix(in srgb, var(--machbar-snap-vivid) 50%, black);
}

.machbar-snapshot-header.section-header {
  position: relative;
  width: 100%;
  height: 40vh !important;
  min-height: 200px;
  max-height: none;
  overflow: hidden;
  background: #e8eceb;
  padding: 0;
  margin: 0;
}

.machbar-snapshot-header__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.machbar-snapshot-header__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e8eceb 0%, #d5ddd9 100%);
}

/* Proof: white band, ink headlines match Passende Projekte */
.machbar-snapshot-proof.machbar-snapshots {
  background-color: #fff !important;
  padding-left: var(--machbar-snap-section-pad-x) !important;
  padding-right: var(--machbar-snap-section-pad-x) !important;
  /* Inherit page tint tokens (override slider section defaults). */
  --machbar-snap-vivid: inherit;
  --machbar-snap-bg: #fff;
  --machbar-snap-ink: inherit;
}

.machbar-snapshot-proof .machbar-snapshots-slide-title,
.machbar-snapshot-proof .projectbox---text-bold,
.machbar-snapshot-proof .machbar-snapshots-cta-label,
.machbar-snapshot-proof .machbar-snapshots-cta {
  color: var(--machbar-snap-ink);
  transition: color 0.65s ease;
}

.machbar-snapshot-proof .machbar-snapshots-cta-arrow {
  background-color: var(--machbar-snap-ink);
}

.machbar-snapshot-proof .machbar-snapshots-card {
  max-width: var(--machbar-content-max, 1600px);
  margin-left: auto;
  margin-right: auto;
}

.machbar-snapshot-related.machbar-sl-projects {
  background-color: var(--machbar-snap-bg);
  transition: background-color 0.65s ease;
}

.machbar-snapshot-related .machbar-sl-projects__title,
.machbar-snapshot-related .machbar-sl-projects__all-label {
  color: var(--machbar-snap-ink) !important;
  transition: color 0.65s ease;
}

/* CTA: continuous tint with related (no white seam) + full-bleed inked “m.” */
.section-cta:has(.machbar-snapshot-cta) {
  position: relative;
  overflow: hidden;
  background-color: var(--machbar-snap-bg);
  /* Drop the 120px “pull-up” pad — it showed as a white stripe under related */
  padding-top: 0;
  padding-bottom: 0;
  transition: background-color 0.65s ease;
}

.section-cta:has(.machbar-snapshot-cta)::after {
  content: '';
  position: absolute;
  /* Sit flush on the footer edge — no green gap under the glyph */
  top: auto;
  right: 1.25rem;
  left: auto;
  bottom: 0;
  width: min(46vw, 620px);
  max-height: 85%;
  aspect-ratio: 1000 / 470;
  height: auto;
  transform: none;
  z-index: 1;
  pointer-events: none;
  background-color: #fff;
  /* mask.png = full rounded tops; rot.png is the cropped Webflow asset */
  -webkit-mask: url('/images/m_bildmarke_mask.png') center / contain no-repeat;
  mask: url('/images/m_bildmarke_mask.png') center / contain no-repeat;
}

.section-cta:has(.machbar-snapshot-cta) .cta-textbox {
  margin-top: 0;
  position: relative;
  z-index: 2;
}

.container.cta-hellgr-n.machbar-snapshot-cta {
  position: relative;
  /* z-index:auto — a stacking context here hides the section ::after mark */
  z-index: auto;
  overflow: visible;
  background-color: transparent !important;
  background-image: none !important;
  --machbar-cta-mark: #fff;
}

/* Mark lives on the section — don’t double-paint on the container */
.container.cta-hellgr-n.machbar-snapshot-cta::after {
  content: none;
  display: none;
}

.container.cta-hellgr-n.machbar-sl-cta.machbar-snapshot-cta .cta-headline.thin,
.container.cta-hellgr-n.machbar-sl-cta.machbar-snapshot-cta .cta-headline,
.container.cta-hellgr-n.machbar-sl-cta.machbar-snapshot-cta .headline-2.link {
  color: var(--machbar-snap-ink) !important;
  transition: color 0.65s ease;
}

.container.cta-hellgr-n.machbar-snapshot-cta .cta-arrow {
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden;
  visibility: hidden;
}

.container.cta-hellgr-n.machbar-snapshot-cta .linkbox::after {
  content: '';
  display: block;
  width: 22px;
  height: 22px;
  margin-top: 4px;
  margin-left: 10px;
  flex-shrink: 0;
  background-color: var(--machbar-snap-ink);
  -webkit-mask: url('/images/Arrow_Re_Dunkelgruen.svg') no-repeat center / contain;
  mask: url('/images/Arrow_Re_Dunkelgruen.svg') no-repeat center / contain;
  transition: background-color 0.65s ease;
}

@media (max-width: 991px) {
  .machbar-snapshot-header.section-header {
    height: 30vh !important;
    min-height: 180px;
  }
}

@media (max-width: 767px) {
  .machbar-snapshot-header.section-header {
    height: 250px !important;
    min-height: 200px;
  }
}

@media (max-width: 479px) {
  .machbar-snapshot-header.section-header {
    height: 160px !important;
    min-height: 140px;
  }
}

/* Case intro rhythm: .headline 40px, .leistungen 40px — no doubled grid gap */
.machbar-snapshots-copy .paragraph.machbar-snapshots-intro {
  margin-bottom: 40px;
}

.machbar-snapshots-copy .kunde {
  margin-bottom: 40px;
}

.machbar-snapshots-copy .leistungen:last-child {
  margin-bottom: 0;
}

.machbar-snapshots-slide .machbar-snapshots-card.container {
  margin-left: 0;
  margin-right: 0;
}

.machbar-snapshots-media {
  min-width: 0;
  width: 100%;
}

.machbar-snapshots-media-wrap,
.machbar-snapshots-media .video_w_pi_div {
  width: 100%;
  position: relative;
}

.machbar-snapshots-image,
.machbar-snapshots-media .machbar-grid-poster {
  width: 100%;
  height: auto;
  display: block;
}

.machbar-snapshots-media-frame--placeholder {
  aspect-ratio: 5 / 4;
  width: 100%;
  border-radius: 0;
  overflow: hidden;
  background: #c5cec9;
  display: grid;
  place-items: center;
  color: #6b7a74;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.machbar-snapshots-cta {
  margin-top: 0;
  display: inline-block;
  color: var(--machbar-snap-ink);
}

.machbar-snapshots-cta .machbar-snapshots-cta-label.headline-2.link {
  color: var(--machbar-snap-ink);
  transition: color 0.65s ease, opacity 0.25s ease;
}

.machbar-snapshots-cta-arrow {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-top: 4px;
  margin-left: 10px;
  flex-shrink: 0;
  background-color: var(--machbar-snap-ink);
  -webkit-mask: url('/images/Arrow_Re_Dunkelgruen.svg') no-repeat center / contain;
  mask: url('/images/Arrow_Re_Dunkelgruen.svg') no-repeat center / contain;
  transition:
    background-color 0.65s ease,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.25s ease;
}

/* Circular nav — same as related-projects off-grid carousel */
.machbar-snapshots-btn {
  position: absolute;
  top: 50%;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
  color: #fff;
  transform: translateY(-50%);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.machbar-snapshots-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.48);
}

.machbar-snapshots-btn:disabled {
  opacity: 0.25;
  cursor: default;
}

.machbar-snapshots-btn--prev,
.machbar-snapshots-btn--next {
  left: auto;
  right: auto;
}

.machbar-snapshots-btn-icon {
  display: block;
  width: 26px;
  height: auto;
  pointer-events: none;
}

.machbar-snapshots-btn-icon--prev {
  transform: scaleX(-1);
}

.machbar-snapshots-indicators {
  --machbar-snap-indicator-size: 48px;
  margin-top: 24px;
  margin-bottom: 0;
  padding-left: var(--machbar-snap-inset);
  padding-right: var(--machbar-snap-inset);
  box-sizing: border-box;
}

.machbar-snapshots-indicators__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.machbar-snapshots-indicators__item {
  margin: 0;
  padding: 0;
}

.machbar-snapshots-indicator {
  display: block;
  width: var(--machbar-snap-indicator-size);
  height: var(--machbar-snap-indicator-size);
  margin: 0;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  cursor: pointer;
  overflow: hidden;
  opacity: 0.5;
  transition:
    opacity 0.35s ease,
    border-color 0.35s ease,
    transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.machbar-snapshots-indicator:hover {
  opacity: 0.75;
}

.machbar-snapshots-indicator.is-active {
  opacity: 1;
  border-color: var(--machbar-snap-ink);
}

.machbar-snapshots-indicator__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
}

.machbar-snapshots-indicator__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  font-family: Informative, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--machbar-snap-ink);
}

@media (max-width: 991px) {
  .machbar-snapshots-indicators {
    --machbar-snap-indicator-size: 44px;
    margin-top: 20px;
    margin-bottom: 0;
    padding-left: var(--machbar-snap-section-pad-x);
    padding-right: var(--machbar-snap-section-pad-x);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-cases.machbar-snapshots {
    transition: none;
  }

  .machbar-snapshots__title,
  .machbar-snapshots-slide-title.caseteaser_headline,
  .machbar-snapshots .projectbox---text-bold,
  .machbar-snapshots-cta .machbar-snapshots-cta-label.headline-2.link,
  .machbar-snapshots-cta-arrow,
  .machbar-snapshots-slide,
  .machbar-snapshots-indicator {
    transition: none;
  }
}

@media (max-width: 991px) {
  .section-cases.machbar-snapshots {
    --machbar-snap-section-pad-x: 40px;
    --machbar-snap-section-pad-y: 60px;
    --machbar-snap-gap: 112px;
  }

  .machbar-snapshots-btn {
    width: 44px;
    height: 44px;
  }

  .machbar-snapshots-btn-icon {
    width: 22px;
  }
}

@media (max-width: 767px) {
  .section-cases.machbar-snapshots {
    --machbar-snap-section-pad-x: 20px;
    --machbar-snap-section-pad-y: 30px;
  }

  .machbar-snapshots__title {
    margin-bottom: 20px;
  }
}