/*
 * GPH – Stylesheet
 * Plain modern CSS (custom properties, native nesting, grid/flex, clamp).
 * No preprocessor, no build step.
 *
 * Breakpoints (em, cannot be custom properties inside media queries):
 *   23.688em  379px   28.062em 449px   29.312em 469px   29.938em 479px
 *   31.188em  499px   34.312em 549px   37.438em 599px   40.562em 649px
 *   45.25em   724px   (main breakpoint, mobile nav below)
 *   51.812em  829px   53.062em 849px   53.688em 859px   56.188em 899px
 *   58.062em  929px   60.562em 969px   61.812em 989px   65.562em 1049px
 *   74.938em 1199px   81.188em 1299px
 *
 * Multi-column layouts reproduce the former float grid exactly:
 *   column width = 99.9% * fraction - (gutter - gutter * fraction)
 */

/* -------------------------------------------------------------------------
 * Fonts (self-hosted, latin subset, variable weight)
 * ---------------------------------------------------------------------- */

@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 200 700;
	font-display: swap;
	src: url('/fonts/oswald-latin-var.woff2') format('woff2');
}

@font-face {
	font-family: 'Noto Serif';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('/fonts/noto-serif-latin-var.woff2') format('woff2');
}

/* -------------------------------------------------------------------------
 * Tokens
 * ---------------------------------------------------------------------- */

:root {
	--brand: #a71d26;
	--brand-dark: #86171e;
	--brand-l3: #c16167;
	--brand-l6: #dca5a8;
	--brand-tint: #f6e8e9;
	--dark: #3f3f3f;
	--heading: #525252;
	--dark-l3: #797979;
	--dark-l6: #b2b2b2;
	--grey-text: #8c8c8c;
	--grey-muted: #9f9f9f;
	--grey-mid: #c5c5c5;
	--line: #d9d9d9;
	--light: #ececec;
	--white: #fff;

	--font-head: Oswald, 'Calisto MT', 'Bookman Old Style', Bookman, 'Goudy Old Style', Garamond, 'Hoefler Text', 'Bitstream Charter', Georgia, serif;
	--font-text: 'Noto Serif', Arial, 'Helvetica Neue', Helvetica, sans-serif;

	/* fluid sizes: linear between 320px and 1440px viewport */
	--fs-14-15: clamp(14px, calc(14px + 1 * (100vw - 320px) / 1120), 15px);
	--fs-15-17: clamp(15px, calc(15px + 2 * (100vw - 320px) / 1120), 17px);
	--fs-16-18: clamp(16px, calc(16px + 2 * (100vw - 320px) / 1120), 18px);
	--fs-17-22: clamp(17px, calc(17px + 5 * (100vw - 320px) / 1120), 22px);
	--fs-19-26: clamp(19px, calc(19px + 7 * (100vw - 320px) / 1120), 26px);
	--fs-21-31: clamp(21px, calc(21px + 10 * (100vw - 320px) / 1120), 31px);
	--fs-22-37: clamp(22px, calc(22px + 15 * (100vw - 320px) / 1120), 37px);

	--ease: cubic-bezier(.4, 0, .2, 1);
	--t: .25s;
	--t-slow: 375ms;

	--max-width: 1440px;
	--gradient-grey: linear-gradient(to bottom right, var(--light) 0, var(--grey-mid) 50%, var(--light));

	@media (min-width: 75em) {
		--t: .3s;
		--t-slow: .45s;
	}
}

/* -------------------------------------------------------------------------
 * Reset
 * ---------------------------------------------------------------------- */

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

::before,
::after {
	text-decoration: inherit;
	vertical-align: inherit;
}

:focus:not(:focus-visible) {
	outline: none;
}

::selection {
	color: var(--white);
	background: var(--brand);
}

html {
	font-size: 62.5%; /* 1rem = 10px */
	overflow-x: hidden;
	cursor: default;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
}

b,
strong {
	font-weight: bolder;
}

small {
	font-size: 80%;
}

img,
svg {
	vertical-align: middle;
}

img {
	border-style: none;
}

svg {
	fill: currentColor;
	pointer-events: all;

	&:not(:root) {
		overflow: hidden;
	}
}

figure,
picture {
	display: block;
	margin: 0;
	padding: 0;

	& img,
	& svg {
		display: block;
		width: 100%;
	}
}

button {
	margin: 0;
	border: none;
	background-color: transparent;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	cursor: pointer;
}

