@charset "utf-8";
/*
 * CLP-Box – Frontend-Ausgabe des [clp_eg]-Shortcodes.
 *
 * Alle gestaltbaren Eigenschaften sind als CSS-Variablen mit Fallback auf das
 * Standard-Design definiert. Der visuelle Designer (Verwaltungsseite "CLP-Box"
 * -> Tab "Design") setzt diese Variablen; ohne eigene Werte greift überall der
 * Fallback.
 */

.clp-box {
    background-color: var(--clp-bg, #f9f9f9);
    border: var(--clp-border-width, 1px) solid var(--clp-border-color, #ccc);
    border-radius: var(--clp-radius, 0px);
    padding: var(--clp-padding, 20px);
    margin-bottom: var(--clp-margin-bottom, 20px);
    font-family: var(--clp-font, inherit);
    font-size: var(--clp-font-size, inherit);
    color: var(--clp-text, inherit);
}

.clp-box .clp-header {
    font-weight: var(--clp-header-weight, bold);
    font-size: var(--clp-header-size, inherit);
    color: var(--clp-header-color, inherit);
    margin-bottom: var(--clp-header-margin, 15px);
}

.clp-box .row {
    display: flex;
    margin-bottom: 10px;
}

.clp-box .col-md-3,
.clp-box .col-xs-3 {
    flex: 0 0 25%;
    max-width: 25%;
}

.clp-box .col-md-9,
.clp-box .col-xs-9 {
    flex: 0 0 75%;
    max-width: 75%;
}

.clp-box .col-12 {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Beschriftungen der Abschnitte (Piktogramm(e):, H-/P-/EUH-Sätze:). */
.clp-box .pictogram,
.clp-box .hpeu {
    font-weight: var(--clp-label-weight, normal);
    color: var(--clp-label-color, inherit);
}

.clp-box hr {
    border: 0;
    height: var(--clp-hr-height, 1px);
    background-color: var(--clp-hr-color, #ccc);
    margin: var(--clp-hr-margin, 10px) 0;
    width: 100%;
}

.clp-box .pictogram-symbols img,
.clp-box .pictogram-icon {
    width: var(--clp-picto-size, 32px);
    height: var(--clp-picto-size, 32px);
    margin-right: var(--clp-picto-gap, 10px);
    vertical-align: middle;
}

.clp-box .nf-definition-list__row {
    margin-bottom: var(--clp-row-spacing, 6px);
    font-size: var(--clp-row-size, inherit);
    color: var(--clp-row-color, inherit);
}

/* Signalwort neben dem Piktogramm (gemäß CLP fett dargestellt). */
.clp-box .clp-signalword {
    font-weight: var(--clp-signal-weight, bold);
    color: var(--clp-signal-color, inherit);
    margin-left: 4px;
}