/*
 * Homepage composition.
 *
 * Shared tokens and components live in style.css. Everything here is scoped to
 * the homepage variants (.ff-home-*), so the reusable section patterns keep
 * their own appearance wherever an editor places them on a subpage.
 */

.ff-hero::before,
.ff-hero-visual::before {
	pointer-events: none;
}

.ff-hero-copy,
.ff-hero-actions,
.ff-hero-visual {
	min-inline-size: 0;
}

.ff-hero-copy {
	z-index: 3;
}

.ff-hero-actions,
.ff-hero-visual {
	isolation: isolate;
}

/* --- Quality promise ---------------------------------------------------- */

.ff-home-quality {
	overflow: clip;
	background: var(--ff-warm-white);
	color: var(--ff-charcoal);
}

/* The shared section decoration belongs to the dark pattern variant. */
.ff-home-quality::after {
	display: none;
}

.ff-home-quality .ff-quality-panel {
	position: relative;
	display: grid;
	overflow: hidden;
	grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.45fr);
	align-items: start;
	column-gap: clamp(2rem, 5vw, 5rem);
	row-gap: clamp(1.75rem, 3vw, 2.5rem);
	padding: clamp(2rem, 4vw, 3.5rem);
	border-radius: var(--ff-radius-panel);
	background: var(--ff-sage-tint);
}

/* Quiet organic tint instead of an invented brand ornament. */
.ff-home-quality .ff-quality-panel::before {
	position: absolute;
	top: -7rem;
	left: -7rem;
	width: 18rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background: rgb(135 159 136 / 14%);
	content: "";
	pointer-events: none;
}

.ff-home-quality .ff-quality-lead {
	position: relative;
	min-inline-size: 0;
}

.ff-home-quality .ff-quality-lead h2 {
	margin-block: 0 0.9rem;
	max-inline-size: 18ch;
	color: var(--ff-navy-deep);
	font-size: clamp(1.55rem, 2.1vw, 2.1rem);
}

.ff-home-quality .ff-quality-lead p {
	max-inline-size: 34rem;
	color: var(--ff-muted);
}

.ff-home-quality .ff-quality-lead .wp-block-buttons {
	margin-block-start: 1.4rem;
}

.ff-home-quality .ff-quality-points {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

.ff-home-quality .ff-quality-point {
	min-inline-size: 0;
	padding-inline-start: clamp(1.25rem, 2vw, 2rem);
	border-inline-start: 1px solid rgb(15 39 66 / 12%);
}

.ff-home-quality .ff-quality-point:first-child {
	padding-inline-start: 0;
	border-inline-start: 0;
}

.ff-home-quality .ff-quality-point::before {
	display: block;
	width: 2.6rem;
	height: 2.6rem;
	margin-block-end: 0.95rem;
	border: 1px solid rgb(84 114 78 / 40%);
	border-radius: 50%;
	background-color: transparent;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1.3rem;
	content: "";
}

.ff-home-quality .ff-quality-point--document::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354724e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h9L19 8v12.5H6z'/%3E%3Cpath d='M14.5 3.5V8H19'/%3E%3Cpath d='M9 12.5h6M9 16h4'/%3E%3C/svg%3E");
}

.ff-home-quality .ff-quality-point--calendar::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354724e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2.5'/%3E%3Cpath d='M4 9.5h16M8.5 3.5v3M15.5 3.5v3'/%3E%3C/svg%3E");
}

.ff-home-quality .ff-quality-point--check::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354724e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2 19 6v6.2c0 4.2-2.9 7.3-7 8.6-4.1-1.3-7-4.4-7-8.6V6z'/%3E%3Cpath d='m9 12 2 2 4-4.3'/%3E%3C/svg%3E");
}

.ff-home-quality .ff-quality-point h3 {
	margin: 0 0 0.5rem;
	color: var(--ff-navy-deep);
	font-size: 1.02rem;
	line-height: 1.3;
}

.ff-home-quality .ff-quality-point p {
	margin: 0;
	color: var(--ff-muted);
	font-size: 0.92rem;
	line-height: 1.55;
}

.ff-home-quality .ff-quality-limit {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--ff-muted);
	max-inline-size: 62rem;
}

/* --- Service overview --------------------------------------------------- */

.ff-home-services {
	background: var(--ff-warm-white);
}

.ff-home-services .ff-service-features {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.2vw, 1.85rem);
	margin-block-start: clamp(2rem, 4vw, 3rem);
}

