/* =====================================================================
   jupi - klangwerkstatt/styles.css
   ---------------------------------------------------------------------
   Basis (Knoepfe, Panels, Selects, Dark-Mode-Geruest) kommt aus der
   Paket-Kopie jupi.css, die Farbvariablen aus colors.css. Hier steht nur
   die eigene WELT der Klangwerkstatt.

   WELT: MUSIKSTUBE / INSTRUMENTE & KLAVIER (3.13.6, 3.13.7 Weg A).
   Das Werkzeug ist ein Instrument: Tasten druecken, Toene hoeren, Noten
   lesen, aufnehmen. Darum die Stube, in der geuebt wird:
     - Kulisse kulisse.svg (Generator .zcode/klangwerkstatt-kulisse.cjs):
       warme Kalkputz-Wand, Stuck-Gesims, Vertaefelung, Geige + Bogen links,
       Blockfloete + Metronom + Notenstapel rechts
     - Kopfzeile = Klavier: Ebenholz-Lack mit Messingkante und einer
       Elfenbein-Klaviatur als unterem Abschluss
     - Werkzeugleiste = Stimmkonsole aus Nussbaum mit Messing
     - Werkzeugkasten links = Instrumentenkasten (Ebenholz) mit Elfenbein-
       Tasten als Knoepfen und Messing-Schildern fuer Punkte/Best/Aufgabe
     - Buehne = Notenpult aus Nussbaum mit Messing-Rahmen und vier Schrauben;
       darauf Papier (Aufgabe, Notenzeile, Notenblatt) und das KLAVIER im
       Ebenholz-Gehaeuse mit rotem Filzstreifen
     - Meldung = Messingschild, Rundenende = Urkunde mit Messing-Rahmen
   Dark Mode = dieselbe Stube bei Lampenlicht: Kulisse gedaempft, Hoelzer
   dunkler, PAPIERE BLEIBEN HELL (sie werden von der Lampe beschienen).

   Grundsaetze aus AGENTS.md 3.13:
     - Drei-Zonen-Kopfzeile, keine zweite Titelzeile (3.13.2)
     - Kopf ganz oben, Fuss am Dokumentende (3.13.2a)
     - JEDE Bedienflaeche mindestens 40 px, auch am Handy (3.13.5)
     - KEINE Infobox unter dem Werkzeug - alles im ?-Fenster (3.13.4)
     - Bedienung nie unter Deko: die Schrauben/Rahmen sind pointer-events:none
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Welt und Seite
   --------------------------------------------------------------------- */
/* Farben der Welt - dieselben Namen wie in kulisse.svg und im Generator.
   Spezifitaet: jupi.css setzt body.jupi und html[dark] body.jupi, darum
   hier body.jupi.klang_body bzw. html[dark] body.jupi.klang_body. */
