/* ============================================================
   Audio-Werkstatt - eigene Stile (Praefix aw_)

   GUI 3.13 Stil-Pass 08.11.2026 - DIE WELT: "Tonstudio"

   Das Thema kommt aus der TAETIGKEIT (Regel 3.13.6b), nicht aus dem
   Titel: Hier wird ein Beat gewaehlt, die eigene Stimme aufgenommen,
   an der roten Linie geschnitten, gemischt und als WAV gespeichert.
   Der Ort ist deshalb der REGIERAUM eines Tonstudios - Mischpult,
   Studiorack, Akustiksegel, Mikrofon am Galgen. Kein Konzertsaal und
   keine Instrumentenbuehne (das ist die Klangwerkstatt).

   Die vier Bausteine nach 3.13.6:
     1. Kulisse   assets/kulisse.svg + assets/kulisse-nacht.svg
                  (je EIN gestrecktes Bild, cover/no-repeat/fixed,
                  15.01.2026, Generator .zcode/audio-werkstatt-kulisse.cjs)
     2. Leiste    dunkle Studiokonsole aus Petrol + Messing (drei Zonen)
     3. Buehne    die Spuren liegen auf einem Pultbrett unter dem Licht
     4. HUD       Uhr als Bandmaschinen-Zaehler, Pegel als LED-Kette,
                  Meldung als Regie-Notiz, Dialoge als Aufnahme-Blatt

   WARUM DIE REGELN SO AUSSEHEN:
   - Alles haengt an `body.aw` (bzw. `body.jupi.aw`), damit keine Regel
     in ein anderes Spiel leakt. Die Plattform (jupi.css) setzt an
     mehreren Stellen `!important` - eigene Regeln mit hoeherer
     Spezifitaet gewinnen dagegen.
   - Bedienziele bleiben mindestens 40 px hoch (3.13.5); die alten
     Messungen aus Kapitel 7 der Ordner-AGENTS muessen gueltig bleiben.
   - Dark Mode = dasselbe Studio bei Nacht: dieselbe Geometrie, eigene
     Nachtszene, Papiere (Aufnahme-Blatt, Notiz) bleiben hell.

   Die Welt steht in zwei Abschnitten, damit sie sich am Stueck lesen
   laesst: erst die Welt (Kulisse, Leiste, Karten), dann das Werkzeug
   (Zeitleiste, Clips, Inspektor, Dialoge).
   ============================================================ */

/* ---------- 1. Farben der Welt (nur in diesem Paket) ---------- */
body.jupi.aw {
  --aw-petrol: #123039;          /* Studiowand, Leistenkoerper */
  --aw-petrol-hell: #17414b;
  --aw-petrol-tief: #0a1d23;
  --aw-pult: #26343a;            /* Pultflaeche */
  --aw-pult-hell: #31434a;
  --aw-pult-tief: #141e22;
  --aw-papier: #f6ecd6;          /* Aufnahme-Blatt, Notizzettel */
  --aw-papier-hell: #fffaf0;
  --aw-papier-tief: #e9dcc0;
  --aw-kante: #c9b48c;
  --aw-tinte: #1f2a30;
  --aw-messing: #c69a4e;         /* Kante, Ringe, Ziffernrahmen */
  --aw-messing-hell: #e8cb87;
  --aw-messing-tief: #8a6524;
  --aw-led: #7ee0c8;             /* Pegel, Betriebslicht */
  --aw-led-warm: #f6b71d;        /* Aufnahme, Zeitmarken */
  --aw-led-rot: #ff7a59;         /* Zeiger, Warnung */
  --aw-gruen: #2f8f4a;
  --aw-schrift: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

/* ---------- 2. Seitenkulisse ------------------------------------------
   ZWEI Szenen desselben Studios (je EIN Bild, keine Kachel, keine
   Wiederholung - Regel 3.13.7 Weg A, Generator
   `.zcode/audio-werkstatt-kulisse.cjs`):
      assets/kulisse.svg        Studio bei Tag  (helles Theme)
      assets/kulisse-nacht.svg  Studio bei Nacht (dark Theme)
   Beide 1600 x 1000, `no-repeat center / cover fixed`. Die Mitte bleibt
   ruhig - dort liegt die Buehne; die Motive sitzen an den Raendern. */
body.jupi.aw {
  min-height: 100vh;
  color: var(--aw-papier);
  /* Tag: die Studioszene bleibt sichtbar, nur ein weicher Schleier haelt
     den Kontrast fuer Konsole und Buehne. Die Mitte des Bildes ist ruhig -
     dort steht die Buehne, die Motive sitzen an den Raendern. */
  background:
    radial-gradient(760px 420px at 50% 6%, rgba(10, 29, 35, .14) 0%, transparent 68%),
    linear-gradient(180deg, rgba(4, 16, 21, .16) 0%, rgba(4, 14, 18, .30) 60%, rgba(3, 10, 13, .44) 100%),
    url("assets/kulisse.svg") center center / cover no-repeat fixed,
    #14292f;
}
html[data-theme="dark"] body.jupi.aw {
  background:
    radial-gradient(760px 420px at 50% 6%, rgba(2, 8, 11, .10) 0%, transparent 68%),
    linear-gradient(180deg, rgba(1, 6, 8, .12) 0%, rgba(1, 5, 7, .22) 60%, rgba(1, 4, 6, .32) 100%),
    url("assets/kulisse-nacht.svg") center center / cover no-repeat fixed,
    #060f12;
}

/* Kein weisser Plattform-Kasten - die Kulisse geht bis an den Rand. */
body.jupi.aw .jupi_container > .jupi_main { background: transparent; }
body.jupi.aw .jupi_main { max-width: 96rem; padding: .85rem 1rem 1.2rem; }
body.jupi.aw .jupi_container > .jupi_footer {
  background: transparent;
  border-top: 0;
  border-radius: 0;
  margin: 1.2rem auto 0;
  padding: .9rem 1rem 1.1rem;
}
body.jupi.aw .jupi_footer p { color: rgba(246, 236, 214, .72); font-family: var(--aw-schrift); }
body.jupi.aw .jupi_footer a { color: var(--aw-messing-hell); }
body.jupi.aw .jupi_footer a:hover { color: #ffe6b4; text-decoration: underline; }

/* Leisten-Regel (3.13.2a): Kopf oben, Fuss am Dokumentende. */
body.jupi.aw .jupi_container {
  display: flex !important;
  flex-direction: column;
  min-height: 100dvh;
}
body.jupi.aw .jupi_container > .jupi_header { flex: 0 0 auto; }
body.jupi.aw .jupi_container > .jupi_main { flex: 1 0 auto; width: 100%; }
body.jupi.aw .jupi_container > .jupi_footer { margin-top: auto; }

/* ---------- 3. Die Leiste: Studiokonsole ------------------------------
   Drei Zonen bleiben (3.13.2): links "Alle Spiele", mittig Logo + Name,
   rechts Sprachwahl + Dark-Mode-Pill. Petrol wie die Studiowand, mit
   einer Messingkante zum Pult hin - dieselbe Kante, die auch Pult und
   Buehne tragen, damit alles ein Material ist. */
body.jupi.aw .aw_app_leiste {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center;
  gap: .3rem .6rem;
  margin: 0 !important;
  padding: .3rem .7rem .45rem !important;
  border: 0;
  border-radius: 0 !important;
  background:
    radial-gradient(130% 130% at 16% -60%, rgba(255, 255, 255, .12) 0%, transparent 58%),
    linear-gradient(180deg, var(--aw-petrol-hell) 0%, var(--aw-petrol) 55%, #0b232a 100%) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .10);
  font-family: var(--aw-schrift);
}
/* Messingkante unter der Konsole */
body.jupi.aw .aw_app_leiste::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(180deg, var(--aw-messing-hell), var(--aw-messing) 46%, var(--aw-messing-tief));
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
  pointer-events: none;
}

/* "Alle Spiele": Etikett auf der Konsole. */
body.jupi.aw .aw_app_leiste .jupi_nav { justify-self: start; min-width: 0; }
body.jupi.aw .aw_app_leiste .jupi_nav_opt {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: .3rem .7rem;
  border: 2px solid var(--aw-petrol-tief);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--aw-papier-hell) 0%, #f0e3c7 100%);
  color: var(--aw-tinte);
  font-size: .84rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 3px 0 var(--aw-petrol-tief), 0 6px 12px rgba(0, 0, 0, .30);
  transition: transform .12s, box-shadow .12s, background .12s;
}
body.jupi.aw .aw_app_leiste .jupi_nav_opt:hover {
  background: linear-gradient(180deg, #fff, #f8efdc);
  transform: translateY(-1px);
  box-shadow: 0 4px 0 var(--aw-petrol-tief), 0 8px 14px rgba(0, 0, 0, .34);
}
body.jupi.aw .aw_app_leiste .jupi_nav_opt:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--aw-petrol-tief);
}

