@charset "utf-8";
/**
*  CSS Datei für das Wordpress Plugin freinet_api_angebot
*  @author Jan Rademacher <rademacher@freinet-online.de>
*  mit Inhalten des yaml-grid yaml.de
 */

/**
*  Detailseite eines Angebotes
 */
article h1.angebot_main_titel {
    margin-bottom: 12px;
}
article .DetailBacklink {
    padding: 15px;
    text-align: center;
}
article h3.contact_titel {
    margin:1em 0 .2em 0;
    padding: 0;
}
article .contact_description {
    padding:.5em;
    font-style: italic;
}

/*
* Einige Elemente (Angebotbeschreibung etc.) werden als html mit Inline-Css ausgeliefert
* Hier müssen wir einige Dinge resetten (z.B Schriftart /-groesse etc.)
*/
article .block_content div,
article .block_content span,
article .block_content p
{
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}
/**
* Paging
 */
.paging_container {
    margin:5px 0;
    text-align: center;
}
.paging_container .button {
    border:1px solid #ccc;
    border-radius: 2px;
    font-size: 140%;
    margin: 4px;
    padding:0 7px 3px 7px;
    text-decoration: none;
    transition: all ease .5s;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    min-width: 40px;
    display: inline-block;
}
.paging_container:first-child * {
    margin-left:0;
}
.paging_container .button:hover {
    background-color: #ccc;
    transition: all ease .5s;
    text-decoration: none;
}
.paging_container span.disabled:hover {
    background-color: transparent;
    opacity: .5;
}
.paging_container span.disabled {
    opacity: .5;
}

@media screen and ( max-width: 480px )
{
    .paging_container .small_device
    {
        display: inline-block !important;
    }
    .paging_container .big_device
    {
        display: none;
    }
}
/**
* @section YAML Form Module
*
*/
.rating {
    content: "\2605";
    unicode-bidi: bidi-override;
    direction: rtl;
}
.rating > span {
    position: relative;
    width: 1.1em;

}

.ym-form ul, .ym-form ol {
    margin: 0 0 0 15px;
    padding: 0 0 0 0;
}
.ym-form li {
    margin: 0;
    padding: 0;
}
/* Ergebnisliste */
.offer_element {
    display: table;
    width: 100%;
    position: relative;
    margin: 0 0 15px 0;
}
.offer_element h3 {
    margin: 0;
}
.offer_element .productID {
    font-size: 70%;
}
.offer_element .einsatzort {
    float: right;
    margin: 0 0 0 5px;
}
/* Leeren Einsatzort verstecken */
.offer_element .einsatzort:empty {
    display: none;
}
/* Leere Avatare verstecken */
.offer_element .avatar_span:empty {
    display: none;
}
.offer_element .avatar_span {
    float:left;
    margin: 5px 10px 5px 0;
}

.rating > span:hover:before,
.rating > span:hover ~ span:before {
    content: "\2605";
    position: absolute;
}

@media screen and (min-width: 0px) {

    /**
    * @section general width settings for formular elements in modern browsers
    *          switching to CSS3 box modell "border-box" for perfect flexible forms
    *
    * Styling for: <labels>, <input>, <textarea> and <select>
    *
    */
    input, select, textarea {
        border: 1px solid #AAAAAA;
    }

    .ym-form input,
    .ym-form textarea,
    .ym-form select {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
    }

    .ym-form textarea {
        width: 100%;
    }

    .ym-columnar label {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
    }

    .ym-columnar .ym-fbox-select select,
    .ym-columnar .ym-fbox-text input,
    .ym-columnar .ym-fbox-text textarea {
        width: 70%;
    }

    .ym-full .ym-fbox-select select,
    .ym-full .ym-fbox-text input,
    .ym-full .ym-fbox-text textarea {
        width: 100%;
    }

    .ym-form input[type="checkbox"],
    .ym-form input[type="radio"] {
        width: auto;
    }
}

