/* Basis-Frame: Text & Icons identisch */
.mb-marquee-frame-text,
.mb-marquee-frame-icons{
  position: relative;
  box-sizing: border-box;
  padding: var(--mb-border-width, 28px);
  background: var(--mb-bg, transparent);
  border-radius: var(--mb-radius, 44px);

  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-self: flex-start;
}

.mb-marquee-frame-text > .mb-marquee-inner,
.mb-marquee-frame-icons > .mb-marquee-inner{
  position: relative;
  z-index: 1;
  border-radius: calc(var(--mb-radius, 44px) - var(--mb-border-width, 28px));
  overflow: hidden;
  width: auto;
}

.mb-marquee-frame-text > .mb-marquee-overlay,
.mb-marquee-frame-icons > .mb-marquee-overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  color: var(--mb-text-color, #fff);
}

.mb-marquee-svg{
  width: 100%;
  height: 100%;
  display: block;
}

.mb-marquee-text{
  font-size: var(--mb-font-size, 18px);
  font-family: var(--mb-font-family, inherit), "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  dominant-baseline: middle;
}

.mb-marquee-icons image{
  pointer-events: none;
}

.mb-marquee-toggle{
  pointer-events: auto;
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,0.18);
  color: var(--mb-text-color, #fff);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.mb-marquee-overlay{ overflow: visible; }
.mb-marquee-svg{ overflow: visible; }

.mb-marquee-toggle:focus{
  outline: 2px solid rgba(255,255,255,0.65);
  outline-offset: 2px;
}

/* Elementor "width-auto" macht max-width: auto => ungültig */
.elementor-widget__width-auto.mb-marquee-frame-text,
.elementor-widget__width-auto.mb-marquee-frame-icons{
  --container-widget-width: fit-content !important;
  max-width: 100% !important;
  width: fit-content !important;
}

/* Text-Rahmen responsiv */
.mb-marquee-frame-text{
  --mb-font-size: clamp(12px, 1.2vw + 8px, 18px);

  /* optional: Rahmen-Dicke skaliert mit (sieht auf Mobile besser aus) */
  --mb-border-width: clamp(16px, 2.5vw, 28px);
}

/* optional: auf sehr kleinen Screens etwas weniger Lauftext-“Hektik” */
@media (max-width: 480px){
  .mb-marquee-frame-text .mb-marquee-text{
    letter-spacing: 0.05em;
  }
}
/* Text-Rahmen: BorderWidth automatisch aus Schriftgröße ableiten */
.mb-marquee-frame-text{
  /* font-size kommt aus Inline/Backend oder data -> fallback 18px */
  --mb-border-width: clamp(18px, calc(var(--mb-font-size, 18px) * 1.65), 64px);

  /* optional: Radius passend mitziehen (kannst du drin lassen oder löschen) */
  --mb-radius: clamp(44px, calc(var(--mb-border-width) * 1.55), 140px);
}