/* CODISH Dasi – Aussehen aus dem Stylesheet der Website.
 *
 * Schrift, Textfarbe, Links, Überschrift, Knöpfe und Eingabefeld kommen aus
 * dem CSS der Website. Das Fenster bekommt den Seitenhintergrund und die
 * Textfarbe der Seite: dasi.js liest beide beim Laden aus (`--cn-hg`,
 * `--cn-vg`), auch bei Hell/Dunkel-Umschaltern. Die Akzentfarbe ist die
 * Hintergrundfarbe, die die Website dem Senden-Knopf gibt (`--cn-akzent`) –
 * die Option `knopf_klasse` (z. B. `btn`) gibt den Knöpfen dafür die
 * Knopfklasse der Website.
 *
 * ZWEI SORTEN REGELN
 * ------------------
 *   1. Erzwungen (normale Spezifität): nur was ein schwebendes Fenster
 *      braucht, um lesbar zu sein – deckender Hintergrund, Textfarbe,
 *      Rahmen, Schatten.
 *   2. Ersatzwerte in `:where(…)` – Spezifität 0. Jede Regel der Website
 *      für `button`, `textarea`, `a` oder die Knopfklasse schlägt sie. Sie
 *      greifen nur, wenn die Website selbst nichts festlegt.
 *
 * Grautöne entstehen aus der Textfarbe (`color-mix` mit currentColor) und
 * passen damit zu hellen und dunklen Websites gleichermaßen.
 *
 * Feinjustierung im Stylesheet der Website, z. B.
 * `.cn-theme .cn-win{border-radius:0}` oder `.cn-theme{--cn-akzent:#c00}`.
 */

.cn-theme{
  --cn-hg-wert:var(--cn-hg,Canvas);
  --cn-vg-wert:var(--cn-vg,CanvasText);
  --cn-akzent-wert:var(--cn-akzent,currentColor);
  color:var(--cn-vg-wert);
}

/* 1. Erzwungen: Flächen des Fensters */
.cn-theme .cn-win,
.cn-theme .cn-kopf,
.cn-theme .cn-form,
.cn-theme .cn-ds-text,
.cn-theme .cn-noscript{background-color:var(--cn-hg-wert);color:var(--cn-vg-wert)}

.cn-theme .cn-win{
  border:1px solid rgba(128,128,128,.35);
  border:1px solid color-mix(in srgb,currentColor 22%,transparent);
  border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.08);
}
.cn-theme .cn-kopf{border-bottom:1px solid rgba(128,128,128,.25);border-bottom:1px solid color-mix(in srgb,currentColor 14%,transparent)}
.cn-theme .cn-form{border-top:1px solid rgba(128,128,128,.25);border-top:1px solid color-mix(in srgb,currentColor 14%,transparent)}
.cn-theme .cn-ds-text,
.cn-theme .cn-noscript{border:1px solid rgba(128,128,128,.35);border:1px solid color-mix(in srgb,currentColor 22%,transparent);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.14)}

/* Die Überschrift behält Schrift und Gewicht des Websites – nur die Größe
   bleibt fensterfreundlich (eine Website-h2 ist oft 2,5rem groß) */
.cn-theme .cn-titel-symbol{color:var(--cn-akzent-wert)}

/* Nachrichten: Flächen aus der Textfarbe getönt */
.cn-theme .cn-msg{border-radius:8px}
.cn-theme .cn-msg-bot{background:rgba(128,128,128,.08);background:color-mix(in srgb,currentColor 6%,transparent);border:1px solid rgba(128,128,128,.2);border:1px solid color-mix(in srgb,currentColor 12%,transparent)}
.cn-theme .cn-msg-ich{background:rgba(128,128,128,.14);background:color-mix(in srgb,var(--cn-akzent-wert) 12%,transparent);border:1px solid rgba(128,128,128,.3);border:1px solid color-mix(in srgb,var(--cn-akzent-wert) 40%,transparent)}
.cn-theme .cn-msg-laedt::after{background:var(--cn-akzent-wert)}

/* Fehlermeldung: nicht nur über Farbe – fett und mit Randstrich, lesbar auf
   hellen wie dunklen Websites */
.cn-theme .cn-fehler{font-weight:600;border-left:3px solid #d63638;padding-left:8px}
.cn-theme .cn-fld textarea[aria-invalid="true"]{border-color:#d63638}

/* 2. Ersatzwerte mit Spezifität 0 – das Website gewinnt immer */

:where(.cn-theme) :where(.cn-opener,.cn-senden){
  padding:.75em 1.25em;border:0;border-radius:4px;
  background-color:var(--cn-vg-wert);color:var(--cn-hg-wert);
  font:inherit;font-weight:600;line-height:1.2;
}
:where(.cn-theme) :where(.cn-opener){box-shadow:0 6px 20px rgba(0,0,0,.2)}
:where(.cn-theme) :where(.cn-senden:disabled){opacity:.55;cursor:not-allowed}

/* Nebenknöpfe (Schließen, Datenschutz) zurückhaltend – Websites gestalten
   jeden <button> gern als Hauptknopf */
.cn-theme .cn-zu,
.cn-theme .cn-ds-knopf{
  background:transparent;color:inherit;box-shadow:none;text-shadow:none;
  border:1px solid rgba(128,128,128,.4);border:1px solid color-mix(in srgb,currentColor 30%,transparent);
  border-radius:4px;font-weight:400;text-transform:none;letter-spacing:normal;
}
.cn-theme .cn-zu:hover,.cn-theme .cn-zu:focus-visible,
.cn-theme .cn-ds-knopf:hover,.cn-theme .cn-ds-knopf:focus-visible{border-color:currentColor;background:transparent;color:inherit}

:where(.cn-theme .cn-fld textarea){
  background-color:transparent;color:inherit;
  border:1px solid rgba(128,128,128,.6);border:1px solid color-mix(in srgb,currentColor 45%,transparent);
  border-radius:4px;padding:.75em .875em;
}
:where(.cn-theme .cn-fld textarea)::placeholder{color:inherit;opacity:.7}
:where(.cn-theme) :where(button:focus-visible,textarea:focus-visible,a:focus-visible){outline:2px solid currentColor;outline-offset:2px}
:where(.cn-theme) :where(a){color:inherit;text-decoration:underline;text-underline-offset:3px}