/* MM-RB - FX-Effekte als Vanilla-JS/CSS, portiert fuer WordPress/Elementor.
 * Quelle: intern (MIT). Kein React, keine externen Libs.
 * Namespace: alles unter .mmrb- / [data-mmrb]. Greift NICHT in mm-fx ein.
 * Anwendung in Elementor: (1) Shortcode-Widget [mm_rb ...], oder
 * (2) CSS-Klasse im Advanced-Tab eines beliebigen Elements (mmrb-borderglow etc.).
 */

/* ---------- Hintergrund-Buehne (WebGL + Canvas) ---------- */
.mmrb-bg {
  position: relative;
  overflow: hidden;
  height: var(--mmrb-h, 520px);
  background: var(--mmrb-bg, #0A1A2F);
}
.mmrb-bg__stage {
  position: absolute;
  inset: 0;
  pointer-events: auto; /* Stage faengt Cursor-Events fuer alle interaktiven Effekte (metaballs/liquidwater/lightfall/dotgrid/fogreveal) */
  /* Pre-Init / Fallback-Look gegen FOUC + bei mmrb-fail (WebGL nicht verfuegbar/Budget voll/Mobil) */
  background: linear-gradient(180deg, var(--mmrb-bg, #0A1A2F) 0%, #06101c 100%);
}
.mmrb-bg__stage canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.mmrb-bg__content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Stage muss Cursor-Events bekommen (metaballs/fogreveal/liquidwater) */
}
.mmrb-bg__content a,
.mmrb-bg__content button,
.mmrb-bg__content input,
.mmrb-bg__content textarea,
.mmrb-bg__content select,
.mmrb-bg__content [role="button"] {
  pointer-events: auto; /* echte Bedien-Elemente bleiben klickbar */
}
.mmrb-bg__label {
  position: absolute;
  bottom: 1.1rem;
  left: 1.2rem;
  z-index: 3;
  font: 500 0.72rem/1.3 'Inter', system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  pointer-events: none;
}
@media (max-width: 767px) {
  .mmrb-bg { height: min(var(--mmrb-h, 520px), 62vh); }
}
@media (prefers-reduced-motion: reduce) {
  .mmrb-bg__stage { display: none; }
}

/* fogreveal: verstecktes Bild, das der Cursor freilegt */
.mmrb-fog__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
/* fogreveal: Video-Schicht (Loop), liegt unter dem Nebel und wird vom Cursor freigelegt */
.mmrb-fog__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  background: #06101b;
}
/* fogreveal: dunkler Text, den ein langsam wandernder Lichtkegel periodisch lesbar macht */
.mmrb-fog__text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6vmin;
  text-align: center;
  pointer-events: none;
  z-index: 3;
}
.mmrb-fog__textinner {
  --mmrb-fogtext: #eaf2fc;
  position: relative;
  max-width: 15em;
  margin: 0;
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-weight: 800;
  letter-spacing: .015em;
  line-height: 1.12;
  font-size: clamp(1.5rem, 3.8vw, 3.1rem);
  text-transform: uppercase;
  /* DEFAULT: hell + lesbar, mit einer noch helleren Bande, die langsam durchwandert */
  background-image: linear-gradient(100deg,
    #cfe0f2 0%, #cfe0f2 42%, #ffffff 50%, #cfe0f2 58%, #cfe0f2 100%);
  background-size: 260% 100%;
  background-position: 130% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 2px 16px rgba(0, 10, 22, .55); /* dunkler Saum -> lesbar gegen das Video */
  animation: mmrb-fogsweep 9s ease-in-out infinite alternate;
}
/* Beim Hovern (Cursor enthuellt den Sturm): Schrift wird dunkel -> Scheinwerfer + Blitze
 * im Video stellen den Kontrast her und lassen die Schrift aufblitzen. */
.mmrb-fog__text.is-hover .mmrb-fog__textinner {
  background-image: linear-gradient(100deg, rgba(9, 13, 20, .93) 0%, rgba(9, 13, 20, .93) 100%);
  animation: none;
  text-shadow: 0 0 22px rgba(150, 180, 210, .15);
}
@keyframes mmrb-fogsweep {
  0%   { background-position: 135% 0; }
  100% { background-position: -35% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mmrb-fog__textinner { animation: none; }
}

/* ====================================================================
 * KOMBINIERTER HERO: Scroll-Flipbook (Ruder-Dive) + Side-Rays-Overlay + Text
 * in EINER Sticky-Buehne (.mmsa-hero__sticky). Markup im HTML-Widget,
 * Engines via [mm_fx_assets]. Layer: Canvas z0 < Rays z1 < Text z2.
 * ==================================================================== */
.mmo-fxhero { position: relative; }
.mmo-fxhero__rays {
  position: absolute !important;
  inset: 0;
  height: 100% !important;
  z-index: 1;
  pointer-events: none;
  background: transparent !important;
}
.mmo-fxhero__rays .mmrb-bg__stage { position: absolute; inset: 0; pointer-events: none !important; background: transparent !important; }
.mmo-fxhero__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(20px, 7vw, 112px);
  pointer-events: none;
}
.mmo-fxhero__content > * { pointer-events: auto; }
.mmo-fxhero__eyebrow {
  margin: 0 0 .7rem; font-family: 'Manrope', system-ui, sans-serif; font-weight: 700;
  font-size: .82rem; letter-spacing: .22em; text-transform: uppercase; color: #bfe3ff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
.mmo-fxhero__title {
  margin: 0 0 1rem; max-width: 16em; font-family: 'Manrope', system-ui, sans-serif; font-weight: 800;
  font-size: clamp(2rem, 5.4vw, 4.4rem); line-height: 1.04; text-transform: uppercase; color: #fff;
  text-shadow: 0 4px 30px rgba(0, 12, 24, .6);
}
.mmo-fxhero__sub {
  margin: 0; max-width: 34em; font-family: 'Inter', system-ui, sans-serif; font-weight: 500;
  font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.5; color: #e8f2fb;
  text-shadow: 0 2px 16px rgba(0, 12, 24, .6);
}
.mmo-fxhero__hint {
  margin-top: 1.7rem; font-family: 'Inter', system-ui, sans-serif; font-weight: 600; font-size: .8rem;
  letter-spacing: .06em; color: #a9c6e0; opacity: .9;
  animation: mmo-fxhint 2.2s ease-in-out infinite;
}
@keyframes mmo-fxhint { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .mmo-fxhero__hint { animation: none; } }

/* ====================================================================
 * BORDER GLOW  (intern Components/BorderGlow - verbatim CSS, namespaced)
 * Killer-Effekt. Anwendung: Klasse .mmrb-borderglow auf Wrapper, JS setzt Vars.
 * ==================================================================== */
.mmrb-borderglow {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 20; /* niedriger = Border-Glow reagiert frueher (war 30) */
  --color-sensitivity: calc(var(--edge-sensitivity) + 20);
  --border-radius: 22px;
  --glow-padding: 36px;
  --cone-spread: 25;
  --fill-opacity: 0.5;
  /* MMO-Defaults: tuerkis/hellblauer Wasser-Glow (passt zu Meer/Schiffen) */
  --glow-color: hsl(186deg 90% 62% / 100%);
  --glow-color-60: hsl(186deg 90% 62% / 60%);
  --glow-color-50: hsl(186deg 90% 62% / 50%);
  --glow-color-40: hsl(186deg 90% 62% / 40%);
  --glow-color-30: hsl(186deg 90% 62% / 30%);
  --glow-color-20: hsl(186deg 90% 62% / 20%);
  --glow-color-10: hsl(186deg 90% 62% / 10%);
  --card-bg: #0E1726;

  position: relative;
  border-radius: var(--border-radius);
  isolation: isolate;
  transform: translate3d(0, 0, 0.01px);
  display: grid;
  border: 1px solid rgb(255 255 255 / 12%);
  background: var(--card-bg);
  overflow: visible;
}
.mmrb-borderglow::before,
.mmrb-borderglow::after,
.mmrb-borderglow > .mmrb-edge-light {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity 0.25s ease-out;
  z-index: -1;
}
.mmrb-borderglow:not(:hover):not(.mmrb-sweep):not(.mmrb-near)::before,
.mmrb-borderglow:not(:hover):not(.mmrb-sweep):not(.mmrb-near)::after,
.mmrb-borderglow:not(:hover):not(.mmrb-sweep):not(.mmrb-near) > .mmrb-edge-light {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}
.mmrb-borderglow::before {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-bg) 0 100%) padding-box,
    linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
    var(--gradient-one) border-box,
    var(--gradient-two) border-box,
    var(--gradient-three) border-box,
    var(--gradient-four) border-box,
    var(--gradient-five) border-box,
    var(--gradient-six) border-box,
    var(--gradient-seven) border-box,
    var(--gradient-base) border-box;
  opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mask-image: conic-gradient(
    from var(--cursor-angle) at center,
    black calc(var(--cone-spread) * 1%),
    transparent calc((var(--cone-spread) + 15) * 1%),
    transparent calc((100 - var(--cone-spread) - 15) * 1%),
    black calc((100 - var(--cone-spread)) * 1%)
  );
}
.mmrb-borderglow::after {
  border: 1px solid transparent;
  background:
    var(--gradient-one) padding-box,
    var(--gradient-two) padding-box,
    var(--gradient-three) padding-box,
    var(--gradient-four) padding-box,
    var(--gradient-five) padding-box,
    var(--gradient-six) padding-box,
    var(--gradient-seven) padding-box,
    var(--gradient-base) padding-box;
  mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
  mask-composite: subtract, add, add, add, add, add;
  opacity: calc(var(--fill-opacity) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode: soft-light;
}
.mmrb-borderglow > .mmrb-edge-light {
  inset: calc(var(--glow-padding) * -1);
  pointer-events: none;
  z-index: 1;
  mask-image: conic-gradient(
    from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%
  );
  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode: plus-lighter;
}
.mmrb-borderglow > .mmrb-edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--glow-color),
    inset 0 0 1px 0 var(--glow-color-60),
    inset 0 0 3px 0 var(--glow-color-50),
    inset 0 0 6px 0 var(--glow-color-40),
    inset 0 0 15px 0 var(--glow-color-30),
    inset 0 0 25px 2px var(--glow-color-20),
    inset 0 0 50px 2px var(--glow-color-10),
    0 0 1px 0 var(--glow-color-60),
    0 0 3px 0 var(--glow-color-50),
    0 0 6px 0 var(--glow-color-40),
    0 0 15px 0 var(--glow-color-30),
    0 0 25px 2px var(--glow-color-20),
    0 0 50px 2px var(--glow-color-10);
}
.mmrb-borderglow__inner {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  padding: 1.5rem;
}

