/* Automatisch erzeugt – Teil der persistenten CSS-Architektur V377.
 * Quelle: assets/style.sources.css; Reihenfolge im Browser:
 * foundation -> interactive (nur Übungen) -> finishing.
 * CSS-Dateien nicht direkt bearbeiten; neu bauen mit --write.
 */

/* START: 320-pc-ui-refresh.css */
/* PC branch 273 – focused UI refresh for login, dashboard and student group activity. */

/* ============================================================
   LOGIN / PUBLIC ENTRY
   ============================================================ */


.registration-entry-card{
    width: 100%;
    max-width: none;
    margin-inline: 0;
    box-sizing: border-box;
    border: 1px solid #d3e0ec;
    border-radius: 22px;
    box-shadow:
        0 18px 42px rgba(24, 51, 82, .14),
        0 5px 14px rgba(24, 51, 82, .08);
}



.registration-entry-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto !important;
    gap: 0 !important;
    align-items: center !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
}

.registration-entry-card > div:first-child {
    display: contents !important;
}

.registration-entry-card .eyebrow {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 14px 24px 2px !important;
    color: #e2efff !important;
    background: #3674b4 !important;
}

.registration-entry-card h2 {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 24px 16px !important;
    color: #ffffff !important;
    background: #3674b4 !important;
}

.registration-entry-card p {
    grid-column: 1;
    grid-row: 3;
    min-width: 0;
    margin: 0 !important;
    padding: 20px 24px 22px !important;
    color: #41546b;
    line-height: 1.55;
}

.registration-entry-card .registration-entry-button {
    grid-column: 2;
    grid-row: 3;
    margin: 0 24px 0 18px !important;
    justify-self: end;
    align-self: center;
    white-space: nowrap;
}

/* ============================================================
   DASHBOARD
   ============================================================ */
.dashboard-course-overview-page {
    width: 100%;
    max-width: 1180px;
    padding-top: 22px;
    padding-bottom: 42px;
}

