/* Hallmark · genre: editorial · macrostructure: Long Document
 * nav: N3 Seitenschiene (links, 12.5rem, numeriert) · footer: Ft6 Briefschluß
 * theme: custom, aus der Vorlage gelesen · Achsen: Papier hell-kalt / Roman-Serife / Akzent kühl
 * enrichment: Tier B, acht Zeichnungen von Hand, unverändert übernommen
 * pre-emit critique: P5 H5 E4 S5 R4 V5
 *
 * Vorlage: Thomas Mann, Der Zauberberg. Projekt Gutenberg 65661 und 65662.
 * Übernommen ist nicht die Stimmung, sondern was dort an Bauart beschrieben
 * steht; jede Entscheidung unten nennt ihre Zeile.
 *
 *   Der Bau       Das Sanatorium wirkt »vor lauter Balkonlogen von weitem
 *                 löcherig und porös wie ein Schwamm« (Bd. I, 363). Die Seite
 *                 ist darum keine Kachelwand, sondern eine Fassade: ein Rand,
 *                 an dem entlang man geht, und dahinter die Logen.
 *   Die Trennung  Die Logen scheiden »undurchsichtige, nicht ganz bis zum
 *                 Geländer vortretende Glaswände« (Bd. I, 1714). Jede Trennlinie
 *                 hier hört vor der Kante auf. Das ist kein Effekt, das ist die
 *                 Stelle.
 *   Die Farbe     Die fernen Kulissen zeigen »ein nüchternes Schieferblau«
 *                 (Bd. I, 374); die Wände schimmern »weiß und hart, mit einer
 *                 lackartigen Ölfarbe überzogen« (Bd. I, 434). Papier ist darum
 *                 kalt und nicht creme. Der einzige Akzent ist das Licht aus dem
 *                 Stockloch im Schnee, »grünlich-blau, eisklar und doch
 *                 schattig« (Bd. II, 6316), und es erscheint nur dort, wo man
 *                 in die Fläche einsticht: Fokus, Unterstreichung, ein Zeiger.
 *   Der Ton       Der Saal ist gehalten »in jenem neuzeitlichen Geschmack,
 *                 welcher der sachlichsten Einfachheit einen gewissen
 *                 phantastischen Einschlag zu geben weiß« (Bd. I, 1940). Also
 *                 klinisch, geregelt, gezählt, und an genau einer Stelle falsch.
 *   Die Abweichung  Jeder Schneekristall ist »von unbedingtem Ebenmaß und
 *                 eisiger Regelmäßigkeit«, und eben darum schaudert dem Leben
 *                 davor; die Tempelbaumeister der Vorzeit brachten heimlich
 *                 kleine Abweichungen von der Symmetrie an (Bd. II, 6394).
 *                 Die Liegehalle unten steht auf 1fr 1fr 1.055fr. Die dritte
 *                 Loge ist um fünfeinhalb Prozent zu breit, mit Absicht, und
 *                 sie ist die einzige Unregelmäßigkeit dieser Seite.
 *
 * Zwei Schriften und eine dritte für Befehle. Newsreader spricht, wenn der
 * Erzähler spricht; Archivo, schmal gestellt, spricht, wenn die Anstalt
 * spricht, also bei Nummern, Daten, Fassungen und Wegen. Versalien mit
 * Sperrung kommen nirgends vor: das war die Marotte der vorigen Fassung.
 *
 * Bewegung, dreierlei und nicht mehr: die Zeichnungen, die Quecksilbersäule am
 * Rand, und das Aufdecken des Zettels. prefers-reduced-motion hebt alle drei
 * auf. Das gestaffelte Einrasten der Steine ist fort, samt den Steinen.
 */

/* ---------------------------------------------------------------- Farben --
   In OKLCH, damit die Helligkeiten vergleichbar bleiben und der dunkle Satz
   nicht geraten werden muß. Kein reines Weiß und kein reines Schwarz; beide
   sind zum Schieferblau hin getönt, wie es das Tal am Abend ist. */
:root{
  --papier:    oklch(97.2% 0.005 245);
  --papier-2:  oklch(94.0% 0.008 245);
  --tinte:     oklch(24% 0.020 252);
  --tinte-2:   oklch(47% 0.016 250);
  --linie:     oklch(83.5% 0.011 248);
  --linie-2:   oklch(68% 0.016 248);
  --schiefer:  oklch(52% 0.048 245);
  --eis:       oklch(53% 0.105 212);
  --eis-flach: oklch(93% 0.026 212);
  --queck:     oklch(55% 0.180 30);

  /* Die Zeichnungen haben ihre eigene, kleine Palette. Sie sind mit dem
     Strich der stummen Schwester gezeichnet und brauchen vier Flächenfarben. */
  --f-warm:   oklch(87% 0.055 82);
  --f-kalt:   oklch(80% 0.045 240);
  --f-tabak:  oklch(72% 0.070 58);
  --f-dunkel: oklch(32% 0.020 250);

  --schrift-satz: 'Newsreader', ui-serif, Georgia, 'Times New Roman', serif;
  --schrift-amt:  'Archivo', ui-sans-serif, system-ui, sans-serif;
  --schrift-code: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Eine Terz, von 17px aus. Der Fließtext ist eine Serife und darf einen
     Deut größer stehen als eine Grotesk gleicher Wirkung. */
  --t-2xs:  0.75rem;
  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: 1.0625rem;
  --t-md:   1.1875rem;
  --t-lg:   1.5rem;
  --t-xl:   1.9375rem;
  --t-2xl:  clamp(2.1rem, 1.4rem + 2.6vw, 3.2rem);

  --s-3xs:4px; --s-2xs:8px; --s-xs:12px; --s-sm:16px; --s-md:24px;
  --s-lg:32px; --s-xl:48px; --s-2xl:64px; --s-3xl:96px; --s-4xl:128px;

  --rand-breite:12.5rem;
  --gasse:clamp(20px, 4vw, 56px);
  --bogen:74rem;
  --mass:62ch;

  --ease-aus:cubic-bezier(0.22,0.61,0.36,1);
  --ease-ein:cubic-bezier(0.55,0.06,0.68,0.19);
  --dur-kurz:120ms; --dur-mittel:220ms;
  color-scheme:light dark;
}

