/* ===========================================================================
   hai-chat-skin.css — Chat-Skin fuer XIMA FORMCYCLE (haiFORMS)

   Greift AUSSCHLIESSLICH unter html.hai-chat-embed.hai-chat-embed. Diese Klasse setzt
   hai-chat-skin.js, und zwar nur, wenn <hai-chat> das Formular einbettet.
   Ohne die Klasse ist diese Datei wirkungslos — das Formular auf der
   Kassen-Website bleibt exakt wie heute.

   Geschrieben gegen das echte Markup von formulare.bkkpfalz.de
   (Kontaktformular, Formular-ID 4117, geprueft 2026-09-25):
     Feldrumpf : div.xm-item-div.label-top.CXTextField.ctf<Name>
     Bedienteil: input|select|textarea.XItem
     Beschriftg: label.label-top > span.block (+ span.required-star)
     Fehler    : div.xm-error-container > … > div.xm-error-text
     Absenden  : button.XSubmit.submit.btnSubmit
     Versteckt : .xm-hidden { display:none !important }

   ZWEI REGELN BEIM AENDERN:
   1. NIE display pauschal auf .xm-item-div setzen. .xm-hidden versteckt
      mit !important bei Spezifitaet (0,1,0) — eine Regel mit hoeherer
      Spezifitaet und !important wuerde bedingt ausgeblendete Felder
      SICHTBAR machen. Deshalb wird hier nur width erzwungen.
   2. !important nur gegen Inline-Styles (FORMCYCLE schreibt Feldbreiten
      inline ins Markup). Sonst reicht die Spezifitaet.
   3. Die Klasse .hai-chat-embed steht in JEDEM Selektor DOPPELT. Das ist
      kein Versehen: Es hebt die Spezifitaet um eine Stelle, ohne !important
      und ohne das Markup anzufassen. Grund — die Kassen-Themes setzen
      Feldregeln mit (0,3,1), z. B.
          .modern input.XItem.XTextField { border-radius: 20px }
      Mit nur einer Klasse waere der Skin gleichauf, und dann entschiede die
      Ladereihenfolge: Wer die CSS nicht ans ENDE der zuletzt geladenen
      form.css setzt, saehe das halb angewandt (Schrift ja, Ecken nein).
      Doppelt gesetzt gewinnt der Skin unabhaengig von der Einfuegestelle.
   4. KEINE Backticks in den Kommentaren. Diese Datei wird zum Ausprobieren
      in ein JS-Template-Literal eingefuegt (README, Abschnitt Vorschau) —
      ein Backtick wuerde es dort still beenden.
   =========================================================================== */

html.hai-chat-embed.hai-chat-embed {
  /* Fallbacks. Der Chat ueberschreibt sie per URL-Parameter mit seinen
     eigenen Tokens (auch im Dunkelmodus) — hier stehen nur Notwerte. */
  --hai-accent: #008c95;
  --hai-text: #00101e;
  --hai-muted: #5f6f7a;
  --hai-bg: #ffffff;
  --hai-surf: #eef4f7;
  --hai-border: #d9e2e7;
  --hai-warn: #b11122;
  --hai-font: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --hai-radius: 12px;
}

/* --- 1. Die Fassung faellt weg -------------------------------------------
   Der Chat zeigt schon einen Rahmen mit Titel. Alles, was das Formular als
   eigene SEITE markiert (grauer Seitenhintergrund, weisse Blattflaeche,
   50 px Seitenrand), wird hier neutralisiert. Uebrig bleibt der Inhalt. */
html.hai-chat-embed.hai-chat-embed,
html.hai-chat-embed.hai-chat-embed body.modern {
  background: transparent;
  margin: 0;
}
html.hai-chat-embed.hai-chat-embed .xm-form.modern,
html.hai-chat-embed.hai-chat-embed .modern .CXPage,
html.hai-chat-embed.hai-chat-embed .modern .XPage,
html.hai-chat-embed.hai-chat-embed .modern .XFieldSet {
  background: transparent;
}
html.hai-chat-embed.hai-chat-embed .modern .XPage {
  padding: 0;
}
html.hai-chat-embed.hai-chat-embed .modern .XHeader,
html.hai-chat-embed.hai-chat-embed .modern .XFooter {
  padding: 0;
}
html.hai-chat-embed.hai-chat-embed .modern .CXPage .header {
  padding: 0 0 0.75rem;
  background: transparent;
  border-bottom-color: var(--hai-border);
}

