/* =====================================================================
   CMS6 "Typ: Chat"-CSS  KOMPLETT (gradwerk, Vorlage 2260)  Stand 2026-07-03j
   ---------------------------------------------------------------------
   VOLLSTAENDIGES Chat-CSS zum Einfuegen im CMS unter
   Core Data > Templates > Chat > Tab "CSS" (kompletten Inhalt ersetzen).

   Aufbau:
   1) Basis-Textchat-CSS (unveraendert aus der Live-Vorlage uebernommen)
   2) Realtime-/Sprachagent-Ergaenzung (ElevenLabs-Look), Stand j:
      - Textmarker mark.gcms_rtc_mark, Kontrastmodus html.gcms_rtc_contrast
      - Seitenaktions-Highlight, kompakte Kopfleiste, Orb, Steuerleiste

   WICHTIG: Die Realtime-Ergaenzung NIE allein einfuegen - ohne den
   Basis-Teil verliert das Chatfenster saemtliche Styles.
   ===================================================================== */

:root{--gcms-chat-color-border-chatoutside:transparent;--gcms-chat-radius-header-footer:10px;--gcms-chat-color-primary:#008fd5;--gcms-chat-color-primary-text:#fff;--gcms-chat-bubble-fontsize:16px;--gcms-chat-bubble-lineheight:1.5;--gcms-chat-bubble-background-color:#f7f7f7;--gcms-chat-bubble-border:0;--gcms-chat-userbubble-background-color:transparent;--gcms-chat-userbubble-font-color:#000;--gcms-chat-userbubble-border:1px solid #008fd5;--gcms-chat-chatgroesse:450px;--gcms-chat-input-fontsize:16px;--gcms-chat-window-background-color:#fff;--gcms-chat-window-background-box-shadow:0 5px 40px 0 rgba(0,0,0,.16);--gcms-chat-waveform-bg-color:#fff;--gcms-chat-waveform-bar-color:#008fd5;--gcms-chat-visualizer-width:200px;--gcms-chat-visualizer-height:30px;--gcms-chat-waveform-bar-width:4px;--gcms-chat-waveform-bar-gap:2px;--gcms-chat-stern-fill:#fff;--gcms-chat-stern-fill-hover:#ffcc01;--gcms-chat-stern-stroke:#000;--gcms-rtc-bg:#f6f8fb;--gcms-rtc-bg-soft:rgba(246,248,251,.94);--gcms-rtc-text:#1f2937;--gcms-rtc-muted:#667085;--gcms-rtc-primary:#228be6;--gcms-rtc-primary-soft:#9ed8ff;--gcms-rtc-listening:#22c55e;--gcms-rtc-speaking:#a855f7;--gcms-rtc-danger:#ef4444;--gcms-rtc-white:#fff;--gcms-rtc-shadow:0 18px 48px rgba(15,23,42,.18);--gcms-rtc-bubble-bg:#fff;--gcms-rtc-bubble-text:#1f2937}hidden,html:not(.gcms_chat_ended) #chat_beendet,.gcms_chat_sound_on .sound_aus,.gcms_chat_sound_off .sound_an,.gcms_chat_speech_off .speech_on,.gcms_chat_speech_on .speech_off,.gcms_chat_speech_inactive .speech_on,.gcms_chat_speech_inactive .speech_off,.gcms_chat_speech_on .speech_inactive,.gcms_chat_speech_off .speech_inactive{-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;clip:rect(1px 1px 1px 1px) !important;clip:rect(1px,1px,1px,1px) !important;height:1px !important;overflow:hidden !important;position:absolute !important;white-space:nowrap !important;width:1px !important;display:none !important}.gcms_chat_gif_box>label{clip-path:inset(100%);clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}#gcms_chat_box button,#gcms_chat_rating button,button#gcms_chat_bubble,button.gcms_chat_close{width:auto;display:inline-block;text-decoration:none;background:none;border:0;cursor:pointer;font-size:inherit}.gcms_chat{position:fixed;bottom:20px;right:20px}#gcms_chat_box,#gcms_chat_rating,#gcms_chat_text{z-index:200000;width:var(--gcms-chat-chatgroesse,320px);box-shadow:var(--gcms-chat-window-background-box-shadow,none);background:linear-gradient(to bottom,#008fd5 0,#008fd5 249px,#fff 250px);border-radius:10px}#gcms_chat_bubble{z-index:200000;width:100px;height:100px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;border-radius:10px;background:#008fd5;box-shadow:0 2px 8px 0 rgba(0,0,0,.06),0px 0 6px 2px rgba(0,0,0,.12);width:88px;height:88px}#gcms_chat_error{background-color:#fff;color:red;padding:5px}.gcms_chat_header{height:50px;background-color:transparent;display:flex;align-items:center;border-radius:var(--gcms-chat-radius-header-footer,15px) var(--gcms-chat-radius-header-footer,15px) 0 0;justify-content:flex-end;border-style:solid;border-color:var(--gcms-chat-color-border-chatoutside,#dedede);border-width:1px 1px 0 1px;padding-right:10px}.gcms_chat_header a{color:#fff;font-size:14px;margin:0 5px;display:flex;justify-content:center;align-items:center;width:25px;height:42px}.gcms_chat_header_r{display:flex;align-items:center;justify-content:flex-end;width:50%}.gcms_chat_header_l{display:flex;align-items:center;justify-content:flex-start;width:50%}.gcms_chat_box_headline{font-size:40px;font-style:normal;font-weight:400;line-height:1;padding:10px 16px;color:#fff}.gcms_chat_box_headline span{display:block;opacity:.7}#gcms_chat_rating .gcms_chat_box_headline{font-size:32px}a.gcms_chat_close{margin-right:15px}.gcms_chat_close svg{width:15px;height:15px}.gcms_chat_minimize svg{vertical-align:super}.gcms_chat_content{overflow-y:auto;overflow-x:hidden;background-color:#fff;padding:10px;margin:0 10px 10px;min-height:370px;max-height:650px;height:37vh;border-radius:10px;box-shadow:0 0 2px 1px rgba(0,0,0,.2)}#gcms_chat_messageboard{font-size:var(--gcms-chat-bubble-fontsize,14px)}#gcms_chat_messageboard p,#gcms_chat_text p{font-size:var(--gcms-chat-bubble-fontsize,14px);line-height:var(--gcms-chat-bubble-lineheight,1.5);padding:0;margin:0;font-size:16px;font-style:normal;font-weight:400;line-height:120%}#gcms_chat_rating .gcms_chat_content{display:flex;align-items:flex-start;padding-top:15px}#gcms_chat_rating .gcms_chat_content>div{width:100%;text-align:center}#gcms_chat_status{color:#ffff;font-size:13px;width:50%;padding-left:16px}.gcms_chat_options{padding-bottom:25px}.gcms_chat_first_typing{margin-top:10px}.gcms_chat_ownmsg,.gcms_chat_othermsg,.gcms_chat_msg{margin-bottom:15px}.gcms_chat_msg{margin-bottom:10px}.gcms_chat_msginner{border-radius:6px;background:#f7f7f7;padding:10px 20px 20px;display:flex;flex-wrap:wrap}.gcms_chat_ownmsg{margin-left:60px;display:flex;justify-content:flex-end}.gcms_chat_ownmsg .gcms_chat_msginner{background-color:var(--gcms-chat-userbubble-background-color,#008fd5);color:var(--gcms-chat-userbubble-font-color,#fff);border:var(--gcms-chat-userbubble-border,none);border-radius:6px;padding:10px 20px;font-size:16px;font-style:normal;font-weight:400;line-height:1.125}.gcms_chat_othermsg{max-width:360px;display:flex;justify-content:flex-start}.gcms_chat_othermsg .gcms_chat_msginner{background-color:var(--gcms-chat-bubble-background-color,#f4f4f4);color:#000;border:var(--gcms-chat-bubble-border,none)}.gcms_chat_othermsg_mitbild .gcms_chat_msginner,.gcms_chat_othermsg_ohnebild .gcms_chat_msginner{padding-bottom:10px}.gcms_chat_sendername{width:100%;color:#686868;font-family:"Cera Pro";font-size:13px;font-style:normal;font-weight:500;line-height:120%;padding-bottom:10px}.gcms_chat_sendername:empty{display:none}.gcms_chat_senderimg{width:32px}.gcms_chat_senderimg img,.gcms_chat_senderimg lottie{width:22px;height:auto;border-radius:50%}.gcms_chat_sendertext{width:calc(100% - 32px)}.gcms_chat_time{text-align:center;color:#888;font-size:12px;padding-bottom:6px}.gcms_chat_system{margin-bottom:10px;text-align:center;font-size:10px;color:#aaa}.gcms_chat_button,.gcms_chat_url{color:#333;background-color:#fff;display:inline-block;margin:5px 10px 5px 0;user-select:none;font-size:13px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:.26px;border-radius:10px;border:.3px solid #828282;padding:5px 14px}.gcms_chat_button:hover,.gcms_chat_url:hover{opacity:.5}.gcms_chat_url{text-decoration:none}.gcms_chat_extbild{width:150px}.gcms_chat_extbild img{width:100%;height:auto;border-radius:0;margin:5px 0}div[data-user="welcome"] .gcms_chat_othermsg{padding-top:15px}.gcms_chat_newmessage .gcms_chat_ownmsg{animation:gcms_chat_slide-in-right .3s ease forwards}.gcms_chat_newmessage .gcms_chat_othermsg{animation:gcms_chat_slide-in-left .3s ease forwards}@keyframes gcms_chat_slide-in-left{from{transform:translateX(-100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes gcms_chat_slide-in-right{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}.gcms_chat_footer{height:70px;background-color:#fff;border-radius:0 0 var(--gcms-chat-radius-header-footer,15px) var(--gcms-chat-radius-header-footer,15px);display:flex;align-items:center}#gcms_chat_rating .gcms_chat_footer,#gcms_chat_text .gcms_chat_footer{border-top:1px solid #fff}#gcms_chat_messagebox{display:flex;border:.3px solid #898989;border-radius:10px;margin:0 10px 10px;height:44px;width:100%;padding-right:10px;padding-left:10px;justify-content:space-between}#gcms_chat_messagebox>div{display:block}.gcms_chat_textarea{width:90%;padding:0 0 0 5px;display:flex;align-items:center}#gcms_chat_message{border:0;outline:0;padding:0;width:100%;font-size:var(--gcms-chat-input-fontsize,14px);height:32px;resize:none;padding-top:12px;overflow:hidden;line-height:1.2;background:none}#gcms_chat_sendbtn{width:21px;vertical-align:middle}#gcms_chat_waveform{position:absolute;bottom:35px;left:20px;width:200px;height:20px;z-index:200001}#waveformCanvas{width:var(--gcms-chat-visualizer-width);height:var(--gcms-chat-visualizer-height)}#gcms_chat_audioplay{border:0;background-color:#008fd5;color:#fff;padding:3px 5px}button.gcms_chat_audioplay{border-radius:5px;background-color:#008fd5 !important;padding:6px 34px 6px 14px;color:#fff;font-size:14px !important;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.2px;background-repeat:no-repeat !important;background-position:right 14px center !important;background-image:url(/upload/img/chat_play.svg) !important;margin-top:14px}#gcms_chat_gifbtn{width:30px;vertical-align:middle}.gcms_chat_soundtoggle{margin-right:10px}#gcms_chat_typing{display:flex}.gcms_chat_typing-sender{display:block}.gcms_chat_typing-sender:empty{display:none}.gcms_chat_typing-indicator{display:flex;align-items:center;padding:0 0 10px 5px}.gcms_chat_typing_dot{width:8px;height:8px;background-color:#008fd5;border-radius:50%;margin:0 2px;animation:gcms_chat_bounce 1s infinite}.gcms_chat_typing_dot:nth-child(2){animation-delay:.2s}.gcms_chat_typing_dot:nth-child(3){animation-delay:.4s}@keyframes gcms_chat_bounce{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-5px)}60%{transform:translateY(-3px)}}#gcms_chat_wait{height:8px;aspect-ratio:5;--_g:no-repeat radial-gradient(farthest-side,#008fd5 94%,#0000);background:var(--_g),var(--_g),var(--_g),var(--_g);background-size:20% 100%;animation:l40-1 .75s infinite alternate,l40-2 1.5s infinite alternate}@keyframes l40-1{0%,10%{background-position:0 0%,0 0%,0 0%,0 0}33%{background-position:0 0%,calc(100%/3) 0%,calc(100%/3) 0%,calc(100%/3) 0}66%{background-position:0 0%,calc(100%/3) 0%,calc(2*100%/3) 0%,calc(2*100%/3) 0}90%,100%{background-position:0 0%,calc(100%/3) 0%,calc(2*100%/3) 0%,100% 0}}@keyframes l40-2{0%,49.99%{transform:scale(1)}50%,100%{transform:scale(-1)}}#gcms_chat_bewertung{display:flex;flex-direction:row;justify-content:center;padding:16px 0;border-radius:10px;background:#fff;box-shadow:0 4px 2px 0 rgba(0,0,0,.06),0px 0 2px 0 rgba(0,0,0,.12);margin-top:15px}#gcms_chat_rating::after{position:absolute;width:0;height:0;overflow:hidden;z-index:-1;content:url(/upload/img/chat_hover.png)}.gcms_bewertung_star{width:50px;height:50px;cursor:pointer;background-repeat:no-repeat;background-image:url(/upload/img/chat_norm.png);background-size:50px auto;transition:fill .2s,transform .3s;margin:0 5px;will-change:transform}.gcms_bewertung_star.hover{background-image:url(/upload/img/chat_hover.png)}.gcms_bewertung_star svg{width:100%;height:100%;fill:var(--gcms-chat-stern-fill,#fff);stroke:var(--gcms-chat-stern-stroke,#000);stroke-width:1px;transition:fill .2s,transform .3s;transform-origin:center}.gcms_bewertung_star.selected svg{fill:gold;transform:scale(1.1)}.gcms_bewertung_star.hover svg,.gcms_bewertung_star.selected.hover svg{fill:var(--gcms-chat-stern-fill-hover,gold);transform:scale(1.1)}#gcms_chat_gif_modal{display:none;position:fixed;right:20px;bottom:90px;width:var(--gcms-chat-chatgroesse,320px);height:300px;background-color:white;border:1px solid #dedede;z-index:200001}.gcms_chat_gif_box{padding:5px 15px}#gcms_chat_gif_input{width:100%;padding:0 20px;height:32px;margin-bottom:10px;outline:0;font-size:16px;border:1px solid #dedede;border-radius:20px}#gcms_chat_gif_results{display:flex;flex-wrap:wrap;gap:10px;height:250px;overflow-y:auto}.gcms_chat_gif_dimg{width:125px;height:125px;background-position:center;background-repeat:no-repeat;background-size:contain;background-color:#dedede;cursor:pointer;border:0}.gcms_chat_doopen{transform:translateY(0);opacity:1;animation:openChat .5s ease}.gcms_chat_doclose{transform:translateY(500px);opacity:0;transition:opacity .3s ease,transform .3s ease}@keyframes openChat{from{transform:translateY(500px);opacity:0}to{transform:translateY(0);opacity:1}}@media(max-width:600px){:root{--gcms-chat-chatgroesse:90%}#gcms_chat_sendbtn svg,#gcms_chat_gifbtn svg,.gcms_chat_speechbtn svg{width:35px;height:auto}#gcms_chat_messagebox{padding-right:0}#gcms_chat_sendbtn,#gcms_chat_gifbtn,.gcms_chat_speechbtn{margin:0;padding:0 6px}#gcms_chat_message{height:45px;padding-top:11px}}@media(max-width:420px){:root{--gcms-chat-visualizer-width:160px}}@media(max-height:628px){.gcms_chat_box_headline{display:none}}@media(max-height:530px){.gcms_chat_content{min-height:250px}}

/* =====================================================================
   CMS6 Chat2 - Realtime / Sprachagent CSS-Ergaenzung
   ---------------------------------------------------------------------
   Diese Datei ist eine Vorlage fuer das CMS-verwaltete "Typ: Chat"-CSS.

   WICHTIG (Stand 2026-07): chat2.js injiziert diese Regeln inzwischen
   selbst als Baseline (<style id="gcms_rtc_basecss">, ganz vorn im <head>).
   Das Widget sieht damit ueberall nach ElevenLabs-Vorbild aus, OHNE dass
   das Kunden-CSS angepasst werden muss. Diese Datei dient als Referenz/
   Kopiervorlage: Regeln hieraus im CMS-Chat-CSS ueberschreiben, um das
   Realtime-Design je Instanz zu themen (das CMS-CSS laedt NACH der
   Baseline und gewinnt bei gleicher Spezifitaet).

   Ziel:
   - Textchat bleibt Basis.
   - Realtime nutzt eigene .gcms_rtc_* Klassen.
   - Andere Chatblase im Realtime-Modus (#gcms_chat_bubble.gcms_rtc_bubble,
     pulsierender Ring).
   - Pulsierender Orb im Fenster (gcms_rtc_orb, Zustaende connecting/
     listening/speaking).
   - Alte Spracheingabe/Tonausgabe (Textchat-Modus) wird in Realtime
     ausgeblendet.
   - "Text"-Button schaltet auf ein kleineres Textfenster um
     (.gcms_rtc_text_visible: Orb schrumpft in eine Kopfleiste,
     Verlauf + Eingabe werden sichtbar).
   ===================================================================== */

:root {
  --gcms-rtc-bg: #f6f8fb;
  --gcms-rtc-bg-soft: rgba(246, 248, 251, 0.94);
  --gcms-rtc-text: #1f2937;
  --gcms-rtc-muted: #667085;
  --gcms-rtc-primary: #228be6;
  --gcms-rtc-primary-soft: #9ed8ff;
  --gcms-rtc-listening: #22c55e;
  --gcms-rtc-speaking: #a855f7;
  --gcms-rtc-danger: #ef4444;
  --gcms-rtc-white: #ffffff;
  --gcms-rtc-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
}

/* ---------------------------------------------------------------------
   Realtime ist verfuegbar, aber noch nicht aktiv:
   Footer-Button anzeigen, alte Textchat-Sprachcontrols ausblenden.
   --------------------------------------------------------------------- */
#gcms_chat_box.gcms_rtc_available .gcms_chat_speechbtn,
#gcms_chat_box.gcms_rtc_available .gcms_chat_soundtoggle {
  display: none !important;
}

