/* =========================================================
   Schriftarten
   ========================================================= */

/* Inter Regular */
@font-face {
	font-display: swap;
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	src:
		url("../fonts/inter-v20-latin-regular.woff2")
		format("woff2");
}

/* Inter SemiBold */
@font-face {
	font-display: swap;
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	src:
		url("../fonts/inter-v20-latin-600.woff2")
		format("woff2");
}

/* Inter Bold */
@font-face {
	font-display: swap;
	font-family: "Inter";
	font-style: normal;
	font-weight: 700;
	src:
		url("../fonts/inter-v20-latin-700.woff2")
		format("woff2");
}

/* Inter ExtraBold */
@font-face {
	font-display: swap;
	font-family: "Inter";
	font-style: normal;
	font-weight: 800;
	src:
		url("../fonts/inter-v20-latin-800.woff2")
		format("woff2");
}


/* =========================================================
   Variablen
   ========================================================= */

:root {
	/* Farben */
	--prffc-color-blue: #0077b9;
	--prffc-color-blue-dark: #005b91;
	--prffc-color-navy: #002b3e;
	--prffc-color-text: #111111;
	--prffc-color-heading: #353535;
	--prffc-color-light-blue: #e7f2f8;
	--prffc-color-card: #f3f8fb;
	--prffc-color-white: #ffffff;
	--prffc-color-placeholder: #515151;

	/* Breiten */
	--prffc-layout-width: 79.5rem;
	--prffc-content-width: 69.75rem;
	--prffc-stage-content-width: 61rem;

	/* Abstände */
	--prffc-page-gutter: clamp(1rem, 3.25vw, 2.75rem);
	--prffc-section-space: clamp(5rem, 9vw, 8rem);

	/* Header */
	--prffc-header-height: 11.25rem;
	--prffc-header-height-scrolled: 6.5rem;
	--prffc-header-padding-y: 1.5rem;
	--prffc-header-padding-y-scrolled: 0.75rem;

	/* Logo */
	--prffc-logo-width: clamp(13rem, 26vw, 22.5rem);
	--prffc-logo-width-scrolled: clamp(10rem, 16vw, 13rem);

	/* Gestaltung */
	--prffc-radius: 0.6rem;
	--prffc-transition: 240ms ease;
	--prffc-reveal-easing: cubic-bezier(0.16, 1, 0.3, 1);
}


/* =========================================================
   Reset und Grundeinstellungen
   ========================================================= */

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

html {
	scroll-behavior: smooth;
}

body {
	min-width: 20rem;
	margin: 0;

	background: var(--prffc-color-white);
	color: var(--prffc-color-navy);

	font-family: "Inter", Arial, Helvetica, sans-serif;
	font-size: 1rem;
	line-height: 1.5;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.is-menu-open {
	overflow: hidden;
}

img {
	max-width: 100%;
}

a {
	color: inherit;
}

button,
input,
textarea,
select {
	font: inherit;
}


/* =========================================================
   Einheitliche Breiten
   ========================================================= */

/*
 * Header und Stage besitzen die große Layoutbreite.
 */

.prffc-header__inner,
.prffc-stage {
	width: min(
		calc(100% - (2 * var(--prffc-page-gutter))),
		var(--prffc-layout-width)
	);

	margin-inline: auto;
}


/*
 * Alle normalen Inhaltsbereiche besitzen dieselbe Breite.
 */

.prffc-development__inner,
.prffc-services__inner,
.prffc-next-step__inner,
.prffc-faq__inner,
.prffc-contact__inner,
.prffc-footer__inner,
.prffc-about__inner {
	width: min(
		100%,
		var(--prffc-content-width)
	);

	margin-inline: auto;
}


/* =========================================================
   Barrierefreie Hilfsklassen
   ========================================================= */

.prffc-visually-hidden {
	position: absolute;

	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;

	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;

	border: 0;
}

.prffc-skip-link {
	position: fixed;
	z-index: 1000;
	top: 0.75rem;
	left: 0.75rem;

	padding: 0.75rem 1rem;

	transform: translateY(-150%);

	background: var(--prffc-color-navy);
	color: var(--prffc-color-white);

	font-weight: 700;
	text-decoration: none;

	transition:
		transform var(--prffc-transition);
}

.prffc-skip-link:focus {
	transform: translateY(0);
}


/* =========================================================
   Header
   ========================================================= */

.prffc-header {
	position: sticky;
	z-index: 100;
	top: 0;

	height: var(--prffc-header-height);

	background: var(--prffc-color-white);

	transition:
		height var(--prffc-transition),
		box-shadow var(--prffc-transition);
}

.is-scrolled .prffc-header {
	height: var(--prffc-header-height-scrolled);

	box-shadow:
		0 0.5rem 2rem rgba(0, 43, 62, 0.08);
}

.prffc-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;

	height: 100%;

	padding-block:
		var(--prffc-header-padding-y);

	transition:
		padding var(--prffc-transition);
}

.is-scrolled .prffc-header__inner {
	padding-block:
		var(--prffc-header-padding-y-scrolled);
}


/* =========================================================
   Logo
   ========================================================= */

.prffc-logo {
	display: block;
	flex: 0 0 auto;

	line-height: 0;
	text-decoration: none;
}

.prffc-logo__image {
	display: block;

	width: var(--prffc-logo-width);
	max-height: calc(
		var(--prffc-header-height) -
		(2 * var(--prffc-header-padding-y))
	);

	height: auto;

	transition:
		width var(--prffc-transition),
		max-height var(--prffc-transition);
}

.is-scrolled .prffc-logo__image {
	width: var(--prffc-logo-width-scrolled);

	max-height: calc(
		var(--prffc-header-height-scrolled) -
		(2 * var(--prffc-header-padding-y-scrolled))
	);
}


/* =========================================================
   Header-Aktionen
   ========================================================= */

.prffc-header__actions,
.prffc-menu-toggle,
.prffc-stage__actions {
	display: flex;
	align-items: center;
}

.prffc-header__actions {
	gap: clamp(1rem, 2vw, 1.75rem);
}


/* =========================================================
   Burger
   ========================================================= */

.prffc-menu-toggle {
	gap: 1rem;

	padding: 0;
	border: 0;

	background: transparent;
	color: var(--prffc-color-blue);

	font-weight: 700;

	cursor: pointer;
}

.prffc-menu-toggle__icon {
	display: grid;

	width: 1.55rem;
	gap: 0.27rem;
}

.prffc-menu-toggle__icon span {
	display: block;

	width: 100%;
	height: 0.13rem;

	background: currentColor;

	transition:
		transform var(--prffc-transition),
		opacity var(--prffc-transition);
}

.is-menu-open
.prffc-menu-toggle__icon
span:nth-child(1) {
	transform: translateY(0.4rem) rotate(45deg);
}

.is-menu-open
.prffc-menu-toggle__icon
span:nth-child(2) {
	opacity: 0;
}

.is-menu-open
.prffc-menu-toggle__icon
span:nth-child(3) {
	transform: translateY(-0.4rem) rotate(-45deg);
}


/* =========================================================
   Hauptmenü
   ========================================================= */

.prffc-menu {
	position: fixed;
	z-index: 90;
	top: var(--prffc-header-height);
	right: 0;
	bottom: 0;
	left: 0;

	display: grid;
	visibility: hidden;
	place-items: center;

	opacity: 0;

	background: var(--prffc-color-white);

	transform: translateY(-1rem);

	transition:
		top var(--prffc-transition),
		visibility var(--prffc-transition),
		opacity var(--prffc-transition),
		transform var(--prffc-transition);
}

.is-scrolled .prffc-menu {
	top: var(--prffc-header-height-scrolled);
}

.is-menu-open .prffc-menu {
	visibility: visible;
	opacity: 1;

	transform: translateY(0);
}

.prffc-menu__list {
	display: grid;
	gap: 1rem;

	margin: 0;
	padding: 0;

	list-style: none;
	text-align: center;
}

.prffc-menu__list a {
	color: var(--prffc-color-navy);

	font-size: clamp(2rem, 6vw, 4.75rem);
	font-weight: 800;
	letter-spacing: -0.05em;
	text-decoration: none;

	transition:
		color var(--prffc-transition);
}

.prffc-menu__list a:hover {
	color: var(--prffc-color-blue);
}



/* =========================================================
   Layer-Menü – kompaktere Navigation
   ========================================================= */

.prffc-menu__list {
	display: grid;

	width: min(
		calc(100% - 2rem),
		38rem
	);

	margin: 0 auto;
	padding: 0;

	gap: clamp(0.55rem, 1.5vh, 1rem);

	list-style: none;
	text-align: center;
}

.prffc-menu__list li {
	margin: 0;
	padding: 0;
}

.prffc-menu__list a {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding:
		0.25rem
		0.75rem;

	color: var(--prffc-color-navy);

	font-size: clamp(1.6rem, 3.2vw, 2.65rem);
	font-weight: 750;
	letter-spacing: -0.04em;
	line-height: 1.08;

	text-decoration: none;

	transition:
		color var(--prffc-transition),
		transform var(--prffc-transition);
}

.prffc-menu__list a:hover {
	color: var(--prffc-color-blue);

	transform: translateX(0.25rem);
}

.prffc-menu__list a[aria-current="page"] {
	color: var(--prffc-color-blue);
}

.prffc-menu__list a:focus-visible {
	outline:
		0.2rem solid
		var(--prffc-color-blue);

	outline-offset: 0.3rem;
}



/* Mobile nochmals etwas kompakter */

@media (max-width: 47.99rem) {
	.prffc-menu__list {
		gap: 0.6rem;
	}

	.prffc-menu__list a {
		font-size: clamp(1.4rem, 7vw, 2rem);
		line-height: 1.12;
	}
}



/* Sehr niedrige Displays */

@media (max-height: 40rem) {
	.prffc-menu__list {
		gap: 0.35rem;
	}

	.prffc-menu__list a {
		padding-block: 0.15rem;

		font-size: clamp(1.25rem, 4vh, 1.7rem);
	}
}


/* =========================================================
   Buttons
   ========================================================= */

.prffc-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 2.9rem;
	padding: 0.8rem 1.55rem;

	border-radius: 0.45rem;

	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
	text-decoration: none;

	transition:
		background-color var(--prffc-transition),
		color var(--prffc-transition),
		transform var(--prffc-transition);
}

.prffc-button:hover {
	transform: translateY(-0.12rem);
}

