/* Vertiefungsseiten.

   GRUNDSATZ (Entscheidung vom 12.09.2026, docs/entscheidung-vertiefungsseiten.md):
   Eine Vertiefung ist eine Fortsetzung der Startseite, kein eigenes Produkt.
   Sie benutzt deren Bausteine aus site.css: .section, .container--narrow,
   .rubrik, .title, .sub, .prose, .apparition, .phone, .micro-cta, die
   Trennverlaeufe und den durchgehenden Nachthimmel.

   Die erste Fassung hatte stattdessen bildschirmbreite Bildbaender als
   Hintergrund mit Text davor. Das ergab vier zusammenhanglose Motive
   untereinander, Text ohne Bezug zum Bild und die beanstandeten Luecken.
   Dieses Stylesheet enthaelt deshalb nur noch, was site.css NICHT hat. */

/* =====================================================================
   1. Buehne einer Vertiefung
   Wie der Hero der Startseite: ein Bild, das nach unten in die Nacht
   auslaeuft, Text darauf. Nur kuerzer, weil die Reise schon begonnen hat.
   ===================================================================== */
/* Die Buehne einer Vertiefungsseite.
   Kein Bild hinter dem Text. Zwei Anlaeufe mit Vollbild-Hintergrund sind
   daran gescheitert, dass jedes Motiv, das etwas zeigt, auch eine helle
   Stelle hat: Rubrik und Ruecklink standen unsichtbar auf dem Mond, der
   Untertitel lief durch die Kerzenflamme. Die Startseite macht es in
   jedem Abschnitt anders herum, und so steht es auch hier: der Titel im
   Nachthimmel, darunter das Bild als Erscheinung ohne Kante. */
.v-hero {
  position: relative;
  padding-block: clamp(132px, 15vw, 196px) 0;
  text-align: center;
}
.v-hero__inner { position: relative; z-index: 2; }
.v-hero__inner .sub { margin-inline: auto; }
.v-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 1.6rem + 3.8vw, 4.6rem);
  font-weight: 340;
  line-height: 1.04;
  color: var(--paper);
  text-wrap: balance;
  margin: 0 0 20px;
}
.v-hero h1 em { font-style: italic; font-weight: 340; color: var(--gold); }

/* Das Bild der Buehne ist breiter als eine gewoehnliche Erscheinung und
   loest sich nach unten weiter auf, damit der naechste Abschnitt ohne
   Kante daraus hervorgeht. */
.v-hero__bild {
  display: block;
  width: min(1020px, 94vw);
  margin: clamp(30px, 4vw, 58px) auto 0;
}
/* Dieselbe Maske wie .apparition auf der Startseite, nur etwas weiter.
   Zwei andere Wege sind vorher gescheitert und stehen hier, damit sie
   niemand noch einmal geht:
   - Eine weite Maske mit fast gerader Kante liess das schwarze Innere des
     Bildes als dunkles Rechteck auf dem Himmel stehen (Grund 12,7, Bild 0
     bis 5). Sven hat es gesehen, die Kantenmessung nicht.
   - mix-blend-mode screen und lighten greifen hier nicht wie gedacht: der
     Nachthimmel liegt in einer eigenen Ebene (#sky, body::before), die der
     Mischung nicht als Untergrund dient. screen hellte stattdessen das
     ganze Bildfeld auf und erzeugte einen hellen Streifen.
   Die enge Ellipse blendet dort aus, wo im Bild ohnehin nichts steht. */
.v-hero__bild img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: radial-gradient(54% 54% at 50% 47%, black 38%, transparent 97%);
  mask-image: radial-gradient(54% 54% at 50% 47%, black 38%, transparent 97%);
}

.v-zurueck {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--paper-dim);
  text-decoration: none;
  padding: 12px 12px 12px 0;
  margin-bottom: 6px;
}
.v-zurueck:hover { color: var(--gold-muted); }

/* Der Kopf einer Szene, in der ein Gegenstand folgt: zentriert, wie die
   Orakel- und Seelentyp-Sektion der Startseite. Sonst klebt der Text in
   einer schmalen Spalte links und rechts bleibt eine leere Flaeche. */
.v-mitte { text-align: center; }
/* Zentrierter Fliesstext bricht sonst mit einem einzelnen Wort in der
   letzten Zeile; das faellt mittig staerker auf als linksbuendig. */
/* balance statt pretty: die Absaetze sind kurz genug, und nur balance
   verhindert die einzelne Restzeile, die mittig am staerksten auffaellt. */
.v-mitte .sub, .v-mitte .app-zeile, .v-hero__inner .sub { text-wrap: balance; }
.v-mitte .sub { margin-inline: auto; }
.v-mitte .rubrik { margin-inline: auto; }

/* =====================================================================
   2. Erscheinungen
   .apparition aus site.css blendet rund aus. Zwei Groessen dazu.
   ===================================================================== */
.apparition--klein img { max-width: min(760px, 92vw); margin-inline: auto; display: block; }

