/* ══════════════════════════════════════════════════════════════════════
   FARBWELTEN NACH APPLE-ART · Tokens (seit 2026-10-22)
   ──────────────────────────────────────────────────────────────────────
   Vincent hat aus zwanzig Entwürfen die vier nach Apple-Art gewählt
   (Nr. 11–14 der Leinwand „Dashboard-Optik“): Klarheit, Gruppen, Glas,
   Bühne. Jede ist eine Farbwelt wie Forsthaus, in Hell UND Dunkel. Der
   Knopf „Farbwelt“ wechselt die Welt, der Mond den Modus (SKINS in
   farbwelten.js). Sie ersetzen Kontor und Alpin.

   Hier stehen die Tokens je Welt (Hell, dann Dunkel mit zwei Attributen,
   0,3,0, damit die Dunkelfassung die helle schlägt). Die Bauteile, mit
   denen die Welten wie die Entwürfe aussehen, stehen in
   farbwelten-rahmen.css und farbwelten-kacheln.css; was sie an DOM brauchen
   (Ring, Fotos, Bühne), in farbwelten.js.
   Eigene Dateien statt styles.css: das Selbstauskunft-PDF bettet styles.css
   ein (lib/sa-pdf.js) und darf von keiner Farbwelt etwas abbekommen.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Gemeinsam: Systemschrift, Rundungen, Symbole ──────────────────────
   Auf Mac und iPhone ist das die San Francisco des Systems, anderswo
   IBM Plex wie bisher. Kein Download, keine fremde Quelle. Die Symbole
   sind Lucide-Pfade als Maske (data:, wie img-src es erlaubt).          */
:root:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"], [data-skin="buehne"]) {
  --font: -apple-system, BlinkMacSystemFont, 'IBM Plex Sans', 'Segoe UI', sans-serif;
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --radius-sm: 10px;
  --fw-pad: 22px;
  --fw-i-lightbulb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E");
  --fw-i-linie: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16'/%3E%3Cpath d='m19 9-5 5-4-4-3 3'/%3E%3C/svg%3E");
  --fw-i-landmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 18v-7'/%3E%3Cpath d='M11.119 2.205a2 2 0 0 1 1.762 0l7.84 3.846A.5.5 0 0 1 20.5 7h-17a.5.5 0 0 1-.22-.949z'/%3E%3Cpath d='M14 18v-7'/%3E%3Cpath d='M18 18v-7'/%3E%3Cpath d='M3 22h18'/%3E%3Cpath d='M6 18v-7'/%3E%3C/svg%3E");
  --fw-i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --fw-i-banknote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='12' x='2' y='6' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/svg%3E");
  --fw-i-wallet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E");
  --fw-i-bett: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 20v-8a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v8'/%3E%3Cpath d='M4 10V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4'/%3E%3Cpath d='M12 4v6'/%3E%3Cpath d='M2 18h20'/%3E%3C/svg%3E");
  --fw-i-trend: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 7h6v6'/%3E%3Cpath d='m22 7-8.5 8.5-5-5L2 17'/%3E%3C/svg%3E");
  --fw-i-prozent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' x2='5' y1='5' y2='19'/%3E%3Ccircle cx='6.5' cy='6.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E");
}

/* Ring, Balken je Haus und Fotos der Einheiten stehen immer im DOM
   (farbwelten.js) und erscheinen nur in diesen vier Welten. */
.fw-ring, .fw-haeuser, .fw-foto { display: none; }

/* ══ 1 · KLARHEIT ═══════════════════════════════════════════════════
   Hell: Hellgrau, weiße Karten mit weichem Schatten, Blau als Akzent,
   helle Seitenleiste. Dunkel: dasselbe in Anthrazit.                  */
