#ta-wurzel {
	--ta-akzent: #d8232a;
	--ta-text: #1d1d1f;
	--ta-rand: #e3e3e6;
	--ta-unten: 96px;
	--ta-groesse: 64px;
	position: fixed;
	right: 20px;
	bottom: calc( var( --ta-unten ) + env( safe-area-inset-bottom, 0px ) );
	z-index: 99999;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
}

#ta-wurzel .ta-knopf {
	position: relative;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var( --ta-groesse );
	height: var( --ta-groesse );
	padding: 0;
	background: #fff;
	color: #fff;
	border: 2.5px solid var(--ta-akzent);
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba( 0, 0, 0, .28 );
	transition: transform .15s ease, filter .15s ease;
	overflow: visible;
}

#ta-wurzel .ta-knopf:hover { filter: brightness( 1.05 ); transform: scale( 1.05 ); }
#ta-wurzel .ta-knopf:focus-visible { outline: 3px solid #000; outline-offset: 3px; }

#ta-wurzel .ta-avatar-wrap {
	position: relative;
	display: block;
	width: calc( var( --ta-groesse ) * .88 );
	height: calc( var( --ta-groesse ) * .88 );
	flex: 0 0 auto;
}

#ta-wurzel .ta-knopf .ta-avatar {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 18%;
	border-radius: 50%;
	/* Leichter Zoom: der äußere Bildrand fällt weg, das Gesicht füllt den Kreis. */
	transform: scale( 1.12 );
	transform-origin: center 40%;
}

/* Kleine Wink-Hand außerhalb des Kreises – wird bei .ta-aufmerksam sichtbar. */
#ta-wurzel .ta-hand {
	position: absolute;
	right: -18%;
	top: -8%;
	width: 1.35em;
	height: 1.35em;
	font-size: calc( var( --ta-groesse ) * .42 );
	line-height: 1;
	opacity: 0;
	pointer-events: none;
	transform-origin: 70% 90%;
	transform: rotate( -20deg ) scale( .5 );
	filter: drop-shadow( 0 1px 2px rgba( 0, 0, 0, .18 ) );
}

#ta-wurzel .ta-hand::before {
	content: '\1F44B';
	display: block;
}

/* Kurzer Wink samt Puls, solange der Chat noch nicht geöffnet wurde. */
@keyframes ta-puls {
	0%   { box-shadow: 0 6px 20px rgba( 0, 0, 0, .28 ), 0 0 0 0 rgba( 216, 35, 42, .45 ); }
	70%  { box-shadow: 0 6px 20px rgba( 0, 0, 0, .28 ), 0 0 0 14px rgba( 216, 35, 42, 0 ); }
	100% { box-shadow: 0 6px 20px rgba( 0, 0, 0, .28 ), 0 0 0 0 rgba( 216, 35, 42, 0 ); }
}

@keyframes ta-wink {
	0%   { opacity: 0; transform: rotate( -20deg ) scale( .5 ); }
	12%  { opacity: 1; transform: rotate( 14deg ) scale( 1 ); }
	28%  { transform: rotate( -16deg ) scale( 1 ); }
	44%  { transform: rotate( 18deg ) scale( 1 ); }
	60%  { transform: rotate( -12deg ) scale( 1 ); }
	76%  { transform: rotate( 12deg ) scale( 1 ); }
	100% { opacity: 0; transform: rotate( -20deg ) scale( .65 ); }
}

@keyframes ta-nick {
	0%, 100% { transform: rotate( 0deg ); }
	20%      { transform: rotate( -4deg ); }
	40%      { transform: rotate( 3deg ); }
	60%      { transform: rotate( -2deg ); }
	80%      { transform: rotate( 1deg ); }
}

#ta-wurzel .ta-knopf.ta-aufmerksam {
	animation: ta-puls 1.6s ease-out 2;
}

#ta-wurzel .ta-knopf.ta-aufmerksam .ta-avatar-wrap {
	animation: ta-nick 1.6s ease-in-out 2;
}

#ta-wurzel .ta-knopf.ta-aufmerksam .ta-hand {
	animation: ta-wink 2.4s ease-in-out 1;
}

#ta-wurzel .ta-knopf.ta-aufmerksam .ta-sprechblase {
	opacity: 1;
	transition: opacity .4s ease;
}

@media ( prefers-reduced-motion: reduce ) {
	#ta-wurzel .ta-knopf.ta-aufmerksam,
	#ta-wurzel .ta-knopf.ta-aufmerksam .ta-avatar-wrap,
	#ta-wurzel .ta-knopf.ta-aufmerksam .ta-hand { animation: none; }

	#ta-wurzel .ta-knopf.ta-aufmerksam .ta-hand { opacity: 1; transform: rotate( 0deg ) scale( 1 ); }
}

