/* =========================================================
 * KH Forms – Bootstrap inspired frontend
 * ======================================================= */

.kh-form {
    width: 100%;
    max-width: 760px;
    font-size: 16px;
    line-height: 1.5;
}


/* =========================================================
 * Layout
 * ======================================================= */

.kh-form .kh-form-row {
    display: grid;
    width: 100%;
    gap: 20px;
    margin: 0 0 22px;
}

.kh-form .kh-form-row-100 {
    grid-template-columns: minmax(0, 1fr);
}

.kh-form .kh-form-row-50-50 {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.kh-form .kh-form-row-33-33-33 {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}

.kh-form .kh-form-row-33-67 {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 2fr);
}

.kh-form .kh-form-row-67-33 {
    grid-template-columns:
        minmax(0, 2fr)
        minmax(0, 1fr);
}

.kh-form .kh-form-column {
    min-width: 0;
}

.kh-form .kh-form-column > .kh-form-field {
    box-sizing: border-box;
    width: 100%;
}

.kh-form .kh-form-column > .kh-form-field +
.kh-form-field {
    margin-top: 18px;
}


/* =========================================================
 * Labels
 * ======================================================= */

.kh-form .kh-form-field {
    box-sizing: border-box;
    margin: 0;
}

.kh-form .form-label,
.kh-form .kh-form-label {
    display: block;
    margin: 0 0 8px;
    font-weight: 600;
    line-height: 1.4;
}

.kh-form .text-danger,
.kh-form .kh-form-required {
    margin-left: 3px;
    color: #dc3545;
}


/* =========================================================
 * Inputs / Textarea
 * ======================================================= */

.kh-form .form-control,
.kh-form .kh-form-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 46px;
    padding: 10px 13px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    outline: 0;
    background-color: #fff;
    background-clip: padding-box;
    color: #212529;
    font: inherit;
    line-height: 1.5;
    transition:
        border-color .15s ease-in-out,
        box-shadow .15s ease-in-out;
}

.kh-form .form-control::placeholder,
.kh-form .kh-form-input::placeholder {
    color: #6c757d;
    opacity: 1;
}

.kh-form .form-control:focus,
.kh-form .kh-form-input:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow:
        0 0 0 .2rem
        rgba(13, 110, 253, .20);
}

.kh-form .kh-form-textarea {
    min-height: 140px;
    resize: vertical;
}


/* =========================================================
 * Select
 * ======================================================= */

.kh-form select.kh-form-input.kh-form-select.form-select {
    -webkit-appearance: none;
    appearance: none;

    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 46px;
    min-height: 46px;

    padding: 10px 42px 10px 13px;

    border: 1px solid #ced4da;
    border-radius: 6px;
    outline: 0;

    background-color: #fff;
    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #6c757d 50%
        ),
        linear-gradient(
            135deg,
            #6c757d 50%,
            transparent 50%
        );
    background-position:
        calc(100% - 17px) 19px,
        calc(100% - 12px) 19px;
    background-size:
        5px 5px,
        5px 5px;
    background-repeat: no-repeat;

    color: #212529;
    font: inherit;
    line-height: 24px;

    cursor: pointer;

    transition:
        border-color .15s ease-in-out,
        box-shadow .15s ease-in-out;
}

.kh-form select.kh-form-input.kh-form-select.form-select:focus {
    border-color: #86b7fe;
    box-shadow:
        0 0 0 .2rem
        rgba(13, 110, 253, .20);
}

/* =========================================================
 * Checkbox / Radio / Datenschutz
 * ======================================================= */

.kh-form .form-check,
.kh-form .kh-form-choice {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 9px;
    cursor: pointer;
}

.kh-form .form-check input,
.kh-form .kh-form-choice input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 3px 0 0;
    accent-color: #0d6efd;
    cursor: pointer;
}

