/* ====================  css/welt.css  ====================
   renekress.de, von Grund auf neu.

   Der Unterschied zur alten Fassung ist nicht die Farbe, sondern die
   Bauweise: dort gestapelte Abschnitte mit deckenden Hintergruenden, hier
   eine durchgehende Buehne, ueber der alles schwebt. Kein Abschnitt bekommt
   je einen eigenen Grund - der Kontrast entsteht ueber Schrift und Raum.

   Aus dem alten Projekt wird nichts uebernommen: andere Schriften, andere
   Farben, keine Verlaeufe, kein Kartengitter, keine Glasflaechen. */

:root{
  color-scheme: dark;

  /* Die Farben stammen aus der Logodatei, nicht aus dem Gefuehl. Die
     kraeftigsten Toene darin sind #0090FC, #3060F0 und #9C18FC - Blau zu
     Violett. Kein Cyan, kein Magenta; die frueheren Verlaeufe lagen daneben. */
  --blau:      #0090fc;
  --blau-tief: #3060f0;
  --violett:   #9c18fc;
  --violett-h: #a860f0;

  /* Der Raum. Fast schwarz, aber mit einem Stich ins Blaue - reines
     Schwarz wirkt neben den Sternen wie ein Loch. */
  --raum:      #05060c;
  --raum-hoch: #090b14;

  --text:       rgba(226,232,244,.92);
  --text-leise: rgba(226,232,244,.56);
  --text-fern:  rgba(226,232,244,.52);   /* .34 lag ueber dem Punktfeld bei 2,73:1 */
  --linie:      rgba(140,170,240,.16);

  --rot:        #e0483a;   /* nur fuer Abzuege und Fehlbetraege */

  --papier:     #f4f6fb;
  --tinte:      #0b0d16;

  --schrift: "Sora", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --kopf-h: 60px;

  --spalte: min(1240px, 92vw);
  --rand:   clamp(20px, 5vw, 72px);
}

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

html{ background: var(--raum); scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto } }

body{
  background: var(--raum);
  color: var(--text);
  font-family: var(--schrift);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Die Buehne ----------
   fixed, nicht sticky: ein sticky-Canvas wandert bei jedem Scroll durch den
   Layoutbaum und erzeugt Compositing-Arbeit. fixed liegt auf einer eigenen
   Ebene und wird nie neu vermessen. */
#welt{
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;   /* sonst frisst das Canvas jeden Klick darueber */
}
.ohne-welt #welt{ display: none }

/* Der Dunst. Liegt zwischen Canvas und Inhalt - beide auf z-index 0, die
   Reihenfolge im Dokument entscheidet. Kein Weichzeichner, nur eine flache
   Abdunklung: die Punkte bleiben sichtbar, verlieren aber die Spitzen, an
   denen Text unlesbar wurde. Nach unten etwas dichter, weil dort die
   Tabellen und Listen stehen. */
.dunst{
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(5,6,12,.30)  0%,
    rgba(5,6,12,.44) 40%,
    rgba(5,6,12,.44) 100%);
}
.ohne-welt .dunst{ display: none }

/* Ohne WebGL oder bei reduzierter Bewegung bleibt ein ruhiger Grund statt
   einer leeren Flaeche. */
.ersatzgrund{ display: none }
.ohne-welt .ersatzgrund{
  display: block;
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 78% 12%, rgba(70,86,120,.20), transparent 70%),
    radial-gradient(50vw 45vh at 18% 70%, rgba(90,70,100,.16), transparent 72%);
}

/* .kopf faellt aus der Gruppenregel heraus: der z-index 10 stand bisher nur
   deshalb dort, weil die spaetere Regel die fruehere schlug. Ein Umsortieren
   des Stylesheets haette ihn still auf 1 fallen lassen. */
main, .fuss{ position: relative; z-index: 1 }

/* ---------- Kopfzeile ----------
   Ein Briefkopf mit Kolumnentitel, keine Menueleiste. Sie traegt den
   Absender, das Kapitel in dem der Leser steht, und die eine Handlung.
   Sie aendert sich beim Scrollen nicht: Hoehe, Grund, Deckkraft und Ort
   bleiben. Auf einer Seite, deren einzige Bewegung die scrollgekoppelte
   Kamerafahrt ist, waere ein zweiter, eigenstaendig getakteter Rhythmus
   im selben Bild Unruhe.

   .kopf bekommt bewusst KEIN transform und KEIN filter: beides machte den
   Kopf zum enthaltenden Block fuer position:fixed-Nachfahren. */
