/*
 * Scalium article UI — "Blog post" look (Version 3).
 * Styles the stored ct-* markup; templates/blog-post.php only moves .ct-open-questions-wrap into .ct-inner.
 * Blog-post style layout.
 *
 *   .ct-header                -> .blog-post__header   (title, subheadline, byline, header image)
 *   .ct-open-questions-wrap   -> .blog-questions
 *   .ct-takeaways-wrap        -> .blog-key-facts
 *   .ct-toc-wrap              -> .blog-post__toc      (sticky left column on desktop)
 *   .ct-inner > sections      -> .blog-post__body     (reading column)
 */

:root {
	--ct-primary: #4a787a;
	--ct-primary-hover: #3a6062;
	--blog-accent: #4a787a;
	--blog-ink: #1d1d1d;
	--blog-muted: rgba(29, 29, 29, 0.65);
	--blog-border-bottom-color: #1D1D1D;
	--blog-line: rgba(29, 29, 29, 0.15);
	--blog-surface: rgba(29, 29, 29, 0.04);
	--blog-radius: 20px;
	--blog-reading-width: 72ch;
	/* Fluid side indent, capped at 320px from a 2560px viewport. */
	--blog-indent: calc(clamp(16px, 1.3392857143vw + 5.7142857143px, 40px) + clamp(16px, 14.7321428571vw - 97.1428571429px, 280px));
	--blog-top: 120px; /* room for the fixed site header */
	--blog-gap-m: clamp(10px, 0.7vw + 8px, 26px);
	--blog-gap-l: clamp(26px, 0.7vw + 24px, 42px);
	--blog-gap-xl: clamp(42px, 1.2vw + 38px, 68px);
	--blog-pad-v: clamp(15px, 0.6696428571vw + 12.8571428571px, 30px);
	--blog-pad-h: clamp(14px, 0.625vw + 12px, 28px);
}

