/* Basis-Styling für das Sprachmenü */
.flagmenu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 10px;
}

.flagmenu li {
	margin: 0;
}

/* Styling für die Sprachlinks */
.language-link {
	display: inline-block;
	transition: opacity 0.3s ease, transform 0.3s ease;
	text-decoration: none;
}

.language-link:hover {
	opacity: 0.8;
	transform: scale(1.1);
}

/* Aktive Sprache (falls Sie die alternative Version nutzen) */
.flagmenu li.active .current-language {
	opacity: 0.5;
	cursor: default;
}

/* Flaggen-Icons mit lokalen SVG-Dateien */
.flag-icon {
	display: inline-block;
	width: 24px;
	height: 18px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	vertical-align: middle;
}

/* Deutsche Flagge */
.flag-de {
	background-image: url('/typo3conf/ext/t3master/Resources/Public/icons/de.svg');
}

/* Englische Flagge */
.flag-en {
	background-image: url('/typo3conf/ext/t3master/Resources/Public/icons/en.svg');
}

/* Alternative: Mit EXT: Pfad (TYPO3-konform) */
/*
.flag-de {
	background-image: url('../../../typo3conf/ext/t3master/Resources/Public/icons/de.svg');
}

.flag-en {
	background-image: url('../../../typo3conf/ext/t3master/Resources/Public/icons/en.svg');
}
*/

/* Hover-Effekt für bessere UX */
.language-link:hover .flag-icon {
	filter: brightness(0.9);
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
	.flagmenu {
		justify-content: center;
	}
	
	.flag-icon {
		width: 32px;
		height: 24px;
	}
}

/* Optional: Tooltip für Barrierefreiheit */
.language-link[title] {
	position: relative;
}

.language-link[title]:hover::after {
	content: attr(title);
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	white-space: nowrap;
	margin-bottom: 5px;
	pointer-events: none;
}