/* =========================================================
   SHOW show TABS – Elementor kompatibel + JS-safe
   basiert auf styles.css (.tabs/.tab) und app.js show (.tabs .tab)
   ========================================================= */

/* Accent fallback, falls du mal ohne ML-Token arbeitest */


/* Scope: nur im Show-show (empfohlen), plus optionaler Klassenscope */
#show .tabs,
.ml-tabs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;

  /* integriert dein gap-* System, wenn du z.B. gap-xs auf .tabs setzt */
  gap: var(--flow-gap, .5rem);

  position:relative;
  z-index:2;
}

/* Klickbares Element (im Prototype: <button class="tab" ...>) */
#show .tabs .tab,
.ml-tabs .ml-tab{
  appearance:none;
  -webkit-appearance:none;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:.6rem .9rem;
  border-radius:999px;
  border:1px solid var(--tabs-bd);

  background:var(--tabs-bg);
  color:var(--tabs-muted);

  cursor:pointer;
  user-select:none;
  text-decoration:none;

  /* verhindert Theme/Button Styles in WP */
  font: inherit;
  line-height: 1;

  transition:
    transform .12s ease,
    box-shadow .2s ease,
    border-color .2s ease,
    background .2s ease,
    color .2s ease;
}

/* Hover / Focus */
#show .tabs .tab:hover,
.ml-tabs .ml-tab:hover{
  transform: translateY(-1px);
  color: var(--tabs-text);
}

#show .tabs .tab:focus-visible,
.ml-tabs .ml-tab:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px var(--tabs-ring);
  border-color: var(--tabs-bd-active);
  color: var(--tabs-text);
}

/* Active (JS setzt aria-selected) */
#show .tabs .tab[aria-selected="true"],
.ml-tabs .ml-tab[aria-selected="true"]{
  box-shadow: 0 0 0 3px var(--tabs-ring);
  border-color: var(--tabs-bd-active);
  color: var(--tabs-text);
}

/* Optional: “pressed” feel */
#show .tabs .tab:active,
.ml-tabs .ml-tab:active{
  transform: translateY(0);
}

/* Motion reduced */
@media (prefers-reduced-motion: reduce){
  #show .tabs .tab,
  .ml-tabs .ml-tab{
    transition:none;
  }
  #show .tabs .tab:hover,
  .ml-tabs .ml-tab:hover{
    transform:none;
      color: var(--tabs-text);
  }
}
/* Elementor-safe Stage hardening (falls Elementor/Theme Regeln überschreibt) */
.elementor #show .stage-bleed{
  position: relative;
  isolation: isolate;
  min-height: 80svh;
  overflow: hidden;
  width: 100%;
}

.elementor #show .stage-bleed .media{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.elementor #show .stage-bleed .media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media(max-width:768px){
    .elementor #show .stage-bleed .media img{object-fit:cover;}
}



.elementor #show .stage-bleed .meta{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.25rem;
    max-width:1400px;
    margin:auto;
}

/* section-narrow auch für "reine" HTML Wrapper nutzbar machen */
.section-narrow{
  max-width: var(--section-narrow);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.section-narrow-xs{
  max-width: var(--section-narrow-xs);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}