/* Punktquadrat Slider – Frontend (Mobile First)
 * ---------------------------------------------------------------------------
 * Basis = schmaler Bildschirm: Bild oben, Text als eigener Block darunter.
 * Groessere Bildschirme kommen ausschliesslich ueber (min-width)-Queries dazu.
 *
 * Der Wechsel zwischen den beiden Layouts laeuft ueber CSS-Variablen, nicht
 * ueber doppelte Regelsaetze. Jede Regel steht genau einmal; eine Query kippt
 * nur die Variablen:
 *
 *   --pqs-arrow-color Farbe der Pfeile, --pqs-dot-color die der Dots.
 *                     Beide fallen auf --pqs-accent zurueck, wenn im Backend
 *                     nichts eingetragen ist.
 *   --pqs-media-h     Hoehe des Bildbereichs (auto = aus dem Bildformat)
 *   --pqs-nav-h       Bezugshoehe fuer Pfeile, Dots und Balken. Das Skript
 *                     traegt die gemessene Bildhoehe ein, der Slider-Block
 *                     liefert vorher einen Naeherungswert.
 *   --pqs-content-*   Position, Breite und Farben der Textbox
 *
 * Die Klasse .pqs-overlay-from-782 (600/992/1200/0) bestimmt, ab welcher
 * Breite der Text ins Bild wandert. Neue Werte brauchen einen weiteren Block
 * am Dateiende und einen Eintrag in PQS_Shortcode::OVERLAY_BREAKPOINTS.
 * --------------------------------------------------------------------------- */

.pqs-slider {
	position: relative;
	overflow: hidden;
	width: 100%;
	/* Bezugsgroesse fuer cqw: ein Prozent der Slider-Breite. Damit koennen
	   Schrift und Abstaende im selben Verhaeltnis wie das Bild skalieren. */
	container-type: inline-size;

	/* Vom Shortcode gesetzt: --pqs-h, --pqs-h-mob, --pqs-accent, --pqs-speed,
	   --pqs-stack-bg, --pqs-stack-color, --pqs-stack-pad */
	--pqs-accent: #fff;
	--pqs-speed: 600ms;

	/* Basiswerte = gestapelt. Hier stehen nur Werte, die sich auf den Slider
	   beziehen. Alles, was aus den Slide-Einstellungen kommt (--pqs-x,
	   --pqs-bw, --pqs-box-bg …), wird an .pqs-content gesetzt – Variablen
	   werden auf dem Element aufgeloest, auf dem sie deklariert sind, nicht
	   dort, wo sie benutzt werden. */
	--pqs-media-h: var(--pqs-h-mob, 320px);
	--pqs-content-tf: translate(0, 0);
	--pqs-content-shadow: none;
	--pqs-dots-pad: 16px;

	/* Die Hoehe kommt immer vom Bild, nie umgekehrt: der Slider ist so hoch
	   wie sein Inhalt. Ob das Bild eine feste Hoehe hat oder seinem Format
	   folgt, entscheidet --pqs-media-h. So bleibt unten kein Rest stehen. */
	height: auto;
}

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

/* Volle Hoehe heisst: bis zum unteren Fensterrand, nicht eine volle Fensterhoehe
   ab Sliderkante. Steht ein Kopfbereich darueber, zieht das Skript dessen Hoehe
   in --pqs-vh-offset ab, sonst waere die Seite genau darum zu lang. */
.pqs-slider.pqs-fullheight {
	--pqs-media-h: calc(60svh - var(--pqs-vh-offset, 0px));
}

/* Bildhoehe folgt dem Bildformat: kein Beschnitt, keine Luecke zwischen Bild
   und Text. --pqs-ar setzt der Shortcode je Slide aus den Bildmassen. Sobald
   .pqs-media eine Hoehe hat (im Bild-Layout 100%), bleibt aspect-ratio ohne
   Wirkung – die Regel darf deshalb immer gelten. */
