/* Hallmark · macrostructure: Bento Grid · nav: N7 (brutal slab) · footer: Ft8 (marquee)
 * theme: studied-DNA (source: url · blocks.cloud + motherduck.com), palette rebuilt
 * voice: Der Zauberberg, gelesen und nicht erinnert. Projekt Gutenberg 65661.
 *
 * Die Geometrie stammt von den beiden genannten Seiten: harte Umrisse von zwei
 * Pixeln, ein Radius von vieren, und vor allem jener flache Schlagschatten ohne
 * jede Weichzeichnung, der das Ganze zu einem Stein macht, den man drücken kann.
 * Die Farben sind neu, in OKLCH bei einer Helligkeit und einer Sättigung über
 * sechs Tonwinkel gesetzt, damit sie ein System bilden; keine von ihnen kommt
 * auf einer der beiden Vorlagen vor.
 *
 * Der Farbton trägt hier eine Bedeutung und keinen Schmuck: Schriften sind
 * immer blau, Werkzeuge grün, Bibliotheken violett.
 *
 * Bewegung, dreierlei: das Drücken eines Steines, das Einrasten der Fläche beim
 * Laden, und das Laufband im Fuß. prefers-reduced-motion hebt alle drei auf.
 */

:root{
  --color-paper:   oklch(96.2% 0.016 88);
  --color-paper-2: oklch(99% 0.006 88);
  --color-ink:     oklch(18% 0.010 70);
  --color-ink-2:   oklch(33% 0.010 70);

  --c-self:    oklch(87% 0.170 95);
  --c-writing: oklch(80% 0.130 218);
  --c-tool:    oklch(81% 0.185 145);
  --c-lib:     oklch(76% 0.150 288);
  --c-live:    oklch(76% 0.170 5);
  --c-else:    oklch(78% 0.175 48);
  --c-mercury: oklch(58% 0.190 32);
  --c-void:    oklch(32% 0.012 70);

  --font-display:'Archivo', ui-sans-serif, system-ui, sans-serif;
  --font-body:   'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-mono:   'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-2xs:0.6875rem; --text-xs:0.75rem; --text-sm:0.875rem;
  --text-base:1rem; --text-md:1.125rem; --text-lg:1.375rem;
  --text-xl:1.75rem;
  --text-slab:clamp(1.6rem, 3.2vw, 2.85rem);

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

  --brick-border:2px solid var(--color-ink);
  --brick-radius:4px;
  --brick-pad:var(--space-md);
  --brick-shadow:5px 5px 0 0 var(--color-ink);
  --brick-shadow-hover:3px 3px 0 0 var(--color-ink);
  --brick-bg:var(--color-paper-2);
  --brick-fg:var(--color-ink);

  --page-gutter:clamp(16px, 4vw, 48px);
  --measure:64ch;
  --ease:cubic-bezier(0.2,0.9,0.3,1);
  --dur-micro:110ms; --dur-short:240ms;
  color-scheme:light;
}

@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:'Geist'; src:url(/fonts/geist.woff2) format('woff2');
  font-weight:100 900; 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; }

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
/* Ohne dies steht der Fuß bei einem kurzen Beitrag mitten auf der Seite und
   darunter liegt handbreit totes Papier. */
body{margin:0; min-height:100svh; display:flex; flex-direction:column;
  background:var(--color-paper); color:var(--color-ink);
  font-family:var(--font-body); font-size:var(--text-base); line-height:1.65;
  -webkit-font-smoothing:antialiased}
body > main{flex:1 0 auto}
body > .foot{flex-shrink:0}
h1,h2,h3{font-family:var(--font-display); font-style:normal; font-weight:800;
  font-stretch:110%; line-height:1.04; letter-spacing:-0.02em; margin:0;
  overflow-wrap:anywhere; min-width:0}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--color-ink); outline-offset:3px}
.wrap{max-width:1240px; margin:0 auto; padding-inline:var(--page-gutter)}
.mono{font-family:var(--font-mono); font-size:var(--text-2xs);
  letter-spacing:0.11em; text-transform:uppercase}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:var(--space-sm); top:var(--space-sm); z-index:60;
  background:var(--color-paper-2); padding:var(--space-2xs) var(--space-sm);
  border:var(--brick-border)}

