

/*

    Diese Datei beinhaltet alle Styles der Komponenten.
    Jede Komponente wird am Beginn mit der Bezeichnung in Uppercase gestartet.
    Jede Zeile muss mit dem HTML Element und der Komponenten-Bezeichnung ( zb a.tf-button ) beginnen.

*/


/* FORM */

form.tf-form {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 750px;
}

form.tf-form.freeze {
    pointer-events: none;
}

form.tf-form.fullwidth {
    max-width: unset;
}

form.tf-form.one-line {
    flex-direction: row;
    gap: 1rem;
}

form.tf-form .form-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

form.tf-form.one-line .form-item {
    flex-direction: row;
    align-items: center;
    flex-grow: 1;
}

form.tf-form .form-item-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

form.tf-form .form-item-row:has( .tf-button ) {
    margin-top: 0.5rem;
}

form.tf-form.one-line .form-item-row,
form.tf-form.one-line .form-item-row:has( .tf-button ) {
    margin-top: 0px;
}

form.tf-form .form-item-checkbox {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

form.tf-form .form-item-checkbox label,
form.tf-form .form-item-checkbox input {
    cursor: pointer;
}

form.tf-form .form-item-columns {
    display: flex;
    gap: 2rem;
}

form.tf-form .form-item-columns .form-item {
    flex-grow: 1;
}

form.tf-form .form-item-rating {
    position: relative;
    display: flex;
    gap: 0.5rem;
}

form.tf-form .form-item-rating input[type="radio"] {
    appearance: none;
    background-color: white;
    margin: 0;
    width: 3rem;
    height: 3rem;
    background-image: url( '/img/remojis/star.svg' );
    background-size: 100% auto;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: filter .2s, transform .2s;
    border: none;
}

form.tf-form .form-item-rating input[type="radio"]:disabled {
    display: none;
}

form.tf-form .form-item-rating input[type="radio"]:hover {
    transform: scale( 1.2 );
}

form.tf-form .form-item-rating input[type="radio"]:checked ~ input {
    filter: grayscale(1);
}



form.tf-form .form-adressee {
    position: relative;
    display: flex;
    gap: 2rem;
    align-items: center;
    border-bottom: var( --border-thinline-black );
    padding-bottom: 1.5em;
}

form.tf-form .form-adressee img {
    display: block;
    width: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

form.tf-form .form-adressee p {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

form.tf-form .form-success,
form.tf-form .form-error {
    border-top: var(--border-thinline-black);
    padding-top: 1rem;
}

form.tf-form .form-success p,
form.tf-form .form-success p a {
    font-size: 1rem;
    line-height: 1.375rem;
    font-weight: 500;
    color: var( --success_green );
}

form.tf-form .form-error p,
form.tf-form .form-error p a {
    font-size: 1rem;
    line-height: 1.375rem;
    font-weight: 500;
    color: var( --main-color );
}

/*form.tf-form > .numbered {
    padding-left: calc( 34px + 1rem );
}

form.tf-form > .numbered::before {
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    top: -3px;
    width: 34px;
    height: 34px;
    background-color: var( --textcolor );
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    line-height: 1.7rem;
    font-weight: 300;
}

form.tf-form > .numbered:nth-child( 1 )::before {
    content: "1";
}

form.tf-form > .numbered:nth-child( 2 )::before {
    content: "2";
}

form.tf-form > .numbered:nth-child( 3 )::before {
    content: "3";
}

form.tf-form > .numbered:nth-child( 4 )::before {
    content: "4";
}

form.tf-form > .numbered:nth-child( 5 )::before {
    content: "5";
}

form.tf-form > .numbered:nth-child( 6 )::before {
    content: "6";
}

form.tf-form > .numbered:nth-child( 7 )::before {
    content: "7";
}

form.tf-form > .numbered:nth-child( 8 )::before {
    content: "8";
}

form.tf-form > .numbered:nth-child( 9 )::before {
    content: "9";
}

form.tf-form > .numbered:nth-child( 10 )::before {
    content: "10";
}

form.tf-form .form-item .form-item-title {
    font-size: 1.2rem;
    line-height: 1.7rem;
    font-weight: 300;
}*/

form.tf-form label {
    font-size: 1rem;
    line-height: 1.375rem;
    font-weight: 500;
    margin-bottom: 0px;
}

form.tf-form .form-item p {
    font-size: 1rem;
    line-height: 1.375rem;
    font-weight: 300;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

form.tf-form .form-item p.validation-error {
    color: var( --main-color );
    font-weight: 500;
}

form.tf-form input,
form.tf-form textarea {
    display: block;
    width: 100%;
    font: inherit;
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.25rem;
    background-color: white;
    color: var(--textcolor);
    border: var(--border-thinoutline-black);
    border-radius: 1rem;
    height: 50px;
    padding: 1.5rem;
    padding-top: 0px;
    padding-bottom: 0px;
    outline: none;
    resize: none;
    transition: border .2s;
}

form.tf-form textarea {
    height: 250px;
    min-height: 250px;
    resize: vertical;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    font-size: 1rem;
    line-height: 1.375rem;
}

form.tf-form textarea.medium {
    height: 180px;
    min-height: 180px;
}

form.tf-form textarea.small {
    height: 120px;
    min-height: 120px;
}

form.tf-form input[type="checkbox"] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

form.tf-form input:focus,
form.tf-form textarea:focus {
    border: 1px solid var(--textcolor);
}

form.tf-form select {
    position: relative;
    height: 50px;
    border: var(--border-thinoutline-black);
    border-radius: 1rem;
    appearance: none;
    font: inherit;
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.25rem;
    background-color: white;
    color: var(--textcolor);
    padding: 1.5rem;
    padding-top: 0px;
    padding-bottom: 0px;
    cursor: pointer;
    transition: border .2s;
}

form.tf-form select:focus,
form.tf-form select:hover {
    border: 1px solid var(--textcolor);
}

form.tf-form > .numbered {
    padding-left: calc( 34px + 1rem );
}

form.tf-form .form-item-title {
    position: relative;
}

form.tf-form .form-item-title:not(:first-child) {
    margin-top: 1rem;
}

form.tf-form .form-item-title .text {
    font-size: 1.2rem;
    line-height: 1.7rem;
    font-weight: 300;
}

form.tf-form .form-item-title.numbered .number {
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    top: -3px;
    width: 34px;
    height: 34px;
    background-color: var( --textcolor );
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    line-height: 1.7rem;
    font-weight: 500;
}

@media only screen and (max-width: 550px) {

    form.tf-form .form-item-columns {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    form.tf-form.one-line {
        flex-direction: column;
    }
    
}