/** Shopify CDN: Minification failed

Line 16:0 Unexpected "}"

**/
/* =========================================================
   GAS How it works (isolated styles)
   ========================================================= */

.gas-howto {
  position: relative;
  padding: 72px 0;
  background: transparent; /* <- wichtig für "Zwischenräume" */
}

}


.gas-howto--bridge::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 140px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,0));
}

.gas-howto__inner { position: relative; z-index: 1; }

.gas-howto__kicker {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: .10em;
  text-transform: uppercase;
  opacity: .85;
}

.gas-howto__title {
  margin: 0 0 10px;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.1;
  color: rgba(231, 200, 115, 0.98);
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

.gas-howto__sub {
  margin: 0 0 28px;
  max-width: 72ch;
  opacity: .9;
}

/* Grid */
.gas-howto__grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

/* Cards */
.gas-howto__card {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  box-shadow: 0 18px 50px rgba(0,0,0,.25);

  cursor: pointer;
  outline: none;

  transform: translateY(10px) scale(0.98);
  opacity: 0;
  transition: transform 420ms ease, opacity 420ms ease, box-shadow 420ms ease, border-color 420ms ease;
}

.gas-howto__card.is-visible {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Active emphasis */
.gas-howto__card.is-active {
  transform: translateY(-6px) scale(1.045);
  border-color: rgba(231,200,115,.28);
  box-shadow: 0 22px 70px rgba(0,0,0,.40);
}

/* De-emphasize others when we have an active card */
.gas-howto__grid.has-active .gas-howto__card:not(.is-active) {
  opacity: 0.72;
  transform: translateY(0) scale(0.985);
}

/* Media */
.gas-howto__media {
  position: relative;
  height: 190px;
  background: rgba(0,0,0,.25);
}

.gas-howto__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder if no image */
.gas-howto__placeholder {
  height: 100%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(231,200,115,.18), transparent 45%),
    linear-gradient(135deg, rgba(0,0,0,.35), rgba(255,255,255,.04));
}
.gas-howto__placeholder-label {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .8;
}

/* Video overlays image but is hidden unless active */
.gas-howto__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.gas-howto__card.is-active .gas-howto__video {
  opacity: 1;
}

/* Body */
.gas-howto__body { padding: 16px 16px 18px; }

.gas-howto__step {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.gas-howto__step-num {
  font-weight: 800;
  letter-spacing: .08em;
  color: rgba(231,200,115,.98);
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

.gas-howto__step-meta {
  font-size: 13px;
  opacity: .8;
}

.gas-howto__card-title {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.2;
  color: rgba(255,255,255,.92);
}

.gas-howto__card-text { margin: 0; opacity: .88; }

/* Focus */
.gas-howto__card:focus-visible {
  outline: 2px solid rgba(231,200,115,.65);
  outline-offset: 4px;
}

/* CTA (centered) */
.gas-howto__cta-wrap {
  margin-top: 26px;
  display: flex;
  justify-content: center;
}

.gas-howto__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;

  background: rgba(201,162,74,.92);
  color: rgba(5,27,63,1);
  font-weight: 800;
  border: 1px solid rgba(0,0,0,.18);
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
}

.gas-howto__cta:hover { background: rgba(231,200,115,.98); }

/* Responsive */
@media (max-width: 989px) {
  .gas-howto { padding: 54px 0; }

  /* Swipe row with peek + snap */
  .gas-howto__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    overflow-x: auto;
    overflow-y: visible;
    gap: 14px;

    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
      background: transparent;
  padding-left: 16px;
  padding-right: 16px;

  }
  .gas-howto__grid::-webkit-scrollbar { display: none; }

  .gas-howto__card {
      box-shadow: none; /* box-shadow aus, weil der den grauen Verlauf baut */
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.18));
    scroll-snap-align: start;
    scroll-snap-stop: always;
    
  transform: scale(.96);
  opacity: .75;
  transition:
    transform .45s ease,
    opacity .45s ease,
    filter .45s ease;
  }

.gas-howto__card.is-active {
    box-shadow: none; /* box-shadow aus, weil der den grauen Verlauf baut */
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.18));
  transform: scale(1);
  opacity: 1;
}


  .gas-howto__grid.has-active .gas-howto__card:not(.is-active) {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .gas-howto__media { height: 170px; }

  /* Mobile: CTA in der Section ausblenden (sticky CTA existiert bereits) */
  .gas-howto__cta-wrap { display: none; }

  /* Mobile: kein Focus-Outline außerhalb der Card */
  .gas-howto__card:focus-visible {
    outline: none;
    outline-offset: 0;
  }
}



/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gas-howto__card,
  .gas-howto__video { transition: none !important; }
  .gas-howto__card.is-active { transform: none !important; }
}
  /* Mobile: kein Focus-Outline außerhalb der Card (wirkt wie "Rahmen außerhalb") */
  .gas-howto__card:focus-visible {
    outline: none;
    outline-offset: 0;
  }