/* The 820px plugin default would squeeze the two-column layout. */
.ct-header,
.ct-inner,
.ct-header *,
.ct-inner * {
	box-sizing: border-box;
	font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Header ---------- */

body .ct-header {
	/* The image comes in inline (or via ct_header_bg) as background-image on this element.
	   It is re-used below by ::after as a framed picture, so the header itself paints none. */
	display: grid;
	gap: var(--blog-gap-m);
	margin: 0;
	padding: var(--blog-top) var(--blog-indent) 0;
	background-size: 0 0;
	background-color: transparent;
	color: var(--blog-ink);
	min-height: 0;
}

body .ct-header::before {
	content: none;
}

body .ct-header::after {
	content: '';
	order: 3;
	background-image: inherit;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: var(--blog-radius);
	aspect-ratio: 16 / 5;
	margin-top: var(--blog-gap-m);
}

/* Lets the h1 / subheadline / author / questions take part in the header grid. */
.ct-header-content {
	display: contents;
}

.ct-h1 {
	order: 0;
	max-width: 22ch;
	margin: 0;
	color: var(--blog-ink);
	font-size: clamp(40px, 0.4464285714vw + 38.5714285714px, 50px);
	font-weight: 500;
	line-height: clamp(44px, 0.9375vw + 41px, 65px);
	text-wrap: balance;
	hyphens: auto;
}

.ct-subheadline {
	order: 1;
	max-width: 48ch;
	margin: 0;
	color: var(--blog-muted);
	font-size: clamp(20px, 1.6vw, 24px);
	line-height: 1.5;
	text-wrap: pretty;
}

/* Byline */

.ct-author-box {
	order: 2;
	display: flex;
	align-items: center;
	gap: 14px;
	/* max-width: 46ch; */
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}

.ct-author-avatar {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border: 2px solid var(--blog-accent);
	border-radius: 50%;
}

.ct-author-info {
	display: grid;
	align-content: center;
	gap: 2px;
	margin: 0;
}

.ct-author-info br{
	display: none;
}

.ct-author-name {
	color: var(--blog-ink);
	margin: 0;
	font-size: clamp(18px, 0.0892857143vw + 17.7142857143px, 20px);
	font-weight: 500;
	line-height: 1.5;
}

.ct-author-role {
	margin: 0;
	color: var(--blog-muted);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.57;
}

/* ---------- Questions (.blog-questions) ----------
   templates/blog-post.php moves this block from .ct-header into .ct-inner. */

.ct-open-questions-wrap {
	margin: 0 0 var(--blog-gap-xl);
	padding: var(--blog-pad-v) var(--blog-pad-h);
	border-radius: var(--blog-radius);
	background: var(--blog-surface);
}

.ct-open-questions-wrap::before {
	content: 'Diese Fragen beantwortet der Beitrag';
	display: block;
	margin-bottom: 12px;
	color: var(--blog-accent);
	font-size: 14px;
	font-weight: 500;
}

.ct-open-questions {
	display: grid;
	gap: 10px;
	margin: 0;
	padding-left: 1.2em;
	list-style: disc;
	color: var(--blog-ink);
}

.ct-open-q {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	font-size: 18px;
	line-height: 1.5;
}

/* ---------- Body: TOC column + reading column ---------- */

.ct-inner {
	display: grid;
	margin: 0;
	padding: clamp(26px, 1.9vw + 20px, 68px) var(--blog-indent) clamp(42px, 3vw + 32px, 110px);
	color: var(--blog-ink);
	font-size: 18px;
	line-height: 1.5;
	row-gap: 0;
	column-gap: clamp(26px, 1.9vw + 20px, 68px);
	align-items: start;
}

.ct-inner > * {
	min-width: 0;
	/* max-width: var(--blog-reading-width); */
}

@media (min-width: 1024px) {
	.ct-inner {
		grid-template-columns: minmax(220px, 1fr) minmax(0, 3fr);
	}

	.ct-inner > * {
		grid-column: 2;
	}

	.ct-inner > .ct-toc-wrap {
		grid-column: 1;
		grid-row: 1 / span 40; /* empty implicit rows are 0px tall (row-gap is 0) */
		position: sticky;
		top: calc(var(--blog-top) - 40px);
		max-width: none;
	}
}

/* TOC */

.ct-toc-wrap {
	margin: 0;
	padding: 20px 24px;
	border-radius: var(--blog-radius);
	background: var(--blog-surface);
}

.ct-toc-label {
	margin: 0;
	color: var(--blog-ink);
	font-size: clamp(18px, 0.0892857143vw + 17.7142857143px, 20px);
	font-weight: 500;
	line-height: 1.5;
}

ol.ct-toc{
	list-style: decimal;
}

.ct-toc {
	display: grid;
	gap: 10px;
	margin: 16px 0 0;
	padding-left: 1.2em;
	font-size: 14px;
	line-height: 1.57;
}

.ct-toc a {
	color: inherit;
	text-decoration: none;
}

.ct-toc a:hover {
	color: var(--blog-accent);
	text-decoration: underline;
}

/* ---------- Key facts (.blog-key-facts) ---------- */

.ct-takeaways-wrap {
	margin: 0 0 var(--blog-gap-xl);
	padding: clamp(20px, 1.2vw + 14px, 36px);
	border-radius: var(--blog-radius);
	background: var(--blog-accent);
	color: #fff;
}

.ct-takeaways-label {
	margin: 0 0 16px;
	color: inherit;
	font-size: clamp(20px, 0.1785714286vw + 19.4285714286px, 24px);
	font-weight: 500;
	line-height: clamp(22px, 0.4107142857vw + 20.6857142857px, 31.2px);
}

.ct-takeaways {
	display: grid;
	gap: 12px;
	margin: 0;
	padding-left: 1.2em;
	list-style: disc;
}

.ct-takeaway {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	font-size: 18px;
}

/* ---------- Sections ---------- */

.ct-typeform, .ct-section {
	margin: 0 0 var(--blog-gap-xl);
	padding: 0;
	scroll-margin-top: calc(var(--blog-top) - 40px);
}

.ct-inner .ct-section > * + * {
	margin-top: var(--blog-gap-l);
}

.ct-inner .ct-section > p + :is(ul, ol) {
	margin-top: var(--blog-gap-m);
}

.ct-h2,
.ct-faq-heading {
	margin: 0;
	color: var(--blog-ink);
	font-size: clamp(30px, 0.4464285714vw + 28.5714285714px, 40px);
	font-weight: 500;
	line-height: clamp(33px, 0.8482142857vw + 30.2857142857px, 52px);
}

.ct-text {
	margin: 0;
	color: var(--blog-ink);
	font-size: 18px;
	line-height: 1.5;
}

.ct-section a,
.ct-faq-wrap a {
	color: var(--blog-accent);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.ct-section a:hover,
.ct-faq-wrap a:hover {
	color: var(--ct-primary-hover);
}

.ct-section figure,
.ct-inner figure {
	margin: 0;
}

.ct-section figure img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--blog-radius);
}

