/*
Theme Name: MWA Base Theme (Backup)
Theme URI: https://martini-werbeagentur.de
Author: MARTINI Werbeagentur GmbH
Author URI: https://martini-werbeagentur.de
Description: The MWA base theme
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 8.2
Version: 1.0
Text Domain: mwa
*/

@property --translate-from {
	syntax: "<length> | <percentage>";
	inherits: true;
	initial-value: 100%;
}

@property --translate-to {
	syntax: "<length> | <percentage>";
	inherits: true;
	initial-value: 0;
}

@keyframes slide-in {
	from {
		opacity: 0;
		transform: translateX(var(--translate-from));
	}

	to {
		opacity: 1;
		transform: translateX(var(--translate-to));
	}
}

:root {
	--theme-accent: 0.4462 0.1412 357.88;
	/*--theme-dark: 0.2442 0.0064 0.59;*/
	--theme-dark: 0 0 0;

	--logo-c1: oklch(var(--theme-accent));
	--logo-c2: oklch(var(--theme-dark));

	font-size: 125%;
	accent-color: oklch(var(--theme-accent));
}

@font-face {
	font-family: "Fira Sans";
	src: url("assets/fonts/Fira_Sans/FiraSans-Light.ttf") format("truetype");
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: "Fira Sans";
	src: url("assets/fonts/Fira_Sans/FiraSans-Italic.ttf") format("truetype");
	font-weight: 400;
	font-style: italic;
}