#gcms_chat_box .gcms_rtc_voicebtn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  padding: 0 !important;
  margin: 0 8px 0 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--gcms-rtc-primary) !important;
  color: var(--gcms-rtc-white) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 22px rgba(34, 139, 230, 0.28) !important;
  cursor: pointer !important;
}

#gcms_chat_box .gcms_rtc_launch_orb {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: block;
  background: radial-gradient(circle, #fff 0%, #dff4ff 40%, var(--gcms-rtc-primary-soft) 75%, var(--gcms-rtc-primary) 100%);
  box-shadow: 0 0 0 0 rgba(158, 216, 255, 0.65);
  animation: gcmsRtcLaunchPulse 1.7s infinite ease-out;
}

#gcms_chat_box.gcms_rtc_on .gcms_rtc_voicebtn {
  display: none !important;
}

/* ---------------------------------------------------------------------
   Andere Chatblase im Realtime-Modus: geschlossener Launcher pulsiert
   (Klasse wird von chat2.js gesetzt, wenn ki_modus=realtime).
   --------------------------------------------------------------------- */
/* Klassischer Textchat-Launcher. Die :not()-Abgrenzung ist absichtlich
   strikt, damit die Sprachagent-Pill ihr eigenes Erscheinungsbild behaelt. */
#gcms_chat_bubble:not(.gcms_rtc_bubble) {
  width: 68px !important;
  height: 68px !important;
  min-width: 68px;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  border-radius: 50% !important;
  background: var(--gcms-chat-color-primary, #008fd5) !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--gcms-chat-color-primary, #008fd5) 82%, white), var(--gcms-chat-color-primary, #008fd5)) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .22), 0 3px 8px rgba(0, 143, 213, .24) !important;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  overflow: hidden;
}

