/* RENavigAID: schwebender KI-Assistent (renavigaid-chat.js).
   Farben aus der Seite: Dunkelblau #0A2463 fuer Flaechen und Schrift, Petrol #1F7A6B
   fuer den runden Knopf (der Markenverlauf ist laut Kundenvorgabe vom 01.09.2026 dem
   Feld "Rechnerischer Wert" vorbehalten, Bernstein dem primaeren Handlungsaufruf).
   Schrift ist die Textschrift der Seite. Nichts unter 12 px, das Eingabefeld 16 px,
   sonst zoomt iOS beim Antippen heran. Bedienflaechen mindestens 44 px. */

#rn-chat {
  --rnc-dunkel: #0A2463;
  --rnc-petrol: #1F7A6B;
  --rnc-text: #1E293B;
  --rnc-grau: #64748B;
  --rnc-linie: #E2E8F0;
  --rnc-hell: #F1F5F9;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  -webkit-hyphens: manual;
  hyphens: manual;
}

#rn-chat .rnc-knopf {
  position: fixed; right: 20px; bottom: 20px; z-index: 99990;
  width: 56px; height: 56px; border-radius: 50%; border: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: var(--rnc-petrol); cursor: pointer;
  box-shadow: 0 6px 20px rgba(10, 36, 99, .32), 0 0 0 3px rgba(255, 255, 255, .9);
  transition: transform .15s ease, box-shadow .15s ease;
}
#rn-chat .rnc-knopf:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(10, 36, 99, .4), 0 0 0 3px rgba(255, 255, 255, .9); }
#rn-chat .rnc-knopf:focus-visible { outline: 3px solid #F59E0B; outline-offset: 3px; }

/* Ueber Divis Seitenkopf und dem Cookie-Banner (beide z-index 99999): Auf dem Handy
   ist das Fenster vollflaechig, und darunter lag die Kopfzeile samt Schliessen-Knopf
   verdeckt (im Browser auf 390 px gesehen). Der runde Knopf bleibt darunter, das
   Banner soll ihn bis zur Entscheidung ueberdecken. */
#rn-chat .rnc-panel {
  position: fixed; right: 20px; bottom: 88px; z-index: 100000;
  width: 390px; max-width: calc(100vw - 40px);
  height: 580px; max-height: calc(100vh - 120px);
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 14px;
  box-shadow: 0 18px 50px rgba(10, 36, 99, .30);
}
#rn-chat [hidden] { display: none !important; }

#rn-chat .rnc-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 8px 14px 20px; background: var(--rnc-dunkel); color: #fff;
}
#rn-chat .rnc-kopf-text b { display: block; font-size: 16px; font-weight: 700; line-height: 1.3; }
#rn-chat .rnc-kopf-text small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: #C9D6EA; }
#rn-chat .rnc-zu {
  flex: 0 0 auto; width: 44px; height: 44px; border: 0; border-radius: 8px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: #fff; cursor: pointer;
}
#rn-chat .rnc-zu:hover { background: rgba(255, 255, 255, .14); }

#rn-chat .rnc-verlauf {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px; background: var(--rnc-hell);
}

#rn-chat .rnc-einwilligung {
  padding: 20px; border: 1px solid var(--rnc-linie); border-radius: 12px; background: #fff;
  color: var(--rnc-text); font-size: 15px; line-height: 1.6;
}
#rn-chat .rnc-einwilligung p { margin: 0 0 12px; padding: 0; }
#rn-chat .rnc-einwilligung .rnc-e-titel { margin-bottom: 6px; font-size: 16px; font-weight: 700; color: var(--rnc-dunkel); }
#rn-chat .rnc-aktivieren {
  display: block; width: 100%; min-height: 48px; margin: 18px 0 0; padding: 12px 18px;
  border: 0; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 700; color: #fff; background: var(--rnc-dunkel);
}
#rn-chat .rnc-aktivieren:hover { background: #13307A; }
#rn-chat .rnc-e-link { display: inline-block; margin-top: 12px; font-size: 14px; color: #3D5A80; text-decoration: underline; }