.dashboard-progress-strip,
.dashboard-course-overview,
.dashboard-status-grid {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

.dashboard-progress-strip {
    margin-bottom: 18px;
    padding: 16px 20px 15px;
    background: rgba(255,255,255,.97);
    border: 1px solid #d0dfec;
    border-radius: 18px;
    box-shadow:
        0 18px 42px rgba(24, 51, 82, .16),
        0 6px 16px rgba(24, 51, 82, .10);
}

.dashboard-progress-strip-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.dashboard-progress-strip-head > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.dashboard-progress-eyebrow {
    color: var(--blue);
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.dashboard-progress-strip-head strong {
    color: #1d2b3e;
    font-size: 1rem;
    line-height: 1.3;
}

.dashboard-progress-percent {
    color: var(--blue-dark);
    font-size: 1.25rem;
    font-weight: 900;
    white-space: nowrap;
}

.dashboard-progress-track {
    display: block;
    width: 100%;
    height: 8px;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: #e8eef5;
    appearance: none;
}

.dashboard-progress-track-wide {
    margin: 13px 0 9px;
}

.dashboard-progress-track::-webkit-progress-bar {
    background: #e8eef5;
    border-radius: 999px;
}

.dashboard-progress-track::-webkit-progress-value {
    background: linear-gradient(90deg, var(--blue), var(--green));
    border-radius: 999px;
}

.dashboard-progress-track::-moz-progress-bar {
    background: linear-gradient(90deg, var(--blue), var(--green));
    border-radius: 999px;
}

.dashboard-progress-strip-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: #61738c;
    font-size: .82rem;
}

.dashboard-progress-strip-foot a {
    color: var(--blue-dark);
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

.dashboard-progress-strip-foot a:hover,
.dashboard-progress-strip-foot a:focus-visible {
    text-decoration: underline;
}

.dashboard-staff-strip {
    border-color: #cfe0ef;
    background: linear-gradient(135deg, #f8fbff, #fff);
}

.dashboard-staff-strip .button {
    flex: 0 0 auto;
}

.dashboard-course-overview {
    overflow: hidden;
    max-width: none !important;
    margin-inline: 0 !important;
    background: #fff;
    border: 1px solid #d0dfec;
    border-radius: 22px;
    box-shadow:
        0 18px 42px rgba(24, 51, 82, .18),
        0 6px 16px rgba(24, 51, 82, .11);
}

.dashboard-course-head {
    padding: 20px 30px 22px;
    background: #3674b4;
    color: #ffffff;
    border-bottom: 0;
    text-align: left;
}

.dashboard-course-kicker {
    margin: 0 0 6px;
    color: #e2efff;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.dashboard-course-overview h1 {
    margin: 0;
    max-width: none;
    color: #ffffff;
    font-size: clamp(1.65rem, 2.6vw, 2.2rem);
    line-height: 1.08;
    letter-spacing: -.025em;
    text-align: left;
}

.dashboard-course-content {
    padding: 26px 30px 24px;
}

.dashboard-course-copy {
    max-width: 980px;
}

.dashboard-course-copy p {
    margin: 0 0 16px;
    color: #40556f;
    font-size: .96rem;
    line-height: 1.68;
    text-align: left;
}

.dashboard-course-copy p:last-child {
    margin-bottom: 0;
}

.dashboard-course-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: end;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #dbe5ee;
}

.dashboard-course-authors {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    border: 0;
    color: #61738c;
    font-size: .83rem;
    line-height: 1.5;
}

.dashboard-course-authors strong {
    color: #2b3c52;
    font-size: .8rem;
}

.dashboard-course-action {
    margin: 0;
    padding: 0;
}

.dashboard-course-action .button {
    min-width: 205px;
    padding: 11px 18px;
    white-space: nowrap;
}

.dashboard-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.dashboard-status-card {
    display: flex;
    min-width: 0;
    min-height: 155px;
    flex-direction: column;
    padding: 18px 19px 17px;
    background: rgba(255,255,255,.97);
    border: 1px solid #d0dfec;
    border-radius: 18px;
    box-shadow:
        0 18px 42px rgba(24, 51, 82, .16),
        0 6px 16px rgba(24, 51, 82, .10);
}

.dashboard-status-label {
    margin-bottom: 10px;
    color: var(--blue);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.dashboard-status-card strong {
    color: #22324a;
    font-size: 1.05rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.dashboard-status-card p {
    margin: 7px 0 12px;
    color: #687a91;
    font-size: .82rem;
    line-height: 1.45;
}

.dashboard-status-card a {
    margin-top: auto;
    color: var(--blue-dark);
    font-size: .82rem;
    font-weight: 850;
    text-decoration: none;
}

.dashboard-status-card a:hover,
.dashboard-status-card a:focus-visible {
    text-decoration: underline;
}

/* ============================================================
   STUDENT GROUP ACTIVITY / VIDEO REVIEW
   ============================================================ */
.wide-container {
    max-width: 1760px;
}

.group-room-head {
    margin-bottom: 20px;
}

.group-room-head h1 {
    padding-bottom: 10px;
}

.group-room-head .group-member-color-list {
    margin: 0;
    padding: 8px 26px 18px;
    background: #fff;
    gap: 9px;
}

.group-peer-review-layout {
    display: grid;
    grid-template-columns: 150px minmax(0, 1.8fr) 320px;
    gap: 22px;
    align-items: start;
}

.group-peer-main-column {
    min-width: 0;
    display: grid;
    gap: 18px;
    align-content: start;
}

.group-video-library {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: 18px;
    align-self: start;
    min-width: 0;
    max-height: calc(100vh - 36px);
    overflow: auto;
    padding: 12px 10px;
}

.group-video-library-head {
    margin-bottom: 8px;
}

.group-video-library-head h2 {
    margin: 0 0 4px;
    font-size: 1.02rem;
}

.group-video-library-head p {
    margin: 0;
    font-size: .72rem;
    line-height: 1.3;
}

.group-video-library .group-video-tile-grid-v55 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    width: 100%;
    margin-bottom: 0;
}

.group-video-library .group-video-tile,
.group-video-library .group-video-select-tile,
.group-video-library .group-video-add-tile,
.group-video-library .compact-video-tile {
    width: 100%;
    max-width: none;
    min-height: 0;
    margin-inline: 0;
}

.group-video-library .group-video-add-tile {
    min-height: 64px;
    padding: 8px 6px;
    text-align: center;
    justify-content: center;
}

.group-video-library .group-video-tile-main,
.group-video-library .compact-video-tile-main {
    width: 100%;
    min-height: 60px;
    padding: 8px 30px 8px 8px;
    justify-content: center;
}

.group-video-library .group-video-add-tile strong,
.group-video-library .group-video-tile-main strong,
.group-video-library .compact-video-tile-main strong {
    display: block;
    font-size: .74rem;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.group-video-library .review-tile-status {
    margin-top: 2px;
    font-size: .62rem;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.group-video-library .group-video-tile-actions {
    top: 5px;
    right: 4px;
    gap: 2px;
}

.group-video-library .group-video-edit-trigger,
.group-video-library .group-video-delete-button {
    width: 21px;
    height: 21px;
    font-size: .76rem;
}

.group-video-center-details,
.group-video-empty-state,
.group-overall-task-panel {
    min-width: 0;
}

.group-video-center-detail {
    padding: 20px 22px;
    border-radius: 22px;
}

.group-video-player-shell {
    width: 100%;
}

.group-video-player-shell .group-video-player,
.group-video-player {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    margin: 0;
}

.group-overall-task-panel {
    margin: 0;
    border-radius: 22px;
}

.group-peer-comments-column {
    grid-column: 3;
    grid-row: 1;
    position: sticky;
    top: 18px;
    align-self: start;
    min-width: 0;
    height: clamp(440px, calc(100vh - 360px), 680px);
    min-height: 0;
    max-height: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
    border-radius: 22px;
}

.group-peer-comments-column .group-video-comments-v55 {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.group-peer-comments-column .group-video-comments-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 10px 16px;
    min-height: 0;
    background: var(--flat-blue);
    color: #fff;
}

.group-peer-comments-column .group-video-comments-head h2 {
    margin: 0;
    color: #fff;
    font-size: 1.12rem;
    line-height: 1.15;
}

.group-peer-comments-column .comment-task-counter {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin: 8px 12px 9px;
    padding: 6px 10px;
    min-height: 0;
    border: 1px solid #efd9dd;
    border-left: 0 !important;
    border-radius: 8px;
    background: #fff7f8;
    box-shadow: none;
}

.group-peer-comments-column .comment-task-counter.complete {
    border-color: #d4ead9;
    border-left: 0 !important;
    background: #f5fbf6;
}

.group-peer-comments-column .comment-task-counter strong {
    margin: 0;
    color: #9e3140;
    font-size: .78rem;
    line-height: 1.2;
    font-weight: 750;
    white-space: nowrap;
}

.group-peer-comments-column .comment-task-counter.complete strong {
    color: #267144;
}

.group-peer-comments-column .comment-task-counter > span {
    display: none;
}

.group-peer-comments-column .complete-video-review-form {
    margin: 0;
}

.group-peer-comments-column .complete-video-review-button {
    width: auto;
    min-height: 28px;
    padding: 4px 9px;
    font-size: .74rem;
    white-space: nowrap;
}

.group-peer-comments-column .complete-video-review-button[hidden] {
    display: none !important;
}

.group-peer-comments-column .group-video-comment-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
    margin: 0;
    padding: 0 12px 8px;
}

.group-peer-comments-column .group-video-comment-card {
    padding: 8px 9px;
    border-radius: 9px;
}

.group-peer-comments-column .group-video-comment-card p {
    margin-top: 5px;
    font-size: .84rem;
    line-height: 1.35;
}

.group-peer-comments-column .group-video-comment-meta {
    font-size: .78rem;
}

.group-peer-comments-column .comment-timestamp-button {
    padding: 3px 6px;
    font-size: .7rem;
}

.group-peer-comments-column .group-video-add-comment {
    flex: 0 0 auto;
    width: calc(100% - 24px);
    margin: 0 12px 12px;
    min-height: 36px;
}

.group-peer-comments-column .group-video-comment-form {
    flex: 0 0 auto;
    margin: 0 12px 12px;
    padding-top: 8px;
}

.group-peer-comments-column .group-video-comment-form textarea {
    max-height: 96px;
}

.group-peer-comments-column .group-video-comment-form .review-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
}

.group-peer-comments-column .group-video-comment-form .review-actions > button {
    width: auto;
    min-width: 0;
    margin: 0;
    white-space: nowrap;
}

.group-peer-comments-column .group-video-comment-form [data-cancel-comment] {
    flex: 0 0 auto;
}

.group-peer-comments-column .group-video-comment-form button[type="submit"] {
    flex: 1 1 auto;
}

.video-resume-overlay[hidden] {
    display: none !important;
}

.video-resume-overlay.is-starting {
    opacity: .78;
    cursor: progress;
    pointer-events: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1320px) {
    .group-peer-review-layout {
        grid-template-columns: 135px minmax(0, 1fr) 300px;
        gap: 16px;
    }
}

@media (max-width: 1120px) {
    .group-peer-review-layout {
        grid-template-columns: 145px minmax(0, 1fr);
    }

    .group-peer-main-column {
        grid-column: 2;
        grid-row: 1;
    }

    .group-peer-comments-column {
        grid-column: 2;
        grid-row: 2;
        position: static;
        height: 520px;
        max-height: 70vh;
    }
}

@media (max-width: 900px) {
    .registration-entry-card {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto auto !important;
    }

    .registration-entry-card p {
        grid-column: 1;
        grid-row: 3;
        padding-bottom: 12px !important;
    }

    .registration-entry-card .registration-entry-button {
        grid-column: 1;
        grid-row: 4;
        margin: 0 24px 24px !important;
        justify-self: start;
    }

    .dashboard-status-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-status-card {
        min-height: 0;
    }

    .dashboard-course-footer {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .dashboard-course-action .button {
        min-width: 0;
    }
}

@media (max-width: 820px) {
    .group-peer-review-layout {
        grid-template-columns: 1fr;
    }

    .group-video-library,
    .group-peer-main-column,
    .group-peer-comments-column {
        grid-column: 1;
        grid-row: auto;
        position: static;
        max-height: none;
    }

    .group-peer-comments-column {
        height: auto;
    }

    .group-peer-comments-column .group-video-comment-list {
        max-height: 420px;
    }
}

@media (max-width: 640px) {
    .dashboard-course-overview-page{
        padding-top: 14px;
    }

    .registration-entry-card,
.dashboard-progress-strip,
.dashboard-course-overview,
.dashboard-status-card{
        border-radius: 15px;
    }

    .dashboard-progress-strip-head,
    .dashboard-progress-strip-foot {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .dashboard-course-head {
        padding: 18px 20px;
    }

    .dashboard-course-content {
        padding: 20px;
    }
}

/* ENDE: 320-pc-ui-refresh.css */

/* START: 321-pc-layout-tightening.css */
/* PC branch 274 – Verdichtung Dashboard/Kursansicht + vereinfachte Videokacheln */

/* ------------------------------------------------------------
   Dashboard – etwas schmaler, gleichmäßig eingerückt
   ------------------------------------------------------------ */
.dashboard-course-overview-page {
    max-width: 1080px;
}

.dashboard-progress-strip,
.dashboard-course-overview,
.dashboard-status-grid {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.dashboard-course-copy {
    max-width: 860px;
}

/* ------------------------------------------------------------
   Mein Kurs – deutlich kompakter, alle Karten gleich breit
   ------------------------------------------------------------ */
.my-course-page {
    max-width: 1080px;
}

.my-course-hero,
.my-course-section {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* ------------------------------------------------------------
   Gruppenraum – vereinfachte, quadratische Videoübersicht
   ------------------------------------------------------------ */
.group-peer-review-layout {
    grid-template-columns: 176px minmax(0, 1.7fr) 320px;
    gap: 22px;
}

.group-video-library {
    padding: 14px 12px 16px;
}

.group-video-library-head h2 {
    margin-bottom: 2px;
}

.group-video-library-head p {
    font-size: .74rem;
    line-height: 1.35;
}

.group-video-library .group-video-tile-grid-v55 {
    gap: 10px;
}

.group-video-library .group-video-select-tile,
.group-video-library .group-video-add-tile {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 0;
    padding: 0;
    border-radius: 18px;
    border: 1px solid #cfe0ef;
    background: #ffffff;
    box-shadow: 0 10px 22px rgba(24, 51, 82, .08);
}

.group-video-library .group-video-select-tile.active {
    border-color: rgba(30,115,190,.52);
    box-shadow: 0 14px 28px rgba(35, 88, 144, .16);
}

.group-video-library .group-video-add-tile {
    display: flex;
    justify-content: stretch;
}

.group-video-library .group-video-tile-main,
.group-video-library .group-video-add-tile {
    width: 100%;
    min-height: 100%;
    padding: 10px;
}

.group-video-library .group-video-tile-main {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
    justify-items: stretch;
    background: transparent;
    border: 0;
    text-align: left;
}

.group-video-library .group-video-add-tile {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
    justify-items: stretch;
    text-align: left;
}

.group-video-preview-frame,
.group-video-add-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fbfe, #eaf1f7);
    overflow: hidden;
}

.group-video-preview-frame {
    border: 1px solid #d6e2ee;
    aspect-ratio: 1 / 1;
}

.group-video-preview-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.group-video-preview-frame::before {
    content: "";
    position: absolute;
    inset: auto auto 10px 10px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(17, 24, 39, .62);
    backdrop-filter: blur(3px);
    box-shadow: 0 6px 12px rgba(0,0,0,.16);
    z-index: 1;
}

.group-video-preview-frame::after {
    content: "";
    position: absolute;
    left: 22px;
    bottom: 18px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid #ffffff;
    z-index: 2;
}

.group-video-preview-frame.is-ready::before,
.group-video-preview-frame.is-ready::after {
    opacity: 1;
}

.group-video-preview-frame.is-loading::after {
    border: 0;
    width: 11px;
    height: 11px;
    left: 19px;
    bottom: 18px;
    border-radius: 999px;
    background: #ffffff;
}

.group-video-library .group-video-add-inner {
    border: 1px dashed #d4dce7;
    background: linear-gradient(180deg, #fbfcfe, #f1f4f9);
}

.group-video-library .group-video-add-icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.82);
    color: #8f99a8;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 6px 16px rgba(24, 51, 82, .08);
}

.group-video-library .group-video-tile-label {
    display: block;
    color: #24354a;
    font-size: .82rem;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.group-video-library .group-video-add-tile .group-video-tile-label {
    color: #7b8796;
}

.group-video-library .group-video-tile-actions {
    top: 8px;
    right: 8px;
    gap: 5px;
}

.group-video-library .group-video-edit-trigger,
.group-video-library .group-video-delete-button {
    width: 24px;
    height: 24px;
    font-size: .8rem;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 3px 10px rgba(20, 36, 54, .14);
}

.group-video-library .review-tile-status {
    display: none !important;
}

@media (max-width: 1320px) {
    .group-peer-review-layout {
        grid-template-columns: 164px minmax(0, 1fr) 300px;
    }
}

@media (max-width: 1120px) {
    .group-peer-review-layout {
        grid-template-columns: 168px minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .dashboard-course-overview-page,
    .my-course-page {
        max-width: none;
    }

    .group-peer-review-layout {
        grid-template-columns: 1fr;
    }

    .group-video-library {
        position: static;
        max-height: none;
    }

    .group-video-library .group-video-tile-grid-v55 {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}


/* PC branch 275 – echte proportionale Breiten statt wirkungsloser max-width-Werte */
@media (min-width: 901px) {
    body > main.container.dashboard-course-overview-page {
        width: 75% !important;
        max-width: 1080px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body > main.container.my-course-page {
        width: 75% !important;
        max-width: 1080px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .dashboard-progress-strip,
    .dashboard-course-overview,
    .dashboard-status-grid,
    .my-course-hero,
    .my-course-section {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 900px) {
    body > main.container.dashboard-course-overview-page,
    body > main.container.my-course-page {
        width: auto !important;
        max-width: none !important;
    }
}

/* ENDE: 321-pc-layout-tightening.css */

/* START: 322-pc-followup-fixes.css */
/* PC branch 276 – Nachbesserungen Videos, Dozenten-Dashboard, Kurskarten, Lernmodulbilder */

/* ------------------------------------------------------------
   1. Gruppenraum – Videokacheln mit Titelkopf und gefüllter Vorschau
   ------------------------------------------------------------ */
.group-video-library .group-video-select-tile,
.group-video-library .group-video-add-tile {
    display: block;
    overflow: hidden;
}

.group-video-library .group-video-tile-main,
.group-video-library .group-video-add-tile {
    padding: 0;
    gap: 0;
    overflow: hidden;
}

.group-video-library .group-video-tile-main {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    justify-items: stretch;
    height: 100%;
}

.group-video-library .group-video-add-tile {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    justify-items: stretch;
    text-align: left;
}

.group-video-library .group-video-tile-namebar {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 9px 12px;
    background: linear-gradient(180deg, #f8fbfe 0%, #eef4fa 100%);
    border-bottom: 1px solid #d7e4ef;
    color: #24354a;
    font-size: .86rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
}

.group-video-library .group-video-tile-namebar-add {
    color: #6c7a8c;
}

.group-video-library .group-video-preview-frame,
.group-video-library .group-video-add-inner {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: linear-gradient(180deg, #eef3f8, #dfe8f1);
}

.group-video-library .group-video-preview-frame {
    aspect-ratio: auto;
}

.group-video-library .group-video-preview-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.group-video-library .group-video-add-inner {
    border: 0;
    background: linear-gradient(180deg, #fbfcfe, #eef2f7);
}

.group-video-library .group-video-add-icon {
    width: 52px;
    height: 52px;
    font-size: 2rem;
}

.group-video-library .group-video-preview-frame::before {
    inset: auto auto 12px 12px;
}

.group-video-library .group-video-preview-frame::after {
    left: 24px;
    bottom: 20px;
}

.group-video-library .group-video-preview-frame.is-loading::after {
    left: 21px;
    bottom: 20px;
}

.group-video-library .review-tile-status,
.group-video-library .group-video-tile-label {
    display: none !important;
}

/* ------------------------------------------------------------
   2. Dozenten-Dashboard – Inhalte in den Kacheln mittig ausrichten
   ------------------------------------------------------------ */
.lecturer-dashboard-grid .simple-dashboard-card {
    align-items: center;
    text-align: center;
}

.lecturer-dashboard-grid .simple-dashboard-card > :not(h2) {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.lecturer-dashboard-grid .simple-dashboard-card .big {
    width: 100%;
}

.lecturer-dashboard-grid .simple-dashboard-card .muted {
    max-width: 28ch;
}

.lecturer-dashboard-grid .simple-dashboard-card .button {
    align-self: center;
}

/* ------------------------------------------------------------
   3. Kursverwaltung – durchgehender Kartenkopf im blauen Schema
   ------------------------------------------------------------ */
.course-management-page > .panel,
.course-admin-summary-grid > .panel {
    overflow: hidden;
    padding-top: 0;
}

.course-management-page > .panel > h2,
.course-admin-summary-grid > .panel > h2,
.course-management-page > .panel > .panel-title-row,
.course-admin-summary-grid > .panel > .panel-title-row {
    margin: 0 -24px 18px;
    padding: 18px 20px;
    background: #fff !important;
    color: #233d59 !important;
    border-bottom: 1px solid #dce6ef;
}

.course-management-page > .panel > h2,
.course-admin-summary-grid > .panel > h2 {
    font-size: 1.1rem;
    line-height: 1.25;
}

.course-management-page > .panel > .panel-title-row,
.course-admin-summary-grid > .panel > .panel-title-row {
    align-items: flex-start;
    gap: 14px;
}

.course-management-page > .panel > .panel-title-row h2,
.course-admin-summary-grid > .panel > .panel-title-row h2 {
    margin: 0;
    color: #233d59 !important;
}

.course-management-page > .panel > .panel-title-row .muted,
.course-admin-summary-grid > .panel > .panel-title-row .muted {
    color: #435b75 !important;
}

.course-management-page > .panel > .panel-title-row .badge,
.course-admin-summary-grid > .panel > .panel-title-row .badge {
    align-self: flex-start;
}

/* ------------------------------------------------------------
   4. Lernmodulübersicht – Illustrationen vollständig sichtbar
   ------------------------------------------------------------ */
.learning-area-card-grid .module-card-image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 186px;
    height: 186px;
    padding-top: 10px;
    padding-bottom: 8px;
    overflow: visible;
}

.learning-area-card-grid .learning-overview-image,
.learning-area-card-grid .module-card-image {
    display: block;
    width: auto;
    max-width: 88%;
    max-height: 158px;
    object-fit: contain;
}

/* ENDE: 322-pc-followup-fixes.css */

/* START: 323-pc-optical-polish.css */
/* PC branch 277 – optischer Feinschliff für Dashboards, Gruppen und Kursansichten */

/* ------------------------------------------------------------
   1. Dozenten- und Admin-Dashboard: volle Kopfzeile, zentrierter Inhalt
   ------------------------------------------------------------ */
.lecturer-dashboard-grid,
.admin-simple-grid {
    gap: 14px;
}

.lecturer-dashboard-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.lecturer-dashboard-grid .simple-dashboard-card,
.admin-simple-grid .simple-dashboard-card {
    align-items: center;
    min-height: 230px;
    padding-bottom: 18px;
    text-align: center;
}

.lecturer-dashboard-grid .simple-dashboard-card h2,
.admin-simple-grid .simple-dashboard-card h2 {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 15px 16px;
    text-align: left;
    align-self: stretch;
}

.lecturer-dashboard-grid .simple-dashboard-card > :not(h2),
.admin-simple-grid .simple-dashboard-card > :not(h2) {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.lecturer-dashboard-grid .simple-dashboard-card .big,
.admin-simple-grid .simple-dashboard-card .big {
    width: 100%;
    margin-top: 20px;
}

.lecturer-dashboard-grid .simple-dashboard-card .muted,
.admin-simple-grid .simple-dashboard-card .muted {
    max-width: 26ch;
}

.lecturer-dashboard-grid .simple-dashboard-card .button,
.admin-simple-grid .simple-dashboard-card .button {
    align-self: center;
}

@media (max-width: 1180px) {
    .lecturer-dashboard-grid,
    .admin-simple-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ------------------------------------------------------------
   2. Gruppenraum: blauen Kopf um ca. 2 mm nach unten erweitern
   ------------------------------------------------------------ */
.group-room-head h1 {
    padding-bottom: 18px;
}

/* ------------------------------------------------------------
   3. Gruppenabgaben: nur die Überschrift im blauen Kopfbereich
   ------------------------------------------------------------ */
.group-submission-card {
    overflow: hidden;
    padding: 0 20px 18px;
}

.group-submission-card-head {
    margin: 0 -20px 0;
    padding: 16px 20px 14px;
    background: #fff;
    color: #233d59;
    border-bottom: 1px solid #dce6ef;
}

.group-submission-card-head h2 {
    margin: 0;
    color: #233d59;
}

.group-submission-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 12px;
    margin-bottom: 10px;
}

.group-submission-meta-row p {
    margin: 0;
}

/* ------------------------------------------------------------
   4. Gruppenlisten: eine kompakte horizontale Zeile pro Gruppe
   ------------------------------------------------------------ */
.group-card-grid {
    grid-template-columns: 1fr;
    gap: 10px;
}

.group-card-grid .group-card {
    display: grid;
    grid-template-columns: minmax(260px, 1.5fr) minmax(150px, .8fr) auto auto auto;
    align-items: center;
    gap: 18px;
    min-height: 0;
    padding: 13px 16px;
}

.group-card-grid .group-card .eyebrow,
.group-card-grid .group-card h3,
.group-card-grid .group-card > p.muted,
.group-card-grid .group-card > .badge,
.group-card-grid .group-card-actions {
    margin: 0;
}

.group-card-grid .group-card .eyebrow {
    grid-column: 1;
    grid-row: 1;
    font-size: .72rem;
    line-height: 1.2;
}

.group-card-grid .group-card h3 {
    grid-column: 2;
    grid-row: 1;
    font-size: 1rem;
}

.group-card-grid .group-card > p.muted {
    grid-column: 3;
    grid-row: 1;
    white-space: nowrap;
}

.group-card-grid .group-card > .badge {
    grid-column: 4;
    grid-row: 1;
    white-space: nowrap;
}

.group-card-grid .group-card-actions {
    grid-column: 5;
    grid-row: 1;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    white-space: nowrap;
}

/* Studentenseite ohne Kurs-Eyebrow bleibt ebenfalls in einer Zeile. */
.group-card-grid .group-card:not(:has(.eyebrow)) {
    grid-template-columns: minmax(220px, 1fr) auto auto auto;
}

.group-card-grid .group-card:not(:has(.eyebrow)) h3 {
    grid-column: 1;
}

.group-card-grid .group-card:not(:has(.eyebrow)) > p.muted {
    grid-column: 2;
}

.group-card-grid .group-card:not(:has(.eyebrow)) > .badge {
    grid-column: 3;
}

.group-card-grid .group-card:not(:has(.eyebrow)) .group-card-actions {
    grid-column: 4;
}

@media (max-width: 1050px) {
    .group-card-grid .group-card,
    .group-card-grid .group-card:not(:has(.eyebrow)) {
        grid-template-columns: 1fr auto;
        gap: 8px 14px;
    }

    .group-card-grid .group-card .eyebrow,
    .group-card-grid .group-card h3,
    .group-card-grid .group-card:not(:has(.eyebrow)) h3 {
        grid-column: 1;
    }

    .group-card-grid .group-card > p.muted,
    .group-card-grid .group-card:not(:has(.eyebrow)) > p.muted {
        grid-column: 1;
        grid-row: auto;
    }

    .group-card-grid .group-card > .badge,
    .group-card-grid .group-card:not(:has(.eyebrow)) > .badge {
        grid-column: 2;
        grid-row: 1;
    }

    .group-card-grid .group-card-actions,
    .group-card-grid .group-card:not(:has(.eyebrow)) .group-card-actions {
        grid-column: 2;
        grid-row: 2 / span 2;
    }
}


/* Patch 349: kompaktere Dozentenansicht fuer Gruppenaktivitaeten */
.group-submission-list {
    gap: 10px;
}

.group-submission-summary-card,
.lecturer-group-submission-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    margin: 8px 0 0;
    border: 1px solid #dfe6ee;
    border-radius: 3px;
    background: #f8fafc;
}

.group-submission-summary-card p {
    margin: 0;
}

.group-submission-action-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.group-submission-action-buttons .button {
    margin: 0;
}

@media (max-width: 820px) {
    .group-submission-summary-card,
    .lecturer-group-submission-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .group-submission-action-buttons {
        justify-content: flex-start;
    }
}

/* ENDE: 323-pc-optical-polish.css */

/* START: 324-pc-group-admin-overhaul.css */
/* PC 278: Login-/Registrierungs-Finetuning, Gruppenraum und neue Gruppenzuteilung */





.public-course-detail-centered {
    max-width: 980px;
    margin-inline: auto;
}

.centered-course-detail-card {
    max-width: 920px;
    margin-inline: auto;
}

.centered-course-detail-card > .eyebrow,
.centered-course-detail-card > h1,
.centered-course-detail-card > .muted {
    text-align: center;
}

.centered-course-enrollment-box {
    max-width: 620px;
    margin: 2rem auto 0;
}

.group-video-add-circle {
    width: 100%;
    min-height: 94px;
    border: 1px dashed rgba(44, 93, 156, 0.35);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0.5rem;
    padding: 0.4rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.group-video-add-circle:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(16, 30, 54, 0.08);
    border-color: rgba(44, 93, 156, 0.55);
}

.group-video-add-circle.disabled,
.group-video-add-circle:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.group-video-add-circle .group-video-add-icon {
    width: 58px;
    height: 58px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(196, 208, 228, 0.92);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    line-height: 1;
    color: #7e8aa0;
}

.compact-upload-stack {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.group-video-tile-actions-overlay {
    position: absolute;
    top: 3.2rem;
    right: 0.55rem;
    z-index: 3;
}

.group-video-select-tile {
    position: relative;
}

.compact-video-meta-bar {
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.95rem;
    background: #f4f6fa;
    border: 1px solid #d9e0ec;
    border-radius: 12px;
}

.video-meta-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.video-meta-toolbar-actions form {
    margin: 0;
}

.compact-video-meta-table-open {
    margin-top: 0.75rem;
}

.group-builder-panel-head {
    margin-bottom: 1rem;
}

.group-builder-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.group-builder-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 1.25rem;
    align-items: stretch;
}

.group-builder-column {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.group-builder-search-label,
.group-builder-top-row label,
.group-random-builder label {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-weight: 700;
    color: #22324c;
}

.group-builder-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
}

.group-student-list {
    list-style: none;
    margin: 0;
    padding: 0.7rem;
    min-height: 26rem;
    border: 1px solid #c7d4e7;
    border-radius: 18px;
    background: rgba(247, 250, 255, 0.9);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    overflow-y: auto;
}

.group-student-list.drag-over {
    border-color: #2d68ad;
    box-shadow: inset 0 0 0 2px rgba(45, 104, 173, 0.12);
}

.group-student-item {
    border: 1px solid #d4deed;
    border-radius: 14px;
    background: #fff;
    padding: 0.8rem 0.9rem;
    cursor: pointer;
    user-select: none;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    box-shadow: 0 8px 18px rgba(20, 38, 63, 0.04);
}

.group-student-item strong {
    color: #24324a;
}

.group-student-item span {
    color: #6b7484;
    font-size: 0.92rem;
}

.group-student-item.is-selected {
    border-color: #2d68ad;
    background: #eef4ff;
}

.group-student-item.is-hidden {
    display: none;
}

.group-builder-arrows {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.8rem;
}

.group-arrow-button {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 999px;
    border: 1px solid #abc0df;
    background: #fff;
    color: #2d68ad;
    font-size: 1.45rem;
    font-weight: 800;
    box-shadow: 0 8px 16px rgba(20, 38, 63, 0.06);
}

.group-builder-member-box {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.group-builder-member-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    color: #22324c;
}

.group-builder-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.group-builder-inline-actions-right {
    justify-content: flex-end;
}

.group-random-builder {
    border: 1px solid #d6e0ef;
    border-radius: 16px;
    background: rgba(247, 250, 255, 0.9);
    padding: 1rem;
    display: flex;
    align-items: flex-end;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.group-random-builder[hidden] {
    display: none !important;
}

.group-random-builder label {
    flex: 1 1 280px;
}

.compact-group-overview-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.group-overview-row {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) auto auto;
    gap: 1rem;
    align-items: center;
    border: 1px solid #d6dfec;
    border-radius: 3px;
    padding: 1rem 1.15rem;
    background: #fff;
}

.group-overview-row .group-overview-main h3 {
    margin: 0;
}

.group-overview-row .group-overview-main .eyebrow,
.group-overview-row .group-overview-main .muted {
    margin: 0.15rem 0;
}

.group-overview-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

@media (max-width: 1100px) {
    

    .group-builder-columns {
        grid-template-columns: 1fr;
    }

    .group-builder-arrows {
        flex-direction: row;
        justify-content: center;
    }

    .group-builder-top-row,
    .group-overview-row {
        grid-template-columns: 1fr;
    }

    .group-builder-inline-actions-right,
    .group-overview-actions {
        justify-content: flex-start;
    }
}

/* ENDE: 324-pc-group-admin-overhaul.css */

/* START: 325-pc-precise-followup.css */
/* PC 279: präzise Nachkorrektur nach Screenshot-Skizzen */

/* Registrierung: inneres Registrierungsfeld exakt zentrieren. */
.centered-course-detail-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.centered-course-detail-card > .eyebrow,
.centered-course-detail-card > h1,
.centered-course-detail-card > .muted,
.centered-course-detail-card > .alert {
    width: 100%;
    box-sizing: border-box;
}

.centered-course-enrollment-box {
    width: min(620px, calc(100% - 48px));
    max-width: 620px;
    margin: 2rem auto 0 !important;
    align-self: center;
    box-sizing: border-box;
}

/* Gruppenraum: nur noch der einzelne Plus-Kreis, ohne Außenkachel. */
.group-video-add-circle {
    width: 54px !important;
    height: 54px !important;
    min-height: 0 !important;
    margin: 2px auto 18px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    display: grid !important;
    place-items: center !important;
}

.group-video-add-circle:hover:not(:disabled) {
    transform: none !important;
    box-shadow: none !important;
}

.group-video-add-circle .group-video-add-icon {
    width: 46px !important;
    height: 46px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #f1f4f8 !important;
    color: #98a2b1 !important;
    font-size: 1.75rem !important;
    box-shadow: 0 5px 14px rgba(20, 38, 63, .08);
}

/* Bearbeiten/Löschen bei der kleinen Videokachel unten rechts. */
.group-video-tile-actions-overlay {
    top: auto !important;
    right: 7px !important;
    bottom: 7px !important;
    left: auto !important;
    z-index: 4 !important;
}

.group-video-tile-actions-overlay .group-video-edit-trigger,
.group-video-tile-actions-overlay .group-video-delete-button {
    width: 25px !important;
    height: 25px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 2px 7px rgba(10, 25, 45, .13);
}

/* Videoinformationen wieder einklappbar; Aktionsbuttons bleiben in der grauen Kopfzeile. */
.video-meta-details-with-actions {
    position: relative;
    margin: 0 0 10px !important;
    overflow: hidden;
}

.video-meta-details-with-actions > summary {
    min-height: 38px;
    padding: 9px 170px 9px 12px !important;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.video-meta-details-with-actions > summary > span {
    font-weight: 750;
}

.video-meta-toolbar-actions-floating {
    position: absolute;
    top: 5px;
    right: 7px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 5px;
}

.video-meta-toolbar-actions-floating form {
    margin: 0;
}

.video-meta-toolbar-actions-floating .button,
.video-meta-toolbar-actions-floating button {
    min-height: 27px;
    padding: 5px 9px;
    font-size: .74rem;
    line-height: 1;
}

.video-meta-details-with-actions:not([open]) > .compact-video-meta-table {
    display: none;
}

/* Gruppenzuteilung exakt als zwei gleichwertige Arbeitsfenster mit Pfeilen dazwischen. */
.group-builder-panel-sketch {
    max-width: 1040px;
    margin-inline: auto;
}

.group-builder-panel-sketch .group-builder-panel-head {
    margin-bottom: 18px;
}

.group-builder-panel-sketch .group-builder-panel-head h2 {
    margin-bottom: 5px;
}

.group-builder-columns-sketch {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: stretch !important;
}

.group-builder-columns-sketch .group-builder-column {
    display: grid;
    grid-template-rows: 46px 370px auto auto;
    gap: 8px;
}

.group-builder-top-input {
    width: 100%;
    height: 46px;
    margin: 0 !important;
    padding: 0 14px;
    box-sizing: border-box;
    border: 1px solid #b8c9df;
    border-radius: 8px;
    background: #fff;
    color: #20324b;
    font: inherit;
}

.group-builder-top-input::placeholder {
    color: #356fb2;
    opacity: 1;
}

.group-student-list-sketch {
    min-height: 0 !important;
    height: 370px;
    max-height: 370px;
    margin: 0 !important;
    padding: 9px !important;
    box-sizing: border-box;
    border: 1px solid #b8c9df !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow-y: auto;
}

.group-student-list-sketch .group-student-item {
    padding: 9px 11px;
    border-radius: 8px;
    box-shadow: none;
}

.group-student-list-sketch .group-student-item + .group-student-item {
    margin-top: 1px;
}

.group-builder-arrows-sketch {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    padding-top: 46px;
    padding-bottom: 46px;
}

.group-builder-arrows-sketch .group-arrow-button {
    width: 56px;
    height: 40px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: #3975b9;
    font-size: 2.2rem;
    line-height: 1;
    padding: 0;
}

.group-builder-bottom-actions {
    display: grid !important;
    gap: 8px !important;
    margin: 0 !important;
}

.group-builder-bottom-actions-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.group-builder-bottom-actions-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.group-builder-bottom-actions > button,
.group-builder-bottom-actions > .button {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    margin: 0 !important;
    padding: 8px 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
}

.group-random-builder-sketch {
    grid-row: 4;
    width: 100%;
    box-sizing: border-box;
    margin-top: 2px;
}

/* Bestehende Gruppe: Auswahl bleibt außerhalb der Skizzenfläche und öffnet sich nur auf Wunsch. */
.existing-group-dialog {
    width: min(460px, calc(100vw - 36px));
    padding: 0;
    border: 1px solid #c9d7e8;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15, 32, 56, .28);
}

.existing-group-dialog::backdrop {
    background: rgba(17, 29, 48, .38);
}

.existing-group-dialog-card {
    padding: 20px;
}

.existing-group-dialog-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.existing-group-dialog-head h3 {
    margin: 3px 0 0;
}

.existing-group-dialog-card label {
    display: grid;
    gap: 7px;
    font-weight: 750;
}

.existing-group-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 18px;
}

@media (max-width: 900px) {
    .group-builder-columns-sketch {
        grid-template-columns: 1fr !important;
    }

    .group-builder-columns-sketch .group-builder-column {
        grid-template-rows: 46px minmax(300px, auto) auto auto;
    }

    .group-student-list-sketch {
        height: 320px;
        max-height: 320px;
    }

    .group-builder-arrows-sketch {
        flex-direction: row !important;
        padding: 0;
    }

    .group-builder-bottom-actions-three,
    .group-builder-bottom-actions-two {
        grid-template-columns: 1fr;
    }
}

/* PC 280: Gruppenzuteilung kompakt – Eingabe, Liste und Buttons direkt untereinander. */
.group-builder-columns-sketch {
    align-items: start !important;
}

.group-builder-columns-sketch .group-builder-column {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-content: flex-start !important;
    gap: 8px !important;
    min-width: 0;
}

.group-builder-columns-sketch .group-builder-top-input {
    flex: 0 0 46px;
    margin: 0 !important;
}

.group-builder-columns-sketch .group-student-list-sketch {
    flex: 0 0 350px;
    width: 100%;
    height: 350px !important;
    min-height: 350px !important;
    max-height: 350px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 1px solid #b8c9df !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-sizing: border-box;
    gap: 0 !important;
    overflow-y: auto;
}

.group-builder-columns-sketch .group-student-item {
    display: block !important;
    width: 100%;
    margin: 0 !important;
    padding: 11px 4px !important;
    border: 0 !important;
    border-bottom: 1px solid #e1e7f0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #22324a;
    line-height: 1.2;
}

.group-builder-columns-sketch .group-student-item:last-child {
    border-bottom: 0 !important;
}

.group-builder-columns-sketch .group-student-item strong {
    display: block;
    font-size: .95rem;
    font-weight: 700;
    color: #22324a;
}

.group-builder-columns-sketch .group-student-item span {
    display: none !important;
}

.group-builder-columns-sketch .group-student-item.is-selected {
    background: #eef5ff !important;
    color: #174f8f;
}

.group-builder-arrows-sketch {
    align-self: start !important;
    height: 350px !important;
    margin-top: 54px !important;
    padding: 0 !important;
    justify-content: center !important;
}

.group-builder-bottom-actions {
    flex: 0 0 auto;
    margin-top: 0 !important;
}

.group-builder-bottom-actions-two,
.group-builder-bottom-actions-three {
    gap: 8px !important;
}

.group-builder-bottom-actions > button,
.group-builder-bottom-actions > .button {
    min-height: 46px !important;
    height: 46px;
    padding: 7px 8px !important;
    border-radius: 9px !important;
    font-size: .76rem !important;
    line-height: 1.08 !important;
    font-weight: 750;
    white-space: nowrap !important;
}

.group-random-builder-sketch {
    margin-top: 0 !important;
}

@media (max-width: 900px) {
    .group-builder-columns-sketch .group-builder-column {
        display: flex !important;
    }

    .group-builder-arrows-sketch {
        height: auto !important;
        margin-top: 0 !important;
        flex-direction: row !important;
    }

    .group-builder-bottom-actions-two,
    .group-builder-bottom-actions-three {
        grid-template-columns: 1fr !important;
    }

    .group-builder-bottom-actions > button,
    .group-builder-bottom-actions > .button {
        white-space: normal !important;
    }
}

/* Patch 315: Loading-UI für neue Gruppen-Videovorschau und Upload-Hinweis. */
.group-video-library .group-video-preview-frame.is-loading img,
.group-video-library .group-video-preview-frame.is-failed img {
    visibility: hidden;
    opacity: 0;
}
.group-video-library .group-video-preview-frame.is-ready img {
    visibility: visible;
    opacity: 1;
}
.group-video-library .group-video-preview-frame.is-loading::before {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 36px;
    height: 36px;
    transform: translate(-50%, -50%);
    border: 4px solid rgba(50, 111, 177, .18);
    border-top-color: #286db7;
    border-right-color: #286db7;
    border-radius: 50%;
    background: none;
    backdrop-filter: none;
    box-shadow: none;
    animation: cp-video-preview-spin 850ms linear infinite;
    z-index: 2;
}
.group-video-library .group-video-preview-frame.is-loading::after {
    display: none;
}
.group-video-library .group-video-preview-frame.is-failed::before {
    display: none;
}
.group-video-library .group-video-preview-frame.is-failed::after {
    content: "Vorschau nicht verfügbar";
    display: flex;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    padding: 10px;
    border: 0;
    color: #435671;
    font-size: .76rem;
    font-weight: 650;
    line-height: 1.3;
    text-align: center;
    background: transparent;
}
@keyframes cp-video-preview-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Nur wenn die Videoliste leer ist: ruhiger weißer Orientierungsring. */
.group-video-add-circle.is-empty-hint:not(:disabled) { position: relative; }
.group-video-add-circle.is-empty-hint:not(:disabled)::before {
    content: "";
    position: absolute;
    inset: -5px;
    border: 3px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(35, 91, 159, .25);
    pointer-events: none;
    animation: cp-video-add-orbit 2s linear infinite;
}
.group-video-add-circle.is-empty-hint .group-video-add-icon { position: relative; z-index: 1; }
@keyframes cp-video-add-orbit { to { transform: rotate(360deg); } }
/* Kurzer Erfolgs-Hinweis am oberen Bildschirmrand nach dem Seitenwechsel. */
.group-video-success-toast {
    position: fixed;
    top: 104px;
    right: 22px;
    z-index: 2500;
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-width: min(92vw, 430px);
    padding: 12px 18px;
    border: 1px solid #a5d8b4;
    border-radius: 12px;
    color: #174d2d;
    background: #f0fbf3;
    box-shadow: 0 12px 28px rgba(20, 50, 35, .14);
    pointer-events: none;
}
.group-video-success-toast strong { font-size: .94rem; }
.group-video-success-toast span { font-size: .8rem; }
@media (max-width: 640px) {
    .group-video-success-toast { top: 72px; right: 12px; left: 12px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
    .group-video-library .group-video-preview-frame.is-loading::before,
    .group-video-add-circle.is-empty-hint:not(:disabled)::before { animation: none; }
}

/* ENDE: 325-pc-precise-followup.css */

/* START: 283-public-login.css */
/*
 * Öffentliche Anmeldung – konsolidiertes Login-Layout (Patch 339).
 * Ziel: näher am freigegebenen Mockup, ohne zusätzliche Altregeln aufzubauen.
 * Historische Login-Sonderregeln bleiben entfernt; nur diese Datei steuert die
 * Anmeldeseite als eigenständige Oberfläche.
 */

/* Die Anmeldeseite nutzt direkt .dashboard-course-overview-page für die
   Bühnenbreite. Keine separate 760-px-Regel und keine Mindesthöhe mehr. */
body.public-login-route main.login-only-page {
  margin-top: 34px;
  margin-bottom: 34px;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 40px;
}

body.public-login-route .public-login-card {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  background: #ffffff;
  border: 1px solid #c9d8e8;
  border-radius: 2px !important;
  box-shadow: 0 6px 18px rgba(20,45,76,.08),
    0 24px 46px rgba(20,45,76,.10) !important;
  overflow: hidden;
}

body.public-login-route .public-login-heading {
  padding: 30px 32px 27px;
  background: linear-gradient(90deg, rgba(16,91,170,.94), rgba(29,109,187,.76)),
              url("../images/backgrounds/campus-hero-339.webp") center right / cover no-repeat;
  border-bottom: 0;
}

body.public-login-route .public-login-heading > .eyebrow {
  margin: 0 0 8px;
  padding: 0;
  color: #e1efff !important;
  background: transparent;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.public-login-route .public-login-heading h1 {
  margin: 0 0 8px;
  padding: 0;
  background: transparent;
  color: #ffffff !important;
  font-size: clamp(2rem, 3vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
}

body.public-login-route .public-login-heading .public-login-intro {
  margin: 0;
  padding: 0;
  max-width: 600px;
  color: #eaf3fc !important;
  font-size: .97rem;
  line-height: 1.55;
}

body.public-login-route .public-login-card > .alert {
  margin: 0 32px 0;
  padding: 12px 14px;
  border-radius: 2px !important;
  font-size: .91rem;
  line-height: 1.5;
}

body.public-login-route .public-login-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 18px 32px 0;
  padding: 24px 0 0;
  border-top: 1px solid #d7e3ee;
}

body.public-login-route .public-login-form > label {
  display: grid;
  gap: 8px;
  margin: 0;
  color: #203a56;
  font-size: .95rem;
  font-weight: 650;
}

body.public-login-route .public-login-form input:not([type='hidden']) {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 11px 13px;
  border: 1px solid #b8cada;
  border-radius: 2px !important;
  background: #ffffff;
  box-shadow: inset 0 1px 2px rgba(22,48,78,.03);
  color: #142b45;
  font-size: 1rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}

body.public-login-route .public-login-form input:not([type='hidden']):focus {
  outline: none;
  border-color: #2c6cac;
  box-shadow: 0 0 0 3px rgba(46,114,178,.16);
}

body.public-login-route .public-login-form input::placeholder {
  color: #75859a !important;
  opacity: 1;
}

body.public-login-route .public-login-actions {
  display: block;
  margin-top: 4px;
}

body.public-login-route .public-login-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  padding: 12px 18px;
  margin: 0;
  border: 1px solid #2b639d;
  border-radius: 2px !important;
  background: #1268b8;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: none;
}

body.public-login-route .public-login-submit:hover,
body.public-login-route .public-login-submit:focus-visible {
  background: #0f589c;
  border-color: #244c79;
  color: #fff;
}

body.public-login-route .public-login-submit span {
  font-size: 1.15rem;
  line-height: 1;
}

body.public-login-route .public-login-support-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 12px 32px 0;
  padding: 0 0 18px;
}

body.public-login-route .public-login-reset-link,
body.public-login-route .login-course-request-button {
  color: #2b5f95;
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
}

body.public-login-route .public-login-reset-link:hover,
body.public-login-route .public-login-reset-link:focus-visible,
body.public-login-route .login-course-request-button:hover,
body.public-login-route .login-course-request-button:focus-visible {
  color: #1d4d7f;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.public-login-route .login-course-request-card {
  display: block;
  margin: 0 32px;
  padding: 18px 0 16px;
  background: transparent;
  border: 0;
  border-top: 1px solid #dfe8f1;
  border-radius: 0 !important;
  box-shadow: none;
}

body.public-login-route .login-course-request-copy {
  display: grid;
  gap: 4px;
}

body.public-login-route .login-course-request-copy strong {
  color: #203b58;
  font-size: .92rem;
  font-weight: 700;
}

body.public-login-route .login-course-request-copy span {
  color: #51687d;
  font-size: .88rem;
  line-height: 1.45;
}

body.public-login-route .test-login-panel.compact {
  margin: 0;
  padding: 16px 32px 18px;
  border-top: 1px solid #dfe8f1;
  background: #fbfdff;
}

body.public-login-route .test-login-panel.compact summary {
  cursor: pointer;
  color: #355674;
  font-size: .86rem;
  font-weight: 650;
}

body.public-login-route .test-login-panel.compact p {
  margin: 12px 0;
  color: #4b6278;
  font-size: .84rem;
  line-height: 1.45;
}

body.public-login-route .test-login-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

body.public-login-route .test-login-grid button {
  min-height: 36px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 2px !important;
}

@media (max-width: 700px) {
  body.public-login-route main.login-only-page {
    min-height: 0;
    padding-top: 0;
    padding-bottom: 36px;
  }

  body.public-login-route .public-login-heading {
    padding: 23px 16px;
  }

  body.public-login-route .public-login-form {
    margin: 16px 16px 0;
    padding-top: 20px;
  }

  body.public-login-route .public-login-card > .alert,
  body.public-login-route .public-login-support-row,
  body.public-login-route .login-course-request-card,
  body.public-login-route .test-login-panel.compact {
    margin-left: 16px;
    margin-right: 16px;
  }

  body.public-login-route .public-login-card > .alert {
    margin-top: 0;
  }

  body.public-login-route .public-login-support-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 16px;
  }

  body.public-login-route .login-course-request-card {
    padding: 16px 0 14px;
  }

  body.public-login-route .test-login-panel.compact {
    padding: 15px 0 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.public-login-route .public-login-form input:not([type='hidden']),
  body.public-login-route .public-login-submit {
    transition: none;
  }
}

/* ENDE: 283-public-login.css */

/* START: 292-readable-text.css */
/* Patch 292 – Lesetext-Kontrast und ruhige Typografie.
   Keine Aenderung der weissen Navigation, farbigen Statusmeldungen
   oder Ueberschriften auf farbigen Kopfzeilen. */
:root { --muted: #101820; }
body {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Nur helle Inhaltsbereiche, nicht farbige Header oder Status-Badges. */
main .muted,
main .module-card-description,
main .learning-overview-card .module-card-description,
main .module-card-topic,
main .public-course-browser p,
main .simple-dashboard-card .muted,
main .learning-breadcrumb,
main .module-card-body .muted,
main .module-card-body .module-card-description,
main .group-card > p.muted,
main .public-info-card p,
main .public-course-card p{
  color: #101820 !important;
}
/* Formulartexte und Platzhalter deutlich statt hellgrau. */
main input::placeholder,
main textarea::placeholder,
main input::-webkit-input-placeholder,
main textarea::-webkit-input-placeholder {
  color: #161b22 !important;
  opacity: 1;
}
main input:not([type="checkbox"]):not([type="radio"]),
main textarea,
main select { color: #101820; }
/* Dekorative Hinweise in Karten ebenfalls kontrastreich. */
main .module-card-description,
main .learning-hierarchy-card-description,
main .course-description,
main .card-description { color: #101820 !important; }

/* ENDE: 292-readable-text.css */

/* START: 293-black-content-text.css */
/* Patch 295 – Revision der Regeln aus Patch 293.
   Die vorherige globale !important-Liste hatte zu hohe Spezifitaet und
   machte weisse Beschriftungen auf blauen Kachelkoepfen schwarz.
   Schwarze Inhalts- und weisse Kopftexte regelt 295-text-contrast.css. */
:root { --text: #000000; --muted: #000000; }
body { color: #000000; }
/* Formulare verwenden helle Eingabeflaechen. */
main :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
  color: #000000 !important;
}
main :is(input, textarea)::placeholder {
  color: #000000 !important;
  opacity: 1;
}

/* ENDE: 293-black-content-text.css */

/* START: 294-dark-surface-text.css */
/* Kontrast der dunkel gebliebenen speziellen Spiel-/Medienkopfzeilen.
 * Allgemeine Kartenkoepfe sind seit Patch 335 hell und erhalten ihren
 * dunklen Kontrast in 110-flat-card-system.css. */
main .quiz-builder-preview-head,
main .quiz-builder-preview-head :is(h1,h2,h3,h4,p,span,small,.eyebrow,.muted) {
    color: #fff !important;
}

/* ENDE: 294-dark-surface-text.css */

/* START: 295-text-contrast.css */
/* Patch 295: Textkontrast projektweit.
   Leichte, beschreibende Texte und Aufgabentexte: #000.
   Dunkle Kopf- und Navigationsflaechen: #fff.
   Keine Eingriffe in Spielanzeigen, Buttons, Fortschrittssignale oder Badges.
   Dieser Abschluss der Kaskade korrigiert explizite Farben in Modul-/Dashboard-CSS. */

:root {
  --text: #000000;
  --muted: #000000;
}

/* Standard-Lesetext auf weissen und hellen Flaechen. Das umfasst auch
   P-Elemente ohne .muted, die den aelteren Patches entgangen waren. */
main :is(p, li, dd, dt, blockquote, figcaption, small,
         .muted, .description, .card-description, .course-description,
         .module-card-description, .learning-hierarchy-card-description,
         .dashboard-mini-card-copy, .dashboard-mini-card-meta,
         .dashboard-course-authors, .dashboard-course-authors strong,
         .dashboard-course-authors span, .dashboard-progress-strip-foot,
         .module-card-topic, .learning-breadcrumb):not(:is(.badge, .button, .eyebrow, .dashboard-course-kicker, .dashboard-progress-eyebrow, .alert, .alert *, .status, .status *,
           [role="status"], [role="status"] *,
           .dialogue-scene *, .video-annotation-shell *,
           .path-decision-viewport *, .quiz-builder-preview-frame *,
           .portal-hero *, .public-login-heading *, .hierarchy-page-head *, .admin-page-head *,
           .compact-page-intro *, .learning-workspace-head *, .my-course-hero *,
           .course-browser-head > div:first-child *, .account-profile-head *,
           .public-info-head *, .group-room-head *, .dashboard-course-head *)) {
  color: #000000 !important;
}

/* Auch Textcontainer ohne <p>, etwa Autoren-Zeile, Instruktionen und
   Beschreibungstexte in den hellen Lern-/Informationskarten. */
main :is(.dashboard-course-copy, .dashboard-course-authors,
         .dashboard-course-authors strong, .dashboard-course-authors span,
         .dashboard-progress-strip-head strong,
         .dashboard-progress-strip-foot, .dashboard-mini-card-copy,
         .dashboard-mini-card-meta, .learning-hierarchy-card-description,
         .learning-task-intro, .plug-match-intro, .glass-sort-intro,
         .room-layout-intro, .presence-monitor-intro, .dialogue-intro,
         .path-decision-intro, .learning-task-card > .dialogue-game-meta,
         .learning-task-card > .dialogue-game-note,
         .learning-task-card > .room-layout-result,
         .learning-task-card .idea-stack-hint,
         .learning-task-card .glass-sort-status,
         .module-card-description) {
  color: #000000 !important;
}

/* Aufgabenkarten: spezifische !important Regeln aus den interaktiven
   Modul-Stilen duerfen die schwarzen Aufgabenhinweise nicht aufheben. */
main .learning-task-card :is(
    .learning-task-intro, .plug-match-intro, .glass-sort-intro,
    .room-layout-intro, .presence-monitor-intro, .dialogue-intro,
    .path-decision-intro
) :is(p, h2, h3, .muted, .description) {
  color: #000000 !important;
}

/* Lesetext und Titel auf hellen Kaestchen. Blaue Statuswerte, Links und
   farbige Tags behalten ihre semantische Hervorhebung. */
main :is(.dashboard-course-content, .dashboard-mini-card-body,
         .dashboard-progress-strip, .module-card-body,
         .course-content-card, .public-contact-form,
         .imprint-section, .registration-entry-card,
         .learning-task-card, .group-card, .group-workspace-panel,
         .simple-dashboard-card, .my-course-section)
  :is(.muted, .description, .hint, .help-text, .instruction,
      .task-description, .task-instruction):not(.badge):not(.button) {
  color: #000000 !important;
}

/* Schmale Ausnahme: die Quiz-Vorschau ist weiterhin dunkel.
 * Gewoehnliche Ueberschriften besitzen einen hellen Hintergrund; deren
 * Textfarbe wird direkt an der Quelle definiert (110-flat-card-system). */
main .quiz-builder-preview-head,
main .quiz-builder-preview-head :is(h1,h2,h3,h4,p,span,small,.eyebrow) {
  color: #ffffff !important;
}

/* Direkte blaue Modul-Kopfzeilen: Gruen/Gelb/Grau behalten den fuer ihren
   Hintergrund vorgesehenen Kontrast. Nur aktives Blau wird weiss. */
main :is(.learning-area-card-grid, .decomposition-part-grid)
  .module-card.current .module-card-head :is(.module-card-title, span) {
  color: #ffffff !important;
}

/* Spezifische Ausnahmen fuer die getrennten (blau/weiss) Login- und
   Registrierungskarten. */
main .registration-entry-card p.eyebrow { color: #3674b4 !important; }

/* Patch 336: Weisse Texte auf den bewusst blau gestalteten grossen Seitenkoepfen.
 * Kleinere Inhalte/Lesetexte bleiben weiterhin schwarz. */
main :is(.public-info-head, .dashboard-course-head, .group-room-head,
    .account-profile-head, .my-course-section-head)
:is(p, .muted, .description, .eyebrow, h1, h2, h3, h4) {
  color: #ffffff !important;
}

/* ENDE: 295-text-contrast.css */

/* START: 330-learning-ready-reveal.css */
/* Patch 320: Inhalte erst nach Initialisierung und Hintergrund-/Bildladung zeigen.
   Sichtbarkeit statt display:none, damit Physik/Canvas Layoutmasse ermitteln. */
.learning-workspace-panel[data-cp-visual-wait="true"] {
    position: relative;
    min-height: 520px;
}
.learning-workspace-panel[data-cp-visual-wait="true"] > :not([data-cp-learning-load-status]) {
    visibility: hidden !important;
}
.learning-workspace-panel[data-cp-visual-wait="true"] > [data-cp-learning-load-status] {
    position: absolute;
    inset: 0 auto auto 0;
    box-sizing: border-box;
    width: 100%;
    min-height: 190px;
    padding: 24px;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    border-radius: 18px;
    border: 1px solid #d8e4ef;
    color: #174b77;
    background: #f6faff;
    font-size: 0.95rem;
    font-weight: 500;
    z-index: 3;
}
.learning-workspace-panel[data-cp-visual-wait="true"] > [data-cp-learning-load-status]::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #adc8e5;
    border-top-color: #2875b8;
    border-radius: 50%;
    animation: cp-learning-loading-spin 850ms linear infinite;
}
@keyframes cp-learning-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .learning-workspace-panel[data-cp-visual-wait="true"] > [data-cp-learning-load-status]::before { animation: none; }
}
@media (max-width: 720px) {
  .learning-workspace-panel[data-cp-visual-wait="true"] { min-height: 400px; }
}

/* ENDE: 330-learning-ready-reveal.css */

/* START: 340-rectangular-design-system.css */
/*
 * Patch 330 – durchgaengige, kantigere Oberflaechensprache.
 *
 * Verbindliche Oberflaechen-Tokens fuer die Portal-Komponenten.
 * Historische Head-Farben wurden an ihren bestehenden Quellen bereinigt;
 * die interaktiven Lernspiel-Flaechen bleiben unveraendert.
 *
 * UI-Flaechen erhalten dezente 4px-Ecken und klar definierte Schatten.
 * Gezeichnete Kreise, Avatare, Medaillen, Lampen, Uhren, Spielsteine,
 * Pfeil- und Video-Steuerelemente bleiben absichtlich rund.
 */
:root {
  --cp-ui-card-radius: 3px;
  --cp-ui-control-radius: 2px;
  --cp-ui-card-shadow:
    0 3px 9px rgba(20, 45, 76, .075),
    0 18px 36px rgba(20, 45, 76, .12);
  --cp-ui-hover-shadow:
    0 5px 12px rgba(20, 45, 76, .10),
    0 21px 42px rgba(20, 45, 76, .16);
  --flat-card-radius: var(--cp-ui-card-radius);
  --card-radius: var(--cp-ui-card-radius);
  --flat-card-shadow: var(--cp-ui-card-shadow);
  --flat-card-shadow-hover: var(--cp-ui-hover-shadow);
  --card-shadow: var(--cp-ui-card-shadow);
  --shadow: var(--cp-ui-card-shadow);
  --shadow-strong: var(--cp-ui-hover-shadow);
}

/*
 * 1. Tragende Kacheln, Container, Kurs- und Verwaltungsoberflaechen.
 * Kein Universalselektor [class*=card]: Der wuerde auch Figuren, Bausteine
 * und interaktive Ziele innerhalb der Lernspiele veraendern.
 */
body :is(
  .panel, .card, .welcome-card, .progress-panel,
  .hierarchy-page-head, .learning-workspace-head, .admin-page-head,
  .course-browser-head, .group-room-head,
  .dashboard-course-overview, .dashboard-mini-card, .dashboard-progress-strip,
  .dashboard-status-card, .simple-dashboard-card,
  .module-card, .learning-hierarchy-card, .learning-workspace-tabs,
  .learning-workspace-panel, .learning-task-card, .media-placeholder-card,
  .my-course-hero, .my-course-section, .course-content-card,
  .course-management-card, .course-member-card, .public-course-card,
  .public-course-detail-card, .course-enrollment-public-box,
   .public-info-card, .registration-entry-card,
  
  .account-action-card, .account-course-box, .doc-context-card,
  .invitation-information-box, .submission-card, .user-progress-card,
  .reflection-card, .h5p-card, .module-panel, .wahrnehmung-panel,
  .wahrnehmung-annotation-card, .wahrnehmung-video-intro-box,
  .message-list-card, .message-compose-shell, .message-compose-card,
  .message-compose-panel, .message-inbox, .message-card,
  .recipient-picker-panel,
  .assessment-area-panel, .assessment-summary-card,
  .assessment-placeholder-card, .completion-overview-card,
  .assessment-group-block, .final-submission-box,
  .group-card, .group-workspace-panel, .group-panel-card,
  .group-submission-card, .group-video-card, .group-video-tile,
  .group-video-select-tile, .group-video-center-detail,
  .group-video-empty-state, .group-video-comment-card,
  .group-video-upload-dialog, .group-self-reflection-panel,
  .group-overall-task-panel, .video-compression-prompt,
  .video-compression-failed, .group-student-item,
  .approximation-group-card, .approximation-download-card,
  .approximation-safe-space > div, .approximation-workflow-card,
  .approximation-journey-card, .approximation-finish-card,
  .results-info-card, .results-task-card, .results-method-game-card,
  .results-transfer-task-shell, .results-transfer-choice-card,
  .results-interactive-video-shell,
  .stimulation-task-card, .stimulation-inner-card,
  .stimulation-info-card, .stimulation-question-card,
  .contribution-task-card, .contribution-analyse-card,
  .opening-info-card, .opening-inner-card, .opening-choice-card,
  .dialogue-start-card, .dialogue-intro,
  .idea-stack-block, .glass-sort-card, .glass-sort-current-card,
  .quiz-builder-field, .quiz-builder-preview-frame,
  .admin-toolbar, .theme-admin-test-panel
) {
  border-radius: var(--cp-ui-card-radius) !important;
}

/* Explizit die sonst per !important staerker geregelten Modulkacheln. */
body .learning-area-card-grid .module-card,
body .decomposition-part-grid .module-card,
body .learning-area-card-grid .module-card-inner,
body .decomposition-part-grid .module-card-inner {
  border-radius: var(--cp-ui-card-radius) !important;
}

/* Hohe Tiefenwirkung bei den echten Haupt-Kacheln, keine zusaetzlichen
   Schatten auf kleinen Teilbereichen innerhalb von Spielen. */
body :is(
  .panel, .card, .welcome-card, .hierarchy-page-head,
  .learning-workspace-head, .admin-page-head, .course-browser-head,
  .dashboard-course-overview, .dashboard-mini-card, .dashboard-progress-strip,
  .dashboard-status-card, .simple-dashboard-card,
  .module-card, .learning-hierarchy-card, .learning-workspace-tabs,
  .learning-workspace-panel, .my-course-hero, .my-course-section,
  .course-content-card, .course-management-card, .public-course-card,
   .public-info-card, .registration-entry-card,
  .group-card, .group-workspace-panel, .group-panel-card,
  .group-submission-card, .group-video-center-detail,
  .group-video-empty-state, .message-list-card, .reflection-card,
  .assessment-area-panel, .assessment-summary-card,
  .approximation-group-card, .approximation-download-card,
  .approximation-journey-card
):not(.disabled):not(.locked):not([hidden]) {
  box-shadow: var(--cp-ui-card-shadow) !important;
}

body .learning-area-card-grid .module-card:not(.disabled):not(.locked),
body .decomposition-part-grid .module-card:not(.disabled):not(.locked) {
  box-shadow: var(--cp-ui-card-shadow) !important;
}

/* Nur interaktive Hauptkacheln erhalten beim Fokus/Hover mehr Tiefe. */
body :is(
  .module-card, .learning-hierarchy-card, .public-course-card,
  .account-action-card, .group-video-select-tile, .dashboard-mini-card,
  .course-management-card
):not(.disabled):not(.locked):not([hidden]):is(:hover, :focus-within) {
  box-shadow: var(--cp-ui-hover-shadow) !important;
}

/* Navigations- und Inhaltskachelkoepfe muessen ebenfalls kantig sein.
   Farben, Textfarben und Hoehen bleiben aus ihren bisherigen Regeln. */
body :is(
  .module-card-head, .learning-workspace-tabs-head,
  .group-submission-card-head, .group-video-library-head,
  .dashboard-course-overview-head, .group-video-detail-head,
  .approximation-journey-header, .wahrnehmung-annotation-card-head,
  .admin-tools-tabs, .decomposition-assessment-tabs,
  .assessment-area-tabs, .assessment-area-tabs-five
) {
  border-radius: 0 !important;
}

/*
 * 2. Reiter, Buttons, Textfelder, Dialoge und Tabellen.
 * Die Spieloberflaechen selbst bleiben unveraendert.
 */
body :is(
  .button, .btn, .test-login-button, .account-action-button,
  .message-compose-button, .registration-entry-button,
  .learning-workspace-tab, .assessment-area-tab,
  .decomposition-assessment-tab, .exercise-review-tab,
  .results-tab, .results-transfer-tab, .results-document-tab,
  .quiz-builder-icon-button, .documentation-step,
  .recipient-picker-trigger, .recipient-option,
  .group-video-add-comment, .group-video-edit-trigger,
  .complete-video-review-button, .comment-timestamp-button,
  .opening-small-button, .opening-light-button,
  .stimulation-white-button, .contribution-button,
  .idea-stack-clear, .idea-stack-finish,
  .results-method-button, .results-method-choose,
  .room-layout-choose-button, .plug-match-info-next,
  .group-video-tile-main, .nav-logout-button,
  .final-pass-button, .danger-button, .disabled-button,
  .approximation-download-icon,
  .learning-workspace-panel-nav, .learning-workspace-completion,
  .approximation-table-scroll, .wahrnehmung-note-item,
  .course-info-table, .group-video-comment-form,
  .course-member-card, .badge, .status-pill,
  .learning-card-status, .exercise-state-pill,
  .account-pill, .hint-box, .doc-field,
  .group-self-reflection-progress-list li
) {
  border-radius: var(--cp-ui-control-radius) !important;
}

body :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  textarea, select
) {
  border-radius: var(--cp-ui-control-radius) !important;
}

/* Standard-Formularbuttons, auch wo kein .button gesetzt ist. */
body :is(button[type="submit"], button[type="reset"], input[type="submit"], input[type="button"]) {
  border-radius: var(--cp-ui-control-radius) !important;
}

/* Weitere Aktionsbuttons aus Kursverwaltung, Modul- und Gruppenoberflaechen.
   Nicht auf jedes beliebige Button-Element anwenden: einige Lernspiele
   rendern darin runde Spielobjekte. Die runden Steuerungen folgen unten. */
body :is(
  button[class*="-button"], button.primary, button.secondary,
  button[role="tab"], button[data-learning-tab],
  .learning-workspace-back, .documentation-tool-nav,
  .results-document-tool-nav, .results-tabbox,
  .decomposition-assessment-tabs, .admin-tools-tabs,
  .message-compose-actions, .course-filters,
  .group-video-comment-form, .approximation-group-card-copy
) {
  border-radius: var(--cp-ui-control-radius) !important;
}

/* Normale unklassifizierte Buttons behalten ebenfalls eine eckige Form.
   Spielobjekt-/Symbolbuttons mit eigenen Klassen werden nicht erfasst. */
body button:not([class]):not([data-seek-time]) {
  border-radius: var(--cp-ui-control-radius) !important;
}

body :is(
  .alert, .status-message, .notification, .form-inline-feedback,
  .group-video-success-toast, .group-video-upload-progress,
  .group-self-reflection-textarea, .approximation-input-card textarea,
  .approximation-journey-figure-frame, .approximation-safe-space > div,
  .quiz-builder-preview-frame, .group-video-preview-frame
) {
  border-radius: var(--cp-ui-control-radius) !important;
}

/*
 * 3. Bewusst runde Funktionsobjekte. Diese Ausnahmen stehen am Ende,
 * damit Pauschalregeln keine Animation/Geometrie zerstoeren.
 */
body :is(
  .approximation-journey-arrow,
  .group-arrow-button, .group-video-add-circle,
  .group-video-delete-button, .group-video-edit-trigger,
  .group-video-add-icon, .dialog-close-button,
  .results-info-dot, .results-joint-info-dot,
  .results-method-arrow, .results-visual-nav,
  .room-layout-arrow, .opening-step-dot,
  .prep-journey-node-button
) {
  border-radius: 50% !important;
}

/* Spezifitaet passend zu button[class*='-button'] (wichtige Ausnahmen). */
body button:is(
  .approximation-journey-arrow, .group-arrow-button,
  .group-video-add-circle, .group-video-delete-button,
  .group-video-edit-trigger, .dialog-close-button,
  .results-method-arrow,
  .results-visual-nav, .room-layout-arrow,
  .prep-journey-node-button
) {
  border-radius: 50% !important;
}

/* Barrierefreie Erkennbarkeit aktiver Bedienelemente erhalten. */
body :is(.button, button, input, textarea, select, .learning-workspace-tab):focus-visible {
  outline-offset: 3px;
}

/* Keine Animationen oder Schatten bei Motion-Reduktion erzwingen. */
@media (prefers-reduced-motion: reduce) {
  body :is(.module-card, .learning-hierarchy-card, .button) {
    transition-duration: 0.01ms;
  }
}

/* ===== KONSOLIDIERT AUS V331: ERGÄNZENDE UI-FLÄCHEN ===== */
/*
 * Patch 331 – gezielte Ergaenzungen zum kantigen Designsystem.
 * Nur UI-Container und echte Inhaltskarten, keine Spielobjekte oder Avatare.
 * Regeln stehen bewusst am Ende des generierten Bundles.
 */
:root {
  --cp-ui-compact-radius: 3px;
}

/* Kurslisten, die in Patch 330 noch nicht erfasst waren. */
body :is(
  .course-list-row, .public-course-row, .admin-course-row,
  .course-admin-search, .course-pagination a,
  .public-course-section-head, .course-stack > article,
  .course-list-entry, .my-course-list-item
) {
  border-radius: var(--cp-ui-card-radius) !important;
}
body :is(.course-list-row, .public-course-row, .admin-course-row) {
  box-shadow: var(--cp-ui-card-shadow) !important;
}

/* Dozenten-Bewertung: Kopfbereich, Tabs UND die einzelnen Lernendenzeilen. */
body .lecturer-assessment-page :is(
  .assessment-course-bar, .assessment-area-tabs,
  .assessment-area-tabs-five, .decomposition-assessment-tabs,
  .assessment-student-row, .assessment-group-block,
  .assessment-course-select, .assessment-subhead,
  .assessment-empty-state
) {
  border-radius: var(--cp-ui-card-radius) !important;
}
body .lecturer-assessment-page :is(
  .assessment-area-tabs-five .assessment-area-tab,
  .decomposition-assessment-tabs .decomposition-assessment-tab
) {
  border-radius: var(--cp-ui-control-radius) !important;
}
body .lecturer-assessment-page .assessment-course-bar {
  box-shadow: var(--cp-ui-card-shadow) !important;
}

/* Die beiden leeren Drag-and-Drop-Listen und die Aktionsleiste bei Gruppen. */
body .group-builder-panel-sketch :is(
  .group-builder-top-input, .group-student-list-sketch,
  .group-builder-bottom-actions > button,
  .group-builder-bottom-actions > .button,
  .group-random-builder, .group-random-builder-sketch
),
body .existing-group-dialog,
body .existing-group-dialog-card {
  border-radius: var(--cp-ui-control-radius) !important;
}
body .group-builder-panel-sketch .group-student-list-sketch .group-student-item {
  border-radius: 0 !important;
}

/* Die Karten innerhalb von Wahrnehmung und Interactive Book waren
   stellenweise durch spezifischere Modulregeln noch stark abgerundet. */
body .wahrnehmung-page :is(
  .learning-workspace-panel, .course-content-card, .reflection-card,
  .learning-task-card, .wahrnehmung-panel, .wahrnehmung-video-card,
  .wahrnehmung-annotation-card, .wahrnehmung-video-frame,
  .wahrnehmung-summary-item, .wahrnehmung-revision-note,
  .learning-task-intro
),
body .interactive-book-page :is(
  .learning-workspace-panel, .course-content-card, .reflection-card,
  .learning-task-card, .learning-workspace-panel-nav,
  .learning-workspace-completion
) {
  border-radius: var(--cp-ui-card-radius) !important;
}

/* Nicht auf die transparenten Arbeitsflaechen der Module zusaetzliche
   Hintergruende werfen: Schatten nur dort, wo echte Karten existieren. */
body .wahrnehmung-page .learning-workspace-panel > :is(.course-content-card, .reflection-card),
body .interactive-book-page .learning-workspace-panel > :is(.course-content-card, .reflection-card) {
  box-shadow: var(--cp-ui-card-shadow) !important;
}

/* Allgemeine kleine Binnenkarten aus der sichtbaren Modulnavigation. */
body :is(
  .learning-workspace-sidebar, .learning-workspace-tab-list,
  .learning-workspace-panel-nav, .learning-workspace-completion,
  .learning-task-intro, .learning-info-card,
  .wahrnehmung-video-frame, .wahrnehmung-summary-item,
  .wahrnehmung-note-editor, .wahrnehmung-note-list,
  .course-content-card .reflection-card
) {
  border-radius: var(--cp-ui-card-radius) !important;
}

/* Sonderformen ausdrücklich beibehalten: Avatar-, Schritt- und Aktionskreise. */
body :is(
  .learning-workspace-tab-number, .group-arrow-button,
  .group-video-add-circle, .group-video-add-icon,
  .approximation-journey-arrow, .comment-timestamp-button
) {
  border-radius: 50% !important;
}


/* V341 – Videosteuerung in Wahrnehmung folgt dem rechteckigen Buttonsystem. */
body .wahrnehmung-resume-button {
  border-radius: 12px !important;
}

/* ENDE: 340-rectangular-design-system.css */

/* START: 342-learning-cards-independent.css */
/*
 * Patch 332 – eigenstaendige Hauptkacheln in ALLEN Lernmodulreitern.
 * Projektweite Lernarbeitsflaechen:
 *   Wahrnehmung: 5 Reiter
 *   Dekomposition Teil 1–5: Interactive Books
 *   Approximation: 8 Reiter
 *   Praxiselemente: Workspace
 *
 * Die Reiter-Panels sind strukturelle Wrapper, KEINE optischen Kacheln.
 * Die fachlichen Inhalte stehen als einzelne Karten unmittelbar im freien Raum;
 * darunter ist die Navigation eine separate, flache und breite Karte.
 * Bewusst KEINE globalen Eingriffe in interaktive Objekte (Bausteine, Lampen,
 * Steckverbindungen, Avatare, Spielfiguren, Pfeile, Medien-Controls).
 */
:root {
  --cp-learning-card-radius: 3px;
  --cp-learning-card-space: 22px;
  --cp-learning-card-edge: #d3dfec;
  --cp-learning-card-shadow: 0 4px 12px rgba(18, 42, 73, .10),
    0 17px 34px rgba(18, 42, 73, .13);
}

/* 1. Die gemeinsame, ehemals riesige Sammelkachel verschwindet.
   Die bereits existierenden Reiter und deren [hidden]-Steuerung bleiben intakt. */
body .learning-workspace-page .learning-workspace-content,
body .learning-workspace-page .learning-workspace-content > .learning-workspace-panel {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
body .learning-workspace-page .learning-workspace-content > .learning-workspace-panel {
  width: 100%;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
/* Die aeltere Designschicht nutzt :not()-Selektoren mit besonders hoher
   Spezifitaet fuer Kachel-Schatten; daher gezielt auch hier ueberschreiben. */
body .learning-workspace-page .learning-workspace-content >
.learning-workspace-panel:not(.disabled):not(.locked):not([hidden]) {
  box-shadow: none !important;
}
body .learning-workspace-page .learning-workspace-content > .learning-workspace-panel[hidden] {
  display: none !important;
}

/* 2. Jedes direkte inhaltliche Haupt-Element ist eine eigene Kachel.
   Background nur dort ergaenzen, wo eine eigene helle Karte sinnvoll ist;
   dunkle Medien- und Spieloberflaechen behalten ihren Hintergrund. */
body .learning-workspace-page .learning-workspace-content > .learning-workspace-panel > :is(
  .course-content-card, .reflection-card, .learning-task-card,
  .learning-placeholder-card, .plug-match-card, .documentation-tool,
  .completion-overview-card, .final-submission-box,
  .approximation-download-card, .approximation-group-card,
  .assessment-summary-card, .results-transfer-task-shell,
  .results-method-game-card, .results-interactive-video-shell,
  .wahrnehmung-annotation-card, .wahrnehmung-video-card,
  .opening-info-card, .opening-task-card, .stimulation-task-card,
  .contribution-task-card, .results-info-card,
  .results-task-card
) {
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
  margin: 0 0 var(--cp-learning-card-space) !important;
  border-radius: var(--cp-learning-card-radius) !important;
  box-shadow: var(--cp-learning-card-shadow) !important;
}

/* Zwei reale HTML-Varianten von eigenstaendigen Hauptkacheln koennen
   allein eine Section/Details ohne gemeinsame -card-Klasse sein. */
body .learning-workspace-page .learning-workspace-content > .learning-workspace-panel > section:not([class]),
body .learning-workspace-page .learning-workspace-content > .learning-workspace-panel > details:not([class]) {
  padding: 20px 24px;
  margin: 0 0 var(--cp-learning-card-space);
  background: #fff;
  border: 1px solid var(--cp-learning-card-edge);
  border-radius: var(--cp-learning-card-radius) !important;
  box-shadow: var(--cp-learning-card-shadow) !important;
}

/* 3. Haupt-Karten von Approximation, die bewusst ueber eine eigene
   Komponente strukturiert sind. Der Journey-Pfad darf keine Karte sein. */
body .learning-workspace-page [data-learning-workspace="approximation"]
.learning-workspace-panel > .approximation-safe-space {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 0 var(--cp-learning-card-space);
}
body .learning-workspace-page [data-learning-workspace="approximation"]
.learning-workspace-panel > .approximation-safe-space > div,
body .learning-workspace-page .approximation-journey-card {
  border-radius: var(--cp-learning-card-radius) !important;
  box-shadow: var(--cp-learning-card-shadow) !important;
}
body .learning-workspace-page [data-learning-workspace="approximation"]
.learning-workspace-panel > .approximation-journey {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: var(--cp-learning-card-space);
}

/* 4. Interne Einleitung einer interaktiven Aufgabe ist KEINE
   zusaetzlich schwebende Hauptkachel; Titel/Beschreibung bleiben lesbar.
   Das eigentliche Spielbrett und interaktive Unterelemente bleiben intakt. */
body .learning-workspace-page .learning-workspace-panel >
:is(.learning-task-card, .course-content-card.learning-task-card) > .learning-task-intro {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 5. Rechteckige Inhaltsflaechen und kleine Formular-/Anzeigecontainer.
   Nur Layoutcontainer: KEINE Formveraenderung von Spielobjekten. */
body .learning-workspace-page :is(
  .learning-workspace-tabs, .learning-workspace-tab,
  .course-content-card, .reflection-card, .learning-task-card,
  .documentation-tool, .learning-placeholder-card, .plug-match-card,
  .idea-stack-stage, .idea-stack-input-row,
  .wahrnehmung-annotation-section, .wahrnehmung-video-frame,
  .wahrnehmung-note-editor, .wahrnehmung-note-item,
  .wahrnehmung-video-intro-box, .wahrnehmung-observation-recap,
  .completion-overview-card, .completion-task-row, .final-submission-box,
  .opening-info-card, .opening-inner-card, .opening-task-card,
  .opening-planning-card, .opening-transcript-board,
  .stimulation-info-card, .stimulation-inner-card, .stimulation-task-card,
  .contribution-info-card, .contribution-inner-card, .contribution-task-card,
  .contribution-analyse-card, .contribution-sheet-card,
  .results-info-card, .results-task-card, .results-method-game-card,
  .results-transfer-task-shell, .results-transfer-choice-card,
  .results-interactive-video-shell, .results-tabbox,
  .approximation-input-card, .approximation-download-card,
  .approximation-group-card, .approximation-workflow-card,
  .approximation-journey-card, .approximation-journey-figure-frame
) {
  border-radius: var(--cp-learning-card-radius) !important;
}

/* 6. Save-Button hat Abstand zum Rand, ist jedoch KEIN zusaetzlicher
   grosser Kartenhintergrund. In der darauffolgenden Nav-Karte stehen
   nur Zurueck / Seitenzaehler / Weiter. */
body .learning-workspace-page .learning-workspace-panel > .learning-save-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 18px 6px !important;
  margin: 0 0 15px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
}
body .learning-workspace-page .learning-workspace-panel > .learning-save-row .button {
  margin: 0 !important;
  padding: 10px 18px !important;
}

/* 7. Navigation als vierte eigenstaendige langgezogene Kachel.
   Waechst nicht auf Panelhoehe, Buttons liegen nie am Aussenrand. */
body .learning-workspace-page .learning-workspace-panel > .learning-workspace-panel-nav {
  display: grid;
  grid-template-columns: minmax(104px, 142px) 1fr minmax(104px, 142px);
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 100%;
  min-height: 72px;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 14px 22px !important;
  background: #fff !important;
  border: 1px solid var(--cp-learning-card-edge) !important;
  border-radius: var(--cp-learning-card-radius) !important;
  box-shadow: var(--cp-learning-card-shadow) !important;
}
body .learning-workspace-page .learning-workspace-panel > .learning-workspace-panel-nav > .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 10px 14px !important;
  border-radius: var(--cp-learning-card-radius) !important;
}
body .learning-workspace-page .learning-workspace-panel > .learning-workspace-panel-nav > .learning-workspace-counter {
  min-width: 0;
  text-align: center;
}
body .learning-workspace-page .learning-workspace-panel > .learning-workspace-completion {
  box-sizing: border-box;
  margin: 0 0 var(--cp-learning-card-space) !important;
  padding: 18px 22px !important;
  background: #fff !important;
  border: 1px solid var(--cp-learning-card-edge) !important;
  border-radius: var(--cp-learning-card-radius) !important;
  box-shadow: var(--cp-learning-card-shadow) !important;
}

/* 8. Tabellen/Mediencontainer kein neuer Karten-Untergrund.
   Zulassige funktionale Unterteilungen innerhalb EINER Hauptkachel
   duerfen weiterhin eigene Flaechen zur Orientierung verwenden. */
body .learning-workspace-page .learning-workspace-panel > .course-content-card .video-info-grid {
  background: transparent;
  box-shadow: none !important;
}
body .learning-workspace-page .learning-workspace-panel > .course-content-card.wahrnehmung-video-card {
  overflow: hidden;
}

/* 9. Schmale Geraete: Die Navigationskarte bleibt eigenstaendig und
   bekommt ausreichend Innenabstand, auch wenn Buttons umbrechen. */
@media (max-width: 690px) {
  :root { --cp-learning-card-space: 16px; }
  body .learning-workspace-page .learning-workspace-panel > .learning-workspace-panel-nav {
    grid-template-columns: minmax(80px, 1fr) auto minmax(80px, 1fr);
    gap: 9px;
    min-height: 0;
    padding: 12px !important;
  }
  body .learning-workspace-page .learning-workspace-panel > .learning-workspace-panel-nav > .button {
    font-size: .9rem;
    padding: 10px 9px !important;
  }
}

/* Kein Zwang zu Animationen fuer Nutzer mit reduziertem Bewegungsbedarf. */
@media (prefers-reduced-motion: reduce) {
  body .learning-workspace-page .learning-workspace-panel > .learning-workspace-panel-nav {
    transition: none !important;
  }
}

/* ENDE: 342-learning-cards-independent.css */

/* START: 343-dashboard-stage-harmonization.css */
/* Patch 344 – die sechs Inhaltsseiten benutzen exakt die bereits
   vorhandene Dashboard-Buehnenklasse "dashboard-course-overview-page".
   Die Breite kommt aus 321-pc-layout-tightening.css:
   75 % / maximal 1080px. Keine zweite Breitenregel, keine neue Verlaufsebene.
   Das zentrale content-fade.js folgt damit automatisch denselben Kartenkanten.
   Weitere Regeln betreffen nur die Innenanordnung der betroffenen Kacheln. */

.dashboard-stage-page {
    padding-bottom: 26px;
}

/* Die ausgewählten Seiten sollen wie das Dashboard einen klaren, etwas
   schmaleren Inhaltskern besitzen. */
.dashboard-stage-page > :is(nav, section) {
    max-width: 100%;
}

/* Lernmodulübersicht: pro Teil zwei eigenständige rechteckige Kacheln.
   Links das Bild, rechts Status und Inhalt; jede Kachel ist separat anwählbar. */
.module-overview-stage .learning-area-card-grid.module-overview-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px;
    max-width: 100%;
}
.module-overview-stage .module-overview-row {
    display: grid;
    grid-template-columns: minmax(190px, 30%) minmax(0, 1fr);
    align-items: stretch;
    gap: 16px;
    min-width: 0;
}
.module-overview-stage :is(.module-overview-image-card, .module-overview-text-card) {
    min-width: 0;
    min-height: 270px;
    border: 1px solid #cbddec;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(20, 55, 91, .12);
    color: #172a40;
    text-decoration: none;
}
.module-overview-stage .module-overview-image-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}
.module-overview-stage .module-overview-image-card img {
    display: block;
    max-width: 100%;
    max-height: 260px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.module-overview-stage .module-overview-text-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
    padding: 18px 25px;
}
.module-overview-stage .module-overview-part {
    font-size: .79rem;
    font-weight: 750;
    color: #386b9b;
}
.module-overview-stage .module-overview-status.badge {
    display: inline-block;
    border-radius: 3px;
    padding: 4px 10px;
    background: #e5f3ff;
    border: 1px solid #bfd5ec;
    color: #245b91;
    box-shadow: none;
}
.module-overview-stage .module-overview-topic {
    font-size: 1.1rem;
    font-weight: 750;
    color: #142c48;
}
.module-overview-stage .module-overview-description {
    font-size: .95rem;
    line-height: 1.5;
    color: #172a40;
}
.module-overview-stage a:is(.module-overview-image-card, .module-overview-text-card):hover,
.module-overview-stage a:is(.module-overview-image-card, .module-overview-text-card):focus-visible {
    border-color: #6da7dd;
    box-shadow: 0 12px 26px rgba(20, 55, 91, .17);
}
.module-overview-stage .module-overview-row.learning-card-disabled :is(.module-overview-image-card,.module-overview-text-card) {
    opacity: .77;
}
@media (max-width: 620px) {
    .learning-workspace-head > div:first-child,
    .admin-page-head > div:first-child { padding: 54px 0 0 !important; }
    .module-overview-stage .module-overview-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }
    .module-overview-stage .module-overview-image-card { min-height: 210px; }
    .module-overview-stage .module-overview-image-card img { max-height: 200px; }
    .module-overview-stage .module-overview-text-card { min-height: 0; padding: 16px; }
}

/* 2) Gruppenaktivität: alle Kacheln in dieselbe schmalere Mittelbühne,
      der Builder bricht etwas früher sauber um. */
.group-overview-stage .compact-course-selector,
.group-overview-stage .group-builder-panel,
.group-overview-stage > .panel:last-of-type {
    width: 100%;
}

.group-overview-stage .group-builder-panel {
    overflow: hidden;
}

.group-overview-stage .group-builder-columns-sketch {
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
}

.group-overview-stage .group-builder-arrows-sketch {
    min-width: 48px;
}

/* 3) Impressum/Tickets: dieselbe schmale, ruhigere Lesebreite. */
.imprint-stage .public-info-card,
.support-stage .panel {
    width: 100%;
}

/* 4) Dozenten- und Adminbereich: gleiche Mittelbühne wie Dashboard,
      weniger Spalten für kleinere Kacheln und mehr Reihen. */
.lecturer-stage .lecturer-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px;
}

.admin-stage .admin-simple-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px;
}

.lecturer-stage .simple-dashboard-card,
.admin-stage .simple-dashboard-card {
    min-height: 218px;
}

.lecturer-stage .simple-dashboard-card h2,
.admin-stage .simple-dashboard-card h2 {
    padding: 14px 16px;
}

.lecturer-stage .simple-dashboard-card > :not(h2),
.admin-stage .simple-dashboard-card > :not(h2) {
    margin-left: 18px;
    margin-right: 18px;
}

/* Dashboard-ähnliche Breite auch für die einfachen Übersichtsseiten. */
.support-stage .admin-page-head,
.lecturer-stage .compact-page-intro,
.admin-stage .compact-page-intro,
.group-overview-stage .admin-page-head {
    margin-bottom: 20px;
}



@media (max-width: 1120px) {
    .admin-stage .admin-simple-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .group-overview-stage .group-builder-columns-sketch {
        grid-template-columns: 1fr;
    }

    .group-overview-stage .group-builder-arrows-sketch {
        justify-content: center;
        flex-direction: row;
        min-width: 0;
    }
}

@media (max-width: 760px) {
    .lecturer-stage .lecturer-dashboard-grid,
    .admin-stage .admin-simple-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Patch 345 – Feinschliff nach visueller Abnahme
   - Dashboard-Schnellzugriff ohne Blitzsymbol
   - identische Starthöhe/weiße Bühne für Kurssuche und Lernmodulseite
   - weiße Untertitel in allen blauen Überschriftskacheln
   - zentrierte Kachel-Inhalte in Dozenten- und Adminbereich */

/* Dashboard: Kopf des Schnellzugriffs ohne separates Symbol links. */
.dashboard-shortcuts-head {
    display: block;
}

.dashboard-shortcuts-head > div {
    margin: 0;
}

/* Lernmodul-Übersicht: ohne Zusatzlabel oben, daher bündig wie Dashboard. */
.module-overview-stage {
    padding-top: 18px;
}

.module-overview-stage .hierarchy-page-head {
    margin-top: 0;
}

.module-overview-stage .hierarchy-page-head :is(.eyebrow, h1, .muted, p),
.group-overview-stage .admin-page-head :is(.eyebrow, h1, .muted, p),
.lecturer-stage .compact-page-intro :is(.eyebrow, h1, .muted, p),
.admin-stage .compact-page-intro :is(.eyebrow, h1, .muted, p),
.courses-stage .course-browser-head > div:first-child :is(.eyebrow, h1, .muted, p) {
    color: #ffffff !important;
}

/* Kurssuche ebenfalls in derselben Mittelbühne wie das Dashboard. */
.courses-stage {
    padding-bottom: 26px;
}

.courses-stage > :is(section, nav, p) {
    max-width: 100%;
}

/* Impressum: ergänzende Rollenangabe etwas ruhiger einordnen. */
.imprint-stage .public-info-card p {
    max-width: 100%;
}

/* Dozenten- und Adminbereich: Inhalte optisch sauber zentrieren. */
.lecturer-stage .simple-dashboard-card,
.admin-stage .simple-dashboard-card {
    align-items: center;
    text-align: center;
}

.lecturer-stage .simple-dashboard-card h2,
.admin-stage .simple-dashboard-card h2 {
    text-align: center;
}

.lecturer-stage .simple-dashboard-card > :not(h2),
.admin-stage .simple-dashboard-card > :not(h2) {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.lecturer-stage .simple-dashboard-card .button,
.admin-stage .simple-dashboard-card .button {
    align-self: center;
}


/* Patch 356: horizontale Modulleiste mit feststehender linker Blaufläche.
   Die Dashboard-Bühne bleibt schmal und vollständig genutzt; die frühere
   linke Reiterkachel entfällt zugunsten eines horizontal scrollbaren Balkens. */
.learning-dashboard-stage {
    padding-top: 18px;
    position: relative;
}

.learning-dashboard-stage.learning-workspace-page {
    width: 100%;
}

.learning-dashboard-stage .learning-workspace {
    position: relative;
    display: block;
    width: 100%;
}

.learning-dashboard-stage .learning-workspace-main,
.learning-dashboard-stage .learning-workspace-content {
    min-width: 0;
    width: 100%;
}

.learning-dashboard-stage .learning-breadcrumb {
    margin: 0 0 14px;
}

.learning-dashboard-stage .learning-workspace-head {
    margin: 0 0 14px;
}

.learning-dashboard-stage .learning-workspace-nav {
    margin: 0 0 20px;
}

.learning-dashboard-stage .learning-workspace-strip {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: stretch;
    min-height: 47px;
    background: #ffffff;
    border: 1px solid #0f2740;
    border-radius: 4px;
    box-shadow: 0 12px 28px rgba(17, 37, 64, 0.09);
    overflow: hidden;
}

/* The blue half is fixed on the strip itself: only the titles slide. */
.learning-dashboard-stage .learning-workspace-strip::before {
    content: "";
    position: absolute;
    inset: 0 48px;
    background: linear-gradient(to right, #3174b8 0 50%, #fff 50% 100%);
    pointer-events: none;
    z-index: 0;
}

.learning-dashboard-stage .learning-workspace-strip::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: #163658;
    pointer-events: none;
    z-index: 2;
}

.learning-dashboard-stage .learning-workspace-strip-arrow {
    appearance: none;
    border: 0;
    padding: 0;
    min-width: 0;
    background: #ffffff;
    color: #0f2740;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 140ms ease, color 140ms ease, opacity 140ms ease;
}

.learning-dashboard-stage .learning-workspace-strip-arrow.is-prev {
    border-right: 1px solid #0f2740;
}

.learning-dashboard-stage .learning-workspace-strip-arrow.is-next {
    border-left: 1px solid #0f2740;
}

.learning-dashboard-stage .learning-workspace-strip-arrow:hover:not(:disabled) {
    background: #f1f7ff;
    color: #155a98;
}

.learning-dashboard-stage .learning-workspace-strip-arrow:disabled {
    opacity: 0.45;
    cursor: default;
}

.learning-dashboard-stage .learning-workspace-strip-viewport {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: transparent;
    z-index: 1;
}

.learning-dashboard-stage .learning-workspace-strip-viewport::-webkit-scrollbar {
    display: none;
}

.learning-dashboard-stage .learning-workspace-strip-track {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    width: calc(var(--learning-strip-slots, 3) * 50%);
    min-width: 100%;
}

.learning-dashboard-stage .learning-workspace-strip-tab {
    position: relative;
    box-sizing: border-box;
    flex: 0 0 calc(100% / var(--learning-strip-slots, 3));
    width: calc(100% / var(--learning-strip-slots, 3));
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 45px;
    padding: 6px 18px;
    white-space: normal;
    text-align: left;
    font-size: 0.96rem;
    font-weight: 600;
    line-height: 1.2;
    color: #1a2f4a;
    background: transparent;
    border: 0;
    border-right: 1px solid #0f2740;
    border-radius: 0;
    cursor: pointer;
    box-shadow: none;
    transition: color 90ms linear;
}

.learning-dashboard-stage .learning-workspace-strip-tab:last-child {
    border-right: 0;
}

.learning-dashboard-stage .learning-workspace-strip-tab:hover {
    transform: none;
    background: transparent;
    border-color: #0f2740;
}

/* Text contrast follows the visible left slot during a slide, not the
   page selection before the animation finishes. */
.learning-dashboard-stage .learning-workspace-strip-tab.active,
.learning-dashboard-stage .learning-workspace-strip-tab.active:hover {
    color: #1a2f4a;
    background: transparent;
}

.learning-dashboard-stage .learning-workspace-strip-tab.is-in-blue-slot,
.learning-dashboard-stage .learning-workspace-strip-tab.is-in-blue-slot:hover,
.learning-dashboard-stage .learning-workspace-strip-tab.active.is-in-blue-slot {
    color: #fff;
    background: transparent;
}

.learning-dashboard-stage .learning-workspace-strip-tab.is-locked:not(.active) {
    color: #1a2f4a;
    background: transparent;
    opacity: 1;
    cursor: pointer;
}

.learning-dashboard-stage .learning-workspace-strip-tab .learning-workspace-tab-number {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 999px;
    border: 2px solid #1a1a1a;
    background: #ffffff;
    color: #1a1a1a;
    font-size: 0.85rem;
    font-weight: 700;
}

.learning-dashboard-stage .learning-workspace-strip-tab.is-in-blue-slot .learning-workspace-tab-number {
    border-color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.learning-dashboard-stage .learning-workspace-strip-tab-label {
    display: block;
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
    text-overflow: clip;
}

.learning-dashboard-stage .learning-workspace-strip-empty {
    box-sizing: border-box;
    flex: 0 0 calc(100% / var(--learning-strip-slots, 3));
    min-width: 0;
    background: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .learning-dashboard-stage .learning-workspace-strip-viewport {
        scroll-behavior: auto;
    }
}

.learning-dashboard-stage .learning-workspace-back-inline {
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    color: #52657d;
    text-decoration: none;
    font-size: 0.86rem;
}

.learning-dashboard-stage .learning-workspace-back-inline:hover {
    color: #155a98;
    text-decoration: underline;
}

@media (max-width: 900px) {
    .learning-dashboard-stage .learning-workspace-strip {
        grid-template-columns: 42px minmax(0, 1fr) 42px;
        min-height: 47px;
    }

    .learning-dashboard-stage .learning-workspace-strip::before {
        inset-inline: 42px;
    }

    .learning-dashboard-stage .learning-workspace-strip-arrow {
        font-size: 1.7rem;
    }

    .learning-dashboard-stage .learning-workspace-strip-tab {
        padding: 6px 12px;
        gap: 8px;
        font-size: 0.87rem;
    }

    .learning-dashboard-stage .learning-workspace-strip-tab .learning-workspace-tab-number {
        flex-basis: 26px;
        height: 26px;
        width: 26px;
    }
}

/* Patch 357: only missing written responses draw attention to a task.
   The outline does not change element size, avoiding layout shifts. */
.learning-dashboard-stage .learning-writing-attention {
    outline: 2px solid #d74747;
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(215, 71, 71, 0.11),
                0 0 24px rgba(215, 71, 71, 0.28);
    animation: cp-written-task-glow 1.65s ease-in-out infinite alternate;
}

.learning-dashboard-stage [data-learning-writing-invalid="true"] {
    border-color: #c93d3d;
}

@keyframes cp-written-task-glow {
    from { box-shadow: 0 0 0 4px rgba(215,71,71,0.09), 0 0 11px rgba(215,71,71,0.17); }
    to   { box-shadow: 0 0 0 6px rgba(215,71,71,0.14), 0 0 24px rgba(215,71,71,0.28); }
}

@media (prefers-reduced-motion: reduce) {
    .learning-dashboard-stage .learning-writing-attention { animation: none; }
}

/* Patch 359: Studentischer Kurs und Gruppenraum verwenden die bereits
   vorhandene Dashboard-Bühne. Die alte dreispaltige Sidebar im Gruppenraum
   entfällt; die funktionalen Video-/Kommentar-Komponenten bleiben bestehen. */
.my-course-dashboard-stage > .my-course-hero,
.my-course-dashboard-stage > .my-course-section,
.my-course-dashboard-stage > .my-course-empty {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    box-sizing: border-box;
}
.my-course-dashboard-stage .my-course-section-head,
.my-course-dashboard-stage .my-course-section > .course-member-grid {
    width: 100%;
    box-sizing: border-box;
}
/* Zahlenbadges liegen auf hellem Untergrund: hoher Kontrast statt Weiß. */
main.my-course-dashboard-stage .my-course-section-head > .badge {
    color: #101f34 !important;
    background: #ffffff !important;
    border: 1px solid #bed3e7;
    opacity: 1;
    font-weight: 800;
}

.group-room-dashboard-stage .group-room-head {
    width: 100%;
    margin-bottom: 18px;
}
.group-room-dashboard-stage .group-room-head .group-member-color-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    padding: 8px 22px 18px;
    margin: 0;
    background: transparent;
}
.group-room-dashboard-stage .group-room-head .member-color {
    color: #172942 !important;
    font-weight: 700;
    border: 1px solid rgba(28,57,87,.12);
}
.group-room-dashboard-stage .group-peer-review-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(250px, .9fr);
    grid-template-rows: auto auto;
    align-items: stretch;
    column-gap: 16px;
    row-gap: 16px;
    width: 100%;
    min-width: 0;
}
.group-room-dashboard-stage .group-video-library {
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    position: static;
    top: auto;
    width: 100%;
    max-height: none;
    min-width: 0;
    overflow: visible;
    margin: 0;
    padding: 16px 18px 20px;
    background: #ffffff;
    border-radius: 2px;
    box-sizing: border-box;
}
.group-room-dashboard-stage .group-video-library-head {
    grid-column: 1 / -1;
    margin: 0;
}
.group-room-dashboard-stage .group-video-library-head h2 { font-size: 1.07rem; margin: 0 0 4px; }
.group-room-dashboard-stage .group-video-library-head p { font-size: .86rem; }
.group-room-dashboard-stage .group-video-add-circle {
    grid-column: 1;
    grid-row: 2;
    margin: 0 auto !important;
}
.group-room-dashboard-stage .group-video-tile-grid-v55 {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
    width: 100%;
    min-width: 0;
    margin: 0;
}
.group-room-dashboard-stage .group-video-library:not(:has(.group-video-add-circle)) .group-video-tile-grid-v55 {
    grid-column: 1 / -1;
}
.group-room-dashboard-stage .group-video-tile,
.group-room-dashboard-stage .group-video-select-tile,
.group-room-dashboard-stage .group-video-empty-slot {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 118px;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: 1px solid #c7d8e9;
    border-radius: 2px;
    background: #f5f9fd;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: none;
}
.group-room-dashboard-stage .group-video-select-tile.active {
    border-color: #1a6ab5;
    box-shadow: 0 0 0 2px rgba(35,113,197,.22);
}
.group-room-dashboard-stage .group-video-tile-main {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
}
.group-room-dashboard-stage .group-video-tile-namebar {
    display: block;
    order: 0;
    min-height: 25px;
    padding: 4px 5px;
    font-size: .75rem;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #e3effb;
    color: #15314f;
}
.group-room-dashboard-stage .group-video-preview-frame {
    flex: 1;
    min-height: 0;
    width: 100%;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
}
.group-room-dashboard-stage .review-tile-status {
    font-size: .64rem;
    padding: 2px 4px;
    margin: 0;
    text-align: center;
}
.group-room-dashboard-stage .group-video-tile-actions {
    top: auto;
    bottom: 3px;
    right: 3px;
}
.group-room-dashboard-stage .group-video-empty-slot {
    display: grid;
    align-items: center;
    justify-items: center;
    border-style: dashed;
    color: #8a9bb0;
    background: #fbfdff;
    font-size: .7rem;
}
.group-room-dashboard-stage .group-peer-main-column {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    gap: 0;
    min-width: 0;
    margin: 0;
    align-self: stretch;
    align-content: start;
}
.group-room-dashboard-stage .group-video-center-details,
.group-room-dashboard-stage .group-video-center-detail {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.group-room-dashboard-stage .group-video-center-detail {
    height: 100%;
    margin: 0;
    padding: 16px;
    border-radius: 2px;
}
.group-room-dashboard-stage .group-video-player-shell { border-radius: 2px; }
.group-room-dashboard-stage .group-peer-comments-column {
    grid-column: 2;
    grid-row: 2;
    position: static;
    align-self: stretch;
    top: auto;
    min-width: 0;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    max-height: none;
    overflow: hidden;
    border-radius: 2px;
}
.group-room-dashboard-stage .group-peer-comments-column .group-video-comments-v55 {
    min-height: 0;
}
/* Das HTML-hidden-Attribut muss auch gegen das Flexlayout gewinnen. */
.group-room-dashboard-stage .group-peer-comments-column [data-comment-panel][hidden],
.group-room-dashboard-stage .group-video-center-details [data-video-detail][hidden] {
    display: none !important;
}
.group-room-dashboard-stage .group-room-reflection-panel {
    display: block;
    width: 100%;
    margin: 16px 0 0;
    padding: 22px;
    box-sizing: border-box;
    border-radius: 2px;
    background: #f9fbff;
}
.group-room-dashboard-stage .group-room-reflection-panel[hidden] { display: none !important; }
.group-room-dashboard-stage .group-room-reflection-panel .group-self-reflection-textarea {
    width: 100%;
    box-sizing: border-box;
}
.group-room-dashboard-stage .group-room-progress-below:empty { display: none; }
.group-room-dashboard-stage .group-room-progress-below:not(:empty) { margin-top: 16px; }
.group-room-dashboard-stage .group-overall-task-panel { border-radius: 2px; }
/* Kontofarben folgen dem vom Nutzenden gewählten Avatar. */
.group-room-dashboard-stage .avatar-tone-1 { --avatar-tint: #ebedf0; --avatar-edge: #a0a7b0; }
.group-room-dashboard-stage .avatar-tone-2 { --avatar-tint: #dbeafe; --avatar-edge: #5e97d9; }
.group-room-dashboard-stage .avatar-tone-3 { --avatar-tint: #d6f3e9; --avatar-edge: #55b99c; }
.group-room-dashboard-stage .avatar-tone-4 { --avatar-tint: #fff1be; --avatar-edge: #dfb94a; }
.group-room-dashboard-stage .avatar-tone-5 { --avatar-tint: #ffe3ed; --avatar-edge: #dc85a5; }
.group-room-dashboard-stage .avatar-tone-6 { --avatar-tint: #eee5ff; --avatar-edge: #a488d1; }
.group-room-dashboard-stage .avatar-tone-7 { --avatar-tint: #ffe7d8; --avatar-edge: #d9a17d; }
.group-room-dashboard-stage .avatar-tone-8 { --avatar-tint: #d8f1fa; --avatar-edge: #6fbdcb; }
.group-room-dashboard-stage .avatar-tone-9 { --avatar-tint: #f2e9d9; --avatar-edge: #c4a97d; }
.group-room-dashboard-stage .avatar-tone-10 { --avatar-tint: #ffdfd7; --avatar-edge: #e48b73; }
.group-room-dashboard-stage .member-color[class*="avatar-tone-"],
.group-room-dashboard-stage .group-video-tile-namebar[class*="avatar-tone-"] {
    background: var(--avatar-tint);
    border: 1px solid var(--avatar-edge);
    color: #14283e;
}
.group-room-dashboard-stage .group-video-tile-namebar[class*="avatar-tone-"] {
    border-top: 0;
    border-left: 0;
    border-right: 0;
}
.group-room-dashboard-stage .group-video-uploader[class*="avatar-tone-"] {
    padding: 5px 9px;
    border-radius: 2px;
}

@media (max-width: 800px) {
    .group-room-dashboard-stage .group-peer-review-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto;
    }
    .group-room-dashboard-stage .group-video-library { grid-column: 1; grid-row: 1; }
    .group-room-dashboard-stage .group-peer-main-column { grid-column: 1; grid-row: 2; }
    .group-room-dashboard-stage .group-peer-comments-column {
        grid-column: 1;
        grid-row: 3;
        min-height: 260px;
    }
    .group-room-dashboard-stage .group-video-tile-grid-v55 {
        gap: 6px;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 104px;
        overflow-x: auto;
        padding: 2px 3px 6px;
        scrollbar-width: thin;
    }
    .group-room-dashboard-stage .group-room-head .admin-actions {
        background: transparent;
        padding: 8px 0 0;
    }
}
@media (max-width: 530px) {
    .group-room-dashboard-stage .group-video-library {
        grid-template-columns: 48px minmax(0,1fr);
        gap: 8px;
        padding: 12px;
    }
    .group-room-dashboard-stage .group-video-add-circle { transform: scale(.8); transform-origin: center; }
    .group-room-dashboard-stage .group-video-tile,
    .group-room-dashboard-stage .group-video-select-tile,
    .group-room-dashboard-stage .group-video-empty-slot { height: 92px; }
    .group-room-dashboard-stage .group-video-tile-namebar { font-size: .6rem; }
    .group-room-dashboard-stage .group-video-empty-slot span { font-size: .55rem; }
}

/* Patch 362 – Inhaltsbühnen und Themenleiste: flüssige Größen auf allen
   Lern-, Kurs-, Nachrichten-, Gruppen-, Dozenten- und Administrationsseiten.
   Interaktive Boards behalten ihre interne Geometrie; kein globaler zoom. */
:is(.dashboard-stage-page,.learning-dashboard-stage,.module-overview-stage,
    .group-room-dashboard-stage,.group-overview-stage,.courses-stage,.lecturer-stage,
    .admin-stage,.support-stage,.imprint-stage,.my-course-page) {
    min-width: 0;
}
:is(.dashboard-stage-page,.learning-dashboard-stage,.module-overview-stage,
    .group-room-dashboard-stage,.group-overview-stage,.courses-stage,.lecturer-stage,
    .admin-stage,.support-stage,.imprint-stage,.my-course-page)
  :is(.hierarchy-page-head,.learning-workspace-head,.admin-page-head,
      .compact-page-intro,.course-browser-head,.my-course-hero,.group-room-head) {
    min-width: 0;
}
@media (min-width: 901px) and (max-width: 1600px) {
    .learning-dashboard-stage .learning-workspace-head,
    .module-overview-stage .hierarchy-page-head,
    .group-overview-stage .admin-page-head,
    .lecturer-stage .compact-page-intro,
    .admin-stage .compact-page-intro { margin-bottom: clamp(11px, 1vw, 20px); }
    :is(.learning-dashboard-stage,.module-overview-stage,.group-overview-stage,
        .lecturer-stage,.admin-stage,.my-course-page,.courses-stage)
      :is(.learning-workspace-head,.hierarchy-page-head,.admin-page-head,
          .compact-page-intro,.my-course-hero,.course-browser-head)
      h1 { font-size: clamp(1.6rem, 2.05vw, 2.35rem) !important; line-height: 1.16; }
    :is(.learning-workspace-head,.hierarchy-page-head,.admin-page-head,
        .compact-page-intro,.my-course-hero) {
        padding: clamp(16px, 1.8vw, 26px) clamp(18px, 2vw, 32px) !important;
    }
    .course-browser-head > div:first-child {
        padding: clamp(16px, 1.8vw, 26px) clamp(18px, 2vw, 32px) !important;
    }
    .learning-dashboard-stage .learning-workspace-strip {
        min-height: clamp(42px, 3.25vw, 47px);
        grid-template-columns: clamp(37px, 3vw, 48px) minmax(0,1fr) clamp(37px, 3vw, 48px);
    }
    .learning-dashboard-stage .learning-workspace-strip::before {
        inset: 0 clamp(37px, 3vw, 48px);
    }
    .learning-dashboard-stage .learning-workspace-strip-tab {
        min-height: 40px;
        padding: 5px clamp(9px, 1vw, 18px);
        font-size: clamp(.8rem, .88vw, .96rem);
        gap: 9px;
    }
    .learning-dashboard-stage .learning-workspace-tab-number { flex-shrink: 0; }
    .module-overview-stage .module-overview-row {
        grid-template-columns: minmax(150px, 27%) minmax(0,1fr);
        gap: clamp(10px, 1vw, 16px);
    }
    .module-overview-stage :is(.module-overview-image-card,.module-overview-text-card) {
        min-height: clamp(175px, 16vw, 270px);
    }
    .module-overview-stage .module-overview-image-card img { max-height: clamp(160px, 14.5vw, 260px); }
    .module-overview-stage .module-overview-text-card { padding: clamp(14px, 1.6vw, 25px); }
    .lecturer-stage .simple-dashboard-card,
    .admin-stage .simple-dashboard-card { min-height: clamp(160px, 13vw, 218px); }
    .group-room-dashboard-stage .group-video-library { padding: clamp(12px, 1.2vw, 18px); }
    .group-room-dashboard-stage .group-video-tile,
    .group-room-dashboard-stage .group-video-select-tile,
    .group-room-dashboard-stage .group-video-empty-slot { height: clamp(87px, 7.4vw, 118px); }
}
@media (max-width: 1100px) {
    .group-room-dashboard-stage .group-peer-review-layout {
        grid-template-columns: minmax(0, 1fr) minmax(230px, .63fr);
        gap: clamp(12px, 1.5vw, 18px);
    }
    .group-room-dashboard-stage .group-video-tile-grid-v55 {
        gap: 6px;
        grid-template-columns: repeat(5,minmax(0,1fr));
    }
    .group-room-dashboard-stage .group-video-tile,
    .group-room-dashboard-stage .group-video-select-tile,
    .group-room-dashboard-stage .group-video-empty-slot { height: 95px; }
}
@media (max-width: 900px) {
    .learning-dashboard-stage .learning-workspace-head,
    .module-overview-stage .hierarchy-page-head,
    .group-overview-stage .admin-page-head { margin-bottom: 12px; }
    :is(.learning-workspace-head,.hierarchy-page-head,.admin-page-head,
        .compact-page-intro,.my-course-hero) { padding: 16px !important; }
    .course-browser-head > div:first-child { padding: 16px !important; }
    .learning-workspace-head > div:first-child,
    .admin-page-head > div:first-child { padding-right: 135px !important; }
    :is(.learning-workspace-head,.hierarchy-page-head,.admin-page-head,
        .compact-page-intro,.course-browser-head,.my-course-hero)
      h1 { font-size: clamp(1.45rem, 3.25vw, 2rem) !important; }
    .learning-dashboard-stage .learning-workspace-strip {
        grid-template-columns: 38px minmax(0,1fr) 38px;
        min-height: 44px;
    }
    .learning-dashboard-stage .learning-workspace-strip::before { inset: 0 38px; }
    .learning-dashboard-stage .learning-workspace-strip-tab {
        font-size: clamp(.76rem, 1.55vw, .9rem);
        min-height: 42px;
        padding: 5px 10px;
        gap: 7px;
    }
    .learning-dashboard-stage .learning-workspace-strip-tab .learning-workspace-tab-number {
        width: 25px; height: 25px; flex-basis: 25px; font-size: .75rem;
    }
    .module-overview-stage .module-overview-row {
        grid-template-columns: minmax(112px, 28%) minmax(0,1fr);
        gap: 12px;
    }
    .module-overview-stage :is(.module-overview-image-card,.module-overview-text-card) { min-height: 160px; }
    .module-overview-stage .module-overview-image-card img { max-height: 150px; }
    .module-overview-stage .module-overview-text-card { padding: 12px; }
    .lecturer-stage .lecturer-dashboard-grid,
    .admin-stage .admin-simple-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 12px; }
    .lecturer-stage .simple-dashboard-card,
    .admin-stage .simple-dashboard-card { min-height: 150px; }
    .group-room-dashboard-stage .group-video-library {
        grid-template-columns: 52px minmax(0,1fr);
        padding: 12px;
    }
    .group-room-dashboard-stage .group-video-tile-grid-v55 {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: clamp(100px, 22vw, 138px);
        overflow-x: auto;
        padding: 2px 3px 7px;
    }
}
@media (max-width: 800px) {
    .group-room-dashboard-stage .group-peer-review-layout {
        grid-template-columns: minmax(0,1fr);
        grid-template-rows: auto auto auto;
    }
    .group-room-dashboard-stage .group-video-library { grid-column: 1; grid-row: 1; }
    .group-room-dashboard-stage .group-peer-main-column { grid-column: 1; grid-row: 2; }
    .group-room-dashboard-stage .group-peer-comments-column {
        grid-column: 1; grid-row: 3; min-height: 220px;
    }
}
@media (max-width: 620px) {
    .learning-workspace-head > div:first-child,
    .admin-page-head > div:first-child { padding: 54px 0 0 !important; }
    .module-overview-stage .module-overview-row { grid-template-columns: minmax(0,1fr); gap: 9px; }
    .module-overview-stage .module-overview-image-card { min-height: 150px; }
    .module-overview-stage .module-overview-image-card img { max-height: 145px; }
    .module-overview-stage .module-overview-text-card { min-height: 0; padding: 13px; }
    .lecturer-stage .lecturer-dashboard-grid,
    .admin-stage .admin-simple-grid { grid-template-columns: minmax(0,1fr) !important; }
    .learning-dashboard-stage .learning-workspace-strip-tab { font-size: .75rem; padding: 4px 6px; gap: 5px; }
    .learning-dashboard-stage .learning-workspace-strip-tab .learning-workspace-tab-number {
        width: 22px; height: 22px; flex-basis: 22px; font-size: .7rem;
    }
    .group-room-dashboard-stage .group-room-reflection-panel { padding: 13px; }
}

/* Patch 363 – mobile Vollbreite ohne Campus-Fotomontage. Desktop unverändert. */
@media (max-width: 700px), (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
    html, body { background-color: #fff !important; }
    body {
        background: #fff !important;
        background-image: none !important;
        background-attachment: scroll !important;
        overflow-x: clip;
    }
    html body > main,
    html body > main.container,
    html body > main.container.dashboard-course-overview-page,
    html body > main.container.my-course-page {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 12px 0 0 !important;
        padding: 0 0 24px !important;
    }
    html body > main.container > :is(section, article, nav, div),
    html body > main.container .learning-workspace,
    html body > main.container .learning-workspace-main,
    html body > main.container .learning-workspace-content,
    html body > main.container .learning-workspace-panel,
    html body > main.container .module-overview-row,
    html body > main.container .group-peer-review-layout {
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }
    html body > main.container :is(.panel,.card,.course-content-card,
        .learning-workspace-head,.learning-workspace-nav,.learning-workspace-panel,
        .hierarchy-page-head,.admin-page-head,.compact-page-intro,
        .group-room-head,.my-course-hero,.simple-dashboard-card,
        .module-overview-image-card,.module-overview-text-card) {
        box-sizing: border-box;
        max-width: 100%;
        min-width: 0;
    }
    .module-overview-stage .module-overview-row { gap: 0; }
    .module-overview-stage .module-overview-image-card,
    .module-overview-stage .module-overview-text-card { width: 100%; }
}

/* Game preview and landscape overlay are constructed only on phones. */
.cp-mobile-game-host { width: 100%; min-width: 0; }
.cp-mobile-game-preview {
    position: relative;
    height: clamp(190px, 46vw, 280px);
    overflow: hidden;
    isolation: isolate;
    border: 1px solid #c4d6e9;
    background: #eaf3fc;
}
.cp-mobile-game-preview > :not(.cp-mobile-game-activate) {
    filter: blur(5px);
    opacity: .72;
    pointer-events: none !important;
    user-select: none;
}
.cp-mobile-game-preview::after {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
    background: rgba(255,255,255,.32);
    pointer-events: none;
}
.cp-mobile-game-activate {
    position: absolute;
    z-index: 2;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
    max-width: calc(100% - 20px);
    padding: 13px 20px;
    border: 2px solid #fff;
    background: #176ab5;
    color: #fff;
    border-radius: 4px;
    box-shadow: 0 5px 20px rgba(5,38,70,.24);
    font-size: 1rem;
    font-weight: 600;
}
.cp-mobile-game-activate:hover { transform: translate(-50%, -50%); }
.cp-mobile-game-modal {
    position: fixed;
    z-index: 2147483640;
    inset: 0;
    width: 100%; height: 100%;
    width: 100vw;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #101c2b;
    color: white;
    overflow: hidden;
    overscroll-behavior: contain;
}
.cp-mobile-game-modal:fullscreen { width: 100%; height: 100%; }
.cp-mobile-game-open { overflow: hidden !important; }
.cp-mobile-game-close {
    position: absolute;
    z-index: 20;
    right: max(10px, env(safe-area-inset-right));
    top: max(8px, env(safe-area-inset-top));
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #ba2534;
    color: #fff;
    font-size: 30px;
    line-height: 1;
}
.cp-mobile-game-viewport {
    position: relative;
    aspect-ratio: 16 / 9;
    width: min(100vw, 177.7778dvh);
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    background: #fff;
}
.cp-mobile-game-canvas {
    position: absolute;
    left: 50%; top: 50%;
    transform-origin: center;
    transform: translate(-50%, -50%) scale(var(--cp-mobile-game-scale, .5));
    box-sizing: border-box;
    margin: 0;
    color: #172a40;
}
.cp-mobile-game-canvas > * {
    display: block;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    margin: 0 !important;
}
.cp-mobile-game-modal.is-portrait .cp-mobile-game-viewport {
    filter: blur(8px) brightness(.65);
    pointer-events: none;
}
.cp-mobile-game-turn {
    position: absolute;
    z-index: 10;
    left: 50%; top: 50%;
    width: min(86vw, 340px);
    padding: 24px 19px;
    transform: translate(-50%, -50%);
    display: grid;
    justify-items: center;
    gap: 10px;
    background: rgba(14, 30, 49, .94);
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 5px;
    text-align: center;
    color: #fff;
    box-shadow: 0 12px 40px rgba(0,0,0,.3);
}
.cp-mobile-game-turn[hidden] { display: none !important; }
.cp-mobile-game-turn-icon { font-size: 49px; line-height: 1; }
.cp-mobile-game-turn strong { font-size: 1.25rem; }
.cp-mobile-game-turn span:last-child { font-size: .95rem; }

/* In the landscape game stage, keep the cable game in its original
   two-horizontal-row geometry even when the physical phone viewport is narrow. */
.cp-mobile-game-modal .plug-match-card .plug-match-board,
.cp-mobile-game-modal .plug-match-card.plug-match-card-goals.plug-match-compact .plug-match-board {
    display: block !important;
    min-height: 555px !important;
    padding: 28px 25px 18px !important;
    overflow: hidden !important;
}
.cp-mobile-game-modal .plug-match-card .plug-match-rowband,
.cp-mobile-game-modal .plug-match-card.plug-match-card-goals.plug-match-compact .plug-match-rowband {
    display: grid !important;
    grid-template-columns: repeat(var(--plug-match-count, 5), minmax(0, 1fr)) !important;
    min-width: 0 !important;
    width: 100% !important;
    gap: 12px !important;
}
.cp-mobile-game-modal .plug-match-card .plug-match-target-band {
    min-height: 205px !important;
    margin-bottom: 80px !important;
}
.cp-mobile-game-modal .plug-match-card .plug-match-source-band { min-height: 156px !important; }
.cp-mobile-game-modal .plug-match-card .plug-match-target-item,
.cp-mobile-game-modal .plug-match-card .plug-match-source-item { width: auto !important; }


/* Patch 364 – viewport-correct mobile layout across every route.
   Dekomposition contains the legacy module-card grid, unlike the newer
   learning-area overview. Make exactly one readable card per phone row. */
@media (max-width: 700px), (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
    html body main :is(.module-grid,.decomposition-part-grid) {
        grid-template-columns: minmax(0,1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 12px !important;
    }
    html body .module-overview-stage .module-overview-row {
        grid-template-columns: minmax(0,1fr) !important;
    }
    html body :is(.dashboard-stage-page,.learning-dashboard-stage,.module-overview-stage,.group-overview-stage) {
        max-width: 100% !important;
    }
}
/* Mobile game portrait preview and landscape workspace share the SAME DOM.
   Game events and exercise-state saves continue to target the original page. */
.cp-mobile-game-modal .glass-sort-card {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible;
}
.cp-mobile-game-modal .glass-sort-card .glass-sort-intro {
    padding: 8px 12px 1px;
}
.cp-mobile-game-modal .glass-sort-card .glass-sort-intro h2 {
    font-size: 1.22rem; margin: 0 0 2px;
}
.cp-mobile-game-modal .glass-sort-card .glass-sort-intro p { font-size: .88rem; line-height: 1.2; }
.cp-mobile-game-modal .glass-sort-card .glass-sort-body {
    margin: 5px 8px 4px;
    padding: 8px 14px 7px;
    border-radius: 5px;
}
.cp-mobile-game-modal .glass-sort-card .glass-sort-prompt {
    font-size: 1.08rem; margin: 0 0 3px;
}
.cp-mobile-game-modal .glass-sort-card .glass-sort-current {
    min-height: 35px; margin: 0 0 4px;
}
.cp-mobile-game-modal .glass-sort-card .glass-sort-current-card { min-height: 32px; padding: 5px 12px; }
.cp-mobile-game-modal .glass-sort-card .glass-sort-columns {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    align-items: start; gap: 10px !important;
}
.cp-mobile-game-modal .glass-sort-card .glass-sort-column-label {
    margin: 0 0 3px;
    font-size: .98rem;
}
.cp-mobile-game-modal .glass-sort-card .glass-sort-glass {
    height: 205px !important;
    width: min(100%,340px) !important;
    max-width: 100%;
}
.cp-mobile-game-modal .glass-sort-card .glass-sort-glass-shape {
    width: 275px !important;
    height: 188px !important;
}
.cp-mobile-game-modal .glass-sort-card .glass-sort-glass-shape::before { border-width: 5px; border-radius: 0 0 28px 28px; }
.cp-mobile-game-modal .glass-sort-card .glass-sort-glass-fill {
    width: 263px !important;
    height: 179px !important;
    padding: 5px 9px;
    gap: 3px;
    border-radius: 0 0 26px 26px;
}
.cp-mobile-game-modal .glass-sort-card .glass-sort-stack-item {
    padding: 4px 8px; font-size: .74rem; line-height: 1.1;
}
.cp-mobile-game-modal .glass-sort-card .glass-sort-footer {
    padding: 6px 12px 8px;
}
.cp-mobile-game-modal .glass-sort-card .glass-sort-actions {
    display: flex; flex-wrap: nowrap; margin: 0;
}
.cp-mobile-game-modal .glass-sort-card .glass-sort-actions .button {
    min-height: 34px; padding: 5px 12px;
    flex: 0 0 auto; min-width: 118px;
}
.cp-mobile-game-modal .cp-mobile-game-viewport { background: #fff; }
.cp-mobile-game-modal .cp-mobile-game-canvas { contain: layout; }

/* Pointer-based dragging is usable in the dedicated phone game view. */
.cp-mobile-game-modal .glass-sort-card [data-drag-item] { touch-action: none; }
.glass-sort-touch-ghost {
    position: fixed;
    z-index: 2147483645;
    max-width: min(240px, 55vw);
    pointer-events: none;
    user-select: none;
    transform: translate(-50%, -50%);
    border: 1px solid #4f78aa;
    border-radius: 5px;
    background: #dcecff;
    color: #142c48;
    box-shadow: 0 6px 20px rgba(0,0,0,.23);
    padding: 6px 11px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

/* Patch 365: five Dekomposition sections use the same paired image/text cards
   as the four main learning areas, including on actual phone viewports. */
.decomposition-page .decomposition-part-grid.module-overview-list {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px;
}
.decomposition-page .decomposition-overview-row {
    display: grid;
    grid-template-columns: minmax(140px, 30%) minmax(0, 1fr);
    gap: 14px;
}
.decomposition-page .decomposition-overview-row .module-overview-image-card,
.decomposition-page .decomposition-overview-row .module-overview-text-card {
    min-height: 205px;
}
.decomposition-page .decomposition-overview-row .module-overview-image-card img {
    width: min(100%, 240px);
    max-height: 190px;
    height: auto;
    object-fit: contain;
}
.decomposition-page .decomposition-overview-row.pending :is(.module-overview-image-card,.module-overview-text-card) {
    opacity: .78;
}
@media (max-width: 700px), (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
    html body .decomposition-page .decomposition-overview-row {
        grid-template-columns: minmax(100px, 34%) minmax(0,1fr) !important;
        gap: 10px !important;
    }
    html body .decomposition-page .decomposition-overview-row :is(.module-overview-image-card,.module-overview-text-card) {
        min-height: 155px;
        height: auto;
    }
    html body .decomposition-page .decomposition-overview-row .module-overview-image-card { padding: 6px; }
    html body .decomposition-page .decomposition-overview-row .module-overview-image-card img { max-height: 144px; }
    html body .decomposition-page .decomposition-overview-row .module-overview-text-card {
        padding: 12px 10px;
        gap: 5px;
        overflow-wrap: anywhere;
    }
    html body .decomposition-page .decomposition-overview-row .module-overview-topic {
        font-size: clamp(.84rem, 3.9vw, 1.05rem);
        line-height: 1.25;
    }
    html body .decomposition-page .decomposition-overview-row .module-overview-description {
        font-size: clamp(.76rem, 3.3vw, .9rem);
        line-height: 1.35;
    }
    html body .decomposition-page .decomposition-overview-row .module-overview-part { font-size: .72rem; }
    html body .decomposition-page .decomposition-overview-row .module-overview-status.badge { font-size: .69rem; padding: 3px 7px; }
}
/* The fullscreen game surface is not an independent document. It retains
   the exact live gameplay node, so completion persists on the main page.
   Fill the available phone viewport instead of enforcing a 16:9 letterbox. */
.cp-mobile-game-modal .cp-mobile-game-viewport {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: auto !important;
}
.cp-mobile-game-modal .cp-mobile-game-canvas {
    transform: translate(-50%, -50%) scale(
        var(--cp-mobile-game-scale-x, .5),
        var(--cp-mobile-game-scale-y, .5)
    );
}

/* Allow an exercise card to occupy the full fitted height. This keeps the
   action buttons visible at the bottom of the game view instead of leaving
   an inactive white strip below a short activity. */
.cp-mobile-game-modal .glass-sort-card {
    display: flex !important;
    flex-direction: column;
    height: 100% !important;
    min-height: 0;
}
.cp-mobile-game-modal .glass-sort-card .glass-sort-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
}
.cp-mobile-game-modal .glass-sort-card .glass-sort-footer {
    flex: 0 0 auto;
}


/* Patch 366 – mobile game overlay: proportionally fit exercises, keep calm
   side margins and remove the decorative blue full-screen framing for the
   glass and plug games. */
.cp-mobile-game-modal {
    background: #edf3f9;
}
.cp-mobile-game-modal .cp-mobile-game-viewport {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    overflow: hidden;
    background: #edf3f9;
}
.cp-mobile-game-modal .cp-mobile-game-canvas {
    transform-origin: center;
    transform: translate(-50%, -50%) scale(var(--cp-mobile-game-scale, .5));
}
.cp-mobile-game-modal .cp-mobile-game-canvas > [data-glass-sort],
.cp-mobile-game-modal .cp-mobile-game-canvas > [data-plug-match] {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
.cp-mobile-game-modal .glass-sort-card,
.cp-mobile-game-modal .plug-match-card {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
.cp-mobile-game-modal .glass-sort-card .glass-sort-body {
    margin: 0 !important;
    padding: 26px 28px 20px !important;
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    background: #ffffff !important;
    background-image: none !important;
}
.cp-mobile-game-modal .glass-sort-card .glass-sort-footer {
    padding: 12px 0 0 !important;
    border-top: 0 !important;
    background: transparent !important;
}
.cp-mobile-game-modal .glass-sort-card .glass-sort-columns {
    gap: 18px !important;
}
.cp-mobile-game-modal .plug-match-card-inline.plug-match-card-goals .plug-match-board,
.cp-mobile-game-modal .plug-match-card.plug-match-card-goals.plug-match-compact .plug-match-board {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    background: #ffffff !important;
    background-image: none !important;
}
.cp-mobile-game-modal .plug-match-card .plug-match-board,
.cp-mobile-game-modal .plug-match-card.plug-match-card-goals.plug-match-compact .plug-match-board {
    padding: 24px 24px 16px !important;
}


/* Patch 367 – mobile fullscreen games: height-first proportional fit,
   remove redundant intro copy in fullscreen and restore a calm, undistorted
   board geometry for plug and glass exercises. */
.cp-mobile-game-modal .cp-mobile-game-viewport {
    overflow-x: var(--cp-mobile-game-overflow-x, hidden);
    overflow-y: hidden;
    display: block;
    touch-action: pan-x pan-y pinch-zoom;
}
.cp-mobile-game-modal .cp-mobile-game-canvas {
    transform-origin: center;
    transform: translate(-50%, -50%) scale(var(--cp-mobile-game-scale, .5));
}
.cp-mobile-game-modal .plug-match-card .plug-match-intro,
.cp-mobile-game-modal .glass-sort-card .glass-sort-intro {
    display: none !important;
}
.cp-mobile-game-modal .plug-match-card,
.cp-mobile-game-modal .glass-sort-card {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.cp-mobile-game-modal .plug-match-card .plug-match-board,
.cp-mobile-game-modal .plug-match-card.plug-match-card-goals.plug-match-compact .plug-match-board {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 190px minmax(252px, 1fr) auto !important;
    min-height: 560px !important;
    padding: 18px 22px 16px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    background: #ffffff !important;
    background-image: none !important;
    align-content: stretch !important;
}
.cp-mobile-game-modal .plug-match-card .plug-match-rowband,
.cp-mobile-game-modal .plug-match-card.plug-match-card-goals.plug-match-compact .plug-match-rowband {
    display: grid !important;
    grid-template-columns: repeat(var(--plug-match-count, 5), minmax(0, 1fr)) !important;
    gap: 10px !important;
    min-width: 0 !important;
    width: 100% !important;
    justify-items: center !important;
    align-items: start !important;
}
.cp-mobile-game-modal .plug-match-card .plug-match-target-band,
.cp-mobile-game-modal .plug-match-card.plug-match-card-goals.plug-match-compact .plug-match-target-band {
    grid-row: 1 !important;
    min-height: 190px !important;
    margin: 0 !important;
    align-self: start !important;
}
.cp-mobile-game-modal .plug-match-card .plug-match-source-band,
.cp-mobile-game-modal .plug-match-card.plug-match-card-goals.plug-match-compact .plug-match-source-band {
    grid-row: 3 !important;
    min-height: 0 !important;
    margin: 0 !important;
    align-self: end !important;
    align-items: end !important;
}
.cp-mobile-game-modal .plug-match-card.plug-match-card-goals .plug-match-target-assembly {
    width: 100% !important;
    height: 154px !important;
}
.cp-mobile-game-modal .plug-match-card.plug-match-card-goals .plug-match-target-assembly .plug-match-bulb {
    width: 54px !important;
    top: -10px !important;
    margin: 0 !important;
}
.cp-mobile-game-modal .plug-match-card.plug-match-card-goals .plug-match-target-assembly .plug-match-box-target {
    top: 56px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}
.cp-mobile-game-modal .plug-match-card.plug-match-card-goals .plug-match-box-target,
.cp-mobile-game-modal .plug-match-card.plug-match-card-goals .plug-match-box-source {
    width: min(110px, 100%) !important;
    min-width: 0 !important;
    min-height: 68px !important;
    padding: 10px 9px !important;
    font-size: .74rem !important;
    line-height: 1.18 !important;
    background: #ffffff !important;
    color: #1f2937 !important;
    border: 1.5px solid rgba(17,24,39,.55) !important;
    box-shadow: 0 4px 12px rgba(15,23,42,.06) !important;
}
.cp-mobile-game-modal .plug-match-card .plug-match-source-stack {
    min-height: 118px !important;
    gap: 0 !important;
}
.cp-mobile-game-modal .plug-match-card .plug-match-plug {
    width: 56px !important;
    height: 78px !important;
    margin-bottom: -24px !important;
}
.cp-mobile-game-modal .plug-match-card .plug-match-plug-body {
    left: 12px !important;
    top: 20px !important;
    width: 32px !important;
    height: 32px !important;
}
.cp-mobile-game-modal .plug-match-card .plug-match-pin {
    top: 3px !important;
    height: 26px !important;
}
.cp-mobile-game-modal .plug-match-card .plug-match-pin-a { left: 20px !important; }
.cp-mobile-game-modal .plug-match-card .plug-match-pin-b { left: 32px !important; }
.cp-mobile-game-modal .plug-match-card .plug-match-info-box {
    top: 50% !important;
}
.cp-mobile-game-modal .glass-sort-card .glass-sort-body {
    margin: 0 !important;
    padding: 18px 24px 18px !important;
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    background: #ffffff !important;
    background-image: none !important;
}
.cp-mobile-game-modal .glass-sort-card .glass-sort-footer {
    padding: 12px 0 0 !important;
    border-top: 0 !important;
    background: transparent !important;
}


/* Patch 368 – Lernmodulkarten mit Langtexten und reduzierten Status-Pills */
.module-overview-stage .module-overview-row {
    grid-template-columns: minmax(170px, 26%) minmax(0, 1fr);
    gap: 14px;
}
.module-overview-stage .module-overview-image-card,
.module-overview-stage .module-overview-text-card {
    min-height: 238px;
}
.module-overview-stage .module-overview-image-card {
    padding: 12px;
}
.module-overview-stage .module-overview-image-card img {
    max-height: 182px;
}
.module-overview-stage .module-overview-text-card {
    position: relative;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    padding: 22px 24px 20px;
}
.module-overview-stage .module-overview-part {
    position: absolute;
    top: 18px;
    right: 20px;
    font-size: .78rem;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.module-overview-stage .module-overview-status.badge {
    display: none !important;
}
.module-overview-stage .module-overview-topic {
    display: block;
    width: 100%;
    padding-right: 92px;
    font-size: 1.22rem;
    line-height: 1.3;
}
.module-overview-stage .module-overview-topic-addon {
    font-weight: 650;
    color: #476582;
}
.module-overview-stage .module-overview-description-rich {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}
.module-overview-stage .module-overview-description-rich p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.52;
    color: #172a40;
}
.decomposition-page .decomposition-overview-row .module-overview-text-card {
    padding-top: 42px;
    gap: 10px;
}
.decomposition-page .decomposition-overview-row .module-overview-part {
    top: 16px;
    right: 16px;
}
.decomposition-page .decomposition-overview-row .module-overview-topic {
    padding-right: 84px;
}
@media (max-width: 900px) {
    .module-overview-stage .module-overview-row {
        grid-template-columns: minmax(150px, 30%) minmax(0, 1fr);
    }
    .module-overview-stage .module-overview-image-card img {
        max-height: 164px;
    }
    .module-overview-stage .module-overview-topic {
        font-size: 1.08rem;
    }
    .module-overview-stage .module-overview-description-rich p,
    .module-overview-stage .module-overview-description {
        font-size: .91rem;
    }
}
@media (max-width: 620px) {
    .module-overview-stage .module-overview-image-card,
    .module-overview-stage .module-overview-text-card {
        min-height: 0;
    }
    .module-overview-stage .module-overview-image-card {
        min-height: 180px;
    }
    .module-overview-stage .module-overview-image-card img {
        max-height: 154px;
    }
    .module-overview-stage .module-overview-text-card {
        padding: 18px 16px 16px;
    }
    .module-overview-stage .module-overview-part {
        top: 14px;
        right: 14px;
    }
    .module-overview-stage .module-overview-topic {
        padding-right: 74px;
        font-size: 1rem;
    }
    .module-overview-stage .module-overview-description-rich {
        gap: 8px;
    }
    .module-overview-stage .module-overview-description-rich p,
    .module-overview-stage .module-overview-description {
        font-size: .87rem;
        line-height: 1.45;
    }
    .decomposition-page .decomposition-overview-row .module-overview-text-card {
        padding-top: 38px;
    }
}


/* Patch 369 – Hauptübersicht: Titel oberhalb des Bildes und der didaktische
   Untertitel als alleinige Überschrift in der Textkachel. Getrennt von den
   Dekompositions-Unterthemen, die ihre bisherige Anordnung behalten. */
.learning-areas-overview .module-overview-image-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(8px, 1.5vw, 16px);
    padding: clamp(14px, 1.8vw, 22px);
}
.learning-areas-overview .learning-area-image-title {
    display: block;
    width: 100%;
    color: #142c48;
    font-size: clamp(1.12rem, 1.7vw, 1.34rem);
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}
.learning-areas-overview .module-overview-image-card img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: clamp(136px, 14vw, 174px);
    object-fit: contain;
}
.learning-areas-overview .module-overview-text-card {
    justify-content: center;
    padding-top: 30px;
}
.learning-areas-overview .module-overview-topic {
    font-size: clamp(1.06rem, 1.5vw, 1.28rem);
    line-height: 1.32;
    color: #142c48;
    font-weight: 700;
}
@media (max-width: 900px) {
    .learning-areas-overview .module-overview-image-card {
        gap: 8px;
        padding: 12px;
    }
    .learning-areas-overview .learning-area-image-title {
        font-size: 1.08rem;
    }
    .learning-areas-overview .module-overview-image-card img {
        max-height: 160px;
    }
    .learning-areas-overview .module-overview-text-card {
        padding-top: 28px;
    }
}
@media (max-width: 620px) {
    .learning-areas-overview .module-overview-image-card {
        min-height: 0;
        gap: 10px;
        padding: 16px;
    }
    .learning-areas-overview .module-overview-image-card img {
        max-height: 155px;
    }
    .learning-areas-overview .module-overview-text-card {
        padding-top: 34px;
    }
    .learning-areas-overview .module-overview-topic {
        font-size: 1.05rem;
    }
}

/* ENDE: 343-dashboard-stage-harmonization.css */

/* START: 344-unified-primary-hero.css */
/* Patch 375 – zentrales Titelbanner fuer alle Rollen und Seitentypen.
 * Der uebergeordnete Seitenhintergrund mit den weichen weissen Uebergaengen
 * wird weiterhin ausschliesslich in 130-stage-lock.css gezeichnet.
 * Hier erhalten NUR die obersten grossen Titelbereiche die Campusaufnahme;
 * Abschnitts-, Tabellen- und Kursmitgliederkoepfe bleiben ohne Foto.
 * Der Bildausschnitt entspricht dem rechten Bildfenster des Dashboards,
 * statt das breite Quellfoto auf die geringe Bannerhoehe zu beschneiden.
 */
:root {
  --cp-primary-hero-bg: linear-gradient(110deg, #286bb4 0%, #2874bb 70%, #2670b5 100%);
  --cp-primary-hero-image: url('../images/backgrounds/campus-hero-339.webp');
  --cp-primary-hero-image-width: min(49%, 610px);
}

/* Nur grosse Seitenkopf-Kacheln (einschliesslich studentischer,
   dozentischer und administrativer Ansichten). */
body :is(.portal-hero, .hierarchy-page-head, .learning-workspace-head,
  .admin-page-head, .compact-page-intro, .my-course-hero,
  .my-course-empty, .public-info-head, .account-profile-head,
  .messages-title, .course-browser-head > div:first-child) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--cp-primary-hero-bg) !important;
  background-image: var(--cp-primary-hero-bg) !important;
  color: #fff;
}

body :is(.portal-hero, .hierarchy-page-head, .learning-workspace-head,
  .admin-page-head, .compact-page-intro, .my-course-hero,
  .my-course-empty, .public-info-head, .account-profile-head,
  .messages-title, .course-browser-head > div:first-child)::after {
  content: '';
  pointer-events: none;
  position: absolute;
  z-index: -1;
  inset: 0 0 0 auto;
  width: var(--cp-primary-hero-image-width);
  background-image: linear-gradient(90deg, #2874bb 0%, rgba(35,112,187,.3) 55%, rgba(22,86,154,.16) 100%),
    var(--cp-primary-hero-image);
  background-size: 100% 100%, cover;
  background-position: center, right bottom;
  background-repeat: no-repeat;
  opacity: .88;
}

/* Der Kopf der Kurssuche umschliesst darunter noch ein weisses Suchformular.
   Nur das allererste Kindelement erhaelt das Campusbild. */
.course-browser-head {
  background: #fff !important;
  background-image: none !important;
}

/* Untergeordnete Abschnitte (insbesondere Kursleitung / Teilnehmende)
   behalten ihr blaues Band, aber niemals das Gebaeudefoto. */
.my-course-section .my-course-section-head {
  background: linear-gradient(90deg, #286bb4 0%, #2874bb 100%) !important;
  background-image: linear-gradient(90deg, #286bb4 0%, #2874bb 100%) !important;
  color: #fff;
}
.my-course-section .my-course-section-head::before,
.my-course-section .my-course-section-head::after {
  background-image: none !important;
}

/* Dashboard und die weiteren Titelbanner bleiben bei schmalen Ansichten
   mit schmalerem Fotofenster lesbar. */
@media (max-width: 700px) {
  :root { --cp-primary-hero-image-width: 52%; }
  body :is(.portal-hero, .hierarchy-page-head, .learning-workspace-head,
    .admin-page-head, .compact-page-intro, .my-course-hero,
    .my-course-empty, .public-info-head, .account-profile-head,
    .messages-title, .course-browser-head > div:first-child)::after {
    opacity: .65;
  }
}

/* Patch 376: Keine browserseitige Ganzseiten-Überblendung.
 * Die zentrale Seitenhülle bleibt bei kompatiblen HTML-Navigationen erhalten.
 */

/* ENDE: 344-unified-primary-hero.css */

/* START: 345-uniform-stage.css */
/* Patch 378 – EIN verbindlicher Inhaltsrahmen für alle Seitentypen.
 * Spät im Stylesheet eingebunden: ersetzt alte abweichende Breitenregeln,
 * ohne die Innengestaltung der Kurse, Übungen oder Formulare zu verändern.
 * Der Campus-Nebel wird vom globalen Rahmen abgeleitet, nicht von Kacheln.
 */
:root {
  --cp-shell-max-width: 1080px;
  --cp-shell-column-width: 75%;
  --cp-shell-gutter: 26px;
  /* Korrekte Hintergrundkanten bereits beim ersten Paint (vor JavaScript). */
  --cp-shell-fog-width: clamp(150px, 13.5vw, 240px);
  --cp-shell-core-left: calc(50% - min(37.5%, 540px) + var(--cp-shell-gutter));
  --cp-shell-core-right: calc(50% + min(37.5%, 540px) - var(--cp-shell-gutter));
  --cp-fog-gradient-stops:
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) calc(var(--cp-shell-core-left) - var(--cp-shell-fog-width)),
    rgba(255,255,255,.18) calc(var(--cp-shell-core-left) - var(--cp-shell-fog-width) * .75),
    rgba(255,255,255,.55) calc(var(--cp-shell-core-left) - var(--cp-shell-fog-width) * .48),
    rgba(255,255,255,.90) calc(var(--cp-shell-core-left) - var(--cp-shell-fog-width) * .18),
    #fff var(--cp-shell-core-left),
    #fff var(--cp-shell-core-right),
    rgba(255,255,255,.90) calc(var(--cp-shell-core-right) + var(--cp-shell-fog-width) * .18),
    rgba(255,255,255,.55) calc(var(--cp-shell-core-right) + var(--cp-shell-fog-width) * .48),
    rgba(255,255,255,.18) calc(var(--cp-shell-core-right) + var(--cp-shell-fog-width) * .75),
    rgba(255,255,255,0) calc(var(--cp-shell-core-right) + var(--cp-shell-fog-width)),
    rgba(255,255,255,0) 100%;
}

@media (min-width: 701px) and (max-width: 900px) {
  :root {
    --cp-shell-core-left: 26px;
    --cp-shell-core-right: calc(100% - 26px);
  }
}

@media (min-width: 901px) {
  html body > main.container,
  html body > main.container.dashboard-course-overview-page,
  html body > main.container.my-course-page,
  html body > main.container.wide-container,
  html body > main.container.quiz-builder-page {
    box-sizing: border-box !important;
    width: var(--cp-shell-column-width) !important;
    max-width: var(--cp-shell-max-width) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--cp-shell-gutter) !important;
    padding-right: var(--cp-shell-gutter) !important;
  }
}

@media (min-width: 701px) and (max-width: 900px) {
  html body > main.container,
  html body > main.container.dashboard-course-overview-page,
  html body > main.container.my-course-page,
  html body > main.container.wide-container,
  html body > main.container.quiz-builder-page {
    box-sizing: border-box !important;
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* Seiteninhalte dürfen den gemeinsamen Rahmen nicht versehentlich verbreitern.
 * Breite Datenraster erhalten innerhalb ihrer Karten horizontales Scrollen. */
html body > main.container {
  overflow-wrap: anywhere;
}
html body > main.container > :is(section, article, nav, div) {
  min-width: 0;
  max-width: 100%;
}
html body > main.container .table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

/* ENDE: 345-uniform-stage.css */

/* START: 346-privacy-user-management.css */
/* V379: Datenschutzseite und administrative Kontoanlage. Keine globalen Breitenregeln. */
.privacy-card { display: grid; gap: 18px; }
.privacy-card .privacy-section { scroll-margin-top: 135px; }
.privacy-card .privacy-section h2 { margin-top: 0; }
.privacy-card .privacy-section h3 { margin: 20px 0 8px; font-size: 1.1rem; }
.privacy-card .privacy-section p, .privacy-card .privacy-section li { line-height: 1.65; }
.privacy-card .privacy-section address { font-style: normal; line-height: 1.7; }
.privacy-card .privacy-section code { overflow-wrap: anywhere; }
.privacy-review-banner, .privacy-pending { border: 1px solid #d0a24c; background: #fff8e7; color: #362a0f; border-radius: 9px; padding: 16px 20px; }
.privacy-review-banner p, .privacy-pending p { margin-bottom: 0; }
.privacy-toc { display: flex; flex-wrap: wrap; gap: 8px; }
.privacy-toc a { display: inline-block; border: 1px solid #c4d7e6; border-radius: 7px; padding: 8px 13px; background: #f3f8ff; }
.privacy-meta, .privacy-form-notice { font-size: .93rem; color: #243448; }
.admin-user-tabs { display: flex; flex-wrap: wrap; gap: 9px; margin: 12px 0 22px; }
.admin-user-tabs a { display: inline-flex; padding: 11px 17px; border: 1px solid #bdcede; border-radius: 7px; color: #12466f; text-decoration: none; background: #fff; }
.admin-user-tabs a[aria-current="page"] { background: #135f99; color: #fff; border-color: #135f99; }
.admin-create-user-card { margin-bottom: 26px; }
.admin-create-user-card form { display: grid; gap: 15px; }
.admin-create-user-card input, .admin-create-user-card select { width: 100%; min-width: 0; }
.admin-user-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.admin-create-user-note { border-left: 3px solid #287ab1; background: #f1f7fd; padding: 13px 17px; }
@media (max-width: 700px) { .admin-user-form-row { grid-template-columns: 1fr; } }

/* ENDE: 346-privacy-user-management.css */

/* START: 347-patch391-learning-flow.css */
/* Patch 391 – zentrale Kennzeichnungen und Fortschritts-/Sperrhinweise */
.cp-task-kind {
  display: inline-flex; width: max-content; align-items: center;
  margin: 0 0 .55rem; padding: .25rem .66rem;
  border: 1px solid #aac8e8; border-radius: 5px;
  background: #eaf3ff; color: #1f548e; font-weight: 750;
  font-size: .74rem; line-height: 1.3;
}
.completion-task-kind {
  display: inline-flex; width: max-content; margin-top: .35rem;
  color: #365e8d; background: #e9f3ff; border: 1px solid #c8def6;
  padding: .15rem .5rem; font-size: .72rem; border-radius: 4px;
}
/* Buttons ausschließlich auf der Arbeitsfläche ausrichten */
.wahrnehmung-page .wahrnehmung-idea-stack .idea-stack-bottom {
  width: min(100%, 702px); margin: 12px auto 0; box-sizing: border-box;
}
.wahrnehmung-page .wahrnehmung-idea-stack .idea-stack-actions {
  width: 100%; justify-content: space-between;
  align-items: center; flex-wrap: nowrap;
}
/* Gleiche Kennzeichnung auch für die Video-Aufgabe */
.wahrnehmung-page .wahrnehmung-annotation-card-head .cp-task-kind,
.wahrnehmung-page .wahrnehmung-observation-headline .cp-task-kind { margin-right: .3rem; }
/* Kursregistrierung im gleichen Blau-Weiß-Stil wie andere Hauptkarten */
.public-course-detail .course-enrollment-public-box.centered-course-enrollment-box {
  padding: 0 !important; overflow: hidden; background: #fff;
  border: 1px solid #c8d8eb; box-shadow: 0 6px 22px rgba(31,66,110,.09);
}
.public-course-detail .course-enrollment-box-header {
  background: linear-gradient(110deg,#3575b7,#285a98); color: #fff;
  padding: 17px 22px; text-align: left;
}
.public-course-detail .course-enrollment-box-header h2 {
  margin: 0; color: #fff !important; font-size: 1.3rem;
}
.public-course-detail .course-enrollment-box-content {
  padding: 23px 22px; text-align: left; background: #fff;
}
/* Animation ausschliesslich für eine Nutzeraktion, nicht für Seitenwechsel */
@keyframes cp391-required-highlight {
  0%,100% { box-shadow: 0 0 0 0 rgba(200,28,40,0); }
  20%,64% { box-shadow: 0 0 0 3px rgba(202,31,43,.9), 0 0 16px 2px rgba(202,31,43,.18); }
}
.wahrnehmung-page .cp-required-attention,
.learning-workspace-panel .cp-required-attention {
  animation: cp391-required-highlight 1.35s ease-in-out 1 !important;
  border-radius: 8px;
}
.documentation-save-status:empty { display:none; }
.documentation-save-status:not(:empty) { color:#274e82; font-size:.88rem; padding: .4rem 0; }
.documentation-tool .documentation-step.locked { cursor:pointer; }
@media(max-width:640px) {
  .wahrnehmung-page .wahrnehmung-idea-stack .idea-stack-actions {flex-wrap: wrap;}
  .public-course-detail .course-enrollment-box-content {padding: 17px 14px;}
}
@media(prefers-reduced-motion:reduce) {
 .wahrnehmung-page .cp-required-attention,.learning-workspace-panel .cp-required-attention {
  animation: none!important; outline: 3px solid #c91e32; outline-offset: 2px;
 }
}

/* ENDE: 347-patch391-learning-flow.css */

/* START: 348-patch392-corrections.css */
/* Patch 392: Pflichtmarkierung, Kursregistrierung und Statusdarstellung. */
.cp-task-kind, .completion-task-kind,
.wahrnehmung-page .cp-task-kind, .completion-task-kind {
    color: #8c4209 !important;
    background: #fff0db !important;
    border: 1px solid #d99850 !important;
    font-weight: 400 !important;
    font-size: .76rem;
    letter-spacing: .01em;
    box-shadow: none !important;
}
/* Die einzige sichtbare Kennzeichnung für die Video-/Beobachtungsaufgabe steht oben. */
.wahrnehmung-page .wahrnehmung-observation-headline > .cp-task-kind {display:none!important;}
/* Nur eine einzige außenliegende Kurskarte, kein zweiter weißer Container. */
.public-course-detail.public-course-detail-centered .cp-full-registration-card {
    display:block !important;
    box-sizing:border-box;
    align-self:stretch !important;
    width:100% !important;
    max-width:none !important;
    margin: 0 !important;
    padding:0 !important;
    border:1px solid #c6d8e9;
    background:#fff;
    border-radius:4px;
    overflow:hidden;
    box-shadow:0 14px 30px rgba(28,51,80,.11);
}
.public-course-detail .cp-full-registration-card > .course-enrollment-box-header {
    padding:22px 28px;
    background:linear-gradient(110deg,#3475b6,#275893);
    color:#fff;
}
.public-course-detail .cp-full-registration-card > .course-enrollment-box-header h2 {
    color:#fff !important;
    margin:0;
    font-weight:650;
}
.public-course-detail .cp-registration-course-name {
    margin:.5rem 0 0;
    color:#e5f2ff;
    font-size:.95rem;
    font-weight:400;
}
.public-course-detail .cp-full-registration-card > .course-enrollment-box-content {
    padding:26px 28px;
    text-align:left;
    background:#fff;
}
.public-course-detail .cp-full-registration-card > .alert {
    margin:18px 28px 0;
}
@media(max-width:640px){
 .public-course-detail .cp-full-registration-card > .course-enrollment-box-header,
 .public-course-detail .cp-full-registration-card > .course-enrollment-box-content {padding:19px 16px;}
}

/* ENDE: 348-patch392-corrections.css */

/* START: 349-recovered-patch-styles.css */
/*
 * Patch 412: Preserves the historic design refinements from 395–409 that were
 * previously appended to a generated bundle (and therefore lost during 410).
 * This is a normal CSS build source: future --write runs must retain it.
 */
/* Patch 395: Explicit submissions and calm, consistent status labels. */
.wahrnehmung-page .reflection-card [data-intro-submit] {
    display: inline-block;
    margin-top: 22px !important;
    margin-bottom: 0;
}
.wahrnehmung-page [data-intro-submit]:disabled,
.wahrnehmung-page [data-idea-finish]:disabled {
    background: #c1cede !important;
    border-color: #b8c7d7 !important;
    color: #eef2f7 !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
    box-shadow: none !important;
}
.wahrnehmung-page [data-intro-status] {
    margin: 12px 0 0;
    min-height: 0;
    font-size: .95rem;
    color: #172637;
}
.wahrnehmung-page [data-intro-status]:empty { display: none; }
.wahrnehmung-page [data-intro-status].is-success,
.wahrnehmung-page .documentation-results .exercise-complete-text {
    color: #19703d !important;
    font-weight: 400 !important;
}
.wahrnehmung-page [data-intro-status].is-error,
.wahrnehmung-page [data-wahrnehmung-overview-status]:not(:empty) { color: #9c1f27 !important; }
.wahrnehmung-page .documentation-results .exercise-complete-text { display: inline-block; }
.wahrnehmung-page [data-wahrnehmung-overview-status]:empty { display: none; }


/* Patch 396: Layout-, Kennzeichnungs- und Loginverfeinerungen. */
body.public-login-route .public-login-card > .alert {
    margin: 18px 32px 0 !important;
}
body.public-login-route .public-login-form {
    margin-top: 18px;
}
.public-course-detail .cp-full-registration-card > .course-enrollment-box-header h2,
.public-course-detail .cp-registration-course-name {
    color: #ffffff !important;
}
.cp-task-kind,
.completion-task-kind {
    border-radius: 2px !important;
}
.wahrnehmung-page .reflection-card .learning-task-intro,
.wahrnehmung-page .wahrnehmung-idea-stack .learning-task-intro,
.wahrnehmung-page .wahrnehmung-annotation-card-head {
    position: relative;
    padding-top: 1.4rem !important;
}
.wahrnehmung-page .reflection-card .learning-task-intro > .cp-task-kind,
.wahrnehmung-page .wahrnehmung-idea-stack .learning-task-intro > .cp-task-kind,
.wahrnehmung-page .wahrnehmung-annotation-card-head > .cp-task-kind {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 !important;
}
.wahrnehmung-page .wahrnehmung-annotation-card-head > .cp-task-kind {
    top: -2px;
}
.wahrnehmung-page .documentation-tool.documentation-tool-v66.learning-task-card {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.wahrnehmung-page .documentation-tool.documentation-tool-v66.learning-task-card > :is(.documentation-tool-nav, .documentation-tool-content) {
    border-radius: 2px !important;
    box-shadow: none !important;
}
.wahrnehmung-page .documentation-tool.documentation-tool-v66 .documentation-tool-nav {
    padding: 20px 16px;
}
.wahrnehmung-page .documentation-tool.documentation-tool-v66 .documentation-tool-content {
    padding: 24px 28px;
}
.wahrnehmung-page .documentation-exercise-head > div {
    position: relative;
    padding-top: 1.5rem;
}
.wahrnehmung-page .documentation-exercise-head > div > .cp-task-kind {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 !important;
}
.wahrnehmung-page .documentation-task-body {
    margin-top: 18px;
}
.wahrnehmung-page .documentation-task-body > textarea {
    margin-top: .4rem;
}
.wahrnehmung-page .exercise-review-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    align-items: stretch;
}
.wahrnehmung-page .exercise-review-tab {
    margin: 0;
    border-radius: 2px 2px 0 0 !important;
}
.wahrnehmung-page .exercise-review-window {
    margin-top: 0;
    border-radius: 0 0 2px 2px;
}
.wahrnehmung-page .documentation-results-nav {
    align-items: center;
}
.wahrnehmung-page .documentation-results .exercise-complete-text {
    display: inline-flex !important;
    align-items: center;
    min-height: 44px;
}
.wahrnehmung-page :is(.idea-stack-finish, .idea-stack-clear, .idea-stack-input-row button),
.interactive-book-page :is(.idea-stack-finish, .idea-stack-clear, .idea-stack-input-row button) {
    border-radius: 2px !important;
}
.wahrnehmung-page .wahrnehmung-idea-stack .idea-stack-stage {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}
.wahrnehmung-page .wahrnehmung-idea-stack .idea-stack-bottom {
    width: min(100%, 860px);
}
@media (max-width: 760px) {
    body.public-login-route .public-login-card > .alert {
        margin-left: 18px !important;
        margin-right: 18px !important;
    }
    .wahrnehmung-page .documentation-tool.documentation-tool-v66 .documentation-tool-content {
        padding: 18px;
    }
}


/* Patch 397: Nachjustierung Wahrnehmung – größere Bauklotzfläche, außenliegende Pflichtmarkierung, getrennte Dokumentationskacheln. */
.wahrnehmung-page .learning-task-card {
    position: relative;
    overflow: visible;
}

.wahrnehmung-page .reflection-card,
.wahrnehmung-page .wahrnehmung-idea-stack,
.wahrnehmung-page .wahrnehmung-annotation-card,
.wahrnehmung-page .documentation-tool.documentation-tool-v66.learning-task-card {
    margin-top: 28px;
}

.wahrnehmung-page .reflection-card > .learning-task-intro,
.wahrnehmung-page .wahrnehmung-idea-stack > .learning-task-intro,
.wahrnehmung-page .wahrnehmung-annotation-card > .wahrnehmung-annotation-card-head {
    position: static !important;
    padding-top: 0 !important;
}

.wahrnehmung-page .reflection-card > .learning-task-intro > .cp-task-kind,
.wahrnehmung-page .wahrnehmung-idea-stack > .learning-task-intro > .cp-task-kind,
.wahrnehmung-page .wahrnehmung-annotation-card > .wahrnehmung-annotation-card-head > .cp-task-kind {
    position: absolute;
    top: -15px !important;
    left: 18px !important;
    margin: 0 !important;
    z-index: 5;
}

.wahrnehmung-page .wahrnehmung-idea-stack.learning-task-card {
    padding: 30px 28px 20px !important;
}

.wahrnehmung-page .wahrnehmung-idea-stack .idea-stack-stage {
    width: 100%;
    max-width: none;
    height: 458px;
    margin-left: 0;
    margin-right: 0;
}

.wahrnehmung-page .wahrnehmung-idea-stack .idea-stack-form {
    max-width: 520px;
    margin: 0 auto 18px;
}

.wahrnehmung-page .wahrnehmung-idea-stack .idea-stack-bottom {
    width: 100%;
    max-width: none;
    margin-top: 14px;
}

.wahrnehmung-page .documentation-tool.documentation-tool-v66.learning-task-card {
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
    gap: 14px;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.wahrnehmung-page .documentation-tool.documentation-tool-v66 .documentation-tool-nav,
.wahrnehmung-page .documentation-tool.documentation-tool-v66 .documentation-tool-content {
    border: 1px solid #d3e1ef;
    border-radius: 2px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 20px rgba(5, 16, 34, .10);
    overflow: visible;
}

.wahrnehmung-page .documentation-tool.documentation-tool-v66 .documentation-tool-nav {
    align-self: start;
}

.wahrnehmung-page .documentation-tool.documentation-tool-v66 .documentation-exercise {
    position: relative;
    overflow: visible;
}

.wahrnehmung-page .documentation-tool.documentation-tool-v66 .documentation-exercise-head > div {
    position: static !important;
    padding-top: 0 !important;
}

.wahrnehmung-page .documentation-tool.documentation-tool-v66 .documentation-exercise-head > div > .cp-task-kind {
    position: absolute;
    top: -18px !important;
    left: 0 !important;
    margin: 0 !important;
    z-index: 5;
}

.wahrnehmung-page .documentation-tool.documentation-tool-v66 .documentation-task-body {
    margin-top: 22px;
}

@media (max-width: 960px) {
    .wahrnehmung-page .documentation-tool.documentation-tool-v66.learning-task-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .wahrnehmung-page .wahrnehmung-idea-stack.learning-task-card {
        padding: 24px 16px 18px !important;
    }

    .wahrnehmung-page .wahrnehmung-idea-stack .idea-stack-stage {
        height: 382px;
    }

    .wahrnehmung-page .reflection-card > .learning-task-intro > .cp-task-kind,
    .wahrnehmung-page .wahrnehmung-idea-stack > .learning-task-intro > .cp-task-kind,
    .wahrnehmung-page .wahrnehmung-annotation-card > .wahrnehmung-annotation-card-head > .cp-task-kind {
        left: 14px !important;
    }
}


/* Patch 398: Dokumentationsbereich als zwei echte Einzelkacheln mit außen angehefteter Pflichtkennzeichnung. */
.wahrnehmung-page .documentation-tool.documentation-tool-v66.learning-task-card {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.wahrnehmung-page .documentation-tool.documentation-tool-v66 .documentation-tool-nav {
    flex: 0 0 252px;
    width: 252px;
    min-height: 0 !important;
    height: auto !important;
    align-self: flex-start !important;
    border: 1px solid #d3e1ef;
    border-radius: 2px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 20px rgba(5, 16, 34, .10) !important;
}

.wahrnehmung-page .documentation-tool.documentation-tool-v66 .documentation-tool-content {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 18px;
    border: 1px solid #d3e1ef;
    border-radius: 2px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 20px rgba(5, 16, 34, .10) !important;
    overflow: visible;
}

.wahrnehmung-page .documentation-tool.documentation-tool-v66 .documentation-tool-content::before {
    content: 'Pflichtaufgabe';
    position: absolute;
    top: -18px;
    left: 18px;
    display: inline-flex;
    align-items: center;
    width: max-content;
    padding: .25rem .66rem;
    border: 1px solid #d99850;
    border-radius: 2px;
    background: #fff0db;
    color: #8c4209;
    font-weight: 400;
    font-size: .76rem;
    letter-spacing: .01em;
    line-height: 1.3;
    z-index: 6;
}

.wahrnehmung-page .documentation-tool.documentation-tool-v66 .documentation-exercise-head > div > .cp-task-kind {
    display: none !important;
}

.wahrnehmung-page .documentation-tool.documentation-tool-v66 .documentation-exercise-head > div {
    padding-top: 0 !important;
}

@media (max-width: 960px) {
    .wahrnehmung-page .documentation-tool.documentation-tool-v66.learning-task-card {
        display: block !important;
    }

    .wahrnehmung-page .documentation-tool.documentation-tool-v66 .documentation-tool-nav {
        width: auto;
        flex: none;
        margin-bottom: 16px;
    }

    .wahrnehmung-page .documentation-tool.documentation-tool-v66 .documentation-tool-content {
        margin-top: 18px;
    }
}


/* Patch 399 – KEINE Sammelkachel um das Dokumentationswerkzeug.
 * Der Container hat bewusst weder die Legacy-Klasse .documentation-tool
 * noch die .learning-task-card: Beide aktivierten wieder den globalen
 * weißen Kartenhintergrund trotz früherer CSS-Korrekturen. */
body .learning-workspace-page.wahrnehmung-page .cp-documentation-layout {
    display: grid !important;
    grid-template-columns: 252px minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: stretch !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    padding: 0 !important;
    margin: 26px 0 var(--cp-learning-card-space, 22px) !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}
body .learning-workspace-page.wahrnehmung-page .cp-documentation-layout > .documentation-tool-nav,
body .learning-workspace-page.wahrnehmung-page .cp-documentation-layout > .documentation-tool-content {
    display: block;
    position: relative;
    box-sizing: border-box;
    align-self: stretch !important;
    width: auto !important;
    min-width: 0;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    border: 1px solid #d3e1ef !important;
    border-radius: 2px !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: 0 6px 14px rgba(18,42,73,.10), 0 13px 27px rgba(18,42,73,.12) !important;
    overflow: visible !important;
}
body .learning-workspace-page.wahrnehmung-page .cp-documentation-layout > .documentation-tool-nav {
    padding: 20px 16px !important;
}
body .learning-workspace-page.wahrnehmung-page .cp-documentation-layout > .documentation-tool-content {
    padding: 30px 28px 24px !important;
}
/* Eine echte, für Screenreader lesbare Markierung, am oberen Kartenrand. */
body .learning-workspace-page.wahrnehmung-page .cp-documentation-layout .cp-documentation-required {
    position: absolute !important;
    z-index: 4;
    top: -14px !important;
    left: 18px !important;
    margin: 0 !important;
    border-radius: 2px !important;
}
body .learning-workspace-page.wahrnehmung-page .cp-documentation-layout .documentation-exercise-head > div {
    padding-top: 0 !important;
}

/* Videokachel: Pflichtmarkierung am AUSSENRAND, nicht in der weißen Titelleiste. */
body .learning-workspace-page.wahrnehmung-page .learning-workspace-panel > .course-content-card.wahrnehmung-video-card {
    position: relative !important;
    overflow: visible !important;
    margin-top: 28px !important;
}
body .learning-workspace-page.wahrnehmung-page .wahrnehmung-video-card > .cp-video-required-label {
    position: absolute !important;
    display: inline-flex !important;
    z-index: 5;
    top: -14px !important;
    left: 18px !important;
    margin: 0 !important;
    border-radius: 2px !important;
}
body .learning-workspace-page.wahrnehmung-page .wahrnehmung-video-card > .wahrnehmung-annotation-card-head {
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box;
    width: 100%;
    min-height: 46px;
    margin: 0 0 16px !important;
    padding: 11px 16px !important;
    border-radius: 2px !important;
    background: #fff !important;
    color: #21334d !important;
}
body .learning-workspace-page.wahrnehmung-page .wahrnehmung-video-card .wahrnehmung-annotation-card-head h3 {
    margin: 0 !important;
    font-size: 1.18rem;
    line-height: 1.4;
    color: #21334d !important;
}
body .learning-workspace-page.wahrnehmung-page .wahrnehmung-video-card .wahrnehmung-video-meta {
    display: inline;
    color: #506b8e !important;
    font-size: .90rem;
    font-weight: 400;
}
@media (max-width: 900px) {
    body .learning-workspace-page.wahrnehmung-page .cp-documentation-layout {
        grid-template-columns: minmax(0,1fr) !important;
        gap: 24px !important;
    }
    body .learning-workspace-page.wahrnehmung-page .cp-documentation-layout > .documentation-tool-nav,
    body .learning-workspace-page.wahrnehmung-page .cp-documentation-layout > .documentation-tool-content {
        width: 100% !important;
    }
}
@media (max-width: 600px) {
    body .learning-workspace-page.wahrnehmung-page .cp-documentation-layout > .documentation-tool-content {
        padding: 27px 16px 18px !important;
    }
    body .learning-workspace-page.wahrnehmung-page .wahrnehmung-video-card > .wahrnehmung-annotation-card-head {
        padding: 11px 12px !important;
    }
}


/* Patch 400: kompakter Portal-Header mit angepasstem Titel und Power-Abmeldung. */
/* Nur die Markenzeile bearbeiten; Lernkarten und Navigationsleiste bleiben unverändert. */
body .site-header .brand-inner {
    min-height: clamp(86px, 6vw, 102px);
}
body .site-header .uni-logo,
body .site-header .brand-inner.has-user-tools .uni-logo {
    width: auto;
    height: clamp(44px, 3.8vw, 64px);
    max-width: 100%;
    object-fit: contain;
}
body .site-header .header-user-tools {
    gap: clamp(5px, .55vw, 11px);
}
body .site-header .header-account-link {
    gap: 8px;
}
body .site-header .header-notification-link,
body .site-header .header-account-avatar {
    width: clamp(36px, 2.5vw, 44px);
    height: clamp(36px, 2.5vw, 44px);
}
body .site-header .header-notification-link .header-icon {
    width: 21px;
    height: 21px;
}
body .site-header button.header-logout-button {
    width: clamp(36px, 2.4vw, 42px);
    height: clamp(36px, 2.4vw, 42px);
    min-height: 0;
    padding: 0;
    border-radius: 50% !important; /* Vorrang vor globalen eckigen Submit-Buttons */
}
body .site-header button.header-logout-button .header-icon {
    width: 23px;
    height: 23px;
    stroke-width: 2.5;
}
@media (max-width: 900px) {
    body .site-header .brand-inner { min-height: 0; }
    body .site-header .uni-logo,
    body .site-header .brand-inner.has-user-tools .uni-logo { height: 42px; }
    body .site-header .header-notification-link,
    body .site-header .header-account-avatar,
    body .site-header button.header-logout-button { width: 38px; height: 38px; }
}
@media (max-width: 600px) {
    body .site-header .uni-logo,
    body .site-header .brand-inner.has-user-tools .uni-logo { height: 36px; }
    body .site-header .header-notification-link,
    body .site-header .header-account-avatar,
    body .site-header button.header-logout-button { width: 35px; height: 35px; }
    body .site-header button.header-logout-button .header-icon { width: 20px; height: 20px; }
}


/* Patch 401: Nachjustierungen Reset-Icon, Projektangaben, Datenschutz-Navigation und Login-Hinweise. */
.privacy-stage .privacy-toc {
    margin-left: 32px;
    margin-right: 32px;
    gap: 10px;
}

.privacy-stage .privacy-toc a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 16px;
    border: 1px solid #a7bfd8;
    border-radius: 2px !important;
    background: #f4f8fc;
    color: #2b5f95;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(5, 16, 34, .06);
}

.privacy-stage .privacy-toc a:hover,
.privacy-stage .privacy-toc a:focus-visible {
    background: #ffffff;
    color: #1d4d7f;
    border-color: #8dafd0;
    text-decoration: none;
}

body.public-login-route .login-course-request-copy .login-inline-link {
    color: #2b5f95;
    font-weight: 600;
    text-decoration: none;
}

body.public-login-route .login-course-request-copy .login-inline-link:hover,
body.public-login-route .login-course-request-copy .login-inline-link:focus-visible {
    color: #1d4d7f;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 700px) {
    .privacy-stage .privacy-toc {
        margin-left: 20px;
        margin-right: 20px;
    }
}


/* START: 402-dashboard-flow-polish.css */
.dashboard-overview-top-uniform {
    align-items: center;
}
.dashboard-overview-top-uniform > div {
    display: flex;
    align-items: center;
    min-height: 46px;
}
.dashboard-overview-top-uniform > div p {
    display: none;
}
.dashboard-overview-top-uniform h2 {
    margin: 0;
}
.dashboard-overview-metric-uniform {
    min-height: 148px;
    display: grid;
    align-content: start;
}
.dashboard-overview-card .dashboard-overview-icon {
    width: 46px;
    height: 46px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e5f3ff;
    color: #1470bf;
    font-size: 1.5rem;
    font-weight: 750;
    flex: 0 0 auto;
}
.dashboard-overview-card .dashboard-overview-icon svg {
    width: 28px;
    height: 28px;
    display: block;
}
.dashboard-overview-card-progress .dashboard-overview-metric strong {
    color: #2b67b2;
}
.dashboard-overview-card-progress .dashboard-overview-metric span {
    color: #3d5c7f;
    line-height: 1.45;
}
.dashboard-overview-card-progress .dashboard-overview-metric small {
    margin-top: 2px;
    font-size: .9rem;
    color: #5e748f;
}
.dashboard-status-list {
    display: grid;
    gap: 0;
    margin-top: 10px;
}
.dashboard-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #dbe5ef;
    color: #30465f;
    text-decoration: none;
    font-size: .96rem;
}
.dashboard-status-row:last-child {
    border-bottom: 0;
}
.dashboard-status-row strong {
    color: #24415f;
}
.dashboard-status-row span {
    color: #1d2f48;
    font-weight: 700;
    text-align: right;
}
.dashboard-status-row:hover strong,
.dashboard-status-row:focus-visible strong,
.dashboard-status-row:hover span,
.dashboard-status-row:focus-visible span {
    color: #0b67b1;
}
.dashboard-page.dashboard-intro-open [data-dashboard-main] {
    filter: blur(7px);
    pointer-events: none;
    user-select: none;
}
.dashboard-intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.dashboard-intro-overlay[hidden] {
    display: none;
}
.dashboard-intro-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(12, 24, 41, .34);
}
.dashboard-intro-dialog {
    position: relative;
    width: min(980px, calc(100vw - 48px));
    max-height: calc(100vh - 48px);
    overflow: auto;
    background: #fff;
    border: 1px solid #c7d8ea;
    border-radius: 2px;
    box-shadow: 0 28px 70px rgba(18, 42, 68, .26), 0 8px 24px rgba(18, 42, 68, .12);
}
.dashboard-intro-head {
    position: relative;
    overflow: hidden;
    padding: 28px 34px 26px;
    color: #fff;
    background: linear-gradient(90deg, rgba(16,94,174,.94), rgba(27,113,196,.70)), url('../images/backgrounds/campus-hero-339.webp') center right / cover no-repeat !important;
}
.dashboard-intro-kicker {
    margin: 0 0 8px;
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #e8f1ff;
}
.dashboard-intro-head h2 {
    margin: 0;
    color: #fff;
    font-size: 2.55rem;
    line-height: 1.1;
}
.dashboard-intro-content {
    padding: 28px 34px 8px;
}
.dashboard-intro-content p {
    margin: 0 0 22px;
    color: #1f2f43;
    font-size: 1.1rem;
    line-height: 1.62;
}
.dashboard-intro-footer {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-end;
    padding: 24px 34px 32px;
    border-top: 1px solid #d8e3ee;
}
.dashboard-intro-authors {
    max-width: 700px;
    display: grid;
    gap: 6px;
    color: #203147;
}
.dashboard-intro-authors strong {
    color: #132741;
}
.dashboard-intro-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.dashboard-intro-actions .button.is-disabled,
.dashboard-intro-actions .button[aria-disabled="true"] {
    opacity: .62;
    pointer-events: none;
    filter: grayscale(.1);
}
@media (max-width: 900px) {
    .dashboard-intro-dialog {
        width: calc(100vw - 24px);
    }
    .dashboard-intro-head h2 {
        font-size: 1.9rem;
    }
    .dashboard-intro-footer {
        flex-direction: column;
        align-items: stretch;
    }
    .dashboard-intro-actions {
        justify-content: flex-start;
    }
}
/* END: 402-dashboard-flow-polish.css */


/* Patch 406 – Dashboard: drei einheitliche Informationszeilen pro Karte. */
.dashboard-overview-card {
    min-width: 0;
}
.dashboard-overview-card .dashboard-overview-top-uniform {
    margin-bottom: 14px;
}
.dashboard-overview-card .dashboard-card-info-list,
.dashboard-overview-card .dashboard-status-list {
    width: 100%;
    margin-top: 0;
    margin-bottom: 14px;
}
.dashboard-overview-card .dashboard-status-row {
    min-width: 0;
    min-height: 65px;
    padding: 12px 0;
    gap: 12px;
    align-items: center;
}
.dashboard-overview-card .dashboard-status-row > strong {
    flex: 0 1 48%;
    min-width: 0;
    color: #335473;
    font-size: .91rem;
    font-weight: 600;
    line-height: 1.4;
}
.dashboard-overview-card .dashboard-status-row > span {
    flex: 1 1 52%;
    min-width: 0;
    overflow-wrap: anywhere;
    color: #182c46;
    font-size: .94rem;
    line-height: 1.4;
    font-weight: 650;
    text-align: right;
}
.dashboard-overview-card .dashboard-info-course-value {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-end;
}
.dashboard-overview-card .dashboard-info-course-value b {
    font-weight: 650;
}
.dashboard-overview-card .dashboard-info-course-value small {
    font-size: .8rem;
    font-weight: 400;
    color: #52708d;
}
.dashboard-overview-card .dashboard-progress-compact {
    width: 100%;
    margin: 0 0 16px;
    flex: 0 0 auto;
    align-self: stretch;
}
.dashboard-overview-card > a {
    padding-top: 9px;
}
@media (max-width: 1090px) and (min-width: 901px) {
    .dashboard-overview-card .dashboard-status-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
    .dashboard-overview-card .dashboard-status-row > strong,
    .dashboard-overview-card .dashboard-status-row > span {
        flex: 0 0 auto;
        width: 100%;
        text-align: left;
    }
    .dashboard-overview-card .dashboard-info-course-value {
        align-items: flex-start;
    }
}
@media (max-width: 450px) {
    .dashboard-overview-card .dashboard-status-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
    .dashboard-overview-card .dashboard-status-row > strong,
    .dashboard-overview-card .dashboard-status-row > span {
        flex: 0 0 auto;
        width: 100%;
        text-align: left;
    }
    .dashboard-overview-card .dashboard-info-course-value {
        align-items: flex-start;
    }
}

/* Patch 407 – Dashboard: Kurszeile kompakter, Schnellzugriff mit neuem Aufbau. */
.dashboard-overview-card .dashboard-info-row-course > strong {
    flex: 0 0 24%;
}
.dashboard-overview-card .dashboard-info-row-course > .dashboard-info-course-value {
    flex: 1 1 76%;
    display: block;
    text-align: left;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: auto;
    line-height: 1.35;
}

.dashboard-shortcut {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    min-height: 176px;
}
.dashboard-shortcut-head {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.dashboard-shortcut-head .dashboard-shortcut-number {
    flex: 0 0 46px;
}
.dashboard-shortcut-head strong {
    display: flex;
    align-items: center;
    min-height: 46px;
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.3;
}
.dashboard-shortcut > small {
    display: block;
    max-width: 20ch;
    margin-left: 58px;
    font-size: .86rem;
    font-weight: 400;
    line-height: 1.5;
    color: #5d7188;
}
.dashboard-shortcut > b {
    margin-top: auto;
    margin-left: 58px;
    padding-top: 2px;
    font-size: .86rem;
    color: #0b6fbe;
}
@media (max-width: 1180px) {
    .dashboard-shortcut > small {
        max-width: 22ch;
    }
}
@media (max-width: 900px) {
    .dashboard-overview-card .dashboard-info-row-course > strong,
    .dashboard-overview-card .dashboard-info-row-course > .dashboard-info-course-value {
        width: 100%;
        text-align: left;
    }
    .dashboard-overview-card .dashboard-info-row-course {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}
@media (max-width: 560px) {
    .dashboard-shortcut > small,
    .dashboard-shortcut > b {
        margin-left: 0;
        max-width: none;
    }
}

/* Patch 408 – deutsche Silbentrennung statt Umbruch an beliebigen Zeichen.
 * Die Regel ist global, da 302-finishing.css auf allen Plattformseiten zuletzt geladen wird.
 * "de" am HTML-Wurzelelement aktiviert die Wörterbuch-Silbentrennung der Browser.
 * Mindestwerte unterbinden optisch störende Einzelbuchstaben-Fragmente.
 * Fallback bei unbekannten Namen: Wort im Ganzen lassen statt zwangsweise teilen.
 */
html[lang|="de"] body {
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 7 3 3;
    overflow-wrap: normal;
    word-break: normal;
}
html[lang|="de"] body > main.container {
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 7 3 3;
    overflow-wrap: normal;
    word-break: normal;
}
html[lang|="de"] body :is(
    h1, h2, h3, h4, h5, h6, p, li, dt, dd, th, td,
    blockquote, figcaption, summary, label,
    strong, b, small, em, span, a, button, .button,
    .site-title, .dashboard-overview-metric,
    .module-overview-text-card, .group-video-comment-card,
    .group-video-tile-label, .group-video-tile-namebar
) {
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 7 3 3;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

/* IDs, URLs, Programmcode und maschinenlesbare Inhalte sind keine
 * deutschen Wörter und müssen weiterhin bei Platzmangel umbrechen können. */
html[lang|="de"] body :is(
    pre, code, kbd, samp, .course-code-display,
    .technical-text, .file-path, .code-block
) {
    -webkit-hyphens: none !important;
    hyphens: none !important;
    overflow-wrap: anywhere !important;
}

/* Dashboard: Kursname konsequent rechtsbündig, auch bei kleiner Ansicht.
 * Nur Wörterbuch-/Silbentrennung, keine Trennung einzelner Buchstaben. */
.dashboard-overview-card .dashboard-info-row-course > .dashboard-info-course-value {
    text-align: right !important;
    align-self: center;
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 7 3 3;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

/* Lange Kategorienamen wie "Gruppenaktivität" nicht künstlich verkürzen. */
.dashboard-overview-card-status .dashboard-status-row > strong {
    flex: 0 0 auto;
    max-width: 58%;
}
.dashboard-overview-card-status .dashboard-status-row > span {
    flex: 1 1 42%;
    min-width: 0;
}
@media (max-width: 450px) {
    .dashboard-overview-card .dashboard-info-row-course > .dashboard-info-course-value {
        width: 100%;
        align-self: stretch;
    }
    .dashboard-overview-card-status .dashboard-status-row > strong,
    .dashboard-overview-card-status .dashboard-status-row > span {
        max-width: 100%;
        width: 100%;
        flex: 0 0 auto;
    }
}


/* Patch 409 – Schnellzugriff: Beschreibung und Modul-Link beginnen direkt
 * unter der linken Kante des blauen Nummernkästchens (nicht unter dem Titel).
 * Die Überschrift bleibt rechts vom Nummernkästchen vertikal zentriert. */
.dashboard-shortcuts .dashboard-shortcut > small,
.dashboard-shortcuts .dashboard-shortcut > b {
    margin-left: 0;
    max-width: none;
}

/* Preserve Patch 411 inactivity-logout message spacing. */
body.public-login-route .public-login-card > .alert {
    margin-top: 14px !important;
}
@media (max-width: 760px) {
    body.public-login-route .public-login-card > .alert {
        margin-top: 12px !important;
    }
}


/* Patch 413 – Feinschliff Lernspiele, Sperrhinweise und Wahrnehmung */
.learning-next-hint {
    margin: 12px 0 0 auto;
    max-width: 520px;
    padding: 12px 14px;
    border: 1px solid #e0a7ad;
    border-radius: 10px;
    background: #f9ecee;
    color: #8a2f39;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-weight: 400 !important;
}
.learning-next-hint .learning-next-hint-text { flex: 1 1 auto; }
.learning-next-hint .learning-next-hint-action {
    flex: 0 0 auto;
    white-space: nowrap;
    padding-inline: 14px;
}
.wahrnehmung-free-notes-status[data-state="pending"] { color: #8a5a18; }
.wahrnehmung-free-notes-status[data-state="success"] { color: #2f6d47; }
.wahrnehmung-free-notes-status[data-state="error"] { color: #9a2833; }
.sentence-guidance-card > h3 {
    margin: 0 0 10px;
    color: #22324a;
}
.sentence-guidance-card .sentence-guidance-intro {
    margin: 0 0 16px;
    color: #4d5d75;
}
/* Buttons der fünf Übungsreiter bündig an der darunterliegenden Kachel ausrichten. */
.documentation-tool-v66 .documentation-step-list {
    gap: 0;
}
.documentation-tool-v66 .documentation-step {
    border-radius: 8px 8px 0 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-sizing: border-box;
}
@media (max-width: 900px) {
    .documentation-tool-v66 .documentation-step-list {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 0;
    }
    .documentation-tool-v66 .documentation-step {
        min-width: 0;
        padding-inline: 6px;
    }
    .documentation-tool-v66 .documentation-step-label strong,
    .documentation-tool-v66 .documentation-step-label span {
        text-align: center;
    }
}
.presence-monitor-card .presence-monitor-intro > .cp-task-kind {
    margin-bottom: .55rem;
}
.presence-monitor-overlay-card {
    max-width: 560px;
}
.presence-monitor-overlay-summary {
    display: none !important;
}
.presence-monitor-overlay-text,
.presence-monitor-overlay-remark {
    font-weight: 400 !important;
}
.dialogue-game-card .dialogue-scene {
    grid-template-columns: 214px minmax(0, 360px) 214px;
    min-height: 510px;
    gap: 18px;
    padding: 20px 18px 16px;
}
.dialogue-game-card .dialogue-scene .dialogue-bubble {
    width: 214px;
    min-width: 214px;
    height: 176px;
    min-height: 176px;
    max-height: 176px;
    flex-basis: 176px;
    padding: 14px 15px 18px;
}
.dialogue-game-card .dialogue-scene .dialogue-portrait-frame {
    flex-basis: 170px;
    height: 170px;
    margin-top: 6px;
}
.dialogue-game-card .dialogue-scene .dialogue-portrait {
    height: 162px;
    width: min(100%, 166px);
}
.dialogue-game-card .dialogue-scene .dialogue-middle,
.dialogue-game-card .dialogue-scene.is-showing-feedback .dialogue-middle {
    min-height: 0;
    margin-top: 0;
    align-self: start;
}
.dialogue-game-card .dialogue-choice-title {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 66px;
    margin: 0 0 12px !important;
    padding: 14px 16px;
    border: 1.5px solid #cddbef;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(41, 66, 102, .055);
    font-size: 18px;
}
.dialogue-game-card .dialogue-choice-items {
    gap: 10px;
}
.dialogue-game-card .dialogue-option {
    min-height: 0;
    padding: 11px 12px;
    font-size: 12.6px;
    line-height: 1.42;
}
.dialogue-game-card .dialogue-option-index {
    flex-basis: 24px;
    height: 24px;
    font-size: 11px;
}
@media (max-width: 860px) {
    .dialogue-game-card .dialogue-scene {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .dialogue-game-card .dialogue-scene .dialogue-bubble {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        height: auto;
        min-height: 112px;
        max-height: none;
        flex-basis: auto;
    }
}
.prep-journey-dialog.has-choice,
.prep-journey-dialog.has-choice.has-images,
.prep-journey-dialog.has-swipe {
    height: min(33.5rem, calc(100% - .3rem)) !important;
    padding-bottom: 1rem;
}
.prep-journey-dialog .prep-journey-actions {
    margin-top: .55rem;
    padding-bottom: .15rem;
}
.prep-journey-dialog .prep-journey-actions .button {
    min-height: 2.8rem;
}

/* Patch 416: einziges, servergeprüftes Abschlussziel in der Lernnavigation. */
body .interactive-book-page .interactive-book-panel > .learning-workspace-panel-nav {
    grid-template-columns: minmax(96px, 142px) minmax(0, 1fr) minmax(190px, max-content);
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    gap: 12px;
    padding: 14px 20px !important;
}
body .interactive-book-page .interactive-book-panel > .learning-workspace-panel-nav > .next-module-button {
    box-sizing: border-box;
    justify-self: end;
    width: auto;
    max-width: 100%;
    min-width: 0;
    height: auto;
    text-align: center;
    padding: 10px 16px !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    font-size: .93rem;
    line-height: 1.2;
}
body .interactive-book-page .interactive-book-panel > .learning-workspace-panel-nav > .next-module-button.is-available {
    background: #245487;
    color: #fff;
    cursor: pointer;
}
body .interactive-book-page .interactive-book-panel > .learning-workspace-panel-nav > .next-module-button:disabled {
    cursor: not-allowed;
    opacity: .64;
}
body .interactive-book-page .decomposition-finish-alert {
    margin: 12px 0 0;
    font-weight: 400;
}
@media (max-width: 740px) {
    body .interactive-book-page .interactive-book-panel > .learning-workspace-panel-nav {
        grid-template-columns: minmax(0,1fr) auto;
        gap: 10px;
        padding: 12px !important;
    }
    body .interactive-book-page .interactive-book-panel > .learning-workspace-panel-nav > [data-learning-prev] {
        grid-column: 1;
        justify-self: start;
        width: min(100%, 142px);
    }
    body .interactive-book-page .interactive-book-panel > .learning-workspace-panel-nav > .learning-workspace-counter {
        grid-column: 2;
        justify-self: end;
    }
    body .interactive-book-page .interactive-book-panel > .learning-workspace-panel-nav > .next-module-button {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        justify-self: stretch;
        font-size: .87rem;
        padding: 12px 8px !important;
    }
}

/* ENDE: 349-recovered-patch-styles.css */

/* START: 350-dialogue-layout-414.css */
/* Patch 414 – Übung 6 Gesprächsführung: kompaktes, dynamisches, barrierearmes Spielfeld.
 * Ausschließlich Dekomposition Teil 1; andere Spiele bleiben unangetastet.
 * Nach 349 in der CSS-Quellliste eingebunden, damit frühere feste Höhen
 * nicht mehr in die Darstellung eingreifen.
 */

.interactive-book-page .dialogue-game-card[data-dialogue-game] {
  padding: clamp(14px,2.1vw,24px);
  background: #edf4fd;
  border: 1px solid #d5e4f4;
  border-radius: 3px;
  box-shadow: 0 8px 24px rgba(33,62,100,.11);
}
.interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-intro {
  padding: clamp(14px,2vw,23px);
  background: white;
  border: 1px solid #d2e1f4;
  border-radius: 18px;
  box-shadow: 0 3px 12px rgba(36,61,96,.04);
  margin-bottom: 14px;
  text-align: center;
}
.interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-intro h3 {
  margin-bottom: 7px;
  color: #1e2d44;
  font-size: clamp(19px,2vw,24px);
}
.interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-intro p {
  margin: 0;
  color: #27384d;
  font-size: clamp(13px,1.17vw,15px);
  line-height: 1.5;
}
.interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene,
.interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene.is-blurred,
.interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene.is-showing-feedback {
  box-sizing: border-box;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.44fr) minmax(0, 1fr);
  justify-content: stretch;
  align-items: start;
  column-gap: clamp(12px,1.6vw,22px);
  row-gap: 12px;
  height: auto !important;
  min-height: 455px !important;
  max-height: none !important;
  padding: clamp(15px,1.9vw,24px);
  overflow: hidden;
  background-image: linear-gradient(rgba(255,255,255,.23),rgba(255,255,255,.23)),url('../learning/custom-backgrounds/classroom-chalkboard-scene.webp');
  background-size: cover;
  background-position: center center;
  border: 1px solid #d5e3f3;
  border-radius: 18px;
}
.interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene .dialogue-speaker,
.interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene.is-showing-feedback .dialogue-speaker {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  margin: 0;
  padding: 0;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: start;
}
.interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene .dialogue-bubble {
  box-sizing: border-box;
  position: relative;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: clamp(130px,12vw,185px) !important;
  max-height: none !important;
  padding: 15px 16px 20px;
  overflow: visible;
  border: 1px solid #bfd5ef;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 5px 13px rgba(32,65,107,.08);
  font-size: clamp(12.5px,1.1vw,15px);
  line-height: 1.6;
}
.interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene .dialogue-bubble-text {
  overflow: visible !important;
  max-height: none !important;
  font-size: inherit;
  line-height: 1.6;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: auto;
}
.interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene .dialogue-portrait-frame,
.interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene .dialogue-speaker.is-teacher .dialogue-portrait-frame,
.interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene .dialogue-speaker.is-pupil .dialogue-portrait-frame {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto !important;
  align-items: flex-start;
  justify-content: center;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 9px 0 0 !important;
  padding: 0 !important;
  position: static !important;
  transform: none !important;
}
.interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene .dialogue-portrait {
  display: block;
  width: min(100%, 206px) !important;
  min-width: 0 !important;
  max-width: 206px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 214px !important;
  object-fit: contain;
  object-position: center top;
  margin: 0 !important;
  transform: none !important;
}
.interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene .dialogue-middle,
.interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene.is-showing-feedback .dialogue-middle {
  box-sizing: border-box;
  position: relative;
  grid-column: 2;
  display: flex;
  flex-direction: column;
  width: 100% !important;
  min-width: 0;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  align-self: start !important;
  justify-content: flex-start;
  overflow: visible;
}
.interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-choice-title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  min-height: 64px;
  padding: 11px 13px;
  margin: 0 0 10px !important;
  border: 1px solid #bed5ed;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 4px 11px rgba(24,58,104,.07);
  color: #172d4c;
  text-align: center;
  font-size: clamp(16px,1.65vw,22px);
  line-height: 1.25;
}
.interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-choice-items {
  display: grid;
  gap: 10px;
  grid-auto-rows: auto !important;
}
.interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-option {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 26px minmax(0,1fr);
  align-items: start;
  gap: 10px;
  width: 100%;
  height: auto !important;
  min-height: 96px !important;
  max-height: none !important;
  padding: 13px;
  border: 1px solid #c4d5ec;
  border-radius: 15px;
  color: #1e3149;
  background: #fff;
  font-size: clamp(12.5px,1.1vw,14px);
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  overflow: visible !important;
  box-shadow: 0 3px 11px rgba(26,65,102,.06);
}
.interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-option > span:last-child {
  display: block;
  max-height: none !important;
  overflow: visible !important;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: auto;
}
.interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-option-index {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  background: #e1edfc;
  color: #1f568f;
  font-size: 13px;
  font-weight: 700;
}
.interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-option:hover,
.interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-option:focus-visible {
  border-color: #2b76c3;
  background: #f0f7ff;
}
.interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-feedback-card {
  box-sizing: border-box;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  width: 100%;
  overflow: visible;
  padding: 20px 18px;
  border-radius: 17px;
  background: #fff;
}
.interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-choices,
.interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-feedback {
  min-width: 0;
}
.interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-option-appear {
  animation: dialogue-soft-fade .16s ease-out both;
}
/* Infokasten und Navigation: der folgende Themenname bleibt immer einzeilig. */
.cp-completion-optional-note {
  padding: 12px 16px;
  margin: 0 0 15px;
  background: #edf5ff;
  border: 1px solid #c9e0f8;
  color: #244c75;
  border-radius: 4px;
  font-weight: 400;
}
.learning-workspace-panel-nav > a.button,
.learning-workspace-panel-nav > button.button {
  width: auto;
  min-width: max-content;
  padding-inline: 14px;
  white-space: nowrap !important;
  text-wrap: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
  flex-shrink: 0;
}
.learning-workspace-panel-nav .learning-workspace-counter {
  min-width: 0;
  flex: 1;
  text-align: center;
}
@media(max-width: 920px) {
  .interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene,
  .interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene.is-showing-feedback,
  .interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene.is-blurred {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    grid-template-areas: 'teacher pupil' 'middle middle';
    gap: 12px;
    min-height: 0 !important;
  }
  .interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene .dialogue-speaker.is-teacher {
    grid-area: teacher;
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  .interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene .dialogue-speaker.is-pupil {
    grid-area: pupil;
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  .interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene .dialogue-middle,
  .interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene.is-showing-feedback .dialogue-middle {
    grid-area: middle;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: min(100%,560px) !important;
    justify-self: center;
  }
  .interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene .dialogue-portrait {
    width: min(100%,145px) !important;
    max-height: 150px !important;
  }
  .interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene .dialogue-bubble {
    min-height: 140px !important;
    font-size: 13px;
  }
  .interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-option { min-height: 0 !important; }
}
@media(max-width: 480px) {
  .interactive-book-page .dialogue-game-card[data-dialogue-game] { padding: 10px; }
  .interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene {
    padding: 11px;
    gap: 10px;
  }
  .interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene .dialogue-bubble { padding: 10px 10px 15px; }
  .interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene .dialogue-portrait {
    width: min(100%,106px) !important;
    max-height: 118px !important;
  }
  .learning-workspace-panel-nav > a.button,
  .learning-workspace-panel-nav > button.button { padding-inline: 8px; font-size: .79rem; }
  .learning-workspace-panel-nav .learning-workspace-counter { font-size: .78rem; }
}
@media(prefers-reduced-motion:reduce) {
  .interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-option-appear { animation: none !important; }
}

/* ENDE: 350-dialogue-layout-414.css */

/* START: 351-module-locks-and-scenes-415.css */
/* Patch 415 – gesperrte Dekompositionsteile, saubere Fußkante beider Spiele */
/* Nicht freigeschaltete Teile erhalten bewusst keine Links oder Tabstopps. */
.decomposition-page .decomposition-overview-row.is-locked {
  cursor: not-allowed;
  opacity: .78;
}
.decomposition-page .decomposition-overview-row.is-locked > .module-overview-image-card,
.decomposition-page .decomposition-overview-row.is-locked > .module-overview-text-card {
  cursor: not-allowed;
  background: #f4f7fb;
  color: #65768d;
  border-color: #d9e3ef;
}
.decomposition-page .decomposition-overview-row.is-locked .module-overview-topic,
.decomposition-page .decomposition-overview-row.is-locked .module-overview-description {
  color: #66778e;
}
.decomposition-page .decomposition-overview-row.is-locked img { filter: grayscale(.20); opacity: .75; }
.decomposition-page .decomposition-overview-row.is-locked .module-overview-text-card { position: relative; padding-right: 55px; }
.decomposition-page .decomposition-lock-mark {
  position:absolute; right:18px; top:50%; transform:translateY(-50%);
  display:grid; place-items:center;
  width:30px; height:34px; color:#8190a2;
}
.decomposition-page .decomposition-lock-mark svg { width:24px; height:24px; }

/* Ein gemeinsames, überarbeitetes Campus-Klassenzimmer OHNE Tischplatte. */
.interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene,
.interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene.is-showing-feedback,
.interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene.is-blurred {
  background-image: linear-gradient(rgba(255,255,255,.23),rgba(255,255,255,.23)),
    url('../learning/custom-backgrounds/classroom-chalkboard-no-table.webp');
  background-position: center center;
}
.interactive-book-page .room-layout-card .room-layout-stage,
.interactive-book-page .room-layout-stage {
  background-image: linear-gradient(rgba(255,255,255,.46),rgba(255,255,255,.46)),
    url('../learning/custom-backgrounds/classroom-chalkboard-no-table.webp');
  background-position: center center;
}

/* Sprechblasen bleiben oben; die Figuren ruhen exakt auf der unteren Bühne. */
@media (min-width: 921px) {
  .interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene .dialogue-speaker,
  .interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene.is-showing-feedback .dialogue-speaker {
    align-self: stretch !important;
    height: 100% !important;
    justify-content: flex-start;
    min-height: 0 !important;
  }
  .interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene .dialogue-portrait-frame {
    margin-top: auto !important;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    flex: 0 0 auto !important;
    height: 222px !important;
    max-height: 222px !important;
  }
  .interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene .dialogue-portrait {
    object-fit: contain;
    object-position: center bottom;
    max-height: 218px !important;
  }
}
/* Die unterste Kante der Figuren soll mit dem Spielbereich abschließen. */
.interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene { padding-bottom: 0 !important; }
@media (max-width: 920px) {
  .interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene { padding-bottom: 10px !important; }
  .interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene .dialogue-portrait-frame {
    margin-top: 8px !important;
  }
}
/* Sitzordnungs-Spiel: Die Lehrkraft sitzt nicht mehr schwebend über dem unteren Rand. */
@media (min-width: 981px) {
  .interactive-book-page .room-layout-card .room-layout-stage {
    align-items: stretch !important;
  }
  .interactive-book-page .room-layout-card .room-layout-teacher-area {
    display:flex !important;
    flex-direction:column;
    height: 100% !important;
    min-height:0 !important;
    max-height:none !important;
    justify-content:flex-start;
    align-self: stretch;
  }
  .interactive-book-page .room-layout-card .room-layout-teacher-wrap {
    margin-top: auto !important;
    margin-bottom: 0 !important;
    height: 305px !important;
    max-height: 305px !important;
    align-self: center;
    flex: 0 0 auto;
  }
  .interactive-book-page .room-layout-card .room-layout-teacher {
    bottom: 0 !important;
    object-position: center bottom;
  }
}

/* Unterkante ohne freien Abstand: die Figur steht im Klassenraum direkt auf
 * dem Spielfeldrand, nicht mittig in einer zu hohen Flex-Spalte. */
@media (min-width: 921px) {
  .interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene .dialogue-speaker {
    position: relative !important;
  }
  .interactive-book-page .dialogue-game-card[data-dialogue-game] .dialogue-scene .dialogue-portrait-frame {
    position: absolute !important;
    inset: auto 0 0 !important;
    margin: 0 !important;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
}

/* ENDE: 351-module-locks-and-scenes-415.css */

/* START: 352-patch417-learning-cards.css */
/* Patch 417: rechteckige interaktive Kacheln, bündige Videoflächen, mittiger Mini-Player.
 * Nur die betroffenen Seiten (Teil 2 und Teil 4), keine pauschale Änderung an Spielsteinen.
 */

/* Teil 4 – Beobachtung, Optimierung und Reflexion: alle tragenden Flächen eckig. */
body.contribution-part :is(
  .contribution-analyse-intro,
  .contribution-info-card,
  .contribution-exercise-shell,
  .contribution-task-card,
  .contribution-inner-card,
  .contribution-sheet-card,
  .contribution-sheet-recap,
  .contribution-sheet-recap > summary,
  .contribution-sheet-scroll,
  .contribution-recap-scroll,
  .contribution-recap-table,
  .contribution-sheet-table,
  .contribution-video-stage,
  .contribution-video-stage video,
  .contribution-editor,
  .contribution-button,
  .contribution-sheet-edit-button,
  textarea,
  input[type="text"]
) {
  border-radius: 0 !important;
}
body.contribution-part .learning-task-card.contribution-task-card {
  border-radius: 0 !important;
  box-shadow: 0 9px 23px rgba(32, 58, 98, .14) !important;
}
body.contribution-part .contribution-sheet-recap,
body.contribution-part .contribution-task-card > .contribution-inner-card {
  box-shadow: 0 4px 14px rgba(28, 60, 106, .09) !important;
}
body.contribution-part .contribution-sheet-recap > summary { border-radius: 0 !important; }

/* Die äußere Videokachel und der darunterliegende Beobachtungsbogen
 * verwenden dieselbe Breite im gemeinsamen Elterncontainer. */
body.contribution-part .contribution-analyse-card > .contribution-video-placement {
  box-sizing: border-box;
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 16px !important;
  padding: 0;
}
body.contribution-part .contribution-analyse-card > .contribution-sheet-card {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
body.contribution-part .contribution-analyse-card .contribution-video-stage:not(.is-mini-player) {
  box-sizing: border-box;
  width: 100% !important;
  padding: 10px !important;
  margin: 0 !important;
}
body.contribution-part .contribution-analyse-card .contribution-video-stage video {
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

/* Der Miniplayer bleibt beim Scrollen mittig unter der sichtbaren Kopfzeile.
 * Die JS-Logik setzt ihn beim Zurückscrollen an seinen ursprünglichen Platz. */
body.contribution-part .contribution-video-stage.is-mini-player {
  position: fixed !important;
  top: var(--contribution-mini-top, 12px) !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%);
  width: var(--contribution-mini-width, 360px) !important;
  max-width: calc(100vw - 20px) !important;
  margin: 0 !important;
  padding: 7px !important;
  z-index: 1500;
  border-radius: 0 !important;
  box-shadow: 0 12px 36px rgba(9, 27, 59, .35) !important;
}
body.contribution-part .contribution-video-stage.is-mini-player video {
  border-radius: 0 !important;
}
/* Nur die X-Schaltfläche des Videos bleibt als eindeutiges Steuerelement rund. */
body.contribution-part .contribution-video-stage.is-mini-player .contribution-mini-close {
  border-radius: 50% !important;
}
@media (max-width: 650px) {
  body.contribution-part .contribution-video-stage.is-mini-player {
    width: var(--contribution-mini-width, min(260px, calc(100vw - 20px))) !important;
    left: 50% !important;
    right: auto !important;
    top: var(--contribution-mini-top, 12px) !important;
  }
}

/* Teil 2 – Transkripte, Rückmeldungen, Textfelder und Videos rechteckig. */
body.opening-part :is(
  .opening-info-card,
  .opening-task-card,
  .opening-transcript-task,
  .opening-transcript-heading-card,
  .opening-transcript-board,
  .opening-transcript-list > .opening-transcript,
  .opening-transcript-dropzone,
  .opening-choice-pool,
  .opening-choice-card,
  .opening-choice-complete,
  .opening-task-standalone-heading,
  .opening-inner-card,
  .opening-video-frame,
  .opening-video-frame video,
  .opening-small-button,
  .opening-light-button,
  textarea,
  input[type="text"]
) {
  border-radius: 0 !important;
}
body.opening-part .opening-video-frame {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
body.opening-part .opening-video-frame video {
  width: 100%;
  max-width: 100%;
  object-fit: contain;
}
body.opening-part .opening-transcript-dropzone,
body.opening-part .opening-video-frame,
body.opening-part .opening-inner-card {
  box-shadow: 0 7px 17px rgba(30, 59, 101, .12) !important;
}

/* ENDE: 352-patch417-learning-cards.css */

/* START: 353-patch418-fragearten.css */
/* Patch 418: Teil 3 – eckige Kacheln, Spiegelkarten für richtige Zuordnungen.
 * Gilt ausschließlich für das dritte Dekompositionsmodul. */
body.stimulation-part :is(
  .stimulation-info-card,
  .stimulation-accordion,
  .stimulation-accordion details,
  .stimulation-accordion summary,
  .stimulation-intro-note,
  .stimulation-transcript,
  .stimulation-task-card,
  .stimulation-inner-card,
  .stimulation-task-card .learning-task-intro,
  .stimulation-question-card,
  .stimulation-sort-complete,
  .stimulation-white-button,
  .stimulation-video-stage,
  .stimulation-video-placeholder,
  .stimulation-video-stage video,
  .stimulation-five-questions li,
  textarea
) { border-radius: 0 !important; }
body.stimulation-part .stimulation-info-card,
body.stimulation-part .stimulation-accordion,
body.stimulation-part .stimulation-transcript,
body.stimulation-part .stimulation-video-stage {
  box-shadow: 0 7px 21px rgba(31, 59, 97, .12);
}
body.stimulation-part .stimulation-accordion summary::before {border-radius:0 !important;}
body.stimulation-part .stimulation-video-stage,
body.stimulation-part .stimulation-video-placeholder,
body.stimulation-part .stimulation-video-stage video {border-radius:0 !important;}

/* Die ganze Kategorie wird um die vertikale Achse gedreht. Beide Seiten sind
 * gleich groß, so dass die 4-Spalten-Ansicht beim Nachsehen nicht springt. */
body.stimulation-part .stimulation-drop-zone {
  display:block;
  box-sizing:border-box;
  min-height:164px;
  padding:0;
  border-radius:0 !important;
  perspective:900px;
  cursor:pointer;
  overflow:visible;
}
body.stimulation-part .stimulation-drop-zone.is-done {cursor:default;}
body.stimulation-part .stimulation-zone-flip {
  position:relative;
  display:block;
  width:100%;
  min-height:162px;
  transform-style:preserve-3d;
  transition:transform .48s cubic-bezier(.2,.7,.2,1);
}
body.stimulation-part .stimulation-drop-zone.is-flipped .stimulation-zone-flip {
  transform:rotateY(180deg);
}
body.stimulation-part .stimulation-zone-face {
  box-sizing:border-box;
  position:absolute;
  inset:0;
  width:100%;
  min-height:162px;
  padding:14px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  text-align:center;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
body.stimulation-part .stimulation-zone-front strong {
  font-size:.91rem;
  line-height:1.35;
  hyphens:auto;
  overflow-wrap:normal;
  word-break:normal;
}
body.stimulation-part .stimulation-zone-back {transform:rotateY(180deg);}
body.stimulation-part .stimulation-zone-back p {
  color:#1e4569;
  margin:0;
  font-size:.83rem;
  line-height:1.35;
  hyphens:auto;
  overflow-wrap:normal;
  word-break:normal;
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
body.stimulation-part .stimulation-answer-label {
  color:#2b6045;
  font-weight:650;
  font-size:.77rem;
}
body.stimulation-part .stimulation-answer-toggle {
  display:none;
  cursor:pointer;
  border:1px solid #92b5d9;
  border-radius:0 !important;
  background:#fff;
  color:#245384;
  font:inherit;
  font-size:.78rem;
  font-weight:650;
  line-height:1.25;
  min-height:34px;
  padding:6px 10px;
  width:min(100%,146px);
  box-shadow:0 2px 7px rgba(29,64,102,.08);
}
body.stimulation-part .stimulation-drop-zone.is-done .stimulation-answer-toggle {display:block;}
body.stimulation-part .stimulation-answer-toggle:hover {background:#f1f6fd;}
body.stimulation-part .stimulation-answer-toggle:focus-visible {outline:3px solid #3577c0;outline-offset:2px;}
body.stimulation-part .stimulation-drop-zone.is-flipped .stimulation-zone-back {
  background:#d8f1e2;
}
@media (max-width:600px) {
  body.stimulation-part .stimulation-drop-zone,
  body.stimulation-part .stimulation-zone-flip,
  body.stimulation-part .stimulation-zone-face {min-height:179px;}
  body.stimulation-part .stimulation-zone-face {padding:10px 8px;}
  body.stimulation-part .stimulation-zone-back p {font-size:.77rem;}
  body.stimulation-part .stimulation-answer-toggle {font-size:.76rem;padding-inline:6px;}
}
@media (prefers-reduced-motion:reduce) {
  body.stimulation-part .stimulation-zone-flip {transition-duration:0s;}
}

/* ENDE: 353-patch418-fragearten.css */

/* START: 354-patch419-module-cleanup.css */
/* Patch 419 – ausschließlich neue CSS-Quellregeln, keine Bildgenerierung. */

/* Teil 4: Videobeispiel mit dunkelblauer Umrahmung wie in Wahrnehmung.
   Video/Beobachtungsbogen und deren vorhandene Javascript-Funktionen bleiben bestehen. */
body.contribution-part .contribution-analyse-card {
  border-radius: 0 !important;
  padding: 18px !important;
  background: linear-gradient(180deg, #112746 0%, #0a1730 100%) !important;
  border: 1px solid #143557 !important;
  box-shadow: 0 14px 30px rgba(9, 25, 48, .16) !important;
}
body.contribution-part .contribution-video-placement {
  width: 100%;
  margin: 0 auto 14px;
  padding: 12px;
  background: linear-gradient(180deg, #15335b 0%, #0b1a35 100%);
  border-radius: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 22px rgba(7,16,31,.15);
}
body.contribution-part .contribution-video-stage,
body.contribution-part .contribution-video-stage video {
  border-radius: 0 !important;
}
body.contribution-part .contribution-sheet-card {
  border-radius: 0 !important;
  background: #fff !important;
  border: 1px solid #d0dcef;
  box-shadow: 0 5px 16px rgba(10, 31, 57, .12);
}
body.contribution-part .contribution-video-stage.is-mini,
body.contribution-part .contribution-video-stage.is-floating {
  /* Der bestehende sticky-Miniplayer darf nicht vom dekorativen Video-Rahmen versetzt werden. */
  border-radius: 0 !important;
}

/* Teil 5: Visualisierungskarusell – vollständig rechteckige, lesbare Fläche. */
body.results-part .results-visual-carousel--css,
body.results-part .results-visual-carousel--css .results-visual-slide,
body.results-part .results-visual-carousel--css .results-visual-main,
body.results-part .results-visual-carousel--css .results-visual-figure,
body.results-part .results-visual-carousel--css .results-visual-title,
body.results-part .results-visual-carousel--css .results-visual-caption,
body.results-part .results-visual-carousel--css .results-visual-nav {
  border-radius: 0 !important;
}
body.results-part .results-visual-carousel--css .results-visual-nav {
  color: #fff !important;
  font-weight: 600;
}
body.results-part .results-visual-carousel--css .results-visual-caption,
body.results-part .results-visual-carousel--css .results-visual-caption * {
  color: #fff !important;
}

/* Teil 5: Auswahlspiel mit engeren Pfeilen, eckigen Karten und nur einem
   kontextabhängigen Bedienknopf (Auswählen / Erneut auswählen / Weiter). */
body.results-part .results-method-game-card,
body.results-part .results-method-board,
body.results-part .results-method-choice-area,
body.results-part .results-method-choice-visual,
body.results-part .results-method-choice-name,
body.results-part .results-method-arrow,
body.results-part .results-method-choose,
body.results-part .results-method-bubble {
  border-radius: 0 !important;
}
body.results-part .results-method-choice-frame {
  grid-template-columns: 40px minmax(0, 200px) 40px;
  gap: 2px;
}
body.results-part .results-method-arrow {
  width: 40px;
  height: 48px;
  min-width: 0;
  box-shadow: 0 4px 10px rgba(30,67,113,.13);
}
body.results-part .results-method-choose {
  min-width: 134px;
  margin-top: 6px;
}
body.results-part .results-method-progress {
  display: block;
  text-align: center;
  color: #526884;
  font-weight: 400;
  font-size: .86rem;
  margin: .4rem 0 0;
}
@media(max-width: 690px) {
 body.results-part .results-method-choice-frame {
   grid-template-columns: 36px minmax(0, 190px) 36px;
   gap: 2px;
 }
 body.results-part .results-method-arrow { width: 36px; height: 44px; }
}

/* Teil 5: Vorbereitung, Transferwahl und deren innere Kacheln rechteckig. */
body.results-part .results-transfer-prep-card,
body.results-part .results-transfer-choice-card,
body.results-part .results-transfer-task-shell,
body.results-part .results-transfer-workspace,
body.results-part .results-transfer-panel,
body.results-part .results-transfer-assignment-head,
body.results-part .results-transfer-textarea {
  border-radius: 0 !important;
}

/* ENDE: 354-patch419-module-cleanup.css */

/* START: 355-patch422-results-text-and-transfer.css */
/* Patch 422: Ergebnisvisualisierung / Quellen und Transferaufgaben. */
body.results-part .results-visual-caption,
body.results-part .results-visual-caption *,
body.results-part .results-visual-main .results-visual-caption,
body.results-part .results-visual-slide .results-visual-caption {
  color: #fff !important;
}
body.results-part .results-visual-caption {
  background: #13233f;
  opacity: 1;
  line-height: 1.5;
}
body.results-part .results-source-note {
  border-top: 1px solid #dbe3ef;
  margin-top: 1.5rem;
  padding-top: .7rem;
  font-size: .92rem;
  color: #425675;
}
body.results-part .results-transfer-assignment-head h4 {
  margin: .75rem 0;
  font-size: 1rem;
  color: #213b60;
}
body.results-part .results-transfer-requirements {
  margin: .5rem 0 1rem 1.2rem;
  padding-left: 1.1rem;
}
body.results-part .results-transfer-requirements > li {
  padding-left: .1rem;
  margin: .5rem 0;
}
body.results-part .results-transfer-requirements ul {
  margin: .2rem 0 .3rem;
  padding-left: 1.25rem;
  list-style-type: circle;
}
body.results-part .results-transfer-requirements ul li {
  margin: .18rem 0;
}
@media (max-width: 600px) {
  body.results-part .results-transfer-requirements {
    margin-left: 0;
    padding-left: 1.3rem;
  }
}

/* ENDE: 355-patch422-results-text-and-transfer.css */

/* START: 356-patch423-square-platform.css */
/*
 * Patch 423 – konsistent RECHTECKIGE UI-Flaechen.
 *
 * Letzte Kaskaden-Stufe nach den projektspezifischen Modulen, weil deren
 * spezifische border-radius-Regeln sonst das gemeinsame Design ueberschreiben.
 * Nur CSS-Darstellung, keinerlei Aenderung an Spiel- und Speichervorgaengen.
 */

:root {
    --cp-ui-card-radius: 0px;
    --cp-ui-control-radius: 0px;
    --cp-ui-compact-radius: 0px;
    --flat-card-radius: 0px;
    --card-radius: 0px;
}

/* Alle üblichen Oberflaechen, Felder, Schalter und Bedienelemente im Portal. */
body :is(
    .card, .panel, .button, .btn, .badge, .status-pill, .hint-box,
    [class*="-card"], [class*="-panel"], [class*="-shell"],
    [class*="-dialog"], [class*="-modal"], [class*="-box"],
    [class*="-tile"], [class*="-frame"], [class*="-screen"],
    [class*="-overlay"], [class*="-stage"], [class*="-tab"],
    [class*="-pill"], [class*="-badge"], [class*="-field"],
    [class*="-textarea"], [class*="-button"], [class*="-choice"],
    [class*="-alternative"], [class*="-container"], [class*="-cover"],
    [class*="-upload"], [class*="-table"], [class*="-tooltip"],
    [class*="-feedback"], [class*="-notice"], [class*="-intro"],
    [class*="-viewport"], [class*="-slider"], [class*="-carousel"],
    [class*="-dropzone"], [class*="-transcript"],
    textarea, select, button, details, summary, video, iframe
) {
    border-radius: 0 !important;
}
body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) {
    border-radius: 0 !important;
}

/*
 * Die eigenstaendigen interaktiven Dekompositions-Module nutzen zahlreiche
 * eigene Klassen, etwa results-branching-start, -feedback, -alternative,
 * -screen sowie results-transfer-*, die nicht auf '-card' enden.
 * Die vollstaendige modulinterne UI wird daher kantig, inklusive Startbildschirm,
 * Frage, Antwortalternativen, Rueckmeldung, Auswertung und Replay.
 * SVG-Zeichenelemente bleiben unveraendert: ihre kreisfoermigen Konturen und
 * Illustrationen sind Spiel-/Bildinhalt und keine abgerundeten Kachelecken.
 */
body:is(.results-part, .contribution-part, .opening-part, .stimulation-part)
    :is(div, section, article, aside, figure, figcaption, header, footer,
        main, form, fieldset, label, a, button, input, textarea, select,
        details, summary, video, iframe, img, table, th, td) {
    border-radius: 0 !important;
}

/* Auch Seitenteile und Oberflaechen anderer Lernmodule sind rechteckig. */
body :is(
    .course-content-card, .learning-task-card, .learning-workspace-panel,
    .learning-workspace-panel-nav, .learning-workspace-tabs,
    .learning-task-intro, .learning-info-card, .course-main,
    .documentation-step, .documentation-tool, .exercise-review,
    .wahrnehmung-video-frame, .wahrnehmung-annotation-card,
    .module-card, .learning-hierarchy-card, .group-room-head,
    .course-browser-head, .dashboard-mini-card, .results-script-table
) {
    border-radius: 0 !important;
}

/*
 * Absichtlich runde, semantische Bild-/Funktionsobjekte ausnehmen:
 * Profilbilder, farbige Kreispunkte im Lernfortschritt, nummerierte
 * Navigationsschritte sowie der explizit rund gewuenschte Logout-Button.
 * Diese sind keine Kacheln mit abgerundeten Ecken.
 */
body :is(
    .nav-logout-button, .profile-avatar, .user-avatar,
    .nav-user-avatar, .dashboard-profile-avatar,
    .learning-progress-dot, .learning-step-dot,
    .learning-workspace-step-index, .step-number
) {
    border-radius: 50% !important;
}

/* Hoehere Spezifitaet als alte allgemeine button[class*="-button"]-Regel. */
body button.nav-logout-button.nav-logout-button {
    border-radius: 50% !important;
}

/* ENDE: 356-patch423-square-platform.css */

/* Patch 425: kompakte Anmelde-Option, rechteckig im Plattformstil */
.public-login-remember { display: flex; align-items: center; gap: .65rem; margin: .5rem 0 1rem; font-size: .95rem; font-weight: 400; cursor: pointer; }
.public-login-remember input[type="checkbox"] { margin: 0; width: 1.1rem; height: 1.1rem; flex: 0 0 1.1rem; border-radius: 0; }


/* Patch 429: login remembered-email option uses a real, compact inline checkbox. */
body.public-login-route .public-login-form > label.public-login-remember {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start;
  justify-self: start;
  gap: .6rem;
  width: auto;
  max-width: 100%;
  margin: 0 0 .25rem;
  font-size: .91rem;
  line-height: 1.5;
  font-weight: 400;
  cursor: pointer;
}
body.public-login-route .public-login-form > label.public-login-remember > input[type="checkbox"] {
  appearance: auto;
  display: inline-block !important;
  flex: 0 0 18px;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  vertical-align: middle;
  accent-color: #2c6cac;
  cursor: pointer;
}
body.public-login-route .public-login-form > label.public-login-remember > input[type="checkbox"]:focus-visible {
  outline: 2px solid #2c6cac;
  outline-offset: 3px;
}