@font-face {
	font-family: "Fira Sans";
	src: url("assets/fonts/Fira_Sans/FiraSans-SemiBold.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: "Fira Sans";
	src: url("assets/fonts/Fira_Sans/FiraSans-SemiBoldItalic.ttf")
		format("truetype");
	font-weight: 500;
	font-style: italic;
}

@media screen {
	.screen-reader-text {
		display: none;
	}
}

.has-luminous-vivid-amber-background-color {
	background-color: #ffc000;
}

html,
body,
textarea,
input,
select,
button {
	font:
		300 1rem/1.7 "Fira Sans",
		sans-serif;
}

html,
body {
	margin: 0;
	scroll-behavior: smooth;
}

body {
	position: relative;
	transition:
		color 0.6s ease,
		background-color 0.6s ease;
	padding-top: var(--scroll-padding, 0);

	&.dark {
		color: #fff;
		background-color: oklch(var(--theme-dark));

		.page-separator {
			--logo-c2: #fff;
		}
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 500;
}

h3 {
	font-size: 1em;
	font-weight: 500;
	font-style: italic;
	color: oklch(var(--theme-accent));
	margin-block: 2rem 1.5rem;
}

h3 + :is(ul, ol) {
	margin-top: 0.5rem;
}

ul {
	list-style-type: "– ";
}

em,
i {
	font-size: 1.0625em;
	font-weight: 400;
	font-style: italic;
}

strong,
b {
	font-weight: 500;
	font-style: italic;
	font-size: 1.25em;
}

em strong,
em b,
i strong,
i b,
b em,
strong em,
b i,
strong i {
	font-size: 1em;
	font-weight: 500;
	font-style: italic;
	color: oklch(var(--theme-accent));
}

.relative {
	position: relative;
}

.logo-sticky {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 990;
	height: 100%;
	pointer-events: none;

	& > div {
		width: 14dvh;
		height: 100dvh;
		position: sticky;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;

		svg {
			width: auto;
			height: 14dvh;
			position: absolute;
			transform-origin: center center;
			transform: rotate(-90deg);
		}

		body.dark & {
			--logo-c2: #fff;
		}
	}

	@media screen and (max-width: 767px) {
		display: none;
	}
}

figure {
	margin: 0;

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

.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	row-gap: 1rem;
	padding: 1rem 2rem;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	z-index: 1000;
	background-color: #fff;
	color: #000;
	transition:
		padding 0.3s ease,
		transform 0.3s ease;

	@media screen and (max-width: 60em) {
		flex-direction: column-reverse;
		padding-inline: 1rem;
	}

	body.scroll & {
		padding-block: 0.5rem;
	}

	body.scroll-down & {
		transform: translateY(-100%);
	}

	&.is-menu-open {
		color: #fff;
		--logo-c1: #fff;
		--logo-c2: #fff;
	}

	.menu-container {
		display: flex;
		align-items: center;
	}

	.site-logo {
		position: relative;
		z-index: 20;

		svg {
			width: 30rem;
			height: auto;
			max-width: 100%;
			display: block;
			transition: width 0.3s ease;

			body.scroll & {
				width: 18rem;
				--slogan-opacity: 0;
			}
		}
	}

	#menu-button {
		border: 0;
		background: none;
		position: relative;
		z-index: 20;
		width: 50px;
		height: 50px;
		cursor: pointer;
		padding: 0;
		color: oklch(var(--theme-accent));

		&:hover,
		&:focus-visible {
			outline: 0;
			color: #000;
		}

		span {
			position: absolute;
			left: calc(50% - 5px);
			top: calc(50% - 5px);
			z-index: 1;
			width: 10px;
			height: 10px;
			background-color: currentColor;
			border-radius: 50%;
			transition: transform 0.3s ease;
		}

		.m-1,
		.m-2 {
			transform: translate(-16px, 0);
		}

		.m-4,
		.m-5 {
			transform: translate(16px, 0);
		}

		.site-header.is-menu-open & {
			&:not(:focus-visible, :hover) {
				color: #fff;
			}

			.m-1 {
				transform: translate(-12px, -12px);
			}

			.m-2 {
				transform: translate(-12px, 12px);
			}

			.m-4 {
				transform: translate(12px, -12px);
			}

			.m-5 {
				transform: translate(12px, 12px);
			}
		}
	}

	.site-nav-main {
		display: none;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 10;
		width: 100vw;
		height: 100vh;
		opacity: 0;
		transition:
			opacity 0.3s ease allow-discrete,
			display 0.3s ease allow-discrete;

		.site-header.is-menu-open & {
			display: block;
			opacity: 1;
		}

		nav {
			position: relative;
			z-index: 20;
			text-align: center;
			width: 100%;
			height: 100dvh;
			clip-path: polygon(0% 0%, 0% 100%, 100% 80%, 100% 0%);
			padding: 8rem 0 0 6rem;
			box-sizing: border-box;
			background-color: oklch(var(--theme-accent) / 0.8);
			line-height: 1.4;

			@media screen and (max-width: 767px) {
				padding: 10rem 0 0 1rem;
			}
		}

		.backdrop {
			position: absolute;
			inset: 0;
			z-index: 10;
			background-color: rgba(255 255 255 / 0.6);
			clip-path: polygon(0% 100%, 100% 100%, 100% 80%);
		}

		ul {
			margin: 0;
			padding: 0;
			list-style: none;
			display: grid;
			gap: 0.5rem;
			width: max-content;
			font-size: 1.25vw;

			@media screen and (max-width: 767px) {
				font-size: 3.5vw;
			}

			li {
				transition:
					opacity 0.3s 0.3s ease allow-discrete,
					transform 0.3s 0.3s ease allow-discrete;
				opacity: 0;
			}

			.site-header.is-menu-open & li {
				opacity: 1;
			}

			.site-header.is-menu-open & li:nth-child(odd):not(:first-child) {
				transform: translate(4em, 0);
			}

			.site-header.is-menu-open & li:nth-child(even) {
				transform: translate(8em, 0);
			}

			a {
				text-decoration: none;
				display: block;
				color: oklch(var(--theme-accent));
				background-color: #fff;
				font-size: 3em;
				text-transform: uppercase;
				font-style: italic;
				padding: 0 1em;

				&:hover {
					color: #fff;
					background-color: #000;
				}

				li.current_page_item & {
					color: #fff;
					background-color: #000;
					font-weight: 500;
					font-size: 3.5em;
				}
			}
		}
	}

	.site-header-separator {
		display: block;
		width: 1.5rem;
		height: 1px;
		background-color: currentColor;
		margin-inline: 0.25rem;
		flex-shrink: 0;
		position: relative;
		z-index: 20;
	}

	.site-header-spacer {
		display: block;
		flex-grow: 1;
	}

	.pagename {
		font-size: 1.328125rem;
		font-weight: 400;
		text-transform: uppercase;
		flex-shrink: 0;
		position: relative;
		z-index: 20;
		transition: font-size 0.3s ease;

		body.scroll & {
			font-size: 1rem;
		}
	}
}

.site-footer {
	display: grid;
	grid-template-columns: max-content 1px max-content 1px max-content 1px max-content;
	gap: 4rem;
	align-items: stretch;
	justify-content: center;
	padding-block: 4rem;
	color: #000;
	background-color: #fff;
	margin-top: 4rem;

	@media screen and (max-width: 767px) {
		margin-top: 0rem;
		padding-block: 0rem;
	}

	.separator {
		background-color: #000;
	}

	strong {
		font-weight: 500;
		font-style: normal;
		font-size: 1em;
	}

	a {
		color: #000;
		text-decoration: none;

		&:hover,
		&[aria-current="page"] {
			color: oklch(var(--theme-accent));
		}
	}

	.site-nav-main {
		ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}
	}

	address {
		font-style: normal;
		font-weight: 300;
	}

	.site-nav-footer {
		align-self: center;
		text-transform: uppercase;

		ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		li + li::before {
			content: "";
			display: block;
			width: 1rem;
			height: 1px;
			background-color: oklch(var(--theme-accent));
			margin-block: 0.25rem;
		}
	}

	.social-links {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 1.5rem;
		margin-bottom: 1.5rem;

		.social-facebook,
		.social-instagram,
		.social-linkedin {
			width: 3rem;
			height: 3rem;

			@media screen and (max-width: 767px) {
				width: 17vw;
				height: 17vw;
			}
		}

		.social-facebook svg {
			width: 100%;
			height: 100%;
			display: block;
		}

		.social-instagram,
		.social-linkedin {
			color: #fff;
			background-color: #000;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;

			svg {
				width: 60%;
				height: 60%;
			}

			&:hover {
				background-color: oklch(var(--theme-accent));
			}
		}

		.social-linkedin svg {
			width: 50%;
			height: 50%;
		}
	}

	@media screen and (max-width: 767px) {
		grid-template-columns: 1fr;
		gap: 2rem;
		padding-inline: 3rem;

		.site-nav-main {
			display: none;
		}
		.separator {
			display: none;
		}

		address {
			p:nth-child(2),
			p:nth-child(3) {
				&::after {
					content: "";
					width: 5rem;
					display: block;
					background: oklch(var(--theme-accent));
					height: 2px;
					margin-top: 1rem;
				}
			}
		}
	}
}

