/* Siegelmarke + öffentliche Siegelseite.
   Die Marke wird auch vom Client benutzt, die Seitenklassen nur von der
   server-gerenderten Seite unter /s/<link>. */

/* ============ Siegelmarke ============ */

.sealmark { overflow: visible; }

.sealmark__caption {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.16em;
}

/* WIDERRUFEN, ABGELAUFEN, IN PRÜFUNG stoßen bei 15px an den Prüfring. */
.sealmark__caption--long { font-size: 12px; letter-spacing: 0.1em; }

/* Der Prüfring zeichnet sich einmal — er stellt den Prüfvorgang dar,
   der gerade bestätigt wird. Das ist die einzige Bewegung auf der Seite. */
.sealmark--draw .sealmark__ring {
  stroke-dasharray: var(--ring-len);
  stroke-dashoffset: var(--ring-len);
  animation: seal-draw 1100ms var(--ease-out) 120ms forwards;
}

.sealmark--draw .sealmark__glyph,
.sealmark--draw .sealmark__caption {
  opacity: 0;
  animation: seal-appear 500ms var(--ease-out) 780ms forwards;
}

@keyframes seal-draw { to { stroke-dashoffset: 0; } }
@keyframes seal-appear { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  /* Sofort der Endzustand, kein Nachzeichnen. */
  .sealmark--draw .sealmark__ring { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .sealmark--draw .sealmark__glyph,
  .sealmark--draw .sealmark__caption { opacity: 1; animation: none; }
}

/* ============ Siegelseite ============ */

.sealpage {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
}

.sealpage__texture {
  position: fixed;
  inset: auto 50% auto auto;
  top: -12vh;
  translate: 50% 0;
  width: min(148vw, 900px);
  z-index: var(--z-texture);
  pointer-events: none;
  /* Zurückhaltend: die Textur soll unter dem Siegel liegen, nicht mit ihm
     konkurrieren. Die Maske hält sie in der Nähe der Marke. */
  opacity: 0.34;
  mask-image: radial-gradient(circle at 50% 26%, #000 0%, transparent 56%);
}

.sealpage__main {
  position: relative;
  z-index: var(--z-raised);
  width: 100%;
  max-width: var(--page-measure, 640px);
  margin-inline: auto;
  padding: var(--s-7) var(--s-5) var(--s-8);
  flex: 1;
}

/* Kopfzeile als echte Leiste über die volle Breite.

   Vorher saß sie in der schmalen Inhaltsspalte: auf einem breiten Schirm hingen
   Marke und Knopf dann mit 500px Abstand frei im Raum, ohne Kante und ohne
   Fläche, und das las sich nicht als Kopfzeile, sondern als zwei verirrte
   Elemente. Die Leiste spannt jetzt durch, der Inhalt bleibt auf Textbreite. */
.sealpage__brand {
  position: relative;
  z-index: var(--z-header);
  border-bottom: 1px solid var(--hairline);
  background: var(--bg);
}

.sealpage__brandinner {
  width: 100%;
  max-width: var(--page-measure, 640px);
  margin-inline: auto;
  padding: var(--s-2) var(--s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 62px;
}

/* Die Prüf-Eingabe ist breiter als eine Siegelseite; die Leiste folgt ihr. */
.verifypage { --page-measure: 720px; }

@media (min-width: 560px) {
  .sealpage__brandinner { padding-inline: var(--s-6); }
}

.sealpage__check {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--s-4);
  border: 1px solid var(--control-border);
  border-radius: var(--r-control);
  font-size: var(--t-small);
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}

.sealpage__check:hover { color: var(--ink); border-color: var(--ink-3); }

.sealpage__check-short { display: none; }

@media (max-width: 560px) {
  /* Derselbe Konflikt wie im Client: der Zusatz „Prüfstelle" und der Knopf
     passen nicht nebeneinander. Der Zusatz weicht, die Handlung bleibt. */
  .sealpage__brand .logo__suffix { display: none; }
  .sealpage__check-long { display: none; }
  .sealpage__check-short { display: inline; }
  .sealpage__check { padding-inline: var(--s-3); }
}

/* Vorschau im Geräterahmen: nur der Befund, ohne Seitenrahmen.
   Der Rahmen ist rund 270px breit — dieselben Bausteine, aber auf diese Breite
   gerechnet, sonst schieben die Datumsspalten den Inhalt aus dem Rahmen. */
.sealpage--compact .sealpage__main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5) var(--s-4);
  max-width: none;
}

