/* ============================================================
   BLACKY MIXES — Cocktails Widget
   Self-contained: image-dominante Karten + Modal-Popup mit Blur.
   Voll editierbar über CSS-Variablen aus Elementor-Controls.
   ============================================================ */

.blacky-mixes{
  /* Default-Breite gleich wie BLACKY² (1240px), wird vom Elementor max_width-Control überschrieben */
  /* Gleiche Innen-Breite wie BLACKY² inkl. gleicher horizontaler Paddings */
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(18px,4vw,40px) !important;
  padding-right: clamp(18px,4vw,40px) !important;
  --bm-bg:           transparent;
  --bm-text:         #c2c2c2;
  --bm-text-strong:  #f0f0f0;
  --bm-dim:          #6b6b6b;
  --bm-accent:       #ffffff;
  --bm-line:         rgba(255,255,255,0.10);
  --bm-line-soft:    rgba(255,255,255,0.06);
  --bm-card-bg:      #111111;
  --bm-modal-bg:     #0e0e10;
  --bm-modal-dim:    rgba(0,0,0,0.22);
  --bm-modal-blur:   18px;
  --bm-radius:       18px;
  --bm-card-aspect:  4 / 5;
  --bm-cols:         3;
  --bm-gap:          16px;
  --bm-modal-max:    720px;
  --bm-noalc:        #b9e0c4;
  --bm-btn-radius:   255px 14px 235px 14px / 14px 235px 14px 255px;

  background: var(--bm-bg);
  color: var(--bm-text);
  font-family: 'Inter', system-ui, sans-serif;
}

.blacky-mixes *{ box-sizing: border-box; }

.bm__header{ margin-bottom: 28px; }
.bm__eyebrow{
  display: inline-block;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.22em;
  font-size: 12px;
  color: var(--bm-dim);
  padding: 6px 12px;
  border: 1px solid var(--bm-line);
  border-radius: 999px;
  margin-bottom: 18px;
}
.bm__headline{
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.03em;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.94;
  margin: 0 0 18px;
  color: var(--bm-text-strong);
  text-transform: uppercase;
}
.bm__headline .pill{
  display: inline-block;
  border: 2px solid var(--bm-text-strong);
  border-radius: 999px;
  padding: 0 24px;
  font-size: 0.72em;
  vertical-align: middle;
  letter-spacing: 0.06em;
  background: var(--bm-text-strong);
  color: var(--bm-modal-bg);
}
.bm__lead{
  max-width: 620px;
  font-size: 16px;
  margin: 0 0 36px;
  color: var(--bm-text);
}

/* Filter */
.bm__filter{
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid var(--bm-line);
  background: rgba(255,255,255,0.02);
  margin-bottom: 36px;
  position: relative;
  z-index: 4;
}
.bm__filter button{
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--bm-text);
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.12em;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
.bm__filter button:hover{ color: var(--bm-text-strong); }
.bm__filter button.is-active{
  background: var(--bm-accent);
  color: var(--bm-modal-bg);
}

/* Cards */
.bm__grid{
  display: grid;
  grid-template-columns: repeat(var(--bm-cols), 1fr);
  gap: var(--bm-gap);
}
.bm__card{
  position: relative;
  aspect-ratio: var(--bm-card-aspect);
  border-radius: var(--bm-radius);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--bm-line-soft);
  background: var(--bm-card-bg);
  transition: transform 240ms ease, border-color 220ms ease;
}
.bm__card-img{
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
}
.bm__card-img::after{
  content: "";
  position: absolute;
  inset: 40% 0 0 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.92) 100%);
}
.bm__card-body{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: 18px 18px 16px;
  color: var(--bm-text-strong);
}
.bm__card-body h3{
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.04em;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1;
  margin: 0 0 10px;
  color: var(--bm-text-strong);
}
.bm__badges{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.bm__badges span{
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.1em;
  font-size: 10.5px;
  color: var(--bm-text-strong);
  border: 1px solid rgba(255,255,255,0.32);
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(4px);
}
.bm__badges span.is-noalc{
  border-color: rgba(120,200,140,0.55);
  color: var(--bm-noalc);
}
.bm__card-body p{
  margin: 0;
  font-size: 13px;
  color: rgba(255,255,255,0.78);
}
.bm__card:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.22);
}

