/* ERZEUGT von instrumente.py ueber bauen.py — nicht von Hand aendern. */

/* ============================================= Instrumente aus dem Logo
   Bouzouki und Klarino. Dieselbe Bauweise wie die Schwebebahn: ein Stueck
   HTML, kein Bild, kein Skript, kein Netz.

   FARBE. Die Toene sind aus logo-original.png gemessen, nicht gewaehlt.
   Sechs Rollen: Holz (Decke), dunkles Holz (Zarge, Hals, Rohr), Gold
   (Ringe, Klappen, Wirbel), Perlmutt (Einlage, Buende, Saiten), Loch und
   Kontur.

   ZWEI SAETZE, und das ist Rechnerei, kein Geschmack: Das Ebenholz des
   Logos (#241509) hat auf dem dunklen Grund der Seite (#050E1C) einen
   Kontrast von 1,09:1 — es ist dort unsichtbar. `--auf-dunkel` hebt es auf
   2,42:1 und die Kontur auf 3,71:1. Auf hellem Grund bleibt alles wie im
   Logo. `--linie` schaltet auf das reine Strichbild zurueck.

   BEWEGUNG. Ein Haengen, kein Spielen. Ein Instrument an der Wand schwingt
   leise, wenn jemand die Tuer zumacht — mehr nicht. Beide pendeln um ihren
   obersten Punkt und mit verschiedenem Takt, sonst laufen sie im
   Gleichschritt wie ein Scheibenwischer. */
.instrumente {
  --f-holz: #C87A14;
  --f-dunkel: #241509;
  --f-gold: #D2A63C;
  --f-goldstrich: #D2A63C;
  --f-perl: #EFE3CE;
  --f-loch: #0E0805;
  --f-kontur: #1A0F07;
  --f-innen: none;

  line-height: 0;
  color: var(--instr-farbe, var(--accent-soft, #3f96e3));
  opacity: var(--instr-deckkraft, 1);
  pointer-events: none;
}
/* Auf dunklem Grund: Ebenholz und Kontur angehoben, sonst verschwindet das
   Klarino im Hintergrund. */
.instrumente--auf-dunkel {
  --f-dunkel: #6B4A24;
  --f-kontur: #8A6636;
  --f-loch: #2A1B0C;
}
/* Reines Strichbild — alle Flaechen weg, alle Linien in der Zeichenfarbe. */
.instrumente--linie {
  --f-holz: none; --f-dunkel: none; --f-gold: none; --f-loch: none;
  --f-perl: currentColor; --f-goldstrich: currentColor;
  --f-kontur: currentColor; --f-innen: currentColor;
}
.instrumente--auf-hell { color: var(--instr-farbe, var(--accent-ink, #0f5fb0)); }
.instrumente svg { display: block; width: 100%; height: auto; overflow: visible; }

.instrumente .i-dunkel {
  fill: var(--f-dunkel); stroke: var(--f-kontur);
  stroke-width: 2.4; stroke-linejoin: round;
}
.instrumente .i-holz { fill: var(--f-holz); stroke: var(--f-innen); stroke-width: 1.4; }
.instrumente .i-loch { fill: var(--f-loch); stroke: var(--f-innen); stroke-width: 1.4; }
.instrumente .i-gold {
  fill: var(--f-gold); stroke: var(--f-kontur); stroke-width: 1.2;
}
.instrumente .i-goldstrich {
  fill: none; stroke: var(--f-goldstrich); stroke-width: 2; stroke-linecap: round;
}
.instrumente .i-perlstrich {
  fill: none; stroke: var(--f-perl); stroke-width: 2.2; stroke-linecap: round;
}
.instrumente .i-bund { fill: none; stroke: var(--f-perl); stroke-width: 1.4; opacity: .62; }
.instrumente .i-saite { fill: none; stroke: var(--f-perl); stroke-width: 1.1; opacity: .58; }
/* Muss nach den anderen stehen: gleiche Spezifitaet, der spaetere gewinnt. */
.instrumente .i-fein { stroke-width: 1.3; opacity: .55; }
/* Die Einlage zwischen Zarge und Decke ist das helle Band, das im Logo um
   den ganzen Korpus laeuft — zu duenn verschwindet sie, zu dick wird sie
   zum Reifen. */
.instrumente .i-perlstrich.i-fein { stroke-width: 1.8; opacity: .8; }

.instr-pendel {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: instr-haengen var(--takt, 8s) ease-in-out infinite;
}
@keyframes instr-haengen {
  0%, 100% { rotate: -1.15deg; }
  50%      { rotate: 1.15deg; }
}

/* ------------------------------------------------- Ntaouli, die Rahmentrommel
   Sie haengt nicht, sie schlaegt. Der Schlegel kippt, und der Reif glimmt
   auf dem Schlag auf und klingt ab — beides auf demselben Takt, sonst
   leuchtet die Trommel, bevor sie getroffen wird.
   Die Glimmfarbe ist das Rot der LED-Ntaouli vom Flyer, nicht der
   Seitenakzent: sie soll nach Geraet aussehen, nicht nach Verzierung. */
.instrumente .i-fell  { fill: var(--f-perl);   stroke: var(--f-kontur); stroke-width: 2; }
.instrumente .i-reif  { fill: var(--f-dunkel); stroke: var(--f-kontur); stroke-width: 2.4; }
.instrumente .i-schnur {
  fill: none; stroke: var(--f-goldstrich); stroke-width: 1.6; opacity: .7;
}
.instrumente .i-glimm {
  fill: none; stroke: var(--instr-glimm, #E2483C); stroke-width: 4;
  opacity: 0; animation: instr-glimmen var(--trommeltakt, 2.6s) ease-out infinite;
}
.instrumente .i-schlegel {
  transform-box: fill-box; transform-origin: 92% 94%;
  animation: instr-schlagen var(--trommeltakt, 2.6s) ease-in-out infinite;
}
@keyframes instr-glimmen {
  0%        { opacity: .95; stroke-width: 7; }
  18%       { opacity: .4;  stroke-width: 4; }
  55%, 100% { opacity: 0;   stroke-width: 3; }
}
@keyframes instr-schlagen {
  0%, 100% { rotate: 0deg; }
  12%      { rotate: -16deg; }
  26%      { rotate: 2deg; }
}

/* ------------------------------------------------ Saiten, die nachzittern
   Kein Zupfen, ein Nachklingen: die Saite wandert ein gutes Pixel zur Seite
   und kommt zurueck. Jeder Chor hat eigenen Takt und eigenen Versatz —
   im Gleichschritt liest sich das als Fehler statt als Klang. */
.instrumente .i-saite--schwingt {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: instr-schwingen var(--saitentakt, 2.8s) ease-in-out infinite;
}
@keyframes instr-schwingen {
  0%, 100% { translate: 0 0;      opacity: .58; }
  7%       { translate: 1.5px 0;  opacity: .95; }
  16%      { translate: -1.1px 0; opacity: .82; }
  28%      { translate: .4px 0;   opacity: .66; }
}

@media (prefers-reduced-motion: reduce) {
  .instr-pendel { animation: none; rotate: 0deg; }
  .instrumente .i-schlegel,
  .instrumente .i-saite--schwingt { animation: none; }
  /* Der Reif bleibt sichtbar stehen statt zu verschwinden — sonst fehlt
     bei reduzierter Bewegung ein Teil der Zeichnung. */
  .instrumente .i-glimm { animation: none; opacity: .4; }
}