.ct-section figcaption {
	margin-top: 8px;
	font-size: 14px;
	color: var(--blog-muted);
}

/* Bullets */

.ct-bullet-list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding-left: 1.2em;
	list-style: disc;
}

.ct-bullet-item {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}

/* Answer box */

.ct-answer,
.ct-tile {
	padding: var(--blog-pad-v) var(--blog-pad-h);
	border: 0;
	border-radius: var(--blog-radius);
	background: var(--blog-surface);
}

.ct-answer > *,
.ct-tiles-wrap > *,
.ct-compare-side > * {
	margin: 0;
}

.ct-answer-label {
	display: block;
	margin: 0 0 12px;
	color: var(--blog-accent);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.57;
}

/* Tiles */

.ct-tiles-wrap {
	display: grid;
	gap: var(--blog-gap-m);
}

.ct-tiles {
	--ct-tiles-max: 3;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
	grid-auto-rows: 1fr;
	gap: 12px;
}

@media (min-width: 640px) {
	.ct-tiles {
		grid-template-columns: repeat(var(--ct-tiles-max), minmax(0, 1fr));
	}

	.ct-tiles:has(> :nth-child(4):last-child) {
		--ct-tiles-max: 2;
	}
}

.ct-tile {
	display: grid;
	align-content: start;
	gap: 8px;
}

.ct-tile-headline {
	margin: 0;
	font-size: clamp(18px, 0.0892857143vw + 17.7142857143px, 20px);
	font-weight: 500;
	line-height: clamp(19.8px, 0.2767857143vw + 18.9142857143px, 26px);
}

.ct-tile-desc {
	margin: 0;
	color: var(--blog-muted);
	font-size: 16px;
}

/* Process steps */

.ct-process {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ct-step;
}

.ct-process-step {
	position: relative;
	display: grid;
	gap: 4px;
	padding-left: 52px;
	counter-increment: ct-step;
}

.ct-process-step::before {
	content: counter(ct-step);
	position: absolute;
	top: -2px;
	left: 0;
	display: grid;
	place-items: center;
	width: 36px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--blog-accent);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
}

.ct-process-step br {
	display: none;
}

.ct-step-headline {
	font-size: 18px;
	font-weight: 500;
}

.ct-step-desc {
	color: var(--blog-muted);
}

/* Compare */

.ct-compare {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 16px;
}

.ct-compare-side {
	display: grid;
	align-content: start;
	gap: 14px;
	padding: var(--blog-pad-v) var(--blog-pad-h);
	border-top: 3px solid var(--blog-accent);
	border-radius: var(--blog-radius);
	background: var(--blog-surface);
}

.ct-compare-title {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
}

.ct-compare-list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding-left: 1.2em;
	list-style: disc;
}

/* Tables */

.ct-table-wrap {
	max-width: 100%;
	overflow-x: auto;
}

.ct-table-wrap table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
}

.ct-table-wrap th,
.ct-table-wrap td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--blog-line);
	text-align: left;
	vertical-align: top;
}

.ct-table-wrap th {
	border-bottom-color: var(--color-cod-gray);
	font-weight: 500;
}

/* FAQ (frontend.php toggles .ct-faq-a and tints .ct-faq-q with --ct-primary) */

.ct-faq-wrap {
	display: grid;
	gap: 8px;
	margin: 0;
}

.ct-faq {
	display: grid;
}