/* Die Liegekur bei Nacht. »Draußen war das trübe Nichts« (Bd. II, 5964), und
   drunten im Tal brennen die Lichter. Papier wird das nächtliche Tal, Tinte
   das Schneelicht darüber. Die Regel steht zweimal, weil die Voreinstellung
   des Systems keine Marke setzt und der Umschalter dennoch gewinnen muß. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="hell"]){
    --papier:    oklch(20.5% 0.016 252);
    --papier-2:  oklch(24.5% 0.017 252);
    --tinte:     oklch(91% 0.008 245);
    --tinte-2:   oklch(69% 0.012 246);
    --linie:     oklch(35.5% 0.017 250);
    --linie-2:   oklch(45% 0.018 250);
    --schiefer:  oklch(72% 0.045 245);
    --eis:       oklch(80% 0.090 205);
    --eis-flach: oklch(32% 0.045 212);
    --queck:     oklch(67% 0.165 32);
    --f-warm:    oklch(58% 0.055 82);
    --f-kalt:    oklch(44% 0.045 240);
    --f-tabak:   oklch(48% 0.070 58);
    --f-dunkel:  oklch(14% 0.016 250);
  }
}
:root[data-theme="dunkel"]{
  --papier:    oklch(20.5% 0.016 252);
  --papier-2:  oklch(24.5% 0.017 252);
  --tinte:     oklch(91% 0.008 245);
  --tinte-2:   oklch(69% 0.012 246);
  --linie:     oklch(35.5% 0.017 250);
  --linie-2:   oklch(45% 0.018 250);
  --schiefer:  oklch(72% 0.045 245);
  --eis:       oklch(80% 0.090 205);
  --eis-flach: oklch(32% 0.045 212);
  --queck:     oklch(67% 0.165 32);
  --f-warm:    oklch(58% 0.055 82);
  --f-kalt:    oklch(44% 0.045 240);
  --f-tabak:   oklch(48% 0.070 58);
  --f-dunkel:  oklch(14% 0.016 250);
}

/* --------------------------------------------------------------- Schrift -- */
@font-face{ font-family:'Newsreader'; src:url(/fonts/newsreader.woff2) format('woff2');
  font-weight:200 800; font-style:normal; font-display:swap }
@font-face{ font-family:'Newsreader'; src:url(/fonts/newsreader-italic.woff2) format('woff2');
  font-weight:200 800; font-style:italic; font-display:swap }
@font-face{ font-family:'Archivo'; src:url(/fonts/archivo.woff2) format('woff2');
  font-weight:100 900; font-stretch:62% 125%; font-style:normal; font-display:swap }
@font-face{ font-family:'JetBrains Mono'; src:url(/fonts/jetbrains-mono.woff2) format('woff2');
  font-weight:100 800; font-style:normal; font-display:swap }

/* ---------------------------------------------------------------- Grund -- */
*,*::before,*::after{ box-sizing:border-box }
html,body{ overflow-x:clip }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; min-height:100svh;
  background:var(--papier); color:var(--tinte);
  font-family:var(--schrift-satz); font-optical-sizing:auto;
  font-size:var(--t-base); line-height:1.66;
  -webkit-font-smoothing:antialiased;
}
p,figure,ul,ol,dl,blockquote{ margin:0 }
h1,h2,h3{ margin:0; font-weight:500; font-style:normal; line-height:1.14;
  letter-spacing:-0.006em; overflow-wrap:anywhere; min-width:0 }
a{ color:inherit }
img,svg{ max-width:100% }

/* Der Fokus zeigt sich sofort und wird nie eingeblendet. Das Eis trägt hier
   gegen Papier 3,7 zu 1 und gegen den Nachtgrund 7,6 zu 1. */
:focus-visible{ outline:2px solid var(--eis); outline-offset:3px; border-radius:1px }

.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }
.skip{ position:absolute; left:-9999px }
.skip:focus{ left:var(--s-sm); top:var(--s-sm); z-index:60; background:var(--papier-2);
  color:var(--tinte); padding:var(--s-2xs) var(--s-sm); border:1px solid var(--linie-2) }
.symbols{ position:absolute; width:0; height:0 }

