/* Kontakt-Knopf „Chatten Sie mit uns“ + Web-Chat „Soli“ (mu-plugin twd-voso-chat).
   Grün #007A36 mit weißer Schrift = Kontrast 5,5:1 (WCAG AA bei 18 px); das Markengrün #009241 käme nur auf
   4,1:1. Hover/Links #006B2F (6,7:1). Schrift 18 px (Relaunch-Beschluss Lesbarkeit). Theme-Stile für
   button/a werden hier bewusst mit ID-Selektoren überschrieben (Reliance setzt z. B. transition: .3s). */

/* ------------------------------------------------------------------ Knopf */
/* Position: über dem schwebenden Sprachumschalter (TranslatePress, unten rechts, 55 px hoch) und dem
   Complianz-Reiter „Einwilligung verwalten“. Bewusst kein höherer z-index: das Cookie-Banner (99999) hat Vorrang. */
#soli-knopf.soli-knopf {
  position: fixed;
  right: 20px;
  bottom: 80px;
  z-index: 10000;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  max-width: calc(100vw - 40px);
  margin: 0;
  padding: 10px 22px 10px 12px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #007A36;
  color: #fff;
  font: 400 18px/1.25 "Fira Sans", Arial, sans-serif;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .24);
}
#soli-knopf.soli-knopf:hover { background: #006B2F; color: #fff; }
#soli-knopf.soli-knopf:focus-visible { outline: 3px solid #1A1A1A; outline-offset: 3px; }
#soli-knopf .soli-symbol { width: 24px; height: 24px; flex: none; fill: currentColor; }
#soli-knopf .soli-knopf-symbole { display: inline-flex; align-items: center; flex: none; }
#soli-knopf .soli-knopf-symbole .soli-symbol {
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 50%;
  background: #fff;
  fill: #007A36;
  box-shadow: 0 0 0 2px #007A36;
}
#soli-knopf .soli-knopf-symbole .soli-symbol + .soli-symbol { margin-left: -8px; }
.soli-ersetzt-whatsapp #soli-knopf .soli-knopf-symbole .soli-symbol:first-child { fill: #1DA851; }
#soli-knopf .soli-knopf-zu { display: flex; flex-direction: column; }
#soli-knopf .soli-knopf-titel { font-weight: 700; font-size: 18px; }
#soli-knopf .soli-knopf-info { font-size: 16px; }
#soli-knopf .soli-knopf-auf,
#soli-knopf .soli-knopf-laedt { display: none; align-items: center; gap: 8px; font-weight: 700; }
#soli-knopf.soli-offen .soli-knopf-zu,
#soli-knopf.soli-offen .soli-knopf-symbole { display: none; }
#soli-knopf.soli-offen .soli-knopf-auf { display: inline-flex; }
#soli-knopf.soli-offen { padding: 10px 22px; }
#soli-knopf[aria-busy="true"] { cursor: progress; }
#soli-knopf[aria-busy="true"] .soli-knopf-zu { display: none; }
#soli-knopf[aria-busy="true"] .soli-knopf-laedt { display: inline-flex; }

/* Der Knopf des WhatsApp-Plugins entfällt, sobald der Kontakt-Knopf eine WhatsApp-Nummer hat (Klasse vom mu-plugin) */
.soli-ersetzt-whatsapp .qlwapp__container { display: none !important; }

/* ------------------------------------------------------------------ Auswahl */
#soli-auswahl[hidden],
#soli-schleier[hidden] { display: none !important; }

