.ht-chat__starter {
position: fixed;
right: 28px;
bottom: 28px;
z-index: var(--z-chat);
width: 60px;
height: 60px;
padding: 0;
border: 0;
border-radius: 99px;
background: var(--akz);
box-shadow: 0 14px 28px -14px rgba(93, 138, 174, .8);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--schnell) ease, transform var(--schnell) var(--ease);
}
.ht-chat__starter:hover { background: #4A7292; }
.ht-chat__starter:active { transform: scale(.96); } .ht-chat__glyph {
position: relative;
width: 26px;
height: 19px;
border-radius: 7px;
background: var(--weiss);
}
.ht-chat__glyph::after {
content: "";
position: absolute;
left: 5px;
bottom: -5px;
width: 0;
height: 0;
border-left: 7px solid var(--weiss);
border-bottom: 6px solid transparent;
}
.ht-chat__zahl {
position: absolute;
top: -2px;
right: -2px;
width: 20px;
height: 20px;
border-radius: 99px;
background: #C0522A;
border: 2px solid var(--weiss);
color: var(--weiss);
font-size: 11px;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
.ht-chat__zahl[hidden] { display: none; } .ht-chat[data-offen="1"] ~ .ht-chat__starter { opacity: 0; pointer-events: none; } .ht-chat { display: none;
position: fixed;
right: 28px;
bottom: 28px;
z-index: var(--z-chat);
width: 396px;
height: min(668px, calc(100vh - 56px));
background: var(--weiss);
border: 1px solid #E3E7EA;
border-radius: 20px;
box-shadow: 0 30px 70px -34px rgba(28, 31, 34, .45);
overflow: hidden;
overscroll-behavior: contain;
flex-direction: column;
}
.ht-chat[hidden] { display: none; }
.ht-chat[data-offen="1"] { display: flex; } .ht-chat__kopf {
flex: none;
display: flex;
align-items: center;
gap: 12px;
padding: 16px 18px;
background: var(--dunkel);
}
.ht-chat__bild {
flex: none;
width: 40px;
height: 40px;
border-radius: 99px;
background: rgba(255, 255, 255, .09);
border: 1px solid rgba(255, 255, 255, .24);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.ht-chat__bild img { width: 26px; height: auto; }
.ht-chat__wer {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.ht-chat__wer b {
font-size: 15px;
font-weight: 600;
color: var(--weiss);
}
.ht-chat__wer i {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-style: normal;
color: rgba(255, 255, 255, .66);
}
.ht-chat__punkt {
width: 6px;
height: 6px;
border-radius: 99px;
background: #7FB98A;
}
.ht-chat__neu {
padding: 4px;
background: none;
border: 0;
color: rgba(255, 255, 255, .55);
font-family: var(--font-mono);
font-size: 10px;
cursor: pointer;
}
.ht-chat__neu:hover { color: var(--weiss); }
.ht-chat__zu {
padding: 0 2px;
background: none;
border: 0;
color: rgba(255, 255, 255, .55);
font-size: 19px;
line-height: 1;
cursor: pointer;
}
.ht-chat__zu:hover { color: var(--weiss); } .ht-chat__verlauf {
flex: 1;
overflow-y: auto;
padding: 18px;
display: flex;
flex-direction: column;
gap: 12px;
background: var(--flaeche-still); overscroll-behavior: contain;
} .ht-chat__verlauf > * { flex: none; }
.ht-chat__tag {
align-self: center;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--grau-hell);
}
.ht-chat__blase {
max-width: 85%;
padding: 12px 14px;
font-size: 14px;
line-height: 1.5;
text-wrap: pretty;
}
.ht-chat__blase--bot {
align-self: flex-start;
background: var(--weiss);
border: 1px solid #E6E9EC;
border-radius: 14px 14px 14px 4px;
color: var(--dunkel);
}
.ht-chat__blase--gast {
align-self: flex-end;
background: var(--akz);
border-radius: 14px 14px 4px 14px;
color: var(--weiss);
} .ht-chat__blase--mensch {
align-self: flex-start;
background: var(--weiss);
border: 1px solid #E6E9EC;
border-left: 3px solid var(--akz);
border-radius: 14px 14px 14px 4px;
color: var(--dunkel);
} .ht-chat__tippt {
align-self: flex-start;
display: flex;
gap: 5px;
padding: 14px 16px;
background: var(--weiss);
border: 1px solid #E6E9EC;
border-radius: 14px 14px 14px 4px;
}
.ht-chat__tippt i {
width: 6px;
height: 6px;
border-radius: 99px;
background: #9AA3AA;
animation: ht-tippt 1.1s infinite;
}
.ht-chat__tippt i:nth-child(2) { animation-delay: .15s; }
.ht-chat__tippt i:nth-child(3) { animation-delay: .3s; }
@keyframes ht-tippt {
0%, 60%, 100% { opacity: .25; transform: translateY(0); }
30%           { opacity: 1;   transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
.ht-chat__tippt i { animation: none; opacity: .6; }
}  .ht-chat__karussell {
display: flex;
gap: 10px;
overflow-x: auto;
padding: 2px 18px 8px 0;
margin-right: -18px; scrollbar-width: thin;
scrollbar-color: #CBD2D7 transparent;
scroll-snap-type: x proximity;
overscroll-behavior-x: contain;
}
.ht-chat__karussell::-webkit-scrollbar { height: 5px; }
.ht-chat__karussell::-webkit-scrollbar-track { background: transparent; }
.ht-chat__karussell::-webkit-scrollbar-thumb { background: #CBD2D7; border-radius: 99px; }
.ht-chat__karte {
flex: none;
width: 176px;
padding: 0;
background: var(--weiss);
border: 1px solid #E6E9EC;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
text-align: left;
font-family: inherit;
transition: border-color var(--schnell) ease;
}
.ht-chat__karte:hover { border-color: var(--akz); }
.ht-chat__karte:focus-visible { outline: 2px solid var(--akz); outline-offset: 2px; }
.ht-chat__karte { scroll-snap-align: start; }
.ht-chat__karte img {
display: block;
width: 100%;
height: 112px;
object-fit: cover;
}
.ht-chat__kartentext {
padding: 10px 12px 12px;
display: flex;
flex-direction: column;
gap: 3px;
}
.ht-chat__kartentext b {
font-size: 13.5px;
font-weight: 600;
color: var(--dunkel);
}
.ht-chat__kartentext span {
font-size: 12px;
line-height: 1.35;
color: #6E767D;
}
.ht-chat__kartentext i {
margin-top: 8px;
font-size: 12px;
font-style: normal;
font-weight: 600;
color: var(--akz);
} .ht-chat__foto {
align-self: flex-end;
width: 188px;
padding: 6px;
background: var(--weiss);
border: 1px solid #E6E9EC;
border-radius: 14px 14px 4px 14px;
}
.ht-chat__foto img {
display: block;
width: 100%;
height: 126px;
object-fit: cover;
border-radius: 9px;
}
.ht-chat__fotozeile {
display: flex;
justify-content: space-between;
gap: 8px;
padding: 8px 6px 3px;
font-family: var(--font-mono);
font-size: 10px;
color: var(--grau-hell);
}
.ht-chat__fotozeile span:first-child {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} .ht-chat__karteikarte {
align-self: flex-start;
width: 88%;
background: var(--weiss);
border: 1px solid #E6E9EC;
border-radius: 14px;
overflow: hidden;
}
.ht-chat__kkopf {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 13px 14px;
border-bottom: 1px solid #EEF1F3;
}
.ht-chat__kkopf b { font-size: 13.5px; font-weight: 600; color: var(--dunkel); }
.ht-chat__kkopf span { font-family: var(--font-mono); font-size: 10px; color: var(--grau-hell); }
.ht-chat__kbilder {
display: flex;
gap: 6px;
padding: 12px 14px 0;
}
.ht-chat__kbilder img {
flex: 1;
min-width: 0;
height: 50px;
object-fit: cover;
border-radius: 6px;
}
.ht-chat__zeilen {
display: flex;
flex-direction: column;
gap: 9px;
padding: 14px;
}
.ht-chat__zeilen div {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 13px;
}
.ht-chat__zeilen span { color: #6E767D; }
.ht-chat__zeilen b { font-weight: 500; color: var(--dunkel); text-align: right; } .ht-chat__zusage {
padding-top: 9px;
border-top: 1px solid #EEF1F3;
}
.ht-chat__zusage b { color: #4A7292; font-weight: 600; }
.ht-chat__ktaste { padding: 0 14px 14px; } .ht-chat__kontakt {
align-self: flex-start;
width: 88%;
padding: 14px;
background: var(--weiss);
border: 1px solid #E6E9EC;
border-radius: 14px;
display: flex;
flex-direction: column;
gap: 9px;
}
.ht-chat__kontakt > b { font-size: 13.5px; font-weight: 600; color: var(--dunkel); }
.ht-chat__kontakt input {
padding: 10px 12px;
background: var(--weiss);
border: 1px solid #D7DCE0;
border-radius: 8px;
font-family: inherit;
font-size: 13.5px;
color: var(--dunkel);
outline: none;
}
.ht-chat__kontakt input::placeholder { color: var(--grau-hell); }
.ht-chat__kontakt input:focus { border-color: var(--akz); }
.ht-chat__kontakt input[aria-invalid="true"] { border-color: #C0522A; }
.ht-chat__fehler {
margin-top: -5px;
font-size: 11.5px;
line-height: 1.35;
color: #C0522A;
}
.ht-chat__hinweis {
font-size: 11.5px;
line-height: 1.45;
color: var(--grau-hell);
} .ht-chat__taste {
width: 100%;
padding: 11px;
background: var(--akz);
border: 0;
border-radius: 8px;
color: var(--weiss);
font-family: inherit;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
transition: background var(--schnell) ease;
}
.ht-chat__taste:hover { background: #4A7292; }
.ht-chat__taste:disabled { opacity: .55; cursor: default; } .ht-chat__fuss {
flex: none;
background: var(--weiss);
border-top: 1px solid #E6E9EC;
}
.ht-chat__chips {
display: flex;
flex-wrap: wrap;
gap: 7px;
padding: 12px 14px 2px;
}
.ht-chat__chips[hidden] { display: none; }
.ht-chat__chip {
padding: 8px 13px;
background: var(--weiss);
border: 1px solid #D7DCE0;
border-radius: 99px;
font-family: inherit;
font-size: 13px;
color: var(--dunkel);
cursor: pointer;
transition: border-color var(--schnell) ease, color var(--schnell) ease;
}
.ht-chat__chip:hover { border-color: var(--akz); color: var(--akz); } @media (pointer: coarse) {
.ht-chat__kontakt input {
font-size: 16px;
}
}  @media (max-width: 480px) {
.ht-chat {
right: 0;
bottom: 0;
left: 0;
top: 0;
width: auto;
height: auto;
border: 0;
border-radius: 0;
}
.ht-chat__starter {
right: 16px; bottom: calc(64px + 14px);
}
}