/* Die Zahlen der Anstalt: Zimmernummern, Daten, Fassungen, Wege. Archivo,
   schmal gestellt, klein, in gemischter Schreibung. Keine Sperrung, keine
   Versalien; das eine wie das andere war der Griff, den die vorige Fassung
   auf jeder Zeile wiederholte. */
.amt{ font-family:var(--schrift-amt); font-size:var(--t-xs);
  font-stretch:82%; font-weight:500; letter-spacing:0.005em; line-height:1.4;
  font-variant-numeric:tabular-nums; color:var(--tinte-2) }
.zahl{ font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1 }

/* ------------------------------------------------------------- Der Bau ----
   Ein Rand und ein Saal. Der Rand ist die Vertäfelung des Korridors, der Saal
   die geweißte Wand darüber; im Speisesaal des Berghofs war es dieselbe
   Teilung, nur waagerecht (Bd. I, 1940). Die Linie dazwischen läuft durch die
   ganze Höhe der Seite und ist das einzige durchgehende Bauteil. */
.haus{ display:grid; grid-template-columns:var(--rand-breite) minmax(0,1fr);
  min-height:100svh; align-items:stretch }
.saal{ display:flex; flex-direction:column; min-width:0 }
.saal > main{ flex:1 0 auto; min-width:0 }

.rand{ background:var(--papier-2); border-inline-end:1px solid var(--linie);
  min-width:0 }
.rand__innen{ position:sticky; top:0; display:flex; flex-direction:column;
  gap:var(--s-md); height:100svh; padding:var(--s-md) var(--s-sm) var(--s-md) var(--gasse) }

.rand__marke{ display:flex; align-items:center; gap:var(--s-2xs);
  text-decoration:none; font-size:var(--t-md); font-weight:500;
  letter-spacing:-0.01em }
.rand__marke .sis{ width:17px; flex:none }

.rand__wege{ list-style:none; margin:0; padding:0; display:grid; gap:1px }
.rand__wege a{ display:grid; grid-template-columns:1.6rem 1fr; align-items:baseline;
  gap:var(--s-2xs); padding:var(--s-3xs) 0; text-decoration:none;
  font-size:var(--t-sm); color:var(--tinte-2);
  transition:color var(--dur-kurz) var(--ease-aus) }
.rand__wege a:hover{ color:var(--tinte) }
.rand__wege a[aria-current="page"]{ color:var(--tinte) }
.rand__wege .nr{ font-family:var(--schrift-amt); font-stretch:82%; font-weight:500;
  font-size:var(--t-2xs); color:var(--linie-2); font-variant-numeric:tabular-nums }
.rand__wege a[aria-current="page"] .nr{ color:var(--queck) }

/* Die Höhe des Hauses. »Sechzehnhundert Meter über dem Meer. Da kommen die
   Erhebungen nicht so zur Geltung.« (Bd. I, 394.) */
.rand__hoehe{ margin-top:auto }

/* Die Quecksilbersäule. Sie mißt, während gelesen wird, und trägt keine
   Bezifferung, weil die stumme Schwester keine hatte. Ohne
   animation-timeline bleibt eine leere Röhre stehen, was sachlich richtig
   ist: dann sagt sie eben gar nichts. */
.saeule{ display:flex; align-items:flex-end; gap:var(--s-2xs);
  height:5.5rem; flex:none }
.saeule__rohr{ position:relative; width:3px; height:100%; border-radius:2px;
  background:var(--linie); overflow:hidden }
@supports (animation-timeline: scroll()){
  .saeule__rohr::after{ content:''; position:absolute; inset-inline:0; bottom:0;
    height:100%; background:var(--queck); transform-origin:bottom; transform:scaleY(0);
    animation:steigen linear both; animation-timeline:scroll(root block) }
}
@keyframes steigen{ to{ transform:scaleY(1) } }

.rand__ton{ font:inherit; font-family:var(--schrift-amt); font-stretch:82%;
  font-size:var(--t-xs); font-weight:500; color:var(--tinte-2);
  background:none; border:0; padding:0; cursor:pointer; text-align:start;
  transition:color var(--dur-kurz) var(--ease-aus) }
.rand__ton:hover{ color:var(--tinte) }
.rand__ton::before{ content:''; display:inline-block; width:8px; height:8px;
  margin-inline-end:6px; border-radius:50%; border:1px solid currentColor;
  background:linear-gradient(90deg, currentColor 50%, transparent 50%) }

/* Unter 64rem legt der Rand sich hin und wird ein Band über dem Saal. Eine
   Schiene, die schmaler ist als das, was sie trägt, ist keine Schiene mehr. */
@media (max-width:64rem){
  .haus{ display:block }
  .rand{ border-inline-end:0; border-block-end:1px solid var(--linie);
    position:sticky; top:0; z-index:40 }
  .rand__innen{ position:static; height:auto; flex-direction:row; flex-wrap:wrap;
    align-items:center; gap:var(--s-sm); padding:var(--s-2xs) var(--gasse) }
  .rand__wege{ display:flex; flex-wrap:wrap; gap:var(--s-sm); margin-inline-end:auto }
  .rand__wege a{ display:block; padding:0 }
  .rand__wege .nr{ display:none }
  .rand__hoehe,.saeule{ display:none }
}