/* --------------------------------------------------------------------
 * INNEN-GLOW (Lars-Wunsch 24.07.2026): Zusatzklasse .has-innerglow auf
 * .mmrb-borderglow - das Karten-Innere leuchtet beim Hover sanft mit auf
 * (radialer Fill folgt dem Cursor via --mm-x/--mm-y aus dem JS-Loop).
 * Dezent, tuerkis/hellblau, kein Neon. Liegt UNTER dem Inhalt (z -1 im
 * __inner-Stacking-Context), UEBER dem Karten-Hintergrund.
 * -------------------------------------------------------------------- */
.mmrb-borderglow.has-innerglow {
  --innerglow-color: hsl(186deg 85% 60% / 18%);
  --innerglow-soft: hsl(196deg 80% 55% / 9%);
  --innerglow-opacity: 1;
}
.mmrb-borderglow.is-light.has-innerglow {
  --innerglow-color: hsl(192deg 90% 52% / 10%);
  --innerglow-soft: hsl(200deg 85% 55% / 5%);
}
.mmrb-borderglow.has-innerglow > .mmrb-borderglow__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: calc(var(--border-radius) - 1px);
  background:
    radial-gradient(circle 260px at var(--mm-x, 50%) var(--mm-y, 50%), var(--innerglow-color), transparent 100%),
    radial-gradient(ellipse 120% 120% at 50% 50%, var(--innerglow-soft), transparent 75%);
  opacity: 0;
  transition: opacity 0.35s ease-out;
  pointer-events: none;
}
.mmrb-borderglow.has-innerglow:hover > .mmrb-borderglow__inner::before,
.mmrb-borderglow.has-innerglow:focus-within > .mmrb-borderglow__inner::before {
  opacity: var(--innerglow-opacity);
}
@media (prefers-reduced-motion: reduce) {
  .mmrb-borderglow.has-innerglow > .mmrb-borderglow__inner::before { transition: none; }
}

