/* Scoped: Tool 05 – Musikalisches Dur/Moll-Dreieck */
#feature-06-container{
  --gold:#b58433;
}
#feature-06-container .td-head{max-width:66ch}
#feature-06-container .td-title{font-family:var(--serif);font-size:clamp(1.6rem,3.5vw,2.4rem);
  color:var(--plum-deep);margin:6px 0 10px}
#feature-06-container .td-note{color:var(--ink-soft);font-size:.95rem}
#feature-06-container .td-volume-control{display:grid;gap:5px;width:min(100%,260px);margin-top:14px;color:var(--ink-soft);font-family:var(--mono);font-size:.72rem}
#feature-06-container .td-volume-control>span{display:flex;justify-content:space-between;gap:10px}
#feature-06-container .td-volume-control input{width:100%;accent-color:var(--plum)}
#feature-06-container .td-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(18px,4vw,40px);align-items:center;margin-top:20px}
#feature-06-container .td-stage{min-width:0}
#feature-06-container .td-svg{width:100%;height:auto;max-width:520px;display:block;margin:0 auto}

/* Dreieck & Verbindungslinien */
#feature-06-container .td-edge{fill:none;stroke:var(--line);stroke-width:1.5;stroke-dasharray:4 7}
#feature-06-container .td-rel{stroke:var(--ink-soft);stroke-width:1.6;stroke-dasharray:2 6;opacity:.85}
#feature-06-container .td-poly{stroke-linejoin:round;transition:all .25s}
#feature-06-container .td-poly-dur{fill:rgba(181,132,51,.10);stroke:var(--gold);stroke-width:2.6}
#feature-06-container .td-poly-moll{fill:rgba(135,36,38,.07);stroke:var(--plum);stroke-width:2.2;
  stroke-dasharray:7 6}

/* Töne (klickbar) */
#feature-06-container .td-node{cursor:pointer}
#feature-06-container .td-halo{fill:none;stroke:var(--ink);stroke-width:1.5;opacity:0;transition:opacity .2s}
#feature-06-container .td-node.is-active .td-halo{opacity:1}
#feature-06-container .td-dot{fill:#fff;stroke:var(--line);stroke-width:1.5;
  transition:fill .2s,stroke .2s,stroke-width .2s}
#feature-06-container .td-node:hover .td-dot{stroke:var(--ink)}
#feature-06-container .td-node.is-dur .td-dot{fill:var(--gold);stroke:var(--gold)}
#feature-06-container .td-node.is-moll .td-dot{fill:var(--plum);stroke:var(--plum)}
#feature-06-container .td-node.is-both .td-dot{fill:var(--gold);stroke:var(--plum);stroke-width:3}
#feature-06-container .td-lbl{font-family:var(--mono);font-size:12px;font-weight:700;fill:var(--ink);
  text-anchor:middle;dominant-baseline:middle;pointer-events:none}
#feature-06-container .td-node.is-dur .td-lbl,
#feature-06-container .td-node.is-both .td-lbl{fill:var(--plum-deep)}
#feature-06-container .td-node.is-moll .td-lbl{fill:var(--pink-soft)}
#feature-06-container .td-node:focus-visible{outline:none}
#feature-06-container .td-node:focus-visible .td-halo{opacity:1;stroke:var(--tool-c)}

/* Beschriftung & Legende */
#feature-06-container .td-caption{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2rem);
  color:var(--plum-deep);margin:0 0 16px}
#feature-06-container .td-notes{margin:0 0 20px;font-family:var(--mono);font-size:.9rem;color:var(--ink-soft)}
#feature-06-container .td-legend{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:9px;font-family:var(--mono);font-size:.74rem;letter-spacing:.05em;
  color:var(--ink-soft)}
#feature-06-container .td-legend li{display:flex;align-items:center;gap:9px}
#feature-06-container .td-sw{width:16px;height:16px;border-radius:50%;flex:0 0 auto}
#feature-06-container .td-sw-dur{background:var(--gold)}
#feature-06-container .td-sw-moll{background:var(--plum)}
#feature-06-container .td-sw-rel{width:22px;height:0;border-radius:0;background:transparent;
  border-top:2px dashed var(--ink-soft)}
@media (max-width:760px){
  #feature-06-container .td-body{grid-template-columns:1fr}
  #feature-06-container .td-caption{margin-bottom:12px}
  #feature-06-container .td-legend{flex-direction:row;flex-wrap:wrap;gap:8px 18px}
}