.elementor-kit-8{--e-global-color-primary:#FFFFFF;--e-global-color-secondary:#0B0B0B;--e-global-color-text:#7A7A7A;--e-global-color-accent:#8FA13A;--e-global-color-8c17402:#8FA13A;--e-global-color-0951e26:#C9A12B;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;background-color:#0B0B0C;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-kit-8 h1{font-family:"Montserrat", Sans-serif;}.elementor-kit-8 h2{font-family:"Poppins", Sans-serif;}.elementor-kit-8 button,.elementor-kit-8 input[type="button"],.elementor-kit-8 input[type="submit"],.elementor-kit-8 .elementor-button{border-radius:3px 3px 3px 3px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1500px;}.e-con{--container-max-width:1500px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:820px;}.e-con{--container-max-width:820px;}}/* Start custom CSS *//* ===============================
   PREMIUM CAP CARDS (Nike/Shopify)
   =============================== */

/* Grid Abstand (falls du cap-grid nutzt) */
.cap-grid{ gap:18px; }

/* Card Grunddesign */
.cap-card{
  cursor:pointer;
  position:relative;
  overflow:hidden;
  border-radius:16px;

  background: linear-gradient(180deg, rgba(28,28,28,0.95), rgba(14,14,14,0.95));
  border: 1px solid rgba(255,255,255,0.12);

  padding:18px;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  transform: translateZ(0);
}

/* Goldener Lichtreflex (sauber, ohne Ecke) */
.cap-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(600px 220px at 30% 15%, rgba(200,164,90,0.22), transparent 55%),
    radial-gradient(500px 200px at 80% 70%, rgba(200,164,90,0.10), transparent 60%);
  opacity:0;
  transition: opacity .22s ease;
  pointer-events:none;
}

/* zusätzlicher „Glass“-Sheen / Highlight */
.cap-card::after{
  content:"";
  position:absolute;
  inset:-30%;
  border-radius:inherit;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.10) 50%, transparent 65%);
  transform: translateX(-40%) rotate(8deg);
  opacity:0;
  transition: transform .35s ease, opacity .22s ease;
  pointer-events:none;
}

/* Hover: Karte hebt sich, Glow + Sheen */
.cap-card:hover{
  transform: translateY(-7px);
  border-color: rgba(200,164,90,0.70);
  box-shadow: 0 22px 50px rgba(0,0,0,0.60);
}

.cap-card:hover::before{ opacity:1; }
.cap-card:hover::after{
  opacity:1;
  transform: translateX(25%) rotate(8deg);
}

/* Cap „schwebt“ */
.cap-card img{
  display:block;
  margin: 0 auto;
  max-height:115px;
  width:auto;

  filter: drop-shadow(0 14px 18px rgba(0,0,0,0.55));
  transform: translateY(-2px);
  transition: transform .22s ease, filter .22s ease;
}

.cap-card:hover img{
  transform: translateY(-8px) scale(1.03);
  filter: drop-shadow(0 24px 26px rgba(0,0,0,0.65));
}

/* Text etwas edler */
.cap-card .elementor-widget-text-editor,
.cap-card .elementor-widget-heading{
  text-align:center;
  margin-top: 12px;
}

.cap-card .elementor-widget-text-editor,
.cap-card .elementor-heading-title{
  letter-spacing: 0.2px;
}

/* ACTIVE: Auswahl „gleitet“ weich ein */
.active-cap{
  border: 2px solid #C8A45A !important;
  box-shadow:
    0 0 0 2px rgba(200,164,90,0.18),
    0 26px 60px rgba(0,0,0,0.65) !important;
}

/* Active Glow stärker */
.active-cap::before{ opacity: 1; }

/* optional: kleines Auswahl-„Badge“ */
.active-cap::marker{ display:none; }

/* ===============================
   MOBILE SWIPE SLIDER
   =============================== */
@media (max-width: 767px){
  .cap-grid{
    display:flex;
    flex-wrap: nowrap !important;
    gap: 14px;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
  }

  .cap-grid::-webkit-scrollbar{ height: 6px; }
  .cap-grid::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,0.18);
    border-radius: 99px;
  }

  .cap-grid .cap-card{
    min-width: 74%;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}
/* Weiter Button deaktiviert */
button.cap-disabled,
button.cap-disabled:hover{
  opacity:0.35 !important;
  pointer-events:none !important;
  cursor:not-allowed !important;
  filter: grayscale(40%) !important;
}/* ===== Selected Checkmark (Premium) ===== */
.cap-card{
  position: relative; /* sicherstellen */
}

.cap-card::marker{ display:none; } /* nur zur Sicherheit */

/* Checkmark oben rechts, nur wenn aktiv */
.cap-card.active-cap::after{
  content:"✓";
  position:absolute;
  top:12px;
  right:12px;

  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;
  background: rgba(200,164,90,0.92);
  color:#111;

  font-weight:800;
  font-size:16px;

  box-shadow: 0 10px 22px rgba(0,0,0,0.55);
  transform: scale(0.85);
  animation: popIn .18s ease forwards;
}

/* kleine Pop-Animation */
@keyframes popIn{
  from { transform: scale(0.65); opacity:0; }
  to   { transform: scale(1); opacity:1; }
}
/* ===== Selected Checkmark (robust) ===== */

/* Standard: Checkmark ist aus */
.cap-card::after{
  content:"";
  opacity:0;
}

/* Checkmark wird sichtbar, wenn irgendwo IN der Karte .active-cap gesetzt ist */
.cap-card:has(.active-cap)::after,
.cap-card.active-cap::after{
  content:"✓";
  opacity:1;

  position:absolute;
  top:12px;
  right:12px;

  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;
  background: rgba(200,164,90,0.92);
  color:#111;

  font-weight:800;
  font-size:16px;

  box-shadow: 0 10px 22px rgba(0,0,0,0.55);
  animation: popIn .18s ease forwards;
}

@keyframes popIn{
  from { transform: scale(0.65); opacity:0; }
  to   { transform: scale(1); opacity:1; }
}
/* ===== Checkmark Element (robust) ===== */
.cap-card{ position:relative; }

.cap-check{
  position:absolute;
  top:12px;
  right:12px;
  width:30px;
  height:30px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(200,164,90,0.92);
  color:#111;
  font-weight:800;
  font-size:16px;

  box-shadow: 0 10px 22px rgba(0,0,0,0.55);

  opacity:0;
  transform: scale(.7);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events:none;
}

.cap-card.is-selected .cap-check{
  opacity:1;
  transform: scale(1);
}/* End custom CSS */