/** Shopify CDN: Minification failed

Line 559:0 Expected "}" to go with "{"

**/
/*Cards */

/* Wrapper = 3 Spalten Grid, ohne Tailwind */
.cards3-wrapper{
  max-width:1200px;
  margin: 2rem auto;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:24px;
}

/* Karte – eindeutiger Name, kein Konflikt mit Theme-".card" */
.cards3-card{
  background:#161616; /* dunkles Grau */
  border-radius:16px;
  padding:2rem;
  text-align:center;
  color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  transition:transform .2s ease, box-shadow .2s ease;
}

/* Verhindert das Buchstabenweise umbrechen */
.cards3-card, .cards3-title{
  word-break: normal;
  overflow-wrap: anywhere;   /* optional */
  white-space: normal;
}

.cards3-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 22px rgba(0,0,0,.35);
}

.cards3-logo{
  max-width:240px;
  height:auto;
  margin:0 auto 1rem;
  display:block;
}

.cards3-title{
  font-size:1.25rem;
  line-height:1.3;
  font-weight:800;
  margin:1rem 0 1.25rem;
}

.cards3-btn{
  display:inline-block;
  background:#161616;
  color:#fff;
  padding:.75rem 1.25rem;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  transition:opacity .2s ease, transform .2s ease;
}
.cards3-btn:hover{ opacity:.95; transform:translateY(-1px); }


