/* ==========================================================================
   andre-koegler.de - Layout und Komponenten
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-emphasis);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.7;
}

img { max-width: 100%; }

a { color: var(--akzent); text-decoration: none; }
a:hover, a:active { color: var(--link-hover); }

/* Kleiner Fließtext-Link braucht mehr Kontrast als #ff0000 auf Schwarz. */
p a, li a { color: var(--akzent-text); }
p a:hover, li a:hover { color: var(--link-hover); }

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

h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking);
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
}

button { font: inherit; color: inherit; }

.container { max-width: var(--container); margin-inline: auto; }

.nur-screenreader {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Sprungmarke. Nicht mit left: -9999px aus dem Bild schieben - das bläht in
   manchen Browsern die Scrollbreite auf. Wegschneiden ist sauberer. */
.skip-link {
  position: absolute; left: 0; top: 0; z-index: 100;
  width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  background: var(--akzent); color: #fff; padding: 12px 20px;
  font-family: var(--font-display); letter-spacing: var(--tracking);
  white-space: nowrap;
}
.skip-link:focus {
  width: auto; height: auto; overflow: visible; clip-path: none;
  color: #fff;
}

/* Bebas-Textlink mit vorangestelltem Chevron.
   Das › steht als ::before davor, damit es nicht im Linktext mitkopiert wird. */
.link-chevron {
  font-family: var(--font-display);
  font-size: var(--step-link);
  letter-spacing: var(--tracking);
  background: none; border: none; padding: 0;
  cursor: pointer; text-align: inherit;
  color: var(--akzent);
}
.link-chevron::before { content: '\203A\00a0'; }
.link-chevron[aria-expanded="true"]::before { content: '\2039\00a0'; }
.link-chevron:hover, .link-chevron:active { color: var(--link-hover); }

/* --------------------------------------------------------------- Header */

.header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--header-padding-y) var(--header-padding-x);
  background: none;
}

/* Am Seitenanfang deckend, damit der Kopf sauber abschließt. Sobald
   gescrollt wird, verschwindet die Fläche vollständig - keine Tönung, keine
   Weichzeichnung: Der Inhalt zieht ungefiltert darunter durch. Die
   Umschaltung setzt nav.js.

   Die Fläche liegt als eigene Ebene hinter dem Inhalt und wird über ihre
   Deckkraft aus- und eingeblendet. Direkt am Element ginge das nicht: Ein
   Verlauf ist ein Hintergrundbild, und von einem Bild auf „kein Bild" gibt
   es keinen Zwischenschritt - der Kopf spränge um, statt zu blenden.

   z-index: -1 hält die Ebene hinter Logo und Menü-Knopf. Sie bleibt dabei im
   Kopfbereich: Der ist sticky und bildet damit einen eigenen Stapel. */
.header::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top right, var(--bg-tief), var(--bg));
  transition: opacity 240ms ease;
}

.header.ist-gescrollt::before { opacity: 0; }

/* In Bereichen mit eigener Gestaltung bleibt der Kopfbereich auch beim
   Scrollen deckend: Dort läuft dichter gesetzter Inhalt darunter durch, der
   sonst hinter Logo und Menü-Knopf sichtbar bliebe. */
body.bereich-eigen .header.ist-gescrollt::before { opacity: 1; }
/* Zwei Fassungen des Logos übereinander: die volle Signatur und dieselbe
   Zeichenfläche mit nur dem Anfangsbuchstaben. Beide Dateien sind gleich
   groß, also deckt sich das A - beim Scrollen wird überblendet, es
   verschiebt sich nichts.

   Die kurze Fassung liegt absolut über der vollen. Die volle bleibt im Fluss
   und bestimmt damit weiterhin die Höhe des Kopfbereichs, auch wenn sie
   unsichtbar ist. */
.header__logo { position: relative; display: block; }
.header__logo img {
  height: var(--logo-h); width: auto; display: block;
  transition: opacity 240ms ease;
}
.header__logo-kurz { position: absolute; top: 0; left: 0; opacity: 0; }

.header.ist-gescrollt .header__logo-voll { opacity: 0; }
.header.ist-gescrollt .header__logo-kurz { opacity: 1; }

.burger {
  background: none; border: none; cursor: pointer;
  padding: var(--burger-p);
  display: flex; flex-direction: column; gap: 5px;
}
.burger span {
  width: var(--burger-b); height: 2px;
  background: var(--text-emphasis); display: block;
  transition: background 160ms ease;
}
.burger:hover span { background: var(--akzent); }

/* ------------------------------------------------------- Off-Canvas-Menü */

.nav-overlay {
  position: fixed; inset: 0; z-index: 29;
  background: rgba(0, 0, 0, .6);
  border: none; padding: 0; cursor: pointer;
}

.nav {
  position: fixed; top: 0; right: 0; bottom: 0; width: 280px; z-index: 30;
  /* Von links unten nach rechts oben ins Schwarz - gegenläufig zur Tafel
     selbst, die von rechts hereinfährt. */
  background: linear-gradient(to top right, var(--bg), var(--bg-tief));
  padding: calc(var(--header-h) + 16px) 32px 32px;
  display: flex; flex-direction: column; gap: 20px;
  overflow-y: auto;
}
.nav a {
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: var(--tracking);
}
.nav a[aria-current="page"] { color: var(--text-emphasis); }

/* Ein hervorgehobener Menüpunkt wird zur Schaltfläche - dieselben Werte wie
   .button, nur über die Breite der Tafel gezogen und mittig gesetzt. Die
   Schrift bleibt in jedem Zustand weiß, auch auf der eigenen Seite: Grau oder
   Hellgrau verschwände im Rot. */
.nav a.nav__cta {
  background: var(--akzent);
  color: #ffffff;
  text-align: center;
  padding: 12px 20px;
  border-radius: var(--radius);
  /* auto statt eines festen Abstands: Der freie Platz der Tafel sammelt sich
     oberhalb der Schaltfläche, sie sitzt damit am unteren Rand. Reicht der
     Platz nicht, verhält sie sich wie ein gewöhnlicher Punkt und die Tafel
     wird scrollbar. */
  margin-top: auto;
}
.nav a.nav__cta:hover,
.nav a.nav__cta:active,
.nav a.nav__cta[aria-current="page"] { background: #d40000; color: #ffffff; }

/* Der Schließen-Knopf liegt exakt über dem Menü-Knopf: gleiche Kastengröße,
   gleicher Abstand zum rechten Rand, senkrecht auf der Mitte des Kopfbereichs.
   Beide Mittelpunkte fallen damit zusammen - beim Öffnen und Schließen
   springt nichts. */
.nav__close {
  position: fixed;
  top: calc((var(--header-h) - var(--burger-kasten)) / 2);
  right: var(--header-padding-x);
  width: var(--burger-kasten); height: var(--burger-kasten);
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--text-emphasis); font-size: 1.75rem; line-height: 1;
}
.nav__close:hover { color: var(--akzent); }

/* Die Tafel fährt von rechts herein und beim Schließen dorthin zurück.

   Dafür bleibt sie im Dokument: display: none kennt keinen Zwischenschritt,
   ein so verborgenes Element ließe sich nicht bewegen. visibility nimmt sie
   stattdessen aus der Tastaturreihenfolge und aus dem, was Vorleseprogramme
   sehen - beim Schließen erst, wenn die Fahrt vorbei ist.

   Ohne JavaScript bleibt es beim schlichten Ausblenden: Dort steht die
   Navigation ohnehin als Zeile im Kopfbereich. */
.nav-overlay[hidden], .nav[hidden] { display: none; }

.js .nav[hidden]         { display: flex; }
.js .nav-overlay[hidden] { display: block; }

.js .nav {
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dauer-menue) var(--kurve-menue),
              visibility 0s linear var(--dauer-menue);
}
.js .nav:not([hidden]) {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--dauer-menue) var(--kurve-menue);
}

/* Die abgedunkelte Fläche dahinter blendet mit, statt zu springen. */
.js .nav-overlay {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dauer-menue) ease,
              visibility 0s linear var(--dauer-menue);
}
.js .nav-overlay:not([hidden]) {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dauer-menue) ease;
}

/* ----------------------------------------------------------------- Hero */

.hero {
  position: relative;
  display: flex; align-items: flex-end;
  padding: 0 40px 64px;
  overflow: hidden;

  /* Der Hero füllt das Fenster unterhalb des Kopfbereichs, damit Bild und
     Headline immer zusammen sichtbar sind, ohne zu scrollen.

     Nach oben gedeckelt bei 768px: Das Bild liegt quer (1536×800), die
     Spalte steht hochkant. Wird sie höher als etwa 400px, schneidet
     object-fit nur noch seitlich zu - die Person bleibt vollständig im
     Bild. Ab etwa 780px Höhe kippt das, und es würde oben und unten
     beschnitten. Nach unten begrenzt bei 420px, darunter wird die
     Headline gedrängt.

     svh statt vh: Auf Telefonen zählt vh die eingeblendete Browserleiste
     mit, der Hero ragte dort unter den Bildschirmrand. */
  min-height: 768px;
  min-height: clamp(420px, calc(100svh - var(--header-h)), 768px);
}
.hero__bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Linksbündig: Das Bild liegt quer (1536×800), der Hero ist etwas
     schmaler im Verhältnis. Beschnitten wird deshalb rechts - die
     abgebildete Person bleibt bei jeder Fensterbreite vollständig im Bild.
     Unterhalb von 1200px wird der Ausschnitt mittig, dort ist der Hero
     hochkant und würde sonst nur den leeren linken Bildrand zeigen. */
  object-position: left center;
  /* Ein Fünftel der Sättigung heraus: Das Foto tritt damit hinter die
     Headline zurück, ohne dass es abgedunkelt werden müsste. */
  filter: saturate(0.8);
}