/* Grüner Punkt: signalisiert, dass sofort geantwortet wird. */
#ta-wurzel .ta-punkt {
	position: absolute;
	right: calc( var( --ta-groesse ) * .06 );
	bottom: calc( var( --ta-groesse ) * .06 );
	width: calc( var( --ta-groesse ) * .2 );
	height: calc( var( --ta-groesse ) * .2 );
	min-width: 10px;
	min-height: 10px;
	background: #26a65b;
	border: 2.5px solid #fff;
	border-radius: 50%;
}

/* Kleine Ansprache neben dem Icon, verschwindet nach dem ersten Öffnen. */
#ta-wurzel .ta-sprechblase {
	position: absolute;
	right: calc( var( --ta-groesse ) + 10px );
	top: 50%;
	transform: translateY( -50% );
	white-space: nowrap;
	background: #fff;
	color: var(--ta-text);
	font-size: 14px;
	font-weight: 500;
	padding: 9px 14px;
	border-radius: 10px;
	box-shadow: 0 4px 16px rgba( 0, 0, 0, .18 );
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}

#ta-wurzel .ta-knopf:hover .ta-sprechblase,
#ta-wurzel .ta-knopf:focus-visible .ta-sprechblase { opacity: 1; }

#ta-wurzel.ta-gesehen .ta-sprechblase { display: none; }

/* Avatar im Fensterkopf – ohne Wink-Hand, klein und ruhig. */
#ta-wurzel .ta-kopf .ta-avatar-wrap {
	width: 30px;
	height: 30px;
}

#ta-wurzel .ta-kopf .ta-hand { display: none; }

#ta-wurzel .ta-kopf .ta-avatar {
	transform: scale( 1.08 );
	transform-origin: center 35%;
}

#ta-wurzel .ta-fenster {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 370px;
	max-width: calc( 100vw - 32px );
	background: #fff;
	color: var(--ta-text);
	border: 1px solid var(--ta-rand);
	border-radius: 14px;
	box-shadow: 0 12px 40px rgba( 0, 0, 0, .25 );
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Muss nach der Regel oben stehen: "display: flex" hat mehr Gewicht als das
   hidden-Attribut, sonst steht das Fenster beim Laden der Seite offen. */
#ta-wurzel .ta-fenster[hidden] { display: none; }

#ta-wurzel .ta-kopf {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--ta-rand);
	background: #fafafa;
}

#ta-wurzel .ta-test {
	font-size: 11px;
	background: #ffe9a8;
	color: #6b4e00;
	padding: 2px 8px;
	border-radius: 999px;
}

#ta-wurzel .ta-zu {
	margin-left: auto;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin: 0 0 0 auto;
	background: var(--ta-akzent);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, .2 );
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	color: #fff;
	touch-action: manipulation;
	transition: filter .15s ease;
}

#ta-wurzel .ta-zu:hover {
	filter: brightness( 1.1 );
}

#ta-wurzel .ta-zu:focus-visible {
	outline: 2px solid var(--ta-akzent);
	outline-offset: 2px;
}

#ta-wurzel .ta-lauf {
	padding: 14px;
	height: 340px;
	max-height: 55vh;
	overflow-y: auto;
	/* Verhindert, dass am Ende der Liste die Seite dahinter weiterscrollt. */
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#ta-wurzel .ta-blase {
	padding: 10px 13px;
	border-radius: 14px;
	max-width: 85%;
	overflow-wrap: anywhere;
}

#ta-wurzel .ta-ich,
#ta-wurzel .ta-warten,
#ta-wurzel .ta-fehler,
#ta-wurzel .ta-mensch { white-space: pre-wrap; }

/* Formatierte Antworten: Absätze und Aufzählungen */
#ta-wurzel .ta-blase p {
	margin: 0 0 8px;
	padding: 0;
}

#ta-wurzel .ta-blase p:last-child { margin-bottom: 0; }

#ta-wurzel .ta-blase ul {
	margin: 0 0 8px;
	padding-left: 18px;
	list-style: disc;
}

#ta-wurzel .ta-blase ul:last-child { margin-bottom: 0; }

#ta-wurzel .ta-blase li {
	margin: 0 0 4px;
	padding: 0;
	list-style: disc;
}

#ta-wurzel .ta-blase li:last-child { margin-bottom: 0; }

#ta-wurzel .ta-blase strong { font-weight: 700; }

#ta-wurzel .ta-blase a {
	color: var(--ta-akzent);
	text-decoration: underline;
	overflow-wrap: anywhere;
}