@media (max-width: 980px){
  .blacky-mixes{ --bm-cols: 2; }
}
@media (max-width: 720px){
  .blacky-mixes{ --bm-cols: 2 !important; --bm-gap: 12px !important; padding-left: 14px !important; padding-right: 14px !important; }
  .bm__card{ aspect-ratio: 4/5 !important; min-height: 240px; }
  .bm__card-body{ padding: 12px !important; }
  .bm__card-body h3{ font-size: 17px !important; margin-bottom: 6px !important; line-height: 1.05 !important; }
  .bm__badges span{ font-size: 9.5px !important; padding: 2px 7px !important; }
  .bm__card-body p{ font-size: 11.5px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .bm__filter{ width: 100%; justify-content: space-between; }
  .bm__filter button{ padding: 9px 12px !important; font-size: 12px !important; flex: 1; }
}
@media (max-width: 460px){
  .blacky-mixes{ --bm-cols: 1 !important; padding-left: 16px !important; padding-right: 16px !important; }
  .bm__card{ aspect-ratio: auto !important; min-height: 200px !important; }
  .bm__card-body h3{ font-size: 22px !important; }
  .bm__card-body p{ -webkit-line-clamp: 3; font-size: 13px !important; }
}

/* ============ MODAL ============ */
.bm__modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 320ms;
}
.bm__modal.is-open{
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s linear 0s;
}
.bm__modal-backdrop{
  position: absolute;
  inset: 0;
  background: var(--bm-modal-dim);
  backdrop-filter: blur(var(--bm-modal-blur));
  -webkit-backdrop-filter: blur(var(--bm-modal-blur));
  opacity: 0;
  transition: opacity 340ms cubic-bezier(.16,1,.3,1);
}
.bm__modal.is-open .bm__modal-backdrop{ opacity: 1; }

.bm__modal-panel{
  position: relative;
  width: 100%;
  max-width: var(--bm-modal-max);
  max-height: 92vh;
  background: var(--bm-modal-bg);
  border: 1px solid var(--bm-line);
  border-radius: 22px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: scale(0.9) translateY(36px);
  transition: opacity 380ms cubic-bezier(.16,1,.3,1), transform 480ms cubic-bezier(.16,1,.3,1);
  box-shadow: 0 30px 90px rgba(0,0,0,0.7);
}
.bm__modal.is-open .bm__modal-panel{
  opacity: 1;
  transform: scale(1) translateY(0);
}

.bm__modal-hero{
  position: relative;
  width: 100%;
  aspect-ratio: 21/9;
  flex-shrink: 0;
  min-height: 220px;
  overflow: hidden;
  background-color: #1a1a1c;
}
.bm__modal-hero-img{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.bm__modal.is-open .bm__modal-hero-img{
  animation: bm-hero-in 900ms cubic-bezier(.16,1,.3,1);
}
@keyframes bm-hero-in{
  from{ transform: scale(1.08); }
  to{   transform: scale(1); }
}
.bm__modal-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14,14,16,0) 55%, rgba(14,14,16,0.6) 100%);
}

.bm__modal-close{
  position: absolute;
  top: 14px; right: 14px;
  z-index: 5;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  color: var(--bm-text-strong);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 180ms ease, transform 180ms ease;
}
.bm__modal-close:hover{
  background: rgba(255,255,255,0.18);
  transform: rotate(90deg);
}

.bm__modal-counter{
  position: absolute;
  top: 18px; left: 18px;
  z-index: 5;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.18em;
  font-size: 12px;
  color: var(--bm-text-strong);
  padding: 6px 12px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
}

