@media (max-width: 768px) and (orientation: portrait){
  :root{
    --bubble-mobile-pad: 0px; /* 0 = berührt */
    --bubble-shift-x: 0px;
    --bubble-shift-y: 0px;

    --menu-font-mobile: 30px;
    --menu-gap-mobile: 18px;

    --bubble-mobile-pad: 8px;
  }

  .menu-row{ font-size: var(--menu-font-mobile); }
  .menu-items{ gap: var(--menu-gap-mobile); }

  .bubble{ transform-origin: 0% 100%; }

  .bubble{
    /* ✅ immer rechts vom Plus */
    left: calc(
      var(--orb-left) + (2 * var(--orb-r)) + var(--bubble-mobile-pad)
    );

    /* ✅ Unterkante der Bubble berührt Unterkante Plus */
    top: calc(
      var(--orb-bottom) + var(--bubble-mobile-pad)
    );

    /* ✅ klappt nach oben auf und wächst nach rechts */
    transform-origin: 0% 100%;

    /* ✅ niemals aus dem Screen */
    max-width: calc(100vw - 12px);
    max-height: calc(100vh - 12px);
    overflow: auto;
  }
}


/* css/mobile.css */

/* ✅ NUR PORTRAIT: Bubble ans Plus pinnen + im Screen halten */
/* css/mobile.css */
@media (max-width: 768px) and (orientation: portrait){
  :root{
    --bubble-mobile-pad: 0px; /* 0 = berührt das Plus */
    --bubble-shift-x: 0px;
    --bubble-shift-y: 0px;
  }

  /* Portrait: Bubble immer rechts am Plus, und "klebt" am Plus */
  .bubble{
    /* ✅ rechts öffnen erzwingen (auch wenn inline styles gesetzt wurden) */
    left: calc(
      var(--orb-left) + var(--bubble-mobile-overlap)
    ) !important;

    /* ✅ Unterkante der Bubble berührt den unteren Rand vom Plus */
    top: calc(
      var(--orb-bottom) + var(--bubble-mobile-pad)
    ) !important;

    right: auto !important;
    bottom: auto !important;

    /* ✅ klappt nach oben auf und wächst nach rechts */
    transform-origin: 0% 100% !important;

    /* ✅ nie außerhalb vom Screen */
    max-width: calc(100vw - 12px);
    max-height: calc(100vh - 12px);
    overflow: auto;
  }
}