/* ---------------------------------------------------------------- Bogen --
   Die Textspalte. Sie steht links und nicht in der Mitte; der leere Raum
   rechts ist der Rand des Buches und trägt die Zeichnungen. */
.bogen{ max-width:var(--bogen); padding-inline:var(--gasse); min-width:0 }
.satz{ max-width:var(--mass) }
.satz + .satz{ margin-top:var(--s-md) }
.satz--gross{ font-size:var(--t-md); line-height:1.6 }

.zug{ padding-block:var(--s-2xl) }
.zug + .zug{ padding-top:0 }
.zug__kopf{ font-size:var(--t-lg); font-weight:500; max-width:26ch }
.zug__vor{ margin-bottom:var(--s-md) }
.zug__kopf + .satz{ margin-top:var(--s-sm) }
.nachsatz{ margin-top:var(--s-md); color:var(--tinte-2); font-size:var(--t-sm) }

/* Der Vorsatz. Der Roman beginnt mit einem solchen, in dem der Erzähler dem
   Leser sagt, wie erzählt werden wird, ehe er erzählt. */
.vorsatz{ padding-block:var(--s-2xl) var(--s-xl) }
.vorsatz h1{ font-size:var(--t-2xl); font-weight:400; max-width:19ch;
  letter-spacing:-0.014em }
.vorsatz .satz{ margin-top:var(--s-lg) }
.paar{ display:grid; gap:var(--s-xl); align-items:start }
@media (min-width:78rem){ .paar{ grid-template-columns:minmax(0,1fr) 17rem } }

/* ----------------------------------------------------------- Liegehalle --
   Drei Logen nebeneinander, wie am Bau. Die Scheidewand ist eine Haarlinie,
   die vor dem Geländer aufhört, denn so steht es in Bd. I, 1714. Das
   Geländer selbst ist die stärkere Regel unter dem Band.

   Und hier steht die eine Abweichung: 1.055fr in der dritten Spalte. Die
   Grundmaße vor die Ausnahmen, weil eine Medienabfrage die Spezifität nicht
   erhöht und ein späteres Grundmaß bei jeder Breite gewönne. */
.liegehalle{ display:grid; margin-top:var(--s-lg); grid-template-columns:1fr 1fr 1.055fr;
  border-block-end:1px solid var(--linie-2); padding-block-end:var(--s-lg) }
.loge{ position:relative; padding-inline:var(--s-lg); min-width:0 }
.loge:first-child{ padding-inline-start:0 }
.loge:last-child{ padding-inline-end:0 }
.loge + .loge::before{ content:''; position:absolute; inset-block:0 var(--s-lg);
  inset-inline-start:0; width:1px; background:var(--linie) }
.loge a{ text-decoration:none; display:block }
.loge__datum{ display:block; margin-bottom:var(--s-2xs) }
.loge__titel{ display:block; font-size:var(--t-md); font-weight:500;
  line-height:1.24; text-wrap:pretty }
.loge__kurz{ display:block; margin-top:var(--s-2xs); font-size:var(--t-sm);
  color:var(--tinte-2); max-width:34ch }
.loge a:hover .loge__titel{ text-decoration:underline;
  text-decoration-color:var(--eis); text-decoration-thickness:1px;
  text-underline-offset:3px }
@media (max-width:56rem){
  .liegehalle{ grid-template-columns:minmax(0,1fr); gap:var(--s-lg) }
  .loge{ padding-inline:0 }
  .loge + .loge::before{ inset-block:calc(var(--s-lg) * -0.5) auto;
    inset-inline:0 var(--s-lg); width:auto; height:1px }
}

/* --------------------------------------------------------------- Tafel ---
   Das Verzeichnis der Stücke, gesetzt wie eine Kurliste: eine Zeile je Stück,
   Haarlinien dazwischen, die Zahlen tabellarisch. Breites scrollt in seiner
   eigenen Hülle; die Seite selbst scrollt nie waagerecht. */
.tafel-huelle{ overflow-x:auto; margin-top:var(--s-md) }
.tafel{ width:100%; border-collapse:collapse; font-size:var(--t-sm);
  text-align:start }
.tafel th,.tafel td{ text-align:start; vertical-align:baseline;
  padding:var(--s-xs) var(--s-md) var(--s-xs) 0;
  border-block-end:1px solid var(--linie) }
.tafel th{ font-family:var(--schrift-amt); font-stretch:82%; font-weight:600;
  font-size:var(--t-2xs); color:var(--tinte-2); border-block-end-color:var(--linie-2);
  padding-block:var(--s-2xs) }
.tafel td:last-child,.tafel th:last-child{ padding-inline-end:0 }
.tafel .nr{ font-family:var(--schrift-amt); font-stretch:82%; font-weight:500;
  font-size:var(--t-2xs); color:var(--linie-2); white-space:nowrap }
.tafel .stueck{ font-size:var(--t-base); font-weight:500; white-space:nowrap }
.tafel .stueck .weiter{ text-decoration:none }
.tafel .stueck .weiter:hover{ text-decoration:underline; text-decoration-style:solid;
  text-decoration-color:var(--eis); text-decoration-thickness:1px;
  text-underline-offset:4px }