@media screen, projection {

    /**
    * @section general form styling
    *
    * Styling for: <form>, <fieldset>, <legend>, <label> and rows (class="ym-fbox-[xxx]")
    *
    */
    .ym-form {
        /*
        background:#f4f4f4;
        border:2px #fff solid;
        margin: 1.5em 0 0 0;
        padding: 0;
        -webkit-box-shadow: 0 0 4px #ddd;
        -moz-box-shadow: 0 0 4px #ddd;
        box-shadow: 0 0 4px #ddd;
        */
    }

    ::-webkit-input-placeholder {
        color: #666;
    }

    ::-moz-placeholder {
        color: #666;
    }

    /* firefox 19+ */
    :-ms-input-placeholder {
        color: #666;
    }

    /* ie */
    input:-moz-placeholder {
        color: #666;
    }

    .ym-form fieldset {
        position: static;
        /* background: transparent; */
        margin: 0.75em 0 0.75em 0;
        padding: 0 0.5em;
    }

    .ym-form legend {
        background: transparent;
        color: #000;
        font-size: 1.2em;
        line-height: 1.25em;
        font-weight: bold;
        padding: 0 0.5em;
    }

    .ym-form label {
        /*color:#666;*/
        line-height: 1.5em;
    }

    .ym-label {
        /*color:#666;*/
        padding-top: 0.25em;
    }

    /* freinet addon */
    .ym-gl .ym-gbox label {
        /*color:#666;*/
        position: relative;
        vertical-align: middle;
        padding-top: 1.5em;
    }

    .ym-form .ym-form div.ym-fbox-check:focus + label {
        /*color:#000;*/
    }

    /* styling containing DIV elements | Gestaltung der kapselnden DIV-Elemente */
    .ym-form div.ym-fbox-text,
    .ym-form div.ym-fbox-select,
    .ym-form div.ym-fbox-check,
    .ym-form div.ym-fbox-button {
        padding: 0.3em 1em;
        margin-bottom: 0.5em;
    }

    .ym-form div.ym-fbox-button {
        background: #ececec;
        border-top: 1px #e0e0e0 solid;
        padding: 0 1em 1.5em 1em;
        margin: 0;
    }

    .ym-form .ym-gbox {
        padding: 0 0.5em;
        margin-right: 0;
    }

    .ym-form h6 {
        color: #000;
        margin: 1em 0 0 1em;
    }

    /**
    * @section styling form elements
    *
    * Styling for: Input, Textarea, Select ...
    *
    */
    /* styling standard form elements with 'almost' equal flexible width */
    /* Gestaltung der einzelnen Formularelemente mit annähend gleicher Breite */
    .ym-form .ym-fbox-text input,
    .ym-form .ym-fbox-text textarea {
        line-height: 1em;
        padding: 0.7em 2px 0.7em 1px; /* 2021-09-09 0.5em 0.4em; */
        margin-top: -2px;
    }

    .ym-form .ym-fbox-select select {
        line-height: 1em;
        padding: 0.4em 2px 0.4em 1px;
        margin-top: -3px;
    }

    /* proportional fonts for all form elements */
    .ym-form input,
    .ym-form textarea,
    .ym-form select,
    .ym-form optgroup {
        font-family: inherit;
        font-size: inherit;

        -moz-box-shadow: inset 0 0 4px #eee;
        box-shadow: inset 0 0 4px #eee;
    }

    .ym-form optgroup {
        font-style: normal;
        font-weight: bold;
    }

    .ym-form .ym-fbox-text input,
    .ym-form .ym-fbox-text textarea,
    .ym-form .ym-fbox-select select {
        border: 1px solid #ddd;
    }

    /* General form styling	| Allgemeine Formatierung des Formulars */
    .ym-form .ym-message {
        color: #666;
        margin-bottom: 0.5em;
    }

    /* Highlight mandatory fields | Pflichtfeldkennzeichnung hervorheben */
    .ym-form .ym-required {
        color: #800;
        font-weight: bold;
    }

    /* form validation highlight colors */
    .ym-form input:valid,
    .ym-form textarea:valid {
        background-color: #fff;
    }

    .ym-form input:invalid,
    .ym-form textarea:invalid {
        background-color: #fdd;
    }

    /**
    * @section error messages
    *
    */
    .ym-form .ym-error label {
        color: #800;
        font-weight: normal;
    }

    .ym-form .ym-error input,
    .ym-form .ym-error select,
    .ym-form .ym-error textarea {
        border: 1px #800 solid;
    }

    .ym-form .ym-error input:hover,
    .ym-form .ym-error input:focus,
    .ym-form .ym-error select:hover,
    .ym-form .ym-error select:focus,
    .ym-form .ym-error textarea:hover,
    .ym-form .ym-error textarea:focus {
        border: 1px #800 solid !important;
    }

    .ym-form .ym-error .ym-message {
        color: #800;
        font-weight: bold;
        margin-top: 0;
    }

    /* :hover and :focus status on form fields | Effekt zur Hervorhebung von Formularfeldern bei :hover oder :focus */
    .ym-form div.ym-fbox-text input:focus,
    .ym-form div select:focus,
    .ym-form div textarea:focus,
    .ym-form div.ym-fbox-text input:hover,
    .ym-form div select:hover,
    .ym-form div textarea:hover,
    .ym-form div.ym-fbox-text input:active,
    .ym-form div select:active,
    .ym-form div textarea:active {
        border: 1px #888 solid;
        background: #fff;
    }

    /**
    * @section Buttons
    *
    * inspired from: Catalin Rosu (http://red-team-design.com/just-another-awesome-css3-buttons/)
    *							   http://red-team-design.com/css3-patterned-buttons/
    */
    .ym-button,
    .ym-form button,
    .ym-form input[type="button"],
    .ym-form input[type="reset"],
    .ym-form input[type="submit"] {
        display: inline-block;
        white-space: nowrap;
        background-color: #ccc;




        background-image: linear-gradient(top, #eee, #ccc);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
        border: 0px solid #777;
        border-radius: .2em;
        box-shadow: 0 0 1px 1px rgba(255, 255, 255, .8) inset, 0 1px 0 rgba(0, 0, 0, .15);
        color: #333 !important;
        cursor: pointer;
        font-weight: normal;
        margin: 1.5em 0.75em 0 0;
        padding: .4em; /* 2017-02-16 von .1 zu .4 */
        overflow: visible; /* removes extra side spacing in IE */
        text-decoration: none !important;
        text-shadow: 0;
    }

    /* 2016-11-22 von .1em siehe sent.php*/
    .ym-form button {
        padding: .7em 1.5em;
    }

    .ym-form .ym-gbox button,
    .ym-form .ym-gbox input[type="button"],
    .ym-form .ym-gbox input[type="reset"],
    .ym-form .ym-gbox input[type="submit"] {
        margin-top: 0;
        margin-left: 6px;
        padding: 12px 20px
    }

    .ym-form button:hover,
    .ym-form input[type="button"]:hover,
    .ym-form input[type="reset"]:hover,
    .ym-form input[type="submit"]:hover,
    .ym-button:hover {
        background-color: #ddd;




        background-image: linear-gradient(top, #fafafa, #ddd);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
    }

    .ym-form button:active,
    .ym-form input[type="button"]:active,
    .ym-form input[type="reset"]:active,
    .ym-form input[type="submit"]:active,
    .ym-button:active {
        background-color: #bbb;




        background-image: linear-gradient(top, #ccc, #bbb);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#cccccc', EndColorStr='#bbbbbb');
        box-shadow: 2px 2px 3px rgba(0, 0, 0, .2) inset;
        position: relative;
        top: 1px;
    }

    .ym-form button:focus,
    .ym-form input[type="button"]:focus,
    .ym-form input[type="reset"]:focus,
    .ym-form input[type="submit"]:focus,
    .ym-button:focus {
        background: #fafafa;
    }

    /* pseudo elements don't work on input */
    .ym-form button:before,
    .ym-button:before {
        background: #ccc;
        background: rgba(0, 0, 0, .1);
        float: left;
        width: 1em;
        text-align: center;
        font-size: 1.5em;
        margin: 0 1em 0 -1em;
        padding: 0 .2em;
        box-shadow: 0px 0 0 rgba(0, 0, 0, .5), 1px 0 0 rgba(255, 255, 255, .8);
        border-radius: .15em 0 0 .15em;
        pointer-events: none;
    }

    .ym-add:before {
        content: "\271A";
    }

    .ym-delete:before {
        content: "\2718";
    }

    .ym-edit:before {
        content: "\270E";
    }

    .ym-email:before {
        content: "\2709";
    }

    .ym-like:before {
        content: "\2764";
    }

    .ym-next:before {
        content: "\279C";
    }

    .ym-play:before {
        content: "\25B6";
    }

    .ym-save:before {
        content: "\2714";
    }

    .ym-spark:before {
        content: "\2737";
    }

    .ym-star:before {
        content: "\2605";
    }

    /* Button color scheme: success */
    .ym-button.ym-success,
    .ym-form button.ym-success,
    .ym-form input[type="button"].ym-success,
    .ym-form input[type="reset"].ym-success,
    .ym-form input[type="submit"].ym-success {
        -webkit-box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 1px 0 rgba(0, 0, 0, 0.15);
        box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 1px 0 rgba(0, 0, 0, 0.15);
        background: linear-gradient("to bottom", #579BAE, #3E879B);
        filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#FF579BAE', endColorstr='#FF3E879B');
        zoom: 1;
        border: 1px solid #fff;
        color: #fff !important;
        text-shadow: 0 !important;
        border-radius: 0;
    }

    .ym-button.ym-success:hover,
    .ym-form button.ym-success:hover,
    .ym-form input[type="button"].ym-success:hover,
    .ym-form input[type="reset"].ym-success:hover,
    .ym-form input[type="submit"].ym-success:hover {
        opacity: .9;
    }

    .ym-button.ym-success:active,
    .ym-form button.ym-success:active,
    .ym-form input[type="button"].ym-success:active,
    .ym-form input[type="reset"].ym-success:active,
    .ym-form input[type="submit"].ym-success:active {
        -webkit-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.2);
        box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.2);




        background: linear-gradient("to bottom", #66aa66, #448844);
        filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#FF66AA66', endColorstr='#FF448844');
        zoom: 1;
    }

    .ym-button.ym-success:focus,
    .ym-form button.ym-success:focus,
    .ym-form input[type="button"].ym-success:focus,
    .ym-form input[type="reset"].ym-success:focus,
    .ym-form input[type="submit"].ym-success:focus {
        outline: 0;
        background: #6c6;
    }

    /* removes extra inner spacing in Firefox */
    .ym-form button::-moz-focus-inner {
        border: 0;
        padding: 0;
    }

    /* If line-height can't be modified, then fix Firefox spacing with padding */
    .ym-form input[type=button]::-moz-focus-inner,
    .ym-form input[type=reset]::-moz-focus-inner,
    .ym-form input[type=submit]::-moz-focus-inner {
        padding: .4em;
    }

    /* The disabled styles */
    .ym-form button[disabled],
    .ym-form button[disabled]:hover,
    .ym-form input[type=button][disabled],
    .ym-form input[type=button][disabled]:hover,
    .ym-form input[type=reset][disabled],
    .ym-form input[type=reset][disabled]:hover,
    .ym-form input[type=submit][disabled],
    .ym-form input[type=submit][disabled]:hover,
    .ym-button.ym-disabled,
    .ym-button.ym-disabled:hover {
        background: #eee;
        color: #aaa !important;
        border-color: #aaa;
        cursor: default;
        text-shadow: none;
        position: static;
        box-shadow: none;
    }

    /* ie6 support styles - redefined buttons, because of missing support for attribute selectors */
    * html .ym-button,
    * html .ym-form button {
        display: inline-block;
        white-space: nowrap;
        background-color: #ccc;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
        border: 1px solid #777;
        color: #333 !important;
        cursor: pointer;
        font: normal 1em/2em Arial, Helvetica;
        margin: 1.5em 0.75em 0 0;
        padding: 0 1.5em;
        overflow: visible; /* removes extra side spacing in IE */
        text-decoration: none !important;
    }

    * html .ym-form button:focus,
    * html .ym-button:focus {
        outline: 0;
        background: #fafafa;
    }

    * html .ym-form button:hover,
    * html .ym-button:hover {
        background-color: #ddd;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
    }

    * html .ym-form button:active,
    * html .ym-button:active {
        background-color: #bbb;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#cccccc', EndColorStr='#bbbbbb');
        position: relative;
        top: 1px;
    }

    * html .ym-button.ym-disabled,
    * html .ym-button.ym-disabled:hover {
        background: #eee;
        color: #aaa !important;
        border-color: #aaa;
        cursor: default;
        text-shadow: none;
        position: static;
    }

}

/**
* @section YAML Grid Module
*
*/
.ym-grid {
    display: table;
    width: 100%;
    table-layout: fixed;
    list-style-type: none;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 12px;
    clear: left;
}
.ym-gl {
    float: left;
    margin: 0;
}
.ym-gr {
    float: right;
    margin: 0 0 0 -5px;
}
.ym-g5 {width:5%;}
.ym-g10 {width:10%;}
.ym-g20 {width:20%;}
.ym-g40 {width:40%;}
.ym-g60 {width:60%;}
.ym-g80 {width:80%;}
.ym-g90 {width: 90%;}
.ym-g95 {width: 95%;}
.ym-g25 {width:25%;}
.ym-g33 {width:33.333%;}
.ym-g50 {width:50%;}
.ym-g66 {width:66.666%;}
.ym-g75 {width:75%;}
.ym-g38 {width:38.2%;}
.ym-g62 {width:61.8%;}
.ym-gbox {
    padding: 0 10px
}
.ym-gbox-left {
    padding: 0 10px 0 0
}
.ym-gbox-right {
    padding: 0 0 0 10px
}
.ym-equalize {
    overflow: hidden;
}
.ym-equalize > [class*="ym-g"] {
    display: table-cell;
    float: none;
    margin: 0;
    vertical-align: top;
}
.ym-equalize > [class*="ym-g"] > [class*="ym-gbox"] {
    padding-bottom: 10000px;
    margin-bottom: -10000px
}

/* ym-addons */
.ym-right {
    text-align: right;
}
.fieldset_filter {
    padding: 1em !important;
}
.fieldset_filter .ym-grid {
    margin-bottom: 0;
}

@media screen and ( max-width: 760px ) {
    /* linearization for grid module */
    .linearize-level-760, .linearize-level-760 > [class*="ym-g"] {
        display: block;
        float: none;
        padding: 0;
        margin: 0;
        width: 100% !important;
    }

    /* reset defined gutter values */
    .linearize-level-760 > [class*="ym-g"] > [class*="ym-gbox"] {
        overflow: hidden; /* optional for containing floats */
        padding: 0;
        margin: 0;
    }

    .ym-right {
        text-align: left;
    }
}

@media screen and ( max-width: 800px ) {
    /* linearization for grid module */
    .linearize-level-800, .linearize-level-800 > [class*="ym-g"] {
        display: block;
        float: none;
        padding: 0;
        margin: 0;
        width: 100% !important;
    }

    /* reset defined gutter values */
    .linearize-level-800 > [class*="ym-g"] > [class*="ym-gbox"] {
        overflow: hidden; /* optional for containing floats */
        padding: 0;
        margin: 0;
    }

    .ym-right {
        text-align: left;
    }
}

@media screen and ( max-width: 480px ) {
    /* linearization for grid module */
    .linearize-level-480, .linearize-level-480 > [class*="ym-g"] {
        display: block;
        float: none;
        padding: 0;
        margin: 0;
        width: 100% !important;
    }

    /* reset defined gutter values */
    .linearize-level-480 > [class*="ym-g"] > [class*="ym-gbox"] {
        overflow: hidden; /* optional for containing floats */
        padding: 0;
        margin: 0;
    }

    .block1 .block_title {
        padding: 2px 0px 10px 0 !important
    }

    .fieldset_filter .ym-gbox input[type="button"],
    .fieldset_filter .ym-gbox input[type="reset"],
    .fieldset_filter .ym-gbox input[type="submit"] {
        margin-top: 1em !important;
    }

    .fieldset_filter .ym-gbox input[type="button"],
    .fieldset_filter .ym-gbox input[type="reset"],
    .fieldset_filter .ym-gbox input[type="submit"] {
        margin-left: 0 !important;
    }

    .ym-form .ym-fbox-text input,
    .ym-form .ym-fbox-text textarea {
        margin-top: 0;
    }

    .ym-form .ym-fbox-select select {
        margin-top: 0;
    }

}

/* // 2021-07-07 */
.SelectCheckBoxes {   }
.SelectCheckBoxes:hover { border-color: #ddd; }
.SelectCheckBoxesTitel { padding: 0.4em 2px 0.4em 6px; cursor:pointer; border: 1px solid #ddd; display:block; background-color:#fff; }
.SelectCheckBoxesTitel i { float:right; padding:3px 6px 0 0; }
.SelectCheckBoxesHidden { padding:5px; background-color:#F9F9F9; opacity: .8; border-left:1px solid #ddd; border-right:1px solid #ddd; border-bottom:1px solid #ddd; }
.SelectCheckBoxesHidden .block { display:block; }
.SelectCheckBoxesHidden .ym-gbox label { padding-top:.4em;}
.SelectCheckBoxesBubble { float:right; padding:0 5px 0 0; }
.SelectCheckBoxesBubble:empty { display:none; }
.ym-form button.SelectCheckBoxesTitel::before, .ym-button.SelectCheckBoxesTitel::before {
    background:none;
    background:none;
    float: left;
    width: 1em;
    text-align: center;
    font-size: inherit;
    margin: 0;
    padding: 0;
    box-shadow: none;
    border-radius:0;
    pointer-events: none;
}
.ym-form button.SelectCheckBoxesTitel, .ym-form .SelectCheckBoxesTitel input[type="button"] {
    font-family: inherit !important; /* suppress wordpress setting */
    line-height: inherit !important; /* suppress wordpress setting */
    font-size: inherit !important; /* suppress wordpress setting */
    text-transform: none; /* suppress wordpress setting */
    display: block;
    white-space: nowrap;
    background-color: #fff;
    background-image: none;
    filter: none;
    border: 1px solid #ddd;
    border-radius: 0;
    box-shadow: none;
    color: inherit !important;
    cursor: pointer;
    font-weight: normal;
    margin: 0;
    margin-top: 0;
    margin-left: 0 !important;
    padding: 0.4em 2px 0.4em 6px;
    overflow: visible;
    text-decoration: none !important;
    text-shadow: none;
    width:100%;
    text-align:left;
}
.ym-form button.SelectCheckBoxesTitel:hover,
.ym-form input[type="button"]:hover {
    border: 1px #888 solid;
    background: #fff;
    background-image: none;
    filter: none;
}

.ym-form button.SelectCheckBoxesTitel:active {
    top:0;
}
/* // SelectCheckBoxes */

/*
*   // 2019-04-15 CheckButtonContainer
 */
.CheckButtonContainer {

}

.CheckButtonContainer input {
    position: absolute;
    left: -9999px;
}

.CheckButtonContainer label {
    display: inline-block;
    position: relative;
    margin: 0 6px 10px 0;
    padding: 8px 10px;
    padding-top:8px !important; /* suppress wordpress setting */
    border: 1px solid #ddd;
    border-radius: 0;
    color: #000;
    background-color: #fff;
    box-shadow: none; /* 0 0 4px rgba(0, 0, 0, .2); */
    /* box-shadow: inset 0 0 4px #eee; */
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color .2s, box-shadow .2s;
    max-width: 350px;
    overflow: hidden;
    text-overflow: clip ellipsis;
    text-overflow: "…" "…";
    line-height:2.6;
}

.CheckButtonContainer label:hover, input:focus + label {
    box-shadow: none; /* 0 0 4px rgba(0, 0, 0, .6); */
    border:1px solid #000;
}

.CheckButtonContainer input:checked + label {
    background-color: #F8F7F4;
}

.CheckButtonContainer input:checked +label:before {
    /*
    font-family: "Font Awesome 5 Free";
    content: "\f00c"; font-awesome
    */
    font-family: "dashicons";
    content: "\f15e";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight: 700;
    background: transparent !important;
}

/* Um einem CheckButtonContainer einzelner Matchingkategorien andere Farben zuzuordnen, z.B.:
.CheckButtonContainer.kenntnisse_p0 input:checked + label {
    background-color: #cab2d6;
}
.CheckButtonContainer.zielgruppen_p0 input:checked + label {
    background-color: #f0c20c;
}
 */

.CheckButtonContainer input:checked + label::before {
    background-color: #fff;
}

/* Ende .CheckButtonContainer */