:root {
    --form-error: #FF0095;
    --form-success: var(--clr-gruen-1);
}

.form-container {
    margin: var(--space-s) 0;
}

.kontaktformular {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-s);
}

.input-grid {
    display: grid;
    gap: var(--space-s);
    grid-template-areas:
        "n n"
        "vn vn"
        "e e"
        "t t"
        "m m";
}

.kontaktformular label {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.form-input {
    display: flex;
    flex-direction: column;
}

.kontaktformular textarea {
    min-height: 8rem;
}

.kontaktformular textarea::placeholder,
.kontaktformular input::placeholder {
    opacity: 0.8;
    color: var(--clr-dark);
}

.kontaktformular textarea,
.kontaktformular input:not([type="submit"]) {
    font-size: var(--step-1);
    border: 0;
    width: 100%;
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--space-xs);
}

.kontaktformular textarea:focus,
.kontaktformular input:focus {
    outline-color: var(--clr-dark);
    outline-width: 2px;
}

.form-name {
    grid-area: n;
}

.form-vorname {
    grid-area: vn;
}

.form-telefon {
    grid-area: t;
}

.form-firma {
    grid-area: f;
}

.form-email {
    grid-area: e;
}

.form-message {
    grid-area: m;
}

.form-checkbox {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    justify-content: flex-start;
    align-items: flex-start;
    gap: .75rem;
    accent-color: var(--clr-dark);

    user-select: none;
}

.form-checkbox label {
    cursor: pointer;
}

.form-checkbox input[type="checkbox"] {
    width: 1.5rem;
    padding: 0;
    cursor: pointer;
    position: relative;
    top: .32rem;
}

.form-submit {
    align-items: center;
    grid-area: s;
    margin-top: 1rem;
}

.kontaktformular p {
    margin: .25rem 0rem;
}

.kontaktformular p.error-text {
    color: var(--form-error);
}

.pflicht {
    color: var(--clr-dark);
    font-size: var(--step-1);
    margin: var(--space-s) 0;
}

.status-message {
    margin-top: 1rem;
    font-weight: bold;
    text-align: center;
}

.status-message.error {
    color: var(--form-error);
}

.status-message.success {
    color: var(--form-success);
}

.asterisk {
    color: var(--form-error);
}