.page-separator {
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 1.5rem;
	font-size: 1.5625rem;
	font-weight: 500;
	font-style: italic;
	margin-block: 6rem;
	padding-inline: 1rem;

	svg {
		max-width: 100%;
		height: auto;
	}

	@media screen and (max-width: 60em) {
		flex-direction: column;
		font-size: 1.25rem;
		margin-block: 0rem;
	}
}

.wp-block-list {
	padding-left: 8rem;
	@media screen and (max-width: 767px) {
		padding-left: 2rem;
	}
}

.wp-block-button__link,
.contact-form button {
	display: inline-block;
	color: #fff;
	background-color: oklch(var(--theme-accent));
	border-radius: 9999px;
	box-shadow: none;
	text-decoration: none;
	padding: 0.3rem 1.5rem;
	font-size: 0.8125rem;
	font-weight: 500;
	font-style: italic;
	letter-spacing: 0.125em;
	text-transform: uppercase;
	border: 0;
	cursor: pointer;
	min-width: 16rem;
	transition:
		background-color 0.3s ease,
		transform 0.3s ease;

	&:hover,
	&:focus-visible {
		outline: 0;
		background-color: #000;
		transform: scale(1.25);
	}

	@media screen and (max-width: 767px) {
		font-size: 0.6125rem;
		padding: 0.3rem 0.8rem;
		min-width: 13rem;
	}
}