/* Die Marke: Logo auf einer kleinen Messing-Plakette, daneben der Name.
   min-height 40 px, weil sie ein Link in die Startseite ist (3.13.5). */
body.jupi.aw .aw_app_link {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  min-height: 2.5rem;
  padding: .12rem .62rem .12rem .16rem;
  border: 1px solid rgba(246, 236, 214, .26);
  border-radius: 999px;
  background: rgba(9, 28, 34, .55);
  color: #fdf7ea;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
body.jupi.aw .aw_app_link:hover { background: rgba(16, 44, 52, .8); border-color: rgba(232, 203, 135, .55); }
body.jupi.aw .aw_app_logo {
  display: block;
  width: 1.95rem;
  height: 1.95rem;
  padding: 2px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fffdf6, #eeddb9 60%, #d6bf92);
  box-shadow: 0 0 0 2px var(--aw-messing-tief), 0 2px 6px rgba(0, 0, 0, .45);
  object-fit: contain;
}
body.jupi.aw .aw_app_titel {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: #fdf7ea;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}

/* Rechts: Sprachwahl als dunkles Geraetefeld, Theme-Pill 74x40 (3.13.2). */
body.jupi.aw .aw_app_rechts {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;
}
body.jupi.aw .aw_app_rechts .jupi_sprachen_wahl { min-width: 0; }
body.jupi.aw .aw_app_rechts .jupi_sprachen_select {
  height: 40px;
  max-width: 12rem;
  padding: .2rem .55rem;
  border: 2px solid var(--aw-petrol-tief);
  border-radius: 8px;
  background: #0e262d;
  color: #f6ecd6;
  font-family: var(--aw-schrift);
  font-size: .84rem;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}
body.jupi.aw .aw_app_rechts .jupi_sprachen_select option { color: var(--aw-tinte); background: var(--aw-papier); }
body.jupi.aw .aw_app_rechts .jupi_theme_switch {
  width: 74px;
  height: 40px;
  min-width: 74px;
  padding: 0;
  background: #0e262d !important;
  border: 2px solid var(--aw-petrol-tief) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 6px rgba(0, 0, 0, .38) !important;
}
body.jupi.aw .aw_app_rechts .jupi_theme_switch:hover { background: #15343d !important; }

/* ---------- 4. Die Werkzeugleiste: die Regie-Konsole ------------------
   Zwei feste Reihen (kein Umbruch, siehe Messungen Kapitel 7):
   oben Transport + Ausgabe + Ton/Hilfe, unten Aufnahme + Bearbeiten. */
.aw_werkzeug {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: .55rem;
  padding: .5rem .7rem .55rem;
  border: 2px solid var(--aw-petrol-tief);
  border-radius: 12px;
  background:
    radial-gradient(120% 150% at 14% -60%, rgba(255, 255, 255, .10) 0%, transparent 58%),
    linear-gradient(180deg, var(--aw-pult-hell) 0%, var(--aw-pult) 58%, #1b272c 100%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .40), inset 0 1px 0 rgba(255, 255, 255, .10);
  font-family: var(--aw-schrift);
}
/* Messingkante oben auf der Konsole - wie beim Pult in der Kulisse */
.aw_werkzeug::before {
  content: "";
  position: absolute;
  left: .8rem; right: .8rem; top: 4px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--aw-messing) 18%, var(--aw-messing-hell) 50%, var(--aw-messing) 82%, transparent);
  opacity: .50;
  pointer-events: none;
}
.aw_reihe {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .4rem;
  min-width: 0;
}
.aw_flex { flex: 1 1 auto; min-width: 0; }
.aw_werkzeug_gruppe { display: flex; gap: .25rem; flex: 0 0 auto; }

/* Uhr + Pegel als EINE Box (sonst braucht die Leiste am Handy drei
   Zeilen und "Aufnehmen" faellt aus der Konsole - Kapitel 7, Punkt 5). */
.aw_uhr {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  flex: 0 1 auto;
  min-width: 0;
  padding: .18rem .55rem;
  border: 1px solid rgba(0, 0, 0, .5);
  border-radius: 7px;
  background: linear-gradient(180deg, #101a1e, #0a1215);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .75), 0 1px 0 rgba(255, 255, 255, .08);
}
/* Bandmaschinen-Zaehler: Bernstein-Ziffern auf dunklem Blech */
.aw_zeit {
  min-width: 6.6rem;
  font-family: "Consolas", "SFMono-Regular", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: .86rem;
  letter-spacing: .02em;
  color: var(--aw-led-warm);
  text-shadow: 0 0 8px rgba(246, 183, 29, .45);
}
/* Pegel: LED-Kette aus kleinen Segmenten */
.aw_pegel {
  display: block;
  position: relative;
  width: 5.5rem;
  height: .6rem;
  border-radius: 3px;
  background: #0b1416;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .85);
  overflow: hidden;
}
.aw_pegel::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, transparent 0 4px, rgba(0, 0, 0, .75) 4px 6px);
  pointer-events: none;
}
.aw_pegel_fuell {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--aw-led) 0%, var(--aw-led) 55%, var(--aw-led-warm) 80%, var(--aw-led-rot) 100%);
  box-shadow: 0 0 8px rgba(126, 224, 200, .55);
  transition: width .18s ease-out;
}
.aw_vis_laut { filter: saturate(1.25) brightness(1.1); }
.aw_vis_leise { opacity: .55; }

