/*
 * proof/article. Figma "SEO Agency Page - V2" article 3275:1308, see
 * sites/proof/design/agency-spec.md §8 (the Leistung and Ratgeber files use
 * the same frame): TOC card 581 (sticky, 40 from the top), chapters 1041,
 * 80 apart including a 1px rule. The chapters are native blocks, styled
 * here by element: H2 = chapter title with its "[n]" marker, H3 = small
 * uppercase lead-in, lists = lime squares (style "Häkchen": blue ticks),
 * quote = dashed rule + lime quote mark.
 */

/* clip, not hidden: hidden would make the section the sticky scroller. */
.pf-block.pf-article {
	padding-top: calc(230 * var(--pf-u));
	overflow: clip;
}
/* As wide as the H2 box (Leistung file: 909). The agency file's 783 box
   breaks earlier (after "groß,"): that text has manual line breaks. */
.pf-block.pf-article .pf-sub {
	width: min(100%, calc(909 * var(--pf-u)));
}
.pf-art-row {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	margin-top: calc(90.5 * var(--pf-u));
}

/* Table of contents */
.pf-toc {
	flex: none;
	width: calc(581 * var(--pf-u));
}
.pf-block .pf-toc-card {
	position: sticky;
	/* 92 = fixed site header, plus the 40 breathing room from Figma. */
	top: calc(132 * var(--pf-u));
	padding: calc(32 * var(--pf-u)) calc(24 * var(--pf-u));
	overflow: hidden;
	border-radius: calc(8 * var(--pf-u));
	background: var(--pf-blue);
}
.pf-toc-card::after {
	content: "";
	position: absolute;
	right: calc(-0.09 * var(--pf-u));
	top: calc(50% - 163.5 * var(--pf-u));
	width: calc(1793 * var(--pf-u));
	height: calc(1445 * var(--pf-u));
	transform: translateY(-50%);
	background: url("../../assets/img/toc-bg-shape.svg") no-repeat center / 100% 100%;
	pointer-events: none;
}
/* Figma's dither fill is a fixed 1179.5 x 674 image centred on the card,
   not stretched to cover it (coarser dots, like the render). */
.pf-block .pf-toc-card.pf-dither::before {
	background-size: calc(1179.5 * var(--pf-u)) calc(674 * var(--pf-u));
	background-repeat: no-repeat;
}
.pf-toc-card > * {
	position: relative;
	z-index: 1;
}
.pf-toc-list {
	counter-reset: pf-toc;
}
.pf-toc-list li {
	counter-increment: pf-toc;
}
/* Rows 32 tall, 48 apart with the rule in the middle. */
.pf-toc-list li + li {
	margin-top: calc(23.5 * var(--pf-u));
	padding-top: calc(23.5 * var(--pf-u));
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* Chevron icon (active row only), number, title. */
.pf-block .pf-toc-list a {
	display: flex;
	align-items: center;
	min-height: calc(32 * var(--pf-u));
	text-decoration: none;
	color: rgba(255, 255, 255, 0.72);
	transition: color 0.2s;
}
.pf-toc-list a::before {
	content: "";
	flex: none;
	width: 0;
	height: calc(32 * var(--pf-u));
	background: url("../../assets/img/toc-active-icon.svg") no-repeat center / contain;
	transform: rotate(-90deg);
	transition: width 0.25s, margin 0.25s;
}
.pf-toc-list a::after {
	content: counter(pf-toc);
	flex: none;
	display: grid;
	place-items: center;
	width: calc(32 * var(--pf-u));
	height: calc(32 * var(--pf-u));
	margin-right: calc(12 * var(--pf-u));
	font-family: var(--pf-mono);
	font-weight: 700;
	font-size: calc(20 * var(--pf-t));
	line-height: 1;
	letter-spacing: 1px;
}
.pf-toc-list a span {
	order: 1;
	font-weight: 500;
	font-size: calc(20 * var(--pf-t));
	line-height: 1.2;
	letter-spacing: -0.05em;
}
.pf-block .pf-toc-list a:hover,
.pf-block .pf-toc-list .is-active > a {
	color: #fff;
}
.pf-toc-list .is-active > a::before {
	width: calc(32 * var(--pf-u));
	margin-right: calc(13 * var(--pf-u));
}
.pf-toc-list .is-active > a::after {
	color: var(--pf-lime);
}
.pf-toc-list a:focus-visible {
	outline: 2px solid var(--pf-lime);
	outline-offset: 4px;
}
@media (prefers-reduced-motion: no-preference) {
	html:has(.pf-toc) {
		scroll-behavior: smooth;
	}
}

/* Chapters: body text 16 / 1.5; blocks 24 apart, 16 below a title. */
.pf-block .pf-art-body {
	flex: none;
	width: calc(1041 * var(--pf-u));
	counter-reset: pf-ch;
	font-size: calc(16 * var(--pf-t));
	line-height: 1.5;
	color: rgba(0, 0, 0, 0.64);
}
.pf-art-body > * + * {
	margin-top: calc(24 * var(--pf-u));
}
.pf-block .pf-art-body > :is(h2, h3) + * {
	margin-top: calc(16 * var(--pf-u));
}
/* Chapter title. From the second one on it carries the rule between the
   chapters: 40 above it, 39 below (80 in Figma including the rule). */
.pf-block .pf-art-body > h2 {
	position: relative;
	counter-increment: pf-ch;
	margin-top: calc(40 * var(--pf-u));
	padding-top: calc(39 * var(--pf-u));
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	font-family: var(--pf-sans);
	font-weight: 500;
	font-size: calc(32 * var(--pf-t));
	line-height: 1.25;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.72);
	scroll-margin-top: calc(92 * var(--pf-u)); /* clear the fixed header */
}
.pf-block .pf-art-body > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
	scroll-margin-top: calc(132 * var(--pf-u));
}
.pf-art-body > h2::before {
	content: "[" counter(pf-ch) "]";
	position: absolute;
	right: calc(100% + 8 * var(--pf-u));
	top: calc(48 * var(--pf-u));
	white-space: nowrap;
	font-family: var(--pf-mono);
	font-weight: 400;
	font-size: calc(20 * var(--pf-t));
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	color: var(--pf-blue);
}
.pf-art-body > h2:first-child::before {
	top: calc(9 * var(--pf-u));
}
/* H3: small uppercase lead-in, e.g. above a checklist. */
.pf-block .pf-art-body > h3 {
	margin-top: calc(32 * var(--pf-u));
	font-family: var(--pf-sans);
	font-weight: 400;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: inherit;
}
.pf-art-body a {
	color: var(--pf-blue);
	text-decoration: underline;
}
/* Bold lead-ins in paragraphs (Leistung file: Geist 700, black). */
.pf-art-body strong {
	font-weight: 700;
	color: #000;
}

