/* =============================================================================
   jenax.css — ein einziges Stilblatt für den ganzen Auftritt.

   Stand 31.07.2026. Gebaut in JC02 nach AUFTRAG_JC02_Bau.md, Abschnitte 2,
   3 und 4, und der Gestaltungsvorlage Jenax_Startseite_v4.html.
   In JC03 geändert: die Bildmarke in Abschnitt 6 und die drei Tokens, die
   ihre Linien färben.

   Aufbau der Datei:
     1  Schriften, selbst gehostet
     2  Tokens
     3  Grundlagen
     4  Bausteine, schriftlich
     5  Abstände zwischen Geschwistern
     6  Die Bildmarke
     7  Gerüst: Blatt, Zweispalt, Einspalt
     8  Kopf, Metadatenband, Fuß
     9  Abschnitte der Startseite
    10  Arbeit, Person, English, Rechtsseiten, Fehlerseite
    11  Beitrag
    12  Umbruchpunkte, vier Schwellen
    13  Druck

   Regel für alle folgenden Stufen: Werte stehen hier, nicht im Markup.
   Wer im Template einen Pixelwert schreibt, hat hier einen Token vergessen.
   Sämtliche Maße stammen aus Jenax_Startseite_v4.html. Neue Werte sind
   keine dazugekommen.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1  Schriften

   IBM Plex Sans, Plex Mono, Plex Sans Condensed. Latin, woff2, aus dem
   eigenen Projekt. Nie über fonts.googleapis.com.

   Fünf Schnitte, mehr nicht: Sans 400, Sans 400 kursiv, Sans 600,
   Mono 400, Condensed 600. Die Kursive trägt die Auszeichnungen in den
   Beiträgen, die aus Markdown kommen. Ohne sie stellt der Browser die
   Aufrechte schräg, und das ist keine Kursive, sondern eine Fälschung.

   Griechisch ist bewusst nicht eingebunden. Die einzige griechische Zeile
   im Auftritt ist das Zitat auf /404.html, und die ist polytonisch: die
   betonten Formen liegen im Unicode-Block Greek Extended. Plex deckt über
   fontsource nur das neugriechische Alphabet ab. Eine Einbindung würde
   deshalb die Hälfte der Buchstaben in Plex setzen und die andere Hälfte
   in der Schrift des Systems, also zwei Schriften in einer Zeile. Eine
   durchgehende Ersatzschrift ist das kleinere Übel. Nicht reparieren.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/schriften/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/schriften/ibm-plex-sans-latin-400-italic.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/schriften/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}

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

@font-face {
  font-family: "IBM Plex Sans Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/schriften/ibm-plex-sans-condensed-latin-600-normal.woff2") format("woff2");
}


/* -----------------------------------------------------------------------------
   2  Tokens

   Der erste Block ist der beschlossene Kanon aus Abschnitt 2 des Bauauftrags.
   Er wird nicht verändert, auch nicht „nur kurz zum Ausprobieren".
   Die Blöcke darunter sind Bau-Tokens: Maße, Größen, Rhythmus. Sie ändern
   sich an den vier Schwellen in Abschnitt 12.
   -------------------------------------------------------------------------- */

:root {
  /* Farbe, Kanon */
  --grund:             #E9E8E4;
  --grund-dunkel:      #0C0C0D;
  --schrift:           #17171A;
  --schrift-gedaempft: rgba(23, 23, 26, .72);
  --etikett:           rgba(23, 23, 26, .62);   /* nicht auf .50 zurückdrehen, sonst fällt 10-px-Text durch die Kontrastprüfung */
  --etikett-dunkel:    rgba(233, 232, 228, .62);
  --haarlinie:         rgba(23, 23, 26, .18);
  --rasterfuge:        rgba(23, 23, 26, .35);
  --akzent:            #A83A2C;
  --akzent-dunkel:     #C44534;

  /* Farbe, abgeleitet. Nicht Teil des Kanons, aber aus ihm hergeleitet. */
  --akzent-tief:       #8A2F23;                 /* nur für :hover */
  --umfeld:            #D8D7D3;                 /* Fläche neben dem Blatt, jenseits von 1440 */
  --gedaempft-dunkel:  rgba(233, 232, 228, .72);/* Fließtext auf dunklem Grund */

  /* Farbe, Bildmarke. Die Linien des Rasters, in drei Deckkraften.
     Sie stehen hier und nicht im Bauteil: das Makro setzt eine Klasse,
     keinen Wert. --rasterfuge trug danach nur noch die Fläche des
     Standbilds. Seit JC05 steht dort ein echtes Bild, der Token wird
     nirgends mehr aufgerufen. Er bleibt als Teil des Kanons stehen. */
  --marke-linie:        rgba(23, 23, 26, .45);   /* Regelfall, heller Grund */
  --marke-linie-ruhig:  rgba(23, 23, 26, .30);   /* Fuß und Rechtstexte */
  --marke-linie-dunkel: rgba(233, 232, 228, .55);/* auf dunklem Grund */

  /* Schriftrollen */
  --sans:      "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:      "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --condensed: "IBM Plex Sans Condensed", "IBM Plex Sans", Arial, sans-serif;

  /* Maße. Werte für 1440 aufwärts. */
  --rand:               72px;
  --randspalte:         320px;
  --randspalte-abstand: 32px;   /* Abstand der Randspalte zur trennenden Haarlinie */
  --fuge:               1px;    /* Rasterfuge, bleibt in jeder Stufe ein Pixel */

  /* Vertikaler Rhythmus, 80 bis 120 */
  --rhythmus:       104px;
  --rhythmus-gross: 120px;
  --rhythmus-klein: 80px;

  /* Schriftgrößen, Stufe ab 1200 */
  --gr-aufmacher:      104px;
  --gr-abschnitt:      46px;
  --gr-beitragstitel:  34px;
  --gr-schritt:        30px;
  --gr-kennwert:       72px;
  --gr-vorspann:       21px;
  --gr-fliess:         17px;

  /* Schriftgrößen, in allen Stufen unverändert */
  --gr-etikett:    10px;
  --gr-mono:       11px;
  --gr-randspalte: 12px;

  /* Zeilenbreiten, in Zeichen, nie in Pixeln */
  --breite-fliess:   56ch;
  --breite-vorspann: 44ch;
  --breite-beitrag:  70ch;   /* Beitragsspalte, Vorgabe 65 bis 75 Zeichen */

  /* Sperrungen */
  --sperrung-etikett:   .24em;
  --sperrung-mono:      .2em;
  --sperrung-wortmarke: .42em;

  /* Porträt. Auf der Startseite 260 breit, auf /person 520.
     Die Dateien sind 520 × 694 und 1040 × 1388, Verhältnis 3:4. */
  --portraet-breite: 260px;
}