/* --- 2. Schrift und Farben aus dem Chat ----------------------------------
   Breite Grundregel fuer alles, was erbt (Fliesstext in Hinweisfeldern usw.). */
html.hai-chat-embed.hai-chat-embed .xm-form.modern,
html.hai-chat-embed.hai-chat-embed .xm-form.modern *,
html.hai-chat-embed.hai-chat-embed .modern .XPage * {
  font-family: var(--hai-font);
}

/* Und dieselbe Elementliste noch einmal mit !important.
   GRUND (gemessen am BKK-Pfalz-Theme 2026-09-25): Das Theme der Kasse setzt in
   seiner eigenen form.css bereits
       .modern h1 … .modern legend { font-family: … !important }
   Gegen !important hilft keine Spezifitaet und keine Ladereihenfolge — nur
   ebenfalls !important. Die Liste ist bewusst die GLEICHE wie dort, damit
   nichts Zusaetzliches getroffen wird.
   ::before/::after sind NICHT dabei: Dort steht FontAwesomeCB fuer die
   Symbole (Hilfe, Fehler, Ankreuzfelder) — eine eigene Deklaration am
   Pseudo-Element schlaegt jede Vererbung, die Symbole bleiben also heil.
   span:not(.ui-icon) ist aus demselben Grund uebernommen.

   BEI ANDEREN KASSEN PRUEFEN: Jedes Kassen-Theme bringt eigene
   !important-Regeln mit. Welche das sind, zeigt im Browser der Reiter
   „Elemente" (durchgestrichene Eigenschaften) — siehe README, Abschnitt
   „Grenzen". */
html.hai-chat-embed.hai-chat-embed .xm-form.modern h1,
html.hai-chat-embed.hai-chat-embed .xm-form.modern h2,
html.hai-chat-embed.hai-chat-embed .xm-form.modern h3,
html.hai-chat-embed.hai-chat-embed .xm-form.modern h4,
html.hai-chat-embed.hai-chat-embed .xm-form.modern h5,
html.hai-chat-embed.hai-chat-embed .xm-form.modern h6,
html.hai-chat-embed.hai-chat-embed .xm-form.modern p,
html.hai-chat-embed.hai-chat-embed .xm-form.modern label,
html.hai-chat-embed.hai-chat-embed .xm-form.modern input,
html.hai-chat-embed.hai-chat-embed .xm-form.modern button,
html.hai-chat-embed.hai-chat-embed .xm-form.modern div,
html.hai-chat-embed.hai-chat-embed .xm-form.modern span:not(.ui-icon),
html.hai-chat-embed.hai-chat-embed .xm-form.modern option,
html.hai-chat-embed.hai-chat-embed .xm-form.modern select,
html.hai-chat-embed.hai-chat-embed .xm-form.modern textarea,
html.hai-chat-embed.hai-chat-embed .xm-form.modern li,
html.hai-chat-embed.hai-chat-embed .xm-form.modern a,
html.hai-chat-embed.hai-chat-embed .xm-form.modern legend,
html.hai-chat-embed.hai-chat-embed body.xfc-template-body {
  font-family: var(--hai-font) !important;
}
/* Textfarbe. Die Elementliste entspricht wieder der des Kassen-Themes
   (color: var(--heavy-black) an derselben Stelle) — sonst faerbt sich zwar
   das label, aber nicht das span darin, und die Beschriftung bliebe alt. */
