/** body {background-color:red;} **/

/* Erhöhte Spezifität durch Verknüpfung mit dem Element-Typ */
label.is-active-success, 
div.is-active-success {
    background-color: #0ab849b0 !important; /* success mit 15% Deckkraft */
    border-color: #22c55e80 !important;     /* success mit 50% Deckkraft */
    box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05) !important;
    transition: all 0.2s ease-in-out !important;
}

/* Individuelle Farbe für alle Checkboxen in der mSection */
.checkbox-info:checked, 
.checkbox-info[checked="true"],
.checkbox-info[aria-checked="true"] {
    background-color: #31e431a1 !important; /* Hier Ihre Wunschfarbe */
    border-color: #35a335 !important;
}



/* 
 * MODAL(s)
 */

.modal-box {
    /* Breiterer, transparenter Border für den Modal-Grundrahmen */
    border: 4px solid oklch(var(--bc) / 0.9) !important;
}

.modal-btn-close {
    position: absolute;
    right: 0.75rem;
    top: 0.75rem;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Korrektur: Grundfarbe Rot (Error) */
    background-color: oklch(var(--er) / 0.1);
    color: oklch(var(--er));
    border: 1px solid oklch(var(--er) / 0.3);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    z-index: 10;
}

.modal-btn-close:hover {
    background-color: oklch(var(--er));
    color: oklch(var(--erc));
    transform: rotate(90deg);
}

.modal-btn-confirm {
    background-color: oklch(var(--su)) !important;
    color: oklch(var(--suc)) !important;
    border: none !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}