/* Listencareful Tonstudio, Entwurf 13.09.2026
   Grundgeruest: Aufbau, Raster, Verhalten. Enthaelt keine Farb- und Schriftentscheidung.
   Die stehen in Gestaltung-Richtung-Kante.css. Die zweite Richtung „Werkbank" ist am
   13.09.2026 verworfen worden, mit ihr der Entwurfsschalter unten rechts. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ---------- Raster ---------- */
.bahn { width: min(100% - 2.5rem, 72rem); margin-inline: auto; }
.bahn-schmal { width: min(100% - 2.5rem, 40rem); margin-inline: auto; }
@media (max-width: 40rem) { .bahn, .bahn-schmal { width: calc(100% - 2rem); } }

main section { padding-block: clamp(2.4rem, 5vw, 4.5rem); }
main section + section { padding-top: 0; }

/* ---------- Kopf ----------
   Eine Stellschraube: --markenhoehe. Am 13.09.2026 in Claude Code mit Helvetica Neue
   nachgemessen. Bei 2,2rem war die Schrift im Lockup (12px) nicht groesser als die
   Menuepunkte (13px), die Marke las sich leiser als das Menue. 2,8rem gibt eine klare
   Stufe, ohne dass der Kopf laut wird. Unter 47,5rem 2,6rem, damit Marke, „EN" und
   Menueknopf auch bei 360px Breite in einer Zeile stehen, siehe unten.

   Ab 71rem steht alles in einer Zeile, Marke links, Menue rechts, Sprachhinweis ganz
   rechts hinter einem Trenner. Darunter zwei Zeilen: Marke und Sprachhinweis oben, das
   Menue in voller Breite darunter. Grund: sonst faellt der Sprachumschalter als
   einzelnes Wort auf eine dritte Zeile und sieht wichtiger aus als jeder Menuepunkt.
   Der Umbruch sitzt bewusst hoeher, als die Zeile gerade eben passt: an der Grenze
   bleiben zwischen Marke und Menue gut 70px Luft, darunter klebt das Menue an der Marke.
   Bis 28.09.2026 lag die Grenze bei 67rem, mit sieben Menuepunkten.
   Nachgemessen am 28.09.2026 mit Helvetica Neue in Safari und Chrome, nachdem „Tools“
   als achter Menuepunkt dazugekommen ist, beide Browser pixelgleich: das Menue ist
   702px breit. Die Luft zwischen Marke und Menue betraegt in der
   einzeiligen Fassung Fensterbreite minus 1063px; bei der alten Grenze von 67rem
   (1072px) waren es 26px, und bis 1099px fiel der Sprachhinweis in eine zweite Zeile.
   71rem (1136px) gibt 73px, bei 1280px sind es 129px. */
:root { --markenhoehe: 2.8rem; }

.kopf { position: relative; z-index: 20; padding-block: 1.6rem; }

/* Der Kopf bleibt beim Scrollen oben stehen, aber erst ab 71rem (bis 28.09.2026 67rem,
   siehe oben), entschieden am 14.09.2026.
   Genau ab dieser Breite steht er einzeilig (siehe Umbruch weiter unten). Darunter ist er
   zweizeilig und bliebe 146px hoch, also 17 Prozent der Fensterhoehe; ausserdem sind
   schmale Fenster meist Telefone, wo der Platz am knappsten ist. Dort scrollt der Kopf
   deshalb wie bisher mit.
   Er behaelt dabei seine Groesse. Eine Fassung, die beim Scrollen schrumpft, ist am
   14.09.2026 gebaut und wieder entfernt worden: das Menue springt beim Umschalten, und eine
   Marke, die zwei Groessen hat, ist keine Marke.
   Der eigene Hintergrund ist noetig, sonst scheint der Inhalt durch, sobald der Kopf steht.
   Durchscheinen mit Unschaerfe und ein Lattenraster als Maske sind geprueft und verworfen,
   beides kostet die Lesbarkeit der Menuepunkte. */
@media (min-width: 71rem) {
  .kopf { position: sticky; top: 0; background: var(--papier); }
  /* Sprungmarken landen sonst unter dem stehenden Kopf. */
  main section[id] { scroll-margin-top: 8rem; }
}

/* Die Linie unter dem Kopf ist so breit wie die Bahn darunter, nicht wie das Fenster.
   Alex am 14.09.2026: eine Linie von Rand zu Rand zerschneidet die Seite, waehrend jede
   andere schwere Linie (Ueberschrift, Kennzahlenzeile, Preisbaustein) an der Bahn endet.
   Deshalb liegt sie als eigene Flaeche an der Unterkante statt als border-bottom, und ihre
   Breite ist dieselbe Formel wie bei .bahn. Wer die Bahn aendert, aendert sie hier mit.
   Die Farbe steht in der Richtung, nicht hier. */