.kopf{
  position: fixed; inset: 0 0 auto 0;
  z-index: 10;
  height: var(--kopf-h);
  pointer-events: none;      /* der leere Teil des Bandes frisst keine Klicks */
}

/* Der Schleier. Ein Pseudoelement IM Kopf, kein zweites fixed-Element:
   .kopf ist mit z-index:10 selbst ein Stapelkontext, ein z-index:-1 kann
   daraus weder nach oben noch nach unten entkommen.

   Er ist keine Optik, sondern die Voraussetzung fuer Lesbarkeit: ueber
   einer hellen Punktballung ergibt --text-leise ohne ihn 1,05:1, mit ihm
   5,25:1. Kein backdrop-filter - ein Weichzeichner ist ein Tiefpass, eine
   Punktwolke ist hochfrequent; aus jedem Punkt wuerde ein wandernder Fleck.
   .92 statt 1, damit die hellsten Punkte durchscheinen und keine Naht
   entsteht. Stuetzpunkt .68 statt .46, weil Alpha linear faellt und die
   empfundene Helligkeit nicht. --raum statt Schwarz wegen des Blaustichs. */
.kopf::before{
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: calc(var(--kopf-h) + 60px);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(5,6,12,.92)   0%,
    rgba(5,6,12,.68)  50%,
    rgba(5,6,12,0)   100%);
}

/* Innenkasten in der Breite des Satzes: sonst waechst der Versatz zwischen
   Marke und Textspalte beim Ziehen des Fensters (gemessen 51px bei 1280,
   100px bei 1440, 180px bei 1600) und wird von niemandem als Absicht
   gelesen. Eine einzige Schriftgroesse im ganzen Kopf. */
.kopf-inhalt{
  position: relative;
  width: var(--spalte); margin-inline: auto;
  padding-inline: var(--rand);
  height: 100%;
  display: flex; align-items: center; gap: 20px;

  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1;
}
.kopf-inhalt > *{ pointer-events: auto }

/* ----- Marke.
   20px hoch: die Versalhoehe der Wortmarke misst dann 16,05px - genau eine
   Zeile Fliesstext. Der Absender ist so gross wie ein Satz, nicht groesser.
   Ohne Monogramm, weil der Blau-Violett-Verlauf fuer h1 em reserviert ist;
   was immer sichtbar ist, betont nichts mehr. ----- */
.marke{ display: block; text-decoration: none }
.marke img{ display: block; height: 20px; width: auto }
@media (max-width: 560px){
  .marke img{ aspect-ratio: 183 / 156 }   /* falls width/height am <source> ignoriert wird */
}

/* ----- Kolumnentitel: nennt das Kapitel und oeffnet zugleich das
   Verzeichnis. Damit gibt es kein Menue, das auf dem Telefon verschwindet,
   und keinen Hamburger, der etwas anderes tut als der Desktop. ----- */
.kolumnentitel{
  font: inherit;                 /* erbt letter-spacing und text-transform */
  background: none; border: 0;
  border-bottom: 1px solid var(--linie);
  padding: 0 0 4px;
  color: var(--text-leise);
  cursor: pointer;
  anchor-name: --kolumnentitel;
  transition: color .14s linear, border-color .14s linear, opacity .12s linear;
}
.kolumnentitel:hover,
.kolumnentitel:focus-visible,
.kolumnentitel[aria-expanded="true"]{
  color: var(--text); border-bottom-color: var(--papier);
}
.kolumnentitel.wechselt{ opacity: 0 }

/* ----- Die eine Handlung. Text mit Haarlinie, kein Knopf, kein Verlauf. ----- */
.kopf-tat{
  margin-left: auto;
  color: var(--text); text-decoration: none;
  border-bottom: 1px solid var(--linie);
  padding-bottom: 4px;
  transition: border-color .14s linear;
}
.kopf-tat:hover, .kopf-tat:focus-visible{ border-bottom-color: var(--papier) }

/* Unter 820px braucht die Zeile mehr Platz als sie hat. Die Handlung steht
   dann als letzte Zeile im Verzeichnis und zweimal im Fliesstext. */