.wp-block-media-text {
	display: grid;
	column-gap: 4rem;
	row-gap: 2rem;
	hyphens: auto;

	@media screen and (min-width: 60em) {
		grid-template-columns: 3fr 7fr;
	}

	figure {
		padding-inline: 1rem;
		position: relative;

		@media screen and (min-width: 60em) {
			padding-left: 0;
		}

		&::after {
			content: "";
			display: block;
			width: 6.625rem;
			height: 2px;
			background-color: oklch(var(--theme-accent));
			margin-top: 0.5rem;

			@media screen and (min-width: 60em) {
				position: absolute;
				right: 0;
				bottom: 0;
				width: 2px;
				height: 6.625rem;
			}
		}
	}

	.wp-block-media-text__content {
		padding-inline: 1rem;
		max-width: 80ch;

		@media screen and (min-width: 60em) {
			padding-left: 0;
			padding-right: 4rem;
		}

		& > :first-child {
			margin-top: 0;
		}
	}
}

.intro-text {
	letter-spacing: 0.0625em;
	hyphens: auto;
	max-width: 40em;
	padding-inline: 1rem;
	box-sizing: border-box;
	font-size: 1.5rem;

	@media screen and (max-width: 767px) {
		font-size: 1rem;
		margin-bottom: 2rem;
		line-height: 1.4;
	}

	/*
	@media screen and (min-width: 124em) {
		font-size: 1.5rem;
	}
	*/
}

main {
	& > :is(h1, h2, h3, h4, h5, h6, ul, ol, p) {
		max-width: 48rem;
		margin-inline: auto;
	}

	a {
		color: inherit;
		text-decoration-color: oklch(var(--theme-accent));
		text-decoration-inset: 1px;
		text-underline-offset: 2px;

		&:hover {
			color: oklch(var(--theme-accent));
		}
	}
}

.wp-block-buttons {
	text-align: center;
	margin-block: 6rem;
	padding-inline: 1rem;

	@media screen and (max-width: 767px) {
		padding-inline: 0rem;
		margin-block: 4rem;
	}
}

.wp-block-columns {
	&.layout-1 {
		display: grid;
		/*grid-template-columns: 3fr 7fr;*/
		grid-template-columns: 4fr 7fr;

		.wp-block-column:first-child {
			font-size: 1.5625rem;
			font-weight: 500;
			display: flex;
			/*justify-content: center;*/
			justify-content: end;
			padding-inline: 4rem;
			border-right: 1px solid oklch(var(--theme-accent));

			@media screen and (max-width: 767px) {
				padding-inline: 0rem;
			}
		}

		.wp-block-column:last-child {
			padding-inline: 4rem;
			max-width: 64ch;
			hyphens: auto;

			@media screen and (max-width: 767px) {
				padding-inline: 1rem;
			}
		}

		@media screen and (max-width: 767px) {
			grid-template-columns: 1fr;
		}
	}

	&.layout-2 {
		display: grid;
		grid-template-columns: 4fr 6fr;

		.wp-block-column:first-child {
			font-size: 1.5625rem;
			font-weight: 500;
			display: flex;
		}

		.wp-block-column:last-child {
			border-top: 6px solid oklch(var(--theme-accent));
			border-bottom: 1px solid #fff;

			p {
				padding-inline: 4rem;
				max-width: 64ch;
				hyphens: auto;
			}
		}
	}

	&.layout-3 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		max-width: 120ch;
		margin-inline: auto;

		.wp-block-column:first-child {
			font-size: 1.5625rem;
			font-weight: 500;
			display: flex;
			justify-content: end;
			padding-inline: 4rem;
			border-right: 1px solid #000;
		}

		.wp-block-column:last-child {
			padding-inline: 4rem;
			hyphens: auto;
		}

		@media screen and (max-width: 767px) {
			grid-template-columns: 1fr;

			.wp-block-column:first-child {
				padding-inline: 1rem;
				display: block;
				border: 0;
			}

			.wp-block-column:last-child {
				padding-inline: 1rem;
			}
		}
	}
}