.ct-faq-item {
	display: grid;
	gap: 6px;
	padding-block: 16px;
	border-bottom: 1px solid var(--blog-line);
}

.ct-faq-item > * {
	margin: 0;
}

.ct-faq-q {
	padding: 8px 12px;
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
}

.ct-faq-a {
	padding-inline: 12px;
}

/* Case study (.ct-case): head, Ausgangslage / Vorgehen / Ergebnis, then 2-4 key numbers */

.ct-case {
	display: grid;
	gap: var(--blog-gap-m);
	padding: var(--blog-pad-v) var(--blog-pad-h);
	border-radius: var(--blog-radius);
	background: var(--blog-surface);
}

.ct-case > *,
.ct-case-head > *,
.ct-quote-body > *,
.ct-metric-body > * {
	margin: 0;
}

.ct-case-head {
	display: grid;
	gap: 6px;
}

.ct-case-label,
.ct-metric-label {
	display: block;
	color: var(--blog-accent);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.57;
}

.ct-case-title {
	font-size: clamp(20px, 0.1785714286vw + 19.4285714286px, 24px);
	font-weight: 500;
	line-height: clamp(22px, 0.4107142857vw + 20.6857142857px, 31.2px);
}

.ct-case-body {
	display: grid;
	gap: 12px;
}

.ct-case-step {
	display: grid;
	grid-template-columns: 108px minmax(0, 1fr);
	gap: 16px;
	margin: 0;
}

.ct-case-step dt {
	padding-top: 3px;
	color: var(--blog-accent);
	font-size: 14px;
	font-weight: 500;
}

.ct-case-step dd {
	margin: 0;
	color: var(--blog-ink);
}

.ct-case-numbers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
	gap: 12px;
	padding-top: var(--blog-gap-m);
	border-top: 1px solid var(--blog-line);
}

.ct-case-number {
	display: grid;
	gap: 4px;
	text-align: left;
}

.ct-case-number b {
	display: block;
	color: var(--blog-accent);
	font-size: clamp(30px, 0.4464285714vw + 28.5714285714px, 40px);
	font-weight: 500;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.ct-case-number span {
	display: block;
	color: var(--blog-muted);
	font-size: 14px;
	line-height: 1.57;
}

/* Testimonial (.ct-quote): photo is optional */

.ct-quote {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: var(--blog-pad-v) var(--blog-pad-h);
	border-radius: var(--blog-radius);
	background: var(--blog-surface);
}

.ct-quote-photo {
	flex: none;
	width: 128px;
	height: 128px;
	border-radius: 50%;
	object-fit: cover;
}

.ct-quote-body {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.ct-quote-text {
	margin-bottom: 10px;
	font-size: clamp(18px, 0.0892857143vw + 17.7142857143px, 20px);
	line-height: 1.5;
}

.ct-quote-name {
	display: block;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
}

.ct-quote-role {
	display: block;
	color: var(--blog-muted);
	font-size: 14px;
	line-height: 1.3;
}

/* Number highlight (.ct-metric) */

.ct-metric {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 8px 24px;
	padding: var(--blog-pad-v) var(--blog-pad-h);
	border-radius: var(--blog-radius);
	background: var(--blog-surface);
}

.ct-metric-value {
	color: var(--blog-accent);
	font-size: clamp(40px, 0.4464285714vw + 38.5714285714px, 50px);
	font-weight: 500;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ct-metric-body {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.ct-metric-text {
	font-size: 16px;
	line-height: 1.5;
}

.ct-bild-unterschrift {
	font-size: 13px;
	font-style: italic;
	line-height: 1.55;
	color: var(--ct-text-muted);
	text-align: center;
	margin-top: 10px;
}

/* ---------- Small screens ---------- */

@media (max-width: 1023px) {
	:root {
		--blog-top: 96px;
	}

	.ct-toc-wrap {
		position: static;
	}
}

@media (max-width: 620px) {
	.ct-metric {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}

	.ct-quote {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.ct-case-step {
		grid-template-columns: minmax(0, 1fr);
		gap: 3px;
	}

	body .ct-header::after {
		aspect-ratio: 16 / 9;
	}
}