@media (max-width: 820px){ .kopf-tat{ display: none } }
@media (max-width: 400px){ .kopf-inhalt{ font-size: .70rem; letter-spacing: .14em } }

/* ----- Das Verzeichnis. popover=auto liefert Licht-Dismiss, Escape und
   Fokusrueckgabe vom Browser; eine handgeschriebene Fokusfalle waere eine
   schlechtere Kopie davon. Keine Scrollsperre: body{position:fixed} setzt
   scrollY auf 0, und welt.js liest ausschliesslich scrollY - die Kamera
   floege bei jedem Oeffnen in die Hero-Pose zurueck. ----- */
#kapitel-index{
  position: fixed;
  position-anchor: --kolumnentitel;
  position-area: bottom span-right;
  inset: auto;                    /* UA-Regel des Popovers zuruecknehmen */
  margin: 12px 0 0;
  width: min(320px, calc(100vw - 2 * var(--rand)));
  padding: 6px 20px;
  border: 1px solid var(--linie);
  border-radius: 2px;
  background: rgba(5,6,12,.96);
  background: color-mix(in oklab, var(--raum) 96%, transparent);
  color: var(--text);
  pointer-events: auto;
  opacity: 0;
  transition: opacity .16s linear,
              display .16s allow-discrete,
              overlay .16s allow-discrete;
}
#kapitel-index:popover-open{ opacity: 1 }
@starting-style{ #kapitel-index:popover-open{ opacity: 0 } }

@position-try --nach-links{ position-area: bottom span-left }
#kapitel-index{ position-try-fallbacks: --nach-links }

@supports not (anchor-name: --x){
  #kapitel-index{
    top: calc(var(--kopf-h) + 12px);
    left: calc((100vw - var(--spalte)) / 2 + var(--rand));
    right: auto;
  }
}

#kapitel-index ul{ list-style: none }
#kapitel-index a{
  display: block;
  padding: 13px 0 13px 14px;      /* 38px Trefferflaeche, WCAG 2.2 verlangt 24 */
  border-left: 1px solid transparent;
  color: var(--text-leise); text-decoration: none;
  transition: color .14s linear, border-color .14s linear;
}
#kapitel-index a:hover{ color: var(--text) }
#kapitel-index a[aria-current]{ color: var(--text); border-left-color: var(--text) }
#kapitel-index a.tat{ color: var(--text) }
#kapitel-index .tueren{
  margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--linie);
}

/* ----- Fokus. Der Kopf ist die erste Tabstation der Seite und war bisher
   der einzige Ort ohne sichtbaren Fokus. ----- */
.kopf a:focus-visible,
.kopf button:focus-visible,
#kapitel-index a:focus-visible{
  outline: 2px solid var(--papier);
  outline-offset: 3px;
}

.sprung{ position: absolute; left: -9999px; top: 0 }
.sprung:focus{
  left: var(--rand); top: 14px;
  padding: 8px 14px;
  background: var(--papier); color: var(--tinte);
  border-radius: 2px; text-decoration: none;
}