/* Grosser Abspiel-Knopf: das groesste Ziel der Seite, in Aufnahme-Rot */
.aw_play {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border: 2px solid #611d13;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 26%, #ffb199, var(--aw-led-rot) 52%, #c9462d 100%);
  color: #3d0f07;
  font: inherit;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 0 #7d2a1b, 0 7px 14px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .55);
  transition: transform .1s, box-shadow .1s, filter .15s;
}
.aw_play:hover { filter: brightness(1.07); }
.aw_play:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #7d2a1b, 0 3px 8px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .55);
}

/* Die Knoepfe: Drucktasten auf dem Pult */
.aw_werk {
  min-height: 2.5rem;              /* = 40 px, fingerfest (3.13.5) */
  padding: .35rem .8rem;
  border: 1px solid #0b1417;
  border-radius: 7px;
  background: linear-gradient(180deg, #f6efdd 0%, #e6d8ba 62%, #d3c19d 100%);
  color: var(--aw-tinte);
  font: inherit;
  font-size: .86rem;
  font-weight: 700;
  white-space: nowrap;             /* Beschriftung bricht nie mitten im Wort */
  cursor: pointer;
  box-shadow: 0 2px 0 #8d7a56, 0 4px 8px rgba(0, 0, 0, .32), inset 0 1px 0 #fffdf6;
  transition: transform .08s, background .15s, box-shadow .08s, filter .15s;
}
.aw_werk:hover { background: linear-gradient(180deg, #fffdf6 0%, #f0e5cb 60%, #ddcda9 100%); }
.aw_werk:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 #8d7a56, 0 1px 3px rgba(0, 0, 0, .35), inset 0 1px 0 #fffdf6;
}
.aw_werk:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.5); }
.aw_werk:focus-visible,
.aw_play:focus-visible,
.aw_beat:focus-visible,
.aw_quelle:focus-visible,
.aw_laenge_knopf:focus-visible,
.aw_instr:focus-visible,
.aw_taste:focus-visible,
.aw_misch_knopf:focus-visible {
  outline: 3px solid var(--aw-messing-hell);
  outline-offset: 2px;
}