.tafel .was{ color:var(--tinte-2); min-width:22ch }
.tafel .fassung,.tafel .sprache{ font-family:var(--schrift-amt); font-stretch:82%;
  font-size:var(--t-xs); color:var(--tinte-2); white-space:nowrap;
  font-variant-numeric:tabular-nums }
.tafel tr:last-child td{ border-block-end:0 }

/* Der Befehl, der das Stück herbeischafft. Er steht in der Zeile und nicht in
   einem Kasten; ein Kasten je Zeile wäre wieder die Kachelwand. */
.befehl{ font-family:var(--schrift-code); font-size:var(--t-xs);
  color:var(--tinte-2); white-space:nowrap }

/* --------------------------------------------------------- Der Verweis ---
   C3: ein Wort und eine Linie. Kein Knopf, keine Füllung, kein Pfeil an
   jedem Ende. Die Linie ist gepunktet, solange nichts geschieht, und wird
   fest, sobald der Zeiger darauf liegt; das ist das ganze Ereignis. */
.weiter{ text-decoration:underline; text-decoration-style:dotted;
  text-decoration-color:var(--linie-2); text-decoration-thickness:1px;
  text-underline-offset:4px;
  transition:text-decoration-color var(--dur-kurz) var(--ease-aus) }
.weiter:hover{ text-decoration-style:solid; text-decoration-color:var(--eis) }
.zug .weiter,.art__leib a,.gruss a{ color:inherit }
.art__leib a,.gruss a{ text-decoration:underline; text-decoration-thickness:1px;
  text-decoration-color:var(--linie-2); text-underline-offset:3px;
  transition:text-decoration-color var(--dur-kurz) var(--ease-aus) }
.art__leib a:hover,.gruss a:hover{ text-decoration-color:var(--eis) }

/* ----------------------------------------------------------- Die Figuren --
   Acht Zeichnungen im Strich der stummen Schwester: Umriß 5, Feinstrich 3.2,
   runde Enden, Füllung stets var(--papier-2), Farbe nur über Variablen und in
   SVG nur currentColor und var(--..).

   Sie stehen unmittelbar in der Auszeichnung und nicht über <use>: eine Regel
   von außen erreicht den Schatten eines <use> nicht, und ohne sie bliebe die
   Bewegung aus. Jede Figur kommt darum höchstens einmal je Seite vor.
   Entworfen und in Arbeitsgröße geprüft in prototype/zauberberg-figuren.html. */
.fig{ display:block; width:100%; height:auto; color:var(--tinte);
  stroke-linecap:round; stroke-linejoin:round }
.fig .koerper{ fill:var(--papier-2); stroke:currentColor; stroke-width:5 }
.fig .ink{ fill:none; stroke:currentColor; stroke-width:5 }
.fig .fein{ fill:none; stroke:currentColor; stroke-width:3.2 }
.fig .dick{ fill:none; stroke:currentColor; stroke-width:6.5 }
.fig .rahmen{ fill:none; stroke:currentColor; stroke-width:8 }
.fig .voll{ fill:currentColor; stroke:none }
.fig .zart{ fill:none; stroke:currentColor; stroke-width:2; opacity:0.4 }

/* Die Bühne ist der Grund, auf dem die Zeichnung steht, und sie schneidet ab,
   was hinausläuft; darum kann die Wolke von außen hereinziehen. Sie hat keinen
   Schlagschatten mehr: was hier liegt, liegt flach auf dem Papier. */
.buehne{ background:var(--papier-2); border:1px solid var(--linie);
  padding:var(--s-xs); overflow:hidden }
.figur{ margin:0; display:grid; gap:var(--s-2xs); align-content:start;
  max-width:22rem }
.figur figcaption{ font-size:var(--t-sm); color:var(--tinte-2); line-height:1.5 }
.figur figcaption .amt{ display:block; color:var(--tinte); margin-bottom:2px }
.figur--breit{ max-width:30rem }

.sis{ aspect-ratio:17 / 44; height:auto; display:block; color:var(--tinte) }
.sis--sm{ width:52px }

/* ----------------------------------------------------------- Der Zettel ---
   Die Tiefe hängt an data-tip und nicht in einem Absatz. Ohne Skript bleibt
   die Kurzform stehen und die Seite vollständig lesbar; das Skript setzt den
   Ort über element.style, was eine Richtlinie mit style-src 'self' erlaubt,
   denn sie verbietet das Merkmal in der Auszeichnung und nicht das CSSOM. */
[data-tip]{ cursor:help; text-decoration:underline; text-decoration-style:dotted;
  text-decoration-color:var(--linie-2); text-underline-offset:3px;
  text-decoration-thickness:1px }
.tip{ position:fixed; z-index:80; max-width:38ch; background:var(--tinte);
  color:var(--papier); padding:var(--s-2xs) var(--s-xs);
  font-family:var(--schrift-amt); font-stretch:88%; font-size:var(--t-xs);
  line-height:1.55; pointer-events:none; opacity:0;
  /* Nicht bloss durchsichtig, sondern verborgen: ein bloss durchsichtiger
     Zettel bleibt im Baum der Hilfsmittel stehen und wird vorgelesen, obgleich
     niemand ihn angesehen hat. Die Sichtbarkeit springt erst am Ende der
     Blende, damit das Verschwinden dennoch weich bleibt. */
  visibility:hidden;
  transition:opacity var(--dur-kurz) var(--ease-aus),
             visibility 0s linear var(--dur-kurz) }