html.hai-chat-embed.hai-chat-embed .xm-form.modern label,
html.hai-chat-embed.hai-chat-embed .xm-form.modern legend,
html.hai-chat-embed.hai-chat-embed .xm-form.modern p,
html.hai-chat-embed.hai-chat-embed .xm-form.modern li,
html.hai-chat-embed.hai-chat-embed .xm-form.modern div,
html.hai-chat-embed.hai-chat-embed .xm-form.modern span:not(.ui-icon):not(.required-star),
html.hai-chat-embed.hai-chat-embed .xm-form .xm-item-div .XSpan {
  color: var(--hai-text);
}
html.hai-chat-embed.hai-chat-embed .xm-form.modern a {
  color: var(--hai-accent);
}
html.hai-chat-embed.hai-chat-embed .xm-form .xm-item-div label {
  /* 12 px fett war fuer eine Seite gedacht; im Chat liest sich 13 px
     halbfett ruhiger und bleibt ueber dem BITV-Mindestkontrast. */
  font-size: 0.8125rem;
  font-weight: 600;
  /* Das Kassen-Theme setzt hier !important (Pfalz), daher ebenso. */
  margin-bottom: 0.3rem !important;
}
html.hai-chat-embed.hai-chat-embed .xm-form .xm-item-div span.required-star {
  color: var(--hai-warn);
  font-weight: 600;
}

/* --- 3. Die Bedienelemente ------------------------------------------------ */
html.hai-chat-embed.hai-chat-embed .xm-form .XItem {
  color: var(--hai-text);
}
html.hai-chat-embed.hai-chat-embed .xm-form .modern .XTextField,
html.hai-chat-embed.hai-chat-embed .xm-form .XTextField,
html.hai-chat-embed.hai-chat-embed .xm-form .XTextArea,
html.hai-chat-embed.hai-chat-embed .xm-form .XSelect,
html.hai-chat-embed.hai-chat-embed .xm-form .XFieldSetWrapper {
  background: var(--hai-bg);
  border-color: var(--hai-border);
  border-radius: var(--hai-radius);
  padding: 0.55rem 0.7rem;
  font-size: 0.95rem;
  /* Bewusst ohne feste Hoehe: Formularzeilen wachsen mit dem Inhalt, und
     FORMCYCLE rechnet die Rahmenhoehe selbst aus (ResizeObserver). */
}
html.hai-chat-embed.hai-chat-embed .xm-form .XSelect.XCheckbox,
html.hai-chat-embed.hai-chat-embed .xm-form .XSelect.XRadio {
  background: transparent;
  border: 0;
  padding: 0.15rem 0;
}
html.hai-chat-embed.hai-chat-embed .xm-form .XItem::placeholder {
  color: var(--hai-muted);
}

/* Nachzuege gegen Kassen-Themes mit hoeherer Spezifitaet.
   Gemessen am BKK-Pfalz-Theme (2026-09-25); die getroffenen Klassen sind
   FORMCYCLE-Standard, die Regeln gelten also nicht nur fuer diese Kasse:
     .modern .XItem.XSelect.XDropDown              (0,4,0) — Auswahlliste
     .modern .xm-item-div.CXHeader/.CXFooter       (0,3,0) — Kopf-/Fussflaeche
     .CXCheckbox:focus-within u. a.                (0,2,0) — Fokusflaeche */
html.hai-chat-embed.hai-chat-embed .xm-form .XItem.XSelect.XDropDown {
  background-color: var(--hai-bg);
  border: 1px solid var(--hai-border);
  border-radius: var(--hai-radius);
  padding: 0.55rem 0.7rem;
}
html.hai-chat-embed.hai-chat-embed .xm-form .xm-item-div.CXHeader,
html.hai-chat-embed.hai-chat-embed .xm-form .xm-item-div.CXFooter {
  background-color: transparent;
}
html.hai-chat-embed.hai-chat-embed .xm-form .CXCheckbox:focus-within,
html.hai-chat-embed.hai-chat-embed .xm-form .CXSelect .XSelect.XRadio:focus-within,
html.hai-chat-embed.hai-chat-embed .xm-form .CXSelect .XSelect.XCheckbox:focus-within {
  background-color: var(--hai-surf);
}

/* --- 4. Fokus und Fehler (BITV 2.0 / EN 301 549) --------------------------
   Der Bestand zeichnet den Fokus nur als 1-px-Rahmen in Blau — zu leise und
   an manchen Kassenfarben zu kontrastarm. Hier ein eigener Ring, der nicht
   vom Rahmen abhaengt und den Kontrast der Akzentfarbe mitnimmt.
   Das ist der Punkt, an dem der Skin die Barrierefreiheit VERBESSERT
   (siehe P-22) und nicht nur umlackiert. */
