/* Seitenspezifische Stile für die CAGED Roadmap (Guitar/caged_roadmap.html).
   Baut auf css/base.css auf und nutzt dessen Farb-Variablen.
   Das Kapitel-Layout ist bewusst identisch zu theory/css/chords.css,
   damit die Roadmap im gleichen Stil wie die Theorie-Seiten aussieht. */

/* ── Kapitel-Layout ─────────────────────────── */
.chord-chapter {
    max-width: 900px;
    margin: 0 auto 48px;
    padding: 0 20px;
}

.chapter-head {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin: 0 auto 16px;
    max-width: 760px;
}

.chapter-num {
    font-size: 42px;
    font-weight: bold;
    line-height: 1;
    color: var(--color-interval);
    flex-shrink: 0;
}

.chapter-head h2 {
    margin: 0;
    font-size: 26px;
    color: #333;
}

/* Textblock im Stil der Erklärungs-Box, aber linksbündig für die Kapitel */
.chord-chapter .explainer-box {
    text-align: left;
}

/* ── Akkorddiagramme in den Kapiteln ────────── */
.chord-chapter .explainer-box .chord-diagram {
    display: block;
    width: 100%;
    max-width: 620px;
    height: auto;
    margin: 20px auto 4px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}