/* ============================================================
   S. R. Hermann — Hermann Books
   Globales Stylesheet (site-weit, nicht seitenspezifisch)
   ============================================================ */

/* --- 1. Design-Tokens -------------------------------------- */

:root {
  color-scheme: light dark;

  /* Flächen */
  --paper:        #fbfaf7;
  --surface:      #ffffff;
  --surface-alt:  #f4f1ea;

  /* Schrift */
  --ink:          #16181c;
  --ink-soft:     #464c55;
  --ink-faint:    #5f6672;  /* WCAG AA (>=4.5:1) auch auf --surface-alt */

  /* Linien */
  --rule:         #e4e0d7;
  --rule-strong:  #cfc9bc;

  /* Akzente */
  --accent:       #8a6a3b;
  --link:         #2c4a5a;
  --link-hover:   #16181c;
  --focus:        #8a6a3b;

  /* Typografie */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
                "Times New Roman", serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;

  /* Maße */
  --measure: 34rem;   /* Lesebreite Fließtext */
  --wide:    62rem;   /* Layoutbreite            */
  --gutter:  clamp(1.25rem, 5vw, 3rem);
  --kopfhoehe: 0rem;  /* Kopfleiste läuft erst ab 48rem mit */
}

/* Ab Tablet-Breite steht die Leiste in einer Zeile und ist 111 px hoch.
   Darunter umbricht sie auf bis zu 212 px — als mitlaufendes Band wäre das
   ein Viertel des Telefonschirms, deshalb bleibt sie dort im Fluss. */
@media (min-width: 48rem) {
  :root { --kopfhoehe: 7rem; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:       #14161a;
    --surface:     #1b1e23;
    --surface-alt: #202429;

    --ink:         #ecebe6;
    --ink-soft:    #b4b9c1;
    --ink-faint:   #949aa4;  /* WCAG AA (>=4.5:1) auch auf --surface-alt */

    --rule:        #2c3037;
    --rule-strong: #3d434b;

    --accent:      #c09a5e;
    --link:        #a8c8d8;
    --link-hover:  #ecebe6;
    --focus:       #c09a5e;
  }
}

/* --- 2. Reset / Grundlagen ---------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Die Kopfleiste läuft mit. Ohne diesen Abstand landen Sprungziele wie
     /quellen/#empirie oder die Stufen-Anker unter ihr und sind unsichtbar. */
  scroll-padding-top: calc(var(--kopfhoehe) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img,
svg { max-width: 100%; height: auto; display: block; }

/* --- 3. Layout ---------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Fließtextspalte innerhalb der Layoutbreite */
.prose > * { max-width: var(--measure); }
.prose > .full { max-width: none; }

.section {
  padding-block: clamp(2.5rem, 6vw, 4.25rem);
  border-top: 1px solid var(--rule);
}

.section:first-of-type { border-top: 0; }

/* --- 4. Typografie ------------------------------------------ */

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 .6em;

  /* Deutsche Komposita („Unternehmensverkauf“, „Vermögensstufen“) sprengen
     auf schmalen Schirmen sonst das Layout. hyphens sorgt für einen sauberen
     Trennstrich, overflow-wrap ist die Rückfallebene. */
  hyphens: auto;
  overflow-wrap: break-word;
}

h1 { font-size: clamp(2.25rem, 6.5vw, 3.5rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); margin-top: 0; }
h3 { font-size: clamp(1.125rem, 2.2vw, 1.3rem); }

p, ul, ol, dl { margin: 0 0 1.15em; }

p:last-child,
ul:last-child,
ol:last-child { margin-bottom: 0; }

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
  transition: color .15s ease, text-decoration-color .15s ease;
}

a:hover {
  color: var(--link-hover);
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

strong { font-weight: 650; color: var(--ink); }

/* Auszeichnungen */
.eyebrow {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
}

.lead {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink-soft);
}

.subline {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 3vw, 1.55rem);
  font-style: italic;
  color: var(--ink-soft);
  margin: -.2em 0 1.6rem;
}

