@import url('open.iconic/font/css/open-iconic-bootstrap.min.css');

:root {
    --blazor-load-percentage: 0%;
    --blazor-load-percentage-text: "0%";
    --very-dark-color: #433257;
    --dark-color: #574071;
    --medium-color: #7f5ea4;
    --light-color: #916abc;
    --very-light-color: #c48fff;
}

.blazor-loading-indicator {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: white;
    z-index: 9999;
}

.progress-bar-container {
    width: 33%;
    height: 20px;
    background: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: var(--blazor-load-percentage);
    background: #5f368d;
    transition: width .1s linear;
}

.loading-text {
    margin-top: 10px;
    font-size: 1.25rem;
    font-weight: 600;
}

.vcontainer {
    display: flex;
    margin-left: 0px;
    padding: 0px;
}

.draggable {
    cursor: grab !important; /* Zeigt an, dass das Element gegriffen werden kann */
}

.draggable:not(.ws-list-item) {
    padding: 0 !important;
    margin: 0 !important;
}

.dragging {
    opacity: 0.5; /* macht das Element halbtransparent */
    border: 2px dashed #00f; /* fügt einen gestrichelten Rahmen hinzu */
    cursor: grabbing !important;
}

.dropzone {
    cursor: default; /* Standard-Cursor für die Drop-Zone */
}

    .dropzone.drag-over {
        cursor: copy; /* Oder ein anderer Cursor, der dir gefällt */
    }

.drag-over {
    background-color: color-mix(in srgb, #B2BEB5 70%, white 30%); /* background-color: #e0f7ff; */
}

.bg-primary-subtle-light {
    background-color: color-mix(in srgb, var(--bs-primary-bg-subtle) 70%, white 30%) !important;
}

.bg-secondary-subtle-light {
    background-color: color-mix(in srgb, var(--bs-secondary letzte-bg-subtle) 70%, white 30%) !important;
}

.save-button-enabled {
    font-weight: bold;
    color: rgb(var(--bs-warning-rgb));
}

.save-button-disabled {
    color: #aaa;
}

.square
{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.debug
{
    background-color: fuchsia;
}

.fg-white
{
    color: white;
}

.b-0
{
    border-width: 0;
}

.m-0
{
    margin: 0;
}

.m-4
{
    margin: 4px;
}

.m-8
{
    margin: 8px;
}

.m-16
{
    margin: 16px;
}

.mt-4
{
    margin-top: 4px;
}

.mb-4
{
    margin-bottom: 4px;
}

.ml-4
{
    margin-left: 4px;
}

.mr-4
{
    margin-right: 8px;
}

.mt-8
{
    margin-top: 8px;
}

.mb-8
{
    margin-bottom: 8px;
}

.ml-8
{
    margin-left: 8px;
}

.mr-8
{
    margin-right: 8px;
}

.mt-16
{
    margin-top: 16px;
}

.mb-16
{
    margin-bottom: 16px;
}

.ml-16
{
    margin-left: 16px;
}

.mr-16
{
    margin-right: 16px;
}

.p-0
{
    padding: 0;
}

.p-t-0 {
    padding-top: 0;
}

.p-r-0 {
    padding-right: 0;
}

.p-b-0 {
    padding-bottom: 0;
}

.p-l-0 {
    padding-left: 0;
}

.p-l-8 {
    padding-left: 8px;
}

.p-r-8 {
    padding-right: 8px;
}

.p-lr-8 {
    padding-left: 8px;
    padding-right: 8px;
}

p-2
{
    padding: 2px;
}

.p-4
{
    padding: 4px;
}

.p-8
{
    padding: 8px;
}

.p-16
{
    padding: 16px;
}

.w-max
{
    width: 100%;
}

.w-4
{
    width: 4px;
}

.w-8
{
    width: 8px;
}

.w-16
{
    width: 16px;
}

.w-24 {
    width: 24px;
}

.w-32
{
    width: 32px;
}

.w-64 {
    width: 64px;
}

.w-128
{
    width: 128px;
}

.w-192 {
    width: 192px;
}

.w-256
{
    width: 256px;
}

.w-384 {
    width: 384px;
}

.h-max
{
    height: 100%;
}

.h-4
{
    height: 4px;
}

.h-8
{
    height: 8px;
}

.h-16
{
    height: 16px;
}

.h-24
{
    height: 24px;
}

.h-32
{
    height: 32px;
}

.h-64
{
    height: 64px;
}

.h-128 {
    height: 128px;
}

.h-192 {
    height: 192px;
}

.h-256 {
    height: 256px;
}

.margin-left2 {
    margin-left: 2px
}

.margin-left4 {
    margin-left: 4px
}

.s-max
{
    width: 100%;
    height: 100%;
}

.v-stack
{
    display: flex;
    flex-direction: column
}

.h-stack
{
    display: flex;
    flex-direction: row
}

.gradebook-selection-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 0;
    min-width: 0;
}

.gradebook-selection-bar > div,
.gradebook-selection-bar .w-256 {
    max-width: 100%;
}

.center
{
    display: flex;
    justify-content: center;
    text-align: center;
}

.left
{
    display: flex;
    justify-content: flex-start;
}

.right {
    display: flex;
    justify-content: flex-end;
}

.middle2 {
    display: flex;
    justify-content: center;
}

.lr-container {
    display: flex;
    justify-content: space-between; /* Teilt den Platz zwischen den beiden Span-Elementen auf */
    width: 100%; /* Optional, um den Container über die gesamte verfügbare Breite zu spannen */
}

.middle
{
    display: flex;
    align-items: center;
}

.bottom
{
    display: flex;
    align-items: flex-end;
}

.bottomcenter
{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
}

.term-badge
{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 16px;
    padding: 2px 12px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-light-bg-subtle);
    white-space: nowrap;
    text-align: center;
    font-size: 0.8125rem;
    line-height: 1.3;
}

.term-badge > .term-badge-caption
{
    font-size: 0.6875rem;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-secondary-color);
}

.term-badge.history
{
    border-color: rgba(var(--bs-primary-rgb), 0.5);
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}

.term-badge.history > .term-badge-caption
{
    font-weight: bold;
    color: rgb(var(--bs-primary-rgb));
}

.top
{
    display: flex;
    align-items: flex-start;
}

.image-center
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.btn-icon
{
    width: 24px;
    height: 24px;
}

.table-container
{
    flex-grow: 1;
    overflow-y: auto;
}

.dialog-container
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
}

.dialog-content
{
    z-index: 1001;
    /*background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);*/
}

html
{
    overflow-y: hidden;
}

