/* Seitensystem. Nur unter .bf-sys. */

.bf-sys {
	--bf-sys-cream: #efeae2;
	--bf-sys-ink: var(--bf-dark);
	color: var(--bf-text);
	overflow-x: clip;
}

.bf-sys-wrap {
	width: min(1248px, calc(100% - 2 * var(--bf-gutter)));
	margin-inline: auto;
}

.bf-sys-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	color: #fff;
	background: var(--bf-sys-ink);
}

.bf-sys-hero--text {
	color: var(--bf-text);
	background: var(--bf-sys-cream);
}

.bf-sys-hero__media {
	width: 100%;
	aspect-ratio: 16 / 7;
	min-height: 280px;
	max-height: 520px;
	overflow: hidden;
	background: var(--bf-sys-ink);
}

.bf-sys-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.bf-sys-hero--image .bf-sys-hero__copy {
	position: absolute;
	inset: auto 0 0 0;
	padding: clamp(24px, 4vw, 48px) var(--bf-gutter) clamp(20px, 3vw, 36px);
	background: linear-gradient(to top, rgba(29, 29, 27, 0.82), rgba(29, 29, 27, 0));
}

.bf-sys-hero--text .bf-sys-hero__copy {
	padding: clamp(32px, 5vw, 64px) var(--bf-gutter);
}

.bf-sys-hero__logo {
	display: block;
	height: 36px;
	width: auto;
	margin-bottom: 12px;
}

.bf-sys-hero__title {
	margin: 0;
	max-width: 16em;
	font-size: clamp(32px, 4vw, 52px);
	line-height: 1.1;
	color: inherit;
}

.bf-sys-hero__lead {
	max-width: 38em;
	margin: 12px 0 0;
}

.bf-sys-hero__action {
	margin: 16px 0 0;
}

.bf-sys-offer {
	background: var(--bf-sys-ink);
	color: #fff;
}

.bf-sys-offer__inner,
.bf-sys-jobs__inner {
	width: min(1248px, calc(100% - 2 * var(--bf-gutter)));
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: clamp(28px, 4vw, 48px) 0;
}

.bf-sys-offer h2,
.bf-sys-jobs h2,
.bf-sys-faq h2 {
	margin: 0 0 8px;
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1.15;
}

.bf-sys-offer h2,
.bf-sys-offer p {
	color: #fff;
}

.bf-sys-offer__copy,
.bf-sys-jobs__inner > div {
	max-width: 40em;
}

.bf-sys-offer__copy p,
.bf-sys-jobs p,
.bf-sys-faq p {
	margin: 0;
}

.bf-sys-kicker {
	margin: 0 0 8px;
	color: var(--bf-gold-light);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.bf-sys-hero--text .bf-sys-kicker,
.bf-sys-jobs .bf-sys-kicker,
.bf-sys-faq .bf-sys-kicker {
	color: var(--bf-gold);
}

.bf-sys-offer__action,
.bf-sys-jobs__action {
	margin: 0;
}

.bf-sys-band--cream {
	background: var(--bf-sys-cream);
}

.bf-sys-band--white {
	background: #fff;
}

.bf-sys-band .bf-sys-wrap,
.bf-sys-faq .bf-sys-wrap {
	padding: clamp(36px, 5vw, 64px) 0;
}

.bf-sys-body > .bf-section:nth-child(odd) {
	background: var(--bf-sys-cream);
}

.bf-sys-body > .bf-section:nth-child(even) {
	background: #fff;
}

.bf-sys-body .bf-section--gold {
	background: inherit;
	color: inherit;
}

.bf-sys .bf-part--call2action_event_global {
	display: none;
}

.bf-sys-faq__jump {
	background: #fff;
	border-bottom: 1px solid rgba(29, 29, 27, 0.12);
}

.bf-sys-faq__jump .bf-sys-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	padding: 14px 0;
}

.bf-sys-faq__jump a {
	color: var(--bf-text);
	font-weight: 600;
	text-decoration: none;
}

.bf-sys-faq-close__links {
	margin: 16px 0;
	padding: 0;
	list-style: none;
}

.bf-sys-faq-close__links a {
	color: var(--bf-text);
	font-weight: 600;
}

.bf-sys-faq-close__action {
	margin: 8px 0 0;
}

.bf-sys-faq__item {
	border-bottom: 1px solid rgba(29, 29, 27, 0.12);
}

.bf-sys-faq__item summary {
	cursor: pointer;
	padding: 14px 0;
	list-style: none;
	overflow-wrap: anywhere;
}

.bf-sys-faq__item summary::-webkit-details-marker {
	display: none;
}

.bf-sys-faq__item summary h3 {
	display: inline;
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
}

.bf-sys-faq__item summary::before {
	content: "";
	display: inline-block;
	width: 0.55em;
	height: 0.55em;
	margin-right: 0.7em;
	border-right: 2px solid var(--bf-gold);
	border-bottom: 2px solid var(--bf-gold);
	transform: rotate(-45deg);
	vertical-align: 0.1em;
}

.bf-sys-faq__item[open] summary::before {
	transform: rotate(45deg);
	vertical-align: 0.2em;
}

