/* Zitat-Service Elementor Widget – Basis-Styles.
   Farben, Typography, Abstände, Border etc. werden per Elementor-Controls
   inline als CSS-Variablen/Regeln injiziert. Hier stehen nur strukturelle
   Styles und Animationen, die Elementor nicht abbildet. */

.zsw-quote-box-outer {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

.zsw-quote-box {
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
	width: 100%;
}

.zsw-quote-box * {
	box-sizing: border-box;
}

.zsw-quote-item {
	display: flex;
	flex-direction: column;
}

.zsw-quote-mark {
	line-height: 1;
	font-family: Georgia, 'Times New Roman', serif;
}

.zsw-quote-text {
	display: block;
	margin: 0;
	color: inherit;
	text-decoration: none;
}

.zsw-quote-text[href]:hover {
	text-decoration: underline;
}

.zsw-quote-author-wrap {
	margin-top: 12px;
}

.zsw-quote-source-wrap {
	margin-top: 4px;
}

.zsw-quote-author {
	font-weight: 600;
	text-decoration: none;
}

.zsw-quote-author[href]:hover {
	text-decoration: underline;
}

/* ---------- Standard-Optik für Shortcode & Gutenberg-Block (ohne Elementor) ----------
   Greift nur innerhalb von .zsw-standalone (Kennzeichnung siehe class-zsw-shortcode.php),
   damit das Elementor-Widget – dessen Look komplett über eigene Style-Controls kommt –
   davon unberührt bleibt. */

.zsw-standalone .zsw-quote-box {
	background: #f7f7f7;
	border-radius: 8px;
	padding: 28px 32px;
	text-align: center;
}

.zsw-standalone .zsw-quote-mark {
	font-size: 2.4em;
	color: #b0b0b0;
}

.zsw-standalone .zsw-quote-text {
	font-size: 1.15em;
	font-style: italic;
	color: #333;
}

.zsw-standalone .zsw-quote-author {
	color: #222;
}

.zsw-standalone .zsw-quote-source {
	font-size: 0.85em;
	color: #777;
}

/* ---------- Lade-Skeleton (während der Zitat-Fetch läuft) ---------- */

.zsw-skeleton-line {
	height: 1em;
	border-radius: 4px;
	margin-bottom: 0.6em;
	background: linear-gradient(90deg, rgba(120, 120, 120, 0.15) 25%, rgba(120, 120, 120, 0.3) 37%, rgba(120, 120, 120, 0.15) 63%);
	background-size: 400% 100%;
	animation: zsw-skeleton-pulse 1.6s ease-in-out infinite;
}

.zsw-skeleton-line-lg {
	width: 90%;
}

.zsw-skeleton-line-md {
	width: 65%;
}

.zsw-skeleton-line-sm {
	width: 40%;
	margin-bottom: 0;
}

@keyframes zsw-skeleton-pulse {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
	.zsw-skeleton-line {
		animation: none;
	}
}

/* ---------- Fehlermeldung (Ladefehler / keine Zitate gefunden) ---------- */

.zsw-quote-error {
	opacity: 0.8;
	font-style: italic;
	text-align: center;
}

/* ---------- Barrierefreiheit ---------- */

.zsw-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.zsw-carousel-viewport:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.zsw-quote-empty {
	opacity: 0.6;
	font-style: italic;
	text-align: center;
}

/* ---------- Karussell ---------- */

/* Innerhalb der Flex-Reihe "Mitte" muss der Kasten schrumpfen können, damit
   außenliegende Pfeil-Spalten innerhalb der Gesamtbreite (.zsw-quote-box-outer)
   bleiben, statt diese zu überschreiten. */
.zsw-carousel-middle > .zsw-quote-box {
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
}

.zsw-carousel-row {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	width: 100%;
}

.zsw-row-above {
	margin-bottom: 12px;
}

.zsw-row-below {
	margin-top: 12px;
}

.zsw-carousel-middle {
	display: flex;
	align-items: center;
	width: 100%;
}

.zsw-carousel-side {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
}

.zsw-nav-group {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
}

.zsw-nav-group-vertical {
	flex-direction: column;
}

.zsw-dots-side .zsw-carousel-dots {
	flex-direction: column;
	margin: 0;
}

.zsw-carousel-viewport {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	overflow: hidden;
}

.zsw-carousel-track {
	position: relative;
	width: 100%;
	perspective: 1200px;
}

.zsw-carousel-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--zsw-transition-speed, 600ms) ease, transform var(--zsw-transition-speed, 600ms) ease;
}

.zsw-carousel-slide.is-active {
	position: relative;
	opacity: 1;
	pointer-events: auto;
}

/* Fade (Standard, bereits über opacity oben abgedeckt) */

/* Slide / Flip / Zoom: Die eigentliche Ein-/Ausblend-Bewegung wird direkt als
   Inline-Style JE FOLIE von zsw-frontend.js gesetzt (nicht mehr über eine global
   geteilte CSS-Variable, die versehentlich auch unbeteiligte Folien mit-animierte).
   Hier nur noch die verlassende Folie sichtbar halten (opacity:1), damit die vom
   JS gesetzte Bewegung sichtbar bleibt. */