.wp-block-group.is-layout-grid {
	margin-block: 4rem;

	&.icons {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 4rem 4rem;
		align-items: start;
		width: 80%;
		margin-inline: auto;
		font-weight: 500;
		font-style: italic;
		line-height: 1.2;

		@media screen and (max-width: 767px) {
			grid-template-columns: repeat(2, 1fr);
			width: 100%;
			gap: 2rem 1rem;
		}

		img {
			filter: invert(0%);
			transition: filter 0.5s ease;
		}

		.wp-block-group {
			display: grid;
			justify-content: center;
			text-align: center;
		}

		figure {
			border: 6px solid oklch(var(--theme-accent));
			border-radius: 9999px;
			width: 10rem;
			height: 10rem;
			overflow: hidden;
			justify-self: center;

			@media screen and (max-width: 767px) {
				width: 7rem;
				height: 7rem;
			}
		}

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
}

body.dark {
	.wp-block-group.is-layout-grid {
		&.icons {
			img {
				filter: invert(100%);
			}
		}
	}
}

.contact-form {
	position: relative;
	z-index: 10;
	margin-top: -15vw;
	margin-inline: auto;
	max-width: 80%;
	padding-inline: 4rem;
	box-sizing: border-box;
	display: flex;
	justify-content: end;

	@media screen and (max-width: 767px) {
		padding-inline: 0rem;
		max-width: 90%;
		margin-bottom: 3rem;
	}

	form {
		display: grid;
		row-gap: 0.5rem;
		width: 100%;
		max-width: 80ch;
	}

	label {
		position: relative;

		span {
			position: absolute;
			left: 0.75rem;
			z-index: 20;
			color: oklch(var(--theme-accent));
			transition: all 0.3s ease;
			font-size: 1rem;
			top: 0.25rem;
		}

		input,
		textarea,
		&:has(textarea)::before {
			width: 100%;
			background-color: #fff;
			border: 2px solid oklch(var(--theme-accent));
			border-radius: 1rem;
			font-size: 0.8125rem;
			padding: 1rem 0.75rem 0.25rem;
			box-sizing: border-box;

			&:focus {
				outline: none;
				background-color: #ddd;
			}

			&:not(:placeholder-shown) + span,
			&:focus + span {
				font-size: 0.75rem;
				top: 0;
			}
		}

		&:has(textarea) {
			display: grid;

			textarea {
				grid-column: 1;
				grid-row: 1;
				position: relative;
				z-index: 10;
				resize: none;
				overflow: hidden;
			}

			&::before {
				content: attr(data-value) " ";
				white-space: pre-wrap;
				visibility: hidden;
				position: relative;
				z-index: 1;
				grid-column: 1;
				grid-row: 1;
			}
		}
	}

	.buttons {
		margin-top: 2rem;
		text-align: center;

		@media screen and (max-width: 767px) {
			margin-top: 0rem;
		}
	}
}

.group-layout-1 {
	padding-inline: 12rem 4rem;
	margin-top: 6rem;
	margin-inline: auto;
	hyphens: auto;
	max-width: 64em;

	@media screen and (max-width: 767px) {
		padding-inline: 1rem;
		margin-top: 2rem;
	}

	h2 {
		font-style: italic;
		letter-spacing: 0.0625em;
		padding-bottom: 1rem;
		border-bottom: 6px solid oklch(var(--theme-accent));
		/* @media screen and (max-width: 767px) {
			font-size: 1rem;
		} */
	}

	.wp-block-columns {
		display: grid;
		grid-template-columns: 1fr 1fr;
		margin-top: 3rem;
		margin-left: -8rem;

		@media screen and (max-width: 767px) {
			margin-left: 0rem;
			grid-template-columns: 1.2fr 0.8fr;
		}
	}

	figure {
		padding-right: 1rem;
		position: relative;
		@media screen and (max-width: 767px) {
			padding-right: 0.5rem;
		}
		&::after {
			content: "";
			position: absolute;
			right: 0;
			bottom: 0;
			width: 2px;
			height: 6.625rem;
			background-color: oklch(var(--theme-accent));

			@media screen and (max-width: 767px) {
				/* margin-left: 0rem; */
				display: none;
			}
		}
	}

	hr {
		display: block;
		margin: 0;
		border: 0;
		border-top: 6px solid oklch(var(--theme-accent));
	}
}

.group-layout-2 {
	margin-block: 8rem;

	.wp-block-group__inner-container {
		max-width: 64rem;
		margin-inline: auto;
		padding-inline: 4rem;
	}
}

.max-width-margin-inline {
	max-width: 64em;
	margin-inline: auto;
}

.headline-lines {
	padding-inline: 12rem 4rem;
	margin-top: 0rem;
	hyphens: auto;

	@media screen and (max-width: 767px) {
		padding-inline: 1rem;
	}

	h2 {
		color: var(--logo-c1);
		margin-left: -3rem;
		margin-bottom: 0;
		font-style: italic;

		@media screen and (max-width: 767px) {
			margin-left: 0rem;
		}

		&::before {
			content: "";
			display: inline-block;
			width: 2rem;
			height: 0.1rem;
			background-color: var(--logo-c1);
			margin-right: 1rem;

			@media screen and (max-width: 767px) {
				width: 1rem;
				margin-right: 0.2rem;
			}
		}
	}

	p {
		margin-top: 0;
	}

	.compact {
		p {
			margin-bottom: 0;
		}

		h3 {
			margin-top: 0;
			margin-bottom: 0;
		}
	}

	.wp-block-list {
		list-style-type: disc;
		padding-left: 1rem;
	}

	.inline {
		display: inline;
	}
}

.success {
	opacity: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;

	background-color: var(--logo-c2);
	color: #fff;
	border-left: 4px solid var(--logo-c1);

	padding: 2rem 3rem;
	border-radius: 4px;
	font-size: 1.1rem;
	font-weight: 500;
	letter-spacing: 0.02em;

	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);

	animation:
		fadeInPop 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
		fadeOut 0.5s ease forwards 3s;
}

