/* urban-listening.com
   Dunkel und einfarbig, mit Absicht: ein Archiv, kein Schaufenster.
   Archivo breit fuer Ueberschriften, IBM Plex Mono fuer alles Nachpruefbare. */

:root{
  --grund:#0A0C11; --panel:#12151C; --panel2:#171B24; --linie:#333C4E;
  /* Die Grautoene sind am 10.09.2026 angehoben worden. Vorher waren sie am
     Mindestwert der Stufe AA gemessen, und zwar gegen den dunkelsten Grund.
     Die kleine Schrift steht aber meistens auf den helleren Flaechen --panel
     und --panel2, und dort fiel dasselbe Grau auf 4.22:1 und damit unter die
     Grenze. Kleine Schrift in IBM Plex Mono ist zudem duenn. Gemessen wird
     jetzt gegen --panel2, die hellste Flaeche: --leiser 6.0:1 dort und
     6.8:1 auf dem Grund, --leise 8.1:1 und 9.2:1. */
  --text:#EDEAE3; --leise:#A8B2C5; --leiser:#8F99AC;
  /* --mir ist die Herkunftsfarbe und bleibt, wie sie ist. Fuer Schrift gibt
     es --mir-text, jetzt mit 4.83:1 auch auf --panel2. Flaechen, Linien und
     Rahmen behalten die Markenfarbe, dort gilt die Grenze 3:1. */
  --mir:#D8382C; --mir-text:#F24C40; --eigen:#46A79A; --archiv:#C9A227;
  /* Weisse Schrift auf der Markenfarbe erreicht 4.64:1. Fuer gefuellte
     Knoepfe und den Sprungverweis ist der Grund deshalb eine Spur dunkler,
     damit die Schrift darauf 5.66:1 hat. Beim Ueberfahren wird daraus die
     volle Markenfarbe. */
  --knopf:#C22E23;
  --schrift:"Archivo","Helvetica Neue",Arial,sans-serif;
  --daten:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Fuenf Schriftstufen im Verhaeltnis 1 zu 1,15. Vorher standen im
     Stylesheet 23 einzeln gewaehlte Groessen zwischen 0,64 und 1,04 rem,
     teils 0,16 Pixel auseinander. Das sieht niemand, es macht die Seite
     nur unruhig. Jede alte Angabe liegt jetzt auf der naechsten Stufe. */
  /* Die zwei kleinsten Stufen sind am 10.09.2026 angehoben worden. Ein
     Drittel des Textes stand bei 10,9 und 12,5 Pixeln, in IBM Plex Mono und
     in Grau. Das ist zu klein, um es bequem zu lesen, auch wenn der Kontrast
     stimmt. Jetzt sind es 12,0 und 13,1 Pixel. */
  --t1:.75rem; --t2:.82rem; --t3:.9rem; --t4:1rem; --t5:1.12rem;
  /* Zwei fliessende Stufen darueber. Vorher standen hier vier Werte,
     die sich paarweise um gut einen Pixel unterschieden. */
  --titel:clamp(1.8rem,4.4vw,3.1rem);
  --lead:clamp(1rem,1.5vw,1.16rem);
  /* Drei Laufweiten statt zehn. Sie unterschieden sich teils um
     0,02em, das sind bei 11 Pixeln zwei Hundertstel Pixel je Zeichen. */
  --sp1:.04em; --sp2:.1em; --sp3:.16em;
  /* Zwischenstufe fuer h2. Bis zum 10.09.2026 war h2 genauso gross wie h1,
     damit sah auf jeder Sammlungsseite die Trackliste so wichtig aus wie der
     Name der Platte. */
  --zwischen:clamp(1.5rem,3vw,2.15rem);
  /* h3 hat eine eigene Stufe, damit sie auf dem Telefon nicht mit h2
     zusammenfaellt. Mit --gross standen dort 22 und 19 Pixel nebeneinander,
     das war kein sichtbarer Unterschied mehr. --gross bleibt, wo es sonst
     gebraucht wird. */
  --unter:clamp(1.12rem,2.35vw,1.65rem);
  --gross:clamp(1.2rem,2.35vw,1.65rem);
  --sp:clamp(1rem,3vw,2rem);
  --breit:1180px;
}
/* Wer im Betriebssystem mehr Kontrast eingestellt hat, bekommt ihn auch.
   Die Grautoene gehen dann auf die Textfarbe zu, die Linien werden sichtbar. */
@media (prefers-contrast:more){
  :root{--leise:#C8CFDC; --leiser:#B4BCCB; --linie:#4A566C; --mir-text:#FF6155}
}
*{box-sizing:border-box}
/* Die Seite ist dunkel, und der Browser soll das wissen. Ohne diese Angabe
   zeichnet er alles, was er selbst rendert, im Hellschema: die Abspieler
   standen weiss in den dunklen Zeilen, dazu helle Rollbalken und Felder.
   Ein Hellmodus der ganzen Seite ist bewusst nicht vorgesehen, die Cover und
   zwoelf der siebzehn Projektlogos sind fuer den dunklen Grund gezeichnet. */
html{color-scheme:dark}
html{scroll-behavior:smooth}
body{margin:0;background:var(--grund);color:var(--text);font-family:var(--schrift);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--mir)}
a:hover{color:#fff;background:rgba(216,56,44,.14)}
a:focus-visible,input:focus-visible,audio:focus-visible,button:focus-visible,
video:focus-visible,summary:focus-visible{outline:2px solid var(--mir);
  outline-offset:3px}
h1,h2,h3,h4{font-family:var(--schrift);font-weight:600;font-stretch:112%;
  letter-spacing:-.01em;text-wrap:balance;margin:0;
  /* Keine automatische Trennung in Ueberschriften. Zusammen mit
     text-wrap:balance trennte der Browser sonst auch Woerter, die auf eine
     eigene Zeile gepasst haetten: aus "23 Veroeffentlichungen, 1997 bis 2007"
     wurde "Veroeffent-lichungen". Bleibt ein Wort wirklich breiter als die
     Spalte, bricht overflow-wrap es weiter um, damit nichts hinausragt. */
  hyphens:manual;overflow-wrap:break-word}
/* Das h1 ausserhalb des Aufmachers hatte keine Groessenangabe und fiel auf
   die Browservorgabe von 2em zurueck: 32 Pixel bei jeder Bildschirmbreite,
   mit der Zeilenhoehe des Textes. Auf 268 Seiten war die Hauptueberschrift
   damit am Schirm zu klein und zu locker gesetzt. Sie folgt jetzt derselben
   Skala wie h2, nur mit einem kleineren Anfangswert: bei 390 Pixeln passt
   damit "Veroeffentlichungen," in eine Zeile und muss nicht getrennt
   werden. */
h1{font-size:var(--titel);line-height:1.06}
h2{font-size:var(--zwischen);line-height:1.1}
h3{font-size:var(--unter);line-height:1.2}
h4{font-size:var(--t4);font-stretch:100%;letter-spacing:var(--sp1)}
p{margin:0}
b,strong{font-weight:600}

/* Balken */
.balken{position:sticky;top:0;z-index:20;background:rgba(10,12,17,.93);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linie)}
/* Der Name der Seite stand 12 Pixel neben dem ersten Menuepunkt, in
   derselben Groesse und derselben Schrift. Damit sah er aus wie ein neunter
   Punkt. Jetzt hat er Luft, einen Strich als Grenze und mehr Gewicht, und
   die Punkte stehen weiter auseinander. */