/* ====================================================================
 * GLOW CARD (01.08.2026): Border Glow + Spotlight/Innen-Glow fuer NATIVE
 * Elementor-Container (auch V4 e-flexbox). Nicht-invasiv: Layout, BG,
 * Border, Radius und Padding des Containers bleiben unberuehrt - die
 * Karte bleibt in Elementor voll pflegbar. JS injiziert nur 2 absolute
 * Deko-Spans (__edge = Rand-Glow bei Annaeherung, __fill = Spotlight +
 * Innen-Glow beim Hover), KEIN Re-Parenting der Kinder.
 * Farbe als HSL-Triplet --gc-h/--gc-s/--gc-l - Override per Zusatzklasse
 * (z.B. .mmo-glow-green in mmo-base.css). Default tuerkis (Wasser/Meer).
 * ==================================================================== */
.mmrb-glowcard {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 20;
  --gc-pad: 36px;
  --gc-h: 186; --gc-s: 90%; --gc-l: 62%;
  --gc-ring: hsl(var(--gc-h) var(--gc-s) var(--gc-l) / 90%);
  --gc-spot: hsl(var(--gc-h) var(--gc-s) var(--gc-l) / 14%);
  --gc-soft: hsl(var(--gc-h) var(--gc-s) var(--gc-l) / 6%);
  position: relative;
  isolation: isolate;
}
/* Rand-Glow: sitzt 36px UEBER die Karte hinaus, conic-Maske Richtung Cursor */
.mmrb-glowcard > .mmrb-glowcard__edge {
  position: absolute;
  inset: calc(var(--gc-pad) * -1);
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  -webkit-mask-image: conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 12%, transparent 88%, black 97.5%);
  mask-image: conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 12%, transparent 88%, black 97.5%);
  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  transition: opacity 0.25s ease-out;
}
.mmrb-glowcard:not(:hover):not(.mmrb-near) > .mmrb-glowcard__edge {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}
.mmrb-glowcard > .mmrb-glowcard__edge::before {
  content: "";
  position: absolute;
  inset: var(--gc-pad);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--gc-ring),
    inset 0 0 1px 0 hsl(var(--gc-h) var(--gc-s) var(--gc-l) / 60%),
    inset 0 0 3px 0 hsl(var(--gc-h) var(--gc-s) var(--gc-l) / 50%),
    inset 0 0 6px 0 hsl(var(--gc-h) var(--gc-s) var(--gc-l) / 40%),
    inset 0 0 15px 0 hsl(var(--gc-h) var(--gc-s) var(--gc-l) / 30%),
    0 0 1px 0 hsl(var(--gc-h) var(--gc-s) var(--gc-l) / 60%),
    0 0 3px 0 hsl(var(--gc-h) var(--gc-s) var(--gc-l) / 50%),
    0 0 6px 0 hsl(var(--gc-h) var(--gc-s) var(--gc-l) / 40%),
    0 0 15px 0 hsl(var(--gc-h) var(--gc-s) var(--gc-l) / 30%),
    0 0 25px 2px hsl(var(--gc-h) var(--gc-s) var(--gc-l) / 20%),
    0 0 50px 2px hsl(var(--gc-h) var(--gc-s) var(--gc-l) / 10%);
}
/* Spotlight + Innen-Glow: Radial folgt dem Cursor (--mm-x/--mm-y aus dem
 * geteilten JS-Loop), plus weicher Flaechen-Schein. z-index -1 = UNTER dem
 * Inhalt und ueber dem Karten-BG (Karte hat isolation:isolate). */
.mmrb-glowcard > .mmrb-glowcard__fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle 300px at var(--mm-x, 50%) var(--mm-y, 50%), var(--gc-spot), transparent 100%),
    radial-gradient(ellipse 120% 120% at 50% 50%, var(--gc-soft), transparent 75%);
  opacity: 0;
  transition: opacity 0.35s ease-out;
}
.mmrb-glowcard:hover > .mmrb-glowcard__fill,
.mmrb-glowcard:focus-within > .mmrb-glowcard__fill { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .mmrb-glowcard > .mmrb-glowcard__edge,
  .mmrb-glowcard > .mmrb-glowcard__fill { transition: none; }
}
/* Variante `mmrb-nofill` (01.08.2026): Rand-Ring + Aussen-Glow bleiben, der
 * flaechige Innen-/Spotlight-Schein entfaellt. Fuer Karten, deren Inhalt beim
 * Hover nicht eingefaerbt werden soll. Das JS baut den __fill-Span dann gar
 * nicht erst; diese Regel greift zusaetzlich, falls die Klasse spaeter kommt
 * oder der Span aus einem frueheren Boot noch im DOM liegt. */
.mmrb-glowcard.mmrb-nofill > .mmrb-glowcard__fill { display: none !important; }

/* ====================================================================
 * GRADIENT TEXT (01.08.2026, intern TextAnimations/GradientText):
 * Zahlen-Schimmer fuer Kennzahlen. Basisfarbe = EIGENE Textfarbe des
 * Elements (JS liest computed color -> --gt-base; bewusst NUR
 * -webkit-text-fill-color:transparent, KEIN color:transparent - so bleibt
 * die Original-Farbe lesbar/vererbbar und ohne JS faellt alles sauber auf
 * currentColor zurueck). Shine = automatisch aufgehellte Variante
 * (JS -> --gt-shine). Reine CSS-Animation -> mobil identisch.
 * Anwendung: Klasse auf Zahl-Span (counter/elementor-counter-number)
 * oder via MMRB_AUTO wrap auf Zahlen im Fliesstext.
 * ==================================================================== */