.tip.an{ opacity:1; visibility:visible; transition-delay:0s }

/* ------------------------------------------------------------ Fließtext ---
   Die Beitragsseite. Ein Maß, eine Spalte, und Zwischenüberschriften, die aus
   dem Satz auftauchen statt über ihm zu schweben. */
.art{ padding-block:var(--s-3xl) var(--s-4xl); max-width:var(--mass) }
.art h1{ font-size:var(--t-xl); font-weight:400; letter-spacing:-0.012em;
  margin-top:var(--s-sm) }
.art__daten{ margin-top:var(--s-md) }
.art__leib{ margin-top:var(--s-xl); font-size:var(--t-md) }
.art__leib > * + *{ margin-top:var(--s-md) }
.art__leib h2{ font-size:var(--t-lg); font-weight:500; margin-top:var(--s-2xl) }
.art__leib pre{ background:var(--papier-2); border:1px solid var(--linie);
  padding:var(--s-md); overflow-x:auto; font-family:var(--schrift-code);
  font-size:var(--t-sm); line-height:1.6 }
.art__leib blockquote{ padding-inline-start:var(--s-md);
  border-inline-start:2px solid var(--linie-2); color:var(--tinte-2);
  font-style:italic }
.art__leib table{ width:100%; border-collapse:collapse; font-size:var(--t-sm);
  display:block; overflow-x:auto }
.art__leib th,.art__leib td{ text-align:start; padding:var(--s-2xs) var(--s-md) var(--s-2xs) 0;
  border-block-end:1px solid var(--linie); vertical-align:top }
.art__leib th{ font-family:var(--schrift-amt); font-stretch:82%; font-size:var(--t-2xs);
  font-weight:600; color:var(--tinte-2); border-block-end-color:var(--linie-2);
  white-space:nowrap }
.art__leib code{ font-family:var(--schrift-code); font-size:0.9em;
  background:var(--eis-flach); padding:0 3px }
.art__leib pre code{ background:none; padding:0 }
.art__leib figure{ margin-block:var(--s-xl) }
.art--rand{ max-width:56ch }

/* --------------------------------------------------------- Der Katalog ---
   Die einzige Seite, die etwas von auswärts holt, und auch das erst auf
   Verlangen. Der Knopf ist ein Umriß und keine Fläche. */
.sql{ display:grid; gap:var(--s-2xs); margin-top:var(--s-lg) }
.sql textarea{ width:100%; min-height:8rem; resize:vertical;
  font-family:var(--schrift-code); font-size:var(--t-sm); line-height:1.55;
  color:var(--tinte); background:var(--papier-2);
  border:1px solid var(--linie-2); padding:var(--s-2xs) var(--s-xs) }
.sql textarea:focus-visible{ border-color:var(--eis) }
.btn{ font-family:var(--schrift-amt); font-stretch:82%; font-size:var(--t-xs);
  font-weight:600; cursor:pointer; padding:var(--s-2xs) var(--s-md);
  background:none; color:var(--tinte); border:1px solid var(--linie-2);
  transition:border-color var(--dur-kurz) var(--ease-aus),
             background-color var(--dur-kurz) var(--ease-aus) }
.btn:hover{ border-color:var(--eis); background:var(--eis-flach) }
.btn:active{ background:var(--papier-2) }
.btn:disabled{ opacity:0.5; cursor:progress; border-color:var(--linie);
  background:none }
.out{ overflow:auto; max-height:22rem; background:var(--papier-2);
  border:1px solid var(--linie); padding:var(--s-sm);
  font-family:var(--schrift-code); font-size:var(--t-2xs); line-height:1.65;
  min-height:8rem; white-space:pre; color:var(--tinte) }

/* ------------------------------------------------------- Ft6 · Der Gruß ---
   Der Fuß schließt wie ein Brief, weil der Erzähler des Buches am Ende seinen
   Leser anredet und sich verabschiedet. Kein Laufband, keine vier Spalten
   Verweise, kein Sitemap in Kleinschrift. */
.gruss{ border-block-start:1px solid var(--linie); padding-block:var(--s-2xl);
  margin-top:var(--s-3xl) }
.gruss__satz{ max-width:56ch }
.gruss__name{ margin-top:var(--s-md); font-size:var(--t-md) }
.gruss__nach{ margin-top:var(--s-sm); max-width:56ch; color:var(--tinte-2);
  font-size:var(--t-sm) }
.gruss__zeile{ margin-top:var(--s-xl); display:flex; flex-wrap:wrap;
  gap:var(--s-sm) var(--s-md); align-items:center }
.gruss__zeile a{ text-decoration:none; color:var(--tinte-2);
  transition:color var(--dur-kurz) var(--ease-aus) }
.gruss__zeile a:hover{ color:var(--tinte) }
.gruss__zeile .sis{ width:18px }

/* ------------------------------------------------------------- Bewegung ---
   Jede Figur trägt genau eine Bewegung, und jede trägt etwas: Reihenfolge,
   Fluß, oder das, was zuerst geschieht.

   Was allein aus einem Schlußbild lebte, muß ohne Bewegung dennoch dastehen.
   Die Ruhelagen hier sorgen dafür, und die Bewegung überschreibt sie. */