.ff-home-services .ff-service-card {
	position: relative;
	display: flex;
	min-inline-size: 0;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--ff-line-warm);
	border-radius: var(--ff-radius-md);
	background: var(--ff-surface);
	transition: border-color var(--ff-transition) ease, box-shadow var(--ff-transition) ease, transform var(--ff-transition) ease;
}

.ff-home-services .ff-service-card:hover {
	border-color: var(--ff-sage);
	box-shadow: var(--ff-shadow-card);
	transform: translateY(-2px);
}

.ff-home-services .ff-service-card__media,
.ff-home-services .ff-service-card__media img {
	inline-size: 100%;
	margin: 0;
}

.ff-home-services .ff-service-card__media img {
	aspect-ratio: 16 / 10;
	border-radius: 0;
	object-fit: cover;
}

.ff-home-services .ff-service-card__body {
	padding: clamp(1.1rem, 1.8vw, 1.5rem);
}

.ff-home-services .ff-service-card__body h3 {
	margin: 0 0 0.5rem;
	font-size: clamp(1.1rem, 1.35vw, 1.28rem);
}

.ff-home-services .ff-service-card__body p {
	margin: 0;
	color: var(--ff-muted);
	font-size: 0.94rem;
	line-height: 1.55;
}

/* One real link per card, with the whole card as its hit area. */
.ff-home-services .ff-service-card h3 a,
.ff-home-services .ff-service-tile h3 a {
	color: var(--ff-navy-deep);
	text-decoration: none;
}

.ff-home-services .ff-service-card h3 a::after,
.ff-home-services .ff-service-tile h3 a::after {
	position: absolute;
	inset: 0;
	content: "";
}

.ff-home-services .ff-service-card:hover h3 a,
.ff-home-services .ff-service-tile:hover h3 a {
	color: var(--ff-navy);
	text-decoration: underline;
}

.ff-home-services .ff-service-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.85rem, 1.6vw, 1.35rem);
	margin-block-start: clamp(1.25rem, 2.2vw, 1.85rem);
}

.ff-home-services .ff-service-tile {
	position: relative;
	min-inline-size: 0;
	padding: clamp(1.05rem, 1.6vw, 1.35rem);
	border: 1px solid var(--ff-line-warm);
	border-radius: var(--ff-radius-sm);
	background: var(--ff-sand);
	transition: border-color var(--ff-transition) ease, background-color var(--ff-transition) ease, transform var(--ff-transition) ease;
}

.ff-home-services .ff-service-tile:hover {
	border-color: var(--ff-sage);
	background: var(--ff-surface);
	transform: translateY(-2px);
}

.ff-home-services .ff-service-tile h3 {
	margin: 0 0 0.35rem;
	font-size: 1rem;
	line-height: 1.3;
}

.ff-home-services .ff-service-tile p {
	margin: 0;
	color: var(--ff-muted);
	font-size: 0.86rem;
	line-height: 1.5;
}

.ff-home-services .ff-services-link {
	margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
}

.ff-home-services .ff-services-link p {
	max-inline-size: 58rem;
	color: var(--ff-muted);
}

/* --- Property management ------------------------------------------------ */

.ff-home-management {
	overflow: clip;
	background: linear-gradient(135deg, var(--ff-sand) 0%, var(--ff-warm-white) 68%);
}

.ff-home-management__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
}

.ff-home-management__grid > * {
	min-inline-size: 0;
}

.ff-home-management__copy h2 {
	max-inline-size: 16ch;
	margin-block-start: 0;
	font-size: clamp(1.9rem, 3.1vw, 2.9rem);
}

.ff-home-management__copy .ff-lead {
	color: var(--ff-muted);
}

.ff-home-management__visual {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	align-items: stretch;
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
	min-block-size: clamp(22rem, 34vw, 30rem);
}

/* The figures define the panel geometry and the images fill them absolutely.
   A percentage height on the image itself would resolve against an auto-height
   grid row and collapse back to the intrinsic size. */
.ff-home-management__media,
.ff-home-management__media-secondary {
	position: relative;
	overflow: hidden;
	margin: 0;
	min-inline-size: 0;
	border-radius: var(--ff-radius-md);
}

.ff-home-management__media-secondary {
	align-self: end;
	block-size: 78%;
}

.ff-home-management__media img,
.ff-home-management__media-secondary img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	border-radius: 0;
	object-fit: cover;
}

.ff-home-management__media img {
	object-position: 55% 50%;
}