.prffc-button:focus-visible,
.prffc-menu-toggle:focus-visible,
.prffc-menu a:focus-visible {
	outline: 0.2rem solid var(--prffc-color-blue);
	outline-offset: 0.25rem;
}

.prffc-button--contact {
	background: var(--prffc-color-light-blue);
	color: var(--prffc-color-blue-dark);
}

.prffc-button--contact:hover {
	background: var(--prffc-color-blue);
	color: var(--prffc-color-white);
}

.prffc-button--primary {
	background: var(--prffc-color-blue);
	color: var(--prffc-color-white);
}

.prffc-button--primary:hover {
	background: #008bd2;
}

.prffc-button--secondary {
	background: var(--prffc-color-blue-dark);
	color: var(--prffc-color-white);
}

.prffc-button--secondary:hover {
	background: var(--prffc-color-navy);
}

.prffc-button--next-step {
	margin-top: clamp(2rem, 4vw, 2.75rem);

	background: var(--prffc-color-white);
	color: var(--prffc-color-blue-dark);
}

.prffc-button--next-step:hover {
	background: var(--prffc-color-light-blue);
	color: var(--prffc-color-navy);
}


/* =========================================================
   Stage
   ========================================================= */

.prffc-stage {
	position: relative;
	isolation: isolate;

	display: grid;
	align-items: end;

	min-height: min(
		52.8rem,
		calc(
			100svh -
			var(--prffc-header-height) -
			5rem
		)
	);

	margin-bottom:
		var(--prffc-section-space);

	overflow: hidden;

	border-radius: var(--prffc-radius);
	background: var(--prffc-color-placeholder);
	color: var(--prffc-color-white);
}

.prffc-stage__media {
	position: absolute;
	z-index: -2;
	inset: 0;

	display: block;

	width: 100%;
	height: 100%;
}

.prffc-stage__image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;
}

.prffc-stage::after {
	content: "";

	position: absolute;
	z-index: -1;

	inset: 32% 0 0;

	background:
		linear-gradient(
			to bottom,
			rgba(0, 43, 62, 0) 0%,
			rgba(0, 43, 62, 0.44) 48%,
			rgba(0, 43, 62, 0.98) 100%
		);

	pointer-events: none;
}

.prffc-stage__content {
	width: min(
		100%,
		var(--prffc-stage-content-width)
	);

	margin-inline: auto;

	padding:
		clamp(4.5rem, 10vw, 7rem)
		clamp(1.25rem, 4vw, 3rem)
		clamp(5.5rem, 8vw, 6.5rem);

	text-align: center;
}

.prffc-stage__title {
	margin: 0;

	font-size: clamp(3rem, 7.2vw, 6.35rem);
	font-weight: 800;
	letter-spacing: -0.06em;
	line-height: 0.91;
}