/* Ein Verlauf von unten hält die Headline über dem Bild lesbar. */
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    rgb(15 15 15 / .94) 0%,
    rgb(15 15 15 / .55) 38%,
    rgb(15 15 15 / .15) 68%,
    rgb(15 15 15 / 0) 100%);
}

@media (max-width: 1200px) {
  .hero__bild { object-position: center; }
}

/* Die Headline sitzt auf derselben linken Kante wie der 720px-Textblock des
   Moduls darunter. Dieselbe Regel wie dort - zentrierter Block innerhalb des
   Seitenrands -, damit die Kante in jeder Breite übereinstimmt. */
.hero__text {
  position: relative; z-index: 2;
  width: 100%;
  /* Etwas breiter als die Lesebreite, und zwar nur hier.

     "Vom Kanal zum Ökosystem" braucht bei voller Schriftgröße 730px. Bei den
     720px der Lesebreite fehlten zehn - die Zeile brach nach "zum" um, mitten
     in der Wendung. Da --step-4 erst ab etwa 940px Fensterbreite seine 80px
     erreicht, trat das auch nur auf großen Bildschirmen auf; darunter passte
     es. Ein Umbruch, der von der Fenstergröße abhängt, ist keiner. */
  max-width: 780px;
  margin-inline: auto;
}

.hero__titel {
  font-size: var(--step-4);
  line-height: 1.05;
  margin: 0;
}

/* Die Positionierungszeile steht unter der Headline, in Fließtextschrift und
   deutlich kleiner: Sie erklärt, die Headline behauptet. Zwei gleich laute
   Stimmen nebeneinander wären eine zu viel. */
.hero__positionierung {
  margin: 1.25rem 0 0;
  /* Der Fließtext behält die Lesebreite, auch wenn die Überschrift darüber
     hinausgeht. 780px waeren hier eine Zeile zu lang zum Lesen. */
  max-width: var(--text-breite);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--text);
}

/* -------------------------------------------------------------- Module */

.modul { padding: 80px 40px; }
.modul--bg     { background: var(--bg); }
.modul--muted  { background: var(--bg-muted); }
/* Eine Stufe unter --bg. Das Buchmodul soll sich aus der Abfolge der
   Startseite herausheben, nicht in ihr mitlaufen. Der Verlauf läuft wie im
   Fuß von links oben nach rechts unten, hier vom Schwarz ins --bg. */
.modul--tief   { background: linear-gradient(to bottom right, var(--bg-tief), var(--bg)); }
.modul--lang   { padding-bottom: 100px; }

.modul__text { max-width: var(--text-breite); margin-inline: auto; }

.modul__label {
  font-family: var(--font-display);
  letter-spacing: var(--tracking);
  font-size: var(--step-2);
  color: var(--text-emphasis);
  margin-bottom: 1rem;
}

.fliesstext {
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--text);
  margin: 0;
}
.fliesstext + .fliesstext { margin-top: 1.5rem; }

.profil__mehr { display: block; margin-top: 20px; }

/* ------------------------------------------------------------ Perspektiven

   Eine Aussage mit sechs Belegen, kein eigenes Kapitel: Sie steht im selben
   Textblock wie „Das bin ich" und ist nur durch eine Linie abgesetzt. */

.perspektiven { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); }

.perspektiven__titel {
  font-family: var(--font-display);
  letter-spacing: var(--tracking);
  font-size: var(--step-1);
  color: var(--text-emphasis);
  margin: 0 0 0.75rem;
}

.perspektiven__text { font-size: var(--step-0); line-height: 1.7; color: var(--text); margin: 0 0 1.25rem; }

/* Eine echte Liste, nur ohne Aufzählungszeichen - die Reihenfolge trägt
   keine Bedeutung, die Zugehörigkeit schon. */
.perspektiven__liste {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 12px;
}
.perspektiven__liste li {
  font-family: var(--font-display);
  letter-spacing: var(--tracking);
  font-size: 1.05rem;
  color: var(--text-emphasis);
  padding: 7px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
}

/* -------------------------------------------------------------- Kennzahlen

   Zurückhaltend gesetzt: Die Zahlen sind Belege, keine Werbung. Deshalb
   Fließtextgröße statt großer Ziffern und keine Trennlinien dazwischen. */

.kennzahlen {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 32px;
}

.kennzahlen__eintrag { display: flex; flex-direction: column; gap: 2px; }

.kennzahlen__zahl {
  font-family: var(--font-display);
  letter-spacing: var(--tracking);
  font-size: var(--step-1);
  color: var(--akzent);
}

.kennzahlen__text { font-size: 0.95rem; line-height: 1.45; color: var(--text-subtle); }

@media (max-width: 860px) {
  .kennzahlen { grid-template-columns: 1fr; gap: 16px; }
}

/* Der aufklappbare Teil braucht denselben Abstand wie ein Absatzwechsel.
   Die Regel .fliesstext + .fliesstext greift hier nicht: Der erste Absatz im
   Block hat kein Absatz-Geschwister vor sich, weil der Block ihn umschließt. */
.profil__weitere { margin-top: 1.5rem; }
.profil__weitere[hidden] { display: none; }

/* Überschrift und der Link darunter, beide auf der Referenzkante des
   720px-Textblocks - und damit auf derselben Kante wie die Werkeinträge. */
.sektion-kopf {
  margin-bottom: 2rem;
  margin-left: var(--referenz-kante);
}
.sektion-kopf h2 { font-size: var(--step-2); }
.sektion-kopf .link-chevron { display: inline-block; margin-top: 0.5rem; }

/* --------------------------------------------- Verdichtete Achse (Start) */

/* Zweispaltiges Raster mit zwei Zeilen: das Typ-Label allein oben, Datum und
   Titel darunter in einer Zeile. Damit liegen Datum, Punkt und Titel auf einer
   waagerechten Linie.

   Alle Maße hängen an der Referenzkante: Der Einzug ist die Kante minus
   Datumsspalte minus Abstand, die Achse liegt mittig im Abstand. So beginnt
   die Titelspalte exakt auf der Kante - und damit unter der Überschrift. */
.achse-kompakt {
  --kompakt-datum:   130px;
  --kompakt-abstand:  40px;
  --kompakt-einzug:  calc(var(--referenz-kante) - var(--kompakt-datum) - var(--kompakt-abstand));
  --kompakt-achse:   calc(var(--referenz-kante) - var(--kompakt-abstand) / 2);

  position: relative;
  padding-left: var(--kompakt-einzug);
}

.achse-kompakt::before {
  content: ''; position: absolute;
  left: calc(var(--kompakt-achse) - 1px); top: 8px; bottom: 8px;
  width: 2px; background: var(--akzent);
}

.achse-kompakt__eintrag {
  display: grid;
  grid-template-columns: var(--kompakt-datum) 1fr;
  column-gap: var(--kompakt-abstand);
  align-items: baseline;
  padding: 24px 0;
}

.achse-kompakt__typ {
  grid-column: 2; grid-row: 1;
  font-size: var(--step--1);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 4px;
}

.achse-kompakt__datum {
  grid-column: 1; grid-row: 2;
  text-align: right;
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: var(--tracking);
  color: var(--text-subtle);
}

.achse-kompakt__titelzeile { grid-column: 2; grid-row: 2; position: relative; }

/* Der Punkt hängt am Titel und ist auf dessen Mitte zentriert. Sein Abstand
   nach links ist der halbe Spaltenabstand plus sein halber Durchmesser -
   damit sitzt er unabhängig vom Einzug immer genau auf der Achse. */
.achse-kompakt__punkt {
  position: absolute;
  left: calc(-1 * (var(--kompakt-abstand) / 2 + 5px));
  /* Auf der Mitte der ersten Titelzeile, nicht auf der Mitte des ganzen
     Titels: Bei zwei oder drei Zeilen rutschte der Punkt sonst nach unten
     weg. Die halbe Zeilenhöhe ist Schriftgrad mal Durchschuss geteilt durch
     zwei - beides steht am Titel, der Punkt rechnet mit denselben Werten. */
  top: calc(var(--step-2) * 1.1 / 2);
  transform: translateY(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--akzent);
}

