.input__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input__text input {
    padding: 12px 16px;
    background-color: var(--background-default);
    border-radius: 16px;
    border: none;
    color: var(--text-primary);
    caret-color: var(--text-primary);
    position: relative;
    font-size: 14px;
    line-height: 24px;
}

.input__text.disabled span {
    color: var(--text-disabled);
}

.input__text.disabled input {
    color: var(--action-disabled);
    border-color: var(--neutral-300);
}

.input__text.disabled input::placeholder {
    color: var(--action-disabled);
}

.input__text input:focus-visible,
.input__text input:focus {
    outline: unset;
    border: 2px solid var(--action-active);
    padding: 10px 14px;
}

.input__text input:focus-visible:invalid,
.input__text input:focus:invalid,
.input__text input:invalid {
    padding: 11px 15px;
    border: 1px solid var(--error-light);
}

.input__text input::placeholder {
    font-size: 14px;
    line-height: 24px;
}

.input__text.error-message:after {
    content: "Bitte ausfüllen";
    padding-left: 20px;
    background: var(--report-problem-icon);
    background-position-y: center;
    background-position-x: 0;
    background-repeat: no-repeat;
    color: var(--error-light);
}