#gcms_chat_bubble:not(.gcms_rtc_bubble):hover,
#gcms_chat_bubble:not(.gcms_rtc_bubble):focus-visible {
  transform: translateY(-2px) scale(1.035);
  filter: saturate(1.08);
  box-shadow: 0 16px 34px rgba(15, 23, 42, .27), 0 4px 10px rgba(0, 143, 213, .28) !important;
}

#gcms_chat_bubble:not(.gcms_rtc_bubble) > svg {
  /* Das Bestandssymbol besitzt teils keinen viewBox. width/height würden
     dann nur einen Ausschnitt abschneiden; die komplette Originalfläche
     stattdessen proportional herunterskalieren. */
  width: 68px !important;
  height: 68px !important;
  max-width: none !important;
  max-height: none !important;
  flex: 0 0 68px;
  transform: scale(.48);
  transform-origin: center;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .12));
}

@media (max-width: 420px) {
  #gcms_chat_bubble:not(.gcms_rtc_bubble) {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px;
  }
  #gcms_chat_bubble:not(.gcms_rtc_bubble) > svg {
    transform: scale(.43);
  }
}

#gcms_chat_bubble.gcms_rtc_bubble {
  animation: gcmsRtcBubbleBreath 2.4s infinite ease-in-out;
}

#gcms_chat_bubble.gcms_rtc_bubble:focus-visible {
  outline: 3px solid var(--gcms-rtc-primary) !important;
  outline-offset: 4px !important;
}

#gcms_chat_bubble.gcms_rtc_bubble::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 2px solid var(--gcms-rtc-primary-soft);
  opacity: 0.8;
  animation: gcmsRtcRing 2.2s infinite ease-out;
  pointer-events: none;
}

/* Geschlossene Blase als Pill: pulsierender Orb + Text
   "Mit einem Agenten sprechen" statt Sprechblasen-Icon (ElevenLabs-Look).
   Orb + Label werden von chat2.js (rtcDecorateBubble) eingehaengt. */
#gcms_chat_bubble.gcms_rtc_bubble {
  width: auto !important;
  height: auto !important;
  padding: 14px 22px 14px 16px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: var(--gcms-rtc-bubble-bg, #fff) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18) !important;
}

#gcms_chat_bubble.gcms_rtc_bubble > svg {
  display: none !important;
}

#gcms_chat_bubble.gcms_rtc_bubble .gcms_rtc_bubble_orb {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 999px;
  display: block;
  background: radial-gradient(circle, #fff 0%, #dff4ff 40%, var(--gcms-rtc-primary-soft) 75%, var(--gcms-rtc-primary) 100%);
  box-shadow: 0 0 0 0 rgba(158, 216, 255, 0.65);
  animation: gcmsRtcLaunchPulse 1.7s infinite ease-out;
}

#gcms_chat_bubble.gcms_rtc_bubble .gcms_rtc_bubble_label {
  color: var(--gcms-rtc-bubble-text, var(--gcms-rtc-text, #1f2937));
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

@media (max-width: 420px) {
  #gcms_chat_bubble.gcms_rtc_bubble {
    padding: 12px 16px 12px 12px !important;
  }
  #gcms_chat_bubble.gcms_rtc_bubble .gcms_rtc_bubble_label {
    font-size: 13px;
  }
}

/* ---------------------------------------------------------------------
   Aktiver Realtime-Modus: Overlay sitzt im bestehenden Chatfenster.
   Footer/Textfeld bleibt darunter erreichbar.
   --------------------------------------------------------------------- */