/* ---------- N7 · brutal slab ------------------------------------------- */
.slab{display:flex; align-items:center; gap:var(--space-md); flex-wrap:wrap;
  padding:var(--space-sm) var(--page-gutter);
  border-bottom:2px solid var(--color-ink); background:var(--color-paper);
  position:sticky; top:0; z-index:40}
.slab__mark{display:flex; align-items:center; gap:var(--space-2xs);
  font-family:var(--font-display); font-weight:800; font-stretch:118%;
  letter-spacing:0.01em; font-size:var(--text-md); text-decoration:none}
.slab__nav{margin-left:auto}
.slab__nav ul{display:flex; gap:var(--space-2xs); list-style:none; margin:0; padding:0; flex-wrap:wrap}
.slab__nav a{display:block; text-decoration:none; font-size:var(--text-xs); font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase; padding:var(--space-2xs) var(--space-xs);
  border:2px solid transparent; border-radius:var(--brick-radius);
  transition:background-color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease)}
.slab__nav a:hover{border-color:var(--color-ink); background:var(--color-paper-2)}
.slab__nav a:active{transform:translate(1px,1px)}
.slab__nav a[aria-current="page"]{border-color:var(--color-ink); background:var(--c-self)}

/* ---------- das Raster: Grundmaße zuerst, Ausnahmen danach ------------- */
/* Eine Medienabfrage erhöht die Spezifität nicht. Stünde .s4x1 hinter der
   Abfrage, gewönne es bei jeder Breite, und ein Stein über vier Spalten
   zwänge in einem Raster von zweien zwei stillschweigende Spalten hinzu. */
.bento{display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  grid-auto-rows:minmax(9rem, auto); gap:var(--space-md);
  padding-block:var(--space-xl) var(--space-2xl)}
.s2x1{grid-column:span 2}
.s2x2{grid-column:span 2; grid-row:span 2}
.s4x1{grid-column:span 4}
@media (max-width:64rem){
  .bento{grid-template-columns:repeat(2, minmax(0,1fr))}
  .s4x1{grid-column:span 2}
}
@media (max-width:34rem){
  .bento{grid-template-columns:minmax(0,1fr)}
  .s2x1,.s2x2,.s4x1{grid-column:span 1}
  .s2x2{grid-row:auto}
}

/* ---------- der Stein ---------------------------------------------------
   Der Schattenwurf wird von außen durch ::part gesetzt, damit im Schatten-DOM
   kein <style> steht und die Richtlinie mit 'self' auskommt. */
/* Die Hoehe muss am Wirt stehen: ::part(brick) rechnet mit 100% gegen ihn,
   und ein Wirt ohne Hoehe laesst den Stein auf null zusammenfallen. */
kv-brick{display:block; min-width:0; height:100%}
kv-brick::part(brick){
  container-type:inline-size; height:100%; box-sizing:border-box;
  border:var(--brick-border); border-radius:var(--brick-radius);
  box-shadow:var(--brick-shadow); background:var(--brick-bg); color:var(--brick-fg);
  padding:var(--brick-pad);
  transition:transform var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
}
kv-brick:not([still]):hover::part(brick){transform:translate(2px,2px); box-shadow:var(--brick-shadow-hover)}
kv-brick:not([still]):active::part(brick){transform:translate(4px,4px); box-shadow:none}
kv-brick[still]::part(brick){box-shadow:none; transition:none}

kv-brick[tone="self"]    { --brick-bg:var(--c-self) }
kv-brick[tone="writing"] { --brick-bg:var(--c-writing) }
kv-brick[tone="tool"]    { --brick-bg:var(--c-tool) }
kv-brick[tone="lib"]     { --brick-bg:var(--c-lib) }
kv-brick[tone="live"]    { --brick-bg:var(--c-live) }
kv-brick[tone="else"]    { --brick-bg:var(--c-else) }
kv-brick[tone="ink"]     { --brick-bg:var(--color-ink); --brick-fg:var(--color-paper) }

/* Der Auftritt beginnt bei null Deckkraft, was nur taugt, wenn ihn auch etwas
   aufdeckt. Ohne Skript bleibt die Klasse aus und die Steine sind sichtbar. */
.js kv-brick{opacity:0; transform:scale(0.98);
  transition:opacity var(--dur-short) var(--ease), transform var(--dur-short) var(--ease)}
