/* ==========================================================================
   RAMPENLICHT — Inhaltsseiten
   Erweiterung des Designsystems für Blog, Rechtsseiten und Fehlerseite.
   Dokumentiert in design-system.md §13.

   Regeln, die hier gelten und nirgends gebrochen werden:
   · keine neue Farbe, kein neuer Token — alles kommt aus design-system.css
   · Bandrhythmus, Radienbruch (20 px / 3 px) und Bühnenwechsel unverändert
   · zentriert wird nur die Komposition, nie der Lesetext [O7]
   · Lesemaß --measure auf jedem Textblock [O6]

   Warum eine eigene Datei und nicht design-system.css: Die fünf
   Conversion-Seiten brauchen nichts davon. Sie laden diese Datei nicht.
   ========================================================================== */

/* ==========================================================================
   1 · Seitenkopf — der dunkle Anschlag jeder Inhaltsseite
   Ersetzt den Hero: Inhaltsseiten verkaufen nicht, sie kündigen an.
   ========================================================================== */
.rl-kopf { text-align: center; }

.rl-kopf h1 {
  max-width: 20ch;
  margin-inline: auto;
  font-size: var(--display-sect);   /* nicht --display-hero: Fremdtitel sind lang */
}
.rl-kopf--weit h1 { max-width: 26ch; }

.rl-kopf .rl-eyebrow { margin-bottom: var(--space-xl); }

.rl-kopf__lead {
  font-size: var(--text-lead);
  color: var(--on-dark-muted);
  max-width: 58ch;
  margin: var(--space-xl) auto 0;
}

/* Die Zeile aus Datum, Lesezeit und Autor. Trennpunkte sind gesetzt statt
   generiert, damit sie beim Umbruch nicht allein in einer Zeile stehen. */
.rl-kopf__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm) var(--space-lg);
  margin: var(--space-2xl) 0 0;
  max-width: none;
  font-size: var(--text-small);
  color: var(--on-dark-muted);
}
.rl-kopf__meta > * { display: inline-flex; align-items: center; gap: var(--space-sm); }
.rl-kopf__meta img {
  width: 32px; height: 32px;
  border-radius: var(--radius-pill);
  object-fit: cover;
}

/* ==========================================================================
   2 · Das Titelbild — es schneidet die Bandkante an
   Der Fold braucht eine Kante, die anschneidet (Designsystem §10 Don't:
   kein Full-Height-Hero). Auf einer Inhaltsseite leistet das Bild das.
   ========================================================================== */
.rl-titelbild {
  margin: 0;
  max-width: var(--container-text);
  margin-inline: auto;
}
.rl-titelbild img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-card);
  background: var(--paper-soft);   /* hält die Fläche, bevor das Bild da ist */
}
.rl-titelbild figcaption {
  margin: var(--space-md) 0 0;
  max-width: none;
  font-size: var(--text-micro);
  color: var(--ink-muted);
  text-align: center;
}

/* ==========================================================================
   3 · Prosa — die eine Textspalte
   Ein Band, ein Maß. Jedes Kind sitzt mittig als Block, der Text darin
   bleibt linksbündig [O7]. Deshalb margin-inline auf den Kindern und
   nicht text-align auf dem Container.
   ========================================================================== */
/* Das Maß sitzt auf der Spalte, nicht auf jedem Kind — sonst rechnet `ch`
   gegen die jeweils eigene Schriftgröße und eine 28-px-Überschrift bekommt
   eine deutlich breitere Spalte als ein 17-px-Absatz. Die linke Kante wandert
   dann von Block zu Block, und genau die soll stehen. */
.rl-prosa {
  max-width: var(--measure);      /* 50ch bei 17 px ≈ 631 px */
  margin-inline: auto;
}
.rl-prosa > * {
  max-width: 100%;
  margin-inline: 0;
}

.rl-prosa h2 {
  font-size: var(--display-sub);
  margin: var(--space-5xl) 0 var(--space-xl);
}
.rl-prosa h3 {
  font-size: var(--display-card);
  margin: var(--space-4xl) 0 var(--space-md);
}
.rl-prosa > :first-child { margin-top: 0; }
.rl-prosa > :last-child { margin-bottom: 0; }

/* Der erste Absatz trägt den Einstieg — etwas größer, wie der Lead eines
   Abschnittskopfs. Er ist der Übergang aus dem Kopf in den Text. */
.rl-prosa__lead {
  font-size: var(--text-lead);
  color: var(--ink);
}

.rl-prosa ul, .rl-prosa ol {
  display: grid;
  gap: var(--space-md);
  margin: 0 0 var(--para-gap);
  padding-left: var(--space-xl);
}
.rl-prosa ul { list-style: disc; }
.rl-prosa ol { list-style: decimal; }
.rl-prosa li { padding-left: var(--space-xs); }
.rl-prosa li::marker { color: var(--ink-muted); }

/* Das Zitat trägt eine neutrale Kante, keine Signalfarbe: Grün ist der
   Ersparnis und dem Beweis vorbehalten, Coral dem Schmerz des Kunden (§2).
   Ein Zitat ist beides nicht. */
