/* ── Design Tokens (override style.css) ──
       Bewusstes Override der gleichnamigen Tokens aus style.css fuer diese
       Seite, keine versehentliche Redundanz. Nicht zusammenfuehren. ── */
    :root {
      --bg:           #111f26;
      --surface:      rgba(12,28,36,.72);
      --border:       rgba(180,210,220,.12);
      --text:         #edeade;
      --muted:        rgba(240,236,227,.62);
      --muted-aaa:    #b8b3a0; /* AAA-Kontrast (~8:1) auf dunklem Hintergrund, statt transparenz-basiertem --muted (~6.2:1, knapp unter AAA) */
      --faint:        rgba(255,255,255,.05);
      --accent:       #b58936;
      --accent-dk:    #8f6c2a;
      --accent-lt:    rgba(181,137,54,.15);
      --accent-light: #cda968;
      --accent-green: #8da47b;
      --gold:         #b58936;
      --gold-dk:      #8f6c2a;
      --line:         rgba(200,225,235,.1);
      --line-strong:  rgba(200,225,235,.18);
      --panel:        rgba(10,24,32,.78);
      --amber:        #f2b840;
      --amber-lt:     rgba(42,28,6,.7);
      --red:          #f28888;
      /* Reservierte Höhe für Sponti-Begleiter (Figur+Blase) am unteren Rand
         des Start-Screens, damit Inhalt nie damit kollidiert (s. .sponti-figure-wrap) */
      --companion-reserve: 264px;
      /* Maximale Breite der Sprechblase - per Breakpoint überschrieben
         (s. Desktop-Media-Query), statt die ganze .sponti-bubble-Regel zu
         duplizieren. Einzige Quelle der Wahrheit für die Blasenbreite. */
      --bubble-max-width: 300px;
      /* Bewusster Gestaltungswert (unabhängig von Mascot-Grösse!), der den
         Start-Screen-Inhalt etwas näher ans Maskottchen rückt statt toten
         Leerraum zu lassen — siehe #screen-start padding-bottom */
      --start-content-lift: 2rem;
    }