/* Übernommen aus SlowAutomaticsPublisher, 519be1c, gemeinsam/stil/broadsheet.css.
   Designsystem 1.0; im Anschluss ergänzt SentimentalLM seine dunkle Darstellung. */
:root {
  /* ---------------------------------------------- Designsystem 1.0 (verbindlich) */
  --pub-canvas: #fafaf8;
  --pub-sidebar: #f3f2ef;
  --pub-surface: #ffffff;
  --pub-text: #182e39;
  --pub-text-muted: #5c6870;
  --pub-accent: #075e69;
  --pub-accent-hover: #064d56;
  --pub-on-accent: #ffffff;
  --pub-selected-bg: #e2f0f2;
  --pub-selected-text: #075e69;
  --pub-hover-bg: #e9edec;
  --pub-border: #d9dede;
  --pub-control-border: #7b898c;
  --pub-placeholder: #e9eceb;
  --pub-danger: #a33636;
  --pub-success: #22694f;
  --pub-warning: #805b12;
  --pub-brand-gold: #b88d28;
  /* Helle Flächen zu Gefahr, Erfolg und Warnung; die Schriftfarbe darauf hält AA. */
  --pub-danger-bg: #f8eaea;
  --pub-success-bg: #e6f1ec;
  --pub-warning-bg: #f6efdf;

  /* Oberfläche in der Systemschrift; die Serife nur für Marke und redaktionellen Text. */
  --pub-font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pub-font-editorial: "Source Serif 4", Georgia, "Times New Roman", serif;
  --pub-text-xs: 0.8125rem;  /* 13px: Metadaten */
  --pub-text-sm: 0.9375rem;  /* 15px: Navigation, Bedienelemente */
  --pub-text-md: 1rem;       /* 16px: Fließtext der Oberfläche */
  --pub-text-lg: 1.125rem;   /* 18px: Abschnitte */
  --pub-text-xl: 1.75rem;    /* 28px: Seitentitel */
  --pub-weight-regular: 400;
  --pub-weight-medium: 500;
  --pub-weight-semibold: 600;
  --pub-line-body: 1.5;
  --pub-line-heading: 1.25;

  --pub-space-1: 4px;
  --pub-space-2: 8px;
  --pub-space-3: 12px;
  --pub-space-4: 16px;
  --pub-space-6: 24px;
  --pub-space-8: 32px;
  --pub-space-12: 48px;

  --pub-sidebar-width: 240px;
  --pub-header-min-height: 72px;
  --pub-page-padding: 32px;
  --pub-grid-gap: 24px;
  --pub-card-padding: 24px;
  --pub-control-min-height: 44px;
  --pub-nav-min-height: 44px;
  --pub-nav-active-marker: 3px;
  --pub-icon-size: 20px;
  --pub-radius-control: 8px;
  --pub-radius-card: 12px;
  --pub-focus-width: 2px;
  --pub-focus-offset: 2px;
  --pub-menu-min-width: 208px;
  --pub-shadow-card: none;
  --pub-shadow-menu: 0 6px 20px rgb(24 46 57 / 12%);
  --pub-duration-fast: 120ms;
  --pub-ease: ease-out;

  /* ---------------------------------------------- abgeleitet (ab 0.3.0, Anmeldemaske)
     Werte, die das Designsystem nicht nennt, die Bildvorlage der Anmeldung aber braucht. Sie
     zeigen auf die Werte oben, damit keine Seite eigene Farben oder Maße erfindet. */
  --pub-rail: var(--pub-sidebar);                 /* linke Spalte: die getönte Fläche der Seitenleiste */
  --pub-field-fill: var(--pub-sidebar);           /* gefülltes Feld ohne Rahmen, wie die Spalte */
  --pub-field-fill-hover: var(--pub-hover-bg);
  --pub-text-display: calc(var(--pub-text-xl) * 1.5);                       /* 42px: große Überschrift */
  --pub-tracking-kicker: 0.22em;                  /* Überzeile in Großbuchstaben, gesperrt */
  --pub-control-lg-height: calc(var(--pub-control-min-height) + var(--pub-space-1));  /* 48px: breiter Hauptknopf */
  --pub-form-gap: calc(var(--pub-space-4) + var(--pub-space-1));            /* 20px zwischen Feldern */
  --pub-form-width: calc(var(--pub-space-12) * 8);                          /* 384px */
  --pub-form-width-wide: calc(var(--pub-space-12) * 11);                    /* 528px: QR-Code, Codes */

  /* ---------------------------------------------- eingeführte Namen → Designsystem */
  --color-bg: var(--pub-canvas);
  --color-surface: var(--pub-sidebar);
  --color-text: var(--pub-text);
  --color-accent: var(--pub-accent);
  --color-accent-2: var(--pub-danger);
  --color-divider: var(--pub-border);

  /* Neutrale Stufen in der kühlen Tönung der Schriftfarbe. 400 ist der Feldrand (3:1 auf
     Weiß), ab 500 halten die Stufen als Schrift AA auf Weiß und auf der Fläche. */
  --color-neutral-100: #f4f5f4;
  --color-neutral-200: var(--pub-hover-bg);
  --color-neutral-300: var(--pub-border);
  --color-neutral-400: var(--pub-control-border);
  --color-neutral-500: #66737a;
  --color-neutral-600: var(--pub-text-muted);
  --color-neutral-700: var(--pub-text-muted);
  --color-neutral-800: #34454e;
  --color-neutral-900: var(--pub-text);

  /* Petrol: 100 ist die Auswahlfläche, 700 und 800 die Auswahlschrift, 600 das Hover. */
  --color-accent-100: var(--pub-selected-bg);
  --color-accent-200: #c6e1e5;
  --color-accent-300: #8ec2c9;
  --color-accent-400: #4f9aa4;
  --color-accent-500: #1d7681;
  --color-accent-600: var(--pub-accent-hover);
  --color-accent-700: var(--pub-accent);
  --color-accent-800: var(--pub-selected-text);
  --color-accent-900: #0b3a41;

  /* Die zweite Akzentfarbe steht in allen Seiten für Gefahr und Fehler. */
  --color-accent-2-100: var(--pub-danger-bg);
  --color-accent-2-200: #f0d4d4;
  --color-accent-2-300: #dfa9a9;
  --color-accent-2-400: #cc7d7d;
  --color-accent-2-500: #b85454;
  --color-accent-2-600: var(--pub-danger);
  --color-accent-2-700: var(--pub-danger);
  --color-accent-2-800: #8a2c2c;
  --color-accent-2-900: #5c1f1f;

  /* Gelb steht in den Seiten für Warnungen: Warnfarbe des Designsystems (AA auf Weiß). */
  --color-process-yellow: var(--pub-warning);

  --font-ui: var(--pub-font-ui);
  --font-editorial: var(--pub-font-editorial);
  --font-heading: var(--pub-font-ui);
  --font-heading-weight: 600;
  --font-body: var(--pub-font-ui);

  --space-1: var(--pub-space-1);
  --space-2: var(--pub-space-2);
  --space-3: var(--pub-space-3);
  --space-4: var(--pub-space-4);
  --space-6: var(--pub-space-6);
  --space-8: var(--pub-space-8);

  --radius-sm: 4px;
  --radius-md: var(--pub-radius-control);
  --radius-lg: var(--pub-radius-card);

  /* Karten bleiben ohne Schatten; nur Menüs, Popover und Dialoge heben sich ab. */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: var(--pub-shadow-menu);
}

:root[data-theme=dark]{--pub-canvas:#111c20;--pub-sidebar:#17262b;--pub-surface:#1b2d33;--pub-text:#edf3f2;--pub-text-muted:#b7c8c9;--pub-accent:#84d4cc;--pub-accent-hover:#a5e5dd;--pub-on-accent:#102d31;--pub-selected-bg:#244449;--pub-selected-text:#a5e5dd;--pub-hover-bg:#253a40;--pub-border:#3a5056;--pub-control-border:#859e9f;--pub-danger:#ffb1b1;--pub-danger-bg:#472b30;--pub-success:#9ed8ba;--pub-success-bg:#203e34;--pub-warning:#e7cd8e;--pub-warning-bg:#3c3524}