.sealpage--compact .verdict { gap: var(--s-3); }
.sealpage--compact .verdict .sealmark { width: clamp(112px, 52vw, 150px); }
.sealpage--compact .verdict__name { font-size: var(--t-h3); margin-top: 0; }
.sealpage--compact .verdict__claim { font-size: var(--t-body); max-width: 24ch; }
.sealpage--compact .verdict__dates { margin-top: var(--s-3); }
.sealpage--compact .verdict__dates > div { padding: var(--s-3); }
.sealpage--compact .verdict__dates dd { font-size: 0.8rem; }
.sealpage--compact .verdict__dates dt { font-size: 0.625rem; letter-spacing: 0.06em; }

/* ---- Der Befund. Ohne Scrollen, ohne dass jemand ein Wort lesen muss. ---- */

.verdict {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-4);
}

.verdict .sealmark { width: clamp(168px, 46vw, 224px); height: auto; }

.verdict__name {
  font-size: var(--t-h1);
  letter-spacing: -0.03em;
  margin-top: var(--s-2);
}

.verdict__claim {
  font-size: var(--t-lead);
  color: var(--ink-2);
  max-width: 30ch;
}

.verdict__dates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  width: 100%;
  margin: var(--s-4) 0 0;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-surface);
  overflow: hidden;
}

.verdict__dates > div {
  background: var(--surface);
  padding: var(--s-4);
  text-align: left;
}

.verdict__dates dt { margin-bottom: var(--s-1); }
.verdict__dates dd { margin: 0; color: var(--ink); font-family: var(--font-mono); font-size: 0.95rem; }

/* ---- Belege für die, die nachprüfen wollen ---- */

.panel {
  margin-top: var(--s-7);
  border: 1px solid var(--hairline);
  border-radius: var(--r-surface);
  background: var(--surface);
  padding: var(--s-5);
}

.panel > h2 {
  font-size: var(--t-h3);
  margin-bottom: var(--s-4);
}

.panel--quiet { background: none; border-color: var(--hairline); }

.profiles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.profiles__note { font-size: var(--t-small); color: var(--ink-3); margin-bottom: var(--s-4); }

.profile {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-top: 1px solid var(--hairline);
  min-height: 44px;
}

.profile:first-child { border-top: 0; padding-top: 0; }

.profile__check { flex: none; width: 22px; height: 22px; color: var(--seal); }

/* Ist das Siegel abgelaufen oder widerrufen, belegen die Profile nichts —
   dann steht dort auch kein bestätigendes Grün. */
.profile__check--muted { color: var(--ink-3); }

.profile__text { min-width: 0; flex: 1; }
.profile__platform { display: block; font-size: var(--t-small); color: var(--ink-3); }
.profile__handle {
  display: block;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.profile__link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding-inline: var(--s-3);
  font-size: var(--t-small);
  color: var(--ink-2);
  text-decoration: none;
  border: 1px solid var(--control-border);
  border-radius: var(--r-control);
}

.profile__link:hover { color: var(--ink); border-color: var(--ink-3); }

/* Bei einer Nummer gibt es nichts zu öffnen: statt eines Links der Weg, auf dem
   sie geprüft werden kann. */
.profile__hint { flex: none; font-size: var(--t-small); color: var(--ink-3); text-align: right; max-width: 12rem; }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }

.steps li {
  position: relative;
  padding-left: var(--s-6);
  padding-block: var(--s-3);
  border-top: 1px solid var(--hairline);
}

.steps li:first-child { border-top: 0; }

.steps li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: calc(var(--s-3) + 0.6em);
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--seal);
  border-radius: var(--r-round);
}

.steps b { color: var(--ink); font-weight: 500; display: block; }
.steps span { font-size: var(--t-small); color: var(--ink-3); }

