/*
 * proof/hero-guide. Figma Ratgeber "Keyword-Recherche" hero 10:1927 and
 * summary band 10:1959, see sites/proof/design/ratgeber-spec.md §2: lime
 * gradient over 0–1112 with the two brand shapes, a 1072 container
 * centred on the page (copy 615 left, card 380 right), the H1 172 from the
 * top (the coded header sits on top of it), the black band 869–1112.
 */

.pf-block.pf-hguide {
	padding-top: calc(172 * var(--pf-u));
	background: linear-gradient(180deg, var(--pf-lime) 0%, var(--pf-bg) 100%);
}
/* Brand shapes as on the agency hero: vector 1 plain (::before; the spec
   lists a layer blur on it, but the render shows its sharp edges), vector 2
   blurred (hero-shape-2.svg, blur and its 203 padding built in) with
   Figma's noise averaging out to ~5.7 % darker over the whole hero
   (::after, which covers it; the band and the content sit on top). */
.pf-hguide::before,
.pf-hguide::after {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
}
.pf-hguide::before {
	left: calc(-624 * var(--pf-u));
	top: calc(-24 * var(--pf-u));
	width: calc(3167.31 * var(--pf-u));
	height: calc(2553 * var(--pf-u));
	background: url("../../assets/img/hero-shape-1.svg") no-repeat center / 100% 100%;
}
.pf-hguide::after {
	left: calc(-412 * var(--pf-u));
	top: calc(-347 * var(--pf-u));
	width: calc(2744 * var(--pf-u));
	height: calc(2291 * var(--pf-u));
	background:
		linear-gradient(rgba(0, 0, 0, 0.057), rgba(0, 0, 0, 0.057)),
		url("../../assets/img/hero-shape-2.svg") no-repeat center / 100% 100%;
}
.pf-hguide > * {
	position: relative;
	z-index: 1;
}
/* Above 1920 the shapes stay centred on the content (both are centred at
   1920: x 960) and the darkening covers the whole hero, not only the
   shape's 2744 box, whose edge would show at 2332. */
@media (min-width: 1921px) {
	.pf-hguide::before {
		/* Wider than its 3167 on ultrawide screens, so its edges stay out. */
		left: calc(50% - max(1583.65px, 50% + 200px));
		width: max(3167.31px, 100% + 400px);
	}
	.pf-hguide::after {
		inset: 0;
		width: auto;
		height: auto;
		background:
			linear-gradient(rgba(0, 0, 0, 0.057), rgba(0, 0, 0, 0.057)),
			url("../../assets/img/hero-shape-2.svg") no-repeat center -347px / 2744px 2291px;
	}
}

/* Copy left, card right; the band follows 203.6 below the tags. */
.pf-hguide-main {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: calc(40 * var(--pf-u));
	align-self: center;
	width: calc(1072 * var(--pf-u));
	max-width: 100%;
	padding-bottom: calc(203.6 * var(--pf-u));
}
.pf-hguide-copy {
	display: flex;
	flex-direction: column;
	width: calc(615 * var(--pf-u));
	max-width: 100%;
}

/* Headline/H1: Geist 700 96 / 1, ls -5 %, the blue headline gradient.
   Typed in capitals in Figma ("KEYWORd-"); here the title is sentence case
   and set in capitals, so the H1 text stays readable. */