.kopf::after { content: ""; position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%); width: min(100% - 2.5rem, 72rem); height: 2px; }
@media (max-width: 40rem) { .kopf::after { width: calc(100% - 2rem); } }
.kopf .bahn { display: flex; align-items: center; gap: .8rem 1.6rem; flex-wrap: wrap; }
.wortmarke { text-decoration: none; margin-right: auto;
  display: inline-flex; align-items: center; gap: .55rem; }
/* Zeichen und Lockup nehmen die Textfarbe der Wortmarke an, faerben sich also mit der
   Richtung mit. Die Schrift im Lockup kommt aus der Richtung, nicht aus dem SVG. */
.zeichen { width: 1.55rem; height: 1.55rem; flex: none; }   /* einzeilige Fassung, derzeit ungenutzt */
.lockup { height: var(--markenhoehe); width: auto; display: block; flex: none; }
.lockup text { font-family: inherit; }
.lockup .leise { fill: currentColor; opacity: .62; }
/* Abstand und Polster der Menuepunkte haengen zusammen und sind gegeneinander gerechnet.
   Seit dem 13.09.2026 ist ein Menuepunkt ein Block, der sich fuellen kann, und braucht
   dafuer seitliches Polster. Damit der Kopf dadurch nicht breiter wird, ist der Abstand
   um denselben Betrag geschrumpft: 7 Punkte mal 2 x 0,42em Polster sind rund 77px, die
   6 Abstaende geben von 1,15rem auf 0,35rem genau diese 77px ab. Nachgemessen bei 1280px:
   686px vorher, 687px nachher. Der Umbruchpunkt von 67rem galt also weiter; seit dem
   achten Menuepunkt am 28.09.2026 liegt er bei 71rem, siehe oben.
   Wer das Polster aendert, rechnet den Abstand mit. */
.menue { display: flex; flex-wrap: wrap; gap: 0 .35rem; list-style: none; margin: 0; padding: 0; }
.menue a { text-decoration: none; padding-block: .3rem; padding-inline: .42em;
  display: inline-block; }
.sprache { text-decoration: none; border-left: 1px solid var(--linie); padding-left: 1.6rem; }
/* Seit 29.09.2026 gibt es Englisch, und der Kopf soll beim Umschalten der Sprache stillstehen.
   Deshalb reserviert jeder Menuepunkt, dessen Wort sich zwischen den Sprachen unterscheidet,
   den Platz fuer das laengere der beiden Woerter: das Wort der anderen Sprache steht in
   data-platz und liegt unsichtbar und ohne Hoehe ueber dem Wort. Als ::before steht es nicht
   im Text der Seite, Suchmaschinen und Vorleseprogramme sehen es nicht. Das Wort selbst steht
   mittig im Block. Im aufgeklappten Menue auf dem Telefon faellt der Platzhalter weg. */
.menue a[data-platz] { text-align: center; }
.menue a[data-platz]::before { content: attr(data-platz); display: block; height: 0;
  visibility: hidden; }
/* Der Sprachumschalter ist seit 29.09.2026 ein Schalter mit beiden Sprachen, DE und EN,
   und damit in beiden Sprachen gleich breit. Aussehen und Bewegung stehen in der Richtung. */
.sprache-wahl { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; }
.sprache-wahl > .sprache-de, .sprache-wahl > .sprache-en { position: relative; z-index: 1;
  text-align: center; }
.sprache-knopf { position: absolute; top: 0; bottom: 0; left: 0; right: 50%; }

/* 70.99rem statt 71rem, seit 28.09.2026: bei genau 71rem (1136px) griffen sonst diese Regel
   und die min-width-Regeln oben gleichzeitig, der Kopf stand zweizeilig und zugleich fest. */
@media (max-width: 70.99rem) {
  .kopf .bahn { row-gap: 1.1rem; }
  .kopf nav { order: 3; flex: 1 0 100%; }
  .sprache { order: 2; border-left: 0; padding-left: 0; }
}

/* Einklappbares Menue, entschieden am 13.09.2026. Ausgeklappt liefen die sieben
   Menuepunkte auf dem Telefon ueber drei Zeilen, der Kopf war fast 200px hoch.
   Unter 47,5rem steht oben Marke, Sprachumschalter und Knopf. 47,5rem, weil das Menue
   erst ab 743px (46,4rem) in eine Zeile passt: so gibt es keine Breite, auf der es
   zweizeilig unter der Marke steht. Nachgemessen am 28.09.2026 mit Helvetica Neue in
   Safari und Chrome, mit acht Menuepunkten; mit sieben passte es ab rund 42rem, die
   Grenze lag bis dahin bei 44rem, und von 705 bis 742px stand das Menue mit „Tools“
   zweizeilig. 47,5rem (760px) laesst 17px Reserve und bleibt unter 768px, damit ein
   Tablet im Hochformat das offene Menue behaelt.
   Der Sprachumschalter klappt nicht mit ein. Wer kein Deutsch liest, sucht die englische
   Fassung nicht hinter einem Knopf, auf dem „Menü" steht. Damit er neben Marke und Knopf
   passt, heisst er hier „EN" statt „English" (360px Breite: 328px Platz).
   Den Knopf baut seite.js und setzt dabei .hat-menueknopf. Ohne JavaScript greifen die
   Einklapp-Regeln nicht, das Menue bleibt dann offen stehen. */