/* -----------------------------------------------------------------------------
   3  Grundlagen
   -------------------------------------------------------------------------- */

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

html {
  background: var(--umfeld);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--gr-fliess);
  color: var(--schrift);
  -webkit-font-smoothing: antialiased;
}

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

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

/* Qualitätsboden: sichtbarer Tastaturfokus, ohne Ausnahme. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
}

/* Auf dunklem Grund braucht der Fokus die helle Akzentfassung. */
.zaesur a:focus-visible { outline-color: var(--akzent-dunkel); }

/* Qualitätsboden: die Sprungmarke zum Inhalt.

   Nicht mit display:none oder visibility:hidden verstecken. Beides nimmt
   sie aus der Tabulatorfolge, und damit ist sie genau für den wirkungslos,
   für den sie gebaut ist. Sie steht deshalb über der oberen Kante und
   fährt bei Fokus herein.

   Kein neuer Wert: Polsterung, Haarlinie und Schriftrolle sind die der
   Kopfleiste, damit die Marke beim Erscheinen wie deren obere Zeile
   sitzt und der Text auf derselben Fluchtlinie steht wie das Menü.

   :focus, nicht :focus-visible. Die Marke wird ausschließlich mit der
   Tastatur erreicht; ein Zeigegerät kommt an ihr nicht vorbei. */
.sprungmarke {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transform: translateY(-100%);
  padding: 26px var(--rand);
  background: var(--grund);
  color: var(--akzent);
  border-bottom: 1px solid var(--haarlinie);
  font-family: var(--mono);
  font-size: var(--gr-mono);
  letter-spacing: var(--sperrung-mono);
  text-transform: uppercase;
}

.sprungmarke:focus { transform: translateY(0); }

/* Qualitätsboden: Bewegung nur, wenn sie gewünscht ist. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* -----------------------------------------------------------------------------
   4  Bausteine, schriftlich

   Schriftregel: Alles, was einen Zustand oder eine Art bezeichnet — Stand,
   Quelle, Reifegrad, Status, Nummer, Beleg — steht in Mono, Versalien, weit
   gesperrt. Alles, was Inhalt ist, steht in Plex Sans.
   -------------------------------------------------------------------------- */

.mono { font-family: var(--mono); }

/* Etikett: die kleinste Zustandsangabe, 10 px. */
.etikett {
  font-family: var(--mono);
  font-size: var(--gr-etikett);
  letter-spacing: var(--sperrung-etikett);
  text-transform: uppercase;
  color: var(--etikett);
}

/* Etikett als Aufschrift über einer Abschnittsüberschrift. */
.abschnittsetikett {
  display: block;
  margin: 0 0 22px;
}

/* Zeile: Mono in Versalien, 11 px. Nummern, Stand, Quelle, Belege. */
.zeile {
  font-family: var(--mono);
  font-size: var(--gr-mono);
  letter-spacing: var(--sperrung-mono);
  text-transform: uppercase;
  color: var(--etikett);
}

.wortmarke {
  font-family: var(--condensed);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: var(--sperrung-wortmarke);
  text-transform: uppercase;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 600;
  text-wrap: pretty;
}

/* Das Maß stand bis JC03 auf 13ch. Der Aufmacher aus Anlage 2 ist mit 58
   Zeichen doppelt so lang wie der alte und lief damit auf fünf Zeilen zu je
   104 px aus. 16ch setzt ihn auf drei Zeilen; bei 1440 begrenzt ohnehin die
   Inhaltsspalte, darunter greift das Maß. Die Schriftgröße bleibt unberührt. */
.aufmacher {
  font-size: var(--gr-aufmacher);
  line-height: 1.02;
  letter-spacing: -.035em;
  max-width: 16ch;
}

.abschnitt {
  font-size: var(--gr-abschnitt);
  line-height: 1.22;
  letter-spacing: -.025em;
}

.beitragstitel {
  font-size: var(--gr-beitragstitel);
  line-height: 1.2;
  letter-spacing: -.022em;
}

.schritt {
  font-size: var(--gr-schritt);
  line-height: 1.25;
  letter-spacing: -.018em;
}

.vorspann {
  margin: 0;
  font-size: var(--gr-vorspann);
  line-height: 1.6;
  max-width: var(--breite-vorspann);
  text-wrap: pretty;
}

.fliess {
  margin: 0;
  font-size: var(--gr-fliess);
  line-height: 1.65;
  max-width: var(--breite-fliess);
  color: var(--schrift-gedaempft);
}