.ff-home-management__media-secondary img {
	object-position: 50% 50%;
}

/* Small white card overlapping the left edge of the large image, as in the
   mockup. It reaches back into the copy column on wide viewports. */
.ff-home-management__note {
	position: absolute;
	bottom: clamp(1.5rem, 4vw, 3.25rem);
	left: clamp(-3.5rem, -3vw, -1rem);
	z-index: 2;
	max-inline-size: min(20rem, 74%);
	padding: clamp(1rem, 1.7vw, 1.4rem);
	border-radius: var(--ff-radius-md);
	background: var(--ff-surface);
	box-shadow: var(--ff-shadow-float);
}

.ff-home-management__note h3 {
	position: relative;
	margin: 0 0 0.4rem;
	padding-inline-start: 2.75rem;
	font-size: 1.02rem;
	line-height: 1.3;
}

.ff-home-management__note h3::before {
	position: absolute;
	inset-block-start: -0.15rem;
	inset-inline-start: 0;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	background-color: var(--ff-sage-deep);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23faf8f3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5a2.5 2.5 0 0 1-2.5 2.5H8l-4 3.5V6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5z'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1.05rem;
	content: "";
}

.ff-home-management__note p {
	margin: 0;
	color: var(--ff-muted);
	font-size: 0.9rem;
	line-height: 1.5;
}

/* --- Local Cologne band ------------------------------------------------- */

.ff-home-area {
	background: var(--ff-warm-white);
}

.ff-home-area .ff-area-frame {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.82fr) minmax(0, 1.02fr);
	align-items: center;
	gap: 0;
	overflow: hidden;
	border-radius: var(--ff-radius-panel);
	background: var(--ff-navy-deep);
	color: var(--ff-on-dark);
}

/* The reusable area pattern carries a light panel; inside the dark homepage
   band the copy sits directly on the navy surface instead. */
.ff-home-area .ff-area-copy {
	min-inline-size: 0;
	grid-column: 1;
	padding: clamp(2rem, 3.5vw, 3.25rem);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.ff-home-area .ff-area-copy h2 {
	margin-block: 0 1rem;
	color: var(--ff-on-dark);
	font-size: clamp(1.6rem, 2.2vw, 2.15rem);
}

.ff-home-area .ff-area-copy .ff-eyebrow {
	color: var(--ff-sage-soft);
}

.ff-home-area .ff-area-copy .ff-eyebrow::before {
	background: var(--ff-sage);
}

.ff-home-area .ff-area-copy p {
	max-inline-size: 30rem;
	color: var(--ff-on-dark-muted);
}

.ff-home-area .ff-area-copy .ff-area-note {
	margin-block-start: 0.75rem;
	font-size: 0.88rem;
}

.ff-home-area .ff-area-copy .wp-block-buttons {
	margin-block-start: 1.5rem;
}

.ff-home-area .ff-area-points {
	min-inline-size: 0;
	grid-column: 2;
	display: grid;
	gap: clamp(1rem, 2vw, 1.65rem);
	padding-block: clamp(1.5rem, 3vw, 2.5rem);
	padding-inline: clamp(1.5rem, 2.5vw, 2.25rem);
	border-inline-start: 1px solid var(--ff-line-dark);
}

.ff-home-area .ff-area-point {
	position: relative;
	min-inline-size: 0;
	padding-inline-start: 2.4rem;
}

.ff-home-area .ff-area-point p {
	margin: 0;
	color: var(--ff-on-dark);
	font-size: 0.94rem;
	font-weight: 600;
	line-height: 1.45;
}

.ff-home-area .ff-area-point::before {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 1.5rem;
	height: 1.5rem;
	background-color: var(--ff-sage-soft);
	content: "";
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: 1.5rem;
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 1.5rem;
}

.ff-home-area .ff-area-point--pin::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s6.5-6.1 6.5-11a6.5 6.5 0 0 0-13 0C5.5 14.9 12 21 12 21z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s6.5-6.1 6.5-11a6.5 6.5 0 0 0-13 0C5.5 14.9 12 21 12 21z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E");
}

.ff-home-area .ff-area-media {
	position: relative;
	grid-column: 3;
	align-self: stretch;
	min-inline-size: 0;
	min-block-size: clamp(16rem, 24vw, 22rem);
	margin: 0;
	aspect-ratio: auto;
}

.ff-home-area .ff-area-media img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	aspect-ratio: auto;
	border-radius: 0;
	object-fit: cover;
	object-position: 50% 55%;
}