.js kv-brick.in{opacity:1; transform:none}

.b-eyebrow{font-family:var(--font-mono); font-size:var(--text-2xs);
  letter-spacing:0.12em; text-transform:uppercase}
.b-title{font-family:var(--font-display); font-weight:800; font-stretch:110%;
  line-height:1.04; letter-spacing:-0.02em; font-size:var(--text-lg);
  overflow-wrap:anywhere; min-width:0}
@container (max-width:22rem){ .b-title{font-size:var(--text-md)} }
.b-say{font-family:var(--font-display); font-weight:700; font-stretch:106%;
  font-size:var(--text-slab); line-height:1.1; letter-spacing:-0.02em}
.b-note{font-size:var(--text-sm); margin-top:var(--space-2xs)}
.b-prose{font-size:var(--text-sm); margin-top:var(--space-2xs); max-width:52ch}
.stack{display:grid; gap:var(--space-2xs); align-content:start; height:100%}
.stack--end{align-content:space-between}
a.plain{text-decoration:none; display:block; height:100%}
.peek{display:grid; align-content:end; height:100%; overflow:hidden;
  margin:calc(var(--brick-pad) * -1); padding:var(--brick-pad)}
.sis{aspect-ratio:17 / 44; height:auto; display:block; color:var(--color-ink)}
.slab__mark .sis{width:20px}
.peek .sis{width:104px; margin:0 auto -118px}
.foot__end .sis{width:22px}

.cmd{font-family:var(--font-mono); font-size:var(--text-sm);
  background:var(--color-ink); color:var(--color-paper); border-radius:var(--brick-radius);
  padding:var(--space-2xs) var(--space-xs); margin-top:var(--space-2xs);
  white-space:pre-wrap; overflow-wrap:anywhere}

/* ---------- Hilfsklassen statt style-Merkmale ---------------------------
   Eine Richtlinie mit style-src ohne 'unsafe-inline' verbietet nicht nur das
   <style>-Element, sondern auch das style-Merkmal am Element, und zwar
   stillschweigend. Ausgeliefert war das: unter /zur-person/ nahm das
   Thermometer die halbe Seite ein, weil width:56px nie ankam, der neueste
   Beitrag verlor seine Schriftgröße, und der Fuß seinen rechten Rand. Was
   getragen werden soll, steht darum hier. */
.symbols{position:absolute; width:0; height:0}
.sis--sm{width:56px}
.mono--push{margin-left:auto}
.b-title--xl{font-size:var(--text-xl)}
.b-prose--flat{margin:0}
.head__say{margin-top:var(--space-2xs); max-width:30ch}
.bento--tight{padding-top:0}
.art--narrow{max-width:70ch}
.art__h1{margin-top:var(--space-md)}
.art__h1--tight{margin-top:var(--space-2xs)}
.art__meta{margin-top:var(--space-md); display:flex; gap:var(--space-sm); flex-wrap:wrap}
.sis-row{display:flex; gap:var(--space-md); align-items:flex-end; margin-top:var(--space-lg)}

/* ---------- die Figuren -------------------------------------------------
   Acht Zeichnungen zum Zauberberg, im Strich der stummen Schwester: Umriss 5,
   Feinstrich 3.2, runde Enden, Fuellung stets var(--color-paper-2), Farbe nur
   ueber Variablen und in SVG nur currentColor und var(--..).

   Die Zeichnungen selbst stehen in assets/figuren.mjs und werden unmittelbar
   eingebettet, nicht ueber <symbol> und <use> wie das Thermometer im Kopf und
   im Fuss: eine Regel von aussen erreicht den Schatten eines <use> nicht, und
   ohne sie bliebe die Bewegung aus. Jede Figur kommt darum hoechstens einmal
   je Seite vor.

   Entworfen und in Arbeitsgroesse geprueft in prototype/zauberberg-figuren.html. */
.fig{display:block; width:100%; height:auto; color:var(--color-ink);
  stroke-linecap:round; stroke-linejoin:round}