.menueknopf { display: none; font: inherit; cursor: pointer; }
.sprache-kurz { display: none; }
@media (max-width: 47.5rem) {
  :root { --markenhoehe: 2.6rem; }
  .kopf .bahn { column-gap: .6rem; }   /* bis 29.09.2026 1rem, enger seit dem Sprachschalter */
  .sprache-voll { display: none; }
  .sprache-kurz { display: inline; }
  .hat-menueknopf .menueknopf { display: block; order: 3; }
  .hat-menueknopf nav { display: none; }
  .hat-menueknopf.offen nav { display: block; }
  .hat-menueknopf.offen .menue { flex-direction: column; }
  .hat-menueknopf.offen .menue a { padding-block: .55rem; }
  .hat-menueknopf.offen .menue a[data-platz] { text-align: left; }
  .hat-menueknopf.offen .menue a[data-platz]::before { content: none; }
}

/* ---------- Einstieg ----------
   Unten ohne eigenes Polster, entschieden am 13.09.2026. Vorher standen zwischen der
   Kennzahlenzeile und der naechsten Ueberschrift 2rem Abstand plus 4,5rem
   Abschnittspolster plus 1,9rem Ueberschriftenabstand, zusammen ueber 130px, und darin
   zwei schwere Linien uebereinander. Jetzt schliesst die Oberlinie der naechsten
   Ueberschrift die Kennzahlenzeile ab, der Abstand betraegt rund 2,5rem. */
.einstieg { padding-top: clamp(1rem, 3vw, 2.5rem); padding-bottom: 0; }
.einstieg h1 { margin: 0 0 .6em; }
.vorspann { margin: 0 0 1.6rem; max-width: 34em; }

/* Kennzahlen direkt unter der Hauptueberschrift, ohne Bewegung, ohne Kartenoptik.
   Raster statt Flexzeile, umgestellt am 13.09.2026, als der Block auf der Startseite von
   vier auf acht Angaben gewachsen ist. Als Flexzeile richteten sich die Angaben nach ihrer
   eigenen Breite und brachen ungleich um. Im Raster sind die Spalten gleich breit, also
   stehen die Angaben der zweiten Zeile genau unter denen der ersten.
   16,5rem als kleinste Spaltenbreite ist so gewaehlt, dass in die 72rem breite Bahn genau
   vier Spalten passen: vier Angaben ergeben eine Zeile, acht ergeben zwei volle Zeilen.
   auto-fit laesst leere Spalten wegfallen, deshalb stehen die Seiten mit drei Angaben
   sauber in drei Spalten. */
.sofort { display: grid; gap: .1rem 1.5rem; list-style: none; margin: 0; padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr)); }
.sofort > li { padding-block: .55rem; max-width: none; }
/* Eine Angabe, deren grosse Zeile zu lang fuer eine Spalte ist, nimmt zwei Spalten.
   Betrifft derzeit „Aufnahme, Producing, Mixing, Mastering" auf der Katalogseite. */
.sofort > li.weit { grid-column: span 2; }
.sofort b { display: block; font-weight: inherit; }
/* Auf dem Telefon zwei Spalten statt einer. Untereinander ergaben acht Angaben einen
   693px hohen Block, durch den man sich vor dem ersten Inhalt durchscrollen musste.
   Nebeneinander sind es rund 360px. Die grosse Zahl faellt dafuer mit (siehe die
   Groessenformel in der Richtung), sonst braeche „800 bis 1.500 €" bei 360px um. */
@media (max-width: 36rem) {
  .sofort { grid-template-columns: repeat(2, 1fr); gap: .1rem 1rem; }
}

/* ---------- Text ---------- */
main h2 { margin: 1.9rem 0 .8rem; }
main h3 { margin: 2rem 0 .5rem; }
main p, main li { max-width: 38em; }
main p { margin: 0 0 1rem; }
.liste { list-style: none; margin: 0 0 1.4rem; padding: 0; }
/* Die Marke der Aufzaehlung ist ein Block, kein Strich, siehe Richtung. Ihre Hoehe steht
   dort, deshalb haengt sie hier an ihrer Mitte statt an ihrer Oberkante: so bleibt sie auf
   derselben Linie, egal wie hoch die Richtung sie macht. Der Einzug von 1,6rem muss breiter
   bleiben als die Marke. */