.achse-kompakt__titel {
  font-family: var(--font-display);
  /* Derselbe Schriftgrad wie die Titel der großen Achse. Die verdichtete
     Fassung ist eine Verkürzung des Inhalts, keine des Gewichts. */
  font-size: var(--step-2);
  letter-spacing: var(--tracking);
  color: var(--text-emphasis);
  line-height: 1.1;
}
/* Zweifarbig wie in der großen Achse. Beim Überfahren wird der ganze Titel
   rot - auch der weiße Teil, sonst passierte beim Zeigen auf ihn nichts. */
.achse-kompakt__titel-rot   { color: var(--akzent); }
.achse-kompakt__titel-weiss { color: var(--text-emphasis); }

a.achse-kompakt__titel:hover,
a.achse-kompakt__titel:hover .achse-kompakt__titel-rot,
a.achse-kompakt__titel:hover .achse-kompakt__titel-weiss { color: var(--akzent); }

/* Der Verweis auf den vollständigen Katalog steht unter den Einträgen,
   auf derselben Kante wie Überschrift und Titel. */
.sektion-fuss {
  margin: 1.5rem 0 0;
  margin-left: var(--referenz-kante);
}

/* ------------------------------------------------------------ Buchteaser */

.buch {
  max-width: var(--container); margin-inline: auto;
  display: flex; gap: var(--spalten-abstand); align-items: center; flex-wrap: wrap;
}
.buch__cover { width: 220px; height: auto; border-radius: var(--radius); flex-shrink: 0; }
.buch__inhalt { flex: 1; min-width: 280px; }
.buch__label {
  font-family: var(--font-display);
  letter-spacing: var(--tracking);
  font-size: var(--step-1);
  /* Rot statt Grau: Der Werktitel ist hier die Marke, nicht eine Kleinzeile
     über der Überschrift. Der Typewriter endet auf inherit und übernimmt
     die Farbe von selbst. */
  color: var(--akzent);
  margin-bottom: 1rem;
}
.buch h2 { font-size: var(--step-2); margin-bottom: 1rem; }
.buch .fliesstext { margin-bottom: 1.5rem; }

/* ------------------------------------------------------------------ CTA */

.cta { text-align: center; padding-bottom: 120px; }
.cta h2 { font-size: var(--step-2); margin-bottom: 1.5rem; }

.button {
  display: inline-block;
  background: var(--akzent); color: #ffffff;
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: var(--tracking);
  padding: 16px 32px;
  border: none; border-radius: var(--radius);
  cursor: pointer;
}
.button:hover, .button:active { color: #ffffff; background: #d40000; }

/* Gleichrangige Zweitwahl: gleiche Größe, nur ohne Fläche. Wichtig bei der
   Einwilligung - „Nur Notwendiges" darf nicht schwerer zu finden sein als
   „Alle annehmen". */
.button--rand {
  background: none;
  border: 1px solid var(--border-strong);
  color: var(--text-emphasis);
}
.button--rand:hover, .button--rand:active {
  background: none;
  border-color: var(--text-emphasis);
  color: var(--text-emphasis);
}

/* --------------------------------------------------------------- Footer */

.footer {
  /* Von links oben nach rechts unten ins Schwarz auslaufend. Der Fuß schließt
     die Seite damit ab, statt als weitere Fläche in der Abfolge mitzulaufen.
     to bottom right statt eines festen Winkels: Die Richtung folgt dem
     Seitenverhältnis, der Verlauf trifft die Ecken in jeder Fensterbreite. */
  background: linear-gradient(to bottom right, var(--bg-muted), var(--bg-tief));
  padding: 40px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  color: var(--text-subtle);
  font-size: 0.9rem;
}
/* umbrechen, nicht überlaufen: Mit vier Einträgen passt die Zeile auf einem
   Telefon nicht mehr nebeneinander. Ohne Umbruch schob sie die Seite über den
   rechten Rand hinaus, und man konnte waagerecht scrollen. */
.footer nav { display: flex; flex-wrap: wrap; gap: 24px; }
.footer a { color: var(--text-subtle); }
.footer a:hover { color: var(--link-hover); }

/* ------------------------------------------------------------ Seitenkopf */

.seitenkopf { padding: 48px var(--seiten-padding) 0; }
.seitenkopf > div { max-width: var(--container); margin-inline: auto; }
/* Auf der Referenzkante - dieselbe Linie, auf der die Eintragstitel beginnen. */
.seitenkopf h1 { font-size: var(--step-3); margin-left: var(--inhalt-kante); }

/* Einleitung über der Werkachse. Sie sitzt auf derselben linken Kante wie die
   Eintragstitel und ist auf Textbreite begrenzt - eine Zeile über die ganze
   Seite liest sich schlecht. */
.werke-einleitung {
  padding: 24px var(--seiten-padding) 0;
  max-width: calc(var(--container) + 2 * var(--seiten-padding));
  margin-inline: auto;
}
.werke-einleitung__absatz {
  margin: 0 0 1.25rem var(--inhalt-kante);
  max-width: var(--text-breite);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--text);
}

/* Einleitung im Modul der Startseite - dort gibt es den Versatz nicht. */
.sektion-einleitung {
  margin: 1.25rem 0 0;
  max-width: var(--text-breite);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--text);
}

@media (max-width: 860px) {
  .werke-einleitung__absatz { margin-left: 0; }
}

/* ==========================================================================
   Werkachse - Signature-Element
   ========================================================================== */

/* overflow-x: clip, damit die randlosen Zeilenflächen unten nicht in eine
   waagerechte Bildlaufleiste münden. Anders als overflow: hidden erzeugt clip
   keinen Scrollcontainer - die klebenden Jahreszahlen richten sich weiterhin
   am Fenster aus und bleiben stehen. */
.werkachse { padding: 0 var(--seiten-padding) 8rem; overflow-x: clip; }

/* ----------------------------------------------------------- Filterleiste */

.filter {
  max-width: var(--container);
  margin: 0 auto 3rem;
  padding-left: var(--inhalt-kante);
}

.filter__kopf { display: flex; gap: 2.5rem; margin-bottom: 1rem; flex-wrap: wrap; }

.filter__taste {
  background: none; border: none;
  padding: 0 0 8px 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  letter-spacing: var(--tracking);
  color: rgba(255, 255, 255, .66);
  border-bottom: 3px solid transparent;
}
.filter__taste:hover { color: var(--akzent); }

/* Überschrift der Gruppe: immer weiß, rote Linie solange die Gruppe offen ist */
.filter__gruppe > .filter__taste { color: #ffffff; }
.filter__taste[aria-expanded="true"] { border-bottom-color: var(--akzent); }

/* Gewählte Option: weiß mit roter Linie */
.filter__taste[aria-current="true"] {
  color: #ffffff;
  border-bottom-color: var(--akzent);
}

.filter__optionen {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  margin-bottom: 0.5rem;
}
.filter__optionen[hidden] { display: none; }

.filter__anzahl {
  font-family: var(--font-text);
  font-size: var(--step--1);
  color: var(--text-subtle);
}

/* ------------------------------------------------------------------ Achse */

.achse { max-width: var(--container); margin-inline: auto; position: relative; }

/* Graue Grundlinie und rote Füllung liegen exakt mittig im Spaltenabstand. */
.achse::before {
  content: ''; position: absolute; z-index: 3;
  left: calc(var(--achse-x) - 1px); top: 0; bottom: 0;
  width: 2px; background: var(--border);
}
.achse__fortschritt {
  position: absolute; z-index: 3;
  left: calc(var(--achse-x) - 1px); top: 0;
  width: 2px; height: 0; background: var(--akzent);
  transition: height 100ms linear;
}

/* Die Jahreszahl bleibt beim Scrollen stehen und liegt auf der mittleren von
   drei Ebenen: über den farbigen Zeilenflächen, aber unter Text und Bildern.
   Der Inhalt schiebt sich also darüber hinweg, die Flächen verdecken sie
   nicht. Die Ebenen sind unten am Werkeintrag beschrieben. */
.achse__jahr {
  position: sticky; top: var(--header-h); z-index: 1;
  margin-left: calc(-1 * var(--eintrag-versatz));
  padding: 12px 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: var(--tracking);
  color: var(--text-emphasis);
}
.achse__gruppe[hidden] { display: none; }

/* ------------------------------------------------------------ Werkeintrag */

.werk {
  position: relative;
  display: flex; gap: var(--spalten-abstand);
  padding: var(--eintrag-padding) var(--eintrag-bleed);
  margin: 0 calc(-1 * var(--eintrag-bleed));
  cursor: pointer;
}
.werk[hidden] { display: none; }

/* Drei Ebenen innerhalb der Achse:

     0  die farbige Zeilenfläche
     1  die klebende Jahreszahl
     2  Text und Bilder der Einträge

   Die Fläche liegt deshalb auf einem Pseudoelement und nicht auf dem Eintrag
   selbst - läge beides auf demselben Element, gäbe es keine Ebene dazwischen,
   in die sich die Jahreszahl einfügen ließe.

   Zeilen wechseln die Fläche, keine Trennlinien. Die Klasse setzt das JS beim
   Filtern neu, damit der Wechsel auch nach dem Ausblenden lückenlos bleibt. */
.werk::before {
  content: ''; position: absolute; z-index: 0;
  top: 0; bottom: 0;
  /* Über beide Seitenränder hinaus bis an die Fensterkanten. Der Überstand
     wird vom overflow-x: clip des Abschnitts abgeschnitten. */
  left: -100vmax; right: -100vmax;
}
.werk--gerade::before   { background: var(--bg); }
.werk--ungerade::before { background: var(--bg-muted); }

.werk__meta, .werk__inhalt { position: relative; z-index: 2; }

/* Die Datumsspalte rückt aus dem Container heraus nach links, damit die
   Textspalte auf der Referenzkante beginnt. Die Zeilenfläche ist oben um
   denselben Betrag verbreitert, sodass die Spalte darin liegt. */
.werk__meta {
  width: var(--meta-spalte); flex-shrink: 0;
  margin-left: calc(-1 * var(--eintrag-versatz));
  display: flex; flex-direction: column; align-items: flex-end; gap: 16px;
  text-align: right;
}
.werk__datum {
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: var(--tracking);
  /* Weiß wie das Zeitfenster im Lebenslauf: Das Datum ist die zweite
     Ordnung der Achse, keine Metaangabe. Die Einordnung darunter
     (.werk__typ) bleibt zurückgenommen. */
  color: var(--text-emphasis);
}
.werk__typ {
  font-size: var(--step--1);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--text-subtle);
}
/* Die Einordnung steht im Textblock über dem Titel und nicht mehr in der
   rechtsbündigen Metaspalte - sie gehört zum Text, nicht zur Abbildung. */
