/* Hommage Tomas Dratva – gemeinsame Gestaltung für alle drei Konzepte (seit 03.10.2026).
   Baut auf scrollcraft.css auf (Tokens überschreiben, Engine-Selektoren nicht anfassen).
   Look der Diskographie-Seite: Serifen für Text, Helvetica/Roboto für Beschriftungen,
   Grau statt Schwarz, viel Weissraum. Eine gedämpfte Akzentfarbe (Gold-Ocker). */

:root {
  --sc-canvas: #ffffff;
  --sc-surface: #f5f3ef;
  --sc-ink: #2e3234;
  --sc-ink-soft: #6b7276;
  --sc-accent: #a8834a;
  --sc-accent-ink: #ffffff;
  --sc-font-display: "Hoefler Text", "Iowan Old Style", Palatino, Georgia, serif;
  --sc-font-text: "Hoefler Text", "Iowan Old Style", Palatino, Georgia, serif;
  --sc-font-mono: "Helvetica Neue", Roboto, Helvetica, Arial, sans-serif;
  --hm-sans: "Helvetica Neue", Roboto, Helvetica, Arial, sans-serif;
  --hm-dunkel: #1f2124;
  --hm-hell-auf-dunkel: #efe9df;
  --hm-gold: #a8834a;
  --hm-linie: #c8cfd2;
}

html { scroll-behavior: auto; }
body { background: var(--sc-canvas); color: var(--sc-ink); font-family: var(--sc-font-text);
  font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; margin: 0; }
