/*!
 * webe Sideflags — Frontend
 * @copyright 2026 webe Media — Florian Hüing
 *
 * Statisch und cachebar: jede einstellbare Größe kommt als CSS-Variable am
 * Element an (siehe WBSF_Frontend::render), das Stylesheet selbst ändert sich
 * nie. Bewegt wird mit transform, nicht mit right/left — das läuft auf der
 * Grafikkarte und lässt das Seitenlayout in Ruhe.
 */

.wbsf {
	position: fixed;
	top: var(--wbsf-top, 40%);
	z-index: var(--wbsf-z, 999);
	display: flex;
	flex-direction: column;
	gap: var(--wbsf-gap, 8px);
	box-sizing: border-box;
	width: var(--wbsf-w, 320px);
	max-width: 100vw;
	margin: 0;
	padding: 0;
	list-style: none;
	/* Der Container liegt über dem Seiteninhalt, soll ihn aber nicht
	   abfangen — klickbar sind nur die Flaggen selbst. */
	pointer-events: none;
}

.wbsf *,
.wbsf *::before,
.wbsf *::after {
	box-sizing: border-box;
}

.wbsf[data-align="right"] {
	right: 0;
}

.wbsf[data-align="left"] {
	left: 0;
}

/* -------------------------------------------------------------------------
 * Die Flagge
 * ---------------------------------------------------------------------- */

