/*
	DER ESSAY ALS EIGENES DOKUMENT.

	Alle Regeln liegen unter `.essay` und koennen nichts ausserhalb des
	Artikels beruehren. Der Essay bringt seine eigene Farbfamilie mit, weil
	er als geschlossenes Dokument gestaltet wurde - deshalb steht er hier
	und NICHT in `styles.css`, wo genau eine Akzentfamilie gilt.
*/

.essay {
  --grund: #050506;
  --flaeche: #0c0c11;
  --flaeche-2: #101116;
  --linie: rgba(233,233,237,0.14);
  --linie-zart: rgba(233,233,237,0.08);
  --text: #e4e7f5;
  --text-hell: #f3f5fe;
  --text-gedaempft: #cfd3e5;
  --text-leise: #b2b6ca;
  --text-meta: #9397ab;
  --text-marke: #7d8195;
  --akzent: #9184d9;
  --akzent-hell: #a7a1db;
  --akzent-link: #b5abfc;
  --akzent-zart: #d2cefd;
  --teil-grund: #262a60;
  --spalte: 41rem;
  --breit: 52rem;
  --schrift: var(--sans, "Satoshi", "Segoe UI", system-ui, -apple-system,
             "Helvetica Neue", Arial, sans-serif);

  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 18px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  padding: 0 24px 96px;
}
.essay *, .essay *::before, .essay *::after { box-sizing: border-box; }


.essay section, .essay .toc { padding: 0; }
.essay .kapitel { margin: 0 0 4.5rem; }
.essay .kapitel:last-child { margin-bottom: 0; }

/* — Grundtypografie — */
.essay p { margin-top: 0; margin-bottom: 1.1em; }
.essay p:last-child { margin-bottom: 0; }
.essay h1, .essay h2, .essay h3 {
  font-family: var(--schrift); font-weight: 500; color: var(--text-hell);
  letter-spacing: -0.02em; line-height: 1.12; margin: 0;
  text-wrap: balance;
}
.essay h3 {
  font-size: 21px; line-height: 1.3; letter-spacing: -0.01em;
  margin-top: 2.2rem; margin-bottom: 0.7rem;
}

/*
  EINE ZWISCHENUEBERSCHRIFT MIT MARKE.

  Die Maske von CoverRaccoon steht neben der Ueberschrift, nicht als Bild im
  Text. Sie ist EIN Pfad und liegt deshalb inline: keine zweite Anfrage, keine
  Datei, die beim Aufraeumen verschwinden kann, und sie nimmt ueber
  `currentColor` die Farbe der Ueberschrift an - dieselbe Machart wie die
  Kanalzeichen im Fussbereich.

  Sie ist `aria-hidden`: Der Name steht direkt daneben, und ein Vorleser wuerde
  ihn sonst zweimal ankuendigen.
*/
.essay h3.mit-marke {
  display: flex;
  /* NICHT `center`: Auf dem Telefon bricht die Ueberschrift auf zwei Zeilen um,
     und die Marke rutschte dann zwischen beide. Sie gehoert zur ersten Zeile. */
  align-items: flex-start;
  gap: 12px;
}
.essay .cr-marke {
  flex: 0 0 auto;
  /* Die halbe Differenz zwischen Zeilenhoehe (21px mal 1.3) und Markenhoehe:
     so sitzt sie mittig zur ersten Zeile statt an deren Oberkante. */
  margin-top: 3px;
  /* Etwas leiser als die Schrift: eine Marke, keine Ueberschrift. */
  opacity: 0.85;
}
.essay strong, .essay b { font-weight: 600; color: var(--text-hell); }
.essay a { color: var(--akzent-link); text-underline-offset: 3px; }
.essay a:hover { color: var(--akzent-zart); }
.essay a:focus-visible,
.essay :focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 2px; }
.essay ::selection { background: rgba(145,132,217,0.32); }
.essay .anker { display: block; height: 0; overflow: hidden; }
/* Sprungziele bleiben unter einem klebenden Seitenkopf sichtbar. */
.essay .kapitel, .essay .teil, .essay .toc, .essay .anker { scroll-margin-top: 96px; }

