/* ====================================================================
   GLX Slider

   Der Kern des Ganzen ist die Bühne: ein Kasten mit FESTEM Maß, in dem
   alle Bilder übereinander liegen. Daraus folgt zweierlei, und beides ist
   Absicht:

   1. Hochkant und Quer gemischt gehen problemlos. Die Bühne gibt die
      Größe vor, nicht das Bild - deshalb springt nichts, wenn nach einem
      Querformat ein Hochformat kommt.

   2. Die Übergänge brauchen kein Umrechnen. Wer Bilder nebeneinander legt
      und den Streifen verschiebt, muss bei jedem Fensterwechsel neu
      rechnen. Übereinander genügt ein- und ausblenden.
   ==================================================================== */

.glx-sl {
	--glxsl-dauer: 700ms;
	--glxsl-rand: 14px;
	--glxsl-rahmen: 0px;
	--glxsl-rahmenfarbe: #bfa24f;
	--glxsl-zoom: 1;
	--glxsl-breite: 100%;
	/* Kein "none": min(100%, none) ist ungueltiges CSS, und eine ungueltige
	   Angabe faellt ganz weg - dann haette der Slider gar keine Grenze mehr.
	   Eine sehr grosse Zahl wirkt wie "ohne Grenze" und bleibt gueltig. */
	--glxsl-maxbreite: 100000px;
	--glxsl-hoehe: 420px;
	--glxsl-verhaeltnis: 16 / 9;
	--glxsl-gluehfarbe: #bfa24f;
	--glxsl-gluehstaerke: 0;

	position: relative;
	width: var(--glxsl-breite);
	/* Zwei Grenzen: nie breiter als der Textbereich, und nie breiter als
	   das eingestellte Höchstmaß. Ohne das zweite wächst der Slider mit
	   dem Textbereich mit - und sieht auf der Seite ganz anders aus als im
	   schmaleren Bearbeitungsbereich. */
	max-width: min(100%, var(--glxsl-maxbreite, 100000px));
	margin-left: auto;
	margin-right: auto;
	height: var(--glxsl-hoehe);
	border-radius: var(--glxsl-rand);
	border: var(--glxsl-rahmen) solid var(--glxsl-rahmenfarbe);
	overflow: hidden;
	background: #0d0f0d;

	/* Der Schein sitzt am Rahmen und wächst mit --glxsl-gluehstaerke.
	   Steht die auf 0, ist die Angabe wirkungslos - kein zweiter
	   Regelsatz nötig. */
	box-shadow:
		0 0 calc(var(--glxsl-gluehstaerke) * 1px) calc(var(--glxsl-gluehstaerke) * .18px) var(--glxsl-gluehfarbe),
		0 0 calc(var(--glxsl-gluehstaerke) * .4px) var(--glxsl-gluehfarbe) inset;
}

/* Ohne festes Maß bestimmt das Seitenverhältnis die Höhe. Der Slider
   wächst dann mit der Breite mit - auf dem Handy fast immer richtig.

   aspect-ratio wirkt nur, wenn die Höhe auf auto steht; deshalb steht sie
   hier ausdrücklich, und nicht bloß als Weglassen. */
.glx-sl.glx-sl-nach-verhaeltnis {
	height: auto;
	min-height: 0;
	aspect-ratio: var(--glxsl-verhaeltnis);
}

.glx-sl.glx-sl-schatten {
	box-shadow:
		0 0 calc(var(--glxsl-gluehstaerke) * 1px) calc(var(--glxsl-gluehstaerke) * .18px) var(--glxsl-gluehfarbe),
		0 0 calc(var(--glxsl-gluehstaerke) * .4px) var(--glxsl-gluehfarbe) inset,
		0 22px 48px -24px rgba(0, 0, 0, .75);
}

/* --------------------------------------------------------------------
   Die Bühne und die Bilder
   -------------------------------------------------------------------- */

.glx-sl-buehne {
	position: absolute;
	inset: 0;
}

.glx-sl-bild {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity   var(--glxsl-dauer) ease,
		transform var(--glxsl-dauer) ease,
		visibility var(--glxsl-dauer);
}

.glx-sl-bild.ist-da {
	opacity: 1;
	visibility: visible;
	transform: none;
	z-index: 2;
}

.glx-sl-bild img {
	display: block;
	width: 100%;
	height: 100%;
	transition: transform var(--glxsl-dauer) ease;
}

/* --------------------------------------------------------------------
   Wie das Bild in der Bühne sitzt

   Hier entscheidet sich, was mit gemischten Formaten passiert.
   -------------------------------------------------------------------- */

/* Füllen: Der Ausschnitt wird beschnitten, aber nichts verzerrt. Bei
   gemischten Hoch- und Querformaten ist das fast immer die richtige Wahl -
   jedes Bild füllt die Bühne vollständig. */
.glx-sl-p-fuellen .glx-sl-bild img { object-fit: cover; }

/* Welcher Teil erhalten bleibt, wenn beschnitten wird. Bei Porträts steht
   der Kopf oben - dann fehlt unten etwas, und das ist richtig so. */
.glx-sl-a-oben  .glx-sl-bild img { object-position: center top; }
.glx-sl-a-mitte .glx-sl-bild img { object-position: center center; }
.glx-sl-a-unten .glx-sl-bild img { object-position: center bottom; }

/* Ganz zeigen: Das Bild bleibt vollständig. Bei einem Hochformat in einer
   querformatigen Bühne blieben links und rechts Streifen - deshalb legt
   ::before dahinter dasselbe Bild groß und weichgezeichnet. Die Bühne ist
   dadurch gefüllt, ohne dass am Bild selbst etwas fehlt. */
