body {
    max-width: 60rem;
}

input[type=number] {
    /* Pfeile beim Input entfernen */
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

@media print {
    .noprint,
    .noprint * {
        display: none;
        margin: 0 !important;
    }

    #tabellen {
        display: block;
        font-size: small;
        max-width: 50rem;
        margin-left: auto;
        margin-right: auto;
    }

    #tabellen h4 {
        margin: 0, 0, 2rem, 0;
    }
}

li p {
    margin: 0;
}

/* Style for the default (unchecked) state */
.btn-check + .dc-button { /* Selects label immediately after any btn-check */
    border-color: #6c757d; /* Default secondary border */
    color: #161616;      /* Default secondary text */
    background-color: #ffffff; /* White background */
    /* Add any other default styles: font-weight, etc. */
}

/* Style for the hover state (unchecked) */
.btn-check:not(:checked) + .dc-button:hover {
    background-color: #f8f9fa; /* Light grey background on hover */
    color: #161616;
}

/* Style for the checked/active state */
.btn-check:checked + .dc-button {
    background-color: #57a617;
    border-color: #5a6268;
    color: #ffffff;           /* White text when checked */
    box-shadow: none; /* Optional: remove default focus shadow if desired */
    font-weight: bold; /* Example: make text bold when active */
}

/* Style for the hover state (checked) - Optional */
.btn-check:checked + .dc-button:hover {
    background-color: #57a617;
    border-color: #495057;
    color: #ffffff;
}

/* Style for the button-like labels when they get the .disabled class */
label.btn.disabled,
label.btn[disabled] { /* Target both the class and potential attribute */
    opacity: 0.65;          /* Make it look faded */
    pointer-events: none;   /* Prevent clicking */
    /* background-color: #e9ecef; */ /* Optional: Give it a specific disabled background */
    /* border-color: #ced4da;   */ /* Optional: Different border */
    /* color: #6c757d;         */ /* Optional: Change text color */
}

/* Style for focus state (accessibility) - customize as needed */
.btn-check:focus + .dc-button {
    box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5); /* Example: Secondary focus ring */
 }

 .ergebnis-card {
    background-color: #125e8c !important; /* Your desired color! Use !important to override bg-primary */
    /* border-color: #3a5f7f; */ /* Optional: adjust border color too */

    /* Ensure text contrast! If background is light, uncomment below */
    /* color: #212529 !important; */ /* Use !important to override text-white */
}

/* You might need to adjust header/body colors separately if needed */
.ergebnis-card .card-header {
     /* background-color: inherit; */ /* Make header same as card body */
     /* border-bottom-color: rgba(255, 255, 255, 0.3); */ /* Adjust border */
}
.ergebnis-card .card-body {
     /* Styles specific to body if needed */
}
.ergebnis-card h4, .ergebnis-card h5 {
     /* Ensure heading contrast if needed */
     /* color: #ffffff !important; */
}