/*
 * ReadSpeaker webReader – Farben/Schrift wie die Website.
 * Layout: Flex-Reihe, damit Menu, Vorlesen und Player-Buttons
 * nicht übereinanderliegen (RS defaultet auf Floats).
 * Icon-Fonts (hl-icons) nicht überschreiben – sonst leere Kreise.
 */

#readspeaker_button.rsbtn {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: stretch !important;
	width: fit-content !important;
	max-width: 100% !important;
	overflow: visible !important;
	background: var(--color-white) !important;
	/* border: 1px solid var(--color-black) !important; */
	border-radius: var(--space-1) !important;
	font-family: var(--font-primary) !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	color: var(--color-black) !important;
	height: auto !important;
	min-height: 2.25rem !important;
	box-sizing: content-box !important;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
}

#readspeaker_button.rsbtn .rsbtn_tooltoggle,
#readspeaker_button.rsbtn .rsbtn_play,
#readspeaker_button.rsbtn .rsbtn_exp,
#readspeaker_button.rsbtn .rsbtn_exp_inner,
#readspeaker_button.rsbtn .rsbtn_player_item,
#readspeaker_button.rsbtn .rsbtn_left,
#readspeaker_button.rsbtn .rsbtn_right,
#readspeaker_button.rsbtn .rsbtn_text {
	float: none !important;
	position: relative !important;
}

#readspeaker_button.rsbtn .rsbtn_play,
#readspeaker_button.rsbtn .rsbtn_exp,
#readspeaker_button.rsbtn .rsbtn_exp_inner {
	display: inline-flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	width: auto !important;
	height: 2.25rem !important;
}

#readspeaker_button.rsbtn .rsbtn_play,
#readspeaker_button.rsbtn .rsbtn_tooltoggle,
#readspeaker_button.rsbtn .rsbtn_player_item {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--color-black) !important;
	text-decoration: none !important;
	transition: background-color 0.15s ease !important;
}

#readspeaker_button.rsbtn .rsbtn_play {
	align-items: center !important;
	gap: 8px !important;
	height: 2.25rem !important;
	padding: 0 12px !important;
	box-sizing: border-box !important;
	font-size: 15px !important;
}

#readspeaker_button.rsbtn .rsbtn_left,
#readspeaker_button.rsbtn .rsbtn_text {
	display: inline-flex !important;
	align-items: center !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.2 !important;
}

#readspeaker_button.rsbtn .rsbtn_right {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	align-self: center !important;
	width: 16px !important;
	height: 16px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
	font-size: 16px !important;
	top: 0 !important;
	transform: none !important;
}

#readspeaker_button.rsbtn .rsbtn_right::before {
	display: block !important;
	width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 16px !important;
	font-size: 16px !important;
	position: static !important;
	top: auto !important;
}

/* RS setzt Icon-Glyphen als ::before/::after auf den Text – ohne Icon-Font
   werden das leere Kreise. Ausblenden, der sichtbare Text bleibt. */
#readspeaker_button.rsbtn .rsbtn_text::before,
#readspeaker_button.rsbtn .rsbtn_text::after {
	content: none !important;
	display: none !important;
}

#readspeaker_button.rsbtn .rsbtn_tooltoggle,
#readspeaker_button.rsbtn .rsbtn_exp .rsbtn_player_item {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 2.25rem !important;
	min-width: 2.25rem !important;
	height: 2.25rem !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

#readspeaker_button.rsbtn .rsbtn_tooltoggle .rsicn,
#readspeaker_button.rsbtn .rsbtn_player_item .rsicn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 16px !important;
	line-height: 1 !important;
}

#readspeaker_button.rsbtn .rsbtn_tooltoggle .rsicn {
	transform-origin: center !important;
	transition: transform 0.15s ease !important;
}

#readspeaker_button.rsbtn .rsbtn_tooltoggle:hover .rsicn,
#readspeaker_button.rsbtn .rsbtn_tooltoggle:focus-visible .rsicn {
	transform: scale(1.2) !important;
}

#readspeaker_button.rsbtn .rsbtn_tooltoggle .rsicn::before,
#readspeaker_button.rsbtn .rsbtn_player_item .rsicn::before {
	display: block !important;
	width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 16px !important;
	font-size: 16px !important;
}

#readspeaker_button.rsbtn.rsexpanded .rsbtn_right {
	display: none !important;
}

#readspeaker_button.rsbtn .rsbtn_play .rsbtn_text,
#readspeaker_button.rsbtn .rsbtn_play .rsbtn_text span {
	display: inline !important;
	height: auto !important;
	padding: 0 !important;
	color: var(--color-black) !important;
	font-family: var(--font-primary) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
}