html, body, #app
{
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body
{
    margin: 0;
    padding: 0;

}
/*overflow: hidden;*/

.error-content
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.valid.modified:not([type=checkbox])
{
    outline: 1px solid #26b050;
}

.invalid
{
    outline: 1px solid red;
}

.validation-message
{
    color: red;
}

.button-link
{
    text-decoration: unset;
}

.main-content
{
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
}

.grid-container
{
    display: contents;
}

.grid-toolbar-new,
.grid-toolbar-delete,
.grid-toolbar-save,
.grid-toolbar-cancel
{
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    height: 16px;
    width: 16px;
    opacity: 0.7;
}

.grid-modified-cell
{
    background-color: rgba(var(--bs-primary-rgb), 0.15) !important;
}

/* Persönliche Bausteine: 3px linker Streifen in der Akzentfarbe, analog zum
   TextModul-Panel. Box-Shadow inset, damit kein Layout-Shift (border-left würde
   die Zelle um 3px nach rechts schieben). */
.row-personal > td:first-child
{
    box-shadow: inset 3px 0 0 var(--bs-primary);
}

/* Hervorhebung für DataRows, deren Entity gerade von einem anderen Account
   geändert wurde. Dezenter hellblauer Hintergrund + farbiger linker Streifen.
   Das Highlight läuft nach ein paar Sekunden via Service-Sweep aus und die
   Klasse verschwindet; der CSS-Übergang sorgt für ein weiches Ausfaden. */
.grid-recently-changed > td
{
    background-color: rgba(33, 150, 243, 0.18) !important;
    transition: background-color 0.8s ease-out;
}

.grid-recently-changed > td:first-child
{
    box-shadow: inset 4px 0 0 #2196f3;
}

/* Wenn beide Klassen gleichzeitig auf einer Zeile sind: Lila-Streifen ganz links
   (0..3px), direkt daneben der Blau-Streifen (3..7px). Beide Indikatoren sind
   so parallel sichtbar, ohne sich gegenseitig zu überdecken. */
.row-personal.grid-recently-changed > td:first-child
{
    box-shadow: inset 3px 0 0 var(--bs-primary), inset 7px 0 0 #2196f3;
}

.grid-cell-1
{
    background-color: green !important;
}

.grid-cell-2
{
    background-color: yellowgreen !important;
}

.grid-cell-3
{
    background-color: yellow !important;
}

.grid-cell-4
{
    background-color: orange !important;
}

.grid-cell-5
{
    background-color: orangered !important;
}

.grid-cell-6
{
    background-color: red !important;
}

#blazor-error-ui
{
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss
    {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }


.centered-content
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100dvh;
    text-align: center;
}

.top-content
{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100dvh;
    text-align: center;
}

.gridlayout-item
{
    height: 100%;
    padding: 0.5rem;
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .gridlayout-item:before
    {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        opacity: 0.4;
    }

/*.gridlayout-header:before
{
    background-color: var(--bs-red);
}

.gridlayout-content:before
{
    background-color: var(--bs-yellow);
}

.gridlayout-left-side-bar:before
{
    background-color: var(--bs-green);
}

.gridlayout-right-side-bar:before
{
    background-color: var(--bs-info);
}

.gridlayout-footer:before
{
    background-color: var(--bs-blue);
    opacity: 0.5;
}*/

@media (max-width: 575.98px)
{
    .gridlayout-item
    {
        font-size: 0.9em;
    }
}

.menu-icon
{
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    min-height: 1rem;
    background-color: currentColor;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center center;
    -webkit-mask-position: center center;
    mask-size: contain;
    -webkit-mask-size: contain;
    opacity: 0.85;
}

.menu-icon-print
{
    mask-image: url("../images/printer.svg");
    -webkit-mask-image: url("../images/printer.svg");
}

.menu-icon-products
{
    mask-image: url("../images/tools.svg");
    -webkit-mask-image: url("../images/tools.svg");
}

.menu-icon-support
{
    mask-image: url("../images/question.svg");
    -webkit-mask-image: url("../images/question.svg");
}

/* Nachrichten: globale Styles wie Starthilfe und Textbausteine-Panel. */
.chat-panel { position:fixed; top:var(--chat-top, 0px); right:0; bottom:0; width:var(--chat-width, 800px); max-width:100vw; z-index:900; background:var(--bs-body-bg); color:var(--bs-body-color); box-shadow:var(--bs-box-shadow-lg); border-left:1px solid var(--bs-border-color); display:flex; flex-direction:column; font-size:.95rem; }
.chat-panel-header,.chat-thread-header { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.8rem 1rem; border-bottom:1px solid var(--bs-border-color); }
.chat-panel-header { background:var(--bs-tertiary-bg); }
.chat-panel-header > div,.chat-thread-header > div { display:flex; flex-direction:column; }
.chat-panel small,.chat-panel time { font-size:.8rem; color:var(--bs-body-color); }
.chat-panel small { display:block; }
.chat-panel-body { min-height:0; flex:1; display:grid; grid-template-columns:minmax(210px, 34%) minmax(0, 1fr); }
.chat-conversation-list { display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--bs-border-color); background:var(--bs-tertiary-bg); }
.chat-contact-scroll { overflow:auto; min-height:0; }
.chat-contact-scroll h2 { font-size:.8rem; font-weight:600; margin:1rem .85rem .4rem; }
.chat-panel .chat-conversation { display:flex; align-items:center; justify-content:flex-start; gap:.6rem; width:100%; text-align:left; padding:.8rem; border:0; border-radius:0; color:var(--bs-body-color); white-space:normal; }
.chat-panel .chat-conversation:hover,.chat-panel .chat-conversation.active { background:var(--bs-primary-bg-subtle); }
.chat-announcements { font-weight:600; }
.chat-contact-detail { display:flex; flex:1; flex-direction:column; min-width:0; }
.chat-contact-top { display:flex; justify-content:space-between; gap:.3rem; align-items:baseline; }
.chat-contact-top strong { font-weight:600; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
.chat-contact-top time { flex-shrink:0; }
.chat-preview { font-size:.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; min-height:1em; }
.chat-avatar { display:grid; place-items:center; width:2.2rem; height:2.2rem; flex-shrink:0; border-radius:50%; font-weight:600; font-size:.8rem; color:var(--bs-body-color); }
.chat-avatar-0 { background:var(--bs-primary-bg-subtle); }.chat-avatar-1 { background:var(--bs-success-bg-subtle); }.chat-avatar-2 { background:var(--bs-warning-bg-subtle); }.chat-avatar-3 { background:var(--bs-info-bg-subtle); }.chat-avatar-4 { background:var(--bs-danger-bg-subtle); }
.chat-list-badge { flex-shrink:0; margin-left:auto; border-radius:var(--bs-border-radius-pill); padding:.1rem .4rem; min-width:1.4rem; text-align:center; background:var(--bs-primary); color:var(--bs-white); font-size:.8rem; }
.chat-search { padding:.7rem .8rem; }.chat-search input { width:100%; padding:.5rem; border:1px solid var(--bs-border-color); border-radius:var(--bs-border-radius); background:var(--bs-body-bg); color:var(--bs-body-color); }
.chat-thread { min-height:0; min-width:0; display:flex; flex-direction:column; }
.chat-encryption-notice { display:flex; align-items:flex-start; gap:.6rem; flex-shrink:0; margin:.75rem 1rem 0; padding:.65rem .8rem; border:1px solid var(--bs-success-border-subtle); border-radius:var(--bs-border-radius); background:var(--bs-success-bg-subtle); color:var(--bs-success-text-emphasis); font-size:.85rem; }
.chat-encryption-notice p { margin:0; }
.chat-messages { overflow:auto; overflow-anchor:none; flex:1; min-height:0; display:flex; flex-direction:column; gap:.65rem; padding:1rem; scroll-behavior:auto; }
.chat-day-separator,.chat-unread-separator { align-self:center; padding:.25rem .7rem; border-radius:var(--bs-border-radius-pill); background:var(--bs-tertiary-bg); font-size:.8rem; }
.chat-unread-separator { color:var(--bs-primary-text-emphasis); background:var(--bs-primary-bg-subtle); width:100%; text-align:center; }
.chat-message { flex-shrink:0; max-width:90%; padding:.6rem .8rem .2rem; border-radius:var(--bs-border-radius-lg); overflow-wrap:anywhere; }
.chat-message.own { align-self:flex-end; background:var(--bs-primary-bg-subtle); }.chat-message.foreign { align-self:flex-start; background:var(--bs-tertiary-bg); }
.chat-message.chat-broadcast { max-width:100%; border:1px solid var(--bs-primary-border-subtle); background:var(--bs-primary-bg-subtle); }
.chat-message-meta,.chat-message-footer { display:flex; align-items:center; gap:.5rem; }.chat-message-footer { justify-content:flex-end; }
.chat-message-footer .dxbl-btn { font-size:.8rem; min-height:1.5rem; }
.chat-markdown > :last-child { margin-bottom:0; }.chat-markdown pre,.chat-markdown code { white-space:pre-wrap; overflow-wrap:anywhere; }
.chat-image { display:block; max-width:100%; max-height:280px; width:auto; height:auto; object-fit:contain; border-radius:var(--bs-border-radius); }
.chat-panel .chat-image-button { padding:0; min-height:0; }.chat-image-placeholder { min-height:8rem; padding:1.5rem; background:var(--bs-secondary-bg); border-radius:var(--bs-border-radius); }
.chat-file { display:flex; gap:.6rem; align-items:center; padding:.5rem 0; }.chat-file strong { overflow-wrap:anywhere; }
.chat-error { padding:.65rem; color:var(--bs-danger-text-emphasis); background:var(--bs-danger-bg-subtle); font-size:.9rem; }.chat-error .dxbl-btn { margin-left:.5rem; }
.chat-composer { flex-shrink:0; padding:.7rem; border-top:1px solid var(--bs-border-color); background:var(--bs-body-bg); }
.chat-composer-input { max-height:min(160px, 22dvh); overflow:auto; }.chat-composer-input textarea { padding:.6rem!important; min-height:3rem; }
.chat-composer-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:.4rem; margin-top:.5rem; }.chat-counter { margin-right:auto; font-size:.8rem; }.chat-counter.over-limit { color:var(--bs-danger-text-emphasis); }
.chat-panel .chat-keyboard-hint { display:none; text-align:right; margin-top:.2rem; }.chat-panel.chat-hardware-keyboard .chat-keyboard-hint { display:block; }
.chat-reply-reference,.chat-broadcast-warning { border-left:3px solid var(--bs-primary); background:var(--bs-primary-bg-subtle); padding:.4rem .6rem; margin:0 0 .5rem; font-size:.85rem; }.chat-reply-reference .dxbl-btn { float:right; }
.chat-pending { display:flex; align-items:center; gap:.7rem; padding:.5rem; margin-bottom:.4rem; background:var(--bs-tertiary-bg); border-radius:var(--bs-border-radius); }.chat-pending img { max-width:80px; max-height:65px; object-fit:contain; }.chat-pending > span { flex:1; min-width:0; overflow-wrap:anywhere; }
.chat-start { margin:auto; padding:1.5rem; max-width:30rem; color:var(--bs-body-color); }.chat-start h2 { font-size:1.15rem; }.chat-start p { font-size:.9rem; }.chat-start > .chat-icon { width:2.5rem; height:2.5rem; margin-bottom:1rem; }
.chat-skeleton { display:flex; flex-direction:column; gap:1rem; padding:1rem; }.chat-skeleton span { display:block; width:70%; height:4rem; border-radius:var(--bs-border-radius-lg); background:var(--bs-secondary-bg); }.chat-skeleton span:nth-child(2) { align-self:flex-end; width:60%; }
.chat-resize-handle { position:absolute; left:-4px; top:0; bottom:0; width:8px; cursor:ew-resize; touch-action:none; }.chat-resize-handle:focus-visible { outline:2px solid var(--bs-primary); }
.chat-panel .chat-back { display:none; }.chat-icon { display:inline-block; width:1.2rem; height:1.2rem; background:currentColor; mask-position:center; mask-size:contain; mask-repeat:no-repeat; flex-shrink:0; }
.chat-lightbox { position:fixed; inset:0; z-index:11000; background:var(--bs-body-bg); display:flex; align-items:center; justify-content:center; padding:4rem 1rem 1rem; }.chat-lightbox > .dxbl-btn { position:absolute; right:1rem; top:1rem; }.chat-lightbox img { max-width:100%; max-height:100%; object-fit:contain; }
@media(max-width:1099px) { .chat-panel { width:100vw; }.chat-panel-body { display:flex; }.chat-conversation-list { width:100%; border:0; }.chat-thread { display:none; width:100%; }.chat-show-thread .chat-conversation-list { display:none; }.chat-show-thread .chat-thread { display:flex; }.chat-panel .chat-back { display:inline-flex; }.chat-resize-handle { display:none; }.chat-message { max-width:85%; } }
.chat-icon-back { mask-image:url("../images/chat-back.svg"); }
.chat-icon-close { mask-image:url("../images/chat-close.svg"); }
.chat-icon-broadcast { mask-image:url("../images/chat-broadcast.svg"); }
.chat-icon-message { mask-image:url("../images/chat-message.svg"); }
.chat-icon-file { mask-image:url("../images/chat-file.svg"); }
.chat-icon-send { mask-image:url("../images/chat-send.svg"); }
.chat-icon-attach { mask-image:url("../images/chat-attach.svg"); }
.chat-icon-note { mask-image:url("../images/chat-note.svg"); }
.chat-icon-lock { mask-image:url("../images/chat-lock.svg"); }

/* Getting-started pages (Lernentwicklung, Notenbuch) and the shared SampleClassActions component. */
.ile-start-gate-host {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.ile-start-root {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    overflow-y: auto;
    padding: 24px;
    background-color: var(--bs-tertiary-bg, #f6f4f9);
}

.ile-start-content {
    max-width: 980px;
    margin: 0 auto;
}

.ile-start-hero,
.ile-start-section {
    margin-bottom: 18px;
    padding: 24px;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 10px;
    background-color: var(--bs-body-bg, #fff);
}

.ile-start-hero {
    border-top: 5px solid var(--bs-primary, #5f368d);
}

.ile-start-hero h1,
.ile-start-section h2 {
    margin-top: 0;
    color: var(--bs-primary, #5f368d);
}

.ile-start-hero h1 {
    margin-bottom: 8px;
    font-size: 1.7rem;
}

.ile-start-lead {
    max-width: 760px;
    margin-bottom: 18px;
    font-size: 1.05rem;
    line-height: 1.55;
}

.ile-start-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ile-start-action {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 7px 14px;
    border: 1px solid var(--bs-primary, #5f368d);
    border-radius: 6px;
    color: var(--bs-primary, #5f368d);
    background-color: var(--bs-body-bg, #fff);
    font-weight: 600;
    text-decoration: none;
}

.ile-start-action:hover {
    color: white;
    background-color: var(--bs-primary, #5f368d);
}

.ile-start-action.primary {
    color: white;
    background-color: var(--bs-primary, #5f368d);
}

.ile-start-action.primary:hover {
    background-color: var(--bs-primary-text-emphasis, #432663);
}

.ile-start-section h2 {
    margin-bottom: 14px;
    font-size: 1.25rem;
}

.ile-start-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: ile-start-step;
}

.ile-start-steps li {
    position: relative;
    min-height: 36px;
    margin-bottom: 12px;
    padding-left: 48px;
    line-height: 1.5;
    counter-increment: ile-start-step;
}

.ile-start-steps li::before {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    background-color: var(--bs-primary, #5f368d);
    font-weight: 700;
    content: counter(ile-start-step);
}

.ile-start-admin-label {
    display: inline-block;
    margin: 0 6px 4px 0;
    padding: 2px 7px;
    border-radius: 10px;
    color: var(--bs-primary-text-emphasis, #432663);
    background-color: var(--bs-primary-bg-subtle, rgba(95, 54, 141, 0.12));
    font-size: 0.8rem;
    font-weight: 600;
}

.ile-start-admin-hint {
    display: block;
    margin-top: 6px;
    color: var(--bs-secondary-color, #6c757d);
}

.ile-start-step-action {
    margin-top: 8px;
}

.ile-start-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ile-start-card {
    padding: 14px;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 8px;
    background-color: var(--bs-tertiary-bg, #f6f4f9);
}

.ile-start-card strong {
    display: block;
    margin-bottom: 4px;
    color: var(--bs-primary-text-emphasis, #432663);
}

.ile-start-notes {
    margin: 0;
    padding-left: 22px;
}

.ile-start-notes li {
    margin-bottom: 9px;
    line-height: 1.5;
}

.ile-start-tip {
    margin-top: 16px;
    padding: 12px 14px;
    border-left: 4px solid #28a745;
    border-radius: 6px;
    background-color: rgba(40, 167, 69, 0.08);
}

.ile-start-privacy {
    padding: 14px;
    border-left: 4px solid #f0c000;
    border-radius: 6px;
    background-color: rgba(240, 192, 0, 0.12);
    line-height: 1.5;
}

@media (max-width: 720px) {
    .ile-start-root {
        padding: 12px;
    }

    .ile-start-hero,
    .ile-start-section {
        padding: 18px;
    }

    .ile-start-grid {
        grid-template-columns: 1fr;
    }
}

/* Klassenbuch: gemeinsames Raster, DevExpress-Editoren und semantische Statusfarben. */
.cr-workspace, .ws-workspace {
    --cr-accent: #7652aa;
    --cr-teal: #157d85;
    --cr-amber: #a56813;
    --cr-rose: #b34869;
    padding: 24px 28px;
    overflow: auto;
    height: 100%;
    color: var(--bs-body-color);
    background: var(--bs-tertiary-bg, #f5f5f8);
    scrollbar-gutter: stable;
}
.cr-heading, .ws-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.cr-eyebrow, .ws-eyebrow { color: var(--cr-accent); font-size: .73rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.cr-heading h1, .ws-heading h1 { font-size: 1.9rem; font-weight: 650; letter-spacing: -.03em; margin: 4px 0 8px; }
.cr-heading p, .cr-section-description, .ws-heading p, .ws-section-description { color: var(--bs-secondary-color); margin: 0; line-height: 1.55; max-width: 72ch; }
.class-register-selection-bar, .ws-selection-bar { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(190px, 1fr) auto minmax(150px, auto); align-items: end; gap: 20px; padding: 20px 24px; margin-bottom: 24px; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 12px; box-shadow: 0 2px 5px #00000004; }
.cr-field, .ws-field { min-width: 0; display: grid; gap: 7px; }
.cr-field > label, .ws-field > label { font-size: .8rem; color: var(--bs-secondary-color); font-weight: 600; margin: 0; }
.cr-class-selector { min-width: 0; }
.cr-period-navigation, .ws-period-navigation { display: flex; gap: 6px; align-items: center; min-height: 40px; }
.cr-period-context, .ws-period-context { display: flex; align-items: flex-start; flex-direction: column; gap: 7px; padding-left: 20px; border-left: 1px solid var(--bs-border-color); font-size: .8rem; min-height: 60px; justify-content: center; }
.cr-content { border: 0; padding: 0; margin: 0; min-width: 0; }
.cr-workspace fieldset, .ws-workspace fieldset { min-width: 0; }
.cr-two-columns, .ws-two-columns { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.cr-workspace[data-page="Absences"] .cr-two-columns, .ws-workspace[data-page="Absences"] .ws-two-columns { grid-template-columns: minmax(0, 1.8fr) minmax(290px, 1fr); }
.cr-card, .ws-card { border: 1px solid var(--bs-border-color); border-radius: 12px; background: var(--bs-body-bg); padding: 24px; margin-bottom: 24px; min-width: 0; box-shadow: 0 3px 10px #00000004; }
.cr-two-columns > .cr-card, .ws-two-columns > .ws-card { margin-bottom: 0; }
.cr-two-columns, .ws-two-columns { margin-bottom: 24px; }
.cr-card h2, .ws-card h2 { font-size: 1.12rem; font-weight: 650; margin: 0 0 12px; line-height: 1.4; }
.cr-card h3, .cr-lesson h3, .ws-card h3 { font-size: .95rem; font-weight: 650; margin: 0 0 12px; line-height: 1.4; }
.cr-card p, .ws-card p { line-height: 1.6; }
.cr-section-heading, .ws-section-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 18px; }
.cr-section-heading h2, .cr-section-heading h3, .ws-section-heading h2, .ws-section-heading h3 { margin-bottom: 0; }
.cr-section-heading + .cr-section-description, .ws-section-heading + .ws-section-description { margin: -6px 0 20px; }
.cr-actions, .cr-toolbar, .cr-section-bar, .ws-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.cr-actions, .ws-actions { margin: 14px 0; }
.cr-heading .cr-actions, .cr-section-heading .cr-actions, .ws-heading .ws-actions, .ws-section-heading .ws-actions { margin: 0; }
.cr-actions h2, .ws-actions h2 { margin: 0 auto 0 0; }
.cr-toolbar, .cr-section-bar { margin-bottom: 18px; }
.cr-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 20px; }
.cr-card-grid > .cr-card, .cr-card-grid > .ws-card { margin: 0; text-decoration: none; color: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
.cr-card-grid > a.cr-card:hover, .cr-card-grid > a.ws-card:hover { border-color: var(--cr-accent, #7652aa); box-shadow: 0 4px 16px #7652aa18; }
.cr-kpi-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 16px; margin-bottom: 24px; }
.cr-kpi-card { --cr-tone: var(--cr-accent); position: relative; border-top: 3px solid var(--cr-tone); background: linear-gradient(135deg, color-mix(in srgb, var(--cr-tone) 7%, var(--bs-body-bg)), var(--bs-body-bg)); padding: 20px; margin: 0; }
.cr-kpi-card > span { display: block; }
.cr-kpi-card > a { display: block; margin-top: 12px; font-size: .82rem; }
.cr-kpi-card > .cr-kpi-label { margin-bottom: 8px; }
.cr-chart-card > .cr-section-description, .cr-chart-card > .ws-section-description { min-height: 3.2em; }
.cr-tone-purple { --cr-tone: var(--cr-accent); }
.cr-tone-teal { --cr-tone: var(--cr-teal); }
.cr-tone-amber { --cr-tone: var(--cr-amber); }
.cr-tone-rose { --cr-tone: var(--cr-rose); }
.cr-kpi { display: block; font-size: 2rem; line-height: 1.1; margin-bottom: 12px; font-variant-numeric: tabular-nums; color: var(--cr-tone, var(--cr-accent)); }
.cr-kpi-label { display: block; color: var(--bs-secondary-color); font-size: .84rem; line-height: 1.45; }
.cr-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; margin-bottom: 24px; }
.cr-chart-card { margin: 0; overflow: hidden; }
.cr-chart-summary { display: flex; gap: 8px; align-items: baseline; color: var(--cr-tone, var(--cr-accent)); font-weight: 600; margin: 16px 0; }
.cr-chart-summary strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.cr-chart-tooltip { padding: 10px 14px; display: grid; gap: 5px; }
.cr-chart-empty { min-height: 250px; display: grid; place-content: center; text-align: center; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); border-radius: 8px; padding: 24px; }
.cr-chart-footnote { font-size: .8rem; color: var(--bs-secondary-color); margin: 12px 0 0; }
.cr-metrics, .ws-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid var(--bs-border-color); border-radius: 10px; margin: 18px 0 22px; overflow: hidden; }
.cr-metrics > div, .ws-metrics > div { padding: 14px 12px; background: var(--bs-tertiary-bg); border-right: 1px solid var(--bs-border-color); }
.cr-metrics > div:last-child, .ws-metrics > div:last-child { border-right: 0; }
.cr-metrics strong, .ws-metrics strong { display: block; font-size: 1.45rem; color: var(--cr-accent); line-height: 1.2; font-variant-numeric: tabular-nums; }
.cr-metrics span, .ws-metrics span { display: block; font-size: .76rem; color: var(--bs-secondary-color); margin-top: 5px; }
.cr-attendance-list { display: grid; gap: 9px; }
.cr-attendance-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-bottom: 9px; border-bottom: 1px solid var(--bs-border-color); }
.cr-attendance-row:last-child { border-bottom: 0; }
.cr-student { min-height: 48px; min-width: 150px; flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--bs-border-color); border-left: 3px solid var(--bs-success); border-radius: 8px; padding: 12px 14px; color: var(--bs-body-color); text-align: left; transition: background .15s ease; }
.cr-student strong { font-size: .78rem; font-weight: 600; }
.cr-present { background: color-mix(in srgb, var(--bs-success) 7%, var(--bs-body-bg)); }
.cr-absent { background: var(--bs-warning-bg-subtle); border-left-color: var(--bs-warning); }
.cr-student:hover { box-shadow: inset 0 0 0 1px currentColor; }
.cr-student:focus-visible { outline: 3px solid var(--cr-accent); outline-offset: 2px; }
.cr-square { width: 44px; min-height: 44px; }
.cr-full { width: 100%; margin-top: 20px; min-height: 44px; }
.cr-picker, .cr-correction { border: 1px solid color-mix(in srgb, var(--bs-warning) 60%, var(--bs-border-color)); padding: 20px; border-radius: 10px; background: var(--bs-warning-bg-subtle); margin: 18px 0; }
.cr-correction { display: grid; gap: 10px; }
.cr-checked { color: var(--bs-success-text-emphasis); margin: 20px 0 10px; }
.cr-lesson { border: 1px solid var(--bs-border-color); border-radius: 10px; padding: 18px; margin-top: 18px; }
.cr-inline { display: inline-flex; align-items: center; gap: 8px; margin: 8px 16px 8px 0; }
.cr-previous, .cr-note { border-bottom: 1px solid var(--bs-border-color); padding: 18px 0; }
.cr-note header { margin-bottom: 12px; color: var(--bs-secondary-color); font-size: .84rem; }
.cr-note header strong { color: var(--bs-body-color); }
.cr-kind-praise { --cr-category-color: #17634b; --cr-category-bg: #e5f3ec; }
.cr-kind-notice { --cr-category-color: #66408f; --cr-category-bg: #f0eafa; }
.cr-kind-homework { --cr-category-color: #8a490f; --cr-category-bg: #fff0d9; }
.cr-kind-material { --cr-category-color: #864025; --cr-category-bg: #fbece3; }
.cr-kind-contact { --cr-category-color: #126873; --cr-category-bg: #e2f3f4; }
.cr-kind-health { --cr-category-color: #953957; --cr-category-bg: #f9e7ee; }
.cr-kind-other { --cr-category-color: #515b67; --cr-category-bg: #ebedf0; }
.badge.cr-note-badge { --bs-badge-color: var(--cr-category-color); color: var(--cr-category-color); background-color: var(--cr-category-bg); margin-right: 8px; }
.cr-note-category { color: var(--cr-category-color); }
.cr-note-filter input { color: var(--cr-category-color) !important; }
/* Keep category text legible on the theme's dark selected-item background. */
[role="option"][aria-selected="true"] .cr-note-category { color: inherit; }
.cr-preserve-lines { white-space: pre-wrap; }
.cr-praise { border-left: 3px solid var(--bs-success); padding-left: 18px; }
.cr-gap { background: var(--bs-warning-bg-subtle); }
.cr-overdue { background: color-mix(in srgb, var(--bs-orange) 16%, var(--bs-body-bg)); }
.cr-danger { background: var(--bs-danger-bg-subtle); }
.cr-table .cr-gap > * { --bs-table-bg: var(--bs-warning-bg-subtle); }
.cr-table .cr-overdue > * { --bs-table-bg: color-mix(in srgb, var(--bs-orange) 16%, var(--bs-body-bg)); }
.cr-table .cr-danger > *, .cr-table td.cr-danger { --bs-table-bg: var(--bs-danger-bg-subtle); }
.cr-chip, .ws-chip { display: inline-flex; align-items: center; border: 1px solid var(--bs-border-color); border-radius: 5px; padding: 4px 8px; font-size: .75rem; line-height: 1.4; }
.cr-chip-success, .ws-chip-success { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); border-color: transparent; }
.cr-chip-warning, .ws-chip-warning { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.cr-chip-danger, .ws-chip-danger { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }
.cr-lesson-checks .cr-actions, .cr-lesson-checks .ws-actions { margin-top: 12px; }
.cr-week-grid { display: grid; grid-template-columns: repeat(5,minmax(200px,1fr)); gap: 16px; overflow-x: auto; padding-bottom: 8px; }
.cr-week-grid > .cr-card, .cr-week-grid > .ws-card { padding: 18px; margin-bottom: 0; }
.cr-week-grid .cr-lesson { padding: 12px; }
.cr-week-grid h3 { color: var(--cr-accent); }
.cr-form-grid, .ws-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 20px; margin: 18px 0 22px; align-items: end; }
.cr-form-grid > *, .cr-field > *, .ws-form-grid > *, .ws-field > * { min-width: 0; }
.cr-form-grid > div:not(.cr-actions), .ws-form-grid > div:not(.ws-actions) { display: grid; gap: 8px; }
.cr-form-grid > div:only-child, .ws-form-grid > div:only-child { grid-column: 1 / -1; }
.cr-week-grid .cr-form-grid, .cr-week-grid .ws-form-grid { grid-template-columns: 1fr; }
.cr-card > .cr-table-scroll + h3, .ws-card > .cr-table-scroll + h3 { margin-top: 24px; }
.cr-form-grid > div > label, .ws-form-grid > div > label { margin: 0; font-size: .85rem; font-weight: 600; }
.cr-workspace td.cr-gap, .ws-workspace td.cr-gap { background-color: var(--bs-warning-bg-subtle); }
.cr-workspace td.cr-overdue, .ws-workspace td.cr-overdue { background-color: color-mix(in srgb, var(--bs-orange) 16%, var(--bs-body-bg)); }
.cr-workspace td.cr-danger, .ws-workspace td.cr-danger { background-color: var(--bs-danger-bg-subtle); }
.cr-data-grid { margin-top: 18px; }
.cr-form-grid > label, .cr-card > label, .cr-card > fieldset > label, .cr-lesson > fieldset > label, .cr-picker > label, .ws-form-grid > label, .ws-card > label, .ws-card > fieldset > label { display: grid; gap: 8px; font-size: .85rem; margin: 0 0 16px; }
.cr-form-grid > label, .ws-form-grid > label { margin: 0; }
.cr-form-grid .cr-field, .ws-form-grid .ws-field { align-self: stretch; align-content: end; }
.cr-card > fieldset > .cr-field, .cr-lesson .cr-field, .ws-card > fieldset > .ws-field, .cr-lesson .ws-field { margin-bottom: 18px; }
.cr-table-scroll { overflow: auto; margin: 18px 0; border: 1px solid var(--bs-border-color); border-radius: 8px; }
.cr-card .table, .ws-card .table { font-size: .86rem; margin-bottom: 0; }
.cr-card .table th, .ws-card .table th { background: var(--bs-tertiary-bg); font-weight: 600; color: var(--bs-secondary-color); }
.cr-card .table th, .cr-card .table td, .ws-card .table th, .ws-card .table td { padding: 12px; vertical-align: middle; }
.cr-table td, .cr-table th { white-space: nowrap; }
.cr-card .table td .cr-actions, .ws-card .table td .ws-actions { margin: 0; }
.cr-save-status, .ws-save-status { position: sticky; bottom: -24px; z-index: 2; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 10px 10px 0 0; padding: 12px 18px; margin-top: 20px; box-shadow: 0 -3px 12px #00000006; }
.cr-save-status:not(:has([role="status"])), .ws-save-status:not(:has([role="status"])) { display: none; }
.cr-duty-names { font-size: 1.25rem; margin: 18px 0; }
.cr-workspace .btn, .ws-workspace .btn { min-height: 40px; }
.cr-card details, .ws-card details { margin-top: 18px; border-top: 1px solid var(--bs-border-color); padding-top: 14px; }
.cr-card summary, .ws-card summary { color: var(--cr-accent, var(--bs-primary)); font-weight: 600; cursor: pointer; }
.cr-card details[open] > summary, .ws-card details[open] > summary { margin-bottom: 18px; }
.cr-card > .cr-card, .cr-card > details > .cr-card, .ws-card > .ws-card, .ws-card > details > .ws-card { border: 0; box-shadow: none; padding: 18px 0 0; margin-bottom: 0; }
@media (min-width: 1700px) { .cr-workspace, .ws-workspace { padding: 28px 40px; } }
@media (max-width: 1150px) {
    .class-register-selection-bar, .ws-selection-bar { grid-template-columns: minmax(170px,1fr) minmax(190px,1fr) auto; }
    .cr-period-context, .ws-period-context { grid-column: 1 / -1; flex-direction: row; align-items: center; border: 0; padding: 10px 0 0; min-height: 0; border-top: 1px solid var(--bs-border-color); }
    .cr-kpi-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .cr-workspace[data-page="Absences"] .cr-two-columns, .ws-workspace[data-page="Absences"] .ws-two-columns { grid-template-columns: 1fr; }
}
@media (max-width: 950px) {
    .cr-two-columns, .cr-chart-grid, .ws-two-columns { grid-template-columns: 1fr; }
    .cr-heading, .ws-heading { align-items: flex-start; }
    .cr-heading .cr-actions, .ws-heading .ws-actions { justify-content: flex-end; }
}
@media (max-width: 720px) {
    .cr-workspace, .ws-workspace { padding: 16px; }
    .cr-heading, .ws-heading { flex-direction: column; gap: 14px; margin-bottom: 20px; }
    .cr-heading h1, .ws-heading h1 { font-size: 1.6rem; }
    .class-register-selection-bar, .ws-selection-bar { grid-template-columns: 1fr; padding: 18px; gap: 16px; }
    .cr-period-navigation, .ws-period-navigation { justify-content: center; }
    .cr-period-context, .ws-period-context { flex-wrap: wrap; }
    .cr-card, .ws-card { padding: 18px; }
    .cr-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
    .cr-kpi-card { padding: 16px; }
    .cr-form-grid, .ws-form-grid { grid-template-columns: 1fr; }
    .cr-metrics, .ws-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .cr-save-status, .ws-save-status { bottom: -16px; }
}

/* Gemeinsame Arbeitsbereiche: Zeugniseingabe verwendet die Markenfarbe. */
.ws-workspace { --ws-accent: var(--bs-primary); --cr-accent: var(--ws-accent); min-width: 0; }
.ws-chip-muted { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
.ws-empty { text-align: center; padding: 40px 24px; color: var(--bs-secondary-color); }

/* Zeugniseingabe: Layout reagiert auch auf die verfügbare Breite neben dem Panel. */
.report-entry-workspace { container: report-entry / inline-size; width: 100%; flex: 1; min-height: 0; padding: 12px 14px; }
.report-entry-content { min-width: 0; margin-inline: auto; }
.report-entry-content .ws-heading { margin-bottom: 16px; }
.report-entry-content .ws-heading h1 { font-size: 1.5rem; line-height: 30px; margin: 0; }
.report-heading-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.report-entry-content .report-entry-heading { min-height: 68px; padding: 12px 14px; background: color-mix(in srgb, var(--bs-body-bg) 94%, var(--bs-primary)); border: 1px solid var(--bs-border-color); border-radius: 10px; }
.report-entry-heading .ws-actions { flex-shrink: 0; }
.report-entry-heading .report-heading-title { min-width: 0; }
.report-entry-heading .report-heading-title p { font-size: .875rem; }
.report-entry-content > .ws-card { margin-bottom: 16px; }
.report-entry-content .ws-card > .ws-section-heading { margin-bottom: 8px; min-height: 0; }
.report-entry-content .ws-card > .ws-form-grid { margin: 0; gap: 12px; }
.report-selection { grid-template-columns: minmax(140px, 1fr) minmax(180px, 1.3fr) auto; }
.report-term-context { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; border-left: 0; border-top: 1px solid var(--bs-border-color); padding: 14px 0 0; min-height: 0; }
.report-term-context .ws-actions { margin: 0; }
.report-student-option { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 0; }
.report-student-option > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.report-student-option .ws-chip { padding-block: 0; }
.report-student-option .ws-chip:empty { display: none; }
.report-entry-workspace .ws-metrics { margin: 16px 0; }
.report-entry-workspace .ws-metrics > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 8px 12px; }
.report-entry-workspace .ws-metrics strong { display: inline; font-size: 1.15rem; }
.report-entry-workspace .ws-metrics span { display: inline; margin: 0; }
.report-entry-content :is(.ws-card, .report-selection, .report-save-status) { padding: 12px; }
.report-entry-content .report-selection { margin-bottom: 16px; background: color-mix(in srgb, var(--bs-body-bg) 97%, var(--bs-body-color)); }
.checked-report-header-workspace { height: auto; overflow: visible; padding-bottom: 0; }
.checked-report-template-selection { grid-column: 1 / -1; }
.report-entry-content .report-save-status { background: color-mix(in srgb, var(--bs-body-bg) 97%, var(--bs-body-color)); }
.report-entry-content .report-save-status:not(.report-save-pending) { border-color: color-mix(in srgb, var(--bs-border-color) 65%, var(--bs-body-color)); box-shadow: 0 -3px 12px #00000010; }
.report-entry-content .report-save-pending { background: color-mix(in srgb, var(--bs-body-bg) 87%, var(--ws-accent)); border-color: color-mix(in srgb, var(--bs-border-color) 45%, var(--ws-accent)); }
.report-save-term, .report-save-hint { display: block; font-size: .78rem; margin-top: 3px; }
.report-save-term { font-weight: 600; color: var(--ws-accent); }
.report-save-hint { color: var(--bs-secondary-color); }
.report-entry-content .report-empty-chip { background: #fff0bf; color: #71520a; border-color: #e7cf8a; font-weight: 650; padding: 0 7px; line-height: 20px; }
.report-history-notice { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 12px; margin-bottom: 16px; border: 1px solid #ccb8df; border-left: 4px solid var(--ws-accent); border-radius: 8px; background: color-mix(in srgb, var(--bs-body-bg) 87%, var(--ws-accent)); }
.report-history-notice strong { color: var(--ws-accent); }
.report-history-notice span { font-size: .85rem; }
.report-history-mode .report-selection { box-shadow: inset 4px 0 var(--ws-accent); }
.report-grade-1 { --report-grade-color: hsl(120,100%,50%); }
.report-grade-2 { --report-grade-color: hsl(96,100%,50%); }
.report-grade-3 { --report-grade-color: hsl(72,100%,50%); }
.report-grade-4 { --report-grade-color: hsl(48,100%,50%); }
.report-grade-5 { --report-grade-color: hsl(24,100%,50%); }
.report-grade-6 { --report-grade-color: hsl(0,100%,50%); }
.report-entry-workspace .report-grade-input { background: var(--report-grade-color, var(--bs-body-bg)); }
.report-entry-workspace .report-grade-input input { background: transparent; color: var(--bs-body-color); }
.report-entry-workspace [class*="report-grade-input report-grade-"] input { color: #222; }
.ws-grade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; font-variant-numeric: tabular-nums; }
.report-field-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.report-previous-toggle { margin-inline-start: 12px; }
.ws-chip-grade-a, .ws-chip-grade-b { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.ws-chip-grade-c, .ws-chip-grade-d { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.ws-chip-grade-e { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }
.report-previous-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; margin-bottom: 14px; max-height: 9rem; overflow-y: auto; }
.report-save-status { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 54px; bottom: -12px; }
.report-save-status .ws-actions { margin: 0; }
.report-entry-workspace :is(button, summary):focus-visible { outline: 3px solid var(--ws-accent); outline-offset: 2px; }

/* Zeugnis-Editor: Replikat und Textarea müssen exakt dieselben Maße haben. */
.symbol-font2 { font-family: "DejaVu Sans", sans-serif !important; }
.grow-wrap { display: grid; min-width: 0; }
.grow-wrap::after { content: attr(data-replicated-value) " "; white-space: pre-wrap; visibility: hidden; }
.grow-wrap > textarea, .grow-wrap::after { grid-area: 1 / 1 / 2 / 2; border: 1px solid var(--bs-border-color); border-radius: 8px; padding: 10px 12px; font: inherit; line-height: 1.5; min-width: 0; min-height: 5.8em; overflow-wrap: anywhere; }
.grow-wrap > textarea { resize: none; overflow: hidden; width: 100%; background: var(--bs-body-bg); color: var(--bs-body-color); }
.grow-wrap > textarea:focus-visible { outline: 2px solid var(--ws-accent, var(--bs-primary)); outline-offset: 2px; }
.grow-wrap > textarea::placeholder { color: var(--bs-secondary-color); font-style: italic; }
.grow-wrap-bounded { display: block; overflow: hidden; }
.grow-wrap-bounded::after { content: none; }
.grow-wrap-bounded > textarea { box-sizing: border-box; overflow: auto; width: 100%; min-height: 0; }
.ws-editor-toolbar { min-height: 40px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; }
.ws-editor-toolbar-inactive { visibility: hidden; pointer-events: none; }
.report-entry-workspace .ws-editor-toolbar { min-height: 0; gap: 10px; }
.report-entry-workspace .ws-editor-toolbar-inactive { display: none; }
.ws-editor-toolbar > .competency-text-assistant { flex: 0 0 100%; min-width: 0; margin: 0; }
.ws-editor-group { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ws-editor-toolbar .btn { min-height: 32px; }
.ws-flag-button::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ws-flag-color); margin-right: 6px; }
.ws-list { display: grid; gap: 6px; }
.ws-list-item { line-height: 1.5; overflow-wrap: anywhere; border: 1px solid var(--bs-border-color); border-left: 4px solid var(--ws-flag-color, transparent); border-radius: 6px; padding: 12px; color: var(--bs-body-color); background: var(--bs-body-bg); }
.ws-list-item:hover, .ws-list-item:active, .text-div-clicked { background: var(--bs-primary-bg-subtle); }
.ws-flyout-item { display: flex; gap: 12px; text-align: left; white-space: normal; width: 100%; }
.ws-text-module-panel { background: var(--bs-body-bg); padding: 16px 12px; }
.ws-text-module-panel > .ws-section-heading { gap: 8px; margin-bottom: 16px; }
.ws-text-module-panel h2 { font-size: 1.05rem; margin: 0; }
.ws-text-module-grid .ws-field { margin-bottom: 6px; }
/* Filterbereich: Beschriftung links, bei schmalem Panel (Container, nicht Viewport) darüber. */
.ws-tm-filters { container-type: inline-size; container-name: tm-filters; }
.ws-tm-filter-bar { display: flex; align-items: center; gap: 6px; min-width: 0; margin-bottom: 4px; }
.ws-tm-filter-bar .ws-tm-filter-toggle { flex-shrink: 0; }
.ws-tm-filter-summary { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; color: var(--bs-secondary-color); }
.ws-tm-filter-fields[hidden] { display: none; }
.ws-text-module-grid .ws-field.ws-tm-filter { grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; gap: 2px 8px; }
.ws-tm-filter-check { padding: 2px 6px 6px; }
@container tm-filters (max-width: 300px) { .ws-text-module-grid .ws-field.ws-tm-filter { grid-template-columns: minmax(0, 1fr); } }
.ws-text-module-panel .draggable { cursor: grab; }
/* Auch bei einem noch geladenen Altstylesheet haben die neuen Listenabstände Vorrang. */
.ws-text-module-panel .ws-list-item { padding: 8px 10px !important; margin: 4px 0 !important; }
.ws-text-module-panel .draggable:active { cursor: grabbing; }
/* Bearbeiten: Geschwister der ziehbaren Zeile, damit weder Einfügen noch Ziehen ausgelöst wird. */
.ws-tm-row { position: relative; }
.ws-text-module-panel .ws-list-item.ws-tm-editable { padding-right: 40px !important; }
.ws-tm-row .ws-tm-edit { position: absolute; top: 8px; right: 4px; opacity: .65; }
.ws-tm-row .ws-tm-edit:hover, .ws-tm-row .ws-tm-edit:focus-visible, .ws-tm-row:hover .ws-tm-edit { opacity: 1; }
.ws-tm-row .ws-tm-edit:focus-visible { outline: 2px solid var(--ws-accent, var(--bs-primary)); outline-offset: 1px; }
.ws-tm-icon { display: inline-block; width: 1rem; height: 1rem; background: currentColor; mask-position: center; mask-size: contain; mask-repeat: no-repeat; flex-shrink: 0; }
.ws-tm-icon-edit { mask-image: url("../images/text-module-edit.svg"); }
.text-number { margin-right: 8px; }
.text-group-header { padding: 12px 4px 6px; user-select: none; }
.text-div-personal { box-shadow: inset 3px 0 var(--bs-primary); }
.ws-text-panel-toggle { width: 32px; height: 100%; padding: 4px; border-radius: 0; }
.ws-text-panel-toggle img { width: 20px; height: 20px; }
.report-entry-workspace .dxbl-btn-icon, .ws-text-module-panel .dxbl-btn-icon { width: 18px; height: 18px; }

@media (min-width: 1700px) { .report-entry-content { max-width: 1320px; } .report-entry-workspace { padding: 14px 20px; } .report-save-status { bottom: -14px; } }
@media (max-width: 950px) { .ws-grade-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } }
@container report-entry (max-width: 850px) {
    .report-entry-content .ws-heading { flex-direction: column; align-items: flex-start; gap: 14px; }
    .report-selection { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; }
    .report-selection .ws-period-navigation { grid-column: 1 / -1; justify-content: flex-start; }
    .ws-grade-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}
@container report-entry (max-width: 540px) {
    .report-selection { grid-template-columns: minmax(0, 1fr); }
    .report-entry-content :is(.ws-card, .report-selection, .report-save-status) { padding: 9px; }
    .report-entry-content .ws-form-grid { grid-template-columns: minmax(0, 1fr); }
    .report-entry-content .ws-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .report-save-status { flex-wrap: wrap; }
}
@media (max-width: 720px) {
    .report-entry-workspace { padding: 8px; }
    .report-entry-workspace .report-save-status { bottom: -8px; }
    .report-selection, .ws-grade-grid { grid-template-columns: minmax(0, 1fr); }
    .report-entry-workspace .report-entry-content .ws-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .report-save-status { width: 100%; flex-wrap: wrap; }
}

/* Zeugnis-Editor: bestehende Einfügeindikatoren. */
.img
    {
        position: absolute; /* Absolute Positionierung innerhalb des relativen Containers */
        top: 0;            /* Oben im Container */
        left: 0;           /* Links im Container */
        right: 0;          /* Rechts im Container */
        bottom: 0;         /* Unten im Container */
        opacity: 0;      /* Transparenz des Bildes */
        pointer-events: none; /* Ermöglicht das Durchklicken */
        z-index: 1000;     /* Stellt sicher, dass das Wasserzeichen über anderen Inhalten liegt */
        background: url('images/clipboard_check_edit.svg') no-repeat center center;
        background-size: contain; /* Stellt sicher, dass das Bild im Container enthalten ist und seine Proportionen behält */
        transition: opacity 1s; /* Ermöglicht eine sanfte Übergangsanimation */
    }
.img-click
    {
        opacity: 0.75;
    }
.panel-recently-changed {
        background-color: rgba(33, 150, 243, 0.18) !important;
        transition: background-color 0.8s ease-out;
    }

/* Lernentwicklungsassistent: gezielt im geladenen Stylesheet, da das CSS-Isolationsbundle nicht eingebunden ist. */
.competency-text-assistant {
    margin: .5rem 0 1rem;
    padding: 9px;
    border: 1px solid var(--bs-border-color, #c7cbd1);
    border-radius: 8px;
    background: var(--bs-body-bg, white);
    font-size: .9rem;
}
.competency-text-assistant .assistant-heading, .competency-text-assistant .assistant-levels {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: .6rem;
}
.competency-text-assistant .assistant-heading { justify-content: space-between; gap: 12px 24px; }
.competency-text-assistant > p { margin: 0 0 8px; }
.competency-text-assistant > :last-child { margin-bottom: 0; }
.competency-text-assistant .assistant-heading { margin-bottom: 8px; }
.competency-text-assistant .assistant-heading .assistant-close { flex: 0 0 auto; width: auto; min-height: 28px; padding: 3px 10px; }
.competency-text-assistant .assistant-suggestions { list-style: none; padding: 0; max-height: 24rem; overflow-y: auto; }
.competency-text-assistant .assistant-suggestions li { padding: .6rem 0; border-bottom: 1px solid var(--bs-border-color, #ddd); }
.competency-text-assistant .assistant-sentence { display: block; width: 100%; text-align: left; white-space: normal; padding: .5rem;
    color: var(--bs-primary, #175aa6); background: transparent; border: 1px solid currentColor; border-radius: .25rem; }
.competency-text-assistant .assistant-sentence:hover:not(:disabled), .competency-text-assistant .assistant-sentence:focus-visible { background: var(--bs-primary-bg-subtle, #e8f0fb); }
.competency-text-assistant .assistant-sentence:disabled { color: var(--bs-secondary, #666); }
.competency-text-assistant .assistant-suggestions .text-muted { margin: .3rem 0; }

/* Ankreuzzeugnis: gleiche Karten und Speicherleiste wie die Texteingabe. */
.checked-report-section-title { margin: 16px 0; font-size: 1rem; color: var(--bs-secondary-color); }
.checked-report-main-title { font-size: 1.15rem; color: var(--bs-body-color); }
.checked-report-options { display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 2px 0; }
.checked-report-options > * { min-height: 28px; }
.checked-report-static-text { margin: 0 0 16px; white-space: pre-wrap; }