.wolke{ transform:translateX(120px) }
.zeiger--stunde{ transform:rotate(302deg) }
.zeiger--minute{ transform:rotate(56deg) }
.a6{ transform:rotate(240deg) }
.knall{ opacity:0 }

/* Der Berg: eine Wolke zieht vorbei. */
.wolke{ animation:ziehen 34s linear infinite }

/* Über dem Gipfel steht, was zur Tageszeit gehört. Den Ort auf der Bahn setzt
   js.js nach der Uhr des Geräts an die Gruppe darüber; hier steht allein,
   welches der beiden oben ist. Ohne Javascript bleibt die Ruhelage aus der
   Auszeichnung stehen, und der Ton der Seite wählt trotzdem richtig. Am
   Umschalter geht erst das eine unter, dann kommt das andere herauf; die
   Verzögerung ist der ganze Unterschied zwischen Wechsel und Überblendung. */
.gestirn{ transition:transform 620ms var(--ease-aus), opacity 620ms var(--ease-aus);
  transition-delay:280ms }
.gestirn--mond{ opacity:0; transform:translateY(70px); transition-delay:0s }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="hell"]) .gestirn--sonne{ opacity:0; transform:translateY(70px);
    transition-delay:0s }
  :root:not([data-theme="hell"]) .gestirn--mond{ opacity:1; transform:none;
    transition-delay:280ms }
}
:root[data-theme="dunkel"] .gestirn--sonne{ opacity:0; transform:translateY(70px);
  transition-delay:0s }
:root[data-theme="dunkel"] .gestirn--mond{ opacity:1; transform:none;
  transition-delay:280ms }
@keyframes ziehen{ from{ transform:translateX(-70px) } to{ transform:translateX(330px) } }

/* Die Liege: zwei Decken legen sich nacheinander. */
.decke{ animation:legen 9s var(--ease-aus) infinite both }
.decke--zwei{ animation-delay:0.7s }
@keyframes legen{
  0%{ transform:translate(84px,58px); opacity:0 }
  7%{ transform:translate(0,0); opacity:1 }
  84%{ transform:translate(0,0); opacity:1 }
  90%{ transform:translate(0,-16px); opacity:0 }
  100%{ transform:translate(84px,58px); opacity:0 }
}

/* Die Uhr: der große Zeiger läuft davon, der kleine kommt nach. Ein
   Bild allein bei »to« nimmt als Anfang die Ruhelage darüber, also 302deg
   und 56deg, und läuft nur den Rest bis 360deg, ehe es zurückspringt: der
   Minutenzeiger pendelte darum zwischen der vollen Minute und etwa :10.
   Der negative Verzug setzt den Lauf genau auf die Ruhelage, so daß beide
   Bilder dieselbe Stelle meinen und nichts springt. 302/360*44s und
   56/360*3.4s. */
.zeiger{ transform-box:view-box; transform-origin:130px 95px }
.zeiger--stunde{ animation:drehen 44s linear infinite; animation-delay:-36.911s }
.zeiger--minute{ animation:drehen 3.4s linear infinite; animation-delay:-0.529s }
@keyframes drehen{ from{ transform:rotate(0deg) } to{ transform:rotate(360deg) } }

/* Der Kristall: er baut sich sechsfach auf, dann weicht ein Arm ab. Dieselbe
   Abweichung, welche die Liegehalle oben in ihren Spalten trägt. */
.kristall{ transform-box:view-box; transform-origin:130px 95px;
  animation:kreisen 90s linear infinite }
@keyframes kreisen{ to{ transform:rotate(360deg) } }
.arm{ transform-box:view-box; transform-origin:130px 95px }
.arm path{ fill:none; stroke:currentColor; stroke-width:4.2; stroke-dasharray:82;
  animation:wachsen 13s var(--ease-aus) infinite both }
.a1{ transform:rotate(0deg) }
.a2{ transform:rotate(60deg) }
.a3{ transform:rotate(120deg) }
.a4{ transform:rotate(180deg) }
.a5{ transform:rotate(300deg) }
.a2 path{ animation-delay:0.12s }
.a3 path{ animation-delay:0.24s }
.a4 path{ animation-delay:0.36s }
.a5 path{ animation-delay:0.60s }
.a6 path{ animation-delay:0.48s }
.a6{ animation:abweichen 13s var(--ease-aus) infinite }
@keyframes wachsen{
  0%{ stroke-dashoffset:82 }
  16%{ stroke-dashoffset:0 }
  100%{ stroke-dashoffset:0 }
}
@keyframes abweichen{
  0%,54%{ transform:rotate(240deg) }
  64%,92%{ transform:rotate(249deg) }
  100%{ transform:rotate(240deg) }
}

/* Die Zigarre: der Rauch zeichnet sich und vergeht. */
.rauch{ stroke-dasharray:120; animation:rauchen 5.2s linear infinite both }
.rauch--zwei{ animation-delay:1.7s }
@keyframes rauchen{
  0%{ stroke-dashoffset:120; opacity:0 }
  12%{ opacity:0.9 }
  62%{ stroke-dashoffset:0; opacity:0.9 }
  100%{ stroke-dashoffset:0; opacity:0; transform:translateY(-12px) }
}