.essay .kicker {
  font-size: 12px; letter-spacing: 0.16em; text-transform: none;
  color: var(--akzent-hell); line-height: 1.5;
}
.essay .kicker-klein {
  font-size: 11px; letter-spacing: 0.13em; color: var(--akzent-hell);
  margin-top: 2.6rem; margin-bottom: 0.7rem;
}
.essay .strich {
  display: inline-block; width: 26px; height: 1px; background: var(--akzent);
  flex: 0 0 auto;
}

/* — Seitenkopf — */
.essay .kopf { padding: 4.5rem 0 3.2rem; }
.essay .kicker-zeile { display: flex; align-items: center; gap: 14px; margin-bottom: 1.6rem; }
.essay .kopf h1 { font-size: 46px; line-height: 1.06; letter-spacing: -0.025em; }
.essay .untertitel {
  margin-top: 1.1rem; margin-bottom: 0; font-size: 22px; line-height: 1.35;
  color: var(--akzent-zart); letter-spacing: -0.005em;
}
.essay .kopf-meta {
  display: flex; flex-wrap: wrap; gap: 2.4rem; align-items: flex-end;
  margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid var(--linie);
}
.essay .meta-label {
  font-size: 10px; letter-spacing: 0.14em; color: var(--akzent-hell); margin-bottom: 5px;
}
.essay .meta-wert, .essay .meta-autor { font-size: 15px; color: #e9e9ed; }
.essay .meta-autor { margin-left: auto; }

/* — Inhaltsverzeichnis — */
.essay .toc { padding: 0 0 3.4rem; }
.essay .toc h2 { font-size: 30px; margin-bottom: 0.5rem; }
/* Der Gang der Argumentation laeuft ueber mehrere Absaetze. Untereinander
   stehen sie enger als vor der Kapitelliste - sonst zerfaellt der Block. */
/*
	DAS GESPRAECH LAEUFT MIT.
	Der Balken steht fest am unteren Rand, damit er nach vierzig Minuten Lesen
	noch erreichbar ist, ohne zum Anfang zurueckzuscrollen.

	ERST STAND HIER `position: sticky; bottom: 0`. Das war falsch: Ein sticky
	Element mit `bottom` wird nur dann verschoben, wenn seine natuerliche
	Position UNTERHALB des Sichtfensters laege. Der Abspieler steht aber am
	Anfang des Beitrags - die Bedingung ist dort von vornherein erfuellt, er
	blieb einfach stehen und scrollte weg. Im Bild gemessen, nicht vermutet.

	Im Markup bleibt er trotzdem oben: So trifft ihn ein Vorleser gleich nach
	dem Titel, und nicht erst hinter dem Anhang.

	Kein Glaseffekt, wie im Seitenkopf - der Grund bleibt undurchsichtig, sonst
	laufen Buchstaben durch die Bedienelemente.
*/
.essay .hoeren {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9;
	padding: 7px var(--pad) 9px;
	background: var(--flaeche-2);
	border-top: 1px solid #292b31;
}
.essay .hoeren-innen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 18px;
	max-width: var(--breit);
	margin: 0 auto;
}
.essay .hoeren-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 9px;
}
.essay .hoeren-label {
	font-size: 11px;
	letter-spacing: 0.13em;
	color: var(--akzent-hell);
}
.essay .hoeren-meta {
	font-size: 13px;
	color: var(--text-meta);
}
.essay .hoeren-spur {
	flex: 1 1 260px;
	height: 34px;
}
/*
	Platz, damit der Balken die letzten Zeilen nicht verdeckt. Zwei Zeilen
	Raum auf schmalen Geraeten, wo Beschriftung und Leiste untereinander
	stehen.
*/
.essay { padding-bottom: 104px; }
@media (min-width: 640px) {
	.essay { padding-bottom: 68px; }
}
/* Beim Drucken hat ein Abspieler nichts verloren. */
@media print {
	.essay .hoeren { display: none; }
	.essay { padding-bottom: 0; }
}

