/* classdesk – Projektseite im Showroom.
   Baut auf dem Layout der brandbill-Seite auf (../brandbill/css/brandbill.css) und ergaenzt nur Logo und Film. */

:root {
    --cd-board: #123f31;
    --cd-sun: #ffcb2e;
    --cd-coral: #e8553b;
    --logo-edge: transparent;
    --logo-legs: #123f31;
}

[data-theme="dark"] {
    --logo-edge: #f6f2e9;
    --logo-legs: #f6f2e9;
    --cd-coral: #ff8a70;
}

/* ---------- Produktlogo ---------- */
.cd-mark {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.cd-mark .cd-edge {
    stroke: var(--logo-edge);
}

.cd-mark .cd-legs {
    stroke: var(--logo-legs);
}

.cd-wordmark {
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
}

.cd-wordmark span {
    color: var(--cd-coral);
}

.cd-mark--title {
    width: 0.95em;
    height: 0.95em;
}

.bb-lockup .cd-mark {
    width: 40px;
    height: 40px;
}

.bb-lockup .cd-wordmark {
    font-size: 1.6rem;
}

/* ---------- Film ---------- */
.cd-film {
    padding-bottom: 3rem;
}

.cd-film-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    margin-bottom: 1.25rem;
}

.cd-film-head .bb-h2 {
    margin: 0;
}

.cd-film-head p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.cd-film .bb-device {
    background: var(--cd-board);
}

.cd-film video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background: var(--cd-board);
}

.cd-film figcaption a {
    color: inherit;
    text-underline-offset: 3px;
}