.werk__inhalt .werk__typ { display: block; margin-bottom: 10px; }
.werk__bild {
  width: var(--meta-spalte); height: auto; display: block;
  border-radius: var(--radius);
  filter: grayscale(0.55);
  transition: filter 320ms ease;
}
.werk:hover .werk__bild { filter: grayscale(0); }

.werk__platzhalter {
  width: var(--meta-spalte); height: 140px;
  border-radius: var(--radius);
  background: repeating-linear-gradient(
    -45deg,
    var(--bg-muted) 0 10px,
    var(--bg-subtle) 10px 20px
  );
  display: flex; align-items: center; justify-content: center;
  font-family: monospace; font-size: 0.75rem;
  color: var(--text-subtle); text-align: center; padding: 8px;
}

.werk__inhalt { flex: 1; min-width: 0; position: relative; }

/* Punkt exakt auf der Linie: halber Spaltenabstand plus halber Punkt. */
.werk__punkt {
  position: absolute; top: 6px;
  left: calc(-1 * (var(--spalten-abstand) / 2 + var(--punkt) / 2));
  width: var(--punkt); height: var(--punkt);
  border-radius: 50%; background: var(--akzent);
}

.werk__titel {
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: var(--tracking);
  color: var(--text-emphasis);
  margin: 0 0 20px;
  line-height: 1.1;
}

.werk__text { font-size: var(--step-0); line-height: 1.7; color: var(--text); margin: 0; }
.werk__satz { display: block; margin-bottom: 6px; }
.werk__volltext[hidden] { display: none; }

.werk__mehr { display: block; padding: 20px 0; }

/* ==========================================================================
   Reveal-Animationen, seitenweit

   Dieselben zwei Bewegungen wie in der Werkachse, angewandt auf alle
   Überschriften und Fließtexte: Typewriter Zeichen für Zeichen, Fließtext
   satzweise. Die Werkachse hat weiter unten ihre eigenen Regeln, weil dort
   beim Filtern zusätzlich gestaffelt wird.
   ========================================================================== */

/* Der Endzustand ist die geerbte Farbe des Elements - so bekommt jede
   Überschrift ihre eigene Endfarbe, nicht eine fest gesetzte. */
.js .hat-typewriter .zeichen {
  color: var(--text-grau);
  transition: color var(--dauer-zeichen) linear var(--d, 0ms);
}
.js .hat-typewriter.ist-sichtbar .zeichen { color: inherit; }

/* Sätze bleiben im Textfluss und erscheinen nacheinander. */
.js .hat-saetze .satz {
  opacity: 0;
  transition: opacity var(--dauer-satz) ease var(--d, 0ms);
}
.js .hat-saetze.ist-sichtbar .satz { opacity: 1; }

/* ------------------------------------------------------------- Animation */

/* Ohne JavaScript ist alles sofort sichtbar - die Reveal-Zustände greifen
   erst, wenn das Skript die Klasse js gesetzt hat. */
.js .werk {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dauer-eintrag) var(--ease) var(--d, 0ms),
    transform var(--dauer-eintrag) var(--ease) var(--d, 0ms);
}
/* Endzustand bewusst transform: none und nicht translateY(0): Jeder andere
   Wert als none macht den Eintrag zu einem eigenen Stapelkontext, und dann
   läge die Jahreszahl wieder hinter der gesamten Zeile statt zwischen Fläche
   und Inhalt. */
.js .werk.ist-sichtbar { opacity: 1; transform: none; }

.js .werk__punkt {
  transform: scale(0);
  transition: transform var(--dauer-eintrag) var(--ease) var(--d, 0ms);
}
.js .werk.ist-sichtbar .werk__punkt { transform: scale(1); }

/* Titel: Buchstabe für Buchstabe von Grau nach Weiß. */
.js .werk__titel .zeichen {
  color: var(--text-grau);
  transition: color var(--dauer-zeichen) linear var(--d, 0ms);
}
/* Endfarbe geerbt, nicht fest gesetzt: Die Überschrift besteht aus einem
   roten und einem weißen Teil, jedes Zeichen übernimmt die Farbe seines. */
.js .werk.ist-sichtbar .werk__titel .zeichen { color: inherit; }

/* Fließtext: satzweise, streng sequenziell. */
.js .werk__satz {
  opacity: 0;
  transition: opacity var(--dauer-satz) ease var(--d, 0ms);
}
.js .werk.ist-sichtbar .werk__satz { opacity: 1; }

/* Der ausgeklappte Volltext läuft doppelt so schnell wie der Anriss - er ist
   ein Vielfaches länger, und man hat ihn bewusst angefordert. Der Versatz je
   Satz steht passend dazu in der Vorlage. */
.js .werk__volltext .werk__satz { transition-duration: calc(var(--dauer-satz) / 2); }

/* ---------------------------------------------------- prefers-reduced-motion
   Transformationen entfallen vollständig, nur kurze Opacity-Wechsel bleiben.
   Der Typewriter läuft dann nicht mehr durch: alle Zeichen sofort im
   Endzustand. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .js .werk {
    transform: none;
    transition: opacity 150ms linear;
  }

  .js .werk__punkt { transform: scale(1); transition: none; }

  .js .werk__titel .zeichen {
    color: var(--text-emphasis);
    transition: none;
  }

  .js .werk__satz { transition: opacity 150ms linear; }

  .js .hat-typewriter .zeichen { color: inherit; transition: none; }
  .js .hat-saetze .satz { opacity: 1; transition: none; }

  /* Das Menü erscheint und verschwindet, ohne zu fahren. */
  .js .nav, .js .nav:not([hidden]),
  .js .nav-overlay, .js .nav-overlay:not([hidden]) { transition: none; }

  .achse__fortschritt { transition: none; }
  .werk__bild { transition: none; }
}

/* ------------------------------------------------------------- Responsiv */

/* Unterhalb der Breite, ab der Meta-Spalte, Spaltenabstand und Textspalte
   nicht mehr nebeneinander passen, klappt der Eintrag einspaltig um und die
   Achse rückt an den linken Rand. */