.pqs-slider.pqs-natural-mobile {
	--pqs-media-h: auto;
}

/* 100vw misst inklusive des vertikalen Scrollbalkens und ist damit breiter als
   der sichtbare Bereich – daraus entsteht ein waagerechter Scrollbalken. Das
   Skript traegt in --pqs-vw die tatsaechliche Breite ein (clientWidth, ohne
   Scrollbalken); bis dahin gilt 100vw. */
.pqs-slider.pqs-fullwidth {
	width: var(--pqs-vw, 100vw);
	max-width: var(--pqs-vw, 100vw);
	margin-left: calc(50% - var(--pqs-vw, 100vw) / 2);
	margin-right: calc(50% - var(--pqs-vw, 100vw) / 2);
}

/* --- Track und Slides ---------------------------------------------------- */

.pqs-track {
	position: relative;
	width: 100%;
	/* Alle Slides liegen in derselben Grid-Zelle. Die Hoehe richtet sich nach
	   dem hoechsten Slide, dadurch springt beim Wechsel nichts. */
	display: grid;
	align-items: start;
}

.pqs-slide {
	position: relative;
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.pqs-slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 2;
}

.pqs-hide-mobile {
	display: none;
}

/* Uebergang: Fade */
.pqs-trans-fade .pqs-slide {
	transition: opacity var(--pqs-speed) ease, visibility var(--pqs-speed);
}

/* Uebergang: Slide */
.pqs-trans-slide .pqs-slide {
	transform: translateX(100%);
	transition: transform var(--pqs-speed) cubic-bezier(.4, 0, .2, 1), opacity 0ms linear var(--pqs-speed), visibility 0ms linear var(--pqs-speed);
}

.pqs-trans-slide .pqs-slide.is-active {
	transform: translateX(0);
	transition: transform var(--pqs-speed) cubic-bezier(.4, 0, .2, 1), opacity 0ms, visibility 0ms;
}

.pqs-trans-slide .pqs-slide.is-leaving {
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

.pqs-trans-slide .pqs-slide.is-prev {
	transform: translateX(-100%);
}

/* --- Bild ---------------------------------------------------------------- */

.pqs-media {
	position: relative;
	/* width muss ausgeschrieben sein: aspect-ratio greift, sobald eine Achse
	   auto ist. Im Bild-Layout kaeme die Breite sonst aus inset:0, waere damit
	   auto, und der Browser wuerde sie aus Hoehe mal Seitenverhaeltnis rechnen
	   statt den Slider zu fuellen. Mit zwei festen Achsen bleibt aspect-ratio
	   wirkungslos – es zaehlt nur, solange die Hoehe auf auto steht. */
	width: 100%;
	height: var(--pqs-media-h);
	aspect-ratio: var(--pqs-ar, auto);
	overflow: hidden;
}

/* <picture> (mobiles Bild) ist per Vorgabe inline und ohne definierte Hoehe –
   ohne display:block greift height:100% am Bild nicht und object-fit hat
   nichts zu beschneiden. */
.pqs-media picture {
	display: block;
	width: 100%;
	height: 100%;
}

.pqs-media img,
.pqs-image {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.pqs-overlay {
	position: absolute;
	inset: 0;
	display: block;
	pointer-events: none;
	z-index: 2;
}

/* Scrim: Verlauf ueber dem Bild, damit heller Text lesbar bleibt. */
.pqs-scrim-bottom .pqs-media::after,
.pqs-scrim-top .pqs-media::after,
.pqs-scrim-left .pqs-media::after,
.pqs-scrim-right .pqs-media::after,
.pqs-scrim-full .pqs-media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.pqs-scrim-bottom .pqs-media::after {
	background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .45) 32%, rgba(0, 0, 0, 0) 68%);
}

.pqs-scrim-top .pqs-media::after {
	background: linear-gradient(to bottom, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .45) 32%, rgba(0, 0, 0, 0) 68%);
}