.nur-vorlesen{
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* Das Sprungziel muss unter den ganzen Schleier, nicht nur unter die
   Leiste - sonst steht die erste Zeile in der abgedunkelten Zone. */
main section[id]{ scroll-margin-top: calc(var(--kopf-h) + 60px) }

/* ---------- Knoepfe ----------
   Ein Rahmen, keine Fuellung, kein Verlauf: die Seite verkauft Genauigkeit,
   nicht Aufmerksamkeit. */
.knopf{
  display: inline-block;
  padding: 13px 26px;
  border: 1px solid var(--text); border-radius: 2px;
  color: var(--text); background: transparent;
  font: inherit; font-size: .94rem; text-decoration: none;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.knopf:hover{
  background: linear-gradient(96deg, var(--blau), var(--violett));
  color: #fff; border-color: transparent;
}
.knopf--klein{ padding: 9px 18px; font-size: .86rem }
.knopf--leise{ border-color: var(--linie); color: var(--text-leise) }
.knopf--leise:hover{ border-color: var(--papier) }

/* ---------- Kapitel ----------
   Ausnahmslos durchsichtig. Kein Abschnitt bekommt je einen Deckel; das ist
   der ganze Unterschied zur Foliensequenz. */
.kapitel{
  background: transparent;
  min-height: 100svh;
  display: grid; align-content: safe center;

  /* minmax(0,1fr) statt der impliziten auto-Spalte: eine auto-Spalte wird
     nach max-content bemessen, und .satz--links traegt mit max-width:46ch
     471px bei. Bei 375px Fensterbreite hat der Kasten aber nur 305px - die
     Spalte lief also 166px ueber, und weil #welt und .kopf auf 100% stehen,
     wuchs das ganze Dokument auf 528px mit. Sichtbar war es nur nicht, weil
     body{overflow-x:hidden} das Scrollen unterbindet. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 5vh, 72px);
  padding: 22vh var(--rand) 18vh;
  width: var(--spalte); margin-inline: auto;
}
.kapitel--hero{ min-height: 100svh; align-content: center }
.kapitel--still{ place-items: center; text-align: center }

/* Der Text steht ueber einem Punktfeld. Ein weicher, sehr flacher
   Abdunkler dahinter haelt ihn lesbar, ohne dass ein Kasten entsteht -
   gemessen lagen sonst helle Punkte direkt auf dem Vorspann. */
.satz{
  max-width: 62ch;
  position: relative;
}
.satz::before{
  content: "";
  position: absolute;
  inset: -8vh -6vw;
  background: radial-gradient(120% 90% at 30% 50%,
    rgba(5,6,12,.92) 0%, rgba(5,6,12,.72) 45%, transparent 78%);
  z-index: -1;
  pointer-events: none;
}
.satz--mitte::before{ background: radial-gradient(110% 90% at 50% 50%,
    rgba(5,6,12,.94) 0%, rgba(5,6,12,.76) 48%, transparent 80%) }
.satz--links{ max-width: 46ch }
.satz--mitte{ max-width: 58ch; text-align: center; margin-inline: auto }
.satz > * + *{ margin-top: 1.1em }

/* ---------- Schrift ---------- */
h1{
  font-family: var(--schrift); font-weight: 600;
  font-size: clamp(2.6rem, 7vw, 6.2rem);
  line-height: 1.02; letter-spacing: -.028em;
  text-transform: uppercase;
}
/* Die Betonung traegt den Logoverlauf - die einzige Stelle, an der er
   ueber Text laeuft. */
h1 em{
  font-style: normal;
  background: linear-gradient(96deg, var(--blau), var(--blau-tief) 42%, var(--violett));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

h2{
  text-wrap: balance;
  font-family: var(--schrift); font-weight: 600;
  font-size: clamp(1.7rem, 3.6vw, 3rem);
  line-height: 1.1; letter-spacing: -.02em;
  text-transform: uppercase;
}
h2.gross{ font-size: clamp(2.2rem, 5.2vw, 4.4rem) }

p{ color: var(--text-leise); max-width: 58ch }
.satz--mitte p{ margin-inline: auto }
p em{ font-style: normal; color: var(--text) }

.marke-zeile, .kapitel-nr{
  font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-fern);
}
.vorspann{ font-size: clamp(1.02rem, 1.35vw, 1.2rem); color: var(--text-leise) }
.klein{ font-size: .9rem; color: var(--text-fern) }
.klein a{ color: var(--text-leise) }
.nachsatz{ color: var(--text-fern); font-size: .94rem }

.hinweis-scrollen{
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-fern); align-self: end;
}

/* ---------- Die vier Quellen ---------- */
.quellen{
  list-style: none;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 3vw, 44px);
  border-top: 1px solid var(--linie); padding-top: 28px;
}
.quellen li{ display: flex; flex-direction: column; gap: 6px }
.quellen b{
  font-family: var(--schrift); font-weight: 600;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
/* Jede Quelle traegt ihren Ton aus dem Logoverlauf - dieselben vier
   Farben, die im Raum die vier Schalen faerben. */
.quellen li:nth-child(1) b{ color: var(--blau) }
.quellen li:nth-child(2) b{ color: var(--blau-tief) }
.quellen li:nth-child(3) b{ color: var(--violett) }
.quellen li:nth-child(4) b{ color: var(--text) }
.quellen span{
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-fern);
}
@media (max-width: 760px){ .quellen{ grid-template-columns: repeat(2, 1fr) } }

/* ---------- Der Beleg ----------
   Ein Blatt Papier, kein Kasten mit Glaseffekt. Die Zahlen stehen als
   Text im HTML: eine Zahl, die man nicht markieren kann, ist ein Bild
   von einer Rechnung. */
.beleg{
  background: var(--papier); color: var(--tinte);
  width: min(460px, 100%);
  padding: clamp(26px, 3.4vw, 40px);
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(48,96,240,.28), 0 1px 2px rgba(0,0,0,.6), 0 30px 80px -24px rgba(0,0,0,.9);
  justify-self: end;
}
.beleg figcaption{
  display: flex; justify-content: space-between; gap: 12px;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(22,22,26,.52);
  padding-bottom: 14px; border-bottom: 1px solid rgba(22,22,26,.22);
}
.beleg table{ width: 100%; border-collapse: collapse; margin-top: 6px }
.beleg th, .beleg td{
  text-align: left; padding: 11px 0;
  font-size: .96rem; font-weight: 400;
  border-bottom: 1px solid rgba(22,22,26,.10);
}
.beleg td{
  text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap; color: var(--tinte);
}
.beleg td.ab{ color: var(--rot) }
.beleg tfoot th, .beleg tfoot td{
  border-bottom: none; border-top: 1.5px solid rgba(22,22,26,.7);
  padding-top: 14px; font-weight: 600; font-size: 1.06rem;
}
.beleg-fuss{
  margin-top: 20px; font-size: .82rem; line-height: 1.5;
  color: rgba(22,22,26,.6); max-width: none;
}

@media (min-width: 900px){
  #rechnung{ grid-template-columns: minmax(0, 1fr) auto; align-items: center }
  #rechnung .nachsatz{ grid-column: 1 / -1 }
}

/* ---------- Listen statt Karten ---------- */
.liste{ display: flex; flex-direction: column; gap: 0 }
.liste > div{
  display: grid; grid-template-columns: minmax(180px, 22%) 1fr;
  gap: clamp(16px, 3vw, 44px);
  padding: 22px 0; border-top: 1px solid var(--linie);
}
.liste > div:last-child{ border-bottom: 1px solid var(--linie) }
.liste dt{ font-size: 1.02rem; color: var(--text) }
.liste dd{ color: var(--text-leise); max-width: 54ch }
@media (max-width: 760px){
  .liste > div{ grid-template-columns: 1fr; gap: 6px }
}

/* ---------- Formular ---------- */
.formular{
  display: flex; flex-direction: column; gap: 16px;
  max-width: 420px; margin: 32px auto 0; text-align: left;
}
.feld{ display: flex; flex-direction: column; gap: 7px }
.feld span{
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-fern);
}
.feld input{
  padding: 13px 0;
  background: transparent; border: none;
  border-bottom: 1px solid var(--linie);
  color: var(--text); font: inherit; font-size: 1rem;
  transition: border-color .2s;
}
.feld input::placeholder{ color: var(--text-fern) }
.feld input:focus{ outline: none; border-bottom-color: var(--papier) }
.feld input:focus-visible{ outline: 2px solid var(--papier); outline-offset: 3px }
.formular .knopf{ align-self: start; margin-top: 8px }

