/**
 * Kontaktformular Styles
 * TYPO3 Extension: kontaktformular
 */

/* ==========================================================================
   Form Container
   ========================================================================== */

.kontaktformular-wrapper {
    padding: 2rem 0;
}

.kontaktformular-container {
    background: #fff;
    padding: 0;
    border-radius: 0;
}

.kontaktformular-form {
    position: relative;
}

/* ==========================================================================
   Form Groups
   ========================================================================== */

.kontaktformular-form .form-group {
    margin-bottom: 1rem;
}

.kontaktformular-form .form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: block;
}

.kontaktformular-form .form-control,
.kontaktformular-form .form-select {
    border-radius: 0;
    border: 1px solid #ced4da;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.kontaktformular-form .form-control:focus,
.kontaktformular-form .form-select:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.kontaktformular-form .form-control::placeholder {
    color: #6c757d;
    opacity: 0.7;
}

/* ==========================================================================
   Textarea (Nachricht)
   ========================================================================== */

.kontaktformular-form textarea.form-control {
    min-height: 200px;
    resize: vertical;
}

@media (min-width: 768px) {
    .kontaktformular-form textarea.form-control {
        min-height: 248px;
    }
}

/* ==========================================================================
   Required Field Indicator
   ========================================================================== */

.kontaktformular-form .text-danger {
    color: #dc3545 !important;
}

/* ==========================================================================
   Captcha
   ========================================================================== */

.kontaktformular-form .captcha-question {
    background: #f8f9fa;
    padding: 0.75rem 1rem;
    border-radius: 0;
    margin-bottom: 0.5rem;
}

.kontaktformular-form .captcha-text {
    font-size: 0.95rem;
}

.kontaktformular-form .captcha-text strong {
    font-weight: 700;
    color: #333;
}

.kontaktformular-form .captcha-input {
    max-width: 150px;
}

/* ==========================================================================
   Datenschutz (Privacy)
   ========================================================================== */

.kontaktformular-form .collapse-toggle {
    cursor: pointer;
    padding: 0.5rem 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.kontaktformular-form .collapse-toggle .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1rem;
    width: 24px;
    height: 24px;
    min-width: 24px;
    background-color: #e9ecef;
    color: #333;
    border-radius: 50%;
    text-align: center;
    line-height: 1;
    transition: background-color 0.2s ease;
}

.kontaktformular-form .collapse-toggle:hover .icon {
    background-color: #ced4da;
}

.kontaktformular-form .collapse-toggle a,
.kontaktformular-form .collapse-toggle .toggle-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.kontaktformular-form .collapse-toggle a:hover,
.kontaktformular-form .collapse-toggle .toggle-link:hover {
    text-decoration: underline;
}

.kontaktformular-form .datenschutz-text {
    background: transparent;
    padding: 1rem 0;
    margin: 1rem 0;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ==========================================================================
   Checkbox Styling
   ========================================================================== */

.kontaktformular-form .form-check {
    padding-left: 0;
}

.kontaktformular-form .form-check-input {
    width: 1.25em;
    height: 1.25em;
    margin-top: 0.125em;
    vertical-align: top;
    border: 1px solid #ced4da;
    border-radius: 0;
}

.kontaktformular-form .form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.kontaktformular-form .form-check-label {
    padding-left: 0.5rem;
}

/* Custom Checkbox Style (checkbox-wrapper-29) */
.checkbox-wrapper-29 {
    text-align: left;
}

.checkbox-wrapper-29 .checkbox {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    justify-content: flex-start;
}

.checkbox-wrapper-29 .checkbox__input {
    position: relative;
    width: 20px;
    height: 20px;
    min-width: 20px;
    cursor: pointer;
}

.checkbox-wrapper-29 .checkbox__label {
    display: none;
}

/* Datenschutz Checkbox Container linksbündig */
.kontaktformular-form .wrapper.checkbox-wrapper-29 {
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 0;
}

.kontaktformular-form .wrapper.checkbox-wrapper-29 .form-check {
    display: block;
    padding: 0;
    margin: 0;
}

.kontaktformular-form .wrapper.checkbox-wrapper-29 .question__label.checkbox {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    margin: 0;
    padding: 0;
}

/* Datenschutz-Text neben der Checkbox */
.kontaktformular-form .wrapper.checkbox-wrapper-29 .question__label.checkbox > span.ms-2 {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: calc(100% - 30px) !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto;
    line-height: 1.5;
}

/* Datenschutz-Link Styling */
.kontaktformular-form .wrapper.checkbox-wrapper-29 .datenschutz-link {
    color: var(--green, #28a745);
    text-decoration: underline;
    cursor: pointer;
}

.kontaktformular-form .wrapper.checkbox-wrapper-29 .datenschutz-link:hover {
    color: var(--green-dark, #1e7e34);
    text-decoration: none;
}

/* Validierungs-Feedback für Checkbox */
.kontaktformular-form .wrapper.checkbox-wrapper-29 .invalid-feedback {
    display: none;
    text-align: left;
    width: 100%;
    margin-top: 0.5rem;
    margin-left: 0;
    padding-left: 0;
}

.kontaktformular-form.was-validated .wrapper.checkbox-wrapper-29 .checkbox__input:invalid ~ .invalid-feedback,
.kontaktformular-form .wrapper.checkbox-wrapper-29 .checkbox__input.is-invalid ~ .invalid-feedback {
    display: block;
}

/* Checkbox Validierungsrahmen */
.kontaktformular-form.was-validated .wrapper.checkbox-wrapper-29 .checkbox__input:invalid,
.kontaktformular-form .wrapper.checkbox-wrapper-29 .checkbox__input.is-invalid {
    outline: 2px solid #dc3545;
    outline-offset: 2px;
}

/* Datenschutz Checkbox Responsive */
@media (max-width: 575.98px) {
    /* Checkbox und Text bleiben nebeneinander */
    .kontaktformular-form .wrapper.checkbox-wrapper-29 .question__label.checkbox {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        width: 100% !important;
    }

    /* Die echte Checkbox sichtbar und korrekt positioniert */
    .kontaktformular-form .wrapper.checkbox-wrapper-29 .checkbox__input {
        flex-shrink: 0 !important;
        margin-top: 2px;
    }

    /* Text neben der Checkbox - bricht innerhalb des Textbereichs um */
    .kontaktformular-form .wrapper.checkbox-wrapper-29 .question__label.checkbox > span.ms-2 {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        max-width: calc(100% - 28px) !important;
        font-size: 0.875rem !important;
        line-height: 1.4 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

    .kontaktformular-form .wrapper.checkbox-wrapper-29 .invalid-feedback {
        margin-left: 28px;
    }
}

/* ==========================================================================
   File Upload
   ========================================================================== */

.kontaktformular-form input[type="file"].form-control {
    padding: 0.5rem;
}

.kontaktformular-form input[type="file"].form-control::file-selector-button {
    padding: 0.5rem 1rem;
    margin-right: 1rem;
    border: 0;
    background: #e9ecef;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.kontaktformular-form input[type="file"].form-control::file-selector-button:hover {
    background: #dde0e3;
}

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

.kontaktformular-form .btn-primary,
.kontaktformular-form .btnContact,
.kontaktformular-form .btnkontakt {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #fff;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.kontaktformular-form .btn-primary:hover,
.kontaktformular-form .btnContact:hover,
.kontaktformular-form .btnkontakt:hover {
    background-color: #bb2d3b;
    border-color: #b02a37;
}

.kontaktformular-form .btn-primary:focus,
.kontaktformular-form .btnContact:focus,
.kontaktformular-form .btnkontakt:focus {
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5);
}

.kontaktformular-form .btn-loading {
    display: none;
}

.kontaktformular-form .btn-primary.loading .btn-text {
    display: none;
}

.kontaktformular-form .btn-primary.loading .btn-loading {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* ==========================================================================
   Loading Bar
   ========================================================================== */

.kontaktformular-form .loading-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #e9ecef;
    z-index: 10;
}

.kontaktformular-form .loading-bar .progress {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #dc3545, #fd7e14);
    animation: loading-progress 2s ease-in-out infinite;
}

@keyframes loading-progress {
    0% {
        width: 0;
    }
    50% {
        width: 70%;
    }
    100% {
        width: 100%;
    }
}

/* ==========================================================================
   Form Feedback (Success/Error)
   ========================================================================== */

.kontaktformular-form .form-feedback {
    padding: 1rem;
    border-radius: 0;
    margin-bottom: 1rem;
}

.kontaktformular-form .form-feedback.success {
    background-color: #d1e7dd;
    border: 1px solid #badbcc;
    color: #0f5132;
}

.kontaktformular-form .form-feedback.error {
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
    color: #842029;
}

/* ==========================================================================
   Validation States
   ========================================================================== */

.kontaktformular-form .was-validated .form-control:invalid,
.kontaktformular-form .form-control.is-invalid {
    border-color: #dc3545;
}

.kontaktformular-form .was-validated .form-control:invalid:focus,
.kontaktformular-form .form-control.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

.kontaktformular-form .was-validated .form-control:valid,
.kontaktformular-form .form-control.is-valid {
    border-color: #198754;
}

/* Textarea: Validierungs-Icons (Häkchen/X) entfernen, da sie im Textfeld stören */
.kontaktformular-form textarea.form-control.is-valid,
.kontaktformular-form textarea.form-control.is-invalid,
.kontaktformular-form .was-validated textarea.form-control:valid,
.kontaktformular-form .was-validated textarea.form-control:invalid {
    background-image: none !important;
    background-position: initial !important;
    padding-right: 1rem !important;
}

/* Textarea Placeholder - Position stabil halten */
.kontaktformular-form textarea.form-control::placeholder {
    position: static;
    transform: none;
}

.kontaktformular-form .invalid-feedback {
    display: none;
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.kontaktformular-form .was-validated :invalid ~ .invalid-feedback,
.kontaktformular-form .is-invalid ~ .invalid-feedback {
    display: block;
}

/* ==========================================================================
   Honeypot (Hidden from real users)
   ========================================================================== */

.kontaktformular-form [name="firstname"] {
    position: absolute !important;
    left: -9999px !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* ==========================================================================
   reCAPTCHA
   ========================================================================== */

.kontaktformular-form .recaptcha-container {
    margin: 1rem 0;
}

.kontaktformular-form .recaptcha-container small {
    color: #6c757d;
    font-size: 0.8rem;
}

/* ==========================================================================
   Form Hint Text
   ========================================================================== */

.kontaktformular-form .form-text {
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

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

@media (max-width: 767.98px) {
    .kontaktformular-container {
        padding: 0;
    }

    .kontaktformular-form .btn-primary,
    .kontaktformular-form .btnContact,
    .kontaktformular-form .btnkontakt {
        width: 100%;
    }
}

/* ==========================================================================
   Country Select (Land)
   ========================================================================== */

.kontaktformular-form select.form-select[name*="land"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
    appearance: none;
}

/* ==========================================================================
   Address Fields Row
   ========================================================================== */

.kontaktformular-form .address-row {
    display: flex;
    gap: 1rem;
}

.kontaktformular-form .address-row .plz-field {
    flex: 0 0 120px;
}

.kontaktformular-form .address-row .ort-field {
    flex: 1;
}

@media (max-width: 575.98px) {
    .kontaktformular-form .address-row {
        flex-direction: column;
        gap: 0;
    }

    .kontaktformular-form .address-row .plz-field {
        flex: 1;
    }
}

/* ==========================================================================
   Custom Layout - 2-Spalten Responsive
   ========================================================================== */

/* Basis-Styles für Custom-Layout Spalten */
.kontaktformular-form.layout-custom .row {
    display: flex;
    flex-wrap: wrap;
}

/* Gleiche Höhe für beide Spalten (nur Desktop) */
@media (min-width: 768px) {
    .kontaktformular-form.layout-custom .row > [class*="col-md-"] {
        display: flex;
        flex-direction: column;
    }

    /* Nachricht-Textarea soll in der rechten Spalte die volle Höhe nutzen */
    .kontaktformular-form.layout-custom .row > [class*="col-md-"]:last-child .form-group:has(textarea) {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .kontaktformular-form.layout-custom .row > [class*="col-md-"]:last-child textarea.form-control {
        flex: 1;
        min-height: 100%;
    }
}

/* Mobile: Spalten stapeln */
@media (max-width: 767.98px) {
    .kontaktformular-form.layout-custom .row > [class*="col-"] {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Abstand zwischen gestapelten Spalten */
    .kontaktformular-form.layout-custom .row > [class*="col-"]:not(:last-child) {
        margin-bottom: 0;
    }
}

/* ==========================================================================
   Spalten-Layout Varianten (für alle Layouts)
   ========================================================================== */

/* Standard 2-Spalten 50/50 */
.kontaktformular-form .col-md-6 {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

/* 33/66 Layout */
.kontaktformular-form .col-md-4 {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

.kontaktformular-form .col-md-8 {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

/* 40/60 Layout (col-5/col-7) */
.kontaktformular-form .col-md-5 {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

.kontaktformular-form .col-md-7 {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

/* Tablet-Anpassungen */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Bei kleineren Tablets etwas mehr Abstand */
    .kontaktformular-form .row > [class*="col-md-"] {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
}

/* ==========================================================================
   Layout-spezifische Styles
   ========================================================================== */

/* Minimal Layout - zentriert */
.kontaktformular-form.layout-minimal {
    max-width: 600px;
    margin: 0 auto;
}

/* Compact Layout - volle Breite aber schmaler */
.kontaktformular-form.layout-compact .formularfelder {
    max-width: 500px;
}

/* Application Layout - Dateiupload hervorheben */
.kontaktformular-form.layout-application input[type="file"].form-control {
    background-color: #f8f9fa;
    border-style: dashed;
    padding: 1rem;
}

.kontaktformular-form.layout-application input[type="file"].form-control:hover {
    background-color: #e9ecef;
    border-color: #0d6efd;
}

/* ==========================================================================
   Label-Position Varianten
   ========================================================================== */

/* Floating Labels */
.kontaktformular-form.label-floating .form-group {
    position: relative;
}

.kontaktformular-form.label-floating .form-label {
    position: absolute;
    top: 0.75rem;
    left: 1rem;
    padding: 0 0.25rem;
    background: transparent;
    transition: all 0.2s ease;
    pointer-events: none;
    color: #6c757d;
    z-index: 1;
}

.kontaktformular-form.label-floating .form-control:focus ~ .form-label,
.kontaktformular-form.label-floating .form-control:not(:placeholder-shown) ~ .form-label {
    top: -0.5rem;
    left: 0.75rem;
    font-size: 0.75rem;
    background: #fff;
    color: #0d6efd;
}

/* Placeholder-only (no labels) */
.kontaktformular-form.label-placeholder .form-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Input Style Varianten (Border-Radius)
   ========================================================================== */

/* Square (Standard - 0px) */
.kontaktformular-form.input-square .form-control,
.kontaktformular-form.input-square .form-select,
.kontaktformular-form.input-square .btn,
.kontaktformular-form.input-square input[type="submit"] {
    border-radius: 0;
}

/* Rounded Small (4px) */
.kontaktformular-form.input-rounded-sm .form-control,
.kontaktformular-form.input-rounded-sm .form-select {
    border-radius: 0.25rem;
}

.kontaktformular-form.input-rounded-sm .btn,
.kontaktformular-form.input-rounded-sm input[type="submit"] {
    border-radius: 0.25rem;
}

/* Rounded (8px) */
.kontaktformular-form.input-rounded .form-control,
.kontaktformular-form.input-rounded .form-select {
    border-radius: 0.5rem;
}

.kontaktformular-form.input-rounded .btn,
.kontaktformular-form.input-rounded input[type="submit"] {
    border-radius: 0.5rem;
}

/* Rounded Large (16px) */
.kontaktformular-form.input-rounded-lg .form-control,
.kontaktformular-form.input-rounded-lg .form-select {
    border-radius: 1rem;
}

.kontaktformular-form.input-rounded-lg .btn,
.kontaktformular-form.input-rounded-lg input[type="submit"] {
    border-radius: 1rem;
}

/* Rounded Pill (voll abgerundet) */
.kontaktformular-form.input-rounded-pill .form-control,
.kontaktformular-form.input-rounded-pill .form-select {
    border-radius: 50rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.kontaktformular-form.input-rounded-pill .btn,
.kontaktformular-form.input-rounded-pill input[type="submit"] {
    border-radius: 50rem;
}

.kontaktformular-form.input-rounded-pill textarea.form-control {
    border-radius: 1rem;
}

/* ==========================================================================
   Input Size Varianten
   ========================================================================== */

/* Small */
.kontaktformular-form.size-sm .form-control,
.kontaktformular-form.size-sm .form-select {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.kontaktformular-form.size-sm .btn,
.kontaktformular-form.size-sm input[type="submit"] {
    padding: 0.5rem 1.5rem;
    font-size: 0.875rem;
}

/* Large */
.kontaktformular-form.size-lg .form-control,
.kontaktformular-form.size-lg .form-select {
    padding: 1rem 1.25rem;
    font-size: 1.125rem;
}

.kontaktformular-form.size-lg .btn,
.kontaktformular-form.size-lg input[type="submit"] {
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
}

/* ==========================================================================
   Checkbox Style Varianten
   ========================================================================== */

/* Bootstrap Standard Checkbox */
.kontaktformular-form.checkbox-bootstrap .checkbox-wrapper-29 .checkbox__input {
    appearance: auto;
    -webkit-appearance: checkbox;
    width: 1.25em;
    height: 1.25em;
    border: 1px solid #ced4da;
    background-color: #fff;
    cursor: pointer;
}

.kontaktformular-form.checkbox-bootstrap .checkbox-wrapper-29 .checkbox__label {
    display: none;
}

/* Square Check Style */
.kontaktformular-form.checkbox-square-check .checkbox-wrapper-29 .checkbox__input {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid #ced4da;
    border-radius: 0;
    background-color: #fff;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.kontaktformular-form.checkbox-square-check .checkbox-wrapper-29 .checkbox__input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.kontaktformular-form.checkbox-square-check .checkbox-wrapper-29 .checkbox__input:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.kontaktformular-form.checkbox-square-check .checkbox-wrapper-29 .checkbox__label {
    display: none;
}

/* Round Dot Style */
.kontaktformular-form.checkbox-round-dot .checkbox-wrapper-29 .checkbox__input {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid #ced4da;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.kontaktformular-form.checkbox-round-dot .checkbox-wrapper-29 .checkbox__input:checked {
    border-color: #0d6efd;
}

.kontaktformular-form.checkbox-round-dot .checkbox-wrapper-29 .checkbox__input:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: #0d6efd;
    border-radius: 50%;
}

.kontaktformular-form.checkbox-round-dot .checkbox-wrapper-29 .checkbox__label {
    display: none;
}

/* Modern Animated Style */
.kontaktformular-form.checkbox-modern .checkbox-wrapper-29 .checkbox__input {
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid #ced4da;
    border-radius: 6px;
    background-color: #fff;
    cursor: pointer;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.kontaktformular-form.checkbox-modern .checkbox-wrapper-29 .checkbox__input:hover {
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.kontaktformular-form.checkbox-modern .checkbox-wrapper-29 .checkbox__input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
    animation: checkbox-pop 0.3s ease;
}

.kontaktformular-form.checkbox-modern .checkbox-wrapper-29 .checkbox__input:checked::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 11px;
    border: solid white;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
    animation: checkmark-draw 0.2s ease 0.1s both;
}

.kontaktformular-form.checkbox-modern .checkbox-wrapper-29 .checkbox__label {
    display: none;
}

@keyframes checkbox-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes checkmark-draw {
    0% { opacity: 0; transform: rotate(45deg) scale(0); }
    100% { opacity: 1; transform: rotate(45deg) scale(1); }
}

/* Toggle Switch Style */
.kontaktformular-form.checkbox-switch .checkbox-wrapper-29 {
    display: flex;
    align-items: flex-start;
}

.kontaktformular-form.checkbox-switch .checkbox-wrapper-29 .checkbox {
    flex-direction: row;
    align-items: center;
}

.kontaktformular-form.checkbox-switch .checkbox-wrapper-29 .checkbox__input {
    appearance: none;
    -webkit-appearance: none;
    width: 50px;
    height: 26px;
    border: none;
    border-radius: 13px;
    background-color: #ced4da;
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
}

.kontaktformular-form.checkbox-switch .checkbox-wrapper-29 .checkbox__input::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.kontaktformular-form.checkbox-switch .checkbox-wrapper-29 .checkbox__input:checked {
    background-color: #0d6efd;
}

.kontaktformular-form.checkbox-switch .checkbox-wrapper-29 .checkbox__input:checked::before {
    transform: translateX(24px);
}

.kontaktformular-form.checkbox-switch .checkbox-wrapper-29 .checkbox__label {
    display: none;
}

/* Pseudo Checkbox Style (Haken-Icon) */
/* Versteckt das ::before des question__label */
.kontaktformular-form.checkbox-pseudo .checkbox-wrapper-29 .question__label::before {
    display: none !important;
    content: '' !important;
}

/* Versteckt die echte Checkbox komplett */
.kontaktformular-form.checkbox-pseudo .checkbox-wrapper-29 .checkbox__input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    pointer-events: none;
}

/* Versteckt auch das hidden input falls vorhanden */
.kontaktformular-form.checkbox-pseudo .checkbox-wrapper-29 input[type="hidden"] {
    display: none;
}

.kontaktformular-form.checkbox-pseudo .checkbox-wrapper-29 .checkbox,
.kontaktformular-form.checkbox-pseudo .checkbox-wrapper-29 .question__label.checkbox {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    gap: 0;
}

/* Das Pseudo-Element (checkbox__label span) als sichtbare Checkbox */
.kontaktformular-form.checkbox-pseudo .checkbox-wrapper-29 .checkbox__label {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    border: 2px solid #ced4da;
    border-radius: 4px;
    background-color: #fff;
    transition: all 0.2s ease;
    cursor: pointer;
    order: -1;
    margin-right: 0.5rem;
}

.kontaktformular-form.checkbox-pseudo .checkbox-wrapper-29 .checkbox__label::before {
    content: '' !important;
    display: none !important;
}

.kontaktformular-form.checkbox-pseudo .checkbox-wrapper-29 .checkbox__label::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome';
    font-weight: 900;
    font-size: 14px;
    color: transparent;
    transition: color 0.2s ease;
}

.kontaktformular-form.checkbox-pseudo .checkbox-wrapper-29 .checkbox:hover .checkbox__label,
.kontaktformular-form.checkbox-pseudo .checkbox-wrapper-29 .question__label.checkbox:hover .checkbox__label {
    border-color: var(--green, #28a745);
}

/* Checked state - nutzt :has() für den parent selector */
.kontaktformular-form.checkbox-pseudo .checkbox-wrapper-29 .checkbox:has(.checkbox__input:checked) .checkbox__label,
.kontaktformular-form.checkbox-pseudo .checkbox-wrapper-29 .question__label.checkbox:has(.checkbox__input:checked) .checkbox__label {
    background-color: var(--green, #28a745);
    border-color: var(--green, #28a745);
}

.kontaktformular-form.checkbox-pseudo .checkbox-wrapper-29 .checkbox:has(.checkbox__input:checked) .checkbox__label::after,
.kontaktformular-form.checkbox-pseudo .checkbox-wrapper-29 .question__label.checkbox:has(.checkbox__input:checked) .checkbox__label::after {
    color: #fff;
}

/* Fallback mit ~ sibling selector */
.kontaktformular-form.checkbox-pseudo .checkbox-wrapper-29 .checkbox__input:checked ~ .checkbox__label {
    background-color: var(--green, #28a745);
    border-color: var(--green, #28a745);
}

.kontaktformular-form.checkbox-pseudo .checkbox-wrapper-29 .checkbox__input:checked ~ .checkbox__label::after {
    color: #fff;
}

.kontaktformular-form.checkbox-pseudo .checkbox-wrapper-29 .checkbox__input:focus ~ .checkbox__label {
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.25);
}

/* Pseudo Checkbox - Validierung */
.kontaktformular-form.checkbox-pseudo .checkbox-wrapper-29 .checkbox:has(.checkbox__input.is-invalid) .checkbox__label,
.kontaktformular-form.checkbox-pseudo .checkbox-wrapper-29 .checkbox__input.is-invalid ~ .checkbox__label,
.kontaktformular-form.checkbox-pseudo.was-validated .checkbox-wrapper-29 .checkbox:has(.checkbox__input:invalid) .checkbox__label,
.kontaktformular-form.checkbox-pseudo.was-validated .checkbox-wrapper-29 .checkbox__input:invalid ~ .checkbox__label {
    border-color: #dc3545 !important;
}

.kontaktformular-form.checkbox-pseudo .checkbox-wrapper-29 .checkbox:has(.checkbox__input.is-valid) .checkbox__label,
.kontaktformular-form.checkbox-pseudo .checkbox-wrapper-29 .checkbox__input.is-valid ~ .checkbox__label,
.kontaktformular-form.checkbox-pseudo.was-validated .checkbox-wrapper-29 .checkbox:has(.checkbox__input:valid) .checkbox__label,
.kontaktformular-form.checkbox-pseudo.was-validated .checkbox-wrapper-29 .checkbox__input:valid ~ .checkbox__label {
    border-color: var(--green, #28a745) !important;
}

/* ==========================================================================
   Pseudo Round Checkbox Style (Runder Kreis mit Haken)
   ========================================================================== */

/* Versteckt das ::before des question__label */
.kontaktformular-form.checkbox-pseudo-round .checkbox-wrapper-29 .question__label::before {
    display: none !important;
    content: '' !important;
}

/* Versteckt die echte Checkbox komplett */
.kontaktformular-form.checkbox-pseudo-round .checkbox-wrapper-29 .checkbox__input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    pointer-events: none;
}

.kontaktformular-form.checkbox-pseudo-round .checkbox-wrapper-29 input[type="hidden"] {
    display: none;
}

.kontaktformular-form.checkbox-pseudo-round .checkbox-wrapper-29 .checkbox,
.kontaktformular-form.checkbox-pseudo-round .checkbox-wrapper-29 .question__label.checkbox {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    gap: 0;
}

/* Das Pseudo-Element als runder Kreis */
.kontaktformular-form.checkbox-pseudo-round .checkbox-wrapper-29 .checkbox__label {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    border: 2px solid #ced4da;
    border-radius: 50%;
    background-color: #fff;
    transition: all 0.2s ease;
    cursor: pointer;
    order: -1;
    margin-right: 0.5rem;
}

.kontaktformular-form.checkbox-pseudo-round .checkbox-wrapper-29 .checkbox__label::before {
    content: '' !important;
    display: none !important;
}

.kontaktformular-form.checkbox-pseudo-round .checkbox-wrapper-29 .checkbox__label::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome';
    font-weight: 900;
    font-size: 13px;
    color: transparent;
    transition: color 0.2s ease, transform 0.2s ease;
}

.kontaktformular-form.checkbox-pseudo-round .checkbox-wrapper-29 .checkbox:hover .checkbox__label,
.kontaktformular-form.checkbox-pseudo-round .checkbox-wrapper-29 .question__label.checkbox:hover .checkbox__label {
    border-color: var(--green, #28a745);
}

/* Checked state - nutzt :has() für den parent selector */
.kontaktformular-form.checkbox-pseudo-round .checkbox-wrapper-29 .checkbox:has(.checkbox__input:checked) .checkbox__label,
.kontaktformular-form.checkbox-pseudo-round .checkbox-wrapper-29 .question__label.checkbox:has(.checkbox__input:checked) .checkbox__label {
    background-color: var(--green, #28a745);
    border-color: var(--green, #28a745);
}

.kontaktformular-form.checkbox-pseudo-round .checkbox-wrapper-29 .checkbox:has(.checkbox__input:checked) .checkbox__label::after,
.kontaktformular-form.checkbox-pseudo-round .checkbox-wrapper-29 .question__label.checkbox:has(.checkbox__input:checked) .checkbox__label::after {
    color: #fff;
    transform: scale(1.1);
}

/* Fallback mit ~ sibling selector */
.kontaktformular-form.checkbox-pseudo-round .checkbox-wrapper-29 .checkbox__input:checked ~ .checkbox__label {
    background-color: var(--green, #28a745);
    border-color: var(--green, #28a745);
}

.kontaktformular-form.checkbox-pseudo-round .checkbox-wrapper-29 .checkbox__input:checked ~ .checkbox__label::after {
    color: #fff;
    transform: scale(1.1);
}

.kontaktformular-form.checkbox-pseudo-round .checkbox-wrapper-29 .checkbox__input:focus ~ .checkbox__label {
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.25);
}

/* Pseudo Round Checkbox - Validierung */
.kontaktformular-form.checkbox-pseudo-round .checkbox-wrapper-29 .checkbox:has(.checkbox__input.is-invalid) .checkbox__label,
.kontaktformular-form.checkbox-pseudo-round .checkbox-wrapper-29 .checkbox__input.is-invalid ~ .checkbox__label,
.kontaktformular-form.checkbox-pseudo-round.was-validated .checkbox-wrapper-29 .checkbox:has(.checkbox__input:invalid) .checkbox__label,
.kontaktformular-form.checkbox-pseudo-round.was-validated .checkbox-wrapper-29 .checkbox__input:invalid ~ .checkbox__label {
    border-color: #dc3545 !important;
}

.kontaktformular-form.checkbox-pseudo-round .checkbox-wrapper-29 .checkbox:has(.checkbox__input.is-valid) .checkbox__label,
.kontaktformular-form.checkbox-pseudo-round .checkbox-wrapper-29 .checkbox__input.is-valid ~ .checkbox__label,
.kontaktformular-form.checkbox-pseudo-round.was-validated .checkbox-wrapper-29 .checkbox:has(.checkbox__input:valid) .checkbox__label,
.kontaktformular-form.checkbox-pseudo-round.was-validated .checkbox-wrapper-29 .checkbox__input:valid ~ .checkbox__label {
    border-color: var(--green, #28a745) !important;
}

/* ==========================================================================
   Pseudo Checkbox Responsive (alle Varianten)
   ========================================================================== */

@media (max-width: 575.98px) {
    /* Pseudo Checkbox - Mobile */
    .kontaktformular-form.checkbox-pseudo .checkbox-wrapper-29 .checkbox,
    .kontaktformular-form.checkbox-pseudo .checkbox-wrapper-29 .question__label.checkbox,
    .kontaktformular-form.checkbox-pseudo-round .checkbox-wrapper-29 .checkbox,
    .kontaktformular-form.checkbox-pseudo-round .checkbox-wrapper-29 .question__label.checkbox {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
    }

    /* Pseudo Checkbox Label kleiner auf Mobile */
    .kontaktformular-form.checkbox-pseudo .checkbox-wrapper-29 .checkbox__label,
    .kontaktformular-form.checkbox-pseudo-round .checkbox-wrapper-29 .checkbox__label {
        width: 22px;
        height: 22px;
        min-width: 22px;
        flex-shrink: 0;
    }

    .kontaktformular-form.checkbox-pseudo .checkbox-wrapper-29 .checkbox__label::after,
    .kontaktformular-form.checkbox-pseudo-round .checkbox-wrapper-29 .checkbox__label::after {
        font-size: 11px;
    }

    /* Text neben der Pseudo-Checkbox */
    .kontaktformular-form.checkbox-pseudo .checkbox-wrapper-29 .question__label.checkbox > span.ms-2,
    .kontaktformular-form.checkbox-pseudo-round .checkbox-wrapper-29 .question__label.checkbox > span.ms-2 {
        flex: 1;
        min-width: 0;
        font-size: 0.875rem;
        line-height: 1.4;
    }
}

/* ==========================================================================
   Submit Modal Overlay
   ========================================================================== */

.submit-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 999999;
    display: flex !important;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.submit-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.submit-modal-content {
    background: #fff;
    border-radius: 1rem;
    padding: 2.5rem 3rem;
    text-align: center;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
    max-width: 90%;
    width: 400px;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.submit-modal-overlay.active .submit-modal-content {
    transform: scale(1);
}

.submit-modal-spinner {
    margin-bottom: 0.5rem;
}

.submit-modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.5rem;
}

.submit-modal-text {
    font-size: 0.95rem;
    color: #6c757d;
}

/* Animation for spinner */
.submit-modal-overlay .spinner-border {
    animation: spinner-border 0.75s linear infinite;
}

@keyframes modal-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.submit-modal-overlay.active .submit-modal-text {
    animation: modal-pulse 2s ease-in-out infinite;
}

/* Success state */
.submit-modal-overlay.success .submit-modal-spinner .spinner-border {
    display: none;
}

.submit-modal-overlay.success .submit-modal-spinner::after {
    content: '\2713';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: #198754;
    color: white;
    font-size: 2rem;
    font-weight: bold;
    animation: success-pop 0.3s ease-out;
    margin: 0 auto;
}

@keyframes success-pop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.submit-modal-overlay.success .submit-modal-title {
    color: #198754;
}

.submit-modal-overlay.success .submit-modal-text {
    animation: none;
}

/* Mobile adjustments */
@media (max-width: 576px) {
    .submit-modal-content {
        padding: 2rem 1.5rem;
        width: 320px;
    }

    .submit-modal-title {
        font-size: 1.1rem;
    }

    .submit-modal-text {
        font-size: 0.9rem;
    }
}

/* ==========================================================================
   Button Style Varianten
   ========================================================================== */

/* Default (Rot) - bereits definiert oben */

/* Primary (Blau) */
.kontaktformular-form.btn-style-primary .btnContact,
.kontaktformular-form.btn-style-primary .btnkontakt,
.kontaktformular-form.btn-style-primary input[type="submit"] {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}

.kontaktformular-form.btn-style-primary .btnContact:hover,
.kontaktformular-form.btn-style-primary .btnkontakt:hover,
.kontaktformular-form.btn-style-primary input[type="submit"]:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

.kontaktformular-form.btn-style-primary .btnContact:focus,
.kontaktformular-form.btn-style-primary .btnkontakt:focus,
.kontaktformular-form.btn-style-primary input[type="submit"]:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
}

/* Success (Grün) */
.kontaktformular-form.btn-style-success .btnContact,
.kontaktformular-form.btn-style-success .btnkontakt,
.kontaktformular-form.btn-style-success input[type="submit"] {
    background-color: #198754;
    border-color: #198754;
    color: #fff;
}

.kontaktformular-form.btn-style-success .btnContact:hover,
.kontaktformular-form.btn-style-success .btnkontakt:hover,
.kontaktformular-form.btn-style-success input[type="submit"]:hover {
    background-color: #157347;
    border-color: #146c43;
}

.kontaktformular-form.btn-style-success .btnContact:focus,
.kontaktformular-form.btn-style-success .btnkontakt:focus,
.kontaktformular-form.btn-style-success input[type="submit"]:focus {
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5);
}

/* Dark (Dunkel) */
.kontaktformular-form.btn-style-dark .btnContact,
.kontaktformular-form.btn-style-dark .btnkontakt,
.kontaktformular-form.btn-style-dark input[type="submit"] {
    background-color: #212529;
    border-color: #212529;
    color: #fff;
}

.kontaktformular-form.btn-style-dark .btnContact:hover,
.kontaktformular-form.btn-style-dark .btnkontakt:hover,
.kontaktformular-form.btn-style-dark input[type="submit"]:hover {
    background-color: #1c1f23;
    border-color: #1a1e21;
}

.kontaktformular-form.btn-style-dark .btnContact:focus,
.kontaktformular-form.btn-style-dark .btnkontakt:focus,
.kontaktformular-form.btn-style-dark input[type="submit"]:focus {
    box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5);
}

/* Outline */
.kontaktformular-form.btn-style-outline .btnContact,
.kontaktformular-form.btn-style-outline .btnkontakt,
.kontaktformular-form.btn-style-outline input[type="submit"] {
    background-color: transparent;
    border: 2px solid #212529;
    color: #212529;
}

.kontaktformular-form.btn-style-outline .btnContact:hover,
.kontaktformular-form.btn-style-outline .btnkontakt:hover,
.kontaktformular-form.btn-style-outline input[type="submit"]:hover {
    background-color: #212529;
    border-color: #212529;
    color: #fff;
}

.kontaktformular-form.btn-style-outline .btnContact:focus,
.kontaktformular-form.btn-style-outline .btnkontakt:focus,
.kontaktformular-form.btn-style-outline input[type="submit"]:focus {
    box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5);
}

/* Var Green (Burghardt Grün) - nutzt CSS Variable --green */
.kontaktformular-form.btn-style-var-green .btnContact,
.kontaktformular-form.btn-style-var-green .btnkontakt,
.kontaktformular-form.btn-style-var-green input[type="submit"] {
    background-color: var(--green, #28a745);
    border-color: var(--green, #28a745);
    color: #fff;
}

.kontaktformular-form.btn-style-var-green .btnContact:hover,
.kontaktformular-form.btn-style-var-green .btnkontakt:hover,
.kontaktformular-form.btn-style-var-green input[type="submit"]:hover {
    background-color: var(--green-dark, #218838);
    border-color: var(--green-dark, #218838);
    filter: brightness(0.9);
}

.kontaktformular-form.btn-style-var-green .btnContact:focus,
.kontaktformular-form.btn-style-var-green .btnkontakt:focus,
.kontaktformular-form.btn-style-var-green input[type="submit"]:focus {
    box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.5);
}

/* ==========================================================================
   Button Alignment
   ========================================================================== */

.kontaktformular-form .btn-wrapper {
    display: flex !important;
    width: 100%;
}

.kontaktformular-form .btn-wrapper.btn-align-left {
    justify-content: flex-start !important;
}

.kontaktformular-form .btn-wrapper.btn-align-center {
    justify-content: center !important;
}

.kontaktformular-form .btn-wrapper.btn-align-right {
    justify-content: flex-end !important;
}

/* Button Alignment - auch wenn .form-group dabei ist */
.kontaktformular-form .form-group.btn-wrapper {
    display: flex !important;
    width: 100%;
}

.kontaktformular-form .form-group.btn-wrapper.btn-align-left {
    justify-content: flex-start !important;
}

.kontaktformular-form .form-group.btn-wrapper.btn-align-center {
    justify-content: center !important;
}

.kontaktformular-form .form-group.btn-wrapper.btn-align-right {
    justify-content: flex-end !important;
}

/* ==========================================================================
   Button Icon Styles
   ========================================================================== */

.kontaktformular-form .btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.kontaktformular-form .btn-icon i,
.kontaktformular-form .btn-icon .fa,
.kontaktformular-form .btn-icon .fas,
.kontaktformular-form .btn-icon .far,
.kontaktformular-form .btn-icon .fab {
    font-size: 1em;
}

/* Icon nur (kein Text) */
.kontaktformular-form .btn-icon-only {
    padding: 0.75rem 1rem;
}

.kontaktformular-form .btn-icon-only i,
.kontaktformular-form .btn-icon-only .fa,
.kontaktformular-form .btn-icon-only .fas,
.kontaktformular-form .btn-icon-only .far,
.kontaktformular-form .btn-icon-only .fab {
    font-size: 1.25em;
}

/* ==========================================================================
   Checkbox Validation States
   ========================================================================== */

.kontaktformular-form .checkbox-wrapper-29 .checkbox__input.is-invalid,
.kontaktformular-form.was-validated .checkbox-wrapper-29 .checkbox__input:invalid {
    border-color: #dc3545 !important;
}

.kontaktformular-form .checkbox-wrapper-29 .checkbox__input.is-valid,
.kontaktformular-form.was-validated .checkbox-wrapper-29 .checkbox__input:valid {
    border-color: #198754 !important;
}

/* Switch spezielle Validierung */
.kontaktformular-form.checkbox-switch .checkbox-wrapper-29 .checkbox__input.is-invalid,
.kontaktformular-form.checkbox-switch.was-validated .checkbox-wrapper-29 .checkbox__input:invalid {
    background-color: #f8d7da !important;
}

.kontaktformular-form.checkbox-switch .checkbox-wrapper-29 .checkbox__input.is-valid,
.kontaktformular-form.checkbox-switch.was-validated .checkbox-wrapper-29 .checkbox__input:valid:checked {
    background-color: #198754 !important;
}