/* WICHTIG: NIEMALS position:relative auf die Box setzen! Das wuerde das
   position:fixed der Basis (.gcms_chat) ueberschreiben und das Fenster
   in den Seitenfluss (unten links unter der Website) kippen. position:
   fixed hier bewusst explizit, damit diese Regel auch eine evtl. aeltere
   von chat2.js injizierte Baseline (position:relative) sicher gewinnt;
   bottom/right kommen weiterhin aus .gcms_chat. Das fixe Fenster ist
   selbst Anker fuer das absolute Overlay.
   background:#fff neutralisiert den blauen Kopf-Verlauf der Basis -
   sonst bleibt im Text-Modus ein grosses blaues Band sichtbar. */
#gcms_chat_box.gcms_rtc_on {
  position: fixed;
  overflow: hidden;
  background: #fff !important;
  width: min(500px, calc(100vw - 24px)) !important;
}

/* Headline ("Hallo, kann ich helfen?") im Realtime-Modus komplett
   entfernen (display:none, damit auch ihr Platz kollabiert). */
#gcms_chat_box.gcms_rtc_on .gcms_chat_box_headline {
  display: none !important;
}

/* Basis-Header (Minimieren/Schliessen) ueber dem Overlay halten;
   die leere Flaeche darf keine Klicks schlucken. */
#gcms_chat_box.gcms_rtc_on .gcms_chat_header {
  position: relative;
  z-index: 70;
  background: transparent;
  pointer-events: none;
}

#gcms_chat_box.gcms_rtc_on .gcms_chat_header button,
#gcms_chat_box.gcms_rtc_on .gcms_chat_header a {
  pointer-events: auto;
  color: var(--gcms-rtc-muted) !important;
}

/* Minimieren/Schliessen sind im Template weiss (fuer den blauen Header) -
   im hellen Realtime-Overlay unsichtbar. fill auch auf den SVG-Kindern
   erzwingen, da inline fill="#fff" auf den Pfaden nicht vom svg-Selektor
   ueberschrieben wird. */
#gcms_chat_box.gcms_rtc_on .gcms_chat_header svg,
#gcms_chat_box.gcms_rtc_on .gcms_chat_header svg * {
  fill: var(--gcms-rtc-muted) !important;
}

#gcms_chat_box.gcms_rtc_on .gcms_chat_header svg [stroke] {
  stroke: var(--gcms-rtc-muted) !important;
}

#gcms_chat_box.gcms_rtc_on .gcms_chat_header a:hover svg,
#gcms_chat_box.gcms_rtc_on .gcms_chat_header a:hover svg *,
#gcms_chat_box.gcms_rtc_on .gcms_chat_header button:hover svg,
#gcms_chat_box.gcms_rtc_on .gcms_chat_header button:hover svg * {
  fill: var(--gcms-rtc-text) !important;
}

#gcms_chat_box .gcms_rtc_overlay {
  position: absolute;
  inset: 0 0 70px 0;
  z-index: 40;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 42%, rgba(158, 216, 255, 0.46) 0%, rgba(246, 248, 251, 0.9) 42%, var(--gcms-rtc-bg) 100%);
  color: var(--gcms-rtc-text);
  transition: inset 0.25s ease;
}

/* Three.js liegt als rein visuelle, nicht interaktive Ebene unter Bedienung
   und Text. Ohne erfolgreich geladenes WebGL greifen diese Regeln nicht. */
#gcms_chat_box .gcms_rtc_three_canvas {
  position: absolute;
  inset: 0;
  z-index: 41;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#gcms_chat_box .gcms_rtc_three_loading .gcms_rtc_orb,
#gcms_chat_box .gcms_rtc_three_loading .gcms_rtc_action_bubble {
  visibility: hidden !important;
}

#gcms_chat_box .gcms_rtc_three_ready .gcms_rtc_orb {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

#gcms_chat_box .gcms_rtc_three_ready .gcms_rtc_orb::before,
#gcms_chat_box .gcms_rtc_three_ready .gcms_rtc_orb::after,
#gcms_chat_box .gcms_rtc_three_ready .gcms_rtc_orbparticles,
#gcms_chat_box .gcms_rtc_three_ready .gcms_rtc_orbflare,
#gcms_chat_box .gcms_rtc_three_ready .gcms_rtc_orbshell,
#gcms_chat_box .gcms_rtc_three_ready .gcms_rtc_orbcore,
#gcms_chat_box .gcms_rtc_three_ready .gcms_rtc_orblevel {
  opacity: 0 !important;
  animation: none !important;
}

#gcms_chat_box:not(.gcms_rtc_text_visible) .gcms_rtc_three_ready .gcms_rtc_action_bubble {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#gcms_chat_box:not(.gcms_rtc_text_visible) .gcms_rtc_three_ready .gcms_rtc_action_bubble::after {
  display: none;
}

/* Buttons links buendeln (gap statt space-between): rechts oben liegen
   Minimieren/Schliessen aus dem Chat-Header - dort darf kein
   Overlay-Button kollidieren. */
#gcms_chat_box .gcms_rtc_topbar {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 74px;
  z-index: 45;
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}

#gcms_chat_box .gcms_rtc_iconbtn {
  height: 40px !important;
  min-width: 40px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--gcms-rtc-text) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.13) !important;
  pointer-events: auto;
  cursor: pointer;
}

#gcms_chat_box .gcms_rtc_iconbtn:hover {
  background: var(--gcms-rtc-white) !important;
  transform: translateY(-1px);
}

/* "Text"-Button nur im Voice-Fokus, "Stimme"-Button nur im Text-Modus. */
#gcms_chat_box .gcms_rtc_expand {
  display: none !important;
}

#gcms_chat_box.gcms_rtc_text_visible .gcms_rtc_expand {
  display: inline-flex !important;
}

#gcms_chat_box.gcms_rtc_text_visible .gcms_rtc_texttoggle {
  display: none !important;
}

#gcms_chat_box .gcms_rtc_stage {
  position: relative;
  z-index: 42;
  width: 100%;
  max-width: 280px;
  text-align: center;
  transition: all 0.25s ease;
}

#gcms_chat_box .gcms_rtc_consent_start {
  display: none;
  position: absolute;
  z-index: 48;
  left: 50%;
  top: clamp(66px, 18vw, 90px);
  transform: translate(-50%, -50%);
  width: 70px !important;
  height: 70px !important;
  min-width: 70px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: var(--gcms-rtc-text) !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(15,23,42,.22), 0 0 0 8px rgba(255,255,255,.25) !important;
  cursor: pointer;
}
#gcms_chat_box .gcms_rtc_consent_start:hover { transform: translate(-50%, -50%) scale(1.06); }
#gcms_chat_box .gcms_rtc_consent_wait .gcms_rtc_consent_start { display: inline-flex; }
#gcms_chat_box .gcms_rtc_consent_wait .gcms_rtc_topbar,
#gcms_chat_box .gcms_rtc_consent_wait .gcms_rtc_controls { display: none !important; }
#gcms_chat_box.gcms_rtc_consent_gate .gcms_chat_minimize,
#gcms_chat_box.gcms_rtc_consent_open .gcms_chat_minimize {
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Vor Zustimmung bleibt Schliessen (X) bedienbar; Minimieren nicht. */
#gcms_chat_box.gcms_rtc_consent_gate .gcms_chat_close,
#gcms_chat_box.gcms_rtc_consent_open .gcms_chat_close {
  visibility: visible !important;
  pointer-events: auto !important;
}
/* Vor Zustimmung: Nachrichtenzeile, GIF und Senden ausgrauen/sperren. */
#gcms_chat_box.gcms_rtc_consent_gate #gcms_chat_messagebox,
#gcms_chat_box.gcms_rtc_consent_open #gcms_chat_messagebox,
#gcms_chat_box #gcms_chat_messagebox.gcms_rtc_composer_locked {
  opacity: .42 !important;
  filter: grayscale(1) !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}