/* ---------- Fuss ---------- */
.fuss{
  display: flex; flex-wrap: wrap; gap: 12px 32px;
  justify-content: space-between;
  padding: 40px var(--rand) 48px;
  width: var(--spalte); margin-inline: auto;
  border-top: 1px solid var(--linie);
  font-size: .86rem; color: var(--text-fern);
}
.fuss nav{ display: flex; gap: 24px }
.fuss a{ color: var(--text-fern); text-decoration: none }
.fuss a:hover{ color: var(--text) }

/* ---------- Zwischenueberschrift ----------
   Nicht in Versalien: h1 und h2 tragen das Versalregister, h3 setzt sich
   davon durch Gemeine ab statt durch eine weitere Groesse. */
h3{
  font-family: var(--schrift); font-weight: 600;
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.3; letter-spacing: -.01em;
  color: var(--text);
  text-wrap: balance;
}

/* ---------- Der Ablauf ----------
   Dieselbe zweispaltige Bauweise wie .liste, damit auf der Seite genau ein
   Listenbild existiert. Die Nummer kommt aus einem Zaehler, nicht aus dem
   Text: eine Ziffer, die man markieren kann, gehoert zum Inhalt. */
.ablauf{
  list-style: none; counter-reset: schritt;
  display: flex; flex-direction: column;
}
.ablauf li{
  counter-increment: schritt;
  display: grid; grid-template-columns: minmax(64px, 8%) 1fr;
  gap: clamp(16px, 3vw, 44px);
  padding: 26px 0; border-top: 1px solid var(--linie);
}
.ablauf li:last-child{ border-bottom: 1px solid var(--linie) }
/* Die Nummer steht in Spalte 1, alles andere in Spalte 2. Ohne diese
   beiden Zeilen faellt der Absatz als drittes Rasterkind in die 64px
   schmale Nummernspalte - gemessen wuchs der Abschnitt dadurch auf
   7.657px, also achteinhalb Bildschirme fuer sechs Schritte. */