/* Eine Erscheinung steht nie direkt an ihrem Text. Der Rand des Bildes
   ist zwar weich, aber ohne Luft liest sich das Wort als Bildunterschrift
   statt als eigener Abschnitt. */
.section > .apparition + .container { margin-top: clamp(26px, 3.4vw, 52px); }
.section > .container + .apparition { margin-top: clamp(34px, 4.4vw, 64px); }

/* =====================================================================
   3. Echte Karten als Gegenstand
   Die Karten sind Assets der App und liegen als eigene Bilder auf dem
   Himmel. Ein erzeugtes Bild enthaelt nie eine nachgemalte Karte.
   ===================================================================== */
.karten {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(14px, 3vw, 46px);
  flex-wrap: wrap;
  margin-top: clamp(34px, 4vw, 60px);
  position: relative;
  z-index: 1;
}
.karte { width: clamp(148px, 20vw, 238px); text-align: center; }
.karte img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 48px rgba(0, 0, 0, 0.85));
  transform: rotate(var(--neigung, 0deg));
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.karte:nth-child(1) img { --neigung: -3deg; }
.karte:nth-child(3) img { --neigung: 2.5deg; }
.karte:hover img { transform: rotate(0deg) translateY(-12px); }
.karte__name {
  display: block;
  margin-top: 18px;
  font-family: var(--serif);
  font-size: 1.22rem;
  color: var(--paper-soft);
}
.karte__wort {
  display: block;
  margin-top: 4px;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  color: var(--paper-dim);
}

/* Der verdeckte Rest: ein Stapel, den man auffaechern kann. */
.stapel {
  position: relative;
  width: clamp(148px, 20vw, 238px);
  aspect-ratio: 2 / 3;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.stapel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 26px 42px rgba(0, 0, 0, 0.85));
  transition: transform 640ms cubic-bezier(0.22, 1, 0.36, 1), opacity 420ms ease;
}
.stapel img:nth-child(1) { transform: translate(-26px, 16px) rotate(-8.5deg); opacity: 0.55; }
.stapel img:nth-child(2) { transform: translate(-13px, 8px) rotate(-4.2deg); opacity: 0.8; }
.stapel:hover img:nth-child(1) { transform: translate(-24px, 7px) rotate(-10deg); }
.stapel:hover img:nth-child(2) { transform: translate(-12px, 3px) rotate(-5deg); }
.stapel.is-auf img:nth-child(1) { transform: translate(-62%, -10px) rotate(-18deg); opacity: 0.92; }
.stapel.is-auf img:nth-child(2) { transform: translate(-30%, -5px) rotate(-9deg); opacity: 0.96; }
.stapel.is-auf img:nth-child(3) { transform: translate(8%, 0) rotate(4deg); }
/* Der Stapel steht in derselben Reihe wie die drei offenen Karten, also
   muss seine Zeile auf derselben Linie sitzen wie deren Namen: gleicher
   Abstand zur Kartenunterkante, gleiche Schrift. Vorher hing sie 30px
   hoeher und die Reihe wirkte verrutscht. */
.stapel__wort {
  position: absolute;
  left: 50%;
  top: calc(100% + 18px);
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--serif);
  font-size: 1.22rem;
  letter-spacing: 0;
  color: var(--paper-ghost);
  transition: opacity 300ms ease;
}
.stapel.is-auf .stapel__wort { opacity: 0; }

/* =====================================================================
   3b. Die grosse Legung
   Die App legt sie als Raster mit dem Platznamen UEBER der Karte
   (GrandReadingModal.tsx: gridSlot, slotLabel, cardWrapper). Genau das
   steht hier, nur fuenf statt drei je Reihe, weil eine Website kein
   Telefon ist. Das Feld ist so breit wie die Textspalte darueber, damit
   Wort und Gegenstand dieselbe Kante haben.
   ===================================================================== */
.legung {
  position: relative;
  margin-top: clamp(46px, 5.4vw, 84px);
}

/* Ein weiter, weicher Lichtteppich, damit das schmale Feld nicht als
   Insel in der Seite steht, sondern im selben Licht liegt wie alles. */
.legung__schein {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(1320px, 132%);
  height: 148%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background:
    radial-gradient(46% 50% at 50% 46%,
      rgba(233, 193, 118, 0.085) 0%,
      rgba(233, 193, 118, 0.038) 36%,
      rgba(126, 102, 186, 0.026) 62%,
      rgba(126, 102, 186, 0) 82%);
}

.legung__felder {
  position: relative;
  display: grid;
  /* Spalten aus dem Container, nicht aus der Fensterbreite: nur so haben
     die Karten auf jeder Breite dieselbe Kante wie der Text darueber. Mit
     vw-Werten stimmte das nur am 1440er Schirm. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 38px) clamp(10px, 1.7vw, 26px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.legung__platz { min-width: 0; }

/* Feste Hoehe, sonst schieben die zweizeiligen Namen ihre Karte nach
   unten und die Reihe steht nicht mehr auf einer Linie. In der App
   loest minHeight 24 dasselbe Problem. */
.legung__wort {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 2.7em;
  margin-bottom: 10px;
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--paper-ghost);
  line-height: 1.35;
  text-align: center;
}
.legung__platz img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.78));
}

