/* SECTION: MINI CIRCLES */

.staerkensieb-mini-circles {

  margin-top: 50px;

  margin-bottom: 0 !important;

  display: flex !important;

  justify-content: flex-start !important;

  gap: 0.5rem !important;

  margin-top: 0;

  flex-direction: row !important;

  align-items: center !important;

  flex-wrap: wrap !important;

  width: 100% !important;

  margin: 0 !important;

  margin-bottom: 20px !important;

  padding: 0 !important;

}



.staerkensieb-layout .staerkensieb-mini-circles {

  margin-top: 50px;

  margin-bottom: 0 !important;

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

  justify-content: flex-start;

}



.staerkensieb-layout .mini-bubble {

  width: 100px;

  height: 100px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  font-size: 0.8rem;

  padding: 0.5rem;

  box-sizing: border-box;

  cursor: pointer;

  color: var(--ss-white);

}



.staerkensieb-layout .mini-bubble.active {

  box-shadow: none;

  border: 3px solid currentColor;

}



.staerkensieb-layout .layout-left .staerkensieb-mini-circles {

  justify-content: center;

  margin-top: 0.5rem;

}



.mini-bubble {

  width: 100px;

  height: 100px;

  border-radius: 50%;

  border: 2px solid;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: bold;

  cursor: pointer;

  color: var(--ss-white);

}



.mini-bubble.active {

  box-shadow: none;

  border: 3px solid currentColor;

}



.staerkensieb-layout .layout-right .staerkensieb-mini-circles {

  margin-top: 0 !important;

  justify-content: flex-start !important;

}



.staerkensieb-mini-circles .mini-bubble {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  padding: 0.625rem 0.625rem !important;

  margin: 0 0.25rem !important;

  border-radius: 5px !important;

  font-size: 0.9rem !important;

  font-weight: 600 !important;

  cursor: pointer !important;

  border: 2px solid currentColor !important;

  background-color: transparent !important;

  min-height: 0 !important;

  line-height: 1.2 !important;

  color: currentColor !important;

  text-align: center !important;

  text-decoration: none !important;

}



.staerkensieb-mini-circles .mini-bubble.color-A {

  color: var(--ss-blue) !important;

  border-color: var(--ss-blue) !important;

}



.staerkensieb-mini-circles .mini-bubble.color-B {

  color: var(--ss-red) !important;

  border-color: var(--ss-red) !important;

}



.staerkensieb-mini-circles .mini-bubble.color-C {

  color: var(--ss-yellow) !important;

  border-color: var(--ss-yellow) !important;

}



.staerkensieb-mini-circles .mini-bubble.color-D {

  color: var(--ss-green) !important;

  border-color: var(--ss-green) !important;

}



.staerkensieb-mini-circles .mini-bubble.color-A.active {

  background-color: var(--ss-blue) !important;

  color: var(--ss-white) !important;

}



.staerkensieb-mini-circles .mini-bubble.color-B.active {

  background-color: var(--ss-red) !important;

  color: var(--ss-white) !important;

}



.staerkensieb-mini-circles .mini-bubble.color-C.active {

  background-color: var(--ss-yellow) !important;

  color: var(--ss-white) !important;

}



.staerkensieb-mini-circles .mini-bubble.color-D.active {

  background-color: var(--ss-green) !important;

  color: var(--ss-white) !important;

}



.staerkensieb-mini-circles,

.staerkensieb-mini-circles .mini-bubble {

  pointer-events: auto !important;

}



@media (max-width: 767px) {

  .mini-bubble {

    font-size: 1rem;

  }



  .staerkensieb-layout .staerkensieb-mini-circles {

    justify-content: flex-start !important;

    flex-wrap: wrap !important;

    margin-top: 20px !important;

  }

}



@media (min-width: 769px) {

  .staerkensieb-mini-circles .mini-bubble {

    height: 80px !important;

  }

}