html.hai-chat-embed.hai-chat-embed .xm-form .XItem:focus:not(:disabled),
html.hai-chat-embed.hai-chat-embed .xm-form .XItem:focus-visible:not(:disabled) {
  outline: 2px solid var(--hai-accent);
  outline-offset: 2px;
  border-color: var(--hai-accent);
  background-color: var(--hai-bg);
}
html.hai-chat-embed.hai-chat-embed .xm-form .xm-item-div.error > label,
html.hai-chat-embed.hai-chat-embed .xm-form .xm-item-div.error > .XItem,
html.hai-chat-embed.hai-chat-embed .xm-form .xm-error-text {
  color: var(--hai-warn);
}
html.hai-chat-embed.hai-chat-embed .xm-form div.xm-item-div.error > .XItem {
  border-color: var(--hai-warn);
}
/* Fehlerhaftes Feld MIT Fokus. FORMCYCLE hat dafuer eine eigene Regel mit
   Spezifitaet (0,6,0) und festem Rot — ohne diesen Nachzug bliebe der
   Fokusring aus und die Farbe passte im Dunkelmodus nicht. */
html.hai-chat-embed.hai-chat-embed .error-static-view .xm-item-div.error > .XItem:focus,
html.hai-chat-embed.hai-chat-embed .error-static-view .dynamic-row.error > .XItem:focus {
  border-color: var(--hai-warn);
  box-shadow: none;
  outline: 2px solid var(--hai-warn);
  outline-offset: 2px;
}
html.hai-chat-embed.hai-chat-embed .xm-form .xm-item-div .xm-error-icon:before,
html.hai-chat-embed.hai-chat-embed .xm-form .xm-item-div .xm-del-button-icon {
  color: var(--hai-warn);
}
html.hai-chat-embed.hai-chat-embed .xm-form .xm-help-icon:before {
  color: var(--hai-accent);
}

/* --- 5. Der Absende-Button ------------------------------------------------
   Es bleibt DERSELBE Button (button.XSubmit[name=btnSubmit], type=submit) —
   nur anders angezogen. Der FORMCYCLE-Workflow dahinter merkt keinen
   Unterschied. Der Bestandswert font-size: 34px stammt aus dem
   Seiten-Layout und ist im Chat unbrauchbar. */
html.hai-chat-embed.hai-chat-embed .xm-form .XButtonList {
  background: var(--hai-accent);
  color: var(--hai-bg);
  border: 1px solid var(--hai-accent);
  border-radius: var(--hai-radius);
  padding: 0.6rem 1.1rem;
  /* .modern .XButtonList { font-size: 18px !important } im Kassen-Theme. */
  font-size: 0.95rem !important;
  font-weight: 700;
  line-height: 1.2;
}
html.hai-chat-embed.hai-chat-embed .xm-form .XButtonList:hover,
html.hai-chat-embed.hai-chat-embed .xm-form .XButtonList:focus-visible {
  background: var(--hai-accent);
  color: var(--hai-bg);
  filter: brightness(0.93);
}
html.hai-chat-embed.hai-chat-embed .xm-form .XButtonList:focus-visible {
  outline: 2px solid var(--hai-accent);
  outline-offset: 2px;
}
html.hai-chat-embed.hai-chat-embed .xm-form .modern .XSubmit:disabled,
html.hai-chat-embed.hai-chat-embed .xm-form .XSubmit:disabled {
  filter: grayscale(1);
  opacity: 0.6;
}
html.hai-chat-embed.hai-chat-embed .xm-form .xm-item-div.CXButtonList {
  padding-left: 0;
  padding-right: 0;
}

/* --- 6. Schmaler Rahmen ---------------------------------------------------
   Der iFrame ist so breit wie das Chat-Panel, also greift eine ganz normale
   Medienabfrage. Unter 560 px stehen Felder untereinander statt nebeneinander:
   FORMCYCLE schreibt width:50% INLINE ins Markup, deshalb hier !important.
   display bleibt unangetastet — sonst wuerde .xm-hidden ueberstimmt
   (siehe Kopf dieser Datei). inline-table mit 100 % stapelt von selbst. */