#rn-chat .rnc-blase {
  max-width: 88%; padding: 11px 14px; border-radius: 14px;
  font-size: 15px; line-height: 1.55; color: var(--rnc-text); overflow-wrap: anywhere;
}
#rn-chat .rnc-blase p { margin: 6px 0; padding: 0; }
#rn-chat .rnc-blase > :first-child { margin-top: 0; }
#rn-chat .rnc-blase > :last-child { margin-bottom: 0; }
#rn-chat .rnc-blase h4 { margin: 12px 0 4px; padding: 0; font-size: 15px; font-weight: 700; color: var(--rnc-dunkel); }
#rn-chat .rnc-blase ul, #rn-chat .rnc-blase ol { margin: 6px 0; padding: 0 0 0 20px; }
#rn-chat .rnc-blase ul { list-style: disc; }
#rn-chat .rnc-blase ol { list-style: decimal; }
#rn-chat .rnc-blase li { margin: 3px 0; padding: 0; }
#rn-chat .rnc-blase code { padding: 0 4px; border-radius: 4px; background: #E8EEF4; font-size: 14px; }
#rn-chat .rnc-bot { align-self: flex-start; background: #fff; border: 1px solid var(--rnc-linie); border-bottom-left-radius: 4px; }
#rn-chat .rnc-nutzer { align-self: flex-end; background: var(--rnc-dunkel); color: #fff; border-bottom-right-radius: 4px; }
#rn-chat .rnc-warte p { color: var(--rnc-grau); font-style: italic; }

/* Eine linke und eine rechte Kante fuer alles im Fenster: Kopf, Verlauf, Eingabe und
   Hinweis stehen auf 20 px (Handy 16 px). Gemessen standen sie vorher auf 20, 20, 12
   und 16 px. Der Schliessen-Knopf ist 44 px breit, sein Kreuz sitzt mit 8 px Rand
   optisch auf derselben rechten Kante. */
#rn-chat .rnc-eingabe {
  display: flex; gap: 8px; padding: 12px 20px 10px; background: #fff; border-top: 1px solid var(--rnc-linie);
}
#rn-chat .rnc-eingabe input {
  flex: 1; min-width: 0; min-height: 46px; margin: 0; padding: 11px 14px;
  border: 1px solid #CBD5E1; border-radius: 10px; background: #fff;
  font: inherit; font-size: 16px; color: var(--rnc-text);
}
#rn-chat .rnc-eingabe input:focus { outline: none; border-color: #3D5A80; box-shadow: 0 0 0 3px rgba(61, 90, 128, .22); }
#rn-chat .rnc-eingabe button {
  flex: 0 0 auto; min-height: 46px; padding: 0 18px; border: 0; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700; color: #fff; background: var(--rnc-dunkel);
}
#rn-chat .rnc-eingabe button:disabled { opacity: .55; cursor: wait; }

#rn-chat .rnc-fuss {
  padding: 0 20px 14px; background: #fff;
  font-size: 12px; line-height: 1.5; color: var(--rnc-grau);
}
#rn-chat .rnc-widerruf {
  display: inline; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: #3D5A80; text-decoration: underline;
}
/* Ohne Eingabezeile (Platzhalter-Zustand) fehlt dem Hinweis sonst der Abstand nach oben. */
#rn-chat .rnc-eingabe[hidden] + .rnc-fuss { padding-top: 12px; border-top: 1px solid var(--rnc-linie); }
#rn-chat .rnc-blase hr { height: 0; margin: 12px 0; border: 0; border-top: 1px solid var(--rnc-linie); }

/* Complianz legt seinen Reiter "Zustimmung verwalten" unten rechts halb unter den
   Bildschirmrand (bottom -35 px, right 40 px) und faehrt ihn beim Ueberfahren auf
   bottom 0 hoch, also genau in den Chat-Knopf (gemessen: 7 px Luft in Ruhe,
   Ueberdeckung beim Hochfahren). Links unten ist auf jeder Breite frei. Die Regel
   steht hier und nicht im Custom-CSS, weil sie nur wegen des Chats noetig ist und mit
   ihm verschwinden soll. */
#cmplz-manage-consent .cmplz-manage-consent { right: auto !important; left: 40px !important; }

/* Handy: Fenster vollflaechig, die Seite dahinter scrollt nicht mit. */
@media (max-width: 560px) {
  #rn-chat .rnc-knopf { right: 16px; bottom: 16px; }
  #rn-chat .rnc-panel { right: 0; bottom: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  #rn-chat .rnc-kopf { padding-left: 16px; padding-right: 4px; }
  #rn-chat .rnc-verlauf { padding: 16px; }
  #rn-chat .rnc-eingabe { padding-left: 16px; padding-right: 16px; }
  #rn-chat .rnc-fuss { padding-left: 16px; padding-right: 16px; }
  html.rnc-offen, html.rnc-offen body { overflow: hidden; }
}