#gcms_chat_box.gcms_rtc_consent_gate #gcms_chat_message,
#gcms_chat_box.gcms_rtc_consent_open #gcms_chat_message,
#gcms_chat_box #gcms_chat_messagebox.gcms_rtc_composer_locked #gcms_chat_message,
#gcms_chat_box.gcms_rtc_consent_gate #gcms_chat_gifbtn,
#gcms_chat_box.gcms_rtc_consent_open #gcms_chat_gifbtn,
#gcms_chat_box #gcms_chat_messagebox.gcms_rtc_composer_locked #gcms_chat_gifbtn,
#gcms_chat_box.gcms_rtc_consent_gate #gcms_chat_sendbtn,
#gcms_chat_box.gcms_rtc_consent_open #gcms_chat_sendbtn,
#gcms_chat_box #gcms_chat_messagebox.gcms_rtc_composer_locked #gcms_chat_sendbtn {
  pointer-events: none !important;
  cursor: not-allowed !important;
}
#gcms_chat_box .gcms_rtc_consent_panel {
  position: absolute;
  inset: 18px;
  z-index: 75;
  display: none;
  flex-direction: column;
  max-width: 520px;
  margin: auto;
  padding: 28px 28px 24px;
  border: 1px solid rgba(15,23,42,.1);
  border-radius: 28px;
  background: rgba(255,255,255,.97);
  color: var(--gcms-rtc-text);
  box-shadow: 0 24px 70px rgba(15,23,42,.22);
}
#gcms_chat_box .gcms_rtc_consent_dialog .gcms_rtc_consent_panel { display: flex; }
#gcms_chat_box .gcms_rtc_consent_dialog .gcms_rtc_stage,
#gcms_chat_box .gcms_rtc_consent_dialog .gcms_rtc_action_bubbles { visibility: hidden; }
#gcms_chat_box .gcms_rtc_consent_title { font-size: 20px; font-weight: 750; line-height: 1.25; margin: 0 0 16px; }
#gcms_chat_box .gcms_rtc_consent_text { flex: 1; min-height: 0; overflow: auto; white-space: pre-wrap; font-size: 15px; line-height: 1.58; color: var(--gcms-rtc-muted); }
#gcms_chat_box .gcms_rtc_consent_actions { display: flex; gap: 12px; margin-top: 22px; }
#gcms_chat_box .gcms_rtc_consent_actions button { flex: 1; min-height: 50px !important; padding: 10px 18px !important; border-radius: 999px !important; font-size: 15px; font-weight: 700; cursor: pointer; }
#gcms_chat_box .gcms_rtc_consent_cancel { border: 1px solid rgba(15,23,42,.16) !important; background: #fff !important; color: var(--gcms-rtc-text) !important; }
#gcms_chat_box .gcms_rtc_consent_accept { border: 0 !important; background: var(--gcms-rtc-text) !important; color: #fff !important; }

#gcms_chat_box .gcms_rtc_orb {
  position: relative;
  width: clamp(132px, 36vw, 180px);
  height: clamp(132px, 36vw, 180px);
  margin: 0 auto 22px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 38% 32%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.5) 18%, transparent 30%),
    radial-gradient(circle at 55% 55%, #ffffff 0%, #dff4ff 30%, var(--gcms-rtc-primary-soft) 58%, var(--gcms-rtc-primary) 100%);
  box-shadow:
    0 0 0 16px rgba(34, 139, 230, 0.07),
    0 0 0 32px rgba(34, 139, 230, 0.04),
    0 28px 60px rgba(34, 139, 230, 0.28);
  animation: gcmsRtcOrbBreath 2.25s infinite ease-in-out;
  transition: width 0.25s ease, height 0.25s ease;
}

#gcms_chat_box .gcms_rtc_orb::before,
#gcms_chat_box .gcms_rtc_orb::after {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: inherit;
  border: 1px solid rgba(34, 139, 230, 0.18);
  animation: gcmsRtcRing 2.2s infinite ease-out;
}

#gcms_chat_box .gcms_rtc_orb::after {
  inset: -34px;
  animation-delay: 0.65s;
}

#gcms_chat_box .gcms_rtc_orbcore {
  position: absolute;
  inset: 33%;
  border-radius: inherit;
  background: rgba(255,255,255,0.68);
  filter: blur(1px);
}

#gcms_chat_box .gcms_rtc_orb.gcms_rtc_connecting {
  filter: grayscale(0.12);
}

#gcms_chat_box .gcms_rtc_orb.gcms_rtc_listening {
  box-shadow:
    0 0 0 16px rgba(34, 197, 94, 0.09),
    0 0 0 34px rgba(34, 197, 94, 0.05),
    0 28px 68px rgba(34, 197, 94, 0.34);
}

#gcms_chat_box .gcms_rtc_orb.gcms_rtc_speaking {
  box-shadow:
    0 0 0 16px rgba(168, 85, 247, 0.1),
    0 0 0 34px rgba(168, 85, 247, 0.06),
    0 28px 72px rgba(168, 85, 247, 0.36);
  animation-duration: 1.15s;
}

#gcms_chat_box .gcms_rtc_status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.78);
  color: var(--gcms-rtc-muted);
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

/* Steuerleiste wie im ElevenLabs-Widget: Mute + Auflegen mittig unten. */
#gcms_chat_box .gcms_rtc_controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  pointer-events: none;
}

#gcms_chat_box .gcms_rtc_controls button {
  pointer-events: auto;
}

#gcms_chat_box .gcms_rtc_mute {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--gcms-rtc-text) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16) !important;
  cursor: pointer;
}

#gcms_chat_box .gcms_rtc_mute:hover {
  transform: translateY(-1px);
  background: var(--gcms-rtc-white) !important;
}

#gcms_chat_box .gcms_rtc_mute .gcms_rtc_mute_off {
  display: none;
}

#gcms_chat_box .gcms_rtc_mute.gcms_rtc_muted {
  background: #fee2e2 !important;
  color: var(--gcms-rtc-danger) !important;
}

#gcms_chat_box .gcms_rtc_mute.gcms_rtc_muted .gcms_rtc_mute_on {
  display: none;
}

#gcms_chat_box .gcms_rtc_mute.gcms_rtc_muted .gcms_rtc_mute_off {
  display: inline-flex;
}

/* Lautsprecher-Toggle bleibt in Sprach- und Textansicht erreichbar. */
#gcms_chat_box .gcms_rtc_speaker {
  display: inline-flex !important;
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.92) !important;
  color: var(--gcms-rtc-text) !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(15,23,42,.16) !important;
  cursor: pointer;
}
#gcms_chat_box .gcms_rtc_speaker:hover {
  transform: translateY(-1px);
  background: var(--gcms-rtc-white) !important;
}
#gcms_chat_box .gcms_rtc_speaker .gcms_rtc_speaker_off {
  display: none;
}
#gcms_chat_box .gcms_rtc_speaker.gcms_rtc_speaker_muted {
  background: #fee2e2 !important;
  color: var(--gcms-rtc-danger) !important;
}
#gcms_chat_box .gcms_rtc_speaker.gcms_rtc_speaker_muted .gcms_rtc_speaker_on {
  display: none;
}
#gcms_chat_box .gcms_rtc_speaker.gcms_rtc_speaker_muted .gcms_rtc_speaker_off {
  display: inline-flex;
}

#gcms_chat_box .gcms_rtc_hangup {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--gcms-rtc-danger) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 14px 28px rgba(239, 68, 68, 0.36) !important;
  cursor: pointer;
}

#gcms_chat_box .gcms_rtc_hangup:hover {
  transform: translateY(-1px);
  filter: brightness(0.96);
}

/* Stummes Mikro: Orb entsaettigt, Puls pausiert. */
#gcms_chat_box.gcms_rtc_mic_muted .gcms_rtc_orb {
  filter: grayscale(.94) saturate(.06) brightness(1.03);
}

/* ---------------------------------------------------------------------
   Text im Realtime-Modus ("Text"-Button, wie ElevenLabs):
   Standard = Fokus auf Orb, Verlauf versteckt.
   Toggle = kleineres Textfenster: das Overlay schrumpft zu einer
   Kopfleiste mit Mini-Orb + Status, Verlauf/Tippen werden sichtbar.
   --------------------------------------------------------------------- */
#gcms_chat_box.gcms_rtc_on:not(.gcms_rtc_text_visible) #gcms_chat_messageboard {
  opacity: 0;
  pointer-events: none;
}

