/*
 * Stil „Editorial / Swiss“ (UI/UX-Designsystem 2026-10-08, Briefing §5 / §1.2): Raster, Typografie, feine Linien, viel
 * Negativraum. Warmweiß bzw. Graphit, Schwarz und Grautöne plus EINE bewusst eingesetzte Akzentfarbe - das vorhandene
 * CD-Rot #E2003D (docs/CD_FARBEN.md), nichts Erfundenes. Eckig, keine Reliefs, keine Schatten; Flächen trennen sich über
 * 1-px-Linien. Passt besonders zu Navigation „Mosaik“ und Schrift „Editorial“ (beides frei kombinierbar).
 * Kontraste (gerechnet): hell ink #151413 auf #f5f2ec 17,1:1, muted #5c5a56 6,2:1 (auf #ebe7df 5,6:1), Rot als Schrift
 * #c00034 5,5:1, Weiß auf Rot 4,88:1; dunkel ink #efebe5 auf #1b1a19 15,4:1, muted #a6a29b 6,9:1, Rot als Schrift #f07396 6,0:1.
 */
:root[data-design="editorial"] {
  --c-bg: #f5f2ec; --c-surface: #f5f2ec; --c-surface-2: #ebe7df;
  --c-ink: #151413; --c-ink-2: #3a3835; --c-muted: #5c5a56; --c-muted-deep: #5a5854; --c-line: #d6d0c5;
  --c-brand: #e2003d; --c-brand-ink: #ffffff; --c-brand-deep: #c00034; --c-brand-soft: #f6dfe2;
  --c-accent: #3a3835; --c-accent-soft: #ebe7df;
  --r-sm: 2px; --r-md: 2px; --r-lg: 3px;
  --nm-light: transparent; --nm-dark: transparent;
  --nm-1: inset 0 0 0 1px var(--c-line);
  --nm-2: inset 0 0 0 1px var(--c-line);
  --nm-3: inset 0 0 0 1px var(--c-line), 0 18px 40px -24px rgba(0, 0, 0, .25);
  --nm-in: inset 0 0 0 1px var(--c-line); --nm-in-deep: inset 0 0 0 1px var(--c-ink-2);
  --nm-face: var(--c-bg); --nm-face-in: var(--c-surface-2);
  --nm-brand-face: var(--c-brand); --nm-brand-face-in: var(--c-brand-deep); --nm-brand-dark: transparent;
}
:root[data-design="editorial"][data-theme="dark"] {
  --c-bg: #1b1a19; --c-surface: #1b1a19; --c-surface-2: #242321;
  --c-ink: #efebe5; --c-ink-2: #d3cfc8; --c-muted: #a6a29b; --c-muted-deep: #a6a29b; --c-line: #3a3835;
  --c-brand-deep: #f07396; --c-brand-soft: #3a1520; --c-accent: #d3cfc8; --c-accent-soft: #242321;
  --nm-3: inset 0 0 0 1px var(--c-line), 0 18px 40px -24px rgba(0, 0, 0, .7);
}
:root[data-design="editorial"] body { background: var(--c-bg); }
:root[data-design="editorial"] .app-header { background: var(--c-bg); box-shadow: inset 0 -1px 0 var(--c-ink); }
/* Typografische Kanten: Überschriften mit feiner Linie darüber, Labels gesperrt */
:root[data-design="editorial"] .card__title, :root[data-design="editorial"] .ws-home__sub { padding-top: var(--sp-2); border-top: 1px solid var(--c-ink); }
:root[data-design="editorial"] .ws-home__kicker, :root[data-design="editorial"] .navacc__head, :root[data-design="editorial"] .ux-menu__title { letter-spacing: .14em; }
/* Knöpfe: eckig, Linie; Hauptknopf als einziger Rot-Akzent */
:root[data-design="editorial"] .btn, :root[data-design="editorial"] .chip { box-shadow: inset 0 0 0 1px var(--c-ink-2); background: transparent; }
:root[data-design="editorial"] .btn--primary { background: var(--c-brand); color: var(--c-brand-ink); box-shadow: none; }
:root[data-design="editorial"] .chip--on, :root[data-design="editorial"] .chip[aria-pressed="true"] { background: var(--c-ink); color: var(--c-bg); box-shadow: none; }
:root[data-design="editorial"] .ws-card, :root[data-design="editorial"] .card { background: var(--c-bg); }
:root[data-design="editorial"] .ws-card:hover { box-shadow: inset 0 0 0 1px var(--c-ink); }
/* Mosaik und Arc: Linien statt Flächen */
:root[data-design="editorial"] .mos-tile { box-shadow: inset 0 0 0 1px var(--c-line); }
:root[data-design="editorial"] .mos-tile:hover { box-shadow: inset 0 0 0 1px var(--c-ink); }
:root[data-design="editorial"] .mos-tile__num { font-weight: 200; color: var(--c-ink-2); }
:root[data-design="editorial"] .mos-tile:hover .mos-tile__num, :root[data-design="editorial"] .alt-list__g.is-open .alt-list__num { color: var(--c-brand-deep); }
:root[data-design="editorial"] .arc-line { stroke: var(--c-ink-2); stroke-width: 1; }
:root[data-design="editorial"] .arc-panel { box-shadow: inset 0 0 0 1px var(--c-ink); }