/* =========================================================
   Ultra Media 4.1.97
   Produktlisting: Titel, Preise und Aktionsleiste stabil ausrichten
   ========================================================= */

/* Alle Produktkarten einer Zeile werden auf dieselbe Hoehe gestreckt. */
#artikel.artikeluebersicht {
    align-items: stretch;
}

/* Die Karte wird zu einer echten Flex-Spalte. Dadurch kann die
   Aktionsleiste unabhaengig von der Textlaenge unten verankert werden. */
#artikel.artikeluebersicht > .artikel_box.um-article_box {
    display: flex !important;
    flex-direction: column;
    align-self: stretch;
    height: auto;
    min-height: 0;
    box-sizing: border-box;
}

#artikel.artikeluebersicht > .artikel_box.um-article_box > .imagelist,
#artikel.artikeluebersicht > .artikel_box.um-article_box > .artikel_infos,
#artikel.artikeluebersicht > .artikel_box.um-article_box > .artikel_pricing {
    flex: 0 0 auto;
    min-width: 0;
}

/* Zwei Titelzeilen werden auf Desktop fest reserviert. Einzeilige Titel
   erhalten denselben Platz; laengere Titel werden sauber begrenzt. */
#artikel.artikeluebersicht > .artikel_box.um-article_box .artikel_infos a.titel {
    display: block;
    min-width: 0;
}

#artikel.artikeluebersicht > .artikel_box.um-article_box .artikel_infos a.titel h2 {
    display: -webkit-box !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    overflow: hidden !important;
    line-height: 22px !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* Preisbereich bleibt kompakt. Die Aktionsleiste wird immer an den
   Kartenboden geschoben, auch bei Grundpreis, Streichpreis oder langen Titeln. */
#artikel.artikeluebersicht > .artikel_box.um-article_box .artikel_pricing {
    min-width: 0;
}

#artikel.artikeluebersicht > .artikel_box.um-article_box > .kategoriebuttons_actions {
    width: 100%;
    margin-top: auto !important;
    padding-top: 10px;
    box-sizing: border-box;
}

/* Tablet und Smartphone: drei Titelzeilen beibehalten, aber ebenfalls
   mit einer festen Hoehe und unten ausgerichteter Aktionsleiste. */
@media screen and (max-width: 767px) {
    #artikel.artikeluebersicht > .artikel_box.um-article_box .artikel_infos a.titel h2 {
        height: 55px !important;
        min-height: 55px !important;
        max-height: 55px !important;
        line-height: 18.333px !important;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    #artikel.artikeluebersicht > .artikel_box.um-article_box > .kategoriebuttons_actions {
        margin-top: auto !important;
    }
}