/* Aufnahme: der rote Punkt auf dem Pult */
.aw_werk_warm {
  background: linear-gradient(180deg, #ff9d84 0%, var(--aw-led-rot) 52%, #d4502f 100%);
  border-color: #611d13;
  color: #3d0f07;
  font-weight: 800;
  box-shadow: 0 2px 0 #7d2a1b, 0 4px 10px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.aw_werk_warm:hover { filter: brightness(1.06); }
.aw_werk_breit { flex: 0 1 auto; min-width: 0; }
.aw_werk_klein { min-height: 2.5rem; padding: .35rem .65rem; font-size: .84rem; }
/* Die Zoom-Knoepfe tragen nur ein Zeichen ("−"/"+") - ohne Mindestbreite
   waeren sie 32 px breit und damit unter dem Fingerziel (3.13.5). */
#aw_zoom_raus, #aw_zoom_rein { min-width: 2.5rem; }
.aw_werk_icon { min-width: 2.5rem; padding: .35rem .5rem; }
/* "WAV speichern" ist die Ausgabe - Bernstein wie der Zaehler.
   Hier darf die Beschriftung umbrechen (am Handy steht sie zweizeilig). */
.aw_werk_voll {
  background: linear-gradient(180deg, #ffe6a8 0%, var(--aw-led-warm) 55%, #d99a10 100%);
  border-color: #5c3f05;
  color: #33230a;
  font-weight: 800;
  white-space: normal;
  box-shadow: 0 2px 0 #7d5a12, 0 4px 10px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.aw_werk_voll:hover { filter: brightness(1.05); }
/* Musik-Knoepfe (Melodie, Instrument): der violette Kanalzug */
.aw_werk_musik {
  background: linear-gradient(180deg, #d9c2ee 0%, #b993d8 60%, #9d76bf 100%);
  border-color: #3f2457;
  color: #241033;
  box-shadow: 0 2px 0 #563472, 0 4px 8px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .45);
}
/* Loeschen bleibt rot umrandet, aber ohne Fuellung */
.aw_werk_rot {
  background: linear-gradient(180deg, #f8dfd7 0%, #f0c3b6 60%, #dfa595 100%);
  border-color: #a13a22;
  color: #7d2413;
}
.aw_werk_rot:hover { background: linear-gradient(180deg, #ffe9e2, #f6cdc0 60%, #e8b1a2); }
.aw_versteckt {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ---------- 5. Material: zwei Fachkaesten auf dem Pult --------------- */
.aw_material {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .55rem;
  margin-bottom: .55rem;
}
.aw_material_gruppe {
  position: relative;
  min-width: 0;
  padding: .45rem .65rem .6rem;
  border: 2px solid var(--aw-petrol-tief);
  border-radius: 10px;
  background:
    radial-gradient(120% 160% at 12% -70%, rgba(255, 255, 255, .10) 0%, transparent 60%),
    linear-gradient(180deg, #24333a 0%, #1b2a30 100%);
  box-shadow: 0 5px 14px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
}
/* Messing-Schraube in jeder Ecke der Fachkaesten */
.aw_material_gruppe::before,
.aw_material_gruppe::after {
  content: "";
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--aw-messing-hell), var(--aw-messing) 55%, var(--aw-messing-tief));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45);
}
.aw_material_gruppe::before { top: 6px; left: 6px; }
.aw_material_gruppe::after { top: 6px; right: 6px; }
.aw_material_titel {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 .45rem;
  padding-left: .1rem;
  color: #f6ecd6;
  font-size: .92rem;
  font-weight: 700;
}
.aw_material_zusatz {
  font-size: .74rem;
  font-weight: 400;
  opacity: .68;
}
.aw_beats_zeile { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.aw_eigene_zeile { display: flex; align-items: flex-start; gap: .4rem; flex-wrap: wrap; }

/* Beat-Kacheln (im Menue): Kanalzuege mit Messingkante */
.aw_beats { display: flex; flex-wrap: wrap; gap: .35rem; }
.aw_beat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 2.7rem;              /* = 43 px, fingerfest */
  padding: .3rem .6rem;
  border: 1px solid #0b1417;
  border-radius: 7px;
  background: linear-gradient(180deg, #f6efdd 0%, #e6d8ba 62%, #d3c19d 100%);
  color: var(--aw-tinte);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 2px 0 #8d7a56, 0 4px 8px rgba(0, 0, 0, .28), inset 0 1px 0 #fffdf6;
}
.aw_beat:hover { background: linear-gradient(180deg, #fffdf6, #f0e5cb 60%, #ddcda9); }
.aw_beat_info { margin-top: .15rem; font-size: .66rem; line-height: 1.25; opacity: .72; }
.aw_beat_name { font-size: .86rem; font-weight: 800; line-height: 1.15; }
.aw_beat_bpm { font-size: .68rem; opacity: .72; }
/* Beat-Laenge: kleine Umschalter wie Kanal-Tasten */
.aw_beat_laenge {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .3rem;
  margin-bottom: .35rem;
  color: #f6ecd6;
  font-size: .76rem;
}
/* Im Beat-Menue steht dieselbe Zeile auf PAPIER (heller Dialog) - dort
   waere die helle Leistenfarbe unsichtbar (Messbefund: "Länge:" und
   "Takte" waren creme auf creme). */
.aw_modal .aw_beat_laenge { color: var(--aw-tinte); }
.aw_modal .aw_beat_laenge_text { opacity: .8; }
.aw_laenge_knopf {
  min-width: 2.5rem;
  min-height: 2.5rem;              /* 40 px, fingerfest */
  padding: 0 .4rem;
  border: 1px solid #0b1417;
  border-radius: 6px;
  background: linear-gradient(180deg, #f6efdd 0%, #e6d8ba 62%, #d3c19d 100%);
  color: var(--aw-tinte);
  font: inherit;
  font-size: .8rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 0 #8d7a56, inset 0 1px 0 #fffdf6;
}
.aw_laenge_knopf.aw_knopf_an {
  background: linear-gradient(180deg, #ffe6a8, var(--aw-led-warm) 60%, #d99a10);
  border-color: #5c3f05;
  color: #33230a;
  box-shadow: 0 2px 0 #7d5a12, inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* Eigene Quellen (Aufnahmen, Dateien): Karteikarten am Pult */
.aw_quellen { display: flex; flex-wrap: wrap; gap: .3rem; }
.aw_quellen_leer {
  margin: .35rem 0 0;
  color: rgba(246, 236, 214, .72);
  font-size: .76rem;
  line-height: 1.4;
}
.aw_quelle {
  display: flex;
  flex-direction: column;
  min-height: 2.5rem;
  padding: .3rem .55rem;
  border: 1px solid #0b1417;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--aw-papier-hell), var(--aw-papier) 70%, var(--aw-papier-tief));
  color: var(--aw-tinte);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 2px 0 #8d7a56, 0 4px 8px rgba(0, 0, 0, .26);
}
.aw_quelle:hover { filter: brightness(1.05); }
.aw_quelle_name { font-size: .8rem; font-weight: 800; }
.aw_quelle_dauer { font-size: .7rem; opacity: .72; }

/* ---------- 6. Arbeit: Buehne + Inspektor ---------------------------- */
.aw_arbeit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: .55rem;
  align-items: start;
}
.aw_arbeit_haupt { min-width: 0; }

.aw_tl_kopfzeile {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .3rem;
  color: #f6ecd6;
  font-size: .9rem;
}
.aw_tl_hinweis { font-size: .76rem; opacity: .66; }
.aw_tl_hinweis_kurz { display: none; }

/* Die Buehne: das Pultbrett. Dunkler Korpus, Messingkante oben,
   darin liegt die Bahn mit den drei Spuren. */
.aw_timeline {
  position: relative;
  display: flex;
  padding: .4rem;
  border: 2px solid var(--aw-petrol-tief);
  border-radius: 12px;
  background:
    radial-gradient(120% 160% at 10% -70%, rgba(255, 255, 255, .08) 0%, transparent 58%),
    linear-gradient(180deg, #22313a 0%, #17232a 100%);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.aw_timeline::before {
  content: "";
  position: absolute;
  left: .8rem; right: .8rem; top: 3px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--aw-messing) 18%, var(--aw-messing-hell) 50%, var(--aw-messing) 82%, transparent);
  opacity: .55;
  pointer-events: none;
}
.aw_spurnamen { flex: 0 0 6.2rem; }
.aw_ruler_platz {
  display: flex;
  align-items: center;
  height: 1.35rem;
  padding-left: .3rem;
  color: rgba(246, 236, 214, .6);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* Spurnamen: Kanalbeschriftung auf Blech, mit Farbstreifen */
.aw_spurname {
  display: flex;
  align-items: center;
  gap: .3rem;
  height: 4rem;                    /* hoeher als frueher: mehr Welle */
  padding-left: .3rem;
  border-top: 1px solid rgba(0, 0, 0, .45);
  color: #f2e7cf;
  font-size: .82rem;
  font-weight: 700;
}
.aw_name_stumm { opacity: .42; }
.aw_name_solo { color: var(--aw-led-warm); }

.aw_scroller { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; }
/* min-width: die Bahn ist nur so breit wie ihr Inhalt (Inline-Breite aus
   dem Lineal) - ohne diese Zeile endeten Spuren und Raster mitten im
   Pult und rechts bliebe ein leerer dunkler Kasten. */
.aw_bahn { position: relative; min-width: 100%; min-height: 100%; }
/* Lineal: die Skala ueber der Bahn, Ziffern in Bernstein.
   min-width: 100% zieht die Skala bis an den Pultrand - die Marken
   selbst bleiben an ihrer Pixelstelle (app.js setzt sie in px). */
.aw_ruler {
  position: relative;
  min-width: 100%;
  height: 1.35rem;
  margin-bottom: .12rem;
  border-bottom: 1px solid rgba(0, 0, 0, .55);
}
.aw_marke {
  position: absolute;
  top: 0;
  height: 100%;
  padding-left: 3px;
  border-left: 1px solid rgba(246, 236, 214, .28);
  color: rgba(246, 236, 214, .75);
  font-family: "Consolas", "SFMono-Regular", ui-monospace, monospace;
  font-size: .66rem;
  font-variant-numeric: tabular-nums;
}
/* Spuren: dunkles Band mit feinen Rasterlinien */
.aw_spur {
  position: relative;
  height: 4rem;
  border-bottom: 1px solid rgba(0, 0, 0, .55);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 2.5rem),
    linear-gradient(180deg, #101a1f 0%, #0d161a 100%);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55);
}
.aw_track { position: relative; height: 100%; }
.aw_track_stumm { opacity: .38; }

/* Leer-Hinweis: in der Bahn, gut lesbar auf dunklem Grund */
.aw_leer {
  position: absolute;
  inset: 1.5rem 1rem 0 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .2rem;
  color: rgba(246, 236, 214, .8);
  font-size: .84rem;
  pointer-events: none;
}
.aw_leer strong { font-size: .92rem; }
.aw_leer[hidden] { display: none; }

/* Clips: farbige Baender mit Wellenform und hellen Griffen */
.aw_clip {
  position: absolute;
  top: .3rem;
  bottom: .3rem;
  overflow: hidden;
  border: 1px solid var(--aw-farbe, #888);
  border-radius: 5px;
  background: color-mix(in srgb, var(--aw-farbe, #888) 32%, #0d161a);
  cursor: grab;
  touch-action: none;
}
.aw_clip_gewaehlt {
  box-shadow: 0 0 0 2px var(--aw-messing-hell), 0 0 12px rgba(232, 203, 135, .45), 0 2px 6px rgba(0, 0, 0, .4);
}
.aw_clip_zieht { cursor: grabbing; opacity: .88; }
.aw_welle { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .92; }
.aw_clip_name {
  position: absolute;
  left: .35rem;
  top: .18rem;
  max-width: calc(100% - 1.4rem);
  overflow: hidden;
  padding: 0 .25rem;
  border-radius: .2rem;
  background: rgba(8, 16, 20, .78);
  color: #fdf7ea;
  font-size: .7rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
/* Die zwei hellen Kanten: hier kuerzt man (min(): schmale Stuecke
   behalten eine freie Mitte, sonst laesst sich nichts mehr greifen). */
.aw_clip_griff {
  position: absolute;
  top: 0; bottom: 0;
  width: min(.7rem, 32%);
  background: var(--aw-messing-hell);
  opacity: .35;
  cursor: ew-resize;
  touch-action: none;
}
.aw_clip_griff:hover, .aw_clip_griff:active { opacity: .95; }
.aw_clip_griff_links { left: 0; border-radius: .35rem 0 0 .35rem; }
.aw_clip_griff_rechts { right: 0; border-radius: 0 .35rem .35rem 0; }

/* Der Zeiger: rote Linie mit Messing-Reiter oben */
.aw_playhead {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--aw-led-rot);
  box-shadow: 0 0 8px rgba(255, 122, 89, .7);
  pointer-events: none;
  z-index: 5;
}
.aw_playhead::before {
  content: "";
  position: absolute;
  top: 0; left: -5px;
  border: 6px solid transparent;
  border-top-color: var(--aw-led-rot);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}

/* ---------- 7. Spur-Mischung: drei Kanalzuege unter der Bahn -------- */
.aw_mischung {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .4rem;
  margin: .5rem 0 .45rem;
}
.aw_misch_zeile {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .45rem;
  border: 1px solid rgba(0, 0, 0, .55);
  border-left: 4px solid var(--aw-farbe, #888);
  border-radius: 8px;
  background: linear-gradient(180deg, #24333a 0%, #1a272d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 3px 8px rgba(0, 0, 0, .3);
}
.aw_misch_name { color: #f2e7cf; font-size: .8rem; font-weight: 700; }
/* Regler: der Fader auf dem Pult */
.aw_misch_regler {
  flex: 1;
  min-width: 2.4rem;
  height: 22px;
  accent-color: var(--aw-led-warm);
}
.aw_misch_zeile output {
  min-width: 2.4rem;
  color: var(--aw-led-warm);
  font-family: "Consolas", "SFMono-Regular", ui-monospace, monospace;
  font-size: .7rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.aw_misch_knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* min-height allein reicht nicht: als Grid-Item schrumpft die Box.
     Deshalb FESTE Hoehe (40 px) plus min-width. */
  height: 2.5rem;
  min-width: 2.6rem;
  padding: 0 .5rem;
  border: 1px solid #0b1417;
  border-radius: 6px;
  background: linear-gradient(180deg, #f6efdd 0%, #e6d8ba 62%, #d3c19d 100%);
  color: var(--aw-tinte);
  font: inherit;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 0 #8d7a56, inset 0 1px 0 #fffdf6;
}
.aw_knopf_an {
  background: linear-gradient(180deg, #ffe6a8 0%, var(--aw-led-warm) 58%, #d99a10 100%);
  border-color: #5c3f05;
  color: #33230a;
  box-shadow: 0 2px 0 #7d5a12, inset 0 1px 0 rgba(255, 255, 255, .45);
}

/* Meldung: die Regie-Notiz auf einem Zettel */
.aw_meldung {
  display: flex;
  align-items: center;
  min-height: 2.4rem;
  margin: 0;
  padding: .4rem .7rem;
  border: 1px solid var(--aw-kante);
  border-left: 4px solid var(--aw-messing);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--aw-papier-hell), var(--aw-papier) 70%, var(--aw-papier-tief));
  color: var(--aw-tinte);
  font-size: .84rem;
  box-shadow: 0 2px 0 #b9a179, 0 4px 10px rgba(0, 0, 0, .28);
}
.aw_meldung_fehler {
  border-color: #a13a22;
  border-left-color: #a13a22;
  color: #7d2413;
  background: linear-gradient(180deg, #ffe9e2, #f6cdc0 70%, #e8b1a2);
}

/* [hidden] muss gewinnen (sonst stehen Leer- und Fuellzustand gleichzeitig
   im Inspektor - Kapitel 7, Punkt 6). Gilt fuer ALLE selbst gesetzten
   display-Regeln, die spaeter im File stehen koennten. */
.aw_ins_leer[hidden],
.aw_ins_spalten[hidden],
.aw_ins_zeile[hidden],
.aw_leer[hidden],
.aw_quellen_leer[hidden],
.aw_modal_grund[hidden] { display: none !important; }

/* ---------- 8. Inspektor: das Bearbeiten-Blatt ----------------------- */
.aw_seite { min-width: 0; }
.aw_player audio { display: none; }

.aw_inspektor {
  padding: .6rem .7rem .75rem;
  border: 2px solid var(--aw-petrol-tief);
  border-radius: 12px;
  background:
    radial-gradient(120% 160% at 10% -70%, rgba(255, 255, 255, .09) 0%, transparent 58%),
    linear-gradient(180deg, #24333a 0%, #1a272d 100%);
  color: #f2e7cf;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.aw_ins_leer_titel { margin: 0 0 .3rem; font-size: .95rem; font-weight: 800; color: #fdf7ea; }
.aw_ins_leer p { margin: .2rem 0; font-size: .82rem; line-height: 1.45; color: rgba(246, 236, 214, .82); }
.aw_ins_tipp {
  padding: .45rem .55rem;
  border-radius: 5px;
  background: rgba(0, 0, 0, .28);
  color: rgba(246, 236, 214, .78) !important;
  font-size: .72rem !important;
  line-height: 1.7 !important;
}
.aw_ins_tipp kbd {
  display: inline-block;
  padding: 0 .28rem;
  border: 1px solid rgba(246, 236, 214, .45);
  border-radius: .25rem;
  background: rgba(255, 255, 255, .12);
  font-family: inherit;
  font-size: .92em;
}
.aw_ins_spalten { display: flex; flex-direction: column; gap: .7rem; }
.aw_ins_block {
  min-width: 0;
  padding: .55rem .6rem;
  border: 1px solid #0b1417;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--aw-papier-hell), var(--aw-papier) 72%, var(--aw-papier-tief));
  color: var(--aw-tinte);
  box-shadow: inset 0 1px 0 #fff;
}
.aw_ins_kopf {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 .3rem;
  font-size: .88rem;
}
.aw_ins_chip {
  padding: .1rem .42rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--aw-led-warm) 45%, #fff);
  color: #33230a;
  font-size: .68rem;
  font-weight: 800;
}
.aw_ins_zeit {
  margin: 0 0 .45rem;
  font-family: "Consolas", "SFMono-Regular", ui-monospace, monospace;
  font-size: .78rem;
  opacity: .8;
}
.aw_ins_zeile {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .45rem;
  font-size: .8rem;
}
.aw_ins_zeile span:first-child { min-width: 5.6rem; }
.aw_ins_zeile input[type="range"] {
  flex: 1;
  min-width: 3rem;
  height: 20px;
  accent-color: var(--aw-messing-tief);
}
.aw_ins_zeile output {
  min-width: 2.8rem;
  font-variant-numeric: tabular-nums;
  font-family: "Consolas", "SFMono-Regular", ui-monospace, monospace;
  font-size: .76rem;
  text-align: right;
}
/* Tempo-Auswahl (nur bei Aufnahmen/Dateien): 40 px, wie die Knoepfe */
.aw_ins_zeile select {
  flex: 1;
  min-width: 7rem;
  min-height: 2.5rem;
  padding: .25rem .4rem;
  border: 1px solid #8d7a56;
  border-radius: .4rem;
  background: var(--aw-papier-hell);
  color: var(--aw-tinte);
  font: inherit;
  font-weight: 400;
}
.aw_ins_knoepfe { display: flex; flex-wrap: wrap; gap: .3rem; }
.aw_ins_knoepfe .aw_werk { min-height: 2.5rem; padding: .3rem .55rem; font-size: .8rem; }
.aw_ins_fuss {
  margin: .45rem 0 0;
  color: rgba(31, 42, 48, .72);
  font-size: .76rem;
  line-height: 1.4;
}

/* ---------- 9. Kontext-Menue (Rechtsklick aufs Stueck) --------------- */
.aw_kontext {
  position: fixed;
  z-index: 50;                     /* unter den Modalen (60) */
  display: flex;
  flex-direction: column;
  min-width: 13rem;
  padding: .3rem;
  border: 2px solid var(--aw-petrol-tief);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--aw-papier-hell), var(--aw-papier) 70%, var(--aw-papier-tief));
  color: var(--aw-tinte);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5), inset 0 1px 0 #fff;
}
.aw_kontext_punkt {
  padding: .45rem .6rem;
  border: none;
  border-radius: .4rem;
  background: none;
  color: inherit;
  font: inherit;
  font-size: .9rem;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.aw_kontext_punkt:hover { background: rgba(198, 154, 78, .28); }
.aw_kontext_punkt:focus-visible { outline: 2px solid var(--aw-messing-tief); outline-offset: -2px; }
.aw_kontext .aw_kontext_punkt + .aw_kontext_punkt { margin-top: 1px; }

/* ---------- 10. Dialoge: Aufnahme-Blatt auf dem Pult --------------- */
.aw_modal_grund {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(3, 12, 16, .62);
  backdrop-filter: blur(2px);
}
.aw_modal_grund[hidden] { display: none; }

.aw_modal {
  width: 100%;
  max-width: 30rem;
  max-height: 85vh;
  overflow-y: auto;
  padding: 1rem 1.1rem;
  border: 2px solid var(--aw-kante);
  border-top: 6px solid var(--aw-messing);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--aw-papier-hell) 0%, var(--aw-papier) 60%, var(--aw-papier-tief) 100%);
  color: var(--aw-tinte);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .55), inset 0 1px 0 #fff;
}
.aw_modal h3 {
  margin: 0 0 .5rem;
  padding-bottom: .35rem;
  border-bottom: 1px dashed rgba(31, 42, 48, .28);
  color: var(--aw-tinte);
  font-size: 1.1rem;
}
.aw_modal h4 { margin: .8rem 0 .3rem; font-size: .95rem; color: var(--aw-tinte); }
.aw_modal p, .aw_modal li { color: var(--aw-tinte); }
.aw_modal_knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-end;
  margin-top: .8rem;
}

/* Hilfe-Fenster: das Blatt mit den 7 Schritten */
.aw_hilfe_liste {
  margin: .2rem 0 .6rem;
  padding-left: 1.15rem;
  font-size: .9rem;
  line-height: 1.55;
}
.aw_hilfe_liste li { margin: .3rem 0; }
.aw_hilfe_liste kbd {
  padding: 0 .25rem;
  border: 1px solid var(--aw-kante);
  border-radius: .3rem;
  background: var(--aw-papier-hell);
  font-size: .84em;
}
.aw_hilfe_lernziel {
  padding: .45rem .6rem;
  border-left: 4px solid var(--aw-gruen);
  border-radius: .4rem;
  background: rgba(47, 143, 74, .12);
  font-size: .86rem;
  line-height: 1.5;
}
.aw_export_text { margin: .2rem 0; font-size: .9rem; }
.aw_export_liste { margin: .3rem 0 .6rem; padding-left: 1.1rem; font-size: .88rem; line-height: 1.5; }
.aw_export_warn {
  margin: .3rem 0;
  padding: .4rem .55rem;
  border-left: 4px solid var(--aw-led-warm);
  border-radius: .4rem;
  background: rgba(246, 183, 29, .2);
  font-size: .84rem;
}
.aw_export_check { display: block; margin: .35rem 0; font-size: .86rem; }

/* ---------- 11. Melodie-Menue (im Dialog) -------------------------- */
.aw_mel_hinweis {
  margin: .1rem 0 .55rem;
  padding: .4rem .55rem;
  border-left: 3px solid var(--aw-messing);
  border-radius: 0 .35rem .35rem 0;
  background: rgba(198, 154, 78, .16);
  color: var(--aw-tinte);
  font-size: .84rem;
  line-height: 1.4;
}
.aw_mel_gitter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem .7rem;
}
.aw_mel_feld {
  display: flex;
  flex-direction: column;
  gap: .22rem;
  min-width: 0;
  color: var(--aw-tinte);
  font-size: .78rem;
  font-weight: 800;
}
.aw_mel_feld select,
.aw_mel_feld input[type="number"] {
  min-height: 2.5rem;              /* 40 px, fingerfest */
  min-width: 0;
  padding: .25rem .4rem;
  border: 1px solid #8d7a56;
  border-radius: .4rem;
  background: var(--aw-papier-hell);
  color: var(--aw-tinte);
  font: inherit;
  font-weight: 400;
}
.aw_mel_feld input[type="number"] { width: 5.2rem; }
.aw_mel_einheit { display: flex; align-items: center; gap: .35rem; }
.aw_mel_einheit small { font-size: .72rem; font-weight: 400; opacity: .75; }
.aw_mel_dauer {
  margin: .6rem 0 .1rem;
  padding: .45rem .55rem;
  border-radius: .4rem;
  background: rgba(47, 143, 74, .12);
  color: var(--aw-tinte);
  font-size: .88rem;
}

/* ---------- 12. Instrument-Menue (im Dialog) ----------------------- */
.aw_instr_kacheln {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .35rem;
}
.aw_instr {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 2.7rem;              /* fingerfest */
  padding: .3rem .5rem;
  border: 1px solid #8d7a56;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--aw-papier-hell), var(--aw-papier) 70%, var(--aw-papier-tief));
  color: var(--aw-tinte);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.aw_instr:hover { filter: brightness(1.04); }
.aw_instr_name { font-size: .84rem; font-weight: 800; line-height: 1.15; }
.aw_instr_hinweis { font-size: .66rem; line-height: 1.2; opacity: .72; }
/* Gewaehlt: die Grundregel .aw_knopf_an steht weiter oben und verloere
   sonst gegen .aw_instr - darum hier mit doppeltem Namen. */
.aw_instr.aw_knopf_an {
  background: linear-gradient(180deg, #ffe6a8, var(--aw-led-warm) 58%, #d99a10);
  border-color: #5c3f05;
}
.aw_instr.aw_knopf_an .aw_instr_name { color: #33230a; }
.aw_instr.aw_knopf_an .aw_instr_hinweis { color: #33230a; opacity: .8; }
#aw_instr_raster.aw_knopf_an,
#aw_instr_oktave.aw_knopf_an {
  background: linear-gradient(180deg, #ffe6a8, var(--aw-led-warm) 58%, #d99a10);
  border-color: #5c3f05;
  color: #33230a;
}

/* Klaviatur: 14 weisse Tasten im Fluss, 10 schwarze absolut darueber */
.aw_klaviatur {
  position: relative;
  display: flex;
  height: 7.5rem;
  margin: .6rem 0 .2rem;
  border: 2px solid var(--aw-petrol-tief);
  border-radius: .45rem;
  background: var(--aw-petrol-tief);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.aw_taste {
  padding: 0;
  border: 1px solid #6b5a3c;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.aw_taste_weiss {
  display: flex;
  flex: 1 1 0;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  border-radius: 0 0 .3rem .3rem;
  background: linear-gradient(180deg, #fffdf6 0%, #f7f0df 82%, #e8dcc2 100%);
  color: #55606a;
}
.aw_taste_name { padding-bottom: .25rem; color: #6b6047; font-size: .62rem; font-weight: 800; }
.aw_taste_schwarz {
  position: absolute;
  top: 0;
  z-index: 2;
  width: 5.4%;
  height: 58%;
  border-radius: 0 0 .25rem .25rem;
  background: linear-gradient(180deg, #3d454b, #1c2226);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .45), inset 0 -4px 8px rgba(0, 0, 0, .6);
}
.aw_taste:hover { filter: brightness(.96); }
.aw_taste_weiss.aw_taste_aktiv {
  background: linear-gradient(180deg, #ffe6a8, var(--aw-led-warm) 70%, #d99a10);
  filter: brightness(1);
}
.aw_taste_schwarz.aw_taste_aktiv {
  background: linear-gradient(180deg, #ffcd5e, #d99a10);
  filter: brightness(1);
}

/* Steuerzeile unter der Klaviatur */
.aw_instr_steuer {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .5rem;
}
.aw_instr_dauer_feld {
  display: flex;
  flex-direction: column;
  gap: .22rem;
  color: var(--aw-tinte);
  font-size: .78rem;
  font-weight: 800;
}
.aw_instr_dauer_feld select {
  min-height: 2.5rem;
  padding: .25rem .4rem;
  border: 1px solid #8d7a56;
  border-radius: .4rem;
  background: var(--aw-papier-hell);
  color: var(--aw-tinte);
  font: inherit;
  font-weight: 400;
}
.aw_instr_status {
  display: flex;
  align-items: center;
  min-height: 2.4rem;
  margin: .5rem 0 .1rem;
  padding: .4rem .55rem;
  border-radius: .4rem;
  background: rgba(0, 0, 0, .07);
  color: var(--aw-tinte);
  font-size: .82rem;
}
.aw_tastatur_hinweis {
  margin: .15rem 0 0;
  color: var(--aw-tinte);
  font-size: .72rem;
  line-height: 1.7;
  opacity: .85;
}
.aw_tastatur_hinweis kbd {
  display: inline-block;
  min-width: 1.35rem;
  margin: 0 .08rem;
  padding: .05rem .25rem;
  border: 1px solid #8d7a56;
  border-radius: .3rem;
  background: var(--aw-papier-hell);
  font: inherit;
  font-weight: 800;
  text-align: center;
}
@media (pointer: coarse) {
  .aw_tastatur_hinweis { display: none; }
}

/* Gross-Modus des Instrument-Menues: breiter, hoehere Klaviatur */
.aw_modal.aw_modal_gross { max-width: min(58rem, 100%); }
.aw_modal_gross .aw_klaviatur { height: 11rem; }
.aw_modal_gross .aw_instr_kacheln { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.aw_modal_gross .aw_taste_name { font-size: .74rem; }

/* ---------- 13. Tablet/Handy: einspaltig, alles bedienbar ---------- */
@media (max-width: 940px) {
  .aw_arbeit { grid-template-columns: 1fr; }
  .aw_material { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  /* Die Leiste bricht in zwei Zeilen: oben "Alle Spiele" + Marke,
     unten Sprachwahl + Dark-Mode. Anders ginge es nicht - in einer
     Zeile waeren es ueber 500 px bei 390 px Breite (Kapitel 14). */
  body.jupi.aw .aw_app_leiste {
    display: flex !important;
    flex-wrap: wrap;
    padding: .2rem .4rem .35rem !important;
    gap: .18rem .3rem;
  }
  body.jupi.aw .aw_app_link { padding-right: .5rem; }
  body.jupi.aw .aw_app_titel { font-size: .96rem; }
  body.jupi.aw .aw_app_logo { width: 1.6rem; height: 1.6rem; }
  body.jupi.aw .aw_app_leiste .jupi_nav_opt { min-height: 40px; padding: .24rem .55rem; font-size: .78rem; }
  body.jupi.aw .aw_app_rechts .jupi_sprachen_select { max-width: 9.5rem; }
  body.jupi.aw .jupi_main { padding: .6rem .5rem 1rem; }

  .aw_tl_hinweis_lang { display: none; }
  .aw_tl_hinweis_kurz { display: inline; }
  .aw_spurnamen { flex: 0 0 4.6rem; }
  .aw_spurname { height: 3.6rem; font-size: .74rem; }
  .aw_spur { height: 3.6rem; }
  .aw_mischung { grid-template-columns: 1fr; gap: .3rem; }

  /* Zwei durchgehende Reihen (3.13.5): alle Knoepfe bleiben voll
     beschriftet, keiner darf seinen Text abschneiden. Reicht der Platz
     bei sehr schmalen Fenstern nicht, bricht die Reihe um - das ist
     besser als ein abgeschnittenes "Aufneh" (Kapitel 7, Punkt 7). */
  .aw_werkzeug { padding: .42rem; gap: .3rem; }
  .aw_reihe { flex-wrap: wrap; gap: .28rem; row-gap: .28rem; }
  .aw_werk { min-width: 0; padding: .28rem .38rem; font-size: .76rem; }
  .aw_werk_klein { padding: .3rem .34rem; }
  .aw_play { flex: 0 0 auto; width: 2.8rem; height: 2.8rem; font-size: 1rem; }
  /* Uhr + Pegel untereinander: nebeneinander brauchte die Box 148 px und
     die erste Reihe waere umgebrochen. Gestapelt und mit zweizeiliger
     Zeit (sie bricht am Schraegstrich) passen alle vier Ziele der oberen
     Reihe (Play, Uhr, WAV, Ton, Hilfe) in 342 px. */
  .aw_uhr {
    flex: 0 1 auto;
    flex-direction: column;
    align-items: stretch;
    gap: .1rem;
    min-width: 4.2rem;
    padding: .1rem .34rem;
  }
  .aw_zeit { min-width: 0; font-size: .64rem; line-height: 1.15; white-space: normal; }
  .aw_pegel { width: 100%; min-width: 3rem; height: .42rem; }

  /* Nur-Icon-Knoepfe bleiben fingerbreit. Der ❓-Knopf war im ersten
     Umbau vergessen: er schrumpfte auf 25 px, weil .aw_werk als
     Flex-Item beliebig klein werden darf (3.13.5 verlangt 40 px). */
  #aw_zurueck, #aw_wieder, #aw_loeschen, #aw_ton, #aw_hilfe_knopf,
  #aw_zoom_raus, #aw_zoom_rein {
    flex: 0 0 auto;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: .3rem .2rem;
  }
  /* Die Zoom-Gruppe steht in der unteren Reihe (Bearbeiten + Zeitleiste)
     und bleibt fingerbreit; am Handy darf sie in eine eigene Zeile
     rutschen, statt den Rand zu sprengen (3.13.5). */
  .aw_werkzeug_gruppe { flex: 0 0 auto; gap: .2rem; }
  .aw_werkzeug_gruppe .aw_werk { min-width: 2.5rem; }
  /* "Aufnehmen" und "Teilen" duerfen schrumpfen, ihr Wort bleibt lesbar -
     ein abgeschnittenes "Aufneh" ist fuer ein Kind wertlos. */
  #aw_aufnahme { flex: 0 0 auto; padding: .32rem .5rem; }
  #aw_teilen { flex: 0 0 auto; padding: .32rem .5rem; }
  /* "WAV speichern" steht am Handy zweizeilig; 4.8rem ist zu knapp
     fuer "speichern" (gemessen: 61 px Inhalt bei 39 px Breite). */
  .aw_werk_voll {
    max-width: 5.6rem;
    padding: .3rem .4rem;
    font-size: .68rem;
    line-height: 1.15;
    text-align: center;
  }
  .aw_beat { min-height: 2.9rem; }
  /* Dialoge: ein Feld je Zeile, Knoepfe unten klebend */
  .aw_mel_gitter { grid-template-columns: 1fr; }
  .aw_mel_feld input[type="number"] { width: 100%; flex: 1; }
  .aw_modal_knoepfe {
    position: sticky;
    bottom: -1rem;                 /* gegen den Modal-Innenabstand */
    flex-direction: column;
    align-items: stretch;
    margin: .8rem -1.1rem -1rem;
    padding: .6rem 1.1rem 1rem;
    background: var(--aw-papier);
    box-shadow: 0 -6px 14px rgba(0, 0, 0, .18);
  }
  .aw_modal_knoepfe .aw_werk { width: 100%; max-width: none; }
  .aw_modal_gross .aw_klaviatur { height: 9rem; }
  .aw_modal_gross .aw_instr_kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .aw_werk, .aw_pegel_fuell, .aw_play, .aw_clip_griff { transition: none; }
}