@keyframes fadeInPop {
	from {
		opacity: 0;
		transform: translate(-50%, -48%);
	}
	to {
		opacity: 1;
		transform: translate(-50%, -50%);
	}
}

@keyframes fadeOut {
	to {
		opacity: 0;
		pointer-events: none;
	}
}

.map-text {
	letter-spacing: 0.0625em;
	hyphens: auto;
	max-width: 40em;
	padding-inline: 1rem;
	box-sizing: border-box;
	margin-inline: auto;
	margin-top: 4rem;

	@media screen and (min-width: 60em) {
		font-size: 1.25rem;
	}

	@media screen and (min-width: 124em) {
		font-size: 1.5rem;
	}

	p {
		padding-left: 12rem;

		@media screen and (max-width: 767px) {
			padding-left: 1rem;
		}
		strong {
			font-size: unset;
		}
	}

	.line-before {
		position: relative;
		&::before {
			content: "";
			background: var(--logo-c1);
			width: 0.2rem;
			height: 10rem;
			position: absolute;
			left: 9rem;
			top: 0.7rem;

			@media screen and (max-width: 767px) {
				height: 13rem;
				position: absolute;
				left: 0rem;
				top: 0.3rem;
			}
		}
	}
}

.map-layout {
	position: relative;
	/* z-index: 991; */
	iframe {
		width: 100%;
		clip-path: polygon(0% 0%, 0% 100%, 100% 80%, 100% 0%);
		height: 50rem;
		margin-top: 3rem;
		margin-bottom: 0rem;

		@media screen and (max-width: 767px) {
			height: 20rem;
			margin-bottom: -1rem;
		}
	}
}