.small { font-size: .9375rem; color: var(--ink-soft); }
.faint { color: var(--ink-faint); }

/* Zitat / Leitfrage */
.pull {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 2.3vw, 1.3rem);
  font-style: italic;
  line-height: 1.45;
  color: var(--ink);
  border-left: 2px solid var(--accent);
  padding: .15rem 0 .15rem 1.15rem;
  margin: 0 0 1.15em;
}

/* --- 5. Kopf- und Fußbereich -------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  color: var(--ink);
  padding: .7rem 1rem;
  z-index: 100;
}
.skip:focus { left: .5rem; top: .5rem; }

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

/* Die Kopfleiste läuft mit. Bei einer Startseite von rund 5700 px ist die
   Navigation sonst nach dem ersten Bildschirm weg. z-index bleibt unter der
   Lightbox (100), damit vergrößerte Bilder sie weiterhin überdecken. */
@media (min-width: 48rem) {
  .masthead {
    position: sticky;
    top: 0;
    z-index: 50;
  }
}

.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  padding-block: 1.1rem;
}

/* Auf schmalen Schirmen umbricht die Leiste ohnehin; etwas gedrängter,
   damit sie nicht unnötig Platz kostet. */
@media (max-width: 40rem) {
  .masthead__inner { padding-block: .7rem; gap: .4rem 1rem; }
}

.brand {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--accent); }
.brand span { color: var(--ink-faint); font-weight: 400; }

.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Vertikales Polster, damit die Navigationslinks auch mit dem Daumen
   sicher zu treffen sind (WCAG 2.2, Zielgröße mindestens 24 px). */
.nav a {
  display: inline-block;
  padding-block: .3rem;
  font-size: .9375rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.nav a:hover { color: var(--accent); }

.nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent);
}

.colophon {
  border-top: 1px solid var(--rule);
  background: var(--surface-alt);
  padding-block: 2.5rem 3rem;
  font-size: .9375rem;
  color: var(--ink-soft);
}

.colophon h2 {
  font-size: .75rem;
  font-family: var(--font-sans);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .75rem;
}

.colophon ul { list-style: none; margin: 0; padding: 0; }
.colophon li + li { margin-top: .35rem; }

/* --- 6. Bausteine ------------------------------------------- */

/* Faktenblock „Auf einen Blick“ */
.facts {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) 1fr;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--rule);
}

.facts dt,
.facts dd {
  margin: 0;
  padding: .7rem 0;
  border-bottom: 1px solid var(--rule);
}

.facts dt {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-right: 1.25rem;
  padding-top: .85rem;
}

.facts dd { color: var(--ink); }

@media (max-width: 34rem) {
  .facts { grid-template-columns: 1fr; }
  .facts dt { border-bottom: 0; padding-bottom: 0; }
  .facts dd { padding-top: .15rem; }
}

/* Kartenraster */
.grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.5rem 1.4rem 1.4rem;
  display: flex;
  flex-direction: column;
}

.card h3 { margin-bottom: .35rem; }

.card__sub {
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--ink-faint);
  margin: 0 0 .9rem;
}

.card__q {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}

.card p { margin-bottom: .9rem; }
.card > :last-child { margin-top: auto; margin-bottom: 0; }

/* Verweisliste */
.links {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.links li { border-bottom: 1px solid var(--rule); }

.links a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem 1rem;
  padding: .8rem 0;
  text-decoration: none;
  color: var(--ink);
}

.links a:hover { color: var(--accent); }

.links b {
  font-weight: 600;
  flex: 0 0 auto;
  min-width: 13rem;
}

.links span {
  color: var(--ink-soft);
  font-size: .9375rem;
  flex: 1 1 16rem;
}

.links a:hover span { color: var(--ink-soft); }

/* Hinweiskasten (Haftungsausschluss, Redaktionsnotiz) */
.note {
  background: var(--surface-alt);
  border-left: 2px solid var(--rule-strong);
  padding: 1.25rem 1.35rem;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
  border-radius: 0 3px 3px 0;
}

