.elementor-133 .elementor-element.elementor-element-e5c5289{--display:flex;}.elementor-133 .elementor-element.elementor-element-17568b8{--spacer-size:22px;}.elementor-133 .elementor-element.elementor-element-461429a{--display:flex;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-133 .elementor-element.elementor-element-b437c90{width:auto;max-width:auto;}.elementor-133 .elementor-element.elementor-element-801cf05{--display:flex;}.elementor-133 .elementor-element.elementor-element-4f1774e{width:100%;max-width:100%;}.elementor-133 .elementor-element.elementor-element-9f8ef7a{--display:flex;}.elementor-133 .elementor-element.elementor-element-f8c6257 .swiper-wrapper{align-items:flex-start;}.elementor-133 .elementor-element.elementor-element-f8c6257 h3.title, .elementor-133 .elementor-element.elementor-element-f8c6257 .products-title{text-align:center;}.elementor-133 .elementor-element.elementor-element-941f093{--display:flex;}.elementor-133 .elementor-element.elementor-element-7ca2036{--slides-per-view:1;}/* Start custom CSS for html, class: .elementor-element-4f1774e *//* =========================================================
   HERO ORBIT + BUBBLES + TOOLTIP + MODAL
   FULL UPDATED RESPONSIVE CSS (Desktop + Mobile)
   Includes:
   - Tooltip clickable only when visible
   - Tooltip clamp variables (JS uses --clampX/--clampY)
   - Modal open states support (hero-modal-open + tooltip-suppress)
   - Responsive ring + tooltip placement for mobile
   ========================================================= */

*{ box-sizing:border-box; }

.hero-orbit-section,
.hero-orbit-section *{
  box-sizing:border-box;
}

/* ============================
   Section Wrapper
   ============================ */
.hero-orbit-section{
  position: relative;
  width: 100%;
  min-height: 100vh; /* desktop baseline */

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

  padding: 32px 0;

 
  background-size: cover;
  background-position: center;

  overflow: hidden; /* keeps page clean */
}

/* Dim overlay */
.hero-orbit-section::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.25);
  z-index:0;
}

/* ============================
   Inner Orbit Circle
   ============================ */
.hero-orbit-inner{
  position: relative;
  z-index: 1;

  width: min(520px, 92vw);
  aspect-ratio: 1 / 1;
  margin: 0 auto;

  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.60);

  background: radial-gradient(
    circle at 30% 30%,
    rgba(255,255,255,.16),
    rgba(0,0,0,.45)
  );

  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  overflow: visible;
}

.hero-orbit-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none;
}

/* ============================
   Central Core (Image)
   ============================ */
.hero-orbit-core{
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  overflow: hidden;

  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 30px rgba(0,0,0,.15);
  z-index: 2;
}

.hero-orbit-core img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* ============================
   Bubble Base
   ============================ */
.hero-bubble{
  position: absolute;
  z-index: 3;

  width: 180px;
  height: 180px;

  background-image: url("https://www.steira-shot.at/wp-content/uploads/2025/12/bubble.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  border: none;
  background-color: transparent;
  box-shadow: none;

  /* motion vars (JS updates --dx/--dy) */
  --dx: 0px;
  --dy: 0px;
  --scale: 1;

  left: 50%;
  top: 50%;
  transform:
    translate(-50%, -50%)
    translate(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy)))
    scale(var(--scale));

  transition: none;
  will-change: transform;
  cursor: pointer;
  outline: none;
  overflow: visible;
}

.hero-bubble:hover{ --scale: 1.08; }
.hero-bubble span{ display:none; }

/* ============================
   Tooltip (with clamp support)
   ============================ */
.hero-bubble-tooltip{
  position: absolute;
  z-index: 50;

  /* Default desktop position (right-ish) */
  left: 140%;
  bottom: 60%;

  /* Clamp vars used by JS to keep tooltip inside viewport */
  --clampX: 0px;
  --clampY: 0px;

  /* IMPORTANT: clamp translate is in transform */
  transform: translateX(-50%) translateY(8px) translate(var(--clampX), var(--clampY));

  width: max-content;
  max-width: min(260px, calc(100vw - 24px));
  min-width: 0;

  padding: 8px 12px;
  border-radius: 10px;

  background: rgba(0,0,0,.85);
  color: #fff;
  font-size: 0.82rem;
  text-align: center;

  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  opacity: 0;

  /* not clickable unless visible */
  pointer-events: none;

  transition: opacity .2s ease-out, transform .2s ease-out;

  white-space: normal;
  overflow-wrap: anywhere;

  cursor: pointer; /* indicates tooltip clickable */
}

