/* Journal. Gestaltung nach dem Magazin Cereal (Merkblatt 11.10.2026):
   eine Serife, wenige Groessen, Rangfolge durch Leerraum, Flattersatz.
   Die Hausschriften bleiben: Abhaya Libre traegt alles, DM Mono nur Zahlen
   und Daten. Keine zweite Schriftfamilie, keine zweite Farbe. */

.jo-blatt{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,64px) 160px}
/* Michael 15.10.2026: Ueberschrift ein Drittel kleiner (vorher 34 bis
   62 px) und in der Schrift von 'Journal': Cormorant Garamond 300 */
.jo-blatt h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  font-size:clamp(23px,3.47vw,41px);line-height:1.1;letter-spacing:-.005em;
  margin:0 0 14px;max-width:18ch}
.jo-zahl,.jo-datum{font-family:'DM Mono',ui-monospace,monospace;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--jo-leise,#8d8b85);margin:0}
.jo-zahl{margin-bottom:clamp(48px,9vw,110px)}
.jo-datum{margin-bottom:clamp(36px,6vw,64px)}

.jo-gross{margin:0 0 clamp(48px,8vw,104px)}
.jo-gross img{width:100%;height:auto;display:block}

.jo-text{max-width:62ch;margin:0 auto}

/* Schiene links (Michael 15.10.2026): Beitragsliste kompakt in Mono, beginnt
   oben neben der Ueberschrift, klebt die ganze Seite lang und gleitet UNTER
   den Bildern durch. Ueberschrift und Text stehen rechts davon in einer
   Flucht. Schmaler als 1180 px: Liste unter dem Text. */
.jo-rand{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:300;
  font-size:11px;line-height:1.45;color:#8a837b}
.jo-rand ol{list-style:none;margin:0 0 18px;padding:0}
/* Inhaltsverzeichnis wie im Heft Cereal: ohne Linien, Nummer, Titel in
   gesperrten Versalien, darunter der Monat leise. Alles Plex Mono. */
.jo-rand{font-size:11px;line-height:1.5}
.jo-rand ol{margin:0 0 34px}
.jo-rand li{margin:0 0 13px}
.jo-ein{display:flex;flex-direction:column;gap:1px}
.jo-nr{color:#736B5F}
.jo-kt{text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:#4E4843;font-weight:400}
.jo-mo{color:#746B60}
.jo-rand a:hover .jo-kt,.jo-rand a:focus-visible .jo-kt{color:#2A2622}
.jo-rand [aria-current] .jo-kt{color:#2A2622}
.jo-rand [aria-current]::before{content:none}
.jo-rand [aria-current] .jo-kt::before{content:"→ "}
.jo-rk{font-size:11px;letter-spacing:.14em;color:#4E4843;margin:0 0 22px}
.jo-rk span{display:block;letter-spacing:0;text-transform:none;color:#746B60;margin-top:2px}
.jo-rand a{color:inherit;text-decoration:none;transition:color .3s ease}
.jo-rand a:hover,.jo-rand a:focus-visible{color:#2A2622}
.jo-rand [aria-current]{color:#2A2622}
.jo-rk{margin:0 0 6px;color:#736B5F;text-transform:uppercase;letter-spacing:.12em;font-size:11px}
.jo-kopf{max-width:62ch;width:100%;margin:0 auto;padding-top:clamp(40px,6vw,80px)}
/* Ueberschrift wie auf readcereal.com (gemessen 15.10.2026: H1 Serife 14 px,
   Laufweite 0,8 px, mittig; darunter Versalien 12 px, gesperrt, mittig).
   Bei uns in Cormorant wie 'Journal', etwas groesser, weil Cormorant
   kleiner zeichnet; das Datum steht als Versalienzeile darunter. */
.jo-mitschiene .jo-kopf h1{text-align:center;margin:0 auto 14px;max-width:26ch;
  font-size:clamp(20px,1.6vw,24px);line-height:1.3;letter-spacing:.03em;text-wrap:balance}
.jo-mitschiene .jo-kopf .jo-datum{text-align:center;font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:400;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:#4E4843;margin-bottom:clamp(48px,6vw,80px)}
.jo-oben{display:flex;justify-content:space-between;align-items:center;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:400;font-size:12px;
  color:#4E4843;margin:0 0 clamp(40px,6vw,72px)}
.jo-oben a{color:inherit;text-decoration:none;transition:color .3s ease}
/* Grosse Klickfelder: Schrift bleibt 12 px, die Felder sind mindestens
   72 px hoch und 96 px breit (ab 760 px: 80 und 132) */
.jo-feld{display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:72px;min-width:96px;padding:0 20px;
  transition:color .3s ease,background-color .3s ease}
.jo-zurj{justify-content:flex-start;padding-left:0}
@media(min-width:760px){.jo-feld{min-width:132px;min-height:64px;gap:16px}}
a.jo-feld:hover,a.jo-feld:focus-visible{background:#E9E0D2;color:#2A2622}
/* Felder rund statt eckig und leicht beige (Michael 15.10.2026), Schrift dunkler und praesenter */
.jo-feld{border-radius:999px}
.jo-zurj{padding-left:22px!important;margin-left:-22px}
a.jo-feld:focus-visible{outline:2px solid #4E4843;outline-offset:-2px}
.jo-feld.jo-aus{opacity:.35}
/* Block ganz rechts (Michael 15.10.2026): "<- 02 / 11 ->" haengt als eine
   Gruppe an der rechten Textkante, der Pfeil steht auf der Kante. Die Felder
   bleiben gross, der Inhalt rueckt zur Mitte der Gruppe. */
.jo-nachbarn .jo-feld{min-width:68px;position:relative}
.jo-nachbarn .jo-feld:first-child{justify-content:flex-end;padding:0 14px 0 30px}
.jo-nachbarn .jo-feld:last-child{justify-content:flex-start;padding:0 0 0 14px}
/* das letzte Feld reicht 16 px ueber die Kante hinaus (Raender der Seite) */
.jo-nachbarn .jo-feld:last-child::after{content:"";position:absolute;right:-16px;top:0;bottom:0;width:16px}
.jo-oben .jo-nachbarn{margin-left:auto}
.jo-sl{opacity:.55}
.jo-oben a:hover,.jo-oben a:focus-visible{color:#2A2622}
.jo-nachbarn{display:inline-flex;gap:0;align-items:center}
.jo-nachbarn>span[aria-hidden]{opacity:.3}
.jo-mitschiene .jo-zahl{display:none}
.jo-schiene{order:9}
.jo-mitschiene{display:flex;flex-direction:column}
.jo-mitschiene .jo-schiene{order:5;max-width:62ch;margin:72px auto 0;width:100%}
.jo-mitschiene .jo-blaettern{order:6}.jo-mitschiene .jo-zurueck{order:7}
/* Blaettern und Zurueck in der Flucht des Textes, sonst schneidet ihre
   Linie durch die Schiene */
.jo-mitschiene .jo-blaettern,.jo-mitschiene .jo-zurueck{max-width:62ch;
  margin-left:auto;margin-right:auto;width:100%}
/* 'Alle Beitraege' mittig zwischen vorigem und naechstem Beitrag
   (Michael 15.10.2026); die Einrueckung kam aus dem Hausstil der Seite */
.jo-mitschiene .jo-zurueck{text-align:center;text-indent:0;padding:0}
.jo-mitschiene .jo-zurueck a{display:inline-block;padding:18px 28px;text-indent:0}
/* Strich weiter unten (Michael 15.10.2026: "sieht nicht gut aus, wenn er so
   dran haengt"): duenn und mit Abstand zur Schrift */
.jo-zurueck a{text-decoration-line:underline;text-decoration-thickness:1px;
  text-underline-offset:9px;text-decoration-color:rgba(61,55,51,.45)}
/* Inhalt: ab dem dritten Punkt erst nach dem ersten Bild sichtbar */
.jo-rand li.jo-mehr{opacity:0;transform:translateY(10px);visibility:hidden;
  transition:opacity .2s ease,transform .2s ease,visibility 0s .2s}
.jo-schiene-b.alle li.jo-mehr{opacity:1;transform:none;visibility:visible;
  transition:opacity .5s cubic-bezier(.23,1,.32,1),transform .5s cubic-bezier(.23,1,.32,1),visibility 0s;
  transition-delay:calc(var(--i) * 70ms)}
/* Staffel statt Ausklappen (Michael 15.10.2026: "viel besseres Ausklappen"): jeder Punkt hebt sich einzeln, im Abstand von 70 ms
   von oben nach unten, mit weichem Auslauf; die Liste behaelt ihren Platz, nichts verschiebt sich. Zurueck: schnell, ohne Staffel. */
@media(prefers-reduced-motion:reduce){.jo-rand li.jo-mehr{transform:none!important}.jo-rand li.jo-mehr,.jo-schiene-b.alle li.jo-mehr{transition:opacity .2s ease!important;transition-delay:0s!important}}
@media(min-width:1180px){
  .jo-mitschiene{display:block;position:relative}
  .jo-mitschiene .jo-schiene{position:absolute;top:0;bottom:0;margin:0;
    left:clamp(20px,5vw,64px);width:190px;max-width:none;z-index:0}
  /* die Liste klebt (Beginn und Ende setzt das Skript) */
  .jo-schiene-b{position:absolute;left:0;right:0;top:60vh;bottom:0}
  .jo-schiene-b .jo-rand{position:sticky;top:150px}
  .jo-mitschiene>*:not(.jo-schiene){position:relative;z-index:1}
  /* Die Textbloecke liegen ueber der Schiene und sind ueber die ganze Breite
     unsichtbar da: ohne das fingen sie jeden Klick auf die Liste ab
     (Michael 15.10.2026: "warum kann ich das nicht anklicken"). Klickbar
     bleibt alles, was darin wirklich steht. */
  .jo-mitschiene>*:not(.jo-schiene){pointer-events:none}
  .jo-mitschiene>*:not(.jo-schiene) *{pointer-events:auto}
}
}
.jo-text p,.jo-text li{font-family:'Abhaya Libre',Georgia,serif;
  font-size:clamp(18px,1.25vw,20px);line-height:1.62;margin:0 0 1.15em;
  text-align:left;hyphens:none}
.jo-text h2{font-family:'Abhaya Libre',Georgia,serif;font-weight:400;
  font-size:clamp(22px,1.9vw,27px);line-height:1.25;
  margin:clamp(44px,6vw,76px) 0 .5em}
.jo-liste{margin:0 0 1.15em;padding-left:1.1em}
.jo-ende{color:var(--jo-leise,#8d8b85);font-size:11px;margin-top:2em}

/* Bildreihe nach dem Text. Verschiedene Breiten, grosser Leerraum:
   im Heft traegt das Bild die Seite, hier traegt es den Schluss. */
.jo-bilder{display:grid;gap:clamp(24px,4vw,56px);
  margin:clamp(64px,10vw,130px) 0 0}
.jo-bilder figure{margin:0}
.jo-bilder img{width:100%;height:auto;display:block}
@media(min-width:760px){
  .jo-bilder{grid-template-columns:repeat(6,1fr)}
  .jo-bilder figure{grid-column:span 6}
  .jo-bilder figure:nth-child(2n){grid-column:span 4}
  .jo-bilder figure:nth-child(3n){grid-column:span 2;align-self:end}
}

.jo-blaettern{display:flex;justify-content:space-between;gap:24px;
  margin:clamp(72px,11vw,140px) 0 0;padding-top:24px;
  border-top:1px solid var(--jo-linie,#e2ded6)}
.jo-blaettern a{font-family:'Abhaya Libre',Georgia,serif;font-size:17px;
  line-height:1.3;max-width:22ch;text-decoration:none;padding:4px 0;margin:-4px 0}
.jo-nach{text-align:right;margin-left:auto}
.jo-blaettern a{min-width:0;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.jo-zurueck{font-family:'DM Mono',ui-monospace,monospace;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;margin:28px 0 0}

/* Verzeichnis: nummeriert, ohne Rubriken, eine Zeile je Beitrag. */
.jo-index h1{margin-bottom:18px}
.jo-vorwort{font-family:'Abhaya Libre',Georgia,serif;
  font-size:clamp(18px,1.3vw,21px);line-height:1.55;max-width:46ch;
  margin:0 0 clamp(56px,9vw,120px)}
.jv-liste{list-style:none;margin:0;padding:0}
.jv-z{border-top:1px solid var(--jo-linie,#e2ded6)}
.jv-z:last-child{border-bottom:1px solid var(--jo-linie,#e2ded6)}
.jv-z a{display:grid;grid-template-columns:3.2rem 1fr;gap:4px 18px;
  align-items:baseline;padding:22px 0;text-decoration:none}
.jv-n,.jv-d{font-family:'DM Mono',ui-monospace,monospace;font-size:12px;
  letter-spacing:.12em;color:var(--jo-leise,#8d8b85)}
.jv-t{font-family:'Abhaya Libre',Georgia,serif;
  font-size:clamp(20px,2vw,27px);line-height:1.22}
.jv-d{grid-column:2}
.jv-b{display:none}
@media(min-width:900px){
  .jv-z a{grid-template-columns:3.2rem minmax(0,1fr) 10rem 7rem;
    align-items:center;padding:26px 0}
  .jv-d{grid-column:3;text-align:right}
  .jv-b{display:block;grid-column:4;justify-self:end;width:112px;height:74px;
    overflow:hidden;opacity:.9}
  .jv-b img{width:100%;height:100%;object-fit:cover;display:block}
}
/* Verzeichnis im Archivsatz (Michael am 15.10.2026, Vorlage 'archival
   observation of light'): Papiergrund, je Blatt vier Bilder mit Buchstaben,
   Vorwort in Mono oben rechts, Legende unten links. Raster 12 Spalten.
   Titel stehen IMMER am eigenen Bild (Michael: "Text immer in der Naehe vom
   Bild"), aber nicht stur darunter: je Platz versetzt, mal links neben dem
   Bildfuss, mal links oben, mal darunter. */
/* Farbwechsel je Blatt (Michael 15.10.2026, Vorlage kai36.at: die Seite
   wechselt beim Scrollen ihr Farbschema). Zwei Toene aus dem Haus:
   Grund mit Tinte und Grund mit Ton (--akzent #8C5A3C). Das Skript am
   Seitenende setzt nur data-jx am body, alles andere ist CSS. */
/* Grund = Farbe der Menueleiste (--grund #F3EEE7, gemessen am Kopf),
   Michael 15.10.2026: "Hintergrund gleiche Farbe wie die Menuebar" */
body:has(.jx-index){--jx-bg:#F3EEE7;--jx-ink:#3D3733;--jx-text:#4E4843;
  --jx-leise:#79736D;--jx-stark:#2A2622;--jx-leer:#E9E3D9;
  background:var(--jx-bg);transition:background-color .9s cubic-bezier(.2,.7,.2,1)}
body[data-jx="ton"]:has(.jx-index){--jx-ink:#8C5A3C;--jx-text:#8C5A3C;
  --jx-leise:#A8846F;--jx-stark:#6E4428}
.jx-index{max-width:1240px}
.jx-index :is(h1,.jx-ct,.jx-bu,.jx-meta,.jx-vw,.jx-legende,.jx-lauf p){
  transition:color .9s cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){
  body:has(.jx-index),.jx-index :is(h1,.jx-ct,.jx-bu,.jx-meta,.jx-vw,.jx-legende,.jx-lauf p){transition:none}
}
.jx-index a{text-decoration:none;color:inherit}
.jx-blatt{display:grid;gap:14px;margin:0 0 clamp(96px,12vw,180px)}
.jx-erstes{padding-top:clamp(32px,6vw,72px)}
@media(min-width:960px){
  /* Michael 15.10.2026: "weiter runter, damit es nicht oben klemmt".
     Titel mit Luft unter dem Kopf, das erste Bild darunter. */
  .jx-erstes{padding-top:clamp(150px,14vw,210px)}
}
/* Titel 'Journal' in Cormorant Garamond 300 (Hausschrift, zart wie Cereal),
   Michael 15.10.2026: "Journal in einer anderen Schrift, die auch sticky ist" */
.jx-lauf h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  font-size:clamp(40px,3.6vw,56px);line-height:1;letter-spacing:-.01em;
  color:var(--jx-ink);margin:0 0 8px}
/* Michael 17.10.2026: Einstieg mehr nach Cereal: eine Serife, Rang durch Leerraum. Kopfzeile in Cormorant, Versalien, weit gesperrt, mit Haarlinie
   darueber; die Einleitung in derselben Serife, ruhig und gross genug zum Lesen. Zurueck: journal.css.vor-einstieg-17102026 */
/* Michael 17.10.2026: Struktur wie Block 01 auf Essen/Trinken: Kleinzeile (Mono, Versalien, gesperrt), Titelsatz in der Serife, Text in Mono,
   darunter Beschriftung ueber Wert (Themen, Jahr). Zurueck: journal.css.vor-struktur-17102026 */
.jx-kopf .jx-mk{margin:0;font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:300;font-size:11px;letter-spacing:.16em;text-transform:uppercase;line-height:1;color:var(--jx-leise)}
.jx-reg{display:flex;flex-direction:column;gap:20px;margin-top:clamp(28px,3.4vw,48px);font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:300}
.jx-reg .jx-rl{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;line-height:1;color:var(--jx-leise)}
.jx-reg .jx-rv{display:block;margin-top:8px;font-size:12.5px;line-height:1.6;letter-spacing:.01em;color:var(--jx-ink);max-width:36ch}
.jx-index .jx-reg{transition:color .9s cubic-bezier(.2,.7,.2,1)}
/* Michael 15.10.2026: Text an den Bildern in einer schoenen Mono, einheitlich,
   ohne Loecher. IBM Plex Mono (liegt schon unter /schriften), Buchstabe und
   Titel in derselben Schrift und Groesse, Zeilen ausgeglichen umbrochen. */
.jx-kopf p,.jx-c,.jx-legende{font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-weight:300;font-size:12.5px;line-height:1.6;letter-spacing:.01em;
  font-feature-settings:'zero' 0}
/* Michael 15.10.2026: "zart, wie bei Cereal". Plex Mono im Schnitt 300 (liegt
   in /schriften), dazu eine weiche Tinte statt Schwarz. */
.jx-kopf .jx-vw{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:300;font-size:12.5px;line-height:1.75;letter-spacing:.01em;
  max-width:36ch;margin:clamp(20px,2.2vw,32px) 0 clamp(32px,4vw,56px);text-wrap:pretty;
  /* Michael 15.10.2026: Vorwort 30 bis 40 % heller. Tinte #3D3733 zu 35 %
     Richtung Papier #E9E3D9 gemischt */
  color:var(--jx-leise)}
/* Michael 17.10.2026: "moderner, Schrift etwas kleiner, Mono dazu": der erste Satz in der Serife (klein), der Rest in Plex Mono */
.jx-kopf .jx-vw{margin-top:clamp(18px,2vw,28px)}
.jx-paare{display:grid;row-gap:10px;margin:0 0 clamp(96px,12vw,180px);padding:0 clamp(20px,5vw,64px)}
.jx-pz{display:flex;gap:10px;align-items:flex-start}
.jx-pz figure{margin:0;min-width:0}
.jx-pz figure:nth-child(1){flex:58 1 0}.jx-pz figure:nth-child(2){flex:42 1 0;margin-top:48px}
.jx-pz.jx-eins figure:nth-child(1){flex:1 1 100%}
.jx-pz.jx-um figure:nth-child(1){flex:44 1 0}.jx-pz.jx-um figure:nth-child(2){flex:56 1 0;margin-top:48px}
.jx-paare img{display:block;width:100%;height:auto}
@media(max-width:809px){.jx-pz,.jx-pz.jx-um{flex-direction:column}.jx-pz figure:nth-child(n){flex:none;width:100%;margin-top:0}}
.jx-vw .jx-lead{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:clamp(17px,1.35vw,20px);line-height:1.4;
  letter-spacing:0;color:var(--jx-ink);margin:0 0 14px}
.jx-f{display:block;position:relative}
.jx-b{display:block;overflow:hidden;background:var(--jx-leer)}
.jx-b img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
/* .jx-f:hover Bild-Zoom entfernt (Michael 19.10.2026: kein Effekt beim Darueberfahren) */
.jx-c{display:flex;flex-direction:column;gap:2px;margin-top:12px;max-width:30ch}
.jx-bu{color:var(--jx-leise)}
.jx-ct{color:var(--jx-text);text-wrap:balance;hyphens:none}
/* Zeigen ohne Unterstreichung (Michael 15.10.2026: "schaut nicht gut aus").
   Am Buchstaben waechst eine feine Linie, der Titel wird eine Spur dunkler.
   Die Linie waechst immer zur Bildkante hin, rechtsbuendige Texte darum von
   rechts. */
.jx-bu{display:inline-flex;align-items:center;gap:0}
.jx-bu::after{content:"";display:inline-block;height:1px;width:0;margin-left:0;
  background:currentColor;transition:width .45s cubic-bezier(.2,.7,.2,1),
  margin .45s cubic-bezier(.2,.7,.2,1)}
.jx-f:hover .jx-bu::after,.jx-f:focus-visible .jx-bu::after{width:32px;margin-left:10px}
.jx-ct{transition:color .3s ease}
.jx-f:hover .jx-ct,.jx-f:focus-visible .jx-ct{color:var(--jx-stark)}
@media(prefers-reduced-motion:reduce){
  .jx-bu::after,.jx-b img,.jx-ct{transition:none}
}
.jx-legende{list-style:none;padding:0;margin:8px 0 0;color:var(--jx-leise)}
.jx-1 .jx-b{aspect-ratio:7/5}
.jx-2 .jx-b{aspect-ratio:4/5}
.jx-3 .jx-b,.jx-4 .jx-b{aspect-ratio:4/5}
@media(max-width:959px){
  .jx-lauf{padding-top:clamp(32px,6vw,72px)}
  .jx-lauf p{display:none}
  .jx-meta{margin:0 0 8px}
  .jx-legende{display:none}
  .jx-blatt{gap:48px}
  /* am Handy abwechselnd links und rechts unter dem Bild */
  .jx-2 .jx-c,.jx-4 .jx-c{margin-left:auto;text-align:right;align-items:flex-end}
}
@media(min-width:960px){
  .jx-blatt{grid-template-columns:repeat(12,1fr);column-gap:24px;row-gap:0;
    grid-template-rows:auto auto auto}
  .jx-kopf{grid-column:8/13;grid-row:1}
  .jx-1{grid-column:1/7;grid-row:1/3}
  .jx-2{grid-column:8/13;grid-row:2/4;margin-top:clamp(40px,6vw,96px)}
  .jx-3{grid-column:5/9;grid-row:4;margin-top:clamp(96px,12vw,180px)}
  .jx-4{grid-column:9/13;grid-row:4;margin-top:clamp(96px,12vw,180px)}
  /* Legende unter das Bild (c), links bleibt frei fuer den Lauftext */
  .jx-legende{grid-column:5/9;grid-row:5;margin:20px 0 0}
  /* (a) darunter, eingerueckt bis hinter die Laufspalte */
  .jx-1 .jx-c{margin-left:calc((100% - 120px) / 2 + 72px)}
  /* Lauftext: zwei Spalten links, klebt im unteren Drittel und liegt
     UNTER den Bildern (Bilder z-index 1, deckend) */
  .jx-index{position:relative}
  .jx-lauf{position:absolute;top:0;bottom:0;left:clamp(20px,5vw,64px);
    width:calc((100% - 2 * clamp(20px,5vw,64px) - 264px) / 6 + 24px);z-index:0}
  /* Michael 15.10.2026: "Journal etwas mehr rechts". Das J haengt in
     Cormorant links ueber; 0,25 em ruecken es sichtbar nach innen. */
  /* zweites Mal 'mehr nach rechts': eine Rasterspalte eingerueckt */
  .jx-lauf h1{margin-left:calc((100% - 24px) / 2 + 24px);position:sticky;top:140px;font-size:clamp(34px,3.4vw,52px)}
  /* zwei Klebestellen: der Titel oben, das Vorwort unten; beide gleiten
     unter den Bildern durch. Getrennte Behaelter, und der des Titels endet
     320 px frueher, sonst schieben sich am Seitenende beide uebereinander. */
  .jx-lt{position:absolute;top:0;bottom:320px;left:0;right:0;
    padding-top:clamp(56px,6vw,88px)}
  /* Michael 15.10.2026: Vorwort 'drei Zeilen nach unten'. Volle 60 px schnitten es bei 900 px
     Fensterhoehe unten ab (6 Zeilen = 120 px, Abstand vorher 50 px). Darum klebt es jetzt am
     UNTEREN Rand, 16 px Luft, egal wie viele Zeilen es hat. */
  .jx-lv{position:absolute;top:0;bottom:0;left:0;right:0;display:flex;flex-direction:column;justify-content:flex-end}
  .jx-lauf p{position:sticky;bottom:16px;margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
    font-weight:400;font-size:16px;line-height:1.5;color:var(--jx-leise)}
  .jx-blatt{position:relative;z-index:1}
  .jx-meta{margin:6px 0 0;max-width:34ch}
  /* (b) links neben dem Bildfuss, rechtsbuendig zur Bildkante */
  .jx-2 .jx-c{position:absolute;right:calc(100% + 24px);bottom:0;margin:0;
    width:200px;text-align:right;align-items:flex-end}
  /* (c) links oben neben dem Bild */
  .jx-3 .jx-c{position:absolute;right:calc(100% + 24px);top:0;margin:0;
    /* hoechstens zwei Spalten breit, sonst reicht er in den Lauftext */
    width:min(180px, calc((100% - 72px) / 2 + 24px));text-align:right;align-items:flex-end}
  /* (d) darunter, rechtsbuendig */
  .jx-4 .jx-c{margin-left:auto;text-align:right;align-items:flex-end}
  /* Blaetter ohne Vorwort: das zweite Bild rueckt nach oben */
  .jx-blatt:not(.jx-erstes) .jx-2{grid-row:1/3;margin-top:clamp(96px,12vw,180px)}
}