.bm__modal-nav{
  position: absolute;
  top: 50%;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.35);
  cursor: pointer;
  z-index: 5;
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(-50%) scale(0.6);
  transition: opacity 280ms cubic-bezier(.16,1,.3,1), transform 380ms cubic-bezier(.16,1,.3,1), background 180ms ease, border-color 180ms ease;
}
.bm__modal.is-open .bm__modal-nav{ opacity: 0.92; transform: translateY(-50%) scale(1); transition-delay: 80ms; }
.bm__modal-nav:hover{ background: rgba(0,0,0,0.78); border-color: #fff; opacity: 1; }
.bm__modal-nav:active{ transform: translateY(-50%) scale(.92); }
/* Chevron als gedrehter Border (kräftig, skalierbar, wie im Produkt-Anfrage Widget) */
.bm__modal-nav::before{
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
}
.bm__modal-nav--prev::before{ transform: rotate(135deg); margin-left: 5px; }
.bm__modal-nav--next::before{ transform: rotate(-45deg); margin-right: 5px; }
.bm__modal-nav--prev{ left: calc(50% - var(--bm-modal-max)/2 - 72px); }
.bm__modal-nav--next{ right: calc(50% - var(--bm-modal-max)/2 - 72px); }

.bm__modal-body{
  padding: 22px 28px 26px;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bm__modal-name{
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.04em;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 0.98;
  margin: 0;
  color: var(--bm-text-strong);
}
.bm__modal-badges{ display: flex; gap: 6px; flex-wrap: wrap; }
.bm__modal-badges span{
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.1em;
  font-size: 11px;
  color: var(--bm-text-strong);
  border: 1px solid var(--bm-line);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
}
.bm__modal-badges span.is-noalc{
  border-color: rgba(120,200,140,0.4);
  color: var(--bm-noalc);
}
.bm__modal-desc{
  margin: 2px 0 8px;
  color: var(--bm-text);
  font-size: 14.5px;
}

.bm__modal-recipe{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding-top: 8px;
}
.bm__modal-recipe h4{
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.14em;
  font-size: 12px;
  color: var(--bm-dim);
  margin: 0 0 8px;
}
.bm__modal-recipe ul,
.bm__modal-recipe ol{ margin: 0; padding: 0; list-style: none; }
.bm__modal-recipe li{
  padding: 8px 0;
  border-bottom: 1px dashed var(--bm-line-soft);
  font-size: 14px;
  color: var(--bm-text-strong);
}
.bm__modal-recipe ol{ counter-reset: bm-step; }
.bm__modal-recipe ol li{
  counter-increment: bm-step;
  padding-left: 26px;
  position: relative;
}
.bm__modal-recipe ol li::before{
  content: counter(bm-step);
  position: absolute;
  left: 0; top: 8px;
  font-family: 'Bebas Neue', sans-serif;
  color: var(--bm-text-strong);
  font-size: 13px;
}
.bm__modal-recipe li:last-child{ border-bottom: 0; }

.bm__modal-meta{
  margin-top: 10px;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px dashed var(--bm-line-soft);
}
.bm__modal-meta > div{
  font-size: 13px;
  color: var(--bm-text-strong);
}
.bm__modal-meta span{
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.14em;
  font-size: 11px;
  color: var(--bm-dim);
  margin-bottom: 4px;
}

.bm__modal-actions{
  margin-top: 22px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
/* Action-Buttons sind jetzt echte .blacky-btn-Komponenten (Markup im PHP).
   Hier nur kleine widget-spezifische Anpassungen (kein eigener Style). */
.bm__modal-actions .blacky-btn{ font-size: clamp(12px, 1vw, 14px); }

/* ============ MOBILE LAYOUT: 3-Bereiche Modal ============
   Top sticky: großer Close + Counter
   Middle: scrollbarer Inhalt (Hero + Recipe + Meta + Action-Buttons)
   Bottom sticky: Pfeil-Navigation (Mobile-Bar)
   ============================================================ */

/* Mobile-Bar default hidden (nur Mobile zeigt sie) */
.bm__modal-mobilebar{ display: none; }

@media (max-width: 720px){
  .bm__modal{ padding: 14px 10px 10px; align-items: flex-end; }
  .bm__modal-panel{
    max-width: 100%;
    max-height: calc(100vh - 24px);
    border-radius: 24px;
    transform: translateY(102%);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  /* Drag-Handle oben mittig */
  .bm__modal-panel::before{
    content: "";
    position: absolute;
    top: 8px; left: 50%;
    width: 44px; height: 4px;
    background: rgba(255,255,255,0.25);
    border-radius: 2px;
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: none;
  }
  .bm__modal.is-open .bm__modal-panel{ transform: translateY(0); }
  /* Hero kompakt */
  .bm__modal-hero{ aspect-ratio: 5/2; min-height: 140px; flex-shrink: 0; }
  /* Counter: oben links, sticky-feeling über Hero */
  .bm__modal-counter{
    top: 20px !important; left: 16px !important;
    font-size: 11px !important; padding: 5px 11px !important;
    z-index: 12 !important;
  }
  /* X-Close: groß, sehr sichtbar, oben rechts, immer da */
  .bm__modal-close{
    top: 16px !important; right: 14px !important;
    width: 44px !important; height: 44px !important;
    font-size: 24px !important; font-weight: 300;
    z-index: 12 !important;
    background: rgba(0,0,0,0.7) !important;
    border-color: rgba(255,255,255,0.5) !important;
  }
  /* Original-Pfeile außerhalb ausblenden auf Mobile */
  .bm__modal > .bm__modal-nav{ display: none !important; }
  /* SCROLL-AREA: Body mit Inhalt */
  .bm__modal-body{
    padding: 18px 20px 14px;
    gap: 12px;
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .bm__modal-name{ font-size: 28px; }
  .bm__modal-desc{ font-size: 14px; }
  .bm__modal-recipe{ grid-template-columns: 1fr; gap: 18px; padding-top: 4px; }
  .bm__modal-recipe h4{ font-size: 11px; letter-spacing: 0.2em; }
  .bm__modal-recipe li{ font-size: 13.5px; padding: 7px 0; }
  .bm__modal-meta{ gap: 16px; padding-top: 12px; margin-top: 6px; }
  .bm__modal-meta span{ font-size: 10px; }
  .bm__modal-meta > div{ font-size: 12.5px; flex: 1 1 30%; }
  /* Action-Buttons: full-width stacked, am Ende vom scroll-bereich */
  .bm__modal-actions{ margin-top: 14px; gap: 10px; flex-direction: column; }
  .bm__modal-actions .blacky-btn{ width: 100%; padding: 13px 22px; font-size: 13px; }
  /* BOTTOM-BAR: feste Pfeil-Navigation am Modal-Boden */
  .bm__modal-mobilebar{
    display: flex;
    flex-shrink: 0;
    padding: 12px 16px 14px;
    background: rgba(14,14,16,0.96);
    border-top: 1px solid rgba(255,255,255,0.08);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 11;
  }
  .bm__modal-mobilebar-nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
  }
  .bm__modal-mobilebar-btn{
    appearance: none;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    width: 48px; height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 180ms ease, transform 180ms ease, border-color 180ms ease;
    flex: 0 0 auto;
    padding: 0;
  }
  .bm__modal-mobilebar-btn:hover{ background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.32); }
  .bm__modal-mobilebar-btn:active{ transform: scale(0.94); }
  .bm__modal-mobilebar-btn svg{ display: block; }
  .bm__modal-mobilebar-counter{
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.18em;
    font-size: 14px;
    color: #f0f0f0;
    padding: 8px 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    flex: 1 1 auto;
    text-align: center;
  }
}
@media (max-width: 460px){
  .bm__modal{ padding: 10px 6px 6px; }
  .bm__modal-panel{ max-height: calc(100vh - 16px); border-radius: 20px; }
  .bm__modal-name{ font-size: 24px; }
  .bm__modal-hero{ aspect-ratio: 16/7; min-height: 120px; }
  .bm__modal-body{ padding: 16px 16px 12px; }
  .bm__modal-mobilebar{ padding: 10px 12px 12px; }
  .bm__modal-mobilebar-btn{ width: 44px; height: 44px; }
  .bm__modal-mobilebar-counter{ font-size: 13px; padding: 7px 12px; }
}

/* ============ EDITOR PREVIEW MODE ============
   Wenn der User im Elementor-Editor "Modal immer offen anzeigen" aktiviert,
   wird das Modal nicht als position:fixed Overlay sondern als sichtbarer
   Block im Widget gerendert. So kann er es live stylen. */
.bm__modal.is-editor-preview{
  position: relative;
  visibility: visible;
  pointer-events: auto;
  padding: 0;
  margin-top: 28px;
  display: block;
}
.bm__modal.is-editor-preview .bm__modal-backdrop{ display: none; }
.bm__modal.is-editor-preview .bm__modal-panel{
  opacity: 1;
  transform: none;
  max-width: 100%;
  margin: 0 auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.bm__modal.is-editor-preview .bm__modal-nav{ opacity: 0.5; transform: translateY(-50%) scale(.9); }
.bm__modal.is-editor-preview .bm__modal-nav--prev{ left: -28px; }
.bm__modal.is-editor-preview .bm__modal-nav--next{ right: -28px; }


/* ============ EDITOR-ONLY: Full-Card-Overlay "Modal öffnen" ============
   Im Elementor-Editor blockt Elementors Auswahl-Layer Click-Events
   auf das Card-Element. Lösung: ein <a> Overlay über die ganze Card —
   Elementor ignoriert Klicks auf <a>-Tags und lässt das Modal aufgehen. */
.bm__card-editor-open{
  position: absolute !important;
  inset: 0 !important;
  z-index: 50 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  padding: 12px !important;
  background: transparent !important;
  color: #fff !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 180ms ease !important;
}
.bm__card-editor-open:hover{
  background: rgba(0,0,0,0.35) !important;
}
.bm__card-editor-open-label{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: 'Bebas Neue', sans-serif !important;
  letter-spacing: 0.12em !important;
  font-size: 11px !important;
  color: #fff !important;
  background: rgba(0,0,0,0.78) !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-transform: uppercase !important;
  pointer-events: none !important;
}
.bm__card-editor-open svg{ display: block !important; }

/* ============================================================
   REVEAL — Cocktails Eingangs-Animation (Cinematic)
   Klasse `.blacky-reveal-group` auf `.blacky-mixes`. JS = blacky-reveal.js.
   Sequenz: Filter rauf, dann Karten gestaffelt aus 3D-Perspektive rein
   (translateY + rotateX), Bilder mit subtle Scale-Pop.
   Alles GPU-only (opacity + transform), keine Filter/Blur.
   Respektiert prefers-reduced-motion (alles sofort sichtbar).
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  .blacky-mixes.blacky-reveal-group .bm__filter,
  .blacky-mixes.blacky-reveal-group .bm__card{
    opacity: 0;
    will-change: opacity, transform;
    transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
  }
  .blacky-mixes.blacky-reveal-group .bm__filter{ transform: translateY(22px) scale(.96); }
  /* 2D-Lift statt 3D-Tilt — beim rotateX rendern manche Browser die abgerundeten
     Ecken (overflow:hidden + border-radius) waehrend der Drehung kurz eckig.
     Explizite border-radius + overflow:hidden im Initial-State als Sicherheit. */
  .blacky-mixes.blacky-reveal-group .bm__card{
    transform: translateY(48px) scale(.94);
    transform-origin: 50% 60%;
    border-radius: var(--bm-radius);
    overflow: hidden;
  }
  .blacky-mixes.blacky-reveal-group .bm__card .bm__card-img{
    transform: scale(1.12);
    transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
  }

  /* is-in: aufdecken */
  .blacky-mixes.blacky-reveal-group.is-in .bm__filter,
  .blacky-mixes.blacky-reveal-group.is-in .bm__card{
    opacity: 1;
    transform: none;
  }
  .blacky-mixes.blacky-reveal-group.is-in .bm__card .bm__card-img{ transform: scale(1); }

  /* Stagger fürs Filter zuerst */
  .blacky-mixes.blacky-reveal-group.is-in .bm__filter{ transition-delay: .08s; }

  /* Karten-Stagger — Wave aus dem Tiefen-Raum */
  .blacky-mixes.blacky-reveal-group.is-in .bm__grid .bm__card:nth-child(1) { transition-delay: .22s; }
  .blacky-mixes.blacky-reveal-group.is-in .bm__grid .bm__card:nth-child(2) { transition-delay: .30s; }
  .blacky-mixes.blacky-reveal-group.is-in .bm__grid .bm__card:nth-child(3) { transition-delay: .38s; }
  .blacky-mixes.blacky-reveal-group.is-in .bm__grid .bm__card:nth-child(4) { transition-delay: .46s; }
  .blacky-mixes.blacky-reveal-group.is-in .bm__grid .bm__card:nth-child(5) { transition-delay: .54s; }
  .blacky-mixes.blacky-reveal-group.is-in .bm__grid .bm__card:nth-child(6) { transition-delay: .62s; }
  .blacky-mixes.blacky-reveal-group.is-in .bm__grid .bm__card:nth-child(7) { transition-delay: .70s; }
  .blacky-mixes.blacky-reveal-group.is-in .bm__grid .bm__card:nth-child(8) { transition-delay: .78s; }
  .blacky-mixes.blacky-reveal-group.is-in .bm__grid .bm__card:nth-child(9) { transition-delay: .86s; }
  .blacky-mixes.blacky-reveal-group.is-in .bm__grid .bm__card:nth-child(10){ transition-delay: .94s; }
  .blacky-mixes.blacky-reveal-group.is-in .bm__grid .bm__card:nth-child(11){ transition-delay: 1.02s; }
  .blacky-mixes.blacky-reveal-group.is-in .bm__grid .bm__card:nth-child(12){ transition-delay: 1.10s; }
  .blacky-mixes.blacky-reveal-group.is-in .bm__grid .bm__card:nth-child(n+13){ transition-delay: 1.18s; }

  /* Bild-Pop bekommt eigene, leicht spätere Welle */
  .blacky-mixes.blacky-reveal-group.is-in .bm__grid .bm__card:nth-child(1) .bm__card-img { transition-delay: .28s; }
  .blacky-mixes.blacky-reveal-group.is-in .bm__grid .bm__card:nth-child(2) .bm__card-img { transition-delay: .36s; }
  .blacky-mixes.blacky-reveal-group.is-in .bm__grid .bm__card:nth-child(3) .bm__card-img { transition-delay: .44s; }
  .blacky-mixes.blacky-reveal-group.is-in .bm__grid .bm__card:nth-child(4) .bm__card-img { transition-delay: .52s; }
  .blacky-mixes.blacky-reveal-group.is-in .bm__grid .bm__card:nth-child(5) .bm__card-img { transition-delay: .60s; }
  .blacky-mixes.blacky-reveal-group.is-in .bm__grid .bm__card:nth-child(6) .bm__card-img { transition-delay: .68s; }
  .blacky-mixes.blacky-reveal-group.is-in .bm__grid .bm__card:nth-child(n+7) .bm__card-img { transition-delay: .76s; }

  /* Editor: NICHT verstecken, sonst arbeitet man im Blindflug */
  body.elementor-editor-active .blacky-mixes.blacky-reveal-group .bm__filter,
  body.elementor-editor-active .blacky-mixes.blacky-reveal-group .bm__card,
  body.elementor-editor-active .blacky-mixes.blacky-reveal-group .bm__card .bm__card-img{
    opacity: 1 !important;
    transform: none !important;
  }
}