/* Lists: lime squares; bold lead-ins are black, the rest 50%. */
.pf-art-body > :is(ul, ol) > li {
	position: relative;
	padding-left: calc(24 * var(--pf-u));
	letter-spacing: -0.01em;
	color: rgba(0, 0, 0, 0.5);
}
.pf-art-body > :is(ul, ol) > li + li {
	margin-top: calc(24 * var(--pf-u));
}
.pf-art-body > ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(6 * var(--pf-u));
	width: calc(12 * var(--pf-u));
	height: calc(12 * var(--pf-u));
	background: #96db0f;
}
.pf-art-body > ol {
	counter-reset: pf-art-ol;
}
.pf-art-body > ol > li::before {
	content: counter(pf-art-ol) ".";
	counter-increment: pf-art-ol;
	position: absolute;
	left: 0;
	font-family: var(--pf-mono);
	color: var(--pf-blue);
}
.pf-block .pf-art-body > :is(ul, ol) strong {
	font-weight: 400;
	color: #000;
}
/* List style "Häkchen": blue ticks, black text, 16 apart. */
.pf-block .pf-art-body > ul.is-style-proof-ticks > li {
	display: flex;
	align-items: center;
	gap: calc(12 * var(--pf-u));
	padding-left: 0;
	letter-spacing: normal;
	color: #000;
}
.pf-block .pf-art-body > ul.is-style-proof-ticks > li + li {
	margin-top: calc(16 * var(--pf-u));
}
.pf-block .pf-art-body > ul.is-style-proof-ticks > li::before {
	position: static;
	flex: none;
	width: calc(20 * var(--pf-u));
	height: calc(20 * var(--pf-u));
	background: url("../../assets/img/article-check.svg") no-repeat center / contain;
}

/* Quote: 1px dashed rule (4/4 as in Figma), 24 below it the lime quote
   mark, then 20 / 1.5 black. */
