/* ========================================================== */
/* Buttons
/* ========================================================== */
/* Allgemeine Button-Basis */
button {
    border: none;
    color: white;
    font-size: 17px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    padding: 12px 28px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Blau */
button.bluebutton {
    background-color: #039ee6;
}
button.bluebutton:hover:not(:disabled) {
    background-color: #027ec0;
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

/* Grün */
button.greenbutton {
    background-color: #28a745;
}
button.greenbutton:hover:not(:disabled) {
    background-color: #1e7e34;
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

/* Rot */
button.redbutton {
    background-color: #dc3545;
}
button.redbutton:hover:not(:disabled) {
    background-color: #a71d2a;
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

/* Disabled State */
button:disabled {
    background-color: #cccccc !important;
    color: #666666 !important;
    cursor: not-allowed;
    box-shadow: none;
}

/* Hidden State (ausgeblendet) */
button.hiddenbutton {
    display: none;
}


/* ========================================================== */
/* Link-Buttons
/* ========================================================== */
/* <a href="#" class="button-link bluebutton">Speichern</a> */
/* <a href="#" class="button-link greenbutton">OK</a> */
/* <a href="#" class="button-link redbutton">Löschen</a> */
/* <a href="#" class="button-link bluebutton disabled">Deaktiviert</a> */
/* <a href="#" class="button-link greenbutton hiddenbutton">Unsichtbar</a> */

/* Basis – identisch zu button */
a.button-link {
    border: none;
    color: white;
    font-size: 17px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    padding: 12px 28px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Blau */
a.button-link.bluebutton {
    background-color: #039ee6;
}
a.button-link.bluebutton:hover:not(.disabled) {
    background-color: #027ec0;
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

/* Grün */
a.button-link.greenbutton {
    background-color: #28a745;
}
a.button-link.greenbutton:hover:not(.disabled) {
    background-color: #1e7e34;
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

/* Rot */
a.button-link.redbutton {
    background-color: red;
}
a.button-link.redbutton:hover:not(.disabled) {
    background-color: #a71d2a;
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

/* Disabled State (für <a> per Klasse!) */
a.button-link.disabled {
    background-color: #cccccc !important;
    color: #666666 !important;
    cursor: not-allowed;
    box-shadow: none;
    pointer-events: none; /* ⬅️ verhindert Klick */
}

/* Hidden State */
a.button-link.hiddenbutton {
    display: none;
}

a.button-link.small {
    padding: 8px;
}




/* Tabellen */

table {
    border-collapse: collapse;        /* Keine doppelten Ränder */
    border: 2px solid var(--color-table-outline);           /* dünner Rahmen um die ganze Tabelle */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* leichter Schatten */
    border-radius: 6px;
    margin: auto;
    padding: 10px;
}

thead {
    background-color: var(--color-table-head-background);
    color: var(--color-table-head-color);
}

tbody tr:nth-child(even) {
    background-color: var(--color-table-rows-alternate-even);   /* gerade Zeilen */
}

tbody tr:nth-child(odd) {
    background-color: var(--color-table-rows-alternate-odd); /* ungerade Zeilen */
}

/* ========================================================== */
/* DIV mit centered-content
/* ========================================================== */

div.centered-items {
    display: flex;
    justify-content: center; /* horizontal */
    align-items: center;     /* vertikal */
}