#gcms_chat_box.gcms_rtc_on:not(.gcms_rtc_text_visible) #gcms_chat_messagebox {
  position: relative;
  z-index: 60;
}

/* Kompakte Kopfleiste im Textmodus:
   Links: Sprache + Stimme + Info | Rechts: Lautsprecher + Mikro + Auflegen */
#gcms_chat_box.gcms_rtc_on.gcms_rtc_text_visible .gcms_rtc_overlay {
  inset: 0 0 auto 0;
  height: 56px;
  padding: 0 62px 0 8px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.07);
}

#gcms_chat_box.gcms_rtc_on.gcms_rtc_text_visible .gcms_rtc_topbar {
  position: static;
  display: inline-flex;
  align-items: center;
  width: auto;
  gap: 6px;
  pointer-events: auto;
}

#gcms_chat_box.gcms_rtc_on.gcms_rtc_text_visible .gcms_conv_lang_wrap {
  height: 36px !important;
  max-width: 132px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
}

#gcms_chat_box.gcms_rtc_on.gcms_rtc_text_visible .gcms_conv_lang_trigger {
  min-width: 0 !important;
  max-width: 130px !important;
  height: 34px !important;
  padding: 0 10px !important;
}

#gcms_chat_box.gcms_rtc_on.gcms_rtc_text_visible .gcms_rtc_iconbtn {
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 8px !important;
  font-size: 12px;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
  background: var(--gcms-rtc-bg) !important;
}

#gcms_chat_box.gcms_rtc_on.gcms_rtc_text_visible .gcms_rtc_iconbtn svg {
  width: 15px;
  height: 15px;
}

#gcms_chat_box.gcms_rtc_on.gcms_rtc_text_visible .gcms_rtc_infobtn {
  width: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
}

#gcms_chat_box.gcms_rtc_on.gcms_rtc_text_visible .gcms_rtc_stage {
  display: none !important;
}

#gcms_chat_box.gcms_rtc_on.gcms_rtc_text_visible .gcms_rtc_orb {
  display: none !important;
}

#gcms_chat_box.gcms_rtc_on.gcms_rtc_text_visible .gcms_rtc_controls {
  position: static;
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  margin-right: 12px;
  gap: 6px;
}

#gcms_chat_box.gcms_rtc_on.gcms_rtc_text_visible .gcms_rtc_speaker {
  display: inline-flex !important;
}

#gcms_chat_box.gcms_rtc_on.gcms_rtc_text_visible .gcms_rtc_mute,
#gcms_chat_box.gcms_rtc_on.gcms_rtc_text_visible .gcms_rtc_speaker,
#gcms_chat_box.gcms_rtc_on.gcms_rtc_text_visible .gcms_rtc_hangup {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12) !important;
}

#gcms_chat_box.gcms_rtc_on.gcms_rtc_text_visible .gcms_rtc_mute svg,
#gcms_chat_box.gcms_rtc_on.gcms_rtc_text_visible .gcms_rtc_speaker svg,
#gcms_chat_box.gcms_rtc_on.gcms_rtc_text_visible .gcms_rtc_hangup svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 420px) {
  #gcms_chat_box.gcms_rtc_on.gcms_rtc_text_visible .gcms_rtc_btnlabel {
    display: none;
  }
  #gcms_chat_box.gcms_rtc_on.gcms_rtc_text_visible .gcms_conv_lang_wrap {
    max-width: 96px !important;
  }
}

#gcms_chat_box.gcms_rtc_on.gcms_rtc_text_visible #gcms_chat_messageboard {
  position: relative;
  z-index: 39;
  opacity: 1;
  pointer-events: auto;
  margin-top: 16px;
}

#gcms_chat_box.gcms_rtc_on.gcms_rtc_text_visible #gcms_chat_messagebox {
  position: relative;
  z-index: 60;
}

/* Klick- und sprechbare Auswahl als irisierende Seifenblasen über dem Orb. */
#gcms_chat_box .gcms_rtc_action_bubbles {
  position: absolute;
  inset: 66px 22px 86px;
  z-index: 58;
  pointer-events: none;
}

#gcms_chat_box .gcms_rtc_action_bubble {
  --gcms-rtc-bubble-i: 0;
  position: absolute;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  width: min(var(--gcms-rtc-bubble-size, 148px), calc(100vw - 48px)) !important;
  height: min(var(--gcms-rtc-bubble-size, 148px), calc(100vw - 48px)) !important;
  min-width: 118px !important;
  max-width: 176px;
  min-height: 118px;
  max-height: 176px;
  padding: 20px !important;
  border: 1px solid rgba(255,255,255,.86) !important;
  border-radius: 50% !important;
  background: rgba(220,238,255,.86) !important;
  background: radial-gradient(circle at 28% 20%,rgba(255,255,255,.98) 0 9%,rgba(255,255,255,.42) 20%,transparent 34%),linear-gradient(145deg,color-mix(in srgb,var(--gcms-rtc-primary-soft) 44%,rgba(255,255,255,.72)),color-mix(in srgb,var(--gcms-rtc-accent,#a855f7) 28%,rgba(255,255,255,.62))) !important;
  color: var(--gcms-rtc-text) !important;
  box-shadow: inset -9px -10px 20px rgba(255,255,255,.28),inset 7px 7px 16px rgba(255,255,255,.48),0 12px 28px rgba(15,23,42,.16),0 0 18px rgba(158,216,255,.48) !important;
  backdrop-filter: blur(8px) saturate(1.25);
  -webkit-backdrop-filter: blur(8px) saturate(1.25);
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  animation: gcmsRtcSoapIn .55s calc(var(--gcms-rtc-bubble-i) * .09s) cubic-bezier(.2,.8,.2,1) forwards,
             gcmsRtcSoapFloat calc(3.4s + var(--gcms-rtc-bubble-i) * .25s) calc(.6s + var(--gcms-rtc-bubble-i) * -.2s) ease-in-out infinite;
}

#gcms_chat_box .gcms_rtc_action_bubble::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  border-top: 2px solid rgba(255,255,255,.72);
  border-left: 1px solid rgba(255,255,255,.38);
  pointer-events: none;
}

#gcms_chat_box .gcms_rtc_action_bubble:hover,
#gcms_chat_box .gcms_rtc_action_bubble:focus-visible {
  filter: saturate(1.15) brightness(1.04);
  box-shadow: inset -9px -10px 20px rgba(255,255,255,.32),0 16px 34px rgba(15,23,42,.2),0 0 24px var(--gcms-rtc-primary-soft) !important;
}

#gcms_chat_box .gcms_rtc_action_num {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.76);
  font-size: 11px;
  font-weight: 800;
  color: var(--gcms-rtc-primary);
  box-shadow: 0 2px 6px rgba(15,23,42,.12);
}

#gcms_chat_box .gcms_rtc_action_label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px !important;
  font-weight: 700;
  line-height: 1.18;
  text-align: center;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

#gcms_chat_box .gcms_rtc_action_bubble.gcms_rtc_action_selected {
  animation: gcmsRtcSoapChoose .48s ease forwards !important;
}

#gcms_chat_box .gcms_rtc_action_bubble.gcms_rtc_action_pop,
#gcms_chat_box .gcms_rtc_bubbles_leaving .gcms_rtc_action_bubble {
  animation: gcmsRtcSoapPop .34s ease-in forwards !important;
  pointer-events: none;
}

#gcms_chat_box.gcms_rtc_text_visible .gcms_rtc_action_bubbles {
  position: fixed;
  inset: auto 16px 76px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

#gcms_chat_box.gcms_rtc_text_visible .gcms_rtc_action_bubble {
  position: relative;
  left: auto !important;
  top: auto !important;
  transform: none;
  animation: gcmsRtcBubbleBreath 3s ease-in-out infinite;
  opacity: 1;
}

/* Textmarker fuer die Seitensuche des Sprachbots ("Wo finde ich etwas
   ueber X?"): alle Fundstellen werden farbig markiert. */