@media (max-width: 860px) {
  :root {
    --eintrag-versatz: 0px;
    --inhalt-kante: 0px;
    /* 0 und nicht 20: Der Seitenrand steckt schon im Innenabstand von
       .werkachse, an dem die Achse ausgerichtet ist. Mit 20 lag die Linie um
       genau diesen Rand neben den Punkten. */
    --achse-x: 0px;
    --eintrag-bleed: 20px;
  }

  .seitenkopf h1 { margin-left: 0; }
  .filter { padding-left: 0; }
  .achse__jahr { margin-left: 0; }

  .werk {
    flex-direction: column;
    gap: 20px;
    padding-left: 56px;
    padding-right: 20px;
    margin: 0 -20px;
  }
  .werk__meta {
    width: 100%;
    margin-left: 0;
    align-items: flex-start;
    text-align: left;
    gap: 12px;
  }
  .werk__bild, .werk__platzhalter { width: 100%; max-width: 320px; }
  .werk__punkt { left: -42px; top: 8px; }
  /* Die Jahreszahl steht auf schmalen Schirmen als gewöhnliche Zwischen-
     überschrift und bleibt beim Scrollen nicht stehen. Hinter dem Inhalt
     hängend war sie dort mehr Unruhe als Orientierung: Die Einträge laufen
     über die volle Breite, es gibt keine leere Spalte, in der sie liegen
     könnte. */
  .achse__jahr { padding-left: 56px; position: static; }

  .filter__kopf { gap: 1.5rem; }

  .hero {
    min-height: 576px;
    min-height: clamp(360px, calc(100svh - var(--header-h)), 576px);
    padding: 0 20px 40px;
  }

  /* Die Bühne: Beim Laden steht nur die Überschrift im Hero, der Absatz
     wartet darunter außerhalb des Bildes. Beim Scrollen bleibt der Hero
     angeheftet, der Textblock wandert nach oben und schiebt den Absatz
     herein. Gesteuert wird das über zwei Variablen, die hero-buehne.js
     setzt - hier stehen nur die Ruhewerte.

     Die Klasse kommt aus dem Skript. Ohne JavaScript und bei
     'prefers-reduced-motion' fehlt sie, dann bleibt alles wie zuvor. */
  .hero-buehne.ist-buehne .hero {
    position: sticky;
    top: var(--header-h);
  }

  .hero-buehne.ist-buehne .hero__text {
    transform: translateY(var(--buehne-versatz, 0px));
    /* Der Browser darf die Ebene vorbereiten - sonst zeichnet er bei jedem
       Scrollschritt neu, und auf einem Telefon sieht man das. */
    will-change: transform;
  }

  /* Der Rueckfallwert ist 1, nicht 0. Das ist die sichere Richtung: Setzt
     das Skript die Klasse, kommt aber nicht zum Zeichnen, bleibt der Absatz
     sichtbar statt unsichtbar. Auf 0 setzt ihn ausschliesslich das Skript,
     und zwar erst, wenn es die Strecke kennt. */
  .hero-buehne.ist-buehne .hero__positionierung {
    opacity: var(--buehne-deckkraft, 1);
  }
  /* Das Bild steht hier in voller Stärke, wie auf großen Schirmen. Es war
     zusätzlich auf halbe Deckkraft gesetzt und nach oben ausgeblendet - auf
     einem ohnehin dunklen Foto blieb davon wenig übrig. Lesbar bleibt die
     Headline über den Verlauf von unten (.hero::after), der überall gilt. */
  .hero__bild { width: 100%; }

  .modul { padding: 56px 20px; }
  .sektion-kopf { margin-left: 0; }
  .sektion-fuss { margin-left: 32px; }
  .achse-kompakt { padding-left: 0; }
  .achse-kompakt::before { left: 4px; }
  .achse-kompakt__eintrag {
    grid-template-columns: 1fr;
    row-gap: 2px;
    padding-left: 32px;
  }
  .achse-kompakt__typ,
  .achse-kompakt__datum,
  .achse-kompakt__titelzeile { grid-column: 1; grid-row: auto; }
  .achse-kompakt__datum { text-align: left; }
  .achse-kompakt__punkt { left: -32px; }

  /* .header und .nav__close rechnen mit --header-padding-*; die Token stehen
     für diese Breite in tokens.css. */
  .footer { padding: 32px 20px; }
}

/* ==========================================================================
   Einwilligung für externe Inhalte

   Eine Tafel unten rechts, keine Sperre über der ganzen Seite: Es geht um
   einen einzelnen eingebetteten Kalender, nicht um Werbenetzwerke. Wer sie
   wegklickt, kann die Seite weiterlesen - nur der Kalender bleibt dann leer.

   Kein aria-modal und keine Fokusfalle, aus demselben Grund. Die Tafel steht
   am Ende des Dokuments und ist damit als letztes in der Tabreihenfolge.
   ========================================================================== */

.consent {
  position: fixed;
  right: var(--seiten-padding); bottom: var(--seiten-padding);
  left: var(--seiten-padding);
  z-index: 40;
  display: flex; justify-content: flex-end;
  pointer-events: none;
}
.consent[hidden] { display: none; }

.consent__tafel {
  pointer-events: auto;
  width: min(440px, 100%);
  max-height: calc(100svh - 2 * var(--seiten-padding));
  overflow-y: auto;
  padding: 28px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* Ein Schatten, damit die Tafel vor dem Inhalt steht und nicht darin. */
  box-shadow: 0 24px 48px rgb(0 0 0 / .55);
}

.consent__titel {
  font-family: var(--font-display);
  letter-spacing: var(--tracking);
  font-size: var(--step-1);
  color: var(--text-emphasis);
  margin: 0 0 0.75rem;
}

.consent__text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
}

.consent__dienste { margin-top: 1.5rem; }
.consent__dienste[hidden] { display: none; }

.consent__dienst { padding: 16px 0; border-top: 1px solid var(--border); }

.consent__schalter {
  display: flex; align-items: center; gap: 10px;
  justify-content: space-between;
  cursor: pointer;
}
.consent__dienst--fest .consent__schalter { cursor: default; }

/* Die Beschriftung steht vorn, der Schalter hinten - deshalb die Umkehr.
   So stehen alle Schalter untereinander auf einer Kante. */
.consent__schalter input { order: 2; accent-color: var(--akzent); width: 18px; height: 18px; }

.consent__marke {
  order: 1; flex: 1;
  font-family: var(--font-display);
  letter-spacing: var(--tracking);
  font-size: 1.05rem;
  color: var(--text-emphasis);
}

.consent__immer {
  order: 2;
  font-size: 0.8rem;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--text-subtle);
}

.consent__zweck, .consent__anbieter {
  font-size: 0.85rem; line-height: 1.55;
  color: var(--text-subtle);
  margin: 0.5rem 0 0;
}
.consent__anbieter { font-size: 0.8rem; }

/* Die beiden Antworten nebeneinander und mittig, darunter mittig die
   Einstellungen: eine Achse statt drei Kanten. Der Umbruch ist erzwungen,
   damit die Einstellungen auch dann darunter stehen, wenn der Platz reichen
   würde - sie sind der dritte Weg, nicht die dritte Antwort. */
.consent__aktionen {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 12px;
  margin-top: 1.5rem;
}
/* Dieselbe Größe wie der Einstellungen-Link daneben: Die drei Wege stehen
   gleichrangig nebeneinander, keiner ist optisch der Hauptweg. */
.consent__aktionen .button { font-size: var(--step-link); padding: 14px 26px; }

.consent__mehr { flex-basis: 100%; text-align: center; margin-top: 4px; }
/* Aufgeklappt heißt der Knopf „Auswahl speichern" - ein Chevron nach links
   wäre dort irreführend, es geht nicht zurück. */
.consent__mehr[aria-expanded="true"]::before { content: none; }

/* Maße und Farben des Fußbereichs, damit die Rechtstexte überall gleich
   aussehen. Ändert sich der Fuß, ist auch das hier nachzuziehen. */
.consent__rechtliches {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 24px;
  margin: 1.25rem 0 0;
  font-size: 0.9rem;
}
.consent__rechtliches a { color: var(--text-subtle); }
.consent__rechtliches a:hover, .consent__rechtliches a:active { color: var(--link-hover); }

@media (max-width: 860px) {
  .consent { right: 12px; left: 12px; bottom: 12px; }
  .consent__tafel { width: 100%; padding: 22px; }
  .consent__aktionen .button { flex: 1; text-align: center; }
}

/* ==========================================================================
   Zustände, die erst mit JavaScript gelten
   Die Klasse js setzt ein Inline-Skript im <head>, also vor dem ersten Paint -
   es gibt kein Aufblitzen des Ausgangszustands.
   ========================================================================== */

/* Ohne JavaScript steht die Navigation als Zeile im Header. */
html:not(.js) .burger,
html:not(.js) .nav-overlay,
html:not(.js) .nav__close { display: none; }

html:not(.js) .nav {
  /* Überstimmt das hidden im Markup - das steht dort, damit die Tafel mit
     JavaScript nicht bis zum Laden von nav.js sichtbar bleibt. */
  display: flex;
  position: static; width: auto; z-index: auto;
  background: none; padding: 0; overflow: visible;
  flex-direction: row; flex-wrap: wrap; gap: 20px;
}
html:not(.js) .nav a { font-size: 1.125rem; }

/* Ohne JavaScript sind alle Filteroptionen offen und als Links bedienbar. */
.js .filter__optionen { display: none; }
.js .filter__optionen.ist-offen { display: flex; }

/* Ohne JavaScript ist der Volltext ausgeklappt und der Umschalter verborgen. */
html:not(.js) .werk__mehr { display: none; }

/* Kurzzeitiger Rücksprung, damit ein neu eingeblendeter Textblock die
   satzweise Animation erneut durchläuft. */
.js .werk__satz--verborgen {
  opacity: 0 !important;
  transition: none !important;
}

/* ==========================================================================
   Artikel-Detailseite
   Vorläufig - für diese Seite liegt noch kein abgestimmtes Design vor.
   ========================================================================== */

.artikel {
  max-width: var(--text-breite);
  margin: 0 auto;
  padding: 64px var(--seiten-padding) 120px;
}

.artikel__kopf { margin-bottom: 2.5rem; }

.artikel__meta {
  display: flex; flex-wrap: wrap; gap: 16px;
  font-size: var(--step--1);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--text-subtle);
  margin: 0 0 1rem;
}

.artikel h1 { font-size: var(--step-3); }

.artikel__quelle {
  font-size: var(--step--1);
  color: var(--text-subtle);
  margin: 1rem 0 0;
}