/* Der Leierkasten: die Kurbel geht, und es kommen Worte heraus. */
.kurbel{ transform-box:view-box; transform-origin:198px 100px;
  animation:kurbeln 1.9s linear infinite }
@keyframes kurbeln{ from{ transform:scaleX(.40) rotate(0deg) } to{ transform:scaleX(.40) rotate(360deg) } }
.knauf{ transform-box:fill-box; transform-origin:center;
  animation:knauf 1.9s linear infinite }
@keyframes knauf{
  0%{ transform:translate(0.00px,0.00px) scale(1.000) }
  6.25%{ transform:translate(4.29px,2.13px) scale(1.096) }
  12.5%{ transform:translate(7.92px,8.20px) scale(1.177) }
  18.75%{ transform:translate(10.35px,17.28px) scale(1.231) }
  25%{ transform:translate(11.20px,28.00px) scale(1.250) }
  31.25%{ transform:translate(10.35px,38.72px) scale(1.231) }
  37.5%{ transform:translate(7.92px,47.80px) scale(1.177) }
  43.75%{ transform:translate(4.29px,53.87px) scale(1.096) }
  50%{ transform:translate(0.00px,56.00px) scale(1.000) }
  56.25%{ transform:translate(-4.29px,53.87px) scale(0.904) }
  62.5%{ transform:translate(-7.92px,47.80px) scale(0.823) }
  68.75%{ transform:translate(-10.35px,38.72px) scale(0.769) }
  75%{ transform:translate(-11.20px,28.00px) scale(0.750) }
  81.25%{ transform:translate(-10.35px,17.28px) scale(0.769) }
  87.5%{ transform:translate(-7.92px,8.20px) scale(0.823) }
  93.75%{ transform:translate(-4.29px,2.13px) scale(0.904) }
  100%{ transform:translate(-0.00px,0.00px) scale(1.000) }
}
.wort{ animation:reden 3.6s linear infinite both }
.w2{ animation-delay:1.2s }
.w3{ animation-delay:2.4s }
@keyframes reden{
  0%{ transform:translate(56px,26px); opacity:0 }
  32%{ opacity:0.95 }
  100%{ transform:translate(0,0); opacity:0 }
}

/* Die Fischsaucen: achtundzwanzig, eine nach der anderen. */
.sauce{ opacity:0.2; animation:zaehlen 12s linear infinite both }
@keyframes zaehlen{ 0%{ opacity:0.2 } 2%{ opacity:1 } 94%{ opacity:1 } 100%{ opacity:0.2 } }

/* Die Glastür: sie geht auf und fällt ins Schloß. */
.tuer{ transform-box:view-box; transform-origin:66px 100px;
  animation:schmettern 5.4s infinite }
@keyframes schmettern{
  0%,6%{ transform:scaleX(1); animation-timing-function:cubic-bezier(.15,.8,.3,1) }
  26%{ transform:scaleX(.40) }
  58%{ transform:scaleX(.43); animation-timing-function:cubic-bezier(.7,0,.9,.4) }
  64%{ transform:scaleX(1) }
  68%{ transform:scaleX(.93) }
  73%,100%{ transform:scaleX(1) }
}
.knall{ animation:knallen 5.4s linear infinite }
@keyframes knallen{ 0%,62%{ opacity:0 } 64%{ opacity:1 } 76%,100%{ opacity:0 } }

.s1{ animation-delay:0.00s }
.s2{ animation-delay:0.30s }
.s3{ animation-delay:0.60s }
.s4{ animation-delay:0.90s }
.s5{ animation-delay:1.20s }
.s6{ animation-delay:1.50s }
.s7{ animation-delay:1.80s }
.s8{ animation-delay:2.10s }
.s9{ animation-delay:2.40s }
.s10{ animation-delay:2.70s }
.s11{ animation-delay:3.00s }
.s12{ animation-delay:3.30s }
.s13{ animation-delay:3.60s }
.s14{ animation-delay:3.90s }
.s15{ animation-delay:4.20s }
.s16{ animation-delay:4.50s }
.s17{ animation-delay:4.80s }
.s18{ animation-delay:5.10s }
.s19{ animation-delay:5.40s }
.s20{ animation-delay:5.70s }
.s21{ animation-delay:6.00s }
.s22{ animation-delay:6.30s }
.s23{ animation-delay:6.60s }
.s24{ animation-delay:6.90s }
.s25{ animation-delay:7.20s }
.s26{ animation-delay:7.50s }
.s27{ animation-delay:7.80s }
.s28{ animation-delay:8.10s }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:1ms !important;
    animation-iteration-count:1 !important; transition-duration:1ms !important;
    transition-delay:0s !important }
  /* Nicht 1ms, sondern gar keine: eine Bewegung mit Füllung bliebe sonst auf
     ihrem Schlußbild stehen, und das ist bei den Decken die Unsichtbarkeit. */
  .fig,.fig *{ animation:none !important }
  .sauce{ opacity:1 }
  .rauch,.arm path{ stroke-dasharray:none }
  /* Die Säule mißt dann nichts mehr und steht leer da, was ihr ansteht. */
  .saeule__rohr::after{ animation:none; display:none }
}