/* --- Closing contact bar ------------------------------------------------ */

.ff-home-cta {
	background: var(--ff-warm-white);
}

.ff-home-cta .ff-cta-bar {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr) auto;
	align-items: center;
	gap: clamp(1.25rem, 3vw, 2.75rem);
	padding: clamp(1.5rem, 2.6vw, 2.25rem) clamp(1.5rem, 3vw, 2.75rem);
	border: 1px solid var(--ff-line-warm);
	border-radius: var(--ff-radius-panel);
	background: var(--ff-surface);
	box-shadow: var(--ff-shadow-card);
}

.ff-home-cta .ff-cta-bar > * {
	min-inline-size: 0;
}

.ff-home-cta .ff-cta-bar__intro {
	position: relative;
	padding-inline-start: 4.5rem;
}

.ff-home-cta .ff-cta-bar__intro::before {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 0;
	width: 3.35rem;
	height: 3.35rem;
	border-radius: 50%;
	background-color: var(--ff-navy-deep);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23faf8f3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.2 3.8h3.1l1.6 4-2 1.4a11.5 11.5 0 0 0 5.9 5.9l1.4-2 4 1.6v3.1a2 2 0 0 1-2.2 2A16.8 16.8 0 0 1 4.2 6a2 2 0 0 1 2-2.2z'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1.68rem;
	content: "";
	transform: translateY(-50%);
}

.ff-home-cta .ff-cta-bar__kicker {
	margin: 0 0 0.3rem;
	color: var(--ff-muted);
	font-size: 0.92rem;
}

.ff-home-cta .ff-cta-bar__intro h2 {
	margin: 0;
	color: var(--ff-navy-deep);
	font-size: clamp(1.25rem, 1.9vw, 1.7rem);
}

.ff-home-cta .ff-cta-bar__contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 1.75rem;
	row-gap: 0.35rem;
}

.ff-home-cta .ff-cta-bar__phones {
	gap: 0.35rem 1.25rem;
}

.ff-home-cta .ff-cta-bar__contact .wp-block-buttons {
	margin: 0;
}

.ff-home-cta .ff-cta-bar__contact .wp-block-button__link {
	color: var(--ff-navy-deep);
	font-size: 0.95rem;
	font-weight: 650;
}

.ff-home-cta .ff-cta-bar__action {
	margin: 0;
}

.ff-home-cta .ff-cta-note {
	margin-block-start: 1.1rem;
	color: var(--ff-muted);
}

/* --- FAQ ---------------------------------------------------------------- */

.ff-faq > .wp-block-columns {
	grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
}

.ff-faq > .wp-block-columns > .wp-block-column,
.ff-faq details,
.ff-faq summary {
	min-inline-size: 0;
	max-inline-size: 100%;
}

.ff-faq h2 {
	inline-size: 100%;
	max-inline-size: 12ch;
	font-size: clamp(2rem, 3.2vw, 3rem);
	overflow-wrap: break-word;
}

