/* ZETESIS — zetesis.terminaltribune.info
 * Das Institut für Erkenntnis und Zweifel · Atomzeit-Design (Entwurf G, CHR 2026-09-03)
 *
 * Farbwelt: die Laborfarben von 1952, entsättigt und weiterentwickelt —
 *   Petrol-Nacht (Radarschirm) · Atomic Coral (Kontrolllampe) · Türkis (CRT) · Creme (Papier).
 * Die Bildwerke der Berichte sind warm-sepia Stillleben (Photograph Stil H); alles hier
 * ist darauf abgestimmt, nicht umgekehrt — die Bilder sind der Chefdesigner.
 *
 * ⚠ CSP: script-src 'self' ohne unsafe-inline. Kein Inline-CSS/JS in den Seiten.
 */
:root{
  --grund:#0E1412; --tief:#0B100E; --panel:#141C18; --panel2:#18211C; --hebung:#222C26;
  --linie:#263029; --linie2:#364439;
  --ink:#EAE6DA; --dim:#A5AB99; --faint:#6B7263;
  --gold:#E07142; --tuerkis:#56C2B0; --goldhell:#F6AC85; --goldtief:#A34A26;
  --stern:#EDEDE2;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Hoefler Text",Georgia,serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--grund);color:var(--ink);font-family:var(--mono);
     font-size:13px;line-height:1.55;-webkit-font-smoothing:antialiased;
     font-variant-numeric:tabular-nums}
.wrap{max-width:1400px;margin:0 auto;padding:0 26px}
img{max-width:100%}
button{font:inherit;color:inherit}

/* ── Masthead (Speculum-Erbe) ── */
header.kopf{padding:64px 0 0;background:
  radial-gradient(85% 65% at 50% -15%, #16211C 0%, transparent 65%), var(--grund)}
.zeile-oben{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--faint);
  border-bottom:1px solid var(--linie);padding-bottom:13px;margin-bottom:46px}
.zeile-oben b{color:var(--gold);font-weight:400}
/* Die Dachmarke führt nach Hause. Sie behält ihr Gold — nur die Unterkante
   verrät den Weg, damit die Leiste eine Leiste bleibt und keine Navigation wird. */
.zeile-oben a.dachmarke{color:inherit;border-bottom:0;text-decoration:none}
.zeile-oben a.dachmarke b{border-bottom:1px solid var(--goldtief);
  transition:color .18s ease,border-color .18s ease}
.zeile-oben a.dachmarke:hover b,.zeile-oben a.dachmarke:focus-visible b{
  color:var(--goldhell);border-color:var(--goldhell)}
/* Die Marke ist seit dem 05.09. ein BILD (siehe DAS LOGO weiter unten) — die
   Schriftauszeichnung, die hier stand (Serif, clamp 54–110 px, Verlauf per
   background-clip), ist damit gegenstandslos geworden und ausgebaut. */
.unterzeile{text-align:center;font-family:var(--serif);font-style:italic;
  font-size:clamp(16px,2.3vw,22px);color:var(--ink);margin:16px 0 5px}
.griechisch{text-align:center;font-size:10.5px;letter-spacing:.4em;color:var(--faint);margin:0 0 26px}
.claim{text-align:center;font-family:var(--serif);font-size:16.5px;line-height:1.6;
  color:var(--dim);max-width:52ch;margin:0 auto 40px}
.claim em{font-style:normal;color:var(--goldhell)}

/* Vorspann: ein hervorgehobener Leitsatz am Anfang einer LESESEITE (#1041).
   ⚠ Nicht .claim wiederverwenden — die Klasse ist fuer den Startseiten-Kopf gebaut
   (text-align:center, max-width:52ch, margin:0 auto) und stand hier zentriert ueber
   einer linksbuendigen 70ch-Spalte: der Satz schwebte sichtbar schief ueber der Prosa.
   Gemessen im Screenshot, nicht im Quelltext — im HTML sah beides richtig aus.
   Auch nicht .leitsatz-box: die gehoert dem Reader und meint den Leitsatz IM Bericht.
   Gleiche Kante und Breite wie .prosa--breit; der Strich macht ihn zum Leitsatz
   statt zum ersten Absatz. */
.vorspann{font-family:var(--serif);font-size:18px;line-height:1.55;color:var(--dim);
  max-width:70ch;margin:0 0 2.2em;padding-left:16px;border-left:2px solid var(--gold)}
.vorspann em{font-style:normal;color:var(--goldhell)}
.zahlen{display:flex;justify-content:center;flex-wrap:wrap;
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.z{padding:18px 34px;text-align:center;border-right:1px solid var(--linie)}
.z:first-child{border-left:1px solid var(--linie)}
.z b{display:block;font-size:26px;color:var(--gold);font-weight:500;letter-spacing:-.01em}
.z span{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}

/* ── Himmel ── */
.himmel-sec{padding:44px 0 8px}
.sec-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin-bottom:12px}
.sec-kopf h2{font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);font-weight:400;margin:0}
.hint{font-size:10.5px;letter-spacing:.06em;color:var(--faint)}
.hint b{color:var(--goldhell);font-weight:400}
/* ⚠ DER TOOLTIP DARF HIER NICHT DRIN LIEGEN (CHR 04.09.: „das Filtermenü schneidet
   das Maustextfeld ab"). `.himmel` braucht overflow:hidden, damit Sterne am Rand
   sauber beschnitten werden — genau das hat aber den Tooltip gekappt, sobald er über
   die Kante ragte, und direkt darunter beginnt das Filtermenü. Der Tooltip hängt
   deshalb jetzt an `.himmel-buehne`, einer Hülle ohne overflow. */
