/*
Theme Name: FriedoFix
Theme URI: https://friedofix.de/
Author: FriedoFix
Author URI: https://friedofix.de/
Description: Individuelles, barrierearmes Full-Site-Editing-Theme für FriedoFix.
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 8.1
Version: 1.7.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: friedofix
Tags: block-patterns, block-styles, full-site-editing, accessibility-ready, wide-blocks
*/

/*
 * FriedoFix design tokens.
 *
 * One consolidated system: deep navy, a natural muted green, warm off-white,
 * pale sage and mist surfaces, restrained warm neutrals. Components reference
 * these tokens only — no second parallel token world.
 */
:root {
	/* The design system has exactly one light appearance; there is no
	   prefers-color-scheme branch anywhere in the theme. Declaring it keeps
	   mobile browsers with automatic dark rendering from inverting the
	   approved palette. Pair any future dark variant with "light dark" here
	   and in inc/head-meta.php. */
	color-scheme: light;

	/* Brand and surfaces */
	--ff-navy: #0f2742;
	--ff-navy-deep: #081c30;
	--ff-navy-soft: #16344f;
	--ff-sage: #879f88;
	--ff-sage-deep: #54724e;
	--ff-sage-deeper: #456043;
	--ff-sage-soft: #b7c8b8;
	--ff-mist: #dce6de;
	--ff-sage-tint: #eef2ec;
	--ff-stone: #e7ded2;
	--ff-sand: #f4f0e9;
	--ff-warm-white: #faf8f3;
	--ff-surface: #fff;

	/* Text */
	--ff-charcoal: #1d2732;
	--ff-muted: #5c6873;
	--ff-on-dark: #faf8f3;
	--ff-on-dark-muted: #c4d2d9;

	/* Lines, focus and elevation */
	--ff-line: #ced7d0;
	--ff-line-warm: #e3ded4;
	--ff-line-dark: rgb(250 248 243 / 18%);
	--ff-brass: #b49a69;
	--ff-focus: #b49a69;
	--ff-shadow-soft: 0 20px 60px rgb(8 28 48 / 9%);
	--ff-shadow-card: 0 14px 38px rgb(8 28 48 / 8%);
	--ff-shadow-float: 0 24px 64px rgb(8 28 48 / 14%);
	--ff-shadow-header: 0 8px 30px rgb(8 28 48 / 7%);

	/* Radii */
	--ff-radius-sm: 12px;
	--ff-radius-md: 20px;
	--ff-radius-lg: 34px;
	--ff-radius-pill: 999px;
	--ff-radius-panel: 28px;
	--ff-radius-organic: 34px 34px 72px 34px;

	/* Measure and rhythm */
	--ff-container-max: 80rem;
	--ff-container-wide: 80rem;
	--ff-container-gutter: var(--wp--preset--spacing--md, clamp(1.25rem, 1.12rem + 0.65vw, 1.75rem));
	--ff-shell-gutter: clamp(1.25rem, 3.2vw, 2.75rem);
	--ff-reading-max: 70ch;
	--ff-space-2xs: 0.5rem;
	--ff-space-xs: 0.75rem;
	--ff-space-sm: 1rem;
	--ff-space-md: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	--ff-space-lg: clamp(2rem, 1.55rem + 2vw, 3rem);
	--ff-space-xl: clamp(3rem, 2.25rem + 3vw, 5rem);
	--ff-section-space: clamp(4.25rem, 3rem + 5vw, 7rem);
	--ff-panel-radius: 24px;

	/* Controls */
	--ff-control-height: 3.15rem;
	--ff-control-height-sm: 2.75rem;
	--ff-field-height: 3.25rem;

	/* Layout offsets */
	--ff-header-clearance: 7.5rem;
	--ff-adminbar-offset: 0px;
	--ff-overlay-admin-offset: 0px;

	/* Type */
	--ff-font-body: "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", sans-serif;
	--ff-font-heading: "Manrope Variable", "Manrope", "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif;
	--ff-transition: 180ms;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 0;
}

body {
	min-width: 0;
	margin: 0;
	overflow-x: clip;
	background: var(--ff-warm-white);
	color: var(--ff-charcoal);
	font-family: var(--ff-font-body);
	font-synthesis: none;
	hyphens: none;
	overflow-wrap: normal;
	text-rendering: optimizelegibility;
	word-break: normal;
}

body.admin-bar {
	--ff-adminbar-offset: var(--wp-admin--admin-bar--height, 32px);
	--ff-overlay-admin-offset: var(--wp-admin--admin-bar--height, 32px);
}

main[id],
main :where([id]),
main :where(a, button, input, select, textarea, summary, [tabindex]) {
	scroll-margin-top: calc(var(--ff-header-clearance) + var(--ff-adminbar-offset));
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-post-title {
	font-family: var(--ff-font-heading);
	font-weight: 650;
	font-synthesis: none;
	letter-spacing: -0.035em;
	line-height: 1.08;
	text-wrap: balance;
	hyphens: none;
	overflow-wrap: normal;
	word-break: normal;
}

p,
li {
	text-wrap: pretty;
}

a {
	color: inherit;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 0.07em;
}

/* No control label is ever cut in the middle of a word. Long German compounds
   wrap at their word boundaries instead. Running prose keeps its own wrapping
   rules, so long URLs in the legal texts can still break where they must. */
:where(.wp-block-button__link, .wp-element-button, button, .wp-block-navigation-item__content, .ff-eyebrow, .ff-service-index, .ff-step-number) {
	hyphens: none;
	overflow-wrap: normal;
	word-break: normal;
}

a:hover {
	text-decoration-thickness: 0.12em;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--ff-brass);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px var(--ff-warm-white);
}

/*
 * Ausnahme fuer die Anker-Zielsektionen.
 *
 * inc/anchor-targets.php gibt ihnen tabindex="-1", damit der Tastaturfokus dem
 * Ankersprung folgt. Ohne diese Ausnahme zoege die Regel darueber einen 3px
 * breiten Rahmen um den gesamten Abschnitt. Die Sektionen sind keine
 * Bedienelemente: Der Fokus markiert hier nur die Vorleseposition, die
 * Rueckmeldung erfolgt ueber Sprung und Vorlesen der Ueberschrift.
 */
main .ff-section[tabindex="-1"]:focus {
	outline: none;
	box-shadow: none;
}

::selection {
	background: var(--ff-sage-soft);
	color: var(--ff-navy-deep);
}

.ff-skip-link,
#wp-skip-link {
	position: fixed;
	top: calc(0.75rem + var(--ff-adminbar-offset));
	left: 0.75rem;
	z-index: 100000;
	padding: 0.75rem 1rem;
	border-radius: var(--ff-radius-sm);
	background: var(--ff-warm-white);
	color: var(--ff-navy-deep);
	font-weight: 750;
	transform: translateY(-180%);
	transition: transform var(--ff-transition) ease;
}

.ff-skip-link:focus,
#wp-skip-link:focus {
	transform: translateY(0);
}

/* Header */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--ff-adminbar-offset);
	z-index: 9000;
	margin: 0;
}

.ff-site-header {
	position: relative;
	z-index: auto;
	margin: 0;
	background: var(--ff-warm-white);
	box-shadow: var(--ff-shadow-header);
}

/* The topbar stays, but reads as a quiet service line above the real header:
   lower height, muted contrast and no competing weight. */
.ff-contact-strip {
	min-height: 2.4rem;
	margin: 0;
	background: var(--ff-navy-deep);
	color: var(--ff-on-dark-muted);
}

.ff-contact-strip-inner {
	width: calc(100% - (2 * var(--ff-shell-gutter))) !important;
	max-width: var(--ff-container-wide) !important;
	min-height: 2.4rem;
	gap: 1rem;
}

.ff-contact-strip p,
.ff-contact-strip .wp-block-buttons,
.ff-contact-strip .wp-block-button {
	margin: 0;
}

.ff-area-note {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.035em;
}

.ff-inline-links {
	gap: 0.45rem 0.7rem;
}

.ff-phone-group {
	display: flex;
	min-width: 0;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
}

.ff-phone-group > .ff-phone-link--secondary {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
}

/* The middle dot only separates two numbers that sit side by side. Stacked
   lists (contact page, footer on narrow screens) must stay a clean column. */
.ff-phone-group:not(.is-vertical) > .ff-phone-link--secondary::before {
	content: "·";
	color: currentcolor;
	font-weight: 500;
	line-height: 1;
}

.ff-phone-group.is-vertical > .ff-phone-link--secondary {
	display: block;
	gap: 0;
}

.ff-footer-phone-pair {
	margin-top: 0;
	margin-bottom: 0.7rem;
}

.ff-phone-link,
.ff-phone-link a,
.ff-inline-phone-link,
.ff-legal-phone-list a,
.ff-mobile-phone-link a {
	overflow-wrap: normal;
	white-space: nowrap;
	word-break: normal;
}

.ff-phone-group .ff-phone-link .wp-block-button__link,
.ff-contact-alternatives .ff-phone-link a,
.ff-inline-phone-link,
.ff-legal-phone-list a {
	display: inline-flex;
	min-height: 2.75rem;
	align-items: center;
}

.ff-text-button .wp-block-button__link {
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
	font-size: inherit;
	font-weight: 650;
	line-height: inherit;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.25em;
}

.ff-text-button .wp-block-button__link:hover {
	background: transparent;
	color: inherit;
	text-decoration-color: currentcolor;
	transform: none;
}

.ff-contact-strip .ff-text-button .wp-block-button__link {
	min-height: 2.4rem;
	padding-inline: 0.35rem;
	color: var(--ff-on-dark-muted);
	font-size: 0.78rem;
	font-weight: 600;
}

.ff-contact-strip .ff-text-button .wp-block-button__link:hover {
	color: var(--ff-warm-white);
}

.ff-contact-strip .ff-area-note {
	color: var(--ff-on-dark-muted);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.02em;
}

.ff-whatsapp-button .wp-block-button__link::before {
	content: "↗ ";
	margin-right: 0.2rem;
	color: var(--ff-sage-soft);
}

.ff-header-shell {
	margin: 0;
	border-bottom: 1px solid rgb(15 39 66 / 7%);
}

/* The header shell shares the content measure, so the logo sits on the same
   left edge as the hero headline below it. */
.ff-header-main {
	width: calc(100% - (2 * var(--ff-shell-gutter))) !important;
	max-width: var(--ff-container-wide) !important;
	min-height: 4.6rem;
	gap: clamp(1rem, 2vw, 2.2rem);
}

.ff-brand,
.ff-brand .wp-block-site-logo,
.ff-brand a {
	flex: 0 0 auto;
	margin: 0;
}

.ff-brand img,
.ff-footer-brand img,
.custom-logo,
.ff-logo img {
	display: block;
	width: auto !important;
	height: auto !important;
	max-width: 100%;
	object-fit: contain !important;
	filter: none !important;
	transform: none !important;
	clip-path: none !important;
}

.ff-header-actions {
	min-width: 0;
	gap: clamp(0.75rem, 1.2vw, 1.25rem);
}

/*
 * Direkt anwaehlbare Rufnummer in der Kopfzeile ab Tablet-Breite.
 *
 * Unterhalb von 768px bleiben beide Nummern im Mobilmenue, damit die schmale
 * Kopfzeile neben Logo und Burger nichts verdraengt. Ab 1501px uebernimmt die
 * dunkle Kontaktleiste mit beiden Nummern, deshalb wird dieser Link dort
 * wieder ausgeblendet -- es erscheint zu keiner Breite eine doppelte Nummer.
 *
 * Href, aria-label und Anzeigetext stammen zentral aus den FriedoFix-
 * Einstellungen: Die Klasse ff-phone-link--primary laesst
 * FF_Settings::decorate_inline_phone_links greifen. Bewusst ein Absatz und
 * kein Buttons-Block, weil FF_Settings::ensure_secondary_phone_button an
 * Buttons-Bloecke mit Telefonbindung automatisch die Zweitnummer anhaengt.
 */
.ff-header-phone {
	display: none;
	margin: 0;
	font-size: 0.9rem;
	font-weight: 650;
	white-space: nowrap;
}

@media (min-width: 768px) and (max-width: 1500px) {
	.ff-header-phone {
		display: flex;
		align-items: center;
	}

	.ff-header-phone a {
		display: inline-flex;
		min-width: 44px;
		min-height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0 0.6rem;
		border-radius: 10px;
		color: var(--ff-navy-deep);
		text-decoration: none;
	}

	.ff-header-phone a:hover,
	.ff-header-phone a:focus-visible {
		background: var(--ff-sage-tint);
		color: var(--ff-navy-deep);
	}
}

.ff-primary-nav {
	font-size: clamp(0.8rem, 0.84vw, 0.86rem);
	font-weight: 650;
}

.ff-primary-nav .wp-block-navigation__container {
	gap: clamp(0.55rem, 1vw, 1rem);
}

.ff-primary-nav .wp-block-navigation__submenu-icon,
.ff-primary-nav .wp-block-navigation-submenu__toggle {
	width: 2.75rem;
	height: 2.75rem;
	min-height: 2.75rem;
	margin-left: -0.65rem;
	padding: 0.75rem;
	border: 0;
	border-radius: var(--ff-radius-sm);
	background: transparent;
	color: var(--ff-navy-deep);
}

.ff-primary-nav .wp-block-navigation__submenu-icon:hover,
.ff-primary-nav .wp-block-navigation-submenu__toggle:hover {
	background: var(--ff-mist);
	color: var(--ff-navy-deep);
	transform: none;
}

.ff-primary-nav .wp-block-navigation-submenu__toggle > .ff-navigation-chevron {
	display: block;
	width: 14px;
	height: 14px;
	min-width: 14px;
	max-width: 14px;
	min-height: 14px;
	max-height: 14px;
	flex: none;
	transform-origin: center;
	transition: transform 180ms ease;
}

.ff-primary-nav .wp-block-navigation-submenu__toggle[aria-expanded="true"] .ff-navigation-chevron {
	transform: rotate(180deg);
}

.ff-primary-nav .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.5rem;
	text-decoration: none;
	white-space: nowrap;
}

.ff-primary-nav .wp-block-navigation-item__content::after {
	position: absolute;
	right: 0;
	bottom: 0.25rem;
	left: 0;
	height: 2px;
	background: var(--ff-sage);
	content: "";
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--ff-transition) ease;
}

.ff-primary-nav .wp-block-navigation-item__content:hover::after,
.ff-primary-nav .current-menu-item > .wp-block-navigation-item__content::after,
.ff-primary-nav .current-menu-ancestor > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
	transform-origin: left;
}

.ff-header-cta,
.ff-header-cta .wp-block-button {
	margin: 0;
	white-space: nowrap;
}

.ff-header-cta .wp-block-button__link {
	min-height: var(--ff-control-height-sm);
	padding: 0.7rem 1.25rem;
	font-size: 0.82rem;
}

/* Navigations-Umschaltpunkt, vorgezogen von 1241px auf 1100px.
   Gemessen wurde die tatsaechliche Grenze: Der Header-CTA ist 261px breit und
   laeuft unterhalb von 1080px ueber den Viewport hinaus, bei 1080-1095px
   bleiben nur 2-9px Rand. Ab 1096px ist der Abstand komfortabel, deshalb der
   naechste runde Wert 1100px. Ein Umschalten bei 1024px schneidet den CTA um
   48px ab. Die drei zusammengehoerigen Abfragen (dieser Block, der
   1500px-Zwischenbereich und der Burger-Block) muessen gemeinsam verschoben
   werden. Wird der CTA-Text spaeter kuerzer, kann die Grenze weiter sinken. */