.limits { margin: 0; padding-left: var(--s-5); color: var(--ink-2); }
.limits li { padding-block: var(--s-1); }

.sealpage__foot {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--t-small);
  color: var(--ink-3);
}

.sealpage__foot a { color: var(--ink-2); }

.notice {
  margin-top: var(--s-5);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--expired);
  border-radius: var(--r-control);
  background: var(--surface);
  padding: var(--s-4) var(--s-5);
  color: var(--ink-2);
  /* Der Befund oben ist zentriert, ein Absatz darf das nicht sein. */
  text-align: left;
}

.notice--pending { border-left-color: var(--pending); }

@media (min-width: 560px) {
  .sealpage__main { padding-inline: var(--s-6); }
  .panel { padding: var(--s-6); }
}


/* ============ Prüf-Eingabe (/pruefen) ============
   Eigene Seite, gleicher Grund wie die Siegelseite: sie richtet sich an
   Kundschaft, nicht an Anbieter:innen, und muss ohne JavaScript funktionieren. */



.verify__head { font-size: var(--t-h2); letter-spacing: -0.028em; }
.verify__lead { margin-top: var(--s-4); color: var(--ink-2); max-width: 60ch; }

.verify__form { margin-top: var(--s-6); }
.verify__label { display: block; font-size: var(--t-small); color: var(--ink-3); margin-bottom: var(--s-2); }
.verify__row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.verify__input { flex: 1 1 16rem; max-width: none; font-family: var(--font-mono); }
.verify__hint { margin-top: var(--s-3); font-size: var(--t-small); color: var(--ink-3); }

.verify__result { margin-top: var(--s-7); display: grid; gap: var(--s-6); }

.verify__verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--hairline);
}

.verify__verdict .sealmark { flex: none; width: 108px; height: auto; }
.verify__claim { font-size: var(--t-h3); color: var(--ink); }
.verify__name { margin-top: var(--s-2); color: var(--ink-2); }
.verify__meta { margin-top: var(--s-2); font-size: var(--t-small); color: var(--ink-3); }

.verify__block h2 { font-size: var(--t-h3); margin-bottom: var(--s-3); }
.verify__note { font-size: var(--t-small); color: var(--ink-3); margin-bottom: var(--s-4); }

.verify__profiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }

.verify__profiles li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  align-items: baseline;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--hairline);
}

.verify__platform { font-size: var(--t-small); color: var(--ink-3); min-width: 7rem; }
.verify__profiles .mono { color: var(--ink); }

/* ---- Pflichtseiten (views/legalPages.js) ----
   Etwas breiter als eine Siegelseite, weil hier gelesen wird und nicht geprüft.
   Sonst bewusst ohne eigene Gestaltung: ein Impressum soll nach Text aussehen. */
.legalpage { --page-measure: 760px; }

.legal h1 { margin-bottom: var(--s-2); }
.legal h2 {
  margin-top: var(--s-7);
  margin-bottom: var(--s-3);
  font-size: var(--t-h3);
}
.legal p, .legal ul { max-width: 68ch; }
.legal p { margin-block: var(--s-3); }
.legal ul { padding-left: 1.2em; }
.legal li { margin-block: var(--s-2); }
.legal__lead { font-size: var(--t-lead); color: var(--ink-2); }
.legal__note { font-size: var(--t-small); color: var(--ink-3); }
.legal__grid dd { color: var(--ink-2); }

/* ---- FAQ-Einträge ----
   Frage als Überschrift, Antwort direkt darunter — kein Aufklappen: die
   Antworten sind kurz, und eine Seite, auf der man erst klicken muss, ist mit
   der Suche im Browser nicht durchsuchbar. */
.faq__item { padding-block: var(--s-5); border-top: 1px solid var(--hairline); }
.faq__item:first-of-type { border-top: 0; }
.faq__item h3 { font-size: var(--t-body); color: var(--ink); margin-bottom: var(--s-2); }
.faq__item p { margin-block: var(--s-2); color: var(--ink-2); }