.himmel-buehne{position:relative}
.himmel{position:relative;width:100%;aspect-ratio:16/7;min-height:320px;
  background:radial-gradient(80% 130% at 50% 105%, #12201B 0%, var(--tief) 68%);
  border:1px solid var(--linie2);overflow:hidden}
.himmel svg{width:100%;height:100%;display:block}
.stern{cursor:pointer}
.achse{stroke:var(--linie);stroke-width:1}
.sektor-label{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;
  fill:var(--faint);text-transform:uppercase}
.tip{position:absolute;pointer-events:none;opacity:0;transition:opacity .12s;z-index:40;
  background:#121A17F0;border:1px solid var(--goldtief);padding:12px 15px;
  max-width:300px;backdrop-filter:blur(6px);z-index:5}
.tip.on{opacity:1}
.tip .tt{font-family:var(--serif);font-size:16px;color:var(--goldhell);margin-bottom:5px;line-height:1.28}
.tip .tm{font-size:10px;color:var(--dim);letter-spacing:.05em;line-height:1.7}

/* ── Instrument (Apparat-Erbe) ── */
.vert{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));
  border:1px solid var(--linie2);border-top:0;background:var(--panel2);margin-bottom:40px}
.vz{padding:10px 15px;border-right:1px solid var(--linie);cursor:pointer;
  border-bottom:2px solid transparent;border-top:0;border-left:0;transition:.13s;
  background:transparent;text-align:left}
.vz:hover{background:var(--hebung)}
.vz[data-on="1"]{background:var(--hebung);border-bottom-color:var(--gold)}
.vz .n{display:flex;justify-content:space-between;font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim)}
.vz .n b{color:var(--gold);font-weight:500}
.vz .balken{height:2px;background:var(--linie2);margin-top:7px;position:relative}
.vz .balken i{position:absolute;inset:0;right:auto;background:var(--tuerkis);opacity:.75}

.tafel-kopf{display:grid;grid-template-columns:64px 112px minmax(0,1fr) 150px 70px 90px 170px;
  gap:14px;padding:12px 10px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);border-bottom:1px solid var(--linie2)}
.reihe{display:grid;grid-template-columns:64px 112px minmax(0,1fr) 150px 70px 90px 170px;
  gap:14px;align-items:center;padding:10px;border-bottom:1px solid var(--linie);
  cursor:pointer;transition:.12s}
.reihe:hover{background:var(--panel)}
/* ⚠ DAS SEITENVERHAELTNIS MUSS ZUM BILD PASSEN (CHR 04.09.: „die Bilder in den Fenstern
   richtig skaliert laden und nicht abgeschnitten"). Der Rahmen war 52x39 — also 4:3 —,
   die Bildwerke sind aber 1344x768, also 7:4. `object-fit:cover` hat davon links und
   rechts ein Drittel weggeschnitten, und in der schmalen Ansicht war der Rahmen sogar
   quadratisch (44x44), was noch mehr abschnitt.
   Jetzt fuehrt `aspect-ratio` die Hoehe mit: das Fenster hat immer die Form des Bildes.
   `contain` statt `cover`, damit auch ein einmal abweichend proportioniertes Bild
   vollstaendig zu sehen ist statt beschnitten. */
.reihe .thumb{width:64px;aspect-ratio:1344/768;background:var(--panel2);overflow:hidden;
  display:flex;align-items:center;justify-content:center;color:var(--faint);
  font-family:var(--serif);font-size:15px}
.reihe .thumb img{width:100%;height:100%;object-fit:contain;
  filter:saturate(.8) brightness(.9)}
