/* =====================================================================
   timmeyer.de · Fassung A "Feuilleton"
   Ruhig, textbetont, wie eine gute Kulturbeilage: warmes Papier,
   fast schwarze Schrift, ein einziger Akzent (Bordeaux), dünne Linien.
   Nur Systemschriften, keine fremden Dateien.
   ===================================================================== */

/* ---------- Farben und Maße ------------------------------------------ */
/* Kontraste (WCAG): Schrift auf Papier 15,4:1 · leise Schrift 6,5:1 ·
   Akzent 8,0:1 · im dunklen Modus etwa 14 / 7,4 / 6,8 zu 1. */
:root {
  color-scheme: light dark;

  --papier: #f6f1e7;
  --flaeche: #ede6d8;
  --schrift: #1d1a16;
  --leise: #5d554a;
  --akzent: #8c1d2c;
  --linie: #cfc4b2;
  --linie-stark: #1d1a16;
  --markierung: #8c1d2c26;

  --serif: "Iowan Old Style", "Charter", "Sitka Text", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --spalte: 40rem;        /* Lesespalte, etwa 65 Zeichen */
  --rand: 14rem;          /* Randspalte rechts (Porträt, Angaben) */
  --luecke: 4rem;
  --seite: calc(var(--spalte) + var(--luecke) + var(--rand));
  --gutter: 1rem;

  --s1: .5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2.5rem;
  --s5: 4rem;
  --s6: 6rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #1a1714;
    --flaeche: #25201b;
    --schrift: #ebe4d8;
    --leise: #b0a594;
    --akzent: #d98c84;
    --linie: #4a4239;
    --linie-stark: #ebe4d8;
    --markierung: #d98c842e;
  }
}

@media (min-width: 40em) {
  :root { --gutter: 2rem; }
}

/* ---------- Grundlagen ----------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--s3);
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--schrift);
  font-family: var(--serif);
  font-size: 1.125rem;            /* 18 px auf dem Handy */
  line-height: 1.6;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

@media (min-width: 40em) {
  body { font-size: 1.25rem; }    /* 20 px am Rechner, etwa 66 Zeichen je Zeile */
}

img { max-width: 100%; height: auto; display: block; }

p, ul, ol, blockquote, figure { margin: 0; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
}

a {
  color: var(--akzent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
  border-radius: 1px;
}
main:focus { outline: none; }

::selection { background: var(--markierung); }

.unsichtbar {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sprunglink {
  position: absolute;
  left: var(--gutter);
  top: -10rem;
  z-index: 10;
  padding: var(--s1) var(--s2);
  background: var(--schrift);
  color: var(--papier);
  font-family: var(--sans);
  font-size: .9375rem;
}
.sprunglink:focus { top: var(--s1); }

/* ---------- Bausteine ------------------------------------------------- */

/* Dachzeile: Gattung · Medium · Jahr */
.dachzeile {
  display: block;
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-variant-numeric: lining-nums;
  color: var(--akzent);
}

/* Rubrikkopf: kleine Versalien über einer kräftigen Linie */
.rubrikkopf {
  padding-top: var(--s1);
  border-top: 2px solid var(--linie-stark);
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.vorspann {
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--leise);
  text-wrap: pretty;
}

.vorspann-text p {
  font-size: 1.1875rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.vorspann-text p + p { margin-top: var(--s2); }

/* Hinweis im Entwurf: leise, zwischen dünnen gestrichelten Linien statt Kasten */
.entwurf-hinweis {
  max-width: var(--spalte);
  margin-block: var(--s3);
  padding-block: var(--s1);
  border-block: 1px dashed var(--linie);
  font-family: var(--sans);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--leise);
}

/* Entwurfs-Band oben (nur in der groben Fassung) */
.entwurf {
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  font-family: var(--sans);
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--leise);
  text-align: center;
}
.entwurf p { padding: 0 var(--gutter); }
.entwurf a {
  display: inline-block;
  padding: .6rem .25rem;
  color: var(--leise);
}
.entwurf a[aria-current] {
  color: var(--schrift);
  font-weight: 600;
  text-decoration: none;
}

/* ---------- Kopf ------------------------------------------------------ */
.kopf-innen,
.haupt,
.fuss-innen {
  width: min(100% - 2 * var(--gutter), var(--seite));
  margin-inline: auto;
}

.kopf-innen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s1) var(--s3);
  padding-block: var(--s3) .25rem;
  border-bottom: 1px solid var(--linie);
}

