/* ---------------------------------------------------------------------------
	Google-Übersetzung: runde Flagge im Header

	Bewusst eine eigene CSS-Datei (eingebunden über page.includeCSS.translate in
	Configuration/TypoScript/extensions/translate.setup.typoscript) und nicht im
	Grunt-Bundle: so ist für diese Ergänzung kein Asset-Build nötig.
	Breakpoint 992px = $device-width-lg aus Scss/_variables.scss.
*/

.translate-flag {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	line-height: 0;
	text-decoration: none;
}

.translate-flag img {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
	transition: transform 0.2s;
}

.translate-flag:hover img,
.translate-flag:focus img {
	transform: scale(1.1);
}

.translate-flag:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 50%;
}

@media (min-width: 992px) {
	.translate-flag img {
		width: 1.9rem;
		height: 1.9rem;
	}
}