@media (min-width: 1100px) {
	/* Logo left, navigation balanced in the middle, single primary action right.
	   Only from this width on: below it the action is hidden and the same rule
	   would drag the lone menu button away from the right edge. */
	.ff-header-actions {
		flex: 1 1 auto;
		justify-content: space-between !important;
	}

	.ff-header-actions > .ff-primary-nav {
		margin-inline: auto;
	}

	nav.ff-primary-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .ff-mobile-only-nav-item {
		display: none;
	}

	.ff-primary-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-submenu.has-child {
		display: inline-flex;
		align-items: center;
		gap: 6px;
	}

	.ff-primary-nav .wp-block-navigation-submenu > .wp-block-navigation-item__content {
		display: inline-flex;
		align-items: center;
	}

	.ff-primary-nav .wp-block-navigation-submenu > :where(.wp-block-navigation__submenu-icon, .wp-block-navigation-submenu__toggle) {
		position: static;
		display: inline-flex;
		width: 1.725rem;
		height: 2.75rem;
		min-height: 2.75rem;
		flex: 0 0 1.725rem;
		align-items: center;
		justify-content: flex-start;
		margin: 0;
		padding: 0;
		background: transparent;
		color: inherit;
		line-height: 0;
	}

	.ff-primary-nav .wp-block-navigation-submenu > :where(.wp-block-navigation__submenu-icon, .wp-block-navigation-submenu__toggle):hover {
		background: transparent;
		color: inherit;
	}
}

@media (min-width: 1100px) and (max-width: 1500px) {
	:root {
		--ff-header-clearance: 5.1rem;
	}

	.ff-contact-strip {
		display: none;
	}

	.ff-primary-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
		gap: clamp(0.4rem, 0.65vw, 0.75rem);
	}
}

/* Buttons and shared type */

.wp-block-button__link,
.wp-element-button,
button:not(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close) {
	display: inline-flex;
	min-height: var(--ff-control-height);
	align-items: center;
	justify-content: center;
	padding: 0.82rem 1.6rem;
	border: 1px solid var(--ff-navy);
	border-radius: var(--ff-radius-pill);
	background: var(--ff-navy);
	box-shadow: none;
	color: var(--ff-warm-white);
	font-family: var(--ff-font-body);
	font-size: 0.94rem;
	font-weight: 720;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--ff-transition) ease, border-color var(--ff-transition) ease, color var(--ff-transition) ease, transform var(--ff-transition) ease;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
button:not(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close):hover {
	border-color: var(--ff-navy-deep);
	background: var(--ff-navy-deep);
	color: var(--ff-warm-white);
	transform: translateY(-1px);
}

.wp-block-button.is-style-outline-navy .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--ff-navy);
	background: transparent;
	color: var(--ff-navy);
}

.wp-block-button.is-style-outline-navy .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--ff-navy);
	color: var(--ff-warm-white);
}

.wp-block-button.is-style-outline-light .wp-block-button__link {
	border-color: rgb(250 248 243 / 48%);
	background: transparent;
	color: var(--ff-warm-white);
}

.wp-block-button.is-style-outline-light .wp-block-button__link:hover {
	border-color: var(--ff-warm-white);
	background: var(--ff-warm-white);
	color: var(--ff-navy-deep);
}

/* Natural green primary action, as used for the header and closing CTA. */
.wp-block-button.is-style-sage .wp-block-button__link {
	border-color: var(--ff-sage-deep);
	background: var(--ff-sage-deep);
	color: var(--ff-on-dark);
}

.wp-block-button.is-style-sage .wp-block-button__link:hover {
	border-color: var(--ff-sage-deeper);
	background: var(--ff-sage-deeper);
	color: var(--ff-on-dark);
}

/* The mockup marks forward actions with a trailing arrow rather than an icon
   font. It is decorative, so it stays out of the accessible name. */
.wp-block-button.is-style-sage .wp-block-button__link::after,
.wp-block-button.is-style-arrow .wp-block-button__link::after,
.wp-block-button.is-style-outline-navy.has-arrow .wp-block-button__link::after {
	margin-left: 0.7rem;
	content: "→";
	transition: transform var(--ff-transition) ease;
}

.wp-block-button.is-style-sage .wp-block-button__link:hover::after,
.wp-block-button.is-style-arrow .wp-block-button__link:hover::after,
.wp-block-button.is-style-outline-navy.has-arrow .wp-block-button__link:hover::after {
	transform: translateX(0.2rem);
}

.wp-block-button.is-style-arrow .wp-block-button__link {
	border-color: var(--ff-navy);
	background: var(--ff-navy);
	color: var(--ff-on-dark);
}

.wp-block-button.is-style-text-link .wp-block-button__link {
	min-height: 2.75rem;
	padding: 0.45rem 0;
	border: 0;
	border-bottom: 1px solid currentcolor;
	border-radius: 0;
	background: transparent;
	color: var(--ff-navy);
}

.wp-block-button.is-style-text-link .wp-block-button__link::after {
	margin-left: 0.6rem;
	content: "→";
	transition: transform var(--ff-transition) ease;
}

.wp-block-button.is-style-text-link .wp-block-button__link:hover {
	background: transparent;
	color: var(--ff-navy-deep);
	transform: none;
}

.wp-block-button.is-style-text-link .wp-block-button__link:hover::after {
	transform: translateX(0.2rem);
}

.ff-eyebrow {
	margin: 0 0 1rem;
	color: var(--ff-navy);
	font-size: 0.72rem;
	font-weight: 780;
	letter-spacing: 0.13em;
	line-height: 1.35;

	/* Absaetze erben text-wrap: pretty. Bei 320px liess das den Ortsteil der
	   Dachzeile als 55px schmale Restzeile allein stehen. balance verteilt die
	   Zeilen gleichmaessig. Einzeilige Dachzeilen bleiben unberuehrt, weil
	   balance nur bei tatsaechlichem Umbruch wirkt -- ab 360px aendert sich
	   dadurch nichts. */
	text-wrap: balance;
	text-transform: uppercase;
}

.ff-eyebrow::before {
	display: inline-block;
	width: 1.8rem;
	height: 1px;
	margin: 0 0.65rem 0.22rem 0;
	background: var(--ff-brass);
	content: "";
}

.ff-lead {
	max-width: 42rem;
	font-size: clamp(1.08rem, 1.6vw, 1.3rem);
	line-height: 1.58;
}

/*
 * Ein einziger Abstandswert fuer alle Abschnitte.
 *
 * Zuvor trugen mehrere Abschnitte eigene Werte: Basis 76 bis 120px, die
 * Baender Qualitaetszusage und Einsatzgebiet nur 32 bis 56px, die CTA 40 bis
 * 72px, dazu zwei Media-Query-Overrides. Der sichtbare Abstand zwischen zwei
 * Abschnitten ist die Summe beider Innenabstaende und schwankte dadurch stark
 * -- gemessen an der ausgelieferten Startseite: 112 bis 230px auf 1440px und
 * 64 bis 136px auf Telefonbreite. Mit einem gemeinsamen Wert betraegt der
 * Abstand ueberall das Doppelte davon: rund 160px auf dem Desktop und 96px auf
 * dem Telefon.
 */
.ff-section {
	position: relative;
	margin-block: 0;
	padding-block: clamp(3rem, 5.5vw, 5rem);
}

.ff-section-compact {
	margin-block: 0;
	padding-block: clamp(3rem, 5.5vw, 5rem);
}

.ff-section :where(h1, h2, h3, p, ul):first-child,
.ff-section > :first-child {
	margin-top: 0;
}

.ff-section :where(h1, h2, h3, p, ul):last-child,
.ff-section > :last-child {
	margin-bottom: 0;
}

/* Hero
 *
 * Mockup composition: quiet copy column on the left, one large architectural
 * image on the right that runs past the content edge under a soft organic
 * mask, a small factual overlay card and four compact trust markers below.
 */

.ff-hero {
	padding-top: clamp(2.5rem, 4.5vw, 4.25rem);

	/* Gleicher Wert wie jeder andere Abschnitt, damit der erste Uebergang nicht aus der Reihe faellt. */
	padding-bottom: clamp(3rem, 5.5vw, 5rem);
	background: var(--ff-warm-white);
	isolation: isolate;
}

.ff-hero::before {
	position: absolute;
	top: -12%;
	right: -10rem;
	z-index: -1;
	width: clamp(20rem, 34vw, 36rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background: rgb(183 200 184 / 18%);
	content: "";
}

.ff-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
	align-items: center;
	column-gap: clamp(1.75rem, 4vw, 4rem);
}

.ff-hero-copy {
	min-width: 0;
	z-index: 2;
	grid-column: 1;
	grid-row: 1;
	max-width: 34rem;
	padding-block: clamp(1rem, 2vw, 2.25rem);
}

.ff-hero-copy h1 {
	max-width: 15ch;
	margin: 0;
	color: var(--ff-navy-deep);
	line-height: 1.04;
	letter-spacing: -0.038em;
}

.ff-hero-copy .ff-lead {
	max-width: 32rem;
	margin-top: 1.5rem;
	color: #3f4d59;
	font-size: clamp(1.02rem, 1.15vw, 1.16rem);
	line-height: 1.6;
}

.ff-hero-actions {
	position: relative;
	z-index: 1;
	max-width: 100%;
	gap: 0.75rem;
	margin-top: 2rem;
}

.ff-hero-actions .wp-block-button,
.ff-hero-actions .wp-block-button__link {
	max-width: 100%;
}

.ff-hero-note {
	margin-top: 1rem;
	color: var(--ff-muted);
}

/* The visual column deliberately breaks out of the content measure towards the
   viewport edge, exactly as in the mockup. The bleed equals the space that the
   centred wide container leaves beside itself, but it is capped: on very wide
   screens an uncapped bleed would blow the hero image up out of proportion to
   the copy beside it. */
.ff-hero-visual {
	/* The gutter token matches the root padding the wide container is inset by,
	   so the image lands flush with the viewport edge instead of a few pixels
	   past it. */
	--ff-hero-bleed: min(4.5rem, max(var(--ff-container-gutter), (100vw - var(--ff-container-wide)) / 2));

	position: relative;
	min-width: 0;
	z-index: 1;
	grid-column: 2;
	grid-row: 1;
	margin-right: calc(-1 * var(--ff-hero-bleed));
}

.ff-hero-media,
.ff-hero-media img {
	width: 100%;
	margin: 0;
}

.ff-hero-media img {
	aspect-ratio: 4 / 2.95;
	max-block-size: 32rem;
	border-radius: 200px 0 0 200px;
	object-fit: cover;
	object-position: 52% 50%;
}

/* Small factual overlay card. It only carries centrally maintained data. */
.ff-hero-badge {
	position: absolute;
	right: clamp(1rem, 3vw, 2.75rem);
	bottom: clamp(1.25rem, 3vw, 2.5rem);
	z-index: 2;
	max-width: min(19rem, 60%);
	padding: 0.95rem 1.2rem;
	border-radius: var(--ff-radius-md);
	background: var(--ff-navy-deep);
	box-shadow: var(--ff-shadow-float);
	color: var(--ff-on-dark);
}

.ff-hero-badge__title {
	position: relative;
	margin: 0 0 0.3rem;
	padding-left: 1.85rem;
	font-family: var(--ff-font-heading);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.015em;
}

.ff-hero-badge__title::before {
	position: absolute;
	top: 0.05rem;
	left: 0;
	width: 1.25rem;
	height: 1.25rem;
	background-color: var(--ff-sage-soft);
	content: "";
	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.7' 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");
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: 1.25rem;
	-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.7' 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-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 1.25rem;
}

.ff-hero-badge__text {
	margin: 0;
	color: var(--ff-on-dark-muted);
	font-size: 0.8rem;
	line-height: 1.4;
}

/* Four compact trust markers, icon above a short label. */
.ff-hero-trust {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 2.5vw, 2.5rem);
	margin-top: clamp(2.25rem, 4vw, 3.5rem);
}

.ff-hero-trust__item {
	min-width: 0;
}

.ff-hero-trust__item p {
	margin: 0;
	color: var(--ff-muted);
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.4;
}

.ff-hero-trust__item::before {
	display: block;
	width: 1.6rem;
	height: 1.6rem;
	margin-bottom: 0.7rem;
	background-color: var(--ff-sage-deep);
	content: "";
	mask-position: left center;
	mask-repeat: no-repeat;
	mask-size: 1.6rem;
	-webkit-mask-position: left center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 1.6rem;
}

.ff-hero-trust__item--person::before,
.ff-area-point--person::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%3Ccircle cx='12' cy='8.5' r='3.6'/%3E%3Cpath d='M4.8 20a7.2 7.2 0 0 1 14.4 0'/%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%3Ccircle cx='12' cy='8.5' r='3.6'/%3E%3Cpath d='M4.8 20a7.2 7.2 0 0 1 14.4 0'/%3E%3C/svg%3E");
}

.ff-hero-trust__item--document::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='M6 3.5h9L19 8v12.5H6z'/%3E%3Cpath d='M14.5 3.5V8H19'/%3E%3Cpath d='M9 12.5h6M9 16h4'/%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='M6 3.5h9L19 8v12.5H6z'/%3E%3Cpath d='M14.5 3.5V8H19'/%3E%3Cpath d='M9 12.5h6M9 16h4'/%3E%3C/svg%3E");
}

.ff-hero-trust__item--calendar::before,
.ff-area-point--clock::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%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");
	-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%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-hero-trust__item--visit::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%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='m8.2 12.2 2.6 2.6 5-5.2'/%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%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='m8.2 12.2 2.6 2.6 5-5.2'/%3E%3C/svg%3E");
}

/* Editorial story */

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

.ff-story-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: center;
	gap: clamp(2.5rem, 6vw, 6rem);
}

.ff-story-media {
	grid-column: 1 / span 7;
	margin: 0;
}

.ff-story-media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 28px 72px 28px 28px;
	object-fit: cover;
}

.ff-story-copy {
	grid-column: 8 / -1;
}

.ff-story-copy h2,
.ff-services-heading h2,
.ff-management-copy h2,
.ff-process-heading h2,
.ff-faq h2,
.ff-cta h2 {
	margin-top: 0;
	color: var(--ff-navy-deep);
	font-size: clamp(1.95rem, 3.1vw, 2.9rem);
}

.ff-story-copy .wp-block-buttons {
	margin-top: 1.5rem;
}

/* Services */

.ff-services {
	background: var(--ff-sand);
}

.ff-services-heading {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
	align-items: end;
	gap: clamp(2rem, 7vw, 7rem);
}

.ff-services-heading .ff-lead {
	margin: 0 0 0.45rem;
}

.ff-service-list {
	margin-top: clamp(2.5rem, 5vw, 4.5rem);
	border: 1px solid #bcc8bf;
	border-radius: var(--ff-radius-md);
	background: rgb(250 248 243 / 78%);
}

.ff-service-row {
	display: grid;
	width: 100% !important;
	max-width: none !important;
	grid-template-columns: 3.25rem minmax(13rem, 0.85fr) minmax(18rem, 1.15fr);
	align-items: center;
	gap: clamp(1rem, 3vw, 3rem);
	padding: clamp(1.3rem, 2.4vw, 2rem) clamp(1.2rem, 2.5vw, 2rem);
	border-bottom: 1px solid #bcc8bf;
	transition: background-color var(--ff-transition) ease;
}

.ff-service-row:hover {
	background: var(--ff-mist);
}

.ff-service-row:last-child {
	border-bottom: 0;
}

.ff-service-row > * {
	margin-block: 0;
}

.ff-service-row h3 {
	color: var(--ff-navy-deep);
	font-size: clamp(1.25rem, 2vw, 1.7rem);
}

.ff-service-row p:last-child {
	color: #4c5a65;
}

.ff-service-index {
	display: inline-grid;
	width: 2.5rem;
	height: 2.5rem;
	place-items: center;
	border: 1px solid rgb(15 39 66 / 18%);
	border-radius: 999px;
	background: var(--ff-warm-white);
	color: var(--ff-navy);
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.1em;
}

.ff-services-link {
	margin-top: 1.5rem;
}

.ff-services-link p {
	margin: 0;
	font-weight: 700;
}

/* Management */

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

.ff-management-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: center;
}

.ff-management-media {
	min-width: 0;
	width: 100%;
	max-width: 100%;
	grid-column: 1 / span 8;
	grid-row: 1;
	margin: 0;
}

.ff-management-media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--ff-radius-lg);
	object-fit: cover;
}

.ff-management-copy {
	z-index: 2;
	grid-column: 7 / -1;
	grid-row: 1;
	margin-block: 4rem;
	padding: clamp(2rem, 4vw, 4rem);
	border-radius: 26px 26px 58px;
	background: var(--ff-mist);
	box-shadow: var(--ff-shadow-soft);
}

.ff-check-list {
	margin-block: 1.4rem 1.8rem;
	padding: 0;
	list-style: none;
}