@media (max-width: 760px) {
  .legung__felder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .legung__wort { font-size: 0.52rem; letter-spacing: 0.08em; }
}

}

/* =====================================================================
   4. Objektreihen (Zeichen, Monde, Medaillons, Buecher)
   Wie das Seelenfeld und das Mondrad der Startseite: Gegenstaende auf dem
   Himmel, gleiche Grundlinie, feste Spaltenzahl.
   ===================================================================== */
.reihe {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 46px);
  margin-top: clamp(34px, 4vw, 58px);
  position: relative;
  z-index: 1;
}
@media (min-width: 640px) { .reihe { grid-template-columns: repeat(4, 1fr); } }
.reihe--drei { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .reihe--drei { grid-template-columns: repeat(3, 1fr); max-width: 44rem; margin-inline: auto; } }
.ding { text-decoration: none; color: inherit; text-align: center; display: block; }
.ding img {
  width: 100%;
  max-width: 138px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin-inline: auto;
  display: block;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.65));
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1), filter 400ms ease;
}
.ding--hoch img { aspect-ratio: 5 / 6; max-width: 178px; }
.ding__name {
  display: block;
  margin-top: 15px;
  font-family: var(--serif);
  font-size: 1.08rem;
  color: var(--paper-soft);
}
.ding__wort {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--paper-dim);
  margin-top: 4px;
}
.ding:hover img, .ding:focus-visible img {
  transform: translateY(-10px) scale(1.03);
  filter: drop-shadow(0 22px 36px rgba(0, 0, 0, 0.72)) drop-shadow(0 0 30px var(--gold-12));
}
.ding:focus-visible { outline: none; }
.ding:focus-visible .ding__name { color: var(--gold); }

/* Fragenkarten (Orakel): Papier auf dem Himmel, Trennung wie die
   Kapitel-Verlaeufe der Startseite, nicht als gezogene Linie. */
.fragen {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 2vw, 20px);
  margin-top: clamp(30px, 4vw, 46px);
  position: relative;
  z-index: 1;
}
@media (min-width: 720px) { .fragen { grid-template-columns: repeat(2, 1fr); } }
.frage {
  font-family: var(--serif);
  font-size: clamp(1.06rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.42;
  color: var(--paper-soft);
  padding: clamp(20px, 2.4vw, 28px) 0 0;
  position: relative;
  margin: 0;
}
.frage::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent,
    rgba(233, 193, 118, 0.13) 20%, rgba(233, 193, 118, 0.13) 80%, transparent);
}
.frage__raum {
  display: block;
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-muted);
  margin-bottom: 9px;
}

/* =====================================================================
   5. Portraet
   ===================================================================== */
.portraet { padding-block: clamp(150px, 16vw, 220px) clamp(20px, 3vw, 40px); text-align: center; }
.portraet__bild {
  width: clamp(190px, 26vw, 310px);
  height: auto;
  margin-inline: auto;
  display: block;
  filter: drop-shadow(0 30px 54px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 70px var(--gold-12));
}
.portraet h1 {
  font-family: var(--serif);
  font-size: clamp(2.3rem, 1.6rem + 3vw, 4rem);
  font-weight: 340;
  line-height: 1.05;
  margin: clamp(30px, 3vw, 46px) 0 10px;
}
.portraet__wort { font-size: 0.72rem; letter-spacing: 0.24em; color: var(--gold-muted); margin: 0; }

/* Aufzaehlung ohne Kaesten: Trennung wie auf der Startseite. */
.liste { list-style: none; margin: 0 auto; padding: 0; max-width: 48ch; text-align: left; }
.liste li { padding: 14px 0; position: relative; font-size: var(--fs-body); color: var(--paper-muted); }
.liste li::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent,
    rgba(233, 193, 118, 0.12) 20%, rgba(233, 193, 118, 0.12) 80%, transparent);
}
.liste li:first-child::before { background: none; }

/* Die sechs Lesungen. Vorher standen sie als Fliesstext hintereinander,
   sieben zentrierte Zeilen lang, und niemand liest eine Aufzaehlung so.
   Jetzt steht jede in einer Zeile: links der Name, wie die App ihn
   nennt, rechts ihr eigener Satz aus der App. Keine Trennlinien. */
.lesungen {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: clamp(18px, 2.2vw, 34px);
  row-gap: clamp(12px, 1.5vw, 18px);
  width: fit-content;
  max-width: 100%;
  margin: clamp(30px, 3.6vw, 48px) auto 0;
  text-align: left;
  list-style: none;
  padding: 0;
}
.lesungen > div { display: contents; }
.lesungen dt {
  font-family: var(--serif);
  font-size: 1.12rem;
  color: var(--gold);
  white-space: nowrap;
}
.lesungen dd {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--paper-dim);
  align-self: center;
}
@media (max-width: 620px) {
  .lesungen { grid-template-columns: minmax(0, 1fr); row-gap: 4px; width: 100%; }
  .lesungen dd { margin-bottom: 18px; }
  /* Steht die Liste direkt in der Sektion statt in einem Container (so auf
     Astrologie), fehlte ihr der Seitenrand: "Liebe" begann bei x 0 und die
     Saetze liefen bis an den rechten Rand (Sven, 13.09.2026). */
  section > .lesungen { width: auto; margin-inline: var(--edge); }
}