.hero-bubble-tooltip h3{
  margin: 0 0 4px;
  font-size: .92rem;
  font-weight: 600;
  color: #fff !important; /* as requested */
}

.hero-bubble-tooltip p{
  margin: 0;
  line-height: 1.3;
}

/* visible state */
.hero-bubble:hover .hero-bubble-tooltip,
.hero-bubble:focus-within .hero-bubble-tooltip{
  opacity: 1;
  transform: translateX(-50%) translateY(0) translate(var(--clampX), var(--clampY));
  pointer-events: auto;
}

/* ============================
   Bubble ring positions (Desktop)
   ============================ */
.hero-bubble-1  { --x:   0px;  --y: -220px; }
.hero-bubble-2  { --x: 178px;  --y: -129px; }
.hero-bubble-3  { --x: 209px;  --y:  -68px; }
.hero-bubble-4  { --x: 209px;  --y:   68px; }
.hero-bubble-5  { --x: 129px;  --y:  178px; }
.hero-bubble-6  { --x:   0px;  --y:  220px; }
.hero-bubble-7  { --x:-129px;  --y:  178px; }
.hero-bubble-8  { --x:-209px;  --y:   68px; }
.hero-bubble-9  { --x:-209px;  --y:  -68px; }
.hero-bubble-10 { --x:-129px;  --y: -178px; }

/* ============================
   Modal
   ============================ */
.hero-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.hero-modal.is-open{
  display: block;
}

.hero-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

.hero-modal__panel{
  position: relative;
  width: min(520px, calc(100vw - 24px));
  margin: 8vh auto 0;
  border-radius: 16px;
  padding: 18px 18px 14px;

  background: rgba(20,20,20,.92);
  color: #fff;

  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  outline: none;
}

.hero-modal__title{
  margin: 0 0 10px;
  font-size: 1.1rem;
  font-weight: 700;
}

.hero-modal__body{
  font-size: .95rem;
  line-height: 1.45;
  color: rgba(255,255,255,.92);
}

/* Remove bottom action row (you deleted the Cancel button in HTML) */
.hero-modal__actions{
  display: none !important;
}

/* Close (X) button: white bg + black X */
.hero-modal__close{
  position: absolute;
  top: 10px;
  right: 12px;

  width: 38px;
  height: 38px;

  border-radius: 10px;
  border: 0;

  background: #fff !important;
  color: #000 !important;

  cursor: pointer;
  font-size: 22px;
  line-height: 1;

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

  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}

.hero-modal__close:hover{
  transform: translateY(-1px);
}

/* ============================
   While modal open: hide tooltips
   ============================ */
body.hero-modal-open .hero-bubble-tooltip{
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(8px) translate(var(--clampX), var(--clampY)) !important;
}

body.hero-modal-open .hero-bubble{
  --scale: 1 !important;
}

/* After closing modal: suppress tooltip until mouse leaves */
.hero-bubble.tooltip-suppress .hero-bubble-tooltip{
  opacity: 0 !important;
  pointer-events: none !important;
}

.hero-bubble.tooltip-suppress{
  --scale: 1 !important;
}

/* ============================
   TABLET / MOBILE
   ============================ */