#soli-auswahl.soli-auswahl {
  position: fixed;
  right: 20px;
  bottom: 156px;
  z-index: 10001;
  width: 390px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 0 0 10px;
  border: 1px solid #E3E3E3;
  border-radius: 16px;
  background: #fff;
  color: #1A1A1A;
  font: 400 18px/1.35 "Fira Sans", Arial, sans-serif;
  text-align: left;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
  animation: soli-einblenden .16s ease-out;
}
#soli-auswahl .soli-auswahl-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 12px 8px 20px;
}
#soli-auswahl .soli-auswahl-titel { margin: 0; font-size: 20px; font-weight: 700; color: #1A1A1A; line-height: 1.3; }
#soli-auswahl .soli-auswahl-zu {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #444;
  cursor: pointer;
  box-shadow: none;
  transition: background .15s;
}
#soli-auswahl .soli-auswahl-zu:hover { background: #F0F0F0; }
#soli-auswahl .soli-auswahl-zu .soli-symbol { width: 24px; height: 24px; fill: currentColor; }
#soli-auswahl .soli-hinweis {
  margin: 4px 16px 6px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #FDECEA;
  color: #7A1A12;
  font-size: 16px;
}
#soli-auswahl .soli-hinweis:empty { display: none; }
/* Theme vererbt white-space: nowrap an button/a – ohne Umbruch wuchs die Spalte auf Textbreite (586 statt 364 px) */
#soli-auswahl .soli-auswahl-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; padding: 6px 12px 4px; list-style: none; }
#soli-auswahl .soli-auswahl-liste li { margin: 0; padding: 0; list-style: none; }
#soli-auswahl .soli-weg {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 72px;
  box-sizing: border-box;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #E3E3E3;
  border-radius: 12px;
  background: #fff;
  color: #1A1A1A;
  font: inherit;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: background .15s, border-color .15s;
}
#soli-auswahl .soli-weg:hover { background: #EEF6F1; border-color: #007A36; color: #1A1A1A; }
#soli-auswahl .soli-weg:focus-visible { outline: 3px solid #1A1A1A; outline-offset: 2px; background: #EEF6F1; border-color: #007A36; }
#soli-auswahl .soli-weg-symbol {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #007A36;
  color: #fff;
}
#soli-auswahl .soli-weg-whatsapp .soli-weg-symbol { background: #1DA851; }
#soli-auswahl .soli-weg-symbol .soli-symbol { width: 26px; height: 26px; fill: currentColor; }
#soli-auswahl .soli-weg-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
#soli-auswahl .soli-weg-titel { font-size: 18px; font-weight: 700; color: #1A1A1A; }
#soli-auswahl .soli-weg-info { font-size: 16px; color: #4A4A4A; }
#soli-auswahl .soli-weg-nummer { font-size: 18px; font-weight: 600; color: #006B2F; }
#soli-auswahl .soli-pfeil { flex: none; width: 22px; height: 22px; fill: #007A36; }

#soli-schleier.soli-schleier {
  position: fixed;
  inset: 0;
  z-index: 99992;
  background: rgba(0, 0, 0, .45);
  animation: soli-schleier-ein .16s ease-out;
}

@keyframes soli-einblenden { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes soli-hochfahren { from { transform: translateY(100%); } to { transform: none; } }
@keyframes soli-schleier-ein { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------------ Web-Chat (@n8n/chat) */
#soli-chat {
  --chat--color--primary: #007A36;
  --chat--color--primary-shade-50: #006B2F;
  --chat--color--primary--shade-100: #005A27;
  --chat--color--secondary: #007A36;
  --chat--color-secondary-shade-50: #006B2F;
  --chat--color-dark: #1A1A1A;
  --chat--color-typing: #1A1A1A;
  --chat--font-family: "Fira Sans", Arial, sans-serif;
  /* 30.10.2026 (Thomas): Fenster breiter/höher, Kopf schmaler – mehr Platz für den Verlauf. Die Höhe 800 px ist ein
     Wunsch; die Bildschirmhöhe begrenzt über .chat-window-wrapper (unten). Unterkante 156 px = Oberkante des Knopfs
     (bottom 80 + min-height 64 = 144 px) plus 12 px Luft; der Standardabstand unter dem Fenster entfällt dafür. */
  --chat--window--width: 460px;
  --chat--window--height: 800px;
  --chat--window--bottom: 156px;
  --chat--window--margin-bottom: 0px;
  --chat--window--right: 20px;
  --chat--window--z-index: 9999;
  --chat--window--border-radius: 12px;
  --chat--window--border: 1px solid #c8c8c8;
  --chat--header--background: #007A36;
  --chat--header--color: #fff;
  --chat--heading--font-size: 1.25em;
  --chat--subtitle--font-size: .9em;
  --chat--subtitle--line-height: 1.4;
  --chat--message--font-size: 18px;
  --chat--message-line-height: 1.55;
  --chat--message--bot--background: #fff;
  --chat--message--bot--color: #1A1A1A;
  --chat--message--bot--border: 1px solid #d9d9d9;
  --chat--message--user--background: #007A36;
  --chat--message--user--color: #fff;
  --chat--input--font-size: 18px;
  --chat--input--text-color: #1A1A1A;
  --chat--body--background: #F5F2EE;
  --chat--footer--background: #fff;
  --chat--input--send--button--color: #007A36;
  --chat--input--send--button--color-hover: #005A27;
  font-size: 18px;
}
/* Steuerung ausschließlich über #soli-knopf (echter Button, per Tastatur bedienbar) */
#soli-chat .chat-window-toggle { display: none !important; }
/* n8n begrenzt auf 100 % - 2 x Abstand unten; bei hochgesetztem Fenster reicht einmal plus 12 px Rand oben */
#soli-chat .chat-window-wrapper { max-height: calc(100% - var(--chat--window--bottom) - 12px); }
#soli-chat .chat-header { gap: .35em; }
#soli-chat .chat-header p { margin: 0; color: #fff; }
#soli-chat .soli-anruf a { color: #fff; font-weight: 700; text-decoration: underline; }
/* Wartehinweis unter den Tipp-Punkten (soli.js, nach 5 s ohne Antwort); #4A4A4A auf #F5F2EE = 7,5:1 */
#soli-chat .soli-warte { flex: none; margin: 0; padding: 4px 20px 14px; color: #4A4A4A; font-size: 16px; line-height: 1.4; }
#soli-chat .chat-message-from-bot a { color: #006B2F; text-decoration: underline; }
#soli-chat .chat-message-from-user a { color: #fff; text-decoration: underline; }
#soli-chat textarea::placeholder { color: #595959; opacity: 1; }
#soli-chat a:focus-visible,
#soli-chat button:focus-visible,
#soli-chat textarea:focus-visible { outline: 3px solid #1A1A1A; outline-offset: 2px; }
/* Die Seite setzt seitenweit einen orangen Fokusrahmen mit !important (Barrierefreiheit) – bleibt so. Am
   Eingabefeld nach innen gelegt, sonst schneidet der Fensterrand ihn ab (Belegbild 30.09.2026). */
#soli-chat textarea:focus-visible { outline-offset: -3px; }

/* ------------------------------------------------------------------ PC: schmalerer grüner Kopf */
/* Nur im PC-Layout (Gegenstück zur Handy-Abfrage unten): der Kopf wird niedriger, der Verlauf bekommt mehr Platz.
   Das Handy-Vollbild behält seine bisherigen Kopf-Maße. */
@media (min-width: 481px) and (min-height: 521px) {
  #soli-chat {
    --chat--header--padding: .6em 1em;
    --chat--heading--font-size: 1.2em;
    --chat--subtitle--line-height: 1.35;
  }
  #soli-chat .chat-header { gap: .1em; }
  #soli-chat .chat-header h1 { margin: 0; line-height: 1.25; }
}