/* Beginnt ein Abschnitt mit einer Erscheinung, war der Abstand darueber
   fast zweihundert Pixel: einmal der Ausklang des vorigen Abschnitts und
   einmal der Anlauf des neuen. Der weiche Rand des Bildes bringt seinen
   eigenen Abstand schon mit. */
.section:has(> .apparition:first-child) { padding-top: clamp(24px, 3vw, 44px); }

/* Ein Satz, der auf die App zeigt. Keine Schaltflaeche, nur eine Zeile. */
.app-zeile {
  max-width: 52ch;
  margin: clamp(28px, 3vw, 42px) auto 0;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--paper-dim);
  font-style: italic;
  text-align: center;
}

/* Weg weiter zwischen Portraets. */
.weiter {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  padding-block: clamp(30px, 4vw, 48px);
}
.weiter a { color: var(--paper-dim); text-decoration: none; font-size: 0.94rem; padding: 10px 0; }
.weiter a:hover { color: var(--gold-muted); }
.weiter__mitte { color: var(--paper-ghost); font-size: 0.86rem; }

/* =====================================================================
   6. Kopfzeile und Menue  --  VERSCHOBEN nach site.css (12.09.2026)

   Der Burger und das Menue standen nur hier, deshalb hatte die Startseite
   keins: sie laedt nur site.css. Beide Bauteile gehoeren zur Huelle, nicht
   zur Weltseite, und liegen jetzt in site.css.
   ===================================================================== */

/* =====================================================================
   7. Ruhe
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .karte img, .ding img, .stapel img, .menue, .menue__liste a, .menue-knopf span { transition: none; }
  .karte:hover img, .ding:hover img { transform: none; }
}

/* =====================================================================
   Die zwoelf Zeichen
   Echte Medaillons der App (260 px, RGBA). Sie liegen als Gegenstaende
   auf dem Himmel, deshalb kein Kasten, kein Rahmen, nur Abstand. Die
   Reihe nimmt ihre Breite aus dem Container, damit sie dieselbe Kante
   hat wie der Text darueber.
   ===================================================================== */
.zeichen {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px) clamp(10px, 1.6vw, 22px);
  margin: clamp(40px, 4.6vw, 70px) 0 0;
  padding: 0;
  list-style: none;
}
.zeichen__eins { text-align: center; min-width: 0; }
.zeichen__eins img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 128px;
  margin-inline: auto;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.7));
}
.zeichen__wort {
  display: block;
  margin-top: 10px;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--paper-ghost);
}
@media (max-width: 760px) {
  .zeichen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .zeichen__wort { font-size: 0.62rem; letter-spacing: 0.07em; }
}
@media (max-width: 420px) {
  .zeichen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =====================================================================
   Reihen gleichartiger Gegenstaende
   Acht Monde, sieben Einbaende, sechzehn Zeichen: derselbe Bau wie die
   zwoelf Sternzeichen, nur mit anderer Spaltenzahl. Die Breite kommt
   immer aus dem Container, nie aus der Fensterbreite.
   ===================================================================== */
.monde, .buecher, .typen {
  display: grid;
  margin: clamp(40px, 4.6vw, 70px) 0 0;
  padding: 0;
  list-style: none;
}
.monde { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px) clamp(8px, 1.2vw, 16px); }
/* Die Einbaende sind der Gegenstand ihrer Szene und duerfen breiter sein
   als die Textspalte, wie die drei offenen Karten auf /tarot/. Bei
   Spaltenbreite waren sie hundert Pixel breite Briefmarken. */
/* Neun Einbaende, also drei mal drei bzw. auf breiten Schirmen eine
   Reihe aus neun. Mehr wird bewusst nicht gezeigt. */
.buecher {
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px) clamp(10px, 1.5vw, 22px);
  width: min(1160px, 94vw);
  margin-inline: auto;
}
@media (max-width: 900px) { .buecher { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .buecher { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.typen { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 32px) clamp(8px, 1.3vw, 18px); }

.monde__eins, .buecher__eins, .typen__eins { text-align: center; min-width: 0; }
.monde__eins img, .buecher__eins img, .typen__eins img {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
}
.monde__eins img { max-width: 104px; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.6)); }
.typen__eins img { max-width: 96px; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.6)); }
.buecher__eins img { max-width: 158px; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.8)); }

.monde__wort, .buecher__wort, .typen__wort {
  display: block;
  margin-top: 10px;
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--paper-ghost);
  line-height: 1.35;
}
.typen__wort { letter-spacing: 0.16em; }

