/* Knopf des Hell/Dunkel-Umschalters (in der Kopfleiste rechts, sonst schwebend unten links; Farben aus den Variablen des Themes) */
.cm-toggle { position: fixed; left: 16px; bottom: 16px; z-index: 80; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line, #e2e8f0); background: var(--surface, #fff);
  color: var(--ink, #0f172a); box-shadow: 0 2px 10px rgba(15, 23, 42, .15); cursor: pointer; padding: 0; }
.cm-toggle:hover { border-color: var(--ink, #0f172a); }
.cm-toggle .cm-sun { display: none; }
:root[data-theme="dark"] .cm-toggle .cm-sun { display: block; }
:root[data-theme="dark"] .cm-toggle .cm-moon { display: none; }
/* eigener Knopf im Kopfbereich: gleiche Symbole, kein Schweben */
[data-colormode-toggle]:not(.cm-toggle) .cm-sun { display: none; }
:root[data-theme="dark"] [data-colormode-toggle]:not(.cm-toggle) .cm-sun { display: inline; }
:root[data-theme="dark"] [data-colormode-toggle]:not(.cm-toggle) .cm-moon { display: none; }
.cm-toggle[hidden] { display: none; }
/* in der Kopfleiste: klein, ohne Schatten, ohne Rahmen */
.cm-toggle.cm-inline { position: static; width: 40px; height: 40px; box-shadow: none; border-color: transparent; background: transparent; }
.cm-toggle.cm-inline:hover { background: var(--bg-alt, #f8fafc); border-color: transparent; }