body {
    background-color: #f8f9fa;
}

.container-zentral {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.login-card {
    max-width: 500px;
    width: 100%;
}

.navbar-nav .nav-link {
    transition: all 0.2s ease-in-out;
}
.navbar-nav .nav-link:hover {
    text-decoration: underline;
    color: #0d6efd !important;
}

.accordion-button:not(.collapsed) {
    background-color: #e9ecef;
}
.info-box {
    background-color: #d1e7dd;
    border-left: 5px solid #0f5132;
    padding: 1rem;
    margin-bottom: 2rem;
    border-radius: .25rem;
}
.accordion-item.blue .accordion-button {
    background-color: #cfe2ff;
    color: #084298;
}

.accordion-item.orange .accordion-button {
    background-color: #ffe5b4;
    color: #b54708;
}

.accordion-item.gray .accordion-button {
    background-color: #f8f9fa;
    color: #343a40;
}

.accordion-item.yellow .accordion-button {
    background-color: #fff3cd;
    color: #856404;
}

.accordion-item.indigoa .accordion-button {
    background-color: #e0cffc;
    color: #4b0082;
}

.accordion-item.cyan .accordion-button {
    background-color: #cff4fc;
    color: #055160;
}

.accordion-item.red .accordion-button {
    background-color: #f8d7da;
    color: #842029;
}

.accordion-item.green .accordion-button {
    background-color: #d1e7dd;
    color: #0f5132;
}

.accordion-item.teal .accordion-button {
    background-color: #d6f0ff; /* sehr helles Blau statt Grün */
    color: #0b3d91;            /* sattes Blau für guten Kontrast */
}

.accordion-item.pink .accordion-button {
    background-color: #f3d6ff; /* sehr helles Magenta/Lavendel */
    color: #5a007a;            /* dunkles Violett für Kontrast */
}

.indigo {
    background-color: #e0cffc; /* Bootstrap $indigo-100 */
    border: 1px solid #6610f2; /* Bootstrap $indigo */
    color: #2d0353; /* dunkler Text für Lesbarkeit */
    padding: 1rem;
    border-radius: 0.375rem; /* gleich wie .alert */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.indigo strong {
    color: #2d0353;
}

.modal-body h6 {
    font-weight: 600;
    color: #6c757d;
    margin-top: 1.5rem;
}

.alert-error {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

.bg-indigo-subtle {
    background-color: #e0e0ff !important;
    color: #312783 !important;
}

    #session-timer-bar {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1030;
        background: linear-gradient(to right, #0d6efd, #0dcaf0);
        color: #fff;
        text-align: center;
        padding: 6px 0 2px;
        font-size: 0.9rem;
        font-family: 'Segoe UI', sans-serif;
        box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    }

    #session-timer-bar .time-display {
        font-weight: 500;
        font-family: monospace;
        margin-left: 6px;
    }

    #session-timer-progress {
        height: 4px;
        transition: width 1s linear, background-color 1s linear;
        border-radius: 0;
    }

th.sortable {
    cursor: pointer;
    position: relative;
     user-select: none;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE10+/Edge */
}

th.sortable.asc::after {
    content: " ▲";
    font-size: 0.8em;
}
th.sortable.desc::after {
    content: " ▼";
    font-size: 0.8em;
}


.border-start-5 {
    border-left-width: 5px !important;
    border-left-style: solid;
}

.blue {
    border-left-color: #0d6efd;
}
.orange   { border-left-color: #fd7e14; }
.gray     { border-left-color: #6c757d; }
.yellow   { border-left-color: #ffc107; }
.indigoa  { border-left-color: #6610f2; }
.cyan     { border-left-color: #0dcaf0; }
.red      { border-left-color: #dc3545; }
.green    { border-left-color: #198754; }
.teal { border-left-color: #127fbf; }  /* kräftiges Peacock-Blau */
.pink { border-left-color: #b100b1; }  /* kräftiges Magenta */

/* Linker Farbbalken + Innenabstand nur für diese Cards */
.has-left-ribbon { position: relative; }

/* Der farbige Balken selbst (Farbe kommt über .border-*-Klassen aus dem Markup) */
.has-left-ribbon .brand-ribbon {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  border-left-width: 6px !important;   /* etwas kräftiger */
  border-left-style: solid !important;
  border-top-left-radius: var(--bs-card-border-radius);
  border-bottom-left-radius: var(--bs-card-border-radius);
}

/* Extra-Polster links, damit Text/Name nicht am Balken klebt */
.has-left-ribbon .table thead th:first-child,
.has-left-ribbon .table tbody td:first-child {
  padding-left: 1rem;
}

.rating {
    display: inline-flex;
    flex-direction: row-reverse; /* damit ~ die linken Sterne mitfärbt */
    gap: .25rem;
  }
  .rating input {
    position: absolute;
    left: -9999px; /* bleibt focusierbar (per Label) */
  }
  .rating label {
    position: relative;
    width: 1.6rem;
    height: 1.6rem;
    cursor: pointer;
    line-height: 1;
  }
  .rating label .bi-star {
    color: #adb5bd; /* Grundfarbe (leer) */
    font-size: 1.6rem;
  }
  .rating label .bi-star-fill {
    position: absolute;
    inset: 0;
    font-size: 1.6rem;
    color: var(--bs-warning, #f0ad4e); /* gefüllt (Bootstrap Warning) */
    opacity: .12; /* leicht sichtbar, wenn nicht aktiv */
    transition: opacity .15s ease-in-out, transform .05s ease-in-out;
  }
  /* Hover färbt aktuellen + alle "links" davon (durch row-reverse) */
  .rating label:hover .bi-star-fill,
  .rating label:hover ~ label .bi-star-fill {
    opacity: 1;
  }
  /* Checked färbt dauerhaft */
  .rating input:checked ~ label .bi-star-fill {
    opacity: 1;
  }
  /* Tastatur-Fokus sichtbar machen */
  .rating input:focus + label {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
    border-radius: .25rem;
  }


@media print {
    /* Alles ausblenden, was nicht in den Druck soll */
    .btn,
    nav,
    footer,
    .alert,
    #session-timer-bar,
    .no-print {
        display: none !important;
    }

    /* Optional: Seitenränder für saubereren Ausdruck */
    body {
        margin: 0.5cm;
        font-size: 11pt;
        line-height: 1.3;
    }

    /* Optional: Schriftgröße reduzieren */
    body, td, th, dd, dt {
        font-size: 10pt;
    }

    h4 {
        font-size: 14pt;
    }

    h5 {
        font-size: 12pt;
    }

    .card, .row, dl, dt, dd, h5, h4 {
        page-break-inside: avoid;
    }

    .card {
        box-shadow: none !important;
        border: none !important;
    }

    

    /* Zwei-Spalten-Verteilung wie im Web */
    .col-md-6 {
        /* flex: 0 0 50% !important; */
        /* max-width: 50% !important; */
        box-sizing: border-box;
    }

    /* Abstand zwischen Definitionen optional kleiner */
    dt, dd {
        margin-bottom: 0rem;
    }

    /* Zeilenumbruch bei langen Definitionen vermeiden */
    dt {
        white-space: nowrap;
    }

}