.reihe .fid{font-size:10px;color:var(--faint);letter-spacing:.03em}
.reihe .titel{font-family:var(--serif);font-size:16.5px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reihe .feldz{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reihe .q{font-size:11px;color:var(--gold);text-align:right}
.reihe .datum{font-size:10px;color:var(--faint)}
.gsz{font-size:9px;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:7px}
.gsz::before{content:"";width:7px;height:7px;border-radius:50%;flex:none}
.gsz.abschnitt{color:var(--goldhell)} .gsz.abschnitt::before{background:var(--gold);box-shadow:0 0 7px var(--goldtief)}
.gsz.fliesstext{color:var(--dim)} .gsz.fliesstext::before{background:var(--faint)}
.gsz.phasen{color:var(--faint)} .gsz.phasen::before{background:transparent;border:1px solid var(--faint)}
@media(max-width:900px){
  .tafel-kopf{display:none}
  .reihe{grid-template-columns:64px minmax(0,1fr) 90px;gap:12px}
  .reihe .fid,.reihe .datum,.reihe .q,.reihe .feldz{display:none}
  .himmel{aspect-ratio:4/3}
}
.tafel-fuss{padding:14px 10px 60px;font-size:10px;letter-spacing:.14em;color:var(--faint);
  text-transform:uppercase}

/* ── Lese-Ebene ── */
.lese-ebene{position:fixed;inset:0;display:none;z-index:50;
  background:rgba(10,8,6,.72);backdrop-filter:blur(6px)}
.lese-ebene[data-auf="1"]{display:block}
.lese-blatt{position:absolute;top:0;right:0;bottom:0;width:min(980px,100%);
  background:var(--grund);border-left:1px solid var(--linie2);overflow-y:auto;
  padding:0 0 70px;box-shadow:-40px 0 80px #0009}
.lese-kopf{position:sticky;top:0;background:var(--panel);border-bottom:1px solid var(--linie2);
  display:flex;justify-content:space-between;align-items:center;padding:14px 26px;z-index:5}
.lese-kopf .lk{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.lese-kopf button{background:none;border:1px solid var(--linie2);padding:6px 14px;
  cursor:pointer;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.lese-kopf button:hover{color:var(--goldhell);border-color:var(--goldtief)}
.lese-inhalt{padding:40px 48px 0}
@media(max-width:640px){.lese-inhalt{padding:28px 20px 0}}
.lese-inhalt h2{font-family:var(--serif);font-size:clamp(28px,4vw,42px);font-weight:400;
  line-height:1.12;color:var(--goldhell);margin:0 0 10px}
.lese-inhalt .aunter{font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin-bottom:30px}
.lese-spalten{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:44px;align-items:start}
@media(max-width:860px){.lese-spalten{grid-template-columns:1fr}}
.prosa{font-family:var(--serif);font-size:16.5px;line-height:1.74;max-width:64ch}
.prosa p{margin:0 0 1.3em;color:var(--ink)}
.prosa h3,.prosa h4{font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin:2.2em 0 .8em;font-weight:500;line-height:1.5}
.prosa h4{color:var(--dim);font-size:11px}
.prosa ul{padding-left:1.2em;margin:0 0 1.3em}
.prosa li{margin-bottom:.5em}
.prosa hr{border:0;border-top:1px solid var(--linie);margin:2.2em 0}
.prosa strong{color:var(--goldhell);font-weight:600}
.prosa em{color:var(--dim)}
figure.abb{margin:2.2em 0;border:1px solid var(--linie2);background:var(--panel);padding:9px}
figure.abb img{display:block;width:100%}
figure.abb figcaption{font-size:9.5px;letter-spacing:.08em;color:var(--faint);
  padding:9px 3px 1px;line-height:1.7}
figure.abb figcaption b{color:var(--gold);font-weight:400}
.zweifel{position:sticky;top:74px;border:1px solid var(--goldtief);background:var(--panel);
  padding:24px 24px 20px}
.zweifel h3{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);
  margin:0 0 5px;font-weight:400}
.zweifel .zt{font-family:var(--serif);font-style:italic;font-size:14.5px;color:var(--dim);margin:0 0 15px}
.zweifel .ztext{font-family:var(--serif);font-size:13.5px;line-height:1.68;color:var(--ink)}
.zweifel .ztext p{margin:0 0 1em}
.zweifel .zstatus{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);border-top:1px solid var(--linie);padding-top:11px;margin-top:13px;line-height:1.9}

/* ── Footer ── */
footer{border-top:1px solid var(--linie2);padding:40px 0 60px;color:var(--faint)}
footer .wrap{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
footer p{font-size:9.5px;letter-spacing:.16em;line-height:2;text-transform:uppercase;margin:0}
footer b{color:var(--gold);font-weight:400}
/* ══════════════════════════════════════════════════════════════════════════
   ERGÄNZUNGEN GEGENÜBER DEM ENTWURF G (Bau 2026-09-04)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Feinschliff aus der Design-Session ────────────────────────────────────
   (a) Die Sepia-Thumbnails saßen auf reinem Petrol eine Spur fremd — die Kachel
       bekommt einen warmen Grund, damit der Studiogrund der Bilder anschließt. */
.reihe .thumb{background:#241E18}

/* ── Zustände, die der Entwurf noch nicht kannte ───────────────────────── */
.leer{padding:80px 26px;text-align:center;color:var(--dim);font-family:var(--serif);
      font-size:18px;line-height:1.7}
.leer b{display:block;font-size:13px;font-family:var(--mono);letter-spacing:.24em;
        text-transform:uppercase;color:var(--gold);margin-bottom:14px;font-weight:400}

/* Fokus sichtbar — Tastaturbedienung ist Pflicht (Vorlage §8) */
:focus-visible{outline:2px solid var(--tuerkis);outline-offset:2px}
.reihe:focus-visible{outline-offset:-2px}

/* Bewegung nur, wenn gewünscht */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}

/* ── Anriss-Overlay: der Weg zum Volltext ──────────────────────────────────
   Die Lese-Ebene zeigt bewusst NUR den Anriss. Der ganze Bericht kommt vom
   tribune-reader unter /artikel/<fid>.html — ein Prozess statt 156 Dateien,
   und nur diese URL ist zitierfähig (Social, Suchmaschine, Direktlink). */
.weiterlesen{display:inline-flex;align-items:center;gap:10px;margin:26px 0 8px;
  padding:13px 22px;background:var(--gold);color:#12100E;text-decoration:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--gold);transition:.15s}
.weiterlesen:hover{background:var(--goldhell);border-color:var(--goldhell)}
.weiterlesen .pfeil{font-size:14px;line-height:1}

/* Archiv-Kasten (Wissensleser, P7) — leer heißt: gar kein Kasten */
.archivkasten{border:1px solid var(--linie2);background:var(--panel);padding:20px 22px;
  margin:26px 0}
.archivkasten h4{margin:0 0 12px;font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--tuerkis);font-weight:400}
.archivkasten .fund{font-family:var(--serif);font-size:14px;line-height:1.65;
  color:var(--dim);margin-bottom:12px}
.archivkasten .fund:last-child{margin-bottom:0}
.archivkasten .fund b{color:var(--ink);font-weight:600;display:block;margin-bottom:3px}
.archivkasten .fund cite{display:block;margin-top:4px;font-family:var(--mono);font-size:9px;
  letter-spacing:.1em;color:var(--faint);font-style:normal}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — drei Klassen, bewusst unterschiedlich (CHR 2026-09-03)
     Desktop + Tablet  = die volle Erfahrung, Himmel und Instrument bedienbar
     Smartphone        = minimale Leseansicht, kein Instrument
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet quer und hoch: alles bleibt, nur enger ───────────────────────── */
@media (max-width:1100px){
  .wrap{padding:0 20px}
  .brand{min-width:210px;padding:16px 22px 14px 18px}
  .metrik{padding:14px 18px}
  .leitsatz-box{max-width:none;border-left:0;border-top:1px solid var(--linie);width:100%}
}

/* Touch: kein Hover, also zwei Stufen — 1. Tippen zeigt den Tooltip,
   2. Tippen auf denselben Stern öffnet den Bericht. Ohne das wäre der
   Himmel auf dem Tablet eine Fläche, die nichts erzählt. */
@media (pointer:coarse){
  .stern{cursor:pointer}
  .himmel{aspect-ratio:4/3;min-height:420px}
  .tip{font-size:13px;padding:14px 16px}
}
@media (pointer:coarse) and (min-width:900px){
  .himmel{aspect-ratio:16/8}
}

/* ── Smartphone: die Leseansicht. Himmel und Instrument treten ab. ───────────
   Begründung (CHR): auf dem Handy will man LESEN. Ein Streudiagramm mit 14
   Feldachsen ist dort kein Werkzeug, sondern ein Hindernis. Was bleibt, ist
   der Bestand als Liste — und der Solarist, denn Fragen ist Text, kein Instrument. */
@media (max-width:640px){
  header .hrow{flex-direction:column}
  .brand{border-right:0;border-bottom:1px solid var(--linie2);min-width:0;width:100%;
         padding:16px 18px 14px}
  .brand h1{font-size:23px;letter-spacing:.3em}
  .metrik{border-right:1px solid var(--linie);flex:1 1 40%;padding:12px 14px}
  .metrik b{font-size:18px}
  .leitsatz-box{display:none}          /* der Leitsatz steht im Bericht, nicht im Kopf */
  .himmel-sec, .vert{display:none}      /* Himmel und Verteilung: kein Handy-Werkzeug */
  .tafel-kopf{display:none}

  /* Die Tafel wird zur Liste.
     ⚠ `gap` galt hier fuer BEIDE Achsen — die 12 px zwischen Bild und Text standen
       damit auch zwischen Titel, Feld und Status, und dazu kamen deren margin-top.
       Auf dem Hochkant-Schirm trieb das die Eintraege weit auseinander (CHR 06.09.:
       „der Abstand von den Berichten unten zu gross"). Die Spalten brauchen den
       Abstand, die Zeilen nicht: seither getrennt gesetzt. */
  .reihe{grid-template-columns:72px minmax(0,1fr);column-gap:12px;row-gap:2px;
         padding:10px 4px;align-items:start}
  /* Das Bild fuehrte die Hoehe der ERSTEN Zeile — bei einem einzeiligen Titel stand das
     Feld-Label deshalb nicht unter dem Titel, sondern unter dem Bild, mit einer Luecke
     dazwischen (gut zu sehen an „Die Hodge-Vermutung"). Es spannt jetzt ueber beide
     Zeilen, und die Textspalte setzt ihre Hoehe selbst. Beide Plaetze ausdruecklich
     gesetzt: mit einem zeilenspannenden Nachbarn ist die automatische Platzierung
     nicht mehr die offensichtliche. */
  .reihe .thumb{width:72px;grid-column:1;grid-row:1 / span 2}
  .reihe .fid,.reihe .datum,.reihe .q{display:none}
  .reihe .titel{white-space:normal;font-size:16px;line-height:1.32;grid-column:2;grid-row:1}
  .reihe .feldz{display:block;grid-column:2;grid-row:2;font-size:9px;margin-top:3px}
  /* WO DER WIDERSPRUCH STEHT — hochkant nicht in der Liste (CHR 06.09.).
     Die Angabe ist nicht abgeschafft, nur nicht hier: sie steht im Anriss, den ein
     Tippen oeffnet, und ab 641 px wieder in der eigenen Spalte der Tafel. In einer
     Liste, die man mit dem Daumen durchzieht, kostet sie je Eintrag eine Zeile und
     beantwortet eine Frage, die dort noch niemand gestellt hat. */
  .reihe .gsz{display:none}

  .lese-blatt{width:100%;border-left:0}
  .lese-inhalt{padding:24px 18px 0}
  .lese-spalten{grid-template-columns:1fr;gap:28px}
  .zweifel{position:static}
  .prosa{font-size:16px;max-width:none}
  .tafel-fuss{padding:14px 4px 40px;font-size:9px}
  footer .wrap{gap:16px}
}

/* Nichts darf quer schieben — geprüft bei 390 px (Vorlage §13). */
html,body{overflow-x:hidden}

/* ── Masthead-Bestandteile, die im Entwurf noch als style-Attribut standen ──
   Unter CSP mit strengem style-src wären Inline-Styles wirkungslos; außerdem
   gehört Gestaltung ohnehin nicht ins Markup. */
.markenfeld{position:relative}
.markenfeld .marke{position:relative}
.orbitale{position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);
  width:min(620px,92%);height:auto;opacity:.10;pointer-events:none}
.tafel-kopf .r{text-align:right}

/* ── Artikelseite (tribune-reader@forschung, Stil „zetesis") ────────────────
   Die Seite benutzt dieselben Klassen wie das Lese-Overlay der Startseite —
   sie soll aussehen wie der Anriss, nur ganz. Was hier steht, gilt nur dort. */
.artikelseite a{color:var(--goldhell);text-decoration:none;
  border-bottom:1px solid var(--goldtief)}
.artikelseite a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.artikelseite .zeile-oben a{border-bottom:0;color:var(--gold);letter-spacing:.28em}
.artikelseite main.lese-inhalt{padding:44px 26px 60px;max-width:1400px}
.artikelseite .weiterlesen{color:#12100E;border-bottom:0}
.artikelseite .weiterlesen:hover{color:#12100E}
@media (max-width:640px){ .artikelseite main.lese-inhalt{padding:26px 18px 40px} }

/* ══════════════════════════════════════════════════════════════════════════
   DER SOLARIST — die Auskunft des Instituts (js/solarist.js)
   Er sitzt im Lesesaal unter der Zweifel-Tafel und über den Kopfknopf auch
   ohne offenen Bericht. Auf dem Handy bleibt er erreichbar: er ist Text und
   Frage, kein Instrument.
   ══════════════════════════════════════════════════════════════════════════ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.solarist{border:1px solid var(--linie2);background:var(--panel);margin-top:32px;
  padding:22px 22px 18px}
.sol-kopf{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  border-bottom:1px solid var(--linie);padding-bottom:12px;margin-bottom:14px}
.sol-kopf h3{margin:0;font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);font-weight:400}
/* ⚠ KEIN uppercase auf der ganzen Zeile: griechische Minuskeln werden dadurch zu
   Majuskeln, und aus „ζήτησις" wird „ZHTHΣIΣ" — ein anderes Wort, das niemand liest.
   Die Auszeichnung gilt nur dem lateinischen Teil. */
.sol-unter{font-size:9.5px;letter-spacing:.16em;color:var(--faint)}
.sol-unter .lat{text-transform:uppercase}
.sol-kontext{font-family:var(--serif);font-size:13.5px;color:var(--dim);margin-bottom:14px}
.sol-kontext b{color:var(--ink);font-weight:600}

.sol-verlauf{display:flex;flex-direction:column;gap:16px;max-height:60vh;overflow-y:auto}
.sol-verlauf:empty{display:none}
.sol-beitrag{font-family:var(--serif);font-size:14.5px;line-height:1.7}
.sol-frage-block{border-left:2px solid var(--tuerkis);padding-left:14px;color:var(--dim)}
.sol-antwort{border-left:2px solid var(--goldtief);padding-left:14px}
.sol-hinweis{border-left:2px solid var(--faint);padding-left:14px;color:var(--dim);font-style:italic}
.sol-text p{margin:0 0 .9em}
.sol-text p:last-child{margin-bottom:0}
.sol-text h3,.sol-text h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin:1.4em 0 .5em;font-weight:500}
.sol-text ul{padding-left:1.1em;margin:0 0 .9em}
.sol-text li{margin-bottom:.35em}
.sol-text hr{border:0;border-top:1px solid var(--linie);margin:1.2em 0}
.sol-text strong{color:var(--goldhell);font-weight:600}
.sol-text a{color:var(--tuerkis)}
/* ⚠ EINE ADRESSE MUSS UMBRECHEN DÜRFEN. Seit sie im Antworttext steht (#991) und
   klickbar ist, sind es 70 Zeichen am Stück; das Panel ist 400 px breit und auf dem
   Handy schmaler. Ohne diese Zeile schiebt der Kasten quer — der Fehler, gegen den
   Vorlage §13 die 390-px-Probe verlangt. `code` steht daneben, weil der Solarist die
   Adresse mal fett, mal in Backticks setzt. */
.sol-text a,.sol-text code{overflow-wrap:anywhere}
.sol-text code{font-size:inherit}

/* Die Metrikzeile als Apparat-Chips. Fehlende Felder erzeugen keinen Chip —
   ein leerer Platzhalter behauptete einen Wert, den es nicht gibt. */
.sol-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.sol-chips .chip{font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);border:1px solid var(--linie2);
  padding:4px 9px;background:var(--panel2)}
.sol-chips .chip b{color:var(--gold);font-weight:500}
.sol-chips .chip--fid{color:var(--faint);letter-spacing:.06em}

/* Der Zweifel bekommt auch hier eine eigene Zone — er ist der Leitsatz des
   Hauses, kein Anhang. */
.sol-zweifel{border:1px solid var(--goldtief);background:var(--panel2);
  padding:16px 18px 13px;margin-top:16px}
.sol-zweifel--belege{border-color:var(--linie2)}
.sol-zweifel h4{margin:0 0 9px;font-family:var(--mono);font-size:9.5px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold);font-weight:400}
.sol-zweifel--belege h4{color:var(--tuerkis)}
.sol-beleglage{margin-top:12px;padding-top:10px;border-top:1px solid var(--linie);
  font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase}

/* Warten: Punkte sofort, nach acht Sekunden sagt der Text, was geschieht. */
.sol-warten{display:flex;align-items:center;gap:12px;color:var(--faint);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.sol-punkte{display:inline-flex;gap:5px}
.sol-punkte i{width:6px;height:6px;border-radius:50%;background:var(--goldtief);
  animation:sol-blink 1.3s infinite}
.sol-punkte i:nth-child(2){animation-delay:.22s}
.sol-punkte i:nth-child(3){animation-delay:.44s}
@keyframes sol-blink{0%,100%{opacity:.25}50%{opacity:1}}

.sol-eingabe{display:flex;gap:10px;margin-top:16px;align-items:flex-end}
.sol-eingabe textarea{flex:1;background:var(--tief);color:var(--ink);
  border:1px solid var(--linie2);padding:11px 13px;font-family:var(--serif);
  font-size:15px;line-height:1.5;resize:vertical;min-height:52px}
.sol-eingabe textarea:focus{border-color:var(--goldtief);outline:none}
.sol-eingabe button{background:var(--gold);color:#12100E;border:1px solid var(--gold);
  padding:13px 22px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;cursor:pointer;transition:.15s}
.sol-eingabe button:hover:not(:disabled){background:var(--goldhell);border-color:var(--goldhell)}
.sol-eingabe button:disabled{opacity:.45;cursor:default}
.sol-fuss{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--faint);
  line-height:1.8;margin:14px 0 0}

@media (max-width:640px){
  .solarist{padding:16px 14px 14px;margin-top:24px}
  .sol-eingabe{flex-direction:column;align-items:stretch}
  .sol-verlauf{max-height:none}
}

/* Der Kopfknopf zum Solaristen — im Masthead, unaufdringlich wie er selbst. */
.kopf-knopf{background:none;border:0;padding:0;cursor:pointer;color:var(--gold);
  font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:7px;transition:.15s}
.kopf-knopf:hover{color:var(--goldhell)}
.kopf-knopf svg{width:15px;height:15px;flex:none}

/* ── Der Lesesaal ist einspaltig (CHR 2026-09-04, abends) ──────────────────
   Hier stand einen Tag lang `.lese-solarist`: die Auskunft als feste Spalte links
   neben dem Blatt, mit zwei Ausnahmeregeln für 1400 px (Blatt schmaler) und 1100 px
   (Spalte ganz weg). Beides ist ausgebaut. Der Grund ist nicht Platz, sondern Gestalt:
   dieselbe Sache hatte zwei — angedockte Spalte hier, schwebende Rune dort — und die
   Spalte verschwand ausgerechnet auf den schmalen Schirmen, wo sie ohnehin nur eine
   halbe war. Die Rune (unten) gilt jetzt überall, und das Blatt behält seine
   Grundbreite `min(980px,100%)` aus `.lese-blatt`. */


/* ══════════════════════════════════════════════════════════════════════════
   DIE RUNE — der Zugang zum Solaristen, auf BEIDEN Flächen (CHR 2026-09-04)
   Startseite wie Artikelseite: dasselbe ζ wie im Favicon und auf der CHRONOS-Karte,
   an derselben Stelle. Wer den Bericht liest, hat den Text vor sich und die Frage im
   Kopf; die Rune kostet nichts, solange man liest, und ist da, wenn man sie braucht.

   ⚠ SIE MUSS ÜBER DER LESE-EBENE LIEGEN, sonst wäre sie auf der Startseite genau dann
     unerreichbar, wenn ein Anriss offen ist — also im wichtigsten Moment. Deshalb
     z-index 60/59 gegen deren 50. Der `backdrop-filter` der Ebene trübt nur, was
     HINTER ihr liegt; Rune und Panel malen darüber und bleiben klar.
   ══════════════════════════════════════════════════════════════════════════ */
.rune{position:fixed;right:22px;bottom:22px;z-index:60;width:56px;height:56px;
  border-radius:50%;border:1px solid var(--goldtief);background:var(--panel);
  color:var(--gold);font-family:var(--serif);font-size:30px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px -8px #000C;transition:.15s}
.rune:hover{background:var(--hebung);color:var(--goldhell);border-color:var(--gold)}
.rune[aria-expanded="true"]{background:var(--gold);color:#12100E;border-color:var(--gold)}

.begleiter{position:fixed;right:22px;bottom:88px;z-index:59;
  width:min(400px,calc(100vw - 44px));max-height:70vh;overflow-y:auto;
  background:var(--panel);border:1px solid var(--linie2);
  box-shadow:0 18px 46px -12px #000D;padding:16px 16px 14px;display:none}
.begleiter[data-auf="1"]{display:block}
.begleiter .solarist{margin-top:0;border:0;background:transparent;padding:0}
.begleiter .sol-verlauf{max-height:46vh}

@media (max-width:640px){
  .rune{right:14px;bottom:14px;width:50px;height:50px;font-size:26px}
  .begleiter{right:10px;left:10px;bottom:74px;width:auto;max-height:76vh}
}

/* ── Der Kopf auf dem Hochkant-Schirm (CHR 06.09.: „das Datum steht eine Zeile zu tief") ──
   Der Stand haengt am Solaristen-Knopf, und bei 26/100 em Laufweite passte das Paar
   nicht mehr in die Zeile: der Umbruch fiel MITTEN INS DATUM — „6. SEPTEMBER" oben,
   „2026" allein darunter. Zwei Griffe, beide noetig:
     · `nowrap` auf dem Stand — er bricht als GANZES oder gar nicht. Eine verwaiste
       Jahreszahl kann es damit auf keiner Schirmbreite mehr geben.
     · engere Laufweite fuer die ganze Leiste, damit das Paar auch Platz FINDET.
       Nur den Stand zu verengen haette eine dritte Laufweite in dieselbe Leiste
       gesetzt; die Enge ist eine Entscheidung fuer die Leiste, nicht fuer ein Wort.
   Gerechnet fuer 390 px (Vorlage §13): 350 px nutzbar, das Paar braucht ~317. Auf
   noch schmaleren Schirmen wandert der Stand geschlossen in die naechste Zeile. */
@media (max-width:640px){
  .zeile-oben{letter-spacing:.12em;gap:10px 16px}
  .zeile-oben .kopf-knopf{letter-spacing:.12em}
  #kopf-stand{white-space:nowrap}
}

/* ══════════════════════════════════════════════════════════════════════════
   DAS LOGO — CHRs Bildmarke (2026-09-05, #1003)
   ══════════════════════════════════════════════════════════════════════════
   `logo.webp`, gezeichnet von CHR (Entwuerfe/„zetesis web logo schatten.webp"):
   das ζ in einem offenen Ring, daneben ZETESIS in einer Didone-Versalie, darunter
   die Spiegelung. Verlustfrei auf 1400 px gerechnet (58 KB) — das Doppelte der
   groessten Anzeigebreite, damit es auf feinen Schirmen nicht ausfranst.

   ⚠ VORHER STAND HIER EINE SCHRIFTMARKE („ζETESIS", die Rune als erster Buchstabe).
     CHR am 05.09.: „bei deinem ist die rune zu nahe am wort" — und er hatte da
     laengst eine eigene Zeichnung liegen. Die Bilddatei ist jetzt die Marke; die
     Schriftfassung ist ausgebaut, nicht auskommentiert.

   ⚠ ES IST NICHT DIE RUNE UNTEN RECHTS. Die ist ein Knopf (gefuellter Kreis,
     Schatten, schwebend, `.rune`) und ruft den Solaristen. Das Logo ist ein NAME und
     ruft niemanden — es fuehrt nur nach Hause.

   ★ `alt="ZETESIS"` traegt den Namen fuer Vorlese und Suchmaschine; das Bild traegt
     ihn nur fuers Auge. Ohne diesen Text hiesse die Seite fuer eine Maschine gar nichts. */
/* 460 px, nicht 700 (CHR 05.09.: „das logo ist zu groß das ist nicht mehr so schön").
   Das Maß ist an der abgelösten Schriftmarke festgemacht: sie war höchstens 110 px hoch.
   Das Bild ist 1400x302, die Spiegelung zählt mit — 460 px Breite ergeben 99 px
   Gesamthöhe und 67 px für den Zug selbst. Es nimmt damit etwas weniger Raum ein als
   die Marke vorher, und die Orbitale dahinter sind wieder zu sehen. */
.markenbild{display:block;height:auto;width:min(460px,74vw)}
h1.marke{margin:0;display:flex;justify-content:center;line-height:0}

/* Klein in der Kopfleiste (Impressum, Anomalie-Seite, Berichtsseite): `logo-leiste.webp`,
   dieselbe Zeichnung ohne die Spiegelung. In einer 10-px-Leiste ist sie kein Effekt
   mehr, sondern Unruhe.

   ⚠ EIN WAAGERECHTER ZUSCHNITT WÄRE FALSCH GEWESEN, und zwar messbar: der Signet-Kreis
     reicht bis Zeile 297 von 302, die Schriftgrundlinie nur bis 204. Jeder Schnitt, der
     die Spiegelung entfernt, köpft den Kreis — im ersten Versuch am 05.09. genau so
     passiert und im Screenshot gesehen. Die zweite Fassung entsteht deshalb im
     Erzeuger (`logo_fassungen.py`), der nur rechts vom Signet ausblendet.
   Beide Fassungen haben dieselben Maße, damit die Marke im Kasten nicht verrutscht. */
.zeile-oben .logo{display:inline-flex;align-items:center;border-bottom:0;vertical-align:middle}
.zeile-oben .logo img{height:26px;width:auto;display:block;transition:opacity .18s ease}
.zeile-oben .logo:hover img,.zeile-oben .logo:focus-visible img{opacity:.78}

/* ── Das Schwesterhaus (CHR 2026-09-05, #1003) ─────────────────────────────
   CHRONOS ist der archäoastronomische Atlas — dort liegt die Archäologie, die hier
   bewusst NICHT liegt (README „Was sie nicht ist"). Bisher stand dieser Verweis nur
   in der Doku; wer über einen Steinkreis-Bericht hereinkam, fand den Weg nicht.

   ⚠ KEIN AUSWÄRTS-PFEIL, KEIN FREMDES TÜRKIS. CHR am 05.09.: „chronos ist auch im
     haus forschung genau wie zetesis". Es ist kein Verlassen der Seite, sondern ein
     Gang ins Nebenzimmer — also dasselbe Gold-Vokabular wie die Dachmarke, nur mit
     dem Namen als Träger. Ein ↗ hätte behauptet, man gehe fort. */
.zeile-oben a.haus{color:inherit;border-bottom:0;text-decoration:none}
.zeile-oben a.haus b{color:var(--gold);font-weight:400;
  border-bottom:1px solid var(--goldtief);
  transition:color .18s ease,border-color .18s ease}
.zeile-oben a.haus:hover b,.zeile-oben a.haus:focus-visible b{
  color:var(--goldhell);border-color:var(--goldhell)}
/* Die Artikelseite färbt jeden Link der Leiste gold und sperrt ihn weit
   (`.artikelseite .zeile-oben a`) — für den Beisatz nach dem Namen wäre das zu viel. */
.artikelseite .zeile-oben a.haus{letter-spacing:.26em}
.zeile-oben .tr{color:var(--linie2);padding:0 6px}

/* ══════════════════════════════════════════════════════════════════════════
   DIE ANOMALIE-SEITE (anomalie.html, js/anomalie.js) — #1003, CHR 2026-09-05
   ══════════════════════════════════════════════════════════════════════════
   Der Anomalie-Grad trägt die Senkrechte im Himmel und steht in der Kopfzeile jeder
   Berichtsseite — erklärt hat ihn bis heute niemand. Diese Seite tut es, und zwar mit
   den Zahlen des laufenden Bestands: `js/anomalie.js` holt sie aus `data/bestand.json`.
   Eingebrannte Zahlen wären am Tag nach dem Deploy falsch, und dieses Haus verkauft
   Belegbarkeit.

   ⚠ Fehlt der Block im Bestand (Erhebung ausgefallen), bleibt die Fläche LEER statt
     eine Verteilung zu behaupten. Deshalb tragen die Kästen ihre Zahlen nicht im
     Markup, sondern bekommen sie vom Skript. */
.stufen{border:1px solid var(--linie2);background:var(--panel2);margin:0 0 1.6em}
.stufe{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:baseline;
  padding:13px 18px;border-bottom:1px solid var(--linie)}
.stufe:last-child{border-bottom:0}
.stufe .wert{font-family:var(--mono);font-size:15px;color:var(--gold);letter-spacing:.02em}
.stufe .was{font-family:var(--serif);font-size:15px;color:var(--ink);line-height:1.5}
.stufe .was i{display:block;font-family:var(--mono);font-size:9.5px;font-style:normal;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:4px}
.stufe--gate{background:var(--hebung)}
.stufe--gate .wert{color:var(--goldhell)}

/* Die gemessene Verteilung — dieselbe Balkensprache wie das Feld-Instrument (.vz) */
.verteilung{border:1px solid var(--linie2);background:var(--panel2);padding:4px 0;margin:0 0 1.6em}
.vt{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:16px;align-items:center;
  padding:11px 18px}
.vt .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim)}
.vt .zahl{font-family:var(--mono);font-size:11px;color:var(--gold);text-align:right}
.vt .balken{grid-column:1/-1;height:3px;background:var(--linie2);position:relative;margin-top:-4px}
.vt .balken i{position:absolute;inset:0;right:auto;background:var(--tuerkis);opacity:.75}
.vt--stark .balken i{background:var(--gold);opacity:.9}

/* Die Muster (Typen). Zwei Spalten auf breiten Schirmen, eine auf schmalen. */
/* Einspaltig, nicht `auto-fit`: die Prosaspalte ist auf 70ch begrenzt, zwei Spalten
   à 300 px passen dort nie — der Mehrspalten-Ansatz hätte nur so ausgesehen, als
   könnte er sich öffnen. */
.muster{border-top:1px solid var(--linie2);margin:0 0 1.6em}
.mu{display:grid;grid-template-columns:minmax(0,1fr) 46px;gap:4px 12px;align-items:baseline;
  padding:12px 2px;border-bottom:1px solid var(--linie)}
.mu .balken{grid-column:1/-1;height:2px;background:var(--linie2);position:relative;margin-top:3px}
.mu .balken i{position:absolute;inset:0;right:auto;background:var(--tuerkis);opacity:.55}
.mu--fremd .balken i{background:var(--faint);opacity:.5}
.mu .nm{font-family:var(--serif);font-size:15px;color:var(--ink);line-height:1.4}
.mu .nm em{display:block;font-family:var(--mono);font-size:9.5px;font-style:normal;
  letter-spacing:.1em;color:var(--faint);margin-top:3px;line-height:1.6}
.mu .nm .roh{color:var(--linie2)}
.mu .anz{font-family:var(--mono);font-size:12px;color:var(--gold);text-align:right}
/* Ein Typ, den das Modell selbst gebildet hat — er steht nicht in der Vorgabe.
   Er wird gezeigt und gekennzeichnet, nicht weggelassen: was erhoben wurde, gilt. */
.mu--fremd .anz{color:var(--dim)}
/* Ein selbst gebildeter Typ behält seinen ROHNAMEN samt Unterstrich und steht in der
   Maschinenschrift. Ein aufgehübschtes „Falsche dokumentation" hätte wie ein Tippfehler
   der Redaktion ausgesehen — es ist aber gar kein redaktioneller Name. */
.mu--fremd .nm{font-family:var(--mono);font-size:12.5px;color:var(--dim);letter-spacing:.04em}
.mu--fremd .nm .mark{color:var(--tuerkis);font-family:var(--mono);font-size:9px;
  letter-spacing:.14em;text-transform:uppercase}

.messstand{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);border-top:1px solid var(--linie);
  padding-top:12px;margin:2em 0 0;line-height:1.9}
.messstand b{color:var(--dim);font-weight:400}
/* Solange die Zahlen nicht da sind, steht hier ein Satz und keine leere Fläche. */
.laedt{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);padding:18px 2px}
.prosa--breit{max-width:70ch}

/* Abstand vor dem Rückweg im Impressum — stand bis 05.09. als style-Attribut im
   Markup, was der eigenen Hausregel widerspricht (kein Inline-Style). */
.abstand-oben{margin-top:34px}

/* ── Links außerhalb der Artikelseiten ─────────────────────────────────────
   `.artikelseite a` färbt Impressum, Anomalie-Seite und Berichtsseiten. Die
   STARTSEITE trägt diese Klasse nicht — dort blieb jeder Link im Browserblau, auch
   der Impressums-Link im Fuß (seit dem ersten Tag, am 05.09. im Screenshot gesehen).
   Gefärbt wird über den Fuß und den Hinweis, nicht global über `a`: die Kopfleiste
   und die Auskunft haben ihre eigenen, absichtlichen Farben. */
footer a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--linie2);
  transition:color .18s ease,border-color .18s ease}
