/* Bruecke zwischen den beiden Farbwelten der Seite (14.09.2026).

   Die Artikel unter /blog laden main.css, dort sind die --lumis-*-Tokens
   definiert. Seiten, die im Layout der Hauptwebsite stecken (style.css) und
   nur blog.css dazuladen -- etwa die Themenseite /nebenkostenabrechnung --
   hatten diese Tokens NICHT: jede Regel mit var(--lumis-white) oder
   var(--lumis-border) fiel still aus, die Bausteine sahen aus wie nackter
   Text ohne Kacheln.

   Diese Datei bildet die --lumis-*-Namen auf die Tokens aus style.css ab.
   Keine eigenen Farbwerte -- sonst laufen die beiden Welten wieder
   auseinander. */
:root {
  --lumis-orange:        var(--orange);
  --lumis-orange-dark:   var(--orange-dark);
  --lumis-orange-light:  var(--orange-soft);
  --lumis-white:         var(--card);
  --lumis-cream:         var(--paper);
  --lumis-text:          var(--ink);
  --lumis-text-muted:    var(--muted);
  --lumis-green:         var(--green);
  --lumis-green-bg:      var(--green-soft);
  --lumis-border:        var(--line);
  --lumis-accent-bg:     var(--off-white);
  --lumis-newsletter-bg: var(--off-white);

  --lumis-radius-sm: var(--radius-sm);
  --lumis-radius-md: 12px;
  --lumis-radius-lg: var(--radius);

  --lumis-shadow:    var(--shadow-sm);
  --lumis-shadow-lg: var(--shadow);
}

/* Klassen, die im Ratgeber-Markup stecken, aber aus main.css stammen.
   Seit die Artikel im Layout der Hauptwebsite laufen (14.09.2026), fehlen sie --
   hier auf die Entsprechungen aus style.css abgebildet. */
.container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.container-narrow { max-width: 780px; }