/* ⚠️ Elementor-Lazyload-Falle: Elementors "Optimized/Lazy Background"
 * druckt inline `.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded)... *
 * { background-image: none !important }` fuer alle Nachfahren von
 * Below-the-fold-Containern (bis das Scroll-Script .e-lazyloaded setzt).
 * Ohne Gegenwehr waeren die Zahlen bis dahin UNSICHTBAR (text-fill
 * transparent + Gradient weggeraeumt). Darum: 6x-Klassen-Kette (0,6,0)
 * + !important auf background-image UND text-fill - schlaegt die
 * Elementor-Regel (~0,5,0 !important) in jeder Reihenfolge. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .mmrb-gradtext.mmrb-gradtext.mmrb-gradtext.mmrb-gradtext.mmrb-gradtext.mmrb-gradtext {
    background-image: linear-gradient(100deg,
      var(--gt-base, currentColor) 0%,
      var(--gt-base, currentColor) 34%,
      var(--gt-shine, #9cc8ff) 50%,
      var(--gt-base, currentColor) 66%,
      var(--gt-base, currentColor) 100%) !important;
    background-size: 300% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent !important;
    animation: mmrb-gt-sweep 7s ease-in-out infinite;
    /* bg-clip:text malt nur innerhalb der Box - grosse Ziffern (100px, enge
     * line-height) ragen mit Ober-/Unterlaengen darueber hinaus und wirkten
     * oben/unten ABGESCHNITTEN (Stats-Band). Padding erweitert die bemalte
     * Flaeche, negativer Margin macht das Layout netto-null. */
    padding: 0.18em 0.08em;
    margin: -0.18em -0.08em;
  }
}
@keyframes mmrb-gt-sweep {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .mmrb-gradtext.mmrb-gradtext.mmrb-gradtext.mmrb-gradtext.mmrb-gradtext.mmrb-gradtext {
    animation: none;
    background-image: none !important;
    -webkit-text-fill-color: currentColor !important;
  }
}

/* ====================================================================
 * SPECULAR BUTTON (01.08.2026, CSS-Interpretation von intern
 * Components/SpecularButton - bewusst OHNE WebGL): Cursor-folgendes
 * Glanzlicht im Button + heller Rand-Shine Richtung Cursor, reagiert
 * schon bei Annaeherung (geteilter bgGlow-Loop liefert --mm-x/--mm-y,
 * --cursor-angle, --edge-proximity). Nicht-invasiv: nur Klasse +
 * Pseudo-Elemente, Button bleibt in Elementor voll pflegbar.
 * Farben via --sb-light/--sb-edge (Default: weisses Licht - edel auf
 * farbigen Buttons). reduced-motion: alles aus.
 * ==================================================================== */
.mmrb-specbtn {
  position: relative;
  isolation: isolate;
  overflow: hidden; /* Glanz bleibt im Button */
  --sb-light: rgba(255, 255, 255, 0.30);
  --sb-edge: rgba(255, 255, 255, 0.85);
}
.mmrb-specbtn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle 90px at var(--mm-x, 50%) var(--mm-y, 50%), var(--sb-light), transparent 72%);
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.mmrb-specbtn:hover::after,
.mmrb-specbtn:focus-visible::after { opacity: 1; }
.mmrb-specbtn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  box-shadow: inset 0 0 0 1.5px var(--sb-edge), inset 0 0 10px 0 var(--sb-light);
  -webkit-mask-image: conic-gradient(from var(--cursor-angle, 45deg) at center, black 5%, transparent 18%, transparent 82%, black 95%);
  mask-image: conic-gradient(from var(--cursor-angle, 45deg) at center, black 5%, transparent 18%, transparent 82%, black 95%);
  opacity: calc((var(--edge-proximity, 0) - 20) / 80);
  transition: opacity 0.25s ease-out;
}
.mmrb-specbtn:not(:hover):not(.mmrb-near)::before {
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .mmrb-specbtn::before,
  .mmrb-specbtn::after { display: none; }
}

/* ====================================================================
 * STAR BORDER (intern Animations/StarBorder - verbatim CSS, namespaced)
 * ==================================================================== */