@media (max-width: 860px) {
  .monde { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .typen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .buecher { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 430px) {
  .monde, .typen, .buecher { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .monde__wort, .buecher__wort, .typen__wort { font-size: 0.58rem; letter-spacing: 0.06em; }
}

/* =====================================================================
   Die fuenf Stimmungsstufen
   Kein Diagramm und keine Skala mit Zahlen: fuenf Punkte, die von schwer
   nach leuchtend heller werden, mit dem Wort der App darunter.
   ===================================================================== */
.stufen {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 22px);
  margin: clamp(36px, 4vw, 58px) 0 0;
  padding: 0;
  list-style: none;
}
.stufen__eins { text-align: center; min-width: 0; }
.stufen__punkt {
  display: block;
  width: clamp(22px, 3.4vw, 42px);
  height: clamp(22px, 3.4vw, 42px);
  margin: 0 auto 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%,
    rgba(233, 193, 118, var(--hell)) 0%,
    rgba(233, 193, 118, calc(var(--hell) * 0.45)) 58%,
    rgba(233, 193, 118, 0.05) 100%);
  box-shadow: 0 0 calc(var(--hell) * 44px) rgba(233, 193, 118, calc(var(--hell) * 0.4));
}
.stufen__punkt[data-stufe="1"] { --hell: 0.16; }
.stufen__punkt[data-stufe="2"] { --hell: 0.32; }
.stufen__punkt[data-stufe="3"] { --hell: 0.5; }
.stufen__punkt[data-stufe="4"] { --hell: 0.72; }
.stufen__punkt[data-stufe="5"] { --hell: 1; }
.stufen__wort {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-ghost);
}
@media (max-width: 430px) {
  .stufen__wort { font-size: 0.56rem; letter-spacing: 0.05em; }
}

/* =====================================================================
   Die vier Schritte des Wartens (/orakel/)
   Keine Nummern und keine Punkte: vier Zeilen, die von oben nach unten
   heller werden, so wie das Warten auf eine Antwort.
   ===================================================================== */
.schritte {
  margin: clamp(34px, 4vw, 56px) auto 0;
  padding: 0;
  list-style: none;
  max-width: 44ch;
  text-align: center;
}
.schritte li {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.32rem);
  line-height: 1.5;
  padding: clamp(9px, 1.1vw, 15px) 0;
  color: var(--paper-dim);
}
.schritte li:nth-child(2) { color: var(--paper-muted); }
.schritte li:nth-child(3) { color: var(--paper-soft); }
.schritte li:nth-child(4) { color: var(--gold); font-style: italic; }

/* Das Rad des Orakels ist rund; die runde Maske der Erscheinungen wuerde
   ihm die Kante nehmen, die es haben soll. Es steht deshalb frei, nur
   kleiner und mit einem Schein dahinter. */
.apparition--rad {
  display: block;
  width: min(340px, 62vw);
  margin: clamp(36px, 4.4vw, 62px) auto clamp(30px, 3.6vw, 50px);
  position: relative;
}
.apparition--rad::before {
  content: '';
  position: absolute;
  inset: -46%;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(233, 193, 118, 0.1) 0%, rgba(233, 193, 118, 0.04) 42%, transparent 74%);
  pointer-events: none;
}
.apparition--rad img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  /* Das Rad ist ein Gegenstand mit eigener runder Kante, keine
     Erscheinung. Die Maske von .apparition wuerde ihm genau die Kante
     nehmen, die es haben soll, und liess es ausserdem als heller Fleck
     auf dem Himmel stehen (gemessen 21 gegen Grund 16). */
  -webkit-mask-image: none;
  mask-image: none;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.7));
}

/* =====================================================================
   Das Regal (/akademie/)
   Vier Buecher nebeneinander, darunter ihre Kapitel. Keine Kaesten und
   keine Trennlinien: die Spalten stehen durch Abstand nebeneinander, der
   Buchtitel traegt Gold, die Kapitel sind still.
   ===================================================================== */
.regal {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 46px);
  margin: clamp(36px, 4.2vw, 58px) 0 0;
  text-align: left;
}
.regal__buch { min-width: 0; }
.regal__titel {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.34rem);
  font-weight: 340;
  color: var(--paper-soft);
}
.regal__titel .gw { color: var(--gold); }
.regal__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: kapitel;
}
.regal__liste li {
  counter-increment: kapitel;
  position: relative;
  padding: 6px 0 6px 26px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--paper-dim);
}
/* Die Ziffer sagt etwas Wahres: die Kapitel bauen aufeinander auf. */
.regal__liste li::before {
  content: counter(kapitel);
  position: absolute;
  left: 0;
  top: 7px;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--gold-muted);
}
@media (max-width: 860px) {
  .regal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .regal { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}

/* =====================================================================
   Portraets: ein Zeichen, ein Text, der Weg zum Nachbarn
   Das Zeichen ist ein Gegenstand mit eigener Kante (Medaillon, Mond,
   Symbol), keine Erscheinung. Es traegt deshalb keine Maske, sondern
   einen weichen Schein dahinter.
   ===================================================================== */
.portraet__zeichen {
  display: block;
  width: min(260px, 54vw);
  margin: clamp(34px, 4.2vw, 58px) auto 0;
  position: relative;
}
.portraet__zeichen::before {
  content: '';
  position: absolute;
  inset: -52%;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(233, 193, 118, 0.11) 0%, rgba(233, 193, 118, 0.045) 40%, transparent 74%);
  pointer-events: none;
}
.portraet__zeichen img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.72));
}
.portraet__zeichen--rund img { border-radius: 50%; }

