/* tomedo TTS – Vorlese-Button aus Partikeln (2D-Canvas)
 * Farbe über --tts-color überschreibbar (Default: dental-Grün),
 * Größe über --tts-size. */

.tomedo-tts-orb {
	--tts-color: #db1f3e;
	--tts-size: 84px;
	position: relative;
	width: var(--tts-size);
	height: var(--tts-size);
	padding: 0;
	border: 0;
	background: transparent;
	border-radius: 50%;
	cursor: pointer;
	display: block;
	-webkit-tap-highlight-color: transparent;
	outline: none;
}

.tomedo-tts-orb .tomedo-tts-canvas {
	display: block;
	position: absolute;     /* Größe/Position setzt die Engine (überlappt den Button) */
	pointer-events: none;   /* Klicks/Hover gehen an den Host */
}

/* Beschriftung unter dem Button ("Inhalt vorlesen") */
.tomedo-tts-orb .tomedo-tts-label {
	position: absolute;
	top: calc(100% + 24px);
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1;
	color: #545d66;
	cursor: pointer;
}

/* Tastatur-Fokus sichtbar */
.tomedo-tts-orb:focus-visible {
	box-shadow: 0 0 0 3px rgba(219, 31, 62, .45);
	border-radius: 50%;
}

.tomedo-tts-orb.tomedo-tts-floating {
	position: fixed;
	right: 5rem;
	bottom: 15rem;
	z-index: 99999;
}

/* Lade-Zustand: Cursor signalisiert Warten */
.tomedo-tts-orb[data-tts-state="loading"] {
	cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
	/* Die Engine reduziert Bewegung bereits selbst (keine Rotation/Hover);
	   hier nur ein dezenter statischer Look-Hinweis. */
	.tomedo-tts-orb { opacity: .98; }
}