/* Die dunkle Fassung des Hauses.
   =============================

   Eine Datei für alle Seiten statt zehnmal dieselbe Palette. Die hellen Werte
   bleiben, wo sie sind — hier steht ausschließlich, was im Dunkeln anders ist.

   Die Farben sind NICHT neu erfunden: Es sind Zeichen für Zeichen die der
   Sicherheitsseite, die als einzige von Anfang an dunkel war. Zwei dunkle
   Welten nebeneinander wären eine zu viel.

   WARUM DIE SEITEN TROTZDEM ANGEFASST WERDEN MUSSTEN: Sie hatten die dunkle
   Fassung schon vorgesehen — und dann mit den HELLEN Werten belegt
   (`:root, :root[data-theme="dark"], :root[data-theme="light"]`). Das war eine
   bewusste Festnagelung auf Hell. Sie ist jetzt gelöst; die Seiten führen nur
   noch ihre hellen Werte, das Dunkle steht hier. */

/* Schrift auf einer Fläche, die die Ink-Farbe trägt.

   In der hellen Welt ist Ink schwarz und die Schrift darauf weiß. Im Dunkeln
   ist Ink hell — dann muss die Schrift dunkel werden, sonst steht Weiß auf
   Weiß. Die Seiten hatten dafür ein festes `#fff` stehen; es ist überall dort
   durch diese Variable ersetzt, wo die Fläche WIRKLICH Ink ist.

   Ausdrücklich NICHT ersetzt wurde es auf roten Warnknöpfen: Rot bleibt Rot,
   und Weiß darauf bleibt in beiden Fassungen richtig. Eine pauschale Regel
   „alle Knöpfe" hätte genau die kaputtgemacht. */
:root, :root[data-theme="light"]{ --auf-ink:#FFFFFF; }

:root[data-theme="dark"]{
  --auf-ink:#0A0C10;
  --ground:#0A0C10; --hover:#1A212B; --surface:#11151B; --surface-2:#161B22;
  --ink:#E9EDF2; --muted:#8A95A6;
  --line:#1E242D; --line-strong:#2F3945;
  --today:#FF5C4D; --err:#FF5C4D; --warn:#F5A524;
  /* Grün muss im Dunkeln heller sein — das satte #177245 der hellen Fassung
     verschwindet auf #0A0C10 fast vollständig. */
  --gut:#3BE38B; --live:#3BE38B;
  --shadow:0 18px 48px rgba(0,0,0,.5);
  color-scheme: dark;
}

/* Das Logo trägt seine Farbe inline am <svg>. Ein Selektor auf die PFADE
   sticht das — eine Regel auf dasselbe Element täte es nicht. */
:root[data-theme="dark"] .logo path,
:root[data-theme="dark"] .logo polygon{ fill:var(--ink); }

/* Ein Häkchen steckt als weiße Zeichnung in einem eingebetteten Bild. An dessen
   Farbe lässt sich nichts nachträglich drehen — es muss neu geschrieben werden. */
:root[data-theme="dark"] .hak.an i{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230A0C10' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
}

/* Flächen, die irgendwo fest auf Weiß stehen. */
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .pkarte,
:root[data-theme="dark"] .karte,
:root[data-theme="dark"] .kachel{ background:var(--surface); }

/* Bilder und Logos von Kunden sind fast immer für hellen Grund gezeichnet.
   Ein leichter Aufheller unter ihnen ist ehrlicher, als sie im Dunkeln
   verschwinden zu lassen. */
:root[data-theme="dark"] .plogo img,
:root[data-theme="dark"] .kundelogo img{ background:#FFFFFF12; border-radius:4px; }

/* ---------- Der Umschalter ----------
   Sitzt in der Kopfzeile, links vom Profilbild. Er zeigt, WOHIN es geht:
   Mond im Hellen, Sonne im Dunkeln. Ein Knopf, der den Ist-Zustand zeigt,
   führt bei jedem zweiten Menschen zum falschen Klick. */
.themeknopf{
  width:34px;height:34px;flex:none;padding:0;border:0;border-radius:50%;
  background:none;color:var(--muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s,color .12s;
}
.themeknopf:hover{ background:var(--hover); color:var(--ink); }
.themeknopf:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.themeknopf svg{ width:18px;height:18px;display:block; }