.pf-block .pf-art-body > blockquote {
	padding-top: calc(24 * var(--pf-u) + 1px);
	background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0 4px, transparent 4px 8px) top / 100% 1px no-repeat;
	font-style: normal;
}
.pf-art-body > blockquote::before {
	content: "";
	display: block;
	width: calc(36 * var(--pf-u));
	height: calc(28 * var(--pf-u));
	margin-bottom: calc(24 * var(--pf-u));
	background: url("../../assets/img/article-quote-lime.svg") no-repeat center / contain;
}
.pf-art-body > blockquote > * + * {
	margin-top: calc(16 * var(--pf-u));
}
.pf-art-body > blockquote p {
	font-size: calc(20 * var(--pf-t));
	line-height: 1.5;
	letter-spacing: -0.04em;
	color: #000;
}
.pf-art-body > blockquote cite {
	display: block;
	font-size: calc(14 * var(--pf-t));
	font-style: normal;
	color: rgba(0, 0, 0, 0.6);
}

/* Images */
.pf-block .pf-art-body > figure {
	margin-top: calc(32 * var(--pf-u));
}
.pf-art-body > figure img {
	width: 100%;
	height: auto;
	border-radius: calc(8 * var(--pf-u));
}
.pf-art-body > figure figcaption {
	margin-top: calc(8 * var(--pf-u));
	font-size: calc(14 * var(--pf-t));
	color: rgba(0, 0, 0, 0.6);
}

@media (max-width: 1024px) {
	.pf-block.pf-article {
		padding-top: 96px;
	}
	.pf-block.pf-article .pf-sub {
		width: min(100%, 600px);
	}
	.pf-art-row {
		flex-direction: column;
		gap: 40px;
		margin-top: 40px;
	}
	.pf-toc,
	.pf-block .pf-art-body {
		width: 100%;
	}
	/* relative, not static: the card clips its brand shape (::after). */
	.pf-block .pf-toc-card {
		position: relative;
		top: auto;
		padding: 24px 20px;
	}
	.pf-toc-list li + li {
		margin-top: 12px;
		padding-top: 12px;
	}
	.pf-toc-list a::before {
		display: none;
	}
	.pf-toc-list a::after {
		width: 28px;
		height: 28px;
		margin-right: 8px;
		font-size: 16px;
	}
	.pf-toc-list a span {
		font-size: 17px;
		letter-spacing: -0.02em;
	}
	.pf-block .pf-art-body {
		font-size: 16px;
	}
	.pf-block .pf-art-body > h2 {
		margin-top: 32px;
		padding-top: 32px;
		font-size: 28px;
		scroll-margin-top: 72px; /* phone/tablet header */
	}
	/* The marker goes above the title. */
	.pf-art-body > h2::before,
	.pf-art-body > h2:first-child::before {
		position: static;
		display: block;
		margin-bottom: 8px;
		font-size: 16px;
	}
	.pf-art-body > blockquote p {
		font-size: 18px;
	}
}

/* ---------------------------------------------------------------- *
 * Content kit for both layouts (Ratgeber file 10:1963, ratgeber-spec.md
 * §3): dashed separator, "Merksatz-Kasten" (group style), "Schritte"
 * card (ordered list style)
 * ---------------------------------------------------------------- */

/* core/separator: the 1px dashed rule, black 22 %, 4 / 4, full width. */
.pf-block .pf-art-body > hr {
	width: 100%;
	height: 1px;
	margin-inline: 0;
	margin-bottom: 0;
	border: 0;
	background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0 4px, transparent 4px 8px);
	opacity: 1;
}

/* core/group "Merksatz-Kasten": white, square corners, p 32, 16 between
   the label (the first paragraph, mono caps) and the text. Classic themes
   wrap the group's content in .wp-block-group__inner-container. */
.pf-block .pf-art-body > .is-style-proof-callout {
	padding: calc(32 * var(--pf-u));
	background: #fff;
}
.pf-art-body > .is-style-proof-callout :is(p, ul, ol) + :is(p, ul, ol) {
	margin-top: calc(16 * var(--pf-u));
}
.pf-block .pf-art-body > .is-style-proof-callout p:first-child:not(:last-child) {
	font-family: var(--pf-mono);
	font-size: calc(14 * var(--pf-t));
	line-height: 1.3;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #000;
}

/* core/list "Schritte (Karte)": white card, radius 8, p 24, rows 24 apart;
   the number 01 … in green (Geist 20 / 1.24), 12 before the text. */
.pf-block .pf-art-body > ol.is-style-proof-steps {
	padding: calc(24 * var(--pf-u));
	border-radius: calc(8 * var(--pf-u));
	background: #fff;
	counter-reset: pf-art-steps;
}
.pf-block .pf-art-body > ol.is-style-proof-steps > li {
	padding-left: 0;
	letter-spacing: normal;
	color: rgba(0, 0, 0, 0.6);
}
/* Inline, so the text starts 12 after the number whatever its width (21–26
   in Figma); top-aligned, so the rows are 24.8 tall as in Figma (on the
   baseline they grow to 26). ≤ 1024 it hangs instead. */