#readspeaker_button.rsbtn .rsbtn_exp,
#readspeaker_button.rsbtn .rsbtn_exp_inner {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

#readspeaker_button.rsbtn .rsbtn_play:hover,
#readspeaker_button.rsbtn .rsbtn_play:focus-visible,
#readspeaker_button.rsbtn .rsbtn_tooltoggle:hover,
#readspeaker_button.rsbtn .rsbtn_tooltoggle:focus-visible,
#readspeaker_button.rsbtn .rsbtn_player_item:hover,
#readspeaker_button.rsbtn .rsbtn_player_item:focus-visible {
	background: var(--color-porcelain) !important;
	border-radius: 0 !important;
	text-decoration: none !important;
}

/* Hover-Fläche an den Innenradius des Buttons klemmen (1px Border). */
#readspeaker_button.rsbtn .rsbtn_tooltoggle,
#readspeaker_button.rsbtn .rsbtn_tooltoggle:hover,
#readspeaker_button.rsbtn .rsbtn_tooltoggle:focus-visible {
	border-radius: calc(var(--space-1) - 1px) 0 0 calc(var(--space-1) - 1px) !important;
}

#readspeaker_button.rsbtn:not(.rsexpanded) .rsbtn_play,
#readspeaker_button.rsbtn:not(.rsexpanded) .rsbtn_play:hover,
#readspeaker_button.rsbtn:not(.rsexpanded) .rsbtn_play:focus-visible,
#readspeaker_button.rsbtn.rsexpanded .rsbtn_closer,
#readspeaker_button.rsbtn.rsexpanded .rsbtn_closer:hover,
#readspeaker_button.rsbtn.rsexpanded .rsbtn_closer:focus-visible {
	border-radius: 0 calc(var(--space-1) - 1px) calc(var(--space-1) - 1px) 0 !important;
}

#readspeaker_button.rsbtn .rsbtn_play:focus-visible,
#readspeaker_button.rsbtn .rsbtn_tooltoggle:focus-visible,
#readspeaker_button.rsbtn .rsbtn_player_item:focus-visible {
	outline: var(--focus-outline) !important;
	outline-offset: -3px !important;
}

#readspeaker_button.rsbtn .rsicn,
#readspeaker_button.rsbtn .rsicn::before,
#readspeaker_button.rsbtn .rsbtn_right,
#readspeaker_button.rsbtn .rsbtn_right::before,
#rs-controlpanel .rsicn,
#rs-controlpanel .rsicn::before {
	font-family: "hl-icons" !important;
	color: var(--color-black) !important;
}

#readspeaker_button.rsbtn .rsbtn_dropdown,
#readspeaker_button.rsbtn .rsbtn_volume_container,
#readspeaker_button.rsbtn .rsbtn_speed_container {
	background: var(--color-white) !important;
	border: 1px solid var(--color-black) !important;
	border-radius: var(--space-1) !important;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25) !important;
}

#readspeaker_button.rsbtn .rs-slider,
#rs-controlpanel .rs-slider {
	accent-color: var(--color-black);
}

#readspeaker_button.rsbtn .rsbtn_status_overlay {
	position: static !important;
	display: block !important;
	flex: 1 0 100% !important;
	width: 100% !important;
	padding: 4px 12px 8px !important;
	background: var(--color-white) !important;
	transform: none !important;
	left: auto !important;
	top: auto !important;
}

/* Lokaler Dummy-Fehler von RS («Do not translate») – nicht zeigen. */
#readspeaker_button.rsbtn .rsbtn_loaderror,
#readspeaker_button.rsbtn .rsbtn_status_overlay:has(.rsbtn_loaderror) {
	display: none !important;
}

#readspeaker_button.rsbtn .rsbtn_status {
	display: block !important;
	transform: none !important;
	background: transparent !important;
	color: var(--color-black) !important;
	font-family: var(--font-primary) !important;
	font-weight: 400 !important;
	font-size: 13px !important;
}

/* Äusseres Panel: nur Anker, keine eigene Box (sonst Doppelrahmen + 120px-Breite). */
#readspeaker_button.rsbtn .rsbtn_toolpanel,
#readspeaker_button_toolpanel {
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	width: 0 !important;
	min-width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	z-index: 20 !important;
	transition: none !important;
}

#readspeaker_button.rsbtn .rsbtn_tools {
	position: absolute !important;
	top: 4px !important;
	left: 0 !important;
	width: max-content !important;
	min-width: 17.5rem !important;
	background: var(--color-white) !important;
	border: none !important;
	/* border: 1px solid var(--color-black) !important; */
	border-radius: var(--space-1) !important;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25) !important;
	color: var(--color-black) !important;
	font-family: var(--font-primary) !important;
	overflow: hidden !important;
	transition: none !important;
}

