/*
 * FFD – Kursbereich
 * Datei: /assets/css/courses.css
 *
 * Eigentümer: Kurs-Chat
 *
 * REGEL:
 * - Ausschließlich kursbezogene Gestaltung hier eintragen.
 * - /assets/css/style.css NICHT im Kurs-Chat ersetzen oder verändern.
 * - Globale Änderungen an Header, Footer, Buttons, Farben oder Typografie
 *   als MASTER_PATCH melden und im Hauptchat zusammenführen.
 */

/* Allgemeine Kursplattform ------------------------------------------------- */

.course-platform,
.lesson-platform {
    --course-border: #ded2ba;
    --course-paper: #fffdf8;
    --course-soft: #f7f1e6;
    --course-blue-soft: #eef2f5;
    --course-ink: #243344;
    --course-muted: #67583d;
    --course-gold: #927039;
}

.course-platform .content-card,
.course-notice {
    margin-top: 28px;
    padding: 20px 22px;
    border: 1px solid var(--course-border);
    border-left: 4px solid var(--course-gold);
    border-radius: 10px;
    background: var(--course-paper);
    color: var(--course-ink);
}

.course-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
    gap: 46px;
    align-items: start;
}

.course-overview-main {
    min-width: 0;
}

.course-overview-image {
    overflow: hidden;
    border-radius: 14px;
    box-shadow: var(--shadow);
    background: var(--course-paper);
}

.course-overview-image img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.course-description {
    max-width: 780px;
    font-size: 18px;
    line-height: 1.65;
}

.course-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.course-facts span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 11px;
    border: 1px solid var(--course-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    color: var(--course-muted);
    font-family: var(--sans);
    font-size: 13px;
}

.course-curriculum {
    margin-top: 58px;
}

.course-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

.course-section-heading h2 {
    margin: 0;
}

.course-module-list {
    display: grid;
    gap: 18px;
}

.course-module {
    overflow: hidden;
    border: 1px solid var(--course-border);
    border-radius: 14px;
    background: var(--course-paper);
}

.course-module-header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 23px 24px 20px;
    border-bottom: 1px solid var(--course-border);
    background: var(--course-soft);
}

.course-module-header h3 {
    margin: 2px 0 7px;
    color: var(--navy);
    font-size: 25px;
    font-weight: 500;
}

.course-module-header p:not(.course-module-meta) {
    margin: 0;
    color: #52606a;
    line-height: 1.55;
}

.course-module-meta {
    margin: 0;
    color: var(--course-muted);
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.course-module-count {
    flex: 0 0 auto;
    align-self: center;
    color: var(--course-muted);
    font-family: var(--sans);
    font-size: 13px;
}

.course-empty {
    margin: 0;
    padding: 19px 24px;
    color: #66727b;
}

.course-lesson-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.course-lesson-item + .course-lesson-item {
    border-top: 1px solid #ebe3d5;
}

.course-lesson-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 17px 24px;
    color: var(--course-ink);
    transition: background .16s ease;
}

.course-lesson-link:hover {
    background: #fff;
}

.course-lesson-title {
    min-width: 0;
    font-size: 17px;
}

.course-lesson-access {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--course-blue-soft);
    color: #445665;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.course-lesson-item.is-preview .course-lesson-access {
    background: #eaf3ec;
    color: #426b4b;
}

.course-lesson-item.is-locked .course-lesson-title::before {
    content: "◦";
    margin-right: 9px;
    color: var(--course-gold);
}

/* Lektionsansicht --------------------------------------------------------- */

.lesson-shell {
    width: min(930px, calc(100% - 48px));
}

.lesson-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 28px;
    color: #6a747c;
    font-family: var(--sans);
    font-size: 13px;
}

.lesson-breadcrumb a {
    color: var(--navy);
}

.lesson-header {
    padding-bottom: 28px;
    border-bottom: 1px solid var(--course-border);
}

.lesson-header h1 {
    margin-bottom: 12px;
}

.lesson-course-name {
    margin: 0;
    color: var(--course-muted);
    font-family: var(--sans);
    font-size: 14px;
}

.lesson-content {
    margin-top: 30px;
}

.lesson-content > :first-child {
    margin-top: 0;
}

.lesson-content > :last-child {
    margin-bottom: 0;
}

.lesson-locked {
    margin-top: 32px;
    padding: 30px;
    border: 1px solid var(--course-border);
    border-radius: 14px;
    background: var(--course-paper);
}

.lesson-locked h2 {
    margin: 7px 0 14px;
}