.wortmarke {
  font-size: 1.625rem;
  line-height: 1.1;
  letter-spacing: -.005em;
  color: var(--schrift);
  text-decoration: none;
}
.wortmarke:hover { color: var(--akzent); }

.hauptnavigation ul,
.fussnavigation ul,
.sprungleiste ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  padding: 0;
  list-style: none;
}

.hauptnavigation a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;         /* Tippfläche mindestens 44 px */
  padding-block: 0;
  font-family: var(--sans);
  font-size: .9375rem;
  letter-spacing: .02em;
  color: var(--schrift);
  text-decoration: none;
}
.hauptnavigation a:hover { color: var(--akzent); }
.hauptnavigation a[aria-current] {
  color: var(--akzent);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .4em;
}

/* Handy: Navigation bricht unter den Namen um, ohne Menüknopf */
@media (max-width: 39.99em) {
  .kopf-innen { flex-direction: column; align-items: flex-start; }
  .kopf-innen { row-gap: 0; }
  .hauptnavigation ul { gap: 0 1.25rem; }
}

/* ---------- Hauptbereich --------------------------------------------- */
.haupt {
  padding-block: var(--s4) var(--s6);
}

@media (min-width: 64em) {
  .haupt { padding-top: var(--s5); }
}

/* Seitenkopf für Übersicht, Musik, einfache Seiten */
.seitenkopf {
  max-width: var(--spalte);
  margin-bottom: var(--s4);
}
.seitenkopf .dachzeile { margin-bottom: var(--s2); }
.seitentitel {
  font-size: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -.01em;
}
/* Große Überschriften: lange Wörter mit Trennstrich trennen statt mitten im Wort abzubrechen */
.seitentitel,
.artikel-titel,
.eintrag-titel,
.zeile-titel {
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
}
.seitenkopf .vorspann,
.seitenkopf .vorspann-text { margin-top: var(--s3); }
.seitenkopf .entwurf-hinweis { margin-bottom: 0; }

/* ---------- Fließtext (Artikel und einfache Seiten) ------------------- */
.artikel-text,
.fliesstext {
  max-width: var(--spalte);
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
  text-wrap: pretty;
}
.artikel-text a,
.fliesstext a { hyphens: manual; -webkit-hyphens: manual; }

.artikel-text > * + *,
.fliesstext > * + * { margin-top: 1em; }

/* Zwischentitel im Artikel: leise Einschübe, keine Kapitel-Linien */
.artikel-text h2 {
  margin-top: 2em;
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.3;
}
/* Abschnitte einfacher Seiten (Impressum, Vita) dürfen eine dünne Linie haben */
.fliesstext h2 {
  margin-top: 2.2em;
  padding-top: var(--s2);
  border-top: 1px solid var(--linie);
  font-size: 1.625rem;
  line-height: 1.2;
}
.artikel-text h3,
.fliesstext h3 {
  margin-top: 2em;
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--akzent);
}
.fliesstext h2 + h3 { margin-top: 1.1em; }
/* Im Artikel eröffnet ### einen abgesetzten Teil (z. B. "Hintergrund"): nur hier eine kräftige Linie */
.artikel-text h3 {
  margin-top: 3em;
  padding-top: var(--s1);
  border-top: 2px solid var(--linie-stark);
}
.artikel-text h2 + *,
.artikel-text h3 + *,
.fliesstext h2 + *,
.fliesstext h3 + * { margin-top: .5em; }

.artikel-text ul,
.fliesstext ul { padding-left: 1.2em; }
.artikel-text li + li,
.fliesstext li + li { margin-top: .3em; }
.artikel-text li::marker,
.fliesstext li::marker { color: var(--akzent); }

.artikel-text blockquote,
.fliesstext blockquote {
  margin-block: 1.6em;
  padding-left: var(--s3);
  border-left: 2px solid var(--akzent);
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.45;
}

.artikel-text hr,
.fliesstext hr {
  width: 4rem;
  margin: 2.5em 0;
  border: 0;
  border-top: 1px solid var(--linie);
}