@media (max-width: 768px){
  .hero-orbit-section{
    padding: 18px 0 !important;
    min-height: 78svh !important;
    min-height: 78vh !important;
  }

  .hero-orbit-inner{
    width: min(360px, 90vw) !important;
  }

  .hero-orbit-core{
    inset: 30% !important;
  }

  .hero-bubble{
    width: 96px !important;
    height: 96px !important;
  }

  /* Smaller ring radius */
  .hero-bubble-1  { --x:   0px;  --y: -105px; }
  .hero-bubble-2  { --x:  85px;  --y:  -62px; }
  .hero-bubble-3  { --x:  99px;  --y:  -32px; }
  .hero-bubble-4  { --x:  99px;  --y:   32px; }
  .hero-bubble-5  { --x:  62px;  --y:   85px; }
  .hero-bubble-6  { --x:   0px;  --y:  105px; }
  .hero-bubble-7  { --x: -62px;  --y:   85px; }
  .hero-bubble-8  { --x: -99px;  --y:   32px; }
  .hero-bubble-9  { --x: -99px;  --y:  -32px; }
  .hero-bubble-10 { --x: -62px;  --y:  -85px; }

  /* Mobile tooltip: centered above bubble */
  .hero-bubble-tooltip{
    left: 50% !important;
    bottom: 115% !important;
    top: auto !important;

    max-width: calc(100vw - 24px) !important;
    width: min(240px, calc(100vw - 24px)) !important;

    font-size: 0.70rem !important;
    line-height: 1.25 !important;
    padding: 6px 10px !important;
    border-radius: 10px !important;

    /* KEEP CLAMP in transform (critical) */
    transform: translateX(-50%) translateY(8px) translate(var(--clampX), var(--clampY)) !important;
  }

  .hero-bubble:hover .hero-bubble-tooltip,
  .hero-bubble:focus-within .hero-bubble-tooltip{
    transform: translateX(-50%) translateY(0) translate(var(--clampX), var(--clampY)) !important;
  }

  .hero-bubble-tooltip h3{
    font-size: 0.74rem !important;
    margin: 0 0 4px !important;
  }

  /* Top bubbles: show tooltip BELOW to avoid top clipping */
  .hero-bubble-1 .hero-bubble-tooltip,
  .hero-bubble-2 .hero-bubble-tooltip,
  .hero-bubble-9 .hero-bubble-tooltip,
  .hero-bubble-10 .hero-bubble-tooltip{
    bottom: auto !important;
    top: 115% !important;
  }

  /* Modal spacing */
  .hero-modal__panel{
    margin: 10vh auto 0;
    padding: 16px 16px 12px;
  }
}

/* ============================
   SMALL PHONES
   ============================ */
@media (max-width: 480px){
  .hero-orbit-section{
    padding: 14px 0 !important;
    min-height: 72svh !important;
    min-height: 72vh !important;
  }

  .hero-orbit-inner{
    width: min(320px, 88vw) !important;
  }

  .hero-orbit-core{
    inset: 34% !important;
  }

  .hero-bubble{
    width: 82px !important;
    height: 82px !important;
  }

  /* Tighter ring radius */
  .hero-bubble-1  { --x:   0px;  --y:  -90px; }
  .hero-bubble-2  { --x:  73px;  --y:  -53px; }
  .hero-bubble-3  { --x:  85px;  --y:  -28px; }
  .hero-bubble-4  { --x:  85px;  --y:   28px; }
  .hero-bubble-5  { --x:  53px;  --y:   73px; }
  .hero-bubble-6  { --x:   0px;  --y:   90px; }
  .hero-bubble-7  { --x: -53px;  --y:   73px; }
  .hero-bubble-8  { --x: -85px;  --y:   28px; }
  .hero-bubble-9  { --x: -85px;  --y:  -28px; }
  .hero-bubble-10 { --x: -53px;  --y:  -73px; }

  .hero-bubble-tooltip{
    width: min(220px, calc(100vw - 18px)) !important;
    max-width: calc(100vw - 18px) !important;
    font-size: 0.66rem !important;
    padding: 6px 8px !important;

    /* KEEP CLAMP in transform (critical) */
    transform: translateX(-50%) translateY(8px) translate(var(--clampX), var(--clampY)) !important;
  }

  .hero-bubble:hover .hero-bubble-tooltip,
  .hero-bubble:focus-within .hero-bubble-tooltip{
    transform: translateX(-50%) translateY(0) translate(var(--clampX), var(--clampY)) !important;
  }

  .hero-bubble-tooltip h3{
    font-size: 0.70rem !important;
  }

  .hero-modal__panel{
    margin: 12vh auto 0;
  }
  /* MOBILE ONLY: make tooltip smaller so it stays inside screen */
@media (max-width: 768px){
  .hero-bubble-tooltip{
    width: min(190px, calc(100vw - 18px)) !important;
    max-width: calc(100vw - 18px) !important;

    font-size: 0.62rem !important;
    line-height: 1.18 !important;

    padding: 5px 8px !important;
    border-radius: 9px !important;
  }

  .hero-bubble-tooltip h3{
    font-size: 0.66rem !important;
    margin: 0 0 3px !important;
  }

  .hero-bubble-tooltip p{
    line-height: 1.18 !important;
  }
}
@media (max-width: 480px){
  .hero-bubble-tooltip{
    width: min(170px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;

    font-size: 0.60rem !important;
    padding: 5px 7px !important;
  }

  .hero-bubble-tooltip h3{
    font-size: 0.64rem !important;
  }
}

}/* End custom CSS */