@media (max-width: 560px) {
  html.hai-chat-embed.hai-chat-embed .xm-form .xm-form-row > .xm-item-div,
  html.hai-chat-embed.hai-chat-embed .xm-form .xm-item-div {
    width: 100% !important;
  }
  html.hai-chat-embed.hai-chat-embed .xm-form div.xm-item-div {
    padding: 0 0 0.7rem;
  }
  html.hai-chat-embed.hai-chat-embed .xm-form .xm-form-row {
    padding-right: 0;
  }
}

/* --- 7. Dunkelmodus: haerter eingreifen -----------------------------------
   Hier ist !important unvermeidlich, und zwar aus einem inhaltlichen Grund:
   In den Rich-Text-Bausteinen der Formulare stehen fest eingetippte Farben
   (im BKK-Pfalz-Kontaktformular z. B. <span style="color:black"> in der
   Ueberschrift). Die stammen aus dem FORMCYCLE-Editor, sind INLINE gesetzt
   und damit durch nichts ausser !important erreichbar.

   Warum das im Dunkelmodus richtig und im Hellmodus falsch waere:
   Eine fest eingetippte Farbe wurde immer fuer einen hellen Hintergrund
   gewaehlt. Im Hellmodus ist sie also gewollt und bleibt unangetastet. Im
   Dunkelmodus ist sie unlesbar — dort wiegt Lesbarkeit (BITV 1.4.3,
   Mindestkontrast) schwerer als die Farbwahl des Redakteurs.

   Sauberer waere, die Inline-Farben im Formular zu entfernen. Bis dahin
   traegt dieser Block die Last. */
html.hai-chat-embed.hai-chat-embed.hai-chat-dark .xm-form.modern label,
html.hai-chat-embed.hai-chat-embed.hai-chat-dark .xm-form.modern legend,
html.hai-chat-embed.hai-chat-embed.hai-chat-dark .xm-form.modern p,
html.hai-chat-embed.hai-chat-embed.hai-chat-dark .xm-form.modern li,
html.hai-chat-embed.hai-chat-embed.hai-chat-dark .xm-form.modern h1,
html.hai-chat-embed.hai-chat-embed.hai-chat-dark .xm-form.modern h2,
html.hai-chat-embed.hai-chat-embed.hai-chat-dark .xm-form.modern h3,
html.hai-chat-embed.hai-chat-embed.hai-chat-dark .xm-form.modern h4,
html.hai-chat-embed.hai-chat-embed.hai-chat-dark .xm-form.modern h5,
html.hai-chat-embed.hai-chat-embed.hai-chat-dark .xm-form.modern h6,
html.hai-chat-embed.hai-chat-embed.hai-chat-dark .xm-form.modern strong,
html.hai-chat-embed.hai-chat-embed.hai-chat-dark .xm-form.modern span:not(.ui-icon):not(.required-star) {
  color: var(--hai-text) !important;
}
html.hai-chat-embed.hai-chat-embed.hai-chat-dark .xm-form.modern span.required-star {
  color: var(--hai-warn) !important;
}
html.hai-chat-embed.hai-chat-embed.hai-chat-dark .xm-form.modern a {
  color: var(--hai-accent) !important;
}
/* Fehlertexte stehen auf farbiger Flaeche und muessen hell bleiben. */
html.hai-chat-embed.hai-chat-embed.hai-chat-dark .xm-form .xm-error-text,
html.hai-chat-embed.hai-chat-embed.hai-chat-dark .xm-form .xm-error-text span {
  color: #ffffff !important;
}

/* --- 8. Wahlweise: noch ruhiger ------------------------------------------
   Zum Einschalten die Kommentarzeichen entfernen. Beides ist Geschmackssache
   und je Kasse zu entscheiden — deshalb standardmaessig AUS:

   (a) Kopfbereich des Formulars ausblenden. Sinnvoll, wenn dort nur der
       Formulartitel steht (den zeigt der Chat schon). NICHT einschalten,
       wenn im Kopf erklaerender Text steht — der ginge verloren.

   html.hai-chat-embed.hai-chat-embed .xm-form .xm-item-div.CXHeader { display: none; }

   (b) FORMCYCLE-Hinweis am Fuss ausblenden. Vorher die Lizenzbedingungen
       der eigenen FORMCYCLE-Installation pruefen.

   html.hai-chat-embed.hai-chat-embed .xm-form .xm-logo { display: none; }
*/