.lesson-lock-label {
    margin: 0;
    color: var(--course-gold);
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.lesson-lock-note {
    color: #66727b;
    font-size: 15px;
}

.lesson-navigation {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    margin-top: 46px;
    padding-top: 25px;
    border-top: 1px solid var(--course-border);
}

.lesson-nav-side {
    min-width: 0;
}

.lesson-nav-side a {
    display: inline-block;
    color: var(--navy);
    line-height: 1.35;
}

.lesson-nav-next {
    text-align: right;
}

.lesson-nav-label {
    display: block;
    margin-bottom: 5px;
    color: #79838b;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.lesson-nav-course {
    padding: 9px 12px;
    border: 1px solid var(--course-border);
    border-radius: 8px;
    color: var(--navy);
    font-family: var(--sans);
    font-size: 13px;
    white-space: nowrap;
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 760px) {
    .course-overview {
        grid-template-columns: 1fr;
    }

    .course-overview-image {
        order: -1;
        max-width: 440px;
    }

    .course-module-header {
        display: block;
    }

    .course-module-count {
        display: inline-block;
        margin-top: 12px;
    }

    .course-lesson-link {
        align-items: flex-start;
        padding-inline: 18px;
    }

    .lesson-navigation {
        grid-template-columns: 1fr;
    }

    .lesson-nav-next {
        text-align: left;
    }

    .lesson-nav-course {
        justify-self: start;
    }
}

@media (max-width: 520px) {
    .lesson-shell {
        width: min(100% - 32px, 930px);
    }

    .course-module-header,
    .course-lesson-link,
    .lesson-locked {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Authentifizierung und Campus -------------------------------------------- */

.auth-platform,
.campus-platform {
    --course-border: #ded2ba;
    --course-paper: #fffdf8;
    --course-soft: #f7f1e6;
    --course-blue-soft: #eef2f5;
    --course-ink: #243344;
    --course-muted: #67583d;
    --course-gold: #927039;
}

.auth-shell {
    width: min(620px, calc(100% - 48px));
}

.auth-card {
    padding: clamp(24px, 5vw, 42px);
    border: 1px solid var(--course-border);
    border-radius: 16px;
    background: var(--course-paper);
    box-shadow: var(--shadow);
}

.auth-card h1 {
    margin-bottom: 12px;
}

.auth-intro {
    margin-top: 0;
    color: #56636d;
    line-height: 1.65;
}

.auth-form {
    display: grid;
    gap: 18px;
    margin-top: 28px;
}

.auth-field {
    display: grid;
    gap: 7px;
}

.auth-field label {
    color: var(--course-ink);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 700;
}

.auth-field input {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid #b8aa90;
    border-radius: 8px;
    background: #fff;
    color: var(--course-ink);
    font: inherit;
}

.auth-field input:focus {
    outline: 3px solid rgba(49, 94, 144, .25);
    outline-offset: 2px;
    border-color: #315e90;
}

.auth-submit {
    justify-self: start;
    border: 0;
    cursor: pointer;
}

.auth-message {
    margin-top: 20px;
    padding: 14px 16px;
    border-radius: 8px;
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.5;
}

.auth-message-error {
    border-left: 4px solid #8b3f36;
    background: #f8ebe8;
    color: #6d3029;
}

.auth-note {
    margin: 24px 0 0;
    color: #758089;
    font-size: 14px;
    line-height: 1.55;
}

.campus-heading {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: flex-end;
    margin-bottom: 42px;
}

.campus-heading .intro {
    margin-bottom: 0;
}

.campus-logout-form {
    margin: 0;
}

.campus-logout {
    min-height: 42px;
    padding: 8px 14px;
    border: 1px solid var(--course-border);
    border-radius: 8px;
    background: #fff;
    color: var(--navy);
    cursor: pointer;
    font-family: var(--sans);
    font-size: 13px;
}

.campus-logout:hover {
    background: var(--course-soft);
}

.campus-section-heading {
    margin-bottom: 20px;
}

.campus-course-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.campus-course-card,
.campus-empty {
    overflow: hidden;
    border: 1px solid var(--course-border);
    border-radius: 14px;
    background: var(--course-paper);
}

.campus-course-image {
    display: block;
    background: var(--course-soft);
}

.campus-course-image img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 8;
    object-fit: cover;
}

.campus-course-body,
.campus-empty {
    padding: 24px;
}

.campus-course-body h3 {
    margin: 5px 0 10px;
    font-size: 24px;
    font-weight: 500;
}

.campus-course-body h3 a {
    color: var(--navy);
}

.campus-course-body > p:not(.course-module-meta):not(.campus-course-action) {
    color: #56636d;
}

.campus-course-action {
    margin: 20px 0 0;
}

.campus-empty h2 {
    margin-top: 0;
}

.course-facts .course-access-active,
.course-lesson-item.is-accessible .course-lesson-access {
    background: #eaf3ec;
    color: #426b4b;
}

.lesson-locked .button {
    display: inline-flex;
    margin-top: 8px;
}

@media (max-width: 760px) {
    .campus-heading {
        display: block;
    }

    .campus-logout-form {
        margin-top: 18px;
    }

    .campus-course-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .auth-shell {
        width: min(100% - 32px, 620px);
    }

    .auth-card,
    .campus-course-body,
    .campus-empty {
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* Lernfortschritt ---------------------------------------------------------- */

.course-progress-summary {
    margin-top: 20px;
    padding: 16px 18px;
    border: 1px solid var(--course-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, .62);
}

.course-overview-progress {
    max-width: 560px;
}

.course-progress-line {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 9px;
    color: var(--course-ink);
    font-family: var(--sans);
    font-size: 13px;
}

.course-progress-line span {
    color: var(--course-muted);
}

.course-progress-bar {
    display: block;
    width: 100%;
    height: 10px;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: #e9e0d0;
    accent-color: var(--course-gold);
}

.course-progress-bar::-webkit-progress-bar {
    background: #e9e0d0;
    border-radius: 999px;
}

.course-progress-bar::-webkit-progress-value {
    background: var(--course-gold);
    border-radius: 999px;
}

.course-progress-bar::-moz-progress-bar {
    background: var(--course-gold);
    border-radius: 999px;
}

.course-lesson-item.is-completed .course-lesson-access {
    background: #eaf3ec;
    color: #426b4b;
}

.course-lesson-item.is-completed .course-lesson-title::before {
    content: "✓";
    margin-right: 9px;
    color: #426b4b;
    font-family: var(--sans);
    font-weight: 700;
}

.course-lesson-item.is-completed.is-locked .course-lesson-title::before {
    content: "✓";
}

.lesson-progress-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-top: 30px;
    padding: 22px 24px;
    border: 1px solid var(--course-border);
    border-radius: 14px;
    background: var(--course-soft);
}

.lesson-progress-card h2 {
    margin: 4px 0 7px;
    font-size: 24px;
}

.lesson-progress-card p:not(.lesson-progress-label) {
    margin: 0;
    color: #59666f;
    line-height: 1.55;
}

.lesson-progress-label {
    margin: 0;
    color: var(--course-gold);
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.lesson-progress-form {
    flex: 0 0 auto;
    margin: 0;
}

.lesson-progress-button {
    min-height: 46px;
    padding: 10px 16px;
    border: 1px solid var(--navy);
    border-radius: 9px;
    background: var(--navy);
    color: #fff;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 700;
}

.lesson-progress-button:hover {
    background: #243d52;
}

.lesson-progress-button.is-completed {
    border-color: #6d8c73;
    background: #eaf3ec;
    color: #31573a;
}

.lesson-progress-button.is-completed:hover {
    background: #dfece2;
}

@media (max-width: 760px) {
    .lesson-progress-card {
        display: block;
    }

    .lesson-progress-form {
        margin-top: 18px;
    }

    .lesson-progress-button {
        width: 100%;
    }
}

/* Fortschritt beim Wechsel zur nächsten Lektion -------------------------- */
.lesson-nav-next-form {
    margin: 0;
}

.lesson-nav-next-button {
    appearance: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--navy);
    cursor: pointer;
    font: inherit;
    line-height: 1.35;
    text-align: right;
}

.lesson-nav-next-button:hover {
    text-decoration: underline;
}

@media (max-width: 760px) {
    .lesson-nav-next-button {
        text-align: left;
    }
}

/* Kursabschluss ----------------------------------------------------------- */
.course-progress-summary.is-complete {
    border-color: #bfd3c3;
    background: #f0f7f1;
}

.course-progress-summary.is-complete .course-progress-bar,
.course-progress-summary.is-complete .course-progress-bar::-webkit-progress-value,
.course-progress-summary.is-complete .course-progress-bar::-moz-progress-bar {
    accent-color: #426b4b;
}

.course-completion-banner {
    max-width: 620px;
    margin-top: 20px;
    padding: 20px 22px;
    border: 1px solid #bfd3c3;
    border-left: 4px solid #426b4b;
    border-radius: 12px;
    background: #f0f7f1;
}

.course-completion-banner h2 {
    margin: 4px 0 8px;
    font-size: 26px;
}

.course-completion-banner p:last-child {
    margin-bottom: 0;
    color: #4f6254;
}

.campus-course-card.is-complete {
    border-color: #bfd3c3;
}

.campus-course-complete {
    margin: 16px 0 0;
    color: #31573a;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 700;
}

.course-progress-summary.is-complete .course-progress-bar {
    accent-color: #426b4b;
}

.course-progress-summary.is-complete .course-progress-bar::-webkit-progress-value {
    background: #426b4b;
}

.course-progress-summary.is-complete .course-progress-bar::-moz-progress-bar {
    background: #426b4b;
}