.bf-sys-faq__item p {
	margin: 0 0 16px 1.4em;
}

.bf-sys-faq__item a {
	color: var(--bf-gold);
}

.bf-sys-youtube .bf-yt {
	margin: 0;
}

@media (max-width: 720px) {
	.bf-sys-hero--image .bf-sys-hero__copy {
		position: static;
		background: var(--bf-sys-ink);
	}

	.bf-sys-hero__media {
		aspect-ratio: 4 / 3;
		max-height: none;
	}

	.bf-sys-offer__inner,
	.bf-sys-jobs__inner {
		align-items: flex-start;
	}
}

/* Inhaltsseiten, page-content.php. Bild, dann hell, abwechselnd, Schluss dunkel. */

.bf-cp {
	--bf-cp-cream: #efeae2;
	color: var(--bf-text);
	overflow-x: clip;
}

.bf-cp-wrap {
	width: min(1248px, calc(100% - 2 * var(--bf-gutter)));
	margin-inline: auto;
}

.bf-cp-hero {
	position: relative;
	background: var(--bf-dark);
	color: #fff;
}

.bf-cp-hero__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	background: var(--bf-dark);
}

.bf-cp-hero__img--empty {
	aspect-ratio: 21 / 9;
}

.bf-cp-hero__copy {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	column-gap: 32px;
	row-gap: 8px;
	padding: clamp(28px, 5vw, 48px) var(--bf-gutter) clamp(24px, 4vw, 36px);
	background: linear-gradient(transparent, rgba(29, 29, 27, 0.78));
}

.bf-cp-hero__title,
.bf-cp-hero__sub {
	grid-column: 1;
}

.bf-cp-hero__action {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: end;
}

.bf-cp-hero__text {
	display: contents;
}

.bf-cp-hero__title {
	margin: 0 0 8px;
	max-width: 16em;
	color: #fff;
	font-size: clamp(32px, 4vw, 56px);
	font-weight: 600;
	line-height: 1.1;
}

.bf-cp-hero__sub {
	margin: 0;
	max-width: 36em;
	color: #f4efe6;
	font-size: clamp(16px, 1.6vw, 18px);
}

.bf-cp-hero__action {
	margin: 0;
	flex: 0 0 auto;
}

.bf-cp-band {
	padding: clamp(36px, 5vw, 64px) 0;
}

.bf-cp-band--hell {
	background: #fff;
	color: var(--bf-text);
}

.bf-cp-band--text {
	background: #efeae2;
}

.bf-cp-band--dunkel {
	background: #1d1d1b;
	color: #f4efe6;
}

.bf-cp-band--dunkel h2,
.bf-cp-band--dunkel h3 {
	color: #fff;
}

.bf-cp-band--dunkel a {
	color: #d8c09c;
}

.bf-cp-band--dunkel .bf-btn {
	color: #fff;
}

.bf-cp-intro,
.bf-cp-body {
	max-width: 68ch;
	font-size: 17px;
	line-height: 1.7;
}

.bf-cp-body .bf-section--gold,
.bf-cp-body .bf-section--alt {
	background: transparent;
	color: inherit;
}

.bf-cp-body .bf-part--call2action_event_global,
.bf-cp-body .bf-section--gold:has(.bf-part--call2action_event_global) {
	display: none;
}

.bf-cp-band h2 {
	margin: 0 0 16px;
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.15;
}

.bf-cp-logos {
	display: flex;
	gap: 28px;
	margin: 0;
	padding: 8px 0 4px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}

.bf-cp-logos li {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.bf-cp-logos__img {
	display: block;
	width: auto;
	height: 64px;
	max-width: 140px;
	object-fit: contain;
}

.bf-cp .bf-hub-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px var(--bf-gutter);
	width: 100%;
	margin: 0 0 16px;
}

.bf-cp-guide {
	display: flex;
	align-items: center;
	gap: 24px;
}

.bf-cp-guide__img {
	width: 160px;
	height: 160px;
	object-fit: cover;
}

.bf-cp-cities {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bf-cp-faq__item {
	border-top: 1px solid rgba(29, 29, 27, 0.12);
}

.bf-cp-faq__item summary {
	padding: 14px 0;
	cursor: pointer;
	font-weight: 600;
}

.bf-cp-close__action {
	margin: 20px 0 0;
}

.bf-cp-related {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 28px 0 0;
}

.bf-cp-band--dunkel .bf-yt,
.bf-cp-band--dunkel .bf-yt__brand,
.bf-cp-band--dunkel .bf-yt h2 {
	color: #f4efe6;
}

@media (max-width: 720px) {
	.bf-cp-hero__img,
	.bf-cp-hero__img--empty {
		aspect-ratio: 4 / 3;
	}

	.bf-cp-hero__copy {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.bf-cp-hero__title,
	.bf-cp-hero__sub,
	.bf-cp-hero__action {
		grid-column: auto;
		grid-row: auto;
	}

	.bf-cp-hero__title {
		order: 1;
	}

	.bf-cp-hero__action {
		order: 2;
	}

	.bf-cp-hero__sub {
		order: 3;
	}

	.bf-cp .bf-hub-cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.bf-cp-guide {
		flex-direction: column;
		align-items: flex-start;
	}
}