/* pepperle.de — gemeinsame Grundwerte für alle Seiten.
   Hier steht der Hintergrund der Website an genau einer Stelle: die Bühne
   (style.css) und die Dokumentseiten (page.css) bauen ihn aus denselben
   Variablen auf. Vorher hatten beide Dateien eigene Verläufe — die Startseite
   war dadurch spürbar dunkler als 404- und Dateiseite. */

:root {
  /* Grundtöne des Verlaufs, von der hellen Mitte zur dunklen Kante */
  --bg-core: #093c68;
  --bg-mid: #042a4b;
  --bg-deep: #01172c;

  /* Die drei Ebenen des Hintergrunds, in Malreihenfolge:
     Verlauf zuunterst, darüber das weiche Licht, darüber die Vignette. */
  --bg-grad: radial-gradient(125% 105% at 50% 38%, var(--bg-core) 0%, var(--bg-mid) 46%, var(--bg-deep) 100%);
  --bg-glow: radial-gradient(80% 60% at 50% 46%, rgba(11, 77, 132, 0.26) 0%, rgba(2, 31, 59, 0) 70%);
  --bg-vignette: linear-gradient(to bottom, rgba(1, 20, 38, 0.88) 0%, rgba(1, 20, 38, 0.25) 17%, rgba(1, 20, 38, 0) 34%, rgba(1, 20, 38, 0) 62%, rgba(1, 20, 38, 0.55) 84%, rgba(1, 20, 38, 0.92) 100%);
}

/* Inhaltsarme Seiten (Impressum, 404, Weiterleitungen).

   Auf der Startseite und den Kategorieseiten liegen Illustrationen über der
   hellen Mitte des Verlaufs — sichtbar bleiben vor allem die dunklen Ränder.
   Auf einer reinen Textseite ist die Spalte schmal, der helle Kern liegt links
   und rechts davon frei, und dieselbe CSS-Regel wirkt spürbar heller.

   Gegenmittel: gleiche Palette, gleiche dunkle Kante (--bg-deep bleibt), nur
   ein flacherer Kern und weniger Streulicht. */
.bg-quiet {
  --bg-core: #06304f;
  --bg-mid: #03233d;
  --bg-glow: radial-gradient(80% 60% at 50% 46%, rgba(11, 77, 132, 0.12) 0%, rgba(2, 31, 59, 0) 70%);
}