/* ============================================================
   16-bubbles.css — Sprechblasen links & rechts neben den
   Lead-Magnet-Karten ("let's talk!" links, "be you" rechts).
   ============================================================ */

.ao2-leadmagnet .lm-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  max-width:1120px;
  margin:0 auto;
}

/* Karten-Grid bleibt in der Mitte, nimmt den Hauptplatz ein */
.ao2-leadmagnet .lm-row .lm-grid{
  flex:1 1 auto;
  min-width:0;            /* verhindert Überlaufen aus dem Flex-Container */
  margin:0 !important;
}

.ao2-leadmagnet .lm-bubble{
  flex:0 0 auto;
  width:130px;
  height:auto;
  display:block;
}
.ao2-leadmagnet .lm-bubble-left{transform:rotate(-6deg)}
.ao2-leadmagnet .lm-bubble-right{transform:rotate(6deg)}

/* Auf schmalen Screens: Blasen über/unter die Karten,
   Karten UNTEREINANDER statt nebeneinander */
@media (max-width:920px){
  .ao2-leadmagnet .lm-row{flex-wrap:wrap;gap:14px}
  .ao2-leadmagnet .lm-row .lm-grid{
    order:2;
    flex-basis:100%;
    width:100%;
    grid-template-columns:1fr !important;   /* eine Spalte -> Karten untereinander */
  }
  .ao2-leadmagnet .lm-bubble-left{order:1}
  .ao2-leadmagnet .lm-bubble-right{order:3}
  .ao2-leadmagnet .lm-bubble{width:96px}
}