.liste > li { padding-block: .45rem; padding-left: 1.6rem; position: relative; }
.liste > li::before { content: ""; position: absolute; left: 0; top: 1.25em; width: 1rem;
  height: 1px; transform: translateY(-50%); }

/* ---------- Fragenblock „Was brauchst du?" ----------
   Statt eines nachgebauten Chats echte Fragen mit echten Antworten. Alles steht als Text
   im HTML, also auch fuer einen Agent zitierbar, und braucht kein JavaScript. */
.fragenliste { list-style: none; margin: 1.4rem 0 0; padding: 0; max-width: 44em; }
.fragenliste > li { max-width: none; border-top: 1px solid var(--linie); }
.fragenliste > li:last-child { border-bottom: 1px solid var(--linie); }
.fragenliste summary { cursor: pointer; padding: .85rem 2rem .85rem 0; position: relative;
  list-style: none; }
.fragenliste summary::-webkit-details-marker { display: none; }
.fragenliste summary::after { content: "+"; position: absolute; right: .2rem; top: .8rem;
  color: var(--tinte-leise); font-variant-numeric: tabular-nums; }
.fragenliste details[open] summary::after { content: "\2013"; }
.fragenliste details > p { margin: 0 0 1rem; padding-right: 2rem; max-width: 38em; }

/* ---------- Preisbaustein ---------- */
.preise { margin: 1rem 0 0; padding: 0; list-style: none; }
.preise > li { display: flex; flex-wrap: wrap; gap: 0 1rem; justify-content: space-between;
  padding-block: .7rem; max-width: 38em; }
.preise .posten { flex: 1 1 14rem; }
.preise .betrag { flex: 0 0 auto; white-space: nowrap; }
.preise .fussnote { flex: 1 1 100%; }

/* ---------- Bilder ---------- */
figure { margin: 0; }
.bild-breit { width: 100%; margin-block: clamp(2rem, 5vw, 4rem) 0; }
.bild-breit img { width: 100%; }
.bildzeile { margin-top: 1rem; max-width: 38em; }

/* Portraetreihe auf „Ueber mich": die Spiegelserie als Reihe, nicht als grosses
   Einzelbild. Am 13.09.2026 von 34rem auf die volle Bahnbreite gestellt: bei 34rem waren
   die drei Bilder rund 178px breit, das las sich als Briefmarkenreihe. Jetzt sind es rund
   368px, und die Person darin ist erkennbar. */
/* minmax(0, 1fr) statt 1fr: eine Rasterspalte wird sonst nie schmaler als das Bild darin
   von Haus aus ist. Bei 390px lief die Reihe dadurch 142px aus der Seite hinaus. Gefunden
   am 13.09.2026 beim Nachmessen, der Fehler war von Anfang an drin. */
.portraetreihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
  max-width: none; margin-block: clamp(1.8rem, 4vw, 3rem) 0; }
.portraetreihe img { width: 100%; }
.portraetreihe figcaption { grid-column: 1 / -1; }

/* Ein Hochformat im Fliesstext, seit 14.09.2026 auf der Producing-Seite. Es laeuft
   bewusst nicht ueber die volle Fensterbreite wie die breiten Bilder: ein Hochformat
   ueber 1440px waere fast drei Bildschirmhoehen hoch. Auf 26rem gedeckelt steht es in
   der Bahn wie ein Absatz, rund 416px breit, und bricht den Rhythmus der breiten Bilder,
   ohne die Seite auseinanderzuziehen. Ohne Parallax, aus demselben Grund: die Bewegung
   gehoert den Bildern, die die ganze Breite nehmen. */
.bild-hoch { max-width: 26rem; margin-block: clamp(1.8rem, 4vw, 3rem) 0; }
.bild-hoch img { width: 100%; }
.hinweis { margin-top: .8rem; max-width: 38em; }

/* Verzahnung: ein gesetzter Moment je Seite. Das Bild laeuft langsamer als der Text.
   Wird nur von seite.js bewegt, nie oberhalb der Falz. */
.verzahnt { overflow: clip; }
.verzahnt img { will-change: transform; }

/* ---------- Lattenschiene, Leseposition ----------
   Mittig und kompakt, dafuer lange Latten und enge Abstaende: das liest sich als Spektrum,
   nicht als Leiter. Erst ab 80rem sichtbar, darunter reicht der Rand neben der Bahn nicht
   aus, ohne dass die Latten in den Text ragen. */
.lattenschiene { position: fixed; left: 0; top: 0; bottom: 0; width: 3.5rem; z-index: 10;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  pointer-events: none; }
/* 5px statt 3px, am 13.09.2026 auf Alex' Wunsch. Die Latte traegt damit auch ohne Rand
   auf einem Foto: der duenne dunkle Rand, der das zuerst leisten sollte, ist wieder
   entfernt, weil er die Schiene auf dem Papier unruhig gemacht hat. Dass eine helle Latte
   auf einem sehr hellen Foto fast verschwindet, ist damit in Kauf genommen; die Schiene
   zeigt die Leseposition und traegt keine Angabe, die sonst fehlen wuerde. */
