@charset "utf-8";
/* Sprachwahl: the flag in the menu band and its list of languages. Loaded on every public page, after style.css. */

.sprache { position: relative; }
.sprache > summary { list-style: none; }
.sprache > summary::-webkit-details-marker { display: none; }
.sprache[open] > summary { background: var(--lila-hell); }

.flagge {
	display: block;
	width: auto;
	height: 0.8rem;
	box-shadow: 0 0 0 1px rgb(255 255 255 / 0.45); /* keeps the white of the Italian flag apart from the band */
}

/* The list opens upwards: the band sits at the bottom of the screen. */
.leiste .sprache__liste {
	position: absolute;
	right: 0;
	bottom: calc(100% + 0.6rem);
	display: block;
	min-width: 10rem;
	margin: 0;
	--polster: 0.35rem;
	padding: var(--polster);
	border-radius: 1rem;
	list-style: none;
	background: var(--lila);
	box-shadow: 0 6px 24px rgb(40 0 40 / 0.35);
}
.leiste .sprache__liste a { /* grid: the names line up although the flags differ in width */
	display: grid;
	grid-template-columns: 1.6rem auto; /* widest flag: the 2:1 Union Jack at 0.8rem height */
	justify-items: start;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 0.75rem;
	border-radius: calc(1rem - var(--polster)); /* hover fills round in step with the list */
	text-decoration: none;
	white-space: nowrap;
}
.leiste .sprache__liste a:hover,
.leiste .sprache__liste a:focus-visible { background: var(--lila-hell); text-decoration: none; }
.leiste .sprache__liste a:focus-visible { outline-offset: -2px; }
.leiste .sprache__liste [aria-current="true"] { text-decoration: underline; text-underline-offset: 0.3em; }

/* While the list is open it stays above the text panel and does not fade with the idle controls. */
.fuss:has(.sprache[open]) { z-index: 4; }
.ist-ruhig .leiste:has(.sprache[open]) { opacity: 1; pointer-events: auto; }