.sub--wortmarke {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-muted);
}

/* Der Weg zum Nachbarn. Zwei Zeilen, keine Schaltflaechen. */
.weiter {
  display: flex;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 44px);
  margin: 0;
}
.weiter__zu {
  display: block;
  max-width: 46%;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.28rem);
  color: var(--paper-soft);
  text-decoration: none;
  line-height: 1.35;
}
.weiter__zu span {
  display: block;
  margin-bottom: 6px;
  font-family: var(--sans, inherit);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-muted);
}
.weiter__zu--rechts { text-align: right; }
.weiter__zu:hover { color: var(--gold); }
.weiter__zu:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 3px; }

/* Die Monde und Zeichen sind jetzt Wege zu ihren Portraets. Ein Link darf
   die Reihe nicht anders aussehen lassen als vorher, nur reagieren. */
.monde__eins a, .zeichen__eins a, .typen__eins a {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.monde__eins a:hover, .zeichen__eins a:hover, .typen__eins a:hover { transform: translateY(-4px); }
.monde__eins a:hover .monde__wort,
.zeichen__eins a:hover .zeichen__wort,
.typen__eins a:hover .typen__wort { color: var(--gold); }
.monde__eins a:focus-visible, .zeichen__eins a:focus-visible, .typen__eins a:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 8px;
}

/* =====================================================================
   Figuren der Marke (die Orakelin)
   Eine Figur ist kein Nebelbild: sie soll dastehen. Die Maske nimmt nur
   die Ecken und den Fuss, damit sie nicht in einem Rechteck steht,
   laesst sie aber in der Mitte voll stehen. Der Schein dahinter ist die
   Mondsichel, die sie ohnehin traegt.
   ===================================================================== */
.figur {
  display: block;
  width: min(460px, 78vw);
  margin: clamp(30px, 4vw, 58px) auto 0;
  position: relative;
}
.figur--gross { width: min(560px, 86vw); }
.figur img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image:
    radial-gradient(64% 60% at 50% 44%, #000 52%, rgba(0,0,0,0.6) 82%, transparent 100%),
    linear-gradient(to bottom, #000 0%, #000 72%, rgba(0,0,0,0.45) 90%, transparent 100%);
  mask-image:
    radial-gradient(64% 60% at 50% 44%, #000 52%, rgba(0,0,0,0.6) 82%, transparent 100%),
    linear-gradient(to bottom, #000 0%, #000 72%, rgba(0,0,0,0.45) 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.section > .figur + .container { margin-top: clamp(26px, 3.4vw, 52px); }

/* =====================================================================
   Der Ring der sechzehn Zeichen (/seelentyp/)
   Ersetzt ein erzeugtes Bild, in dem dieselben Symbole mehrfach und
   erfunden herumlagen (Sven, 12.09.2026). Hier stehen die echten
   sechzehn Zeichen der App auf einer Ellipse, in der Mitte das Auge aus
   Licht. Jedes Zeichen ist der Weg zu seinem Portraet.
   ===================================================================== */
.ring {
  position: relative;
  width: min(760px, 92vw);
  aspect-ratio: 1 / 1;
  margin: clamp(30px, 4vw, 56px) auto 0;
  list-style: none;
  padding: 0;
}
.ring__auge {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 246, 224, 0.9) 0%,
      rgba(233, 193, 118, 0.5) 6%,
      rgba(150, 122, 200, 0.18) 22%,
      rgba(96, 78, 158, 0.1) 44%,
      rgba(60, 48, 104, 0.05) 66%,
      transparent 82%);
}
/* Die Pupille: ein schmaler heller Kern, damit das Feld als Auge liest. */
.ring__auge::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 250, 236, 0.95) 0%, rgba(233, 193, 118, 0.5) 48%, transparent 74%);
  box-shadow: 0 0 40px rgba(233, 193, 118, 0.4);
}
.ring__platz {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13.2%;
  margin: 0;
  transform: translate(-50%, -50%)
    rotate(var(--winkel)) translate(0, calc(var(--radius) * -1)) rotate(calc(var(--winkel) * -1));
}
.ring__platz a { display: block; text-decoration: none; }
.ring__platz img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 18px rgba(233, 193, 118, 0.22));
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), filter 320ms ease;
}
.ring__platz a:hover img { transform: scale(1.12); filter: drop-shadow(0 0 26px rgba(233, 193, 118, 0.5)); }
.ring__platz a:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 50%; }
/* Der Name steht nur fuer Screenreader da; im Ring wuerde er das Bild
   zerreissen, und die Namen stehen ohnehin im Raster darueber. */
