/* triathlon Zitate – Frontend.
 * Das Porträt steht immer auf der Unterkante der Karte (rechts) und darf oben herausragen;
 * der Text fließt um die Silhouette. Die Höhe des Abstandshalters setzt frontend.js.
 * Alle Schrift- und Abstandsregeln mit !important, weil Themes (Newspaper) blockquote/p stark stylen. */
.tz-quote {
	--tz-accent: #E4572E;
	--tz-ink: #14213D;
	--tz-muted: #4A5468;
	--tz-img-h: 150px;
	container-type: inline-size;
	display: block !important;
	margin: 16px 0 24px !important;
	padding: var(--tz-over, 0px) 0 0 !important;
	color: var(--tz-ink);
	text-align: left !important;
}
.tz-quote, .tz-quote * { box-sizing: border-box; }
.tz-quote .tz-quote__card {
	position: relative;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(20, 33, 61, .08), 0 6px 18px rgba(20, 33, 61, .08);
	padding: 16px 12px 0 16px;
}
.tz-quote .tz-quote__body {
	display: flow-root;
	padding: 0 0 16px;
	margin: 0;
}
.tz-quote .tz-quote__spacer {
	display: block;
	float: right;
	width: 0;
	height: var(--tz-sp, 0px);
}
.tz-quote .tz-quote__img {
	display: block;
	float: right;
	clear: right;
	width: auto !important;
	height: var(--tz-img-h) !important;
	max-width: 48% !important;
	object-fit: contain;
	object-position: bottom right;
	margin: var(--tz-mt, 0px) 0 -16px 8px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	shape-image-threshold: .15;
	shape-margin: 6px;
}

.tz-quote .tz-quote__label {
	display: flex !important;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px !important;
	padding: 0 !important;
	font-family: "TZ Barlow Condensed", "Barlow Condensed", "Arial Narrow", sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	font-style: normal !important;
	line-height: 1.2 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	color: var(--tz-ink) !important;
	text-align: left !important;
}
.tz-quote .tz-quote__label::before {
	content: "";
	flex: 0 0 20px;
	height: 3px;
	border-radius: 2px;
	background: var(--tz-accent);
}
.tz-quote blockquote.tz-quote__text {
	margin: 0 0 10px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	quotes: none;
	text-align: left !important;
	font-size: inherit !important;
}
.tz-quote blockquote.tz-quote__text::before,
.tz-quote blockquote.tz-quote__text::after,
.tz-quote blockquote.tz-quote__text p::before,
.tz-quote blockquote.tz-quote__text p::after { content: none !important; display: none !important; }
.tz-quote blockquote.tz-quote__text p {
	margin: 0 !important;
	padding: 0 !important;
	font-family: "TZ Source Serif 4", "Source Serif 4", Georgia, serif !important;
	font-size: 18px !important;
	font-style: italic !important;
	font-weight: 400 !important;
	line-height: 1.32 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-align: left !important;
	color: var(--tz-ink) !important;
}
.tz-quote figcaption.tz-quote__by {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
	font-style: normal !important;
}
.tz-quote .tz-quote__name {
	display: block;
	font-family: "TZ Barlow Condensed", "Barlow Condensed", "Arial Narrow", sans-serif !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	font-style: normal !important;
	line-height: 1.15 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--tz-ink) !important;
}
.tz-quote .tz-quote__role {
	display: block;
	margin-top: 1px;
	font-family: "TZ Inter", Inter, system-ui, -apple-system, "Segoe UI", sans-serif !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	font-style: normal !important;
	line-height: 1.35 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--tz-muted) !important;
}

/* Breite Einsatzorte (Startseite, unter Artikeln) */
@container (min-width: 560px) {
	.tz-quote .tz-quote__card { --tz-img-h: 230px; padding: 22px 24px 0 30px; }
	.tz-quote .tz-quote__body { padding-bottom: 22px; }
	.tz-quote .tz-quote__img { max-width: 42% !important; margin: var(--tz-mt, 0px) 0 -22px 20px !important; }
	.tz-quote .tz-quote__label { font-size: 14px !important; margin-bottom: 10px !important; }
	.tz-quote blockquote.tz-quote__text { margin-bottom: 12px !important; }
	.tz-quote blockquote.tz-quote__text p { font-size: 22px !important; }
	.tz-quote .tz-quote__name { font-size: 19px !important; }
	.tz-quote .tz-quote__role { font-size: 13px !important; }
}

/* Platzhalter (nur in der Backend-Vorschau, wenn noch kein Bild existiert) */
.tz-quote .tz-quote__img--placeholder { width: 110px !important; }
@container (min-width: 560px) { .tz-quote .tz-quote__img--placeholder { width: 170px !important; } }