.pf-block .pf-art-body > ol.is-style-proof-steps > li::before {
	content: counter(pf-art-steps, decimal-leading-zero);
	counter-increment: pf-art-steps;
	position: static;
	display: inline-block;
	vertical-align: top;
	margin-right: calc(12 * var(--pf-u));
	font-family: var(--pf-sans);
	font-size: calc(20 * var(--pf-t));
	line-height: 1.24;
	letter-spacing: -0.03em;
	color: var(--pf-green);
}
.pf-block .pf-art-body > ol.is-style-proof-steps strong {
	font-weight: 600;
	color: #000;
}

/* ---------------------------------------------------------------- *
 * Layout "guide" (Ratgeber): no head, 216 below the hero band;
 * sentence-case chapter titles; text black 60 %, bold 600 in the same
 * colour; H3 = semibold subheading, 24 above and below; list squares
 * centred on the row, bold lead-ins black
 * ---------------------------------------------------------------- */

.pf-block.pf-article--guide {
	padding-top: calc(216 * var(--pf-u));
}
.pf-block.pf-article--guide > .pf-art-row:first-child {
	margin-top: 0;
}
.pf-article--guide .pf-art-body {
	color: rgba(0, 0, 0, 0.6);
}
.pf-block.pf-article--guide .pf-art-body strong {
	font-weight: 600;
	color: inherit;
}
/* Headline/H3 32 / 40, ls -1 px, not uppercase. */
.pf-block.pf-article--guide .pf-art-body > h2 {
	letter-spacing: calc(-1 * var(--pf-t));
	text-transform: none;
}
.pf-block.pf-article--guide .pf-art-body > h3 {
	margin-top: calc(24 * var(--pf-u));
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: #000;
}
.pf-block.pf-article--guide .pf-art-body > h3 + * {
	margin-top: calc(24 * var(--pf-u));
}
.pf-block.pf-article--guide .pf-art-body > ul > li {
	letter-spacing: normal;
	color: rgba(0, 0, 0, 0.6);
}
/* The square sits on the row's centre line, also for two-line rows. */
.pf-block.pf-article--guide .pf-art-body > ul:not(.is-style-proof-ticks) > li::before {
	top: 50%;
	transform: translateY(-50%);
}
.pf-block.pf-article--guide .pf-art-body > :is(ul, ol) strong {
	font-weight: 600;
	color: #000;
}

@media (max-width: 1024px) {
	.pf-block.pf-article--guide {
		padding-top: 72px;
	}
	.pf-block .pf-art-body > .is-style-proof-callout {
		padding: 24px;
	}
	.pf-art-body > .is-style-proof-callout :is(p, ul, ol) + :is(p, ul, ol) {
		margin-top: 12px;
	}
	.pf-block .pf-art-body > .is-style-proof-callout p:first-child:not(:last-child) {
		font-size: 13px;
	}
	.pf-block .pf-art-body > ol.is-style-proof-steps {
		padding: 20px;
	}
	.pf-block .pf-art-body > ol.is-style-proof-steps > li {
		padding-left: 34px;
	}
	.pf-block .pf-art-body > ol.is-style-proof-steps > li + li {
		margin-top: 16px;
	}
	.pf-block .pf-art-body > ol.is-style-proof-steps > li::before {
		position: absolute;
		left: 0;
		top: -1px;
		margin-right: 0;
		font-size: 18px;
	}
	.pf-block.pf-article--guide .pf-art-body > :is(ul, ol) > li + li {
		margin-top: 16px;
	}
}

/* ---------------------------------------------------------------- *
 * Leistung file (3174:1417, leistung-spec.md §9): lime quote box and
 * the meta line after the chapters
 * ---------------------------------------------------------------- */

/* core/quote "Hervorhebung (lindgrün)": #ADF71E, square corners, p 40,
   Geist 500 20 / 24 black; no dashed rule, no quote mark. */
.pf-block .pf-art-body > blockquote.is-style-proof-lime {
	padding: calc(40 * var(--pf-u));
	background: var(--pf-lime);
}
.pf-art-body > blockquote.is-style-proof-lime::before {
	display: none;
}
.pf-block .pf-art-body > blockquote.is-style-proof-lime p {
	font-weight: 500;
	font-size: calc(20 * var(--pf-t));
	line-height: calc(24 * var(--pf-t));
	letter-spacing: 0;
	/* Black in the node, but the render shows it at 64 % (the chapter's
	   body opacity): rgb(62 89 11) on the lime. */
	color: rgba(0, 0, 0, 0.64);
}
/* Spacing "compact": 155 above the label, as after the Leistung file's
   pricing footnote (230 elsewhere). */
