:root {
    --invalid-input-border-color: var(--red);
    --valid-input-border-color: var(--outlines-gray);
}

form.gibForm fieldset{
    padding: 0;
    margin: 0;
}
form.gibForm legend{
    appearance: none;
    -webkit-appearance: none;
    color: var(--dark-gray);
    font-size: 17px;
    padding: 0;
    margin: 0;
}

form.gibForm label, form.gibForm .form-label{
    font-family: 'SoletoTK_W_Md';
    color: var(--main-font-color);
    font-size: 14px;
    font-style: normal;
    font-weight: 500 !important;
    line-height: 18px;
    margin: 0;
}

form.gibForm .consentText,form.gibForm .consentText a{
    font-family: 'SoletoTK_W_Lt';
    color: var(--main-font-color);
    font-size: 14px;
    font-style: normal;
    font-weight: 300 !important;
    line-height: 18px;
    display:inline;
}

form.gibForm label .requiredText, form.gibForm .form-label .requiredText{
    font-family: 'SoletoTK_W_Lt';
    font-style: normal;
    font-weight: 300 !important;
}


form.gibForm .formError{
    color: var(--red);
    font-family: 'SoletoTK_W_Md';
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
}

form.gibForm .formError:empty {
  display: none;
}

form.gibForm input[type="checkbox"]{
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--valid-input-border-color) !important;
    background: #fff;
    width: 16px;
    height: 16px;
    gap: 12px;
    position: relative;
    cursor: pointer;
}


form.gibForm input[type="checkbox"][aria-invalid="true"]{
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid var(--invalid-input-border-color) !important; 
    background: #fff;
    width: 16px;
    height: 16px;
    gap: 12px;
}

form.gibForm input[type="checkbox"]:checked {
    background-color: var(--black);
    border-color: var(--black);
    /* Weißer Haken als optimiertes Inline-SVG */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: center;
}


form.gibForm input[aria-invalid="true"]:not([type="radio"]):not([type="checkbox"]),
form.gibForm select[aria-invalid="true"],
form.gibForm textarea[aria-invalid="true"] {
    appearance: none;
    -webkit-appearance: none;
    border-radius: 4px !important;
    border: 2px solid var(--invalid-input-border-color) !important;
    background: #fff;
    gap: 12px;
    min-height: 40px;
}

form.gibForm input::placeholder{
    color: #363636B3 !important;
}


.checkbox-label-clickable{
    display: flex;
    justify-content: center;
    width:32px; 
    height: 32px;
    gap:10px;
    cursor: pointer;
}

/* Erhöhte Spezifität durch das Anhängen von :focus an die genaue CSS-Kette 
form.gibForm input:not([aria-invalid="true"]):not([type="radio"]):not([type="checkbox"]):focus,
form.gibForm select:not([aria-invalid="true"]):focus,
form.gibForm textarea:not([aria-invalid="true"]):focus {
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 4px !important;
    border: 2px solid var(--dark-blue) !important;
}*/



form.gibForm input:not([aria-invalid="true"]):not([type="radio"]):not([type="checkbox"]),
form.gibForm select:not([aria-invalid="true"]),
form.gibForm textarea:not([aria-invalid="true"]) {
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 4px !important;
    border: 1px solid var(--valid-input-border-color) !important;
    
    background: #fff;
    gap: 12px;
    min-height: 40px !important;

    color: var(--dark-gray) !important;
    font-size: 17px !important;
    font-style: normal;
    font-weight: 300;
    line-height: 24px !important;
}

form.gibForm input:not([type="radio"]):not([type="checkbox"]):focus,
form.gibForm select:focus,
form.gibForm textarea:focus {
    /*outline: none;*/
    appearance: none;
    -webkit-appearance: none;
    border-radius: 4px !important;
    /*
    border: 2px solid var(--dark-blue) !important;
    */
    outline: 2px solid var(--dark-blue);
}



form.gibForm input[type="radio"]{
    appearance: none;
    -webkit-appearance: none;
    border-radius: 50% !important;
    border: 1px solid var(--valid-input-border-color);

    width: 16px;
    height: 16px;
    background: #fff;
    cursor: pointer;
}

form.gibForm .radio-item{
    border-radius: 4px !important;
    cursor: pointer;
    border: 2px solid #FFFFFF00;
}
form.gibForm .radio-item:hover{
    background: #fff;
}

.radio-item:focus-within, form.gibForm input[type="checkbox"]:focus {
    outline: 2px solid var(--dark-blue) !important;
}
/*
form.gibForm .radio-item:focus{
    border: 2px solid var(--dark-blue) !important;
}*/

form.gibForm input[type="radio"]:focus,
form.gibForm input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: none;
}

form.gibForm input[type="radio"]:checked {
    background-color: #FFF;
    border-color: var(--black);
    
    /* Neues SVG mit 24x24 Viewbox und einem zentrierten Kreis mit Radius 6 (Durchmesser 12) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='7' fill='%23363636'/%3E%3C/svg%3E");
    
    /* Das SVG füllt das Input komplett aus, die Zentrierung passiert IM Vektor */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

form.gibForm fieldset[aria-invalid="true"] .radio-item{
    background-color: #FFF;
}
/*
form.gibForm fieldset[aria-invalid="true"] input[type="radio"]{
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    cursor: pointer;
}*/

.gibForm .radioGroup[aria-invalid="true"] .radio-item{
    background: #fff;
    cursor: pointer;
    border-radius: 4px !important;
    overflow: hidden;
    border: 2px solid var(--invalid-input-border-color) !important;
  appearance: none;
  -webkit-appearance: none;
  /*outline: 2px solid var(--invalid-input-border-color) !important;*/

}

form.gibForm .form-check-label{
    font-family: 'SoletoTK_W_Lt';
    font-size: 17px;
    font-style: normal;
    font-weight: 300;
    line-height: 24px;
}

/** UEBERSCHREIBEN DER BROWSER INTERNEN AUTOFILL COLORS **/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    box-shadow: 0 0 0 1000px #FFF inset !important;
    -webkit-box-shadow: 0 0 0 1000px #FFF inset !important;
    
    -webkit-text-fill-color: var(--black) !important;
    transition: background-color 5000s ease-in-out 0s !important;
}


/* die komplette radiogroup label, inputs und errormessage */
form.gibForm .radioGroup{
    gap: 4px;
}

/* abstand der versch. radiobutton+label zueinander */
form.gibForm .radioButtonElementsContainer{
    gap: 12px;
}

@media (min-width: 992px) {
    form.gibForm .radioGroup{
        gap: 8px;
    }

    form.gibForm .radioButtonElementsContainer{
        gap: 16px;
    }

}

form.gibForm .errorLabel, form.gibForm .errorLabel a{
    color: var(--red);
}