.balken__in{max-width:var(--breit);margin:0 auto;padding:.6rem var(--sp);
  display:flex;gap:2.2rem;align-items:baseline;flex-wrap:wrap}
.marke{font-family:var(--daten);font-size:var(--t3);font-weight:500;
  letter-spacing:var(--sp3);text-transform:uppercase;color:var(--text);border:0;
  padding-right:2.2rem;border-right:1px solid var(--linie)}
.marke:hover{background:none;color:#fff}
.balken nav{display:flex;gap:1.5rem;flex-wrap:wrap;font-family:var(--daten);font-size:var(--t2);
  letter-spacing:var(--sp2);text-transform:uppercase}
.balken nav a{color:var(--leise);border:0}
.balken nav a:hover{color:var(--text);background:none}
.balken nav a[aria-current]{color:var(--mir-text)}

/* Kompakte Navigation auf schmalen Schirmen. Geschlossen belegt der Balken
   eine Zeile: Marke links, Knopf rechts. Im Knopf steht der Bereich, in dem
   man gerade ist. Das Klappen haengt an data-klapp, das erst das Skript
   setzt. Ohne JavaScript greift keine dieser Regeln und die Navigation steht
   vollstaendig da, so wie vorher. */
/* Der Menueknopf war 27 Pixel hoch. Auf dem Telefon ist er das erste, was
   jeder trifft, und mit einem Daumen trifft man 27 Pixel schlecht. 44 ist
   das gaengige Mindestmass fuer Bedienflaechen. */
.menue__knopf{background:none;border:0;cursor:pointer;padding:.3rem 0;
  min-height:44px;
  display:flex;gap:.45rem;align-items:center;font-family:var(--daten);
  font-size:var(--t2);letter-spacing:var(--sp2);text-transform:uppercase;
  color:var(--leise)}
.menue__knopf::after{content:"";width:.42rem;height:.42rem;flex:0 0 auto;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg);margin-bottom:.18rem}
.menue__knopf:hover{color:var(--text)}
/* Lange Bereichsnamen wie "Christian Steiger" sprengten den Balken bei
   320 Pixeln auf zwei Zeilen. Die Beschriftung wird gekuerzt, der Pfeil
   bleibt stehen. */
.menue__wort{min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
/* Ein Flex-Element schrumpft ohne min-width:0 nicht unter seinen Inhalt.
   Genau daran brach der Balken bei 320 Pixeln auf zwei Zeilen um. */
.balken[data-klapp] .menue__knopf{min-width:0}
.balken[data-klapp] .marke{min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.balken[data-klapp] .balken__in{gap:.8rem;flex-wrap:nowrap}
.balken[data-klapp] .marke{border-right:0;padding-right:0}
.balken[data-klapp]{position:relative}
.balken[data-klapp] .balken__in{justify-content:space-between;align-items:center}
.balken[data-klapp="zu"] #hauptnav{display:none}
.balken[data-klapp="auf"] .menue__knopf{color:var(--text)}
.balken[data-klapp="auf"] .menue__knopf::after{transform:rotate(-135deg);
  margin-bottom:0}
/* Die Klappe haengt unter dem Balken und nimmt die ganze Breite, damit die
   Ziele gross genug zum Antippen sind. */
.balken[data-klapp="auf"] #hauptnav{position:absolute;top:100%;left:0;right:0;
  flex-direction:column;gap:0;background:var(--grund);
  border-bottom:1px solid var(--linie);padding:.4rem var(--sp) .8rem}
.balken[data-klapp="auf"] #hauptnav a{padding:.7rem 0;
  border-bottom:1px solid var(--linie)}
.balken[data-klapp="auf"] #hauptnav a:last-child{border-bottom:0}

/* Ab dieser Breite ist Platz fuer die Reihe. Der Knopf verschwindet und die
   Navigation steht immer, unabhaengig vom Klappzustand. Die Grenze lag bei
   900 Pixeln, seit der Name der Seite Luft hat und die Punkte weiter
   auseinander stehen, braucht die Reihe 1082 Pixel. Dazwischen brach sie auf
   zwei Zeilen um, der Balken wurde 88 Pixel hoch. */
@media(min-width:1100px){
  .menue__knopf{display:none}
  /* Ab hier steht die Reihe. Die Werte muessen dieselbe Genauigkeit haben
     wie die Klappregeln oben, sonst gewinnen die: der Name der Seite braucht
     Luft und einen Strich, die Punkte brauchen Abstand. */
  .balken[data-klapp] .balken__in{justify-content:flex-start;align-items:baseline;
    gap:2.2rem}
  .balken[data-klapp] .marke{padding-right:2.2rem;
    border-right:1px solid var(--linie)}
  .balken[data-klapp="zu"] #hauptnav,.balken[data-klapp="auf"] #hauptnav{
    display:flex;position:static;flex-direction:row;flex-wrap:wrap;gap:1.5rem;
    background:none;border-bottom:0;padding:0}
  .balken[data-klapp="auf"] #hauptnav a{padding:0;border-bottom:0}
}

/* Brotkrumen */
.brot{max-width:var(--breit);margin:0 auto;padding:1.1rem var(--sp) 0;
  font-family:var(--daten);font-size:var(--t2);letter-spacing:var(--sp1);
  color:var(--leiser);display:flex;gap:.5rem;flex-wrap:wrap}
.brot a{color:var(--leise);border:0}
.brot a:hover{color:var(--text);background:none}
.brot a::after{content:" /";color:var(--leiser)}