.ablauf li::before{
  content: counter(schritt, decimal-leading-zero);
  grid-column: 1; grid-row: 1;
  font-size: .74rem; letter-spacing: .22em;
  color: var(--text-fern);
  padding-top: .5em;
}
.ablauf li > *{ grid-column: 2 }
.ablauf h3{ margin-bottom: .55em }
/* Die kurze Fassung ganz vorn: drei Schritte, dichter gesetzt. */
.ablauf--knapp li{ padding: 22px 0 }
.ablauf p{ max-width: 58ch }
@media (max-width: 760px){
  .ablauf li{ grid-template-columns: 1fr; gap: 8px }
  .ablauf li::before{ padding-top: 0; grid-column: 1 }
  .ablauf li > *{ grid-column: 1 }
}

/* ---------- Die Randbemerkung ----------
   Fuer den Beleg, den wir nicht liefern koennen, weil er im Haus des Lesers
   liegt. Eine Haarlinie am Rand, kein Kasten - die Seite kennt keine
   geschlossenen Flaechen ausser dem Beleg selbst. */
.probe{
  position: relative;
  max-width: 56ch;
  border-left: 1px solid var(--linie);
  padding: 2px 0 2px clamp(20px, 2.4vw, 30px);
}
.probe-kopf{
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--violett-h);
  margin-bottom: 1em;
}
.probe p + p{ margin-top: .95em }

/* ---------- Die Zeitachse ----------
   Anders gebaut als .ablauf: dort zaehlt die Reihenfolge, hier der Zeitpunkt.
   Die Achse ist die linke Kante der Inhaltsspalte, der Punkt sitzt darauf.
   Die Punktfarbe wandert ueber die sieben Stationen von Blau nach Violett -
   dieselbe Strecke wie im Logo, hier als Zeit gelesen. */