.lattenschiene span { display: block; height: 5px; transform-origin: left center; }
@media (max-width: 80rem) { .lattenschiene { display: none; } }

/* ---------- Katalog ---------- */
/* Feste Spaltenzahl statt auto-fill, umgestellt am 13.09.2026. Mit auto-fill richtete
   sich die Spaltenzahl nach der Fensterbreite, und die letzte Reihe blieb je nach Breite
   halb leer. Jetzt sind es 6, 3 oder 2 Spalten, alles Teiler von 6, und die Reihen fuehren
   Vielfache von 6 (Anker 6, Zuletzt erschienen 12, Aus dem Katalog 6). Damit ist jede
   Reihe auf jeder Breite voll. Wer die Anzahl aendert, bleibt bei Vielfachen von 6. */
.kartenreihe { display: grid; gap: 1rem; padding: 0; margin: 1.5rem 0 0; list-style: none;
  grid-template-columns: repeat(6, 1fr); }
@media (max-width: 64rem) { .kartenreihe { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 34rem) { .kartenreihe { grid-template-columns: repeat(2, 1fr); } }
.karte { perspective: 900px; }
.karte .seiten { position: relative; aspect-ratio: 1; transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2,.7,.3,1); }
.karte:hover .seiten, .karte:focus-within .seiten { transform: rotateY(180deg); }
.karte .vorn, .karte .hinten { position: absolute; inset: 0; backface-visibility: hidden; }
.karte .vorn img { width: 100%; height: 100%; object-fit: cover; }
/* Rueckseite, neu gebaut am 13.09.2026. Vorher eine schwarze Flaeche mit unterstrichenen
   Zeilen. Jetzt drei Schichten uebereinander: das eigene Cover, hell gewaschen, darueber
   eine Wellenform aus der Kennung der Produktion, darueber die Verweise als Bloecke.
   Die Wellenform ist Zierde und traegt keine Angabe, deshalb aria-hidden. */
.karte .hinten { transform: rotateY(180deg); overflow: hidden; }
.karte .ausgebleicht { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; }
.karte .welle { position: absolute; left: 0; right: 0; top: 50%; height: 42%;
  transform: translateY(-50%); width: 100%; }
.karte .hinten .inhalt { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .3rem; padding: .8rem; }
.karte .hinten a { text-decoration: none; }
.karte .hinten .ohne { display: block; text-align: center; }
.karte .angabe { margin-top: .5rem; }
.karte .angabe .kuenstler { display: block; }
/* Fehlendes Cover ist kein Fehler, sondern eine ruhige Flaeche mit dem Titel darin. */
.karte .vorn.ohne-bild { display: flex; align-items: flex-end; padding: .8rem; }

/* Suchfeld, Rollenfilter und Trefferzeile bleiben beim Scrollen durch die Liste oben
   stehen, entschieden am 14.09.2026. Bei 709 Zeilen ist die Suche sonst nach zwei
   Bildschirmhoehen nicht mehr erreichbar, und wer im Katalog nach unten gescrollt ist,
   muss genau dann suchen koennen.
   Eine feste Anzahl sichtbarer Zeilen braucht es dafuer nicht: position sticky loest das
   ohne eigenen Scrollkasten. Die Liste bleibt Teil der Seite und scrollt mit dem Fenster.
   Der Abstand von oben haengt daran, ob der Kopf steht: ab 71rem steht er, darunter
   scrollt er weg und dieser Block sitzt selbst an der Oberkante.
   Wie hoch der stehende Kopf ist, steht bewusst nicht hier. Er ist rechnerisch 6rem hoch
   (1,6rem Polster oben und unten plus 2,8rem Markenhoehe), aber nur solange das Menue in
   eine Zeile passt, und das haengt an der Schrift und an der Zoomstufe. Deshalb misst
   seite.js die Hoehe und schreibt sie als --kopfhoehe. Die Werte hier sind der Rueckfall,
   wenn kein JavaScript laeuft: 6rem ab 71rem, sonst 0.
   Der eigene Hintergrund ist noetig, damit die Zeilen darunter durchlaufen statt
   durchzuscheinen, und der Rang liegt zwischen Liste und Kopf.
   Der Abstand nach oben ist auf Rand und Polster verteilt: 0,8rem Rand plus 0,7rem
   Polster ergeben in Ruhe dieselben 1,5rem, die vorher die Suchzeile als Rand hatte.
   Steht der Block aber oben, zaehlt nur das Polster, und die 0,7rem halten die
   Beschriftung von der Linie unter dem Kopf weg. Mit dem Rand allein klebte sie mit 9px
   daran. */