/* Bilder im Text: am Rechner bis in die Randspalte */
.bild { margin-block: 2em; }
.bild img { width: 100%; background: var(--flaeche); }
.bild figcaption {
  margin-top: var(--s1);
  font-family: var(--sans);
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--leise);
}
@media (min-width: 64em) {
  .artikel-text .bild {
    width: calc(var(--spalte) + var(--luecke) + var(--rand));
    max-width: none;
  }
  .artikel-text .bild figcaption { max-width: var(--spalte); }
  .artikel-text .bild-klein,
  .artikel-text .bild-hoch { width: auto; }
}
/* Kleine Fotos (unter 640 px) in echter Größe, Hochformate höchstens so hoch wie das Fenster */
.bild-klein img { width: auto; max-width: 100%; }
.bild-hoch img { width: auto; max-width: 100%; max-height: min(85vh, 48rem); }

/* ---------- Startseite ----------------------------------------------- */
/* Kurzer Anreißer als großer Vorspann; kein Porträt und kein zweiter großer Name (Tim, 24.10.2026) */
.vorstellung { max-width: var(--spalte); }
.vorstellung .vorspann-text p {
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.4;
  color: var(--schrift);
}
.vorstellung-mehr {
  margin-top: var(--s2);
  font-family: var(--sans);
  font-size: .9375rem;
}

.start-unten {
  clear: both;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5) var(--luecke);
  margin-top: var(--s5);
}
@media (min-width: 64em) {
  .start-unten { grid-template-columns: var(--spalte) var(--rand); }
}

/* Visitenkarte (Tim, 24.10.2026): vier Bereiche als Felder */
.feld-titel {
  margin-top: var(--s2);
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 1.2;
}
.feld-text {
  margin-top: var(--s1);
  color: var(--leise);
  line-height: 1.5;
  text-wrap: pretty;
}
.feld-link {
  margin-top: var(--s2);
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 600;
}

/* Zwei mal zwei Felder auf einen Blick, auf dem Handy untereinander */
.felder {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5) var(--luecke);
  margin-top: var(--s5);
  padding: 0;
  list-style: none;
}
@media (min-width: 48em) {
  .felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Ohne Vorspann (Tim, 24.10.2026) beginnen die Felder direkt unter dem Kopf */
.vorstellung:not(:has(.vorstellung-text)) + .felder { margin-top: 0; }
.feld { display: flex; flex-direction: column; }
.feld .feld-link { margin-top: auto; padding-top: var(--s2); }

.feld-auswahl {
  margin-top: var(--s2);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linie);
}
.feld-auswahl li {
  padding-block: .5rem;
  border-bottom: 1px solid var(--linie);
}
.feld-auswahl a { color: var(--schrift); text-decoration: none; }
.feld-auswahl a:hover { color: var(--akzent); text-decoration: underline; text-decoration-thickness: 1px; }

.coverreihe {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .5rem;
  margin-top: var(--s2);
  padding: 0;
  list-style: none;
}
.coverreihe img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--flaeche);
}
@media (max-width: 39.99em) {
  .coverreihe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.archivspalte ul {
  padding: 0;
  list-style: none;
  font-size: 1.125rem;
}
.archivspalte li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s2);
  padding-block: .55rem;
  border-bottom: 1px solid var(--linie);
}
.archivspalte li:first-child { padding-top: var(--s2); }
.archivspalte a { color: var(--schrift); text-decoration: none; }
.archivspalte a:hover { color: var(--akzent); text-decoration: underline; text-decoration-thickness: 1px; }
.archivspalte-zahl {
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--leise);
}

.textliste {
  padding: 0;
  list-style: none;
}

.eintrag {
  padding-block: var(--s3);
  border-bottom: 1px solid var(--linie);
}
.eintrag-titel {
  margin-top: .4rem;
  font-size: 1.5rem;
  line-height: 1.2;
}
.eintrag-titel a {
  color: var(--schrift);
  text-decoration: none;
}
.eintrag-titel a:hover {
  color: var(--akzent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
.eintrag-unterzeile {
  margin-top: .3rem;
  font-style: italic;
  color: var(--leise);
  line-height: 1.45;
}

.weiter {
  margin-top: var(--s3);
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 600;
}

/* ---------- Übersicht "Texte": wie ein Inhaltsverzeichnis -------------- */
.sprungleiste {
  margin-top: var(--s3);
  padding-block: 0;
  border-block: 1px solid var(--linie);
}
.sprungleiste ul { gap: 0 1.25rem; }
.sprungleiste a {
  display: inline-block;
  padding-block: .7rem;
  font-family: var(--sans);
  font-size: .875rem;
  letter-spacing: .02em;
}

.gruppe { margin-top: var(--s5); }
.gruppe-titel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  padding-top: var(--s1);
  border-top: 2px solid var(--linie-stark);
  font-size: 1.875rem;
  line-height: 1.2;
}
.gruppe-zahl {
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--leise);
}