.artikel__bild {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius);
  margin-bottom: 2.5rem;
}

.artikel__koerper .fliesstext + .fliesstext { margin-top: 1.5rem; }

.artikel__aussenlink { margin: 2.5rem 0 0; }

.artikel__verwandt { margin-top: 4rem; border-top: 1px solid var(--border); padding-top: 2.5rem; }
.artikel__verwandt h2 { font-size: var(--step-2); margin-bottom: 1.5rem; }
.artikel__verwandt .achse-kompakt { padding-left: 0; }
.artikel__verwandt .achse-kompakt::before { left: 4px; }
.artikel__verwandt .achse-kompakt__eintrag { flex-direction: column; gap: 4px; padding-left: 32px; }
.artikel__verwandt .achse-kompakt__punkt { left: 0; top: 30px; }
.artikel__verwandt .achse-kompakt__datum { width: auto; text-align: left; }

/* ------------------------------------------------------------------ Teilen

   Eine Zeile, keine Leiste: Die Funktion ist ein Angebot am Ende des Textes
   und nicht der Grund, warum jemand hier ist. Deshalb Fließtextgröße und
   dieselbe Zurückhaltung wie beim Fußbereich. */

.teilen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin-top: 3rem; padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
}

.teilen__label {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--text-subtle);
}

.teilen__knopf {
  background: none; border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 6px 16px;
  font: inherit; color: var(--text-emphasis);
  cursor: pointer; text-decoration: none;
}
.teilen__knopf:hover, .teilen__knopf:active {
  border-color: var(--text-emphasis);
  color: var(--text-emphasis);
}
.teilen__knopf[hidden] { display: none; }

.teilen__meldung { color: var(--text-subtle); }

.artikel__zurueck { margin-top: 3rem; }

/* ==========================================================================
   Importierte Inhalte (Markdown)

   Der gesamte Buchbereich, Curriculum Vitae, Media und die Rechtstexte
   kommen aus dem Import und werden aus Markdown erzeugt. Diese Regeln
   gelten für alles, was dabei entsteht.
   ========================================================================== */

.inhalt { font-size: var(--step-0); line-height: 1.7; color: var(--text); }

.inhalt > * + * { margin-top: 1.5rem; }

.inhalt h2, .inhalt h3, .inhalt h4, .inhalt h5, .inhalt h6 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking);
  color: var(--text-emphasis);
  font-weight: 400;
  line-height: 1.15;
}
.inhalt h2 { font-size: var(--step-2); margin-top: 3rem; }
.inhalt h3 { font-size: var(--step-1); margin-top: 2.5rem; }
.inhalt h4, .inhalt h5, .inhalt h6 {
  font-size: 1.125rem;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-top: 2rem;
}

.inhalt p { margin: 0; }
.inhalt strong { color: var(--text-emphasis); font-weight: 600; }

/* Hervorhebung aus ==Text==. Browser setzen <mark> von sich aus auf gelben
   Grund mit schwarzer Schrift - das wird hier vollständig ersetzt: rote
   Schrift, keine Fläche. Die Bedeutung des Elements bleibt dieselbe, nur
   sein Aussehen folgt der Seite. */
mark { background: none; color: var(--akzent); }

.inhalt ul, .inhalt ol { padding-left: 1.25rem; margin-block: 0; }
.inhalt li + li { margin-top: 0.5rem; }
.inhalt li::marker { color: var(--akzent); }

.inhalt hr {
  border: none; border-top: 1px solid var(--border);
  margin-block: 2.5rem;
}

.inhalt blockquote {
  border-left: 2px solid var(--akzent);
  padding-left: 1.25rem;
  margin-inline: 0;
  color: var(--text-subtle);
}

.inhalt img {
  max-width: 100%; height: auto; display: block;
  border-radius: var(--radius);
}

/* Tabellen sind im Buchbereich oft breiter als die Lesespalte. Sie dürfen
   deshalb aus ihr herausragen und bekommen bei Bedarf eine eigene
   waagerechte Bildlaufleiste - die Seite selbst scrollt nie seitwärts. */
.tabelle-rolle {
  overflow-x: auto;
  margin-inline: calc(-1 * var(--seiten-padding));
  padding-inline: var(--seiten-padding);
}
.inhalt table {
  border-collapse: collapse;
  width: 100%;
  min-width: 620px;
  font-size: 0.95rem;
}
.inhalt th, .inhalt td {
  text-align: left; vertical-align: top;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.inhalt th {
  font-family: var(--font-display);
  letter-spacing: var(--tracking);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--text-emphasis);
  border-bottom-color: var(--border-strong);
  white-space: nowrap;
}
.inhalt tbody tr:hover td { background: var(--bg-muted); }

/* ==========================================================================
   Sektionsleiste

   Der Buchbereich hat 30 Unterseiten und braucht eine eigene Ebene. Sie
   sitzt unter dem Kopfbereich, klebt mit ihm zusammen und ist bewusst
   ruhiger gehalten als die Hauptnavigation - sie ordnet, sie wirbt nicht.
   ========================================================================== */

.sektionsnav {
  position: sticky; top: var(--header-h); z-index: 19;
  background: var(--bg);
  /* Keine Trennlinie: Sie las sich wie ein Farbwechsel, obwohl Leiste und
     Seite dieselbe Fläche haben. Die rote Markierung des aktiven Punktes
     genügt als Abgrenzung. */
}
/* Die Leiste beginnt auf derselben senkrechten Linie wie der Inhalt des
   Bereichs, den sie ordnet. Der Buchbereich bringt seine eigene Inhaltsbreite
   mit (.pr-wrap: 1100px, 20px Innenabstand) - dieselben Werte stehen deshalb
   hier. Beide Kanten wandern damit gemeinsam, wenn das Fenster schmaler wird. */
.sektionsnav__innen {
  --sektion-breite:  1100px;
  --sektion-padding:   20px;

  max-width: var(--sektion-breite);
  margin-inline: auto;
  padding: 0 var(--sektion-padding);
  display: flex; gap: 1.75rem; flex-wrap: wrap;
}
.sektionsnav a {
  font-family: var(--font-display);
  letter-spacing: var(--tracking);
  font-size: 1.125rem;
  color: var(--text-subtle);
  padding: 9px 0;
  border-bottom: 2px solid transparent;
}
.sektionsnav a:hover { color: var(--link-hover); }
.sektionsnav a[aria-current="page"] {
  color: var(--text-emphasis);
  border-bottom-color: var(--akzent);
}

/* Die feinere zweite Leiste des Leserbereichs. */
.sektionsnav--fein {
  top: calc(var(--header-h) + 41px);
  background: var(--bg-muted);
  z-index: 18;
}
.sektionsnav--fein a {
  font-family: var(--font-text);
  font-size: 0.9rem;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  padding: 10px 0;
}

.sektionsnav + main .seitenkopf { padding-top: 40px; }

/* ==========================================================================
   Seiten mit übernommener Gestaltung

   Der Buchbereich bringt sein eigenes Stylesheet mit. Hier steht nur, was
   ihn in die neue Seite einbettet - Luft nach oben und unten, damit der
   Inhalt nicht unmittelbar unter der Sektionsleiste klebt.
   ========================================================================== */

.pr-seite {
  padding-top: 56px;
  padding-bottom: 96px;
}

@media (max-width: 860px) {
  .pr-seite { padding-top: 32px; padding-bottom: 64px; }
}

@media (max-width: 860px) {
  /* Der Buchbereich zieht seinen Innenabstand hier ebenfalls zusammen. */
  .sektionsnav__innen { gap: 1rem; --sektion-padding: 14px; }
  .sektionsnav a { font-size: 1rem; padding: 10px 0; }
  .sektionsnav--fein { top: auto; position: static; }
}

/* ==========================================================================
   Werkeintrag: zweifarbige Überschrift, Linkreihe, Ebene
   ========================================================================== */

/* Die Überschrift besteht aus zwei getrennt gepflegten Teilen. Der
   Typewriter erbt die Farbe vom jeweiligen Teil - deshalb steht sie hier
   auf den Spannen und nicht auf der Überschrift selbst. */
.werk__titel-rot   { color: var(--akzent); }
.werk__titel-weiss { color: var(--text-emphasis); }

/* Interner und äußerer Verweis stehen nebeneinander. */
.werk__links {
  display: flex; gap: 2rem; flex-wrap: wrap; align-items: baseline;
  margin: 20px 0 0;
}
.werk__mehr { display: inline-block; padding: 0; }

/* Pfeil nach unten statt nach rechts - er verweist auf etwas, das sich
   darunter öffnet, nicht auf etwas daneben. */
.link-chevron--unten::before { content: '\2193\00a0'; }
.link-chevron--unten[aria-expanded="true"]::before { content: '\2191\00a0'; }

.werk__layerinhalt[hidden] { display: none; }

/* ------------------------------------------------------------------ Ebene

   Sechs Beiträge sind vollständige Artikel von bis zu 4800 Zeichen. In der
   Achse aufgeklappt sprengen sie die Zeitleiste, deshalb öffnen sie sich
   über der Seite. */