.note p + p { margin-top: .75rem; }
.note strong { color: var(--ink); }

/* Kontaktzeile */
.contact-mail {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 3vw, 1.45rem);
  word-break: break-word;
}

/* Weiterführender Verweis am Abschnittsende */
.more {
  display: inline-block;
  margin-top: .25rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--link) 45%, transparent);
  padding-bottom: 1px;
}
.more:hover { border-bottom-color: currentColor; }

/* --- 7. Bausteine der Startseite ---------------------------- */

/* Auftakt */
.hero { padding-block: clamp(3rem, 8vw, 5.5rem) clamp(2.5rem, 6vw, 4rem); }

/* Kleiner als zuvor (4.25rem), seit der Name in Versalien steht: „S. R. HERMANN“
   braucht bei 68 px 521 px Breite, die Textspalte hat 498. Bei 62 px sind es
   473 px — die Zeile bleibt an jeder Breite ungebrochen. */
.hero h1 { font-size: clamp(2.125rem, 7vw, 3.875rem); }

/* Auftakt: Die Abschnitte „S. R. Hermann“ und „Leben mit Vermögen“ teilen sich
   ein Raster, damit das Startbild rechts neben beiden Texten steht. Die Fläche
   war ohnehin frei — die Prosa beider Abschnitte ist auf Lesebreite gedeckelt. */
.auftakt__bild { margin: 0; }

.auftakt__bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}

/* Ohne Raster steht das Bild zwischen den Abschnitten, und zwar in der queren
   Fassung (700 × 600). Das Seitenverhältnis muss hier gesetzt werden, weil die
   width/height-Angaben am <img> für das hohe Format gelten — sonst reserviert
   der Browser die falsche Höhe und die Seite springt beim Laden. */
@media (max-width: 699px) {
  .auftakt__bild img {
    max-width: 420px;
    margin-inline: auto;
    height: auto;
    aspect-ratio: 700 / 600;
  }
}

/* Ab 48rem steht das Bild rechts neben dem Text. Die Bildspalte wächst dabei
   mit (220–360 px), statt fest zu sein: Bei fester Breite von 360 px blieben
   unterhalb von 992 px keine 440 px für den Text übrig, die Überschrift brach
   um — und genau deshalb lag die Schwelle vorher bei 992 px. Damit sah jeder
   mit kleinerem Fenster oder erhöhtem Browserzoom das Bild unter dem Text
   statt daneben. */
@media (min-width: 700px) {
  .auftakt {
    --bildspalte: clamp(190px, 30vw, 360px);
    --auftakt-luecke: clamp(1.5rem, 3vw, 3rem);

    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--bildspalte);
    column-gap: var(--auftakt-luecke);
    align-items: start;
  }

  .auftakt__eins { grid-column: 1; grid-row: 1; }
  .auftakt__zwei { grid-column: 1; grid-row: 2; }

  /* Bündig mit der Oberkante des Auftakts, nicht eingerückt: Das Bild soll auf
     gleicher Höhe mit „S. R. Hermann“ beginnen. */
  .auftakt__bild {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
  }

  /* Die Trennlinie zwischen den beiden Abschnitten liefe sonst nur über die
     Textspalte und schnitte neben dem Bild ins Leere. */
  .auftakt__zwei { border-top: 0; }
}

/* Die Vierer-Reihe bricht aus der Textspalte aus und nimmt die volle
   Layoutbreite ein — unterhalb des Bildes, das darüber endet. Sie bleibt dabei
   im Markup innerhalb ihres Abschnitts, behält also die Zuordnung zur
   Überschrift „Leben mit Vermögen“. Erst ab voller Layoutbreite: darunter
   bliebe für vier Spalten zu wenig Platz. */
@media (min-width: 62rem) {
  .auftakt .steps {
    grid-template-columns: repeat(4, 1fr);
    margin-right: calc(-1 * (var(--bildspalte) + var(--auftakt-luecke)));
  }
}