.contact-form.contact-page {
	padding-inline: 12rem 4rem;
	margin-top: 3rem;
	margin-inline: auto;
	hyphens: auto;
	max-width: 64em;
	box-sizing: unset;

	@media screen and (max-width: 767px) {
		padding-inline: 1rem 1rem;
	}

	form {
		max-width: unset;
		row-gap: 1.5rem;
		@media screen and (max-width: 767px) {
			row-gap: 0.5rem;
		}
	}
}

.group-layout-3 {
	padding-inline: 12rem 4rem;
	margin-top: 9rem;
	margin-inline: auto;
	hyphens: auto;
	max-width: 64em;

	@media screen and (max-width: 767px) {
		padding-inline: 0rem 0rem;
		margin-top: 3rem;
		max-width: 90vw;
	}

	h2 {
		font-style: italic;
		letter-spacing: 0.0625em;
		padding-bottom: 1rem;
		border-bottom: 6px solid oklch(var(--theme-accent));
	}

	.wp-block-columns {
		display: grid;
		grid-template-columns: 1fr 1fr;
		margin-top: 3rem;
		margin-left: -8rem;
	}

	figure {
		padding-right: 1rem;
		position: relative;
	}

	hr {
		display: block;
		margin: 0;
		border: 0;
		border-top: 6px solid oklch(var(--theme-accent));
	}

	.inner-pics-box {
		> div {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;

			@media screen and (max-width: 767px) {
				grid-template-columns: 1fr 1fr;
				gap: 0.5rem;
				padding: 0 0rem;
			}

			> div:first-child {
				grid-column-start: 2;

				@media screen and (max-width: 767px) {
					grid-column-start: 1;
				}
			}

			figure {
				padding-left: 0.6rem;
				padding-right: 0;
				padding-top: 1rem;

				@media screen and (max-width: 767px) {
					order: 1;
					padding-left: 0rem;
					padding-bottom: 0.5rem;
				}
			}
		}

		.bild-mit-beschreibung {
			position: relative;
			padding-left: 2rem;

			@media screen and (max-width: 767px) {
				padding-left: 0rem;
			}

			div {
				display: flex;
				flex-direction: column;
			}

			p {
				margin: 0;
				padding-left: 0.6rem;
				position: relative;

				@media screen and (max-width: 767px) {
					font-size: 0.7rem;
					line-height: 1.3;

					strong {
						font-size: 0.9rem;
					}
				}

				&::before {
					content: "";
					position: absolute;
					left: -4px;
					top: 11px;
					width: 2px;
					height: 3.625rem;
					background-color: oklch(var(--theme-accent));

					@media screen and (max-width: 767px) {
						display: none;
					}
				}

				@media screen and (max-width: 767px) {
					&:first-child {
						order: 2;
					}

					&:nth-child(2) {
						order: 3;
					}
				}
			}
		}
	}
}

.margin-top-five-rem {
	margin-top: 5rem;
}