.pqs-scrim-left .pqs-media::after {
	background: linear-gradient(to right, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .40) 38%, rgba(0, 0, 0, 0) 72%);
}

.pqs-scrim-right .pqs-media::after {
	background: linear-gradient(to left, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .40) 38%, rgba(0, 0, 0, 0) 72%);
}

.pqs-scrim-full .pqs-media::after {
	background: rgba(0, 0, 0, .45);
}

/* Ken Burns */
.pqs-kenburns .pqs-slide.is-active .pqs-image {
	animation: pqs-kb 12s ease-out forwards;
}

@keyframes pqs-kb {
	from { transform: scale(1); }
	to   { transform: scale(1.12); }
}

/* --- Textbox -------------------------------------------------------------
   Eine Regel fuer beide Layouts. Gestapelt: statisch, volle Breite, eigener
   Hintergrund. Im Bild: absolut auf X/Y, Breite und Farben aus den Slide-
   Einstellungen. position/left/top/width mit !important, damit Inline-Styles
   aelterer Plugin-Versionen und Theme-CSS das Layout nicht kippen. */

.pqs-content {
	position: static !important;
	left: auto !important;
	top: auto !important;
	width: 100% !important;
	max-width: 100% !important;
	transform: var(--pqs-content-tf);
	z-index: 5;
	padding: var(--pqs-stack-pad, 22px);
	border-radius: 0;
	background: var(--pqs-stack-bg, #111111);
	color: var(--pqs-stack-color, #ffffff);
	text-align: var(--pqs-align, center);
}

.pqs-ts .pqs-content {
	text-shadow: var(--pqs-content-shadow);
}

.pqs-title {
	margin: 0 0 .4em;
	font-size: var(--pqs-title-mob, 26px);
	line-height: 1.2;
	color: inherit;
	text-wrap: balance;
}

.pqs-text {
	font-size: var(--pqs-text-mob, 15px);
	line-height: 1.55;
	color: inherit;
}

.pqs-text p { margin: 0 0 .6em; color: inherit; }
.pqs-text p:last-child { margin-bottom: 0; }

.pqs-button {
	display: inline-block;
	margin-top: 1em;
	padding: .7em 1.6em;
	border: 2px solid currentColor;
	border-radius: 2px;
	color: inherit;
	text-decoration: none;
	font-size: .95em;
	text-shadow: none;
	transition: background .2s, color .2s;
}

.pqs-button:hover,
.pqs-button:focus {
	background: currentColor;
	color: #000;
}

/* Nur ueber dem Bild, damit Links im gestapelten Text klickbar bleiben. */
.pqs-slide-link {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--pqs-nav-h, 320px);
	z-index: 4;
}

/* --- Text-Animationen ----------------------------------------------------
   Der Versatz wird an --pqs-content-tf angehaengt, deshalb funktionieren die
   Animationen in beiden Layouts ohne eigene Regelsaetze. */

.pqs-slide .pqs-content { opacity: 0; }
.pqs-slide.is-active .pqs-content { opacity: 1; }

.pqs-anim-fade .pqs-content { transition: opacity .8s ease .2s; }

.pqs-anim-fade-up .pqs-content {
	transform: var(--pqs-content-tf) translateY(30px);
	transition: opacity .8s ease .2s, transform .8s ease .2s;
}
.pqs-anim-fade-up.is-active .pqs-content { transform: var(--pqs-content-tf); }

.pqs-anim-fade-left .pqs-content {
	transform: var(--pqs-content-tf) translateX(-40px);
	transition: opacity .8s ease .2s, transform .8s ease .2s;
}
.pqs-anim-fade-left.is-active .pqs-content { transform: var(--pqs-content-tf); }

.pqs-anim-zoom .pqs-content {
	transform: var(--pqs-content-tf) scale(.9);
	transition: opacity .8s ease .2s, transform .8s ease .2s;
}
.pqs-anim-zoom.is-active .pqs-content { transform: var(--pqs-content-tf) scale(1); }

/* --- Bedienelemente gegen Theme-Styles absichern --------------------------
   Viele Themes stylen jedes <button> mit Rahmen, Polster, Hintergrund und
   Icons per Pseudo-Element. Das trifft sonst auch Pfeile und Dots. */

.pqs-slider .pqs-arrow,
.pqs-slider .pqs-dot {
	box-sizing: border-box !important;
	margin: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-size: 0 !important;
	line-height: 0 !important;
	appearance: none !important;
	-webkit-appearance: none !important;
}

.pqs-slider .pqs-arrow::before,
.pqs-slider .pqs-arrow::after,
.pqs-slider .pqs-dot::before,
.pqs-slider .pqs-dot::after {
	content: none !important;
	display: none !important;
}

/* --- Pfeile --------------------------------------------------------------
   Bezug ist die Bildhoehe, nicht die Slider-Hoehe: gestapelt bleiben die
   Pfeile dadurch ueber dem Bild statt neben dem Text. */

.pqs-arrow {
	position: absolute;
	top: calc(var(--pqs-nav-h, 320px) / 2);
	transform: translateY(-50%);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	width: 38px !important;
	height: 38px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5));
	transition: opacity .2s, background .2s;
}