.fig .koerper{fill:var(--color-paper-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 Buehne ist heller als das Papier ringsum, damit die Zeichnung auf etwas
   steht und nicht in der Seite schwimmt. Sie schneidet ueberdies ab, was
   hinauslaeuft, weshalb die Wolke von aussen hereinziehen kann. */
.buehne{background:var(--color-paper); border:var(--brick-border);
  border-radius:var(--brick-radius); padding:var(--space-xs); overflow:hidden}
.figur{margin:0; display:grid; gap:var(--space-2xs); align-content:start}
.figur figcaption{font-size:var(--text-sm); color:var(--color-ink-2)}
.figur .mono{display:block; color:var(--color-ink); margin-bottom:2px}
.figur--schmal{max-width:360px}
/* Zeichnung und Rede nebeneinander, sobald der Stein breit genug dafuer ist.
   Der Stein ist ein Container, die Abfrage gilt also ihm und nicht dem Fenster. */
.paar{display:grid; gap:var(--space-md); align-items:center; height:100%}
@container (min-width:26rem){ .paar{grid-template-columns:minmax(0,13rem) minmax(0,1fr)} }
/* align-content:start ist hier keine Verzierung. Auf der 404 traegt <main>
   selber diese Klasse und waechst als Flexkind auf die volle Hoehe; ohne dies
   sass die ganze Gruppe am unteren Rand des Fensters. */
.kopf--figur{display:grid; gap:var(--space-lg); align-items:end; align-content:start}
@media (min-width:60rem){ .kopf--figur{grid-template-columns:minmax(0,1fr) 17rem} }

/* ---------- der Zettel --------------------------------------------------
   Die Tiefe haengt an data-tip und nicht in einem Absatz. Ohne Skript bleibt
   die Kurzform stehen und die Seite vollstaendig lesbar; das Skript setzt den
   Ort ueber 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-underline-offset:3px; text-decoration-thickness:1.5px}
.tip{position:fixed; z-index:80; max-width:34ch; background:var(--color-ink);
  color:var(--color-paper); border-radius:var(--brick-radius);
  padding:var(--space-2xs) var(--space-xs); font-size:var(--text-sm);
  line-height:1.5; pointer-events:none; opacity:0;
  transition:opacity var(--dur-micro) var(--ease)}
.tip.an{opacity:1}

/* ---------- Bewegung der Figuren ----------------------------------------
   Jede Figur traegt genau eine Bewegung, und jede traegt etwas: Reihenfolge,
   Fluss, oder das, was zuerst geschieht.

   Was allein aus einem Schlussbild lebte, muss ohne Bewegung dennoch dastehen.
   Die Ruhelagen hier sorgen dafuer, und die Bewegung ueberschreibt sie. */
.wolke{transform:translateX(120px)}
.zeiger--stunde{transform:rotate(302deg)}
.zeiger--minute{transform:rotate(56deg)}
.a6{transform:rotate(240deg)}
.knall{opacity:0}

Jede Figur traegt genau eine Bewegung, und jede Bewegung traegt etwas:
   Reihenfolge, Fluss, oder das, was zuerst geschieht. */

/* Der Berg: eine Wolke zieht vorbei. */
.wolke{animation:ziehen 34s linear infinite}
@keyframes ziehen{from{transform:translateX(-70px)}to{transform:translateX(330px)}}

/* Die Liege: zwei Decken legen sich nacheinander. */
.decke{animation:legen 9s var(--ease) 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 grosse Zeiger laeuft davon, der kleine kommt nach. */
.zeiger{transform-box:view-box;transform-origin:130px 95px}
.zeiger--stunde{animation:drehen 44s linear infinite}
.zeiger--minute{animation:drehen 3.4s linear infinite}
@keyframes drehen{to{transform:rotate(360deg)}}

/* Der Kristall: er baut sich sechsfach auf, dann weicht ein Arm ab. */
.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) 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) 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 Glastuer: sie geht auf und faellt ins Schloss. */
.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}

/* ---------- Fließtext --------------------------------------------------- */
.head{padding-block:var(--space-2xl) var(--space-md)}
.art{padding-block:var(--space-2xl) var(--space-3xl); max-width:var(--measure);
  margin-inline:0}
