/*
 * Zither-Melodiebrett in Draufsicht (angelehnt an den Entwurf
 * „Zither Melodiebrett.dc.html"): Trapez-Korpus, Schallloch, weißes
 * Griffbrett mit fünf Melodiesaiten und die frei liegenden Begleit-,
 * Bass- und Kontrabasssaiten. Die Intervall-Markierung (rot/blau) wird
 * über die Notenfelder gelegt.
 */

/* Kein Holz-Hintergrund wie beim Gitarren-Griffbrett – heller Karton-Look;
   überschreibt die generische svg-Regel aus fretboard.css. */
.page-zither #fretboard {
    background: #fdfbf6;
}

.page-zither #fretboard-container {
    overflow-x: auto;
}

.board-caption {
    text-align: center;
    margin: 0 0 10px;
    font-size: 12px;
    letter-spacing: .04em;
    color: #6b6457;
}

/* ── Korpus & Griffbrett ───────────────────────── */
.z-body {
    fill: #efe9dd;
    stroke: #2a2622;
    stroke-width: 2;
}

.z-hole {
    fill: none;
    stroke: #2a2622;
    stroke-width: 2;
}

.z-board {
    fill: #ffffff;
    stroke: #2a2622;
    stroke-width: 2;
}

.z-nut {
    stroke: #2a2622;
    stroke-width: 3;
}

.z-fret {
    stroke: #b9b1a3;
    stroke-width: 1;
}

/* Melodiesaiten (dunkel, nach unten dicker) und freie Saiten (dezent) */
.z-string {
    stroke: #2a2622;
    stroke-linecap: round;
}

.z-free {
    stroke: #6b6457;
    stroke-linecap: round;
}

/* ── Notenfelder ───────────────────────────────── */
.z-cell {
    fill: #ffffff;
}

.z-cell.root {
    fill: var(--color-root);
}

.z-cell.interval {
    fill: var(--color-interval);
}

.z-label {
    text-anchor: middle;
    dominant-baseline: middle;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    fill: #1a1a1a;
}

/* Halbtöne dezent grau (wie im Entwurf) */
.z-label.sharp {
    font-weight: 400;
    fill: #8a8378;
}

/* Text auf farbig markiertem Feld: weiß */
.z-label.on {
    fill: #ffffff;
    font-weight: 700;
}

/* ── Bundnummern & Randbeschriftung ────────────── */
.z-fretnum {
    text-anchor: middle;
    font-family: Arial, sans-serif;
    font-size: 10px;
    fill: #8a8378;
}

.z-fretnum.marked {
    fill: #1a1a1a;
    font-weight: 700;
}

.z-side {
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: .12em;
    fill: #8a8378;
    text-transform: uppercase;
}

/* ── Referenz-Infostreifen unter dem Brett ─────── */
.zither-notes {
    max-width: 1000px;
    margin: 24px auto 0;
    padding: 0 16px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px 28px;
}

.zither-notes h3 {
    margin: 0 0 8px;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-interval);
}

.zither-notes p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
}

/* ── Mobil: nicht drehen wie das Gitarren-Griffbrett, sondern
   horizontal scrollen (die Draufsicht bleibt aufrecht lesbar). ── */
@media (max-width: 768px) and (orientation: portrait) {
    .page-zither #fretboard-container {
        position: static;
        display: block;
        width: 100%;
        height: auto;
        overflow-x: auto;
    }

    .page-zither #fretboard {
        position: static;
        transform: none;
        width: 1240px;
        max-width: none;
        height: auto;
    }
}