/* Nummerierte Abfolge (z. B. „Vermögen entsteht → schwankt → …“) */
/* Feste Stufen statt auto-fit: bei vier Einträgen erzeugt auto-fit sonst
   zwischendurch ein 3+1-Layout mit einzelnem Rest in der zweiten Zeile. */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 34rem) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 62rem) {
  .steps { grid-template-columns: repeat(4, 1fr); }
}

.steps li {
  counter-increment: step;
  border-top: 2px solid var(--rule-strong);
  padding-top: .8rem;
}

.steps li::before {
  content: counter(step);
  display: block;
  font-family: var(--font-serif);
  font-size: .875rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: .4rem;
}

.steps h3 { font-size: 1.0625rem; margin-bottom: .3rem; }
.steps p  { font-size: .9375rem; color: var(--ink-soft); margin: 0; }

/* Buchvorstellung: Text + Beikasten */
.book {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 54rem) {
  .book {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 3rem;
  }
}

.book__text > * { max-width: var(--measure); }

.book__sub {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  font-style: italic;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: -.3em 0 1.15em;
}

.sidebox {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.4rem;
  font-size: .9375rem;
}

.sidebox h3 {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .6rem;
}

.sidebox h3 + * { margin-top: 0; }

.sidebox p.q {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 1.4rem;
}

.sidebox ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebox li + li { margin-top: .25rem; }
.sidebox li a {
  display: inline-block;
  padding-block: .25rem;
  color: var(--ink);
  text-decoration: none;
}
.sidebox li a:hover { color: var(--accent); }
.sidebox li a::before { content: "→"; color: var(--accent); margin-right: .5em; }

/* --- 8. Bausteine des Themen-Hubs --------------------------- */

/* Eine der vier Bewegungen: Ziffer + Text */
.movement {
  display: grid;
  grid-template-columns: 1fr;
  gap: .4rem 2rem;
  border-top: 2px solid var(--rule-strong);
  padding-top: 1.2rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.movement:last-child { margin-bottom: 0; }

@media (min-width: 48rem) {
  .movement { grid-template-columns: 3.5rem 1fr; }
}

.movement__num {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
}

.movement__body > * { max-width: var(--measure); }

/* Die Bewegungen sind h3 unter „Die vier Bewegungen“ (h2). */
.movement h3 {
  font-size: clamp(1.3rem, 2.8vw, 1.6rem);
  margin-top: -.15em;
  margin-bottom: .55em;
}

/* Verweiszeile am Ende einer Bewegung */
.deeper {
  border-top: 1px solid var(--rule);
  margin-top: 1.3rem;
  padding-top: .85rem;
  font-size: .9375rem;
  line-height: 1.9;
  color: var(--ink-soft);
  max-width: none;
}

.deeper > b {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .1rem;
}

/* Verweise bleiben als Einheit lesbar — außer auf sehr schmalen Schirmen,
   wo ein langer Titel sonst aus dem Layout laufen würde.
   `inline-block` macht aus dem Zeilenkasten eine Fläche: Damit zählt die
   Zeilenhöhe (1.9) als Tippziel und die Verweise erreichen die von WCAG 2.2
   geforderten 24 px. Diese Zeile ist eine Verweisleiste, kein Fließtext, und
   fällt deshalb nicht unter die Ausnahme für Verweise im Satz. */
.deeper a {
  display: inline-block;
  white-space: nowrap;
}

@media (max-width: 26rem) {
  .deeper a { white-space: normal; }
}

.deeper a + a::before {
  content: " · ";
  color: var(--rule-strong);
  text-decoration: none;
  white-space: normal;
}

/* Einstieg nach Situation: Frage → Zielseite */
.route {
  list-style: none;
  margin: 0;
  padding: 0;
}

.route li {
  border-top: 1px solid var(--rule);
  padding: .9rem 0;
  display: grid;
  gap: .2rem 1.75rem;
  grid-template-columns: 1fr;
}

.route li:last-child { border-bottom: 1px solid var(--rule); }

@media (min-width: 44rem) {
  .route li {
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    align-items: baseline;
  }
}

.route__q {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink);
}

