/*
 * DJfy - Sprachumschalter
 * ---------------------------------------------------------------------------
 * Eigene Datei, damit main.css und die SASS-Quellen unberuehrt bleiben.
 *
 * ACHTUNG BEIM AENDERN: Das Theme (main.css, ab Zeile 1393) setzt fuer JEDES
 * <button> unter anderem height: 2.75rem, line-height: 2.75rem, padding,
 * text-transform und letter-spacing. Diese Regeln greifen auch hier. Alles,
 * was davon stoert, muss ausdruecklich zurueckgesetzt werden - sonst schiebt
 * die geerbte Zeilenhoehe von 44 px die Flagge im 30-px-Kreis nach unten.
 *
 * Position oben RECHTS, mit dem Seiteninhalt mitscrollend. Beim Oeffnen eines
 * Dialogs blendet das Theme dort einen Schliessen-Button ein - deshalb
 * verschwindet der Umschalter, solange ein Dialog offen ist.
 */

.djfy-lang {
	/* Bewusst absolute statt fixed: der Umschalter soll mit dem Seiteninhalt
	   nach oben wegscrollen und nicht dauerhaft ueber der Ansicht liegen. */
	position: absolute;
	/* Erst der einfache Wert als Rueckfall, dann der um den Geraeterand
	   erweiterte. Browser, die env() nicht kennen, behalten die erste Zeile. */
	top: 12px;
	right: 12px;
	top: calc(12px + env(safe-area-inset-top, 0px));
	right: calc(12px + env(safe-area-inset-right, 0px));
	z-index: 10000;
	font-family: inherit;
	line-height: 1;
	transition: opacity 0.2s ease;
}

/* Dialog offen: Platz fuer den Schliessen-Button des Themes machen. */
body.is-article-visible .djfy-lang,
body.is-switching .djfy-lang {
	opacity: 0;
	pointer-events: none;
}

/* --- Schaltflaeche ------------------------------------------------------- */

.djfy-lang .djfy-lang__button {
	display: block;
	position: relative;
	box-sizing: border-box;
	width: 30px;
	height: 30px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	background: transparent;
	/* Gegen die geerbten Textmasse des Themes */
	line-height: 0;
	font-size: 0;
	letter-spacing: normal;
	text-transform: none;
	white-space: normal;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
	transition: transform 0.15s ease, border-color 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

/*
 * Sichtbar bleibt der Kreis 30 x 30. Die Flaeche, die auf eine Beruehrung
 * reagiert, wird unsichtbar auf 46 x 46 vergroessert - sonst waere das Ziel
 * am Smartphone zu klein zum sicheren Treffen.
 */
.djfy-lang .djfy-lang__button::after {
	content: '';
	position: absolute;
	top: -8px;
	right: -8px;
	bottom: -8px;
	left: -8px;
}

.djfy-lang .djfy-lang__button:active {
	transform: scale(0.92);
}

.djfy-lang.is-busy .djfy-lang__button {
	opacity: 0.55;
	pointer-events: none;
}

/* --- Menue --------------------------------------------------------------- */

.djfy-lang__menu {
	position: absolute;
	top: 40px;
	right: 0;
	box-sizing: border-box;
	min-width: 200px;
	padding: 8px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 14px;
	background: rgba(16, 21, 29, 0.94);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);

	/* Ab sieben Sprachen reicht die Hoehe eines Smartphones im Querformat
	   nicht mehr fuer die ganze Liste. Statt unten abgeschnitten zu werden,
	   bekommt das Menue eine eigene Bildlaufleiste. 100dvh beruecksichtigt
	   die eingeblendete Adressleiste, deshalb steht es hinter dem vh-Wert:
	   Browser ohne dvh nehmen die Zeile davor. */
	max-height: calc(100vh - 80px);
	max-height: calc(100dvh - 80px);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.djfy-lang__menu[hidden] {
	display: none;
}

.djfy-lang .djfy-lang__item {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	min-height: 46px;
	/* Longhand statt Kurzform: das Theme setzt padding fuer jedes <button>,
	   und einzelne Werte lassen sich so eindeutig ueberschreiben. */
	padding-top: 8px;
	padding-right: 18px;
	padding-bottom: 8px;
	padding-left: 14px;
	margin: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: #fff;
	font-size: 11px;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/*
 * WICHTIG: main.css Zeile 4921 setzt fuer JEDES span, das direkt in einem
 * <button> steckt:
 *     position: absolute; left: 0; right: 0;
 *     text-align: center;
 *     font-size: clamp(10px, 5vh, 13px);
 *
 * Beides stoert hier. Durch das absolute Positionieren fallen Flagge und
 * Beschriftung aus dem Flex-Fluss: die Beschriftung liegt dann ueber die
 * volle Breite der Zeile und wird zentriert - kurze Namen wie POLSKI ruecken
 * dadurch weiter nach rechts als lange wie NEDERLANDS. Und 5vh bindet die
 * Schriftgroesse an die Fensterhoehe, auf hohen Displays wird sie zu gross.
 *
 * Deshalb hier beides zurueckholen. Die Zeile darf nicht schwaecher werden
 * als button > span (0,0,2) - .djfy-lang .djfy-lang__item > span liegt mit
 * (0,2,1) deutlich darueber.
 */
.djfy-lang .djfy-lang__item > span {
	position: static;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	text-align: left;
	/* Obergrenze 11px. Der clamp bleibt erhalten, damit sehr niedrige
	   Fenster weiterhin auf 10px heruntergehen duerfen. */
	font-size: clamp(10px, 5vh, 11px);
}

.djfy-lang .djfy-lang__item:hover,
.djfy-lang .djfy-lang__item:focus-visible {
	background: rgba(66, 127, 236, 0.22);
	outline: none;
}

.djfy-lang .djfy-lang__item.is-active {
	background: rgba(66, 127, 236, 0.32);
	font-weight: 700;
}

/* --- Flaggen -------------------------------------------------------------
 * Feste Masse, damit die Beschriftung daneben nicht verrutscht. Genau das
 * ging mit Emojis schief: sie waren je nach System unterschiedlich breit
 * oder gar nicht vorhanden.
 *
 * Der Abstand zur Beschriftung kommt bewusst ueber margin-right und nicht
 * ueber gap - das ist in aelteren Browsern verlaesslicher.
 *
 * Das frueher noetige margin-left: 20px ist entfallen. Es war nur ein Ersatz
 * dafuer, dass die Flagge durch die main.css-Regel absolut positioniert war
 * und das padding-left der Zeile deshalb wirkungslos blieb. Seit die Spans
 * wieder im Fluss stehen, macht padding-left: 14px den Einzug.
 */
.djfy-lang__flag {
	display: block;
	flex: 0 0 auto;
	width: 26px;
	height: 18px;
	margin-left: 0;
	margin-right: 14px;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
	line-height: 0;
}

.djfy-lang__flag svg {
	display: block;
	width: 100%;
	height: 100%;
}

/*
 * In der runden Schaltflaeche fuellt die Flagge die gesamte Innenflaeche.
 * Absolut positioniert, damit weder Zeilenhoehe noch Grundlinie des Themes
 * sie verschieben koennen.
 */
.djfy-lang__flag--round {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: auto;
	height: auto;
	margin: 0;
	border-radius: 50%;
	box-shadow: none;
}

.djfy-lang__label {
	white-space: nowrap;
}

/* Sehr schmale Geraete: Menue etwas kompakter. */
@media screen and (max-width: 480px) {
	.djfy-lang__menu {
		top: 38px;
		min-width: 188px;
	}
}