.essay .toc-intro { font-size: 17px; line-height: 1.65; color: var(--text-leise); margin-bottom: 0.95rem; }
.essay .toc-intro:last-of-type { margin-bottom: 1.8rem; }
.essay .toc-gruppe { margin-bottom: 1.6rem; }
.essay .toc-teil {
  display: flex; align-items: center; gap: 10px; margin-bottom: 0.5rem;
  font-size: 11px; letter-spacing: 0.14em; color: var(--akzent-hell);
}
.essay .toc ul { list-style: none; margin: 0; padding: 0; }
.essay .toc li { margin: 0; border-bottom: 1px solid var(--linie-zart); }
.essay .toc li:last-child { border-bottom: 0; }
.essay .toc li a {
  display: flex; gap: 16px; align-items: baseline; padding: 8px 0;
  text-decoration: none; color: #e9e9ed; font-size: 16.5px; line-height: 1.45;
}
.essay .toc li a:hover { color: var(--akzent-zart); }
.essay .toc-nr {
  flex: 0 0 34px; font-size: 12px; letter-spacing: 0.08em; color: var(--text-marke);
}
.essay .toc-titel { flex: 1; }

/* — Teil-Zwischentitel — */
.essay .teil { margin: 0 0 3.4rem; padding: 2.6rem 0 0; }
.essay .teil h2 { font-size: 40px; line-height: 1.08; margin-top: 0.9rem; margin-bottom: 1.4rem; }
.essay .teil-strich {
  height: 1px; margin-bottom: 1.4rem;
  background: linear-gradient(90deg, var(--akzent), rgba(145,132,217,0));
}
.essay .teil-liste { list-style: none; margin: 0; padding: 0; }
.essay .teil-liste li {
  display: flex; gap: 16px; font-size: 16px; color: var(--text-gedaempft);
  padding: 3px 0;
}
.essay .teil-nr { flex: 0 0 32px; color: var(--text-marke); }

/* — Kapitelkopf — */
.essay .kap-kopf {
  display: flex; align-items: flex-start; gap: 22px;
  margin-top: 0; margin-bottom: 1.3rem;
}
.essay .kap-nr {
  font-size: 60px; line-height: 0.85; font-weight: 500; color: #4a4d5a;
  letter-spacing: -0.03em; flex: 0 0 auto;
}
.essay .kap-kopf h2 { font-size: 32px; padding-top: 4px; }
.essay .abschnitt-kopf { margin-top: 0; margin-bottom: 1.3rem; }
.essay .abschnitt-kopf h2 { font-size: 32px; margin-top: 0.7rem; }
.essay .abschnitt-kopf .kicker { margin-bottom: 0.7rem; }

.essay .lead {
  font-size: 20.5px; line-height: 1.55; color: var(--text-gedaempft);
  border-top: 1px solid var(--linie); padding-top: 1.2rem; margin-bottom: 1.6rem;
}
.essay .klein { font-size: 15.5px; line-height: 1.65; color: var(--text-gedaempft); }

/* — abgesetzte Bloecke — */
.essay .box, .essay .merksatz, .essay .hervorbox, .essay .notiz, .essay .zitat {
  display: block; margin: 1.8rem auto; border-radius: 0 6px 6px 0;
}
.essay .box {
  padding: 1rem 1.2rem; background: var(--flaeche-2);
  border-left: 2px solid var(--akzent);
}
.essay .box-label {
  font-size: 11px; letter-spacing: 0.13em; color: var(--akzent-hell);
  margin-bottom: 6px; line-height: 1.5;
}
.essay .box-text { font-size: 16px; line-height: 1.6; color: var(--text-gedaempft); }