/* ---- Die Zuordnungsfrage unter dem Befund ----
   Sie steht als eigener Kasten und nicht als Absatz: ein Hinweis unter einem
   grünen Siegel wird überlesen, ein Eingabefeld nicht (Begründung in
   views/sealPage.js). */
.ask {
  margin-top: var(--s-6);
  padding: var(--s-5);
  border: 1px solid var(--control-border);
  border-radius: var(--r-surface);
  background: var(--surface);
}

.ask h2 { font-size: var(--t-h3); margin-bottom: var(--s-2); }
.ask__lead { color: var(--ink-2); max-width: 52ch; }
.ask__form { margin-top: var(--s-5); width: 100%; max-width: 30rem; }

.ask__miss {
  margin-top: var(--s-5);
  padding: var(--s-4);
  border: 1px solid var(--expired);
  border-radius: var(--r-surface);
  color: var(--ink);
  max-width: 46ch;
  text-align: left;
}

/* Bestätigte Zuordnung: der Satz, auf den es ankommt, direkt unter dem Befund. */
.verdict__match { margin-top: var(--s-3); color: var(--seal); }

/* ============================= Journal ====================================

   Die erste Fassung setzte den Beitrag als nackten Text direkt auf --bg. Auf
   zwei Bildschirmhöhen war das anstrengend zu lesen, aus drei Gründen, die
   zusammenwirken: kein Rand, der die Spalte hält (der Text hing frei in einer
   1200px breiten schwarzen Fläche), knapp 17px bei Zeilenabstand 1.65, und
   heller Text auf fast Schwarz, was bei langer Lesedauer blendet.

   Die Antwort ist ein Blatt: eine angehobene Fläche, auf der der Text steht,
   mit gerechneter Spaltenbreite. Alles Weitere folgt daraus — Figuren sind
   Vertiefungen im Blatt, Tabellen haben Kanten und Zeilenfärbung, Abschnitte
   bekommen Luft statt Trennlinien. */

.journalpage {
  --page-measure: 730px;
  --sheet-pad: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  /* 17px auf dem Handy, 18.5px am Schirm. Die Stufe darüber (--t-lead) wäre
     für Fließtext zu groß, --t-body war für diese Länge zu klein. */
  --t-read: clamp(1.0625rem, 1.015rem + 0.24vw, 1.1563rem);
}

.journal__list { margin-top: var(--s-6); }
.journal__item { padding-block: var(--s-5); border-top: 1px solid var(--hairline); }
.journal__item:first-child { border-top: 0; }
.journal__item h2 { margin-block: var(--s-2); font-size: var(--t-h3); }
.journal__item h2 a { color: var(--ink); text-decoration: none; }
.journal__item h2 a:hover { color: var(--seal); }
.journal__item p { color: var(--ink-2); }

/* ---- Kopf des Beitrags: steht bewusst NICHT auf dem Blatt ----
   Titel und Vorspann gehören zur Seite, der Fließtext zum Blatt. Der Absatz
   dazwischen ist die Stelle, an der das Lesen anfängt. */
.journal__head { margin-bottom: var(--s-6); }
.journal__head h1 { margin-block: var(--s-2) var(--s-4); }
.journal__lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 46ch;
}

/* ---- Das Blatt ---- */
.journal__sheet {
  background: var(--sheet);
  border: 1px solid var(--hairline);
  border-radius: var(--r-surface);
  padding: clamp(1.5rem, 0.9rem + 2.6vw, 3.25rem) var(--sheet-pad);
  color: var(--ink-read);
  font-size: var(--t-read);
  line-height: 1.72;
  /* Kante oben als Lichtkante, Schatten nach unten: das Blatt liegt auf der
     Seite, es ist nicht in sie hineingeschnitten. */
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.05),
    0 24px 60px -34px oklch(0 0 0 / 0.75);
}

.journal__sheet > p { margin-block: var(--s-4); max-width: 68ch; }
.journal__sheet > ul { margin-block: var(--s-4); padding-left: 1.15em; max-width: 68ch; }
.journal__sheet li { margin-block: var(--s-3); }
.journal__sheet strong, .journal__sheet b { color: var(--ink); font-weight: 500; }
.journal__sheet em { color: var(--ink); }
.journal__sheet a { color: var(--ink); text-decoration-color: var(--seal-deep); }
.journal__sheet a:hover { text-decoration-color: var(--seal); }