.ff-check-list li {
	position: relative;
	padding: 0.55rem 0 0.55rem 1.75rem;
	border-bottom: 1px solid rgb(15 39 66 / 12%);
}

.ff-check-list li::before {
	position: absolute;
	top: 0.6rem;
	left: 0;
	color: var(--ff-navy);
	content: "✓";
	font-weight: 800;
}

/* Quality */

.ff-quality-section {
	overflow: hidden;
	background: var(--ff-navy);
	color: var(--ff-warm-white);
}

.ff-quality-section::after {
	position: absolute;
	right: -8rem;
	bottom: -14rem;
	width: 30rem;
	aspect-ratio: 1;
	border: 1px solid rgb(183 200 184 / 25%);
	border-radius: 50%;
	content: "";
}

.ff-quality-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
	align-items: center;
	gap: clamp(3rem, 7vw, 7rem);
}

.ff-quality-media {
	margin: 0;
}

.ff-quality-media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 30px 70px 30px 30px;
	object-fit: cover;
}

.ff-quality-copy {
	position: relative;
	z-index: 2;
}

.ff-quality-copy .ff-eyebrow,
.ff-quality-copy h2,
.ff-quality-copy .ff-lead,
.ff-quality-copy p {
	color: var(--ff-warm-white);
}

.ff-quality-copy h2 {
	margin-top: 0;
	font-size: clamp(2.3rem, 4.3vw, 4rem);
}

.ff-quality-limit {
	max-width: 34rem;
	padding-top: 1.15rem;
	border-top: 1px solid rgb(250 248 243 / 24%);
	opacity: 0.78;
}

.ff-quality-copy .wp-block-buttons {
	margin-top: 1.75rem;
}

/* Process */

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

.ff-process-heading {
	display: grid;
	grid-template-columns: 1fr 2fr;
	align-items: end;
	gap: 2rem;
}

.ff-process-heading .ff-eyebrow,
.ff-process-heading h2 {
	margin-bottom: 0;
}

.ff-process-list {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.5rem;
	margin-top: clamp(2.5rem, 5vw, 4.5rem);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: 1px solid var(--ff-line);
	border-radius: var(--ff-radius-lg);
	background: var(--ff-sand);
}

.ff-process-list::before {
	position: absolute;
	top: clamp(3.6rem, 5vw, 4.4rem);
	right: clamp(3rem, 7vw, 6rem);
	left: clamp(3rem, 7vw, 6rem);
	height: 1px;
	background: #bbc7bd;
	content: "";
}

.ff-process-step {
	position: relative;
	z-index: 1;
	min-width: 0;
	padding: 0.75rem clamp(0.5rem, 1.4vw, 1.25rem) 0;
}

.ff-process-step > * {
	margin-top: 0;
}

.ff-step-number {
	display: grid;
	width: 3rem;
	height: 3rem;
	place-items: center;
	margin-bottom: 1.35rem;
	border-radius: 50%;
	background: var(--ff-navy);
	box-shadow: 0 0 0 0.45rem var(--ff-sand);
	color: var(--ff-warm-white);
	font-family: var(--ff-font-heading);
	font-size: 0.76rem;
	font-weight: 750;
	letter-spacing: 0.12em;
}

.ff-process-step h3 {
	color: var(--ff-navy-deep);
	font-size: 1.25rem;
}

.ff-process-step p:last-child {
	color: var(--ff-muted);
	font-size: 0.94rem;
}

/* Area */

.ff-area {
	background: var(--ff-sand);
}

.ff-area-frame {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: end;
}

.ff-area-media {
	grid-column: 1 / -1;
	grid-row: 1;
	margin: 0 0 4.5rem;
}

.ff-area-media img {
	width: 100%;
	aspect-ratio: 16 / 7;
	border-radius: 30px 70px 30px 30px;
	object-fit: cover;
	object-position: center 48%;
}

.ff-area-copy {
	z-index: 2;
	grid-column: 2 / span 6;
	grid-row: 1;
	padding: clamp(1.8rem, 4vw, 3.5rem);
	border-radius: var(--ff-radius-md) var(--ff-radius-md) 50px var(--ff-radius-md);
	background: var(--ff-mist);
	box-shadow: var(--ff-shadow-soft);
}

.ff-area-copy h2 {
	margin-top: 0;
	color: var(--ff-navy-deep);
	font-size: clamp(2.1rem, 4vw, 3.6rem);
}

/* FAQ */

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

.ff-faq > .wp-block-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: clamp(3rem, 6vw, 6rem);
}

.ff-faq > .wp-block-columns > .wp-block-column {
	min-width: 0;
}

.ff-faq h2 {
	max-width: 100%;
	font-size: clamp(2.5rem, 3.6vw, 3.5rem);
	hyphens: none;
	overflow-wrap: normal;
	word-break: normal;
}

.ff-faq details {
	margin: 0;
	padding: 0;
	border: 0;
	border-top: 1px solid var(--ff-line);
	background: transparent;
}

.ff-faq details:last-child {
	border-bottom: 1px solid var(--ff-line);
}

.ff-faq summary {
	position: relative;
	display: flex;
	min-height: 2.75rem;
	align-items: center;
	padding: 1.35rem 2.5rem 1.35rem 0;
	color: var(--ff-navy-deep);
	font-family: var(--ff-font-heading);
	font-size: 1.08rem;
	font-weight: 680;
	cursor: pointer;
	list-style: none;
}

.ff-faq summary::-webkit-details-marker {
	display: none;
}

.ff-faq summary::after {
	position: absolute;
	top: 50%;
	right: 0;
	content: "+";
	color: var(--ff-sage);
	font-size: 1.6rem;
	font-weight: 450;
	transform: translateY(-50%);
}

.ff-faq details[open] summary::after {
	content: "−";
}

.ff-faq details p {
	max-width: 42rem;
	margin: 0;
	padding-bottom: 1.35rem;
	color: var(--ff-muted);
}

/* CTA */

.ff-cta {
	background: var(--ff-sage-soft);
}

/* The contact block is stacked, not split into two columns: the form used to
   sit in a 0.9fr column next to the intro, which left it about 400-520px wide
   on a 1280px row. Introduction first, then the form across the full width. */
.ff-cta-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: clamp(1.75rem, 3.5vw, 3rem);
}

/* Only the closing section that actually carries the form follows the contact
   page layout: a compact intro beside the form card. The subpage final CTA
   holds buttons instead of a form and stays stacked. */
@media (min-width: 1101px) {
	.ff-cta-inner:has(.ff-contact-form) {
		grid-template-columns: minmax(0, 36fr) minmax(0, 64fr);
		gap: var(--ff-space-lg);
	}
}

/* The running text keeps a readable measure even though the form does not. */
.ff-cta-intro {
	max-width: 46rem;
}

.ff-cta h2 {
	max-width: 20ch;
	margin-bottom: 0;
}

.ff-cta-action p {
	margin-top: 0;
	color: #33434f;
}

.ff-cta-action .wp-block-buttons {
	margin-top: 1.5rem;
}

.ff-cta .is-style-outline-light .wp-block-button__link {
	border-color: var(--ff-navy);
	color: var(--ff-navy);
}

.ff-cta .is-style-outline-light .wp-block-button__link:hover {
	background: var(--ff-navy);
	color: var(--ff-warm-white);
}

/* Footer */

.ff-site-footer {
	margin: 0;
	padding-block: clamp(2.75rem, 5vw, 4rem) 1.25rem;
	border-top: 1px solid var(--ff-line);
	background: var(--ff-sand);
	color: var(--ff-navy-deep);
}

.ff-footer-main {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(12rem, 0.65fr) minmax(20rem, 1fr);
	gap: clamp(2rem, 5vw, 5rem);
}

.ff-footer-intro {
	max-width: 34rem;
}

.ff-footer-brand {
	display: inline-flex;
	width: fit-content;
	margin-bottom: 1.15rem;
	padding: 0;
	background: transparent;
}

.ff-footer-intro h2 {
	margin-block: 0 0.8rem;
	color: var(--ff-navy-deep);
	font-size: clamp(1.45rem, 2.3vw, 2.15rem) !important;
	letter-spacing: -0.035em;
}

.ff-footer-intro > p {
	max-width: 30rem;
	color: var(--ff-muted);
}

.ff-footer-address {
	margin-top: 0.9rem !important;
	color: var(--ff-muted);
}

/* Hidden by the settings layer when no verified public address is available. */
.ff-footer-address:empty {
	display: none;
}

.ff-footer-label {
	margin: 0 0 0.9rem;
	color: var(--ff-navy);
	font-size: 0.72rem;
	font-weight: 780;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ff-contact-links,
.ff-contact-links .wp-block-button,
.ff-footer-links,
.ff-footer-links .wp-block-navigation__container {
	align-items: flex-start !important;
	gap: 0.4rem;
}

.ff-site-footer .ff-text-button .wp-block-button__link,
.ff-footer-links a {
	color: var(--ff-navy-deep);
	font-size: 0.94rem;
	font-weight: 560;
}

.ff-site-footer .ff-text-button .wp-block-button__link {
	justify-content: flex-start;
	text-align: left;
}

.ff-footer-links a {
	min-height: 2rem;
	padding: 0.2rem 0;
	text-decoration: none;
}

.ff-footer-links a:hover,
.ff-site-footer .ff-text-button .wp-block-button__link:hover {
	color: var(--ff-navy);
}

.ff-footer-bottom {
	margin-top: clamp(2rem, 4vw, 3rem);
	padding-top: 1.35rem;
	border-top: 1px solid #d6cec2;
	color: var(--ff-muted);
}

.ff-footer-bottom p {
	margin: 0;
}

.ff-legal-links,
.ff-legal-links .wp-block-navigation__container {
	gap: 1rem;
}

.ff-legal-links a {
	display: flex;
	min-height: 2.75rem;
	align-items: center;
	padding: 0.5rem 0;
	color: inherit;
	text-decoration: none;
}

.wp-block-navigation.ff-legal-links:not(:has(.wp-block-navigation-item)) {
	display: none;
}

/* Page and archive templates */

.ff-page-main {
	min-height: 52vh;
}

.ff-page-hero,
.ff-detail-hero {
	margin: 0;
	padding-block: clamp(3rem, 5.5vw, 5rem);
	background: var(--ff-sand);
}

.ff-page-hero-grid,
.ff-detail-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(min(20rem, 26vw), 0.9fr);
	align-items: center;
	gap: clamp(2.5rem, 5vw, 5rem);
}

.ff-page-hero-grid:not(:has(.ff-page-hero-media img)),
.ff-detail-hero-grid:not(:has(.ff-detail-hero-media img)) {
	grid-template-columns: minmax(0, 50rem);
}

.ff-page-hero-copy .wp-block-post-title,
.ff-detail-hero-copy .wp-block-post-title {
	max-width: none;
	margin: 0;
	color: var(--ff-navy-deep);
	font-size: clamp(2.6rem, 4.25vw, 3.75rem);
	line-height: 1.04;
	hyphens: auto;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.ff-service-detail-page .ff-page-hero-copy .wp-block-post-title {
	font-size: min(clamp(2.6rem, 4.25vw, 3.75rem), 62px);
}

.ff-page-hero-copy,
.ff-detail-hero-copy {
	min-width: 0;
	width: 100%;
	max-width: 100%;
}

.ff-detail-hero-copy .wp-block-post-excerpt {
	max-width: 38rem;
	margin-top: 1.5rem;
	color: var(--ff-muted);
}

.ff-page-hero-media,
.ff-detail-hero-media {
	margin: 0;
}

.ff-page-hero-media img,
.ff-detail-hero-media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 28px 64px 28px 28px;
	object-fit: cover;
}

.ff-detail-hero-area {
	background: var(--ff-mist);
}

.ff-page-content {
	background: var(--ff-warm-white);
}

.ff-contact-layout {
	position: relative;
	left: 50%;
	display: grid;
	width: min(var(--ff-container-max), calc(100vw - (2 * var(--ff-container-gutter))));
	max-width: none !important;

	/* Compact information column beside the wider form card. The earlier split
	   did not fail because of the split itself but because of its gap: a
	   clamp(2rem, 8vw, 8rem) gutter ate up to 128px and pushed the form below
	   520px. With a calm gap the form card keeps roughly 64% of the 1280px
	   container, so it stays near 790px instead of spanning the whole page. */
	grid-template-columns: minmax(0, 36fr) minmax(0, 64fr);
	align-items: start;
	gap: var(--ff-space-lg);
	margin-top: var(--ff-space-lg) !important;
	transform: translateX(-50%);
}

/* Below this width the two columns would squeeze the form under ~640px, so both
   use the full container. Stacked, the form card moves to the top: the trust
   column, the contact box and the checklist together are taller than a phone
   screen, and burying the actual task under them is exactly what the stacked
   layout used to do. The document order stays context-then-form, so assistive
   technology still reads the page in its authored sequence. */
@media (max-width: 1100px) {
	.ff-contact-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.ff-contact-layout > .ff-contact-form {
		order: -1;
	}
}

.ff-contact-layout > *,
.ff-contact-overview,
.ff-contact-direct {
	min-width: 0;
}

.ff-contact-layout > .ff-contact-overview {
	/* Beside the form the column width already limits the measure. */
	max-width: none;
	margin: 0;
}

/* Stacked above the form it needs its own readable measure again. */
@media (max-width: 1100px) {
	.ff-contact-layout > .ff-contact-overview {
		max-width: 46rem;
	}
}

.ff-contact-overview {
	display: grid;

	/* Tighter than the old section spacing so the column reads as one block, but
	   never below the 24px separation the layout QA asserts between the contact
	   box and the checklist. */
	gap: clamp(1.75rem, 1.4rem + 1vw, 2.5rem);
	align-content: start;
}

/* Trust column beside the form card. The icons are drawn from a masked inline
   SVG so the seeded page content stays plain, editable block markup and no icon
   library is pulled in for three items. */
.ff-contact-trust {
	display: grid;
	gap: var(--ff-space-sm);
}

.ff-contact-trust__item {
	position: relative;
	display: grid;
	grid-template-areas:
		"icon title"
		"icon text";
	grid-template-columns: 2.75rem minmax(0, 1fr);
	column-gap: 1rem;
	row-gap: 0.2rem;
	min-width: 0;
}

.ff-contact-trust__item::before {
	grid-area: icon;
	align-self: start;
	display: block;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--ff-line);
	border-radius: 50%;
	background-color: var(--ff-warm-white);
	content: "";
}

/* The glyph is a masked inline SVG. A browser without mask support simply keeps
   the empty circle above, which reads as a deliberate bullet rather than as a
   broken icon. */