/*
	BELEGE KLAPPEN AUF, STATT DEN TEXT ZU UNTERBRECHEN.

	Die Klappzeile nennt, was drinsteht - sonst sieht ein ueberfliegender
	Leser gar keine Belege mehr, und die Belegdichte ist das Pfund dieses
	Textes. Zugeklappt liest man also, DASS belegt ist und WOMIT.
*/
.essay .beleg {
  display: block; margin: 1.8rem auto; padding: 0.7rem 1.2rem;
  background: var(--flaeche-2); border-left: 2px solid var(--akzent);
  border-radius: 0 6px 6px 0;
}
.essay .beleg > summary {
  cursor: pointer; list-style: none; display: flex; flex-wrap: wrap;
  gap: 0.2rem 0.6rem; align-items: baseline;
}
.essay .beleg > summary::-webkit-details-marker { display: none; }
.essay .beleg > summary::before {
  content: "+"; color: var(--akzent-hell); font-size: 13px; line-height: 1.5;
  width: 0.8em; flex: none;
}
.essay .beleg[open] > summary::before { content: "\2212"; }
.essay .beleg-art {
  font-size: 11px; letter-spacing: 0.13em; color: var(--akzent-hell); line-height: 1.5;
}
.essay .beleg-was { font-size: 13px; color: var(--text-meta); line-height: 1.5; }
.essay .beleg > summary:hover .beleg-was { color: var(--text-leise); }
.essay .beleg > summary:focus-visible { outline: 2px solid var(--akzent-link); outline-offset: 3px; }
.essay .beleg[open] > .box-text { margin-top: 0.7rem; }

/* Gedruckt wird alles - ein Beleg, den man nicht sieht, ist keiner. */
@media print {
  .essay .beleg > .box-text { display: block !important; }
  .essay .beleg > summary::before { content: ""; }
}

.essay .hervorbox {
  padding: 1.6rem 1.8rem; background: var(--flaeche);
  border-left: 2px solid var(--akzent);
}
.essay .hervorbox p { font-size: 18px; line-height: 1.6; }
.essay .notiz {
  padding: 1.2rem 1.4rem; background: var(--flaeche-2); border-radius: 6px;
}
.essay .notiz .box-label { margin-bottom: 8px; }
.essay .merksatz {
  padding: 1.4rem 1.6rem; background: var(--flaeche);
  border-top: 1px solid var(--akzent); border-radius: 0 0 6px 6px;
}
.essay .merksatz-text {
  font-size: 21px; line-height: 1.45; color: var(--text-hell);
}
.essay .zitat {
  padding: 1.9rem 2.1rem; background: var(--teil-grund);
  border-left: 2px solid var(--akzent);
}
.essay .zitat-text { font-size: 25px; line-height: 1.35; color: var(--text-hell); }

/* — Abbildungen — */
.essay figure { margin: 2.2rem auto; }
.essay .fig-kopf {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 10px;
}
.essay figcaption {
  font-size: 12px; letter-spacing: 0.13em; color: var(--akzent-hell); line-height: 1.5;
}
.essay .fig-tag {
  font-size: 11px; letter-spacing: 0.1em; color: var(--text-marke);
  white-space: nowrap; flex: 0 0 auto;
}
.essay .diagramm {
  display: block; width: 100%; height: auto; background: var(--flaeche);
  border: 1px solid #292b31; border-radius: 6px;
}
.essay .fig-text {
  margin-top: 0.7rem; font-size: 15.5px; line-height: 1.6; color: var(--text-gedaempft);
}
.essay .fig-methode {
  margin-top: 0.5rem; font-size: 14.5px; line-height: 1.6; color: var(--text-meta);
}
.essay .bildzeile { display: flex; gap: 20px; align-items: flex-start; }
.essay .bildrahmen {
  flex: 0 1 46%; border: 1px solid #292b31; border-radius: 6px;
  background: var(--flaeche); padding: 8px;
}
.essay .bild { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 3px; }
.essay .bild-text { flex: 1 1 16rem; font-size: 15.5px; line-height: 1.6; color: var(--text-gedaempft); }