/* Verweis, der als Handlung gelesen werden soll: Mono, Versalien,
   Unterstrich in Zinnober. Der Akzent bedeutet ausschließlich
   „hier lässt sich handeln". */
.handlung {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--gr-mono);
  letter-spacing: var(--sperrung-mono);
  text-transform: uppercase;
  color: var(--akzent);
  border-bottom: 1px solid var(--akzent);
  padding-bottom: 3px;
}

/* Zwei Handlungen nebeneinander, im Aufmacher. */
.handlungen {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin-top: 44px;
}

.gedaempft { color: var(--etikett); }


/* -----------------------------------------------------------------------------
   5  Abstände zwischen Geschwistern

   Der senkrechte Abstand hängt davon ab, was oben und was unten steht.
   Deshalb steht er zwischen den Rollen und nicht am einzelnen Absatz.
   Abweichungen einzelner Abschnitte stehen unten bei dem Abschnitt.
   -------------------------------------------------------------------------- */

.aufmacher + .vorspann      { margin-top: 40px; }
.abschnitt + .vorspann      { margin-top: 26px; }
.abschnitt + .fliess        { margin-top: 26px; }
.abschnitt + .zeile         { margin-top: 22px; }
.vorspann  + .fliess        { margin-top: 16px; }
.vorspann  + .schritt       { margin-top: 56px; }
.fliess    + .fliess        { margin-top: 16px; }
.fliess    + .schritt       { margin-top: 56px; }
.schritt   + .fliess        { margin-top: 12px; }
.beitragstitel + .fliess    { margin-top: 12px; }
.etikett   + .beitragstitel { margin-top: 10px; }
.zeile     + .schritt       { margin-top: 6px; }
.fliess    + .handlung      { margin-top: 14px; }


/* -----------------------------------------------------------------------------
   6  Die Bildmarke

   Fassung 11b: vier Linien, die über ihre Kreuzungen hinauslaufen, und
   diagonal außerhalb ein rotes Quadrat. Kein Rahmen, keine Fugen, keine
   gefüllten Rasterzellen.

   Geometrie und Größe stehen im Makro makro/marke.njk und leiten sich dort
   aus einem einzigen Parameter ab, der Kantenlänge s des Quadrats. Das ist
   ein Parameter, kein Stil. Hier steht allein die Farbe.

   Die Stellung des Quadrats ist fest, unten rechts. Es gibt keine Varianten
   der Marke. Das zweite Zeichen der Seite, das Ordnungsquadrat, ist keine
   solche Variante: bei ihm füllt das Quadrat ein Feld bündig aus, sein Kasten
   misst 3 s statt 3,5 s, und es steht ausschließlich bei den drei Schritten
   der Arbeitsweise. Geometrie in makro/ordnungsquadrat.njk.

   Akzentregel: Nur das Quadrat der Kopfmarke ist Zinnober, weil allein die
   Kopfmarke verlinkt. Fußmarke und Ordnungsquadrate stehen in Grundfarbe.

   Das Favicon in src/assets/favicon.svg zeigt seit JC03 nur noch das rote
   Quadrat, ohne Raster, mit fest eingetragener Farbe: unter etwa 20 px
   Gesamtmaß verschmelzen die Linien, und ein Favicon liest dieses Blatt
   ohnehin nicht.
   -------------------------------------------------------------------------- */

.marke,
.ordnung {
  display: block;
  flex: none;
}

/* Beide Zeichen lesen dieselben Tokens. Die Regel steht zusammengefasst,
   damit Marke und Ordnungsquadrat farblich nicht auseinanderlaufen können. */
.marke__raster,
.ordnung__raster { fill: var(--marke-linie); }

.marke__feld,
.ordnung__feld   { fill: var(--schrift); }

.marke--akzent .marke__feld   { fill: var(--akzent); }
.marke--ruhig  .marke__raster { fill: var(--marke-linie-ruhig); }

/* Beim Überfahren dunkelt das Quadrat nach, wie jeder Verweis der Seite:
   --akzent-tief, 120 ms, sonst keine Bewegung. Kein Skalieren, kein Drehen.
   Bewusst nicht #C44534 aus Anlage 1 — der Wert gilt dort für dunklen Grund
   und wäre auf hellem heller als die Ruhefarbe. Die Marke würde aufhellen,
   während jeder Verweis daneben nachdunkelt.
   Die Rücknahme bei prefers-reduced-motion steht in Abschnitt 3. */
.marke--akzent .marke__feld { transition: fill 120ms; }
.kopf__marke:hover .marke--akzent .marke__feld { fill: var(--akzent-tief); }

/* Auf dunklem Grund. Derzeit trägt allein die Zäsur eine dunkle Fläche,
   und dort steht noch keine Marke. Die Regel steht trotzdem hier, sonst
   hätte --marke-linie-dunkel keinen Ort und wäre ein toter Token. */
.zaesur .marke__raster { fill: var(--marke-linie-dunkel); }
.zaesur .marke--akzent .marke__feld { fill: var(--akzent-dunkel); }


/* -----------------------------------------------------------------------------
   7  Gerüst: Blatt, Zweispalt, Einspalt
   -------------------------------------------------------------------------- */

/* Kein festes width. Bis 1440 wächst das Blatt mit, darüber steht es still. */
.blatt {
  position: relative;   /* Bezugsrahmen der Sprungmarke, siehe Abschnitt 3 */
  width: min(1440px, 100%);
  margin: 0 auto;
  background: var(--grund);
  color: var(--schrift);
}