.zeitachse{ list-style: none; display: flex; flex-direction: column; position: relative }
.zeitachse li{
  display: grid;
  grid-template-columns: minmax(84px, 11%) 1fr;
  gap: clamp(18px, 2.6vw, 40px);
}
.zeitachse .wann{
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-leise);
  padding-top: .35em; max-width: none; white-space: nowrap;
}
.zeitachse .inhalt{
  position: relative;
  border-left: 1px solid var(--linie);
  padding: 0 0 32px clamp(22px, 2.6vw, 36px);
}
/* Die Achse endet an der letzten Station, sie laeuft nicht ins Leere. */
.zeitachse li:last-child .inhalt{ border-left-color: transparent; padding-bottom: 0 }
.zeitachse .inhalt::after{
  content: "";
  position: absolute; left: -4.5px; top: .42em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--blau);
}
.zeitachse li:nth-child(1) .inhalt::after{ background: var(--blau) }
.zeitachse li:nth-child(2) .inhalt::after{ background: #1878f8 }
.zeitachse li:nth-child(3) .inhalt::after{ background: var(--blau-tief) }
.zeitachse li:nth-child(4) .inhalt::after{ background: #5048f4 }
.zeitachse li:nth-child(5) .inhalt::after{ background: #7830f8 }
.zeitachse li:nth-child(6) .inhalt::after{ background: var(--violett) }
/* Die letzte Station laeuft weiter - deshalb ein offener Ring, kein Punkt. */
.zeitachse li:last-child .inhalt::after{
  background: transparent;
  border: 1.5px solid var(--violett-h);
  left: -5.5px; width: 10px; height: 10px;
}
.zeitachse h3{ margin-bottom: .5em }
.zeitachse p{ max-width: 56ch }

@media (max-width: 760px){
  .zeitachse li{ grid-template-columns: 1fr; gap: 6px }
  .zeitachse .wann{ padding-top: 0; padding-left: clamp(22px, 2.6vw, 36px) }
  .zeitachse .inhalt{ padding-top: 4px }
  .zeitachse .inhalt::after{ top: -1.15em }
}

/* ---------- Die Fragen ----------
   Neun Saetze, die Haendler selbst gesagt haben. Bewusst keine Karten: eine
   Kartenwand liest sich als Faehigkeitsliste, eine Folge von Zeilen mit
   Haarlinien als Register. Der Modulname steht klein rechts unten - er ist
   die interne Ordnung, nicht die Ueberschrift. */
.fragen{ list-style: none; display: flex; flex-direction: column }
.fragen li{
  display: grid;
  grid-template-columns: minmax(44px, 5%) minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 44px);
  padding: 26px 0; border-top: 1px solid var(--linie);
  align-items: start;
}
.fragen li:last-child{ border-bottom: 1px solid var(--linie) }
.fragen .frage-nr{
  font-size: .74rem; letter-spacing: .22em; color: var(--text-fern);
  padding-top: .45em; max-width: none;
}
/* Das Zitat traegt die Zeile. Etwas groesser als der Fliesstext, aber weit
   unter h3 - es ist eine fremde Stimme, keine Ueberschrift. */
.fragen blockquote{
  font-size: clamp(1.04rem, 1.55vw, 1.26rem);
  line-height: 1.42; color: var(--text);
  letter-spacing: -.005em; text-wrap: pretty;
}
.fragen .frage-antwort p{
  font-size: .88rem; line-height: 1.55; color: var(--text-leise); max-width: 40ch;
}
.fragen .frage-etikett{
  margin-top: .85em;
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-leise);   /* --text-fern liegt ueber dem Punktfeld bei 2,73:1 */
}
@media (max-width: 860px){
  .fragen li{ grid-template-columns: minmax(38px, 12%) 1fr; gap: 8px 18px }
  .fragen .frage-nr{ grid-row: span 2; padding-top: .35em }
  .fragen .frage-antwort{ margin-top: 10px }
  .fragen .frage-antwort p{ max-width: none }
}

/* ---------- Die Tafel ----------
   DERZEIT UNBENUTZT: die Preistabellen sind am 07.09.2026 von der Seite
   genommen worden (Preise nennt Rene im Erstgespraech). Der Bausatz bleibt
   stehen, weil Erstbefund, Werkstatt und die eigene Ansicht ihn brauchen
   werden - er ist gebaut und geprueft, ein Neubau waere Verschwendung.
   Zahlen im dunklen Raum, nicht auf Papier: das weisse Blatt bleibt dem
   Befund vorbehalten. Ein zweites Blatt haette das erste entwertet. */
.tafel-block{ position: relative; width: 100%; min-width: 0 }
.tafel-block figcaption{
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-fern);
  padding-bottom: 18px;
}
/* Breite Tabellen rollen in sich, nie die Seite. */
.tafel-rolle{ overflow-x: auto; min-width: 0; scrollbar-width: thin }
.tafel{
  width: 100%; border-collapse: collapse;
  font-size: .94rem;
}
.tafel thead th{
  text-align: left; font-weight: 400; vertical-align: bottom;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-fern);
  padding: 0 clamp(14px, 2vw, 26px) 12px 0;
  border-bottom: 1px solid var(--linie);
}
.tafel tbody th{
  text-align: left; font-weight: 400; color: var(--text);
  padding: 13px clamp(14px, 2vw, 26px) 13px 0;
  border-bottom: 1px solid var(--linie);
  max-width: 34ch;
}
.tafel tbody td{
  padding: 13px clamp(14px, 2vw, 26px) 13px 0;
  border-bottom: 1px solid var(--linie);
  text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.tafel .ab{ color: var(--rot) }
/* Die Herkunftsspalte ist Prosa, keine Zahl. */
.tafel td.herkunft{
  text-align: left; white-space: normal;
  color: var(--text-fern);
  font-size: .82rem; line-height: 1.5;
  min-width: 22ch; max-width: 42ch;
  padding-right: 0;
}
.tafel tfoot th, .tafel tfoot td{
  border-bottom: none;
  border-top: 1.5px solid var(--text-leise);
  padding-top: 16px;
  font-weight: 600; color: var(--text);
}
.tafel tfoot td.herkunft{ font-weight: 400 }
.tafel-fuss{
  margin-top: 18px; font-size: .86rem;
  color: var(--text-leise); max-width: 58ch;
}

/* Schmales Fenster: die Tabelle wird zur Folge von Bloecken. Seitlich
   schieben muessen, um die Herkunft einer Zahl zu lesen, waere auf genau
   der Seite falsch, deren Versprechen der offengelegte Rechenweg ist.
   Die Spaltennamen kommen aus data-spalte, damit sie im gestapelten Bild
   nicht verlorengehen. */
@media (max-width: 760px){
  .tafel, .tafel tbody, .tafel tfoot, .tafel tr, .tafel th, .tafel td{ display: block }
  .tafel thead{ display: none }
  .tafel-rolle{ overflow-x: visible }

  .tafel tr{
    padding: 20px 0; border-bottom: 1px solid var(--linie);
  }
  .tafel tbody th, .tafel tbody td,
  .tafel tfoot th, .tafel tfoot td{
    border: 0; padding: 0; max-width: none; min-width: 0;
    text-align: left; white-space: normal;
  }
  .tafel tbody th, .tafel tfoot th{
    color: var(--text-fern); font-size: .86rem; margin-bottom: 8px;
  }
  .tafel tbody td, .tafel tfoot td{
    font-size: 1.24rem; color: var(--text);
  }
  .tafel td[data-spalte]::before{
    content: attr(data-spalte);
    display: block;
    font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-fern); margin: 14px 0 3px;
  }
  .tafel td.herkunft{
    font-size: .84rem; color: var(--text-fern); margin-top: 8px;
  }
  .tafel tfoot tr{
    border-bottom: 0; border-top: 1.5px solid var(--text-leise);
    margin-top: 4px;
  }
  .tafel tfoot td{ font-size: 1.5rem }
}