a { color: #039be5; text-decoration: none; }
a:hover { color: #026899; text-decoration: underline; }
img { max-width: 100%; height: auto; }

/* ---------------------------------------------------------- Startbildschirm */
.hm-start { position: fixed; inset: 0; z-index: 100; background: #fff; display: flex;
  align-items: center; justify-content: center; text-align: center; padding: 24px;
  transition: opacity 900ms ease, visibility 0s linear 900ms; }
.hm-start.weg { opacity: 0; visibility: hidden; }
.hm-start h1 { font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(2.4rem, 5vw, 3.6rem);
  color: #1c1f21; margin: 0 0 .3em; letter-spacing: .01em; }
.hm-start .hm-unter { font-family: var(--hm-sans); font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase; color: #8b9297; margin: 0 0 2.6em; }
.hm-start .hm-knoepfe { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hm-knopf { display: inline-block; padding: 13px 30px; border: 1px solid #888; background: transparent;
  color: #333; font-family: var(--hm-sans); font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer; transition: all .2s; }
.hm-knopf:hover, .hm-knopf:focus-visible { background: #333; color: #fff; border-color: #333; }
.hm-knopf--leise { border-color: #ccd3d6; color: #8b9297; }
.hm-start .hm-hinweis { font-family: var(--hm-sans); font-size: 13px; color: #98a0a4; margin: 2.2em auto 0;
  max-width: 34rem; line-height: 1.6; }
.hm-start .hm-regel { width: 110px; height: 1px; background: var(--hm-linie); margin: 0 auto 2em; }

/* ------------------------------------------------- Leiste mit Notenlinie */
.hm-leiste { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 46px;
  background: rgba(255,255,255,.94); border-bottom: 1px solid #e4e8ea; display: flex; align-items: center;
  gap: 18px; padding: 0 20px; font-family: var(--hm-sans); font-size: 12px; letter-spacing: .04em;
  transition: background .6s, border-color .6s, opacity .6s; }
.hm-leiste a { color: #505656; white-space: nowrap; }
.hm-leiste a:hover { color: #039be5; text-decoration: none; }
.hm-leiste .hm-noten { flex: 1; height: 34px; min-width: 0; }
.hm-leiste.dunkel { background: rgba(31,33,36,.9); border-color: #34383c; }
.hm-leiste.dunkel a { color: #b9b3a8; }
.hm-noten svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hm-noten .linie { stroke: var(--hm-linie); stroke-width: 1; }
.hm-noten .note { fill: #b5bcc0; transition: fill .5s, r .5s; }
.hm-noten .note.neben { fill: #dde2e4; }
.hm-noten .note.gehoert { fill: #7d858a; }
.hm-noten .note.jetzt { fill: var(--hm-gold); }
.hm-noten .jahr { font-family: var(--hm-sans); font-size: 9px; fill: #a6adb1; letter-spacing: .06em; }
.hm-leiste.dunkel .hm-noten .linie { stroke: #4a4f54; }

/* ---------------------------------------------------- Ton-Anzeige, Lautsprecher */
.hm-ton { position: fixed; left: 20px; bottom: 18px; z-index: 60; font-family: var(--hm-sans);
  font-size: 12px; color: #6b7276; letter-spacing: .03em; max-width: 60vw;
  opacity: 0; transform: translateY(6px); transition: opacity .8s, transform .8s; pointer-events: none; }
.hm-ton.an { opacity: 1; transform: none; }
.hm-ton .hm-ton-zeichen { color: var(--hm-gold); margin-right: 8px; }
.hm-ton.dunkel { color: #b9b3a8; }
.hm-lautsprecher { position: fixed; right: 18px; bottom: 14px; z-index: 61; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid #ccd3d6; background: rgba(255,255,255,.9); cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #505656; }
.hm-lautsprecher:hover { border-color: #888; }
.hm-lautsprecher svg { width: 18px; height: 18px; }
.hm-lautsprecher .aus { display: none; }
.hm-lautsprecher.stumm .an { display: none; }
.hm-lautsprecher.stumm .aus { display: block; }

/* ------------------------------------------------------------------ Bühnen */
.hm-buehne { display: flex; align-items: center; justify-content: center; padding: 70px 6vw 60px; }
.hm-mitte { max-width: 44rem; margin: 0 auto; text-align: center; }
.hm-dunkel { background: var(--hm-dunkel); color: var(--hm-hell-auf-dunkel); }
.hm-dunkel .hm-quelle, .hm-dunkel .hm-label { color: #9c968c; }

.hm-label { font-family: var(--hm-sans); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: #8b9297; margin: 0 0 1.2em; }
.hm-kapitel { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 6vw; }
.hm-kapitel h2 { font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  color: #1c1f21; margin: 0; letter-spacing: .01em; line-height: 1.15; }
.hm-kapitel .hm-jahre { font-family: var(--hm-sans); font-size: 13px; letter-spacing: .28em; color: var(--hm-gold);
  margin-bottom: 1.4em; }

/* Station: Cover links, Text rechts */
.hm-station { min-height: 100vh; display: grid; grid-template-columns: minmax(220px, 360px) minmax(0, 36rem);
  gap: clamp(32px, 5vw, 72px); align-items: center; justify-content: center; padding: 90px 6vw 70px; }
.hm-station .hm-cover img { width: 100%; display: block; border: 1px solid #dde2e4;
  box-shadow: 0 18px 50px -24px rgba(30,32,34,.35); }
.hm-station h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.2; color: #1c1f21; margin: 0 0 .5em; }
.hm-station h3 .komp { font-style: italic; color: #5a6165; }
.hm-station p { margin: 0 0 1em; color: #3d4346; }
.hm-jahrzahl { font-family: var(--hm-sans); font-size: 13px; letter-spacing: .24em; color: var(--hm-gold); margin: 0 0 .8em; }
.hm-details { font-family: var(--hm-sans); font-size: 12px; letter-spacing: .06em; }
.hm-details a { color: #98a0a4; }
.hm-details a:hover { color: #039be5; }

/* Text im Stil eines Zitats */
.hm-zitat { font-family: var(--sc-font-display); font-style: italic; font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.35; color: #2e3234; margin: 0; text-wrap: balance; }
.hm-dunkel .hm-zitat { color: var(--hm-hell-auf-dunkel); }
.hm-quelle { display: block; font-family: var(--hm-sans); font-style: normal; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: #98a0a4; margin-top: 1.4em; }
.hm-gross { font-family: var(--sc-font-display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.45;
  color: #2e3234; text-wrap: pretty; }
.hm-dunkel .hm-gross { color: var(--hm-hell-auf-dunkel); }

/* Fixierte Bühnen: Inhalte übereinander, die Engine blendet per data-sc-cue */
.hm-lagen { position: relative; width: 100%; height: 100%; }
.hm-lage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 80px 8vw 70px; }

/* Bild mit langsamem Zoom, gesteuert vom Fortschritt der Szene (--sc-p) */
.hm-zoom { overflow: hidden; }
.hm-zoom img { transform: scale(calc(1 + var(--sc-p, 0) * .07)); transform-origin: 55% 40%; will-change: transform; }

/* Notenlinie gross (Szene Zeitachse, Bogen) */
.hm-noten--gross { width: min(1100px, 88vw); }
.hm-noten--gross svg { overflow: visible; }
.hm-noten--gross .linie { stroke-width: 1.2; }
.hm-noten--gross .zeichnen { stroke-dasharray: 1000; stroke-dashoffset: calc(1000 * (1 - min(1, var(--sc-p, 0) * 1.6))); }
.hm-noten--gross .note { opacity: calc((var(--sc-p, 0) - .35) * 4); }
.hm-noten--gross .jahr { font-size: 11px; opacity: calc((var(--sc-p, 0) - .3) * 4); }
.hm-bogen { fill: none; stroke: var(--hm-gold); stroke-width: 1.6; stroke-dasharray: 1000;
  stroke-dashoffset: calc(1000 * (1 - min(1, var(--sc-p, 0) * 2.2))); }

/* Horizontale Schiene der Trio-Bände */
.hm-schiene { display: flex; align-items: center; gap: 40px; padding: 0 8vw; height: 100%; }
.hm-schiene .hm-schiene-text { flex: 0 0 min(30rem, 70vw); }
.hm-schiene figure { flex: 0 0 auto; margin: 0; width: clamp(200px, 22vw, 300px); text-align: center; }
.hm-schiene figure img { width: 100%; display: block; border: 1px solid #dde2e4;
  box-shadow: 0 18px 50px -24px rgba(30,32,34,.35); }
.hm-schiene figcaption { font-family: var(--hm-sans); font-size: 12px; color: #8b9297; margin-top: 10px; letter-spacing: .04em; }

/* Zähler */
.hm-zahl { font-family: var(--sc-font-display); font-size: clamp(4rem, 11vw, 9rem); line-height: 1;
  color: #1c1f21; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* Abspann */
.hm-abspann { font-family: var(--hm-sans); font-size: 11.5px; line-height: 1.7; color: #8f877c;
  max-width: 46rem; margin: 3em auto 0; text-align: center; }
.hm-links { font-family: var(--hm-sans); font-size: 14px; letter-spacing: .04em; display: flex; gap: 26px;
  justify-content: center; flex-wrap: wrap; margin-top: 2em; }

/* Platzhalter für Hörbeispiele, die noch fehlen (nur Vorschau) */
.hm-ton .folgt { color: #c08a4a; }

/* ------------------------------------------------------------------ mobil */
.hm-mobilhinweis { display: none; }
@media (max-width: 860px) {
  .hm-mobilhinweis { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: #f5f3ef;
    border-top: 1px solid #e4e8ea; font-family: var(--hm-sans); font-size: 12px; color: #6b7276; padding: 10px 56px 10px 16px; }
  .hm-station { grid-template-columns: 1fr; padding: 80px 20px 50px; gap: 24px; }
  .hm-station .hm-cover { max-width: 260px; }
  .hm-leiste .hm-noten { display: none; }
  .hm-lage { padding: 70px 20px 60px; }
  .hm-ton { bottom: 54px; }
  .hm-lautsprecher { bottom: 52px; }
}

/* Textlagen in fixierten Stationen: Absätze liegen übereinander, die Engine blendet sie nacheinander */
.hm-textlagen { position: relative; min-height: 26rem; }
.hm-textlage { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; }
.hm-textlage > :last-child { margin-bottom: 0; }

/* Bogen nur in der Szene „Der Kreis schliesst sich" */
.hm-noten--gross:not(.hm-mit-bogen) .hm-bogen { display: none; }
.hm-mit-bogen .note, .hm-mit-bogen .jahr { opacity: 1; }
.hm-mit-bogen .zeichnen { stroke-dashoffset: 0; }

/* Bild in einer fixierten Szene, ganzflächig oder als Spalte */
.hm-vollbild { position: absolute; inset: 0; }
.hm-vollbild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-spaltenbild { height: min(78vh, 760px); }
.hm-spaltenbild img { height: 100%; width: auto; max-width: none; display: block; }

/* Zwei Notenbilder übereinander, das zweite wird mit dem Scrollen aufgedeckt */
.hm-vergleich { position: relative; width: min(1000px, 84vw); }
.hm-vergleich img { display: block; width: 100%; background: #fff; }
.hm-vergleich .oben { position: absolute; inset: 0; }
.hm-vergleich .oben img { height: 100%; object-fit: contain; }
.hm-bu { font-family: var(--hm-sans); font-size: 12px; color: #8b9297; line-height: 1.6; margin-top: 14px; max-width: 46rem; }

/* Die grosse Notenlinie bestimmt ihre Höhe selbst (die kleine in der Leiste füllt 34px) */
.hm-noten--gross svg { height: auto; }

/* Text über Fotos in dunklen Szenen lesbar halten */
.hm-dunkel .hm-gross { text-shadow: 0 1px 14px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.6); }

.hm-station--bild-rechts { grid-template-columns: minmax(0, 34rem) minmax(260px, 560px); }

/* Handy: stark vereinfacht (Rahmen 02.10.2026). Keine fixierten Szenen, keine Einblendungen –
   die Seite wird zu einer ruhigen, durchgehenden Abfolge. Musik spielt weiterhin je Abschnitt. */
@media (max-width: 860px) {
  [data-sc-act] { height: auto !important; }
  .sc-stage, [data-sc-stage] { position: static !important; height: auto !important; overflow: visible !important; }
  [data-sc-cue], [data-sc-in], [data-sc-stagger] > * { opacity: 1 !important; transform: none !important; }
  [data-sc-pan] { transform: none !important; }
  .hm-textlagen { min-height: 0; }
  .hm-textlage, .hm-lage { position: static; padding: 0; margin: 0 0 2.2em; }
  .hm-lagen { height: auto; }
  .hm-vollbild { position: relative; height: 60vh; left: 0 !important; }
  .hm-station, .hm-station--bild-rechts { grid-template-columns: 1fr; min-height: 0; padding: 48px 20px; }
  .hm-buehne { padding: 56px 20px; min-height: 0; }
  .hm-kapitel { min-height: 50vh; }
  .hm-schiene { flex-wrap: wrap; height: auto; padding: 40px 20px; gap: 20px; }
  .hm-schiene figure { width: calc(50% - 10px); }
  .hm-schiene .hm-schiene-text { flex-basis: 100%; }
  .hm-spaltenbild { height: auto; }
  .hm-spaltenbild img { width: 100%; height: auto; }
  .hm-zoom img { transform: none; }
  .hm-noten--gross .note, .hm-noten--gross .jahr { opacity: 1; }
  .hm-noten--gross .zeichnen, .hm-bogen { stroke-dashoffset: 0; }
}

/* ======== Anpassungen 03.10.2026 (Richards Rückmeldung zu Konzept 1) ======== */

/* Leiste: höher, deckend (vorher schien die Szene darunter durch), Notenlinie als Navigation */
.hm-leiste { height: 58px; background: #ffffff; }
.hm-leiste.dunkel { background: #1f2124; }
.hm-leiste .hm-noten { height: 44px; position: relative; }
.hm-noten .fortschritt line { stroke: var(--hm-gold); stroke-width: 1.4; transition: x2 .6s ease; }
.hm-noten .treffer { fill: transparent; cursor: pointer; }
.hm-noten .treffer:hover { fill: rgba(168,131,74,.10); }
.hm-tipp { position: absolute; top: 52px; transform: translateX(-50%); background: #2e3234; color: #fff;
  font-family: var(--hm-sans); font-size: 12px; letter-spacing: .03em; padding: 5px 10px; border-radius: 3px;
  white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 70; }
.hm-tipp.an { opacity: 1; }

/* Anzeige des laufenden Stücks: grösser, zweizeilig (Werk / Album · Jahr) */
.hm-ton { display: flex; align-items: flex-start; gap: 12px; left: 22px; bottom: 22px; max-width: min(46rem, 70vw);
  padding: 12px 18px 12px 14px; background: rgba(255,255,255,.92); border: 1px solid #e4e8ea; border-radius: 4px;
  box-shadow: 0 10px 30px -18px rgba(30,32,34,.45); }
.hm-ton .hm-ton-zeichen { font-size: 22px; line-height: 1; margin: 2px 0 0; }
.hm-ton-text { display: flex; flex-direction: column; gap: 3px; }
.hm-ton-titel { font-family: var(--sc-font-text); font-size: 17px; line-height: 1.3; color: #2e3234; letter-spacing: 0; }
.hm-ton-album { font-family: var(--hm-sans); font-size: 12.5px; color: #8b9297; letter-spacing: .03em; }
.hm-ton.dunkel { background: rgba(31,33,36,.88); border-color: #3a3e42; }
.hm-ton.dunkel .hm-ton-titel { color: var(--hm-hell-auf-dunkel); }
.hm-ton.dunkel .hm-ton-album { color: #9c968c; }

/* Weniger Scrollen: Kapitelkarten und Stationen kürzer */
.hm-kapitel { min-height: 55vh; }
.hm-station { min-height: 78vh; padding-top: 70px; padding-bottom: 40px; }
.sc-stage > .hm-station, [data-sc-stage] > .hm-station { min-height: 100vh; }

/* Schlussbild: keine Linie zurück, Notenlinie grösser, alle Noten gold („vollständig") */
.hm-noten--gross.hm-alle-gold .note { fill: var(--hm-gold); opacity: 1; }
.hm-noten--gross.hm-alle-gold .note.neben { fill: #d8c4a0; }
.hm-noten--gross.hm-alle-gold .zeichnen { stroke-dashoffset: 0; }
.hm-noten--gross.hm-alle-gold .jahr { opacity: 1; }

@media (max-width: 860px) {
  .hm-ton { left: 12px; right: 12px; bottom: 54px; max-width: none; }
  .hm-ton-titel { font-size: 15px; }
}

/* Fortschritt des laufenden Ausschnitts, unten in der Anzeige (03.10.2026) */
.hm-ton { overflow: hidden; }
.hm-ton-balken { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(168,131,74,.16); }
.hm-ton-balken > span { display: block; height: 100%; width: 0; background: var(--hm-gold); }
.hm-ton.dunkel .hm-ton-balken { background: rgba(239,233,223,.12); }

/* ======== Tondokument (Konzept 2 «In seinen Worten», 03.10.2026) ========
   Foto (entsättigt, langsamer Zoom) · Wellenform, die sich gold füllt · Untertitel Satz für Satz ·
   Quellenzeile mit «nochmal hören». Steht auf dem dunklen «Hörraum». Steuerung in hommage.js. */
.hm-hoerraum { background: #27292e; color: var(--hm-hell-auf-dunkel); }
.hm-td { margin: 0; height: 100%; box-sizing: border-box; display: grid;
  grid-template-columns: minmax(0, min(40vw, 620px)) minmax(0, 40rem); gap: clamp(36px, 5vw, 84px);
  align-items: center; justify-content: center; padding: 84px 6vw 96px; }
.hm-td--ohne-bild { grid-template-columns: minmax(0, 46rem); }
.hm-td-bild { position: relative; height: min(72vh, 760px); overflow: hidden; background: #1f2124; }
.hm-td-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(.85) brightness(.9); transform: scale(calc(1 + var(--sc-p, 0) * .07)); transform-origin: 50% 40%;
  transition: opacity 1.4s ease; will-change: transform; }
.hm-td-bild img[data-td-ab] { opacity: 0; }
.hm-td-bild img[data-td-ab].an { opacity: 1; }
.hm-td-label { font-family: var(--hm-sans); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: #9c968c; margin: 0 0 1.6em; }
.hm-td-welle { height: 56px; margin: 0 0 30px; }
.hm-td-welle svg { width: 100%; height: 100%; display: block; }
.hm-td-welle .grund rect { fill: rgba(239,233,223,.16); }
.hm-td-welle .gold rect { fill: #b8925a; }
.hm-td-untertitel { display: grid; margin: 0; min-height: 7.5em; align-items: start;
  font-family: var(--sc-font-display); font-style: italic; font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  line-height: 1.45; color: var(--hm-hell-auf-dunkel); }
.hm-td-satz { grid-area: 1 / 1; opacity: 0; transition: opacity .8s ease; text-wrap: pretty; }
.hm-td-satz.jetzt { opacity: 1; }
.hm-td:not(.hm-td--spielt):not(.hm-td--musik) .hm-td-satz.jetzt { opacity: .5; }
.hm-td-datum { display: block; font-family: var(--hm-sans); font-style: normal; font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase; color: #b8925a; margin: 0 0 .9em; }
.hm-td-quelle { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: 2.2em; font-family: var(--hm-sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: #9c968c; }
.hm-td-nochmal { background: transparent; border: 1px solid #4a4f54; color: #b9b3a8; font-family: var(--hm-sans);
  font-size: 12px; letter-spacing: .08em; padding: 7px 14px; border-radius: 3px; cursor: pointer; transition: all .2s; }
.hm-td-nochmal:hover { border-color: #b8925a; color: #efe9df; }
.hm-td-nochmal .m { display: none; }
.hm-td-musikzeile { font-family: var(--hm-sans); font-size: 12.5px; color: #9c968c; margin: 1.2em 0 0;
  opacity: 0; transition: opacity 1s; }
.hm-td--musik .hm-td-musikzeile { opacity: 1; }

/* Ohne Ton: alle Sätze stehen da, als ein Zitat; kein Knopf, keine Wellenform-Füllung */
.hm-ohne-ton .hm-td-untertitel { display: block; min-height: 0; font-size: clamp(1.15rem, 1.8vw, 1.45rem); }
.hm-ohne-ton .hm-td-satz { opacity: 1; }
.hm-ohne-ton .hm-td-datum { margin-top: 1em; }
.hm-ohne-ton .hm-td-datum.wiederholt { display: none; }
.hm-ohne-ton .hm-td-nochmal, .hm-ohne-ton .hm-td-welle, .hm-ohne-ton .hm-td-musikzeile { display: none; }

/* Leiste in freier Reihenfolge (Konzept 2): keine goldene Fortschrittslinie */
.hm-leiste[data-hm-reihenfolge="frei"] .fortschritt { display: none; }

/* Kennzeichnung der Stimme auf dem Startbildschirm */
.hm-start .hm-kennung { font-family: var(--hm-sans); font-size: 12.5px; line-height: 1.6; color: #8b9297;
  max-width: 34rem; margin: 2.4em auto 0; padding-top: 1.6em; border-top: 1px solid #e4e8ea; }

@media (max-width: 860px) {
  .hm-td, .hm-td--ohne-bild { grid-template-columns: 1fr; padding: 48px 20px; gap: 24px; height: auto; }
  .hm-td-bild { height: 52vh; }
  .hm-td-untertitel { display: block; min-height: 0; font-size: 1.15rem; }
  .hm-td-satz { opacity: 1; }
  .hm-td--spielt .hm-td-satz:not(.jetzt) { opacity: .45; }
  .hm-td:not(.hm-td--spielt):not(.hm-td--musik) .hm-td-satz.jetzt { opacity: 1; }
  .hm-td-datum.wiederholt { display: none; }
  .hm-td-nochmal .d { display: none; }
  .hm-td-nochmal .m { display: inline; }
  .hm-td-bild img { transform: none; }
}

/* Lautsprecher-Knopf ohne Ton ausblenden (display:flex oben überstimmte das hidden-Attribut) */
.hm-lautsprecher[hidden] { display: none; }

/* Satz nach der Stimme (z. B. «Die Kadenzen schrieb er selbst.»), 03.10.2026 */
.hm-td-musikzeile--satz { font-family: var(--sc-font-display); font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  color: var(--hm-hell-auf-dunkel); letter-spacing: 0; margin-top: 1.4em; }
.hm-ohne-ton .hm-td-musikzeile--satz { display: block; opacity: 1; }
/* Weisse Bühne, die über eine dunkle Szene hereinkommt (sonst bleibt sie bis zum Fixieren dunkel) */
.hm-weiss { background: #ffffff; }

/* Automatischer Ablauf: Knopf Anhalten / Weiter (03.10.2026) */
.hm-auto { position: fixed; right: 70px; bottom: 18px; z-index: 61; height: 36px; padding: 0 16px; border-radius: 18px;
  border: 1px solid #ccd3d6; background: rgba(255,255,255,.92); color: #505656; font-family: var(--hm-sans);
  font-size: 12px; letter-spacing: .08em; cursor: pointer; transition: all .2s; }
.hm-auto:hover { border-color: #888; color: #1c1f21; }
.hm-auto.pausiert { background: #2e3234; color: #fff; border-color: #2e3234; }
.hm-auto[hidden] { display: none; }
.hm-start .hm-knoepfe .hm-knopf { min-width: 15rem; }
@media (max-width: 860px) { .hm-auto { display: none; } .hm-knopf[data-hm-ton="auto"] { display: none; } }

/* Grosse Notenlinie: Noten anklickbar wie in der Leiste, Hinweis unter der Note (03.10.2026) */
.hm-noten--gross { position: relative; }
.hm-noten--gross .treffer { fill: transparent; cursor: pointer; }
.hm-noten--gross .treffer:hover { fill: rgba(168,131,74,.10); }
.hm-tipp--gross { top: 0; }

/* ======== Kapitelkarten (03.10.2026): Ziffer, Titel, Jahre, Notenlinie mit den Aufnahmen des Kapitels ======== */
.hm-kapitel-karte { text-align: center; width: min(1100px, 88vw); }
.hm-ziffer { font-family: var(--sc-font-display); font-size: clamp(4.5rem, 9vw, 7.5rem); line-height: 1; color: var(--hm-gold);
  margin: 0 0 .15em; letter-spacing: .04em; }
.hm-kapitel-karte h2 { font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(2.6rem, 5.2vw, 4.2rem);
  color: #1c1f21; margin: 0; line-height: 1.1; letter-spacing: .01em; }
.hm-kapitel-karte .hm-jahre { font-family: var(--hm-sans); font-size: 14px; letter-spacing: .32em; color: var(--hm-gold);
  margin: 1.1em 0 0; }
.hm-kapitel-zeile { margin: 1em auto 0; max-width: 40rem; color: #5a6165; }
.hm-kapitel-karte .hm-noten--gross { width: min(1000px, 84vw); margin: 2.8rem auto 0; }
/* Notenlinie der Kapitelkarte: voll gezeichnet, nur die Aufnahmen des Kapitels gold */
.hm-hervor-aktiv .zeichnen { stroke-dashoffset: 0; }
.hm-hervor-aktiv .note { opacity: 1; fill: #dfe3e5; }
.hm-hervor-aktiv .note.neben { fill: #eceff0; }
.hm-hervor-aktiv .note.hervor { fill: var(--hm-gold); }
.hm-hervor-aktiv .note.hervor.neben { fill: #d8c4a0; }
.hm-hervor-aktiv .jahr { opacity: 1; }
/* Kapitelanzeige in der Leiste */
.hm-kapitelanzeige { font-family: var(--hm-sans); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--hm-gold); white-space: nowrap; min-width: 0; max-width: 0; overflow: hidden; opacity: 0;
  transition: opacity .6s, max-width .6s; }
.hm-kapitelanzeige.an { opacity: 1; max-width: 16rem; }
@media (max-width: 860px) {
  .hm-kapitel-karte .hm-noten--gross { display: none; }
  .hm-kapitelanzeige { display: none; }
}