/* Inhalt links, Randspalte rechts, dazwischen eine Haarlinie. */
.zweispalt {
  display: grid;
  grid-template-columns: 1fr var(--randspalte);
  border-bottom: 1px solid var(--haarlinie);
}

.zweispalt > .inhalt {
  padding: var(--rhythmus) var(--rand);
  border-right: 1px solid var(--haarlinie);
  min-width: 0;
}

/* Die Randspalte ist eine Beschreibungsliste. margin: 0 nimmt ihr den
   Standardabstand, den der Browser jeder <dl> mitgibt. */
.zweispalt > .randspalte {
  margin: 0;
  padding: var(--rhythmus) var(--rand) var(--rhythmus) var(--randspalte-abstand);
  font-family: var(--mono);
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

/* Der Aufmacher steht etwas tiefer als die übrigen Abschnitte. */
.zweispalt--aufmacher > .inhalt,
.zweispalt--aufmacher > .randspalte { padding-top: var(--rhythmus-gross); }

.randspalte .wert {
  font-size: var(--gr-randspalte);
  line-height: 1.8;
  margin-top: 7px;
  color: var(--schrift);
}

/* Die Randspalte bleibt Mono und bleibt klein, auch wenn sie unter den
   Inhalt rutscht. Sie wird nie zu Fließtext. */
.randspalte dt,
.randspalte dd { margin: 0; }

/* Abschnitt ohne Randspalte: Seitenkopf, Nachsatz, die Blöcke auf /en,
   die Rechtsseiten, die Fehlerseite. Gleicher Rand, gleicher Rhythmus,
   nur ohne die zweite Spalte. */
.einspalt {
  padding: var(--rhythmus) var(--rand);
  border-bottom: 1px solid var(--haarlinie);
}

.einspalt--kopf { padding-top: var(--rhythmus-gross); }

/* Zwischenüberschrift einer Gruppe. Ohne Haarlinie und ohne unteren
   Rhythmus: sie gehört zu dem, was unter ihr steht, und soll nicht als
   eigenes Band zwischen zwei Gruppen hängen. Der Abstand nach unten kommt
   dann allein aus dem Innenabstand des ersten Projekts. */
.einspalt--gruppe {
  border-bottom: 0;
  padding-bottom: 0;
}


/* -----------------------------------------------------------------------------
   8  Kopf, Metadatenband, Fuß
   -------------------------------------------------------------------------- */

.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 18px;
  padding: 26px var(--rand);
  border-bottom: 1px solid var(--haarlinie);
}

/* Abstand Marke zu Wortmarke: 1,8 s. Im Kopf ist s = 10, also 18 px. */
.kopf__marke {
  display: flex;
  align-items: center;
  gap: 18px;
  color: inherit;
}
.kopf__marke:hover { color: inherit; }

.kopf__nav {
  display: flex;
  gap: 38px;
  font-family: var(--mono);
  font-size: var(--gr-mono);
  letter-spacing: var(--sperrung-mono);
  text-transform: uppercase;
}

/* Zwei Zustände, eine Auszeichnung: die Seite selbst und der Bereich, in dem
   sie liegt. Sichtbar soll kein zweiter Zustand entstehen, deshalb steht hier
   ein Regelpaar und keine zweite Regel. */
.kopf__nav a[aria-current="page"],
.kopf__nav a.imbereich {
  color: var(--schrift);
  border-bottom: 1px solid var(--haarlinie);
  padding-bottom: 3px;
}

/* Metadatenband. Das Raster bleibt vierspaltig, auch wenn nur zwei Zellen
   gefüllt sind: die rechte Hälfte läuft leer aus. */
.band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--haarlinie);
  font-family: var(--mono);
  margin: 0;
}

.band__zelle { padding: 13px 0; }
.band__zelle:first-child { padding-left: var(--rand); }

.band dt { display: inline; }

.band dd {
  display: inline;
  margin: 0 0 0 14px;
  font-size: var(--gr-mono);
  letter-spacing: .1em;
}

/* Fuß. Der Satz steht auf jeder Seite, ohne Ausnahme. */
.fuss { padding: 64px var(--rand) 72px; }

.fuss__innen {
  display: grid;
  grid-template-columns: 1fr var(--randspalte);
  gap: 32px;
  align-items: start;
}

/* Im Fuß ist s = 13, 1,8 s sind also 23 px. */
.fuss__marke {
  display: flex;
  align-items: center;
  gap: 23px;
}

.fuss__hinweis {
  margin: 26px 0 0;
  font-size: 14px;
  line-height: 1.65;
  max-width: 62ch;
  color: var(--schrift-gedaempft);
}

/* Der Kontaktweg in der Fußzeile. Derselbe Abstand, mit dem der Hinweissatz
   unter der Fußmarke steht: die beiden Zeilen bilden einen Block. */
.fuss__mail { margin: 26px 0 0; }

.fuss__verweise {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--mono);
  font-size: var(--gr-mono);
  letter-spacing: var(--sperrung-mono);
  text-transform: uppercase;
  padding-left: var(--randspalte-abstand);
  border-left: 1px solid var(--haarlinie);
}

.fuss__vermerk { margin-top: 14px; }


/* =============================================================================
   9  Abschnitte der Startseite

   Abfolge: Kopf, Metadatenband, Aufmacher, Kennwerte, Arbeitsweise, Zäsur,
   SOKRATES, Beiträge, Person, Gespräch, Fuß.
   ============================================================================= */


/* --- Aufmacher -------------------------------------------------------------
   Klangzeile, beschlossene Positionierung, dann das Phänomen statt einer
   Zielgruppe. Die Phänomenzeile läuft schmaler als der übrige Fließtext.
   ------------------------------------------------------------------------- */