.rl-prosa blockquote {
  margin: var(--space-3xl) 0;
  padding-left: var(--space-xl);
  border-left: 3px solid var(--ink);
  font-size: var(--text-lead);
}
.rl-prosa blockquote p:last-child { margin-bottom: 0; }

.rl-prosa a { text-decoration: underline; text-underline-offset: .18em; }

/* Trennlinie zwischen zwei Gedanken im Fließtext */
.rl-prosa hr {
  margin: var(--space-4xl) 0;
  border: 0;
  border-top: 1px solid var(--hairline);
}

/* Rechtsseiten: viele kurze Abschnitte statt weniger langer. Der große
   Vorlauf vor h2 würde die Seite auseinanderreißen. */
.rl-prosa--recht h2 {
  font-size: var(--display-card);
  margin-top: var(--space-4xl);
}
.rl-prosa--recht { font-size: var(--text-small); }
.rl-prosa--recht p { color: var(--ink-body); }

/* Die AGB haben drei Teile, jeder Teil mehrere Paragrafen. Ohne eigene Stufe
   für die Teil-Überschrift läge sie auf derselben Höhe wie das „§ 1“ darunter.
   Die Kante trennt, die Größe ordnet ein — beides aus dem Bestand an Tokens.
   Greift nur, wo eine Rechtsseite Teile hat: Impressum und Datenschutz
   bleiben unberührt. */
.rl-prosa--recht .rl-teil {
  font-size: var(--display-sub);
  margin-top: var(--space-5xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--hairline);
}
.rl-prosa--recht > .rl-teil:first-child { margin-top: 0; }

/* Der Vorbehalt über einer Rechtsseite: als Warnfläche breiter als die
   Textspalte, im Inneren aber linksbündig — ein vierzeiliger zentrierter
   Text bricht [O7]. */
.rl-vorbehalt {
  max-width: var(--container-text);
  margin: 0 auto var(--space-4xl);
  text-align: left;
  justify-content: flex-start;
}
.rl-vorbehalt p { max-width: var(--measure); margin: 0; }

/* ==========================================================================
   4 · Artikelfuß — Rückweg und Einordnung
   ========================================================================== */
.rl-artikelfuss {
  max-width: var(--measure);
  margin: var(--space-5xl) auto 0;
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--hairline);
  font-size: var(--text-small);
  color: var(--ink-muted);
}
.rl-artikelfuss p { max-width: none; }

/* ==========================================================================
   5 · Blogliste — die Kachel ist ganz Link, wie die Weiche-Karte des Hubs
   ========================================================================== */
.rl-blogliste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3xl) var(--space-2xl);
}

.rl-kachel {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-card);
}
.rl-kachel:hover .rl-kachel__titel { text-decoration: underline; text-underline-offset: .18em; }
.rl-kachel:hover img { transform: scale(1.03); }

.rl-kachel__bild {
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--paper-soft);
  margin-bottom: var(--space-xl);
}
.rl-kachel__bild img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform var(--dur-3) var(--ease);
}

/* Kategorie und Lesezeit als Versalzeile — dasselbe Muster wie .blog__meta
   auf der Startseite, hier als Systembaustein statt als Seiten-CSS. */
.rl-kachel__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  margin: 0 0 var(--space-md);
  max-width: none;
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.rl-kachel__titel {
  font-size: var(--display-card);
  margin: 0 0 var(--space-md);
}

.rl-kachel__teaser {
  font-size: var(--text-small);
  color: var(--ink-muted);
  margin: 0;
}

/* Der Pfeil steht am Kartenfuß auf gleicher Höhe, auch wenn die Teaser
   unterschiedlich lang sind — dieselbe Begründung wie bei .weiche__go. */
.rl-kachel__go {
  margin-top: auto;
  padding-top: var(--space-xl);
  font-size: var(--text-small);
  font-weight: 700;
}

/* Auf dunklem Band dreht die Kachel ihre Polarität mit. */
.rl-band--stage .rl-kachel__meta,
.rl-band--stage-soft .rl-kachel__meta,
.rl-band--stage .rl-kachel__teaser,
.rl-band--stage-soft .rl-kachel__teaser { color: var(--on-dark-muted); }

/* ==========================================================================
   6 · Fehlerseite
   ========================================================================== */
.rl-mitteilung { text-align: center; }
.rl-mitteilung h1 { max-width: 18ch; margin-inline: auto; }
.rl-mitteilung__code {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--display-figure);
  color: var(--on-dark-muted);
  margin-bottom: var(--space-lg);
}
.rl-mitteilung__lead {
  font-size: var(--text-lead);
  color: var(--on-dark-muted);
  max-width: 52ch;
  margin: var(--space-xl) auto var(--space-3xl);
}
.rl-mitteilung__wege {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  justify-content: center;
}

/* ==========================================================================
   7 · Umbrüche
   ========================================================================== */
@media (max-width: 900px) {
  .rl-blogliste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .rl-blogliste { grid-template-columns: minmax(0, 1fr); gap: var(--space-4xl); }
  .rl-prosa h2 { margin-top: var(--space-4xl); }
  .rl-kopf__meta { gap: var(--space-sm) var(--space-md); }
}