.mmrb-starborder {
  display: inline-block;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  padding: var(--mmrb-sb-thickness, 1px) 0;
}
.mmrb-starborder__bottom,
.mmrb-starborder__top {
  position: absolute;
  width: 300%;
  height: 50%;
  opacity: 0.7;
  border-radius: 50%;
  z-index: 0;
}
.mmrb-starborder__bottom {
  bottom: -12px;
  right: -250%;
  background: radial-gradient(circle, var(--mmrb-sb-color, #E4002B), transparent 10%);
  animation: mmrb-star-bottom linear infinite alternate;
  animation-duration: var(--mmrb-sb-speed, 6s);
}
.mmrb-starborder__top {
  top: -12px;
  left: -250%;
  background: radial-gradient(circle, var(--mmrb-sb-color, #E4002B), transparent 10%);
  animation: mmrb-star-top linear infinite alternate;
  animation-duration: var(--mmrb-sb-speed, 6s);
}
.mmrb-starborder__inner {
  position: relative;
  z-index: 1;
  border: 1px solid #2a3344;
  background: #0E1726;
  color: #fff;
  font-size: 16px;
  text-align: center;
  padding: 14px 26px;
  border-radius: 20px;
}
@keyframes mmrb-star-bottom { 0% { transform: translate(0%, 0%); opacity: 1; } 100% { transform: translate(-100%, 0%); opacity: 0; } }
@keyframes mmrb-star-top    { 0% { transform: translate(0%, 0%); opacity: 1; } 100% { transform: translate(100%, 0%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .mmrb-starborder__bottom, .mmrb-starborder__top { animation: none; opacity: 0.4; }
}

/* ====================================================================
 * SPOTLIGHT CARD (intern Components/SpotlightCard - verbatim, namespaced)
 * ==================================================================== */
.mmrb-spotlight {
  position: relative;
  border-radius: 1.25rem;
  border: 1px solid #233047;
  background-color: #0E1726;
  padding: 2rem;
  overflow: hidden;
  --mouse-x: 50%;
  --mouse-y: 50%;
  --spotlight-color: rgba(228, 0, 43, 0.18);
}
.mmrb-spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), var(--spotlight-color), transparent 80%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.mmrb-spotlight:hover::before,
.mmrb-spotlight:focus-within::before { opacity: 0.6; }

/* ====================================================================
 * METALLIC (Stahl-Shine fuer Logo/Bild - MMO-getunte Vereinfachung von
 * intern MetallicPaint; legt animierten Metallic-Verlauf + Shine-Sweep
 * ueber die Alpha-Maske eines transparenten PNG/SVG-Logos)
 * ==================================================================== */
.mmrb-metallic {
  display: inline-block;
  position: relative;
  -webkit-mask: var(--mmrb-logo) no-repeat center / contain;
  mask: var(--mmrb-logo) no-repeat center / contain;
  background:
    linear-gradient(115deg, #6b7585 0%, #aeb8c5 25%, #eef2f6 50%, #aeb8c5 75%, #5d6776 100%);
  background-size: 220% 100%;
  animation: mmrb-metal-pan 7s linear infinite;
}
.mmrb-metallic::after {
  content: '';
  position: absolute;
  inset: 0;
  -webkit-mask: var(--mmrb-logo) no-repeat center / contain;
  mask: var(--mmrb-logo) no-repeat center / contain;
  /* weicher, breiter Gloss statt harter Linie (Lars-Feedback) */
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.30) 50%, transparent 100%);
  background-size: 320% 100%;
  mix-blend-mode: screen;
  animation: mmrb-metal-shine 7s ease-in-out infinite;
}
@keyframes mmrb-metal-pan { 0% { background-position: 0% 0; } 100% { background-position: 220% 0; } }
@keyframes mmrb-metal-shine { 0%, 100% { background-position: 165% 0; } 50% { background-position: -65% 0; } }
@media (prefers-reduced-motion: reduce) {
  .mmrb-metallic, .mmrb-metallic::after { animation: none; }
}

/* ====================================================================
 * CIRCULAR TEXT (intern TextAnimations/CircularText - namespaced,
 * framer-motion ersetzt durch CSS-Spin + JS-Layout). TUEV-Siegel.
 * ==================================================================== */
/* Wrapper statisch; nur der Ring rotiert, Mittel-Logo bleibt stehen (kein Wobble) */
.mmrb-circular {
  position: relative;
  margin: 0 auto;
  width: var(--mmrb-ct-size, 200px);
  height: var(--mmrb-ct-size, 200px);
  color: #fff;
}
.mmrb-circular__ring {
  position: absolute;
  inset: 0;
  animation: mmrb-spin var(--mmrb-ct-dur, 20s) linear infinite;
}
.mmrb-circular:hover .mmrb-circular__ring { animation-duration: calc(var(--mmrb-ct-dur, 20s) / 3); }
.mmrb-circular__ring span {
  position: absolute;
  inset: 0;
  text-align: center;
  font-weight: 900;
  font-size: var(--mmrb-ct-fs, 22px);
  line-height: 1;
}
.mmrb-circular__center {
  position: absolute;
  inset: 19%; /* groesseres Mittel-Logo (war 26%) */
  display: grid;
  place-items: center;
}
.mmrb-circular__center img { max-width: 100%; max-height: 100%; display: block; }
/* silberner Glanz-Sweep ueber dem Mittel-Logo (non-destruktiv: Logo-Farben bleiben, nur ein
 * wandernder heller Schimmer in Logo-Form). Mask = Logo via --mmrb-logo (JS gesetzt). */
.mmrb-circular__center::after {
  content: '';
  position: absolute;
  inset: 0;
  -webkit-mask: var(--mmrb-logo) no-repeat center / contain;
  mask: var(--mmrb-logo) no-repeat center / contain;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.6) 50%, transparent 62%);
  background-size: 300% 100%;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: mmrb-metal-shine 6s ease-in-out infinite;
}
@keyframes mmrb-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mmrb-circular__ring { animation: none; }
  .mmrb-circular__center::after { animation: none; }
}

/* ====================================================================
 * MAGIC BENTO (intern Components/MagicBento - verbatim CSS, namespaced)
 * ==================================================================== */
.mmrb-bento {
  --glow: 228, 0, 43;          /* MMO-Rot statt Lila */
  --border-color: #233047;
  --bg-dark: #0E1726;
  display: grid;
  gap: 0.5em;
  padding: 0.5em;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .mmrb-bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .mmrb-bento { grid-template-columns: repeat(4, 1fr); }
  .mmrb-bento__card:nth-child(3) { grid-column: span 2; grid-row: span 2; }
  .mmrb-bento__card:nth-child(4) { grid-column: 1 / span 2; grid-row: 2 / span 2; }
  .mmrb-bento__card:nth-child(6) { grid-column: 4; grid-row: 3; }
}
.mmrb-bento__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  aspect-ratio: 4/3;
  min-height: 180px;
  padding: 1.25em;
  border-radius: 18px;
  border: 1px solid var(--border-color);
  background: var(--bg-dark);
  color: #fff;
  font-weight: 300;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  --glow-x: 50%; --glow-y: 50%; --glow-intensity: 0; --glow-radius: 220px;
}
.mmrb-bento__card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.25); }
.mmrb-bento__card::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 6px;
  background: radial-gradient(
    var(--glow-radius) circle at var(--glow-x) var(--glow-y),
    rgba(var(--glow), calc(var(--glow-intensity) * 0.85)) 0%,
    rgba(var(--glow), calc(var(--glow-intensity) * 0.4)) 30%,
    transparent 60%
  );
  border-radius: inherit;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1;
}
.mmrb-bento__label { font-size: 0.78em; opacity: 0.75; letter-spacing: 0.04em; text-transform: uppercase; }
.mmrb-bento__title { font-weight: 500; font-size: 1em; margin: 0 0 0.2em; }
.mmrb-bento__desc { font-size: 0.78em; line-height: 1.3; opacity: 0.85; margin: 0; }
.mmrb-bento .mmrb-particle {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: rgba(var(--glow), 1); box-shadow: 0 0 6px rgba(var(--glow), 0.6);
  pointer-events: none; z-index: 2;
}