/* Abschnitte werden durch Luft getrennt, nicht durch Linien: bei sieben
   Überschriften je Beitrag wären sieben Linien ein Gitter, kein Rhythmus. */
.journal__sheet h2 {
  margin-top: var(--s-8);
  margin-bottom: var(--s-4);
  font-size: clamp(1.4rem, 1.2rem + 0.85vw, 1.85rem);
  color: var(--ink);
  scroll-margin-top: var(--s-5);
}

.journal__sheet > *:first-child { margin-top: 0; }
/* Nach dem Inhaltsverzeichnis fängt der Text an, es ist kein neuer Abschnitt
   nach einem alten — der volle Abstand wäre hier ein Loch. */
.toc + h2 { margin-top: var(--s-6); }

/* Sprung aus dem Inhaltsverzeichnis: die angesprungene Überschrift bekommt
   kurz eine Marke, sonst weiß man nach dem Sprung nicht, wo man gelandet ist. */
.journal__sheet h2::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0.72em;
  margin-right: 0;
  vertical-align: -0.04em;
  background: var(--seal);
  border-radius: 1px;
  transition: width var(--dur-mid) var(--ease-out), margin-right var(--dur-mid) var(--ease-out);
}

.journal__sheet h2:target::before { width: 3px; margin-right: 0.45em; }

@media (prefers-reduced-motion: reduce) {
  .journal__sheet h2::before { transition: none; }
}

/* Schluss des Beitrags: die beiden Knöpfe und der Rückweg stehen wieder auf
   der Seite, nicht auf dem Blatt — der Text ist zu Ende. */
.journal__end { margin-top: var(--s-6); }

/* Auf dem Handy geht das Blatt bis an den Rand. Ein gerahmter Kasten mit 24px
   Seitenrand darin ließe von 390px Schirm noch 300px Text übrig — das sind
   knapp 33 Zeichen je Zeile, und dabei wird jeder Satz zum Umbruchgewitter.
   Randlos bleiben 38 Zeichen, und die Fläche liest sich trotzdem als Blatt,
   weil Kopf und Schluss daneben auf dem Seitengrund stehen.

   Das gilt für den Beitrag, nicht für die Übersicht: `.journalpost`, nicht
   `.journalpage`. Die Übersicht trägt kein Blatt, das den Seitenrand ersetzen
   könnte. Sie stand deshalb auf dem Handy ohne jeden Seitenrand da, Titel und
   Liste bündig an beiden Schirmkanten. */
@media (max-width: 559px) {
  .journalpost .sealpage__main { padding-inline: 0; }
  .journal__head, .journal__end { padding-inline: var(--s-5); }
  .journal__sheet {
    border-inline: 0;
    border-radius: 0;
    padding-inline: var(--s-5);
  }

  /* Und aus demselben Grund läuft eine Figur im Blatt auf dem Handy bis an den
     Rand: sonst zahlt der Text drei Einzüge übereinander (Seite, Blatt, Figur)
     und behält von 390px noch 250px — bei einer nummerierten Liste mit
     Ziffernspalte bleiben davon 26 Zeichen je Zeile übrig. */
  .journal__sheet > .fig {
    margin-inline: calc(var(--s-5) * -1);
    border-inline: 0;
    border-radius: 0;
    padding-inline: var(--s-5);
  }

  .flow__step { grid-template-columns: 1.75rem 1fr; gap: var(--s-3); }
  .flow__num { width: 1.75rem; height: 1.75rem; }
  .flow__step:not(:last-child)::before { left: 0.875rem; top: 1.75rem; }
}