.rs-dl,
#rs-dialog {
	font-family: var(--font-primary);
}

#readspeaker_button.rsbtn .rsbtn_toollist {
	list-style: none !important;
	margin: 0 !important;
	padding: 4px 0 !important;
}

#readspeaker_button.rsbtn .rsbtn_toollist > li {
	display: block !important;
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

#readspeaker_button.rsbtn .rsbtn_tool {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	width: 100% !important;
	min-height: 2.5rem !important;
	padding: 6px 12px !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--color-black) !important;
	font-family: var(--font-primary) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	text-align: left !important;
	white-space: nowrap !important;
	transition: background-color 0.15s ease !important;
}

#readspeaker_button.rsbtn .rsbtn_tool:hover,
#readspeaker_button.rsbtn .rsbtn_tool:focus-visible {
	background: var(--color-porcelain) !important;
	text-decoration: none !important;
}

#readspeaker_button.rsbtn .rsbtn_tool:focus-visible {
	outline: var(--focus-outline) !important;
	outline-offset: -3px !important;
}

#readspeaker_button.rsbtn .rsbtn_tool .rsbtn_btnlabel {
	flex: 1 1 auto !important;
	color: var(--color-black) !important;
	font-family: var(--font-primary) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	white-space: nowrap !important;
}

#readspeaker_button.rsbtn .rs_minitoggler {
	flex: 0 0 auto !important;
	position: relative !important;
	float: none !important;
	margin-left: auto !important;
	background: var(--color-white) !important;
	border: 1px solid var(--color-black) !important;
	box-shadow: none !important;
	
}

#readspeaker_button.rsbtn .rs_minitoggler .on-icon,
#readspeaker_button.rsbtn .rs_minitoggler .off-icon {
	color: var(--color-black) !important;
}

#readspeaker_button.rsbtn .rsbtn_tool[aria-pressed="true"] .rs_minitoggler {
	background: var(--color-black) !important;
}

#readspeaker_button.rsbtn .rsbtn_tool[aria-pressed="true"] .rs_minitoggler .on-icon,
#readspeaker_button.rsbtn .rsbtn_tool[aria-pressed="true"] .rs_minitoggler .off-icon {
	color: var(--color-white) !important;
}

#readspeaker_button.rsbtn .rsbtn_powered {
	display: block !important;
	padding: 6px 12px 8px !important;
	text-align: right !important;
	font-family: var(--font-primary) !important;
	font-size: 12px !important;
	color: var(--color-black) !important;
}

#readspeaker_button.rsbtn .rsbtn_powered a,
#readspeaker_button.rsbtn .rsbtn_powered .rsbtn_btnlabel {
	color: var(--color-black) !important;
	font-family: var(--font-primary) !important;
	font-size: 12px !important;
}

#readspeaker_button.rsbtn .rsicn,
#readspeaker_button.rsbtn .rsicn::before,
.rsbtn_tools .rsicn,
.rsbtn_tools .rsicn::before,
.rs-dl .rsicn,
.rs-dl .rsicn::before {
	font-family: "hl-icons" !important;
	color: var(--color-black) !important;
}

#rs-controlpanel {
	background: var(--color-white) !important;
	border: 1px solid var(--color-black) !important;
	border-radius: var(--space-1) !important;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25) !important;
	padding: var(--space-1) !important;
	color: var(--color-black) !important;
	font-family: var(--font-primary) !important;
}

#rs-controlpanel .rs-controlpanel-btn,
#rs-controlpanel .rs-controlpanel-scroll-toggler {
	background: transparent !important;
	border: 0 !important;
	border-radius: var(--space-1) !important;
	font-weight: 700 !important;
	color: var(--color-black) !important;
}

#rs-controlpanel .rs-controlpanel-btn:hover,
#rs-controlpanel .rs-controlpanel-btn:focus-visible,
#rs-controlpanel .rs-controlpanel-scroll-toggler:hover,
#rs-controlpanel .rs-controlpanel-scroll-toggler:focus-visible {
	background: var(--color-porcelain) !important;
}

#rs-controlpanel .rs-controlpanel-btn:focus-visible,
#rs-controlpanel .rs-controlpanel-scroll-toggler:focus-visible {
	outline: var(--focus-outline) !important;
	outline-offset: 2px !important;
}

.sync_sent,
.sync_word,
.sync_word_highlighted,
.sync_sent_highlighted {
	font-size: inherit !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	color: var(--color-black) !important;
}