/* --- 9. Bausteine der Buchseiten ---------------------------- */

/* Aufbau eines Buches: Teil-Label + Beschreibung */
.parts {
  list-style: none;
  margin: 0;
  padding: 0;
}

.parts > li {
  display: grid;
  grid-template-columns: 1fr;
  gap: .25rem 1.75rem;
  border-top: 1px solid var(--rule);
  padding: 1rem 0;
}

.parts > li:last-child { border-bottom: 1px solid var(--rule); }

@media (min-width: 46rem) {
  .parts > li {
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    align-items: baseline;
  }
}

.parts__label {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
}

.parts__label small {
  display: block;
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .15rem;
}

.parts__body { font-size: .9375rem; color: var(--ink-soft); }
.parts__body p { margin: 0; }
.parts__body p + p { margin-top: .4rem; }

/* --- 10. Bausteine der Modellseiten ------------------------- */

/* Tabellen: breite Inhalte scrollen im eigenen Container,
   die Seite selbst scrollt nie horizontal. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
}

.table-wrap table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: .9375rem;
}

.table-wrap th,
.table-wrap td {
  text-align: left;
  vertical-align: top;
  padding: .85rem 1.25rem .85rem 0;
  border-bottom: 1px solid var(--rule);
}

.table-wrap thead th {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--rule-strong);
  padding-top: 0;
}

.table-wrap tbody th {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.table-wrap td { color: var(--ink-soft); }

/* Links in Tabellenzellen brauchen eigenes Polster, sonst sind sie
   nur so hoch wie ihre Zeile und damit zu kleine Tippziele. */
.table-wrap th a,
.table-wrap td a {
  display: inline-block;
  padding-block: .25rem;
}
.table-wrap tbody tr:last-child th,
.table-wrap tbody tr:last-child td { border-bottom: 0; }

/* Eine Vermögensstufe */
.stage {
  border-top: 2px solid var(--rule-strong);
  padding-top: 1.3rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
  scroll-margin-top: 1.5rem;
}

.stage:last-of-type { margin-bottom: 0; }

.stage__q {
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  margin-bottom: .75em;
}

.stage__range {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--accent);
  margin-bottom: .2rem;
}

.stage > p { max-width: var(--measure); }

/* --- 11. Abbildungen ---------------------------------------- */

/* Schaubild aus den Büchern. Die Grafiken sind Graustufen auf Weiß;
   sie bekommen deshalb eine eigene helle Fläche, damit sie im dunklen
   Modus nicht als greller Block im Text stehen. */
.figure {
  margin: 2.25rem 0;
  max-width: none;
}

.figure img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
}

.figure figcaption {
  margin-top: .8rem;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: var(--measure);
}

.figure figcaption b {
  display: block;
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .25rem;
}

.figure figcaption em {
  display: block;
  margin-top: .4rem;
  font-size: .875rem;
  color: var(--ink-faint);
  font-style: normal;
}

/* Buchcover */
.cover {
  margin: 0 0 1.75rem;
  max-width: 230px;
}

.cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .16), 0 8px 24px rgba(0, 0, 0, .14);
}

@media (prefers-color-scheme: dark) {
  .cover img {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 28px rgba(0, 0, 0, .45);
  }
}

/* Cover im Beikasten der Startseite. 260 px statt der früheren 150: Der Kasten
   ist innen rund 348 px breit, und bei 150 px war das Cover kleiner als eine
   Briefmarke — ausgerechnet beim Gegenstand der Seite. */
.sidebox .cover {
  max-width: 260px;
  margin-bottom: 1.4rem;
}

/* Videohinweis.
   Die Thumbnails sind im YouTube-Stil gestaltet — laute Versalien auf Dunkel —
   und damit deutlich lauter als der übrige Seitensatz. Sie stehen deshalb
   bewusst in einer schmalen Karte und nicht in Textbreite.
   Bis der Kanal steht, gibt es keinen Abspielknopf: Es gäbe nichts abzuspielen. */
.video {
  margin: 2.25rem 0;
  max-width: 30rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--surface);
  overflow: hidden;
}