/* ------------------------------------------------------------------ Handy (bis 480 px breit ODER bis 520 px hoch) */
/* Niedrige Fenster (Handy quer, Laptop mit Zoom): im PC-Layout bliebe fürs Chatfenster zu wenig Höhe, das
   Eingabefeld würde abgeschnitten – deshalb dieselbe Vollbild-/Blatt-Darstellung wie am Handy. Gleiche Abfrage
   wie handy() in soli.js. */
/* Auswahl als Blatt von unten (z-index unter dem Complianz-Banner 99999), Chat als Vollbild (99990).
   Schwebende Fremdknöpfe (WhatsApp 9999999, Sprachumschalter 99999) werden bei offenem Chat/Blatt
   ausgeblendet statt überdeckt. Offener Chat: Knopf wird rund oben rechts zum „Schließen“. */
@media (max-width: 480px), (max-height: 520px) {
  #soli-knopf.soli-knopf { right: 12px; bottom: 100px; max-width: calc(100vw - 24px); }
  .soli-ersetzt-whatsapp #soli-knopf.soli-knopf { bottom: 76px; }
  #soli-auswahl.soli-auswahl {
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99993;
    width: auto;
    max-width: 560px;          /* breite, niedrige Fenster: Blatt mittig statt über die ganze Breite */
    margin: 0 auto;
    max-height: 90vh;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-radius: 20px 20px 0 0;
    animation: soli-hochfahren .2s ease-out;
  }
  #soli-auswahl.soli-auswahl::before {
    content: "";
    display: block;
    width: 44px;
    height: 5px;
    margin: 10px auto 0;
    border-radius: 3px;
    background: #CFCFCF;
  }
  #soli-auswahl .soli-weg { min-height: 76px; }
  body.soli-auswahl-offen .trp-floating-switcher { display: none !important; }

  #soli-chat {
    --chat--window--width: 100vw;
    --chat--window--height: 100vh;
    --chat--window--right: 0px;
    --chat--window--bottom: 0px;
    --chat--window--margin-bottom: 0px;
    --chat--window--border-radius: 0;
    --chat--window--border: 0;
    --chat--window--z-index: 99990;
  }
  @supports (height: 100dvh) {
    #soli-chat { --chat--window--height: 100dvh; }
    #soli-auswahl.soli-auswahl { max-height: 90dvh; }
  }
  #soli-chat .chat-window-wrapper { max-width: 100%; max-height: 100%; }
  #soli-chat .chat-header { padding-right: 72px; }
  #soli-knopf.soli-knopf.soli-offen {
    top: 12px;
    right: 12px;
    bottom: auto;
    z-index: 99991;
    width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  #soli-knopf.soli-offen .soli-knopf-auf-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  body.soli-chat-offen .qlwapp__container,
  body.soli-chat-offen .trp-floating-switcher { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  #soli-chat *, #soli-knopf, #soli-auswahl, #soli-auswahl *, #soli-schleier { transition: none !important; animation: none !important; }
}
@media print {
  #soli-knopf, #soli-auswahl, #soli-schleier, #soli-chat { display: none !important; }
}