@supports (mask-image: none) or (-webkit-mask-image: none) {
	.ff-contact-trust__item::after {
		position: absolute;
		inset-block-start: 0.625rem;
		inset-inline-start: 0.625rem;
		width: 1.5rem;
		height: 1.5rem;
		background-color: var(--ff-navy);
		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-contact-trust__item--visit::after {
		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.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16.2 16.2 4.3 4.3'/%3E%3Cpath d='M8 11h6M11 8v6'/%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.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16.2 16.2 4.3 4.3'/%3E%3Cpath d='M8 11h6M11 8v6'/%3E%3C/svg%3E");
	}

	.ff-contact-trust__item--personal::after {
		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.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.6'/%3E%3Cpath d='M4.8 20a7.2 7.2 0 0 1 14.4 0'/%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.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.6'/%3E%3Cpath d='M4.8 20a7.2 7.2 0 0 1 14.4 0'/%3E%3C/svg%3E");
	}

	.ff-contact-trust__item--offer::after {
		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.7' 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 14 2 2 3.6-3.8'/%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.7' 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 14 2 2 3.6-3.8'/%3E%3C/svg%3E");
	}
}

.ff-contact-trust__item h3 {
	grid-area: title;
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.3;
	hyphens: none;
	overflow-wrap: break-word;
	word-break: normal;
}

.ff-contact-trust__item p {
	grid-area: text;
	margin: 0;
	color: var(--ff-muted);
	font-size: 0.95rem;
	line-height: 1.5;
}

.ff-contact-direct {
	padding: clamp(1.5rem, 2.5vw, 2rem);
	border: 1px solid var(--ff-line);
	border-radius: var(--ff-panel-radius);
	background: var(--ff-mist);
}

.ff-contact-direct .wp-block-buttons,
.ff-contact-direct .wp-block-button,
.ff-contact-direct .wp-block-button__link {
	width: 100%;
}

.ff-contact-direct h2 {
	font-size: clamp(1.4rem, 1.8vw, 1.65rem);
	hyphens: none;
	overflow-wrap: normal;
	word-break: normal;
}

.ff-breadcrumbs {
	padding-block: 1rem;
	border-bottom: 1px solid var(--ff-line);
	background: var(--ff-warm-white);
	color: var(--ff-muted);
	font-size: 0.78rem;
}

.ff-breadcrumbs p,
.ff-breadcrumbs .wp-block-post-title {
	margin: 0;
	font-family: var(--ff-font-body);
	font-size: inherit;
	font-weight: 550;
	letter-spacing: 0;
}

.ff-breadcrumbs a {
	color: var(--ff-navy);
}

.ff-breadcrumb-separator {
	margin-inline: 0.35rem;
	color: var(--ff-brass);
}

.ff-archive-header {
	margin: 0;
	padding-block: clamp(3.75rem, 7vw, 6.5rem);
	background: var(--ff-sand);
}

.ff-archive-header-area {
	background: var(--ff-mist);
}

.ff-archive-header .wp-block-query-title,
.ff-archive-header .wp-block-post-title {
	max-width: 18ch;
	margin: 0;
	color: var(--ff-navy-deep);
	font-size: clamp(2.7rem, 6vw, 5.6rem);
	line-height: 1;
}

.ff-meta {
	margin-top: 1.35rem;
	color: var(--ff-muted);
	font-size: 0.84rem;
}

.ff-directory-row {
	display: grid;
	grid-template-columns: minmax(13rem, 0.55fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(1.5rem, 5vw, 5rem);
	padding-block: clamp(1.5rem, 3vw, 2.5rem);
	border-top: 1px solid var(--ff-line);
}

.ff-directory-row:last-child {
	border-bottom: 1px solid var(--ff-line);
}

.ff-directory-row:not(:has(.ff-directory-media img)) {
	grid-template-columns: minmax(0, 1fr);
}

.ff-directory-media {
	margin: 0;
}

.ff-directory-media img {
	width: 100%;
	border-radius: var(--ff-radius-md);
	object-fit: cover;
}

.ff-directory-copy .wp-block-post-title,
.ff-directory-area .wp-block-post-title {
	margin-top: 0;
	color: var(--ff-navy-deep);
}

.ff-directory-copy .wp-block-post-title a,
.ff-directory-area .wp-block-post-title a {
	text-decoration: none;
}

.ff-directory-copy .wp-block-post-excerpt,
.ff-directory-area .wp-block-post-excerpt {
	color: var(--ff-muted);
}

.ff-directory-area {
	grid-template-columns: minmax(14rem, 0.7fr) minmax(0, 1.3fr);
}

.ff-editorial-image,
.ff-editorial-image img {
	width: 100%;
}

.ff-editorial-image img {
	border-radius: var(--ff-radius-lg);
	object-fit: cover;
}

.ff-prose {
	font-size: 1.05rem;
	line-height: 1.75;
}

.ff-prose > :where(p, ul, ol, h2, h3, h4, blockquote, table) {
	max-width: 48rem;
	margin-inline: auto;
}

.ff-prose > :where(h2, h3, h4) {
	margin-top: 2.25em;
	color: var(--ff-navy-deep);
}

.ff-prose > h2 {
	font-size: clamp(1.8rem, 3vw, 2.65rem);
}

.ff-prose li + li {
	margin-top: 0.55rem;
}

/* Restrained, readable legal pages. The copy itself remains editable post content. */

.ff-legal-page .ff-page-hero {
	padding-block: clamp(2.75rem, 5vw, 4.5rem);
}

.ff-legal-page .ff-breadcrumbs .alignwide {
	min-width: 0;
	flex-wrap: wrap;
	gap: 0.25rem 0.35rem;
}

.ff-legal-page .ff-breadcrumb-current {
	min-width: 0;
	max-width: 100%;
}

.ff-legal-page .ff-page-hero-grid {
	grid-template-columns: minmax(0, 48rem);
	gap: 0;
}

.ff-legal-page .ff-page-hero .ff-page-hero-intro,
.ff-legal-page .ff-page-hero .ff-page-hero-actions,
.ff-legal-page .ff-page-hero .ff-page-hero-media {
	display: none;
}

.ff-legal-page .ff-page-hero-copy .wp-block-post-title {
	max-width: none;
	font-size: clamp(2.25rem, 4vw, 3.5rem);
}

.ff-legal-page .ff-page-content {
	padding-block: clamp(3.5rem, 6vw, 6rem);
}

.ff-legal-page .ff-prose {
	font-size: clamp(1rem, 0.98rem + 0.1vw, 1.0625rem);
	line-height: 1.78;
}

.ff-legal-page .ff-prose > .ff-legal-document {
	width: 100%;
	max-width: 48rem !important;
	margin-inline: auto;
	padding-inline: 0;
}

.ff-legal-page :where(.ff-prose, .ff-legal-document) > :where(p, ul, ol, h2, h3, h4, blockquote, table, .ff-legal-lines) {
	width: 100%;
	max-width: 48rem;
}

.ff-legal-page :where(.ff-prose, .ff-legal-document) > :where(h2, h3, h4) {
	line-height: 1.25;
	text-wrap: balance;
}

.ff-legal-page :where(.ff-prose, .ff-legal-document) > h2 {
	font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);
}

.ff-legal-page :where(.ff-prose, .ff-legal-document) > h2:not(:first-child) {
	margin-top: clamp(2.75rem, 5vw, 4rem);
}

.ff-legal-page :where(.ff-prose, .ff-legal-document) > h3 {
	font-size: clamp(1.2rem, 1.08rem + 0.5vw, 1.5rem);
}

.ff-legal-page :where(.ff-prose, .ff-legal-document) > :first-child {
	margin-top: 0;
}

.ff-legal-page .ff-legal-lines {
	display: grid;
	gap: 0.15rem;
}

.ff-legal-page .ff-legal-lines > p {
	max-width: 100%;
	margin-block: 0 !important;
}

/* Keep long legal contact values (address, phone lines, e-mail, links) inside
   their column on narrow viewports and at increased zoom. */
.ff-legal-page .ff-legal-lines > p,
.ff-legal-page .ff-legal-phone-line {
	overflow-wrap: anywhere;
}

.ff-legal-page .ff-legal-lines a,
.ff-legal-page .ff-legal-phone-line a {
	overflow-wrap: anywhere;
}

@media (max-width: 480px) {
	.ff-legal-page .ff-legal-phone-line {
		display: flex;
		flex-direction: column;
		gap: 0.1rem;
	}
}

.ff-card,
.ff-post-card,
.ff-notice,
.ff-before-after {
	height: 100%;
	padding: clamp(1.35rem, 2.5vw, 2rem);
	border: 1px solid var(--ff-line);
	border-radius: var(--ff-radius-md);
	background: var(--ff-warm-white);
}

.ff-card > :first-child,
.ff-post-card > :first-child {
	margin-top: 0;
}

.ff-card > :last-child,
.ff-post-card > :last-child {
	margin-bottom: 0;
}

.ff-post-card {
	padding: 0;
	overflow: hidden;
}

.ff-post-card > :not(.wp-block-post-featured-image) {
	margin-right: 1.5rem;
	margin-left: 1.5rem;
}

.ff-post-card > :last-child {
	margin-bottom: 1.5rem;
}

.ff-post-card .wp-block-post-featured-image img {
	border-radius: 0;
}

.ff-rule-top,
.is-style-rule-top {
	border-top: 1px solid var(--ff-line);
}

.ff-trust-bar {
	border-block: 1px solid var(--ff-line);
}

.ff-trust-item {
	font-weight: 650;
}

.ff-mosaic {
	display: grid;
	grid-template-columns: 1.35fr 0.8fr 0.8fr;
	gap: 1rem;
}

.ff-mosaic figure {
	margin: 0;
}

.ff-mosaic img {
	width: 100%;
	height: 100%;
	min-height: 18rem;
	border-radius: var(--ff-radius-md);
	object-fit: cover;
}

.ff-quote {
	padding: clamp(2rem, 5vw, 4.5rem);
	border: 0;
	border-left: 4px solid var(--ff-sage);
	background: var(--ff-mist);
	color: var(--ff-navy-deep);
	font-family: var(--ff-font-heading);
	font-size: clamp(1.5rem, 3vw, 2.5rem);
	font-style: normal;
}

.ff-placeholder {
	min-height: 14rem;
	border: 1px dashed var(--ff-sage);
	border-radius: var(--ff-radius-md);
	background: var(--ff-mist);
}

.ff-media-label {
	display: inline-block;
	margin: 0;
	padding: 0.4rem 0.7rem;
	border-radius: 999px;
	background: var(--ff-navy);
	color: var(--ff-warm-white);
	font-size: 0.72rem;
	font-weight: 750;
}

.wp-block-table.is-style-friedofix-table table,
.wp-block-table table {
	border-collapse: collapse;
}

.wp-block-table th {
	background: var(--ff-navy);
	color: var(--ff-warm-white);
	text-align: left;
}

.wp-block-table td,
.wp-block-table th {
	padding: 0.85rem 1rem;
	border-color: var(--ff-line);
}

.wp-block-query-pagination {
	padding-top: 2rem;
	border-top: 1px solid var(--ff-line);
}

.wp-block-query-pagination-numbers {
	display: flex;
	gap: 0.35rem;
}

.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	min-width: 2.75rem;
	min-height: 2.75rem;
	align-items: center;
	justify-content: center;
	border-radius: var(--ff-radius-sm);
}

.wp-block-query-pagination .current {
	background: var(--ff-navy);
	color: var(--ff-warm-white);
}

/* Editorial subpage system */

.ff-page-hero-intro,
.ff-page-hero .ff-page-hero-actions {
	display: none;
}

/* No self-referencing call to action: the form itself is directly below the
   hero, so the button would only repeat the page the visitor is already on. */
.ff-contact-page .ff-page-hero-actions,
.ff-contact-page .ff-page-hero-intro {
	display: none;
}

/* The contact page carries no hero image, so its hero and the lead block stay
   noticeably tighter than on the editorial subpages. The generic section
   padding above the content would otherwise stack on top of the lead spacing
   and push the form far below the fold. */
.ff-contact-page .ff-page-hero {
	padding-block: clamp(2.25rem, 4vw, 3.25rem);
}

.ff-contact-page .ff-page-content {
	padding-block: 0 clamp(2.75rem, 5vw, 4.25rem);
}

.ff-contact-page .ff-content-lead {
	position: relative;
	left: 50%;
	width: min(var(--ff-container-max), calc(100vw - (2 * var(--ff-container-gutter))));
	max-width: none !important;
	padding-block: clamp(2.25rem, 4vw, 3.5rem) 0;
	transform: translateX(-50%);
}

.ff-contact-page .ff-content-lead .ff-lead {
	max-width: 52rem;
}

.ff-subpage-template .ff-page-hero-intro,
.ff-subpage-template .ff-page-hero-actions {
	display: flex;
}

.ff-subpage-template .ff-page-hero-intro {
	max-width: 38rem;
	margin-top: 1.5rem;
	color: var(--ff-muted);
	font-size: clamp(1.05rem, 1.4vw, 1.22rem);
	line-height: 1.6;
}

/* The staircase page has no curated excerpt; avoid duplicating its body copy in the hero. */
.ff-subpage-template--staircase .ff-page-hero-intro {
	display: none;
}

.ff-subpage-template .ff-page-hero-intro p {
	margin: 0;
}

.ff-subpage-template .ff-page-hero-actions {
	margin-top: var(--ff-space-lg);
}

.ff-subpage-template .ff-page-content {
	padding-block: 0;
}

.ff-subpage-template .ff-prose,
.ff-subpage-template .ff-prose > .ff-subpage,
.ff-subpage {
	width: 100%;
	max-width: none !important;
}

.ff-subpage {
	margin: 0;
	font-size: clamp(1rem, 0.97rem + 0.12vw, 1.075rem);
	line-height: 1.72;
}

.ff-subpage > * {
	margin-block: 0;
}

/* Each subpage block carries its own vertical section padding. Where two plain
   blocks follow each other, both paddings add up to a band of empty space
   between the intro and the first numbered entry. The following block drops its
   top padding, so one section rhythm separates them instead of two. Blocks with
   their own surface or rule keep their padding: there the space is what gives
   the band its shape. */
.ff-subpage
	> :is(.ff-subpage-intro, .ff-commercial-scope, .ff-inline-process, .ff-scope-boundaries, .ff-content-section, .ff-quality-contact)
	+ :is(.ff-commercial-scope, .ff-inline-process, .ff-scope-boundaries, .ff-quality-contact) {
	padding-block-start: 0;
}

.ff-subpage > .alignwide {
	width: min(var(--ff-container-max), calc(100vw - (2 * var(--ff-container-gutter))));
	max-width: none !important;
	margin-inline: auto;
}

.ff-subpage .alignwide.ff-area-landscape__inner {
	width: min(var(--ff-container-max), 100%);
	max-width: none !important;
	margin-inline: auto;
}

.ff-subpage > .alignfull {
	width: 100%;
	max-width: none !important;
}

.ff-subpage :where(h2, h3) {
	max-width: 100%;
	margin-top: 0;
	color: var(--ff-navy-deep);
	hyphens: auto;
	overflow-wrap: anywhere;
}

.ff-subpage h2 {
	font-size: clamp(1.9rem, 3.2vw, 3.15rem);
	line-height: 1.08;
}

.ff-subpage h3 {
	font-size: clamp(1.3rem, 1.8vw, 1.75rem);
	line-height: 1.18;
}

.ff-subpage :where(p, li) {
	max-width: var(--ff-reading-max);
}

/* Shared service-page flow and panel system. */

.ff-service-detail-page :where(.ff-content-lead, .ff-content-section, .ff-content-band, .ff-content-faq, .ff-related-links, .ff-commercial-branches, .ff-commercial-scope, .ff-commercial-figure) {
	width: min(var(--ff-container-max), calc(100vw - (2 * var(--ff-container-gutter))));
	max-width: none !important;
	margin-inline: auto !important;
}

.ff-service-detail-page .ff-content-lead {
	padding-top: var(--ff-section-space);
}

.ff-service-detail-page :where(.ff-content-section, .ff-content-band, .ff-content-faq) {
	margin-top: var(--ff-section-space) !important;
}

.ff-service-detail-page :where(.ff-commercial-scope, .ff-commercial-figure) + .ff-content-section {
	margin-top: 0 !important;
}

.ff-content-split {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(18rem, 0.92fr);
	align-items: start;
	gap: var(--ff-space-xl);
}

.ff-content-split > * {
	min-width: 0;
}

.ff-content-note,
.ff-quality-bound {
	padding: var(--ff-space-lg);
	border: 0;
	border-radius: var(--ff-panel-radius);
	background: var(--ff-mist);
}

.ff-content-note > :first-child,
.ff-quality-bound > :first-child,
.ff-content-band > :first-child {
	margin-top: 0;
}

.ff-content-note > :last-child,
.ff-quality-bound > :last-child,
.ff-content-band > :last-child {
	margin-bottom: 0;
}

.ff-content-note > :where(h2, h3) + *,
.ff-quality-bound > :where(h2, h3) + *,
.ff-content-band > :where(h2, h3) + * {
	margin-top: var(--ff-space-md);
}

.ff-content-band {
	padding: var(--ff-space-lg) var(--ff-space-lg) var(--ff-space-lg) clamp(1.5rem, 3vw, 2.5rem);
	border: 0;
	border-left: 4px solid var(--ff-sage);
	border-radius: 0 var(--ff-panel-radius) var(--ff-panel-radius) 0;
	background: rgb(220 230 222 / 42%);
}

.ff-service-detail-page :where(.ff-content-lead, .ff-content-section:not(.ff-content-split), .ff-content-band, .ff-content-faq).is-layout-constrained > :where(h2, h3, details, .ff-content-steps) {
	width: 100%;
	max-width: none;
	margin-right: auto !important;
	margin-left: 0 !important;
}