/* ============================ Journal: Figuren ============================
   Bausteine für Diagramme in Langtexten. Alles CSS, kein Skript, kein fremder
   Server: die Beiträge sollen auch dann lesbar sein, wenn nichts nachlädt, und
   die strenge CSP der Seite lässt ohnehin nichts von außen zu.

   Warum überhaupt Diagramme: die Beiträge erklären Abläufe und Vergleiche.
   Beides liest sich in Prosa zäh und in einer Grafik in drei Sekunden. Was hier
   NICHT entsteht, sind erfundene Marktzahlen in Balkenform — dargestellt wird
   Mechanik: wer prüft wen, was folgt woraus, was kostet welcher Weg.

   Höhenordnung im Beitrag: das Blatt (--sheet) liegt oben, eine Figur ist eine
   Vertiefung darin (--bg), und was in einer Figur nochmal hervortritt, geht auf
   --surface. Zwei Richtungen statt drei Helligkeiten nach oben — sonst wird der
   hellste Punkt der Seite ein Kasten und nicht der Text. */

.fig {
  margin-block: var(--s-7);
  border: 1px solid var(--hairline);
  border-radius: var(--r-surface);
  background: var(--bg);
  padding: var(--s-5);
}

/* Elemente, die in einer Vertiefung liegen, treten wieder hervor. */
.fig .versus__side,
.fig .direction__node,
.fig .flow__num,
.fig .figures__item { background: var(--surface); }

/* Auf breiten Schirmen dürfen Figuren über die Textspalte hinausragen. Das ist
   der Unterschied zwischen einem Text mit Bildern und einem gesetzten Beitrag. */
@media (min-width: 700px) {
  .journal__sheet > .fig,
  .journal__sheet > .versus { margin-inline: calc(var(--sheet-pad) * -0.55); }
}

.fig__cap {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--ink-3);
}

/* ---- Ablauf: nummerierte Schritte mit durchgehender Linie ---- */
.flow { display: grid; gap: 0; counter-reset: flow; }

.flow__step {
  position: relative;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--s-4);
  padding-bottom: var(--s-5);
}

.flow__step:last-child { padding-bottom: 0; }

/* Die Linie verbindet die Schritte, statt sie nur untereinander zu stellen:
   sie zeigt, dass es eine Reihenfolge ist und keine Aufzählung. */
.flow__step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 1rem;
  top: 2rem;
  bottom: 0.25rem;
  width: 1px;
  background: var(--hairline);
}

.flow__num {
  counter-increment: flow;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-round);
  border: 1px solid var(--control-border);
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--ink-2);
}

.flow__num::before { content: counter(flow); }
.flow__body b { display: block; color: var(--ink); margin-bottom: var(--s-2); }
/* Fließtext bleibt Fließtext, auch in einer Figur. Vorher stand er hier auf
   Bildunterschriftsgröße — das war der zweite Grund, warum die Beiträge
   anstrengend zu lesen waren. */
.flow__body span { color: var(--ink-2); font-size: var(--t-body); line-height: 1.6; }

/* ---- Gegenüberstellung: zwei Wege nebeneinander ---- */
.versus { display: grid; gap: var(--s-4); }

@media (min-width: 700px) {
  .versus { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
}

.versus__side {
  padding: var(--s-5);
  border: 1px solid var(--hairline);
  border-radius: var(--r-control);
  background: var(--bg);
}
.versus__side h4 { font-size: var(--t-lead); margin-bottom: var(--s-4); }
.versus__side ul { margin: 0; padding-left: 1.1em; }
.versus__side li { margin-block: var(--s-3); font-size: var(--t-body); line-height: 1.6; color: var(--ink-2); }

/* Die schwächere Seite bekommt keinen roten Rahmen: das wäre eine Wertung, wo
   eine Feststellung genügt. Nur die stärkere wird hervorgehoben. */
.versus__side--strong { border-color: var(--seal-deep); }
.versus__side--strong h4 { color: var(--seal); }

/* ---- Merkmalstabelle ----

   Vorher: Text in drei Spalten, dünne Linien nur zwischen den Zeilen, alles in
   derselben Farbe, 13px. Beim Lesen musste man sich merken, in welcher Spalte
   man ist — das ist die Arbeit, die eine Tabelle abnehmen soll.

   Jetzt trägt jede Achse ein eigenes Signal: die Kopfzeile ein Band, die erste
   Spalte eine Tönung (sie ist die Zeilenbeschriftung), Zellen mit Wertung eine
   farbige Unterlegung, und zwischen allen Zellen steht eine Kante. Die Farbe
   liegt unter dem Text, nicht in ihm: getönte Schrift verliert Kontrast,
   getönte Fläche nicht. */

.fig--table { padding: 0; overflow: hidden; }
.fig--table .fig__cap {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--hairline);
}

