/* Kanzlei-Einbindung des offiziellen ALTCHA 3.3.0.
 * Nur die Darstellung; die Bibliothek und die PHP-Pruefung bleiben unveraendert.
 */
.sg-altcha-wrapper {
    display: block;
    width: min(100%, 370px);
    max-width: 100%;
    clear: both;
    margin: 1.25rem 0 1.75rem;
    font-size: .9rem;
    line-height: 1.5;
}

.sg-altcha-wrapper altcha-widget {
    display: block;
    width: 100%;
    max-width: 100%;
    --altcha-max-width: 100%;
    --altcha-padding: 13px;
    --altcha-checkbox-size: 21px;
    --altcha-checkbox-border-radius: 3px;
    --altcha-border-radius: 4px;
    --altcha-border-color: #b9b9b9;
    --altcha-color-base: #ffffff;
    --altcha-color-base-content: #333333;
    --altcha-color-primary: #800000;
    --altcha-color-success: #397b4e;
}

/* Die ALTCHA-Elemente erben keine ungewollten Formularabstaende. */
.sg-altcha-wrapper .altcha,
.sg-altcha-wrapper .altcha-main {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.sg-altcha-wrapper .altcha-main {
    min-height: 54px;
    height: auto;
    padding: 13px 14px;
    align-items: stretch;
}

.sg-altcha-wrapper .altcha-checkbox-wrap {
    align-items: center;
    min-width: 0;
    min-height: 22px;
    flex-wrap: nowrap;
}

.sg-altcha-wrapper .altcha-checkbox-wrap label {
    margin: 0;
    font-weight: 400;
}

.sg-altcha-wrapper .altcha-checkbox-wrap span {
    overflow-wrap: anywhere;
}

.sg-altcha-validation {
    margin: .6rem 0 0;
    padding: 0;
    font-size: .85rem;
    line-height: 1.5;
    color: #800000;
}

.sg-altcha-validation[hidden] {
    display: none !important;
}

.sg-altcha-wrapper.sg-altcha-wrapper--invalid .altcha-main {
    border-color: #800000;
}

/* Das Folge-Element soll auch bei zweizeiligen Widgettexten Abstand haben. */
.sg-altcha-wrapper + .form-submit {
    margin-top: 0;
}

html[data-theme="dark"] .sg-altcha-wrapper altcha-widget {
    --altcha-color-base: #242424;
    --altcha-color-base-content: #f0f0f0;
    --altcha-border-color: #777777;
}
html[data-theme="dark"] .sg-altcha-validation {
    color: #ffb7b7;
}