.ring__wort {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 560px) {
  .ring { width: 96vw; }
  .ring__platz { width: 15%; }
}

/* Rituale: Name, Dauer, Zweck. Die Dauer steht beim Namen, weil sie der
   Grund ist, warum man eins auswaehlt. */
.lesungen--zeit dt { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.lesungen--zeit .zeit {
  font-family: var(--sans, inherit);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--gold-muted);
}

/* =====================================================================
   Die sieben Wege (/weg/)
   Echte Programmbilder der App, hochformatig wie in der App selbst.
   Breiter als die Textspalte, weil sie der Gegenstand der Szene sind.
   ===================================================================== */
.wege {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 26px) clamp(10px, 1.4vw, 20px);
  width: min(1180px, 94vw);
  margin: clamp(38px, 4.4vw, 64px) auto 0;
  padding: 0;
  list-style: none;
}
.wege__eins { text-align: center; min-width: 0; }
.wege__eins img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.8));
}
.wege__name {
  display: block;
  margin-top: 12px;
  font-family: var(--serif);
  font-size: 0.98rem;
  line-height: 1.3;
  color: var(--paper-soft);
}
.wege__tage {
  display: block;
  margin-top: 4px;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-muted);
}
@media (max-width: 900px) { .wege { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 480px) { .wege { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =====================================================================
   10. Orakel: Bauteile fuer den zweiten Neubau (12.09.2026)

   Anlass: Die Seite war fuenfmal derselbe Abschnitt, alles zentriert.
   engine.md der Website-Engine verbietet das unter "Harte Regeln" 1 bis 6,
   die Slop-Diagnose unter "Symmetrie als Ruhezustand". Diese Bauteile
   liefern die fehlende Abwechslung. Jeder Wert ist begruendet, weil er
   sonst der naechstliegende waere.
   ===================================================================== */

/* Versetzter Kopf: Ueberschrift links, Anlauf rechts auf gleicher Grundlinie.
   1.15fr zu 1fr, weil die Ueberschrift das Displayelement ist und mehr
   Raum bekommt als der Fliesstext daneben. */
.kopf-versetzt {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(32px, 4.6vw, 88px);
  align-items: end;
}
.kopf-versetzt .title { margin-bottom: 0; }
.kopf-versetzt .sub { max-width: 46ch; }
@media (max-width: 900px) {
  .kopf-versetzt { grid-template-columns: 1fr; gap: 26px; align-items: start; }
}

/* Die Fragen stehen zweispaltig und fuellen die Breite des Kopfes.
   Zwei Spalten, weil sechs Fragen einspaltig eine Liste ergeben und
   zweispaltig ein Feld, in dem das Auge herumsucht. */
.fragen--breit { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4.6vw, 88px); }
@media (max-width: 720px) { .fragen--breit { grid-template-columns: 1fr; } }

/* Editorial Split: das Bild traegt keine Kante, also keine .obj-Form mit
   Radius und Schatten, sondern dieselbe Aufloesung wie die Erscheinungen. */
.split__media .erscheinung {
  display: block;
  width: 100%;
  height: auto;
  /* Radial UND seitlich, verschnitten: der Nebel des Bildes ist am linken
     Rand noch hell (gemessen 20 bis 23 gegen Grund 15), die runde Maske
     allein schnitt ihn dort als helle Kante ab. Der seitliche Verlauf
     zwingt beide Raender auf null. */
  -webkit-mask-image:
    radial-gradient(70% 68% at 46% 50%, #000 40%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image:
    radial-gradient(70% 68% at 46% 50%, #000 40%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.split__text .title { margin-bottom: 20px; }

/* Grosse Displayzeile: ueber --fs-h2 hinaus, weil die Engine je Seite
   mindestens eine Stelle mit uebergrosser Schrift verlangt und dies der
   Satz ist, der die Seite traegt. */
.title--gross {
  font-size: clamp(3rem, 2.1rem + 4.2vw, 5.8rem);
  line-height: 0.98;
}

/* Das Antwortblatt. Schmaler als der Textsatz (34rem gegen 54rem), damit
   es als Blatt auf der Seite liegt und nicht als weitere Textspalte
   gelesen wird. Form aus OracleAnswerView.tsx uebernommen. */
.blatt {
  width: min(34rem, 90vw);
  margin: clamp(34px, 4.4vw, 60px) auto 0;
  padding: clamp(26px, 3vw, 40px) clamp(22px, 2.6vw, 34px);
  position: relative;
  z-index: 1;
}
.blatt::before,
.blatt::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(233, 193, 118, 0.22) 30%,
    rgba(233, 193, 118, 0.22) 70%, transparent);
}
.blatt::before { top: 0; }
.blatt::after { bottom: 0; }
.blatt__wort {
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-muted);
  text-align: center;
  margin: 0 0 14px;
}
.blatt__frage {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.72rem);
  line-height: 1.34;
  color: var(--paper);
  text-align: center;
  text-wrap: balance;
  margin: 0 0 clamp(24px, 3vw, 36px);
}
/* Das Ornament der App: Haarlinie, Achtstern, Haarlinie. Uebernommen aus
   OracleAnswerView.tsx, das Zeichen selbst liegt als Datei bei uns. */
.blatt__zeichen {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 22px);
  margin: clamp(22px, 2.8vw, 34px) 0;
}
.blatt__linie {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(233, 193, 118, 0.3), transparent);
}
/* 22 px, nicht groesser. Genau das Mass aus der App (ornamentGlyph:
   width 22, height 22, opacity 0.95). Vorher stand es hier mit bis zu
   46 px und wirkte dadurch wie ein eigenes Motiv; Sven, der die App
   taeglich nutzt, hatte den Stern noch nie bewusst gesehen. Er ist ein
   Trennzeichen, kein Motiv. */
