.chat-content-wrapper > .chat-right, .chat-content-wrapper > .chat-left {
  width: 65%;
    border-radius: 10px;
    color: #000000;
    padding: .75rem 1.5rem;
    margin-bottom: 1rem;
    position: relative;
}
.chat-content-wrapper > .chat-right *, .chat-content-wrapper > .chat-left *
{
    color: #000000;
}
.chat-content-wrapper > .chat-right p:last-of-type, .chat-content-wrapper > .chat-left p:last-of-type
{
    margin-bottom: 0;
}
.chat-content-wrapper > .chat-left {
    float: left;
    background-color: #FFFFFF;
    position: relative;
    margin-left: .5rem; /* Platz für das größere Dreieck links einrücken */
}

.chat-content-wrapper > .chat-left::after {
    content: '';
    position: absolute;
    bottom: .5rem; /* Abstand vom unteren Rand der Sprechblase */
    left: -1.2rem;; /* Position außerhalb der Sprechblase */
    width: 0; /* Kein tatsächlicher Inhalt */
    height: 0; /* Kein tatsächlicher Inhalt */
    border: .6rem solid transparent; /* Größeres Dreieck */
    border-right-color: #FFFFFF; /* Farbe des Dreiecks */
}

.chat-content-wrapper > .chat-right {
    float: right;
    background-color: #D4EDFC;
    position: relative;
    margin-right: .5rem; /* Platz für das größere Dreieck rechts einrücken */
}

.chat-content-wrapper > .chat-right::after {
    content: '';
    position: absolute;
    bottom: .5rem; /* Abstand vom unteren Rand der Sprechblase */
    right: -1.2rem;; /* Position außerhalb der Sprechblase */
    width: 0; /* Kein tatsächlicher Inhalt */
    height: 0; /* Kein tatsächlicher Inhalt */
    border: .6rem solid transparent; /* Größeres Dreieck */
    border-left-color: #D4EDFC; /* Farbe des Dreiecks */
}