.video__frame {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--surface-alt);
}

.video__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Platzhalterzustand: leicht zurückgenommen, damit die Karte nicht
   wie ein defekter Player wirkt. Gilt für die noch geplanten Videos —
   sobald `data-youtube` gefüllt ist, greift die Regel nicht mehr. */
.video[data-youtube=""] .video__frame img {
  filter: saturate(.72);
  opacity: .82;
}

/* Veröffentlichtes Video: Das Vorschaubild wird zum Verweis auf YouTube.
   Bewusst kein eingebetteter Player — die Seite lädt weiterhin nichts von
   Dritten, erst der Klick verlässt sie. */
.video__cover {
  display: block;
  position: relative;
  text-decoration: none;
}

.video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background: rgba(16, 18, 21, .74);
  border: 2px solid rgba(255, 255, 255, .88);
  transition: background .15s ease, transform .15s ease;
}

/* Dreieck aus Rahmenkanten — kein Bild und kein Schriftzeichen,
   damit nichts nachgeladen wird und die Form überall gleich aussieht. */
.video__play::after {
  content: "";
  position: absolute;
  left: 56%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: .58rem 0 .58rem 1rem;
  border-color: transparent transparent transparent #fff;
}

.video__cover:hover .video__play,
.video__cover:focus-visible .video__play {
  background: rgba(16, 18, 21, .92);
  transform: translate(-50%, -50%) scale(1.07);
}

.video__time {
  position: absolute;
  right: .7rem;
  bottom: .7rem;
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: rgba(16, 18, 21, .84);
  padding: .16rem .42rem;
  border-radius: 2px;
}

/* Der Kartentitel führt zum selben Ziel. Das Polster hebt ihn über die
   von WCAG 2.2 geforderten 24 px — er ist ein Kartenverweis, kein Fließtext. */
.video__title a {
  display: inline-block;
  padding-block: .2rem;
  color: inherit;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: .16em;
}

.video__title a:hover {
  text-decoration-color: currentColor;
}

.video__badge {
  position: absolute;
  left: .7rem;
  bottom: .7rem;
  font-family: var(--font-sans);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(20, 22, 26, .82);
  padding: .3rem .6rem;
  border-radius: 2px;
}

.video__body {
  padding: 1rem 1.1rem 1.15rem;
}

.video__kicker {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .3rem;
}

.video__title {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 .5rem;
}

.video__note {
  font-size: .875rem;
  line-height: 1.5;
  color: var(--ink-faint);
  margin: 0;
}

/* --- 12. Häufige Fragen ------------------------------------- */

/* Aufklappbare Fragen mit <details>/<summary> — bewusst ohne JavaScript.
   Tastaturbedienung und Aufklappen bringt der Browser selbst mit. */
.faq {
  border-top: 1px solid var(--rule);
  max-width: none;
}

.faq details {
  border-bottom: 1px solid var(--rule);
}