:root[data-skin="klarheit"] {
  --bg: #f5f5f7;  --bg-sunken: #ececf0;  --bg-card: #ffffff;  --bg-card2: #f2f2f5;  --bg-card3: #e8e8ed;
  --border: #e3e3e8;  --border-strong: #d2d2d7;
  --text: #1d1d1f;  --text-muted: #6e6e73;  --text-subtle: #6e6e73;
  --brand: #0a6ee0;  --brand-hover: #085bba;  --brand-ink: #ffffff;
  --brand-soft: #e6f0fc;  --brand-softer: #f1f7fe;  --brand-line: #bad3f3;  --gold: #8a6c1c;
  --rail-bg: #ebebf0;  --rail-bg-2: #dcdce2;  --rail-line: #d8d8de;
  --rail-ink: #1d1d1f;  --rail-ink-dim: #48484a;  --rail-active: #0a6ee0;
  --viz-grid: #e8e8ed;  --viz-axis: #d2d2d7;  --viz-label: #6e6e73;  --viz-track: #ececf0;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
  --shadow:    0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.05);
  --shadow-md: 0 2px 6px rgba(0,0,0,.05), 0 12px 30px rgba(0,0,0,.08);
  --seg-track: #e3e3e8;  --seg-thumb: #ffffff;  --seg-schatten: 0 1px 3px rgba(0,0,0,.12);
  --radius: 22px;  --fw-link: #0a64cc;  --fw-ring: var(--brand);
  color-scheme: light;
}
:root[data-skin="klarheit"][data-theme="dark"] {
  --bg: #161618;  --bg-sunken: #101012;  --bg-card: #1f1f22;  --bg-card2: #2a2a2e;  --bg-card3: #343439;
  --border: #2e2e33;  --border-strong: #45454b;
  --text: #f5f5f7;  --text-muted: #a1a1a6;  --text-subtle: #8e8e93;
  --brand: #4aa3ff;  --brand-hover: #6db5ff;  --brand-ink: #001a33;
  --brand-soft: #16304d;  --brand-softer: #122236;  --brand-line: #24507f;  --gold: #d9b45a;
  --rail-bg: #1c1c1e;  --rail-bg-2: #2c2c2e;  --rail-line: #2a2a2d;
  --rail-ink: #f5f5f7;  --rail-ink-dim: #b5b5ba;  --rail-active: #4aa3ff;
  --viz-grid: #2c2c2e;  --viz-axis: #3a3a3c;  --viz-label: #98989d;  --viz-track: #2a2a2e;
  --shadow-xs: 0 1px 1px rgba(0,0,0,.4);
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35);
  --shadow-md: 0 2px 6px rgba(0,0,0,.45), 0 12px 30px rgba(0,0,0,.45);
  --seg-track: #2a2a2e;  --seg-thumb: #4a4a4f;  --seg-schatten: 0 1px 3px rgba(0,0,0,.4);
  --fw-link: #4aa3ff;
  color-scheme: dark;
}

/* ══ 2 · GRUPPEN ════════════════════════════════════════════════════
   Wie die iPhone-Einstellungen: gruppierte Listen, Kopfzeilen in kleinen
   Versalien, farbige Kästchen hinter den Bereichs-Symbolen.
   Dunkel ist die Hauptfassung (Tiefschwarz), Hell das Gegenstück.      */
:root[data-skin="gruppen"] {
  --bg: #f2f2f7;  --bg-sunken: #e5e5ea;  --bg-card: #ffffff;  --bg-card2: #f2f2f7;  --bg-card3: #e5e5ea;
  --border: #e5e5ea;  --border-strong: #c7c7cc;
  --text: #1c1c1e;  --text-muted: #6c6c70;  --text-subtle: #6c6c70;
  --brand: #0a6ee0;  --brand-hover: #085bba;  --brand-ink: #ffffff;
  --brand-soft: #e6f0fc;  --brand-softer: #f1f7fe;  --brand-line: #bad3f3;  --gold: #8a6c1c;
  --rail-bg: #f2f2f7;  --rail-bg-2: #e3e3e8;  --rail-line: #e0e0e5;
  --rail-ink: #1c1c1e;  --rail-ink-dim: #1c1c1e;  --rail-active: #0a6ee0;
  --viz-grid: #e5e5ea;  --viz-axis: #c7c7cc;  --viz-label: #6c6c70;  --viz-track: #e5e5ea;
  --shadow-xs: none;  --shadow: none;  --shadow-md: 0 4px 16px rgba(0,0,0,.08);
  --seg-track: #e3e3e8;  --seg-thumb: #ffffff;  --seg-schatten: 0 1px 3px rgba(0,0,0,.12);
  --q-cockpit: #0a84ff;  --q-portfolio: #ff9500;  --q-team: #28b446;
  --q-finanzen: #5e5ce6;  --q-wachstum: #1ca7c4;  --q-marketing: #ff375f;
  --radius: 14px;  --fw-pad: 18px;  --fw-link: #0a64cc;  --fw-ring: var(--fw-t-gewinn);  --fw-spark: var(--fw-t-umsatz);
  --fw-t-umsatz: #b25e00;  --fw-t-gewinn: #1e7e34;  --fw-t-auslastung: #0a64cc;  --fw-t-vergleich: #0b7285;  --fw-t-ust: #6a3fc8;
  color-scheme: light;
}
:root[data-skin="gruppen"][data-theme="dark"] {
  --bg: #000000;  --bg-sunken: #000000;  --bg-card: #1c1c1e;  --bg-card2: #2c2c2e;  --bg-card3: #3a3a3c;
  --border: #38383a;  --border-strong: #48484a;
  --text: #f5f5f7;  --text-muted: #a1a1a6;  --text-subtle: #98989d;
  --brand: #4aa3ff;  --brand-hover: #6db5ff;  --brand-ink: #001a33;
  --brand-soft: #10263d;  --brand-softer: #0c1a2a;  --brand-line: #1f4670;  --gold: #e0b552;
  --rail-bg: #000000;  --rail-bg-2: #2c2c2e;  --rail-line: #1c1c1e;
  --rail-ink: #f5f5f7;  --rail-ink-dim: #d1d1d6;  --rail-active: #4aa3ff;
  --viz-grid: #2c2c2e;  --viz-axis: #3a3a3c;  --viz-label: #98989d;  --viz-track: #2c2c2e;
  --shadow-xs: none;  --shadow: none;  --shadow-md: 0 4px 16px rgba(0,0,0,.6);
  --seg-track: #1c1c1e;  --seg-thumb: #636366;  --seg-schatten: none;
  --fw-link: #4aa3ff;
  --fw-t-umsatz: #ff9f0a;  --fw-t-gewinn: #32d74b;  --fw-t-auslastung: #4aa3ff;  --fw-t-vergleich: #5ad8e6;  --fw-t-ust: #bf8cff;
  color-scheme: dark;
}

