@charset "UTF-8";

/* =========================================================================
   heinrich-barth.ch · Stylesheet
   Ein einziges CSS für alle Seiten. Alle Gestaltungsentscheide hängen an
   den Variablen im Block :root — Farbe oder Schriftgrad ändert man dort
   und nirgends sonst.

   Aufbau
   0  Schriften
   1  Variablen
   2  Grundlagen
   3  Kopfband
   4  Raster: Navigation | Lesespalte | Marginalien
   5  Textbausteine
   6  Fuss
   7  Bilder
   8  Schmale Bildschirme
   9  Druck
  10  Seiteninhalt (Sprungmarken)
  11  Werktabelle
  12  Ergänzungen schmale Bildschirme
  13  Feinschliff
   ========================================================================= */


/* == 0 · SCHRIFTEN =======================================================
   Selbst gehostet, damit keine Daten an Dritte abfliessen (revDSG/DSGVO).
   Dateien liegen in /schriften/. Solange sie fehlen, greift die
   Systemschrift aus dem font-family-Stapel — die Seite bleibt benutzbar.
   ======================================================================= */

/* Newsreader: drei statische Schnitte statt eines Variable Fonts.
   Jedes font-weight, das im CSS vorkommt (200, 300, 500), braucht hier
   eine eigene @font-face-Regel — der Browser wählt sonst nicht selbst
   einen passenden Schnitt aus einer einzelnen Datei. */
