@charset "utf-8";
/* CSS Document */

.clp-box {
    background-color: #f9f9f9; /* Hintergrundfarbe der Box */
    border: 1px solid #ccc; /* Rahmen der Box */
    padding: 20px; /* Innenabstand */
    margin-bottom: 20px; /* Außenabstand unten */
}

.clp-box .clp-header {
    font-weight: bold; /* Schriftart für die Überschrift */
    margin-bottom: 15px; /* Abstand unter der Überschrift */
}

.clp-box .row {
    display: flex; /* Flexbox für die Ausrichtung der Elemente */
    margin-bottom: 10px; /* Abstand zwischen den Zeilen */
}

.clp-box .col-md-3, .clp-box .col-xs-3 {
    flex: 0 0 25%; /* Breite der Spalte für die Bezeichnungen */
    max-width: 25%; /* Maximale Breite der Spalte */
}

.clp-box .col-md-9, .clp-box .col-xs-9 {
    flex: 0 0 75%; /* Breite der Spalte für die Inhalte */
    max-width: 75%; /* Maximale Breite der Spalte */
}

.clp-box hr {
    border: 0; /* Entfernt die Standard-Linie */
    height: 1px; /* Höhe der Trennlinie */
    background-color: #ccc; /* Farbe der Trennlinie */
    margin: 20px 0; /* Abstand ober- und unterhalb der Trennlinie */
}

.clp-box .pictogram-symbols img {
    width: 32px; /* Breite der Piktogramme */
    height: 32px; /* Höhe der Piktogramme */
    margin-right: 10px; /* Rechter Abstand neben den Piktogrammen */
}

.pictogram-icon {
    width: 32px; /* Breite der Piktogramme */
    height: 32px; /* Höhe der Piktogramme */
    margin-right: 10px; /* Rechter Abstand neben den Piktogrammen */
    vertical-align: middle; /* Ausrichtung mit dem Text */
}