.ff-faq summary {
	overflow-wrap: break-word;
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1180px) {
	.ff-home-quality .ff-quality-panel {
		grid-template-columns: minmax(0, 1fr);
	}

	.ff-home-area .ff-area-frame {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
	}

	.ff-home-area .ff-area-media {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	.ff-home-area .ff-area-points {
		grid-column: 1;
		padding-block-start: 0;
		padding-inline: clamp(2rem, 3.5vw, 3.25rem);
		border-inline-start: 0;
	}

	.ff-home-area .ff-area-copy {
		padding-block-end: clamp(1.25rem, 2.5vw, 1.75rem);
	}

	.ff-home-cta .ff-cta-bar {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.ff-home-cta .ff-cta-bar__contact {
		grid-column: 1 / -1;
	}

	.ff-faq > .wp-block-columns {
		grid-template-columns: minmax(0, 1fr);
	}

	.ff-faq h2 {
		max-inline-size: 16ch;
	}
}

@media (max-width: 1024px) {
	.ff-home-services .ff-service-tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.ff-home-quality .ff-quality-points {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}

	.ff-home-quality .ff-quality-point {
		padding-inline-start: 0;
		border-inline-start: 0;
	}

	.ff-home-services .ff-service-features {
		grid-template-columns: minmax(0, 1fr);
	}

	.ff-home-services .ff-service-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ff-home-management__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.25rem;
	}

	/* Below this width the overlapping card would cover the image it belongs to
	   almost completely, so it moves out of the overlap and sits underneath the
	   pair as its own full-width note. */
	.ff-home-management__visual {
		min-block-size: 0;
		align-items: end;
		row-gap: 1rem;
	}

	.ff-home-management__media {
		aspect-ratio: 3 / 3.5;
	}

	.ff-home-management__media-secondary {
		aspect-ratio: 3 / 3;
		block-size: auto;
	}

	.ff-home-management__note {
		position: static;
		grid-column: 1 / -1;
		max-inline-size: none;
	}

	/* Stacked, the three parts are placed explicitly. Relying on auto placement
	   let an inherited row assignment on the copy column push the heading below
	   the arguments that belong under it. */
	.ff-home-area .ff-area-frame {
		grid-template-columns: minmax(0, 1fr);
	}

	.ff-home-area .ff-area-copy,
	.ff-home-area .ff-area-points,
	.ff-home-area .ff-area-media {
		grid-column: 1;
		grid-row: auto;
	}

	.ff-home-area .ff-area-copy {
		order: 1;
		padding-block-end: clamp(1rem, 2.5vw, 1.5rem);
	}

	.ff-home-area .ff-area-points {
		order: 2;
		padding-block-start: 0;
	}

	.ff-home-area .ff-area-media {
		order: 3;
		min-block-size: 0;
		aspect-ratio: 16 / 9;
	}

	.ff-home-cta .ff-cta-bar {
		grid-template-columns: minmax(0, 1fr);
		text-align: left;
	}

	.ff-home-cta .ff-cta-bar__action,
	.ff-home-cta .ff-cta-bar__action .wp-block-button,
	.ff-home-cta .ff-cta-bar__action .wp-block-button__link {
		inline-size: 100%;
	}
}

@media (max-width: 600px) {
	.ff-home-services .ff-service-tiles {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * Kontaktzeile der CTA-Karte bricht sauber um.
	 *
	 * Telefongruppe und E-Mail stehen als eine Flex-Zeile mit
	 * `align-items: center` nebeneinander. Sobald die Karte zu schmal wird,
	 * bricht die Telefongruppe intern auf zwei Zeilen um, waehrend die E-Mail
	 * auf derselben Flex-Zeile bleibt und mittig ausgerichtet wird -- sie stand
	 * dadurch eingerueckt zwischen den beiden Rufnummern. Gemessen an der
	 * ausgelieferten Startseite: bis 620px Viewport (Karte 526px) einzeilig und
	 * korrekt, ab 560px (Karte 467px) fehlerhaft. Die Grenze liegt auf dem im
	 * Projekt etablierten Mobil-Breakpoint von 600px.
	 */
	.ff-home-cta .ff-cta-bar__contact {
		flex-direction: column;
		align-items: flex-start;
		row-gap: 0.5rem;
	}

	/*
	 * Die dreiteilige Merkmalzeile unter dem Hero-Bild entfaellt auf
	 * Telefonbreite.
	 *
	 * Sie steht als flex-Gruppe mit space-between und bricht deshalb schmal
	 * ungleichmaessig um: gemessen bis einschliesslich 558px zweizeilig als
	 * 2+1, bei 360px sogar dreizeilig. Die Grenze liegt bewusst auf dem im
	 * Projekt etablierten Mobil-Breakpoint und nicht auf den gemessenen 558px,
	 * damit sie nicht von der Laenge der drei Beschriftungen abhaengt.
	 *
	 * Die Aussagen gehen inhaltlich nicht verloren: Der Ablaufabschnitt weiter
	 * unten auf derselben Seite fuehrt sie ausfuehrlich.
	 *
	 * Der Selektor braucht zwei Klassen, weil WordPress die Gruppe ueber
	 * "body .is-layout-flex" mit Spezifitaet (0,1,1) auf display:flex setzt.
	 */
	.ff-hero .ff-hero-facts {
		display: none;
	}
}

@media (max-width: 480px) {
	.ff-home-management__copy h2,
	.ff-faq h2 {
		max-inline-size: 100%;
		font-size: clamp(1.85rem, 9vw, 2.45rem);
	}

	.ff-home-quality .ff-quality-panel,
	.ff-home-cta .ff-cta-bar {
		padding: 1.25rem;
		border-radius: var(--ff-radius-md);
	}

	.ff-home-cta .ff-cta-bar__intro {
		padding-inline-start: 3.6rem;
	}

	.ff-home-cta .ff-cta-bar__intro::before {
		width: 2.75rem;
		height: 2.75rem;
		background-size: 1.38rem;
	}
}