.ff-service-detail-page :where(.ff-content-lead, .ff-content-section:not(.ff-content-split), .ff-content-band).is-layout-constrained > :where(p, ul, ol) {
	width: min(100%, var(--ff-reading-max));
	max-width: var(--ff-reading-max);
	margin-right: auto !important;
	margin-left: 0 !important;
}

.ff-service-detail-page .ff-content-steps {
	width: 100%;
	max-width: none !important;
	margin-inline: 0 !important;
}

.ff-service-detail-page .ff-content-section > h2 + .ff-content-steps,
.ff-service-detail-page .ff-content-faq > h2 + details {
	margin-top: var(--ff-space-lg);
}

.ff-content-faq details {
	margin: 0;
	border-top: 1px solid var(--ff-line);
}

.ff-content-faq details:last-child {
	border-bottom: 1px solid var(--ff-line);
}

.ff-content-faq summary {
	min-height: 3.5rem;
	padding: 1rem 2.75rem 1rem 0;
	color: var(--ff-navy-deep);
	cursor: pointer;
	font-family: var(--ff-font-heading);
	font-weight: 680;
}

.ff-content-faq details p {
	padding: 0 2.75rem var(--ff-space-md) 0;
	color: var(--ff-muted);
}

.ff-subpage-intro {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	align-items: end;
	gap: clamp(2rem, 6vw, 7rem);
	padding-block: clamp(3rem, 5.5vw, 5rem);
}

.ff-subpage-intro > * {
	min-width: 0;
	margin: 0;
}

.ff-subpage-intro > .wp-block-buttons {
	grid-column: 2;
}

.ff-subpage-intro h2 {
	max-width: 16ch;
}

/*
 * Luft zwischen der Ziffernmarke und ihrer Überschrift.
 *
 * Der Kreis stand bündig auf der Überschrift: gemessen 0 px zwischen beiden
 * Boxen, weil hier zuvor `margin: 0` jeden Blockabstand entfernte und die
 * folgende Überschrift ihrerseits ohne `margin-top` beginnt. Der sichtbare
 * Rest war allein die Oberlänge der Schrift. Gilt für alle Ausprägungen —
 * Kreis wie Pille — und damit für jede Seite, die den Index verwendet.
 */
.ff-service-index,
.ff-area-kicker {
	margin: 0 0 0.75rem;
	color: var(--ff-navy);
	font-size: 0.75rem;
	font-weight: 780;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Der Kicker behält seinen bündigen Abschluss. */
.ff-area-kicker {
	margin-block-end: 0;
}

.ff-page-cta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: clamp(2rem, 6vw, 5rem);
	margin-block: clamp(3rem, 5.5vw, 5rem) !important;
	padding: clamp(2rem, 5vw, 4.5rem);
	border-radius: 26px 26px 58px;
	background: var(--ff-navy-deep);
	color: var(--ff-warm-white);
}

.ff-page-cta > * {
	min-width: 0;
	margin: 0;
}

.ff-page-cta h2,
.ff-page-cta p,
.ff-page-cta .ff-eyebrow {
	color: inherit;
}

.ff-page-cta h2 {
	max-width: 18ch;
	margin-bottom: 0.75rem;
}

.ff-page-cta .ff-eyebrow::before {
	background: var(--ff-sage-soft);
}

.ff-content-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.25rem, 3vw, 2.5rem);
	margin-top: 2rem;
}

.ff-content-steps > * {
	min-width: 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--ff-line);
}

.ff-content-steps .ff-step-number {
	position: static;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: 1rem;
	box-shadow: none;
}

.ff-content-steps h3 {
	font-size: clamp(1.05rem, 1.4vw, 1.25rem);
	letter-spacing: -0.02em;
	hyphens: auto;
	overflow-wrap: anywhere;
}

.ff-page-cta .wp-block-button__link {
	border-color: var(--ff-warm-white);
	background: var(--ff-warm-white);
	color: var(--ff-navy-deep);
}

.ff-page-cta .wp-block-button__link:hover {
	border-color: var(--ff-sage-soft);
	background: var(--ff-sage-soft);
	color: var(--ff-navy-deep);
}

.ff-related-links {
	gap: 1rem 2rem;
	margin-top: var(--ff-space-xl) !important;
	padding-top: 1.5rem;
	border-top: 1px solid var(--ff-line);
}

.ff-related-links p {
	margin: 0;
}

.ff-related-links a {
	display: inline-flex;
	min-height: 2.75rem;
	align-items: center;
}

.ff-subpage-faq {
	display: grid;
	grid-template-columns: minmax(15rem, 0.75fr) minmax(0, 1.25fr);
	align-items: start;
	gap: clamp(2.5rem, 7vw, 7rem);
	padding-block: clamp(3rem, 5.5vw, 5rem);
}

.ff-subpage-faq > * {
	min-width: 0;
	margin: 0;
}

.ff-subpage-faq__intro h2 {
	max-width: 12ch;
}

.ff-subpage-faq__items details {
	margin: 0;
	border-top: 1px solid var(--ff-line);
}

.ff-subpage-faq__items details:last-child {
	border-bottom: 1px solid var(--ff-line);
}

.ff-subpage-faq__items summary {
	position: relative;
	min-height: 3.5rem;
	padding: 1.15rem 3rem 1.15rem 0;
	color: var(--ff-navy-deep);
	cursor: pointer;
	font-family: var(--ff-font-heading);
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	font-weight: 680;
	list-style: none;
}

.ff-subpage-faq__items summary::-webkit-details-marker {
	display: none;
}

.ff-subpage-faq__items summary::after {
	position: absolute;
	top: 50%;
	right: 0;
	color: var(--ff-navy);
	content: "+";
	font-family: var(--ff-font-body);
	font-size: 1.5rem;
	font-weight: 450;
	transform: translateY(-50%);
}

.ff-subpage-faq__items details[open] summary::after {
	content: "−";
}

.ff-subpage-faq__items details p {
	margin: 0;
	padding: 0 3rem 1.4rem 0;
	color: var(--ff-muted);
}

/* Individual subpage heroes */

.ff-subpage-template .ff-page-hero-copy .wp-block-post-title {
	max-width: 16ch;
}

.ff-subpage-template--services .ff-page-hero {
	background: var(--ff-warm-white);
}

.ff-subpage-template--services .ff-page-hero-grid {
	grid-template-columns: minmax(0, 0.82fr) minmax(min(24rem, 32vw), 1.18fr);
}

.ff-subpage-template--services .ff-page-hero-media img {
	aspect-ratio: 5 / 4;
	border-radius: 28px 70px 28px 28px;
}

.ff-subpage-template--managers .ff-page-hero {
	background: var(--ff-navy-deep);
}

.ff-subpage-template--managers .ff-page-hero-grid {
	grid-template-columns: minmax(24rem, 1.08fr) minmax(0, 0.92fr);
}

.ff-subpage-template--managers .ff-page-hero-copy {
	grid-column: 2;
	grid-row: 1;
}

.ff-subpage-template--managers .ff-page-hero-media {
	grid-column: 1;
	grid-row: 1;
}

.ff-subpage-template--managers .ff-page-hero-copy .wp-block-post-title,
.ff-subpage-template--managers .ff-page-hero-copy .ff-eyebrow,
.ff-subpage-template--managers .ff-page-hero-intro {
	color: var(--ff-warm-white);
}

.ff-subpage-template--managers .ff-page-hero-copy .ff-eyebrow::before {
	background: var(--ff-sage-soft);
}

.ff-subpage-template--managers .ff-page-hero-media img {
	aspect-ratio: 5 / 4;
	border-radius: 58px 24px 24px;
}

.ff-subpage-template--managers .ff-page-hero-actions .wp-block-button__link {
	border-color: var(--ff-warm-white);
	background: var(--ff-warm-white);
	color: var(--ff-navy-deep);
}

.ff-subpage-template--quality .ff-page-hero {
	background: var(--ff-mist);
}

.ff-subpage-template--quality .ff-page-hero-grid {
	grid-template-columns: minmax(18rem, 0.62fr) minmax(0, 1.38fr);
}

.ff-subpage-template--quality .ff-page-hero-copy {
	grid-column: 2;
	grid-row: 1;
}

.ff-subpage-template--quality .ff-page-hero-media {
	grid-column: 1;
	grid-row: 1;
}

.ff-subpage-template--quality .ff-page-hero-media img {
	aspect-ratio: 3 / 4;
	border-radius: 70px 28px 28px;
}

.ff-subpage-template--quality .ff-page-hero-intro {
	color: var(--ff-navy);
}

.ff-subpage-template--area .ff-page-hero-grid {
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2.5rem, 5vw, 4rem);
}

.ff-subpage-template--area .ff-page-hero-copy {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.72fr);
	align-items: end;
	gap: 1.25rem clamp(2rem, 7vw, 7rem);
}

.ff-subpage-template--area .ff-page-hero-copy .ff-eyebrow,
.ff-subpage-template--area .ff-page-hero-copy .wp-block-post-title {
	grid-column: 1;
}

.ff-subpage-template--area .ff-page-hero-intro,
.ff-subpage-template--area .ff-page-hero-actions {
	grid-column: 2;
}

.ff-subpage-template--area .ff-page-hero-intro {
	grid-row: 1 / span 2;
	align-self: end;
	margin: 0;
}

.ff-subpage-template--area .ff-page-hero-actions {
	align-self: start;
	margin-top: 0;
}

.ff-subpage-template--area .ff-page-hero-media img {
	aspect-ratio: 16 / 6;
	border-radius: 28px 28px 70px;
	object-position: center 48%;
}

.ff-subpage-template--about .ff-page-hero {
	background: var(--ff-warm-white);
}

.ff-subpage-template--about .ff-page-hero-grid {
	grid-template-columns: minmax(17rem, 0.62fr) minmax(0, 1.38fr);
}

.ff-subpage-template--about .ff-page-hero-copy {
	grid-column: 2;
	grid-row: 1;
}

.ff-subpage-template--about .ff-page-hero-media {
	grid-column: 1;
	grid-row: 1;
}

.ff-subpage-template--about .ff-page-hero-media img {
	aspect-ratio: 3 / 5;
	border-radius: 24px 72px 24px 24px;
}

/* Services */

.ff-services-intro {
	padding-inline: 0;
}

.ff-service-register {
	display: grid;
	grid-template-columns: minmax(12rem, 0.35fr) minmax(0, 1.65fr);
	align-items: start;
	gap: clamp(2rem, 6vw, 6rem);
	padding-block: 1.5rem;
	border-block: 1px solid var(--ff-line);
}

.ff-service-register h2 {
	margin: 0;
	font-size: 1rem;
	letter-spacing: 0;
}

.ff-service-register ul {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.65rem clamp(1rem, 2.5vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ff-service-register li {
	min-width: 0;
	max-width: 100%;
}

.ff-service-register li + li,
.ff-place-list li + li {
	margin-top: 0;
}

.ff-service-register a {
	display: block;
	min-height: 2.5rem;
	padding-block: 0.2rem;
	color: var(--ff-navy);
	font-weight: 650;
}

.ff-service-core {
	display: grid;
	grid-template-columns: minmax(9rem, 0.35fr) minmax(0, 1.65fr);
	gap: clamp(2rem, 7vw, 7rem);
	padding-block: clamp(5rem, 10vw, 9rem);
}

.ff-service-core h2 {
	max-width: 16ch;
}

.ff-service-core > .ff-service-index {
	display: inline-flex;
	width: max-content;
	max-width: 100%;
	height: auto;
	min-height: 2.5rem;
	align-items: center;
	justify-content: center;
	justify-self: start;
	padding: 0.55rem 0.8rem;
	line-height: 1.15;
	white-space: nowrap;
}

.ff-service-detail {
	display: grid;
	grid-template-columns: 4rem minmax(14rem, 0.78fr) minmax(0, 1.22fr);
	align-items: baseline;
	gap: 1rem clamp(1.5rem, 4vw, 4rem);
	padding-block: clamp(1.75rem, 4vw, 3rem);
	border-top: 1px solid var(--ff-line);
}

.ff-service-detail:last-of-type {
	border-bottom: 1px solid var(--ff-line);
}

.ff-service-detail h3,
.ff-service-detail p {
	margin-block: 0;
}

.ff-service-detail--offset {
	padding-left: 0;
}

.ff-scope-boundaries {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 4vw, 4rem);
	padding-block: clamp(5rem, 9vw, 8rem);
}

.ff-scope-boundary {
	min-width: 0;
	margin: 0;
	padding-top: 1.75rem;
	border-top: 3px solid var(--ff-navy);
}

.ff-scope-boundary--regular {
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border-top: 0;
	border-radius: 20px 20px 46px;
	background: var(--ff-mist);
}

.ff-scope-boundary h2 {
	font-size: clamp(1.45rem, 2.1vw, 2rem);
}

.ff-inline-process {
	display: grid;
	grid-template-columns: minmax(15rem, 0.7fr) minmax(0, 1.3fr);
	gap: clamp(2.5rem, 7vw, 7rem);
	padding-block: clamp(4rem, 8vw, 7rem);
}

.ff-inline-process__steps > * {
	display: grid;
	grid-template-columns: minmax(10rem, 0.6fr) minmax(0, 1.4fr);
	gap: 1.5rem;
	padding-block: 1.25rem;
	border-top: 1px solid var(--ff-line);
}

.ff-inline-process__steps > :first-child {
	padding-top: 0;
	border-top: 0;
}

.ff-inline-process__steps > *:last-child {
	border-bottom: 1px solid var(--ff-line);
}

.ff-inline-process__steps p {
	margin: 0;
}

/* House management */

.ff-managers-intro {
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.ff-b2b-principles,
.ff-b2b-process,
.ff-area-factors,
.ff-about-values,
.ff-about-method {
	display: grid;
	grid-template-columns: minmax(15rem, 0.68fr) minmax(0, 1.32fr);
	align-items: start;
	gap: clamp(2.5rem, 7vw, 7rem);
	padding-block: clamp(3rem, 5.5vw, 5rem);
}

.ff-b2b-principles__list > *,
.ff-b2b-process__rows > *,
.ff-area-factors__list > *,
.ff-about-values__list > * {
	display: grid;
	grid-template-columns: minmax(12rem, 0.7fr) minmax(0, 1.3fr);
	gap: clamp(1rem, 4vw, 3rem);
	padding-block: 1.35rem;
	border-top: 1px solid var(--ff-line);
}

.ff-b2b-principles__list > *:last-child,
.ff-b2b-process__rows > *:last-child,
.ff-area-factors__list > *:last-child,
.ff-about-values__list > *:last-child {
	border-bottom: 1px solid var(--ff-line);
}

.ff-b2b-principles__list p,
.ff-b2b-process__rows :where(p, h3),
.ff-area-factors__list p,
.ff-about-values__list :where(p, h3) {
	margin: 0;
}

.ff-b2b-process__rows > * {
	grid-template-columns: 3rem minmax(10rem, 0.55fr) minmax(0, 1.45fr);
}

.ff-b2b-operations {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.8fr);
	gap: clamp(2.5rem, 8vw, 8rem);
	padding: clamp(3rem, 7vw, 6rem);
	background: var(--ff-sand);
}

.ff-b2b-operations__statement h2 {
	max-width: 17ch;
	overflow-wrap: anywhere;
}

.ff-b2b-operations__details {
	padding-left: 2rem;
	border-left: 1px solid var(--ff-brass);
}

.ff-b2b-ledger {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.85fr);
	gap: clamp(2.5rem, 8vw, 8rem);
	padding-block: clamp(3rem, 5.5vw, 5rem);
}

.ff-b2b-ledger__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ff-b2b-ledger__list li {
	padding-block: 1rem;
	border-top: 1px solid var(--ff-line);
	font-weight: 650;
}

.ff-b2b-ledger__list li:last-child {
	border-bottom: 1px solid var(--ff-line);
}

.ff-b2b-assurance {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.5rem, 4vw, 4rem);
	padding-block: clamp(3rem, 6vw, 5rem);
}

.ff-b2b-assurance > * {
	margin: 0;
	padding-top: 1.75rem;
	border-top: 3px solid var(--ff-navy);
}

.ff-b2b-assurance > :first-child {
	padding: clamp(1.75rem, 4vw, 3rem);
	border: 0;
	border-radius: 22px 22px 48px;
	background: var(--ff-mist);
}

/* Quality promise */