.wbsf__flag {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 56px;
	padding: 10px 0;
	border: 0;
	color: var(--wbsf-fg, #fff);
	background: var(--wbsf-bg, #0e71b8);
	text-decoration: none;
	pointer-events: auto;
	transition: transform 450ms cubic-bezier(0.2, 0.7, 0.2, 1), filter 200ms linear;
	will-change: transform;
}

a.wbsf__flag {
	cursor: pointer;
}

.wbsf__flag:hover {
	filter: brightness(1.06);
}

/* Rechts: ausgefahren steht die Flagge bündig am Rand, eingefahren schaut
   nur der Icon-Streifen (--wbsf-tab) heraus. */
.wbsf[data-align="right"] .wbsf__flag {
	border-radius: var(--wbsf-radius, 8px) 0 0 var(--wbsf-radius, 8px);
	transform: translateX(calc(100% - var(--wbsf-tab, 60px)));
}

.wbsf[data-align="left"] .wbsf__flag {
	flex-direction: row-reverse;
	border-radius: 0 var(--wbsf-radius, 8px) var(--wbsf-radius, 8px) 0;
	transform: translateX(calc(var(--wbsf-tab, 60px) - 100%));
}

/* Hover fährt aus — und :focus-within genauso, damit die Flagge auch mit
   der Tastatur erreichbar ist statt nur hinter dem Bildschirmrand zu
   liegen. */
.wbsf[data-align="right"] .wbsf__flag:hover,
.wbsf[data-align="right"] .wbsf__flag:focus,
.wbsf[data-align="right"] .wbsf__flag:focus-within,
.wbsf[data-align="left"] .wbsf__flag:hover,
.wbsf[data-align="left"] .wbsf__flag:focus,
.wbsf[data-align="left"] .wbsf__flag:focus-within {
	transform: translateX(0);
}

.wbsf__flag:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: -5px;
}

/* -------------------------------------------------------------------------
 * Icon und Text
 * ---------------------------------------------------------------------- */

/* Der Icon-Streifen ist genau so breit wie der eingefahrene Teil der Flagge.
   Die Polsterung sorgt dafür, dass das Icon nie an der Kante klebt — auch
   dann nicht, wenn jemand eine große Icongröße einstellt. Die Icons sind
   Font-Awesome-Glyphen, deren Pfad die viewBox randlos ausfüllt: ohne
   diesen Rand berührt die Tinte wirklich die Kante. */
.wbsf__icon {
	display: flex;
	flex: 0 0 var(--wbsf-tab, 60px);
	align-items: center;
	justify-content: center;
	width: var(--wbsf-tab, 60px);
	padding: 0 8px;
	color: var(--wbsf-ic, #fff);
}

.wbsf__svg {
	display: block;
	flex: none;
	width: var(--wbsf-ic-size, 28px);
	height: var(--wbsf-ic-size, 28px);
	max-width: 100%;
	fill: currentColor;
}

.wbsf__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	min-width: 0;
	padding: 0 16px 0 4px;
}

.wbsf[data-align="left"] .wbsf__body {
	padding: 0 4px 0 16px;
	text-align: right;
}

.wbsf__title,
.wbsf__desc {
	color: var(--wbsf-fg, #fff);
	overflow-wrap: anywhere;
}

.wbsf__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

.wbsf__desc {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.35;
	opacity: 0.92;
}

/* -------------------------------------------------------------------------
 * Glasmorphismus
 *
 * Nur die Füllung wird durchsichtig — Text und Icon behalten ihre volle
 * Deckkraft, sonst wird die Flagge über einem hellen Foto unlesbar.
 * ---------------------------------------------------------------------- */

.wbsf--glass .wbsf__flag {
	background: rgba(var(--wbsf-bg-rgb, 14, 113, 184), var(--wbsf-alpha, 0.32));
	-webkit-backdrop-filter: blur(var(--wbsf-blur, 14px)) saturate(160%);
	backdrop-filter: blur(var(--wbsf-blur, 14px)) saturate(160%);
}

/* Heller Rand an der Innenkante: die Lichtkante, die den Glaseindruck macht.
   Außen zur Bildschirmkante hin bleibt sie weg. */
.wbsf--glass.wbsf--edge .wbsf__flag {
	border: 1px solid rgba(255, 255, 255, 0.3);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.wbsf--glass.wbsf--edge[data-align="right"] .wbsf__flag {
	border-right: 0;
}

.wbsf--glass.wbsf--edge[data-align="left"] .wbsf__flag {
	border-left: 0;
}

.wbsf--glass.wbsf--shadow .wbsf__flag {
	box-shadow: 0 10px 34px -8px rgba(0, 0, 0, 0.35);
}

.wbsf--glass.wbsf--edge.wbsf--shadow .wbsf__flag {
	box-shadow: 0 10px 34px -8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.wbsf--glass .wbsf__title,
.wbsf--glass .wbsf__desc {
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

.wbsf--glass .wbsf__flag:hover {
	filter: none;
	background: rgba(var(--wbsf-bg-rgb, 14, 113, 184), calc(var(--wbsf-alpha, 0.32) + 0.12));
}

/* Ohne backdrop-filter (ältere Firefox-Versionen, abgeschaltete Effekte)
   würde die durchsichtige Fläche nur blass und unlesbar wirken — dort
   greift die kräftigere Füllung. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.wbsf--glass .wbsf__flag,
	.wbsf--glass .wbsf__flag:hover {
		background: rgba(var(--wbsf-bg-rgb, 14, 113, 184), 0.92);
	}
}

/* -------------------------------------------------------------------------
 * Rücksichten
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.wbsf__flag {
		transition: none;
	}
}

/* Auf Touch-Geräten fährt nichts aus: der Icon-Streifen ist ein
   vollwertiges Ziel, und ein Tipp darauf löst den Link direkt aus (wählt
   also die Nummer). Ohne diese Regel erzeugt der erste Tipp auf iOS nur
   einen klebenden Hover-Zustand — die Flagge schiebt sich 320 px über den
   Inhalt und bleibt dort stehen. Gleiche Selektoren wie oben, später im
   Stylesheet, also gewinnt diese Regel. Schmale Fenster ohne Touch
   deckt der einstellbare Umbruchpunkt ab (WBSF_Frontend::inline_css). */
@media (hover: none), (pointer: coarse) {
	.wbsf[data-align="right"] .wbsf__flag,
	.wbsf[data-align="right"] .wbsf__flag:hover,
	.wbsf[data-align="right"] .wbsf__flag:focus,
	.wbsf[data-align="right"] .wbsf__flag:focus-within {
		transform: translateX(calc(100% - var(--wbsf-tab, 60px)));
	}

	.wbsf[data-align="left"] .wbsf__flag,
	.wbsf[data-align="left"] .wbsf__flag:hover,
	.wbsf[data-align="left"] .wbsf__flag:focus,
	.wbsf[data-align="left"] .wbsf__flag:focus-within {
		transform: translateX(calc(var(--wbsf-tab, 60px) - 100%));
	}
}

@media print {
	.wbsf {
		display: none;
	}
}