.katalogkopf { position: sticky; top: var(--kopfhoehe, 0px); z-index: 10;
  background: var(--papier); margin-top: .8rem; padding-block: .7rem; }
@media (min-width: 71rem) { .katalogkopf { top: var(--kopfhoehe, 6rem); } }

.suchzeile { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; }
/* Das Suchfeld nimmt den Platz, den der Beispieltext im Feld braucht:
   „Künstler:in, Titel, Album, Genre, Jahr …". Kuerzer abgeschnitten waere der Hinweis
   wertlos, denn er soll ja zeigen, wonach sich suchen laesst. */
.suchzeile .suchfeld { flex: 0 1 26rem; min-width: 0; }
.suchzeile label { display: block; }
.suchzeile input, .suchzeile select { font: inherit; padding: .5rem .6rem; }
.suchzeile input[type="search"] { width: 100%; }
/* Das Auswahlfeld „Rolle" gibt die Systemdarstellung ab, entschieden am 13.09.2026.
   Vorher war es 42px hoch, das Suchfeld daneben 46,34px: gleiche Schrift, gleiches Polster,
   gleicher Rahmen, und trotzdem 4,34px Unterschied auf jeder Breite. Grund ist die
   Systemdarstellung des Auswahlfeldes: sie uebernimmt die Zeilenhoehe des Textes nicht,
   sondern rechnet „normal". Eine Zeilenhoehe von aussen zu setzen hilft nicht, das System
   ueberschreibt sie (am 13.09.2026 gemessen: keine Aenderung). Ohne Systemdarstellung ist
   das Feld eine gewoehnliche Flaeche und exakt so hoch wie das Suchfeld.
   Dafuer faellt der Systempfeil weg. Ohne Pfeil ist dem Feld nicht mehr anzusehen, dass es
   aufklappt, deshalb setzt die Richtung einen eigenen; das Polster rechts haelt ihm den
   Platz frei. */
.suchzeile select { appearance: none; -webkit-appearance: none; padding-right: 2.1rem; }
.treffer { margin-top: 1.4rem; }
.katalogliste { list-style: none; margin: 1rem 0 0; padding: 0; max-width: none; }
/* Ausgerichtet wird mittig, nicht auf der Grundlinie. Jahr, Werk und Rollen sind gleich
   gross und stehen dadurch ohnehin auf einer Linie. Die Verweise sind dagegen Bloecke mit
   eigenem Polster, und ihre Grundlinie haengt davon ab, welcher der drei Plaetze belegt
   ist. Mit baseline sprangen dadurch einzelne Zeilen in der Hoehe. */
.katalogliste > li { display: grid; gap: 0 1rem; padding-block: .55rem;
  grid-template-columns: 3.5rem minmax(0, 1fr) 18rem 15.5rem; align-items: center;
  max-width: none; }   /* sonst greift die Lesebreite von 38em aus „main li" */
/* Rollen und Verweise stehen in festen Spalten, nicht in mitwachsenden. Nur so beginnen sie
   in jeder Zeile an derselben Stelle, egal wie viele Rollen oder Dienste eine Zeile hat. */
.katalogliste .rollen { min-width: 0; }
.katalogliste .verweise { display: grid; grid-template-columns: repeat(3, 5rem); gap: .25rem; }
.katalogliste .jahr { font-variant-numeric: tabular-nums; }
/* Eine Zeile je Produktion. Laeuft der Titel ueber, wird er beschnitten statt umgebrochen,
   sonst zerfaellt die Liste optisch in Bloecke. */