.inhaltsliste {
  margin-top: var(--s1);
  padding: 0;
  list-style: none;
}

.zeile {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  grid-template-areas:
    "jahr angaben"
    "jahr text";
  column-gap: var(--s2);
  padding-block: var(--s2);
  border-bottom: 1px solid var(--linie);
}
.zeile-jahr {
  grid-area: jahr;
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--akzent);
}
.zeile-text { grid-area: text; }
.zeile-angaben {
  grid-area: angaben;
  margin-bottom: .2rem;
  font-family: var(--sans);
  font-size: .8125rem;
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--leise);
}
.zeile-angaben:empty { margin: 0; }
.zeile-titel {
  font-size: 1.25rem;
  line-height: 1.25;
}
.zeile-titel a {
  color: var(--schrift);
  text-decoration: none;
}
.zeile-titel a:hover {
  color: var(--akzent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
.zeile-unterzeile {
  margin-top: .15rem;
  font-size: 1rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--leise);
}
/* Anhang (z. B. Interview zur Reportage): eingerückt unter seinem Haupttext */
.zeile-dazu {
  margin-top: var(--s1);
  padding-left: var(--s2);
  border-left: 1px solid var(--linie);
  font-size: 1.0625rem;
  line-height: 1.35;
}
.zeile-dazu-art {
  display: block;
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--leise);
}
.zeile-dazu a { color: var(--schrift); }
.zeile-dazu a:hover { color: var(--akzent); }

@media (min-width: 64em) {
  .zeile {
    grid-template-columns: 4rem minmax(0, 1fr) 15rem;
    grid-template-areas: "jahr text angaben";
    column-gap: 0;
    align-items: baseline;
    padding-block: var(--s2) calc(var(--s2) + .1rem);
  }
  .zeile-text { padding-right: var(--s3); }
  .zeile-jahr { line-height: 1.6; }
  .zeile-angaben {
    margin: 0;
    padding-left: var(--s2);
    text-align: right;
  }
}

/* ---------- Ein Text -------------------------------------------------- */
.artikel-kopf {
  max-width: var(--seite);
  margin-bottom: var(--s4);
}
.artikel-kopf .dachzeile { margin-bottom: var(--s2); }
.artikel-titel {
  max-width: 52rem;
  font-size: clamp(2rem, 1.4rem + 3.4vw, 4rem);
  line-height: 1.06;
  letter-spacing: -.015em;
}
.artikel-kopf .vorspann {
  max-width: var(--spalte);
  margin-top: var(--s3);
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
}
.autorzeile {
  max-width: var(--spalte);
  margin-top: var(--s3);
  padding-top: var(--s1);
  border-top: 1px solid var(--linie);
  font-family: var(--sans);
  font-size: .875rem;
  line-height: 1.5;
  font-variant-numeric: lining-nums;
  color: var(--leise);
}
.autorzeile-name { color: var(--schrift); font-weight: 600; }
.autorzeile-name,
.autorzeile-datum { white-space: nowrap; }
.hinweiszeile,
.rechtezeile {
  max-width: var(--spalte);
  margin-top: .3rem;
  font-family: var(--sans);
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--leise);
}

.artikel-platzhalter { margin-top: 0; }

/* Interviews: Fragen (fette Absätze) etwas abgesetzt */
.artikel-text p:has(> strong:only-child) { margin-top: 1.6em; }

/* Ortsmarke am Textanfang ("ARFELD.") in Kapitälchen statt fett */
.artikel-text > p:first-child > strong:first-child {
  font-weight: 600;
  font-variant-caps: all-small-caps;
  letter-spacing: .06em;
}

/* Initial: nur wenn der Text mit einem normalen Wort beginnt (Klasse aus der Vorlage)
   und nur wo der Browser es sauber kann */
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .artikel-text.mit-initial > p:first-child::first-letter {
    -webkit-initial-letter: 3;
    initial-letter: 3;
    margin-right: .12em;
    font-weight: 400;
    color: var(--akzent);
  }
}

