/* Inhaltsseiten — baut auf stil.css auf, ergänzt nur, was dort fehlt. */

.inhalt{padding-block:1rem clamp(2rem,5vw,3.5rem); max-width:52rem}
.brotkrumen{font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
            color:var(--tinte-leise); margin:0 0 1rem}
.brotkrumen a{color:var(--siegel); text-decoration:none}
.brotkrumen a:hover{text-decoration:underline}

.inhalt h1{font-family:var(--serif); font-weight:600;
           font-size:clamp(2rem,5.5vw,3.2rem); line-height:1.08;
           margin:0 0 1rem; text-wrap:balance}
.anriss{font-family:var(--serif); font-size:clamp(1.05rem,2.2vw,1.3rem);
        line-height:1.5; color:var(--tinte-leise); max-width:46ch; margin:0 0 2.5rem}

.block{border-top:1px solid var(--linie); padding-block:1.75rem 0; margin-bottom:1.75rem}
.block h2{font-family:var(--serif); font-weight:600; font-size:1.3rem;
          margin:0 0 1rem; line-height:1.2}
.zweispalt{display:grid; gap:2rem; grid-template-columns:1fr}
@media (min-width:40rem){.zweispalt{grid-template-columns:1fr 1fr}}

/* Tonreihe: Stufennummer über dem Namen */
.tonreihe{list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; padding:0; margin:0 0 1.25rem}
.tonreihe li{display:flex; flex-direction:column; align-items:center; gap:.15rem;
             border:1px solid var(--linie); border-radius:2px;
             padding:.5rem .7rem; min-width:3.2rem}
.tonreihe .stufe{font-size:.68rem; color:var(--tinte-leise); font-variant-numeric:tabular-nums}
.tonreihe .tonname{font-family:var(--serif); font-size:1.25rem; font-weight:600}
.tonreihe li:first-child{border-color:var(--siegel)}
.tonreihe li:first-child .tonname{color:var(--siegel)}

.kennzahl{margin:0; font-size:.95rem}
.kennzahl strong{font-weight:600}

.akkordtoene{list-style:none; padding:0; margin:0; display:grid; gap:0}
.akkordtoene li{display:flex; justify-content:space-between; align-items:baseline;
                gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--linie)}
.akkordtoene li:first-child{border-top:1px solid var(--linie)}
.akkordtoene .tonname{font-family:var(--serif); font-size:1.2rem; font-weight:600}
.akkordtoene .intervall{color:var(--tinte-leise); font-size:.9rem; text-align:right}

/* Zeichnungen */
/* Klaviatur und Griffbrett ebenfalls auf festem Grund — sie zeigen echte
   Gegenstaende, und die wechseln nachts nicht die Farbe. */
.tastatur, .griffbild{display:block; width:100%; height:auto}
.tastatur{max-width:22rem; background:var(--notenpapier);
  border:1px solid var(--notenrand); border-radius:3px; padding:.5rem}
.griffbild{max-width:15rem; background:var(--notenpapier);
  border:1px solid var(--notenrand); border-radius:3px; padding:.4rem .3rem}
.bundzahl,.saitenname{font-family:var(--sans); font-size:9px; fill:var(--tinte-leise)}

.grosszahl{font-family:var(--serif); font-size:clamp(2.4rem,7vw,3.6rem); line-height:1;
           margin:0 0 .4rem; font-variant-numeric:tabular-nums}
.grosszahl span{font-size:.35em; color:var(--tinte-leise); letter-spacing:.08em}

/* Übersichten */
.uebersicht{list-style:none; padding:0; margin:0;
            display:grid; gap:.4rem; grid-template-columns:repeat(auto-fill,minmax(8rem,1fr))}
.uebersicht a{display:block; padding:.7rem .8rem; border:1px solid var(--linie);
              border-radius:2px; text-decoration:none; font-family:var(--serif);
              font-size:1.05rem}
.uebersicht a:hover{border-color:var(--siegel); color:var(--siegel)}

.verwandt{border-top:1px solid var(--linie); padding-top:1.5rem; margin-top:2.5rem}
.verwandt h2{font-family:var(--serif); font-size:1.1rem; margin:0 0 .7rem}
.verwandt ul{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.4rem}
.verwandt a{display:flex; align-items:center; min-height:44px;
            padding:.4rem .75rem; border:1px solid var(--linie);
            border-radius:2px; text-decoration:none; font-size:.92rem; color:var(--tinte-leise)}
.verwandt a:hover{border-color:var(--siegel); color:var(--siegel)}

/* Der Hinweis auf die App — der eigentliche Zweck der Seite */
.apphinweis{background:var(--papier-tief); border-radius:3px;
            padding:clamp(1.5rem,4vw,2.25rem); margin:2.5rem 0 1.5rem}
.apphinweis h2{font-family:var(--serif); font-weight:600; font-size:clamp(1.2rem,3vw,1.6rem);
               margin:0 0 .6rem; line-height:1.2}
.apphinweis p{margin:0 0 1.25rem; color:var(--tinte-leise); max-width:44ch}
.knopf{display:inline-flex; align-items:center; justify-content:center;
       min-height:44px;   /* Daumenmass, nicht Zeigermass */
       background:var(--siegel); color:var(--papier);
       text-decoration:none; padding:.65rem 1.4rem; border-radius:2px;
       font-weight:500; font-size:.95rem}
.knopf:hover{opacity:.88}
/* display:inline-flex schlaegt das hidden-Attribut — ohne diese Zeile stand
   der Metronom-Verweis des BPM-Tappers schon vor dem ersten Klopfen da. */
.knopf[hidden]{display:none}

.quellhinweis{font-size:.82rem; color:var(--tinte-leise); max-width:56ch; margin:0}

/* ── Werkzeuge ─────────────────────────────────────── */
.werkzeug{border:1px solid var(--linie); border-radius:3px;
          padding:clamp(1.25rem,4vw,2rem); margin:0 0 1.5rem}
.reihe{display:flex; flex-wrap:wrap; gap:.6rem; align-items:flex-end; margin:1rem 0}
.feld{display:flex; flex-direction:column; gap:.25rem; font-size:.8rem;
      letter-spacing:.06em; text-transform:uppercase; color:var(--tinte-leise)}
.feld select{font:inherit; font-size:1rem; text-transform:none; letter-spacing:0;
             padding:.5rem .6rem; border:1px solid var(--linie); border-radius:2px;
             background:var(--papier); color:var(--tinte); min-height:44px}
.schieber{width:100%; margin:.5rem 0 0; accent-color:var(--siegel); height:44px}
.knopf.gross{font-size:1.1rem; padding:1rem 2.5rem}
.knopf.leer{background:none; color:var(--tinte-leise); border:1px solid var(--linie)}
.tempowort{font-family:var(--serif); font-size:1.2rem; color:var(--siegel); margin:0 0 .5rem}

.punkte{display:flex; gap:.4rem; margin-top:1rem}
.punkte span{width:.75rem; height:.75rem; border-radius:50%; border:1px solid var(--linie)}
.punkte span.an{background:var(--siegel); border-color:var(--siegel)}

/* ── Metronom ──────────────────────────────────────────
   Das Rad ist Anzeige, Einsteller und Startknopf in einem — wie beim
   mechanischen Metronom, wo der Schieber am Pendel beides ist. Es ist
   bewusst gross: waehrend man spielt, schaut man von zwei Metern hin,
   nicht von dreissig Zentimetern. */
