/*
 * proof/cta-band. Figma "SEO Agency Page - V2" CTA band 3275:857, see
 * sites/proof/design/agency-spec.md §10 (identical in the Leistung file):
 * 664 tall, content centred, label → H2 → sub 28 apart between the
 * cap-trimmed boxes (14.5 between line boxes), buttons 28 below, 16 apart.
 */

.pf-block.pf-ctaband {
	justify-content: center;
	align-items: center;
	min-height: calc(664 * var(--pf-u));
	margin-top: calc(230 * var(--pf-u));
	padding-block: calc(120 * var(--pf-u));
	background: var(--pf-blue);
	text-align: center;
}
.pf-ctaband::after {
	content: "";
	position: absolute;
	right: calc(-623 * var(--pf-u));
	top: calc(50% - 669.5 * var(--pf-u));
	width: calc(1662 * var(--pf-u));
	height: calc(1339 * var(--pf-u));
	background: url("../../assets/img/cta-bg-shape.svg") no-repeat center / 100% 100%;
	pointer-events: none;
}
.pf-ctaband > * {
	position: relative;
	z-index: 1;
}
/* #A8FF00 as drawn, not the lime token. */
.pf-block .pf-ctaband-title {
	width: calc(875 * var(--pf-u));
	max-width: 100%;
	margin-top: calc(14.5 * var(--pf-u));
	font-family: var(--pf-sans);
	font-weight: 500;
	font-size: calc(56 * var(--pf-t));
	line-height: 1.2;
	letter-spacing: -0.04em;
	color: #a8ff00;
}
/* 445 in Figma with a manual break after "Sales-"; 420 breaks there too. */
.pf-block .pf-ctaband-sub {
	width: calc(420 * var(--pf-u));
	max-width: 100%;
	margin-top: calc(14.5 * var(--pf-u));
	font-size: calc(16 * var(--pf-t));
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.8);
}
/* Variant "leistung" (leistung-spec.md §11): Figma's 445 without a manual
   break, so the text breaks after "von" as drawn (420 broke before it). */
@media (min-width: 1025px) {
	.pf-block.pf-ctaband--leistung .pf-ctaband-sub {
		width: calc(445 * var(--pf-u));
	}
}
.pf-block .pf-ctaband-ctas {
	gap: calc(16 * var(--pf-u));
	margin-top: calc(28 * var(--pf-u));
}
/* Blue text on the lime button here (Tool: black). */
.pf-block.pf-ctaband .pf-btn--lime,
.pf-block.pf-ctaband .pf-btn--lime:hover,
.pf-block.pf-ctaband .pf-btn--lime:focus-visible {
	color: var(--pf-blue);
}

@media (max-width: 1024px) {
	.pf-block.pf-ctaband {
		min-height: 0;
		margin-top: 96px;
		padding-block: 88px;
	}
	.pf-ctaband::after {
		right: -60%;
		top: -20%;
		width: 120%;
		height: auto;
		aspect-ratio: 1662 / 1339;
	}
	.pf-block .pf-ctaband-title {
		font-size: 44px;
	}
	.pf-block .pf-ctaband-sub {
		width: 480px;
		font-size: 16px;
	}
}

/* Editor hint of an empty block, readable on blue. */
.pf-ctaband .pf-block-placeholder {
	border-color: rgba(255, 255, 255, 0.4);
	color: rgba(255, 255, 255, 0.8);
}

/* ---------------------------------------------------------------- *
 * Layout "card" (Ratgeber, Figma 10:1604, ratgeber-spec.md §7): a blue
 * card 1808 wide (radius 8) inside the gutter, 248 below the block before
 * it and 173 above the footer. Copy 731 wide at 168 / 127 (label, H2,
 * text, button 28 apart), the contact card 540 x 299 at its right,
 * bottoms aligned, 201 between them.
 * ---------------------------------------------------------------- */

.pf-block.pf-ctaband--card {
	align-items: stretch;
	min-height: 0;
	margin-top: 0;
	padding-block: calc(248 * var(--pf-u)) calc(173 * var(--pf-u));
	background: none;
	text-align: left;
}
.pf-ctaband--card::after {
	content: none;
}
.pf-ctaband-box {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: calc(40 * var(--pf-u));
	padding: calc(127 * var(--pf-u)) calc(168 * var(--pf-u)) calc(100 * var(--pf-u));
	overflow: hidden;
	border-radius: calc(8 * var(--pf-u));
	background: var(--pf-blue);
}
/* The band's brand shape, at 768.9 / -412 in the card. cta-card-shape.svg
   = cta-bg-shape.svg with a 5 % black tint on the shape for Figma's noise
   (the Ratgeber render is ~5 % darker inside the shape). */
.pf-ctaband-box::after {
	content: "";
	position: absolute;
	left: calc(768.9 * var(--pf-u));
	top: calc(-412 * var(--pf-u));
	width: calc(1662 * var(--pf-u));
	height: calc(1339 * var(--pf-u));
	background: url("../../assets/img/cta-card-shape.svg") no-repeat center / 100% 100%;
	pointer-events: none;
}
.pf-ctaband-box > * {
	position: relative;
	z-index: 1;
}
.pf-ctaband-copy {
	display: flex;
	flex-direction: column;
	width: calc(731 * var(--pf-u));
	max-width: 100%;
}
/* Label: white 60 %, ls 1px, left. */
.pf-block.pf-ctaband--card .pf-label--norule {
	align-self: flex-start;
	letter-spacing: 1px;
	text-align: left;
	color: rgba(255, 255, 255, 0.6);
}
/* Headline/H2 in the lime token (the band uses #A8FF00), ls -3 %. */
.pf-block.pf-ctaband--card .pf-ctaband-title {
	width: auto;
	margin-top: calc(28 * var(--pf-u));
	letter-spacing: -0.03em;
	color: var(--pf-lime);
}
.pf-block.pf-ctaband--card .pf-ctaband-sub {
	width: calc(597 * var(--pf-u));
	margin-top: calc(28 * var(--pf-u));
}
.pf-block.pf-ctaband--card .pf-ctaband-ctas {
	justify-content: flex-start;
	align-self: flex-start;
	margin-top: calc(28 * var(--pf-u));
}

