/* =====================================================================================
   Musik | Studio -- Bereichs-Umschalter (03.10.2026)
   Steht oben links auf musik.html und studio.html: das aktive Wort ist die Seitenüberschrift
   (h1, gold unterstrichen), das andere ein Reiter daneben. Vorher lag das Studio als Abschnitt
   04 tief unten auf der Musik-Seite -- viel Scrollen, und FreeqTune überschnitt sich mit dem
   Studio. Jetzt hat jedes seine eigene Landeseite, gewechselt wird mit einem Klick.
   ===================================================================================== */
.bereich-kopf{display:flex;align-items:flex-end;gap:clamp(1.1rem,4vw,2.6rem);flex-wrap:wrap;margin:.5rem 0 1.4rem;border-bottom:1px solid var(--line)}
.bereich-kopf h1.pt{margin:0;padding-bottom:.5rem;border-bottom:3px solid var(--gold);margin-bottom:-1px;line-height:1.05}
.bt-tab{display:flex;flex-direction:column;text-decoration:none;color:var(--dim);padding-bottom:.62rem;border-bottom:3px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .2s}
.bt-tab .bt-wort{font-family:'Unbounded',sans-serif;font-weight:700;font-size:clamp(1.25rem,3vw,1.85rem);line-height:1.1;letter-spacing:.01em}
.bt-tab .bt-wort::after{content:' →';font-size:.62em;vertical-align:.12em;color:var(--gold-deep);transition:margin .2s}
.bt-tab .bt-unter{font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);margin-top:.4rem}
.bt-tab:hover,.bt-tab:focus-visible{color:var(--ink);border-bottom-color:var(--gold-hi)}
.bt-tab:hover .bt-wort::after{margin-left:.2em}
/* Auf der Studio-Seite steht der Musik-Reiter LINKS (gleiche Position wie die Musik-Überschrift) --
   der Pfeil zeigt dann zurück. */
.bt-tab.bt-zurueck .bt-wort::after{content:''}
.bt-tab.bt-zurueck .bt-wort::before{content:'← ';font-size:.62em;vertical-align:.12em;color:var(--gold-deep)}
@media(max-width:420px){.bereich-kopf{gap:1rem}.bt-tab .bt-unter{letter-spacing:.12em}}