.pf-block .pf-hguide-title {
	width: calc(543 * var(--pf-u));
	max-width: 100%;
	font-family: var(--pf-sans);
	font-weight: 700;
	font-size: calc(96 * var(--pf-t));
	line-height: 1;
	letter-spacing: -0.05em;
	text-transform: uppercase;
	/* Words that still don't fit (e.g. "Wettbewerbsanalyse" on phones) break
	   at a German syllable with a hyphen; overflow-wrap is the fallback. Only
	   long words, with 5+ letters on each side ("Wettbewerbs-analyse", not
	   "Auf-bau" or "Grundla-gen"). */
	hyphens: auto;
	hyphenate-limit-chars: 12 5 5;
	overflow-wrap: break-word;
	background: linear-gradient(178deg, var(--pf-blue) 0%, var(--pf-blue-deep) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
/* Long titles (imported Ratgeber, up to ~50 characters): smaller, so words
   don't break inside the 543-wide column. Mobile sizes are already fluid. */
.pf-block .pf-hguide-title--long {
	font-size: calc(56 * var(--pf-t));
}
.pf-block .pf-hguide-sub {
	width: calc(505 * var(--pf-u));
	max-width: 100%;
	margin-top: calc(24 * var(--pf-u));
	font-weight: 600;
	font-size: calc(16 * var(--pf-t));
	line-height: 1.5;
	color: #000;
}
/* The two buttons are the standard ones at 72.46 % (.pf-btn--sm). */
.pf-block .pf-hguide-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: calc(29.2 * var(--pf-u));
	margin-top: calc(24 * var(--pf-u));
}

/* Tags: white pills, 44 tall with the 1px border (black 16 %) inside:
   Figma's p 10 / 14 / 10 / 10 minus the border. Blue dot. */
.pf-block .pf-hguide-tags {
	display: flex;
	flex-wrap: wrap;
	gap: calc(12 * var(--pf-u));
	margin-top: calc(43 * var(--pf-u));
}
.pf-hguide-tags li {
	display: flex;
	align-items: center;
	gap: calc(8 * var(--pf-u));
	padding: calc(10 * var(--pf-u) - 1px) calc(14 * var(--pf-u) - 1px) calc(10 * var(--pf-u) - 1px) calc(10 * var(--pf-u) - 1px);
	border: 1px solid rgba(0, 0, 0, 0.16);
	border-radius: 200px;
	background: #fff;
	font-size: calc(16 * var(--pf-t));
	line-height: 1.5;
	color: rgba(0, 0, 0, 0.48);
}
.pf-hguide-tags li::before {
	content: "";
	flex: none;
	width: calc(8 * var(--pf-u));
	height: calc(8 * var(--pf-u));
	border-radius: 50%;
	background: var(--pf-blue);
}

/* "Auf den Punkt": black card, 380 wide, p 32 / 24, 94 below the H1 top,
   the brand mark outline at 110 / 0. */
.pf-block .pf-hguide-card {
	position: relative;
	flex: none;
	width: calc(380 * var(--pf-u));
	margin-top: calc(94 * var(--pf-u));
	padding: calc(32 * var(--pf-u)) calc(24 * var(--pf-u));
	overflow: hidden;
	border-radius: calc(8 * var(--pf-u));
	background: #000;
}
.pf-hguide-card::after {
	content: "";
	position: absolute;
	left: calc(110 * var(--pf-u));
	top: 0;
	width: calc(337 * var(--pf-u));
	height: calc(272 * var(--pf-u));
	background: url("../../assets/img/hero-card-shape.svg") no-repeat center / 100% 100%;
	pointer-events: none;
}
.pf-hguide-card > * {
	position: relative;
	z-index: 1;
}
/* Subheadline/Small/SemiBold, brand green. */
.pf-block :is(.pf-hguide-card-title, .pf-hguide-band-label) {
	font-weight: 600;
	font-size: calc(20 * var(--pf-t));
	line-height: 1.4;
	letter-spacing: -0.018em;
	color: #96db0f;
}
/* White 72 % at 80 % opacity. */
.pf-block .pf-hguide-card-text {
	margin-top: calc(12 * var(--pf-u));
	font-size: calc(16 * var(--pf-t));
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.576);
}

/* "In einem Satz": full-bleed black band, 243 tall, the text aligned with
   the hero container (x 424 at 1920) and centred vertically. */
.pf-block .pf-hguide-band {
	display: flex;
	align-items: center;
	min-height: calc(243 * var(--pf-u));
	margin-inline: calc(-1 * var(--pf-gutter));
	padding: calc(24 * var(--pf-u)) var(--pf-gutter);
	background: #000;
}
.pf-hguide-band-inner {
	width: calc(1072 * var(--pf-u));
	max-width: 100%;
	margin-inline: auto;
}
.pf-block .pf-hguide-band-text {
	width: calc(753 * var(--pf-u));
	max-width: 100%;
	margin-top: calc(12 * var(--pf-u));
	font-size: calc(20 * var(--pf-t));
	line-height: 1.24;
	letter-spacing: -0.03em;
	color: rgba(255, 255, 255, 0.576);
}
.pf-hguide-band-text > * + * {
	margin-top: calc(12 * var(--pf-u));
}
/* White under the text node's 80 % opacity (render: 204, not 255). */
.pf-block .pf-hguide-band-text strong {
	font-weight: 600;
	letter-spacing: -0.018em;
	color: rgba(255, 255, 255, 0.8);
}
.pf-hguide-band-text a {
	color: #fff;
	text-decoration: underline;
}

