/* ─── Abschnitte und Rechtstexte ──────────────────────────────────
   Zwei Dinge, die zusammengehoeren, weil sie sich die
   Abschnitts-Ueberschriften teilen:

   1. Die Abschnitte der Werbeseite (_problem, _solution, _usecases,
      _why, _process, _about, _contact).
   2. Die vier Rechtstexte, die es seit dem 13. August 2026 in jedem
      Teilprojekt gibt — siehe templates/opensection/rechtstexte/.

   Die Regeln standen frueher in style.css. Sie sind hier heraus-
   gezogen, weil das Trading Journal die Rechtstexte ebenfalls
   anzeigt, style.css aber nicht laden kann (dort wird body global
   hell eingefaerbt, was data-bs-theme="dark" zerlegt).

   Farbwerte kommen aus static/css/marke.css, die vorher geladen
   werden muss.
   ──────────────────────────────────────────────────────────────── */

/* ─── Schriften ─────────────────────────────────────────────────────
   style.css setzt body auf DM Sans und h1..h3 auf Lora. Das Trading
   Journal kann jene Datei nicht laden und stuende sonst als einziges auf
   der System-Serifenlosen — nachgemessen am 13. August 2026, im Bild war
   es nicht zu erkennen. Deshalb hier ausdruecklich fuer den Rechtstext.
   ──────────────────────────────────────────────────────────────────── */
.rechtstext-seite {
  font-family: 'DM Sans', sans-serif;
}

.section-title,
.rechtstext-karte h1,
.rechtstext-karte h2,
.rechtstext-karte h3 {
  font-family: 'Lora', serif;
  font-weight: 600;
}

/* ─── Abschnitts-Ueberschriften ─────────────────────────────────── */
.section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sl-green);
  margin-bottom: 0.75rem;
}

.section-title {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  color: var(--sl-blue);
  margin-bottom: 1rem;
}

/* ─── Rechtstexte ───────────────────────────────────────────────── */

/* Grundfall: die neutrale Fassung unter /impressum/ und das Trading
   Journal. Beide legen den Text ohne aeusseren .container ab, und die
   Leiste der Werbeseite klebt oben — daher die 8rem. */
.rechtstext-seite {
  background: var(--sl-offwhite);
  padding: 8rem 0 5rem;
}

/* GesundheitsCoach und Saatzeit legen den Inhaltsblock bereits in einen
   .container innerhalb eines <main> mit eigenem Abstand. Ohne die
   folgenden Zeilen ruecke der Text ein zweites Mal ein und stuende
   zusaetzlich 8rem tief. Die Flaeche braucht es dort nicht: body traegt
   in beiden Teilprojekten bereits --sl-offwhite. */
.container .rechtstext-seite {
  background: none;
  padding: 0 0 2rem;
}

.container .rechtstext-seite > .container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.rechtstext-karte {
  background: #fff;
  border: 1px solid var(--sl-border);
  /* Ausdruecklich, nicht geerbt: Die Karte ist immer hell, auch im
     Trading Journal, dessen body dunkel ist. */
  color: var(--sl-text);
}

.rechtstext-karte h2 {
  font-size: 1.25rem;
  color: var(--sl-blue);
  margin-top: 2rem;
}

.rechtstext-karte hr { border-color: var(--sl-border); }

.rechtstext-karte a { color: var(--sl-green); }

/* Bootstraps .text-muted haengt an --bs-secondary-color, und die ist
   unter data-bs-theme="dark" hell — auf der weissen Karte im Trading
   Journal waere der Text dann kaum zu lesen. Das !important ist
   noetig, weil Bootstrap es selbst benutzt. */
.rechtstext-karte .text-muted { color: var(--sl-muted) !important; }