/* ==================================================================
   Amorazza - Der Abspielknopf auf der Startseite (V704)

   ZWEI PLAETZE, EIN STUECK:
     .ist-band  liegt IM Hero-Band, mittig an der Oberkante.
                Sichtbar ab 960px - das Band selbst erscheint erst
                dort (launch-desktop.css, .hero-band display:none).
     .ist-oben  steht ganz oben unter der Kopfleiste.
                Sichtbar UNTER 960px, wo es kein Band gibt.
   Immer nur einer ist zu sehen.

   C11: JEDE var() traegt einen Rueckfallwert.
   ================================================================== */

/* --- gemeinsame Gestalt ------------------------------------------ */
/* V705: Knopf und Striche sitzen in einem dunkelgrauen Feld mit
   1px-Rahmen, links und rechts als Halbkreis. Das gilt fuer BEIDE
   Plaetze - vorher trug nur der Block im Hero-Band einen
   Hintergrund, der obere stand frei auf der Seite.
   border-radius: 999px erzeugt die Halbkreise unabhaengig von der
   Hoehe des Feldes. */
.lied-steuerung {
  display: flex;
  align-items: center;
  justify-content: center;
  /* V707: von 10 auf 8 - in der Pille stehen jetzt DREI Dinge
     (Knopf, Noten, Striche). Bei 10px waere sie merklich breiter
     geworden. */
  gap: 8px;
  padding: 6px 14px 6px 7px;   /* links weniger: der runde Knopf
                                  bringt eigenen Rand mit */
  border: 1px solid var(--lied-feld-rahmen, #22262b);
  border-radius: 999px;
  background: var(--lied-feld, #3c4249);
}

.lied-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--lied-knopf-rahmen, #7b848d);
  border-radius: 50%;
  cursor: pointer;
  /* V705: grau statt CI-Rosa. Heller als das Feld, damit der Knopf
     sich abhebt; das Zeichen darauf bleibt weiss und steht damit
     deutlich. */
  background: var(--lied-knopf, #5c646d);
  color: var(--lied-zeichen, #ffffff);
  line-height: 0;
}
.lied-knopf:hover {
  background: var(--lied-knopf-hover, #6e777f);
}
.lied-knopf:focus-visible {
  outline: 2px solid var(--ci-gold, #c9a227);
  outline-offset: 2px;
}

/* Das Dreieck. Ein SVG waere eine Datei mehr - hier genuegen zwei
   Rahmen: das Dreieck zeigt nach rechts, die zwei Balken erscheinen
   erst beim Abspielen. */
.lied-knopf .lied-dreieck {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid currentColor;
  margin-left: 3px;   /* optische Mitte, nicht geometrische */
}
.lied-knopf .lied-pause {
  display: none;
  width: 12px;
  height: 14px;
  border-left: 4px solid currentColor;
  border-right: 4px solid currentColor;
}
.lied-steuerung.spielt .lied-dreieck { display: none; }
.lied-steuerung.spielt .lied-pause   { display: block; }

/* --- die zwei Noten (V707) ---------------------------------------- */
/* Sitzen zwischen Knopf und Pegel. currentColor greift auf die Farbe,
   die hier gesetzt wird - das Feld selbst gibt keine vor.
   Etwas gedaempft gegenueber den Strichen: die Noten sind Zierde, die
   Striche zeigen etwas an. */
.lied-noten {
  display: block;
  flex: none;
  color: var(--lied-noten-farbe, #d3d8dd);
}

/* --- die drei Striche -------------------------------------------- */
.lied-pegel {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 20px;
}
.lied-strich {
  display: block;
  width: 3px;
  height: 20px;
  border-radius: 2px;
  /* V705: hell, weil das Feld jetzt dunkelgrau ist. Vorher CI-Rosa
     auf hellem Grund. */
  background: var(--lied-zeichen, #ffffff);
  transform: scaleY(0.25);
  transform-origin: center;
  transition: transform 90ms linear;
}

/* Rueckfall: gleichmaessiges Wippen, wenn Web Audio nicht greift.
   Die Regel wirkt NUR, solange kein Messwert gesetzt ist - sobald
   das Skript transform am Element selbst schreibt, gewinnt der
   Inline-Wert. */
@keyframes lied-wippen {
  0%, 100% { transform: scaleY(0.28); }
  50%      { transform: scaleY(1); }
}
.lied-steuerung.spielt .lied-strich {
  animation: lied-wippen 900ms ease-in-out infinite;
}
.lied-steuerung.spielt .lied-strich:nth-child(2) { animation-delay: 160ms; }
.lied-steuerung.spielt .lied-strich:nth-child(3) { animation-delay: 320ms; }

/* T6: keine Bewegung, wenn keine gewuenscht ist. Der Ton laeuft. */
@media (prefers-reduced-motion: reduce) {
  .lied-strich,
  .lied-steuerung.spielt .lied-strich {
    animation: none;
    transition: none;
    transform: scaleY(0.6);
  }
}

/* --- Platz 1: oben unter der Kopfleiste (bis 959px) --------------- */
/* V705: Das Feld soll nur so breit sein wie sein Inhalt, nicht ueber
   die ganze Spalte laufen.
   NICHT inline-flex: ein inline-Element laesst sich mit margin:auto
   NICHT mittig stellen. Also flex bleiben lassen, die Breite auf den
   Inhalt schrumpfen und den Rand aussen automatisch setzen.

   V706: KEIN margin-top mehr. launch.css haelt drei Zeilen ueber
   body.page-launch fest: "NUR margin-bottom, keine margin-top -
   Abstaende stapeln sich nie." V705 hatte 4px oben und 14px unten -
   beides. Jetzt 0 oben, 8 unten.
   Der Abstand ueber der Pille kommt damit allein aus dem
   container-Polster (20px) - ein einziger Besitzer, wie bei den
   uebrigen Abstaenden auf dieser Seite. */
.lied-steuerung.ist-oben {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 8px;
}
@media (min-width: 960px) {
  .lied-steuerung.ist-oben { display: none; }
}

/* --- Platz 2: im Hero-Band (ab 960px) ----------------------------- */
.lied-steuerung.ist-band { display: none; }

@media (min-width: 960px) {
  .lied-steuerung.ist-band {
    display: flex;
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    /* Ueber den Bildern. Das KI-Kennzeichen sitzt unten rechts und
       kommt sich damit nicht in die Quere. */
    z-index: 3;
    /* V705: Feld, Rahmen und Rundung kommen jetzt aus der
       Grundregel oben. Hier bleibt nur die LAGE - und ein Hauch
       Schatten, damit die Pille sich von hellen Bildern abhebt. */
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  }
}