@media (max-width: 1024px) {
	.pf-block.pf-hguide {
		padding-top: 128px;
	}
	.pf-hguide::before {
		left: -60%;
		top: 0;
		width: 220%;
		height: auto;
		aspect-ratio: 3167 / 2553;
	}
	.pf-hguide::after {
		left: -40%;
		top: -10%;
		width: 180%;
		height: auto;
		aspect-ratio: 2744 / 2291;
		/* No darkening: the shape no longer covers the whole hero. */
		background: url("../../assets/img/hero-shape-2.svg") no-repeat center / 100% 100%;
	}
	.pf-hguide-main {
		flex-direction: column;
		gap: 48px;
		align-self: stretch;
		width: 100%;
		padding-bottom: 72px;
	}
	.pf-hguide-copy {
		width: 100%;
	}
	.pf-block .pf-hguide-title {
		width: 100%;
		font-size: 80px;
	}
	.pf-block .pf-hguide-sub {
		width: min(100%, 560px);
		margin-top: 20px;
		font-size: 16px;
	}
	.pf-block .pf-hguide-ctas {
		gap: 16px;
		margin-top: 24px;
	}
	.pf-block .pf-hguide-tags {
		gap: 8px;
		margin-top: 32px;
	}
	.pf-hguide-tags li {
		gap: 8px;
		padding: 8px 14px 8px 10px;
		font-size: 15px;
	}
	.pf-hguide-tags li::before {
		width: 8px;
		height: 8px;
	}
	.pf-block .pf-hguide-card {
		width: min(100%, 480px);
		margin-top: 0;
		padding: 28px 24px;
		border-radius: 8px;
	}
	.pf-hguide-card::after {
		left: auto;
		right: -60px;
		width: 337px;
		height: 272px;
	}
	.pf-block :is(.pf-hguide-card-title, .pf-hguide-band-label) {
		font-size: 19px;
	}
	.pf-block .pf-hguide-card-text {
		margin-top: 10px;
		font-size: 16px;
	}
	.pf-block .pf-hguide-band {
		min-height: 0;
		padding-block: 48px;
	}
	.pf-hguide-band-inner {
		width: 100%;
	}
	.pf-block .pf-hguide-band-text {
		width: min(100%, 680px);
		margin-top: 10px;
		font-size: 19px;
		line-height: 1.35;
	}
}
@media (max-width: 767px) {
	.pf-block.pf-hguide {
		padding-top: 112px;
	}
	.pf-block .pf-hguide-title {
		font-size: 44px;
		letter-spacing: -0.045em;
	}
	.pf-block .pf-hguide-ctas {
		gap: 12px;
	}
	.pf-hguide-main {
		gap: 40px;
		padding-bottom: 56px;
	}
	.pf-block .pf-hguide-band {
		padding-block: 40px;
	}
	.pf-block .pf-hguide-band-text {
		font-size: 17px;
	}
}


/* ------------------------------------------------------------------ *
 * Layout "Ruhig" (2026-10-15): breadcrumb row, then two columns in the
 * 1072 container: H1 + intro + button left (615), the short answer as a
 * white card with the author line right (380). Everything left-aligned,
 * nothing centred, no black card, no band.
 * ------------------------------------------------------------------ */