.zweispalt--aufmacher .vorspann + .fliess { margin-top: 20px; }
.zweispalt--aufmacher .fliess { max-width: 48ch; }


/* --- Kennwerte -------------------------------------------------------------
   Drei belegte Zahlen, ein Pixel Fuge, darunter der Satz, der die Disziplin
   sichtbar macht.
   ------------------------------------------------------------------------- */

.kennwerte-block { border-bottom: 1px solid var(--haarlinie); }

.kennwerte {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fuge);
  background: var(--haarlinie);
}

.kennwert {
  background: var(--grund);
  padding: 48px 52px 52px;
}
.kennwert:first-child { padding-left: var(--rand); }
.kennwert:last-child  { padding-right: var(--rand); }

.kennwert .zahl {
  font-size: var(--gr-kennwert);
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 600;
}

/* Die Aufschrift unter der Zahl. Sie hieß bis JC03 .marke; der Name gehört
   seither der Bildmarke. */
.kennwert__marke {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: var(--gr-mono);
  letter-spacing: var(--sperrung-mono);
  text-transform: uppercase;
  color: var(--etikett);
  line-height: 1.85;
}

.kennwerte__vermerk {
  margin: 0;
  padding: 20px var(--rand) 24px;
}


/* --- Womit ich arbeite ------------------------------------------------------
   Drei Felder in derselben Form wie die Kennwerte: ein Pixel Fuge, kein
   Rahmen, kein Radius. Der Abschnitt bringt keine eigene Gestaltung mit, er
   übernimmt die des Kennwerteblocks.
   ------------------------------------------------------------------------- */

.felder-block { border-bottom: 1px solid var(--haarlinie); }

.felder-kopf { padding: var(--rhythmus) var(--rand) 0; }

/* minmax(0, 1fr) statt 1fr: eine Spalte aus 1fr misst mindestens ihr
   längstes Wort. „Erfahrungswissen" bei 30 px ist breiter als ein Drittel
   von 900 px, und das Raster wüchse über das Blatt hinaus. Die Null nimmt
   der Spalte dieses Mindestmaß, danach greift die Silbentrennung unten. */
.felder {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--fuge);
  background: var(--haarlinie);
}

.feld {
  background: var(--grund);
  padding: 44px 52px 48px;
}
.feld:first-child { padding-left: var(--rand); }
.feld:last-child  { padding-right: var(--rand); }

/* In einer Spalte von rund 380 px ist die Zeilenbreite ohnehin gebunden. */
.feld .fliess { max-width: none; }

/* Die Überschriften tragen lange Zusammensetzungen — „Erfahrungswissen",
   „Lernstrukturen". Wo die Silbentrennung des Browsers greift, nimmt sie
   ihnen die Spitze. Verlassen kann man sich darauf nicht: ein Browser ohne
   deutsche Trennmuster tut hier nichts. Die Spalte muss deshalb von sich
   aus breit genug sein, siehe den Umbruchpunkt bei 1199. */
.feld .schritt { hyphens: auto; }

.felder__vermerk {
  margin: 0;
  padding: 20px var(--rand) 24px;
}


/* --- Arbeitsweise ----------------------------------------------------------
   Drei Schritte. Die Belege stehen seit JC03 gesammelt unter dem Dreiklang,
   nicht mehr in den einzelnen Schritten.
   ------------------------------------------------------------------------- */

.schritte {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  gap: 38px;
}