/* — Tabellen — */
.essay .tab { margin: 1.6rem auto; }
.essay .tab {
  width: 100%; border-collapse: collapse; text-align: left;
  font-size: 16px; line-height: 1.6;
}
.essay .tab th, .essay .tab td {
  vertical-align: top; padding: 12px 0; border-top: 1px solid rgba(233,233,237,0.12);
}
.essay .tab th {
  font-weight: 500; color: var(--text-hell); padding-right: 18px;
}
.essay .tab td { color: var(--text-gedaempft); }
.essay .tab-paare td { padding-right: 18px; }
.essay .tab-titel { display: block; color: var(--text-hell); margin-bottom: 4px; }
.essay .tab tbody tr:last-child th,
.essay .tab tbody tr:last-child td { border-bottom: 1px solid rgba(233,233,237,0.12); }

/* — Stufenreihe (Abb. Dateien) — */
.essay .stufen { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.essay .stufe {
  flex: 1 1 8rem; padding: 12px 14px; background: #14151c;
  border: 1px solid #3f424d; border-radius: 6px;
}
.essay .stufe-aktiv { background: #191627; border-color: var(--akzent); }
.essay .stufe-nr {
  font-size: 11px; letter-spacing: 0.13em; color: var(--text-marke); margin-bottom: 5px;
}
.essay .stufe-aktiv .stufe-nr { color: var(--akzent-hell); }
.essay .stufe-text { font-size: 15px; color: var(--text-hell); }
.essay .th-sub { font-weight: 400; color: var(--text-meta); font-size: 14px; margin-top: 3px; }

/*
  Der Wachstumsgrad der Balken. Angemeldet, damit der Browser ihn als Zahl
  kennt und stufenlos verrechnen kann; vererbt, damit er von der Abbildung
  bis in die einzelnen Balken durchreicht. Ausgangswert 1: ohne Bewegung
  steht das Diagramm fertig da.
*/
@property --abb-wachs {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

/* ------------------------------------------------------------- Bewegung */

/*
	DIE SCHAUBILDER BAUEN SICH AUF, STATT DAZUSTEHEN.

	Neun schematische Zeichnungen hintereinander sind still. Ein wenig
	Bewegung macht sie nicht huebscher, sondern lesbarer: die Kostenkurve
	FAELLT, die Pfade LAUFEN irgendwohin, die Balken WACHSEN. Was die
	Zeichnung behauptet, vollzieht sie beim Erscheinen einmal nach.

	SIE HAENGT AM SCROLLEN, NICHT AN EINER UHR. `animation-timeline: view()`
	rechnet der Browser selbst - kein Skript, kein Ereignis pro Bild, nichts,
	was auf einem Telefon Rechenzeit kostet. Es laeuft einmal beim Eintreten
	und dann nie wieder.

	UND SIE IST ABSCHALTBAR. Wer im Betriebssystem weniger Bewegung
	eingestellt hat, bekommt gar keine - die Zeichnungen stehen dann sofort
	fertig da. Dasselbe gilt in jedem Browser ohne Zeitachse: die Regeln
	stehen im `@supports`, ausserhalb ist der Ruhezustand der fertige
	Zustand. Eine Zeichnung, die ohne Animation unsichtbar bliebe, waere
	ein Fehler, kein Effekt.
*/
@media (prefers-reduced-motion: no-preference) {
  /* ------------- an der Uhr, nicht am Scrollen -------------
     Diese Bewegungen brauchen keine Scroll-Zeitachse. Sie standen
     trotzdem im @supports darunter - damit bekamen Browser ohne
     Zeitachse, Firefox etwa, weder Waage noch Fluss, obwohl beides
     dort problemlos laeuft. Nur was am Scrollen haengt, gehoert in
     die Weiche. */

  /* ABB. 5 - die gelieferten Bausteine fliessen.
     Ihr Strichmuster ist 4 auf 4, eine Periode also 8 Einheiten: genau um
     diesen Betrag wandert der Versatz, damit die Schleife nicht springt. */
  .essay .abb-5 .diagramm [stroke-dasharray] {
    animation: abb-fliessen 1.9s linear infinite;
  }
  @keyframes abb-fliessen {
    to { stroke-dashoffset: -8; }
  }

  /* ABB. 1 - der Punkt an der Schwelle schlaegt ruhig.
     Er markiert die Stelle, an der die Kurve den erwarteten Nutzen kreuzt;
     das ist die Aussage des Bildes und darf sich melden. */
  .essay .abb-1 .diagramm circle {
    transform-box: fill-box;
    transform-origin: center;
    animation: abb-schwelle 3.6s ease-in-out infinite;
  }
  @keyframes abb-schwelle {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.9); opacity: 0.55; }
  }

  /* ---- ab hier scrollgesteuert: braucht die Zeitachse ---- */
  @supports (animation-timeline: view()) {

    /* Die Abbildung als Ganzes hebt sich beim Eintreten kurz an. */
    .essay figure {
      animation: abb-auftauchen linear both;
      animation-timeline: view();
      animation-range: cover 4% cover 26%;
    }
    @keyframes abb-auftauchen {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /*
      Die Linien zeichnen sich. `stroke-dasharray` ist grosszuegig gewaehlt:
      sie muss laenger sein als der laengste Pfad, sonst entstuende ein
      Muster statt einer durchgehenden Linie. Gefuellte Flaechen ohne Kontur
      beruehrt das nicht.
    */
    .essay .diagramm path[stroke]:not([stroke-dasharray]),
    .essay .diagramm line:not([stroke-dasharray]),
    .essay .diagramm polyline:not([stroke-dasharray]) {
      stroke-dasharray: 2400;
      stroke-dashoffset: 2400;
      animation: abb-zeichnen linear both;
      animation-timeline: view();
      animation-range: cover 10% cover 40%;
    }
    @keyframes abb-zeichnen {
      to { stroke-dashoffset: 0; }
    }

    /*
      Beschriftungen, Punkte und Flaechen kommen NACH den Linien: erst der
      Verlauf, dann was er bedeutet.

      GESTRICHELTE LINIEN WERDEN NICHT GEZEICHNET, SONDERN EINGEBLENDET.
      Ihr Strichmuster steht als `stroke-dasharray` im SVG und traegt dort
      eine Bedeutung - die Schwelle in Abb. 1 ist gestrichelt, WEIL sie
      keine gemessene Groesse ist. Die Zeichenanimation braucht dieselbe
      Eigenschaft und haette das Muster ueberschrieben: aus der Schwelle
      waere eine durchgezogene Linie geworden und damit eine andere
      Aussage. Sie blenden deshalb ein.
    */
    .essay .diagramm text,
    .essay .diagramm circle,
    .essay .diagramm [stroke-dasharray],
    .essay .diagramm path:not([stroke]) {
      animation: abb-einblenden linear both;
      animation-timeline: view();
      animation-range: cover 26% cover 50%;
    }
    @keyframes abb-einblenden {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    /* ---------------------------------------------- Die einzelnen Bilder */

    /*
      Jede dieser Bewegungen gehoert zu IHRER Zeichnung. Eine Waage wiegt
      sich, Balken fahren hoch, bestaetigte Wege fliessen - was das Bild
      behauptet, tut es auch. Eine allgemeine Animation ueber alle neun
      haette nur alle gleich zappeln lassen.
    */

    /*
      ABB. 8 - DIE BALKEN FAHREN HOCH UND BLEIBEN STEHEN.

      Nicht der Balken traegt die Zeitachse, sondern die Abbildung. Ein
      <rect> im SVG hat keinen eigenen Layoutkasten wie ein Absatz; ob eine
      Scroll-Zeitachse daran haelt, entscheidet die Browser-Engine, und
      genau das war der Grund, warum hier nichts wuchs. Die Abbildung ist
      ein gewoehnlicher Block - an ihr haelt sie sicher.

      Uebertragen wird der Fortschritt als Zahl in einer angemeldeten
      Eigenschaft. Angemeldet muss sie sein, sonst waere sie fuer den
      Browser Text und liesse sich nicht stufenlos verrechnen; vererbt,
      damit sie bis in die Balken durchreicht.

      IHR AUSGANGSWERT IST 1, also der fertige Balken. Faellt die Bewegung
      aus - alter Browser, abgeschaltete Animationen, was auch immer -,
      steht das Diagramm vollstaendig da. Ein Balkendiagramm ohne Balken
      waere ein Fehler, kein Effekt.
    */
    .essay .abb-8 {
      animation-name: abb-auftauchen, abb-wachsen;
      animation-timing-function: linear, cubic-bezier(0.22, 1, 0.36, 1);
      animation-fill-mode: both, both;
      animation-timeline: view(), view();
      animation-range: cover 4% cover 26%, cover 14% cover 46%;
    }
    @keyframes abb-wachsen {
      from { --abb-wachs: 0.02; }
      to   { --abb-wachs: 1; }
    }
    .essay .abb-8 .diagramm rect {
      transform-box: fill-box;
      transform-origin: left center;
      transform: scaleX(var(--abb-wachs, 1));
    }

  }
}

/* Spaltenraster: alles zentriert auf Lesebreite, Abbildungen duerfen breiter */
.essay .kopf > *,
.essay .toc > *,
.essay .teil > *,
.essay .kapitel > * { max-width: var(--spalte); margin-left: auto; margin-right: auto; }
.essay .kapitel > figure { max-width: var(--breit); }

@media (max-width: 720px) {
  .essay .tab-paare thead { display: none; }
  .essay .tab-paare td { display: block; width: 100%; padding-right: 0; }
  .essay .tab-paare tr + tr td:first-child { border-top: 1px solid rgba(233,233,237,0.12); }
  .essay .tab-paare td::before {
    content: attr(data-art); display: block;
    font-size: 11px; letter-spacing: 0.13em; color: var(--akzent-hell); margin-bottom: 5px;
  }

  .essay { padding: 0 18px 64px; font-size: 17px; }
  /* Der Seitenkopf ist auf schmalen Geraeten dreizeilig; Sprungziele
     brauchen entsprechend mehr Vorlauf, sonst stehen sie dahinter. */
  .essay .kapitel, .essay .teil, .essay .toc, .essay .anker { scroll-margin-top: 176px; }
  .essay .kopf { padding: 2.6rem 0 2rem; }
  .essay .kopf h1 { font-size: 32px; }
  .essay .untertitel { font-size: 19px; }
  .essay .kopf-meta { gap: 1.4rem; }
  .essay .meta-autor { margin-left: 0; }
  .essay .toc h2 { font-size: 25px; }
  .essay .teil h2 { font-size: 29px; }
  .essay .kap-kopf { gap: 14px; }
  .essay .kap-nr { font-size: 40px; }
  .essay .kap-kopf h2, .essay .abschnitt-kopf h2 { font-size: 25px; }
  .essay .lead { font-size: 18.5px; }
  .essay .merksatz-text { font-size: 19px; }
  .essay .zitat-text { font-size: 21px; }
  .essay .hervorbox { padding: 1.2rem 1.2rem; }
  .essay .hervorbox p { font-size: 17px; }
  .essay .zitat { padding: 1.4rem 1.4rem; }
  .essay .bildzeile { flex-direction: column; }
  .essay .bildrahmen { align-self: stretch; }
  .essay .fig-kopf { flex-direction: column; gap: 4px; }
  .essay .tab, .essay .tab tbody, .essay .tab tr, .essay .tab th, .essay .tab td {
    display: block; width: auto !important;
  }
  .essay .tab th { padding: 12px 0 2px; }
  .essay .tab td { padding: 0 0 12px; border-top: 0; }
  .essay .tab tbody tr:last-child th { border-bottom: 0; }
}