:root {
      --cc-user-message-contrast-color: #fff !important;
    }
    /* Webchat Header-Farbe anpassen */
    [data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-bar {
      background: rgb(0, 100, 75);
    }

    [data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-title {
      color: white;
    }
    /* Transparenter Avatar vom Bot */
    [data-cognigy-webchat-root] [data-cognigy-webchat].webchat ._avatar_ry0w9_1 {
      background-color: transparent !important;
      border-radius: 0; /* Rundungen entfernen, falls sie vorhanden sind */
      overflow: visible; /* Zuschnitte verhindern */
    }

    /* Start Button weiß */
    [data-cognigy-webchat-root] .cognigy-webchat-1jyud0b {
      fill: #fff !important;
    }
    [data-cognigy-webchat-root] .cognigy-webchat-1jyud0b:hover {
      fill: #fff !important;
    }
    [data-cognigy-webchat-root] .cognigy-webchat-1jyud0b:not(.disabled):hover {
      fill: #fff !important;
    }

    /* Homescreen Buttons weiß */
    [data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-homescreen-send-button {
      color: #fff;
    }
    [data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-prev-conversations-send-button {
      color: #fff;
    }
    /* Homescreen Schriftgröße */
    [data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-homescreen-title {
      font-size: 3rem;
      line-height: 1.2;
      margin-top: 6rem;
    }
    /* Homescreen Logo */
    [data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-homescreen-header-logo {
      content: url("https://primeo-energie.ch/magnolia/dam/Chatbot/logo-white.svg");
      display: block;
      width: auto;
      height: 3rem; /* Höhe anpassen, damit das Logo proportional kleiner bleibt */
      margin-top: 1rem; /* Erhöht den Abstand nach oben */
      object-fit: contain;
      border-radius: 0;
    }

    /*
    Das hier sind die CSS Anpassungen für v.3.7
    */
    /* Button & Quick Reply Anpassung */
    /* [data-cognigy-webchat-root] [data-cognigy-webchat].webchat ._button_87uru_1 {
        color: #0abbf0;
        background-color: #fff;
        border: #0abbf0 0.1rem solid;
    }
    [data-cognigy-webchat-root] [data-cognigy-webchat].webchat ._button_87uru_1:hover {
        color: #fff;
        background-color: #0abbf0;
        border: #0abbf0 0.1rem solid;
    }

    [data-cognigy-webchat-root] [data-cognigy-webchat].webchat ._button_87uru_1:disabled {
        opacity: 0.3;
    }
    [data-cognigy-webchat-root] [data-cognigy-webchat].webchat ._button_87uru_1 path {
        fill: #0abbf0;
        color: #0abbf0;
    }
    [data-cognigy-webchat-root] [data-cognigy-webchat].webchat ._button_87uru_1:hover path {
        fill: #fff;
        color: #fff;
    } */

    [data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-buttons-template-button {
      margin-bottom: 10px;
    }

    /*
    Das hier sind die CSS Anpassungen für v.3.16
    */
    /* Button & Quick Reply Anpassung */
    [data-cognigy-webchat-root] [data-cognigy-webchat].webchat ._button_1ukty_1 {
      color: #0abbf0;
      background-color: #fff;
      border: #0abbf0 0.1rem solid;
    }
    [data-cognigy-webchat-root] [data-cognigy-webchat].webchat ._button_1ukty_1:hover {
      color: #fff;
      background-color: #0abbf0;
      border: #0abbf0 0.1rem solid;
    }

    [data-cognigy-webchat-root] [data-cognigy-webchat].webchat ._button_1ukty_1:disabled {
      opacity: 0.3;
    }
    [data-cognigy-webchat-root] [data-cognigy-webchat].webchat ._button_1ukty_1 path {
      fill: #0abbf0;
      color: #0abbf0;
    }
    [data-cognigy-webchat-root] [data-cognigy-webchat].webchat ._button_1ukty_1:hover path {
      fill: #fff;
      color: #fff;
    }

    /* Webchat Button und Webchat Window auf linker Seite */
    /*
    Warum "!important"?
    Weil die position sonst von den folgenden Klassen wieder überschrieben wird von left: 2rem zu right: 2rem.
    */
    [data-cognigy-webchat-root] [data-cognigy-webchat] {
      left: 2rem !important;
    }

    [data-cognigy-webchat-root] button[data-cognigy-webchat-toggle] {
      left: 2rem !important;
    }
    /* Schließen-Button (X) und Zurück-Button weiß färben */
    [data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-bar button svg,
    [data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-bar button path {
      fill: #fff !important; /* SVG-Symbole weiß färben */
      color: #fff !important; /* Sicherstellen, dass auch der Text weiß wird */
    }

    /* Hover-Effekt für bessere Sichtbarkeit */
    [data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-bar button:hover {
      opacity: 0.9;
      cursor: pointer;
    }

    /* Logo per Filter weiß färben */
    [data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-bar img {
      filter: grayscale(100%) brightness(0) invert(1) contrast(100%);
      border-radius: 0; /* Entfernt Rundungen, falls diese vorher angewendet wurden */
    }

    #webchatInputMessageInputInTextMode {
      min-height: auto;
    }

    [data-cognigy-webchat-root] article {
      width: auto;
      display: inherit;
    }