.artikel-fuss {
  max-width: var(--spalte);
  margin-top: var(--s5);
  padding-top: var(--s2);
  border-top: 2px solid var(--linie-stark);
  font-family: var(--sans);
  font-size: .9375rem;
}
.herkunft {
  margin-bottom: var(--s3);
  font-size: .875rem;
  line-height: 1.5;
  color: var(--leise);
}
.bezug + .bezug,
.bezug + .zurueck { margin-top: var(--s2); }
.bezug-art {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--leise);
}
.bezug a { font-family: var(--serif); font-size: 1.1875rem; }
.zurueck a { font-weight: 600; }

/* ---------- Einfache Seiten (Über mich, Impressum, Datenschutz) -------- */
.seite-inhalt .seitenkopf { margin-bottom: var(--s4); }

/* Porträt am Anfang von "Über mich": klein rechts, am Rechner in der Randspalte */
.fliesstext > .bild:first-child {
  float: right;
  width: 7rem;
  margin: .3rem 0 var(--s2) var(--s3);
}
.fliesstext > .bild:first-child + p { margin-top: 0; }
@media (max-width: 39.99em) {
  .fliesstext > .bild:first-child {
    float: none;
    width: 8rem;
    margin: 0 0 var(--s3);
  }
}
@media (min-width: 64em) {
  .fliesstext > .bild:first-child {
    width: 12rem;
    margin: .4rem calc(-1 * (12rem + var(--luecke))) 0 0;
  }
}

/* ---------- Musik ----------------------------------------------------- */
.alben {
  max-width: calc(var(--spalte) + 2rem);
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--linie-stark);
}
.album {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--s3);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--linie);
}
@media (min-width: 40em) {
  .album { grid-template-columns: 11rem minmax(0, 1fr); gap: var(--s4); }
}
.album-cover {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  box-shadow: 0 1px 0 var(--linie);
}
.album-cover-platzhalter {
  display: flex;
  align-items: flex-end;
  padding: .75rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  font-style: italic;
  font-size: .9375rem;
  line-height: 1.2;
  color: var(--leise);
}
.album-titel {
  margin-top: .4rem;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.15;
}
.album-datum {
  margin-top: .35rem;
  font-family: var(--sans);
  font-size: .875rem;
  font-variant-numeric: lining-nums;
  color: var(--leise);
}
.album-besetzung {
  margin-top: var(--s2);
  padding: 0;
  list-style: none;
  font-size: 1rem;
  line-height: 1.5;
}
.album-produktion {
  margin-top: var(--s1);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--leise);
}
.album .entwurf-hinweis { margin-block: var(--s2) 0; }
.album-link,
.alben-link {
  margin-top: var(--s2);
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 600;
}
.alben-link { margin-top: var(--s3); }

/* Bandcamp-Player: erst ein Knopf mit Hinweis, nach dem Klick der Player selbst */
.player { margin-top: var(--s3); }
.player[hidden] { display: none; }
.player-knopf {
  min-height: 2.75rem;
  padding: .55rem 1rem;
  font: 600 .9375rem/1.2 var(--sans);
  color: var(--papier);
  background: var(--akzent);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
}
.player-knopf:hover { background: var(--schrift); }
.player-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.player-hinweis {
  margin-top: var(--s1);
  font-family: var(--sans);
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--leise);
  max-width: 34rem;
}
.player-rahmen {
  display: block;
  width: 100%;
  max-width: 34rem;
  height: 120px;
  border: 0;
}

/* ---------- Fuß ------------------------------------------------------- */
.fuss-innen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s1) var(--s3);
  padding-block: var(--s2) var(--s4);
  border-top: 1px solid var(--linie);
  font-family: var(--sans);
  font-size: .875rem;
}
.fuss-marke a {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--schrift);
  text-decoration: none;
}
.fussnavigation a {
  display: inline-block;
  padding-block: .7rem;
  color: var(--leise);
}
.fussnavigation a[aria-current] { color: var(--schrift); }

/* ---------- Druck ----------------------------------------------------- */
@media print {
  .entwurf, .hauptnavigation, .sprunglink, .fuss { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: #000; }
}