.unser-team > div {
	--tile-size: 31vw;
	--img-size: 34vw;
	/* --default-basis: 350px; */
	--default-basis: calc(var(--tile-size) - (var(--img-size) / 2));
	--hovered-basis: 34vw;
	--number-of-images: 7;
	--shrunk-basis: calc(
		(var(--number-of-images) * var(--default-basis) - var(--hovered-basis)) /
			(var(--number-of-images) - 1)
	);

	display: flex;
	height: var(--tile-size);
	/* overflow: hidden; */
	justify-content: center;

	margin-bottom: 10rem;

	figure {
		flex: 0 0 var(--default-basis);
		min-width: 0;
		/* height: 100%; */
		margin: 0;
		overflow: hidden;
		cursor: pointer;
		transition: flex-basis 0.8s ease;
		display: flex;
		justify-content: center;
		position: relative;

		align-items: flex-start;
		height: calc(var(--tile-size) + 5rem);

		img {
			width: var(--img-size);
			/* height: 100%; */
			max-width: none;
			object-fit: cover;
			display: block;
			flex-shrink: 0;
			filter: brightness(0.8);
			transition:
				filter 0.8s ease,
				transform 0.4s ease;

			height: var(--tile-size);
		}

		figcaption {
			opacity: 0;
			position: absolute;
			bottom: 0;
			left: 2vw;
			line-height: 1.3;
			transition: opacity 0.8s ease;

			&::before {
				content: "";
				background: var(--logo-c1);
				height: 2px;
				width: 2vw;
				display: block;
				margin-bottom: 0.5rem;
			}

			strong {
				color: var(--logo-c1);
			}
		}

		&:hover {
			flex-basis: var(--hovered-basis);

			img {
				filter: brightness(1);
			}

			figcaption {
				opacity: 1;
			}
		}

		&.shrunk {
			flex-basis: var(--shrunk-basis);

			img {
				filter: brightness(0.5);
			}
		}
	}

	@media screen and (hover: none) and (max-width: 40rem) {
		display: grid;
		grid-auto-columns: 100%;
		grid-auto-flow: column;
		scroll-snap-type: x mandatory;
		justify-content: start;
		overflow-x: auto;
		padding-inline: 20%;
		box-sizing: border-box;
		height: auto;
		scrollbar-width: none;

		margin-bottom: 5rem;

		figure {
			scroll-snap-align: center;
			scroll-snap-stop: always;
			height: calc(var(--tile-size) + 11rem);

			img {
				aspect-ratio: 1;
				width: 100%;
				height: auto;
				transform: scale(0.8);
				transform-origin: top center;
				filter: brightness(0.5);
			}

			&.active {
				/* flex-basis: var(--hovered-basis); */

				figcaption {
					bottom: 3vw;

					opacity: 1;

					&::before {
						width: 13vw;
					}
				}

				img {
					transform: none;
					filter: brightness(1);
				}
			}
		}
	}
}

.headline-team {
	display: flex;
	justify-content: center;
	margin-top: 8rem;
	margin-bottom: 5rem;
	font-style: italic;
	letter-spacing: 0.0625em;
}

.appear-in-responsive {
	display: none;

	@media screen and (max-width: 767px) {
		display: block;
	}
}

.hide-in-responsive {
	display: block;

	@media screen and (max-width: 767px) {
		display: none;
	}
}

@media screen and (max-width: 767px) {
	.img-career-contact img {
		width: 100% !important;
	}

	.border-bottom-red {
		padding-bottom: 1.3rem;
		margin-bottom: 0;
		border-bottom: 6px solid oklch(var(--theme-accent));
	}

	.border-bottom-black {
		border-bottom: 1px black solid;
		padding-bottom: 1.5rem;
	}

	body.dark .border-bottom-black {
		border-bottom: 1px white solid;
	}

	h3 {
		padding-inline: 1rem;
	}

	a {
		overflow-wrap: break-word;
	}
}

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

.no-margin-bottom {
	margin-bottom: 0;
}

.margin-top-four-vw {
	margin-top: 4vw;
}