/* Auf dem Handy scrollt die Tabelle, statt die Spalten zu zerquetschen. */
.matrix-wrap { overflow-x: auto; }
.matrix { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: var(--t-body); }

.matrix th, .matrix td {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
  border-top: 1px solid var(--hairline);
}

.matrix th + th, .matrix td + td { border-left: 1px solid var(--hairline); }

.matrix thead th {
  border-top: 0;
  background: var(--raised);
  color: var(--ink);
  font-weight: 500;
  font-size: var(--t-small);
  letter-spacing: 0.02em;
}

.matrix tbody td:first-child {
  background: var(--surface);
  color: var(--ink);
  font-weight: 500;
}

/* Die beiden Wertungsspalten. Kein Rot und kein Grün in Signalstärke: es ist
   eine Gegenüberstellung, kein Alarm. */
.matrix .yes { background: color-mix(in oklab, var(--seal) 10%, transparent); color: var(--ink); }
.matrix .no { background: color-mix(in oklab, var(--pending) 9%, transparent); color: var(--ink-2); }
.matrix tbody td.yes:first-child, .matrix tbody td.no:first-child { color: var(--ink); }

/* ---- Richtungsdiagramm: wer stellt die Auskunft aus ---- */
.direction { display: grid; gap: var(--s-3); font-size: var(--t-small); }
.direction__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-3); }
.direction__node {
  padding: var(--s-3);
  border-radius: var(--r-control);
  background: var(--bg);
  border: 1px solid var(--hairline);
  text-align: center;
  color: var(--ink-2);
}
.direction__node--us { border-color: var(--seal-deep); color: var(--ink); }
.direction__arrow { font-family: var(--font-mono); color: var(--ink-3); }

/* ---- Zahl mit Erläuterung, für nachprüfbare Größen ---- */
.figures { display: grid; gap: var(--s-4); }

@media (min-width: 640px) {
  .figures { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
}

.figures__item {
  padding: var(--s-4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-control);
}
.figures__value { font-family: var(--font-mono); font-size: var(--t-h3); color: var(--seal); line-height: 1.1; }
.figures__label { margin-top: var(--s-3); font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }

/* ---- Hervorgehobener Merksatz ----
   Rahmen rundum statt Balken links: ein Kasten mit einer dicken Kante auf einer
   Seite ist ein halber Kasten. Die Mint-Tönung trägt die Hervorhebung. */
.keypoint {
  margin-block: var(--s-7);
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--seal-deep);
  border-radius: var(--r-surface);
  background: color-mix(in oklab, var(--seal) 8%, var(--bg));
}

.keypoint p { margin: 0; font-size: var(--t-lead); line-height: 1.5; color: var(--ink); max-width: 46ch; }

/* ---- Inhaltsverzeichnis für lange Beiträge ----
   Steht als Erstes im Blatt und ist der einzige Kasten dort, der wie ein
   Bedienelement aussehen darf: er wird benutzt, nicht gelesen. */
.toc {
  margin-bottom: var(--s-7);
  padding: var(--s-4) var(--s-5) var(--s-5);
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-surface);
}

.journal__sheet .toc h2 {
  margin: 0 0 var(--s-3);
  font-size: var(--t-label);
  letter-spacing: 0.04em;
  color: var(--ink-3);
  font-weight: 500;
}

.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc li {
  counter-increment: toc;
  margin-block: var(--s-2);
  font-size: var(--t-small);
  line-height: 1.45;
  break-inside: avoid;
}
.toc li::before {
  content: counter(toc);
  font-family: var(--font-mono);
  color: var(--seal-deep);
  margin-right: 0.6em;
}
.toc a { color: var(--ink-2); text-decoration-color: transparent; }
.toc a:hover { color: var(--seal); text-decoration-color: currentColor; }

@media (min-width: 620px) {
  .toc ol { columns: 2; column-gap: var(--s-6); }
}