/* ====================================================================
 * LOGO LOOP (intern Animations/LogoLoop - verbatim CSS, namespaced)
 * ==================================================================== */
.mmrb-logoloop {
  position: relative;
  overflow: hidden;
  --gap: 48px;
  --logoH: 40px;
  --fade: #0A1A2F;
}
.mmrb-logoloop__track { display: flex; width: max-content; will-change: transform; }
.mmrb-logoloop__item {
  flex: 0 0 auto;
  margin-right: var(--gap);
  display: inline-flex;
  align-items: center;
  font-size: var(--logoH);
  color: rgba(255,255,255,0.85);
}
.mmrb-logoloop__item img { height: var(--logoH); width: auto; display: block; object-fit: contain; }
.mmrb-logoloop--scale .mmrb-logoloop__item { transition: transform 0.3s cubic-bezier(.4,0,.2,1); }
.mmrb-logoloop--scale .mmrb-logoloop__item:hover { transform: scale(1.18); }
.mmrb-logoloop--fade::before,
.mmrb-logoloop--fade::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: clamp(24px, 8%, 120px); pointer-events: none; z-index: 2;
}
.mmrb-logoloop--fade::before { left: 0; background: linear-gradient(to right, var(--fade), transparent); }
.mmrb-logoloop--fade::after { right: 0; background: linear-gradient(to left, var(--fade), transparent); }

/* ====================================================================
 * DOCK (intern Components/Dock - verbatim CSS, namespaced; magnify in JS)
 * ==================================================================== */