/* Responsive: unter 900px -> 2 Spalten, unter 640px -> 1 Spalte */
@media (max-width: 900px){
  .cards3-wrapper{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .cards3-wrapper{ grid-template-columns: 1fr; }
}


/* Responsive: unter 900px -> 2 Spalten, unter 640px -> 1 Spalte */
@media (max-width: 900px){
  .cards3-wrapper{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .cards3-wrapper{ grid-template-columns: 1fr; }
}




/* === Horizon: Produktkarte optisch anpassen (nur Styling) === */

/* Hintergrund + Radius + Paddings auf der Karte */
.product-card__content,
.product-grid__card {
  background: #161616;
  border-radius: 12px;
  overflow: hidden;          /* runde Ecken auch fürs Bild */
  padding: 20px;             /* Basis-Padding (mobil) */
}

/* großzügiger auf Desktop */
@media (min-width: 750px) {
  .product-card__content,
  .product-grid__card {
    padding: 24px;           /* 24–28px je nach Geschmack */
  }
}

/* Inhalt der Karte als Spalte -> Footer/Preis sitzt unten */
.product-card__content {
  display: flex;
  flex-direction: column;
}

/* Footer (Preis/CTA) an den unteren Rand schieben */
.product-card__footer {
  margin-top: auto;
}

/* Bild „ein bisschen kleiner“ innerhalb der Karte  */
/* Variante ohne Layoutshift: leichtes scale */
.card-gallery {
  transform: scale(.93);     /* 0.90–0.96 je nach Wunsch */
  transform-origin: top center;
}

/* Alternativ (falls du scale nicht willst): Breite begrenzen
   -> In dem Fall die 3 Regeln oben zu .card-gallery entfernen. */
.card-gallery .rimage-outer-wrapper,
.card-gallery img {
  max-width: 100%;
  margin-inline: auto;
}

/* Optional: etwas Luft unter dem Bild */
.card-gallery { margin-bottom: 12px; }

/* Optional: dezenter Hover-Schatten */
@media (hover:hover) {
  .product-card__content:hover,
  .product-grid__card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
  }
}



/* === Karten gleich hoch + Preis unten ausrichten (robuste Variante) === */

/* 1) Grid-Zelle und unmittelbarer Karten-Container vollflächig */
.product-grid__item { height: 100%; }
.product-grid__item > * { height: 100%; }

/* 2) Karten-Root als Flex-Spalte – deckt .pcard, .product-card und custom element <product-card> ab */
.product-grid__item > :is(.pcard, .product-card, product-card) {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 3) Der “Inhaltsbereich” in der Karte bekommt Flex-Spalte + nimmt Resthöhe ein.
      Wir treffen alle gängigen Klassennamen der Themes. */
:is(.pcard, .product-card, product-card) 
  :is(.pcard__content, .product-card__content, .product-grid__card, .card__content) {
  display: flex;
  flex-direction: column;
  gap: 10px;          /* gern anpassen */
  flex: 1 1 auto;     /* nimmt Resthöhe ein */
}

/* 4) Footer/Preis nach unten pinnen (margin-top:auto) – mehrere mögliche Klassen/Strukturen */
:is(.pcard, .product-card, product-card)
  :is(.pcard__footer, .product-card__footer, .card__footer,
      .pcard__price, .product-card__price, .price, .price__container,
      .card-information__meta) {
  margin-top: auto;
}

/* Fallback: falls der Preis *tatsächlich* das letzte Element im Content ist */
:is(.pcard, .product-card, product-card)
  :is(.pcard__content, .product-card__content, .product-grid__card, .card__content) > :last-child {
  margin-top: auto;
}

/* 5) Titel “clampen”, damit Zeilenhöhen konsistent sind (max. 3 Zeilen als Beispiel) */
:is(.pcard, .product-card, product-card)
  :is(.pcard__title, .product-card__title, .card__heading, .product-title, h3) {
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;       /* max. Zeilen – nach Wunsch 2/3/4 */
  overflow: hidden;
  min-height: calc(1.3 * 1em * 3); /* gleiche “optische” Höhe für 3 Zeilen */
}




/* === Karte zuverlässig runden – inkl. Sliderbaum === */

/* 1) Der anklickbare Medien-Wrapper auf der Karte */
a[ref="cardGalleryLink"]{
  display:block;
  border-radius:12px !important;
  overflow:hidden !important;
  /* doppelt hält besser – falls transform/translate im Spiel ist */
  clip-path: inset(0 round 12px) !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari-Fix */
}

/* 2) Alle Slider-Layer übernehmen den Radius & clippen mit */
a[ref="cardGalleryLink"] slideshow-component,
a[ref="cardGalleryLink"] slideshow-container,
a[ref="cardGalleryLink"] slideshow-slides,
a[ref="cardGalleryLink"] slideshow-slide,
a[ref="cardGalleryLink"] .product-media{
  border-radius:inherit !important;
  overflow:hidden !important;
}

/* 3) Medien selbst */
a[ref="cardGalleryLink"] img,
a[ref="cardGalleryLink"] picture > img,
a[ref="cardGalleryLink"] video{
  border-radius:inherit !important;
  display:block;
  width:100%;
  height:auto;
  object-fit:contain; /* falls du „cover“ willst: hier auf cover ändern */
}

/* 4) Falls dein Karten-Wrapper eine generierte Klasse wie card_gallery_* hat, auch die clippen */
[class^="card_gallery_"], [class*=" card_gallery_"]{
  border-radius:12px !important;
  overflow:hidden !important;
  clip-path: inset(0 round 12px) !important;
}



.product-card { position: relative; }
.p-badges{
  position:absolute; top:.6rem; left:.6rem;
  display:flex; gap:.25rem; margin:0; padding:0; list-style:none;
  z-index:3; pointer-events:none;
}
.p-badge{
  font-size:12px; line-height:1; padding:4px 8px; border-radius:999px;
  background:rgba(0,0,0,.85); color:#fff; font-weight:600; text-transform:uppercase;
}



/* Zustände – Farben nach Wunsch */
.product-badges__badge--neu { background:#22c55e; color:#fff; font-weight:bold; }           /* Grün (Neu) */
.product-badges__badge--mint { background:#34d399; color:#063; font-weight:bold; }          /* Mint-Farbton */
.product-badges__badge--near-mint { background:#60a5f6; color:#0b2a5b; font-weight:bold; }  /* bläulich */
.product-badges__badge--light-damage { background:#fb923c; color:#7c2d12; font-weight:bold; } /* orange */
.product-badges__badge--damaged { background:#ef4444; color:#fff; font-weight:bold; }       /* rot */

/* Lagerstatus */
.product-badges__badge--pre-order { background:#fde047; color:#78350f; font-weight:bold; }      /* Gelb */
.product-badges__badge--preorder-last { background:#ef4444; color:#fff; font-weight:bold; }     /* Rot (Last Piece Pre-Order) */
.product-badges__badge--last { background:#fde68a; color:#713f12; font-weight:bold; }           /* Last Piece (Lager) */

.product-badges__badge + .product-badges__badge {
  margin-left: 6px;
}


/* PDP: Badges unter dem Titel, nicht absolut */
.product-badges--inline {
  position: static !important;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;            /* Abstand zwischen den Badges */
  width: 100%;
  margin-top: .5rem;
}

/* Sicherheitsnetz: alle absoluten Insets entfernen, falls vom Karten-Layout geerbt */
.product-badges--inline { top:auto; right:auto; bottom:auto; left:auto; }





.preorder-banner {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .875rem 1rem;
  margin-top: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: .5rem;
  background: #f9fafb;
  color: #374151; /* dunkles Grau für gesamten Text */
}

.preorder-banner__icon {
  margin-top: .15rem;
  color: #374151; /* Icon dunkelgrau */
}

.preorder-banner__title {
  margin: 0;
  font-weight: 600;
  color: #374151; /* Titel dunkelgrau */
}

.preorder-banner__eta {
  margin: .15rem 0 0;
  color: #374151; /* Datum dunkelgrau */
}

.preorder-banner__link a {
  text-decoration: underline;
  color: #374151; /* Link dunkelgrau */
}


/* Nur Cart Drawer fixen */
cart-drawer-component .dialog-drawer,
cart-drawer-component dialog {
  top: 0 !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
}

/* Navi */
.header-menu a,
.mega-menu a {
  position: relative;
  transition: color .2s ease;
}

.mega-menu__content,
.header__mega-menu,
.mega-menu {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 220px !important;
  padding-right: 40px !important;
}

.header-menu a::after,
.mega-menu a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: #8BC34A;
  transition: width .25s ease;
}

.header-menu a:hover,
.mega-menu a:hover {
  color: #fff;
}

.header-menu a:hover::after,
.mega-menu a:hover::after {
  width: 100%;
}



/* Mega Menu Reset */
.mega-menu,
.mega-menu__content,
.mega-menu__list {
  padding-left: initial !important;
  padding-right: initial !important;
  margin-left: initial !important;
  margin-right: initial !important;
  max-width: initial !important;
  justify-content: initial !important;
}

.header-menu a:hover,
.mega-menu a:hover,
.mega-menu__list a:hover {
  color: #fff !important;
  text-decoration: underline !important;
  text-decoration-color: #8BC34A !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
}

.header-menu a::after,
.mega-menu a::after,
.mega-menu__list a::after {
  display: none !important;
}





/* Card Market Banner */

#shopify-section-template--26802290393463__section_HPETLr .custom-section-content {
  background: linear-gradient(
    135deg,
    rgba(139, 195, 74, 0.08),
    rgba(0, 0, 0, 0)
  ) !important;

  border: 1px solid rgba(139, 195, 74, 0.22) !important;

  border-radius: 28px !important;

  padding: 24px !important;

  overflow: hidden;
  position: relative;
}

#shopify-section-template--26802290393463__section_HPETLr .custom-section-content::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at top left,
      rgba(139, 195, 74, 0.14),
      transparent 45%
    );

  pointer-events: none;
}

#shopify-section-template--26802290393463__section_HPETLr h2 {
  font-size: clamp(34px, 4vw, 54px) !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
}

#shopify-section-template--26802290393463__section_HPETLr p {
  font-size: 20px !important;
  line-height: 1.5 !important;
  opacity: 0.92;
}

#shopify-section-template--26802290393463__section_HPETLr .button {
  background: #8BC34A !important;
  border-radius: 18px !important;
  padding: 16px 30px !important;
  font-weight: 700 !important;
  transition: 0.2s ease;
}

#shopify-section-template--26802290393463__section_HPETLr .button:hover {
  background: #6EA63E !important;
  transform: translateY(-2px);
}

#shopify-section-template--26802290393463__section_HPETLr {
  max-width: 1400px;
  margin: 2rem auto;
  padding-left: 32px;
  padding-right: 32px;
}