/* Contact person: white, radius 18, p 12, photo 269 x 275 (r 12.2), the
   text column 227 wide with name and role at the top, contacts at the
   bottom. */
.pf-ctaband-person {
	display: flex;
	flex: none;
	align-items: center;
	gap: calc(20 * var(--pf-u));
	width: calc(540 * var(--pf-u));
	padding: calc(12 * var(--pf-u));
	border-radius: calc(18 * var(--pf-u));
	background: #fff;
}
.pf-block .pf-ctaband-photo {
	flex: none;
	width: calc(269 * var(--pf-u));
	aspect-ratio: 269 / 275;
	overflow: hidden;
	border-radius: calc(12.2 * var(--pf-u));
	background: var(--pf-blue);
}
.pf-block .pf-ctaband-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pf-ctaband-info {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: space-between;
	align-self: stretch;
	gap: calc(24 * var(--pf-u));
	min-width: 0;
	padding-right: calc(20 * var(--pf-u));
}
.pf-block .pf-ctaband-name {
	font-weight: 500;
	font-size: calc(24 * var(--pf-t));
	line-height: 1.3;
	letter-spacing: -0.03em;
	color: #000;
}
.pf-block .pf-ctaband-role {
	margin-top: calc(5 * var(--pf-u));
	font-size: calc(16 * var(--pf-t));
	line-height: 1.5;
	color: rgba(0, 0, 0, 0.5);
}
.pf-block .pf-ctaband-contacts {
	display: flex;
	flex-direction: column;
	gap: calc(16 * var(--pf-u));
}
.pf-block .pf-ctaband-contacts a {
	display: flex;
	align-items: center;
	gap: calc(8 * var(--pf-u));
	font-weight: 500;
	font-size: calc(16 * var(--pf-t));
	line-height: 1.5;
	color: #000;
	text-decoration: none;
	overflow-wrap: anywhere;
}
.pf-block .pf-ctaband-contacts a:hover,
.pf-block .pf-ctaband-contacts a:focus-visible {
	color: var(--pf-blue);
}
.pf-ctaband-contacts a::before {
	content: "";
	flex: none;
	width: calc(24 * var(--pf-u));
	height: calc(24 * var(--pf-u));
	background: url("../../assets/img/call.svg") no-repeat center / contain;
}
.pf-ctaband-contacts .pf-ctaband-mail::before {
	background-image: url("../../assets/img/mail.svg");
}

@media (max-width: 1024px) {
	.pf-block.pf-ctaband--card {
		margin-top: 0;
		padding-block: 96px;
	}
	.pf-ctaband-box {
		flex-direction: column;
		align-items: flex-start;
		gap: 40px;
		padding: 56px 40px;
		border-radius: 8px;
	}
	.pf-ctaband-box::after {
		left: 30%;
		top: -20%;
		width: 120%;
		height: auto;
		aspect-ratio: 1662 / 1339;
	}
	.pf-ctaband-copy {
		width: 100%;
	}
	.pf-block.pf-ctaband--card .pf-ctaband-title {
		margin-top: 20px;
	}
	.pf-block.pf-ctaband--card .pf-ctaband-sub {
		width: min(100%, 560px);
		margin-top: 20px;
	}
	.pf-block.pf-ctaband--card .pf-ctaband-ctas {
		margin-top: 24px;
	}
	.pf-ctaband-person {
		gap: 20px;
		width: min(100%, 540px);
		padding: 12px;
		border-radius: 18px;
	}
	.pf-block .pf-ctaband-photo {
		width: 220px;
		border-radius: 12px;
	}
	.pf-ctaband-info {
		gap: 20px;
		padding-right: 8px;
	}
	.pf-block .pf-ctaband-name {
		font-size: 22px;
	}
	.pf-block .pf-ctaband-role {
		margin-top: 4px;
		font-size: 15px;
	}
	.pf-block .pf-ctaband-contacts {
		gap: 12px;
	}
	.pf-block .pf-ctaband-contacts a {
		gap: 8px;
		font-size: 15px;
	}
	.pf-ctaband-contacts a::before {
		width: 20px;
		height: 20px;
	}
}
@media (max-width: 767px) {
	.pf-block.pf-ctaband--card {
		padding-block: 72px;
	}
	.pf-ctaband-box {
		padding: 40px 20px 20px;
	}
	.pf-ctaband-person {
		gap: 14px;
		padding: 10px;
		border-radius: 14px;
	}
	.pf-block .pf-ctaband-photo {
		width: 110px;
		border-radius: 10px;
	}
	.pf-ctaband-info {
		padding-right: 0;
	}
	.pf-block .pf-ctaband-name {
		font-size: 19px;
	}
	.pf-block .pf-ctaband-role {
		font-size: 14px;
	}
	.pf-block .pf-ctaband-contacts a {
		font-size: 14px;
	}
}

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