.mmrb-dock {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  width: fit-content;
  margin: 0 auto;
  border-radius: 1rem;
  background-color: rgba(14, 23, 38, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid #233047;
  padding: 0 0.6rem 0.6rem;
}
.mmrb-dock--fixed { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 1000; }
.mmrb-dock__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px; height: 50px;
  margin-top: 0.6rem;
  border-radius: 12px;
  background-color: #0E1726;
  border: 1px solid #233047;
  color: #fff;
  cursor: pointer;
  font-size: 22px;
  text-decoration: none;
  will-change: width, height;
}
.mmrb-dock__label {
  position: absolute;
  top: -1.9rem;
  left: 50%;
  transform: translateX(-50%);
  white-space: pre;
  border-radius: 0.375rem;
  border: 1px solid #233047;
  background-color: #0E1726;
  padding: 0.15rem 0.5rem;
  font-size: 0.72rem;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.mmrb-dock__item:hover .mmrb-dock__label { opacity: 1; transform: translateX(-50%) translateY(-4px); }
.mmrb-dock__ic { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #cdd9e8; }
.mmrb-dock__ic svg { width: 46%; height: 46%; }
.mmrb-dock__item:hover .mmrb-dock__ic { color: #fff; }

/* ====================================================================
 * GOOEY NAV (intern Components/GooeyNav - verbatim CSS, namespaced)
 * ==================================================================== */
.mmrb-gooey { position: relative; --color-1: #E4002B; --color-2: #ff5a3c; --color-3: #ffd23c; --color-4: #fff; }
.mmrb-gooey nav { display: flex; position: relative; transform: translate3d(0,0,0.01px); }
.mmrb-gooey ul { display: flex; gap: 1.5em; list-style: none; padding: 0 0.5em; margin: 0; position: relative; z-index: 3; color: #fff; }
.mmrb-gooey ul li { border-radius: 100vw; position: relative; cursor: pointer; transition: color 0.3s ease; }
.mmrb-gooey ul li a { display: inline-block; padding: 0.55em 1em; color: inherit; text-decoration: none; }
.mmrb-gooey ul li::after { content: ''; position: absolute; inset: 0; border-radius: 10px; background: #fff; opacity: 0; transform: scale(0); transition: all 0.3s ease; z-index: -1; }
.mmrb-gooey ul li.active { color: #0A1A2F; text-shadow: none; }
.mmrb-gooey ul li.active::after { opacity: 1; transform: scale(1); }
.mmrb-gooey .mmrb-gooey__effect { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 1; pointer-events: none; display: grid; place-items: center; z-index: 1; }
.mmrb-gooey .mmrb-gooey__effect.text { color: #fff; transition: color 0.3s ease; }
.mmrb-gooey .mmrb-gooey__effect.text.active { color: #0A1A2F; }
.mmrb-gooey .mmrb-gooey__effect.filter { filter: blur(7px) contrast(100) blur(0); mix-blend-mode: lighten; }
.mmrb-gooey .mmrb-gooey__effect.filter::before { content: ''; position: absolute; inset: -75px; z-index: -2; background: transparent; }
.mmrb-gooey .mmrb-gooey__effect.filter::after { content: ''; position: absolute; inset: 0; background: #fff; transform: scale(0); opacity: 0; z-index: -1; border-radius: 100vw; }
.mmrb-gooey .mmrb-gooey__effect.active::after { animation: mmrb-pill 0.3s ease both; }
@keyframes mmrb-pill { to { transform: scale(1); opacity: 1; } }
.mmrb-gooey .mmrb-particle, .mmrb-gooey .mmrb-point { display: block; opacity: 0; width: 20px; height: 20px; border-radius: 100%; transform-origin: center; }
.mmrb-gooey .mmrb-particle { position: absolute; top: calc(50% - 8px); left: calc(50% - 8px); animation: mmrb-gparticle calc(var(--time)) ease 1 -350ms; }
.mmrb-gooey .mmrb-point { background: var(--color); opacity: 1; animation: mmrb-gpoint calc(var(--time)) ease 1 -350ms; }
@keyframes mmrb-gparticle {
  0% { transform: rotate(0deg) translate(var(--start-x), var(--start-y)); opacity: 1; animation-timing-function: cubic-bezier(.55,0,1,.45); }
  70% { transform: rotate(calc(var(--rotate) * 0.5)) translate(calc(var(--end-x) * 1.2), calc(var(--end-y) * 1.2)); opacity: 1; animation-timing-function: ease; }
  85% { transform: rotate(calc(var(--rotate) * 0.66)) translate(var(--end-x), var(--end-y)); opacity: 1; }
  100% { transform: rotate(calc(var(--rotate) * 1.2)) translate(calc(var(--end-x) * 0.5), calc(var(--end-y) * 0.5)); opacity: 1; }
}
@keyframes mmrb-gpoint {
  0% { transform: scale(0); opacity: 0; animation-timing-function: cubic-bezier(.55,0,1,.45); }
  25% { transform: scale(calc(var(--scale) * 0.25)); }
  38% { opacity: 1; }
  65% { transform: scale(var(--scale)); opacity: 1; animation-timing-function: ease; }
  85% { transform: scale(var(--scale)); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

/* ====================================================================
 * SCROLL STACK (intern Components/ScrollStack - native scroll, namespaced)
 * ==================================================================== */
.mmrb-scrollstack { position: relative; width: 100%; }
.mmrb-scrollstack__card {
  position: sticky;
  top: var(--mmrb-ss-top, 12vh);
  height: auto;
  min-height: 16rem;
  margin: 0 auto 2.5rem;
  max-width: 60rem;
  padding: 2.5rem;
  border-radius: 28px;
  border: 1px solid #233047;
  background: #0E1726;
  color: #fff;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  transform-origin: top center;
  will-change: transform;
}

/* ====================================================================
 * PROFILE CARD (intern Components/ProfileCard - tilt+glare subset)
 * MMO: Logo als Watermark. Optional mit .mmrb-borderglow kombinierbar.
 * ==================================================================== */
.mmrb-profilecard {
  --rx: 0deg; --ry: 0deg; --px: 50%; --py: 50%; --op: 0;
  perspective: 700px;
  width: var(--mmrb-pc-w, 300px);
  position: relative;
}
.mmrb-profilecard__inner {
  position: relative;
  aspect-ratio: 0.72;
  border-radius: 24px;
  overflow: hidden;
  background: radial-gradient(120% 120% at 30% 20%, #16243c 0%, #0A1424 60%, #06101c 100%);
  border: 1px solid #243149;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}
.mmrb-profilecard:hover .mmrb-profilecard__inner { transition: none; }
.mmrb-profilecard__watermark {
  position: absolute; inset: 0;
  background: var(--mmrb-logo) no-repeat center / 62%;
  opacity: 0.10;
  filter: grayscale(1) brightness(2);
}
.mmrb-profilecard__glare {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--px) var(--py), rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 45%);
  opacity: var(--op);
  mix-blend-mode: overlay;
  transition: opacity 0.25s ease;
}
.mmrb-profilecard__shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(228,0,43,0.18) 50%, transparent 70%);
  background-size: 250% 100%;
  background-position: calc(var(--px)) 0;
  mix-blend-mode: screen;
}
.mmrb-profilecard__content {
  position: absolute; inset: auto 0 0 0;
  padding: 1.25rem;
  z-index: 2;
  color: #fff;
  text-align: center;
}
.mmrb-profilecard__content h3 { margin: 0; font: 600 1.4rem/1.1 'Manrope', sans-serif; }
.mmrb-profilecard__content p { margin: 0.3rem 0 0; font-size: 0.85rem; opacity: 0.85; }
/* mit Personenfoto */
.mmrb-profilecard__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.mmrb-profilecard.has-photo .mmrb-profilecard__watermark { opacity: 0.16; mix-blend-mode: screen; background-size: 44%; background-position: center 16%; }
.mmrb-profilecard.has-photo .mmrb-profilecard__content {
  z-index: 4;
  background: linear-gradient(to top, rgba(4,12,22,0.92) 0%, rgba(4,12,22,0.55) 45%, transparent 100%);
  padding: 3.4rem 1.25rem 1.25rem;
}

/* ====================================================================
 * TARGET CURSOR (intern Animations/TargetCursor - verbatim CSS, namespaced)
 * ==================================================================== */
.mmrb-targetcursor {
  position: fixed; top: 0; left: 0; width: 0; height: 0;
  pointer-events: none; z-index: 99999;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
}
/* Dauerhafter Touch-Point-Dot (wie DevTools-Mobile-Cursor) */
.mmrb-targetcursor__dot {
  position: absolute; left: 50%; top: 50%;
  width: 18px; height: 18px;
  background: rgba(255, 255, 255, 0.22);
  border: 1.5px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
  transition: width 0.18s ease, height 0.18s ease, opacity 0.18s ease;
}
.mmrb-targetcursor.is-targeting .mmrb-targetcursor__dot { width: 8px; height: 8px; opacity: 0.6; }
/* Eck-Klammern nur sichtbar, wenn ein Button anvisiert wird */
.mmrb-targetcursor__corner { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; border: 3px solid #fff; will-change: transform; opacity: 0; transition: opacity 0.18s ease; }
.mmrb-targetcursor.is-targeting .mmrb-targetcursor__corner { opacity: 1; }
.mmrb-tc-tl { transform: translate(-150%, -150%); border-right: none; border-bottom: none; }
.mmrb-tc-tr { transform: translate(50%, -150%); border-left: none; border-bottom: none; }
.mmrb-tc-br { transform: translate(50%, 50%); border-left: none; border-top: none; }
.mmrb-tc-bl { transform: translate(-150%, 50%); border-right: none; border-top: none; }
/* Aktiver Target Cursor ersetzt den Systemzeiger KOMPLETT: UA-Cursor
 * (pointer auf Links, text auf Feldern) laege sonst doppelt unterm Dot.
 * Text-Caret beim Tippen bleibt unberuehrt. Klasse setzt initTargetCursor. */
html.mmrb-cursor-on, html.mmrb-cursor-on * { cursor: none !important; }

/* BLOB CURSOR (intern Animations/BlobCursor - namespaced, vanilla spring) */
.mmrb-blobcursor { position: fixed; inset: 0; pointer-events: none; z-index: 99998; overflow: hidden; }
.mmrb-blobcursor__blob {
  position: absolute; top: 0; left: 0;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--mmrb-blob-color, #E4002B);
  transform: translate(-50%, -50%);
  will-change: transform;
  filter: blur(1px);
  opacity: 0.85;
}
.mmrb-blobcursor__blob.is-dot { width: 12px; height: 12px; background: #fff; filter: none; opacity: 1; }

/* model-viewer Groesse */
.mmrb-model { display: block; width: 100%; height: var(--mmrb-mv-h, 460px); background: transparent; --poster-color: transparent; }

/* ====================================================================
 * DOME GALLERY (intern Components/DomeGallery - CSS-3D-Sphere, Vanilla-Port)
 * Bilder auf einer drehbaren Kugel, Drag + Inertia + Klick-Lightbox.
 * ==================================================================== */
.mmrb-dome {
  position: relative;
  width: 100%;
  height: var(--mmrb-dome-h, 520px);
  overflow: hidden;
  background: var(--mmrb-dome-bg, #0A1A2F);
  --radius: 520px;
  --segx: 22;
  --segy: 22;
  --rot-y: calc((360deg / var(--segx)) / 2);
  --rot-x: calc((360deg / var(--segy)) / 2);
  --circ: calc(var(--radius) * 3.14);
  --iw: calc(var(--circ) / var(--segx));
  --ih: calc(var(--circ) / var(--segy));
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.mmrb-dome * { box-sizing: border-box; transform-style: preserve-3d; }
.mmrb-dome__stage { position: absolute; inset: 0; display: grid; place-items: center; perspective: calc(var(--radius) * 2); perspective-origin: 50% 50%; }
.mmrb-dome__sphere { transform: translateZ(calc(var(--radius) * -1)); will-change: transform; }
.mmrb-dome__item {
  position: absolute; top: -999px; bottom: -999px; left: -999px; right: -999px; margin: auto;
  width: calc(var(--iw) * 2); height: calc(var(--ih) * 2);
  transform-origin: 50% 50%; backface-visibility: hidden;
  transform: rotateY(calc(var(--rot-y) * (var(--ox) + 0.5))) rotateX(calc(var(--rot-x) * (var(--oy) - 0.5))) translateZ(var(--radius));
}
.mmrb-dome__img { position: absolute; inset: 8px; border-radius: var(--tile-radius, 12px); overflow: hidden; cursor: pointer; backface-visibility: hidden; transform: translateZ(0); transition: filter 0.3s ease; }
.mmrb-dome__img img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; backface-visibility: hidden; filter: var(--img-filter, none); }
.mmrb-dome__img:hover { filter: brightness(1.12); }
.mmrb-dome__overlay { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(rgba(0,0,0,0) 58%, var(--mmrb-dome-bg, #0A1A2F) 100%); }
.mmrb-dome__fade { position: absolute; left: 0; right: 0; height: 90px; z-index: 5; pointer-events: none; }
.mmrb-dome__fade--top { top: 0; background: linear-gradient(to top, transparent, var(--mmrb-dome-bg, #0A1A2F)); }
.mmrb-dome__fade--bottom { bottom: 0; background: linear-gradient(to bottom, transparent, var(--mmrb-dome-bg, #0A1A2F)); }
.mmrb-dome__hint { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 6; font: 500 0.72rem/1 'Inter', sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.55); pointer-events: none; }
.mmrb-dome__box { position: fixed; inset: 0; z-index: 99990; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.82); backdrop-filter: blur(4px); padding: 5vh 5vw; cursor: zoom-out; }
.mmrb-dome__box.open { display: flex; }
.mmrb-dome__box img { max-width: 100%; max-height: 100%; border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
@media (prefers-reduced-motion: reduce) { .mmrb-dome { cursor: default; } }

/* ---------- Fill-Layer (MMRB_FILLS): Effekt als reiner HINTERGRUND in einem fremden
 * (z.B. Elementor-)Container. Markup wird zur Laufzeit von boot() injiziert - die
 * Elementor-Daten des Hosts bleiben unangetastet, der Container bleibt voll editierbar.
 * Die Ebene faengt KEINE Pointer-Events; Interaktion laeuft ueber data-listen="parent".
 * Hintergruende bewusst transparent: bei reduced-motion/mmrb-fail/WebGL-Budget bleibt
 * der originale (statische) Host-Hintergrund als Fallback sichtbar. ---------- */
.mmo-bgfill {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  background: transparent !important;
}
.mmo-bgfill .mmrb-bg__stage {
  pointer-events: none !important;
  background: transparent !important;
}
.mmo-bgfill-host { position: relative; }
@media (max-width: 767px) {
  /* 62vh-Kappung der Basisklasse fuer Fill-Layer aufheben - muss den Host immer fuellen */
  .mmo-bgfill { height: 100%; }
}

/* ---------- Click Spark (globale Klick-Funken; Canvas faengt keine Events) ---------- */
.mmrb-clickspark {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2147482000; /* auch ueber Elementor-Popups/Dialogen */
  pointer-events: none;
}

/* ====================================================================
 * REVEAL (AnimatedList-Einflug) - Zuweisung via Klasse mmrb-reveal
 * (direkt oder per MMRB_AUTO). JS versteckt NUR Elemente unterhalb des
 * Viewports (is-pre) und blendet sie beim ersten Kontakt gestaffelt ein.
 * ==================================================================== */
.mmrb-reveal.is-pre {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity .65s cubic-bezier(.22, .61, .36, 1),
    transform .65s cubic-bezier(.22, .61, .36, 1);
}
.mmrb-reveal.is-pre.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .mmrb-reveal.is-pre { opacity: 1; transform: none; transition: none; }
}