.schritt-zeile {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

.schritt-zeile .ordnung { margin-top: 6px; }

.schritt-zeile > div { min-width: 0; }

/* Die Belegzeile. Sie steht einmal unter dem Dreiklang und trägt deshalb den
   Abstand einer Geschwisterzeile, nicht den eines Nachsatzes. */
.schritte__beleg { margin-top: 38px; }

/* Zuordnung zu den Projekten, an denen der Ablauf belegt ist. */
.beleg {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: var(--gr-mono);
  line-height: 1.8;
  color: var(--etikett);
  padding-left: 14px;
  border-left: 1px solid var(--haarlinie);
  max-width: 52ch;
}


/* --- Zäsur -----------------------------------------------------------------
   Dunkler Grund. Genau einmal pro Seite.
   ------------------------------------------------------------------------- */

.zaesur {
  background: var(--grund-dunkel);
  color: var(--grund);
  padding: var(--rhythmus) var(--rand);
}

.zaesur__innen { max-width: 900px; }

.zaesur .abschnittsetikett { margin-bottom: 26px; }
.zaesur .etikett { color: var(--etikett-dunkel); }
.zaesur .fliess  { color: var(--gedaempft-dunkel); }

.haltung {
  margin: 0;
  font-size: var(--gr-beitragstitel);
  line-height: 1.35;
  letter-spacing: -.022em;
  font-weight: 600;
  max-width: 24ch;
  text-wrap: pretty;
}

.haltung + .fliess { margin-top: 30px; }


/* --- SOKRATES --------------------------------------------------------------
   Textführend gebaut. An der Bildstelle steht seit JC05 ein Standbild aus
   der Demositzung, kein Platzhalter und keine Ankündigung.

   Das Bauteil ist eine <figure>. Die Ränder ausdrücklich nullzustellen ist
   Pflicht: der Vorgabewert des Browsers ist 1em oben und unten und 40 px
   links und rechts, und die 40 px rücken das Bild aus der Textspalte.
   Das Bild selbst braucht keine eigene Regel, img steht in Abschnitt 3.
   ------------------------------------------------------------------------- */

.standbild {
  margin: 40px 0 0;
  max-width: 760px;
}

/* Der Vermerk unter dem Bild. Bis JC05 stand er als Überlagerung auf der
   Fläche und kam dort auf 2,16 zu 1. Auf Seitengrund kommt derselbe
   Mono-Grauton auf 4,66 zu 1.

   Er wandert deshalb unter das Bild, statt dass die Deckkraft erhöht wird:
   über einem echten Bildschirmfoto ist der Untergrund uneinheitlich dunkel,
   und dann entsteht dasselbe Problem in neuer Form. */
.standbild__vermerk {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: var(--gr-mono);
  line-height: 1.8;
  color: var(--etikett);
}

.standbild + .vorspann { margin-top: 34px; }
.standbild + .handlung { margin-top: 34px; }

/* Statuszeile über dem Standbild. Sie sagt, woran man ist, bevor das Bild
   etwas verspricht. */
.sokrates__status { display: block; margin-top: 34px; }

/* Der Abgrenzungsabsatz steht nach dem Standbild und mit dem Abstand eines
   eigenen Gedankens, nicht dem einer Fortsetzung. */
.sokrates__abgrenzung { margin-top: 34px; }


/* --- Beiträge, Anrisse -----------------------------------------------------
   Auf der Startseite und auf der Übersicht dieselbe Form. Jeder Anriss mit
   der senkrechten Linie angelegt. Kein Rahmen, kein Radius, kein Schatten.
   Keine sichtbaren Datumsangaben.
   ------------------------------------------------------------------------- */

.beitraege {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.anriss {
  border-left: 1px solid var(--haarlinie);
  padding-left: 26px;
}


/* --- Person ----------------------------------------------------------------
   Rasterzellen mit einem Pixel Fuge. Das Porträt steht ohne Rahmen,
   ohne Schatten, ohne Radius.
   ------------------------------------------------------------------------- */

.person {
  display: grid;
  grid-template-columns: calc(var(--portraet-breite) + var(--rand) * 2) 1fr;
  gap: var(--fuge);
  background: var(--haarlinie);
  border-bottom: 1px solid var(--haarlinie);
}

.person__bild {
  background: var(--grund);
  padding: var(--rhythmus-klein) var(--rand);
}

.person__text {
  background: var(--grund);
  padding: var(--rhythmus-klein) var(--rand) var(--rhythmus-klein) 52px;
}

.portraet {
  width: var(--portraet-breite);
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.person__text .fliess + .handlung { margin-top: 22px; }


/* --- Gespräch --------------------------------------------------------------
   Ersetzt „Anfrage". Die Adresse steht verschleiert, das noscript darunter
   ist nicht optional.
   ------------------------------------------------------------------------- */

.mailzeile {
  margin: 34px 0 0;
  font-family: var(--mono);
  font-size: var(--gr-fliess);
  letter-spacing: .06em;
}

.mailzeile a {
  border-bottom: 1px solid var(--akzent);
  padding-bottom: 4px;
}

.mail-ersatz {
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 14px;
}


/* =============================================================================
   10  Arbeit, Person, English, Rechtsseiten, Fehlerseite
   ============================================================================= */

/* Die Ecke: senkrechte Linie plus kurze Fußlinie. Kein Rahmen, kein Radius,
   kein Schatten. Sie legt einen Block an, ohne ihn einzukasteln.
   Die Fußlinie sitzt am Rand des Innenfeldes und setzt die senkrechte
   Linie ohne Versatz fort. */
.ecke {
  position: relative;
  border-left: 1px solid var(--haarlinie);
  padding-left: 26px;
  padding-bottom: 26px;
}

.ecke::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 1px;
  background: var(--haarlinie);
}

/* Mehrere Blöcke untereinander innerhalb eines Abschnitts. */
.stapel {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  gap: 44px;
}

/* Das Porträt auf /person, 520 breit. Ein einziger Wert: Bildspalte und
   Bild lesen beide denselben Token. */
.person--gross { --portraet-breite: 520px; }

/* Kopf einer Rechtsseite: Titel und Standzeile zusammen, darunter der
   erste Abschnitt im selben Abstand wie zwischen zwei Abschnitten. */
.rechtskopf { margin-bottom: 56px; }

/* Fehlerseite. Kein Einblenden, keine Bewegung, kein Ersatz dafür.
   Das Zitat trägt die Seite. Die griechische Zeile steht in der Schrift
   des Systems, siehe Abschnitt 1. */
.zitat { margin: 0; }
.zitat > * { margin: 0; }

.zitat__fremd {
  font-size: var(--gr-vorspann);
  line-height: 1.5;
  color: var(--schrift-gedaempft);
  max-width: 40ch;
}

.zitat__spruch {
  margin: 16px 0;
  max-width: 20ch;
}

.zitat__quelle { margin-top: 22px; }

.fehler__satz { margin-top: 40px; }
.fehler__en { margin-top: 40px; }

.fehler .fliess + .handlung { margin-top: 26px; }


/* =============================================================================
   11  Beitrag

   Eine Spalte, 65 bis 75 Zeichen. Der Fließtext eines Beitrags steht in
   voller Schriftfarbe, nicht gedämpft: hier ist er die Hauptsache und nicht
   die Begleitung eines Abschnitts.
   ============================================================================= */

.beitrag {
  padding: var(--rhythmus) var(--rand) var(--rhythmus-klein);
  border-bottom: 1px solid var(--haarlinie);
}

.beitrag__innen { max-width: var(--breite-beitrag); }

/* Brotkrumenpfad. Dieselbe Familie wie die kleinen Zeilen: Mono, dieselbe
   Größe, dieselbe gedämpfte Farbe. Ohne Versalien und ohne die weite
   Laufweite, weil der Titel unmittelbar darunter als h1 in gewöhnlicher
   Schreibung steht. Zweimal derselbe Satz in zwei Schreibweisen liest sich
   als Fehler. Die Standzeile bleibt davon unberührt: sie trägt kurze
   Angaben, dort tragen Versalien. */
.beitrag__pfad {
  font-family: var(--mono);
  font-size: var(--gr-mono);
  color: var(--etikett);
}

.beitrag__pfad + .abschnitt { margin-top: 22px; }

/* Sichtbare Standzeile. Steht nur bei Beiträgen, die an einem laufenden
   Verfahren hängen und altern. */
.beitrag__stand { display: block; margin-top: 22px; }

.beitrag__text {
  margin-top: 56px;
  color: var(--schrift);
}

.beitrag__text > :first-child { margin-top: 0; }

.beitrag__text p {
  margin: 16px 0 0;
  font-size: var(--gr-fliess);
  line-height: 1.65;
}

.beitrag__text h2 {
  margin: 56px 0 0;
  font-size: var(--gr-schritt);
  line-height: 1.25;
  letter-spacing: -.018em;
}

.beitrag__text h2 + p { margin-top: 12px; }

.beitrag__text strong { font-weight: 600; }
.beitrag__text em { font-style: italic; }

.beitrag__text a { border-bottom: 1px solid var(--akzent); }

.beitrag__text ul,
.beitrag__text ol {
  margin: 16px 0 0;
  padding-left: 22px;
  line-height: 1.65;
}
.beitrag__text li { margin-top: 6px; }

.beitrag__text hr {
  margin: 56px 0 0;
  border: 0;
  border-top: 1px solid var(--haarlinie);
}

/* Quellen stehen am Fuß des Textes, nicht in Klammern im Fließtext. */
.beitrag__quellen {
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid var(--haarlinie);
}

.quellenliste {
  margin: 0;
  padding-left: 20px;
  font-family: var(--mono);
  font-size: var(--gr-mono);
  line-height: 1.85;
  color: var(--etikett);
}
.quellenliste li { margin-top: 6px; }


/* =============================================================================
   12  Umbruchpunkte

   Vier Schwellen, sonst nichts. Der Entwurf ist auf 1440 gebaut, jede Stufe
   darunter ist eine Rücknahme, keine eigene Gestaltung.
   ============================================================================= */


/* --- 1200 bis 1439 ---------------------------------------------------------
   Rand 56, Randspalte 280. Sonst unverändert.
   ------------------------------------------------------------------------- */
@media (max-width: 1439px) {
  :root {
    --rand: 56px;
    --randspalte: 280px;
  }
}


/* --- 900 bis 1199 ----------------------------------------------------------
   Rand 48. Die Randspalte rutscht unter den Inhalt, über die volle Breite,
   zwei Spalten. Sie verliert die trennende Haarlinie links und bekommt eine
   oben. Kennwerte bleiben dreispaltig, Person bleibt Bild links.
   ------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  :root {
    --rand: 48px;

    --gr-aufmacher:     76px;
    --gr-abschnitt:     40px;
    --gr-beitragstitel: 30px;
    --gr-schritt:       28px;
    --gr-kennwert:      62px;
    --gr-vorspann:      20px;
    --gr-fliess:        17px;
  }

  .zweispalt { grid-template-columns: 1fr; }

  .zweispalt > .inhalt {
    border-right: 0;
    padding-bottom: var(--rhythmus-klein);
  }

  .zweispalt > .randspalte {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 48px;
    padding: 40px var(--rand) var(--rhythmus);
    border-top: 1px solid var(--haarlinie);
  }

  .zweispalt--aufmacher > .randspalte { padding-top: 40px; }

  /* Die drei Felder stellen sich hier untereinander, eine Stufe früher als
     die Kennwerte. Sie tragen Überschriften statt Zahlen, und bei 900 px
     bliebe je Spalte weniger Platz, als „Erfahrungswissen" bei 28 px
     braucht. Ab hier ist die Randspalte ohnehin unter den Inhalt gerückt,
     die Seite läuft also schon einspaltig. */
  .felder { grid-template-columns: 1fr; }
  .feld,
  .feld:first-child,
  .feld:last-child { padding: 40px var(--rand) 44px; }
}


/* --- 600 bis 899 -----------------------------------------------------------
   Rand 32. Rhythmus 64 bis 80. Kennwerte einspaltig, Person gestapelt,
   Bild über Text. Die Kopfnavigation bricht in eine zweite Zeile um, sie
   klappt nicht in ein Menü. Fünf Wörter brauchen kein Hamburger-Menü.
   ------------------------------------------------------------------------- */
@media (max-width: 899px) {
  :root {
    --rand: 32px;

    --rhythmus:       72px;
    --rhythmus-gross: 80px;
    --rhythmus-klein: 64px;

    --gr-aufmacher:     54px;
    --gr-abschnitt:     34px;
    --gr-beitragstitel: 27px;
    --gr-schritt:       25px;
    --gr-kennwert:      52px;
    --gr-vorspann:      19px;
    --gr-fliess:        17px;
  }

  .kopf__nav {
    flex-basis: 100%;
    gap: 26px;
    flex-wrap: wrap;
  }

  .band {
    grid-template-columns: 1fr 1fr;
    padding: 0 var(--rand);
  }
  .band__zelle,
  .band__zelle:first-child { padding: 11px 0; }

  /* Gestapelt läuft die Fuge waagrecht, ein Pixel bleibt ein Pixel. */
  .kennwerte { grid-template-columns: 1fr; }
  .kennwert,
  .kennwert:first-child,
  .kennwert:last-child { padding: 40px var(--rand) 44px; }

  .person { grid-template-columns: 1fr; }
  .person__text { padding: var(--rhythmus-klein) var(--rand); }

  .fuss__innen { grid-template-columns: 1fr; }
  .fuss__verweise {
    padding-left: 0;
    padding-top: 28px;
    border-left: 0;
    border-top: 1px solid var(--haarlinie);
  }
}


/* --- unter 600 -------------------------------------------------------------
   Rand 24. Rhythmus 48 bis 64. Randspalte einspaltig, Metadatenband
   einspaltig. Der Schritt stellt sich unter sein Zeichen.
   ------------------------------------------------------------------------- */
@media (max-width: 599px) {
  :root {
    --rand: 24px;

    --rhythmus:       56px;
    --rhythmus-gross: 64px;
    --rhythmus-klein: 48px;

    --gr-aufmacher:     40px;
    --gr-abschnitt:     28px;
    --gr-beitragstitel: 24px;
    --gr-schritt:       22px;
    --gr-kennwert:      44px;
    --gr-vorspann:      18px;
    --gr-fliess:        16px;
  }

  .zweispalt > .randspalte { grid-template-columns: 1fr; }

  .band { grid-template-columns: 1fr; }

  .kopf { padding: 20px var(--rand); }
  .kopf__nav { gap: 20px; }

  .schritt-zeile {
    flex-direction: column;
    gap: 18px;
  }
  .schritt-zeile .ordnung { margin-top: 0; }

  .fuss { padding: 48px var(--rand) 56px; }
}


/* -----------------------------------------------------------------------------
   13  Druck

   Ein Abschnitt in diesem Blatt, kein zweites. Ein zweites Blatt liefe
   auseinander, sobald hier ein Klassenname umbenannt wird, und der Fehler
   fiele erst am Papier auf.

   Der Farbwechsel läuft über die Tokens, nicht über einzelne Regeln.
   Wer die Werte an der Quelle umsetzt, erreicht damit auch jede Regel,
   die es hier noch nicht gibt. Das ist derselbe Grundsatz wie in
   Abschnitt 2: Werte stehen an einer Stelle.

   Der einzige neue Wert des ganzen Auftrags ist das reine Schwarz. Auf
   dem Bildschirm gilt --schrift mit #17171A, weil reines Schwarz auf
   leuchtendem Grund hart wird. Auf Papier fällt der Grund weg, und
   gefordert ist Schwarz.

   Die Haarlinie bleibt, wie sie ist. Auf Schwarz gesetzt tränte jede
   Trennlinie den Satz zu; als helles Grau trennt sie auf Papier genauso
   ruhig wie am Schirm.
   -------------------------------------------------------------------------- */

@media print {
  /* Fort: die Sprungmarke, die Kopfleiste, die Fußzeile. Alle drei führen
     auf Papier nirgends hin. Mit der Kopfleiste geht die Bildmarke, mit
     der Fußzeile der Kontaktweg. Beide stehen auf den Rechtsseiten im
     Fließtext, und die tragen die Angaben, auf die es ankommt. */
  .sprungmarke,
  .kopf,
  .fuss { display: none; }

  :root {
    --schrift:           #000;
    --schrift-gedaempft: #000;
    --etikett:           #000;
    --etikett-dunkel:    #000;
    --gedaempft-dunkel:  #000;
    --akzent:            #000;
    --akzent-dunkel:     #000;
    --akzent-tief:       #000;

    --grund:             #fff;
    --grund-dunkel:      #fff;
    --umfeld:            #fff;
  }

  /* Serifenlos bleibt es ohnehin, die Rolle steht seit Abschnitt 1 auf
     Plex Sans. Hier steht sie noch einmal, damit ein Druckertreiber ohne
     die eingebettete Schrift auf Helvetica oder Arial fällt und nicht auf
     die Serifenschrift, die viele Browser für den Druck vorgeben. */
  body {
    font-family: var(--sans);
    background: #fff;
    color: #000;
  }

  /* Die Zäsur ist der einzige Block auf dunklem Grund. Browser drucken
     Hintergründe im Regelfall nicht, ihr heller Text stünde dann weiß auf
     weiß. Über die Tokens oben ist er schwarz; die Fläche wird hier
     ausdrücklich weiß gesetzt, falls doch mit Hintergründen gedruckt wird. */
  .zaesur {
    background: #fff;
    color: #000;
  }

  /* Adressen externer Verweise nach dem Linktext. Auf Papier ist ein
     Verweis ohne Adresse eine Sackgasse.

     Nur externe: die Bedingung greift auf http, und im Auftritt ist jeder
     eigene Pfad wurzelabsolut geschrieben. Die eigenen Adressen stünden
     sonst hinter jedem „Weiterlesen" und wären Ballast. Der verschleierte
     Mailverweis trägt vor dem Skript href="#" und bleibt aus demselben
     Grund draußen; die Adresse steht auf den Rechtsseiten im Klartext.

     Nur in main: im Kopf und im Fuß gibt es nach der ersten Regel nichts
     mehr zu beschriften.

     break-all, weil die Fundstellen aus dem RIS länger sind als die
     Spalte breit ist. Ohne die Zeile liefe die Adresse über den Rand
     hinaus und wäre am Papier abgeschnitten. */
  main a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-family: var(--mono);
    font-size: var(--gr-mono);
    word-break: break-all;
  }
}