/* Das Regal: Coverband unter dem Balken, sie trägt den Seitenkopf */
.regal{display:grid;grid-auto-flow:column;grid-auto-columns:96px;grid-template-rows:96px 96px;
  overflow:hidden;height:192px;border-bottom:1px solid var(--linie);background:var(--panel2);
  position:relative;-webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent);
  mask-image:linear-gradient(to bottom,#000 40%,transparent)}
.regal img{width:96px;height:96px;object-fit:cover;opacity:.55;filter:saturate(.85)}
@media(min-width:900px){
  .regal{grid-auto-columns:120px;grid-template-rows:120px 120px;height:240px}
  .regal img{width:120px;height:120px}
}
/* Auf den schmalsten Telefonen eine Reihe statt zwei. Sonst schiebt das
   Regal die Einstiegsknoepfe unter den ersten Bildschirm, und der wichtigste
   Weg in die Seite waere der, den man nicht sieht. */
@media(max-width:360px){
  .regal{grid-template-rows:96px;height:96px;
    -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);
    mask-image:linear-gradient(to bottom,#000 55%,transparent)}
}
.hero--regal{padding-top:clamp(1.6rem,4vw,2.6rem)}

/* Kopf der Startseite */
.hero{max-width:var(--breit);margin:0 auto;padding:clamp(2.6rem,8vw,5.4rem) var(--sp) 2.4rem}
.hero h1{font-size:clamp(2.3rem,7vw,5.2rem);line-height:.98;font-stretch:112%}
.hero .unter{margin-top:1.4rem;font-size:var(--lead);
  color:var(--leise)}
.hero .unter b{color:var(--text);font-weight:500}
/* Die zwei Einstiege im Aufmacher stehen etwas freier als die Knopfzeilen
   in den Kapiteln, damit sie als Anfang lesbar sind. */
.knoepfe--start{margin-top:clamp(1.4rem,3vw,2rem)}
.zahlen{margin-top:clamp(2rem,5vw,3.4rem);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  border-top:1px solid var(--linie);border-left:1px solid var(--linie)}
.zahl{border-right:1px solid var(--linie);border-bottom:1px solid var(--linie);padding:1rem 1.1rem}
/* Die Kacheln sind Verweise. Sie sollen wie eine Tafel aussehen und nicht wie
   sieben unterstrichene Woerter, deshalb keine Linie unter dem Text, sondern
   die ganze Kachel als Flaeche. */
a.zahl{display:block;color:inherit;text-decoration:none}
a.zahl:hover,a.zahl:focus-visible{background:rgba(216,56,44,.12)}
a.zahl:hover b{color:#fff}
.zahl b{display:block;font-family:var(--daten);font-size:clamp(1.5rem,3vw,2.1rem);
  font-weight:500;font-variant-numeric:tabular-nums;line-height:1}
.zahl span{display:block;margin-top:.45rem;font-size:var(--t2);color:var(--leise);line-height:1.35}

/* Kapitel */
.kap{max-width:var(--breit);margin:0 auto;padding:clamp(2.4rem,7vw,5rem) var(--sp) 0}
/* Der Kopf eines Kapitels war auf 68 Zeichen begrenzt. Das ist ein gutes Mass
   fuer Fliesstext, aber die Ueberschrift stand dadurch in derselben schmalen
   Spalte und brach in zwei Zeilen, obwohl daneben die halbe Seite frei war.
   Jetzt laeuft die Ueberschrift ueber die volle Breite, und nur der Absatz
   behaelt sein Mass. */
.kap__kopf{display:flex;flex-direction:column;gap:.9rem}
.augen{font-family:var(--daten);font-size:var(--t1);letter-spacing:var(--sp3);text-transform:uppercase;
  color:var(--mir-text)}
/* Fliesstext laeuft ueber die Breite der Seite. Bis zum 10.09.2026 stand
   hier ein Mass in Zeichen, damit die Zeilen kuerzer bleiben. Das ist
   klassische Typografie, hier aber nicht gewollt: umbrochen wird, wo das
   Fenster endet, und sonst nirgends. */
.lead{font-size:var(--lead);color:var(--leise);overflow-wrap:break-word}
.lead b{color:var(--text)}
/* In den Anmerkungen aus Discogs stehen manchmal ganze Adressen als ein Wort.
   Ohne Umbruch im Wort schiebt eine davon die ganze Seite zur Seite. */
.klein{font-size:var(--t3);color:var(--leiser);overflow-wrap:break-word}
.dim{color:var(--leiser)}
/* Beweislage einer Zahl, als kleine Marke ueber dem Abschnitt. Belegt, aus
   Belegtem abgeleitet und geschaetzt sind drei verschiedene Dinge, und auf
   dieser Seite muss man sie auf den ersten Blick auseinanderhalten koennen. */
.beleg{font-family:var(--daten);font-size:var(--t1);letter-spacing:var(--sp2);
  text-transform:uppercase;display:flex;align-items:center;gap:.45rem}
.beleg::before{content:"";width:.5rem;height:.5rem;flex:0 0 auto;
  border-radius:50%;background:currentColor}
.beleg--fest{color:var(--eigen)}
.beleg--abgeleitet{color:var(--archiv)}
.beleg--schaetzung{color:var(--leiser)}
.beleg--schaetzung::before{background:none;border:1px solid currentColor}
.unterkap{margin-top:clamp(2.2rem,5vw,3.8rem);display:flex;flex-direction:column;gap:.9rem}
.unterkap--eng{margin-top:clamp(1.4rem,3vw,2.2rem);gap:.6rem}
.kap--mir{position:relative}
.kap--mir::before{content:"";position:absolute;top:0;left:var(--sp);right:var(--sp);height:1px;
  background:var(--mir);opacity:.5}

/* Aufmacher der Euro-Mir-Seite */
.mirkopf{margin-top:clamp(1.6rem,4vw,2.6rem);display:grid;gap:clamp(1.2rem,3vw,2.4rem);
  grid-template-columns:minmax(0,1fr);align-items:center}
@media(min-width:820px){.mirkopf{grid-template-columns:minmax(0,42%) minmax(0,1fr)}}
.mirkopf__cover{width:100%;height:auto;border:1px solid var(--linie)}
.mirkopf__text{display:flex;flex-direction:column;gap:1rem;min-width:0}
.mirkopf__gross{font-family:var(--schrift);font-weight:600;font-stretch:112%;
  font-size:var(--gross);line-height:1.25;text-wrap:balance}

.zweispalt{margin-top:clamp(1.6rem,4vw,2.8rem);display:grid;gap:clamp(1.4rem,3vw,2.6rem);
  grid-template-columns:minmax(0,1fr)}
@media(min-width:880px){.zweispalt{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
@media(min-width:880px){.zweispalt--eng{grid-template-columns:1fr 1fr}}
.zweispalt>div{display:flex;flex-direction:column;gap:1rem;min-width:0}

/* Knoepfe */
.knoepfe{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.4rem}
.knopf{font-family:var(--daten);font-size:var(--t2);text-transform:uppercase;letter-spacing:var(--sp2);
  padding:.6rem .95rem;background:var(--knopf);color:#fff;border:1px solid var(--knopf);
  display:inline-block}
.knopf:hover{background:var(--mir);color:#fff}
.knopf--leer{background:none;color:var(--leise);border-color:var(--linie)}
.knopf--leer:hover{background:none;color:var(--text);border-color:var(--leise)}

/* Listenzeilen, das Grundelement der Seite */
.liste{border-top:1px solid var(--linie)}
.zeile{display:grid;grid-template-columns:5.4rem 46px minmax(7rem,1fr) minmax(0,auto);gap:1rem;
  align-items:center;padding:.8rem .2rem;border-bottom:1px solid var(--linie);border-left:0;
  border-right:0;border-top:0}
a.zeile:hover{background:var(--panel);color:var(--text)}
.zeile--titel{grid-template-columns:3rem 46px minmax(7rem,1fr) minmax(0,auto)}
.zeile--stumm{cursor:default}
.zeile__jahr{font-family:var(--daten);font-size:var(--t2);color:var(--leise);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.zeile__cover{width:46px;height:46px;object-fit:contain;background:var(--panel2)}
.zeile__cover--leer{width:46px;height:46px;background:var(--panel2);display:block}
.zeile__text{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.zeile__ober{font-size:var(--t2);letter-spacing:var(--sp2);text-transform:uppercase;color:var(--leise)}
.zeile__titel{font-weight:600;font-size:var(--t5);font-stretch:112%}
.zeile__meta{font-size:var(--t2);color:var(--leiser)}
.zeile__kat{font-family:var(--daten);font-size:var(--t1);text-transform:uppercase;
  letter-spacing:var(--sp2);color:var(--leise);border:1px solid var(--linie);padding:.14rem .45rem;
  white-space:nowrap}
.zeile--handel .zeile__kat{color:var(--text)}
.zeile--eigen .zeile__kat{color:var(--eigen);border-color:rgba(70,167,154,.5)}
.zeile--archiv .zeile__kat{color:var(--archiv);border-color:rgba(201,162,39,.45)}
/* Jahr, Cover, Angaben, Herkunft. Auch wo kein Cover vorliegt, steht dort ein
   Platzhalter, damit die Titel untereinander beginnen. Ohne die vierte
   Spalte rutschte die Herkunft in eine zweite Zeile. */
.zeile--remix{grid-template-columns:5.4rem 46px minmax(7rem,1fr) minmax(0,auto)}
.zeile--geraet{grid-template-columns:9rem minmax(0,1fr);padding:.5rem .2rem}
.zeile--werk{grid-template-columns:9rem 46px minmax(7rem,1fr) minmax(0,auto)}
.zeile--werk .zeile__jahr{font-size:var(--t2)}
.zeile--geraet .zeile__jahr{font-size:var(--t2);letter-spacing:var(--sp2);text-transform:uppercase}
.zeile--geraet .zeile__titel{font-size:var(--t4);font-weight:500}
.zeile--presse{grid-template-columns:6.5rem minmax(7rem,1fr) minmax(0,auto);align-items:start}
.zeile--probe{grid-template-columns:46px minmax(0,1fr) minmax(200px,300px);align-items:center}
.zeile--probe audio{width:100%;height:40px}
@media(max-width:620px){.zeile--probe{grid-template-columns:46px minmax(0,1fr)}
  .zeile--probe audio{grid-column:1/-1}}
.zeile--presse .zeile__meta{line-height:1.5;margin-top:.25rem}
.zeile--presse .zeile__kat{margin-top:.2rem}
.zeile--remix .zeile__kat{color:var(--leiser);border-color:var(--linie)}
.zeile--comp .zeile__kat,.zeile--titel .zeile__kat{border-color:transparent;color:var(--leiser);
  text-transform:none;letter-spacing:var(--sp1);font-size:var(--t1);
  /* Hier steht der volle Mixname. Ohne Umbruch kann die Spalte nicht
     schrumpfen, und die Titelspalte fiel auf 11 Pixel zusammen. */
  white-space:normal;overflow-wrap:anywhere}

.foto--zeitung .spalten{display:flex;gap:1rem;align-items:flex-start}
.foto--zeitung .spalten a{display:block;min-width:0}
.foto--zeitung img{display:block;width:100%;height:auto;background:#fff}

.nachbarn{display:flex;flex-wrap:wrap;gap:.45rem;align-items:baseline;
  margin:.55rem 0}
.nachbarn__kopf{font-family:var(--daten);font-size:var(--t1);text-transform:uppercase;
  letter-spacing:var(--sp2);color:var(--leiser);flex:0 0 8.5rem;padding-top:.2rem}
.nachbarn__x{display:inline-flex;align-items:baseline;gap:.4rem;font-size:var(--t3);
  border:1px solid var(--linie);padding:.22rem .55rem;color:var(--leise);
  text-decoration:none}
.nachbarn__x:hover{border-color:var(--leise);color:var(--text);background:var(--panel)}
.nachbarn__j{font-family:var(--daten);font-size:var(--t1);color:var(--leiser);
  font-variant-numeric:tabular-nums}
.nachbarn__x--mehr{border-style:dashed}
@media(max-width:620px){.nachbarn__kopf{flex:0 0 100%}}

/* Marken */
.marken{display:flex;gap:.7rem;align-items:baseline;flex-wrap:wrap;font-size:var(--t3)}
.marken span[class^="marke--"]{font-family:var(--daten);font-size:var(--t1);text-transform:uppercase;
  letter-spacing:var(--sp2);border:1px solid var(--linie);padding:.16rem .5rem}
.marke--handel{color:var(--text)}
.marke--eigen{color:var(--eigen);border-color:rgba(70,167,154,.5)!important}
.marke--archiv{color:var(--archiv);border-color:rgba(201,162,39,.45)!important}

/* Datenlisten */
/* Die Beschriftungsspalte darf mitwachsen, aber nicht bis zur eigenen
   Maximalbreite: "Veroeffentlichungen mit eigener Arbeit" nahm sich 288
   Pixel, und der Wert daneben behielt bei 375 Pixeln 55 Pixel, bei 320
   Pixeln null. fit-content deckelt sie bei 12 rem, der Rest umbricht. */
.dl{margin:0;display:grid;grid-template-columns:fit-content(12rem) minmax(0,1fr);
  font-family:var(--daten);font-size:var(--t2);border-top:1px solid var(--linie)}
.dl dt{color:var(--leiser);padding:.36rem .9rem .36rem 0;border-bottom:1px solid var(--linie);
  word-break:break-word;hyphens:auto}
.dl dd{margin:0;padding:.36rem 0;border-bottom:1px solid var(--linie);word-break:break-word}
/* Unter 480 Pixeln steht der Wert unter seiner Beschriftung. Nebeneinander
   bleiben fuer den Wert sonst nur wenige Zeichen je Zeile. */
@media(max-width:480px){
  .dl{grid-template-columns:minmax(0,1fr)}
  .dl dt{border-bottom:0;padding:.36rem 0 0}
  .dl dd{padding:.1rem 0 .36rem}
}

/* Tracklisten */
.tracks,.fremdliste,.prolog,.mirliste{list-style:none;margin:0;padding:0}
.tracks li,.fremdliste li{display:grid;grid-template-columns:2.2ch minmax(0,1fr) auto auto;
  gap:.7rem;padding:.42rem 0;border-bottom:1px solid var(--linie);align-items:baseline;
  font-family:var(--daten);font-size:var(--t2)}
/* Nummer, Titel, Interpret, Spieldauer. Fehlt eine Spalte, rutscht der letzte
   Eintrag in die naechste Zeile und die Zeile wird doppelt so hoch. Wo Dauer
   oder Interpret fehlen, bleibt die Spalte einfach leer. */
/* Die Nummernspalte ist so breit, wie die laengste Nummer dieser Liste sie
   braucht. Der Bau setzt --nr am ol, siehe seite.py. Ohne Angabe gilt das
   alte Mass fuer zweistellige Nummern. */
.fremdliste li{grid-template-columns:var(--nr,2.6ch) minmax(0,1fr) auto auto}
.tracks--jahr li{grid-template-columns:4.2ch minmax(0,1fr) auto}
.tracks--jahr .tr__nr{font-size:var(--t2)}
.tracks--jahr .tr__wer{font-size:var(--t2);color:var(--leise)}
.tr__nr{color:var(--leiser);font-variant-numeric:tabular-nums}
.tr__t{font-family:var(--schrift);font-size:var(--t4)}
.tr__wer{color:var(--leiser);font-size:var(--t1);text-align:right}
.tr__zeit{color:var(--leiser);font-variant-numeric:tabular-nums;text-align:right}
.tracks--mir li.eigen .tr__t,.fremdliste li.eigen .tr__t{color:#fff}
.fremdliste li.eigen{background:rgba(216,56,44,.1)}
.fremdliste li.eigen .tr__t::after{content:" — eigener Titel";font-family:var(--daten);
  font-size:var(--t1);letter-spacing:var(--sp2);text-transform:uppercase;color:var(--mir-text)}

/* Die Logos der Projektnamen. Sie stammen aus der Zeit, sind teils nur 151
   Pixel breit und werden nie vergroessert. Alle stehen auf demselben weissen
   Kasten, damit sie als eine Reihe zu lesen sind. Drei der Vorlagen bringen
   selbst einen dunklen Untergrund mit, das bleibt so, es gehoert zum Logo. */
.logo{width:fit-content;align-self:start;margin:0 0 .5rem;padding:1rem 1.2rem;
  background:#fff;border:1px solid var(--linie);line-height:0;max-width:100%;
  min-width:min(19rem,100%);min-height:5.6rem;display:flex;align-items:center;
  justify-content:center}
.logo img,.logo .logo__svg{width:auto;height:auto;max-width:100%;max-height:4rem;
  display:block}
/* Wo es kein Logo von damals gibt, steht der Name in der Schrift der Seite. */
.logo--satz span{font-family:var(--schrift);font-weight:600;font-stretch:112%;
  font-size:var(--gross);letter-spacing:.02em;color:#12151C;line-height:1.1}
.logo + .klein{margin-top:0;margin-bottom:1.1rem}

/* Prologue */
.prolog{margin-top:1.4rem}
.prolog li{display:grid;grid-template-columns:4.6rem 1fr;gap:1rem;padding:.62rem 0;
  border-top:1px solid var(--linie)}
/* Unter 900 Pixel steht das russische Original unter der deutschen Fassung,
   und zwar ueber die ganze Breite statt in der schmalen Zeitspalte. */
.prolog--zwei .pr{grid-column:1/-1;padding-top:.28rem}
@media(min-width:900px){.prolog--zwei li{grid-template-columns:4.6rem 1fr 1fr}
  .prolog--zwei .pr{grid-column:auto;padding-top:0}}
.pr{color:var(--leise);font-size:var(--t4)}
.prolog li:last-child{border-bottom:1px solid var(--linie)}
.prolog li:last-child .ps{font-family:var(--daten);letter-spacing:var(--sp2);color:var(--mir-text)}
.pz{font-family:var(--daten);font-size:var(--t2);color:var(--mir-text);font-variant-numeric:tabular-nums;
  padding-top:.18rem}
.ps{font-size:var(--t4)}
.offen{font-family:var(--daten);font-size:var(--t1);text-transform:uppercase;letter-spacing:var(--sp2);
  color:var(--archiv);border:1px solid var(--archiv);padding:.05rem .35rem;white-space:nowrap}

/* Stichlisten */
.stich{margin:0;padding-left:1.1rem;font-size:var(--t3);color:var(--leise);display:flex;
  flex-direction:column;gap:.5rem}
.stich b{color:var(--text)}

/* Karten, nur fuer die drei Euro-Mir-Titel */
.dreier{margin-top:clamp(1.6rem,4vw,2.6rem);display:grid;gap:1px;background:var(--linie);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.karte{background:var(--grund);padding:1rem;display:flex;flex-direction:column;gap:.6rem;
  border:0}
.karte:hover{background:var(--panel)}
.karte img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--panel2)}
.karte__t{font-weight:600;font-size:var(--t4);font-stretch:112%}
.karte__m{font-family:var(--daten);font-size:var(--t1);color:var(--leiser)}

/* Namen */
.namen{margin-top:clamp(1.6rem,4vw,2.6rem);display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  border-top:1px solid var(--linie);border-left:1px solid var(--linie)}
.name{border-right:1px solid var(--linie);border-bottom:1px solid var(--linie);
  padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.4rem;border-top:0;background:none}
.name:hover{background:var(--panel)}
/* Das Logo in der Namensuebersicht. Feste Hoehe, damit die Karten in einer
   Reihe bleiben, und nie groesser als das Original. */
.name__logo{display:flex;align-items:center;justify-content:center;
  height:56px;padding:.4rem .7rem;margin-bottom:.35rem;line-height:0;overflow:hidden;
  background:#fff}
.name__logo img,.name__logo .logo__svg{width:auto;height:auto;max-width:100%;
  max-height:100%;display:block}
.name__logo--satz span{font-family:var(--schrift);font-weight:600;font-stretch:112%;
  font-size:var(--t5);letter-spacing:.02em;color:#12151C;line-height:1.15}
.name__n{font-weight:600;font-size:var(--t4);font-stretch:112%}
.name__b{font-size:var(--t3);color:var(--leise);flex:1}
.name__id{font-family:var(--daten);font-size:var(--t1);color:var(--leiser)}

/* Suche */
.tabellenkopf{margin-top:clamp(1.6rem,4vw,2.6rem);display:flex;gap:1.4rem;align-items:flex-end;
  flex-wrap:wrap;justify-content:space-between}
.suche{display:flex;flex-direction:column;gap:.35rem;min-width:min(340px,100%)}
.suche span{font-family:var(--daten);font-size:var(--t1);letter-spacing:var(--sp3);text-transform:uppercase;
  color:var(--leise)}
.suche input{background:var(--panel);border:1px solid var(--linie);color:var(--text);
  font-family:var(--schrift);font-size:var(--t4);padding:.6rem .8rem;width:100%}
.zaehler{font-family:var(--daten);font-size:var(--t2);color:var(--leise);
  font-variant-numeric:tabular-nums}

/* Einzelfoto mit Bildunterschrift */
.foto{margin:0;display:flex;flex-direction:column;gap:.5rem;max-width:560px}
.foto > a{border:0;display:block;background:var(--panel2)}
.foto a:hover{background:var(--panel2)}
.foto img{width:100%;height:auto;image-rendering:auto}
.foto figcaption{font-size:var(--t3);color:var(--leiser)}
/* Fotos, die neben den Bildern der Geraetegruppen stehen, halten deren Mass.
   Die Zeitungsausschnitte im Euro-Mir-Kapitel nicht: die muss man lesen
   koennen. */
.foto--klein{max-width:26rem}

/* Die datierten Studioaufnahmen als Raster. Vorher stand jede einzeln und
   560 Pixel breit untereinander, das waren viele Bildschirmlaengen. Klein
   sieht man mehr auf einmal, und ein Klick oeffnet die volle Aufloesung. */
.fotoraster{display:grid;gap:1.4rem 1rem;margin-top:1.1rem;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.fotoraster .foto{max-width:none;gap:.42rem}
.fotoraster .foto > a{background:var(--panel2)}
.fotoraster .foto img{height:150px;object-fit:contain;background:var(--panel2)}
.fotoraster .foto figcaption{font-size:var(--t2);max-width:none}
@media (max-width:560px){
  .fotoraster{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem .8rem}
  .fotoraster .foto img{height:120px}
}

/* Galerie eigener Fotos */
.galerie{display:grid;gap:1px;background:var(--linie);
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
/* Nur die Kachel selbst, also der Link, der direkt in der Galerie steht und ein
   Bild umschliesst. Ohne das ">" traf die Regel auch einen Textlink in einer
   Bildunterschrift: der bekam aspect-ratio 1 und wurde zum leeren dunklen
   Quadrat in Spaltenbreite, das wie ein fehlendes Bild aussieht. */
.galerie > a{border:0;background:var(--panel2);display:block;aspect-ratio:1;overflow:hidden}
.galerie > a:hover{background:var(--panel2)}
.galerie > a img{width:100%;height:100%;object-fit:cover;transition:opacity .15s}
/* Ruecken und Beihefter sind lange schmale Streifen, etwa 600 mal 295. Als
   quadratische Kachel beschnitten waere davon nichts mehr zu erkennen. */
.galerie--ansichten > a img{object-fit:contain}
.galerie > a:hover img{opacity:.82}

/* Cover gross */
/* Das grosse Cover behaelt sein Seitenverhaeltnis. Viele Huellen sind nicht
   quadratisch, ein erzwungenes Quadrat wuerde sie beschneiden. */
.grosscover{width:100%;max-width:420px;height:auto;background:var(--panel2);
  border:1px solid var(--linie)}

/* Einbettung, YouTube erst auf Klick */
.einbett{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--linie)}
.einbett iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.einbett__start{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;
  background:#000;cursor:pointer;display:block;overflow:hidden;font:inherit;color:var(--text)}
.einbett__start img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.4;transition:opacity .2s}
.einbett__start:hover img{opacity:.6}
.einbett__text{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--daten);font-size:var(--t2);letter-spacing:var(--sp2);text-transform:uppercase;
  text-align:center;line-height:1.5;padding:.9rem 1.2rem;border:1px solid var(--text);
  background:rgba(10,12,17,.72)}
.einbett__text b{display:block;margin-top:.35rem;font-weight:400;letter-spacing:var(--sp1);
  text-transform:none;font-size:var(--t1);color:var(--leise)}
.einbett__start:hover .einbett__text{border-color:var(--mir);background:rgba(10,12,17,.85)}

/* Video */
.videokasten{width:100%;max-width:100%;border:1px solid var(--linie);background:#000}
video{display:block;width:100%;height:auto;max-width:100%;background:#000}

/* Hoerprobe */
.hoerprobe{border:1px solid var(--linie);padding:1rem;display:flex;flex-direction:column;
  gap:.6rem;background:var(--panel)}
.hoerprobe audio{width:100%}

/* Belege */
.belege{margin-top:clamp(1.6rem,4vw,2.6rem);display:grid;gap:1px;background:var(--linie);
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.beleg{background:var(--grund);padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.5rem}
.beleg p{font-size:var(--t3);color:var(--leise)}
.anschrift{font-family:var(--daten);font-size:var(--t3);line-height:1.8}
.anschrift a{border-bottom-color:var(--mir)}
.quellzeile{margin-top:2rem;font-family:var(--daten);font-size:var(--t1);color:var(--leiser)}
.platzhalter{margin-top:clamp(1.6rem,4vw,2.6rem);border:1px dashed var(--archiv);
  padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.5rem}
.platzhalter h3{color:var(--archiv)}
.platzhalter p{font-size:var(--t3);color:var(--leise)}
.mir__fuss{margin-top:2rem;font-size:var(--t3);color:var(--leiser)}

/* Fuss */
footer{max-width:var(--breit);margin:clamp(3rem,7vw,5.4rem) auto 0;
  padding:2rem var(--sp) 3.4rem;border-top:1px solid var(--linie);
  display:flex;flex-direction:column;gap:1rem}
/* Die Fusszeile fuehrt ihre Ueberschrift als h2, damit die Gliederung auf jeder
   Seite ohne Sprung bleibt. Aussehen soll sie wie vorher, klein und ruhig. */
footer h2{font-size:var(--gross);line-height:1.15;font-stretch:112%}
footer .heute{color:var(--leise);font-size:var(--t4)}
.fusslinks{display:flex;gap:1.2rem;flex-wrap:wrap;font-family:var(--daten);font-size:var(--t2);
  letter-spacing:var(--sp2);text-transform:uppercase}
.fusslinks a{border:0;color:var(--leise)}
.fusslinks a:hover{color:var(--text);background:none}
.recht{font-family:var(--daten);font-size:var(--t1);color:var(--leiser)}

/* Listen, in denen keine Zeile ein Cover hat. Ohne die Coverspalte, sonst
   landet der Titel im 46 Pixel breiten Bildstreifen und bricht nach jedem
   Wort um. Muss vor dem Medienblock stehen: die Mobilfassung dort hat
   dieselbe Spezifitaet und soll gewinnen. */
.liste--ohnecover .zeile{grid-template-columns:5.4rem minmax(7rem,1fr) minmax(0,auto)}
/* Ausgabenregister: Jahr, Angaben, Herkunft. Auch diese Zeilen haben kein
   Cover, deshalb drei Spalten statt vier. Steht ebenfalls vor dem Medienblock,
   sonst gilt sie auch auf dem Telefon weiter und presst drei Spalten in
   375 Pixel: die Angaben brauchten dann 142 Pixel und hatten 113. */
.liste--ausgaben .zeile{grid-template-columns:5.4rem minmax(7rem,1fr) minmax(0,auto)}

@media(max-width:620px){
  .zeile{grid-template-columns:40px minmax(0,1fr);gap:.8rem;row-gap:.15rem}
  .zeile__jahr{grid-column:2;order:-1;font-size:var(--t2)}
  .zeile__cover,.zeile__cover--leer{grid-row:span 2;width:40px;height:40px}
  .zeile__kat{display:none}
  /* Zeilen ohne Cover brauchen die 40 Pixel breite Coverspalte nicht. Sonst
     bleibt links eine leere Rinne stehen und der Text rueckt grundlos ein. */
  .zeile--werk,.zeile--geraet,.zeile--presse,.zeile--probe{
    grid-template-columns:minmax(0,1fr)}
  .zeile--werk .zeile__jahr,.zeile--geraet .zeile__jahr,
  .zeile--presse .zeile__jahr{grid-column:1}
  .zeile--probe .zeile__text,.zeile--probe audio{grid-column:1}
  .zeile--probe audio{width:100%;margin-top:.35rem}
  /* Listen ganz ohne Cover: eine Spalte, das Jahr darueber, wie bei den
     anderen Listen auf dem Telefon. */
  .liste--ohnecover .zeile{grid-template-columns:minmax(0,1fr)}
  .liste--ohnecover .zeile__jahr{grid-column:1}
  .liste--ausgaben .zeile{grid-template-columns:minmax(0,1fr)}
  .liste--ausgaben .zeile__jahr{grid-column:1}
  .prolog li{grid-template-columns:1fr;gap:.2rem}
  .tracks li{grid-template-columns:2.2ch minmax(0,1fr) auto}
  /* Auf den eigenen Platten ist der Interpret immer derselbe. Dort faellt die
     Spalte auf dem Telefon weg. In den Titelfolgen fremder Sammlungen traegt
     jede Zeile einen anderen Namen, der bleibt und rutscht unter den Titel. */
  .tracks .tr__wer{display:none}
  .fremdliste li{grid-template-columns:var(--nr,2.6ch) minmax(0,1fr) auto;row-gap:0}
  .fremdliste .tr__wer{grid-column:2;grid-row:2;text-align:left}
  .fremdliste .tr__zeit{grid-column:3;grid-row:1}
}
.probe__name{font-family:var(--daten);font-size:var(--t2);letter-spacing:var(--sp1);
  margin:.9rem 0 .3rem;color:var(--leise)}
.hoerprobe .probe__name:first-of-type{margin-top:.2rem}
.hoerprobe--start{margin-top:clamp(1.2rem,3vw,1.8rem);max-width:30rem}
.hoerprobe--start audio{width:100%;height:44px}
.hoerprobe--start .probe__name{margin:0 0 .4rem}

.knopf--hoer{background:transparent;color:var(--eigen);border-color:var(--eigen)}
.knopf--hoer:hover{background:var(--eigen);color:var(--grund);border-color:var(--eigen)}

/* Die Hoerproben auf einer Namensseite. Zwei Spalten, wo Platz ist, sonst
   eine. Die Abspieler laden erst auf Klick. */
.proben{display:grid;gap:1rem 1.6rem;margin-top:1rem;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.probe{display:flex;flex-direction:column;gap:.3rem}
.probe audio{width:100%}

/* Coverraster */
.galerie--alle{display:grid;gap:1.2rem;margin-top:clamp(1.4rem,4vw,2.4rem);
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.gal{display:flex;flex-direction:column;gap:.2rem;border:0;text-decoration:none}
.gal img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--panel2);
  border:1px solid var(--linie);
  background:var(--panel2)}
.gal:hover img{outline:1px solid var(--mir);outline-offset:-1px}
.gal__j{font-family:var(--daten);font-size:var(--t1);color:var(--leiser);margin-top:.35rem}
.gal__t{font-size:var(--t2);line-height:1.35}
.gal__w{font-size:var(--t2);color:var(--leiser)}

/* Filterknoepfe ueber der Compilation-Tabelle */
.filter{display:flex;flex-wrap:wrap;gap:.8rem 2rem;margin:.4rem 0 1rem}
.filter__g{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.filter__g b{font-family:var(--daten);font-size:var(--t1);letter-spacing:var(--sp3);
  text-transform:uppercase;color:var(--leiser);margin-right:.3rem}
.filter__k{font:inherit;font-size:var(--t2);color:var(--leise);background:transparent;
  border:1px solid var(--linie);padding:.24rem .6rem;cursor:pointer;border-radius:2px;
  min-height:40px}
.filter__k:hover{color:var(--text);border-color:var(--leiser)}
.filter__n{font-family:var(--daten);font-size:var(--t1);opacity:.6;margin-left:.15rem}
.filter__k.ist{color:var(--grund);background:var(--text);border-color:var(--text)}

/* Chronik */
.chronik{margin-top:clamp(1.6rem,4vw,2.6rem);display:flex;flex-direction:column;gap:1.6rem}
.jahr{border-top:1px solid var(--linie);padding-top:.9rem;
  display:flex;flex-direction:column;gap:.5rem}
.jahr__k{display:grid;grid-template-columns:5ch minmax(0,1fr) auto;gap:.9rem;
  align-items:center}
.jahr__z{font-family:var(--daten);font-size:var(--t4);color:var(--text)}
.jahr__b{height:6px;background:var(--mir);opacity:.75;min-width:2px;display:block}
.jahr__w{font-family:var(--daten);font-size:var(--t1);color:var(--leiser);
  white-space:nowrap}
.jahr__e{margin:0;font-size:var(--t3);color:var(--leise)}
.jahr__e b{color:var(--text);font-family:var(--daten);font-size:var(--t2);
  letter-spacing:var(--sp1);margin-right:.5rem}
@media(max-width:640px){
  .jahr__k{grid-template-columns:5ch minmax(0,1fr);gap:.6rem}
  .jahr__w{grid-column:2;white-space:normal}
}

/* Raster der nur digital erschienenen Sammlungen */
.digital{margin-top:clamp(1.6rem,4vw,2.6rem);display:grid;gap:1.4rem;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.dig{display:flex;flex-direction:column;gap:.25rem;border:0;text-decoration:none}
.dig img,.dig__leer{width:100%;aspect-ratio:1;object-fit:contain;
  border:1px solid var(--linie);background:var(--panel2)}
.dig:hover img{outline:1px solid var(--mir);outline-offset:-1px}
.dig__j{font-family:var(--daten);font-size:var(--t1);color:var(--leiser);margin-top:.4rem}
.dig__a{font-size:var(--t3);font-weight:600;line-height:1.35}
.dig__t{font-size:var(--t2);color:var(--leise)}
.dig__w{font-family:var(--daten);font-size:var(--t1);color:var(--leiser)}

/* Bereichsliste in der Fussleiste */
/* Vier benannte Spalten. Auf schmalen Schirmen werden daraus zwei und
   zuletzt eine, die Gruppen bleiben dabei beisammen. */
.fussnav{display:grid;gap:1.6rem 2rem;margin:1.6rem 0 1rem;font-size:var(--t3);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
.fussnav>div{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.fussnav b{font-family:var(--daten);font-size:var(--t1);letter-spacing:var(--sp3);
  text-transform:uppercase;color:var(--leiser);border:0;margin-bottom:.15rem}
.fussnav a{color:var(--leise);border-bottom:1px solid transparent;width:fit-content}
.fussnav a:hover{color:var(--text);border-bottom-color:var(--mir)}

/* Personenseite */
.mirkopf--person{align-items:start}
.portraet--klein{max-width:220px;margin-top:.6rem}
.galerie--zwei{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem;background:none}
.galerie--zwei figure{margin:0;display:flex;flex-direction:column;gap:.5rem}
.galerie--zwei img{width:100%;height:auto;border:1px solid var(--linie)}
.galerie--zwei figcaption{font-size:var(--t3);color:var(--leiser)}
.portraet{width:100%;max-width:420px;height:auto;aspect-ratio:656/820;object-fit:cover;border:1px solid var(--linie);filter:grayscale(1)}

/* Vor und zurueck durch die Sammlungen */
.blaettern{display:grid;grid-template-columns:1fr 1fr;gap:1rem;
  margin:clamp(1.4rem,4vw,2.4rem) 0 0;border-top:1px solid var(--linie);
  padding-top:1.2rem}
.blatt{display:flex;gap:.7rem;align-items:center;border:1px solid var(--linie);
  padding:.7rem .9rem;text-decoration:none;color:var(--leise);min-height:44px}
.blatt:hover{border-color:var(--leise);color:var(--text);background:var(--panel)}
.blatt--vor{grid-column:2;flex-direction:row-reverse;text-align:right}
.blatt__cover{width:40px;height:40px;object-fit:contain;background:var(--panel2);
  flex:0 0 auto}
.blatt__text{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.blatt__wohin{font-family:var(--daten);font-size:var(--t1);text-transform:uppercase;
  letter-spacing:var(--sp2);color:var(--leiser)}
.blatt__titel{font-size:var(--t3);overflow-wrap:anywhere}
@media(max-width:620px){.blaettern{grid-template-columns:1fr}
  .blatt--vor{grid-column:1}}

/* Leuchtkasten: Bilder auf der Seite ansehen und durchblaettern. Wird per
   JavaScript erzeugt, im HTML steht nichts davon. */
.leuchtkasten{position:fixed;inset:0;z-index:60;background:rgba(8,10,14,.94);
  display:flex;align-items:center;justify-content:center;gap:.6rem;padding:1rem}
.leuchtkasten[hidden]{display:none}
.lk__rahmen{margin:0;display:flex;flex-direction:column;gap:.6rem;align-items:center;
  max-width:94vw}
.lk__rahmen img{max-width:94vw;max-height:82vh;width:auto;height:auto;display:block;
  background:var(--panel2)}
.lk__zeile{display:flex;gap:1rem;align-items:baseline;justify-content:center;
  flex-wrap:wrap;color:var(--leise);font-size:var(--t3);max-width:70ch;text-align:center}
.lk__nr{font-family:var(--daten);font-size:var(--t1);letter-spacing:var(--sp2);
  color:var(--leiser);font-variant-numeric:tabular-nums;white-space:nowrap}
.lk__zu{position:absolute;top:.6rem;right:.8rem;min-width:44px;min-height:44px;
  background:none;border:1px solid var(--linie);color:var(--leise);font-size:1.5rem;
  line-height:1;cursor:pointer}
.lk__pfeil{min-width:52px;min-height:64px;background:none;border:1px solid var(--linie);
  color:var(--leise);font-size:2rem;line-height:1;cursor:pointer;flex:0 0 auto}
.lk__zu:hover,.lk__pfeil:hover{color:var(--text);border-color:var(--leise);
  background:var(--panel)}
.lk__zu:focus-visible,.lk__pfeil:focus-visible{outline:2px solid var(--mir);
  outline-offset:2px}
@media(max-width:620px){
  .lk__pfeil{position:absolute;bottom:1rem;min-height:52px}
  .lk__pfeil--vor{left:1rem}
  .lk__pfeil--zur{right:1rem}
  .lk__rahmen img{max-height:72vh}
}

/* Sprunglink, nur bei Tastaturfokus sichtbar */
.sprung{position:absolute;left:-999px;top:.5rem;z-index:99;background:var(--knopf);color:#fff;
  padding:.5rem .9rem;border:0;font-size:var(--t3)}
.sprung:focus{left:.5rem}

/* Geraetekarten mit grossem Foto */
.geraete{display:grid;gap:1.2rem;margin-top:1.2rem;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.geraet{margin:0;display:flex;flex-direction:column;gap:.5rem}
.geraet > a{border:0;display:block;background:var(--panel2)}
/* Kein Zuschnitt. Ein Gerät wird ganz gezeigt oder nicht: ein Rackstreifen im
   Format 3:2 zu beschneiden schneidet die Hälfte der Regler ab, und bei den
   freien Lizenzen ist ein Zuschnitt eine Bearbeitung des Fotos. Das
   Seitenverhältnis steht als width und height im Bild selbst. */
.geraet img{width:100%;height:auto;object-fit:contain;background:var(--panel2);
  border:1px solid var(--linie)}
/* Die eigenen Studioaufnahmen von 1998 bis 2002 sind klein, sie stammen aus
   der Zeit. Sie werden nie hochgerechnet. Die Grenze sitzt an der Figur, als
   max-width in echten Pixeln des Fotos, damit das Bild die Figur weiter voll
   ausfüllt und im Raster nichts überläuft. */
.geraet--eigen{min-width:0}

/* Sehr flache Aufnahmen, Rackgeräte und Keyboards, über die ganze Breite. */
.geraet--rack{grid-column:1 / -1}
.geraet figcaption{display:flex;flex-direction:column;gap:.15rem}
.geraet figcaption b{font-size:var(--t4)}
.geraet figcaption span{font-family:var(--daten);font-size:var(--t1);color:var(--leiser)}

.probe__voll{display:block;font-family:var(--daten);font-size:var(--t1);color:var(--leiser);margin-top:.15rem}
.probe__voll a{color:var(--leise);border-bottom-color:var(--linie)}
.probe__voll a:hover{color:var(--text);border-bottom-color:var(--mir)}

/* Zitat aus den eigenen Unterlagen von damals */
.damals{margin:0;padding:1.1rem 1.3rem;background:var(--panel);border-left:2px solid var(--mir);
  max-width:none}
.damals p{margin:0;font-family:var(--daten);font-size:var(--t3);line-height:1.75;color:var(--text)}

/* Erzaehlbogen: ein Zustand je Titel */
.bogen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem}
.bogen li{display:grid;grid-template-columns:2.4ch 12ch minmax(0,1fr);gap:.2rem 1rem;
  align-items:baseline;padding:.6rem 0;border-top:1px solid var(--linie)}
.bogen__nr{font-family:var(--daten);font-size:var(--t2);color:var(--leiser)}
.bogen__z{font-family:var(--daten);font-size:var(--t1);letter-spacing:var(--sp2);
  text-transform:uppercase;color:var(--mir-text)}
.bogen__t{font-weight:600}
.bogen__x{grid-column:3;font-size:var(--t3);color:var(--leise)}
@media(max-width:640px){
  .bogen li{grid-template-columns:2.4ch minmax(0,1fr)}
  .bogen__z{grid-column:2}
  .bogen__t{grid-column:2}
  .bogen__x{grid-column:2}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}}

.zeile--offen{opacity:.62}

/* Eigene Studiofotos. Die Bilder sind klein und werden nicht hochgerechnet. */
.eigenstudio{display:grid;gap:1.4rem;margin-top:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.eigenfoto{margin:0}
.eigenfoto img{width:100%;max-width:567px;height:auto;border:1px solid var(--linie)}
.eigenfoto figcaption{margin-top:.5rem;font-size:var(--t3);line-height:1.5}
.eigenfoto figcaption span{display:block;font-family:var(--daten);font-size:var(--t1);
  letter-spacing:var(--sp2);margin-top:.25rem;opacity:.75}