.ff-quality-statement {
	padding-block: clamp(5rem, 10vw, 9rem);
	background: var(--ff-navy-deep);
	color: var(--ff-warm-white);
}

.ff-quality-statement h2,
.ff-quality-statement .ff-eyebrow,
.ff-quality-statement p {
	color: inherit;
}

.ff-quality-statement .ff-eyebrow::before {
	background: var(--ff-sage-soft);
}

.ff-quality-statement h2 {
	font-size: clamp(2.25rem, 5vw, 5rem);
}

.ff-quality-statement__text {
	max-width: 30ch !important;
	margin-top: clamp(2rem, 5vw, 4rem);
	font-family: var(--ff-font-heading);
	font-size: clamp(1.4rem, 2.6vw, 2.35rem);
	font-weight: 520;
	letter-spacing: -0.025em;
	line-height: 1.35;
}

.ff-quality-response {
	display: grid;
	grid-template-columns: minmax(15rem, 0.65fr) minmax(0, 1.35fr);
	gap: clamp(2.5rem, 7vw, 7rem);
	padding-block: clamp(5rem, 9vw, 8rem);
}

.ff-quality-response__steps {
	position: relative;
}

.ff-quality-response__steps::before {
	position: absolute;
	top: 1rem;
	bottom: 1rem;
	left: 1.75rem;
	width: 1px;
	background: var(--ff-line);
	content: "";
}

.ff-quality-response__steps > * {
	position: relative;
	display: grid;
	grid-template-columns: 3.5rem minmax(10rem, 0.65fr) minmax(0, 1.35fr);
	align-items: center;
	gap: 1rem 1.5rem;
	padding-block: 1.2rem;
}

.ff-quality-response__steps :where(p, h3) {
	margin: 0;
}

.ff-quality-number {
	position: relative;
	z-index: 1;
	display: grid;
	width: 3.5rem;
	height: 3.5rem;
	place-items: center;
	border: 1px solid var(--ff-navy);
	border-radius: 50%;
	background: var(--ff-warm-white);
	color: var(--ff-navy);
	font-size: 0.78rem;
	font-weight: 780;
}

.ff-quality-scope {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2rem, 6vw, 6rem);
	padding-block: clamp(4rem, 8vw, 7rem);
	border-block: 1px solid var(--ff-line);
}

.ff-quality-scope__included {
	padding-right: clamp(0rem, 4vw, 4rem);
}

.ff-quality-scope__separate {
	padding-left: clamp(0rem, 4vw, 4rem);
	border-left: 1px solid var(--ff-line);
}

.ff-quality-contact {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(2.5rem, 7vw, 7rem);
	padding-block: clamp(4rem, 8vw, 7rem);
}

/* Service area */

.ff-area-intro {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.ff-area-landscape {
	padding-block: clamp(4rem, 8vw, 7rem);
	background: var(--ff-mist);
}

.ff-area-landscape__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 0.65fr);
	align-items: end;
	gap: clamp(2.5rem, 8vw, 8rem);
}

.ff-area-landscape__koeln h2 {
	margin-bottom: 1.5rem;
	font-size: clamp(4rem, 14vw, 11rem);
	font-weight: 620;
	letter-spacing: -0.075em;
	line-height: 0.92;
}

.ff-area-landscape__note {
	min-width: 0;
	padding: var(--ff-space-lg);
	border: 0;
	border-left: 4px solid var(--ff-sage);
	border-radius: 0 var(--ff-panel-radius) var(--ff-panel-radius) 0;
	background: rgb(250 248 243 / 64%);
}

.ff-area-landscape__note :where(p, a) {
	min-width: 0;
	overflow-wrap: anywhere;
}

.ff-area-surroundings {
	display: grid;
	grid-template-columns: minmax(15rem, 0.65fr) minmax(0, 1.35fr);
	gap: clamp(2.5rem, 7vw, 7rem);
	padding-block: clamp(5rem, 9vw, 8rem);
}

.ff-place-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-content: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ff-place-list li {
	min-width: 0;
	max-width: none;
	padding: 0.55rem 0;
	color: var(--ff-navy-deep);
	font-family: var(--ff-font-heading);
	font-size: clamp(1.35rem, 2.6vw, 2.4rem);
	font-weight: 620;
	letter-spacing: -0.035em;
	line-height: 1.15;
	hyphens: auto;
	overflow-wrap: anywhere;
}

.ff-place-list li:nth-child(even) {
	padding-left: clamp(1rem, 2.5vw, 2rem);
	border-left: 1px solid var(--ff-line);
}

.ff-area-factors__list > * {
	grid-template-columns: minmax(11rem, 0.65fr) minmax(0, 1.35fr);
}

/* About */

.ff-about-intro {
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.ff-about-intro h2 {
	max-width: 18ch;
	font-size: clamp(1.9rem, 3vw, 3rem);
	overflow-wrap: normal;
}

.ff-about-statement {
	padding-block: clamp(5rem, 10vw, 9rem);
	background: var(--ff-sand);
}

.ff-about-statement p {
	box-sizing: border-box;
	max-width: 22ch !important;
	margin-block: 0;
	padding-left: clamp(2rem, 4vw, 4rem);
	border-left: 3px solid var(--ff-sage);
	color: var(--ff-navy-deep);
	font-family: var(--ff-font-heading);
	font-size: clamp(2rem, 4.5vw, 4.5rem);
	font-weight: 560;
	letter-spacing: -0.045em;
	line-height: 1.18;
}

.ff-about-values__list > * {
	grid-template-columns: minmax(12rem, 0.8fr) minmax(0, 1.2fr);
}

.ff-about-story {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 7vw, 7rem);
	padding-block: clamp(4rem, 8vw, 7rem);
	border-block: 1px solid var(--ff-line);
}

.ff-about-story__personal {
	padding: clamp(1.75rem, 4vw, 3rem);
	border-radius: 22px 22px 48px;
	background: var(--ff-mist);
}

.ff-about-method__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 2.5rem;
}

.ff-about-method__list p {
	margin: 0;
	padding-block: 1.25rem;
	border-top: 1px solid var(--ff-line);
}

.ff-about-links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2rem, 6vw, 6rem);
	padding-block: clamp(3.5rem, 7vw, 6rem);
}

.ff-about-links > * {
	margin: 0;
	padding-top: 1.75rem;
	border-top: 3px solid var(--ff-navy);
}

.single-post .ff-archive-header .wp-block-post-title {
	max-width: 22ch;
	font-size: clamp(1.55rem, 7.8vw, 4.9rem);
	hyphens: auto;
	overflow-wrap: anywhere;
	word-break: normal;
}

.ff-meta-item {
	gap: 0.35rem;
}

.ff-meta-item--modified:not(:has(.wp-block-post-date)) {
	display: none;
}

.ff-meta-item p,
.ff-meta-item .wp-block-post-date,
.ff-meta-item .wp-block-post-author-name,
.ff-meta-item .wp-block-site-title {
	margin: 0;
}

.ff-article-deck {
	max-width: 48rem;
	margin-top: 1.75rem;
	color: var(--ff-muted);
	font-size: clamp(1.1rem, 1.8vw, 1.35rem);
	line-height: 1.6;
}

.ff-article-summary,
.ff-article-section,
.ff-article-checklist,
.ff-article-next {
	max-width: 48rem;
	margin-inline: auto;
}

.ff-article-summary {
	margin-bottom: clamp(3rem, 6vw, 5rem);
	padding: clamp(1.75rem, 4vw, 3rem);
	border-left: 4px solid var(--ff-sage);
	background: var(--ff-mist);
}

.ff-article-section {
	margin-block: clamp(3rem, 6vw, 5rem);
}

.ff-article-checklist {
	margin-block: clamp(3rem, 6vw, 5rem);
	padding: clamp(1.75rem, 4vw, 3rem);
	border-radius: 20px 20px 44px;
	background: var(--ff-sand);
}

.ff-article-next {
	margin-top: clamp(3rem, 6vw, 5rem);
	padding-top: 2rem;
	border-top: 1px solid var(--ff-line);
}

/* Content is always visible. JavaScript may add non-essential enhancements only. */

.ff-reveal,
.ff-has-js .ff-reveal,
.ff-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Commercial expansion */

.ff-home-pillars {
	background: var(--ff-sand);
}

.ff-home-pillars__heading {
	max-width: 62rem;
}

.ff-home-pillars__heading h2,
.ff-home-commercial__copy h2,
.ff-home-audiences__heading h2 {
	margin-top: 0;
	color: var(--ff-navy-deep);
	font-size: clamp(2.2rem, 4vw, 3.75rem);
}

.ff-home-pillars__grid,
.ff-service-pillars,
.ff-commercial-branches {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.5rem, 4vw, 4rem);
}

.ff-home-pillars__grid {
	margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

.ff-home-pillar,
.ff-service-pillar {
	min-width: 0;
	padding: clamp(2rem, 4vw, 3.5rem);
	border: 1px solid rgb(15 39 66 / 14%);
	border-radius: var(--ff-panel-radius);
	background: rgb(250 248 243 / 72%);
}

.ff-home-pillar--commercial,
.ff-service-pillar--commercial {
	background: var(--ff-sage-soft);
}

.ff-home-pillar .ff-service-index,
.ff-service-pillar .ff-service-index,
.ff-commercial-branches .ff-service-index,
.ff-commercial-scope .ff-service-index {
	display: inline-flex;
	width: auto;
	height: auto;
	min-height: 2.5rem;
	padding: 0.55rem 0.8rem;
	white-space: nowrap;
}

.ff-home-pillar h3,
.ff-service-pillar h2 {
	margin-top: 1.5rem;
	color: var(--ff-navy-deep);
	font-size: clamp(1.65rem, 2.8vw, 2.65rem);
}

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

.ff-home-commercial__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
}

.ff-home-commercial__media {
	grid-column: 1 / span 7;
	margin: 0;
}

.ff-home-commercial__media img {
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: 28px 72px 28px 28px;
	object-fit: cover;
	object-position: 64% 52%;
}

.ff-home-commercial__copy {
	grid-column: 8 / -1;
}

.ff-home-commercial__copy .wp-block-buttons {
	display: flex;
	align-items: stretch;
	gap: var(--ff-space-xs);
	margin-top: 1.75rem;
}

.ff-home-commercial__copy .wp-block-button.is-style-text-link .wp-block-button__link {
	min-height: 3.15rem;
	padding: 0.82rem 1.35rem;
	border: 1px solid var(--ff-navy);
	border-radius: 14px;
	background: transparent;
	color: var(--ff-navy);
}

.ff-home-commercial__copy .wp-block-button.is-style-text-link .wp-block-button__link::after {
	display: none;
}

.ff-home-commercial__copy .wp-block-button.is-style-text-link .wp-block-button__link:hover {
	background: var(--ff-navy);
	color: var(--ff-warm-white);
	transform: translateY(-1px);
}

.ff-home-audiences {
	background: var(--ff-mist);
}

.ff-home-audiences__heading {
	max-width: 54rem;
}

.ff-home-audiences__list,
.ff-commercial-scope {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 4vw, 4rem);
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.ff-home-audiences__list > *,
.ff-commercial-scope > * {
	min-width: 0;
	padding-top: 1.5rem;
	border-top: 2px solid var(--ff-navy);
}

.ff-home-audiences__list h3,
.ff-commercial-scope h3 {
	color: var(--ff-navy-deep);
	font-size: clamp(1.35rem, 2vw, 1.85rem);
}

.ff-service-pillars,
.ff-commercial-branches,
.ff-commercial-scope {
	padding-block: clamp(4rem, 8vw, 7rem);
}

.ff-service-pillar {
	min-height: 100%;
}

.ff-commercial-branches > * {
	min-width: 0;
	padding: clamp(1.75rem, 3vw, 2.75rem);
	border-left: 1px solid var(--ff-line);
}

.ff-commercial-branches > :first-child {
	border-left: 0;
}

.ff-commercial-branches h2,
.ff-commercial-branches h3 {
	color: var(--ff-navy-deep);
	font-size: clamp(1.55rem, 2.5vw, 2.35rem);
}

.ff-commercial-figure {
	width: min(78rem, calc(100vw - (2 * var(--ff-container-gutter))));
	margin-inline: auto;
	margin-block: clamp(1rem, 3vw, 2rem) clamp(4rem, 8vw, 7rem);
}

.ff-commercial-figure img {
	width: 100%;
	aspect-ratio: 16 / 8.5;
	border-radius: 28px 28px 72px;
	object-fit: cover;
	object-position: 66% 55%;
}

.ff-commercial-scope {
	margin-top: 0;
}

.ff-commercial-boundary {
	border-left: 4px solid var(--ff-sage);
}

.ff-subpage-template--commercial .ff-page-hero-media img {
	object-position: 70% 53%;
}

.ff-subpage-template--office .ff-page-hero-media img {
	object-position: 72% 52%;
}

.ff-subpage-template--retail .ff-page-hero-media img {
	object-position: 72% 54%;
}

.ff-subpage-template--retail .ff-page-hero-copy .wp-block-post-title {
	max-width: none;
	overflow-wrap: normal;
}

@media (min-width: 1101px) {
	.ff-subpage-template--retail .ff-page-hero-grid {
		grid-template-columns: minmax(0, 1.22fr) minmax(min(20rem, 26vw), 0.78fr);
		gap: clamp(2rem, 4vw, 4rem);
	}

	.ff-subpage-template--retail .ff-page-hero-copy .wp-block-post-title {
		font-size: clamp(2.7rem, 3.8vw, 3.45rem);
	}
}

.ff-footer-nav-groups {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.75rem;
}

.ff-primary-nav .wp-block-navigation__submenu-container {
	min-width: 18rem !important;
	padding: 0.6rem !important;
	border: 1px solid var(--ff-line) !important;
	border-radius: 14px;
	background: var(--ff-warm-white) !important;
	box-shadow: var(--ff-shadow-soft);
}

.ff-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.65rem 0.75rem;
	font-size: 0.9rem;
}

@media (min-width: 782px) {
	.ff-footer-links .wp-block-navigation__container {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.3rem 1.25rem;
	}

	.ff-footer-nav-groups .ff-footer-links .wp-block-navigation__container {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 1180px) {
	.ff-contact-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ff-space-xl);
	}
}

@media (max-width: 1100px) {
	.ff-page-hero-grid,
	.ff-detail-hero-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.5rem;
	}

	.ff-page-hero-copy .wp-block-post-title,
	.ff-detail-hero-copy .wp-block-post-title {
		max-width: 20ch;
	}
}

