/* josch.do — Songs. Eigenes Register neben den Übertragungen.
   Nur Ergänzungen zur freigegebenen design.css; Farben und Grundmaße
   kommen von dort (--paper, --quiet, --line, --red). */

.document-page.songs-page .reading-main { max-width: 680px; }

.document-page.songs-page .site-header nav a[aria-current='location'] {
  color: var(--paper);
  text-decoration: underline;
}

.document-page.songs-page .document-heading { display: block; margin-bottom: 44px; }

/* Untertitel: derselbe Satz wie im Seitentitel der Beschreibung.
   Trägt die Herkunft, ohne als Warnung zu lesen. */
.document-page.songs-page .hinweis {
  color: var(--quiet);
  font-size: 22px;
  line-height: 1.62;
  max-width: 32em;
  margin: 23px 0 0;
}

.document-page.songs-page .lied { margin: 0 0 58px; }

/* Cover neben dem Player: das Spektrogramm des Stücks, kein Schmuck.
   Es zeigt, was der Ton tut, bevor man ihn hört — und es ist aus dem
   Stück selbst gerechnet, nicht dazu erfunden. */
.document-page.songs-page .lied-kopf {
  display: flex;
  gap: 26px;
  align-items: center;
}

.document-page.songs-page .cover {
  display: block;
  flex: 0 0 250px;
  width: 250px;
  height: 250px;
  object-fit: cover;
}

.document-page.songs-page .lied-haupt { flex: 1 1 auto; min-width: 0; }

.document-page.songs-page .lied h2 {
  font-size: 32px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--paper);
  margin: 0 0 18px;
}

/* Nativer Player: keine eigene Steuerung, kein Skript.
   Helle Systemfarbe: der dunkle Player ist vor dem Hausgrund zu
   kontrastarm — die Bedienelemente verschwinden. */
.document-page.songs-page audio {
  display: block;
  width: 100%;
  max-width: 640px;
  color-scheme: light;
}

.document-page.songs-page .begleit {
  color: var(--paper);
  font-size: 21px;
  line-height: 1.72;
  max-width: 34em;
  margin: 21px 0 0;
}

/* Songtext unter dem Player: der Text, der Ton geworden ist.
   Ohne Auszeichnung, in der Fließtextgröße der anderen Seiten.
   Jede Verszeile ist ein eigener Block: nur so lässt sich ein Umbruch
   auf schmalem Schirm von einer neuen Zeile unterscheiden (hängender
   Einzug wirkt pro Element, nicht pro <br>). */
.document-page.songs-page .liedtext {
  max-width: 34em;
  margin: 42px 0 0;
}

.document-page.songs-page .liedtext .strophe { margin: 0 0 26px; }
.document-page.songs-page .liedtext .strophe:last-child { margin-bottom: 0; }

.document-page.songs-page .liedtext p {
  color: var(--paper);
  font-size: 21px;
  line-height: 1.72;
  margin: 0;
  padding-left: 1.1em;
  text-indent: -1.1em;
}

.document-page.songs-page .trenner {
  width: 58px;
  height: 1px;
  background: var(--line);
  margin: 42px 0;
}
.document-page.songs-page .leer {
  color: var(--quiet);
  font-size: 22px;
  margin: 0 0 55px;
}

.document-page.songs-page .zurueck { font-size: 20px; margin: 47px 0 0; }

@media (max-width: 600px) {
  .document-page.songs-page .document-heading { margin-bottom: 34px; }
  .document-page.songs-page .hinweis { font-size: 20px; margin-top: 18px; }
  .document-page.songs-page .lied { margin-bottom: 46px; }
  .document-page.songs-page .lied-kopf {
    flex-direction: column;
    align-items: stretch;
    gap: 17px;
  }
  .document-page.songs-page .lied-haupt { width: 100%; }
  .document-page.songs-page .cover {
    flex: none;
    width: 100%;
    max-width: 320px;
    height: auto;
    object-fit: contain;
  }
  .document-page.songs-page .lied h2 { font-size: 29px; margin-bottom: 14px; }
  .document-page.songs-page .begleit { font-size: 20px; margin-top: 17px; }
  .document-page.songs-page .trenner { margin: 34px 0; }
  .document-page.songs-page .zurueck { margin-top: 38px; }
  /* Lyrik auf schmalem Schirm: umbrochene Verse bekommen einen hängenden
     Einzug, sonst sieht jeder Umbruch wie eine neue Zeile aus. */
  .document-page.songs-page .liedtext { margin-top: 34px; }
  .document-page.songs-page .liedtext p {
    font-size: 20px;
    padding-left: 1.1em;
    text-indent: -1.1em;
  }
}