/* ══ 3 · GLAS ═══════════════════════════════════════════════════════
   HAUS28 als Hintergrund, darüber Milchglas. Das Foto liegt fest hinter
   der Seite (body::before), ein Schleier hält die Schrift lesbar.
   Die Flächen-Tokens sind halbdurchsichtig: was auf --bg-card steht,
   liegt auf dem Glas.                                                  */
:root[data-skin="glas"] {
  --bg: #eef1ee;  --bg-sunken: rgba(255,255,255,.40);
  --bg-card: rgba(255,255,255,.68);  --bg-card2: rgba(255,255,255,.55);  --bg-card3: rgba(255,255,255,.82);
  --border: rgba(255,255,255,.72);  --border-strong: rgba(18,32,26,.20);
  --text: #12201a;  --text-muted: #3e4b44;  --text-subtle: #4f5b55;
  --brand: #1f5f3f;  --brand-hover: #174a31;  --brand-ink: #ffffff;
  --brand-soft: rgba(31,95,63,.12);  --brand-softer: rgba(31,95,63,.07);  --brand-line: rgba(31,95,63,.30);  --gold: #7a5a12;
  --rail-bg: rgba(255,255,255,.55);  --rail-bg-2: rgba(255,255,255,.75);  --rail-line: rgba(255,255,255,.60);
  --rail-ink: #12201a;  --rail-ink-dim: #33413a;  --rail-active: #1f5f3f;
  --viz-grid: rgba(18,32,26,.10);  --viz-axis: rgba(18,32,26,.20);  --viz-label: #4f5b55;  --viz-track: rgba(18,32,26,.08);
  --shadow-xs: 0 1px 2px rgba(18,32,26,.06);
  --shadow:    inset 0 1px 0 rgba(255,255,255,.6), 0 8px 28px rgba(18,32,26,.10);
  --shadow-md: inset 0 1px 0 rgba(255,255,255,.6), 0 14px 40px rgba(18,32,26,.16);
  --glas-schleier: linear-gradient(180deg, rgba(240,244,241,.62) 0%, rgba(240,244,241,.78) 45%, rgba(240,244,241,.92) 100%);
  --glas-schleier-arbeit: linear-gradient(rgba(240,244,241,.9), rgba(240,244,241,.9));
  --glas-flaeche: rgba(255,255,255,.35);
  --tooltip-grund: #f4f6f4;
  --radius: 28px;  --fw-link: var(--text);  --fw-ring: var(--brand);
  color-scheme: light;
}
:root[data-skin="glas"][data-theme="dark"] {
  --bg: #0b130e;  --bg-sunken: rgba(0,0,0,.25);
  --bg-card: rgba(16,22,18,.52);  --bg-card2: rgba(255,255,255,.08);  --bg-card3: rgba(255,255,255,.14);
  --border: rgba(255,255,255,.15);  --border-strong: rgba(255,255,255,.28);
  --text: #ffffff;  --text-muted: rgba(255,255,255,.80);  --text-subtle: rgba(255,255,255,.68);
  --brand: #ffffff;  --brand-hover: #e6ece7;  --brand-ink: #0d1410;
  --brand-soft: rgba(255,255,255,.14);  --brand-softer: rgba(255,255,255,.08);  --brand-line: rgba(255,255,255,.30);  --gold: #f2d48a;
  --rail-bg: rgba(10,16,12,.50);  --rail-bg-2: rgba(255,255,255,.14);  --rail-line: rgba(255,255,255,.12);
  --rail-ink: #ffffff;  --rail-ink-dim: rgba(255,255,255,.78);  --rail-active: #ffffff;
  --viz-grid: rgba(255,255,255,.12);  --viz-axis: rgba(255,255,255,.22);  --viz-label: rgba(255,255,255,.72);  --viz-track: rgba(255,255,255,.12);
  --shadow-xs: 0 1px 2px rgba(0,0,0,.25);
  --shadow:    inset 0 1px 0 rgba(255,255,255,.18), 0 10px 32px rgba(0,0,0,.28);
  --shadow-md: inset 0 1px 0 rgba(255,255,255,.22), 0 16px 44px rgba(0,0,0,.36);
  --glas-schleier: linear-gradient(180deg, rgba(8,14,10,.48) 0%, rgba(8,14,10,.66) 45%, rgba(8,14,10,.86) 100%);
  --glas-schleier-arbeit: linear-gradient(rgba(8,14,10,.88), rgba(8,14,10,.88));
  --glas-flaeche: rgba(10,16,12,.35);
  --tooltip-grund: #121a15;
  color-scheme: dark;
}

