/* Hairy - Chatfenster */
#hairy { position: fixed; right: 18px; bottom: 18px; z-index: 9000; font-size: 15px; }

#hairy-oeffnen {
	background: var(--ink, #0D0C0A); color: #fff; border: 0; cursor: pointer;
	border-radius: 999px; padding: 12px 20px; font: inherit; font-weight: 600;
	box-shadow: 0 6px 22px rgba(0,0,0,.22);
}
#hairy-oeffnen span { color: #F47318; margin-right: 6px; }
#hairy-oeffnen:hover { background: #26231E; }

#hairy-fenster {
	position: absolute; right: 0; bottom: 56px; width: 360px; max-width: calc(100vw - 32px);
	background: #fff; border-radius: 16px; overflow: hidden;
	box-shadow: 0 18px 50px rgba(0,0,0,.26); display: flex; flex-direction: column;
}
#hairy-fenster[hidden] { display: none !important; }

#hairy-kopf {
	background: var(--ink, #0D0C0A); color: #fff; padding: 12px 16px;
	display: flex; align-items: center; justify-content: space-between;
}
#hairy-schliessen { background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
	width: 44px; height: 44px; margin: -11px -12px -11px 0; display: flex; align-items: center; justify-content: center;
	border-radius: 10px; }
#hairy-schliessen:hover, #hairy-schliessen:focus-visible { background: rgba(255,255,255,.14); }

#hairy-verlauf { padding: 14px 16px; max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.hairy-n { padding: 10px 13px; border-radius: 12px; line-height: 1.5; max-width: 88%; word-wrap: break-word; }
.hairy-a { background: #F4F2EE; color: #0D0C0A; align-self: flex-start; }
.hairy-f { background: var(--ink, #0D0C0A); color: #fff; align-self: flex-end; }
.hairy-n a { color: #B4530F; }
.hairy-a a { color: #B4530F; }
.hairy-warte { opacity: .6; font-style: italic; }

#hairy-form { display: flex; gap: 8px; padding: 12px 16px 6px; border-top: 1px solid #E8E5DF; }
#hairy-eingabe { flex: 1; border: 1px solid #D8D4CC; border-radius: 10px; padding: 10px 12px; font: inherit; min-width: 0; }
#hairy-eingabe:focus { outline: 2px solid #F47318; outline-offset: 1px; }
#hairy-senden { background: #F47318; color: #fff; border: 0; border-radius: 10px; padding: 10px 16px; font: inherit; font-weight: 600; cursor: pointer; }
#hairy-senden[disabled] { opacity: .5; cursor: default; }

#hairy-hinweis { margin: 0; padding: 4px 16px 14px; font-size: 11.5px; line-height: 1.45; color: #6B6862; }


#hairy-marke { display: flex; align-items: center; gap: 11px; }
#hairy-marke svg { display: block; flex: none; width: 23px; height: 19px; }
#hairy-marke strong { font-size: 16px; letter-spacing: .01em; line-height: 1; }


.hairy-warte { opacity: 1; font-style: normal; color: #6B6862; }
.hairy-punkte { display: inline-block; margin-left: 3px; }
.hairy-punkte i { display: inline-block; width: 4px; height: 4px; margin-left: 3px; border-radius: 50%;
	background: #F47318; opacity: .35; animation: hairyblink 1.2s infinite; }
.hairy-punkte i:nth-child(2) { animation-delay: .2s; }
.hairy-punkte i:nth-child(3) { animation-delay: .4s; }
@keyframes hairyblink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

@media (max-width: 600px) {
	#hairy { right: 0; left: 0; bottom: 0; }
	#hairy-oeffnen { position: absolute; right: 14px; bottom: 14px; padding: 11px 17px; font-size: 14px; }
	#hairy.hairy-offen #hairy-oeffnen { display: none; }
	#hairy-fenster { position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-width: none;
		border-radius: 16px 16px 0 0; max-height: 72vh; max-height: 72dvh;
		padding-bottom: env(safe-area-inset-bottom, 0px); }
	#hairy-verlauf { max-height: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
	#hairy-eingabe { font-size: 16px; }
}