/* ansicht.css — wie ein Lied aussieht. Von Weboberfläche und App geteilt,
 * damit ein Lied am Rechner und am Telefon dasselbe Bild ergibt.
 *
 * Die Farben kommen aus Variablen, die die umgebende Seite setzt — so fügt
 * sich die Ansicht in helles und dunkles Umfeld ein, ohne hier zu wissen,
 * welches gerade gilt.
 */

.lb-ansicht {
  --lb-akkord: var(--akzent, #b4541f);
  --lb-text: var(--text, #1b1714);
  --lb-leise: var(--leise, #7a6f66);
  font-size: var(--lb-groesse, 1rem);
  line-height: 1.25;
  color: var(--lb-text);
}

.lb-abschnitt { margin: 0 0 1.4em; }

.lb-label {
  font-size: .72em;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--lb-leise);
  font-weight: 600;
  margin: 0 0 .5em;
}

/* Refrain bekommt eine Kante — beim Spielen sucht man ihn am häufigsten. */
.lb-refrain {
  border-left: 3px solid var(--lb-akkord);
  padding-left: .9em;
  margin-left: -.15em;
}

.lb-bruecke { font-style: italic; }
.lb-bruecke .lb-akk { font-style: normal; }

.lb-zeile {
  margin: 0 0 .25em;
  /* Die Zeile darf umbrechen, aber niemals innerhalb eines Akkord-Paares. */
  display: block;
}

/* Ein Akkord und die Silbe darunter gehören zusammen und wandern gemeinsam
 * in die nächste Zeile. Ohne das rutscht der Akkord von seiner Silbe weg,
 * sobald der Bildschirm schmal wird — der häufigste Fehler solcher Ansichten. */
.lb-paar {
  display: inline-block;
  vertical-align: bottom;
  white-space: pre;
}

.lb-akk {
  display: block;
  font-family: var(--mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: .82em;
  font-weight: 700;
  line-height: 1.35;
  color: var(--lb-akkord);
  min-height: 1.35em;
  white-space: pre;
}

/* Etwas Luft rechts vom Akkord. Sie wirkt nur dort, wo der Akkord breiter ist
 * als die Silbe darunter — also genau bei reinen Akkordzeilen ([Bm] [D] [Bm]),
 * wo die Namen sonst aneinanderkleben. Unter Text verschwindet sie, weil die
 * Silbe die Breite vorgibt. Die linke Kante rührt sich nie: der Akkord steht
 * weiter genau über seiner Silbe. Leere Akkordfelder bleiben ausgenommen,
 * sonst würden sie kurze Silben auseinanderziehen. */
.lb-akk:not(:empty) { padding-right: .5em; }

/* Als Schaltfläche muss der Akkord trotzdem wie Text aussehen. */
button.lb-akk {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  border-radius: 3px;
}
button.lb-akk:hover,
button.lb-akk:focus-visible { background: color-mix(in srgb, var(--lb-akkord) 16%, transparent); }

.lb-txt { display: block; white-space: pre; }

/* Ohne Akkorde wird der Text zu normalem Fließtext — sonst bleiben die
 * Lücken stehen, wo vorher die Akkorde waren. */
.lb-paar.lb-ohne { display: inline; }
.lb-paar.lb-ohne .lb-txt { display: inline; white-space: normal; }

.lb-hinweis {
  color: var(--lb-leise);
  font-style: italic;
  margin: 0 0 1em;
}

.lb-tab {
  font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: .8em;
  line-height: 1.35;
  overflow-x: auto;
  margin: 0;
  padding: .6em .7em;
  background: color-mix(in srgb, currentColor 5%, transparent);
  border-radius: 6px;
}

/* ---- Akkordkarte -------------------------------------------------------- */

.ak-karte { --griff-punkt: var(--akzent, #b4541f); --griff-schrift: #fff; }

.ak-name {
  font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 1.7rem;
  margin: 0;
  color: var(--akzent, #b4541f);
}

.ak-art { margin: .15em 0 1em; color: var(--leise, #7a6f66); font-size: .92rem; }

.ak-griffe {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding-bottom: .4rem;
  margin: 0 0 1.2rem;
}

.ak-griff { margin: 0; flex: 0 0 auto; text-align: center; }
.ak-griff svg { width: 108px; height: auto; display: block; }
.ak-griff figcaption {
  font-size: .68rem;
  color: var(--leise, #7a6f66);
  margin-top: .2em;
}

.ak-ueber {
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--leise, #7a6f66);
  margin: 1.1rem 0 .45rem;
  font-weight: 600;
}

.ak-toene { list-style: none; margin: 0; padding: 0; }
.ak-toene li {
  display: flex;
  align-items: baseline;
  gap: .7em;
  padding: .3em 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}
.ak-toene li:last-child { border-bottom: 0; }
.ak-ton {
  font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace);
  font-weight: 700;
  min-width: 2.4em;
  color: var(--akzent, #b4541f);
}
.ak-rolle { color: var(--leise, #7a6f66); font-size: .92rem; }

.ak-funktion { margin: 0 0 .3em; font-size: 1.02rem; }
.ak-stufe {
  font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace);
  font-weight: 700;
  background: color-mix(in srgb, var(--akzent, #b4541f) 15%, transparent);
  color: var(--akzent, #b4541f);
  padding: .08em .45em;
  border-radius: 4px;
  margin-right: .4em;
}
.ak-erklaerung { margin: 0; color: var(--leise, #7a6f66); font-size: .93rem; line-height: 1.5; }
.ak-leer { color: var(--leise, #7a6f66); font-style: italic; }

.ak-schrift {
  font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace);
  letter-spacing: .06em;
  opacity: .8;
}

/* ---- Akkordwahl (das geordnete Nachschlagewerk) ---------------------- */

.aw { margin: 0 0 1.4rem; }

.aw-titel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5em;
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--leise, #7a6f66);
  font-weight: 600;
  margin: 1.1rem 0 .4rem;
}
.aw-hinweis {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: .78rem;
  opacity: .85;
}

/* Waagerecht scrollen statt umbrechen: auf dem Telefon bleibt eine Familie
   damit eine Zeile, und man wischt sie durch. */
.aw-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.aw-toene { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .3rem; }

.aw-chip {
  flex: 0 0 auto;
  font: inherit;
  font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: .9rem;
  line-height: 1.25;
  padding: .35rem .7rem;
  border-radius: 9px;
  border: 1px solid var(--rand, #e6ddd2);
  background: var(--karte, #fff);
  color: var(--text, #1f1a16);
  cursor: pointer;
  text-align: center;
}
.aw-chip:active { background: var(--rand, #e6ddd2); }
.aw-chip.an {
  background: var(--akzent, #b4541f);
  border-color: var(--akzent, #b4541f);
  color: #fff;
}
.aw-breit { display: flex; flex-direction: column; align-items: center; min-width: 4.6rem; }
.aw-name { font-weight: 600; }
.aw-was {
  font-family: system-ui, sans-serif;
  font-size: .64rem;
  opacity: .7;
  margin-top: .1em;
  white-space: nowrap;
}
.aw-chip.an .aw-was { opacity: .9; }

.aw-schalter {
  margin-left: auto;
  font: inherit;
  font-size: .7rem;
  padding: .15rem .5rem;
  border-radius: 999px;
  border: 1px solid var(--rand, #e6ddd2);
  background: none;
  color: var(--leise, #7a6f66);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}

.aw-filter { margin: 0 0 .2rem; }
.aw-suche {
  width: 100%;
  max-width: 22rem;
  font: inherit;
  font-size: .9rem;
  padding: .45rem .7rem;
  border-radius: 9px;
  border: 1px solid var(--rand, #e6ddd2);
  background: var(--karte, #fff);
  color: var(--text, #1f1a16);
}
.aw-leer { color: var(--leise, #7a6f66); font-size: .9rem; font-style: italic; }

/* ---- Skalenkarte -------------------------------------------------------- */

.sk-karte {
  --gb-grundton: var(--akzent, #b4541f);
  --gb-ton: var(--text, #1f1a16);
  --gb-papier: var(--karte, #fff);
}

/* Die Töne der Leiter, jeder mit seiner Stufe darunter. */
.sk-toene {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0 0 1rem;
}
.sk-ton {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 2.6rem;
  padding: .3rem .45rem;
  border: 1px solid var(--rand, #e6ddd2);
  border-radius: 8px;
  background: var(--karte, #fff);
}
.sk-ton-name {
  font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace);
  font-weight: 700;
}
.sk-ton-stufe { font-size: .66rem; color: var(--leise, #7a6f66); margin-top: .1em; }
/* Der Grundton bekommt Farbe: an ihm richtet sich beim Üben alles aus. */
.sk-grund {
  background: var(--akzent, #b4541f);
  border-color: var(--akzent, #b4541f);
  color: var(--on-akzent, #fff);
}
.sk-grund .sk-ton-stufe { color: inherit; opacity: .85; }

.sk-schalter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .4rem; }
.sk-gruppe {
  display: flex;
  border: 1px solid var(--rand, #e6ddd2);
  border-radius: 999px;
  overflow: hidden;
}
.sk-um {
  font: inherit;
  font-size: .78rem;
  padding: .3rem .8rem;
  border: 0;
  background: var(--karte, #fff);
  color: var(--leise, #7a6f66);
  cursor: pointer;
}
.sk-um.an { background: var(--akzent, #b4541f); color: var(--on-akzent, #fff); font-weight: 600; }

/* Ein Griffbrett ist breiter als ein Telefon — es scrollt in seinem eigenen
   Kasten, statt die ganze Seite waagerecht zu verschieben. */
.sk-brett, .sk-lage {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.gb-svg { display: block; max-width: none; }

.sk-erklaerung { margin: 0 0 .8rem; }

.sk-lagen { display: flex; flex-direction: column; gap: 1.1rem; }
.sk-lage { margin: 0; }
.sk-lage-titel {
  font-size: .8rem;
  font-weight: 600;
  margin: 0 0 .25rem;
}
.sk-lage-wo { font-weight: 400; color: var(--leise, #7a6f66); font-size: .74rem; }

/* ---- Skalen in der Akkordkarte ------------------------------------------ */

.ak-skalen { display: flex; flex-direction: column; gap: .4rem; }
.ak-skala {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  width: 100%;
  font: inherit;
  text-align: left;
  padding: .5rem .7rem;
  border: 1px solid var(--rand, #e6ddd2);
  border-radius: 10px;
  background: var(--karte, #fff);
  color: var(--text, #1f1a16);
  cursor: pointer;
}
.ak-skala:active { background: var(--rand, #e6ddd2); }
.ak-skala-name { font-weight: 600; }
.ak-skala-hinweis { font-size: .76rem; color: var(--leise, #7a6f66); }
/* Die Brücke zum Quintenzirkel: leiser als der Hinweis, damit sie nicht mit
   dem konkurriert, was über den Akkord zu sagen ist. */
.ak-skala-gleich {
  font-size: .72rem;
  color: var(--leise, #7a6f66);
  opacity: .8;
  font-style: italic;
}

/* ---- Karte „womit mitspielen" ------------------------------------------- */

.jam-titel { font-size: 1.15rem; margin: 0 0 .2rem; }
.jam-tonart { margin: 0 0 1rem; color: var(--leise, #7a6f66); font-size: .9rem; }
.jam-tonart strong { color: var(--akzent, #b4541f); font-family: var(--mono, monospace); }
.jam-unsicher { font-style: italic; }

.jam-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.jam-skala {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  width: 100%;
  font: inherit;
  text-align: left;
  padding: .55rem .7rem;
  border: 1px solid var(--rand, #e6ddd2);
  border-radius: 10px;
  background: var(--karte, #fff);
  color: var(--text, #1f1a16);
  cursor: pointer;
}
.jam-skala:active { background: var(--rand, #e6ddd2); }
.jam-name { font-weight: 600; }
.jam-urteil { font-size: .78rem; line-height: 1.35; }
.jam-gut { color: var(--leise, #7a6f66); }
/* „Klemmt bei E7" ist keine Fehlermeldung, sondern ein Hinweis fürs Spielen —
   deshalb sichtbar, aber nicht rot. */
.jam-achtung { color: var(--akzent, #b4541f); }

/* ---- Quintenzirkel ------------------------------------------------------ */

.qz-svg { display: block; width: 100%; max-width: 22rem; margin: 0 auto; height: auto; }
.qz-feld {
  fill: var(--karte, #fff);
  stroke: var(--rand, #e6ddd2);
  stroke-width: 1;
  cursor: pointer;
}
.qz-feld.qz-moll { fill: color-mix(in srgb, currentColor 6%, var(--karte, #fff)); }
.qz-feld:hover { fill: color-mix(in srgb, var(--akzent, #b4541f) 14%, var(--karte, #fff)); }
/* Spezifität mit Absicht: .qz-moll setzt seine eigene Füllung, die
   Hervorhebung muss darüber liegen — sonst bleibt der Innenring blass. */
.qz-feld.qz-nah { fill: color-mix(in srgb, var(--akzent, #b4541f) 12%, var(--karte, #fff)); }
.qz-feld.qz-an { fill: var(--akzent, #b4541f); }

.qz-schrift {
  font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace);
  fill: var(--text, #1f1a16);
  pointer-events: none;
}
.qz-dur-schrift { font-size: 15px; font-weight: 700; }
.qz-moll-schrift { font-size: 12px; opacity: .8; }
.qz-schrift-an { fill: var(--on-akzent, #fff); }
.qz-vorzeichen {
  font-size: 8.5px;
  fill: var(--leise, #7a6f66);
  pointer-events: none;
}
.qz-mitte {
  font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 22px;
  font-weight: 700;
  fill: var(--akzent, #b4541f);
}
.qz-mitte-klein { font-size: 11px; fill: var(--leise, #7a6f66); }

.qz-satz { margin: .8rem 0 0; font-size: .9rem; line-height: 1.5; }

.qz-stufen { display: flex; flex-wrap: wrap; gap: .35rem; }
.qz-stufe {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 3.4rem;
  font: inherit;
  padding: .3rem .5rem;
  border: 1px solid var(--rand, #e6ddd2);
  border-radius: 9px;
  background: var(--karte, #fff);
  color: var(--text, #1f1a16);
  cursor: pointer;
}
.qz-stufe:active { background: var(--rand, #e6ddd2); }
.qz-stufe-nr {
  font-size: .64rem;
  color: var(--leise, #7a6f66);
  font-family: var(--mono, monospace);
}
.qz-stufe-akk { font-family: var(--mono, monospace); font-weight: 700; }