/* Woher eine Zahl kommt, steht als Wort daneben - nicht als Plakette mit
   Grund und Radius. Drei Arten, drei Toene aus der Logopalette. */
.art{
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  margin-right: .75em; white-space: nowrap;
}
.art--annahme{ color: var(--violett-h) }
.art--preis{   color: var(--blau) }
.art--rechnung{ color: var(--text-leise) }

.tafel-paar{ display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vh, 64px) }
@media (min-width: 1120px){
  .tafel-paar{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 56px);
  }
}

/* Ein Schleier hinter den dichten Bloecken, nach demselben Muster wie
   .satz::before. Ohne ihn liegen helle Punkte in den Ziffern. */
/* Jeder Block, der ueber der Buehne steht, bekommt denselben weichen
   Grund wie .satz. Ohne ihn lagen helle Punkte in den Ziffern - gemeldet
   fuer die vier Quellzahlen, die Tabellen und die Listen. */
.fragen, .tafel-block, .probe, .quellen, .liste, .ablauf, .formular,
.nachsatz, .tafel-paar, .hinweis-scrollen, .knopf--leise, .zeitachse{ position: relative }

.fragen::before, .tafel-block::before, .probe::before, .quellen::before,
.liste::before, .ablauf::before, .formular::before, .nachsatz::before,
.hinweis-scrollen::before, .knopf--leise::before, .zeitachse::before{
  content: "";
  position: absolute; inset: -4vh -5vw;
  background: radial-gradient(115% 92% at 35% 50%,
    rgba(5,6,12,.95) 0%, rgba(5,6,12,.82) 52%, transparent 84%);
  z-index: -1; pointer-events: none;
}
/* Mittig gesetzte Kapitel brauchen den Grund auch mittig. */
.kapitel--still .formular::before,
.kapitel--still .nachsatz::before{
  background: radial-gradient(110% 92% at 50% 50%,
    rgba(5,6,12,.95) 0%, rgba(5,6,12,.82) 52%, transparent 84%);
}

/* Die Nullposten: der Betrag steht vor dem Satz, damit die Spalte der
   Nullen von oben nach unten lesbar bleibt. */
.liste--knapp dd b{
  color: var(--text); font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-right: .7em;
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* Beim Knopf und beim Scrollhinweis reicht ein enger Grund - der breite
   Radius der Bloecke wuerde hier halbe Bildschirme abdunkeln. */
.hinweis-scrollen::before, .knopf--leise::before{ inset: -1.6em -2.4em }