@media (max-width: 1099px) {
	:root {
		--ff-header-clearance: 5.4rem;
	}

	.ff-contact-strip,
	.wp-block-buttons.ff-header-cta {
		display: none;
	}

	.ff-header-main {
		min-height: 4.4rem;
	}

	/* Mockup form: a calm white rounded square holding the menu glyph. */
	.ff-primary-nav .wp-block-navigation__responsive-container-open {
		display: flex;
		width: 2.85rem;
		height: 2.85rem;
		align-items: center;
		justify-content: center;
		border: 1px solid var(--ff-line-warm);
		border-radius: 14px;
		background: var(--ff-surface);
		box-shadow: 0 4px 14px rgb(8 28 48 / 6%);
		color: var(--ff-navy-deep);
		transition: border-color var(--ff-transition) ease, box-shadow var(--ff-transition) ease;
	}

	.ff-primary-nav .wp-block-navigation__responsive-container-open:hover {
		border-color: var(--ff-sage);
		box-shadow: 0 6px 18px rgb(8 28 48 / 9%);
	}

	.ff-primary-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	.ff-primary-nav .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed;
		inset: 0;
		z-index: 99998;
		width: 100vw;
		min-height: 100vh;
		min-height: 100dvh;
		padding:
			calc(1.25rem + var(--ff-overlay-admin-offset) + env(safe-area-inset-top))
			calc(clamp(1.25rem, 5vw, 3rem) + env(safe-area-inset-right))
			calc(2rem + env(safe-area-inset-bottom))
			calc(clamp(1.25rem, 5vw, 3rem) + env(safe-area-inset-left));
		background: var(--ff-warm-white);
		color: var(--ff-navy-deep);
		overflow-y: auto;
	}

	.ff-primary-nav .wp-block-navigation__responsive-container-close {
		position: fixed;
		top: calc(1.25rem + var(--ff-overlay-admin-offset) + env(safe-area-inset-top));
		right: calc(clamp(1.25rem, 5vw, 3rem) + env(safe-area-inset-right));
		z-index: 99999;
		display: flex;
		width: 2.75rem;
		height: 2.75rem;
		align-items: center;
		justify-content: center;
	}

	.ff-primary-nav .wp-block-navigation__responsive-container-content {
		align-items: stretch;
		padding-top: 4.5rem;
	}

	/* The entries carry their own separator, so they have to touch. The block
	   layout gap left 6.4 px between every row, which broke the separators into
	   an uneven ladder instead of one continuous rhythm. */
	.ff-primary-nav .wp-block-navigation__container {
		width: 100%;
		align-items: stretch;
		gap: 0 !important;
	}

	.ff-primary-nav .wp-block-navigation-item {
		width: 100%;
		border-top: 1px solid var(--ff-line);
	}

	.ff-primary-nav .wp-block-navigation-submenu.has-child {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 2.75rem;
	}

	.ff-primary-nav .wp-block-navigation-submenu > .wp-block-navigation-item__content {
		grid-column: 1;
	}

	.ff-primary-nav .wp-block-navigation-submenu > :where(.wp-block-navigation__submenu-icon, .wp-block-navigation-submenu__toggle) {
		grid-column: 2;
		grid-row: 1;
		margin: 0;
	}

	.ff-primary-nav .ff-mobile-contact-link {
		margin-top: 1.25rem;
		border: 0;
	}

	/* A small step marks the change from navigation to contact details. A full
	   section gap here read as a hole under the last menu entry. */
	.ff-primary-nav .ff-mobile-phone-link--primary {
		margin-top: 0.4rem;
	}

	.ff-primary-nav .ff-mobile-phone-link .wp-block-navigation-item__content {
		justify-content: flex-start;
		min-height: 2.75rem;
		padding: 0.75rem 0;
		color: var(--ff-navy-deep);
		font-family: var(--ff-font-body);
		font-size: 1rem;
		font-weight: 700;
		white-space: nowrap;
	}

	.ff-primary-nav .wp-block-navigation__responsive-container.is-menu-open .ff-mobile-contact-link .wp-block-navigation-item__content {
		display: flex;
		justify-content: center;
		inset-block-start: 0.5px;
		padding: 0.9rem 1.2rem;
		border-radius: 14px;
		background: var(--ff-navy);
		color: var(--ff-warm-white);
		font-family: var(--ff-font-body);
		font-size: 1rem;
	}

	/* The entries are flex rows, so the label is vertically centred between the
	   separators. As plain blocks the line box sat at the top of the row and
	   left the space underneath empty. */
	.ff-primary-nav .wp-block-navigation-item__content {
		display: flex;
		width: 100%;
		min-height: 3.25rem;
		position: relative;
		align-items: center;

		/* Centring the line box leaves the capitals sitting a pixel low, because
		   the heading font reserves more space above the capitals than below the
		   baseline. This lifts the label onto its optical centre. */
		inset-block-start: -1px;
		padding-block: 0.35rem;
		font-family: var(--ff-font-heading);
		font-size: 1.3rem;
		hyphens: none;
		overflow-wrap: break-word;
		white-space: normal;
		word-break: normal;
	}

	.ff-primary-nav .wp-block-navigation-item__content::after {
		display: none;
	}

	.ff-primary-nav .wp-block-navigation-submenu .wp-block-navigation__submenu-container {
		position: static;
		grid-column: 1 / -1;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		align-self: stretch;
		margin-inline: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
		box-shadow: none;
	}

	/*
	 * Untermenue startet im Overlay eingeklappt.
	 *
	 * WordPress blendet im Overlay den Untermenue-Toggle aus
	 * (.wp-block-navigation__submenu-icon { display: none }) und erzwingt das
	 * Untermenue dauerhaft offen. Dadurch schoben die sieben Leistungspunkte
	 * CTA und Rufnummern unter die Falz, und der Toggle meldete
	 * aria-expanded="false", waehrend das Untermenue sichtbar war -- ein
	 * Widerspruch zwischen ausgegebenem Zustand und Darstellung.
	 *
	 * Es ist bewusst kein eigenes JavaScript noetig: Der Button traegt bereits
	 * data-wp-on--click="actions.toggleMenuOnClick" und
	 * data-wp-bind--aria-expanded="state.isMenuOpen" aus der Interactivity API,
	 * und WordPress besitzt die Regel
	 * .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~
	 * .wp-block-navigation__submenu-container. Es genuegt daher, den Toggle
	 * wieder sichtbar zu machen und den erzwungenen Offenzustand
	 * zurueckzunehmen. Die Zustandslogik des Dialogs bleibt unberuehrt.
	 */

	/*
	 * Der Eintrag mit Untermenue bleibt einzeilig.
	 *
	 * Die Rasterregel weiter oben setzt bereits
	 * `grid-template-columns: minmax(0, 1fr) 2.75rem`, sie kam aber nicht zum
	 * Tragen: WordPress setzt im geoeffneten Overlay ueber
	 * `.wp-block-navigation__responsive-container.is-menu-open
	 * .wp-block-navigation-item` mit derselben Spezifitaet (0,3,0)
	 * `display: flex; flex-direction: column` und gewinnt den Gleichstand ueber
	 * die spaetere Ladereihenfolge. Der Chevron rutschte dadurch unter die
	 * Beschriftung und blies den Eintrag von 45 auf 97 Pixel auf. Die
	 * zusaetzliche Klasse hebt die Spezifitaet auf (0,4,0); die Spaltenzuweisung
	 * von Beschriftung und Chevron greift damit wie vorgesehen.
	 */
	.ff-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu.has-child {
		display: grid;
		align-items: center;
	}

	.ff-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
		display: flex;
		width: 2.75rem;
		min-height: 2.75rem;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		background: transparent;
		color: inherit;
		cursor: pointer;
	}

	.ff-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu.has-child > .wp-block-navigation__submenu-container {
		height: 0;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
	}

	.ff-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu.has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		height: auto;
		overflow: visible;
		opacity: 1;
		visibility: visible;
	}

	/*
	 * Sehr niedrige Viewports: letzte 15px fuer den CTA gewinnen.
	 *
	 * Bei 320x568 (iPhone SE der ersten Generation) endet der CTA nach dem
	 * Einklappen des Untermenues bei 583px statt 568px. Die Kompaktierung ist
	 * bewusst an die Viewporthoehe gebunden und nicht an die Breite: Auf
	 * gaengigen Telefonen (844px, 915px, 932px) bleibt die freigegebene
	 * Abstandsrhythmik des Mobilmenues damit exakt unveraendert. Erst ab
	 * dieser sehr niedrigen Bauhoehe werden Kopfabstand, Platz unter dem
	 * Schliessen-Button und der Vorabstand des CTA gestrafft.
	 */
	@media (max-height: 620px) {
		.ff-primary-nav .wp-block-navigation__responsive-container.is-menu-open {
			padding-top: calc(0.75rem + var(--ff-overlay-admin-offset) + env(safe-area-inset-top));
		}

		.ff-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
			top: calc(0.75rem + var(--ff-overlay-admin-offset) + env(safe-area-inset-top));
		}

		.ff-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
			padding-top: 3rem;
		}

		.ff-primary-nav .ff-mobile-contact-link {
			margin-top: 0.6rem;
		}
	}

	.ff-primary-nav .wp-block-navigation-submenu .wp-block-navigation-item {
		margin-top: 0;
		border-top: 1px solid var(--ff-line);
	}

	/* The body font needs a smaller correction than the heading font. */
	.ff-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
	.ff-primary-nav .ff-mobile-phone-link .wp-block-navigation-item__content {
		inset-block-start: -0.5px;
	}

	/* Scoped to the submenu container: without it the rule also caught the
	   parent entry itself, so "Leistungen" was set smaller than the other
	   top-level entries beside it. */
	.ff-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		justify-content: flex-start;
		min-height: 2.75rem;
		padding: 0.75rem 0 0.75rem 1rem;
		border-radius: 0;
		background: transparent;
		color: var(--ff-muted);
		font-family: var(--ff-font-body);
		font-size: 1rem;
		font-weight: 600;
	}

	.ff-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		color: var(--ff-navy-deep);
	}

	.ff-primary-nav .ff-mobile-legal-link {
		border: 0;
	}

	.ff-primary-nav .ff-mobile-contact-link + .ff-mobile-legal-link {
		margin-top: 1.5rem;
		padding-top: 0.5rem;
		border-top: 1px solid var(--ff-line);
	}

	.ff-primary-nav .ff-mobile-legal-link .wp-block-navigation-item__content {
		justify-content: flex-start;
		min-height: 2.75rem;
		padding: 0.65rem 0;
		color: var(--ff-muted);
		font-family: var(--ff-font-body);
		font-size: 1rem;
		font-weight: 600;
	}
}

@media (max-width: 1180px) {
	.ff-hero-media img {
		border-radius: 160px 0 0 160px;
	}

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

	.ff-management-copy {
		grid-column: 6 / -1;
	}

	.ff-area-copy {
		grid-column: 2 / span 7;
	}
}

@media (max-width: 782px) {
	body.admin-bar {
		--ff-adminbar-offset: var(--wp-admin--admin-bar--height, 46px);
		--ff-overlay-admin-offset: var(--wp-admin--admin-bar--height, 46px);
	}
}

@media (max-width: 860px) {
	.ff-hero {
		padding-top: 2.25rem;
	}

	/* The mobile mockup keeps the hero split: a narrow copy column on the left
	   and the image bleeding off the right edge beside it, running the full
	   height of the copy instead of sitting in its own short box. */
	.ff-hero-grid {
		grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
		align-items: stretch;
		column-gap: clamp(0.85rem, 3vw, 1.5rem);
	}

	.ff-hero-visual {
		align-self: stretch;
	}

	.ff-hero-media {
		position: absolute;
		inset: 0;
	}

	.ff-hero-media img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		border-radius: 120px 0 0 120px;
	}

	/* The same statement appears as its own card in the Cologne section below,
	   so the hero stays uncluttered on narrow screens. */
	.ff-hero-badge {
		display: none;
	}

	.ff-hero-actions .wp-block-button__link {
		hyphens: none;
		overflow-wrap: normal;
		word-break: normal;
	}

	.ff-story-grid,
	.ff-quality-grid,
	.ff-services-heading,
	.ff-home-commercial__grid,
	.ff-cta-inner {
		grid-template-columns: 1fr;
	}

	.ff-story-media,
	.ff-story-copy {
		grid-column: 1;
		grid-row: auto;
	}

	.ff-hero-copy {
		max-width: none;
		padding-block: 0;
	}

	.ff-hero-copy h1 {
		max-width: 100%;
	}

	.ff-hero-trust {
		gap: 0.85rem 1rem;
	}

	.ff-hero-trust__item p {
		font-size: 0.78rem;
	}

	.ff-story-grid,
	.ff-quality-grid {
		gap: 3rem;
	}

	.ff-story-media,
	.ff-story-copy,
	.ff-home-commercial__media,
	.ff-home-commercial__copy {
		grid-column: 1;
	}

	.ff-home-commercial__grid {
		gap: 2.5rem;
	}

	.ff-service-row {
		grid-template-columns: 3rem minmax(11rem, 0.8fr) minmax(14rem, 1.2fr);
	}

	.ff-management-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ff-management-media,
	.ff-management-copy {
		grid-column: 1;
	}

	.ff-management-media {
		grid-row: 1;
	}

	.ff-management-copy {
		grid-row: 2;
		margin: -3rem clamp(1rem, 5vw, 3rem) 0;
	}

	.ff-process-heading {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.ff-process-list {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.25rem;
		padding: 1.5rem;
	}

	.ff-process-list::before {
		top: 3rem;
		right: auto;
		bottom: 3rem;
		left: 3.7rem;
		width: 1px;
		height: auto;
	}

	.ff-process-step {
		padding: 0.85rem 1rem 1.25rem 5rem;
	}

	.ff-process-step .ff-step-number {
		position: absolute;
		top: 0.75rem;
		left: 0.1rem;
	}

	.ff-contact-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ff-space-xl);
	}

	.ff-area-copy {
		grid-column: 2 / span 9;
	}

	.ff-footer-main {
		grid-template-columns: 1.25fr 0.75fr;
	}

	.ff-page-hero-grid,
	.ff-detail-hero-grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.ff-page-hero-copy .wp-block-post-title,
	.ff-detail-hero-copy .wp-block-post-title {
		max-width: 17ch;
	}

	.ff-footer-nav-wrap {
		grid-column: 2;
	}

	.ff-home-pillars__grid,
	.ff-service-pillars,
	.ff-commercial-branches {
		gap: 1.25rem;
	}
}

@media (max-width: 781px) {
	:root {
		--ff-header-clearance: 5.15rem;
	}

	.ff-contact-strip,
	.ff-contact-strip-inner {
		min-height: 2.75rem;
	}

	.ff-contact-strip-inner {
		justify-content: flex-end;
	}

	.ff-area-note {
		display: none;
	}

	.ff-header-main {
		min-height: 4.15rem;
	}

	.ff-brand .wp-block-site-logo {
		width: 158px !important;
	}

	.ff-archive-header .wp-block-query-title,
	.ff-archive-header .wp-block-post-title {
		font-size: clamp(2.65rem, 11vw, 4.8rem);
	}

	.ff-faq > .wp-block-columns {
		gap: 2rem;
	}

	.ff-footer-main {
		grid-template-columns: 1fr 1fr;
	}

	.ff-footer-intro {
		grid-column: 1 / -1;
	}

	.ff-footer-nav-wrap {
		grid-column: auto;
	}

	.ff-home-audiences__list,
	.ff-commercial-scope {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}
}