@font-face{
  font-family: "Newsreader";
  src: url("schriften/newsreader-200.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Newsreader";
  src: url("schriften/newsreader-200italic.woff2") format("woff2");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: "Newsreader";
  src: url("schriften/newsreader-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Newsreader";
  src: url("schriften/newsreader-300italic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: "Newsreader";
  src: url("schriften/newsreader-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Newsreader";
  src: url("schriften/newsreader-500italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face{
  font-family: "PlexMono";
  src: url("schriften/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "PlexMono";
  src: url("schriften/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


/* == 1 · VARIABLEN ====================================================== */

:root{
  /* Farbe: kühler Stein statt Cremeton, Lapis als einziger Akzent.
     --licht wird ausschliesslich auf dunklem Grund verwendet. */
  --tinte:       #14181d;
  --tinte-weich: #39424e;
  --papier:      #ecede9;
  --papier-tief: #e2e3dd;
  --linie:       #c8c9c1;
  --text:        #1c2126;
  --text-leise:  #6d7379;
  --akzent:      #2c4c8c;
  --akzent-hell: #8fa7d4;
  --licht:       #e6d5a2;

  /* Kopf- und Fussband. Hier die Bandfarbe ändern, nirgends sonst —
     alle Textfarben darauf leiten sich von --band-text ab. */
  --band:        #f0e68c;
  --band-text:   #000000;
  --band-leise:  rgba(0,0,0,.62);
  --band-linie:  rgba(0,0,0,.18);

  /* Schrift: ein Serif-Superfamily über alle Rollen, dazu Monospace für
     alles Archivalische — Jahreszahlen, Signaturen, Bulletin-Nummern. */
  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --mono:    "PlexMono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Mass */
  --breite: 1320px;
  --spalte: 66ch;                       /* Zeilenlänge = Lesekomfort */
  --rand:   clamp(1.25rem, 4vw, 3rem);
}


/* == 2 · GRUNDLAGEN ===================================================== */

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

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body{
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: var(--display);
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.1875rem);
  line-height: 1.68;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* Silbentrennung fürs Deutsche. Der Browser entnimmt die Sprache
     dem lang="de-CH" auf <html> — das steht auf jeder Seite bereits.
     Safari braucht zusätzlich das Herstellerpräfix. */
  hyphens: auto;
  -webkit-hyphens: auto;
}

a{ color: var(--akzent); text-decoration: none; }

:focus-visible{
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
}

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

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Sprungmarke für Tastatur und Screenreader */
.skip{
  position: absolute; left: -9999px; z-index: 60;
  background: var(--tinte); color: var(--papier);
  padding: .75rem 1.25rem;
  font-family: var(--mono); font-size: .75rem;
}
.skip:focus{ left: 1rem; top: 1rem; }

/* Silbentrennung dort ausschliessen, wo Wörter ohnehin nicht umbrechen
   sollen oder der Platz für eine sinnvolle Trennung zu knapp ist:
   Navigation, Etiketten, Monospace-Zahlenspalten. */
.navigation, .etikett, .marke__daten, .lebensdaten,
.verzeichnis .jahr, .register-liste .fundstelle{
  hyphens: none;
  -webkit-hyphens: none;
}

/* Etikett — das Auszeichnungselement für Datierungen, Rubriken, Quellen */
.etikett{
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-leise);
}


/* == 3 · KOPFBAND ======================================================= */

.kopf{
  position: relative;
  background: var(--band);
  color: var(--band-text);
  padding: 2.25rem var(--rand) 2.5rem;
  overflow: hidden;
}

.kopf__inner{
  position: relative; z-index: 1;
  max-width: var(--breite);
  margin: 0 auto;
}
/* Nur die Startseite trägt ein Portrait im Band — nur dort wird rechts
   Platz dafür reserviert. */
.kopf--gross .kopf__inner{ padding-right: 13rem; }

/* Portrait im Kopfband der Startseite, unten rechts bündig.
   Absolut positioniert, damit es die Zeilenhöhen des Textes nicht
   beeinflusst. */
.kopfbild{
  position: absolute;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  max-height: 15rem;
  filter: grayscale(12%);
}

/* Wortmarke, auf jeder Seite gleich, führt zurück zur Startseite */
.marke{
  display: inline-flex; align-items: baseline; gap: .85rem;
  color: var(--band-text);
}
.marke__name{
  font-size: 1.375rem; font-weight: 300; letter-spacing: -.01em;
}
.marke__daten{
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .14em;
  color: var(--band-leise);
}
.marke:hover .marke__daten{ color: var(--akzent); }

/* Etikett auf dem Band: dunkel statt hell */
.kopf .etikett{ color: var(--band-leise); }

/* Seitentitel im Kopfband der Unterseiten */
.kopf__titel{
  margin: 2.75rem 0 0;
  font-weight: 200;
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  /* 30ch statt vormals 18ch: die beiden längsten Titel der Website
     ("Schwerpunkte seines Denkens", "Heinrich Barth-Gesellschaft",
     je 27 Zeichen) sollen einzeilig bleiben. */
  max-width: 30ch;
}

/* --- Startseite: das grosse Band ------------------------------------ */
.kopf--gross{ padding-bottom: clamp(3.5rem, 10vh, 6rem); }

.name{
  margin: clamp(3rem, 9vh, 5rem) 0 0;
  font-weight: 200;
  /* Eine Zeile statt zwei: die Schrift darf pro Zeichen weniger Höhe
     einnehmen als in einer zweizeiligen Fassung, muss dafür aber auch
     auf schmalen Bildschirmen noch in eine Zeile passen. */
  font-size: clamp(1.75rem, 8.2vw, 5.25rem);
  line-height: 1;
  letter-spacing: -.03em;
  white-space: nowrap;
}
.name span{ display: inline; }
.name em{ font-style: italic; font-weight: 300; }

.lebensdaten{
  margin: 1.75rem 0 0;
  font-family: var(--mono);
  font-size: .8125rem;
  letter-spacing: .1em;
  color: var(--band-leise);
}

.these{
  margin: clamp(2.5rem, 7vh, 4.5rem) 0 0;
  font-weight: 300;
  font-size: clamp(1.5rem, 4.4vw, 2.75rem);
  line-height: 1.22;
  letter-spacing: -.015em;
  max-width: 22ch;
  color: var(--band-text);
}
.these b{
  display: block;
  margin-top: 1.1rem;
  max-width: 40ch;
  font-weight: 300;
  font-size: .5em;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--band-leise);
}

/* Auftritt beim Laden — nur auf der Startseite */
.tritt-auf > *{
  opacity: 0;
  animation: auftritt 1.1s cubic-bezier(.2,.7,.3,1) forwards;
}
.tritt-auf > *:nth-child(1){ animation-delay: .06s; }
.tritt-auf > *:nth-child(2){ animation-delay: .20s; }
.tritt-auf > *:nth-child(3){ animation-delay: .36s; }
.tritt-auf > *:nth-child(4){ animation-delay: .62s; }

@keyframes auftritt{
  from{ opacity: 0; transform: translateY(.6rem); filter: blur(6px); }
  to  { opacity: 1; transform: none;              filter: blur(0);  }
}
@media (prefers-reduced-motion: reduce){
  .tritt-auf > *{ opacity: 1; animation: none; }
}


/* == 4 · RASTER ========================================================= */

.raster{
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 var(--rand) 5.5rem;
  display: grid;
  grid-template-columns: 11rem minmax(0, var(--spalte)) minmax(0, 1fr);
  gap: 0 clamp(1.75rem, 3.2vw, 3.25rem);
  align-items: start;
}

/* <main> gibt seinen Kasten ab, damit Abschnitte und Marginalien
   direkt im Raster liegen. */
.inhalt{ display: contents; }

/* --- Navigation (linke Spalte) --------------------------------------- */
.navigation{
  position: sticky;
  top: 2.5rem;
  padding-top: 4rem;
}
.navigation ul{ margin: 0; padding: 0; list-style: none; }
.navigation li + li{ margin-top: .7rem; }

.navigation a{
  display: flex; gap: .6rem; align-items: baseline;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--text-leise);
  transition: color .2s;
}
.navigation a::before{
  content: "";
  width: .4rem; height: .4rem; flex: none;
  border: 1px solid var(--linie);
  transform: translateY(-.05rem);
  transition: background .2s, border-color .2s;
}
.navigation a:hover{ color: var(--text); }
.navigation a[aria-current="page"]{ color: var(--akzent); }
.navigation a[aria-current="page"]::before{
  background: var(--akzent);
  border-color: var(--akzent);
}

/* Trenner: ein eigenständiges, leeres <li class="trenner"></li>
   zwischen zwei Gruppen — kein Modifikator an einem Linkpunkt. Braucht
   eine Mindesthöhe, sonst zeigt ein leeres <li> ohne Inhalt gar nichts
   an und die Linie verschwindet ganz. */
.navigation .trenner{
  list-style: none;
  height: 1px;
  margin: 1.5rem 0;
  padding: 0;
  border-top: 1px solid var(--linie);
  overflow: hidden;
}
/* Der übliche Zeilenabstand zum jeweils nächsten Punkt entfällt beim
   Trenner selbst, sein eigener margin regelt den Abstand bereits. */
.navigation .trenner + li{ margin-top: 0; }

/* --- Abschnitte (mittlere Spalte) ------------------------------------- */
.satz{
  grid-column: 2;
  padding-top: 4rem;
  scroll-margin-top: 2rem;
}
/* Trennlinie über jedem Abschnitt ausser dem ersten.
   ~ statt + : dazwischenliegende Elemente unterbrechen die direkte
   Nachbarschaft sonst und die Linie fiele aus. */
.satz ~ .satz{ border-top: 1px solid var(--linie); }

.satz > h2{
  margin: 0 0 1.75rem;
  font-weight: 300;
  font-size: clamp(1.625rem, 3.2vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -.02em;
}
.satz h3{
  margin: 2.5rem 0 .75rem;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.3;
}
.satz p{ margin: 0 0 1.35rem; }
.satz p:last-child{ margin-bottom: 0; }
.satz ul, .satz ol{ margin: 0 0 1.35rem; padding-left: 1.2rem; }
.satz li{ margin-bottom: .4rem; }

/* Vorlauf: der erste, grössere Absatz eines Abschnitts */
.vorlauf{
  font-size: 1.2em;
  line-height: 1.55;
}

/* --- Marginalie (rechte Spalte) --------------------------------------- */
.marginalie{
  grid-column: 3;
  margin-top: 4rem;
  padding-top: .6rem;
  border-top: 1px solid var(--linie);
  font-family: var(--mono);
  font-size: .6875rem;
  line-height: 1.65;
  color: var(--text-leise);
  max-width: 20rem;
}
.marginalie b{ display: block; font-weight: 500; color: var(--text); }
.marginalie a{ border-bottom: 1px solid var(--akzent-hell); }


/* == 5 · TEXTBAUSTEINE ================================================== */

/* Ankündigung — das einzige Element mit Fläche */
.ankuendigung{
  background: var(--papier-tief);
  border-left: 2px solid var(--akzent);
  padding: 1.6rem 1.75rem;
}
.ankuendigung + .ankuendigung{ margin-top: 1.25rem; }
.ankuendigung h3{ margin: .85rem 0 .5rem; }
.ankuendigung p{ font-size: .95em; }

/* Verzeichnis — Jahr | Titel. Für Werke, Tagungen, Literatur. */
.verzeichnis{ margin: 0 0 1.5rem; padding: 0; list-style: none; }
.verzeichnis li{
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0 1.25rem;
  padding: 1rem 0;
  margin: 0;
  border-top: 1px solid var(--linie);
}
.verzeichnis li:first-child{ border-top: none; padding-top: 0; }
.verzeichnis .jahr{
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--text-leise);
  padding-top: .42rem;
}
.verzeichnis .titel{ font-size: 1.0625rem; line-height: 1.45; }
.verzeichnis .titel i{ font-style: italic; }
.verzeichnis .zusatz{
  display: block;
  margin-top: .3rem;
  font-family: var(--mono);
  font-size: .6875rem;
  line-height: 1.5;
  color: var(--text-leise);
}

/* Begriffsliste — für Schwerpunkte und Anknüpfungspunkte */
.begriffe{ margin: 0 0 1.5rem; }
.begriffe dt{
  margin-top: 2rem;
  font-size: 1.25rem;
  font-style: italic;
}
.begriffe dt:first-child{ margin-top: 0; }
.begriffe dd{ margin: .5rem 0 0; }

/* Personenliste — Vorstand, Mitwirkende */
.personen{ margin: 0 0 1.5rem; padding: 0; list-style: none; }
.personen li{
  padding: .7rem 0;
  margin: 0;
  border-top: 1px solid var(--linie);
}
.personen li:first-child{ border-top: none; }
.personen .rolle{
  display: block;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-bottom: .15rem;
}

/* Textlink mit ruhiger Unterlinie */
.link{
  border-bottom: 1px solid var(--akzent-hell);
  overflow-wrap: anywhere;
  transition: border-color .2s;
}
.link:hover{ border-color: var(--akzent); }

/* Weiterführender Verweis */
.weiter{
  display: inline-flex; align-items: baseline; gap: .5rem;
  margin-top: 1.5rem;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.weiter::after{ content: "→"; transition: transform .2s; }
.weiter:hover::after{ transform: translateX(.25rem); }

/* Zitat aus einer Quelle */
.zitat{
  margin: 2rem 0;
  padding-left: 1.5rem;
  border-left: 1px solid var(--linie);
  font-style: italic;
}
.zitat cite{
  display: block;
  margin-top: .6rem;
  font-family: var(--mono);
  font-style: normal;
  font-size: .6875rem;
  letter-spacing: .06em;
  color: var(--text-leise);
}

/* Registerliste — alphabetisches Bulletin-Verzeichnis */
.register-liste{ margin: 0 0 1.5rem; padding: 0; list-style: none; }
.register-liste li{
  padding: .55rem 0;
  margin: 0;
  border-top: 1px solid var(--linie);
  font-size: .9375rem;
  line-height: 1.5;
}
.register-liste li:first-child{ border-top: none; }
.register-liste .autor{ font-variant: small-caps; letter-spacing: .02em; }
.register-liste .fundstelle{
  font-family: var(--mono);
  font-size: .6875rem;
  color: var(--text-leise);
  white-space: nowrap;
}


/* == 6 · FUSS =========================================================== */

.fuss{
  background: var(--band);
  color: var(--band-text);
  padding: 4rem var(--rand) 3rem;
  font-size: .9375rem;
}
.fuss__inner{
  max-width: var(--breite);
  margin: 0 auto;
  display: grid;
  /* Feste Obergrenze von drei Spalten statt auto-fit: bei sechs Feldern
     unterschiedlicher Länge reisst eine vierte, fünfte oder sechste
     Spalte sonst je nach Fensterbreite unregelmässige Lücken auf. Drei
     Spalten füllen zwei geschlossene Zeilen ohne Rest. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.75rem 3rem;
}
.fuss h2{
  margin: 0 0 1rem;
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--band-leise);
}
.fuss p{ margin: 0; }
.fuss ul{ margin: 0; padding: 0; list-style: none; }
.fuss li + li{ margin-top: .5rem; }
.fuss a{ color: var(--band-text); border-bottom: 1px solid var(--band-linie); }
.fuss a:hover{ color: var(--akzent); border-color: var(--akzent); }

.fuss__zeile{
  max-width: var(--breite);
  margin: 3rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--band-linie);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  color: var(--band-leise);
}
.fuss__zeile a{ border: none; color: var(--band-leise); }
.fuss__zeile a:hover{ color: var(--akzent); }


/* == 7 · BILDER ========================================================= */

/* Portrait in der rechten Randspalte neben dem Text (alle Seiten ausser
   der Startseite, die ihr Portrait im Kopfband trägt). */
.randbild{
  grid-column: 3;
  /* Über zwei Rasterzeilen, damit das hohe Bild die erste Zeile nicht
     aufbläht und der folgende Abschnitt nicht nach unten rutscht. */
  grid-row: span 2;
  margin-top: 4rem;
  padding-top: .6rem;
  border-top: 1px solid var(--linie);
}
.randbild img{
  width: 100%;
  max-width: 14rem;
  height: auto;
  filter: grayscale(12%);
}

/* Dokumentabbildungen im Fliesstext, nebeneinander */
.dokumente{
  grid-column: 2;
  margin: 2rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.25rem;
}
.dokumente a{
  display: block;
  border: 1px solid var(--linie);
  transition: border-color .2s;
}
.dokumente a:hover{ border-color: var(--akzent); }
.dokumente img{ display: block; }
.dokumente figcaption{
  flex: 1 1 100%;
  font-family: var(--mono);
  font-size: .6875rem;
  line-height: 1.6;
  color: var(--text-leise);
}


/* == 8 · SCHMALE BILDSCHIRME ============================================ */

/* Fuss: bei drei festen Spalten braucht es einen eigenen Zwischenschritt
   auf Tablet-Breite, sonst quetschen sich drei Spalten zusammen, bevor
   die allgemeine Mobil-Umstellung bei 62rem greift. */
@media (max-width: 48rem){
  .fuss__inner{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 30rem){
  .fuss__inner{ grid-template-columns: 1fr; }
}

@media (max-width: 62rem){
  .raster{
    display: flex;
    flex-direction: column;
    padding-bottom: 3.5rem;
  }
  .navigation{
    order: -2;
    position: static;
    padding: 2rem 0;
    border-bottom: 1px solid var(--linie);
  }
  /* Auf schmalen Bildschirmen alle Einträge schlicht untereinander,
     mit dem gewohnten Zeilenabstand. Zweispaltige Raster oder
     umbrechender Fliesstext erzeugten hier krumme, schwer lesbare
     Zeilen. Die Gruppentrenner entfallen mobil, weil sie in einer
     einzigen Spalte mehr zergliedern als sie ordnen. */
  .navigation ul{
    display: block;
  }
  .navigation li{ margin: 0; }
  /* Abstand über den benachbarten Geschwistern statt über li + li:
     Die ausgeblendeten Trenner zählen sonst als Nachbar mit und
     reissen an ihrer Stelle eine Lücke im Rhythmus auf. */
  .navigation li:not(.trenner) + li:not(.trenner){ margin-top: .7rem; }
  .navigation .trenner + li{ margin-top: .7rem; }
  .navigation .trenner{ display: none; }
  /* Portrait der Unterseiten rutscht unter die Navigation nach oben,
     statt je nach Seitenlänge weit unten zu landen. */
  .randbild{
    order: -1;
    margin: 2rem 0 0;
    border-top: none;
    padding-top: 0;
  }
  .randbild img{ max-width: 12rem; }
  .satz{ padding-top: 3rem; }
  .marginalie{ margin: 1.75rem 0 0; max-width: none; }
  .kopf__titel{ margin-top: 2rem; }
  /* Kopfbild der Startseite: schmaler, damit der Name daneben nicht
     überlappt. Die reservierte Fläche schrumpft mit. */
  .kopf--gross .kopf__inner{ padding-right: 7.5rem; }
  .kopfbild{ max-height: 8rem; }
}

@media (max-width: 34rem){
  .verzeichnis li{ grid-template-columns: 1fr; gap: .3rem; }
  .verzeichnis .jahr{ padding-top: 0; }
}


/* == 9 · DRUCK ========================================================== */

@media print{
  .navigation, .skip, .weiter{ display: none; }
  body{ background: #fff; color: #000; font-size: 11pt; }
  .kopf, .fuss{ background: #fff; color: #000; }
  .kopf__inner, .marke, .marke__name{ color: #000; }
  .raster{ display: block; }
  .marginalie{ border-top: 1px solid #999; }
  a{ color: #000; }
}



/* == 10 · SEITENINHALT (Sprungmarken am Seitenanfang) =================== */

.seiteninhalt{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
}
.seiteninhalt li{ margin: 0; }
.seiteninhalt a{
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--linie);
  padding-bottom: .15rem;
  transition: border-color .2s;
}
.seiteninhalt a:hover{ border-color: var(--akzent); }


/* == 11 · WERKTABELLE =================================================== */

.werke{
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 2.5rem;
  text-align: left;
}
.werke caption{
  text-align: left;
  padding-bottom: .9rem;
}
.werke th,
.werke td{
  vertical-align: baseline;
  padding: 1.1rem 0;
  border-top: 1px solid var(--linie);
}
.werke tbody tr:first-child th,
.werke tbody tr:first-child td{ border-top: none; padding-top: 0; }

.werke th[scope="row"]{
  width: 8.5rem;
  padding-right: 1.5rem;
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-leise);
  white-space: nowrap;
}
.werke .einleitung{
  margin: 0 0 .7rem;
  font-size: .9375rem;
  color: var(--text-leise);
}
.werke .titel{
  margin: 0;
  padding: 0;
  list-style: none;
}
.werke .titel li{
  margin: 0 0 .5rem;
  line-height: 1.5;
}
.werke .titel li:last-child{ margin-bottom: 0; }
.werke .ohne-schlagwort td{ padding-left: 0; }

/* Jahresspalte der zweiten Tabelle */
.werke--jahre th[scope="row"]{
  width: 5rem;
  font-size: .75rem;
  letter-spacing: .06em;
}
.werke--jahre td{ line-height: 1.6; }


/* == 12 · ERGÄNZUNGEN SCHMALE BILDSCHIRME =============================== */

@media (max-width: 34rem){
  .werke,
  .werke tbody,
  .werke tr,
  .werke th,
  .werke td{ display: block; width: auto; }
  .werke th[scope="row"]{
    width: auto;
    padding: 0 0 .4rem;
    border-top: 1px solid var(--linie);
    padding-top: 1.1rem;
  }
  .werke td{ border-top: none; padding-top: 0; }
  .dokumente img{ max-width: 100%; height: auto; }
}


/* == 13 · FEINSCHLIFF ================================================== */

/* Der Abschnitt mit den Sprungmarken bleibt kompakt */
.satz--inhalt{ padding-bottom: 0; }
.satz--inhalt > h2{
  margin-bottom: 1rem;
  font-size: 1.125rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-leise);
}

/* Abstand zwischen Ankündigungen und dem folgenden Fliesstext */
.ankuendigung + .vorlauf{ margin-top: 2.5rem; }