/* Stile für die SVG-Griffbretter (Intervall-Explorer & CAGED-Explorer). */

#fretboard-container {
    display: flex;
    justify-content: center;
}

/* ── Mobil (Hochformat): Griffbrett quer darstellen ─────────────────
   Das Griffbrett ist sehr breit (1200×~360) und wird auf schmalen
   Hochformat-Bildschirmen sonst winzig skaliert. Deshalb drehen wir es
   um 90°, sodass die Bünde von oben nach unten laufen und das Brett die
   volle Bildschirmbreite ausnutzt – man scrollt dann vertikal durch die
   Bünde, die Noten bleiben dabei groß und gut lesbar.

   Trick: Die eigentliche (ungedrehte) SVG-Breite entspricht der langen
   Seite des Griffbretts; ihre Höhe folgt per Seitenverhältnis auf 92vw
   und füllt nach der 90°-Drehung die Bildschirmbreite. Der Container
   reserviert genau die Höhe, die die gedrehte lange Seite einnimmt. */
@media (max-width: 768px) and (orientation: portrait) {
    #fretboard-container {
        --fb-aspect: 3.333;   /* Intervall-Explorer: 1200×360 */
        position: relative;
        display: block;
        width: 100%;
        overflow: hidden;
        height: calc(92vw * var(--fb-aspect));
    }

    .page-caged #fretboard-container {
        --fb-aspect: 3.429;   /* CAGED-Explorer: 1200×350 */
    }

    #fretboard {
        position: absolute;
        top: 50%;
        left: 50%;
        width: calc(92vw * var(--fb-aspect));
        height: auto;
        max-width: none;
        transform: translate(-50%, -50%) rotate(90deg);
        transform-origin: center center;
    }
}

/* ── Eingebetteter Quintenzirkel (helles Theme, passend zur CAGED-Seite) ── */
.quintenzirkel-section {
    margin-top: 5px;
    padding: 4px 16px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.quintenzirkel-section h2 {
    margin: 0 0 16px;
}

.quintenzirkel-section canvas {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
    display: block;
    width: 560px;
    max-width: 100%;
    height: auto;
}

.quintenzirkel-section #info {
    margin-top: 16px;
    font-size: 18px;
    min-height: 30px;
    color: #444;
}

.quintenzirkel-section button {
    margin-top: 10px;
    padding: 8px 12px;
    font-size: 16px;
    cursor: pointer;
}

svg {
    background: var(--fretboard-bg);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
    max-width: 100%;
    height: auto;
}

/* CAGED-Seite behält ihren Holz-Verlauf */
.page-caged svg {
    background: linear-gradient(90deg, #d9b27c, #c79a63);
}

/* ── Griffbrett-Grundgerüst ─────────────────── */
.string {
    stroke: var(--string);
    stroke-linecap: round;
}

.fret {
    stroke: var(--fret);
    stroke-width: 2;
}

.nut {
    stroke: var(--nut);
    stroke-width: 8;
}

.fret-number {
    text-anchor: middle;
}

.string-label {
    fill: #222;
    font-size: 16px;
    font-weight: bold;
    text-anchor: middle;
    dominant-baseline: middle;
}

/* Inlays: hell auf dem Intervall-Explorer, dezent dunkel auf CAGED */
.fret-marker {
    fill: rgba(255, 255, 255, .35);
}

.inlay {
    fill: rgba(0, 0, 0, .15);
}

/* ── Noten ──────────────────────────────────── */
.note-circle {
    cursor: pointer;
}

.note {
    stroke: #fff;
    stroke-width: 2;
}

.note-text {
    fill: white;
    font-size: 12px;
    font-weight: bold;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}

/* Tonfarben (gemeinsam für beide Seiten) */
.root {
    fill: var(--color-root);
}

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

.third {
    fill: var(--color-third);
}

.fifth {
    fill: var(--color-fifth);
}

.scale {
    fill: var(--color-scale);
}

.normal {
    fill: rgba(255, 255, 255, .15);
}

/* ── Legenden-Farbkästchen ──────────────────── */
.root-box {
    background: var(--color-root);
}

.interval-box {
    background: var(--color-interval);
}

.third-box {
    background: var(--color-third);
}

.fifth-box {
    background: var(--color-fifth);
}

.scale-box {
    background: var(--color-scale);
}

/* ── CAGED-Positionslabel ───────────────────── */
.position-label {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}