/* EasyChat KI Chatbot – Anpassungen an die CI von diemedialen.de */
.easychat {
	--easychat-primary-color: #0e79c0;
	--easychat-accent-color: #0e79c0;
	--easychat-nagscreen-color: #0e79c0;
	--easychat-moderator-color: #747474;
	--easychat-border-color: rgba(24, 34, 38, .2);
	--easychat-chatbot-width: 96vw;
	--easychat-chatbot-max-width: 400px;
	--easychat-shine-degree: 120deg;
	--easychat-shine-color: rgba(255, 255, 255, .25);
	--easychat-shine-effect: linear-gradient(var(--easychat-shine-degree), transparent, var(--easychat-shine-color), transparent);
	font-family: "DINPro-Regular", Geneva, Tahoma, sans-serif;
	color: #182226;
	z-index: 1035;
}

@media screen and (min-width: 40em) {
	.easychat {
		z-index: 1035;
	}
}

/* Geöffneter Chat liegt über der fixierten Hauptnavigation (#mainNav, z-index 10030),
   auf Mobilgeräten ist er Vollbild und der Schließen-Button sonst verdeckt */
.easychat:has(.chatbot:not([hidden])) {
	z-index: 10031;
}

/* Cookiebot-Symbol (#CookiebotWidget) und Seitenanfang-Pfeil (#pageTop) sitzen ebenfalls unten rechts
   und werden beim Scrollen von custom.js verschoben: Startbutton darüber setzen (--dm-easychat-bottom
   aus easychat-cookiebot.js) und das Symbol bei geöffnetem Chat ausblenden, es läge sonst auf dem Senden-Button */
.easychat:has(.chatbot[hidden]) {
	bottom: var(--dm-easychat-bottom, 2vh);
}

body:has(#CookiebotWidget) .easychat:has(.chatbot[hidden]) {
	bottom: var(--dm-easychat-bottom, calc(2vh + 44px));
}

/* Bei geöffnetem Chat liegen Cookiebot-Symbol und Seitenanfang-Pfeil sonst auf dem Senden-Button bzw.
   direkt neben dem Chat-Button, beide werden bis zum Schließen ausgeblendet */
body:has(.easychat .chatbot:not([hidden])) #CookiebotWidget,
body:has(.easychat .chatbot:not([hidden])) #pageTop {
	display: none !important;
}

/* Startbutton */
.easychat__home .easychat__toggle {
	padding: .75em;
	border: 2px solid #fff;
	background-color: #0e79c0;
	box-shadow: 0 4px 16px rgba(24, 34, 38, .25);
	transition: background-color 250ms ease-in-out;
}

.easychat__home .easychat__toggle:hover,
.easychat__home .easychat__toggle:focus-visible {
	background-color: #f45d01;
}

.easychat__home .easychat__toggle:focus-visible,
.easychat button:focus-visible {
	outline: 2px solid #f45d01;
	outline-offset: 2px;
}

/* Hinweis über dem Startbutton */
.easychat__nagscreen {
	border-radius: 1.563rem;
	padding: .75em 1.25em;
	font-size: 1rem;
	box-shadow: 0 4px 16px rgba(24, 34, 38, .25);
}

.easychat__nagscreen button svg path {
	fill: #fff;
}

/* Chatfenster */
.chatbot {
	border-radius: 15px;
}

.chatbot__header {
	font-family: "DINPro-Medium", Geneva, Tahoma, sans-serif;
	font-weight: normal;
	font-size: 1.125rem;
}

.chatbot__header button {
	background-color: rgba(255, 255, 255, .2);
}

.chatbot__header button:hover {
	background-color: #f45d01;
}

.chatbot__logo svg circle {
	fill: #fff;
}

.chatbot__content {
	border-radius: 15px;
}

.chatbot__text {
	font-size: 1rem;
	line-height: 1.5;
}

/* Einwilligungs-Buttons im Stil der Website-Buttons */
.chatbot__buttons button {
	font-family: "DINPro-Regular", Geneva, Tahoma, sans-serif;
	font-weight: normal;
	font-size: 1rem;
	line-height: 1.2;
	padding: .875rem 1rem;
	border-radius: 1.563rem;
	transition: background-color 250ms ease-in-out, border-color 250ms ease-in-out, color 250ms ease-in-out;
}

.chatbot__buttons .chatbot__accept {
	background-color: #f45d01;
	border-color: #f45d01;
}

.chatbot__buttons .chatbot__accept:hover {
	background-color: #fff;
	color: #f45d01;
}

.chatbot__buttons .chatbot__deny:hover {
	background-color: #0e79c0;
	color: #fff;
}

/* Einwilligung widerrufen */
.easychat .revoke {
	margin: 0;
	text-align: end;
}

.easychat .revoke-button {
	padding: .25rem .75rem;
	border: 1px solid #0e79c0;
	border-radius: 1.563rem;
	background: #fff;
	color: #0e79c0;
	font-size: .875rem;
}

.easychat .revoke-button:hover {
	background: #0e79c0;
	color: #fff;
}