/* ISO-Eignung in sieben Gruppen. 0 = ein leerer Kreis, 1 bis 3 = gefuellte Kreise.
   Farbwerte und Abmessungen koennen im Avada-CSS ueberschrieben werden. */
.hbpim-iso {
    --hbpim-iso-cell-width: 60px;
    --hbpim-iso-cell-height: 65px;
    --hbpim-iso-dot-size: 12px;
    --hbpim-iso-dot-gap: 3px;
    width: 100%;
}
.hbpim-iso__list {
    display: flex;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.hbpim-iso__group {
    box-sizing: border-box;
    flex: 0 0 var(--hbpim-iso-cell-width);
    width: var(--hbpim-iso-cell-width);
    height: var(--hbpim-iso-cell-height);
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 11px 2px 13px;
    color: #fff;
    line-height: 1;
    text-align: center;
}
.hbpim-iso__group--p { background: #2b7bb1; }
.hbpim-iso__group--m { background: #ffcb51; }
.hbpim-iso__group--k { background: #d44933; }
.hbpim-iso__group--n { background: #1aaa65; }
.hbpim-iso__group--s { background: #b39a80; }
.hbpim-iso__group--h { background: #565656; }
.hbpim-iso__group--c { background: #afafb2; }
.hbpim-iso__label { font-weight: 700; font-size: 12px; line-height: 1; color: #fff; }
.hbpim-iso__dots { display: flex; justify-content: center; align-items: center; gap: var(--hbpim-iso-dot-gap); min-height: var(--hbpim-iso-dot-size); }
.hbpim-iso__dot {
    box-sizing: border-box;
    display: block;
    width: var(--hbpim-iso-dot-size);
    height: var(--hbpim-iso-dot-size);
    flex: 0 0 var(--hbpim-iso-dot-size);
    border-radius: 50%;
}
.hbpim-iso__dot--filled { background: #fff; }
.hbpim-iso__dot--empty { border: 1px solid #fff; background: transparent; }
.hbpim-iso__missing { color: #fff; font-weight: 600; line-height: 1; }
.hbpim-iso-panel { width: 100%; margin: 1.5rem 0 2rem; }
.hbpim-iso-panel__heading { margin: 0 0 0.8rem; color: var(--hbpim-dark-blue, #005a9a) !important; font-size: 30px !important; font-weight: 600; }
/* Platzsparende ISO-Variante innerhalb der Produktuebersicht. */
.hbpim-iso--compact { --hbpim-iso-cell-width: 32px; --hbpim-iso-cell-height: 43px; --hbpim-iso-dot-size: 5px; --hbpim-iso-dot-gap: 2px; }
.hbpim-iso--compact .hbpim-iso__group { gap: 3px; padding: 7px 1px 8px; }
.hbpim-iso--compact .hbpim-iso__label { font-size: 10px; }
.hbpim-iso--compact .hbpim-iso__dot--empty { border-width: 1px; }


@media (max-width: 500px) {
    .hbpim-iso {
        --hbpim-iso-cell-width: 45px;
        --hbpim-iso-cell-height: 55px;
        --hbpim-iso-dot-size: 10px;
    }

}