.katalogliste .werk, .katalogliste .rollen { max-width: none; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
/* Im Werk stehen Kuenstler:in, Titel und die Markierung nebeneinander. Beschnitten wird
   zuerst der Titel: die Markierung soll auch bei langen Titeln stehen bleiben, sonst waere
   sie genau dort weg, wo die Zeile ohnehin schon eng ist.
   Seit 20.09.2026 darf auch die Kuenstler:in beschnitten werden, aber erst, wenn vom Titel
   nichts mehr uebrig ist. Vorher wurde sie nie beschnitten, und ein Name, der allein
   breiter war als die Spalte, schob die Seite am Telefon ins Querscrollen. Die Reihenfolge
   kommt aus dem Schrumpffaktor: der des Titels ist so viel groesser, dass auf die
   Kuenstler:in weniger als ein Vierundsechzigstel Pixel entfaellt, solange der Titel noch
   Breite hat. Das rundet jeder Browser auf null, sie bekommt also kein Auslassungszeichen,
   solange der Titel noch weichen kann. Erst wenn der Titel bei null steht, traegt sie den
   Rest. */
.katalogliste .werk { display: flex; align-items: baseline; gap: 0 .3rem; min-width: 0;
  overflow: visible; }
.katalogliste .werk .kuenstler { flex: 0 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; }
.katalogliste .werk .titel { flex: 0 1000000 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; }
.katalogliste .werk .art { flex: 0 0 auto; }
.katalogliste .kuenstler::after { content: ", "; }
.katalogliste .verweise { white-space: nowrap; }
/* Alben klappen auf, seit 20.09.2026. Die Songs eines Albums stehen als Geschwister hinter
   ihrem Kopf und sind versteckt, solange die Gruppe zu ist. Das braucht eine eigene Regel:
   "display: grid" an der Zeile hebt sonst das hidden-Attribut auf.
   Am Kopf ist der Werk-Block ein Knopf. Er verliert hier alles, was ein Knopf vom Browser
   mitbringt, und steht da wie der Werk-Block jeder anderen Zeile. Er ist so breit wie sein
   Text, nicht wie die Spalte, damit der Fokusring am Text sitzt und nicht an einer leeren
   Flaeche; max-width haelt ihn in der Spalte, damit der Titel weiter beschnitten wird. */
.katalogliste > li[hidden] { display: none; }
.katalogliste button.werk { font: inherit; color: inherit; background: none; border: 0;
  border-radius: 0; padding: 0; margin: 0; text-align: left; cursor: pointer;
  justify-self: start; max-width: 100%; }
.katalogliste .verweise a { text-decoration: none; }
/* Zwischenform von 46 bis 64rem, seit 20.09.2026. Die Rollen- und die Verweisspalte sind
   fest breit, fuer das Werk blieben in diesem Bereich deshalb nur 100 bis 340px, bei 820px
   etwa 156px, und Kuenstler:in und Marke ragten in die Rollen. Hier stehen Jahr, Werk und
   Verweise in der ersten Zeile und die Rollen darunter unter dem Werk. Die Verweise
   behalten ihre feste Spalte rechts und stehen weiter untereinander. Das Werk bekommt
   damit bei 820px rund 444px und an der unteren Grenze rund 360px; der breiteste feste
   Teil einer Zeile, Kuenstler:in plus Marke, mass am 20.09.2026 im ganzen Bestand 324px.
   Die obere Grenze ist dieselbe, ab der die Coverreihen dreispaltig stehen. */
@media (max-width: 64rem) {
  .katalogliste > li { grid-template-columns: 3.5rem minmax(0, 1fr) 15.5rem; }
  .katalogliste .rollen { grid-column: 2; grid-row: 2; }
  .katalogliste .verweise { grid-column: 3; grid-row: 1; }
}
/* Auf dem Telefon passt auch das nicht: dort Jahr und Werk oben, Rollen und Verweise
   darunter. Die Zeilenangaben der Zwischenform werden dafuer zurueckgenommen. */
@media (max-width: 46rem) {
  .katalogliste > li { grid-template-columns: 3rem minmax(0, 1fr); }
  .katalogliste .rollen, .katalogliste .verweise { grid-column: 2 / -1; grid-row: auto; }
}
/* Am Telefon steht im Block am Gruppenkopf nur die Zahl der Songs, ohne "ALBUM ·" davor,
   entschieden am 20.09.2026. Bei langen Kuenstlernamen blieb sonst vom Titel nichts, und
   ein Block ragte ueber den Listenrand. Dass die Zeile aufklappt, sagt der Block selbst.
   Die Grenze ist dieselbe, ab der die Coverreihen zweispaltig stehen. Vorgelesen wird
   weiter der volle Wortlaut, er steht im aria-label des Knopfes. */
@media (max-width: 34rem) {
  .katalogliste > li.gruppenkopf .art .wort { display: none; }
}
/* Nachladeknopf unter der Liste. Die Liste kommt portionsweise, siehe seite.js: beim
   Scrollen laedt die naechste Portion von selbst nach, sobald dieser Knopf ins Bild
   kommt. Er bleibt trotzdem sichtbar und anklickbar, weil er der Weg fuer die Tastatur
   und fuer Browser ohne IntersectionObserver ist. Links ausgerichtet wie die Liste
   darueber, nicht mittig: eine zentrierte Schaltflaeche wuerde die linke Kante der
   Seite brechen, an der sonst alles haengt. */
.nachladen { margin-top: 1.4rem; }
.nachladen button { font: inherit; cursor: pointer; }

/* ---------- Tools ----------
   Seite „Tools“ seit 28.09.2026, Kachel nach Runde 11, siehe
   Webseite-Designgrundlagen-Material-und-Kriterien.md, Abschnitt 9. Vorlage ist
   Webseite-HTML/Prototyp-Tools-Kachel-A-B-C-Compare-Runde-11.html.
   Die Kachel ist eine Karte wie die Coverkarten und dreht sich mit deren Regeln oben. Sie
   ist als Ganzes ein Verweis, weil es nur ein Ziel gibt. Vorder- und Rueckseite sind feste
   SVG in der Seite, gezeichnet von Arbeitsdateien/Skripte/tools_kachel_a_b_c_compare_zeichnen.py,
   damit die Kachel auch ohne JavaScript steht.
   Je Tool eine Zeile: Kachel auf Platz 1 der Kartenreihe, Name, Zusatz, Beschreibung und
   Verweis auf den Plaetzen 2 bis 5. Dieselben Spalten und Grenzen wie .kartenreihe, damit die
   Kachel so gross ist wie eine Karte. Ab sechs Tools wird daraus eine normale Kartenreihe. */
.kachel a.ganz { display: block; text-decoration: none; }
.kachel .vorn { overflow: hidden; }
.kachel .vorn svg, .kachel .hinten svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.kachel .hinten .oeffnen { display: block; text-align: center; min-width: 6.5rem; padding: .3em .6em; }
/* Die Kachel hat eine feste Groesse von 11,25rem (180px), so gross wie eine Karte der
   Kartenreihe bei voller Bahnbreite (179px). Seit 28.09.2026 fest statt als Platz 1 von sechs
   Spalten: mit den Spalten der Kartenreihe wuchs sie beim Schmalerwerden, bei 1024px auf
   317px und unter 34rem auf 248px, und stand schwer neben dem Text. */
.toolzeile { display: grid; grid-template-columns: 11.25rem minmax(0, 1fr); gap: 1rem;
  margin-top: 1.5rem; align-items: start; }
.toolzeile + .toolzeile { margin-top: 2.2rem; }
.toolzeile ul { display: contents; list-style: none; }
.toolzeile .karte { grid-column: 1; }
.toolzeile .text { grid-column: 2; }
.toolzeile .text h2 { margin: 0 0 .15rem; padding-top: 0; border-top: 0; }
.toolzeile .text h2::before { content: none; }
.toolzeile .text .zusatz { margin: 0 0 .6rem; }
.toolzeile .text p { margin: 0 0 .7rem; max-width: 36em; }
/* Unter 34rem steht der Text unter der Kachel, die Kachel behaelt ihre Groesse. */
@media (max-width: 34rem) {
  .toolzeile { grid-template-columns: minmax(0, 1fr); }
  .toolzeile .karte { width: 11.25rem; }
  .toolzeile .text { grid-column: 1; }
}

/* ---------- Fuss ----------
   Die Linie ueber dem Fuss endet seit 14.09.2026 an der Bahn, wie die unter dem Kopf und
   wie jede andere schwere Linie der Seite. Der Fuss war die letzte Ausnahme. Sie ist
   deshalb keine border-top mehr, sondern eine Flaeche an der Oberkante mit derselben
   Breitenformel wie .bahn. Wer die Bahn aendert, aendert sie hier mit. Die Farbe steht in
   der Richtung, nicht hier. */
.fuss { position: relative; margin-top: clamp(4rem, 9vw, 8rem); padding-block: 2.5rem 3.5rem; }
.fuss::before { content: ""; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%); width: min(100% - 2.5rem, 72rem); height: 2px; }
@media (max-width: 40rem) { .fuss::before { width: calc(100% - 2rem); } }
.fuss .bahn { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; }
.fuss p { margin: 0; max-width: none; }
/* Die Verweise im Fuss tragen seit 14.09.2026 dieselbe Form wie die Menuepunkte: ein
   Block, der sich beim Ueberfahren von links fuellt. Polster und Ausrichtung sind
   deshalb dieselben wie bei .menue a. Der Ausgleich beim Abstand, den der Kopf braucht,
   entfaellt hier: der Fuss hat keine Breite zu halten. */