mark.gcms_rtc_mark {
  background: #ffe66b;
  color: inherit;
  padding: 0 2px;
  border-radius: 3px;
  box-shadow: 0 0 0 2px #ffe66b;
}

/* Barrierefreiheit des Sprachbots (set_accessibility).
   Kontrast/Invert/Graustufen: Filter wird per JS auf #gcms_rtc_contrast_ov
   gesetzt. Links/Lesbarkeit/Ruhe: Klassen auf <html>. Chat liegt darueber. */
#gcms_rtc_contrast_ov {
  position: fixed;
  inset: 0;
  z-index: 199990;
  pointer-events: none;
}

html.gcms_rtc_links a:not(#gcms_chat_box a):not(#gcms_chat_bubble a) {
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

html.gcms_rtc_readable body {
  line-height: 1.7 !important;
  letter-spacing: 0.02em !important;
  word-spacing: 0.04em !important;
}

html.gcms_rtc_readable body p,
html.gcms_rtc_readable body li,
html.gcms_rtc_readable body td,
html.gcms_rtc_readable body th,
html.gcms_rtc_readable body dd,
html.gcms_rtc_readable body blockquote {
  line-height: 1.75 !important;
}

html.gcms_rtc_still *,
html.gcms_rtc_still *::before,
html.gcms_rtc_still *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* Resume nach Seitenwechsel: Chatfenster erst zeigen, wenn das
   Realtime-Overlay drauf ist - verhindert den Textchat-"Blitzer". */
html.gcms_rtc_boot #gcms_chat_box:not(.gcms_rtc_on) {
  visibility: hidden !important;
}

/* Seitenaktions-Highlight: Ziel-Element (Abschnitt/Formularfeld) ausserhalb
   des Widgets kurz markieren (Scroll-/Formular-Aktionen des Sprachbots). */
.gcms_rtc_target_hl {
  outline: 3px solid var(--gcms-rtc-primary-soft) !important;
  outline-offset: 3px;
  border-radius: 4px;
  transition: outline-color 0.4s ease;
  animation: gcmsRtcTargetFade 2.6s ease forwards;
}

#gcms_chat_box .gcms_rtc_iconbtn:focus-visible,
#gcms_chat_box .gcms_rtc_mute:focus-visible,
#gcms_chat_box .gcms_rtc_speaker:focus-visible,
#gcms_chat_box .gcms_rtc_hangup:focus-visible,
#gcms_chat_box .gcms_rtc_infoclose:focus-visible,
#gcms_chat_box .gcms_rtc_voicebtn:focus-visible,
#gcms_chat_box .gcms_rtc_consent_start:focus-visible,
#gcms_chat_box .gcms_rtc_consent_actions button:focus-visible {
  outline: 3px solid var(--gcms-rtc-primary) !important;
  outline-offset: 3px !important;
}

@keyframes gcmsRtcTargetFade {
  0%, 70% { outline-color: var(--gcms-rtc-primary-soft); }
  100% { outline-color: transparent; }
}

@keyframes gcmsRtcLaunchPulse {
  0% { box-shadow: 0 0 0 0 rgba(158, 216, 255, 0.7); transform: scale(1); }
  70% { box-shadow: 0 0 0 13px rgba(158, 216, 255, 0); transform: scale(1.08); }
  100% { box-shadow: 0 0 0 0 rgba(158, 216, 255, 0); transform: scale(1); }
}

@keyframes gcmsRtcOrbBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.055); }
}

@keyframes gcmsRtcBubbleBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@keyframes gcmsRtcRing {
  0% { transform: scale(0.88); opacity: 0.42; }
  75% { opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}

@keyframes gcmsRtcSoapIn {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + 18px)) scale(.55); }
  70% { opacity: 1; transform: translate(-50%, calc(-50% - 4px)) scale(1.06); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes gcmsRtcSoapFloat {
  0%, 100% { transform: translate(-50%, -50%) translateY(0) rotate(-1.2deg); }
  45% { transform: translate(-50%, -50%) translateY(-8px) rotate(1deg); }
  72% { transform: translate(-50%, -50%) translateY(3px) rotate(-.3deg); }
}

@keyframes gcmsRtcSoapPop {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  65% { opacity: .7; transform: translate(-50%, -50%) scale(1.18); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.08); filter: blur(8px); }
}

@keyframes gcmsRtcSoapChoose {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  55% { opacity: 1; transform: translate(-50%, -50%) scale(1.13); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.86); }
}

@media (prefers-reduced-motion: reduce) {
  #gcms_chat_box .gcms_rtc_orb,
  #gcms_chat_box .gcms_rtc_orb::before,
  #gcms_chat_box .gcms_rtc_orb::after,
  #gcms_chat_box .gcms_rtc_orbcore,
  #gcms_chat_bubble.gcms_rtc_bubble::before,
  #gcms_chat_bubble.gcms_rtc_bubble .gcms_rtc_bubble_orb,
  #gcms_chat_box .gcms_rtc_action_bubble {
    animation: none !important;
    transition: none !important;
    opacity: 1;
  }
}

/* Lite-Fallback ohne WebGL: leichte Bewegung ohne Blur-/Filterlast. */
#gcms_chat_box.gcms_rtc_low_power .gcms_rtc_orb,
#gcms_chat_box.gcms_rtc_low_power .gcms_rtc_orb::before,
#gcms_chat_box.gcms_rtc_low_power .gcms_rtc_orb::after,
#gcms_chat_box.gcms_rtc_low_power .gcms_rtc_orbcore,
#gcms_chat_box.gcms_rtc_low_power .gcms_rtc_orbparticles,
#gcms_chat_box.gcms_rtc_low_power .gcms_rtc_orbflare {
  animation: none !important;
  filter: none !important;
}
#gcms_chat_box.gcms_rtc_low_power .gcms_rtc_orb {
  animation: gcmsRtcOrbBreath 3.4s infinite ease-in-out !important;
  will-change: transform;
}
#gcms_chat_box.gcms_rtc_low_power .gcms_rtc_orb.gcms_rtc_listening {
  animation-duration: 2.7s !important;
}
#gcms_chat_box.gcms_rtc_low_power .gcms_rtc_orb.gcms_rtc_speaking {
  animation-duration: 1.65s !important;
}
#gcms_chat_box.gcms_rtc_low_power .gcms_rtc_orb::before {
  animation: gcmsRtcRing 3.4s infinite ease-out !important;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  #gcms_chat_box.gcms_rtc_low_power .gcms_rtc_orb,
  #gcms_chat_box.gcms_rtc_low_power .gcms_rtc_orb::before {
    animation: none !important;
    will-change: auto;
  }
}

@media (max-width: 520px) {
  #gcms_chat_box .gcms_rtc_overlay {
    bottom: 64px;
    padding: 18px;
  }

  #gcms_chat_box .gcms_rtc_orb {
    width: 130px;
    height: 130px;
  }

  #gcms_chat_box .gcms_rtc_controls {
    bottom: 12px;
  }

  #gcms_chat_box .gcms_rtc_speaker,
  #gcms_chat_box .gcms_rtc_mute,
  #gcms_chat_box .gcms_rtc_hangup {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
  }
}