footer a:hover,footer a:focus-visible{color:var(--goldhell);border-color:var(--goldtief)}
.hint a{color:inherit;text-decoration:none;border-bottom:1px solid var(--goldtief);
  transition:border-color .18s ease}
.hint a:hover b,.hint a:focus-visible b{color:var(--gold)}
.hint a:hover,.hint a:focus-visible{border-color:var(--gold)}

/* ── 404: Abstand vor dem Rueckweg ────────────────────────────────────────
   Stand bis 2026-09-06 als `style="margin-top:28px"` im Markup von 404.html.
   Die CSP (#1008) laesst keine Style-Attribute mehr zu; der Wert ist
   unveraendert uebernommen, damit die Seite gleich aussieht wie vorher. */
.zurueck { margin-top: 28px; }

/* ══════════════════════════════════════════════════════════════════════════
   DIE ERHOBENEN BEFUNDE unter dem Bericht (#1030, CHR 2026-09-07)
   ══════════════════════════════════════════════════════════════════════════
   Eingeklappt, weil der Bericht die Hauptsache bleibt: wer die Begruendung will,
   oeffnet sie. <details> ist nativ — kein Skript, keine Umschaltlogik, nichts, was
   unter einer scharfen CSP still ausfallen koennte (CLAUDE.md, Punkt 2).
   Die Form folgt der Zweifel-Tafel: goldene Versalien als Marke, Serif fuer alles,
   was gelesen wird, Mono fuer alles, was benannt wird. */