.fuss a { text-decoration: none; padding-block: .3rem; padding-inline: .42em;
  display: inline-block; margin-inline: -.42em; }
/* Die Anschrift ist der einzige Eintrag im Fuss, der kein Verweis ist, und hatte deshalb
   das Polster der Verweise nicht: ihr Text sass hoeher als deren Text. Am 14.09.2026
   angeglichen, damit alle vier Eintraege auf einer Grundlinie sitzen. Gekuerzt ist sie im
   selben Zug: den Namen traegt die Wortmarke im Kopf ohnehin auf jeder Seite, und die
   lange Fassung war der Eintrag, der den Fuss schon ab 1024px in zwei Zeilen brach. */
.fuss .anschrift { padding-block: .3rem; }

/* ---------- Bewegung nur, wenn sie gewuenscht ist ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .karte .seiten { transition: none; }
  main p a, main .liste a, .menue a, .fuss a, .kachel .hinten .oeffnen { transition: none; }
  .verzahnt img { transform: none !important; }
}

/* Auf den schmalsten Telefonen (unter 384px) wird die Marke etwas kleiner, damit Marke,
   Sprachschalter und Menueknopf in einer Zeile bleiben. Seit 29.09.2026. */
@media (max-width: 24rem) { :root { --markenhoehe: 2.35rem; } }