a,
button,
[tabindex] {
	touch-action: manipulation;
}

[hidden] {
	display: none;
}

/* -------------------------------------------------------------------------
 * Base typography
 * ---------------------------------------------------------------------- */

body {
	font-family: var(--font-head);
	font-size: var(--fs-16-18);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: .5px;
	color: var(--dark);
}

a {
	color: var(--brand);
	text-decoration: none;

	&:hover {
		color: var(--brand-dark);
	}
}

p,
section ul {
	font-family: var(--font-text);
	font-weight: 400;
	letter-spacing: 0;

	& a {
		color: var(--brand);
		text-decoration: none;
		box-shadow: inset 0 -2px 0 var(--white), inset 0 -12px 0 var(--brand-tint);
		transition: all var(--t-link, 175ms) var(--ease);
		padding: 0 2px;
		margin: 0 -2px;

		&:hover {
			color: var(--white);
			box-shadow: inset 0 0 0 var(--white), inset 0 -30px 0 var(--brand);
		}
	}
}

:root {
	@media (min-width: 75em) {
		--t-link: .21s;
	}
}

h1,
h2,
h3 {
	font-family: var(--font-head);
	font-weight: 600;
	line-height: 1.3;
	color: var(--heading);
	margin: 0;
	padding: 0;
}

h1 {
	font-size: var(--fs-22-37);
	font-weight: 400;

	& span {
		display: block;
		font-weight: 300;
	}
}

h2 {
	font-size: var(--fs-22-37);
	margin-bottom: 4rem;

	@media (max-width: 45.25em) {
		margin-bottom: 3rem;
	}
}

h3 {
	font-size: var(--fs-19-26);
}

address {
	font-style: normal;
}