.befunde{border:1px solid var(--linie2);background:var(--panel);margin:28px 0 0}
.befunde[open]{border-color:var(--goldtief)}
.befunde>summary{cursor:pointer;padding:13px 18px;list-style:none;
  font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;gap:10px}
.befunde>summary::-webkit-details-marker{display:none}
/* Das Zeichen dreht sich beim Oeffnen — die einzige Bewegung hier, und sie sagt
   etwas: zu/auf. Wer `prefers-reduced-motion` gesetzt hat, bekommt sie ohne Uebergang. */
.befunde>summary::after{content:"▸";margin-left:auto;color:var(--gold);
  font-size:15px;line-height:1;transition:transform .18s ease}
.befunde[open]>summary::after{transform:rotate(90deg)}
.befunde>summary:hover{color:var(--goldhell)}
.befunde>summary:focus-visible{outline:1px solid var(--tuerkis);outline-offset:-3px}
@media (prefers-reduced-motion:reduce){.befunde>summary::after{transition:none}}

.bf-vor{font-family:var(--serif);font-size:12.5px;line-height:1.65;color:var(--dim);
  margin:0;padding:0 18px 15px;border-bottom:1px solid var(--linie)}
.bf-vor a{color:var(--tuerkis)}

.bf{padding:16px 18px;border-bottom:1px solid var(--linie)}
.bf:last-child{border-bottom:none}
.bf-kopf{font-size:10.5px;letter-spacing:.12em;color:var(--dim);margin:0 0 9px;
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.bf-wert{color:var(--gold);font-variant-numeric:tabular-nums}
/* Ein selbst gebildeter Typ wird GEZEIGT und gekennzeichnet, nicht umgebogen (#1009).
   Deshalb faellt er hier auf, statt sich unter die anerkannten zu mischen. */
.bf-neu{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tief);
  background:var(--faint);padding:1px 6px;border-radius:2px}
.bf-l,.bf-e{font-family:var(--serif);font-size:13.5px;line-height:1.62;margin:0 0 7px}
.bf-l{color:var(--ink)}
.bf-e{color:var(--dim)}
/* Beide Labels gleich gewichtet: die geltende Erklaerung ist eine Aussage, keine
   Ueberschrift ueber der Luecke — und die Luecke keine Fussnote zu ihr. */
.bf-l b,.bf-e b{font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);font-weight:400;display:block;margin:0 0 3px}
.bf-q{margin:9px 0 0;padding:0 0 0 15px;list-style:none}
.bf-q li{font-size:11px;color:var(--faint);line-height:1.5;margin:0 0 3px;position:relative}
.bf-q li::before{content:"·";position:absolute;left:-11px;color:var(--goldtief)}

@media (max-width:720px){
  .befunde>summary{padding:12px 14px;letter-spacing:.22em}
  .bf,.bf-vor{padding-left:14px;padding-right:14px}
  .bf-l,.bf-e{font-size:14px}
}