.pf-block.pf-article--compact {
	padding-top: calc(155 * var(--pf-u));
}
/* The Leistung file's head: the intro 11 below the H2's line box (agency
   18) in its section-sub spacing (-0.64, which breaks line 3 after "das"
   as drawn); the row keeps its place (90.5 + 7). */
@media (min-width: 1025px) {
	.pf-block.pf-article--compact .pf-sub {
		margin-top: calc(11 * var(--pf-u));
		letter-spacing: -0.04em;
	}
	.pf-block.pf-article--compact .pf-art-row {
		margin-top: calc(97.5 * var(--pf-u));
	}
}
/* core/paragraph "Schlusszeile": under a chapter rule, 40 above and below
   it like the rules between the chapters. */
.pf-block .pf-art-body > p.is-style-proof-meta {
	margin-top: calc(40 * var(--pf-u));
	padding-top: calc(39 * var(--pf-u));
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

@media (max-width: 1024px) {
	.pf-block .pf-art-body > blockquote.is-style-proof-lime {
		padding: 24px;
	}
	.pf-block .pf-art-body > blockquote.is-style-proof-lime p {
		font-size: 18px;
		line-height: 24px;
	}
	.pf-block .pf-art-body > p.is-style-proof-meta {
		margin-top: 32px;
		padding-top: 32px;
	}
	.pf-block.pf-article--compact {
		padding-top: 72px;
	}
	/* The intro's manual line breaks match the desktop lines only. */
	.pf-block.pf-article .pf-sub br {
		display: none;
	}
}

/* Phone: fixed sizes in place of the former clamp() (see --pf-t in base.css). */
@media (max-width: 767px) {
	.pf-block .pf-art-body > h2 {
		font-size: 22px;
	}
}

/* CTA box inside an article: the callout with a lime edge and a blue
   button (group "is-style-proof-callout pf-art-cta", 2026-10-14). */
.pf-block .pf-art-body > .is-style-proof-callout.pf-art-cta {
	border-left: 4px solid var(--pf-lime);
	border-radius: 8px;
}
.pf-block .pf-art-body > .pf-art-cta p {
	color: #000;
}
/* The standard blue button (proof_button markup) inside the CTA box:
   no article link underline, a little air above. */
.pf-block .pf-art-body a.pf-btn,
.pf-block .pf-art-body a.pf-btn:visited,
.pf-block .pf-art-body a.pf-btn:hover {
	margin-top: 8px;
	text-decoration: none;
	color: #fcfcf9;
}
.pf-block .pf-art-body .pf-art-btn-note {
	display: block;
	margin-top: 10px;
	font-family: var(--pf-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.55);
}

/* Agency layout, real subheadings (2026-10-15): H3 as a semibold black
   subheading instead of the uppercase label, more air around it, so long
   Conductor texts read in sections. */
.pf-block.pf-article--agency .pf-art-body > h3,
.pf-block:not(.pf-article--guide) .pf-art-body > h3 {
	margin-top: calc(44 * var(--pf-u));
	font-weight: 600;
	font-size: calc(22 * var(--pf-t));
	line-height: 1.3;
	letter-spacing: -0.02em;
	text-transform: none;
	color: #000;
}
.pf-block:not(.pf-article--guide) .pf-art-body > h3 + * {
	margin-top: calc(14 * var(--pf-u));
}
/* Bold lead-in sentences stay black, the rest of the paragraph grey. */
.pf-block .pf-art-body > p > strong:first-child {
	color: #000;
}
@media (max-width: 1024px) {
	.pf-block:not(.pf-article--guide) .pf-art-body > h3 {
		margin-top: 32px;
		font-size: 20px;
	}
}

/* Infographics in the article (SVG, 16:9): full text width, rounded,
   with a little air; captions in the mono label style. */
.pf-block .pf-art-body > .wp-block-image {
	margin: calc(36 * var(--pf-u)) 0;
}
.pf-block .pf-art-body > .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}
.pf-block .pf-art-body > .wp-block-image + * {
	margin-top: 0;
}
@media (max-width: 1024px) {
	.pf-block .pf-art-body > .wp-block-image {
		margin: 24px 0;
	}
	.pf-block .pf-art-body > .wp-block-image img {
		border-radius: 8px;
	}
}