.zsw-mode-carousel[data-effect="slide"] .zsw-carousel-slide.is-leaving,
.zsw-mode-carousel[data-effect="flip"] .zsw-carousel-slide.is-leaving,
.zsw-mode-carousel[data-effect="zoom"] .zsw-carousel-slide.is-leaving {
	opacity: 1;
}

/* Zoom läuft sequenziell (erst raus, dann rein) statt überlappend, daher gibt es hier
   nie zwei gleichzeitig "in flow" befindliche Folien – is-leaving darf also seinen
   eigenen Platz behalten (position:relative), sonst fällt die Box kurz in sich
   zusammen, sobald is-active entfernt wird, bevor die neue Folie aktiv ist. */
.zsw-mode-carousel[data-effect="zoom"] .zsw-carousel-slide.is-leaving {
	position: relative;
}

.zsw-mode-carousel[data-effect="flip"] .zsw-carousel-slide {
	transform-origin: center;
}

.zsw-carousel-arrow {
	position: relative;
	background: transparent;
	border: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	line-height: 1;
	color: inherit;
	transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.zsw-carousel-arrow.zsw-arrow-circle {
	border: 2px solid currentColor;
	border-radius: 50%;
	width: 2.2em;
	height: 2.2em;
}

.zsw-arrow-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.zsw-arrow-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* "Innerhalb": Pfeile überlagern die Box (nur wenn sie direktes Kind des Viewports sind). */
.zsw-carousel-viewport > .zsw-carousel-arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	transform: translateY(-50%) translate(var(--zsw-arrow-offset-x, 0px), var(--zsw-arrow-offset-y, 0px));
}
.zsw-carousel-viewport > .zsw-carousel-arrow:hover {
	transform: translateY(-50%) translate(var(--zsw-arrow-offset-x, 0px), var(--zsw-arrow-offset-y, 0px)) scale(1.08);
}
.zsw-carousel-viewport > .zsw-arrow-prev {
	left: 8px;
}
.zsw-carousel-viewport > .zsw-arrow-next {
	right: 8px;
}

/* Alle anderen Positionen (außerhalb/oben/unten/links/rechts): normale Fluss-Position + Feinjustierung. */
.zsw-carousel-row .zsw-carousel-arrow,
.zsw-carousel-side .zsw-carousel-arrow {
	position: relative;
	transform: translate(var(--zsw-arrow-offset-x, 0px), var(--zsw-arrow-offset-y, 0px));
}
.zsw-carousel-row .zsw-carousel-arrow:hover,
.zsw-carousel-side .zsw-carousel-arrow:hover {
	transform: translate(var(--zsw-arrow-offset-x, 0px), var(--zsw-arrow-offset-y, 0px)) scale(1.08);
}

.zsw-carousel-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	transform: translate(var(--zsw-dots-offset-x, 0px), var(--zsw-dots-offset-y, 0px));
}

/* "Innerhalb": Punkte überlagern die Box unten mittig. */
.zsw-carousel-viewport > .zsw-carousel-dots {
	position: relative;
	margin-top: 16px;
	transform: translate(var(--zsw-dots-offset-x, 0px), var(--zsw-dots-offset-y, 0px));
}

.zsw-row-above .zsw-carousel-dots,
.zsw-row-below .zsw-carousel-dots {
	margin-top: 0;
}

/* Zitat-Zähler ("Zitat 3 von 10") – layoutet nur Abstand/Ausrichtung als
   Fallback; Farbe/Typografie kommen normalerweise aus den Elementor-
   Style-Controls (siehe register_counter_style_controls()). Ist der Schalter
   "Zitat-Zähler anzeigen" aus, versteckt ein Inline-Style (siehe
   class-zsw-elementor-widget.php) das Element unabhängig hiervon – diese
   Regel wirkt sich dann optisch nicht aus. */
.zsw-carousel-status {
	margin-top: 8px;
	text-align: center;
	font-size: 0.85em;
}

.zsw-carousel-dot {
	position: relative;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.4;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: opacity 200ms ease, transform 200ms ease, background-color 200ms ease;
}

.zsw-carousel-dot.is-active {
	opacity: 1;
	transform: scale(1.2);
}

/* ---------- Eigener Tooltip (statt langsamem Browser-title, Verzögerung einstellbar) ---------- */

.zsw-carousel-arrow[data-tooltip]::after,
.zsw-carousel-dot[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 8px;
	padding: 4px 9px;
	background: rgba(20, 20, 20, 0.9);
	color: #fff;
	font-size: 12px;
	line-height: 1.5;
	white-space: nowrap;
	border-radius: 4px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 150ms ease;
	transition-delay: 200ms;
	z-index: 30;
}

.zsw-carousel-arrow[data-tooltip]:hover::after,
.zsw-carousel-dot[data-tooltip]:hover::after {
	opacity: 1;
}

/* ---------- Marquee (Gleiten rein -> Halten -> Gleiten raus -> nächstes) ---------- */

.zsw-marquee-viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.zsw-marquee-item {
	display: none;
	width: 100%;
	will-change: transform;
}

.zsw-marquee-item.is-current {
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.zsw-marquee-item {
		transition: none !important;
	}
	.zsw-carousel-slide {
		transition: none !important;
	}
}