/*
 * List-Icons-System
 *
 * Flexible Listen-Komponente für Inhalte mit vorangestellten Icons.
 *
 * Funktionen:
 * - Standardfarbe der Icons ist var(--pcb-green)
 * - Farb-Modifier ändern ausschließlich die Icon-Farbe
 * - einfache Listeneinträge mit Text
 * - optionale Titel + Beschreibung pro Listeneintrag
 * - optionale Überschrift mit eigenem Icon
 * - saubere Ausrichtung auch bei mehrzeiligen Inhalten
 * - kann direkt auf einem <ul> oder als Wrapper verwendet werden
 * - .list-icons--box                 umrahmte Box
 * - .list-icons--dividers            Trenner zwischen Einträgen
 * - .list-icons--compact             kleinere vertikale Abstände
 * - .list-icons--spacious            größere vertikale Abstände
 * - .list-icons--circle-icons        runde Listen-Icons
 * - .list-icons--circle-heading      rundes Heading-Icon
 * - .list-icons--filled-heading      gefülltes Heading-Icon
 *
 * Farben:
 * - .list-icons--green
 * - .list-icons--green-light
 * - .list-icons--fr4
 * - .list-icons--black
 * - .list-icons--grey
 * - .list-icons--light-blue
 * - .list-icons--red
 *
 * Die Farb-Modifier nutzen globale CSS-Variablen aus der Haupt-CSS.
 * Text-, Titel- und Linkfarben werden dadurch nicht verändert.
 *
 * Hinweis:
 * Der Namespace "list-icons" wird bewusst verwendet, um Konflikte mit
 * Font Awesome 2.x und dessen "icon-*"-Klassen zu vermeiden.
 */


/* =========================================================
   List Icons
   ========================================================= */

.list-icons {
    --list-icons-color: var(--pcb-green);
    --list-icons-divider-color: #eeeeee;

    margin: 0 0 25px 0;
}


/* ---------------------------------------------------------
   Heading
   --------------------------------------------------------- */

.list-icons__heading {
    display: table;
    width: 100%;
    margin: 0 0 15px 0;
}

.list-icons__heading-icon,
.list-icons__heading-content {
    display: table-cell;
    vertical-align: middle;
}

.list-icons__heading-icon {
    width: 34px;
    padding-right: 12px;

    color: var(--list-icons-color);
    text-align: center;
    white-space: nowrap;
}

.list-icons__heading-icon i {
    display: inline-block;
}

.list-icons__heading-content {
    width: auto;
}

.list-icons__heading-title {
    display: block;
    margin: 0;

    font-weight: 600;
    line-height: 1.4;
}

.list-icons__heading-text {
    display: block;
    margin-top: 3px;

    line-height: 1.5;
}


/* ---------------------------------------------------------
   List
   --------------------------------------------------------- */

/* Klasse direkt auf dem <ul> */
ul.list-icons,

/* alternativ: .list-icons als Wrapper */
.list-icons > ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

ul.list-icons > li,
.list-icons > ul > li {
    display: table;
    width: 100%;

    margin: 0;
    padding: 10px 0;
}


/* ---------------------------------------------------------
   Icon + Content
   --------------------------------------------------------- */

.list-icons__icon,
.list-icons__content {
    display: table-cell;
    vertical-align: top;
}

.list-icons__icon {
    width: 20px;
    padding-right: 10px;

    color: var(--list-icons-color);
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
}

.list-icons__icon i {
    display: inline-block;
    position: relative;
    top: 3px;
}

.list-icons__content {
    width: auto;
}

.list-icons__item-title {
    display: block;
    margin: 0 0 3px 0;

    font-weight: 600;
    line-height: 1.4;
}

.list-icons__text {
    display: block;
    line-height: 1.5;
}


/* =========================================================
   Layout Variants
   ========================================================= */


/* ---------------------------------------------------------
   Box
   --------------------------------------------------------- */

.list-icons--box {
    padding: 20px;

    border: 1px solid #e5e5e5;
    border-radius: 6px;

    background: var(--white);
}


/* ---------------------------------------------------------
   Dividers
   --------------------------------------------------------- */

ul.list-icons--dividers > li,
.list-icons--dividers > ul > li {
    border-bottom: 1px solid var(--list-icons-divider-color);
}

ul.list-icons--dividers > li:last-child,
.list-icons--dividers > ul > li:last-child {
    border-bottom: 0;
}


/* ---------------------------------------------------------
   Compact
   --------------------------------------------------------- */

ul.list-icons--compact > li,
.list-icons--compact > ul > li {
    padding-top: 6px;
    padding-bottom: 6px;
}


/* ---------------------------------------------------------
   Spacious
   --------------------------------------------------------- */

ul.list-icons--spacious > li,
.list-icons--spacious > ul > li {
    padding-top: 14px;
    padding-bottom: 14px;
}


/* =========================================================
   Icon Variants
   ========================================================= */


/* ---------------------------------------------------------
   Circle Icons
   --------------------------------------------------------- */

.list-icons--circle-icons .list-icons__icon {
    width: 28px;
    padding-right: 10px;
}

.list-icons--circle-icons .list-icons__icon i {
    width: 24px;
    height: 24px;

    top: 0;

    border: 1px solid var(--list-icons-color);
    border-radius: 50%;

    line-height: 24px;
    text-align: center;
}


/* ---------------------------------------------------------
   Circle Heading Icon
   --------------------------------------------------------- */

.list-icons--circle-heading .list-icons__heading-icon {
    width: 34px;
}

.list-icons--circle-heading .list-icons__heading-icon i {
    width: 32px;
    height: 32px;

    border: 1px solid var(--list-icons-color);
    border-radius: 50%;

    line-height: 32px;
    text-align: center;
}


/* ---------------------------------------------------------
   Filled Heading Icon
   --------------------------------------------------------- */

.list-icons--filled-heading .list-icons__heading-icon i {
    width: 32px;
    height: 32px;

    border-radius: 50%;

    background: var(--pcb-off-white);

    line-height: 32px;
    text-align: center;
}


/* =========================================================
   Colors
   Only affects icons
   ========================================================= */

.list-icons--green {
    --list-icons-color: var(--pcb-green);
}

.list-icons--green-light {
    --list-icons-color: var(--pcb-green-2);
}

.list-icons--fr4 {
    --list-icons-color: var(--pcb-fr4);
}

.list-icons--black {
    --list-icons-color: var(--package-black);
}

.list-icons--grey {
    --list-icons-color: var(--dark-grey);
}

.list-icons--light-blue {
    --list-icons-color: var(--light-blue);
}

.list-icons--red {
    --list-icons-color: var(--red);
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 767px) {

    .list-icons--box {
        padding: 15px;
    }

    ul.list-icons > li,
    .list-icons > ul > li {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    ul.list-icons--spacious > li,
    .list-icons--spacious > ul > li {
        padding-top: 11px;
        padding-bottom: 11px;
    }

    .list-icons__icon {
        width: 18px;
        padding-right: 8px;
    }

    .list-icons__heading-icon {
        padding-right: 10px;
    }

}