body.jupi.klang_body {
  --kl-ebenh: #17110d;          /* Klavier-Schwarz */
  --kl-ebenh-2: #241a14;
  --kl-ebenh-3: #33251b;
  --kl-nuss: #4a2f1d;           /* Nussbaum */
  --kl-nuss-hell: #6a4526;
  --kl-nuss-tief: #2b1a0e;
  --kl-messing: #c8a24a;
  --kl-messing-hell: #f0d79a;
  --kl-messing-tief: #8a6a2a;
  --kl-elfenbein: #fbf6e8;
  --kl-elfenbein-2: #ece0c4;
  --kl-elfenbein-3: #d6c7a4;
  --kl-papier: #fbf6e8;         /* Papier bleibt in beiden Themes hell */
  --kl-papier-kante: #d9c9a3;
  --kl-tinte: #2e2118;
  --kl-tinte-leise: #6b5a45;
  --kl-filz: #8d2b2f;           /* roter Filz hinter der Klaviatur */
  --kl-hell: #f6ecd6;           /* Schrift auf Holz */
  --kl-hell-leise: #d9c8a8;
  --kl-gruen: #2f7d3f;          /* "richtig" - bleibt gruen (Bedeutung) */
  --kl-rot: #b3261e;

  /* Bausteine, die an mehreren Stellen gebraucht werden */
  --kl-radius: 1rem;
  --kl-schatten: 0 18px 40px -24px rgba(28,16,6,.85), 0 2px 6px rgba(28,16,6,.2);
  --kl-schatten-papier: 0 10px 22px -16px rgba(60,40,10,.7);
  --kl-holz: linear-gradient(180deg, #5c3d24 0%, #4a2f1d 46%, #36200f 100%);
  --kl-messing-flaeche: linear-gradient(180deg, #f2dcab 0%, #d3ac5c 46%, #b8913f 100%);

  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* EINE gestreckte Szene (3.13.7 Weg A): die Musikstube am Nachmittag.
     Ebene 2 ist weiches Fensterlicht, Ebene 3 sammelt den Schatten unten. */
  background-image:
    radial-gradient(ellipse at 50% -12%, rgba(255,244,214,.55), transparent 55%),
    url("kulisse.svg"),
    linear-gradient(rgba(43,26,14,0), rgba(43,26,14,.22));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: cover, cover, cover;
  background-position: center top, center top, center bottom;
  background-attachment: fixed, fixed, fixed;
  background-color: #e7d7b6;
  color: var(--kl-tinte);
}
/* Dieselbe Stube am Abend: warme Lampe, Stube gedaempft. Die Papiere auf
   dem Pult bleiben hell - sie liegen VOR der Kulisse und werden beschienen. */
html[data-theme="dark"] body.jupi.klang_body {
  background-image:
    radial-gradient(ellipse at 50% 118%, rgba(255,176,88,.22), transparent 46%),
    linear-gradient(rgba(8,5,3,.62), rgba(8,5,3,.74)),
    url("kulisse.svg");
  background-color: #120c08;
  color: var(--kl-hell);
}
/* jupi.css setzt im Dunkelmodus `html[data-theme="dark"] .jupi_container >
   .jupi_main` (Spezifitaet 0,3,1) - die Kulisse waere sonst hinter einer
   dunklen Platte versteckt. Darum hier BEIDE Themes ausdruecklich auf
   transparent, mit demselben Selektor-Bau. */
.klang_body .jupi_container { background: transparent; }
.klang_body .jupi_container > .jupi_main,
html[data-theme="dark"] .klang_body .jupi_container > .jupi_main { background: transparent; }
.klang_body main { flex: 1 0 auto; }
.klang_body .jupi_footer,
html[data-theme="dark"] .klang_body .jupi_container > .jupi_footer {
  margin-top: auto; background: transparent; border-top: 0;
}
.klang_body .jupi_container > .jupi_footer { margin-inline: auto; }

/* ---------------------------------------------------------------------
   2. Kopfzeile: Ebenholz-Lack, Messingkante, Klaviatur-Abschluss (3.13.2)
   --------------------------------------------------------------------- */
.klang_body .klang_leiste {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .3rem .5rem;
  /* Unten Platz fuer die Klaviatur-Leiste */
  padding: .24rem .7rem .62rem;
  background:
    linear-gradient(180deg, rgba(255,236,190,.12), rgba(255,236,190,0) 44%),
    linear-gradient(180deg, #2c211a 0%, #17110d 56%, #0c0806 100%);
  border-bottom: 2px solid #9c7a34;
  box-shadow: 0 10px 24px -14px rgba(20,10,4,.85), inset 0 1px 0 rgba(255,236,190,.18);
}
/* Der Klavier-Abschluss: eine schmale Elfenbein-Klaviatur ueber die ganze
   Breite. Reine Deko (pointer-events:none) - nie ueber Bedienzielen. */
.klang_body .klang_leiste::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 9px;
  pointer-events: none;
  border-top: 1px solid rgba(240,215,154,.5);
  background-image:
    /* schwarze Tasten (oben, 6 px) */
    repeating-linear-gradient(90deg,
      transparent 0 18px, #14100d 18px 32px, transparent 32px 52px),
    /* Fugen zwischen den weissen Tasten */
    repeating-linear-gradient(90deg,
      #b5a37c 0 1.4px, transparent 1.4px 26px),
    /* Elfenbein */
    linear-gradient(180deg, #fdf8e9 0%, #e6dac0 62%, #cdbf9d 100%);
  background-size: 52px 6px, 26px 100%, 100% 100%;
  background-repeat: repeat-x, repeat-x, no-repeat;
  background-position: 0 0, 0 0, 0 0;
}
.klang_body .klang_leiste .jupi_nav { justify-self: start; }
.klang_body .klang_app_rechts {
  justify-self: end;
  display: inline-flex; align-items: center; gap: .35rem; min-width: 0;
}
/* "Alle Spiele" als Elfenbein-Taste */
.klang_body .klang_leiste .jupi_nav_back {
  background: linear-gradient(180deg, #fdf8e9, #e6dac0);
  color: #3a2a16;
  border: 1px solid #b9a37a;
  border-bottom-width: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.7);
  font-weight: 800;
}
.klang_body .klang_leiste .jupi_nav_back:hover {
  background: linear-gradient(180deg, #fffdf5, #efe4c8);
  transform: translateY(-1px);
}
/* Marken-Pille: das Messing-Namensschild des Instruments */
.klang_body .klang_app_link {
  display: inline-flex; align-items: center; gap: .4rem;
  color: #2b1d0d; text-decoration: none;
  background: linear-gradient(180deg, #f7ebc9 0%, #e2cf9d 62%, #cdb37a 100%);
  border: 1px solid #9c7a34;
  padding: .12rem .8rem .12rem .2rem;
  border-radius: .55rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.7);
  transition: background .15s, box-shadow .15s;
}
.klang_body .klang_app_link:hover {
  background: linear-gradient(180deg, #fdf3d8 0%, #e9d8aa 62%, #d5bd86 100%);
}
.klang_body .klang_app_logo {
  height: 1.75rem; width: auto; display: block; border-radius: .32rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.klang_body .klang_app_titel {
  margin: 0; font-size: 1.06rem; font-weight: 800; line-height: 1.1;
  letter-spacing: .01em; color: #2b1d0d; white-space: nowrap;
}
/* Dark-Mode-Pill 74x40 (3.13.2): Messing auf Ebenholz */
.klang_body .klang_app_rechts .jupi_theme_switch {
  width: 74px; height: 40px; min-width: 74px; padding: 0;
  background: rgba(255,236,190,.12);
  border: 1px solid rgba(240,215,154,.45);
}
.klang_body .klang_app_rechts .jupi_theme_switch:hover { background: rgba(255,236,190,.22); }
.klang_body .klang_app_rechts .jts_thumb {
  background: linear-gradient(180deg, #f4dfa8, #c8a24a);
  box-shadow: 0 1px 4px rgba(0,0,0,.55);
}
/* Sprachwahl (Modul aus i18n.js) im Messing-Look */
.klang_body .jupi_sprachen_select {
  color: #f6ecd6;
  background: rgba(255,236,190,.1);
  border: 1px solid rgba(240,215,154,.42);
  border-radius: .55rem;
}
.klang_body .jupi_sprachen_select:hover { background: rgba(255,236,190,.2); }
.klang_body .jupi_sprachen_select:focus-visible { outline: 2px solid #f0d79a; outline-offset: 2px; }
.klang_body .jupi_sprachen_select option { color: #2b1d0d; background: #fbf6e8; }

/* ---------------------------------------------------------------------
   3. Werkzeugleiste = Stimmkonsole (Nussbaum + Messing, 3.13.3 Typ 3)
   --------------------------------------------------------------------- */
.klang_body .klang_werkzeugleiste {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: .7rem 1.1rem;
  background:
    linear-gradient(180deg, rgba(255,236,190,.14), rgba(255,236,190,0) 38%),
    var(--kl-holz);
  border: 1px solid #2a1a0e;
  border-top: 2px solid #b08a3d;
  border-radius: .8rem;
  padding: .75rem .95rem .85rem;
  box-shadow: var(--kl-schatten), inset 0 0 0 1px rgba(200,162,74,.18);
  margin-bottom: 1rem;
}
.klang_body .klang_wz_feld { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.klang_body .klang_wz_feld > label {
  font-size: .66rem; font-weight: 800; letter-spacing: .11em;
  text-transform: uppercase; color: var(--kl-messing-hell); line-height: 1;
  text-shadow: 0 1px 0 rgba(0,0,0,.45);
}
.klang_body .klang_wz_feld .jupi_select {
  min-height: 42px; min-width: 11.5rem;
  border-radius: .45rem; padding: .45rem .8rem;
  font-size: .92rem; font-weight: 600;
  color: var(--kl-tinte);
  background: linear-gradient(180deg, #fdf9ee, #ecdfc0);
  border: 1px solid #b9a37a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(0,0,0,.35);
}
/* Abgeschaltete Auswahl (Schwierigkeit im Modus "Frei spielen") bleibt
   Elfenbein statt Browser-Grau - sie ist gesperrt, nicht kaputt. */
.klang_body .jupi_select:disabled {
  opacity: .8;
  color: #6b5a45;
  -webkit-text-fill-color: #6b5a45;
  background: linear-gradient(180deg, #f4ecd8, #e2d4b6);
  cursor: not-allowed;
}
.klang_body .klang_wz_feld .jupi_select:focus {
  outline: none; border-color: var(--kl-messing);
  box-shadow: 0 0 0 3px rgba(240,215,154,.35);
}
.klang_body .klang_wz_werkzeuge {
  display: flex; align-items: center; gap: .5rem;
  margin-inline-start: auto;
}
/* Werkzeug-Knoepfe: runde Messing-Drehknöpfe, 44 px */
.klang_body .klang_werk_knopf {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem; line-height: 1;
  color: #2b1d0d;
  background: radial-gradient(circle at 34% 28%, #f8e8b8 0%, #d9b566 46%, #a37e2f 100%);
  border: 1px solid #7d5f24;
  box-shadow: 0 3px 7px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.65);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.klang_body .klang_werk_knopf:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0,0,0,.55), inset 0 1px 1px rgba(255,255,255,.75);
}
.klang_body .klang_werk_knopf:active { transform: translateY(1px); }
.klang_body .klang_frage_svg { width: 22px; height: 22px; display: block; }

/* ---------------------------------------------------------------------
   4. Werkbank: Instrumentenkasten links, Buehne (Notenpult) mittig
   --------------------------------------------------------------------- */
.klang_body .klang_werkbank {
  display: grid;
  grid-template-columns: 17.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.klang_body .klang_spalte_links {
  display: flex; flex-direction: column; gap: .85rem;
  position: sticky; top: 4.9rem;   /* klebt knapp unter der Klavier-Leiste */
  min-width: 0;
}

/* --- Punkte/Best/Aufgabe: drei Messing-Schilder ----------------------- */
.klang_body .klang_punkte {
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
}
.klang_body .klang_stat {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .1rem; padding: .6rem .4rem;
  border-radius: .5rem;
  background: var(--kl-messing-flaeche);
  border: 1px solid #7d5f24;
  box-shadow: 0 3px 8px rgba(20,10,4,.5), inset 0 1px 0 rgba(255,255,255,.65),
              inset 0 -2px 4px rgba(90,60,10,.35);
  color: #2f2110;
}
.klang_body .klang_stat_wert {
  font-size: 1.5rem; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
}
.klang_body .klang_stat_label {
  font-size: .64rem; font-weight: 800; letter-spacing: .11em;
  text-transform: uppercase; color: #4a3512; line-height: 1.2;
}
.klang_body .klang_stat_aufgabe { grid-column: 1 / -1; }
.klang_body .klang_stat_aufgabe .klang_stat_wert { font-size: 1.3rem; }

/* --- Der Instrumentenkasten: Ebenholz mit Messing-Nieten -------------- */
.klang_body .klang_kasten {
  position: relative;
  display: flex; flex-direction: column; gap: .7rem;
  padding: .8rem .75rem .85rem;
  min-width: 0;
  border-radius: .8rem;
  background:
    linear-gradient(180deg, rgba(255,236,190,.08), rgba(255,236,190,0) 32%),
    linear-gradient(180deg, #2a201a 0%, #1a1310 58%, #110c0a 100%);
  border: 1px solid #3a2c22;
  box-shadow: var(--kl-schatten), inset 0 0 0 1px rgba(200,162,74,.16);
}
/* vier Messing-Nieten in den Ecken (Deko, nie ueber Bedienzielen) */
.klang_body .klang_kasten::before {
  content: ""; position: absolute; inset: 5px;
  border-radius: .55rem;
  border: 1px solid rgba(200,162,74,.14);
  pointer-events: none;
  background-image:
    radial-gradient(circle at 0 0, #d9b566 0 2.2px, rgba(0,0,0,0) 2.6px),
    radial-gradient(circle at 100% 0, #d9b566 0 2.2px, rgba(0,0,0,0) 2.6px),
    radial-gradient(circle at 0 100%, #d9b566 0 2.2px, rgba(0,0,0,0) 2.6px),
    radial-gradient(circle at 100% 100%, #d9b566 0 2.2px, rgba(0,0,0,0) 2.6px);
  background-repeat: no-repeat;
}
/* Bloecke im Kasten: eingelassene Faecher mit Elfenbein-Etikett */
.klang_body .klang_block {
  position: relative;
  border-radius: .5rem;
  padding: .6rem .6rem .7rem;
  background: linear-gradient(180deg, rgba(0,0,0,.32), rgba(255,236,190,.04));
  border: 1px solid rgba(200,162,74,.2);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
}
.klang_body .klang_block_titel {
  margin: 0 0 .5rem;
  display: flex; align-items: center; gap: .35rem;
  font-size: .66rem; font-weight: 800; letter-spacing: .11em;
  text-transform: uppercase; color: var(--kl-messing-hell);
}
.klang_body .klang_block_titel_mitte { justify-content: center; }
.klang_body .klang_block_emoji { font-size: .95rem; line-height: 1; }

/* --- Knoepfe im Kasten: Elfenbein-Tasten ------------------------------ */
.klang_body .klang_block_knöpfe { display: flex; flex-direction: column; gap: .42rem; }
.klang_body .klang_block_knöpfe .jupi_btn {
  width: 100%; justify-content: center; min-height: 40px;
  border-radius: .4rem; font-size: .88rem; font-weight: 700;
  color: #2f2110;
  background: linear-gradient(180deg, #fdf8ea 0%, #eee2c6 70%, #e0d2b2 100%);
  border: 1px solid #b9a37a;
  border-bottom: 3px solid #a48b5c;
  box-shadow: 0 2px 5px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.85);
  transform: none;
}
.klang_body .klang_block_knöpfe .jupi_btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #fffdf6 0%, #f4ead2 70%, #e6d8b8 100%);
  transform: translateY(-1px);
  box-shadow: 0 5px 10px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.9);
}
.klang_body .klang_block_knöpfe .jupi_btn:active:not(:disabled) {
  transform: translateY(1px); border-bottom-width: 1px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.28);
}
/* Die Haupt-Taste (Aufnahme) ist Messing: die wichtigste Taste des Kastens */
.klang_body .klang_block_knöpfe .jupi_btn:not(.jupi_btn_alt) {
  background: var(--kl-messing-flaeche);
  border-color: #7d5f24;
  border-bottom-color: #6d5219;
  box-shadow: 0 2px 5px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.7);
}
.klang_body .klang_block_knöpfe .jupi_btn:not(.jupi_btn_alt):hover:not(:disabled) {
  filter: brightness(1.06);
}
/* Aufnahme laeuft: roter Filz statt Messing */
.klang_body .klang_block_knöpfe .jupi_btn.klang_rec_aktiv,
.klang_body .klang_block_knöpfe .jupi_btn.klang_rec_aktiv:hover {
  background: linear-gradient(180deg, #c0393c 0%, #8d2b2f 70%, #6d1c20 100%);
  border-color: #55171a; border-bottom-color: #451215;
  color: #fff6ec;
  filter: none;
}
.klang_body .klang_block_knöpfe .jupi_btn:disabled { opacity: .45; }
.klang_body .klang_filelabel { cursor: pointer; }

/* --- Meine Werke: Zettel im Fach -------------------------------------- */
.klang_body .klang_werke { display: flex; flex-direction: column; gap: .4rem; }
.klang_body .klang_werke:empty { display: none; }
.klang_body .klang_werke:not(:has(.klang_werkzeile)) {
  font-size: .8rem; line-height: 1.55; color: var(--kl-hell-leise);
  background: rgba(0,0,0,.25);
  border: 1px dashed rgba(200,162,74,.4);
  border-radius: .4rem; padding: .5rem .6rem;
}
.klang_body .klang_werkzeile {
  display: flex; gap: .4rem; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, #fdf8ea, #eee2c6);
  border: 1px solid #b9a37a;
  border-radius: .4rem; padding: .25rem .3rem .25rem .55rem;
  font-size: .82rem; color: var(--kl-tinte);
}
.klang_body .klang_mini {
  min-width: 40px; min-height: 40px; padding: .2rem .55rem; font-size: .9rem;
  color: #2f2110;
  background: var(--kl-messing-flaeche);
  border: 1px solid #7d5f24; border-radius: .35rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.klang_body .klang_werkzeile .klang_mini { flex: 0 0 auto; }

/* ---------------------------------------------------------------------
   5. Buehne = Notenpult aus Nussbaum mit Messing-Rahmen
   --------------------------------------------------------------------- */
.klang_body .klang_stage {
  position: relative;
  min-width: 0;
  padding: 1rem 1.1rem 1.3rem;
  border-radius: .9rem;
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.05) 0 1.5px, rgba(255,236,190,0) 1.5px 11px),
    linear-gradient(180deg, #5a3a22 0%, #432a18 52%, #33200f 100%);
  border: 1px solid #2a1a0e;
  box-shadow:
    0 26px 52px -30px rgba(20,10,4,.9),
    inset 0 1px 0 rgba(255,236,190,.2),
    inset 0 0 0 6px rgba(0,0,0,.12);
}
/* Messing-Linie innen + vier Schrauben (Deko, durchlaessig fuer Klicks) */
.klang_body .klang_stage::before {
  content: ""; position: absolute; inset: 6px;
  border-radius: .6rem;
  border: 1px solid rgba(200,162,74,.3);
  pointer-events: none;
  background-image:
    radial-gradient(circle at 0 0, #e8c983 0 2.6px, rgba(0,0,0,.35) 2.8px, rgba(0,0,0,0) 3.4px),
    radial-gradient(circle at 100% 0, #e8c983 0 2.6px, rgba(0,0,0,.35) 2.8px, rgba(0,0,0,0) 3.4px),
    radial-gradient(circle at 0 100%, #e8c983 0 2.6px, rgba(0,0,0,.35) 2.8px, rgba(0,0,0,0) 3.4px),
    radial-gradient(circle at 100% 100%, #e8c983 0 2.6px, rgba(0,0,0,.35) 2.8px, rgba(0,0,0,0) 3.4px);
  background-repeat: no-repeat;
}
.klang_body .klang_stage > * { position: relative; }
.klang_body .klang_stage [hidden] { display: none !important; }

/* Aufgabe: ein Notenzettel auf dem Pult (Serifenschrift wie Notendruck) */
.klang_body .klang_aufgabe {
  margin: .1rem auto .85rem;
  max-width: 44rem;
  min-height: 2.4em;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 1.1rem; font-weight: 600; line-height: 1.45;
  color: var(--kl-tinte);
  background: linear-gradient(180deg, #fdf9ee 0%, #f6eed6 70%, #eee2c4 100%);
  border: 1px solid var(--kl-papier-kante);
  border-radius: .3rem;
  padding: .5rem 1rem .55rem;
  box-shadow: var(--kl-schatten-papier), inset 0 0 0 1px rgba(255,255,255,.75);
  /* angedeutete Nadel oben (Deko im Hintergrund der Karte) */
  background-image:
    radial-gradient(circle at 50% 100%, rgba(200,162,74,.22), rgba(200,162,74,0) 60%),
    linear-gradient(180deg, #fdf9ee 0%, #f6eed6 70%, #eee2c4 100%);
}

/* Lied-Auswahl (nur im Modus "Nachspielen"): Fach auf dem Pult */
.klang_body .klang_liedzeile {
  display: flex; gap: .55rem; align-items: center; justify-content: center;
  flex-wrap: wrap; margin: 0 auto .85rem;
  width: fit-content; max-width: 100%;
  padding: .5rem .75rem;
  background: rgba(0,0,0,.26);
  border: 1px solid rgba(200,162,74,.35);
  border-radius: .45rem;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.45);
}
.klang_body .klang_liedzeile label {
  font-weight: 700; font-size: .86rem; color: var(--kl-hell);
  letter-spacing: .04em;
}
.klang_body .klang_liedzeile .jupi_select {
  min-height: 40px; border-radius: .35rem;
  color: var(--kl-tinte);
  background: linear-gradient(180deg, #fdf9ee, #ecdfc0);
  border: 1px solid #b9a37a;
}
.klang_body .klang_liedzeile .jupi_btn {
  min-height: 40px; border-radius: .35rem;
  color: #2f2110;
  background: var(--kl-messing-flaeche);
  border: 1px solid #7d5f24;
  box-shadow: 0 2px 5px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.6);
}
.klang_body .klang_liedzeile .jupi_btn:hover {
  filter: brightness(1.07); transform: translateY(-1px);
}

/* Fortschritt: Messing-Punkte auf dem Holz */
.klang_body .klang_fortschritt {
  display: flex; gap: .34rem; justify-content: center; flex-wrap: wrap;
  min-height: 1rem; margin-bottom: .75rem;
}
.klang_body .klang_punkt {
  width: .82rem; height: .82rem; border-radius: 50%;
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(240,215,154,.5);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
  display: inline-block;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.klang_body .klang_punkt_ok {
  background: radial-gradient(circle at 34% 30%, #f8e8b8, #c8a24a 70%, #9a7628);
  border-color: #f0d79a;
  box-shadow: 0 0 8px rgba(240,215,154,.55);
  transform: scale(1.16);
}

/* --- Notenpult: das Papier mit der geltenden Note -------------------- */
.klang_body .klang_notenpult {
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  margin: 0 auto .95rem;
  position: relative;
}
.klang_body .klang_noten {
  width: min(100%, 23rem);
  aspect-ratio: 260 / 118;   /* genau der Ausschnitt der Notenzeichnung */
  background: linear-gradient(180deg, #fdf9ee 0%, #f7efd8 100%);
  border: 1px solid var(--kl-papier-kante);
  border-bottom: 5px solid #b8913f;
  border-radius: .35rem;
  padding: .5rem .65rem;
  box-shadow:
    0 14px 26px -18px rgba(40,24,8,.85),
    inset 0 0 0 1px rgba(255,255,255,.8),
    inset 0 -14px 20px -18px rgba(120,90,40,.4);
}
.klang_body .klang_noten svg { width: 100%; height: auto; display: block; }
.klang_body .klang_linie { stroke: #7c6a52; stroke-width: 2; }
.klang_body .klang_hals { stroke: #2a1e13; stroke-width: 3; }
.klang_body .klang_notenkopf { fill: #2a1e13; }
.klang_body .klang_schluessel { font-size: 64px; fill: #2a1e13; }
.klang_body .klang_vorzeichen { font-size: 28px; font-weight: 800; fill: #2a1e13; }
/* Die Pultkante sitzt am PAPIER: das Blatt liegt auf einem schmalen
   Messing-Brett (unten dicker Rand + Schlagschatten) - kein freier Balken. */
.klang_body .klang_notenname {
  min-height: 1.4em; font-weight: 700; font-size: 1rem; text-align: center;
  color: var(--kl-tinte);
}
.klang_body .klang_notenname:not(:empty) {
  display: inline-block; padding: .18rem .95rem; border-radius: .3rem;
  background: linear-gradient(180deg, #fdf9ee, #eee2c4);
  border: 1px solid var(--kl-papier-kante);
  box-shadow: 0 3px 8px -5px rgba(40,24,8,.8);
}

/* --- Klavier im Ebenholz-Gehaeuse ----------------------------------- */
.klang_body .klang_klavierrahmen {
  position: relative;
  width: fit-content; max-width: 100%;
  margin: .1rem auto .95rem;
  padding: 16px 12px 18px;
  border-radius: .55rem .55rem .8rem .8rem;
  background:
    linear-gradient(180deg, rgba(255,236,190,.14), rgba(255,236,190,0) 30%),
    linear-gradient(180deg, #2b211a 0%, #14100c 55%, #070504 100%);
  border: 1px solid #0a0806;
  border-top: 2px solid #b08a3d;   /* Messing-Scharnier */
  box-shadow:
    0 26px 42px -26px rgba(0,0,0,.95),
    inset 0 1px 0 rgba(255,236,190,.22),
    inset 0 -4px 10px rgba(0,0,0,.6);
}
/* roter Filzstreifen ueber der Klaviatur (Deko) */
.klang_body .klang_klavierrahmen::before {
  content: "";
  position: absolute; left: 14px; right: 14px; top: 9px; height: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, #b23a3f 0%, #7c1d21 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.6);
  pointer-events: none;
}
.klang_body .klang_piano {
  position: relative;
  width: max-content; max-width: 100%;
  overflow-x: auto; overflow-y: hidden;
  border-radius: 0 0 .5rem .5rem;
}
/* Die weisse Reihe traegt die schwarzen Tasten (Prozentwerte der Reihe -
   game.js haengt sie deshalb hier ein; nie zurueck ins Klavier legen). */
.klang_body .klang_weissreihe { display: flex; gap: 0; position: relative; width: max-content; }
.klang_body .klang_taste {
  cursor: pointer; font-family: inherit; box-sizing: border-box;
  touch-action: none; user-select: none; -webkit-user-select: none;
  transition: transform .06s ease, background-color .12s ease, box-shadow .12s ease;
}
.klang_body .klang_weiss {
  flex: 0 0 48px; height: 190px;
  border: 0; border-right: 1px solid #b7a888;
  border-radius: 0 0 .4rem .4rem;
  background: linear-gradient(180deg, #fffdf4 0%, #f7f0dc 64%, #e7dcc0 100%);
  box-shadow: inset 0 -10px 14px -9px rgba(70,50,20,.45), inset 0 1px 0 #fff;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding-bottom: .45rem; gap: .15rem; color: #3a2a16;
}
.klang_body .klang_weiss.klang_weiss_letzte { border-right: 0; }
.klang_body .klang_weiss.klang_aktiv {
  background: linear-gradient(180deg, #d9efdb 0%, #8fc79a 100%);
  transform: translateY(2px);
  box-shadow: inset 0 2px 6px rgba(20,60,30,.35);
}
.klang_body .klang_weiss.klang_soll {
  background: linear-gradient(180deg, #fdf0c8 0%, #e9c46a 100%);
  box-shadow: inset 0 0 0 2px var(--kl-messing), inset 0 -10px 14px -9px rgba(70,50,20,.4);
  animation: klang_puls 1s ease infinite;
}
.klang_body .klang_schwarz {
  position: absolute; top: 0; height: 112px; z-index: 2;
  border: 0; border-radius: 0 0 .4rem .4rem;
  background: linear-gradient(180deg, #3a3129 0%, #1b1610 46%, #080604 100%);
  box-shadow: 0 8px 14px -4px rgba(0,0,0,.85),
              inset 0 1px 0 rgba(255,236,190,.3),
              inset 0 -3px 6px rgba(0,0,0,.6);
  color: #f6ecd6;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding-bottom: .4rem; gap: .1rem;
}
.klang_body .klang_schwarz.klang_aktiv {
  background: linear-gradient(180deg, #6fbe7c 0%, #2f7d3f 100%);
  transform: translateY(2px);
}
.klang_body .klang_schwarz.klang_soll {
  background: linear-gradient(180deg, #f2d38a 0%, #a8812f 100%);
  color: #241a08;
  box-shadow: 0 6px 12px -4px rgba(0,0,0,.8),
              inset 0 0 0 2px #f8e8b8;
  animation: klang_puls 1s ease infinite;
}
.klang_body .klang_falsch { outline: 3px solid #d9483f; outline-offset: -3px; }
.klang_body .klang_tastenname { font-weight: 800; font-size: .78rem; line-height: 1; }
.klang_body .klang_schwarz .klang_tastenname { font-size: .64rem; }
/* Computer-Tasten-Hinweis als kleines Tasten-Chip auf der Taste */
.klang_body .klang_tastenhint {
  font-size: .6rem; font-weight: 700; line-height: 1.15;
  border: 1px solid currentColor; border-radius: .22rem;
  padding: 0 .22rem; opacity: .65;
}
.klang_body .klang_schwarz .klang_tastenhint { opacity: .75; background: rgba(255,236,190,.12); }

/* --- Tastatur-Legende: Messing-Schild zum Aufklappen ---------------- */
.klang_body .klang_tasteninfo { margin: .1rem auto .7rem; max-width: 48rem; text-align: center; }
.klang_body .klang_tasteninfo > summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .74rem; font-weight: 800; letter-spacing: .06em;
  color: var(--kl-hell);
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(200,162,74,.45);
  border-radius: .35rem; padding: .4rem .95rem; min-height: 34px;
  transition: background-color .12s ease, color .12s ease;
}
.klang_body .klang_tasteninfo > summary::-webkit-details-marker { display: none; }
.klang_body .klang_tasteninfo > summary::after { content: "▾"; font-size: .72rem; opacity: .7; }
.klang_body .klang_tasteninfo[open] > summary {
  color: #2f2110; background: var(--kl-messing-flaeche);
}
.klang_body .klang_tasteninfo[open] > summary::after { content: "▴"; }
.klang_body .klang_tastaturhinweis {
  margin: .55rem 0 0; font-size: .76rem; line-height: 1.6;
  color: var(--kl-hell-leise); text-align: center;
}

/* --- Tipp/Weiter und die Meldung ------------------------------------ */
.klang_body .klang_btns_row {
  display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap;
  margin: .5rem 0 .3rem;
}
.klang_body .klang_btns_row .jupi_btn {
  min-height: 44px; padding: .55rem 1.35rem; border-radius: .4rem;
  font-weight: 800; letter-spacing: .01em;
  border-bottom: 3px solid #6d5219;
  box-shadow: 0 3px 8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.klang_body .klang_btns_row .jupi_btn.jupi_btn_alt {
  color: #2f2110;
  background: linear-gradient(180deg, #fdf8ea 0%, #eee2c6 70%, #e0d2b2 100%);
  border-color: #b9a37a; border-bottom-color: #a48b5c;
}
.klang_body .klang_btns_row .jupi_btn:not(.jupi_btn_alt) {
  color: #2b1d0d;
  background: var(--kl-messing-flaeche);
  border-color: #7d5f24; border-bottom-color: #6d5219;
}
.klang_body .klang_btns_row .jupi_btn:hover {
  transform: translateY(-1px); filter: brightness(1.05);
  box-shadow: 0 6px 12px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.7);
}
.klang_body .klang_btns_row .jupi_btn:active { transform: translateY(1px); border-bottom-width: 1px; }
/* Meldung: Messingschild unter der Klaviatur */
.klang_body .klang_msg {
  text-align: center; min-height: 1.6em; margin: .45rem auto .1rem;
  font-weight: 700; font-size: .92rem; color: var(--kl-hell);
}
.klang_body .klang_msg:not(:empty) {
  width: fit-content; max-width: 100%;
  padding: .35rem .95rem;
  border-radius: .3rem;
  color: #2f2110;
  background: linear-gradient(180deg, #f3e2b6 0%, #dcc188 100%);
  border: 1px solid #9c7a34;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 3px 8px -4px rgba(0,0,0,.6);
}
.klang_body .klang_msg_ok { color: #1d5c2b; }
.klang_body .klang_msg_err { color: #8c1d18; }

/* --- Notenblatt: das Papier auf dem Pult ---------------------------
   Das Blatt zeichnet game.js als richtiges Notenblatt (mehrere Systeme,
   Taktstriche, Notenformen). Hier kommt nur das Papier drumherum: weiss
   bleibt es in beiden Themes (Papier im Lampenlicht), lange Aufnahmen
   scrollen im Blatt statt die Seite zu sprengen. */
.klang_body .klang_blatt_block { margin-top: 1.15rem; }
.klang_body .klang_blatt {
  max-width: 760px; margin: .1rem auto 0; min-height: 120px;
  max-height: 68vh; overflow: auto;
  background-color: #ffffff;
  background-image: linear-gradient(180deg, #fffdf6 0%, #fbf5e4 100%);
  border: 1px solid var(--kl-papier-kante);
  border-radius: .3rem;
  padding: .5rem .7rem;
  box-shadow:
    0 14px 26px -18px rgba(40,24,8,.85),
    inset 0 0 0 1px rgba(255,255,255,.8),
    inset 0 0 0 5px rgba(200,162,74,.12);
}
.klang_body .klang_blatt svg { width: 100%; height: auto; display: block; }
.klang_body .klang_blattlinie { stroke: #7c6a52; stroke-width: 2; }
.klang_body .klang_blatthals { stroke: #2a1e13; stroke-width: 2.6; }
.klang_body .klang_blattfahne {
  fill: none; stroke: #2a1e13; stroke-width: 2.4; stroke-linecap: round;
}
.klang_body .klang_blattnote { fill: #2a1e13; }
.klang_body .klang_blattnote_hohl { fill: none; stroke: #2a1e13; stroke-width: 2.4; }
.klang_body .klang_blattaktiv { fill: var(--kl-gruen); }
.klang_body .klang_blattnote_hohl.klang_blattaktiv {
  fill: none; stroke: var(--kl-gruen);
}
.klang_body .klang_blattpause { fill: #2a1e13; }
.klang_body .klang_blattclef path {
  fill: none; stroke: #2a1e13; stroke-width: 9.6; stroke-linecap: round;
}
.klang_body .klang_blattclef circle { fill: #2a1e13; stroke: none; }
.klang_body .klang_blattmeter {
  font-size: 20px; font-weight: 800; fill: #2a1e13;
  text-anchor: middle; font-family: Georgia, "Times New Roman", serif;
}
.klang_body .klang_blattvorzeichen { font-size: 22px; font-weight: 800; fill: #2a1e13; }
.klang_body .klang_blatttext { fill: #8a7a5f; font-size: 20px; }

/* ---------------------------------------------------------------------
   6. Rundenende: Urkunde mit Messing-Doppelrahmen
   --------------------------------------------------------------------- */
.klang_body .klang_done {
  position: relative;
  text-align: center; margin-top: 1rem;
  padding: 1.5rem 1.1rem 1.4rem;
  border-radius: .6rem;
  background: linear-gradient(180deg, #fdf9ee 0%, #f4ead1 100%);
  border: 1px solid var(--kl-papier-kante);
  box-shadow:
    0 22px 44px -28px rgba(30,18,6,.9),
    inset 0 0 0 1px rgba(255,255,255,.8),
    inset 0 0 0 7px rgba(200,162,74,.16);
  color: var(--kl-tinte);
}
.klang_body .klang_done h3 {
  margin: .1rem 0 .2rem; font-size: 1.3rem; font-weight: 800;
  color: #5a3d12; letter-spacing: .01em;
}
.klang_body .klang_done p { margin: .3rem 0 .9rem; }
.klang_body .klang_sterne {
  font-size: 2.6rem; letter-spacing: .18em; margin: .2rem 0 .4rem;
  color: #b8913f;
}
.klang_body .klang_done .jupi_btn {
  min-height: 44px; padding: .55rem 1.4rem; border-radius: .4rem;
  color: #2b1d0d; background: var(--kl-messing-flaeche);
  border: 1px solid #7d5f24; border-bottom: 3px solid #6d5219;
  box-shadow: 0 3px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.6);
}

/* ---------------------------------------------------------------------
   7. ?-Hilfe-Fenster (Goldene Negativ-Regel 3.13.4)
   ---------------------------------------------------------------------
   Anleitung, Merkwissen und Ueber wohnen im Fenster, nicht unter dem
   Werkzeug. z-index 60 - ueber dem Sticky-Kopf mit 50, sonst faengt die
   Leiste den Klick aufs X ab. */
.klang_body .klang_hilfe_grund {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: rgba(12,7,4,.74);
  backdrop-filter: blur(2px);
}
.klang_body .klang_hilfe_grund[hidden] { display: none; }
.klang_body .klang_hilfe_karte {
  position: relative;
  background: linear-gradient(180deg, #fffdf6 0%, #faf3e2 100%);
  color: var(--kl-tinte);
  border: 1px solid var(--kl-papier-kante);
  border-radius: .5rem;
  box-shadow:
    0 26px 60px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.8),
    inset 0 0 0 7px rgba(200,162,74,.18);
  padding: 1.1rem 1.2rem 1.2rem;
  max-width: 44rem; width: 100%;
  max-height: 84vh; overflow: auto;
}
.klang_body .klang_hilfe_titel {
  margin: 0 0 .7rem; font-size: 1.12rem; font-weight: 800; color: #5a3d12;
}
.klang_body .klang_hilfe_untertitel {
  margin: .95rem 0 .4rem; font-size: 1rem; font-weight: 800; color: #5a3d12;
}
.klang_body .klang_hilfe_zu {
  position: absolute; top: .6rem; right: .6rem;
  width: 40px; height: 40px;                    /* Touch-Ziel 3.13.5 */
  display: inline-flex; align-items: center; justify-content: center;
  color: #3a2a16;
  background: linear-gradient(180deg, #fdf8ea, #e6dac0);
  border: 1px solid #b9a37a;
  border-radius: .35rem;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.klang_body .klang_hilfe_zu:hover { background: #f3e8cc; border-color: #9c7a34; }
.klang_body .klang_knopf_svg { width: 20px; height: 20px; display: block; }
.klang_body .klang_hilfe_liste { margin: .4rem 0 .2rem; padding-left: 1.4rem; }
.klang_body .klang_hilfe_liste li {
  margin: .3rem 0; line-height: 1.55; font-size: .92rem; color: #4a3a26;
}
.klang_body .klang_hilfe_text {
  margin: .3rem 0 .6rem; font-size: .95rem; line-height: 1.6; color: #4a3a26;
}
.klang_body .klang_lernziel {
  background: rgba(200,162,74,.14);
  border-left: 4px solid var(--kl-messing);
  border-radius: .25rem;
  padding: .55rem .75rem;
  margin: .7rem 0 .2rem;
  font-size: .94rem; line-height: 1.6;
  color: #3b2c1e;
}

/* ---------------------------------------------------------------------
   8. Fuss (3.13.2a): auf der dunklen Vertaefelung, heller Text
   --------------------------------------------------------------------- */
.klang_body .jupi_footer { padding: .9rem 1rem 1.1rem; }
.klang_body .jupi_footer_text {
  text-align: center; font-size: .8rem; line-height: 1.6;
  color: #e3d4b6; text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
.klang_body .jupi_footer_text a {
  color: #f0d79a; font-weight: 700; text-decoration: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
.klang_body .jupi_footer_text a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   9. Fokusringe: 2 px, auf allem Bedienbaren (3.13.5)
   --------------------------------------------------------------------- */
.klang_body .klang_app_link:focus-visible,
.klang_body .klang_werk_knopf:focus-visible,
.klang_body .klang_hilfe_zu:focus-visible,
.klang_body .klang_taste:focus-visible,
.klang_body .klang_filelabel:focus-visible,
.klang_body .klang_tasteninfo > summary:focus-visible,
.klang_body .klang_leiste .jupi_nav_back:focus-visible {
  outline: 2px solid #f0d79a;
  outline-offset: 2px;
}
/* Auf Papier braucht der Ring eine dunkle Farbe (sonst unsichtbar) */
.klang_body .klang_hilfe_zu:focus-visible,
.klang_body .klang_tasteninfo > summary:focus-visible { outline-color: #7d5f24; }

/* ---------------------------------------------------------------------
   10. Dunkelmodus: dieselbe Stube bei Lampenlicht
   ---------------------------------------------------------------------
   Die Hoelzer werden dunkler, die Schrift auf Holz heller. PAPIERE
   (Notenzeile, Notenblatt, Aufgabe, Meldung, Urkunde, Hilfe) bleiben
   hell wie im Tageslicht - sie liegen vor der Kulisse im Lampenlicht. */
/* Kopfleiste: jupi.css setzt im Dunkelmodus `html[data-theme="dark"] .jupi_header`
   - die Klavier-Leiste muss in BEIDEN Themes dieselbe sein (Spezifitaet 0,3,0). */
html[data-theme="dark"] .klang_body .klang_leiste {
  background:
    linear-gradient(180deg, rgba(255,236,190,.09), rgba(255,236,190,0) 44%),
    linear-gradient(180deg, #241b15 0%, #120d0a 56%, #070504 100%);
  border-bottom-color: #8a6a2a;
  box-shadow: 0 10px 24px -14px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,236,190,.14);
}
/* Messing-Drehknoepfe: auch im Dunkelmodus Messing, nicht Plattform-Grau. */
html[data-theme="dark"] .klang_body .klang_werk_knopf {
  color: #2b1d0d;
  background: radial-gradient(circle at 34% 28%, #f2dcab 0%, #d3ac5c 46%, #9a7628 100%);
  border-color: #6d5219;
  box-shadow: 0 3px 7px rgba(0,0,0,.6), inset 0 1px 1px rgba(255,255,255,.55);
}
html[data-theme="dark"] .klang_body .klang_werk_knopf:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 12px rgba(0,0,0,.6), inset 0 1px 1px rgba(255,255,255,.65);
}
html[data-theme="dark"] .klang_body .klang_ebenh,
html[data-theme="dark"] .klang_body .klang_kasten {
  background:
    linear-gradient(180deg, rgba(255,236,190,.06), rgba(255,236,190,0) 32%),
    linear-gradient(180deg, #221a15 0%, #161110 58%, #0d0908 100%);
}
html[data-theme="dark"] .klang_body .klang_stage {
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.08) 0 1.5px, rgba(255,236,190,0) 1.5px 11px),
    linear-gradient(180deg, #442c1a 0%, #33200f 52%, #25170b 100%);
}
html[data-theme="dark"] .klang_body .klang_block_titel,
html[data-theme="dark"] .klang_body .klang_wz_feld > label {
  color: #f2dcab;
}
html[data-theme="dark"] .klang_body .klang_tastaturhinweis { color: #cdbd9d; }
html[data-theme="dark"] .klang_body .klang_punkt { border-color: rgba(240,215,154,.45); }
html[data-theme="dark"] .klang_body .klang_msg { color: #f6ecd6; }
html[data-theme="dark"] .klang_body .klang_msg_ok { color: #a5d6a7; }
html[data-theme="dark"] .klang_body .klang_msg_err { color: #ff8a80; }
html[data-theme="dark"] .klang_body .klang_hilfe_grund { background: rgba(4,2,1,.8); }
/* Knoepfe, die im hellen Thema gruen waren, bleiben als Bedeutung gruen -
   hier nur die Kontrast-Absicherung auf dunklem Holz. */
html[data-theme="dark"] .klang_body .klang_weiss { color: #3a2a16; }

/* ---------------------------------------------------------------------
   11. Responsiv
   --------------------------------------------------------------------- */
@media (max-width: 68rem){
  /* Zu schmal fuer zwei Spalten: die Werkzeuge wandern UNTER das Pult (das
     Klavier ist wichtiger), die Punkte-Schilder bleiben oben. */
  .klang_body .klang_werkbank { grid-template-columns: minmax(0,1fr); }
  .klang_body .klang_spalte_links { display: contents; }
  .klang_body .klang_punkte { order: 1; }
  .klang_body .klang_stage { order: 2; }
  .klang_body .klang_kasten {
    order: 3;
    display: grid; gap: .8rem; align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  }
}
/* Schon ab 62 rem (992 px) bricht die Leiste um: bei 768 px kollidierte die
   Sprachwahl (17 rem) mit der Marken-Pille in der Mitte, weil der 1fr-Spalte
   der Platz fehlte. Umbrechen ist ehrlicher als Ueberlappen. */
@media (max-width: 62rem){
  .klang_body .klang_leiste {
    display: flex; flex-wrap: wrap;
    justify-content: space-between;
    padding: .2rem .45rem .55rem; gap: .15rem .35rem;
  }
  .klang_body .klang_app_rechts { margin-inline-start: auto; }
  .klang_body .klang_app_titel { font-size: 1rem; }
  .klang_body .klang_app_logo { height: 1.55rem; }
}
@media (max-width: 46rem){
  .klang_body .klang_leiste {
    display: flex; flex-wrap: wrap;
    padding: .2rem .45rem .55rem; gap: .15rem .3rem;
  }
  .klang_body .klang_app_titel { font-size: .96rem; }
  .klang_body .klang_app_logo { height: 1.5rem; }
  .klang_body .klang_werkzeugleiste { padding: .6rem .7rem .7rem; gap: .55rem .7rem; }
  .klang_body .klang_wz_feld { flex: 1 1 8rem; }
  .klang_body .klang_wz_feld .jupi_select { min-width: 0; width: 100%; }
  .klang_body .klang_wz_werkzeuge { margin-inline-start: 0; }
  .klang_body .klang_stage { padding: .85rem .7rem 1rem; }
  .klang_body .klang_aufgabe { font-size: 1rem; padding: .45rem .7rem; }
  .klang_body .klang_weiss { height: 158px; }
  .klang_body .klang_schwarz { height: 96px; }
  .klang_body .klang_noten { width: min(100%, 18rem); }
  /* Punkte-Schilder: drei nebeneinander, damit das Pult schnell erreichbar ist */
  .klang_body .klang_punkte { grid-template-columns: repeat(3, 1fr); }
  .klang_body .klang_stat_aufgabe { grid-column: auto; }
  .klang_body .klang_stat { padding: .45rem .3rem; }
  .klang_body .klang_stat_wert { font-size: 1.25rem; }
  .klang_body .klang_stat_aufgabe .klang_stat_wert { font-size: 1.1rem; }
  .klang_body .klang_stat_label { font-size: .58rem; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce){
  .klang_body .klang_weiss.klang_soll,
  .klang_body .klang_schwarz.klang_soll { animation: none; }
  .klang_body .klang_taste { transition: none; }
}