@media (min-width:78rem){ .art{margin-inline:auto} }
.art h1{font-size:clamp(1.6rem,4vw,2.6rem)}
.art__body{margin-top:var(--space-lg); font-size:var(--text-md); color:var(--color-ink-2)}
.art__body > * + *{margin-top:var(--space-md)}
.art__body h2{font-size:var(--text-lg); margin-top:var(--space-xl); color:var(--color-ink)}
.art__body pre{background:var(--color-ink); color:var(--color-paper);
  border-radius:var(--brick-radius); padding:var(--space-md); overflow-x:auto;
  font-family:var(--font-mono); font-size:var(--text-sm); line-height:1.6}
.art__body blockquote{margin:0; padding:var(--space-xs) var(--space-md);
  background:var(--c-self); border:var(--brick-border); border-radius:var(--brick-radius)}
.art__body table{width:100%; border-collapse:collapse; font-size:var(--text-sm);
  display:block; overflow-x:auto}
.art__body th,.art__body td{text-align:left; padding:var(--space-2xs) var(--space-xs);
  border-bottom:1px solid var(--color-ink); vertical-align:top}
.art__body th{font-family:var(--font-mono); font-size:var(--text-2xs);
  letter-spacing:0.1em; text-transform:uppercase; border-bottom-width:2px; white-space:nowrap}
.art__body code{font-family:var(--font-mono); font-size:0.92em;
  background:var(--c-self); border-radius:2px; padding:0 3px}
.art__body pre code{background:none; padding:0}
.tag{display:inline-block; font-family:var(--font-mono); font-size:var(--text-2xs);
  letter-spacing:0.1em; text-transform:uppercase; border:2px solid var(--color-ink);
  border-radius:var(--brick-radius); padding:1px var(--space-2xs); background:var(--c-self)}

/* ---------- der Katalog -------------------------------------------------- */
.sql{display:grid; gap:var(--space-2xs)}
.sql textarea{width:100%; min-height:8rem; resize:vertical;
  font-family:var(--font-mono); font-size:var(--text-sm); line-height:1.55;
  color:var(--color-ink); background:var(--color-paper-2);
  border:2px solid var(--color-ink); border-radius:var(--brick-radius);
  padding:var(--space-2xs) var(--space-xs)}
.btn{font:inherit; font-size:var(--text-xs); font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; cursor:pointer; padding:var(--space-2xs) var(--space-md);
  background:var(--color-paper-2); color:var(--color-ink);
  border:2px solid var(--color-ink); border-radius:var(--brick-radius);
  box-shadow:3px 3px 0 0 var(--color-ink);
  transition:transform var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease)}
.btn:hover{transform:translate(1px,1px); box-shadow:2px 2px 0 0 var(--color-ink)}
.btn:active{transform:translate(3px,3px); box-shadow:none}
.btn:disabled{opacity:0.55; cursor:not-allowed; transform:none; box-shadow:none}
.out{overflow:auto; max-height:22rem; background:var(--color-ink); color:var(--color-paper);
  border-radius:var(--brick-radius); padding:var(--space-sm);
  font-family:var(--font-mono); font-size:var(--text-2xs); line-height:1.65;
  min-height:8rem; white-space:pre}

/* ---------- Ft8 · Laufband ---------------------------------------------- */
.foot{border-top:2px solid var(--color-ink); overflow:hidden; background:var(--c-self)}
.foot__track{display:flex; gap:var(--space-2xl); white-space:nowrap;
  padding-block:var(--space-sm); width:max-content; animation:marquee 52s linear infinite}
.foot__track span{font-family:var(--font-display); font-weight:700; font-stretch:110%;
  letter-spacing:0.02em; font-size:clamp(0.95rem,2vw,1.2rem)}
.foot:hover .foot__track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.foot__end{display:flex; flex-wrap:wrap; gap:var(--space-md); align-items:center;
  padding:var(--space-md) var(--page-gutter); border-top:2px solid var(--color-ink);
  font-size:var(--text-sm)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:1ms !important; animation-iteration-count:1 !important;
    transition-duration:1ms !important}
  .js kv-brick{opacity:1; transform:none}
  .foot__track{animation:none}
  /* Nicht 1ms, sondern gar keine: eine Bewegung mit Fuellung bliebe sonst auf
     ihrem Schlussbild stehen, und das ist bei den Decken die Unsichtbarkeit. */
  .fig,.fig *{animation:none !important}
  .sauce{opacity:1}
  .rauch,.arm path{stroke-dasharray:none}
}