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

/* ==================================================== Klangzeichen
   Vier bewegte Zeichen: Mikrofon mit Toenen, Tonspur, Platte, Wellen.
   Kein Bild, kein Skript, kein Netz — wie die Schwebebahn und die
   Instrumente.

   EINE FARBE. Anders als die Instrumente aus dem Logo tragen diese
   Zeichen keine Holz- und Goldtoene, sondern nur `currentColor`. Damit
   stimmen sie auf hellem wie auf dunklem Grund ohne zweiten Farbsatz.

   BEWEGUNG. Jede Fassung hat ihre eigene: die Noten steigen, die Balken
   pegeln, die Platte dreht, die Wellen laufen aus. Bei reduzierter
   Bewegung steht alles still und bleibt vollstaendig sichtbar. */
.klangzeichen {
  line-height: 0;
  color: var(--klang-farbe, var(--accent-soft, #3f96e3));
  opacity: var(--klang-deckkraft, 1);
  pointer-events: none;
}
.klangzeichen svg { display: block; width: 100%; height: auto; overflow: visible; }

.klangzeichen .kl-koerper {
  fill: none; stroke: currentColor; stroke-width: 5;
  stroke-linejoin: round; stroke-linecap: round;
}
.klangzeichen .kl-flaeche { fill: currentColor; stroke: none; }
.klangzeichen .kl-loch { fill: var(--bg-1, #071120); stroke: none; }
.klangzeichen .kl-strich {
  fill: none; stroke: currentColor; stroke-width: 5;
  stroke-linecap: round; stroke-linejoin: round;
}
.klangzeichen .kl-fein {
  fill: none; stroke: currentColor; stroke-width: 2; opacity: .42;
  stroke-linecap: round;
}

/* --- Mikrofon: die Noten steigen und verklingen ------------------------- */
.klangzeichen .kl-note {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: kl-steigen var(--takt, 3.6s) ease-out infinite;
  animation-delay: var(--versatz, 0s);
  opacity: 0;
}
@keyframes kl-steigen {
  0%   { translate: 0 10px;  opacity: 0;   scale: .82; }
  18%  { opacity: .95; }
  70%  { opacity: .55; }
  100% { translate: 6px -86px; opacity: 0; scale: 1.04; }
}
/* Das Mikrofon selbst atmet kaum — zwei Prozent, mehr waere Wackeln. */
.klangzeichen .kl-mikro {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: kl-atmen 5.2s ease-in-out infinite;
}
@keyframes kl-atmen {
  0%, 100% { scale: 1; }
  50%      { scale: 1.02; }
}

/* --- Tonspur: die Balken pegeln ---------------------------------------- */
.klangzeichen .kl-balken {
  fill: currentColor; stroke: none;
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: kl-pegeln var(--takt, 1.2s) ease-in-out infinite alternate;
  animation-delay: var(--versatz, 0s);
}
@keyframes kl-pegeln {
  from { scale: 1 .28; opacity: .62; }
  to   { scale: 1 1;   opacity: 1; }
}

/* --- Platte: einmal in zwoelf Sekunden --------------------------------- */
.klangzeichen .kl-dreht {
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: kl-drehen 12s linear infinite;
}
@keyframes kl-drehen { to { rotate: 360deg; } }
/* Der Tonarm setzt einmal auf und hebt wieder ab. */
.klangzeichen .kl-arm {
  transform-box: fill-box; transform-origin: 92% 10%;
  animation: kl-aufsetzen 12s ease-in-out infinite;
}
@keyframes kl-aufsetzen {
  0%, 100% { rotate: -9deg; }
  12%, 88% { rotate: 0deg; }
}

/* --- Wellen: laufen nach aussen und verklingen ------------------------- */
.klangzeichen .kl-welle {
  fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round;
  transform-box: fill-box; transform-origin: 0% 50%;
  animation: kl-laufen 2.4s ease-out infinite;
  animation-delay: var(--versatz, 0s);
  opacity: 0;
}
@keyframes kl-laufen {
  0%   { opacity: 0;   scale: .65; }
  28%  { opacity: .95; }
  100% { opacity: 0;   scale: 1.12; }
}

@media (prefers-reduced-motion: reduce) {
  .klangzeichen .kl-note,
  .klangzeichen .kl-mikro,
  .klangzeichen .kl-balken,
  .klangzeichen .kl-dreht,
  .klangzeichen .kl-arm,
  .klangzeichen .kl-welle { animation: none; }
  /* Alles, was sonst animiert erscheint, steht hier sichtbar still. */
  .klangzeichen .kl-note  { opacity: .8; translate: 0 -30px; }
  .klangzeichen .kl-welle { opacity: .7; }
  .klangzeichen .kl-arm   { rotate: 0deg; }
}