@media (max-width: 600px) {
	.ff-phone-group > .ff-phone-link--secondary::before {
		display: none;
	}

	.ff-phone-group {
		align-items: stretch;
		flex-direction: column;
	}

	.ff-phone-group > .ff-phone-link--secondary {
		display: block;
	}

	body.admin-bar {
		--ff-adminbar-offset: 0px;
	}

	.ff-home-commercial__copy .wp-block-buttons {
		flex-direction: column;
	}

	.ff-home-commercial__copy .wp-block-button,
	.ff-home-commercial__copy .wp-block-button__link {
		width: 100%;
	}

	.ff-management-grid {
		width: calc(100vw - (2 * var(--ff-container-gutter))) !important;
		max-width: none !important;
		margin-inline: auto !important;
	}

	.ff-hero {
		padding-top: 1.85rem;
	}

	.ff-hero-copy h1 {
		max-width: 100%;
		font-size: clamp(1.8rem, 7.2vw, 2.4rem);
		line-height: 1.1;
	}

	.ff-hero-copy .ff-lead {
		margin-top: 1.1rem;
		font-size: 0.95rem;
		text-wrap: wrap;
	}

	.ff-hero-copy .ff-eyebrow {
		font-size: 0.66rem;
		letter-spacing: 0.1em;
	}

	.ff-hero-actions .wp-block-button__link {
		padding-inline: 1rem;
		font-size: 0.88rem;
	}

	/* Two stacked full-width actions, as in the mobile mockup. */
	.ff-hero-actions {
		align-items: stretch;
		flex-direction: column;
		margin-top: 1.4rem;
	}

	.ff-hero-actions .wp-block-button,
	.ff-hero-actions .wp-block-button__link {
		width: 100%;
	}

	.ff-hero-media img {
		border-radius: 90px 0 0 90px;
	}

	/* German trust labels are far longer than the mockup's placeholders. Four
	   columns would collide at phone widths, so they wrap into two rows of two
	   and stay fully readable. */
	.ff-hero-trust {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.15rem 1rem;
		margin-top: 2rem;
	}

	.ff-hero-trust__item::before {
		width: 1.35rem;
		height: 1.35rem;
		margin-bottom: 0.5rem;
		mask-size: 1.35rem;
		-webkit-mask-size: 1.35rem;
	}

	.ff-hero-trust__item p {
		font-size: 0.79rem;
		line-height: 1.35;
	}

	.ff-story-media img,
	.ff-quality-media img,
	.ff-management-media img {
		border-radius: 22px 46px 22px 22px;
	}

	.ff-story-copy h2,
	.ff-services-heading h2,
	.ff-management-copy h2,
	.ff-process-heading h2,
	.ff-faq h2,
	.ff-cta h2,
	.ff-quality-copy h2,
	.ff-area-copy h2 {
		font-size: clamp(2rem, 9vw, 2.8rem);
	}

	.ff-faq h2 {
		font-size: clamp(1.625rem, 8vw, 2.5rem);
	}

	.ff-service-row {
		grid-template-columns: 2.5rem 1fr;
		gap: 0.55rem 1rem;
	}

	.ff-service-row p:last-child {
		grid-column: 2;
	}

	.ff-service-row:hover {
		background: var(--ff-mist);
	}

	.ff-management-copy {
		margin: -1.5rem 0.75rem 0;
		padding: 1.6rem;
		border-radius: 18px 18px 38px;
	}

	.ff-process-list {
		padding: 1rem;
	}

	.ff-process-list::before {
		left: 3.2rem;
	}

	.ff-process-step {
		padding: 0.85rem 0.25rem 1.25rem 4.5rem;
	}

	.ff-area-frame {
		grid-template-columns: 1fr;
	}

	.ff-area-media,
	.ff-area-copy {
		grid-column: 1;
	}

	.ff-area-media {
		grid-row: 1;
		margin: 0;
	}

	.ff-area-media img {
		aspect-ratio: 4 / 3;
		border-radius: 22px 44px 0 0;
	}

	.ff-area-copy {
		grid-row: 2;
		padding: 1.6rem;
		border-radius: 0 0 36px 22px;
		box-shadow: none;
	}

	.ff-cta-inner {
		gap: 1.5rem;
	}

	.ff-cta-action .wp-block-buttons {
		align-items: stretch;
		flex-direction: column;
	}

	.ff-cta-action .wp-block-button,
	.ff-cta-action .wp-block-button__link {
		width: 100%;
	}

	.ff-footer-main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem 1rem;
	}

	.ff-page-hero-copy .wp-block-post-title,
	.ff-detail-hero-copy .wp-block-post-title {
		font-size: clamp(1.95rem, 8vw, 3rem);
		hyphens: auto;
		overflow-wrap: anywhere;
	}

	.ff-directory-row,
	.ff-directory-area {
		grid-template-columns: 1fr;
		gap: 1.2rem;
	}

	.ff-footer-intro {
		grid-column: 1 / -1;
	}

	.ff-footer-nav-wrap {
		grid-column: 1 / -1;
	}

	.ff-footer-contact {
		grid-column: 1 / -1;
	}

	.ff-home-pillars__grid,
	.ff-service-pillars,
	.ff-commercial-branches,
	.ff-footer-nav-groups {
		grid-template-columns: minmax(0, 1fr);
	}

	.ff-home-pillar,
	.ff-service-pillar,
	.ff-commercial-branches > * {
		padding: 1.5rem;
	}

	.ff-commercial-branches > * {
		border-top: 1px solid var(--ff-line);
		border-left: 0;
	}

	.ff-home-commercial__media img,
	.ff-commercial-figure img {
		aspect-ratio: 4 / 3;
		border-radius: 22px 22px 46px;
		object-position: 70% 52%;
	}

	.ff-footer-contact a,
	.ff-footer-links a {
		overflow-wrap: normal;
	}

	.ff-footer-bottom {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.7rem;
	}

	.ff-mosaic {
		grid-template-columns: 1fr;
	}
}

/* Phones get a calm stacked hero instead of the split.
 *
 * The mockup's narrow copy column beside a tall image strip only works while
 * the column is wide enough for a real line of text. On a phone it squeezes the
 * German headline into two-word lines and leaves the photo as a thin sliver, so
 * below this width the headline, copy and actions use the full measure and the
 * image follows as one wide band that keeps its organic mask and its bleed.
 */
@media (max-width: 700px) {
	.ff-hero-grid {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		row-gap: clamp(1.35rem, 4vw, 2rem);
	}

	.ff-hero-copy,
	.ff-hero-visual {
		grid-column: 1;
		grid-row: auto;
	}

	.ff-hero-copy h1 {
		font-size: clamp(2rem, 8.2vw, 2.85rem);
	}

	.ff-hero-copy .ff-lead {
		max-width: 34rem;
		font-size: 1rem;
	}

	.ff-hero-media {
		position: static;
	}

	.ff-hero-media img {
		position: static;
		height: auto;
		max-block-size: none;
		aspect-ratio: 4 / 2.9;
		border-radius: 120px 0 0 120px;
		object-position: 55% 50%;
	}

	.ff-hero-trust {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.15rem 1rem;
	}

	.ff-hero-trust__item p {
		font-size: 0.83rem;
	}
}

@media (max-width: 400px) {
	.ff-hero-media img {
		aspect-ratio: 4 / 3.1;
		border-radius: 90px 0 0 90px;
	}
}

@media (max-width: 1100px) {
	.ff-subpage-template--services .ff-page-hero-grid,
	.ff-subpage-template--managers .ff-page-hero-grid,
	.ff-subpage-template--quality .ff-page-hero-grid,
	.ff-subpage-template--area .ff-page-hero-grid,
	.ff-subpage-template--about .ff-page-hero-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ff-subpage-template--managers .ff-page-hero-copy,
	.ff-subpage-template--quality .ff-page-hero-copy,
	.ff-subpage-template--about .ff-page-hero-copy {
		grid-column: 1;
		grid-row: 1;
	}

	.ff-subpage-template--managers .ff-page-hero-media,
	.ff-subpage-template--quality .ff-page-hero-media,
	.ff-subpage-template--about .ff-page-hero-media {
		grid-column: 1;
		grid-row: 2;
	}

	.ff-subpage-template--quality .ff-page-hero-media img,
	.ff-subpage-template--about .ff-page-hero-media img {
		aspect-ratio: 16 / 9;
	}
}

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

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

	.ff-subpage-template--area .ff-page-hero-copy,
	.ff-content-split,
	.ff-subpage-intro,
	.ff-b2b-principles,
	.ff-b2b-process,
	.ff-b2b-operations,
	.ff-b2b-ledger,
	.ff-b2b-assurance,
	.ff-quality-response,
	.ff-quality-scope,
	.ff-quality-contact,
	.ff-area-landscape__inner,
	.ff-area-surroundings,
	.ff-area-factors,
	.ff-about-values,
	.ff-about-story,
	.ff-about-method,
	.ff-about-links,
	.ff-subpage-faq,
	.ff-page-cta {
		grid-template-columns: minmax(0, 1fr);
	}

	.ff-subpage-template--area .ff-page-hero-copy .ff-eyebrow,
	.ff-subpage-template--area .ff-page-hero-copy .wp-block-post-title,
	.ff-subpage-template--area .ff-page-hero-intro,
	.ff-subpage-template--area .ff-page-hero-actions,
	.ff-subpage-intro > .wp-block-buttons {
		grid-column: 1;
		grid-row: auto;
	}

	.ff-subpage-template--area .ff-page-hero-actions {
		margin-top: 1rem;
	}

	.ff-subpage-template--area .ff-page-hero-media img {
		aspect-ratio: 16 / 8;
	}

	.ff-b2b-operations__details,
	.ff-quality-scope__separate {
		padding-top: 2rem;
		padding-left: 0;
		border-top: 1px solid var(--ff-line);
		border-left: 0;
	}

	.ff-page-cta {
		align-items: start;
	}

	.ff-scope-boundaries {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ff-content-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ff-service-pillar {
		padding: 1.5rem;
	}

	.ff-service-pillar h2 {
		font-size: clamp(1.4rem, 3vw, 1.7rem);
		overflow-wrap: normal;
	}

	.ff-commercial-branches h3 {
		font-size: clamp(1.3rem, 2.8vw, 1.55rem);
		overflow-wrap: normal;
	}
}

@media (max-width: 700px) {
	.ff-subpage > .alignwide {
		width: calc(100vw - (2 * var(--ff-container-gutter)));
	}

	.ff-subpage .alignwide.ff-area-landscape__inner {
		width: 100%;
	}

	.ff-subpage h2 {
		font-size: clamp(1.8rem, 8vw, 2.5rem);
	}

	.ff-service-pillar h2 {
		font-size: clamp(1.4rem, 3vw, 1.7rem);
	}

	.ff-subpage h3 {
		font-size: clamp(1.25rem, 5.5vw, 1.6rem);
	}

	.ff-content-steps {
		grid-template-columns: minmax(0, 1fr);
	}

	.ff-scope-boundaries {
		grid-template-columns: minmax(0, 1fr);
		padding-block: 4rem;
	}

	.ff-scope-boundary h2 {
		font-size: clamp(1.25rem, 5.6vw, 1.55rem);
		overflow-wrap: normal;
	}

	.ff-subpage--office .ff-content-lead h2 {
		font-size: clamp(1.65rem, 7vw, 2.2rem);
		overflow-wrap: normal;
	}

	.ff-subpage--retail :where(.ff-commercial-boundary, .ff-content-faq) h2 {
		font-size: clamp(1.65rem, 7vw, 2.2rem);
		overflow-wrap: normal;
	}

	.ff-services-intro > :where(h2, p, .wp-block-buttons) {
		width: 100%;
		max-width: 100%;
	}

	.ff-services-intro h2 {
		font-size: clamp(1.75rem, 7vw, 2.15rem);
		overflow-wrap: normal;
	}

	.ff-about-intro h2 {
		max-width: 100%;
		font-size: clamp(1.3rem, 6.8vw, 2.15rem);
	}

	.ff-subpage-template .ff-page-hero-actions,
	.ff-subpage-template .ff-page-hero-actions .wp-block-button,
	.ff-subpage-template .ff-page-hero-actions .wp-block-button__link,
	.ff-page-cta .wp-block-buttons,
	.ff-page-cta .wp-block-button,
	.ff-page-cta .wp-block-button__link {
		width: 100%;
	}

	.ff-subpage-template--services .ff-page-hero-media img,
	.ff-subpage-template--managers .ff-page-hero-media img,
	.ff-subpage-template--quality .ff-page-hero-media img,
	.ff-subpage-template--area .ff-page-hero-media img,
	.ff-subpage-template--about .ff-page-hero-media img {
		aspect-ratio: 4 / 3;
		border-radius: 22px 22px 46px;
	}

	.ff-subpage-intro,
	.ff-service-core,
	.ff-inline-process {
		grid-template-columns: minmax(0, 1fr);
	}

	.ff-subpage-intro,
	.ff-service-core,
	.ff-inline-process,
	.ff-b2b-principles,
	.ff-b2b-process,
	.ff-b2b-operations,
	.ff-b2b-ledger,
	.ff-b2b-assurance,
	.ff-quality-response,
	.ff-quality-scope,
	.ff-quality-contact,
	.ff-area-surroundings,
	.ff-area-factors,
	.ff-about-values,
	.ff-about-story,
	.ff-about-method,
	.ff-about-links,
	.ff-subpage-faq {
		gap: 2rem;
	}

	.ff-service-register {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
	}

	.ff-service-register ul {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.ff-service-register li {
		width: 100%;
		border-top: 1px solid var(--ff-line);
	}

	.ff-service-register li:last-child {
		border-bottom: 1px solid var(--ff-line);
	}

	.ff-service-register a {
		width: 100%;
		padding-block: 0.75rem;
	}

	.ff-service-detail {
		grid-template-columns: 2.5rem minmax(0, 1fr);
		gap: 0.5rem 1rem;
		padding-block: 1.75rem;
	}

	.ff-service-detail > p:last-child {
		grid-column: 2;
	}

	.ff-service-detail--offset {
		padding-left: 0;
	}

	.ff-inline-process__steps > *,
	.ff-b2b-principles__list > *,
	.ff-area-factors__list > *,
	.ff-about-values__list > * {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.5rem;
	}

	.ff-b2b-process__rows > *,
	.ff-quality-response__steps > * {
		grid-template-columns: 3.5rem minmax(0, 1fr);
		gap: 0.4rem 1rem;
	}

	.ff-b2b-process__rows > * > :last-child,
	.ff-quality-response__steps > * > :last-child {
		grid-column: 2;
	}

	.ff-quality-response__steps::before {
		left: 1.75rem;
	}

	.ff-quality-statement {
		padding-block: 4.5rem;
	}

	.ff-quality-statement__text {
		font-size: clamp(1.25rem, 6.2vw, 1.7rem);
	}

	.ff-area-landscape {
		padding-block: 4rem;
	}

	.ff-area-landscape__koeln h2 {
		font-size: clamp(4rem, 27vw, 7rem);
	}

	.ff-area-landscape__note {
		padding: var(--ff-space-md);
		border-left: 4px solid var(--ff-sage);
	}

	.ff-place-list {
		display: block;
	}

	.ff-place-list li {
		padding: 0.65rem 0;
		border-left: 0;
		border-right: 0;
		border-top: 1px solid var(--ff-line);
		font-size: clamp(1.4rem, 8vw, 2rem);
	}

	.ff-place-list li:nth-child(even) {
		padding-left: 0;
		border-left: 0;
	}

	.ff-place-list li:last-child {
		border-bottom: 1px solid var(--ff-line);
	}

	.ff-about-statement {
		padding-block: 4.5rem;
	}

	.ff-about-statement p {
		padding-left: 1.25rem;
		font-size: clamp(1.8rem, 8.5vw, 2.8rem);
	}

	.ff-about-method__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.ff-page-cta {
		width: calc(100% - 2.5rem) !important;
		padding: 1.75rem;
		border-radius: 20px 20px 42px;
	}

	.ff-page-cta h2 {
		max-width: none;
	}

	.ff-subpage-faq__intro h2 {
		max-width: 18ch;
	}

	.ff-subpage-faq__items summary {
		padding-right: 2.25rem;
	}

	.ff-subpage-faq__items details p {
		padding-right: 0;
	}
}

@media (max-width: 430px) {
	.ff-legal-page :where(.ff-prose, .ff-legal-document) > h2 {
		font-size: clamp(1.2rem, 5.8vw, 1.45rem);
	}

	.ff-page-hero-copy .wp-block-post-title,
	.ff-detail-hero-copy .wp-block-post-title {
		font-size: clamp(1.35rem, 7vw, 1.75rem);
		overflow-wrap: normal;
	}

	/* Match the higher-specificity hero variants so current long German titles
	 * fit within their containers without artificial in-word breaks. */
	.ff-legal-page .ff-page-hero-copy .wp-block-post-title,
	.ff-service-detail-page .ff-page-hero-copy .wp-block-post-title,
	.ff-subpage-template--retail .ff-page-hero-copy .wp-block-post-title {
		font-size: clamp(1.35rem, 7vw, 1.75rem);
	}

	.ff-service-detail-page .ff-page-hero-copy .wp-block-post-title {
		max-width: 100%;
	}

	.ff-subpage h2,
	.ff-page-cta h2,
	.ff-service-detail-page h2,
	.ff-subpage--office .ff-content-lead h2,
	.ff-home-audiences__heading h2,
	.ff-management-copy h2,
	.ff-contact-form__header h2 {
		font-size: clamp(1.3rem, 7vw, 1.75rem);
		overflow-wrap: anywhere;
	}

	.ff-home-pillar h3 {
		font-size: clamp(1.2rem, 6.4vw, 1.4rem);
	}

	.ff-page-cta {
		width: 100% !important;
		padding-inline: 1.25rem;
	}
}

@media (max-width: 380px) {
	.ff-subpage .ff-lead {
		font-size: 1.05rem;
	}

	.ff-page-cta {
		padding: 1.5rem;
	}

	.ff-quality-number {
		width: 3.25rem;
		height: 3.25rem;
	}

	.ff-quality-response__steps::before {
		left: 1.625rem;
	}

	.ff-quality-response__steps > * {
		grid-template-columns: 3.25rem minmax(0, 1fr);
	}

	.ff-b2b-process__rows > * {
		grid-template-columns: 2.75rem minmax(0, 1fr);
		column-gap: 0.75rem;
	}

	.ff-about-intro h2 {
		font-size: clamp(1.3rem, 6.8vw, 2.15rem);
	}
}

@media (max-width: 320px) {
	.ff-subpage--area .ff-area-landscape__koeln h2 {
		line-height: 1;
	}
}

/* Global motion preference: navigation and in-page scrolling remain static
   even where the optional editorial motion bundle is not loaded. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}