/* Der Chevron ist ein SVG-Pfad mit stroke="currentColor", die Pfeilfarbe
   laeuft also ueber color. Themes faerben Buttons oft mit hoeherer
   Spezifitaet – auch im Hover- und Fokuszustand. */
.pqs-arrow,
.pqs-arrow:hover,
.pqs-arrow:focus,
.pqs-arrow:active,
.pqs-arrow:visited {
	color: var(--pqs-arrow-color, var(--pqs-accent)) !important;
}

.pqs-arrow svg,
.pqs-arrow svg path {
	fill: none !important;
	stroke: currentColor !important;
}

.pqs-arrow svg { width: 20px; height: 20px; }
.pqs-arrow:hover { opacity: .7; }
.pqs-prev { left: 6px; }
.pqs-next { right: 6px; }

.pqs-arrows-circle .pqs-arrow {
	background: rgba(0, 0, 0, .35) !important;
	border-radius: 50% !important;
	filter: none;
}

.pqs-arrows-square .pqs-arrow {
	background: rgba(0, 0, 0, .35) !important;
	border-radius: 2px !important;
	filter: none;
}

/* --- Dots ----------------------------------------------------------------
   Der Container ist so hoch wie das Bild und richtet die Dots an dessen
   Unterkante aus – gestapelt wie im Bild dieselbe Regel. */

/* Der Container haengt mit seiner Unterkante an der Unterkante des Bildes und
   umschliesst nur die Dots – so laesst sich ein Hintergrund direkt darauf
   legen, ohne dass er als hoher Streifen ueber dem Bild liegt. */
.pqs-dots {
	position: absolute;
	top: var(--pqs-nav-h, 320px);
	left: 50%;
	transform: translate(-50%, -100%);
	margin-top: calc(-1 * var(--pqs-dots-pad));
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 10px;
	pointer-events: none;
}

/* Hintergrund fuer helle oder unruhige Motive, sonst gehen die Dots unter. */
.pqs-dots-bg-dark .pqs-dots,
.pqs-dots-bg-light .pqs-dots {
	padding: 9px 14px;
	border-radius: 999px;
}

.pqs-dots-bg-dark .pqs-dots { background: rgba(0, 0, 0, .45); }
.pqs-dots-bg-light .pqs-dots { background: rgba(255, 255, 255, .55); }

/* Ausgeblendet, bis der Block des Sliders sie oberhalb des Breakpoints
   zurueckholt (siehe PQS_Shortcode::overlay_css). */
.pqs-hide-dots-mobile .pqs-dots {
	display: none;
}