.layer {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--seiten-padding);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.layer[hidden] { display: none; }

.layer__hintergrund {
  position: fixed; inset: 0;
  background: rgb(0 0 0 / .78);
  border: none; padding: 0; cursor: pointer;
}

.layer__kasten {
  position: relative;
  width: 100%; max-width: var(--text-breite);
  margin: clamp(2rem, 8vh, 6rem) 0;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 3rem);
}

.layer__schliessen {
  position: absolute; top: 12px; right: 12px;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--text-emphasis); font-size: 1.75rem; line-height: 1;
}
.layer__schliessen:hover { color: var(--akzent); }

.layer__meta {
  font-size: var(--step--1);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--text-subtle);
  margin: 0 0 0.75rem;
}
.layer__titel {
  font-family: var(--font-display);
  letter-spacing: var(--tracking);
  font-size: var(--step-2);
  color: var(--text-emphasis);
  margin: 0 0 1.5rem;
  padding-right: 2.5rem;
}
.layer .fliesstext + .fliesstext { margin-top: 1.5rem; }

/* Im Layer erscheint der Text sofort - die satzweise Animation der Achse
   wäre hier ein Hindernis beim Lesen. */
.layer .satz { opacity: 1 !important; transition: none !important; }

/* ==========================================================================
   Curriculum Vitae

   Dieselbe Anordnung wie die Werkachse: durchgehende rote Linie, links das
   Zeitfenster, rechts die Station. Die Maße kommen aus denselben Tokens,
   damit beide Seiten auf derselben Kante sitzen.
   ========================================================================== */

.vita__abschnitt {
  font-family: var(--font-display);
  letter-spacing: var(--tracking);
  font-size: var(--step-2);
  color: var(--text-emphasis);
  margin: 0 0 2rem var(--inhalt-kante);
}

.vita__achse { position: relative; }

/* Die Linie läuft durch, wie in der Werkachse - mittig im Spaltenabstand. */
.vita__achse::before {
  content: ''; position: absolute;
  left: calc(var(--achse-x) - 1px); top: 10px; bottom: 10px;
  width: 2px; background: var(--akzent);
}

.vita__eintrag {
  display: flex; gap: var(--spalten-abstand);
  /* Auf der Grundlinie ausgerichtet: Zeitraum und Titel stehen damit auf
     einer Höhe, unabhängig davon, wie viele Zeilen die Station braucht. */
  align-items: baseline;
  padding: 22px 0;
}

.vita__zeit {
  width: var(--meta-spalte); flex-shrink: 0;
  margin-left: calc(-1 * var(--eintrag-versatz));
  text-align: right;
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: var(--tracking);
  color: var(--text-emphasis);
}

.vita__inhalt { flex: 1; min-width: 0; position: relative; }

.vita__punkt {
  position: absolute; top: 0.55em;
  left: calc(-1 * (var(--spalten-abstand) / 2 + var(--punkt) / 2));
  width: var(--punkt); height: var(--punkt);
  border-radius: 50%; background: var(--akzent);
}

/* Position und Organisation liegen zwischen Stufe 1 und Stufe 2 der Skala:
   deutlich größer als der bisherige Ansatz, aber unter den Abschnitts-
   überschriften - sonst verlöre die Seite ihre Gliederung. */
.vita__titel {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 1.85rem);
  letter-spacing: var(--tracking);
  color: var(--text-emphasis);
  margin: 0;
  line-height: 1.15;
}

.vita__organisation {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: var(--tracking);
  color: var(--akzent);
}
.vita__organisation a { color: var(--akzent); }
.vita__organisation a:hover { color: var(--link-hover); }

/* Die Unterzeile bleibt gemischt gesetzt - Versalien sind hier der
   Auszeichnung vorbehalten, nicht dem Fließtext. */
.vita__text, .vita__liste {
  margin: 8px 0 0;
  font-size: 1.05rem;
  color: var(--text-subtle);
  line-height: 1.6;
}
.vita__liste { padding-left: 1.1rem; }
.vita__liste li::marker { color: var(--akzent); }

@media (max-width: 860px) {
  .vita__abschnitt { margin-left: 0; }
  .vita__achse::before { left: 4px; }
  .vita__eintrag { flex-direction: column; gap: 4px; padding-left: 32px; }
  .vita__zeit { width: auto; margin-left: 0; text-align: left; }
  .vita__punkt { left: -32px; top: 8px; }
}

/* ==========================================================================
   Terminseite

   Eine Seite, drei Auslöser - keine drei Unterseiten. Der Kalender lädt
   erst nach der Auswahl.
   ========================================================================== */

.termin__einleitung {
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 1.25rem var(--inhalt-kante);
  max-width: var(--text-breite);
}
.termin__einleitung:last-of-type { margin-bottom: 2.5rem; }

.termin__wahl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-left: var(--inhalt-kante);
}

.termin__karte {
  display: flex; flex-direction: column; gap: 6px;
  /* Ohne Untertitel steht nur die Dauer in der Kachel - mit dem alten
     Innenabstand wirkte sie dadurch gedrungen. */
  padding: 40px 26px 38px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  border-bottom: 3px solid transparent;
}
.termin__karte:hover,
.termin__karte.ist-gewaehlt {
  color: var(--text);
  border-bottom-color: var(--akzent);
}

.termin__minuten {
  font-family: var(--font-display);
  letter-spacing: var(--tracking);
  font-size: clamp(2.6rem, 2rem + 2.4vw, 3.6rem);
  line-height: 1;
  color: var(--akzent);
  /* Zahl und Einheit bleiben zusammen auf einer Zeile. Der Platz reicht in
     jeder Breite; die Regel verhindert nur einen Umbruch, falls die Kachel
     später einmal schmaler wird. */
  white-space: nowrap;
}
/* Zahl rot, Einheit weiß - dieselbe Zweifarbigkeit wie bei den Überschriften
   der Werkeinträge. */
.termin__einheit { font-size: 0.42em; color: var(--text-emphasis); }

.termin__titel {
  font-family: var(--font-display);
  letter-spacing: var(--tracking);
  font-size: var(--step-1);
  color: var(--akzent);
}
.termin__beschreibung { font-size: 0.95rem; color: var(--text-subtle); }

.termin__hinweis {
  margin: 1.5rem 0 0 var(--inhalt-kante);
  max-width: var(--text-breite);
  font-size: 0.9rem;
  color: var(--text-subtle);
}

/* Der Abschnitt schneidet ab, was die Kalenderfläche über die Seitenränder
   hinausschiebt. clip und nicht hidden - hidden macht aus dem Abschnitt einen
   Scrollcontainer und nähme darin liegenden Elementen ihre Haftung. */
.termin-modul { overflow-x: clip; }

.termin__kalender {
  position: relative;
  margin: 3rem 0 0 var(--inhalt-kante);
  /* Luft nach oben und unten, damit die Fläche nicht unmittelbar an der
     Kante des Kalenders endet. */
  padding: 32px 0;
}
.termin__kalender[hidden] { display: none; }

/* Die Fläche neben dem Kalender.

   cal.com bringt im dunklen Modus seine eigene, minimal hellere Fläche mit.
   Ohne diesen Streifen zeichnete sich das eingebettete Rechteck gegen den
   Seitenhintergrund ab - sichtbar genau dort, wo es keine Kante geben soll.
   Der Streifen läuft wie die Zeilenflächen der Werkachse bis an die
   Fensterkanten; der Überstand wird vom Abschnitt abgeschnitten. */
.termin__kalender::before {
  content: ''; position: absolute; z-index: 0;
  top: 0; bottom: 0;
  left: -100vmax; right: -100vmax;
  background: var(--kalender-bg);
}

.termin__kalenderkopf, .termin__rahmen { position: relative; z-index: 1; }

.termin__kalenderkopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.termin__kalendertitel {
  font-family: var(--font-display);
  letter-spacing: var(--tracking);
  font-size: var(--step-1);
  color: var(--text-emphasis);
}

/* Keine feste Höhe in Pixeln: Der Kalender ist auf kleinen Geräten deutlich
   höher als auf großen. Mit einer festen Höhe müsste man innerhalb des
   Rahmens scrollen - also zweimal. */
.termin__rahmen {
  width: 100%;
  min-height: min(880px, 90svh);
  /* Ohne Rahmen und ohne Fläche: Der Kalender bringt seine eigene dunkle
     Gestaltung mit (theme=dark), eine Kante darum setzte ihn als Fremdkörper
     ab. Die 0 ist nötig, weil Browser dem iframe von sich aus einen Rand
     geben. */
  border: 0;
  background: none;
  display: block;
}

@media (max-width: 860px) {
  .termin__einleitung, .termin__wahl, .termin__hinweis, .termin__kalender { margin-left: 0; }
}

/* ==========================================================================
   Expertise

   Fünf gleichwertige Kompetenzfelder auf der Seite Stationen & Projekte.
   Vollständig auf vorhandenen Bausteinen aufgebaut: Der Eyebrow nutzt die
   Werte von .werk__typ, die Kachel die Anmutung von .termin__karte, die
   Schaltfläche ist .button. Keine neue Bildsprache, keine Icons - die
   Website verwendet an keiner Stelle welche.

   Alle Regeln hängen an .expertise; nichts Bestehendes wird verändert.
   ========================================================================== */