/* Agent-Auren 01-20; --gcms-rtc-level kommt aus dem Bot-Ausgangspegel. */
#gcms_chat_box[class*="gcms_rtc_style_"] .gcms_rtc_orb{--gcms-rtc-level:0;isolation:isolate;filter:saturate(calc(1 + var(--gcms-rtc-level)*.9)) brightness(calc(1 + var(--gcms-rtc-level)*.05))}
#gcms_chat_box[class*="gcms_rtc_style_"] .gcms_rtc_orbcore{transform:scale(calc(.82 + var(--gcms-rtc-level)*.55));transition:transform .07s ease-out}
#gcms_chat_box.gcms_rtc_style_cloud .gcms_rtc_orb{background:radial-gradient(circle at 25% 24%,var(--gcms-rtc-primary),transparent 42%),radial-gradient(circle at 76% 70%,var(--gcms-rtc-accent),transparent 45%),radial-gradient(circle at 28% 78%,#a9c8f0,transparent 43%),#fdfcfa}
#gcms_chat_box.gcms_rtc_style_zephyr .gcms_rtc_orb,#gcms_chat_box.gcms_rtc_style_sorbet .gcms_rtc_orb{background:conic-gradient(from 10deg,var(--gcms-rtc-primary),#c3d9a8,#b7cdf2,var(--gcms-rtc-accent),var(--gcms-rtc-primary));overflow:hidden}
#gcms_chat_box.gcms_rtc_style_dawn .gcms_rtc_orb{background:linear-gradient(180deg,var(--gcms-rtc-primary),#e7d9e8 38%,#f9cfa4 68%,#f6b183)}
#gcms_chat_box.gcms_rtc_style_aquarelle .gcms_rtc_orb,#gcms_chat_box.gcms_rtc_style_inkdrop .gcms_rtc_orb{background:radial-gradient(circle at 25% 28%,var(--gcms-rtc-primary),transparent 38%),radial-gradient(circle at 70% 62%,var(--gcms-rtc-accent),transparent 42%),radial-gradient(circle at 38% 78%,#e08cb0,transparent 35%),radial-gradient(circle at 76% 22%,#e0d47c,transparent 33%),#fdfbf7;background-size:calc(100% + var(--gcms-rtc-level)*35%);animation:gcmsAuraPaint 7s infinite ease-in-out}
#gcms_chat_box.gcms_rtc_style_pearl .gcms_rtc_orb{background:radial-gradient(circle at 35% 28%,#fff,var(--gcms-rtc-primary) 55%,var(--gcms-rtc-accent))}
#gcms_chat_box.gcms_rtc_style_mist .gcms_rtc_orb{background:radial-gradient(circle at 26% 35%,var(--gcms-rtc-primary),transparent 50%),radial-gradient(circle at 72% 63%,var(--gcms-rtc-accent),transparent 52%),#f6f6f8}
#gcms_chat_box.gcms_rtc_style_blossom .gcms_rtc_orb{background:conic-gradient(#f5b8c4,#f7d3a8,#cbe3b4,#b4cff0,#dfc0ea,#f5b8c4)}
#gcms_chat_box.gcms_rtc_style_silk .gcms_rtc_orb{background:repeating-linear-gradient(160deg,#fbfaf7 0 9%,var(--gcms-rtc-primary) 15% 27%,#94cf8a 34% 45%,var(--gcms-rtc-accent) 53% 65%,#d886c0 73% 84%,#fbfaf7 92%);background-size:140% 140%;animation:gcmsAuraSilk 6s infinite ease-in-out}
#gcms_chat_box.gcms_rtc_style_tide .gcms_rtc_orb{background:radial-gradient(ellipse at 50% calc(120% - var(--gcms-rtc-level)*32%),var(--gcms-rtc-primary) 0 32%,var(--gcms-rtc-accent) 54%,transparent 74%),linear-gradient(180deg,#fdfcf9,#eef8f6)}
#gcms_chat_box.gcms_rtc_style_bloom .gcms_rtc_orb{overflow:visible;background:radial-gradient(circle at 40% 34%,#fff,#f6f3ef 56%,var(--gcms-rtc-primary));box-shadow:0 0 calc(18px + var(--gcms-rtc-level)*35px) var(--gcms-rtc-primary),0 0 calc(38px + var(--gcms-rtc-level)*55px) var(--gcms-rtc-accent)}
#gcms_chat_box.gcms_rtc_style_lagoon .gcms_rtc_orb{background:radial-gradient(circle at 32% 28%,#fff,var(--gcms-rtc-accent) 42%,var(--gcms-rtc-primary) 76%,#4a90b8)}
#gcms_chat_box.gcms_rtc_style_ripple .gcms_rtc_orb{background:radial-gradient(circle,#fff 12%,#f8f4ee 62%,var(--gcms-rtc-primary))}
#gcms_chat_box.gcms_rtc_style_ripple .gcms_rtc_orblevel{border:3px solid var(--gcms-rtc-primary);background:transparent;box-shadow:0 0 0 calc(5px + var(--gcms-rtc-level)*18px) color-mix(in srgb,var(--gcms-rtc-accent) 35%,transparent)}
#gcms_chat_box.gcms_rtc_style_ember .gcms_rtc_orb{background:radial-gradient(circle at 45% 65%,#fff8ec,var(--gcms-rtc-accent) 28%,var(--gcms-rtc-primary) 66%,#fdf6ef);box-shadow:0 0 calc(15px + var(--gcms-rtc-level)*35px) var(--gcms-rtc-primary)}
#gcms_chat_box.gcms_rtc_style_orbitv .gcms_rtc_orb{background:radial-gradient(circle,#fff,var(--gcms-rtc-accent) 42%,var(--gcms-rtc-primary) 76%,#f6f4f0)}
#gcms_chat_box.gcms_rtc_style_prism .gcms_rtc_orb{background:conic-gradient(from 200deg,#fff,var(--gcms-rtc-primary),#f8e3a8,#b8e8c8,var(--gcms-rtc-accent),#d8b8f0,#fff)}
#gcms_chat_box.gcms_rtc_style_meadow .gcms_rtc_orb{background:linear-gradient(180deg,var(--gcms-rtc-primary) 0%,color-mix(in srgb,var(--gcms-rtc-primary) 38%,#fff) 48%,color-mix(in srgb,var(--gcms-rtc-accent) 42%,#fff) 72%,var(--gcms-rtc-accent) 100%)}
#gcms_chat_box.gcms_rtc_style_stratus .gcms_rtc_orb{background:radial-gradient(ellipse at 20% 24%,var(--gcms-rtc-primary),transparent 42%),radial-gradient(ellipse at 78% 48%,var(--gcms-rtc-accent),transparent 46%),radial-gradient(ellipse at 38% 82%,#c2d8b0,transparent 43%),#f7f7f6;animation:gcmsAuraCloud 9s infinite ease-in-out}
#gcms_chat_box.gcms_rtc_style_nimbus .gcms_rtc_orb{background:radial-gradient(circle at 30% 26%,var(--gcms-rtc-accent),transparent 48%),radial-gradient(circle at 70% 68%,#9aa8c0,transparent 52%),#f1f0f5}
#gcms_chat_box.gcms_rtc_style_nimbus .gcms_rtc_orblevel{background:radial-gradient(circle,#fff9e0,transparent 70%);opacity:clamp(0,calc((var(--gcms-rtc-level) - .45)*2.4),1)}
@keyframes gcmsAuraPaint{0%,100%{background-position:0 0}50%{background-position:18px -12px}}
@keyframes gcmsAuraSilk{0%,100%{background-position:0 0}50%{background-position:24px -18px}}
@keyframes gcmsAuraCloud{0%,100%{background-position:0 0,0 0,0 0}50%{background-position:14px -8px,-12px 10px,8px 12px}}

/* Abschliessender Stummzustand fuer alle Presets: grau und nur minimal bewegt. */
#gcms_chat_box.gcms_rtc_mic_muted[class*="gcms_rtc_style_"] .gcms_rtc_orb,
#gcms_chat_box.gcms_rtc_mic_muted .gcms_rtc_orb{
  --gcms-rtc-level:.04 !important;
  filter:grayscale(.96) saturate(.04) brightness(1.03) !important;
  animation-duration:10s !important;
  animation-play-state:running !important;
}
#gcms_chat_box.gcms_rtc_mic_muted .gcms_rtc_orb::before,
#gcms_chat_box.gcms_rtc_mic_muted .gcms_rtc_orb::after,
#gcms_chat_box.gcms_rtc_mic_muted .gcms_rtc_orbcore,
#gcms_chat_box.gcms_rtc_mic_muted .gcms_rtc_orblevel{
  animation-duration:12s !important;
  animation-play-state:running !important;
  transition-duration:.8s !important;
}
#gcms_chat_box.gcms_rtc_mic_muted .gcms_rtc_orblevel{
  opacity:.18 !important;
  transform:scale(.78) !important;
}