.pqs-dot {
	pointer-events: auto;
	cursor: pointer;
	width: 11px !important;
	height: 11px !important;
	padding: 0 !important;
	border: 1px solid var(--pqs-dot-color, var(--pqs-accent)) !important;
	background: transparent !important;
	border-radius: 50% !important;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55)) drop-shadow(0 0 1px rgba(0, 0, 0, .45));
	transition: background .25s, transform .25s;
}

.pqs-dot.is-active { background: var(--pqs-dot-color, var(--pqs-accent)) !important; }

.pqs-dots-square .pqs-dot { border-radius: 0 !important; }

.pqs-dots-line .pqs-dot {
	width: 30px !important;
	height: 3px !important;
	border-radius: 0 !important;
	border: 0 !important;
	background: var(--pqs-dot-color, var(--pqs-accent)) !important;
	opacity: .4;
}
.pqs-dots-line .pqs-dot.is-active { opacity: 1; }

/* --- Fortschrittsbalken --------------------------------------------------- */

.pqs-progress {
	position: absolute;
	left: 0;
	top: calc(var(--pqs-nav-h, 320px) - 3px);
	width: 100%;
	height: 3px;
	background: rgba(255, 255, 255, .25);
	z-index: 10;
}

.pqs-progress span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--pqs-accent);
}

.pqs-arrow:focus-visible,
.pqs-dot:focus-visible,
.pqs-button:focus-visible {
	outline: 2px solid var(--pqs-accent);
	outline-offset: 3px;
}

/* --- Ab Tablet: Schriftgroessen und Bedienelemente ------------------------
   Unabhaengig vom Layout-Wechsel, damit die Mobil-Schriftgroessen auch dann
   greifen, wenn der Text immer im Bild steht. */

/* Fliessende Schriftgroessen: cqw ist ein Prozentsatz der Slider-Breite, der
   Text skaliert also mit dem Bild statt an einer Grenze zu springen. clamp()
   haelt ihn zwischen Mobil- und Desktop-Groesse. Kennt ein Browser cqw nicht,
   faellt die ganze Zeile weg und die festen Groessen unten greifen.
   Der Plakat-Modus benutzt dieselben Variablen ohne clamp, siehe
   PQS_Shortcode::overlay_css. */
.pqs-fluid-text .pqs-title {
	font-size: clamp(var(--pqs-title-mob, 26px), var(--pqs-title-fluid, 3.5cqw), var(--pqs-title, 42px));
}

.pqs-fluid-text .pqs-text {
	font-size: clamp(var(--pqs-text-mob, 15px), var(--pqs-text-fluid, 1.5cqw), var(--pqs-text, 18px));
}

@media (min-width: 782px) {
	.pqs-title { font-size: var(--pqs-title, 42px); line-height: 1.15; }
	.pqs-text  { font-size: var(--pqs-text, 18px); }

	.pqs-hide-mobile { display: block; }

	.pqs-arrow {
		width: 46px !important;
		height: 46px !important;
	}
	.pqs-arrow svg { width: 26px; height: 26px; }
	.pqs-prev { left: 16px; }
	.pqs-next { right: 16px; }
}

/* --- Layout-Wechsel: Text ins Bild ---------------------------------------
   Ab welcher Breite der Text ins Bild wandert, ist pro Slider einstellbar.
   Media Queries koennen keine CSS-Variablen auswerten, deshalb gibt der
   Shortcode dafuer einen kleinen, auf die Slider-ID gemuenzten <style>-Block
   aus (siehe PQS_Shortcode::overlay_css). Der enthaelt nur Variablen und die
   Werte der Textbox – Pfeile, Dots und Fortschrittsbalken haengen an
   --pqs-media-h und wandern automatisch mit.

   Zur Orientierung, so sieht der ausgegebene Block aus:

   @media (min-width: 783px) {
       #pqs-12-3456 { --pqs-media-h: var(--pqs-h,500px); … }
       #pqs-12-3456 .pqs-content { position: absolute !important; … }
   }
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.pqs-slide,
	.pqs-content,
	.pqs-image {
		transition-duration: .01ms !important;
		animation: none !important;
	}
}