.prffc-stage__claim {
	margin:
		clamp(1.25rem, 2.5vw, 1.7rem)
		0
		0;

	font-size: clamp(1.35rem, 2.8vw, 2.35rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.1;
}

.prffc-stage__intro {
	margin:
		clamp(1.25rem, 2vw, 1.55rem)
		0
		0;

	font-size: clamp(1rem, 1.5vw, 1.18rem);
	font-weight: 600;
	line-height: 1.28;
}

.prffc-stage__actions {
	justify-content: center;
	gap: 0.9rem;

	margin-top: 1.2rem;
}


/* =========================================================
   Ganzheitliche Entwicklung
   ========================================================= */

.prffc-development {
	padding:
		0
		var(--prffc-page-gutter)
		var(--prffc-section-space);
}

.prffc-development__inner {
	display: grid;

	grid-template-columns:
		minmax(0, 0.85fr)
		minmax(0, 1.15fr);

	align-items: center;

	gap: clamp(3rem, 7vw, 7rem);
}

.prffc-development__content {
	width: 100%;
	max-width: 27rem;
}

.prffc-development__eyebrow {
	margin: 0 0 0.75rem;

	color: var(--prffc-color-blue);

	font-size: clamp(1.25rem, 2vw, 1.65rem);
	font-weight: 400;
	line-height: 1.2;
}

.prffc-development__title {
	margin: 0;

	color: var(--prffc-color-heading);

	font-size: clamp(2rem, 3.2vw, 2.65rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.05;
}

.prffc-development__text {
	margin-top: clamp(1.5rem, 2.5vw, 2rem);

	color: var(--prffc-color-text);

	font-size: 1rem;
	line-height: 1.3;
}

.prffc-development__text p {
	margin: 0;
}

.prffc-development__text p + p {
	margin-top: 1rem;
}

.prffc-development__media {
	position: relative;

	width: 100%;
	margin: 0;

	overflow: hidden;

	aspect-ratio: 3 / 2;
	border-radius: var(--prffc-radius);

	background: #efefef;
}

.prffc-development__image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;
}


/* =========================================================
   Leistungsangebot
   ========================================================= */

.prffc-services {
	padding:
		0
		var(--prffc-page-gutter)
		var(--prffc-section-space);

	scroll-margin-top:
		calc(
			var(--prffc-header-height-scrolled) +
			2rem
		);
}

.prffc-services__header {
	width: min(100%, 42rem);

	margin-bottom:
		clamp(3rem, 5vw, 4.5rem);
}

.prffc-services__eyebrow {
	margin: 0 0 1rem;

	color: var(--prffc-color-blue);

	font-size: clamp(1.25rem, 2vw, 1.65rem);
	font-weight: 400;
	line-height: 1.2;
}

.prffc-services__title {
	margin: 0;

	color: var(--prffc-color-blue);

	font-size: clamp(2.2rem, 3.5vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.04;

	text-wrap: balance;
}

.prffc-services__grid {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 1.25rem;

	margin: 0;
	padding: 0;

	list-style: none;
}

.prffc-services__item {
	min-width: 0;
}

.prffc-service-card {
	height: 100%;
	min-height: 17rem;

	padding:
		clamp(2rem, 3vw, 2.5rem)
		clamp(1.75rem, 3vw, 2rem);

	border-radius: var(--prffc-radius);

	background: var(--prffc-color-card);
}

.prffc-service-card__title {
	max-width: 17rem;
	margin: 0;

	color: var(--prffc-color-blue);

	font-size: clamp(1.55rem, 2.2vw, 1.85rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.05;
}

.prffc-service-card__text {
	max-width: 18rem;

	margin:
		clamp(1.5rem, 2.5vw, 2rem)
		0
		0;

	color: var(--prffc-color-text);

	font-size: 1rem;
	line-height: 1.3;
}


/* =========================================================
   Nächster Schritt
   ========================================================= */

.prffc-next-step {
	position: relative;
	z-index: 2;

	padding:
		0
		var(--prffc-page-gutter);
}

.prffc-next-step__inner {
	position: relative;
	isolation: isolate;

	display: flex;
	align-items: center;

	min-height:
		clamp(31rem, 50vw, 34.75rem);

	overflow: hidden;

	border-radius: var(--prffc-radius);
	background: var(--prffc-color-navy);
	color: var(--prffc-color-white);
}

.prffc-next-step__image {
	position: absolute;
	z-index: -2;
	inset: 0;

	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;
}

.prffc-next-step__overlay {
	position: absolute;
	z-index: -1;
	inset: 0;

	background:
		linear-gradient(
			90deg,
			rgba(0, 43, 62, 0.92) 0%,
			rgba(0, 43, 62, 0.76) 48%,
			rgba(0, 43, 62, 0.18) 100%
		);

	pointer-events: none;
}

.prffc-next-step__content {
	width: min(100%, 39rem);

	padding:
		clamp(3rem, 7vw, 5rem)
		clamp(2rem, 7vw, 4.5rem);
}

.prffc-next-step__title {
	margin: 0;

	color: var(--prffc-color-white);

	font-size: clamp(2.75rem, 5vw, 4rem);
	font-weight: 800;
	letter-spacing: -0.05em;
	line-height: 0.98;

	text-wrap: balance;
}

.prffc-next-step__text {
	max-width: 35rem;

	margin:
		clamp(1.5rem, 3vw, 2rem)
		0
		0;

	font-size: clamp(1.1rem, 2vw, 1.35rem);
	font-weight: 700;
	line-height: 1.25;
}


/* =========================================================
   Verlinkte Leistungskarten
   ========================================================= */

.prffc-service-card {
	position: relative;

	transition:
		transform var(--prffc-transition),
		background-color var(--prffc-transition),
		box-shadow var(--prffc-transition);
}

.prffc-service-card__title-link {
	color: inherit;
	text-decoration: none;
}


/*
 * Vergrößert die klickbare Fläche auf die gesamte Karte.
 */

.prffc-service-card__title-link::after {
	content: "";

	position: absolute;
	inset: 0;
}


.prffc-service-card:hover {
	transform: translateY(-0.25rem);

	background: var(--prffc-color-white);

	box-shadow:
		0 1.25rem 3rem rgba(0, 43, 62, 0.1);
}


.prffc-service-card:focus-within {
	outline: 0.2rem solid var(--prffc-color-blue);
	outline-offset: 0.2rem;

	transform: translateY(-0.15rem);
}


.prffc-service-card__title-link:focus-visible {
	outline: none;
}


.prffc-services__empty {
	margin: 0;
	padding: 1.5rem;

	border-radius: var(--prffc-radius);

	background: var(--prffc-color-light-blue);
	color: var(--prffc-color-navy);
}





/* =========================================================
   Über Proffac
   ========================================================= */

.prffc-about {
	position: relative;
	z-index: 1;

	margin-top:
		clamp(-5rem, -6vw, -4rem);

	padding:
		clamp(10rem, 15vw, 12rem)
		var(--prffc-page-gutter)
		clamp(7rem, 12vw, 10rem);

	background: var(--prffc-color-blue-dark);
	color: var(--prffc-color-white);

	scroll-margin-top:
		var(--prffc-header-height-scrolled);
}

.prffc-about__inner {
	display: grid;

	grid-template-columns:
		minmax(16rem, 20rem)
		minmax(0, 36rem);

	align-items: center;
	justify-content: space-between;

	gap: clamp(3rem, 8vw, 6rem);
}

.prffc-about__media {
	position: relative;

	width: 100%;
	margin: 0;

	overflow: hidden;

	aspect-ratio: 1;
	border-radius: var(--prffc-radius);

	background: rgba(255, 255, 255, 0.08);
}

.prffc-about__image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;
}

.prffc-about__content {
	min-width: 0;
}

.prffc-about__title {
	max-width: 31rem;
	margin: 0;

	color: var(--prffc-color-white);

	font-size: clamp(1.6rem, 3vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.08;

	text-wrap: balance;
}

.prffc-about__text {
	max-width: 36rem;

	margin-top:
		clamp(1.75rem, 3vw, 2.25rem);

	font-size: clamp(0.95rem, 1.5vw, 1rem);
	line-height: 1.4;
}

.prffc-about__text p {
	margin: 0;
}

.prffc-about__text p + p {
	margin-top: 1rem;
}

.prffc-about__signature {
	width: min(100%, 17rem);

	margin-top:
		clamp(2rem, 4vw, 3rem);
}

.prffc-about__signature-image {
	display: block;

	width: 100%;
	height: auto;

	object-fit: contain;
	object-position: left center;
}


/* =========================================================
   Signatur
   ========================================================= */

.prffc-about__signature {
	display: flex;
	align-items: center;
	justify-content: flex-start;

	width: auto;
	height: clamp(3.5rem, 6vw, 5.5rem);

	margin-top: clamp(1.25rem, 3vw, 2rem);

	line-height: 0;
}

.prffc-about__signature-image {
	display: block;

	width: auto;
	max-width: min(100%, 17rem);
	height: 100%;

	aspect-ratio: auto;

	object-fit: contain;
	object-position: left center;
}


/* =========================================================
   Reveal-Animation
   ========================================================= */

.has-js .prffc-reveal {
	opacity: 0;
	filter: blur(0.4rem);

	transform:
		translate3d(0, 2.5rem, 0)
		scale(0.985);

	transition:
		opacity 700ms ease,
		filter 800ms ease,
		transform 900ms var(--prffc-reveal-easing);

	transition-delay:
		var(--prffc-reveal-delay, 0ms);

	will-change:
		opacity,
		filter,
		transform;
}

.has-js .prffc-reveal.is-visible {
	opacity: 1;
	filter: blur(0);

	transform:
		translate3d(0, 0, 0)
		scale(1);
}

.has-js .prffc-reveal.is-revealed {
	will-change: auto;
}


/* =========================================================
   Tablet bis 1000 Pixel
   ========================================================= */

@media (max-width: 62.5rem) {
	.prffc-services__grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

	.prffc-service-card {
		min-height: 15.5rem;
	}

	.prffc-service-card__title,
	.prffc-service-card__text {
		max-width: none;
	}
}


/* =========================================================
   Tablet bis 900 Pixel
   ========================================================= */

@media (max-width: 56.25rem) {
	.prffc-development__inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.prffc-development__content {
		max-width: 38rem;
	}

	.prffc-development__title br {
		display: none;
	}

	.prffc-development__media {
		aspect-ratio: 16 / 10;
	}

	.prffc-next-step__inner {
		min-height: 32rem;
	}

	.prffc-next-step__content {
		width: min(100%, 36rem);
	}

	.prffc-about__inner {
		grid-template-columns:
			minmax(13rem, 16rem)
			minmax(0, 1fr);

		gap: 3rem;
	}
}


/* =========================================================
   Mobile bis 768 Pixel
   ========================================================= */

@media (max-width: 47.99rem) {
	:root {
		--prffc-section-space: 4rem;

		--prffc-header-height: 7.5rem;
		--prffc-header-height-scrolled: 5.25rem;

		--prffc-logo-width: clamp(9rem, 40vw, 12rem);
		--prffc-logo-width-scrolled:
			clamp(7.5rem, 32vw, 9.5rem);

		--prffc-header-padding-y: 1rem;
		--prffc-header-padding-y-scrolled: 0.65rem;
	}

	.prffc-menu-toggle__label {
		display: none;
	}

	.prffc-header__actions {
		gap: 0.75rem;
	}

	.prffc-button--contact {
		min-height: 2.65rem;
		padding-inline: 1rem;
	}

	.prffc-stage {
		min-height:
			calc(
				100svh -
				var(--prffc-header-height) -
				2rem
			);
	}

	.prffc-stage::after {
		inset-block-start: 18%;
	}

	.prffc-stage__content {
		padding:
			4rem
			clamp(1.25rem, 4vw, 3rem)
			3rem;
	}

	.prffc-stage__break {
		display: none;
	}

	.prffc-stage__actions {
		flex-direction: column;
		align-items: stretch;
	}
}


/* =========================================================
   Mobile bis 700 Pixel
   ========================================================= */

@media (max-width: 43.75rem) {
	.prffc-services__header {
		margin-bottom: 2.5rem;
	}

	.prffc-services__title br {
		display: none;
	}

	.prffc-services__grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.prffc-service-card {
		min-height: 0;
		padding: 1.75rem;
	}

	.prffc-service-card__text {
		margin-top: 1.25rem;
	}

	.prffc-next-step__inner {
		align-items: end;
		min-height: 36rem;
	}

	.prffc-next-step__overlay {
		background:
			linear-gradient(
				to bottom,
				rgba(0, 43, 62, 0.08) 0%,
				rgba(0, 43, 62, 0.65) 42%,
				rgba(0, 43, 62, 0.96) 100%
			);
	}

	.prffc-next-step__content {
		width: 100%;
		padding: 2rem 1.5rem 2.5rem;
	}

	.prffc-next-step__title br {
		display: none;
	}

	.prffc-next-step__text {
		line-height: 1.35;
	}

	.prffc-button--next-step {
		width: 100%;
	}

	.prffc-about {
		margin-top: -3rem;

		padding:
			7rem
			var(--prffc-page-gutter)
			5rem;
	}

	.prffc-about__inner {
		grid-template-columns: 1fr;
		justify-content: initial;

		gap: 2.5rem;
	}

	.prffc-about__media {
		width: min(100%, 26rem);
	}

	.prffc-about__title,
	.prffc-about__text {
		max-width: none;
	}

	.prffc-about__signature {
		width: min(70%, 15rem);
	}
}


/* =========================================================
   Kleine Viewports bis 500 Pixel
   ========================================================= */

@media (max-width: 31.25rem) {
	.prffc-development__eyebrow {
		font-size: 1.15rem;
	}

	.prffc-development__title {
		font-size: clamp(1.9rem, 9vw, 2.4rem);
	}

	.prffc-next-step__inner {
		min-height: 34rem;
	}

	.prffc-next-step__title {
		font-size: clamp(2.4rem, 12vw, 3rem);
	}

	.prffc-about__media {
		/* aspect-ratio: 4 / 3; */
	}
}


/* =========================================================
   Reduzierte Bewegungen
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
	}

	.has-js .prffc-reveal {
		opacity: 1;
		filter: none;
		transform: none;
		transition: none;
	}
}





/* =========================================================
   Entwicklungsziele
   ========================================================= */

.prffc-development-focus {
	padding:
		var(--prffc-section-space)
		var(--prffc-page-gutter);

	background: #eeeeee;

	scroll-margin-top:
		calc(
			var(--prffc-header-height-scrolled) +
			2rem
		);
}

.prffc-development-focus__inner {
	width: min(
		100%,
		var(--prffc-content-width)
	);

	margin-inline: auto;
}


/* =========================================================
   Kartenraster
   ========================================================= */

.prffc-development-focus__grid {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: clamp(1rem, 2vw, 1.25rem);

	margin: 0;
	padding: 0;

	list-style: none;
}

.prffc-development-focus__item {
	min-width: 0;
}


/* =========================================================
   Karte
   ========================================================= */

.prffc-development-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;

	height: 100%;
	min-height: 15.25rem;

	padding:
		clamp(2.25rem, 4vw, 3rem)
		clamp(2rem, 4vw, 3rem);

	border-radius: var(--prffc-radius);

	background: var(--prffc-color-white);
	color: var(--prffc-color-text);
}

.prffc-development-card__title {
	max-width: 20rem;
	margin: 0;

	color: var(--prffc-color-blue);

	font-size: clamp(1.45rem, 2.3vw, 1.8rem);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.08;

	text-wrap: balance;
}

.prffc-development-card__text {
	max-width: 25rem;

	margin:
		clamp(1.5rem, 3vw, 2rem)
		0
		0;

	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}


/* =========================================================
   CTA-Karte
   ========================================================= */

.prffc-development-card--cta {
	background: var(--prffc-color-blue);
	color: var(--prffc-color-white);
}

.prffc-development-card--cta
.prffc-development-card__title {
	color: var(--prffc-color-white);
}

.prffc-development-card--cta
.prffc-development-card__text {
	color: var(--prffc-color-white);
}

.prffc-development-card__button {
	margin-top: auto;
	padding-top: 0.9rem;
	padding-bottom: 0.9rem;

	background: var(--prffc-color-white);
	color: var(--prffc-color-blue-dark);
}

.prffc-development-card__button:hover {
	background: var(--prffc-color-light-blue);
	color: var(--prffc-color-navy);
}

.prffc-development-card__button:focus-visible {
	outline-color: var(--prffc-color-white);
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 43.75rem) {
	.prffc-development-focus__grid {
		grid-template-columns: 1fr;
	}

	.prffc-development-card {
		min-height: 0;
		padding: 2rem 1.75rem;
	}

	.prffc-development-card__title,
	.prffc-development-card__text {
		max-width: none;
	}

	.prffc-development-card__button {
		width: 100%;
		margin-top: 2rem;
	}
}



/* =========================================================
   CTA-Karte
   ========================================================= */

.prffc-development-card--cta {
	display: grid;

	grid-template-rows:
		auto
		auto
		1fr;

	align-items: start;

	background: var(--prffc-color-blue);
	color: var(--prffc-color-white);
}

.prffc-development-card--cta
.prffc-development-card__title {
	color: var(--prffc-color-white);
}

.prffc-development-card--cta
.prffc-development-card__text {
	color: var(--prffc-color-white);
}

.prffc-development-card__button {
	align-self: end;
	justify-self: start;

	margin-top: clamp(2rem, 4vw, 3rem);

	padding-top: 0.9rem;
	padding-bottom: 0.9rem;

	background: var(--prffc-color-white);
	color: var(--prffc-color-blue-dark);
}

.prffc-development-card__button:hover {
	background: var(--prffc-color-light-blue);
	color: var(--prffc-color-navy);
}

.prffc-development-card__button:focus-visible {
	outline-color: var(--prffc-color-white);
}



/* =========================================================
   FAQ
   ========================================================= */

.prffc-faq {
	padding:
		var(--prffc-section-space)
		var(--prffc-page-gutter);

	background: var(--prffc-color-white);

	scroll-margin-top:
		calc(
			var(--prffc-header-height-scrolled) +
			2rem
		);
}

.prffc-faq__title {
	margin:
		0
		0
		clamp(2.5rem, 5vw, 4rem);

	color: var(--prffc-color-blue);

	font-size: clamp(2rem, 3.5vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.05;
}

.prffc-faq__list {
	display: grid;
	gap: clamp(1rem, 2vw, 1.4rem);

	padding-left: clamp(2.75rem, 5vw, 4rem);
}


/* =========================================================
   Einzelner FAQ-Eintrag
   ========================================================= */

.prffc-faq__item {
	position: relative;

	border-radius: var(--prffc-radius);

	background: var(--prffc-color-white);

	box-shadow:
		0 1rem 2.5rem rgba(0, 43, 62, 0.11);
}

.prffc-faq__question {
	position: relative;

	display: flex;
	align-items: center;

	min-height: 5.25rem;
	padding:
		1.5rem
		clamp(1.5rem, 3vw, 2rem);

	color: var(--prffc-color-blue);

	font-size: clamp(1.2rem, 2.1vw, 1.55rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.15;

	list-style: none;
	cursor: pointer;
}

.prffc-faq__question::-webkit-details-marker {
	display: none;
}

.prffc-faq__question::marker {
	display: none;
	content: "";
}

.prffc-faq__question:hover {
	color: var(--prffc-color-blue-dark);
}

.prffc-faq__question:focus-visible {
	outline: 0.2rem solid var(--prffc-color-blue);
	outline-offset: 0.3rem;
}


/* =========================================================
   Plus- und Kreuz-Symbol
   ========================================================= */

.prffc-faq__icon {
	position: absolute;
	top: 50%;
	left: clamp(-3.25rem, -4vw, -2.75rem);

	display: block;

	width: 1.5rem;
	height: 1.5rem;

	color: var(--prffc-color-blue);

	transform:
		translateY(-50%)
		rotate(0deg);

	transition:
		color var(--prffc-transition),
		transform 400ms var(--prffc-reveal-easing);
}

.prffc-faq__icon::before,
.prffc-faq__icon::after {
	content: "";

	position: absolute;
	top: 50%;
	left: 50%;

	display: block;

	width: 1.4rem;
	height: 0.18rem;

	border-radius: 999px;
	background: currentColor;

	transform:
		translate(-50%, -50%);
}

.prffc-faq__icon::after {
	transform:
		translate(-50%, -50%)
		rotate(90deg);
}


/*
 * Das geschlossene Plus wird beim Öffnen
 * um 45 Grad zum Kreuz gedreht.
 */

.prffc-faq__item[open]
.prffc-faq__icon {
	color: #c3c8cb;

	transform:
		translateY(-50%)
		rotate(45deg);
}


/* =========================================================
   FAQ-Antwort
   ========================================================= */

.prffc-faq__answer {
	padding:
		0
		clamp(1.5rem, 3vw, 2rem)
		clamp(1.75rem, 3vw, 2.25rem);

	color: #4a4a4a;

	font-size: 1rem;
	line-height: 1.55;

	animation:
		prffc-faq-answer-in
		350ms var(--prffc-reveal-easing);
}

.prffc-faq__answer p {
	max-width: 61rem;
	margin: 0;
}

@keyframes prffc-faq-answer-in {
	from {
		opacity: 0;

		transform:
			translate3d(0, -0.5rem, 0);
	}

	to {
		opacity: 1;

		transform:
			translate3d(0, 0, 0);
	}
}


/* =========================================================
   Lade- und Fehlermeldung
   ========================================================= */

.prffc-faq__message {
	margin: 0;
	padding: 1.5rem 2rem;

	border-radius: var(--prffc-radius);

	background: var(--prffc-color-card);
	color: var(--prffc-color-text);
}


/* =========================================================
   FAQ Mobile
   ========================================================= */

@media (max-width: 43.75rem) {
	.prffc-faq__list {
		padding-left: 0;
	}

	.prffc-faq__question {
		align-items: flex-start;
		gap: 1rem;

		padding:
			1.4rem
			1.25rem;
	}

	.prffc-faq__icon {
		position: relative;
		top: auto;
		left: auto;

		flex: 0 0 auto;

		width: 1.25rem;
		height: 1.25rem;
		margin-top: 0.05rem;

		transform: rotate(0deg);
	}

	.prffc-faq__icon::before,
	.prffc-faq__icon::after {
		width: 1.2rem;
	}

	.prffc-faq__item[open]
	.prffc-faq__icon {
		transform: rotate(45deg);
	}

	.prffc-faq__answer {
		padding:
			0
			1.25rem
			1.5rem;

		line-height: 1.5;
	}
}


/* =========================================================
   Reduzierte Bewegungen
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.prffc-faq__icon {
		transition: none;
	}

	.prffc-faq__answer {
		animation: none;
	}
}

.prffc-faq__answer > p {
	margin-bottom: 10px;
}
.prffc-faq__answer > p:last-child {
	margin-bottom: 0
}



/* =========================================================
   Kontakt
   ========================================================= */

.prffc-contact {
	padding:
		var(--prffc-section-space)
		var(--prffc-page-gutter);

	background: var(--prffc-color-white);

	scroll-margin-top:
		calc(
			var(--prffc-header-height-scrolled) +
			2rem
		);
}

.prffc-contact__title {
	max-width: 48rem;
	margin: 0;

	color: var(--prffc-color-blue);

	font-size: clamp(2.25rem, 4vw, 3.25rem);
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 1.02;

	text-wrap: balance;
}

.prffc-contact__title-line {
	display: block;
}

.prffc-contact__title-line--light {
	color: #62b3df;
}

.prffc-contact__actions {
	display: flex;
	flex-wrap: wrap;

	gap: clamp(0.75rem, 2vw, 1rem);

	margin-top: clamp(2rem, 4vw, 2.75rem);
}

.prffc-contact__button {
	gap: 0.35rem;

	min-height: 3.5rem;
	padding: 1rem clamp(1.25rem, 3vw, 1.75rem);

	font-size: clamp(1rem, 1.6vw, 1.2rem);
}

.prffc-contact__button-label {
	font-weight: 800;
}

.prffc-contact__button-value {
	font-weight: 400;
}

.prffc-contact__button--phone {
	background: var(--prffc-color-blue-dark);
	color: var(--prffc-color-white);
}

.prffc-contact__button--phone:hover {
	background: var(--prffc-color-navy);
}

.prffc-contact__button--email {
	background: var(--prffc-color-blue);
	color: var(--prffc-color-white);
}

.prffc-contact__button--email:hover {
	background: var(--prffc-color-blue-dark);
}


/* =========================================================
   Footer
   ========================================================= */

.prffc-footer {
	position: relative;
	isolation: isolate;

	overflow: hidden;

	padding:
		clamp(4.5rem, 8vw, 7rem)
		var(--prffc-page-gutter)
		clamp(2rem, 4vw, 3rem);

	background: var(--prffc-color-blue-dark);
	color: var(--prffc-color-white);
}


/* =========================================================
   Innerer Container
   ========================================================= */

.prffc-footer__inner {
	position: relative;
	z-index: 2;

	width: min(
		100%,
		var(--prffc-content-width)
	);

	margin-inline: auto;
}


/* =========================================================
   Footer-Spalten
   ========================================================= */

.prffc-footer__grid {
	display: grid;

	grid-template-columns:
		minmax(17rem, 1.3fr)
		minmax(8rem, 0.55fr)
		minmax(19rem, 1.2fr);

	align-items: start;

	column-gap: clamp(2rem, 5vw, 4.5rem);
	row-gap: clamp(2.5rem, 5vw, 4rem);
}


/* =========================================================
   Navigation
   ========================================================= */

.prffc-footer__nav {
	min-width: 0;
}

.prffc-footer__heading {
	margin: 0 0 1.25rem;

	color: var(--prffc-color-white);

	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
}

.prffc-footer__list {
	display: grid;
	gap: 0.9rem;

	margin: 0;
	padding: 0;

	list-style: none;
}

.prffc-footer__link {
	display: inline-flex;

	color: var(--prffc-color-white);

	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;

	transition:
		color var(--prffc-transition),
		transform var(--prffc-transition);
}

.prffc-footer__link:hover {
	color: var(--prffc-color-light-blue);
	transform: translateX(0.2rem);
}

.prffc-footer__link:focus-visible {
	outline: 0.2rem solid var(--prffc-color-white);
	outline-offset: 0.3rem;
	border-radius: 0.15rem;
}


/* =========================================================
   Kontakt- und Adresskarte
   ========================================================= */

.prffc-footer__contact {
	position: relative;

	width: 100%;
	min-width: 0;

	padding:
		clamp(1.75rem, 3vw, 2.25rem)
		clamp(1.5rem, 3vw, 2rem);

	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--prffc-radius);

	background: #086a9f;

	box-shadow:
		0 1.5rem 3.5rem rgba(0, 28, 45, 0.24),
		0 0.3rem 0.9rem rgba(0, 28, 45, 0.12);
}

.prffc-footer__address {
	margin: 0;

	color: var(--prffc-color-white);

	font-size: 1rem;
	font-style: normal;
	line-height: 1.5;
}

.prffc-footer__company {
	display: block;

	margin-bottom: 0.2rem;

	font-weight: 700;
}

.prffc-footer__company-detail {
	font-weight: 400;
	font-style: italic;
}

.prffc-footer__address-lines {
	margin-top: 0.15rem;
}

.prffc-footer__contact-links {
	display: grid;
	gap: 0.2rem;

	margin-top: 1.25rem;
}

.prffc-footer__contact-link {
	width: fit-content;

	color: var(--prffc-color-white);

	font-weight: 500;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.2em;

	transition:
		color var(--prffc-transition),
		opacity var(--prffc-transition);
}

.prffc-footer__contact-link:hover {
	color: var(--prffc-color-light-blue);
}

.prffc-footer__contact-link:focus-visible {
	outline: 0.2rem solid var(--prffc-color-white);
	outline-offset: 0.25rem;
	border-radius: 0.15rem;
}


/* =========================================================
   Unterer Footer-Bereich
   ========================================================= */

.prffc-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;

	margin-top: clamp(4rem, 8vw, 7rem);
}


/* =========================================================
   Rechtliche Links
   ========================================================= */

.prffc-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem;

	margin: 0;
	padding: 0;

	list-style: none;
}

.prffc-footer__legal-item {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.prffc-footer__legal-item:not(:last-child)::after {
	content: "";

	width: 1px;
	height: 1rem;

	background: rgba(255, 255, 255, 0.65);
}

.prffc-footer__legal-link {
	color: var(--prffc-color-white);

	font-size: 0.85rem;
	line-height: 1.3;
	text-decoration: none;
}

.prffc-footer__legal-link:hover {
	text-decoration: underline;
	text-underline-offset: 0.2rem;
}

.prffc-footer__legal-link:focus-visible {
	outline: 0.2rem solid var(--prffc-color-white);
	outline-offset: 0.25rem;
	border-radius: 0.15rem;
}


/* =========================================================
   Transparentes Logo im Hintergrund
   ========================================================= */

.prffc-footer__background-logo {
	position: absolute;
	  z-index: 1;
	  right: max( var(--prffc-page-gutter), calc( (100vw - var(--prffc-content-width)) / 2 ) );
	  bottom: clamp(2rem, 4vw, 3.5rem);
	  display: block;
	  width: min(48vw, 36rem);
	  height: auto;
	  opacity: .3;
	  pointer-events: none;
	  user-select: none;
	  mix-blend-mode: multiply;
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 62.5rem) {
	.prffc-footer__grid {
		grid-template-columns:
			minmax(0, 1.35fr)
			minmax(9rem, 0.65fr);

		column-gap: 3.5rem;
		row-gap: 3.5rem;
	}

	.prffc-footer__contact {
		grid-column: 1 / -1;

		width: min(100%, 36rem);
	}

	.prffc-footer__background-logo {
		width: min(58vw, 32rem);
	}
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 43.75rem) {
	.prffc-footer {
		padding-top: 4rem;
	}

	.prffc-footer__grid {
		grid-template-columns: 1fr;
		gap: 2.75rem;
	}

	.prffc-footer__contact {
		grid-column: auto;

		width: 100%;
	}

	.prffc-footer__bottom {
		align-items: flex-start;
		flex-direction: column;

		margin-top: 3.5rem;
	}

	.prffc-footer__background-logo {
		right: var(--prffc-page-gutter);
		bottom: 2rem;

		width: min(82vw, 25rem);
		opacity: 0.4;
	}
}


/* =========================================================
   Kleine Smartphones
   ========================================================= */

@media (max-width: 31.25rem) {
	.prffc-footer__contact {
		padding: 1.5rem;
	}

	.prffc-footer__legal {
		gap: 0.5rem;
	}

	.prffc-footer__legal-item {
		gap: 0.5rem;
	}
}




/* =========================================================
   Stage – mobile Darstellung
   Bild oben, Inhalt darunter
   ========================================================= */

@media (max-width: 47.99rem) {
	.prffc-stage {
		display: flex;
		flex-direction: column;
		align-items: stretch;

		min-height: 0;

		margin-bottom: clamp(4rem, 12vw, 6rem);

		overflow: hidden;

		background: var(--prffc-color-white);
		color: var(--prffc-color-blue);

		box-shadow:
			0 1.5rem 3.5rem rgba(0, 43, 62, 0.08);
	}


	/* Bild wird wieder Teil des normalen Dokumentflusses */

	.prffc-stage__media {
		position: relative;
		z-index: auto;
		inset: auto;

		flex: 0 0 auto;

		width: 100%;
		height: auto;

		aspect-ratio: 4 / 3;

		overflow: hidden;

		background: var(--prffc-color-stage-placeholder);
	}


	.prffc-stage__image {
		display: block;

		width: 100%;
		height: 100%;

		object-fit: cover;
		object-position: center;
	}


	/* Der Verlauf über dem gesamten Element wird mobil entfernt */

	.prffc-stage::after {
		display: none;
	}


	/* Textbereich unterhalb des Bildes */

	.prffc-stage__content {
		width: 100%;
		margin: 0;

		padding:
			clamp(2rem, 8vw, 3rem)
			clamp(1.25rem, 6vw, 2rem)
			clamp(2rem, 8vw, 3rem);

		background: var(--prffc-color-white);

		text-align: left;
	}


	/* Hauptüberschrift deutlich kleiner */

	.prffc-stage__title {
		margin: 0;

		color: var(--prffc-color-blue);

		font-size: clamp(2.25rem, 10vw, 3.25rem);
		font-weight: 800;
		letter-spacing: -0.055em;
		line-height: 0.98;

		text-wrap: balance;
	}


	/* Erzwungener Zeilenumbruch mobil nicht notwendig */

	.prffc-stage__break {
		display: none;
	}


	.prffc-stage__claim {
		margin: 1.25rem 0 0;

		color: var(--prffc-color-blue-dark);

		font-size: clamp(1.25rem, 5.8vw, 1.65rem);
		font-weight: 800;
		letter-spacing: -0.035em;
		line-height: 1.1;
	}


	.prffc-stage__intro {
		max-width: 34rem;

		margin: 1rem 0 0;

		color: var(--prffc-color-navy);

		font-size: 1rem;
		font-weight: 500;
		line-height: 1.45;
	}


	/* Buttons untereinander */

	.prffc-stage__actions {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0.75rem;

		margin-top: 1.5rem;
	}


	.prffc-stage__actions .prffc-button {
		width: 100%;
		min-height: 3.2rem;
	}


	/* Sekundärer Button etwas leichter */

	.prffc-stage__actions .prffc-button--secondary {
		background: var(--prffc-color-light-blue);
		color: var(--prffc-color-blue-dark);
	}


	.prffc-stage__actions .prffc-button--secondary:hover {
		background: var(--prffc-color-blue-dark);
		color: var(--prffc-color-white);
	}
}


/* =========================================================
   Stage – sehr kleine Smartphones
   ========================================================= */

@media (max-width: 31.25rem) {
	.prffc-stage__media {
		aspect-ratio: 5 / 4;
	}

	.prffc-stage__content {
		padding:
			1.75rem
			1.25rem
			2rem;
	}

	.prffc-stage__title {
		font-size: clamp(2rem, 11vw, 2.65rem);
	}

	.prffc-stage__claim {
		font-size: 1.2rem;
	}
}


/* =========================================================
   Kontakt-Buttons
   ========================================================= */

.prffc-contact__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.75rem;

	margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.prffc-contact__button {
	display: inline-flex;
	align-items: baseline;
	justify-content: flex-start;
	gap: 0.35rem;

	width: fit-content;
	max-width: 100%;
	min-height: 3.4rem;

	padding: 1rem 1.5rem;

	border-radius: var(--prffc-radius);

	color: var(--prffc-color-white);

	line-height: 1.25;
	text-decoration: none;

	transition:
		background-color var(--prffc-transition),
		transform var(--prffc-transition),
		box-shadow var(--prffc-transition);
}

.prffc-contact__button--phone {
	background: var(--prffc-color-blue-dark);
}

.prffc-contact__button--email {
	background: var(--prffc-color-blue);
}

.prffc-contact__button-label {
	font-weight: 800;
}

.prffc-contact__button-value {
	font-weight: 400;
}

.prffc-contact__button:hover {
	transform: translateY(-0.15rem);

	box-shadow:
		0 0.8rem 1.8rem rgba(0, 43, 62, 0.14);
}

.prffc-contact__button:focus-visible {
	outline: 0.2rem solid var(--prffc-color-blue);
	outline-offset: 0.25rem;
}


/* =========================================================
   Kontakt-Buttons – mobile Darstellung
   ========================================================= */

@media (max-width: 43.75rem) {
	.prffc-contact__actions {
		flex-direction: column;
		align-items: flex-start;

		width: 100%;
	}

	.prffc-contact__button {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.2rem;

		width: auto;
		min-width: min(100%, 17rem);
		min-height: 0;

		padding:
			0.85rem
			1.15rem;
	}

	.prffc-contact__button-label {
		font-size: 0.8rem;
		line-height: 1.2;
	}

	.prffc-contact__button-value {
		font-size: 1rem;
		line-height: 1.3;
	}
}


/* =========================================================
   Sehr kleine Smartphones
   ========================================================= */

@media (max-width: 31.25rem) {
	.prffc-contact__button {
		min-width: 0;
		max-width: 100%;
	}

	.prffc-contact__button-value {
		overflow-wrap: anywhere;
	}
}



@media (min-width: 48rem) {
	body:not(.is-scrolled) .prffc-logo {
		transform: translate(-20px, 0);
	}
}

.prffc-logo__image {
	transition:
		width var(--prffc-transition),
		max-height var(--prffc-transition),
		transform var(--prffc-transition);
}



/* =========================================================
   WordPress-Header
   ========================================================= */

.prffc-header__inner,
.prffc-header__actions,
.prffc-logo,
.prffc-menu-toggle {
	min-width: 0;
}


/*
 * WordPress-Menüeinträge
 */

.prffc-menu__list .menu-item {
	margin: 0;
	padding: 0;
}


/*
 * Aktiver Menüpunkt
 */

.prffc-menu__list .current-menu-item > a,
.prffc-menu__list .current-menu-ancestor > a,
.prffc-menu__list a[aria-current="page"] {
	color: var(--prffc-color-blue);
}


/*
 * Fallback für deaktiviertes JavaScript:
 * Navigation sichtbar lassen und Burger ausblenden.
 */

html:not(.has-js) .prffc-menu-toggle {
	display: none;
}

html:not(.has-js) .prffc-menu {
	position: static;

	visibility: visible;
	opacity: 1;

	transform: none;
}


/*
 * WordPress-Adminleiste berücksichtigen.
 */

.admin-bar .prffc-header {
	top: 32px;
}

@media (max-width: 48.875rem) {
	.admin-bar .prffc-header {
		top: 46px;
	}
}

@media (max-width: 37.5rem) {
	#wpadminbar {
		position: fixed;
	}
}



.prffc-footer__company,
.prffc-footer__address-lines {
	margin: 0;
}

.prffc-footer__address-lines {
	margin-top: 0.25rem;
}

.prffc-footer__empty {
	margin: 0;

	color: rgba(255, 255, 255, 0.72);

	font-size: 0.9rem;
	line-height: 1.4;
}



body .prffc-stage .prffc-stage__title {
	color: var(--prffc-color-white);
}
@media (max-width: 47.99rem) {
	body .prffc-stage .prffc-stage__title {
		color: var(--prffc-color-blue);
	}
}



/* =========================================================
   Leistungsdetailseite
   ========================================================= */




/* =========================================================
      Leistungsdetailseite
      ========================================================= */
   
   .prffc-service-detail {
	   --prffc-service-content-width: 52rem;
	   --prffc-adminbar-offset: 0px;
   
	   position: relative;
   
	   background: var(--prffc-color-white);
	   color: var(--prffc-color-navy);
   }
   
   
   
   /* =========================================================
      Hero
      ========================================================= */
   
   .prffc-service-hero {
	   position: relative;
   
	   padding:
		   clamp(3.5rem, 7vw, 7rem)
		   var(--prffc-page-gutter)
		   clamp(4rem, 8vw, 7rem);
   
	   overflow: hidden;
   
	   background:
		   linear-gradient(
			   135deg,
			   #f7fbfd 0%,
			   #edf6fa 55%,
			   #e4f1f7 100%
		   );
   }
   
   .prffc-service-hero::before {
	   content: "";
   
	   position: absolute;
	   inset:
		   auto
		   -8rem
		   -14rem
		   auto;
   
	   width: clamp(20rem, 42vw, 38rem);
	   aspect-ratio: 1;
   
	   border-radius: 50%;
   
	   background:
		   radial-gradient(
			   circle,
			   rgba(0, 119, 185, 0.11) 0%,
			   rgba(0, 119, 185, 0) 70%
		   );
   
	   pointer-events: none;
   }
   
   .prffc-service-hero__inner {
	   position: relative;
	   z-index: 1;
   
	   display: grid;
   
	   grid-template-columns:
		   minmax(0, 0.92fr)
		   minmax(22rem, 1.08fr);
   
	   align-items: center;
   
	   width: min(
		   100%,
		   var(--prffc-container-width)
	   );
   
	   margin-inline: auto;
   
	   gap: clamp(3rem, 7vw, 7rem);
   }
   
   
   
   /* Hero ohne Beitragsbild */
   
   .prffc-service-hero--without-image
   .prffc-service-hero__inner {
	   grid-template-columns: 1fr;
   }
   
   .prffc-service-hero--without-image
   .prffc-service-hero__content {
	   max-width: 58rem;
   }
   
   
   
   /* =========================================================
      Breadcrumb
      ========================================================= */
   
   .prffc-service-breadcrumb {
	   margin-bottom: clamp(2rem, 4vw, 3.25rem);
   }
   
   .prffc-service-breadcrumb__list {
	   display: flex;
	   flex-wrap: wrap;
	   align-items: center;
   
	   gap: 0.45rem;
   
	   margin: 0;
	   padding: 0;
   
	   color:
		   rgba(0, 43, 62, 0.66);
   
	   list-style: none;
   
	   font-size: 0.82rem;
	   font-weight: 600;
	   line-height: 1.4;
   }
   
   .prffc-service-breadcrumb__item {
	   display: inline-flex;
	   align-items: center;
   
	   gap: 0.45rem;
   }
   
   .prffc-service-breadcrumb__item:not(:last-child)::after {
	   content: "/";
   
	   color:
		   rgba(0, 43, 62, 0.3);
   }
   
   .prffc-service-breadcrumb a {
	   color: inherit;
	   text-decoration: none;
   
	   transition:
		   color var(--prffc-transition);
   }
   
   .prffc-service-breadcrumb a:hover {
	   color: var(--prffc-color-blue);
	   text-decoration: underline;
	   text-underline-offset: 0.22em;
   }
   
   .prffc-service-breadcrumb a:focus-visible {
	   outline:
		   0.18rem solid
		   var(--prffc-color-blue);
   
	   outline-offset: 0.2rem;
   }
   
   
   
   /* =========================================================
      Hero-Inhalt
      ========================================================= */
   
   .prffc-service-hero__content {
	   min-width: 0;
   }
   
   .prffc-service-hero__eyebrow {
	   margin: 0 0 1rem;
   
	   color: var(--prffc-color-blue);
   
	   font-size: clamp(1rem, 1.6vw, 1.25rem);
	   font-weight: 600;
	   line-height: 1.25;
   }
   
   .prffc-service-hero__title {
	   max-width: 13ch;
   
	   margin: 0;
   
	   color: var(--prffc-color-blue-dark);
   
	   font-size: clamp(3rem, 6vw, 5.8rem);
	   font-weight: 800;
	   letter-spacing: -0.065em;
	   line-height: 0.95;
   
	   overflow-wrap: anywhere;
	   text-wrap: balance;
   }
   
   .prffc-service-hero__intro {
	   max-width: 38rem;
   
	   margin:
		   clamp(1.5rem, 3vw, 2.25rem)
		   0
		   0;
   
	   color:
		   rgba(0, 43, 62, 0.82);
   
	   font-size: clamp(1.05rem, 1.8vw, 1.3rem);
	   font-weight: 500;
	   line-height: 1.5;
   
	   text-wrap: pretty;
   }
   
   .prffc-service-hero__button {
	   margin-top: clamp(2rem, 4vw, 3rem);
   }
   
   
   
   /* =========================================================
      Hero-Bild
      ========================================================= */
   
   .prffc-service-hero__media {
	   position: relative;
   
	   width: 100%;
	   margin: 0;
   
	   overflow: hidden;
   
	   aspect-ratio: 5 / 4;
   
	   border-radius:
		   clamp(
			   var(--prffc-radius),
			   1.5vw,
			   1.2rem
		   );
   
	   background: #dceaf1;
   
	   box-shadow:
		   0 2rem 5rem
		   rgba(0, 43, 62, 0.15);
   }
   
   .prffc-service-hero__media::after {
	   content: "";
   
	   position: absolute;
	   inset: 0;
   
	   background:
		   linear-gradient(
			   to top,
			   rgba(0, 43, 62, 0.16) 0%,
			   rgba(0, 43, 62, 0) 42%
		   );
   
	   pointer-events: none;
   }
   
   .prffc-service-hero__image {
	   display: block;
   
	   width: 100%;
	   height: 100%;
   
	   object-fit: cover;
	   object-position: center;
   }
   
   
   
   /* =========================================================
      Sticky Leistungsnavigation
      ========================================================= */
   
   .prffc-service-switcher {
	   position: sticky;
	   z-index: 40;
   
	   top:
		   calc(
			   var(--prffc-header-height-scrolled) +
			   var(--prffc-adminbar-offset)
		   );
   
	   width: 100%;
   
	   padding:
		   0.85rem
		   var(--prffc-page-gutter);
   
	   border-top:
		   1px solid
		   rgba(0, 43, 62, 0.05);
   
	   border-bottom:
		   1px solid
		   rgba(0, 43, 62, 0.08);
   
	   background:
		   rgba(255, 255, 255, 0.92);
   
	   box-shadow:
		   0 0.8rem 2rem
		   rgba(0, 43, 62, 0.07);
   
	   -webkit-backdrop-filter: blur(1rem);
	   backdrop-filter: blur(1rem);
   }
   
   body.admin-bar .prffc-service-detail {
	   --prffc-adminbar-offset: 32px;
   }
   
   .prffc-service-switcher__inner {
	   display: grid;
   
	   grid-template-columns:
		   auto
		   minmax(0, 1fr)
		   auto;
   
	   align-items: center;
   
	   width: min(
		   100%,
		   var(--prffc-container-width)
	   );
   
	   margin-inline: auto;
   
	   gap: clamp(0.5rem, 1.2vw, 0.85rem);
   }
   
   
   
   /* =========================================================
      Swiper-Viewport
      ========================================================= */
   
   .prffc-service-switcher__swiper {
	   min-width: 0;
	   width: 100%;
   
	   /*
	    * Ohne JavaScript bleibt die Navigation
	    * horizontal scrollbar.
	    */
	   overflow-x: auto;
	   overflow-y: hidden;
   
	   scrollbar-width: none;
   
	   overscroll-behavior-inline: contain;
	   -webkit-overflow-scrolling: touch;
   }
   
   .prffc-service-switcher__swiper::-webkit-scrollbar {
	   display: none;
   }
   
   .prffc-service-switcher__swiper.swiper-initialized {
	   overflow: hidden;
   }
   
   
   
   /* =========================================================
      Swiper-Liste
      ========================================================= */
   
   .prffc-service-switcher__list {
	   display: flex;
	   align-items: stretch;
   
	   width: max-content;
   
	   margin: 0;
	   padding: 0;
   
	   list-style: none;
   }
   
   .prffc-service-switcher__swiper.swiper-initialized
   .prffc-service-switcher__list {
	   width: 100%;
   }
   
   .prffc-service-switcher__item {
	   display: flex;
   
	   flex: 0 0 auto;
   
	   width: auto;
	   max-width: 100%;
	   height: auto;
   }
   
   
   
   /* =========================================================
      Leistungs-Buttons
      ========================================================= */
   
   .prffc-service-switcher__link {
	   display: inline-flex;
	   align-items: center;
	   justify-content: center;
   
	   max-width: 100%;
	   min-height: 2.9rem;
   
	   padding:
		   0.75rem
		   1.2rem;
   
	   border:
		   1px solid
		   rgba(0, 119, 185, 0.16);
   
	   border-radius: 999rem;
   
	   background: var(--prffc-color-white);
	   color: var(--prffc-color-blue-dark);
   
	   box-shadow:
		   0 0.3rem 1rem
		   rgba(0, 43, 62, 0.05);
   
	   font-size: 0.88rem;
	   font-weight: 700;
	   line-height: 1.15;
   
	   text-align: center;
	   text-decoration: none;
	   white-space: nowrap;
   
	   transition:
		   background-color var(--prffc-transition),
		   border-color var(--prffc-transition),
		   color var(--prffc-transition),
		   box-shadow var(--prffc-transition),
		   transform var(--prffc-transition);
   }
   
   .prffc-service-switcher__link:hover {
	   border-color:
		   rgba(0, 119, 185, 0.45);
   
	   color: var(--prffc-color-blue);
   
	   box-shadow:
		   0 0.6rem 1.4rem
		   rgba(0, 43, 62, 0.09);
   
	   transform: translateY(-0.1rem);
   }
   
   .prffc-service-switcher__link.is-current,
   .prffc-service-switcher__link[aria-current="page"] {
	   border-color: var(--prffc-color-blue);
   
	   background: var(--prffc-color-blue);
	   color: var(--prffc-color-white);
   
	   box-shadow:
		   0 0.65rem 1.5rem
		   rgba(0, 119, 185, 0.25);
   }
   
   .prffc-service-switcher__link:focus-visible {
	   outline:
		   0.2rem solid
		   var(--prffc-color-navy);
   
	   outline-offset: 0.2rem;
   }
   
   
   
   /* =========================================================
      Swiper-Pfeile
      ========================================================= */
   
   .prffc-service-switcher__button {
	   display: none;
	   align-items: center;
	   justify-content: center;
   
	   flex: 0 0 auto;
   
	   width: 2.9rem;
	   height: 2.9rem;
   
	   padding: 0;
   
	   border:
		   1px solid
		   rgba(0, 119, 185, 0.18);
   
	   border-radius: 50%;
   
	   background: var(--prffc-color-white);
	   color: var(--prffc-color-blue);
   
	   box-shadow:
		   0 0.4rem 1.2rem
		   rgba(0, 43, 62, 0.1);
   
	   cursor: pointer;
   
	   transition:
		   background-color var(--prffc-transition),
		   border-color var(--prffc-transition),
		   color var(--prffc-transition),
		   box-shadow var(--prffc-transition),
		   opacity var(--prffc-transition),
		   transform var(--prffc-transition);
   }
   
   .prffc-service-switcher__inner.is-ready
   .prffc-service-switcher__button {
	   display: inline-flex;
   }
   
   .prffc-service-switcher__button svg {
	   display: block;
   
	   width: 1.15rem;
	   height: 1.15rem;
   }
   
   .prffc-service-switcher__button:hover {
	   border-color: var(--prffc-color-blue);
   
	   background: var(--prffc-color-blue);
	   color: var(--prffc-color-white);
   
	   box-shadow:
		   0 0.6rem 1.4rem
		   rgba(0, 119, 185, 0.22);
   
	   transform: scale(1.05);
   }
   
   .prffc-service-switcher__button:focus-visible {
	   outline:
		   0.2rem solid
		   var(--prffc-color-navy);
   
	   outline-offset: 0.2rem;
   }
   
   .prffc-service-switcher__button.swiper-button-disabled {
	   opacity: 0.25;
   
	   cursor: default;
	   pointer-events: none;
   
	   box-shadow: none;
   }
   
   
   
   /*
    * Die automatisch erzeugten Swiper-Pfeile werden
    * nicht benötigt, da eigene SVGs verwendet werden.
    */
   
   .prffc-service-switcher__button::after {
	   display: none;
   }
   
   
   
   /* =========================================================
      Inhaltsbereich
      ========================================================= */
   
   .prffc-service-content {
	   position: relative;
   
	   padding:
		   clamp(4.5rem, 9vw, 8rem)
		   var(--prffc-page-gutter)
		   clamp(5rem, 10vw, 9rem);
   
	   background: var(--prffc-color-white);
   }
   
   .prffc-service-content__inner {
	   width: min(
		   100%,
		   var(--prffc-service-content-width)
	   );
   
	   margin-inline: auto;
   }
   
   .prffc-service-content__body {
	   color:
		   rgba(0, 43, 62, 0.88);
   
	   font-size: clamp(1.05rem, 1.4vw, 1.15rem);
	   line-height: 1.75;
   }
   
   
   
   /* =========================================================
      Typografie im Leistungsinhalt
      ========================================================= */
   
   .prffc-service-content__body > :first-child {
	   margin-top: 0;
   }
   
   .prffc-service-content__body > :last-child {
	   margin-bottom: 0;
   }
   
   .prffc-service-content__body h2,
   .prffc-service-content__body h3,
   .prffc-service-content__body h4 {
	   color: var(--prffc-color-blue-dark);
   
	   font-weight: 800;
	   letter-spacing: -0.04em;
	   line-height: 1.08;
   
	   text-wrap: balance;
   }
   
   .prffc-service-content__body h2 {
	   margin:
		   clamp(3.5rem, 7vw, 5rem)
		   0
		   clamp(1.3rem, 2.5vw, 1.8rem);
   
	   font-size: clamp(2rem, 4vw, 3.25rem);
   }
   
   .prffc-service-content__body h3 {
	   margin:
		   clamp(2.75rem, 5vw, 4rem)
		   0
		   1.25rem;
   
	   font-size: clamp(1.6rem, 3vw, 2.2rem);
   }
   
   .prffc-service-content__body h4 {
	   margin:
		   2.25rem
		   0
		   1rem;
   
	   font-size: clamp(1.25rem, 2vw, 1.5rem);
   }
   
   .prffc-service-content__body p {
	   margin:
		   0
		   0
		   1.4rem;
   }
   
   .prffc-service-content__body p + p {
	   margin-top: 1.4rem;
   }
   
   .prffc-service-content__body a {
	   color: var(--prffc-color-blue);
   
	   font-weight: 700;
   
	   text-decoration-thickness: 0.08em;
	   text-underline-offset: 0.2em;
   }
   
   .prffc-service-content__body a:hover {
	   color: var(--prffc-color-blue-dark);
   }
   
   .prffc-service-content__body a:focus-visible {
	   outline:
		   0.2rem solid
		   var(--prffc-color-blue);
   
	   outline-offset: 0.2rem;
   }
   
   
   
   /* =========================================================
      Listen im Inhalt
      ========================================================= */
   
   .prffc-service-content__body ul,
   .prffc-service-content__body ol {
	   margin:
		   1.75rem
		   0
		   2rem;
   
	   padding-left: 1.4rem;
   }
   
   .prffc-service-content__body li {
	   padding-left: 0.45rem;
   }
   
   .prffc-service-content__body li + li {
	   margin-top: 0.7rem;
   }
   
   .prffc-service-content__body ul li::marker {
	   color: var(--prffc-color-blue);
   }
   
   .prffc-service-content__body ol li::marker {
	   color: var(--prffc-color-blue);
   
	   font-weight: 800;
   }
   
   
   
   /* =========================================================
      Zitate
      ========================================================= */
   
   .prffc-service-content__body blockquote {
	   position: relative;
   
	   margin:
		   clamp(3rem, 6vw, 4.5rem)
		   0;
   
	   padding:
		   clamp(2rem, 4vw, 3rem);
   
	   border: 0;
	   border-radius: var(--prffc-radius);
   
	   background: #f1f7fa;
	   color: var(--prffc-color-blue-dark);
   
	   font-size: clamp(1.2rem, 2.3vw, 1.6rem);
	   font-weight: 700;
	   line-height: 1.4;
   }
   
   .prffc-service-content__body blockquote::before {
	   content: "";
   
	   position: absolute;
	   top: 1.25rem;
	   bottom: 1.25rem;
	   left: 0;
   
	   width: 0.3rem;
   
	   border-radius: 999rem;
   
	   background: var(--prffc-color-blue);
   }
   
   .prffc-service-content__body blockquote p {
	   margin: 0;
   }
   
   
   
   /* =========================================================
      Bilder im Inhaltsbereich
      ========================================================= */
   
   .prffc-service-content__body figure {
	   margin:
		   clamp(3rem, 6vw, 5rem)
		   0;
   }
   
   .prffc-service-content__body img {
	   display: block;
   
	   max-width: 100%;
	   height: auto;
   
	   border-radius: var(--prffc-radius);
   }
   
   .prffc-service-content__body figcaption {
	   margin-top: 0.8rem;
   
	   color:
		   rgba(0, 43, 62, 0.62);
   
	   font-size: 0.82rem;
	   line-height: 1.45;
   }
   
   
   
   /* =========================================================
      Tabellen
      ========================================================= */
   
   .prffc-service-content__body
   .wp-block-table {
	   margin:
		   2.5rem
		   0;
   
	   overflow-x: auto;
   }
   
   .prffc-service-content__body table {
	   width: 100%;
   
	   border-collapse: collapse;
   
	   font-size: 0.95rem;
   }
   
   .prffc-service-content__body th,
   .prffc-service-content__body td {
	   padding:
		   0.9rem
		   1rem;
   
	   border-bottom:
		   1px solid
		   rgba(0, 43, 62, 0.12);
   
	   text-align: left;
	   vertical-align: top;
   }
   
   .prffc-service-content__body th {
	   background: #f1f7fa;
	   color: var(--prffc-color-blue-dark);
   
	   font-weight: 800;
   }
   
   
   
   /* =========================================================
      Vorherige und nächste Leistung
      ========================================================= */
   
   .prffc-service-pagination {
	   padding:
		   0
		   var(--prffc-page-gutter)
		   clamp(6rem, 11vw, 10rem);
   
	   background: var(--prffc-color-white);
   }
   
   .prffc-service-pagination__inner {
	   display: grid;
   
	   grid-template-columns:
		   repeat(2, minmax(0, 1fr));
   
	   width: min(
		   100%,
		   var(--prffc-container-width)
	   );
   
	   margin-inline: auto;
   
	   gap: clamp(1rem, 2.5vw, 1.75rem);
   }
   
   .prffc-service-pagination__link {
	   position: relative;
   
	   display: flex;
	   flex-direction: column;
	   justify-content: space-between;
   
	   min-height: clamp(13rem, 20vw, 17rem);
   
	   padding:
		   clamp(1.75rem, 4vw, 3rem);
   
	   overflow: hidden;
   
	   border:
		   1px solid
		   rgba(0, 119, 185, 0.12);
   
	   border-radius:
		   clamp(
			   var(--prffc-radius),
			   1.5vw,
			   1rem
		   );
   
	   background: #f2f8fb;
	   color: var(--prffc-color-blue-dark);
   
	   text-decoration: none;
   
	   transition:
		   background-color var(--prffc-transition),
		   border-color var(--prffc-transition),
		   color var(--prffc-transition),
		   box-shadow var(--prffc-transition),
		   transform var(--prffc-transition);
   }
   
   .prffc-service-pagination__link::before {
	   content: "";
   
	   position: absolute;
	   z-index: 0;
   
	   width: 13rem;
	   aspect-ratio: 1;
   
	   border-radius: 50%;
   
	   background:
		   radial-gradient(
			   circle,
			   rgba(0, 119, 185, 0.13) 0%,
			   rgba(0, 119, 185, 0) 70%
		   );
   
	   transition:
		   opacity var(--prffc-transition),
		   transform 500ms
		   cubic-bezier(0.16, 1, 0.3, 1);
   }
   
   .prffc-service-pagination__link--previous::before {
	   right: -5rem;
	   bottom: -6rem;
   }
   
   .prffc-service-pagination__link--next::before {
	   top: -6rem;
	   left: -5rem;
   }
   
   .prffc-service-pagination__link:hover {
	   border-color:
		   rgba(0, 119, 185, 0.3);
   
	   background: var(--prffc-color-blue);
	   color: var(--prffc-color-white);
   
	   box-shadow:
		   0 1.5rem 3.5rem
		   rgba(0, 43, 62, 0.16);
   
	   transform: translateY(-0.25rem);
   }
   
   .prffc-service-pagination__link:hover::before {
	   opacity: 0.35;
   
	   transform: scale(1.25);
   }
   
   .prffc-service-pagination__link:focus-visible {
	   outline:
		   0.22rem solid
		   var(--prffc-color-blue);
   
	   outline-offset: 0.25rem;
   }
   
   
   
   /* =========================================================
      Richtung und Titel
      ========================================================= */
   
   .prffc-service-pagination__direction,
   .prffc-service-pagination__title {
	   position: relative;
	   z-index: 1;
   }
   
   .prffc-service-pagination__direction {
	   display: flex;
	   align-items: center;
   
	   gap: 0.65rem;
   
	   color: var(--prffc-color-blue);
   
	   font-size: 0.82rem;
	   font-weight: 800;
	   letter-spacing: 0.025em;
	   line-height: 1.25;
	   text-transform: uppercase;
   
	   transition:
		   color var(--prffc-transition);
   }
   
   .prffc-service-pagination__link--next
   .prffc-service-pagination__direction {
	   justify-content: flex-end;
   
	   text-align: right;
   }
   
   .prffc-service-pagination__direction svg {
	   flex: 0 0 auto;
   
	   width: 1.15rem;
	   height: 1.15rem;
   }
   
   .prffc-service-pagination__title {
	   display: block;
   
	   max-width: 15ch;
   
	   margin-top: 3rem;
   
	   font-size: clamp(1.6rem, 3vw, 2.5rem);
	   font-weight: 800;
	   letter-spacing: -0.045em;
	   line-height: 1.05;
   
	   text-wrap: balance;
   }
   
   .prffc-service-pagination__link--next
   .prffc-service-pagination__title {
	   align-self: flex-end;
   
	   text-align: right;
   }
   
   .prffc-service-pagination__link:hover
   .prffc-service-pagination__direction {
	   color: var(--prffc-color-white);
   }
   
   .prffc-service-pagination__placeholder {
	   min-width: 0;
   }
   
   
   
   /* =========================================================
      Tablet
      ========================================================= */
   
   @media (max-width: 62.5rem) {
	   .prffc-service-hero__inner {
		   grid-template-columns:
			   minmax(0, 1fr)
			   minmax(18rem, 0.9fr);
   
		   gap: 3rem;
	   }
   
	   .prffc-service-hero__title {
		   font-size: clamp(2.8rem, 6vw, 4.5rem);
	   }
   }
   
   
   
   /* =========================================================
      Hero untereinander
      ========================================================= */
   
   @media (max-width: 56.25rem) {
	   .prffc-service-hero {
		   padding-top: 2.5rem;
	   }
   
	   .prffc-service-hero__inner {
		   grid-template-columns: 1fr;
   
		   gap: 3rem;
	   }
   
	   .prffc-service-hero__content {
		   max-width: 44rem;
	   }
   
	   .prffc-service-hero__title {
		   max-width: 15ch;
	   }
   
	   .prffc-service-hero__media {
		   aspect-ratio: 16 / 10;
	   }
   }
   
   
   
   /* =========================================================
      Mobile
      ========================================================= */
   
   @media (max-width: 47.99rem) {
	   .prffc-service-hero {
		   padding:
			   2rem
			   var(--prffc-page-gutter)
			   4rem;
	   }
   
	   .prffc-service-breadcrumb {
		   margin-bottom: 2rem;
	   }
   
	   .prffc-service-breadcrumb__list {
		   font-size: 0.75rem;
	   }
   
	   .prffc-service-hero__eyebrow {
		   margin-bottom: 0.8rem;
   
		   font-size: 1rem;
	   }
   
	   .prffc-service-hero__title {
		   max-width: none;
   
		   font-size: clamp(2.45rem, 11vw, 3.5rem);
		   line-height: 0.98;
	   }
   
	   .prffc-service-hero__intro {
		   margin-top: 1.4rem;
   
		   font-size: 1.05rem;
		   line-height: 1.5;
	   }
   
	   .prffc-service-hero__button {
		   width: 100%;
   
		   margin-top: 2rem;
	   }
   
	   .prffc-service-hero__media {
		   aspect-ratio: 4 / 3;
   
		   box-shadow:
			   0 1.25rem 3rem
			   rgba(0, 43, 62, 0.14);
	   }
   
   
   
	   /* Swiper */
   
	   .prffc-service-switcher {
		   padding:
			   0.65rem
			   max(
				   0.65rem,
				   env(safe-area-inset-left)
			   );
	   }
   
	   .prffc-service-switcher__inner {
		   gap: 0.4rem;
	   }
   
	   .prffc-service-switcher__button {
		   width: 2.5rem;
		   height: 2.5rem;
	   }
   
	   .prffc-service-switcher__button svg {
		   width: 1rem;
		   height: 1rem;
	   }
   
	   .prffc-service-switcher__item {
		   /*
		    * So kann selbst ein langer Leistungsname
		    * nicht aus dem Swiper herausragen.
		    */
		   max-width: 100%;
	   }
   
	   .prffc-service-switcher__link {
		   max-width: 100%;
		   min-height: 2.55rem;
   
		   padding:
			   0.65rem
			   0.9rem;
   
		   font-size: 0.78rem;
		   line-height: 1.2;
   
		   white-space: normal;
	   }
   
   
   
	   /* Inhalt */
   
	   .prffc-service-content {
		   padding:
			   4rem
			   var(--prffc-page-gutter)
			   5rem;
	   }
   
	   .prffc-service-content__body {
		   font-size: 1rem;
		   line-height: 1.5;
	   }
   
	   .prffc-service-content__body h2 {
		   margin-top: 3.25rem;
   
		   font-size: clamp(1.9rem, 8vw, 2.5rem);
	   }
   
	   .prffc-service-content__body h3 {
		   margin-top: 2.75rem;
   
		   font-size: clamp(1.5rem, 7vw, 1.9rem);
	   }
   
	   .prffc-service-content__body blockquote {
		   margin-block: 2.75rem;
		   padding: 1.75rem;
   
		   font-size: 1.1rem;
	   }
   
   
   
	   /* Vorherige/nächste Leistung */
   
	   .prffc-service-pagination {
		   padding-bottom: 5rem;
	   }
   
	   .prffc-service-pagination__inner {
		   grid-template-columns: 1fr;
   
		   gap: 1rem;
	   }
   
	   .prffc-service-pagination__placeholder {
		   display: none;
	   }
   
	   .prffc-service-pagination__link {
		   min-height: 11rem;
		   padding: 1.5rem;
	   }
   
	   .prffc-service-pagination__title {
		   max-width: 18ch;
   
		   margin-top: 2rem;
   
		   font-size: 1.65rem;
	   }
   
	   .prffc-service-pagination__link--next
	   .prffc-service-pagination__direction {
		   justify-content: flex-start;
   
		   text-align: left;
	   }
   
	   .prffc-service-pagination__link--next
	   .prffc-service-pagination__title {
		   align-self: flex-start;
   
		   text-align: left;
	   }
   }
   
   
   
   /* =========================================================
      WordPress-Adminbar
      ========================================================= */
   
   @media (max-width: 782px) {
	   body.admin-bar .prffc-service-detail {
		   --prffc-adminbar-offset: 46px;
	   }
   }
   
   /*
    * Unterhalb von 600 px ist die WordPress-Adminbar
    * üblicherweise nicht mehr dauerhaft fixiert.
    */
   
   @media (max-width: 600px) {
	   body.admin-bar .prffc-service-detail {
		   --prffc-adminbar-offset: 0px;
	   }
   }
   
   
   
   /* =========================================================
      Sehr kleine Displays
      ========================================================= */
   
   @media (max-width: 23.5rem) {
	   .prffc-service-switcher__inner {
		   grid-template-columns:
			   2.25rem
			   minmax(0, 1fr)
			   2.25rem;
	   }
   
	   .prffc-service-switcher__button {
		   width: 2.25rem;
		   height: 2.25rem;
	   }
   
	   .prffc-service-switcher__link {
		   padding-inline: 0.75rem;
   
		   font-size: 0.72rem;
	   }
   }
   
   
   
   /* =========================================================
      Reduzierte Bewegung
      ========================================================= */
   
   @media (prefers-reduced-motion: reduce) {
	   .prffc-service-switcher__link,
	   .prffc-service-switcher__button,
	   .prffc-service-pagination__link,
	   .prffc-service-pagination__link::before {
		   transition: none;
	   }
   
	   .prffc-service-switcher__link:hover,
	   .prffc-service-switcher__button:hover,
	   .prffc-service-pagination__link:hover {
		   transform: none;
	   }
   }
   
   
   
   :root {
   --prffc-anchor-gap: 3.5rem;
   
   --prffc-scroll-offset:
	   calc(
		   var(--prffc-header-height-scrolled) +
		   var(--prffc-anchor-gap)
	   );
	   
	   
	/* =========================================================
	   Sprungmarken und Sticky Header
	   ========================================================= */
	
	html {
		scroll-behavior: smooth;
	
		scroll-padding-top:
			var(--prffc-scroll-offset);
	}
	
	
	
	/*
	 * Zusätzliche Absicherung für alle relevanten
	 * Sections mit einer ID.
	 */
	
	main section[id],
	.prffc-section-anchor {
		scroll-margin-top:
			var(--prffc-scroll-offset);
	}
	
	
	body.admin-bar main section[id],
	body.admin-bar .prffc-section-anchor {
		scroll-margin-top:
			calc(
				var(--prffc-scroll-offset) +
				32px
			);
	}
	
	@media (max-width: 782px) {
		body.admin-bar main section[id],
		body.admin-bar .prffc-section-anchor {
			scroll-margin-top:
				calc(
					var(--prffc-scroll-offset) +
					46px
				);
		}
	}
	
	@media (max-width: 600px) {
		body.admin-bar main section[id],
		body.admin-bar .prffc-section-anchor {
			scroll-margin-top:
				var(--prffc-scroll-offset);
		}
	}
	
	
	.prffc-service-hero__title {
		-webkit-hyphens: manual;
		hyphens: manual;
		word-break: normal;
		overflow-wrap: normal;
	}
	
	
	@media (max-width: 768px) {
		.prffc-service-hero__title {
			word-break: normal;
			overflow-wrap: normal;
			/* hyphens: auto; */
			-webkit-hyphens: auto;
		}
		
		.prffc-service-hero__button {
			width: auto
		}
	}