.kh-form .kh-form-radio-group {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.kh-form .kh-form-field-privacy {
    width: 100%;
}


/* =========================================================
 * Submit Button
 * ======================================================= */

.kh-form .kh-form-actions {
    width: 100%;
    margin-top: 6px;
}

.kh-form .kh-form-submit {
    display: inline-block;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: #0d6efd;
    color: #fff;
    font: inherit;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    transition:
        background-color .15s ease-in-out,
        border-color .15s ease-in-out,
        box-shadow .15s ease-in-out;
}

.kh-form .kh-form-submit:hover {
    background: #0b5ed7;
    border-color: #0a58ca;
}

.kh-form .kh-form-submit:focus {
    outline: 0;
    box-shadow:
        0 0 0 .2rem
        rgba(49, 132, 253, .35);
}


/* =========================================================
 * Statusmeldungen / Alerts
 * ======================================================= */

.kh-form-message {
    box-sizing: border-box;
    width: 100%;
    max-width: 760px;
    margin: 0 0 20px;
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: 6px;
    line-height: 1.5;
}

.kh-form-success {
    border-color: #badbcc;
    background: #d1e7dd;
    color: #0f5132;
}

.kh-form-error {
    border-color: #f5c2c7;
    background: #f8d7da;
    color: #842029;
}


/* =========================================================
 * Honeypot
 * ======================================================= */

.kh-form-hp {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}


/* =========================================================
 * Legacy-Layouts
 * ======================================================= */

.kh-form:not(:has(.kh-form-row)) {
    display: grid;
    grid-template-columns:
        repeat(12, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 22px;
}

.kh-form:not(:has(.kh-form-row))
> .kh-form-field,
.kh-form:not(:has(.kh-form-row))
> .kh-form-radio-group {
    grid-column: span 12;
}

.kh-form:not(:has(.kh-form-row))
> .kh-form-width-100 {
    grid-column: span 12;
}

.kh-form:not(:has(.kh-form-row))
> .kh-form-width-50 {
    grid-column: span 6;
}

.kh-form:not(:has(.kh-form-row))
> .kh-form-width-33 {
    grid-column: span 4;
}

.kh-form:not(:has(.kh-form-row))
> .kh-form-actions {
    grid-column: 1 / -1;
}


/* =========================================================
 * Responsive
 * ======================================================= */

@media screen and (max-width: 767px) {
    .kh-form .kh-form-row-100,
    .kh-form .kh-form-row-50-50,
    .kh-form .kh-form-row-33-33-33,
    .kh-form .kh-form-row-33-67,
    .kh-form .kh-form-row-67-33 {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .kh-form:not(:has(.kh-form-row))
    > .kh-form-width-50,
    .kh-form:not(:has(.kh-form-row))
    > .kh-form-width-33 {
        grid-column: 1 / -1;
    }

    .kh-form .kh-form-submit {
        width: 100%;
    }
}




/* =========================================================
 * Datei-Upload
 * ======================================================= */

.kh-form .kh-form-file-help {
    margin-top: 6px;
    color: #6c757d;
    font-size: 13px;
    line-height: 1.4;
}



/* =========================================================
 * Feldbezogene Validierungsfehler
 * ======================================================= */

.kh-form .kh-form-field-error .kh-form-input,
.kh-form .kh-form-field-error .form-control,
.kh-form .kh-form-field-error .form-select {

    border-color: #dc3545;
}

.kh-form .kh-form-field-error-message {

    margin-top: 6px;

    color: #842029;

    font-size: 13px;

    line-height: 1.4;
}


/* =========================================================
 * Validierungsfehler – Select und Datenschutz
 * ======================================================= */

/*
 * Select/Dropdown:
 * sichtbaren Rahmen zuverlässig rot markieren.
 */
.kh-form .kh-form-field-error select.kh-form-select,
.kh-form .kh-form-field-error select.form-select {
    border-color: #dc3545 !important;
}


/*
 * Datenschutz:
 * Da die Checkbox selbst keinen sinnvollen Feldrahmen hat,
 * wird der komplette Zustimmungsbereich hervorgehoben.
 */
.kh-form .kh-form-field-privacy.kh-form-field-error {
    padding: 12px 14px;
    border: 1px solid #dc3545;
    border-radius: 6px;
}


/*
 * Fehlermeldung innerhalb des Datenschutzfeldes
 * etwas vom Zustimmungsbereich absetzen.
 */
.kh-form .kh-form-field-privacy.kh-form-field-error
.kh-form-field-error-message {
    margin-top: 8px;
}