.faq summary {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  padding: 1.05rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary:hover { color: var(--accent); }

/* Eigenes Zeichen statt des Browser-Dreiecks: senkrechter Strich
   verschwindet beim Öffnen, waagerechter bleibt. */
.faq summary::before {
  content: "";
  flex: 0 0 auto;
  width: .7rem;
  height: .7rem;
  margin-top: .35em;
  background:
    linear-gradient(var(--accent), var(--accent)) center/100% 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center/2px 100% no-repeat;
  transition: transform .15s ease;
}

.faq details[open] summary::before {
  background: linear-gradient(var(--accent), var(--accent)) center/100% 2px no-repeat;
}

.faq__answer {
  padding: 0 0 1.25rem 1.6rem;
  max-width: var(--measure);
}

.faq__answer p { margin-bottom: .8em; }
.faq__answer p:last-child { margin-bottom: 0; }

.faq__answer .more { font-size: .9375rem; }

@media (max-width: 30rem) {
  .faq__answer { padding-left: 0; }
}

/* Kachelraster für die Videoübersicht.
   Nutzt denselben .video-Baustein wie die Karten im Fließtext, nur ohne
   dessen Breitenbegrenzung — so bleibt es ein Gestaltungssystem. */
.tiles {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.tiles > li { display: flex; }

.tiles .video {
  margin: 0;
  max-width: none;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.tiles .video__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* Verweis am Kachelfuß immer unten bündig */
.tiles .video__link {
  margin-top: auto;
  padding-top: .75rem;
  font-size: .875rem;
}

/* Eigenes Polster, damit der Verweis ein ausreichendes Tippziel ist. */
.tiles .video__link a {
  display: inline-block;
  padding-block: .25rem;
}

.video__desc {
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 .6rem;
}

/* --- 13. Vergrößern (Lupe + Lightbox) ----------------------- */

/* Bewusst ohne JavaScript: Der Auslöser ist ein Anker-Link, das
   Öffnen macht die :target-Regel weiter unten. Damit bleibt die
   Zusage „kein ausführbarer Skriptcode“ unberührt — und die
   Zurück-Taste schließt das Bild wie erwartet. */
.zoom {
  display: block;
  position: relative;
  cursor: zoom-in;
  border-radius: 3px;
}

.zoom img { display: block; }

/* Lupensymbol als eingebettete Grafik — kein externer Request. */
.zoom::after {
  content: "";
  position: absolute;
  right: .6rem;
  bottom: .6rem;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background:
    rgba(20, 22, 26, .8)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E")
    center / 1.05rem no-repeat;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
}

.zoom:hover::after,
.zoom:focus-visible::after { opacity: 1; }

/* Auf Touch-Geräten gibt es kein Hover — dort steht die Lupe dauerhaft. */
@media (hover: none) {
  .zoom::after { opacity: .9; }
}

/* Das Overlay selbst */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);

  /* Muss die Lesebreite aufheben: Das Overlay steht im Markup innerhalb
     von .prose und würde sonst von `.prose > * { max-width: … }` auf
     Textbreite gedeckelt — das Bild wäre dann kaum größer als vorher. */
  max-width: none;
  width: auto;
}

.lightbox:target { display: flex; }

/* Hintergrund und Schließknopf liegen fest im Fenster, damit sie auch
   dann sichtbar bleiben, wenn der Bildausschnitt verschoben wird. */
.lightbox__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 11, 13, .9);
  cursor: zoom-out;
}

.lightbox img {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .5);
}

/* Schaubilder in Originalgröße statt auf Fenstergröße verkleinert.
   Sie stehen im Text bereits in voller Spaltenbreite — „einpassen“ würde
   sie kaum vergrößern. Erst die Originalgröße macht die Beschriftungen
   lesbar; passt sie nicht ins Fenster, lässt sich der Ausschnitt schieben.
   flex-start + margin:auto zentriert, solange Platz ist, und schneidet
   beim Überlaufen nichts ab. */
.lightbox--detail {
  overflow: auto;
  align-items: flex-start;
  justify-content: flex-start;
}

.lightbox--detail img {
  max-width: none;
  max-height: none;
  margin: auto;
}

.lightbox__close {
  position: fixed;
  top: clamp(.75rem, 3vw, 1.5rem);
  right: clamp(.75rem, 3vw, 1.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  text-decoration: none;
}

.lightbox__close:hover,
.lightbox__close:focus-visible {
  background: rgba(255, 255, 255, .24);
  color: #fff;
}

@media print {
  .lightbox { display: none !important; }
  .zoom::after { display: none; }
}

/* Ehrlicher Leerzustand (Abschnitt ohne Inhalt) */
.empty {
  border: 1px dashed var(--rule-strong);
  border-radius: 3px;
  padding: 1.4rem 1.5rem;
  font-size: .9375rem;
  color: var(--ink-soft);
}

.empty p:last-child { margin-bottom: 0; }

/* --- 15. Druck ---------------------------------------------- */

@media print {
  .nav, .skip { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { border-color: #ccc; }
  a { color: #000; text-decoration: underline; }
  .card, .note { border: 1px solid #ccc; background: #fff; }
}