@media screen and (max-width: 749px) {
  #shopify-section-template--26802290393463__section_HPETLr .custom-section-content,
  #shopify-section-template--26802290393463__section_HPETLr .section-content-wrapper,
  #shopify-section-template--26802290393463__section_HPETLr .layout-panel-flex {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 20px !important;
  }

  #shopify-section-template--26802290393463__section_HPETLr .custom-section-content {
    padding: 28px 20px !important;
    overflow: hidden !important;
  }

  #shopify-section-template--26802290393463__section_HPETLr h2 {
    max-width: 100% !important;
    font-size: 20px !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }

  #shopify-section-template--26802290393463__section_HPETLr p {
    max-width: 100% !important;
    font-size: 17px !important;
    line-height: 1.4 !important;
    text-align: center !important;
  }

  #shopify-section-template--26802290393463__section_HPETLr img {
    width: 150px !important;
    max-width: 150px !important;
    height: auto !important;
    margin: 0 auto 8px !important;
  }

  #shopify-section-template--26802290393463__section_HPETLr .button {
    width: 100% !important;
    max-width: 260px !important;
  }

  #shopify-section-template--26802290393463__section_HPETLr .rich-text__heading,
  #shopify-section-template--26802290393463__section_HPETLr h3,
  #shopify-section-template--26802290393463__section_HPETLr .h1,
  #shopify-section-template--26802290393463__section_HPETLr .h2 {
    font-size: 22px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    text-align: center;
  }

  #shopify-section-template--26802290393463__section_HPETLr img {
    width: 110px !important;
    max-width: 110px !important;
  }

  #shopify-section-template--26802290393463__section_HPETLr p {
    font-size: 16px !important;
  }

  #shopify-section-template--26802290393463__section_HPETLr .button {
    min-height: 54px !important;
    font-size: 18px !important;
  }




  @media screen and (max-width: 749px) {

  #Hero-template--25927546274167__hero_jVaWmY .hero__image {
    object-fit: cover !important;
    object-position: 28% center !important;
  }

  #Hero-template--25927546274167__hero_jVaWmY .hero__media-wrapper {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    margin-left: -600px;
  }

  #Hero-template--25927546274167__hero_jVaWmY h1,
  #Hero-template--25927546274167__hero_jVaWmY h2 {
    font-size: clamp(44px, 12vw, 64px) !important;
    line-height: 1.08 !important;
    text-align: left !important;
  }

}