.icon-choice {
    --icon-size: 1.4em;

    --tt-color: var(--main-color);
    --tt-color-secundary: var(--grey-300);

    width: var(--icon-size);
    height: var(--icon-size);

    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px;
    margin: 0px;
    border-radius: 50%;
    aspect-ratio: 1/1;
}

.icon-choice--yes {
    background: green; 
}

.icon-choice--yes::before {
    --icon-font-size: calc(var(--icon-size) * 0.7);
    /* nur für das X Icon */
    content: '✓';
    color: white;
    font-size: var(--icon-font-size);
}

.icon-choice--neutral {

    border: solid calc(var(--icon-size) * 0.2) orange;
    /* 20% border*/
    background-color: white;
}

.icon-choice--no {
    background: red;
}

.icon-choice--no::before {
    --icon-font-size: calc(var(--icon-size) * 0.7);
    /* nur für das X Icon */
    content: "X";
    color: white;
    font-size: var(--icon-font-size);
}


.icon-choice--shadow {
    box-shadow: var(--box-shadow-z3);
}


.filter-icon {
    height: var(--tt-btn-size);
    width: var(--tt-btn-size);
    height: 1.2em;
    width: 1.2em;
    --tt-color: var(--main-color);
    --tt-color-secundary: var(--grey-300);
    display: inline-flex;
    justify-content: center;
    align-items: center;

    border: 2px solid var(--tt-color);
    background-color: var(--tt-color-secundary);
    border-radius: 7px;
}


  /* height: 1.2em; */
  /* width: 1.2em; */


/* --tt-color: var(--main-color);
--tt-color-secundary: var(--grey-300); */
.filter-icon__img {
    height: 0.8em;
    width: 0.8em;
    height: 76%;
    width: 76%;
}

/*Jobaussichten*/
.filter-icon--21 {
    --tt-color: hsl(339, 67%, 51%);
    --tt-color-secundary: hsl(339, 40%, 92%);
}

.tt-21{
    --tt-color: hsl(339, 67%, 51%);
    --tt-color-secundary: hsl(339, 40%, 92%);
}

/*Beliebt*/
.filter-icon--22 {
    --tt-color: hsl(244, 100%, 65%);
    --tt-color-secundary: hsl(244, 49%, 93%);
}


.tt-22{
    --tt-color: hsl(244, 100%, 65%);
    --tt-color-secundary: hsl(244, 49%, 93%);
}