.expertise__kopf {
  margin-left: var(--inhalt-kante);
  max-width: var(--text-breite);
  margin-bottom: 3.5rem;
}

/* Dieselben Werte wie die Typ-Angabe der Werkachse. */
.expertise__eyebrow {
  font-size: var(--step--1);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--text-subtle);
  margin: 0 0 0.75rem;
}

.expertise__ueberschrift {
  font-family: var(--font-display);
  letter-spacing: var(--tracking);
  font-size: var(--step-2);
  color: var(--text-emphasis);
  line-height: 1.12;
  margin: 0 0 1.5rem;
}

.expertise__intro {
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--text);
  margin: 0;
}
.expertise__intro + .expertise__intro { margin-top: 1.25rem; }

/* --------------------------------------------------------------- Kacheln

   Sechs Kacheln gehen glatt in drei Spalten auf - die Einrückung der zweiten
   Reihe, die es bei fünf Kacheln brauchte, entfällt damit.

   Kein Zustand beim Überfahren: Die Kacheln sind nicht anklickbar. Eine
   Hervorhebung würde eine Bedienbarkeit versprechen, die es nicht gibt. */
.expertise__kacheln {
  list-style: none;
  margin: 0 0 0 var(--inhalt-kante);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.expertise__kachel {
  display: flex; flex-direction: column; gap: 10px;
  padding: 30px 28px;
  /* Die Kachel nimmt die jeweils andere Fläche als ihre Sektion, sonst wäre
     sie nicht von ihr zu unterscheiden. Die Sektion steht auf --bg, also ist
     die Kachel --bg-muted - wie die Karten der Terminseite. */
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.expertise__kacheltitel {
  font-family: var(--font-display);
  letter-spacing: var(--tracking);
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.6rem);
  line-height: 1.15;
  /* Rot: Sechs Kacheln gleicher Bauart lassen sich schwer überfliegen, wenn
     Titel und Text dieselbe Farbe tragen. Der Akzent trennt die Ebenen, ohne
     eine weitere Linie oder Fläche einzuführen. */
  color: var(--akzent);
  margin: 0;
}

.expertise__kacheltext {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text);
  margin: 0;
}

/* -------------------------------------------------------------- Resümee

   Die Blöcke standen früher als ein Markdown-Text mit ####-Zwischen-
   überschriften im .inhalt. Sie sehen deshalb weiterhin genauso aus wie
   .inhalt h4 - nur die Abstände liegen jetzt am Block statt an der
   Überschrift, weil jeder Block sein eigenes .inhalt mitbringt und die
   Regel .inhalt > * + * über Blockgrenzen hinweg nicht greift. */

.resuemee__block + .resuemee__block { margin-top: 2.5rem; }

/* Wie die Anlässe darunter gesetzt: Diese Zeilen waren einmal ####-Über-
   schriften in einem Fließtext und trugen dessen Kleinschrift - grau, gesperrt,
   1,125rem. Inzwischen sind es eigene fachliche Positionen und keine
   Zwischenmarken; sie stehen jetzt in Überschriftengröße und Weiß.

   Kein text-transform mehr: Bebas hat nur Versalien, die Angabe war ohne
   Wirkung und verstellte den Blick darauf, dass hier gesperrt wurde. */
.resuemee__titel {
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: var(--tracking);
  color: var(--akzent);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 1rem;
}

/* ------------------------------------------------------- Sparringspartner

   Eigenes Modul unterhalb der Kacheln, keine angehängte Zone derselben
   Sektion: Die Kacheln beschreiben Felder, dieser Block ist ein Angebot.
   Angehängt las er sich wie eine siebte Kachel. */

.sparring__text {
  margin-left: var(--inhalt-kante);
  max-width: var(--text-breite);
}

.sparring__titel {
  font-family: var(--font-display);
  letter-spacing: var(--tracking);
  font-size: var(--step-2);
  color: var(--text-emphasis);
  line-height: 1.12;
  margin: 0 0 1.25rem;
}

.sparring__absatz {
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--text);
  margin: 0;
}

/* Die Anlässe: Begriff und Erläuterung, zwei Spalten auf breiten Schirmen.
   Bewusst ohne Rahmen und Fläche - die Kacheln darüber tragen schon ein
   Raster, ein zweites daneben ließe die Seite in Kästen zerfallen. */
.sparring__anlaesse {
  margin: 2.5rem 0 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 40px;
}

.sparring__anlass { border-top: 1px solid var(--border); padding-top: 14px; }

.sparring__anlass dt {
  font-family: var(--font-display);
  letter-spacing: var(--tracking);
  font-size: var(--step-1);
  color: var(--akzent);
  margin-bottom: 10px;
}

/* Fließtextgröße statt Kleingedrucktem: Die Anlässe sind der Grund, warum
   jemand hier weiterliest - sie in Fußnotengröße zu setzen widerspricht dem. */
.sparring__anlass dd {
  margin: 0;
  font-size: var(--step-0); line-height: 1.65;
  color: var(--text);
}

.sparring__cta { margin: 2.5rem 0 0; }

@media (max-width: 860px) {
  .sparring__anlaesse { grid-template-columns: 1fr; gap: 18px; }
}

/* ------------------------------------------------------------- Responsiv
   Die Umbruchpunkte sind die der übrigen Seite: 1200 und 860. */

@media (max-width: 1200px) {
  .expertise__kacheln { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .expertise__kopf,
  .expertise__kacheln { margin-left: 0; }

  .sparring__text { margin-left: 0; }

  .expertise__kacheln { grid-template-columns: 1fr; gap: 16px; }
  .expertise__kachel { padding: 26px 22px; }
  /* Nicht kleiner setzen als der übrige Fließtext der Seite. */
  .expertise__kacheltext { font-size: 1.05rem; }
}

/* ==========================================================================
   Logoband - wo Beiträge erschienen sind

   Eine endlose Fahrt von links nach rechts. Die Liste steht zweimal im
   Markup und wird um genau eine Listenbreite verschoben; am Ende des
   Durchlaufs steht die Kopie exakt dort, wo das Original begann, und der
   Sprung zurück ist unsichtbar.
   ========================================================================== */

.logoband {
  background: #000;
  /* Luft nach oben und unten, damit das Band zwischen den beiden Absätzen
     als eigener Abschnitt liest und nicht als Trennlinie im Text. */
  margin: 40px 0;
  padding: 56px 0;
  overflow: hidden;
}

/* Der Absatz nach dem Band braucht oben keinen zusätzlichen Abstand - den
   bringt das Band schon mit. */
.werke-einleitung--nach-band { padding-top: 0; }

/* Die Ränder weich auslaufen lassen, damit die Logos nicht an einer harten
   Kante abgeschnitten erscheinen. */
.logoband__fenster {
  display: flex;
  width: max-content;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.logoband__spur {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 72px;
  padding-right: 72px;
  animation: logoband-fahrt 90s linear infinite;
}

.logoband__eintrag { flex: none; }

/* 50 % Helligkeit im Ruhezustand. Deckkraft und nicht ein Graufilter: Die
   Logos sind weiße Freisteller, ein Filter hätte je nach Datei anders
   gewirkt. */
.logoband__eintrag img {
  display: block;
  height: 36px; width: auto;
  opacity: .5;
  transition: opacity 200ms ease;
}

.logoband__eintrag img:hover { opacity: 1; }

/* Beim Überfahren steht das Band still. Ohne das wäre die volle Helligkeit
   nicht zu sehen - das Logo wäre weg, bevor man es angesehen hat. */
.logoband__fenster:hover .logoband__spur { animation-play-state: paused; }

@keyframes logoband-fahrt {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

@media (max-width: 860px) {
  .logoband { padding: 40px 0; }
  .logoband__spur { gap: 48px; padding-right: 48px; animation-duration: 70s; }
  .logoband__eintrag img { height: 30px; }
}

/* Ohne Bewegung: Das Band steht und wird waagerecht scrollbar. */
@media (prefers-reduced-motion: reduce) {
  .logoband__fenster { overflow-x: auto; width: 100%; }
  .logoband__spur { animation: none; }
  .logoband__spur[aria-hidden="true"] { display: none; }
}

/* Aufzählung im Fließtext. Sie entsteht aus einem Block, dessen Zeilen alle
   mit „- " beginnen - siehe absatz_html(). */
.aufzaehlung {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}
.aufzaehlung > li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 0.5rem;
}
.aufzaehlung > li::before {
  content: '·';
  position: absolute; left: 0.35em;
  color: var(--akzent);
  font-weight: 700;
}

/* LinkedIn-Symbol im Fußbereich. Es sitzt in derselben Zeile wie die
   Textlinks und richtet sich an deren Mitte aus - ohne inline-flex stünde es
   auf der Grundlinie und damit zu tief. */
.footer__symbol {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.footer__symbol svg { display: block; }