ul {
	margin-left: 0;
	padding-left: 2rem;
	list-style-image: url('/img/bulletpoint.svg');

	& li {
		padding-left: 1rem;
		margin-top: 2rem;

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

/* inline SVG colour classes (used inside the icon files) */
svg {
	& .hasFill.brand { fill: var(--brand); }
	& .hasFill.brand-l3 { fill: var(--brand-l3); }
	& .hasFill.brand-l6 { fill: var(--brand-l6); }
	& .hasFill.dark-l8 { fill: var(--line); }

	& .hasStroke {
		fill: none;
		stroke-width: 2;
		stroke-miterlimit: 10;
		stroke-linejoin: round;
		stroke-linecap: butt;

		&.dark { stroke: var(--dark); }
		&.dark-l3 { stroke: var(--dark-l3); }
		&.dark-l6 { stroke: var(--dark-l6); }
		&.brand { stroke: var(--brand); }
	}
}

/* -------------------------------------------------------------------------
 * Layout
 * ---------------------------------------------------------------------- */

.center {
	display: flow-root;
	max-width: var(--max-width);
	margin-inline: auto;
	padding: 0 5%;

	@media (max-width: 45.25em) {
		padding: 0 3%;
	}
}

main {
	position: relative;
	z-index: 30;
	background: var(--white);
	/* the header is fixed; js/main.js writes its height into --header-height */
	margin-top: var(--header-height, 560px);

	&::before {
		content: "";
		position: absolute;
		top: -8rem;
		width: 100%;
		height: 8rem;
		background: linear-gradient(180deg, rgb(255 255 255 / .75), var(--white));

		@media (max-width: 45.25em) {
			top: -4rem;
			height: 4rem;
		}
	}

	/* keeps the bottom margin of the last section inside main
	   (the top margin of the first section collapses into main's margin-top) */
	&::after {
		content: "";
		display: flow-root;
	}

	& > section {
		margin-block: 10rem;

		@media (max-width: 74.938em) {
			margin-block: 7.5rem;
		}
		@media (max-width: 37.438em) {
			margin-block: 5rem;
		}
	}

	& section ul {
		margin-bottom: 4rem;
	}
}

/* shared look of the filled red buttons */
/* plain selector list (not :is) so every selector keeps its own specificity */
section.grid-cards .waffleGrid a.last-link,
section.button-grid a,
body > footer .locations address a,
body > footer .contact .email {
	position: relative;
	z-index: 1;
	overflow: hidden;
	padding: 2rem;
	border-radius: 0;
	background: var(--brand);
	color: var(--white);
	fill: var(--white);
	font-family: var(--font-head);
	font-weight: 400;
	line-height: 1;
	transition: all var(--t) var(--ease);

	&:hover {
		background: var(--brand-dark);
	}
}

/* -------------------------------------------------------------------------
 * Navigation
 * ---------------------------------------------------------------------- */

body > nav {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
	width: 100%;
	height: 12rem;
	transform: translateY(3rem);
	transition: all var(--t) var(--ease);

	&::before {
		content: "";
		position: absolute;
		bottom: 0;
		width: 100%;
		height: calc(100% + 3rem);
		background: linear-gradient(180deg, var(--white), rgb(255 255 255 / .9));
		border-bottom: 1px solid var(--line);
		opacity: 0;
		transition: all var(--t) var(--ease);
	}

	& .wrapper {
		position: relative;
		display: flex;
		height: 100%;
	}

	& .logo-link {
		position: relative;
		flex: 0 0 auto;
		width: 15.045rem;
		height: 12rem;
		transform: translate(-10.5%, 1rem);
		transition: all var(--t-slow) var(--ease);

		&::before {
			content: "";
			position: absolute;
			top: 25%;
			left: 25%;
			z-index: -1;
			width: 50%;
			height: 50%;
			box-shadow: 0 0 80px 40px var(--white);
			transition: all var(--t-slow) var(--ease);
		}

		& svg {
			width: 100%;
			height: 100%;
			transition: all var(--t-slow) var(--ease);
		}
	}

	& .info {
		position: absolute;
		z-index: 1;
		margin-left: 17.045rem;
		transform: translateY(1rem);
		color: var(--dark-l3);
		fill: var(--dark-l3);
		stroke: var(--dark-l3);
		font-size: var(--fs-16-18);
		transition: all var(--t) var(--ease);

		& span {
			display: flex;
			align-items: center;
			line-height: 1;
			text-shadow: 0 0 10px var(--white), 0 0 25px var(--white);
			transition: all var(--t) var(--ease);

			&:first-of-type {
				margin-bottom: 1rem;
			}

			& svg {
				height: 2.5rem;
				margin-right: .5rem;
			}

			&.phoneNumber {
				font-size: var(--fs-19-26);
				font-weight: 600;
			}
		}
	}

	& button {
		display: none;
	}

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

	& .navList {
		position: relative;
		flex: 1 1 auto;
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		height: 100%;
		transform: translateY(1rem);
		transition: all var(--t) var(--ease);
	}

	& .navList-item {
		position: relative;
		display: inline-block;
		transition: all var(--t) var(--ease);

		&::after {
			content: "";
			position: absolute;
			top: 75%;
			left: 0;
			width: 100%;
			height: 5px;
			background: url('/img/brand-shape-red.svg') 50% / contain no-repeat;
			opacity: 0;
			transition: all var(--t) var(--ease);
		}

		&.dropdown::after {
			content: none;
		}

		& .navList-link {
			position: relative;
			display: inline-block;
			padding: 2rem;
			color: var(--brand);
			font-size: var(--fs-19-26);
			font-weight: 600;
			line-height: 1;
			text-shadow: 0 0 5px var(--white), 0 0 10px var(--white), 0 0 25px var(--white);
			transition: all var(--t) var(--ease);
		}

		&.active .navList-link {
			color: var(--dark);
		}

		&:hover {
			transform: translateY(-10%);

			&::after {
				transform: translateY(100%);
				opacity: 1;
			}

			& .navList-link {
				color: var(--dark);
			}

			& ul {
				visibility: visible;
				opacity: 1;
			}
		}
	}

	& .subNavList {
		position: absolute;
		top: 100%;
		left: 2rem;
		visibility: hidden;
		opacity: 0;
		background: var(--brand);
		transition: opacity var(--t-slow) var(--ease);
	}

	& .subNavList-item {
		transition: background var(--t-slow) var(--ease);

		& .subNavList-link {
			display: block;
			padding: 1rem;
			border-top: 1px solid var(--brand-dark);
			color: var(--white);
			font-size: var(--fs-16-18);
			font-weight: 400;
			white-space: nowrap;
			text-shadow: none;
			transition: all var(--t-slow) var(--ease);
		}

		&:hover {
			background: var(--brand-dark);

			& .subNavList-link {
				transform: translateX(.4rem);
				background: var(--brand-dark);
			}
		}

		&.active {
			background: var(--dark);

			& .subNavList-link {
				border-top-color: var(--dark);
				background: var(--dark);
			}
		}
	}

	/* scrolled state, set by js/main.js */
	&.isSmall {
		height: 8rem;
		transform: translateY(0);

		&::before {
			opacity: 1;
			box-shadow: 0 0 10px rgb(63 63 63 / .1), 0 0 20px rgb(63 63 63 / .1), 0 0 40px rgb(63 63 63 / .1);
		}

		& .logo-link {
			width: 10.03rem;
			height: 8rem;

			&::before {
				box-shadow: 0 0 50px 0 var(--white);
			}
		}

		& .info {
			margin-left: 11.03rem;
			transform: translateY(1.2rem);

			@media (max-width: 51.812em) {
				display: none;
			}

			& span:first-of-type {
				opacity: 0;
			}

			& span.phoneNumber {
				font-size: var(--fs-17-22);
			}
		}

		& .navList,
		& .navList-item:hover,
		& .navList-item:hover::after {
			transform: translateY(0);
		}

		& .navList-item:hover::after {
			content: none;
		}

		& .navList-item .navList-link {
			transform: translateY(0);
			font-size: var(--fs-17-22);
		}
	}

	/* mobile: compact bar + fullscreen menu */
	@media (max-width: 45.25em) {
		height: 8rem;
		transform: none;

		&::before {
			height: 8rem;
			opacity: 1;
			box-shadow: 0 0 10px rgb(63 63 63 / .1), 0 0 20px rgb(63 63 63 / .1), 0 0 40px rgb(63 63 63 / .1);
		}

		& .logo-link {
			width: 10.03rem;
			height: 8rem;

			&::before {
				box-shadow: 0 0 25px 0 var(--white);
			}
		}

		& .info {
			margin-left: 10.03rem;

			& span {
				text-shadow: none;
			}
		}

		& button {
			position: absolute;
			top: 2rem;
			right: 2rem;
			z-index: 100000;
			display: flex;
			align-items: center;
			overflow: hidden;
			padding: 1rem;
			border-radius: 0;
			background: var(--brand);
			color: var(--white);
			fill: var(--white);
			font-family: var(--font-head);
			font-weight: 400;
			line-height: 1;
			text-transform: uppercase;
			transition: all var(--t) var(--ease);

			&:hover {
				background: var(--brand-dark);
			}

			& span {
				margin-right: .5rem;
			}

			& svg {
				width: 2rem;
			}

			& svg.icon-close {
				display: none;
			}
		}

		& ul.navList {
			position: fixed;
			top: 0;
			left: 0;
			z-index: -1;
			display: flex;
			flex-direction: column;
			width: 100%;
			height: 100%;
			padding-top: 8rem;
			opacity: 0;
			transform: translateX(10%);
			pointer-events: none;

			& li.navList-item {
				position: relative;
				flex: 1 1 0%;
				width: 100%;
				transform: none;
				background: var(--brand);
				border-top: 1px solid var(--brand-dark);

				&::after {
					content: none;
				}

				&:first-of-type {
					border: none;
				}

				& a.navList-link {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100%;
					height: 100%;
					color: var(--white);
					text-shadow: none;
				}

				&:hover {
					background: var(--brand-dark);

					& .navList-link {
						color: var(--white);
					}
				}
			}
		}

		& .subNavList {
			display: none;
		}
	}

	@media (max-width: 37.438em) {
		height: 4rem;

		& .logo-link {
			width: 6.269rem;
			height: 5rem;
			transform: translateY(1rem);
		}

		& .info {
			margin-left: 7.269rem;

			& span:first-of-type {
				display: none;
			}
		}

		& button {
			top: 0;
			right: 0;
		}

		& ul.navList {
			padding-top: 4rem;
		}
	}

	@media (max-width: 23.688em) {
		& .info {
			display: none;
		}
	}

	&.fullscreenNav {
		& button svg.icon-menu-bars {
			display: none;
		}

		& button svg.icon-close {
			display: inline-block;
		}

		& .navList {
			opacity: 1;
			transform: translateX(0);
			pointer-events: all;
		}
	}
}

/* -------------------------------------------------------------------------
 * Header (fixed, page content scrolls over it)
 * ---------------------------------------------------------------------- */

#content > header {
	position: fixed;
	top: 0;
	z-index: 10;
	width: 100%;

	& .header-bg {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: url('/img/header-bg.jpg') center / cover no-repeat;
	}

	& .center {
		position: relative;
		z-index: 12;
		padding-top: 24rem;

		@media (max-width: 29.312em) {
			padding: 0;
		}

		& h1 {
			position: relative;
			display: inline-block;
			margin-bottom: 16rem;
			padding: 3rem;
			color: var(--white);
			background: var(--brand);

			& strong {
				display: block;
			}
		}

		@media (max-width: 45.25em) {
			padding-top: 20rem;

			& h1 {
				padding: 2rem;
				margin-bottom: 12rem;
			}
		}

		@media (max-width: 29.312em) {
			& h1 {
				width: 100%;
				margin-bottom: 9rem;
			}
		}
	}

	&.hero .center {
		padding-top: 34rem;

		@media (max-width: 45.25em) {
			padding-top: 26rem;
		}
		@media (max-width: 29.312em) {
			padding-top: 20rem;
		}
	}
}

/* -------------------------------------------------------------------------
 * Section: text with image (home)
 * ---------------------------------------------------------------------- */

section.text-with-img {
	& .center {
		display: grid;
		grid-template-columns:
			calc(99.9% * 5 / 12 - (5% - 5% * 5 / 12))
			calc(99.9% * 7 / 12 - (5% - 5% * 7 / 12));
		justify-content: space-between;
		align-items: start;
	}

	& :is(figure, picture) figcaption {
		margin-top: 1rem;
		color: var(--dark-l3);
		font-family: var(--font-head);
		font-weight: 400;
	}

	& ul:last-of-type {
		margin-bottom: 0;
	}

	@media (max-width: 45.25em) {
		& .center {
			display: flex;
			flex-direction: column;
			align-items: stretch;
		}

		& :is(figure, picture) {
			margin-bottom: 4rem;

			& :is(figcaption, img, svg) {
				width: 80%;
				margin: 0 auto;
				text-align: center;
			}
		}

		&.switchOnMobile {
			& .col {
				order: -1;
				margin-bottom: 2rem;
			}

			& :is(figure, picture) {
				margin-bottom: 0;
			}
		}
	}

	@media (max-width: 31.188em) {
		& :is(figure, picture) :is(figcaption, img, svg) {
			width: 100%;
		}
	}
}

body.page-home section.text-with-img:last-child picture {
	margin-top: -6rem;
}

/* -------------------------------------------------------------------------
 * Section: team (home)
 * ---------------------------------------------------------------------- */

section.team {
	& .wrapper_grid {
		--cols: 6;
		--gap: 32px;
		display: grid;
		grid-template-columns: repeat(var(--cols), calc(99.9% / var(--cols) - (var(--gap) - var(--gap) / var(--cols))));
		justify-content: space-between;
		gap: var(--gap);

		@media (max-width: 58.062em) {
			--cols: 3;
		}
		@media (max-width: 45.25em) {
			--gap: 24px;
		}
		@media (max-width: 29.938em) {
			--cols: 2;
			--gap: 16px;
		}
	}

	& .wrapper_img {
		overflow: hidden;
		border-radius: 50%;

		& img {
			width: 100%;
		}
	}
}

/* -------------------------------------------------------------------------
 * Section: grid cards (home)
 * ---------------------------------------------------------------------- */

section.grid-cards {
	position: relative;
	padding-block: 6rem;
	margin-bottom: 0;
	border-block: 1px solid var(--line);
	background: var(--gradient-grey);

	@media (max-width: 74.938em) {
		padding-block: 4.5rem;
	}
	@media (max-width: 37.438em) {
		padding-block: 3rem;
	}

	/* flex-wrap (not grid): percentage margins between rows must resolve
	   against the width of .waffleGrid, exactly like the former floats */
	& .waffleGrid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	& .waffleGrid .item {
		display: flex;
		align-items: center;
		width: calc(99.9% * 2 / 6 - (2.5% - 2.5% * 2 / 6));
		margin-bottom: 2.5%;
		padding: 3rem;
		background: var(--white);

		&:nth-last-child(-n + 3) {
			margin-bottom: 0;
		}

		&:nth-last-child(-n + 2) {
			width: calc(99.9% / 2 - 1.25%);
		}

		@media (max-width: 81.188em) {
			width: calc(99.9% / 2 - 1.25%);

			&:nth-last-child(3) {
				margin-bottom: 2.5%;
			}
		}

		@media (max-width: 45.25em) {
			margin-bottom: 1rem;

			&,
			&:nth-last-child(-n + 2) {
				width: 99.9%;
			}

			&:nth-last-child(-n + 3) {
				margin-bottom: 1rem;
			}

			&:last-child {
				margin-bottom: 0;
			}
		}

		& h3 {
			flex: 1 1 auto;
		}

		& figure {
			flex: 0 0 auto;
			width: 12rem;
			height: 12rem;
			margin-right: 3rem;
		}

		@media (max-width: 60.562em) {
			padding: 2rem;

			& figure {
				width: 8rem;
				height: 8rem;
				margin-right: 2rem;
			}
		}
	}

	& .waffleGrid a.last-link {
		padding: 3rem;
		font-weight: 600;

		& h3 {
			margin-left: 2rem;
			color: var(--white);
			font-size: var(--fs-21-31);
			font-weight: 400;

			& span {
				display: block;
				font-size: var(--fs-17-22);
			}
		}

		& figure {
			display: flex;
			align-items: center;
			width: 8rem;
			margin-right: 0;
			transition: all var(--t) var(--ease);

			@media (max-width: 60.562em) {
				width: 6rem;
			}

			& svg {
				fill: none;
				stroke: var(--white);
				stroke-width: 1.5;
				stroke-miterlimit: 10;
				stroke-linejoin: butt;
				stroke-linecap: bevel;
			}
		}

		&:hover figure {
			transform: translateX(1rem) scaleY(.9);
		}
	}
}

/* -------------------------------------------------------------------------
 * Section: text columns (home col-3, kanzlei col-2)
 * ---------------------------------------------------------------------- */

.text-col {
	& .wrapper-col {
		--gap: 5%;
		display: grid;
		grid-template-columns: repeat(var(--cols), calc(99.9% / var(--cols) - (var(--gap) - var(--gap) / var(--cols))));
		justify-content: space-between;
		align-items: start;

		@media (max-width: 56.188em) {
			display: block;
		}
	}

	&.col-3 .wrapper-col { --cols: 3; }
	&.col-2 .wrapper-col { --cols: 2; }

	& .col {
		display: flow-root;

		& > :last-child {
			margin-bottom: 0;
		}

		@media (max-width: 56.188em) {
			margin-bottom: 4rem;
		}
	}

	& figure {
		margin-bottom: 2rem;

		& svg {
			width: 33%;
		}
	}

	/* col-3, tablet: text left (2/3), icon right (1/3) */
	&.col-3 .col {
		@media (max-width: 56.188em) and (min-width: 34.375em) {
			display: grid;
			grid-template-columns:
				calc(99.9% * 2 / 3 - (5% - 5% * 2 / 3))
				calc(99.9% * 1 / 3 - (5% - 5% * 1 / 3));
			column-gap: 5%;
			align-items: start;

			& figure {
				grid-column: 2;
				grid-row: 1;
				margin-bottom: 0;
			}

			& .text {
				grid-column: 1;
				grid-row: 1;
			}
		}
	}

	@media (max-width: 56.188em) {
		& figure svg {
			width: 50%;
			margin: 0 auto;
		}

		&.col-2 figure {
			margin-bottom: 0;
		}
	}

	@media (max-width: 34.312em) {
		& figure {
			margin-bottom: 2rem;

			& svg {
				width: 25%;
				margin: 0;
			}
		}
	}
}

.cards {
	padding-block: 6rem;
	border-block: 1px solid var(--line);
	background: var(--gradient-grey);

	@media (max-width: 74.938em) {
		padding-block: 4.5rem;
	}
	@media (max-width: 37.438em) {
		padding-block: 3rem;
	}

	& .col {
		padding: 4rem;
		background: var(--white);
	}
}

/* -------------------------------------------------------------------------
 * Icon list (kanzlei)
 * ---------------------------------------------------------------------- */

ul.icon-list {
	margin: 0;
	padding: 0;
	list-style: none;

	& li {
		display: flex;
		align-items: center;
		margin: 0 0 3rem;
		padding: 0;

		& picture {
			flex: 0 0 8rem;
			height: 8rem;
			margin-right: 3rem;

			& :is(img, svg) {
				height: 100%;
				margin-bottom: 0;
			}
		}

		& p {
			margin: 0;
			color: var(--heading);
			font-family: var(--font-head);
			font-size: var(--fs-17-22);
			font-weight: 600;

			& span {
				display: block;
				font-size: var(--fs-15-17);
				line-height: 1.2;
			}
		}
	}
}

/* -------------------------------------------------------------------------
 * Portraits (kanzlei)
 * ---------------------------------------------------------------------- */

section.portraits {
	& .row.col-2 {
		display: grid;
		grid-template-columns: repeat(2, calc(99.9% / 2 - 2.5%));
		justify-content: space-between;
		align-items: start;

		@media (max-width: 45.25em) {
			display: block;
		}
	}

	& .item {
		& picture {
			position: relative;
			margin-bottom: -6rem;

			&::after {
				content: "";
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: 1;
				width: 100%;
				height: 100%;
				background:
					linear-gradient(rgb(255 255 255 / 0) 75%, var(--white)),
					linear-gradient(200deg, rgb(255 255 255 / 0) 60%, var(--white)),
					linear-gradient(90deg, var(--line) 0, rgb(217 217 217 / 0) 30%);
			}
		}

		& .portraitInfo {
			position: relative;
			z-index: 1;

			& :is(h3, span.academicTitle) {
				margin-inline: 2rem;
				text-shadow: 0 0 10px var(--white), 0 0 20px var(--white), 0 0 30px var(--white);
			}

			& ul {
				margin-bottom: 0;
			}
		}

		/* tablet: picture on the right, text overlapping from the left */
		@media (max-width: 45.25em) and (min-width: 28.125em) {
			display: grid;

			& picture {
				justify-self: end;
				width: calc(99.9% * 3 / 4 - (5% - 5% * 3 / 4));
				margin-bottom: -16rem;
			}

			& .portraitInfo {
				justify-self: start;
				width: calc(99.9% * 3 / 4 - (5% - 5% * 3 / 4));
				margin-left: .1%;

				& ul {
					margin-top: 10rem;
					margin-bottom: 4rem;
				}
			}

			&:last-child .portraitInfo ul {
				margin-bottom: 0;
			}
		}

		@media (max-width: 28.062em) {
			& picture {
				margin-bottom: -4rem;
			}

			& .portraitInfo ul {
				margin-top: 0;
				margin-bottom: 4rem;
			}

			&:last-child .portraitInfo ul {
				margin-bottom: 0;
			}
		}
	}
}

body.page-kanzlei section.portraits {
	@media (max-width: 45.25em) {
		margin-bottom: 0;
	}
}

/* -------------------------------------------------------------------------
 * Text multi column (leistungen detail pages)
 * ---------------------------------------------------------------------- */

section.text-multi-col {
	& ul:last-of-type {
		margin-bottom: 0;
	}

	& h3 {
		margin-bottom: 4rem;
	}

	& .row.col-2 {
		display: grid;
		grid-template-columns: repeat(2, calc(99.9% / 2 - 2.5%));
		justify-content: space-between;
		align-items: start;

		&.third {
			grid-template-columns:
				calc(99.9% * 1 / 3 - (5% - 5% * 1 / 3))
				calc(99.9% * 2 / 3 - (5% - 5% * 2 / 3));
		}

		@media (max-width: 56.188em) {
			display: block;

			/* the former clearfix kept child margins inside each item */
			& > .item {
				display: flow-root;
			}

			&.third > .item:first-of-type {
				display: flex;
				align-items: center;
			}
		}

		@media (max-width: 37.438em) {
			&.third > .item:first-of-type {
				flex-direction: column;
				align-items: flex-start;
			}
		}
	}
}

body.page-leistungen .text-multi-col .item:first-of-type {
	& picture {
		width: 33%;
		margin-bottom: 4rem;
	}

	@media (max-width: 56.188em) {
		margin-bottom: 4rem;

		& h2 {
			margin-bottom: 0;
		}

		& picture {
			width: 12rem;
			margin: 0 4rem 0 0;
		}
	}

	@media (max-width: 37.438em) {
		margin-bottom: 2rem;

		& picture {
			width: 8rem;
			margin: 0 0 2rem;
		}
	}
}

/* -------------------------------------------------------------------------
 * Button grid (leistungen)
 * ---------------------------------------------------------------------- */

section.button-grid .center {
	/* flex-wrap (not grid): percentage margins between rows resolve against
	   the width of .center, exactly like the former floats */
	--cols: 3;
	--gap: 3%;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	column-gap: var(--gap);

	@media (max-width: 65.562em) {
		--cols: 2;
	}
	@media (max-width: 37.438em) {
		--cols: 1;
		--gap: 2%;
	}

	& a {
		width: calc(99.9% / var(--cols) - (var(--gap) - var(--gap) / var(--cols)));
		margin-bottom: var(--gap);
		padding: 3rem;
		font-size: var(--fs-21-31);

		&:nth-last-child(-n + 3) {
			margin-bottom: 0;
		}

		@media (max-width: 65.562em) {
			&:nth-last-child(3) {
				margin-bottom: var(--gap);
			}
		}

		@media (max-width: 37.438em) {
			&:nth-last-child(2) {
				margin-bottom: var(--gap);
			}
		}
	}
}

/* -------------------------------------------------------------------------
 * Contact page
 * ---------------------------------------------------------------------- */

section.form {
	display: flow-root;
	max-width: var(--max-width);
	margin-inline: auto;
}

/* -------------------------------------------------------------------------
 * Legal pages (datenschutz, impressum)
 * ---------------------------------------------------------------------- */

:is(body.page-datenschutz, body.page-impressum) section {
	display: flow-root;
	max-width: var(--max-width);
	margin-inline: auto;
	margin-bottom: 90px;

	& :is(h2, h3, p, span) {
		max-width: 75%;
	}

	& .twoblocks {
		display: flex;
		gap: 5%;
		clear: both;

		& div {
			width: 45%;
		}
	}

	& .blocks2 {
		padding-top: 45px;
	}
}

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */

body > footer {
	display: flow-root;
	position: relative;
	z-index: 20;
	padding-block: 10rem;
	border-top: 1px solid var(--line);
	background: var(--gradient-grey);
	font-family: var(--font-head);

	@media (max-width: 74.938em) {
		padding-block: 7.5rem;
	}
	@media (max-width: 37.438em) {
		padding-block: 5rem;
	}

	& h2 {
		display: block;

		@media (max-width: 37.438em) {
			text-align: center;
		}
	}

	& .locations {
		--cols: 3;
		--gap: 5%;
		display: grid;
		grid-template-columns: repeat(var(--cols), calc(99.9% / var(--cols) - (var(--gap) - var(--gap) / var(--cols))));
		justify-content: space-between;
		align-items: start;

		@media (max-width: 45.25em) {
			--gap: 3%;
		}
		@media (max-width: 40.562em) {
			--cols: 1;

			& address {
				margin-bottom: 2rem;
			}
		}

		& address {
			display: flex;
			flex-flow: column nowrap;
			background: var(--white);

			& :is(a, span, strong) {
				display: block;
				padding: 2rem;
			}

			& strong {
				font-size: var(--fs-17-22);

				&:first-of-type {
					padding-bottom: 0;
				}
			}

			& .phoneNumber {
				display: flex;
				align-items: center;
				border-top: 1px solid var(--light);
				font-size: var(--fs-21-31);

				@media (max-width: 61.812em) {
					flex-direction: column;
					align-items: flex-start;
				}

				@media (min-width: 40.625em) and (max-width: 53.688em) {
					font-size: var(--fs-17-22);
				}

				& svg {
					height: 3rem;
					margin-right: 1rem;
					stroke: var(--dark);
				}
			}
		}
	}

	& .contact {
		display: flex;
		align-items: center;
		margin-top: 4rem;

		& h2 {
			width: calc(99.9% / 2 - 2.5%);
			margin: 0 5% 0 0;
			text-align: right;
			font-size: var(--fs-19-26);
		}

		& br {
			display: none;
		}

		& .email {
			display: flex;
			align-items: center;
			width: calc(99.9% / 2 - 2.5%);
			font-size: var(--fs-19-26);

			& svg {
				width: 4rem;
				margin-right: 2rem;
			}
		}

		@media (max-width: 53.062em) {
			& h2 {
				width: calc(99.9% * 2 / 5 - (5% - 5% * 2 / 5));
				text-align: left;
			}

			& br {
				display: inline;
			}

			& .email {
				width: calc(99.9% * 3 / 5 - (5% - 5% * 3 / 5));
				justify-content: center;
			}
		}

		@media (max-width: 37.438em) {
			flex-direction: column;

			& h2 {
				width: auto;
				margin: 0 0 2rem;
			}

			& .email {
				width: auto;
			}
		}
	}

	& .bottom {
		margin-top: 6rem;

		@media (max-width: 40.562em) {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		& a {
			display: inline-block;
			position: relative;
			z-index: 1;
			overflow: hidden;
			padding: 1rem;
			border: 1px solid var(--grey-text);
			border-radius: 0;
			color: var(--grey-text);
			font-family: var(--font-head);
			font-size: var(--fs-14-15);
			font-weight: 400;
			line-height: 1;
			transition: all var(--t) var(--ease);

			&:first-of-type {
				margin-right: 1rem;
			}

			&:hover {
				color: var(--white);
				background: var(--brand);
				border-color: var(--brand);
			}
		}
	}
}