#ta-wurzel .ta-ich a { color: #fff; }

#ta-wurzel .ta-bot  { background: #f1f1f4; align-self: flex-start; border-bottom-left-radius: 4px; }
#ta-wurzel .ta-ich  { background: var(--ta-akzent); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
#ta-wurzel .ta-warten { opacity: .6; font-style: italic; }
#ta-wurzel .ta-fehler { background: #fde8e8; color: #8a1f1f; }
#ta-wurzel .ta-mensch { background: #e8f1fd; color: #123a6b; font-weight: 600; }

/* Eigene Fassung statt der Theme-Klasse: nicht jedes Theme bringt
   "screen-reader-text" mit, sonst steht das Label sichtbar im Formular. */
#ta-wurzel .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

#ta-wurzel .ta-form {
	display: flex;
	gap: 8px;
	padding: 12px;
	border-top: 1px solid var(--ta-rand);
}

#ta-wurzel .ta-form input {
	flex: 1;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid #c9c9cf;
	border-radius: 8px;
	font-size: 16px;
}

#ta-wurzel .ta-form button {
	background: var(--ta-akzent);
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 10px 16px;
	font-weight: 600;
	cursor: pointer;
}

#ta-wurzel .ta-hinweis {
	margin: 0;
	padding: 0 12px 12px;
	font-size: 11.5px;
	color: #6b6b70;
}

@media ( max-width: 600px ) {

	#ta-wurzel {
		right: 14px;
		--ta-unten: 88px;
	}

	#ta-wurzel .ta-sprechblase { display: none; }

	/* Auf dem Handy als Blatt am unteren Rand statt als kleines Fenster.
	   Fest positioniert, damit es sich nicht am Icon ausrichtet. */
	#ta-wurzel .ta-fenster {
		position: fixed;
		left: 8px;
		right: 8px;
		bottom: calc( 8px + env( safe-area-inset-bottom, 0px ) );
		top: auto;
		width: auto;
		max-width: none;
		/* dvh statt vh: rechnet die eingeblendete Tastatur und die
		   Safari-Leisten mit, vh tut das nicht. */
		max-height: 80dvh;
		border-radius: 16px;
	}

	/* Höhe ergibt sich aus dem verbleibenden Platz, nicht aus einem festen Wert. */
	#ta-wurzel .ta-lauf {
		flex: 1 1 auto;
		height: auto;
		min-height: 120px;
		max-height: none;
		padding: 12px;
	}

	#ta-wurzel .ta-kopf { padding: 14px; }

	#ta-wurzel .ta-form {
		padding: 10px 12px;
		padding-bottom: calc( 10px + env( safe-area-inset-bottom, 0px ) );
	}

	#ta-wurzel .ta-form button {
		padding: 12px 18px;
		touch-action: manipulation;
	}

	#ta-wurzel .ta-blase { max-width: 90%; }

	#ta-wurzel .ta-hinweis {
		padding: 0 12px 10px;
		padding-bottom: calc( 10px + env( safe-area-inset-bottom, 0px ) );
	}
}

/* Sehr niedrige Fenster (Tastatur offen, Handy quer) */
@media ( max-height: 480px ) {
	#ta-wurzel .ta-fenster { max-height: 92dvh; }
	#ta-wurzel .ta-hinweis { display: none; }
}

@media ( prefers-reduced-motion: reduce ) {
	#ta-wurzel .ta-knopf { transition: none; }
	#ta-wurzel .ta-knopf:hover { transform: none; }
}

/* Solange unser Chatfenster offen ist: fremde Fixed-Elemente aus dem Weg, die sich sonst
   mit dem Fenster überlappen (Cookie-Banner vor und nach der Einwilligung,
   Barrierefreiheits-Button, Reservieren-Button). Bewusst "visibility" statt "display" -
   der Reservieren-Button wird von einem eigenen Skript positioniert (Sticky-Effekt), das
   seine Position anhand des Layouts berechnet. Mit "display:none" verschwindet das Element
   komplett aus dem Layout, das Skript verliert seine Referenz und setzt beim Wiedereinblenden
   eine falsche Position. "visibility:hidden" lässt das Element an Ort und Stelle - nur
   unsichtbar und nicht klickbar - und kommt beim Schließen exakt an der alten Stelle zurück. */
html.ta-chat-offen .cky-consent-container,
html.ta-chat-offen .cky-btn-revisit-wrapper,
html.ta-chat-offen .onetap-toggle,
html.ta-chat-offen .onetap-accessibility,
html.ta-chat-offen .sticky-button {
	visibility: hidden !important;
	pointer-events: none !important;
}