.blatt__zeichen img { width: 22px; height: 22px; opacity: 0.95; }
.blatt__prosa p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.72;
  color: var(--paper-muted);
  text-align: center;
  text-wrap: pretty;
}
.blatt__prosa p + p { margin-top: 16px; }

/* Die Schale. Zwei Fehlversuche stehen hier, damit sie niemand wiederholt:
   erst Bild in voller Breite und Text darunter nach rechts versetzt (links
   blieb ein grosses Loch), dann Bild ueber den linken Seitenrand hinaus
   (Sven: "komplett offset und nicht in der Mitte"). Jetzt sitzen Bild und
   Text nebeneinander im Container, auf halber Hoehe ausgerichtet, und
   spiegelverkehrt zum Abschnitt darueber: dort Bild links, hier rechts. */
.schale__buehne {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  align-items: center;
  gap: clamp(28px, 3.6vw, 72px);
  width: min(1280px, 92vw);
  margin-inline: auto;
}
.schale__bild { display: block; width: 100%; order: 2; }
.schale__text { order: 1; }
.schale__bild img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image:
    radial-gradient(70% 68% at 50% 47%, #000 42%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 86%, transparent 100%);
  mask-image:
    radial-gradient(70% 68% at 50% 47%, #000 42%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in, source-in;
  mask-composite: intersect, intersect;
}
.schale__text .sub { max-width: 44ch; }
@media (max-width: 900px) {
  .schale__buehne { grid-template-columns: 1fr; gap: 8px; }
  .schale__bild, .schale__text { order: unset; }
}

/* Ein Schlusssatz, der nicht mittig steht, weil der Abschnitt links beginnt. */
.app-zeile--links { margin-inline: 0; text-align: left; margin-top: clamp(26px, 3vw, 40px); }
/* Die zweite Augenbraue trennt die Frage von der Antwort. In der App
   steht "Das Orakel sagt" ueber der Antwort, nicht ueber der Frage;
   ohne die Trennung las es sich, als stelle die Orakelin die Frage. */
.blatt__wort--antwort { margin: clamp(20px, 2.4vw, 30px) 0 10px; }

/* Das Auge der sechzehn Zeichen. Buehnenbreite wie die anderen grossen
   Erscheinungen; die Maske ist weit und mittig, weil das Bild seinen
   eigenen Nebel bis in die Ecken traegt und nur der aeusserste Rand
   weichgehen muss. */
.auge {
  display: block;
  width: min(1020px, 94vw);
  margin: clamp(30px, 4vw, 58px) auto clamp(24px, 3vw, 44px);
}
.auge img {
  display: block;
  width: 100%;
  height: auto;
  /* Keine CSS-Maske. Der weiche Rand steckt im Alphakanal des Bildes.
     Grund: eine Maske, die eng genug war, um die dunklen Ecken zu
     schlucken, dunkelte die obersten Zeichen ab (Gluehbirne und Auge);
     eine Maske, die weit genug war fuer die Zeichen, liess die Ecken
     stehen (gemessen 8 bis 10 gegen Grund 15). Beides zugleich geht nur
     im Bild selbst. */
}

/* Das eine Wort der Antwort. In der App: HeadingBoldItalic 34, Laufweite
   1.8, allein stehend. Hier dieselbe Rolle, an die Webschrift angepasst. */
.blatt__schluessel {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--gold);
  text-align: center;
  margin: 0 0 clamp(20px, 2.4vw, 30px);
}
.blatt__lesung {
  margin: 0;
  font-size: 1rem;
  line-height: 1.78;
  color: var(--paper-soft);
  text-align: left;
  text-wrap: pretty;
}
/* Der Hinweis steht ausserhalb des Blattes: er gehoert zur Seite, nicht
   zur Antwort, und darf nicht wie ein Teil der Lesung wirken. */
.blatt__hinweis {
  width: min(34rem, 90vw);
  margin: clamp(16px, 2vw, 24px) auto 0;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--paper-ghost);
  text-align: center;
}