/* ============================================
    BASICS
===============================================*/

.formBody {
    font-size: 16px;
}


/* ========================================================================================
   UI-Variablen
   ======================================================================================== */

   :root {
     /*measures*/
     --ui-border-radius: 5px;
     --padding-v: .5rem;
     --padding-h: .5rem;
     /*spacing*/
     --space-xs: 0.25rem;
     --space-s: 0.5rem;
     --space-m: 0.75rem;
     --space-l: 1rem;
     --space-xl: 1.25rem;
     --space-xxl: 1.5rem;
     /*font-sizes*/
     --default-text: 0.875rem;
     --medium-text: 1rem;
     --headings: 1.25rem;
     --large-headings: 1.3rem;
     /*functional colors*/
     --functional-grey: #737373;
     --inactive-grey: #cecece;
     --light-grey: #efefef;
     --text-color: #464646;
     --functional-green: #699419;
     --functional-green-rgb: 105, 148, 25;
     --functional-yellow: #f09400;
     --functional-yellow-rgb: 240, 148, 0;
     --functional-red: #d60e00;
     --functional-red-rgb: 214, 14, 0;

}


/* ============================================
 CHECKBOX-GROUP
===============================================*/

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: var(--space-s);
}

.checkbox-group label {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    align-items: center;
}

.checkbox-group input[type="checkbox"] {
    appearance: none;
    background-color: #fff;
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1.25rem;
    height: 1.25rem;
    border: 0.15rem solid var(--functional-grey);
    border-radius: var(--ui-border-radius);
    transform: translateY(-0.075rem);
    display: grid;
    place-content: center;
}


.checkbox-group input[type="checkbox"]::before {  
    content: "";
    background: var(--theme-bg-highlight);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E");
    width: 0.8rem;
    height: 0.8rem;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
  }

.checkbox-group  input[type="checkbox"]:checked {
    border: 0.15rem solid var(--theme-bg-highlight);
  }

.checkbox-group  input[type="checkbox"]:checked::before {
    transform: scale(1);
  }

/* ============================================
 FORM-LAYOUT
===============================================*/

.form--singlepage {
    margin: var(--space-xxl) 0;
}

.form-group {
    padding: var(--space-l);
    border: 1px solid var(--light-grey);
    border-radius: var(--ui-border-radius);
    background-color: var(--light-grey);
    margin: var(--space-m) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xxl);
}

.form-group__grouptitle {
    margin: 0 0 0.5rem 0;
}

.form-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

/* ============================================
    BUTTONS
===============================================*/


/* BASIC BUTTONS */

.form__button {
    border-radius: var(--ui-border-radius);
    font-size: 0.85rem;
    height: 2.25rem;
    padding: 0.46875rem 0.9375rem;
    outline: 2px solid hsla(0, 0%, 100%, 0);
}

.form_button:not(:last-child) {
    margin-right: .5rem;
}

/* Primary Button*/

.form__button--primary {
    background: var(--theme-bg-highlight);
    border: 2px solid var(--theme-bg-highlight);
    color: #fff;
    fill: #fff;
}

.form__button--primary:active,
.form__button--primary:focus,
.form__button--primary:hover {
    background: var(--theme-bg-highlight-hover);
    border: 2px solid var(--theme-bg-highlight-hover);
    color: #fff;
}

.form__button--primary:disabled {
    background: var(--inactive-grey);
    border: 2px solid var(--inactive-grey);
}

/* Secondary Button */

.form__button--secondary {
    background: #fff;
    border: 2px solid var(--theme-bg-highlight);
    color: var(--theme-bg-highlight);
    fill: var(--theme-bg-highlight);
}

.form__button--secondary:focus,
.form__button--secondary:active,
.form__button--secondary:hover {
    border: 2px solid var(--theme-bg-highlight-hover);
    color: var(--theme-bg-highlight-hover);
    fill: var(--theme-bg-highlight-hover);
}

.form__button--secondary:disabled {
    border: 2px solid var(--inactive-grey);
    color: var(--inactive-grey);
    fill: var(--inactive-grey);
}


/* BUTTONS WITH ICON */

.form__button--icon {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.form__button--icon .button__icon {
    height: 1rem;
    margin-left: 0.5rem;
    width: 1rem;
}

/* Buttons with icon as toggle*/

.button__icon--toggle-active {
    transform: rotate(180deg);
}


/* ICONS AS BUTTONS */

.form__button--iconbutton {
    background: none;
    border: none;
    margin: 0.5rem;
}

.form__button--iconbutton .icon--grey:hover,
.form__button--iconbutton .icon:hover {
    fill: var(--theme-bg-highlight-hover);
}

.form__button--iconbutton .icon--grey {
    fill: var(--functional-grey);
}

/* BUTTON SIZES */

.form__button--s {
    width: 10.5rem;
}

.form__button--m {
    width: 13rem;
}

.form__button--l {
    width: 17rem;
}

/* Mehrere Buttons */

.button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}

.button-group--align-right {
    justify-content: flex-end;
}


/* ============================================
    TEXT-INPUT
===============================================*/

:root {
    --space-xs: 0.25rem;
    --space-s: 0.5rem;
    --space-m: 0.75rem;
    --space-l: 1rem;
    --space-xl: 1.25rem;
    --space-xxl: 1.5rem;
}

.input__group {
    margin: 0 0 var(--space-m) 0;
}

.input__grouplabel {
    color: var(--textcolor);
    font-size: var(--space-xl);
}

.input__label {
    color: var(--textcolor);
    font-size: 1rem;
}

.input__textinput {
    border: 2px solid var(--inactive-grey);
    border-radius: var(--ui-border-radius);
    color: var(--functional-grey);
    font-size: 1rem;
    margin: 0;
    padding: var(--padding-v) var(--padding-h) var(--padding-v) var(--padding-h);
    width: 100%;
    outline: 1px solid hsla(0, 0%, 100%, 0);
}

/*Validation*/

.input__textinput--error {
    border: 2px solid var(--functional-red);
}

.input__error-message {
    color: var(--functional-red);
    display: none;
    font-size: 0.8rem;
    gap: 0.5rem;
    grid: initial;
    list-style: none inside;
    margin:var(--space-xs) 0 ;
    padding: 0;
}

.input__error-message--active {
    display: flex;
}

.input__error-message li:not(:last-child):after {
    content: "-";
    margin: 0 0.25rem 0 0.5rem;
}

/* Pflichtfeld*/

.label__icon--mandatory {
    fill: var(--textcolor);
    height: 0.6rem;
    margin: 0 0.25rem 0.4rem 0.25rem;
    width: 0.6rem;
}

/* Feedback Message after Sending */

.feedback-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-m);
    text-align: center;
    font-size: 0.8rem;
    align-items: center;
}

.feedback-wrapper--success, .feedback-wrapper--error {
    display: contents;
}

[data-state=success] .feedback-wrapper--error,
[data-state=error] .feedback-wrapper--success {
    display: none;
}
 
/* ============================================
    INPUT-GROUP
===============================================*/

.input-group--singlerow {
    align-items: center;
    display: flex;
    gap: 1rem;
}

.input-group--multirow {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
}

.input-group--stacked {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ============================================
    FOKUS-STYLING
===============================================*/

.form__button:focus-visible,
.form__button:focus-within,
.input__textinput:focus-within,
.input__textinput:focus-visible {
    outline: 1px solid var(--theme-bg-highlight);
    border: 2px solid var(--theme-bg-highlight);
}

input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--theme-bg-highlight);
}