/* Bilanzo Support-Chat, Hausstil bilanzo.ch, Fibonacci-Abstaende (3 5 8 13 21 34 55 89 144 233 377). */
.blz-chat2, .blz-chat2 * { box-sizing: border-box; }
.blz-chat2 {
  --blz-cta: #2563EB; --blz-cta-hover: #1D4ED8; --blz-blue: #1BAAC8; --blz-blue-dark: #0C2D56;
  --blz-slate: #0F172A; --blz-text: #111111; --blz-muted: #5B6472; --blz-cream: #F7F6F0; --blz-cream-mid: #EEF4F8;
  --blz-white: #ffffff; --blz-line: #DCE3EA; --blz-ok: #16A34A; --blz-off: #9AA3AF; --blz-warn: #B8900A; --blz-link: #2563EB;
  --f3: 3px; --f5: 5px; --f8: 8px; --f13: 13px; --f21: 21px; --f34: 34px; --f55: 55px; --f89: 89px;
  --blz-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --blz-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
  position: fixed; right: var(--f21); bottom: var(--f89); z-index: 99999;
  /* Das Fenster waechst mit seinem Inhalt (Besitzer 23.09.2026: es stand vorher zu zwei
     Dritteln leer, gemessen 610 px Fenster gegen 458 px Inhalt). height:auto, dazu eine
     Untergrenze, damit es nie winzig wirkt, und die alte Hoehe als Deckel. Weil das Fenster
     unten verankert ist, waechst es nach oben. */
  width: 377px; max-width: calc(100vw - 2 * var(--f13));
  height: auto; min-height: 233px; max-height: min(610px, calc(100vh - 110px));
  font-family: var(--blz-sans); font-size: 15px; line-height: 1.45; color: var(--blz-text);
}
.blz-chat2[hidden] { display: none; }
.blz-chat2__fenster {
  position: relative; display: flex; flex-direction: column; height: 100%; background: var(--blz-white);
  border-radius: var(--f21); box-shadow: 0 var(--f13) var(--f55) rgba(12, 45, 86, .22), 0 0 0 1px rgba(12, 45, 86, .06);
  overflow: hidden;
}
.blz-chat2__kopf {
  display: flex; align-items: center; gap: var(--f8); min-height: var(--f55); padding: var(--f8) var(--f13) var(--f8) var(--f21);
  background: linear-gradient(135deg, var(--blz-blue-dark) 0%, #0C5A7A 55%, var(--blz-blue) 100%); color: var(--blz-white);
}
.blz-chat2__kopf-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.blz-chat2__kopf-text strong { font-family: var(--blz-display); font-size: 16px; font-weight: 700; letter-spacing: .01em; }
.blz-chat2__kopf-text span { font-size: 12px; opacity: .85; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blz-chat2__neu, .blz-chat2__zu, .blz-chat2__faq-knopf, .blz-chat2__thema {
  width: var(--f34); height: var(--f34); border: 0; border-radius: 50%; background: rgba(12,45,86,.45); color: var(--blz-white);
  font-size: 21px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .15s;
}
.blz-chat2__neu { font-size: 18px; }
.blz-chat2__faq-knopf { font-family: var(--blz-display); font-weight: 700; font-size: 18px; }
.blz-chat2 .blz-chat2__faq-knopf[aria-expanded="true"], .blz-chat2 .blz-chat2__faq-knopf[aria-expanded="true"]:hover { background: var(--blz-white); color: var(--blz-blue-dark); }
.blz-chat2__neu:hover, .blz-chat2__zu:hover, .blz-chat2__faq-knopf:hover, .blz-chat2__thema:hover { background: rgba(12,45,86,.7); }
.blz-chat2__thema .blz-chat2__sonne { display: none; }
.blz-chat2[data-thema="dunkel"] .blz-chat2__thema .blz-chat2__sonne { display: block; }
.blz-chat2[data-thema="dunkel"] .blz-chat2__thema .blz-chat2__mond { display: none; }
.blz-chat2__verlauf { flex: 1; overflow-y: auto; padding: var(--f13) var(--f13) var(--f8); background: var(--blz-cream); display: flex; flex-direction: column; gap: var(--f8); scroll-behavior: smooth; }

/* Blasen */
.blz-chat2__zeile { display: flex; gap: var(--f8); align-items: flex-end; max-width: 100%; }
.blz-chat2__zeile--kunde { flex-direction: row-reverse; }
.blz-chat2__avatar {
  flex: 0 0 var(--f34); width: var(--f34); height: var(--f34); border-radius: 50%; display: grid; place-items: center;
  font-family: var(--blz-display); font-weight: 700; font-size: 13px; color: var(--blz-white); background: var(--blz-blue-dark);
}
.blz-chat2__avatar--verena { background: #0C7A96; }
.blz-chat2__avatar--juergen { background: #1E2D42; }
.blz-chat2__avatar--system { background: #0C7A96; }
.blz-chat2__blase {
  max-width: calc(100% - var(--f55)); padding: var(--f8) var(--f13); border-radius: var(--f13); background: var(--blz-white);
  box-shadow: 0 1px var(--f3) rgba(12,45,86,.08); white-space: pre-wrap; word-wrap: break-word;
}
.blz-chat2__zeile--kunde .blz-chat2__blase { background: var(--blz-cta); color: var(--blz-white); border-bottom-right-radius: var(--f3); }
.blz-chat2__zeile--ki .blz-chat2__blase { border-bottom-left-radius: var(--f3); }
.blz-chat2__zeile--system .blz-chat2__blase { background: var(--blz-cream-mid); color: var(--blz-slate); font-size: 13px; }
.blz-chat2__wer { display: block; font-size: 11px; color: var(--blz-muted); margin-bottom: var(--f3); }
.blz-chat2__zeile--kunde .blz-chat2__wer { color: rgba(255,255,255,.8); text-align: right; }
.blz-chat2__quellen { margin: var(--f8) 0 0; padding: 0; list-style: none; font-size: 12px; }
.blz-chat2__quellen li { margin-top: var(--f3); }
.blz-chat2__quellen a { color: var(--blz-cta); text-decoration: underline; }
.blz-chat2__tippt { display: inline-flex; gap: var(--f3); align-items: center; font-size: 12px; color: var(--blz-muted); padding: var(--f5) var(--f8); }
.blz-chat2__tippt i { width: var(--f5); height: var(--f5); border-radius: 50%; background: var(--blz-blue); animation: blzPunkt 1.2s infinite; }
.blz-chat2__tippt i:nth-child(2) { animation-delay: .2s; } .blz-chat2__tippt i:nth-child(3) { animation-delay: .4s; }
@keyframes blzPunkt { 0%, 80%, 100% { opacity: .25 } 40% { opacity: 1 } }

/* Karten: E-Mail, Kundenberater, Auswahl */
.blz-chat2__karte { background: var(--blz-white); border-radius: var(--f13); padding: var(--f13); box-shadow: 0 1px var(--f3) rgba(12,45,86,.08); display: flex; flex-direction: column; gap: var(--f8); }
.blz-chat2__karte p { margin: 0; }
.blz-chat2__karte--berater { border-left: var(--f5) solid var(--blz-blue); }
.blz-chat2__feld { display: flex; gap: var(--f5); }
.blz-chat2__feld input {
  flex: 1; min-width: 0; height: var(--f34); padding: 0 var(--f13); border: 1px solid var(--blz-line); border-radius: var(--f8);
  font: inherit; font-size: 15px; color: var(--blz-text); background: var(--blz-white);
}
.blz-chat2__feld input:focus { outline: 2px solid var(--blz-cta); outline-offset: 1px; border-color: var(--blz-cta); }
.blz-chat2__feld input[aria-invalid="true"] { border-color: #DC2626; }
.blz-chat2__knopf-cta {
  height: var(--f34); padding: 0 var(--f13); border: 0; border-radius: var(--f8); background: var(--blz-cta); color: var(--blz-white);
  font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s;
}
.blz-chat2__knopf-cta:hover { background: var(--blz-cta-hover); }
.blz-chat2__knopf-cta:disabled { opacity: .55; cursor: wait; }
.blz-chat2__fehler { color: #B91C1C; font-size: 13px; margin: 0; }
.blz-chat2__klein { font-size: 12px; color: var(--blz-muted); margin: 0; }
.blz-chat2__klein a { color: var(--blz-muted); text-decoration: underline; }
.blz-chat2__person { display: flex; align-items: center; gap: var(--f8); }
.blz-chat2__person-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.blz-chat2__person-text strong { font-size: 15px; }
.blz-chat2__person-text small { font-size: 12px; color: var(--blz-muted); }
.blz-chat2__status { display: inline-flex; align-items: center; gap: var(--f5); font-size: 12px; color: var(--blz-muted); white-space: nowrap; }
.blz-chat2__status::before { content: ""; width: var(--f8); height: var(--f8); border-radius: 50%; background: var(--blz-off); }
.blz-chat2__status--online::before { background: var(--blz-ok); box-shadow: 0 0 0 var(--f3) rgba(22,163,74,.18); }
.blz-chat2__wahl { display: flex; gap: var(--f8); flex-wrap: wrap; }
.blz-chat2__wahl button {
  flex: 1 1 auto; min-height: var(--f34); padding: var(--f5) var(--f13); border: 1px solid var(--blz-cta); border-radius: var(--f8);
  background: var(--blz-white); color: var(--blz-cta); font: inherit; font-weight: 600; cursor: pointer; transition: background .15s, color .15s;
}
.blz-chat2__wahl button:hover { background: var(--blz-cta); color: var(--blz-white); }
.blz-chat2__wahl button.blz-chat2__wahl--voll { background: var(--blz-cta); color: var(--blz-white); }
.blz-chat2__wahl button.blz-chat2__wahl--voll:hover { background: var(--blz-cta-hover); }
.blz-chat2__wahl button:disabled { opacity: .5; cursor: default; }
.blz-chat2__personen { display: flex; flex-direction: column; gap: var(--f5); }
.blz-chat2__personen button {
  display: flex; align-items: center; gap: var(--f8); text-align: left; padding: var(--f8); border: 1px solid var(--blz-line); border-radius: var(--f13);
  background: var(--blz-white); font: inherit; color: var(--blz-text); cursor: pointer; transition: border-color .15s, background .15s;
}
.blz-chat2__personen button:hover { border-color: var(--blz-cta); background: var(--blz-cream-mid); }
.blz-chat2__personen button:disabled { opacity: .5; cursor: default; }

/* Fuss */
.blz-chat2__fuss { border-top: 1px solid var(--blz-line); background: var(--blz-white); padding: var(--f8) var(--f13) var(--f8); }
.blz-chat2__eingabe { display: flex; gap: var(--f8); align-items: flex-end; }
.blz-chat2__eingabe textarea {
  flex: 1; min-height: var(--f34); max-height: 144px; resize: none; padding: var(--f8) var(--f13); border: 1px solid var(--blz-line); border-radius: var(--f13);
  font: inherit; font-size: 15px; line-height: 1.4; color: var(--blz-text); background: var(--blz-white);
}
.blz-chat2__eingabe textarea:focus { outline: 2px solid var(--blz-cta); outline-offset: 1px; border-color: var(--blz-cta); }
.blz-chat2__eingabe textarea:disabled { background: var(--blz-cream); color: var(--blz-muted); }
.blz-chat2__senden {
  flex: 0 0 var(--f34); width: var(--f34); height: var(--f34); border: 0; border-radius: 50%; background: var(--blz-cta); color: var(--blz-white);
  display: grid; place-items: center; cursor: pointer; transition: background .15s;
}
.blz-chat2__senden:hover { background: var(--blz-cta-hover); }
.blz-chat2__senden:disabled { background: var(--blz-off); cursor: default; }
.blz-chat2__leiste { display: flex; align-items: center; justify-content: space-between; gap: var(--f8); margin-top: var(--f5); min-height: var(--f21); }
.blz-chat2__tastatur { font-size: 11px; color: var(--blz-muted); }
.blz-chat2__tastatur[hidden] { display: none; }
.blz-chat2__mensch {
  border: 0; background: none; padding: 0; font: inherit; font-size: 12px; color: var(--blz-cta); text-decoration: underline; cursor: pointer; white-space: nowrap;
}
.blz-chat2__mensch[hidden] { display: none; }

/* Schwebeknopf */
/* blz-chat2__knopf-fase: eckig abgeschnitten, kein Leuchtrand, Farbe aus dem Theme (Besitzer 22.09.2026) */
.blz-chat2__knopf {
  position: fixed; right: var(--f21, 21px); bottom: var(--f21, 21px); z-index: 99998; width: 55px; height: 55px; border: 0; border-radius: 0;
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
  background: #0C2D56; color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: none; transition: background .15s;
}
.blz-chat2__knopf:hover { background: #0C4A72; }
/* Der gruene Punkt hat nie eine Erreichbarkeit gemessen, er war reine Zier und damit irrefuehrend. */
.blz-chat2__punkt { display: none !important; }

/* Mobil */
@media (max-width: 480px) {
  .blz-chat2 { right: 0; bottom: 0; width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; }
  .blz-chat2__fenster { border-radius: 0; }
  .blz-chat2__kopf { padding-left: var(--f13); gap: var(--f5); }
  .blz-chat2__kopf { padding-right: var(--f8); }
  .blz-chat2__kopf-text span { font-size: 11px; }
  .blz-chat2__tastatur { display: none; }
}
@media (prefers-reduced-motion: reduce) { .blz-chat2__verlauf { scroll-behavior: auto; } .blz-chat2__tippt i { animation: none; } }

/* Haeufige Fragen aus der Online-Hilfe: eigene Ansicht ueber dem Verlauf, immer scrollbar, nie abgeschnitten */
.blz-chat2__faq { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--blz-cream); }
.blz-chat2__fenster--faq .blz-chat2__verlauf, .blz-chat2__fenster--faq .blz-chat2__fuss { display: none; }
.blz-chat2__faq[hidden] { display: none; }
.blz-chat2__faq-kopf { display: flex; gap: var(--f8); align-items: center; padding: var(--f8) var(--f13); background: var(--blz-white); border-bottom: 1px solid var(--blz-line); }
.blz-chat2__faq-suche { flex: 1; min-width: 0; height: var(--f34); padding: 0 var(--f13); border: 1px solid var(--blz-line); border-radius: var(--f8); font: inherit; font-size: 14px; }
.blz-chat2__faq-suche:focus { outline: 2px solid var(--blz-cta); outline-offset: 1px; border-color: var(--blz-cta); }
.blz-chat2__faq-zu { height: var(--f34); padding: 0 var(--f13); border: 1px solid var(--blz-cta); border-radius: var(--f8); background: var(--blz-white); color: var(--blz-cta); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.blz-chat2__faq-zu:hover { background: var(--blz-cta); color: var(--blz-white); }
.blz-chat2__faq-liste { flex: 1; min-height: 0; overflow-y: auto; padding: var(--f8) var(--f13) var(--f13); }
.blz-chat2__faq-titel { margin: var(--f8) 0 var(--f5); font-family: var(--blz-display); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blz-muted); }
.blz-chat2__faq-abschnitt { background: var(--blz-white); border-radius: var(--f13); margin-bottom: var(--f8); box-shadow: 0 1px var(--f3) rgba(12,45,86,.08); }
.blz-chat2__faq-abschnitt summary { display: flex; align-items: center; justify-content: space-between; gap: var(--f8); padding: var(--f8) var(--f13); cursor: pointer; font-weight: 600; list-style: none; }
.blz-chat2__faq-abschnitt summary::-webkit-details-marker { display: none; }
.blz-chat2__faq-abschnitt summary::after { content: "+"; color: var(--blz-cta); font-weight: 700; margin-left: auto; }
.blz-chat2__faq-abschnitt[open] summary::after { content: "\2212"; }
.blz-chat2__faq-abschnitt summary small { font-size: 11px; color: var(--blz-muted); font-weight: 400; }
.blz-chat2__faq-abschnitt ul { list-style: none; margin: 0; padding: 0 var(--f8) var(--f8); }
.blz-chat2__faq-abschnitt li + li { border-top: 1px solid var(--blz-cream-mid); }
.blz-chat2__faq-abschnitt li button { display: block; width: 100%; text-align: left; padding: var(--f8) var(--f5); border: 0; background: none; font: inherit; font-size: 14px; color: var(--blz-text); cursor: pointer; border-radius: var(--f5); }
.blz-chat2__faq-abschnitt li button:hover, .blz-chat2__faq-abschnitt li button:focus-visible { background: var(--blz-cream-mid); color: var(--blz-cta); outline: none; }
.blz-chat2__faq-stand { margin: 0; padding: var(--f5) var(--f13); font-size: 11px; color: var(--blz-muted); border-top: 1px solid var(--blz-line); background: var(--blz-white); }
.blz-chat2__faq-link { align-self: flex-start; border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--blz-cta); text-decoration: underline; cursor: pointer; }
.blz-chat2__blase--hilfe { max-width: calc(100% - var(--f55)); }
.blz-chat2__hilfe-frage { display: block; margin-bottom: var(--f5); }
.blz-chat2__hilfe-antwort { white-space: normal; font-size: 14px; }
.blz-chat2__hilfe-antwort p { margin: 0 0 var(--f8); }
.blz-chat2__hilfe-antwort p:last-child { margin-bottom: 0; }
.blz-chat2__hilfe-antwort ul, .blz-chat2__hilfe-antwort ol { margin: 0 0 var(--f8); padding-left: var(--f21); }
.blz-chat2__hilfe-antwort a { color: var(--blz-cta); }
.blz-chat2__hilfe-antwort code { font-family: 'JetBrains Mono', monospace; font-size: 12px; background: var(--blz-cream-mid); padding: 0 var(--f3); border-radius: var(--f3); }
.blz-chat2__hilfe-antwort img { max-width: 100%; height: auto; }
.blz-chat2__hilfe-antwort table { display: block; overflow-x: auto; font-size: 12px; }
.blz-chat2__hilfe-mehr { display: inline-block; margin-top: var(--f8); font-size: 13px; color: var(--blz-cta); text-decoration: underline; }
@media (max-width: 480px) { .blz-chat2__faq-zu { padding: 0 var(--f8); } }

/* Dunkle Darstellung (Hausfarben: Grund 111827 und 0C2D56, Text F7F6F0; Kontraste gemessen 21.09.2026 (Boris):
   Text auf Karte 12,9:1, gedaempft 6,6:1, Link 7,3:1, Kopftext 8,6:1, Platzhalter 8,4:1, CTA 2563EB mit F7F6F0 5,1:1) */
.blz-chat2[data-thema="dunkel"] {
  --blz-white: #1E2D42; --blz-cream: #111827; --blz-cream-mid: #0C2D56; --blz-text: #F7F6F0; --blz-muted: #A9B4C2;
  --blz-line: #2C3E58; --blz-slate: #F7F6F0; --blz-blue-dark: #0C2D56; --blz-cta: #2563EB; --blz-cta-hover: #1D4ED8; --blz-off: #6B7788; --blz-link: #7CC4F5;
  color: var(--blz-text);
}
.blz-chat2[data-thema="dunkel"] .blz-chat2__fenster { box-shadow: 0 var(--f13) var(--f55) rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); }
.blz-chat2[data-thema="dunkel"] .blz-chat2__kopf { background: linear-gradient(135deg, #0C2D56 0%, #0C4A6E 60%, #0E7490 100%); }
.blz-chat2[data-thema="dunkel"] .blz-chat2__blase { box-shadow: 0 1px var(--f3) rgba(0,0,0,.4); }
.blz-chat2[data-thema="dunkel"] .blz-chat2__zeile--kunde .blz-chat2__blase { background: #2563EB; color: #FFFFFF; }
.blz-chat2[data-thema="dunkel"] .blz-chat2__zeile--system .blz-chat2__blase { background: #0C2D56; color: #F7F6F0; }
.blz-chat2[data-thema="dunkel"] .blz-chat2__karte, .blz-chat2[data-thema="dunkel"] .blz-chat2__faq-abschnitt { box-shadow: 0 1px var(--f3) rgba(0,0,0,.4); }
.blz-chat2[data-thema="dunkel"] .blz-chat2__feld input, .blz-chat2[data-thema="dunkel"] .blz-chat2__eingabe textarea, .blz-chat2[data-thema="dunkel"] .blz-chat2__faq-suche { background: #111827; color: #F7F6F0; border-color: #2C3E58; }
.blz-chat2[data-thema="dunkel"] .blz-chat2__eingabe textarea::placeholder, .blz-chat2[data-thema="dunkel"] .blz-chat2__feld input::placeholder, .blz-chat2[data-thema="dunkel"] .blz-chat2__faq-suche::placeholder { color: #A9B4C2; }
.blz-chat2[data-thema="dunkel"] .blz-chat2__eingabe textarea:disabled { background: #0C2D56; color: #A9B4C2; }
.blz-chat2[data-thema="dunkel"] .blz-chat2__wahl button, .blz-chat2[data-thema="dunkel"] .blz-chat2__faq-zu { background: #1E2D42; color: #7CC4F5; border-color: #7CC4F5; }
.blz-chat2[data-thema="dunkel"] .blz-chat2__wahl button:hover, .blz-chat2[data-thema="dunkel"] .blz-chat2__faq-zu:hover { background: #2563EB; color: #FFFFFF; border-color: #2563EB; }
.blz-chat2[data-thema="dunkel"] .blz-chat2__wahl button.blz-chat2__wahl--voll { background: #2563EB; color: #FFFFFF; border-color: #2563EB; }
.blz-chat2[data-thema="dunkel"] .blz-chat2__personen button { background: #1E2D42; color: #F7F6F0; border-color: #2C3E58; }
.blz-chat2[data-thema="dunkel"] .blz-chat2__personen button:hover { background: #0C2D56; border-color: #7CC4F5; }
.blz-chat2[data-thema="dunkel"] .blz-chat2__quellen a, .blz-chat2[data-thema="dunkel"] .blz-chat2__hilfe-antwort a, .blz-chat2[data-thema="dunkel"] .blz-chat2__hilfe-mehr, .blz-chat2[data-thema="dunkel"] .blz-chat2__mensch, .blz-chat2[data-thema="dunkel"] .blz-chat2__faq-link, .blz-chat2[data-thema="dunkel"] .blz-chat2__klein a, .blz-chat2[data-thema="dunkel"] .blz-chat2__faq-abschnitt summary::after { color: #7CC4F5; }
.blz-chat2[data-thema="dunkel"] .blz-chat2__faq-abschnitt li button { color: #F7F6F0; }
.blz-chat2[data-thema="dunkel"] .blz-chat2__faq-abschnitt li button:hover, .blz-chat2[data-thema="dunkel"] .blz-chat2__faq-abschnitt li button:focus-visible { background: #0C2D56; color: #7CC4F5; }
.blz-chat2[data-thema="dunkel"] .blz-chat2__faq-abschnitt li + li { border-top-color: #2C3E58; }
.blz-chat2[data-thema="dunkel"] .blz-chat2__hilfe-antwort code { background: #0C2D56; }
.blz-chat2[data-thema="dunkel"] .blz-chat2__fehler { color: #FCA5A5; }
.blz-chat2[data-thema="dunkel"] .blz-chat2__status--online::before { box-shadow: 0 0 0 var(--f3) rgba(22,163,74,.35); }
/* Kopf und Knoepfe bleiben hell beschriftet, auch wenn --blz-white im dunklen Thema die Flaechenfarbe ist */
.blz-chat2[data-thema="dunkel"] .blz-chat2__kopf, .blz-chat2[data-thema="dunkel"] .blz-chat2__kopf button, .blz-chat2[data-thema="dunkel"] .blz-chat2__avatar,
.blz-chat2[data-thema="dunkel"] .blz-chat2__knopf-cta, .blz-chat2[data-thema="dunkel"] .blz-chat2__senden { color: #F7F6F0; }
.blz-chat2[data-thema="dunkel"] .blz-chat2__faq-knopf[aria-expanded="true"], .blz-chat2[data-thema="dunkel"] .blz-chat2__faq-knopf[aria-expanded="true"]:hover { background: #F7F6F0; color: #0C2D56; }

/* =====================================================================================
   RUHIGER GRUND, 24.09.2026.
   Wort des Besitzers: "chat hintergrund ist ultra haesslich! mach das modern".

   GEMESSEN VORHER (Playwright am laufenden Fenster, 24.09.2026): die beige Flaeche kam
   NICHT aus dieser Datei. Sie stand in themes/bilanzo-child/assets/bilanzo-kontrast.css:
     body .blz-chat2__verlauf          background #EAE6D9   beige
     body .blz-chat2__fuss             background #D6E2ED   hellblauer Kasten
     body .blz-chat2__eingabe textarea background-color #EDF1F5
   Jene Datei gehoert einer anderen Arbeit und wird hier nicht angefasst. Statt dessen
   gewinnen die Regeln unten ueber die Spezifitaet: .blz-chat2 .blz-chat2__x ist (0,2,0)
   und schlaegt body .blz-chat2__x mit (0,1,1). Wo das nicht reicht, steht die ID
   #blz-chat2 davor; eine ID schlaegt jede Zahl von Klassen. !important steht nirgends.

   Die abgeschnittenen Ecken des Fensters (Fase 13 px) stehen ebenfalls schon in jener
   Datei und bleiben unveraendert.

   ZWOELF BEFUNDE VON BORIS, 24.09.2026, ALLE HIER BEANTWORTET. Was er gemessen hat und
   was daraus wurde, steht bei der jeweiligen Regel. Die drei schwersten waren:
     1) Der Deckel war tot: bei drei Nachrichten stand das Eingabefeld unter dem
        Bildschirmrand (Fenster 704 px bei 950 px Schirm), bei vierzig Nachrichten war
        das Fenster 4265 px hoch und rollte ueberhaupt nicht mehr.
     3) Der Fokusring war unsichtbar: clip-path schneidet den outline weg. Gemessen
        0 abweichende Pixel zwischen fokussiert und unfokussiert, Gegenprobe ohne
        clip-path 1484 Pixel. Tastaturbedienung ohne jede Rueckmeldung.
     6) Dunkle Fassung: E-Mail-Feld und FAQ-Suche standen bei 1,05:1, also unlesbar.

   FARBEN UND GEMESSENE KONTRASTE (WCAG, auf die deckende Endfarbe, Deckkraft
   eingerechnet):
     HELL   Grund #EEF2F7, Blasen #FFFFFF mit Rand #7A8A9E, Kopf #0C2D56
       Text #111111 auf Grund                       16,80:1
       Text #111111 auf Blase                       18,88:1
       Kleintext #5B6472 auf Blase                   5,98:1
       Kleintext #5B6472 auf Grund                   5,32:1
       Blasenrand #7A8A9E gegen Grund                3,14:1   (Bedienteil, ab 3:1)
       Blasenrand #7A8A9E gegen Blase                3,53:1
       Rollbalken #6B7A8D gegen Grund                3,90:1   (vorher 1,61:1, Befund 11)
       Fokusring #2563EB auf weissem Feld            5,17:1
       Kundenblase weiss auf #2563EB                 5,17:1
       Kopftext weiss auf #0C2D56                   13,77:1
       Kopfknopf rgba(255,255,255,.16) ergibt #334F71, weisses Symbol   8,41:1
     DUNKEL Grund #0E1726, Blasen #1E2D42 mit Rand #63789B, Fuss #111827
       Text #F7F6F0 auf Grund                       16,59:1
       Text #F7F6F0 auf Blase                       12,85:1
       Text #F7F6F0 im Eingabefeld #0E1726          16,59:1   (vorher 1,05:1, Befund 6)
       Kleintext #A9B4C2 auf Blase                   6,62:1
       Verweis #7CC4F5 auf Blase                     7,34:1
       Blasenrand #63789B gegen Grund                4,01:1
       Blasenrand #63789B gegen Blase                3,11:1
       Rollbalken #63789B gegen Grund                4,01:1   (vorher 2,65:1, Befund 11)
   ===================================================================================== */

/* --- Befund 1, 2 und 10: der Deckel gehoert ans FENSTER, nicht an die Huelle ---------
   Die Huelle .blz-chat2 ist fest positioniert und laesst ihren Inhalt ueberstehen
   (overflow visible). Ein max-height dort begrenzt darum nichts, sobald das Fenster
   selbst height:auto hat, und ein Prozentwert am Fenster hilft auch nicht, weil die
   Huelle keine feste Hoehe mehr hat. Beides steht jetzt am Fenster. Damit schrumpft
   der Verlauf am Deckel wieder und rollt, statt aus dem Schirm zu wachsen. */
#blz-chat2 .blz-chat2__fenster {
  height: auto;
  min-height: 233px;
  max-height: min(610px, calc(100vh - 110px));
  /* Befund 7: der Schatten war tote Deklaration, bilanzo-kontrast.css schneidet ihn
     mit clip-path weg. Er steht darum nicht mehr hier. */
}
#blz-chat2 .blz-chat2__verlauf { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
#blz-chat2 .blz-chat2__faq { flex: 0 1 auto; min-height: 0; }
#blz-chat2 .blz-chat2__faq-liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* --- Kopf: ruhig statt blaugruener Verlauf ---------------------------------------- */
.blz-chat2 .blz-chat2__kopf {
  background: var(--blz-blue-dark);
  border-bottom: 1px solid rgba(255, 255, 255, .13);
  padding: var(--f13) var(--f13) var(--f13) var(--f21);
}
.blz-chat2 .blz-chat2__neu,
.blz-chat2 .blz-chat2__zu,
.blz-chat2 .blz-chat2__faq-knopf,
.blz-chat2 .blz-chat2__thema {
  background: rgba(255, 255, 255, .16);
}
.blz-chat2 .blz-chat2__neu:hover,
.blz-chat2 .blz-chat2__zu:hover,
.blz-chat2 .blz-chat2__faq-knopf:hover,
.blz-chat2 .blz-chat2__thema:hover {
  background: rgba(255, 255, 255, .28);
}

/* --- Verlauf: ruhiger, kuehler Grund statt Beige ----------------------------------- */
.blz-chat2 .blz-chat2__verlauf,
.blz-chat2 .blz-chat2__faq {
  background: #EEF2F7;
}
.blz-chat2 .blz-chat2__verlauf {
  padding: var(--f21) var(--f13) var(--f13);
  gap: var(--f13);
  /* Befund 11: der Rollbalken lag bei 1,61:1. Jetzt 3,90:1. */
  scrollbar-width: thin;
  scrollbar-color: #6B7A8D transparent;
}
.blz-chat2 .blz-chat2__verlauf::-webkit-scrollbar { width: 5px; }
.blz-chat2 .blz-chat2__verlauf::-webkit-scrollbar-track { background: transparent; }
.blz-chat2 .blz-chat2__verlauf::-webkit-scrollbar-thumb { background: #6B7A8D; border-radius: var(--f3); }
.blz-chat2 .blz-chat2__verlauf::-webkit-scrollbar-thumb:hover { background: #55636F; }

/* --- Blasen und Karten: flach, mit Rand statt Schatten, Ecken abgeschnitten --------
   Die Fase bleibt hier, weil diese Flaechen selbst keinen Fokus bekommen und ihr
   Inhalt 8 bis 13 px innen sitzt (von Boris nachgemessen: kein Text wird beschnitten). */
.blz-chat2 .blz-chat2__blase,
.blz-chat2 .blz-chat2__karte,
.blz-chat2 .blz-chat2__faq-abschnitt {
  border: 1px solid #7A8A9E;
  box-shadow: none;
  border-radius: 0;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
.blz-chat2 .blz-chat2__blase { padding: var(--f8) var(--f13); }
.blz-chat2 .blz-chat2__karte { padding: var(--f13); gap: var(--f8); }
.blz-chat2 .blz-chat2__zeile--kunde .blz-chat2__blase { border-color: #2563EB; }
.blz-chat2 .blz-chat2__zeile--system .blz-chat2__blase { background: #E7EDF4; border-color: #7A8A9E; }
.blz-chat2 .blz-chat2__avatar { clip-path: none; }
/* Befund 9: die Personenliste blieb ohne erkennbaren Rand (1,29:1). */
.blz-chat2 .blz-chat2__personen button { border-color: #7A8A9E; }

/* --- Fuss: klar getrennt, aber ohne eigenen Farbkasten ----------------------------- */
.blz-chat2 .blz-chat2__fuss {
  background: var(--blz-white);
  border-top: 1px solid #7A8A9E;
  padding: var(--f13);
}
.blz-chat2 .blz-chat2__eingabe { gap: var(--f8); }
#blz-chat2 .blz-chat2__eingabe textarea {
  background-color: var(--blz-white);
  border: 1px solid #6B7280;
  border-radius: 0;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  padding: var(--f8) var(--f13);
}
/* Befund 8: das gesperrte Eingabefeld sah aus wie das offene. */
#blz-chat2 .blz-chat2__eingabe textarea:disabled {
  background-color: #EEF2F7;
  color: #5B6472;
}
.blz-chat2 .blz-chat2__leiste { margin-top: var(--f8); }

/* --- Befund 3: Fokus sichtbar machen, TROTZ Fase ----------------------------------
   clip-path schneidet jeden outline weg, er liegt ausserhalb der Form. Ein Ring nach
   INNEN wird nicht beschnitten. Der outline bleibt trotzdem stehen, damit der
   Hochkontrastmodus von Windows weiterhin etwas zu zeichnen hat. */
#blz-chat2 .blz-chat2__eingabe textarea:focus,
#blz-chat2 .blz-chat2__feld input:focus,
#blz-chat2 .blz-chat2__faq-suche:focus,
#blz-chat2 .blz-chat2__knopf-cta:focus-visible,
#blz-chat2 .blz-chat2__wahl button:focus-visible,
#blz-chat2 .blz-chat2__personen button:focus-visible,
#blz-chat2 .blz-chat2__faq-zu:focus-visible,
#blz-chat2 .blz-chat2__senden:focus-visible,
#blz-chat2 .blz-chat2__mensch:focus-visible,
#blz-chat2 .blz-chat2__faq-link:focus-visible {
  box-shadow: inset 0 0 0 3px var(--blz-cta);
  border-color: var(--blz-cta);
}

/* Eingabefelder und Wahlknoepfe bekommen dieselbe Fase wie alles andere. */
.blz-chat2 .blz-chat2__feld input,
.blz-chat2 .blz-chat2__knopf-cta,
.blz-chat2 .blz-chat2__wahl button,
.blz-chat2 .blz-chat2__personen button,
.blz-chat2 .blz-chat2__faq-zu {
  border-radius: 0;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}

/* --- Dunkle Fassung: das Mondsymbol im Kopf verspricht sie ------------------------- */
.blz-chat2[data-thema="dunkel"] .blz-chat2__verlauf,
.blz-chat2[data-thema="dunkel"] .blz-chat2__faq { background: #0E1726; }
.blz-chat2[data-thema="dunkel"] .blz-chat2__kopf {
  background: #0C2D56;
  border-bottom-color: rgba(255, 255, 255, .16);
}
.blz-chat2[data-thema="dunkel"] .blz-chat2__blase,
.blz-chat2[data-thema="dunkel"] .blz-chat2__karte,
.blz-chat2[data-thema="dunkel"] .blz-chat2__faq-abschnitt,
.blz-chat2[data-thema="dunkel"] .blz-chat2__personen button { border-color: #63789B; box-shadow: none; }
.blz-chat2[data-thema="dunkel"] .blz-chat2__zeile--kunde .blz-chat2__blase { border-color: #2563EB; }
.blz-chat2[data-thema="dunkel"] .blz-chat2__zeile--system .blz-chat2__blase { background: #0C2D56; border-color: #63789B; }
.blz-chat2[data-thema="dunkel"] .blz-chat2__fuss { background: #111827; border-top-color: #63789B; }
.blz-chat2[data-thema="dunkel"] .blz-chat2__verlauf { scrollbar-color: #63789B transparent; }
.blz-chat2[data-thema="dunkel"] .blz-chat2__verlauf::-webkit-scrollbar-thumb { background: #63789B; }
.blz-chat2[data-thema="dunkel"] .blz-chat2__verlauf::-webkit-scrollbar-thumb:hover { background: #8098BE; }

/* Befund 6: bilanzo-kontrast.css Zeile 229 setzt jedem input im Haus eine helle Flaeche.
   Mit sechs :not()-Gliedern schlaegt die Regel jede Klassenkette. Die ID #blz-chat2
   schlaegt sie trotzdem, und zwar NUR im Chatfenster; anderswo bleibt alles, wie es ist.
   Vorher gemessen: heller Kasten #EDF1F5 mit Text #F7F6F0, also 1,05:1. */
#blz-chat2[data-thema="dunkel"] .blz-chat2__feld input,
#blz-chat2[data-thema="dunkel"] .blz-chat2__eingabe textarea,
#blz-chat2[data-thema="dunkel"] .blz-chat2__faq-suche {
  background-color: #0E1726;
  color: #F7F6F0;
  border-color: #8FA3BF;
}
#blz-chat2[data-thema="dunkel"] .blz-chat2__feld input:focus,
#blz-chat2[data-thema="dunkel"] .blz-chat2__eingabe textarea:focus,
#blz-chat2[data-thema="dunkel"] .blz-chat2__faq-suche:focus {
  background-color: #0E1726;
  color: #F7F6F0;
}
#blz-chat2[data-thema="dunkel"] .blz-chat2__eingabe textarea:disabled {
  background-color: #0C2D56;
  color: #A9B4C2;
}
#blz-chat2[data-thema="dunkel"] .blz-chat2__feld input::placeholder,
#blz-chat2[data-thema="dunkel"] .blz-chat2__eingabe textarea::placeholder,
#blz-chat2[data-thema="dunkel"] .blz-chat2__faq-suche::placeholder { color: #A9B4C2; }

/* --- Mobil: das Fenster nimmt den ganzen Schirm ------------------------------------ */
@media (max-width: 480px) {
  .blz-chat2 { height: 100%; min-height: 0; max-height: 100%; }
  #blz-chat2 .blz-chat2__fenster { height: 100%; min-height: 0; max-height: 100%; clip-path: none; }
  /* Befund 4: mit flex 0 1 auto blieben unter der Eingabeleiste 431 px leeres Weiss,
     weil der Verlauf das Fenster nicht mehr fuellte. Auf dem Schirm fuellt er wieder. */
  #blz-chat2 .blz-chat2__verlauf { flex: 1 1 auto; }
  #blz-chat2 .blz-chat2__faq { flex: 1 1 auto; }
  /* Befund 5: der Schwebeknopf lag zu 76 Prozent ueber dem Senden-Knopf (884 von
     1156 Quadratpixeln, elementFromPoint traf den Schwebeknopf). Solange das Fenster
     offen ist, wird er nicht gebraucht: das Kreuz im Kopf schliesst. */
  #blz-chat2:not([hidden]) ~ .blz-chat2__knopf { display: none; }
}