.metronom{text-align:center}
.mt-scheibe{position:relative; width:min(86vw,21rem); aspect-ratio:1; margin:.25rem auto 1.25rem}
.mt-rad{position:absolute; inset:0; width:100%; height:100%;
        touch-action:none;         /* sonst scrollt die Seite beim Ziehen */
        cursor:grab; -webkit-tap-highlight-color:transparent}
.mt-rad:active{cursor:grabbing}
.mt-bahn{fill:none; stroke:var(--linie); stroke-width:1.5}
.mt-bogen{fill:none; stroke:var(--siegel); stroke-width:3; stroke-linecap:round}
.mt-striche line{stroke:var(--linie); stroke-width:1}
.mt-striche line.gross{stroke:var(--tinte-leise); stroke-width:1.6}
.mt-zahlen text{font-family:var(--sans); font-size:9px; fill:var(--tinte-leise);
                text-anchor:middle; font-variant-numeric:tabular-nums}
.mt-griff{fill:var(--siegel); stroke:var(--papier); stroke-width:2.5}

/* Die Mitte zeigt nur an. Sie war bis 11.09.2026 selbst der Startknopf —
   und wurde als solcher nicht erkannt: ein Kreis mit einer Zahl darin sieht
   aus wie eine Anzeige, weil er eine ist. Jetzt hat der Start seinen eigenen
   Knopf darunter, und die Mitte laesst Zeigerereignisse durch, damit man die
   Scheibe ueberall anfassen kann statt nur am Rand. */