/* ══ 4 · BÜHNE ══════════════════════════════════════════════════════
   Wie eine Keynote: große Schrift, ein Gruß oben, Navigation als Leiste
   am oberen Rand (ab 1200 px), runde Knöpfe, der Monatsumsatz im
   Farbverlauf. Dunkel ist die Hauptfassung, Hell das Gegenstück. Die
   Schauzahlen (Gruß, Bänder, Umsatz) bekommen drei eigene Stufen über
   der Skala: --fs-4xl 48, --fs-5xl 64, --fs-6xl 96.                     */
:root[data-skin="buehne"] {
  --bg: #ffffff;  --bg-sunken: #f5f5f7;  --bg-card: #f5f5f7;  --bg-card2: #ebebef;  --bg-card3: #e2e2e7;
  --border: #e8e8ed;  --border-strong: #d2d2d7;
  --text: #1d1d1f;  --text-muted: #6e6e73;  --text-subtle: #6e6e73;
  --brand: #1d1d1f;  --brand-hover: #000000;  --brand-ink: #ffffff;
  --brand-soft: #ebebef;  --brand-softer: #f5f5f7;  --brand-line: #d2d2d7;  --gold: #8a6c1c;
  --rail-bg: rgba(255,255,255,.88);  --rail-bg-2: #ebebef;  --rail-line: #e8e8ed;
  --rail-ink: #1d1d1f;  --rail-ink-dim: #424245;  --rail-active: #1d1d1f;
  --viz-grid: #e8e8ed;  --viz-axis: #d2d2d7;  --viz-label: #6e6e73;  --viz-track: #ebebef;
  --shadow-xs: none;  --shadow: none;  --shadow-md: 0 8px 28px rgba(0,0,0,.08);
  --buehne-verlauf: linear-gradient(90deg, #a8761c 0%, #2f8f50 55%, #1f6fd0 100%);
  --radius: 24px;  --fw-pad: 26px;  --fw-link: #0a64cc;  --fw-ring: #2f8f50;  --fw-spark: #a8761c;
  --fs-4xl: 48px;  --fs-5xl: 64px;  --fs-6xl: 96px;
  color-scheme: light;
}
:root[data-skin="buehne"][data-theme="dark"] {
  --bg: #000000;  --bg-sunken: #0a0a0a;  --bg-card: #141414;  --bg-card2: #1f1f1f;  --bg-card3: #2a2a2a;
  --border: #262626;  --border-strong: #3a3a3a;
  --text: #f5f5f7;  --text-muted: #a1a1a6;  --text-subtle: #929297;
  --brand: #f5f5f7;  --brand-hover: #ffffff;  --brand-ink: #000000;
  --brand-soft: #1f1f1f;  --brand-softer: #141414;  --brand-line: #3a3a3a;  --gold: #f2c56b;
  --rail-bg: rgba(22,22,23,.90);  --rail-bg-2: #1f1f1f;  --rail-line: #1f1f1f;
  --rail-ink: #f5f5f7;  --rail-ink-dim: #c7c7cc;  --rail-active: #f5f5f7;
  --viz-grid: #262626;  --viz-axis: #3a3a3a;  --viz-label: #a1a1a6;  --viz-track: #1f1f1f;
  --shadow-xs: none;  --shadow: none;  --shadow-md: 0 8px 28px rgba(0,0,0,.6);
  --buehne-verlauf: linear-gradient(90deg, #f6d48a 0%, #9be3a8 55%, #6fc3ff 100%);
  --fw-link: #7cc0ff;  --fw-ring: #9be3a8;  --fw-spark: #f2c56b;
  color-scheme: dark;
}