.glx-sl-p-ganz .glx-sl-bild img { object-fit: contain; }
.glx-sl-p-ganz .glx-sl-bild::before {
	content: "";
	position: absolute;
	inset: -6%;
	background-image: var(--glxsl-fuellbild);
	background-size: cover;
	background-position: center;
	filter: blur(22px) brightness(.55) saturate(1.1);
	z-index: -1;
}

/* Dehnen: füllt aus und darf verzerren. Wer das will, weiß warum. */
.glx-sl-p-dehnen .glx-sl-bild img { object-fit: fill; }

/* --------------------------------------------------------------------
   Die Übergänge

   Jeder besteht aus einem Ruhezustand für das Bild, das kommt. Das Bild,
   das geht, verblasst dabei immer - alles andere sähe nach Ruckeln aus.
   -------------------------------------------------------------------- */

/* :not(.ist-da) ist hier kein Schnörkel, sondern der Kern.

   Ohne ihn haben diese Regeln dieselbe Spezifität wie .glx-sl-bild.ist-da
   und stehen weiter unten - dann gewinnen sie, und auch das sichtbare Bild
   bekommt den Ruheversatz. Es steht dann außerhalb der Bühne, und zu sehen
   ist es nur während es hindurchwandert.

   So gelesen sagen die Regeln auch das Richtige: Der Versatz ist der Platz
   außerhalb der Bühne, auf dem die wartenden Bilder stehen. */
.glx-sl-u-links      .glx-sl-bild:not(.ist-da) { transform: translateX(-100%); }
.glx-sl-u-rechts     .glx-sl-bild:not(.ist-da) { transform: translateX(100%); }
.glx-sl-u-oben       .glx-sl-bild:not(.ist-da) { transform: translateY(-100%); }
.glx-sl-u-unten      .glx-sl-bild:not(.ist-da) { transform: translateY(100%); }
.glx-sl-u-aufziehen  .glx-sl-bild:not(.ist-da) { transform: scale(1.25); }
.glx-sl-u-wegziehen  .glx-sl-bild:not(.ist-da) { transform: scale(.8); }

/* Schieben sieht aus wie ein Filmstreifen: Das gehende Bild wandert nach
   links hinaus, während das kommende von rechts hereinkommt. Dafür muss
   das gehende Bild sichtbar bleiben, solange es wandert. */
.glx-sl-u-schieben .glx-sl-bild:not(.ist-da) { transform: translateX(100%); }
.glx-sl-u-schieben .glx-sl-bild.geht {
	opacity: 1;
	visibility: visible;
	transform: translateX(-100%);
	z-index: 1;
}

/* Ohne Übergang: hart schneiden. */
.glx-sl-u-ohne .glx-sl-bild { transition: none; transform: none; }

/* Und zur Sicherheit: Was dran ist, steht immer in der Mitte. Diese Regel
   hat eine höhere Spezifität als jede Übergangsregel und macht damit
   unmöglich, dass derselbe Fehler durch eine neue Zeile zurückkehrt. */
.glx-sl .glx-sl-bild.ist-da { transform: none; }

/* --------------------------------------------------------------------
   Vergrößern beim Überfahren
   -------------------------------------------------------------------- */

.glx-sl-zoom:hover .glx-sl-bild.ist-da img,
.glx-sl-zoom:focus-within .glx-sl-bild.ist-da img {
	transform: scale(var(--glxsl-zoom));
}

/* --------------------------------------------------------------------
   Bildtext
   -------------------------------------------------------------------- */

.glx-sl-text {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	margin: 0;
	padding: 34px 18px 14px;
	color: #fff;
	font-size: .96rem;
	line-height: 1.4;
	text-align: center;
	background: linear-gradient(to top, rgba(0, 0, 0, .68), rgba(0, 0, 0, 0));
	z-index: 3;
}

/* --------------------------------------------------------------------
   Pfeile und Punkte

   Sie liegen ÜBER den Bildern und müssen anklickbar bleiben, auch wenn
   ein Bild gerade darüberwandert - daher der höhere z-index.
   -------------------------------------------------------------------- */

.glx-sl-pfeil {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 999px;
	background: rgba(0, 0, 0, .38);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transition: opacity .2s ease, background .2s ease;
}

.glx-sl-pfeil svg {
	width: 22px; height: 22px;
	fill: none; stroke: currentColor;
	stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

.glx-sl-zurueck { left: 12px; }
.glx-sl-vor     { right: 12px; }

.glx-sl:hover .glx-sl-pfeil,
.glx-sl:focus-within .glx-sl-pfeil { opacity: 1; }
.glx-sl-pfeil:hover { background: rgba(0, 0, 0, .62); }
.glx-sl-pfeil:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 2px; }

/* Auf Geräten ohne Maus gibt es kein Überfahren - dort stehen die Pfeile
   dauerhaft, sonst kommt man nie an sie heran. */
@media (hover: none) {
	.glx-sl-pfeil { opacity: 1; }
}

.glx-sl-punkte {
	position: absolute;
	left: 0; right: 0; bottom: 12px;
	z-index: 5;
	display: flex;
	gap: 8px;
	justify-content: center;
}

.glx-sl-punkt {
	width: 10px; height: 10px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .65);
	border-radius: 999px;
	background: rgba(0, 0, 0, .3);
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}

.glx-sl-punkt.ist-da {
	background: #fff;
	transform: scale(1.25);
}

.glx-sl-punkt:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* --------------------------------------------------------------------
   Wer Bewegung abgeschaltet hat, bekommt den Wechsel ohne Bewegung. Das
   Weiterblättern bleibt, nur ruckelfrei statt wandernd.
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.glx-sl-bild,
	.glx-sl-bild img { transition: opacity .2s ease; transform: none !important; }
}