.pf-block.pf-hguide--calm {
	padding-top: calc(140 * var(--pf-u));
}
.pf-block .pf-hguide-main--calm {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding-bottom: calc(88 * var(--pf-u));
}
.pf-block .pf-hguide-crumbs {
	display: flex;
	align-items: center;
	gap: calc(10 * var(--pf-u));
	font-family: var(--pf-mono);
	font-size: calc(12 * var(--pf-t));
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.56);
}
.pf-hguide-crumbs a {
	color: inherit;
	text-decoration: none;
}
.pf-hguide-crumbs a:hover {
	color: #000;
}
.pf-hguide-crumbs span:last-child {
	color: #000;
}
.pf-hguide-cols {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: calc(56 * var(--pf-u));
	margin-top: calc(28 * var(--pf-u));
}
.pf-block .pf-hguide-copy--calm {
	flex: 1 1 auto;
	width: auto;
	max-width: calc(640 * var(--pf-u));
}
.pf-block .pf-hguide-title--calm {
	width: 100%;
	font-size: calc(80 * var(--pf-t));
	line-height: 0.96;
	hyphens: manual;
}
/* One long word ("Wettbewerbsanalyse", "Breadcrumb-Navigation"): smaller, so
   it breaks at the soft hyphen or not at all, never mid-word. */
.pf-block .pf-hguide-title--calm-long {
	font-size: calc(60 * var(--pf-t));
}
.pf-block .pf-hguide-sub--calm {
	width: 100%;
	margin-top: calc(24 * var(--pf-u));
	font-weight: 500;
	font-size: calc(17 * var(--pf-t));
	line-height: 1.55;
	color: rgba(0, 0, 0, 0.72);
}
.pf-block .pf-hguide-copy--calm .pf-hguide-ctas {
	margin-top: calc(32 * var(--pf-u));
}
.pf-hguide-side {
	flex: none;
	width: calc(380 * var(--pf-u));
	margin-top: calc(10 * var(--pf-u));
}
.pf-block .pf-hguide-answer {
	padding: calc(24 * var(--pf-u)) calc(26 * var(--pf-u)) calc(26 * var(--pf-u));
	border-radius: calc(12 * var(--pf-u));
	background: rgba(255, 255, 255, 0.72);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.pf-block .pf-hguide-answer-label {
	font-family: var(--pf-mono);
	font-size: calc(11 * var(--pf-t));
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pf-blue);
}
.pf-block .pf-hguide-answer-text {
	margin-top: calc(10 * var(--pf-u));
	font-weight: 500;
	font-size: calc(16 * var(--pf-t));
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: #000;
}
.pf-block .pf-hguide-meta {
	display: flex;
	align-items: center;
	gap: calc(12 * var(--pf-u));
	margin-top: calc(18 * var(--pf-u));
	padding-left: calc(6 * var(--pf-u));
	font-family: var(--pf-mono);
	font-size: calc(12 * var(--pf-t));
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.56);
}
.pf-hguide-meta-lines {
	display: flex;
	flex-direction: column;
	gap: calc(2 * var(--pf-u));
	line-height: 1.4;
}
.pf-hguide-meta strong {
	font-weight: 700;
	color: #000;
}
.pf-hguide-meta-avatar {
	flex: none;
	width: calc(40 * var(--pf-u));
	height: calc(40 * var(--pf-u));
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #fff;
}
@media (max-width: 1024px) {
	.pf-block.pf-hguide--calm {
		padding-top: 112px;
	}
	.pf-block .pf-hguide-main--calm {
		padding-bottom: 48px;
	}
	.pf-hguide-cols {
		flex-direction: column;
		gap: 28px;
		margin-top: 20px;
	}
	.pf-block .pf-hguide-copy--calm {
		max-width: 100%;
	}
	.pf-block .pf-hguide-title--calm {
		font-size: 56px;
	}
	.pf-block .pf-hguide-title--calm-long {
		font-size: 44px;
	}
	.pf-block .pf-hguide-sub--calm {
		margin-top: 18px;
		font-size: 16px;
	}
	.pf-block .pf-hguide-copy--calm .pf-hguide-ctas {
		margin-top: 24px;
	}
	.pf-hguide-side {
		width: 100%;
		margin-top: 0;
	}
	.pf-block .pf-hguide-answer {
		padding: 20px;
		border-radius: 10px;
	}
	.pf-block .pf-hguide-meta {
		gap: 10px;
		margin-top: 14px;
		font-size: 11px;
	}
	.pf-hguide-meta-avatar {
		width: 36px;
		height: 36px;
	}
}
@media (max-width: 767px) {
	.pf-block .pf-hguide-title--calm {
		font-size: 40px;
	}
	.pf-block .pf-hguide-title--calm-long {
		font-size: 32px;
	}
}