/* =============================================
   FANCY-CHECKBOX — Größen korrigiert
============================================= */
.fancy-checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
    user-select: none;
}
.fancy-checkbox > input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.fancy-checkbox__box {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: calc(var(--bs-border-radius) * 0.5);
    background-color: var(--bs-body-bg);
    transition: all 0.15s ease-in-out;
    box-sizing: border-box;
    flex-shrink: 0;
    --haken-farbe: var(--bs-body-color);
}

/* ✅ GRÖSSEN — Eindeutig und ohne Überschreibungen! */
.fancy-checkbox__box--sm { width: 1rem !important;     height: 1rem !important; }      /* 16px */
.fancy-checkbox__box--md { width: 1.25rem !important;  height: 1.25rem !important; }   /* 20px */
.fancy-checkbox__box--lg { width: 1.5rem !important;    height: 1.5rem !important; }     /* 24px */
.fancy-checkbox__box--xl { width: 1.75rem !important;   height: 1.75rem !important; }    /* 28px */

/* Haken */
.fancy-checkbox__box::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%) rotate(45deg);
    display: none;
    width: 32%;
    height: 52%;
    border: solid var(--haken-farbe);
    border-width: 0 2.5px 2.5px 0;

}

/* Angehakt — NUR Haken, keine Farbe ohne data-Angabe! */
.fancy-checkbox.checked .fancy-checkbox__box::after {
    display: block;
}

/* Hover */
.fancy-checkbox:hover .fancy-checkbox__box {
    filter: brightness(95%);
}