.mt-mitte{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:58%; aspect-ratio:1; border-radius:50%; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.05rem;
  background:var(--papier); color:var(--tinte);
  border:1px solid var(--linie); box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.mt-mitte::after{
  content:""; position:absolute; inset:-7px; border-radius:50%;
  border:2px solid var(--siegel); opacity:0; pointer-events:none;
}
.mt-mitte.puls::after{animation:mtring .3s ease-out}
.mt-mitte.puls-stark::after{animation:mtring .42s ease-out; border-width:3px}
@keyframes mtring{
  from{opacity:.9; transform:scale(.97)}
  to{opacity:0; transform:scale(1.16)}
}
@media (prefers-reduced-motion:reduce){
  .mt-mitte.puls::after,.mt-mitte.puls-stark::after{animation:none; opacity:.5}
}
.mt-zahl{font-family:var(--serif); font-size:clamp(2.6rem,13vw,3.6rem); line-height:.95;
         font-variant-numeric:tabular-nums; font-weight:600}
.mt-einheit{font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
            color:var(--tinte-leise); margin-top:.15rem}
.mt-wort{font-family:var(--serif); font-size:1.02rem; color:var(--siegel); margin-top:.3rem}

/* Der wichtigste Knopf der Seite, und deshalb der groesste: volle Breite,
   gefuellt, mit Zeichen. Er sagt, was als Naechstes passiert (Dreieck =
   losspielen, Viereck = anhalten), nicht was gerade ist. */
.mt-start{
  display:flex; align-items:center; justify-content:center; gap:.7rem;
  width:100%; min-height:64px; margin:1.1rem 0 0; padding:0 1.5rem;
  font:inherit; font-size:1.2rem; letter-spacing:.03em; cursor:pointer;
  border-radius:3px; border:2px solid var(--siegel);
  background:var(--siegel); color:var(--papier);
}
.mt-start:hover{opacity:.92}
.metronom.laeuft .mt-start{background:var(--papier); color:var(--siegel)}
.mt-start-zeichen{
  width:0; height:0; border-left:16px solid currentColor;
  border-top:11px solid transparent; border-bottom:11px solid transparent;
}
.metronom.laeuft .mt-start-zeichen{
  width:17px; height:17px; border:0; background:currentColor; border-radius:1px;
}

/* Das Pendel — die sichtbare Seite des Metronoms. Es schwingt auch dann,
   wenn kein Ton kommt: wer im Ensemble ueber Kopfhoerer spielt, im
   Krankenhaus uebt oder schlecht hoert, hat hier ein vollstaendiges
   Metronom und keine halbe Sache. */
.mt-pendel{
  position:relative; height:64px; margin:1rem 0 0; border-radius:3px;
  border:1px solid var(--linie); background:var(--papier-tief);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.mt-bahn2{position:absolute; left:12%; right:12%; height:2px; background:var(--linie)}
.mt-gewicht{
  position:relative; width:34px; height:34px; border-radius:50%;
  background:var(--siegel); box-shadow:0 1px 4px rgba(0,0,0,.18);
  will-change:transform;
}
/* Der Blitz macht das ganze Feld hell, nicht nur einen Punkt — sichtbar aus
   drei Metern, mit dem Instrument in der Hand. */
.mt-pendel::after{
  content:""; position:absolute; inset:0; background:var(--siegel);
  opacity:0; pointer-events:none;
}
.mt-pendel.blitz::after{animation:mtblitz .18s ease-out}
.mt-pendel.blitz-stark::after{animation:mtblitz-stark .26s ease-out}
@keyframes mtblitz{from{opacity:.16} to{opacity:0}}
@keyframes mtblitz-stark{from{opacity:.55} to{opacity:0}}
.metronom.ohne-bild .mt-pendel{display:none}
.metronom.ohne-ton #mt-klangfeld{opacity:.4; pointer-events:none}

.mt-tempo{display:flex; gap:.6rem; justify-content:center; align-items:center}
.mt-rund{width:56px; height:56px; border-radius:50%; font:inherit; font-size:1.5rem;
         line-height:1; background:var(--papier); color:var(--tinte);
         border:1px solid var(--linie); cursor:pointer}
.mt-rund:hover{border-color:var(--siegel); color:var(--siegel)}
.mt-klopf{min-height:56px; min-width:8rem; padding:0 1.4rem; border-radius:2px;
          font:inherit; font-size:.95rem; letter-spacing:.04em; cursor:pointer;
          background:var(--papier); color:var(--tinte); border:1px solid var(--linie)}
.mt-klopf.getippt{background:var(--siegel); color:var(--papier); border-color:var(--siegel)}
.mt-uhr{min-height:1.2rem; margin:.8rem 0 0; font-size:.82rem; color:var(--tinte-leise);
        font-variant-numeric:tabular-nums}

/* Ein Schlag je Feld. Antippen wechselt betont → normal → stumm; auch die
   Eins darf stumm sein, denn genau die weglassen ist eine Uebung. */
.mt-schlaege{display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin:1rem 0 .4rem}
.mt-schlag{width:44px; height:44px; border-radius:2px; font:inherit; font-size:.9rem;
           cursor:pointer; background:var(--papier); color:var(--tinte-leise);
           border:1px solid var(--linie); font-variant-numeric:tabular-nums;
           transition:transform .06s}
.mt-schlag.s2{background:var(--siegel); border-color:var(--siegel); color:var(--papier);
              font-weight:600}
.mt-schlag.s0{border-style:dashed; color:var(--linie)}
.mt-schlag.jetzt{box-shadow:inset 0 0 0 2px var(--siegel); transform:scale(1.08)}
.mt-schlag.s2.jetzt{box-shadow:inset 0 0 0 2px var(--papier)}
.mt-hinweis{font-size:.78rem; color:var(--tinte-leise); margin:0 0 1.25rem}

.mt-felder{display:grid; gap:1.1rem; text-align:left; margin-top:1.5rem;
           border-top:1px solid var(--linie); padding-top:1.5rem}
@media (min-width:34rem){.mt-felder{grid-template-columns:1fr 1fr}}
.mt-feld{display:flex; flex-direction:column; gap:.4rem}
.mt-etikett{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
            color:var(--tinte-leise)}
.mt-schalter{display:flex; flex-wrap:wrap; gap:.3rem}
.mt-schalter button{min-width:44px; min-height:44px; padding:0 .7rem; font:inherit;
                    font-size:.92rem; cursor:pointer; border-radius:2px;
                    background:var(--papier); color:var(--tinte-leise);
                    border:1px solid var(--linie)}
.mt-schalter button[aria-pressed="true"]{background:var(--tinte); color:var(--papier);
                                         border-color:var(--tinte)}
.mt-noten button{font-size:1.15rem; line-height:1}
.mt-felder .schieber{height:44px; margin:0}

.mt-steigern{margin-top:1.5rem; border-top:1px solid var(--linie); padding-top:1rem;
             text-align:left}
.mt-steigern summary{cursor:pointer; font-family:var(--serif); font-size:1.05rem;
                     min-height:44px; display:flex; align-items:center}
.mt-steigern .mt-hinweis{margin:.2rem 0 .9rem; max-width:44ch}
.mt-steigerzeile{display:flex; flex-wrap:wrap; gap:.9rem; align-items:center;
                 font-size:.9rem; color:var(--tinte-leise)}
.mt-an-aus{display:flex; align-items:center; gap:.5rem; min-height:44px; cursor:pointer}
.mt-an-aus input{width:22px; height:22px; accent-color:var(--siegel)}
.mt-zahlfeld{display:flex; align-items:center; gap:.4rem; min-height:44px}
.mt-zahlfeld input{width:4.2rem; min-height:44px; font:inherit; text-align:center;
                   padding:.3rem; border:1px solid var(--linie); border-radius:2px;
                   background:var(--papier); color:var(--tinte)}

/* ── Klaviatur zum Spielen ─────────────────────────────
   Feste Tastenbreite statt anteiliger: zwei Oktaven auf ein Handy gequetscht
   ergaeben 25 px je Taste, und ein Klavier, auf dem man danebengreift, ist
   keines. Stattdessen schiebt sich die Klaviatur seitlich — eine echte ist
   auch laenger als der Ausschnitt, in dem man gerade spielt. */
.klaviatur{padding-left:0; padding-right:0}
.kl-bahn{
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  padding:0 clamp(1.25rem,4vw,2rem) .4rem;
}
.kl-tasten{position:relative; height:190px; display:flex; touch-action:pan-x}
.kl-weiss,.kl-schwarz{
  font:inherit; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background-color .04s;
}
/* Eine Klaviatur dreht sich nicht mit dem Nachtmodus: sonst werden aus
   weissen Tasten schwarze, und das Bild luegt. Dieselbe Regel wie beim
   Notenblatt. */
.kl-weiss{
  flex:0 0 44px; width:44px; height:190px;
  background:var(--notenpapier,#FBFAF7); color:var(--notentinte,#16181C);
  border:1px solid var(--notentinte,#16181C); border-radius:0 0 3px 3px;
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:.5rem;
}
.kl-weiss + .kl-weiss{margin-left:-1px}
.kl-weiss span{font-size:.68rem; letter-spacing:.02em; opacity:.55; pointer-events:none}
.kl-schwarz{
  position:absolute; top:0; width:26px; height:118px; z-index:2;
  background:var(--notentinte,#16181C); border:1px solid var(--notentinte,#16181C);
  border-radius:0 0 3px 3px;
}
.kl-weiss.klingt{background:var(--siegel)}
.kl-weiss.klingt span{color:var(--notenpapier,#FBFAF7); opacity:.9}
.kl-schwarz.klingt{background:var(--siegel); border-color:var(--siegel)}
.klaviatur.ohne-namen .kl-weiss span{display:none}

.kl-leiste{
  display:flex; flex-wrap:wrap; gap:.6rem; align-items:center;
  padding:1rem clamp(1.25rem,4vw,2rem) 0;
}
.kl-oktavwahl{display:flex; align-items:center; gap:.5rem; margin-right:auto}
.kl-oktavname{font-family:var(--serif); font-size:1.1rem; min-width:2.6rem; text-align:center}
.kl-schalter{
  min-height:44px; padding:0 1rem; font:inherit; font-size:.92rem; cursor:pointer;
  border-radius:2px; border:1px solid var(--linie);
  background:var(--papier); color:var(--tinte-leise);
}
.kl-schalter[aria-pressed="true"]{background:var(--tinte); color:var(--papier); border-color:var(--tinte)}
.kl-gespielt{
  padding:0 clamp(1.25rem,4vw,2rem); margin:1rem 0 0; min-height:1.6rem;
  font-family:var(--serif); font-size:1.15rem; letter-spacing:.06em; word-spacing:.3em;
}
.klaviatur .mt-hinweis{padding:0 clamp(1.25rem,4vw,2rem); text-align:left; margin-top:.4rem}

/* Akkord erkennen: dieselben Tasten, aber sie bleiben gedrueckt. */
.kl-weiss.gewaehlt{background:var(--siegel)}
.kl-weiss.gewaehlt span{color:var(--notenpapier,#FBFAF7); opacity:.9}
.kl-schwarz.gewaehlt{background:var(--siegel); border-color:var(--siegel)}
.af-name{
  padding:0 clamp(1.25rem,4vw,2rem); margin:1.2rem 0 .1rem; min-height:2.6rem;
  font-family:var(--serif); font-size:clamp(2rem,7vw,2.8rem); line-height:1;
  font-weight:600; color:var(--siegel);
}
.af-mehr{padding:0 clamp(1.25rem,4vw,2rem); margin:0 0 .4rem;
         font-size:.95rem; color:var(--tinte-leise); min-height:1.4rem}
.af-toene{padding:0 clamp(1.25rem,4vw,2rem); margin:0;
          font-family:var(--serif); font-size:1.05rem; letter-spacing:.05em;
          word-spacing:.3em; color:var(--tinte-leise); min-height:1.5rem}

/* Stimmumfang */
.su-jetzt{font-family:var(--serif); font-size:2.2rem; line-height:1; margin:.2rem 0 1rem;
          min-height:2.2rem; color:var(--tinte-leise); font-variant-numeric:tabular-nums}
.su-strecke{position:relative; height:14px; border-radius:7px; background:var(--papier-tief);
            border:1px solid var(--linie); margin:0 0 1.2rem; overflow:hidden}
.su-balken{position:absolute; top:0; bottom:0; left:0; width:0; background:var(--siegel)}
.su-werte{display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem; margin:0 0 .8rem}
.su-werte dt{font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
             color:var(--tinte-leise); margin:0 0 .25rem}
.su-werte dd{margin:0; font-family:var(--serif); font-size:1.9rem; line-height:1; font-weight:600}
.su-spanne{font-size:1rem; margin:0 0 .2rem}
.su-lage{font-family:var(--serif); font-size:1.15rem; color:var(--siegel); margin:0}

/* Gehoerbildung */
.gh-frage{font-family:var(--serif); font-size:clamp(1.5rem,5vw,2.1rem); line-height:1.2;
          margin:1.2rem 0 .2rem; min-height:2.4rem; color:var(--siegel)}
.gh-stand{font-size:.9rem; color:var(--tinte-leise); font-variant-numeric:tabular-nums;
          margin-left:auto}
.gh-antworten{display:grid; gap:.5rem; margin-top:1.2rem;
              grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr))}
.gh-antwort{min-height:52px; font:inherit; font-size:.98rem; cursor:pointer;
            border-radius:2px; border:1px solid var(--linie);
            background:var(--papier); color:var(--tinte); padding:.4rem .7rem}
.gh-antwort:hover:not(:disabled){border-color:var(--siegel); color:var(--siegel)}
.gh-antwort.richtig{background:var(--siegel); border-color:var(--siegel); color:var(--papier)}
.gh-antwort.falsch{border-style:dashed; color:var(--tinte-leise); opacity:.55}
.gh-antwort:disabled{cursor:default}

/* ── Notenlexikon ──────────────────────────────────────
   Das Zeichen gross und zum Kopieren: 9.900 Suchen im Monat heissen
   woertlich "music symbols copy and paste". Wer das sucht, will keinen
   Aufsatz, sondern ein Zeichen in der Zwischenablage. */
.lex-zeichen{text-align:center}
.lex-gross{
  font-size:clamp(4rem,18vw,7rem); line-height:1.1; margin:.2rem 0 .6rem;
  color:var(--tinte);
}
.lex-kopieren{
  min-height:44px; padding:0 1.3rem; font:inherit; font-size:.95rem; cursor:pointer;
  border-radius:2px; border:1px solid var(--linie);
  background:var(--papier); color:var(--tinte); margin:0 0 .8rem;
}
.lex-kopieren:hover{border-color:var(--siegel); color:var(--siegel)}
.lex-kopieren.fertig{background:var(--siegel); color:var(--papier); border-color:var(--siegel)}
.lex-zeichen .leise{max-width:44ch; margin-inline:auto}

.lex-raster{display:grid; gap:.5rem;
            grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}
.lex-karte{
  display:flex; flex-direction:column; gap:.15rem; min-height:44px;
  padding:.75rem .85rem; border:1px solid var(--linie); border-radius:2px;
  text-decoration:none; color:inherit;
}
.lex-karte:hover{border-color:var(--siegel)}
.lex-karte strong{font-family:var(--serif); font-size:1.05rem; font-weight:600}
.lex-karte span{font-size:.82rem; color:var(--tinte-leise); line-height:1.35}
.lex-mini{font-size:1.4rem; line-height:1; margin-bottom:.15rem; color:var(--tinte-leise)}

/* Grifftabellen: Ventile, Zug, Loecher */
.ventilbild{height:26px; width:auto; display:block}
.zugbild{height:22px; width:120px; display:block}
.lochbild{height:auto; width:44px; display:block}
.grifftabelle td{vertical-align:middle}

/* Quintenzirkel */
.zirkelwerk{display:grid; gap:1.5rem; grid-template-columns:1fr; align-items:center}
@media (min-width:44rem){.zirkelwerk{grid-template-columns:1fr 14rem}}
/* Der Quintenzirkel hat 24 Felder auf einer Scheibe. Auf 320 px kommt der
   aeussere Ring auf 39 px Feldhoehe, der innere auf 33 — beides unter dem
   Daumenmass. Auf dem Handy darf die Scheibe deshalb ueber die Textspalte
   hinaus bis an den Rand: der aeussere Ring erreicht damit 44 px. Der
   innere bleibt kleiner; das laesst sich ohne andere Darstellung nicht
   loesen und ist hier so festgehalten, statt es zu verschweigen. */
.zirkel{width:100%; max-width:20rem; height:auto; margin:0 auto; display:block}
@media (max-width:30rem){
  .zirkel{max-width:none; width:calc(100% + 2 * clamp(1.25rem,5vw,3rem) - 1.5rem);
          margin-inline:calc(-1 * clamp(1.25rem,5vw,3rem) + .75rem)}
}
.zirkel .zfeld circle{fill:var(--papier); stroke:var(--linie); stroke-width:1.2;
                     transition:fill .12s, stroke .12s}
.zirkel .zfeld text{font-family:var(--serif); font-size:13px; fill:var(--tinte)}
.zirkel .innen text{font-size:11px; fill:var(--tinte-leise)}
.zirkel .zfeld{cursor:pointer}
.zirkel .zfeld:hover circle{stroke:var(--siegel)}
.zirkel .zfeld.gewaehlt circle{fill:var(--siegel); stroke:var(--siegel)}
.zirkel .zfeld.gewaehlt text{fill:var(--papier)}
.zirkelmitte{font-size:9px; fill:var(--tinte-leise); letter-spacing:.1em; text-transform:uppercase}
.zirkelinfo .zi-name{font-family:var(--serif); font-size:1.5rem; margin:0 0 .3rem}
.zirkelinfo .zi-toene{font-family:var(--serif); margin:0 0 .3rem}
.zirkelinfo .zi-vz{color:var(--tinte-leise); font-size:.9rem; margin:0 0 .8rem}
.zi-mehr{color:var(--siegel); text-decoration:none; font-size:.9rem;
         display:inline-flex; align-items:center; min-height:44px}

/* Stimmgerät */
.stimmknopf{font:inherit; font-size:.9rem; padding:.6rem 1rem; min-height:44px;
            border:1px solid var(--linie); border-radius:2px; background:var(--papier);
            color:var(--tinte-leise); cursor:pointer}
.stimmknopf.gewaehlt{border-color:var(--siegel); color:var(--siegel)}
.saitenzeile{font-family:var(--serif); font-size:1.1rem; margin:.5rem 0 1rem}
.nadelbahn{position:relative; height:2.6rem; border:1px solid var(--linie);
           border-radius:2px; overflow:hidden; margin:.5rem 0}
.nadelbahn .mitte{position:absolute; left:50%; top:0; bottom:0; width:2px;
                  background:var(--linie); transform:translateX(-50%)}
.nadel{position:absolute; left:50%; top:.4rem; bottom:.4rem; width:4px;
       background:var(--siegel); border-radius:2px; transition:transform .08s linear}
.nadel.sauber{background:var(--gruen,#2F6B4F)}
.cent{font-variant-numeric:tabular-nums; color:var(--tinte-leise); margin:0}

/* Transponierer */
#tr textarea{width:100%; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
             font-size:.95rem; line-height:1.7; padding:.8rem; border:1px solid var(--linie);
             border-radius:2px; background:var(--papier); color:var(--tinte); resize:vertical}
.ergebnis{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.95rem;
          line-height:1.7; background:var(--papier-tief); padding:.8rem; border-radius:2px;
          overflow-x:auto; margin:1rem 0 0; white-space:pre-wrap}

/* Grifftabelle */
.grifftabelle{width:100%; border-collapse:collapse; font-size:.95rem}
.grifftabelle th{text-align:left; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
                 color:var(--tinte-leise); border-bottom:1.5px solid var(--linie); padding:.5rem .4rem}
.grifftabelle td{border-bottom:1px solid var(--linie); padding:.55rem .4rem}
.tonzelle{font-family:var(--serif); font-size:1.05rem; font-weight:600; width:5rem}
.ventil{display:inline-flex; align-items:center; justify-content:center;
        width:1.55rem; height:1.55rem; border-radius:50%; border:1px solid var(--linie);
        font-size:.75rem; color:var(--tinte-leise); margin-right:.25rem}
.ventil.an{background:var(--siegel); border-color:var(--siegel); color:var(--papier)}

/* Werkzeugliste */
.werkzeugliste{list-style:none; padding:0; margin:0; display:grid; gap:.6rem}
@media (min-width:40rem){.werkzeugliste{grid-template-columns:1fr 1fr}}
.werkzeugliste a{display:flex; flex-direction:column; gap:.3rem; padding:1rem 1.1rem;
                 border:1px solid var(--linie); border-radius:2px; text-decoration:none}
.werkzeugliste a:hover{border-color:var(--siegel)}
.werkzeugliste strong{font-family:var(--serif); font-size:1.15rem; font-weight:600}
.werkzeugliste span{font-size:.88rem; color:var(--tinte-leise)}

/* ── Notenbild ───────────────────────────────────────
   Verovio setzt in ein SVG mit viewBox und faerbt die Striche mit
   currentColor — deshalb traegt der Rahmen die Tintenfarbe und das Bild
   passt sich dem hellen wie dem dunklen Papier an, ohne zweite Fassung. */
/* Das Notenbild liegt auf einem Blatt, nicht auf der Seite. Verovio und
   LilyPond faerben beide ueber currentColor — die Farbe hier gesetzt, und
   beide folgen. Im hellen Modus faellt das Blatt kaum auf, im dunklen liegt
   es wie Papier auf dem Tisch. Vorher drehte sich der Notensatz mit dem
   Nachtmodus um und war weiss auf schwarz. */
.notenbild{
  color:var(--notentinte); background:var(--notenpapier);
  border:1px solid var(--notenrand); border-radius:3px;
  padding:.75rem .9rem; margin:0 0 1rem; max-width:28rem;
}
.notenbild svg{display:block; width:100%; height:auto}
/* Verovio schreibt color="black" an sein inneres <svg>. Ein
   Praesentationsattribut schlaegt die Vererbung, also folgte der Notensatz
   nicht dem Papier, sondern blieb reines Schwarz. Zurueck auf die Vererbung,
   damit Linien und Koepfe dieselbe Tinte tragen wie das Blatt. */
.notenbild .definition-scale{color:inherit}
.notenbild .definition-scale use{fill:currentColor}
.notenbild + .leise{max-width:34rem}

/* ── Grifftafel: alle Griffe einer Art nebeneinander ─── */
.grifftafel{
  display:grid; gap:1.25rem .9rem;
  grid-template-columns:repeat(auto-fill, minmax(6.5rem, 1fr));
}
.grifffeld{margin:0}
.grifffeld a{
  display:block; text-decoration:none; color:inherit;
  padding:.4rem .3rem .3rem; border-radius:3px;
}
.grifffeld a:hover{background:var(--papier-tief)}
.grifffeld a:focus-visible{outline:2px solid var(--siegel); outline-offset:2px}
.grifffeld .griffbild{max-width:none}
.grifffeld figcaption{
  text-align:center; font-weight:600; font-size:.95rem; margin-top:.35rem;
  font-variant-numeric:tabular-nums;
}

/* Beim Drucken soll die Tafel aufs Blatt passen — danach wird gesucht:
   "guitar chords chart printable". */
@media print{
  .grifftafel{grid-template-columns:repeat(6, 1fr); gap:.5rem .4rem}
  .grifffeld a:hover{background:none}
}

/* ── Stück-Seiten ────────────────────────────────────
   Steckbrief: die fünf Angaben, nach denen zuerst gefragt wird — Tonart,
   Takt, Tempo, Urheber, Jahr. Als Definitionsliste, damit sie auch für
   Vorleseprogramme paarweise zusammenhängen. */
.steckbrief{
  display:grid; gap:.1rem 1.5rem; margin:1.75rem 0 0; padding:0;
  grid-template-columns:repeat(auto-fit, minmax(9rem, 1fr));
  border-top:1px solid var(--linie); padding-top:1.1rem;
}
.steckbrief > div{margin:0}
.steckbrief dt{
  font-size:.72rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--tinte-leise); margin:0 0 .15rem;
}
.steckbrief dd{margin:0 0 .8rem; font-weight:500; font-variant-numeric:tabular-nums}

/* Ein ganzes Stueck fuellte hier bis 10.09.2026 die volle Spalte. Damit war
   dasselbe Blatt auf dem Handy zu klein (Notensystem 16 px) und am Rechner
   aufgeblasen (70 px, Fuer Elise 20.000 px lang). Jetzt gilt eine einzige
   Blattbreite fuer alle Schirme — dieselbe 28rem wie beim einzelnen Akkord.
   Darunter schrumpft das Blatt mit dem Schirm, darueber waechst es nicht
   mehr mit: gesetzt ist es fuer die Hand, nicht fuer den Schreibtisch. */
.notenbild.breit{padding:1rem}

/* Akkordfolge taktweise — das Raster, das ein Musiker sucht, bevor er die
   Noten liest. */
.akkordraster{
  display:flex; flex-wrap:wrap; gap:.3rem; margin:0 0 1.5rem;
  font-variant-numeric:tabular-nums;
}
.akkordraster .takt{
  min-width:4.2rem; padding:.42rem .55rem; text-align:center; font-weight:600;
  border:1px solid var(--linie); border-radius:2px; background:var(--papier-tief);
  font-size:.92rem;
}

.notennamen{
  font-family:var(--serif); font-size:1.12rem; line-height:2;
  letter-spacing:.06em; word-spacing:.35em; max-width:38rem;
}

/* ── Anhören ─────────────────────────────────────────
   Die klingende Note leuchtet im Siegelrot mit. Verovio faerbt seine
   Zeichen ueber currentColor, deshalb genuegt es, die Farbe zu setzen. */
.notenleiste{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-top:1rem}
.abspielen{cursor:pointer; font-family:inherit}
/* Beim Abspielen kehrt sich der Knopf um: aussen rot, innen Papier. Vorher
   stand hier nur color:var(--siegel) — roter Text auf rotem Grund, der Knopf
   sagte "Stopp" und man sah es nicht. */
.abspielen[aria-pressed="true"]{
  background:var(--papier); color:var(--siegel);
  box-shadow:inset 0 0 0 1px var(--siegel);
}
.notenbild .klingt{color:var(--siegel)}
.notenbild .klingt *{fill:var(--siegel); stroke:var(--siegel)}
@media (prefers-reduced-motion:reduce){.notenbild .klingt{transition:none}}

/* ── Akkordbuch: 120 Akkorde zum Aufklappen ──────────
   Vorher standen hier nur Namen untereinander — man sah nicht, dass hinter
   jedem etwas steckt. Jetzt ist jeder eine Karte; wer eine öffnet, bekommt
   sie in voller Breite und muss die Seite nicht wechseln. */
.akkordbuch{
  display:grid; gap:.55rem;
  grid-template-columns:repeat(auto-fill, minmax(9.5rem, 1fr));
  align-items:start;
}
.akkordkarte{
  border:1px solid var(--linie); border-radius:3px; background:var(--papier);
  overflow:hidden;
}
.akkordkarte > summary{
  cursor:pointer; list-style:none; padding:.6rem .7rem;
  display:flex; flex-direction:column; gap:.1rem;
}
.akkordkarte > summary::-webkit-details-marker{display:none}
.akkordkarte > summary:hover{background:var(--papier-tief)}
.akkordkarte > summary:focus-visible{outline:2px solid var(--siegel); outline-offset:-2px}
.akkordkarte .symbol{font-weight:600; font-size:1.02rem; font-variant-numeric:tabular-nums}
.akkordkarte .toene{font-size:.8rem; color:var(--tinte-leise)}
.akkordkarte[open]{grid-column:1/-1; border-color:var(--notenlinie)}
.akkordkarte[open] > summary{border-bottom:1px solid var(--linie); background:var(--papier-tief)}

.karteninhalt{padding:.9rem .7rem .6rem}
.karteninhalt .notenbild{max-width:19rem; margin-bottom:1.1rem}
/* Alle drei Abbildungen gleich breit: vorher wuchsen die Griffbretter auf
   ihre Maximalbreite, waehrend die Klaviatur klein blieb — nebeneinander sah
   das aus wie ein Versehen. */
.kartenreihe{
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fit, minmax(0, 9.5rem));
  align-items:start; justify-content:start;
}
.kartenreihe figure{margin:0; min-width:0}
.kartenreihe .tastatur, .kartenreihe .griffbild{max-width:100%}
.kartenreihe figcaption{
  font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--tinte-leise); margin-bottom:.3rem;
}
.karteninhalt .leise a{color:var(--siegel); text-decoration:none; font-weight:500}
.karteninhalt .leise a:hover{text-decoration:underline}

/* Der Hinweis unter einem Notenbild, das noch niemand von Hand durchgesehen
   hat. Er soll gelesen werden, aber nicht erschrecken: keine Warnfarbe,
   sondern ein ruhiger Kasten am linken Rand markiert — die Seite ist
   brauchbar, sie ist nur noch nicht abgenommen. */
.pruefhinweis {
  margin: 1rem 0 0;
  padding: .7rem .9rem;
  border-left: 3px solid var(--linie);
  background: var(--papier-tief);
  border-radius: 0 4px 4px 0;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--tinte-leise);
}
.pruefhinweis strong { color: var(--tinte); font-weight: 600; }

/* ── Akkordfolgen ──────────────────────────────────────────────────────
   Drei Bausteine: das Band mit den Griffen (eine Folge zum Anschauen), die
   Tafel mit zwoelf Tonarten (zum Ablesen) und die Liste (zum Weitergehen).
   Alle drei muessen auf 390 px Breite noch lesbar sein — deshalb scrollt die
   Tafel in ihrem eigenen Rahmen, statt die Seite breit zu machen. */
.folgenband {
  display: flex; flex-wrap: wrap; gap: .6rem; margin: .9rem 0 0;
}
.folgenfeld {
  flex: 1 1 7.5rem; min-width: 7.5rem;
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .7rem .4rem .5rem;
  border: 1px solid var(--linie); border-radius: 6px;
  background: var(--notenpapier);
  text-decoration: none; color: var(--notentinte);
}
a.folgenfeld:hover { border-color: var(--notenlinie-fest); }
.folgenfeld .stufe {
  font-size: .78rem; letter-spacing: .04em; color: var(--tinte-leise);
}
.folgenfeld .symbol { font-size: 1.35rem; font-weight: 600; line-height: 1.1; }
.folgenfeld .auch,
.folgenfeld .takte { font-size: .72rem; color: var(--tinte-leise); }
.folgenfeld svg { max-width: 5.2rem; height: auto; margin-top: .25rem; }

.tafelrahmen { overflow-x: auto; margin: .9rem 0 0; }
.folgentafel { border-collapse: collapse; width: 100%; font-size: .92rem; }
.folgentafel th, .folgentafel td {
  padding: .45rem .6rem; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--linie);
}
.folgentafel thead th {
  font-size: .8rem; letter-spacing: .04em; color: var(--tinte-leise);
  font-weight: 600;
}
.folgentafel tbody th { font-weight: 500; }
.folgentafel tbody th a { text-decoration: none; }
.folgentafel td { font-variant-numeric: tabular-nums; }
.folgentafel tr.hervor { background: var(--papier-tief); }

.folgenliste { display: grid; gap: 1px; background: var(--linie);
               border: 1px solid var(--linie); border-radius: 6px;
               overflow: hidden; margin-top: .9rem; }
.folgenzeile {
  display: grid; grid-template-columns: 1fr; gap: .1rem;
  /* 44 px Mindesthoehe: ein Tippziel, kein Textabsatz. */
  min-height: 44px; padding: .6rem .8rem;
  background: var(--papier); text-decoration: none; color: var(--tinte);
}
.folgenzeile:hover { background: var(--papier-tief); }
.folgenzeile .ziffern { font-weight: 600; }
.folgenzeile .kette { color: var(--tinte-leise); font-size: .92rem; }
.folgenzeile .fname { color: var(--tinte-leise); font-size: .82rem; }
@media (min-width: 34rem) {
  .folgenzeile { grid-template-columns: 10rem 1fr 12rem; align-items: baseline; }
  .folgenzeile .fname { text-align: right; }
}

.tonartwahl { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.tonartknopf {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 .85rem; border: 1px solid var(--linie); border-radius: 999px;
  text-decoration: none; color: var(--tinte); font-size: .92rem;
  background: var(--papier);
}
.tonartknopf:hover { background: var(--papier-tief); }

.liederliste { margin: .8rem 0 0; padding-left: 1.1rem; line-height: 1.7; }

/* Das Nachschlagband im Fuss jeder Inhaltsseite. Sieben Verweise, die aus
   1.136 einzelnen Seiten ein verbundenes Werk machen (gemessen 11.09.2026).
   Auf dem Handy umbrechend, jeder Punkt 44 px hoch — sonst waeren es sieben
   Ziele, die man nicht trifft. */
.nachschlag {
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linie);
}
.nachschlag .etikett {
  margin: 0 0 .4rem; font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinte-leise);
}
.nachschlag ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .3rem .4rem;
}
.nachschlag li a, .nachschlag li span {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 .8rem; border-radius: 999px; font-size: .92rem;
  border: 1px solid var(--linie); text-decoration: none; color: var(--tinte);
}
.nachschlag li a:hover { background: var(--papier-tief); }
.nachschlag li span { color: var(--tinte-leise); background: var(--papier-tief); }

/* Verweise in einer Tafel sind sonst 19 px hoch — auf dem Handy nicht zu
   treffen (gemessen 11.09.2026 mit handyprobe.py). Die Zelle wird so hoch,
   dass der Verweis sie ganz ausfuellt und dabei ueber 44 px kommt; der
   negative Aussenabstand sorgt dafuer, dass er wirklich bis an den Rand der
   Zelle reicht und nicht nur so aussieht. */
.folgentafel th, .folgentafel td { padding: .9rem .6rem; }
.folgentafel a {
  display: block; margin: -.9rem -.6rem; padding: .9rem .6rem;
  text-decoration: none;
}
.folgentafel a:hover { text-decoration: underline; }

/* ── Gitarre und Ukulele ───────────────────────────────────────────────
   Die Griffkarte traegt vier Angaben: Symbol, Bild, woraus die Muehe
   besteht, und wie oft der Akkord gebraucht wird. Die Zahl oben rechts ist
   die gerechnete Muehe — klein, weil sie erklaert und nicht urteilt. */
.grifftafel.weit {
  display: grid; gap: .6rem; margin-top: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
}
.griffkarte {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .8rem .5rem .6rem;
  border: 1px solid var(--linie); border-radius: 6px;
  background: var(--notenpapier); color: var(--notentinte);
  text-decoration: none; text-align: center;
}
a.griffkarte:hover { border-color: var(--notenlinie-fest); }
.griffkarte .symbol { font-size: 1.3rem; font-weight: 600; line-height: 1.1; }
.griffkarte svg { max-width: 5.4rem; height: auto; margin: .2rem 0; }
.griffkarte .muehe { font-size: .74rem; color: var(--tinte-leise); line-height: 1.35; }
.griffkarte .nutzung { font-size: .72rem; color: var(--tinte-leise); opacity: .8; }
.griffkarte .muehezahl {
  position: absolute; top: .4rem; right: .5rem;
  font-size: .72rem; color: var(--tinte-leise); opacity: .7;
  font-variant-numeric: tabular-nums;
}
.griffkarte.ausweg { border-style: dashed; }

.barreliste { display: grid; gap: .9rem; margin-top: .9rem; }
.barrepaar { display: grid; gap: .6rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 25rem) { .barrepaar { grid-template-columns: 1fr; } }

/* Saitenstimmer: die Saiten als Reihe von Knoepfen. Die tiefste links, wie
   das Griffbrett von oben aussieht. Jeder Knopf ist ein Tippziel von 44 px
   und klingt beim Antippen — Stimmen nach Gehoer ist die aeltere und in
   einem lauten Raum die bessere Art. */
.ss-saiten {
  display: flex; flex-wrap: wrap; gap: .4rem; margin: .9rem 0 .5rem;
}
.ss-saite {
  flex: 1 1 3.4rem; min-height: 54px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .1rem; padding: .3rem .2rem;
  border: 1px solid var(--linie); border-radius: 6px;
  background: var(--papier); color: var(--tinte);
  font: inherit; cursor: pointer;
}
.ss-saite .nr { font-size: .7rem; color: var(--tinte-leise); }
.ss-saite .nm { font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ss-saite:hover { background: var(--papier-tief); }
.ss-saite.aktiv { border-color: var(--siegel); border-width: 2px; padding: calc(.3rem - 1px) calc(.2rem - 1px); }
.feldzeile { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.feldzeile select { min-height: 44px; padding: 0 .6rem; font: inherit;
  border: 1px solid var(--linie); border-radius: 6px; background: var(--papier);
  color: var(--tinte); }

/* Klavier: die Klaviatur unter dem Akkordsymbol, und die Umkehrungsreihe.
   Die Tastenbilder sind breiter als hoch — auf dem Handy stehen sie
   deshalb untereinander statt nebeneinander. */
.klavierkarte svg { max-width: 100%; height: auto; }
.klaviaturbild { display: block; width: 100%; height: auto; }
.umkehrreihe { display: grid; gap: .8rem; margin: 1rem 0; }
@media (min-width: 30rem) {
  .umkehrreihe { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
}
.umkehrfeld {
  margin: 0; padding: .7rem .6rem .5rem;
  border: 1px solid var(--linie); border-radius: 6px;
  background: var(--notenpapier);
}
.umkehrfeld figcaption {
  display: flex; flex-direction: column; gap: .1rem; margin-top: .4rem;
  font-size: .82rem; color: var(--tinte-leise);
}
.umkehrfeld figcaption strong { color: var(--notentinte); font-size: .95rem; }
.wegzahl {
  margin: .5rem 0 1.2rem; font-size: .92rem; color: var(--tinte-leise);
  font-variant-numeric: tabular-nums;
}
.wegzahl.stark { color: var(--siegel); font-weight: 600; }

/* Hilfslinien: kleine Einzelbilder in einer Reihe, die auf dem Handy
   umbricht. Jedes traegt seinen Tonnamen darunter. */
.hilfsreihe {
  display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0;
}
.hilfsfeld {
  margin: 0; flex: 0 1 5.5rem;
  padding: .4rem .3rem .3rem; text-align: center;
  border: 1px solid var(--linie); border-radius: 5px;
  background: var(--notenpapier);
}
.hilfsfeld .notenmotiv, .hilfsfeld svg { max-width: 100%; height: auto; }
.hilfsfeld figcaption {
  margin-top: .2rem; font-size: .8rem; color: var(--tinte-leise);
}

/* Tabulatur neben dem Griffbild: dieselben Zahlen, zwei Darstellungen.
   Auf dem Handy untereinander, ab 26rem nebeneinander. */
.tabkarte .tabpaar { display: flex; flex-wrap: wrap; gap: .4rem;
  align-items: center; justify-content: center; }
.tabkarte .tabpaar svg { max-width: 6.4rem; height: auto; }
.tabzeile {
  font-size: .8rem; letter-spacing: .12em; color: var(--tinte-leise);
  font-variant-numeric: tabular-nums;
}
.tabulatur { display: block; }

/* Die Zeichentafel: drei Spalten, das Bild links klein. Die Tafel darf auf
   dem Handy nicht breiter werden als die Spalte — deshalb umbrechende
   Bedeutung und ein Bild von fester Breite. */
.zeichentafel { border-collapse: collapse; width: 100%; font-size: .92rem; }
.zeichentafel th, .zeichentafel td {
  padding: .55rem .5rem; border-bottom: 1px solid var(--linie);
  vertical-align: middle; text-align: left;
}
.zeichentafel thead th {
  font-size: .78rem; letter-spacing: .04em; color: var(--tinte-leise);
}
.zeichentafel tbody th { font-weight: 600; white-space: nowrap; }
.zeichentafel tbody th a {
  display: block; min-height: 44px; display: flex; align-items: center;
  text-decoration: none;
}
.zeichentafel tbody th a:hover { text-decoration: underline; }
.zeichentafel .bedeutung { color: var(--tinte-leise); }
.zeichenzelle { width: 5.6rem; }
.zeichenbild { width: 5.2rem; }
.zeichenbild .notenmotiv, .zeichenbild svg { width: 100%; height: auto; display: block; }
.zeichenglyph { font-size: 1.6rem; line-height: 1; }
.zeichenglyph.leer { color: var(--linie); }

/* Drei kleine Notenbilder nebeneinander (Taktarten, Vorzeichen) — auf dem
   Handy untereinander. Jedes im Blattrahmen wie ein einzelnes Notenbild. */
.dreierreihe { display: grid; gap: .6rem; margin: .9rem 0; }
@media (min-width: 34rem) { .dreierreihe { grid-template-columns: repeat(3, 1fr); } }
.dreierreihe .notenmotiv, .dreierreihe > svg {
  width: 100%; height: auto; display: block;
  padding: .5rem; border: 1px solid var(--notenrand); border-radius: 5px;
  background: var(--notenpapier);
}

/* Intervalle (11.09.2026): die Klaviatur zeigt nur den Ausschnitt um die
   beiden Toene und darf deshalb nicht die volle Spalte fuellen. */
.klaviaturbild-rahmen { margin: 0 0 .75rem; }
.intervallliste { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.intervallliste li { display: grid; grid-template-columns: 3rem 1fr; gap: 0 .75rem;
  padding: .8rem 0; border-top: 1px solid var(--linie); align-items: start; }
.intervallliste li:last-child { border-bottom: 1px solid var(--linie); }
.iv-zahl { font-family: var(--serif); font-size: 1.9rem; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--siegel); padding-top: .1rem; }
.iv-kern { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.iv-kern > a { font-weight: 600; font-size: 1.1rem; display: inline-block;
  padding: .6rem 0; margin: -.6rem 0; }
.iv-meta { font-size: .9rem; color: var(--tinte-leise); }
.iv-lied { font-size: .95rem; }

/* Griffbrett (11.09.2026): senkrecht, schmal — die Karte darf nicht breiter
   werden als die Saiten brauchen, sonst werden die Kreise auf dem Rechner
   zu Tellern. */
.griffbrett-rahmen { max-width: 22rem; margin: 0 auto .75rem; }
.griffbrett { display: block; width: 100%; height: auto; }
.regeln { display: grid; gap: 1rem; }
.regeln .regel h3 { margin: 0 0 .25rem; font-size: 1.05rem; }
.regeln .regel p { margin: 0; }
.lagentafel td { white-space: normal; font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* Notenwerte (11.09.2026): je Wert eine Karte mit Note und Pause nebeneinander. */
.wertliste { list-style: none; margin: 0; padding: 0; }
.wertkarte { padding: 1rem 0; border-top: 1px solid var(--linie); }
.wertkarte:last-child { border-bottom: 1px solid var(--linie); }
.wertkopf { display: flex; flex-direction: column; gap: .1rem; margin-bottom: .6rem; }
.wertkopf strong { font-size: 1.1rem; }
.wertkopf strong a { display: inline-block; padding: .6rem 0; margin: -.6rem 0; }
.wertbilder { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.wertbilder figure { margin: 0; }
.wertbilder .notenbild { margin: 0; display: flex; justify-content: center; }
/* Ein einzelnes Zeichen darf nicht die halbe Spalte fuellen — der Schluessel
   wuerde sonst zum Plakat und die Note bliebe klein daneben. */
.wertbilder .notenbild svg { max-height: 6.5rem; width: auto; }
.wertbilder figcaption { text-align: center; font-size: .9rem; color: var(--tinte-leise); margin-top: .3rem; }
.wertbilder figcaption a { display: inline-block; padding: .8rem 0; margin: -.8rem 0; }
.wertdauer { margin: .6rem 0 0; font-variant-numeric: tabular-nums; }

/* Taktarten (11.09.2026): die Zahl links als Bruch, sonst wie die Intervall-Liste. */
.taktliste li { grid-template-columns: 3.6rem 1fr; }
.tk-zahl { font-size: 1.6rem; white-space: nowrap; }
.tk-zahl small { font-size: .9rem; }

/* Klavier-Akkordtafel (11.09.2026): Tasten-Bilder zu zweit je Zeile auf
   dem Handy, Name und Toene darunter. */
.tastentafel { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem .75rem; }
@media (min-width: 40rem) { .tastentafel { grid-template-columns: repeat(3, 1fr); } }
.tastenfeld { margin: 0; }
.tastenfeld a { display: block; text-decoration: none; color: inherit; }
.tastenfeld .klaviaturbild { width: 100%; height: auto; }
.tastenfeld figcaption { text-align: center; margin-top: .35rem; line-height: 1.3;
  padding-bottom: .2rem; }
.tastenfeld figcaption b { font-size: 1.05rem; }
.tastenfeld figcaption small { display: block; color: var(--tinte-leise); font-size: .8rem; }

/* Notenpapier (11.09.2026): je Blatt eine Karte mit dem oberen Drittel als Vorschau. */
.blattliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.blattkarte h3 { margin: 0 0 .5rem; }
.blattrahmen { border: 1px solid var(--linie); background: #fff; padding: 0; overflow: hidden; }
.blattvorschau { display: block; width: 100%; height: auto; }
.blattknoepfe { display: flex; gap: .6rem; flex-wrap: wrap; margin: .6rem 0 0; }

/* Leichte Stuecke (11.09.2026): Titel als Verweis, Fakten darunter. */
.stufenliste li { display: flex; flex-direction: column; gap: .15rem; padding: .5rem 0; }
.stufenliste li > a { font-weight: 600; display: inline-block; padding: .55rem 0; margin: -.55rem 0; align-self: flex-start; }
/* Die Akkordverweise in der Faktenzeile bleiben Fliesstext: eine Zeile mit
   zwoelf Akkorden umbricht, und ein aufgeblasener Verweis traefe die Zeile
   darunter. */

/* Zeichentafel (11.09.2026): Zeichen zum Kopieren als Reihe von Knoepfen. */
.kopierreihe { display: flex; flex-wrap: wrap; gap: .5rem; }
.kopierzeichen { min-width: 44px; min-height: 44px; padding: .2rem .6rem; font-size: 1.5rem;
  line-height: 1; background: var(--papier-tief); color: var(--tinte); border: 1px solid var(--linie);
  border-radius: .5rem; cursor: pointer; font-family: "Bravura", "Noto Music", "Segoe UI Symbol", serif; }
.kopierzeichen.fertig { background: var(--siegel); color: #fff; }

/* Transponiertafeln (12.09.2026): die schwarzen Tasten tragen beide Namen
   untereinander, damit die Spalte schmal bleibt; die Instrumententafel
   darf in der Intervallspalte umbrechen, sonst wird sie auf dem Handy
   dreimal so breit wie der Schirm. */
.chromatafel td small, .chromatafel th small {
  display: block; font-size: .78em; color: var(--tinte-leise); line-height: 1.1;
}
.chromatafel td, .chromatafel th { text-align: center; padding: .4rem .45rem; }
.chromatafel tbody th { text-align: left; }
.instrumententafel td:nth-child(5) { white-space: normal; min-width: 7rem; }
.instrumententafel th, .instrumententafel td { padding: .45rem .45rem; }
.moditafel td.hervor { font-weight: 600; background: var(--papier-tief); }
.moditafel td, .moditafel th { text-align: center; }
.moditafel tbody th { text-align: left; }
.hellreihe { line-height: 2; }
/* Akkordsymbole als Karten statt Tafel: die Erklaerung darf umbrechen,
   und auf dem Handy bleibt nichts hinter dem rechten Rand verborgen. */
.symbolliste { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .6rem; }
@media (min-width: 40rem) { .symbolliste { grid-template-columns: 1fr 1fr; } }
.symbolkarte { display: grid; gap: .15rem; padding: .7rem .85rem; border: 1px solid var(--linie);
               border-radius: 6px; background: var(--notenpapier); }
.symbolname { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; text-decoration: none;
              display: inline-block; min-height: 44px; line-height: 44px; margin: -.5rem 0 -.3rem;
              justify-self: start; }
.symbolauch { font-size: .82rem; color: var(--tinte-leise); }
.symbolformel { font-variant-numeric: tabular-nums; font-size: .92rem; }
.symbolerkl { font-size: .9rem; line-height: 1.5; }
.dyntafel td { white-space: normal; }
.dynzeichen { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 1.15rem; }
.dynzeichen a { text-decoration: none; }

/* Das Tonleiterverzeichnis: zwoelf Gruppen zu zwoelf Grundtoenen. Die
   Knoepfe sind dieselben wie bei den Tonarten, nur enger gesetzt — sonst
   wird die Seite auf dem Handy zu lang. */
.leiterwahl { gap: .35rem; list-style: none; padding-left: 0; margin: .6rem 0 0; }
.leiterwahl li { display: contents; }
.leiterwahl .tonartknopf { padding: 0 .75rem; }