/* @group FONTS */

@font-face {
  font-family: 'STIX Two Text';
  src: url('../fonts/STIXTwoText-VariableFont_wght.woff2') format('woff2 supports variations'),
       url('../fonts/STIXTwoText-VariableFont_wght.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-VariableFont_wght.woff2') format('woff2 supports variations'),
       url('../fonts/OpenSans-VariableFont_wght.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-display: swap;
}

/* @end */

/* @group VARIABLES */

:root {
	
	--font-family-serif: 				'STIX Two Text', Georgia, Times, serif;
	--font-family-sans-serif: 		'Open Sans', Verdana, Arial, sans-serif;
	
	--font: 						400 18px/1.5em var(--font-family-sans-serif);
	--font-h1:					450 46px/1.2em var(--font-family-serif);
	--font-h2:					450 36px/1.2em var(--font-family-serif);
	--font-h3:					450 27px/1.3em var(--font-family-serif);
	--font-h4: 					400 1rem/1.5em var(--font-family-sans-serif);
	--font-uppercase: 	500 17.3px/1em var(--font-family-sans-serif);
	--font-menu: 				var(--font-uppercase);
	--font-intro: 			400 24px/1.4em var(--font-family-serif);
	
	--font-weight-bold: 650;
	
	--spacing-block: 			clamp(1.5rem, 2vw, 2.5rem);
	--spacing-block-sm: 		clamp(1rem, 3vw, 1.5rem);
	--spacing-block-lg: 		clamp(2rem, 6vw, 3.5rem);
	--spacing-block-xl: 		clamp(4rem, 9vw, 6rem);
	--spacing-block-xxl: 	clamp(6rem, 14vw, 9rem);
	
	--spacing-inline: 			clamp(1rem, 4.8vw, 3rem);
	--spacing-inline-sm: 	clamp(.75rem, 4.8vw, 1.5rem);
	
	--spacing-columns: 	clamp(1.5rem, 6.0vw, 3rem);
	
	--min-width: 				320px;
	
	--max-width: 				72rem;
	--max-width-sm:			48rem;
	--max-width-lg: 			88rem;
}

@media (max-width: 1399px) {
	
	:root {
		--font-h1:					450 36px/1.2em var(--font-family-serif);
		--font-h2:					450 30px/1.2em var(--font-family-serif);
		--font-h3:					450 24px/1.3em var(--font-family-serif);
		--font-menu: 				450 22px/1em var(--font-family-sans-serif);
		--font-intro: 			400 20px/1.4em var(--font-family-serif);
	}
	
}

/* @group Colors */

@property --color-base {
  syntax: "<color>";
  inherits: true;
  initial-value: #424A52;
}

@property --color-primary {
  syntax: "<color>";
  inherits: true;
  initial-value: #803654;
}

@property --color-highlight {
  syntax: "<color>";
  inherits: true;
  initial-value: #BD1C4C;
}

@property --color-grey-dark {
  syntax: "<color>";
  inherits: true;
  initial-value: #474747;
}

@property --color-grey {
  syntax: "<color>";
  inherits: true;
  initial-value: #8F8F8F;
}

@property --color-grey-light {
  syntax: "<color>";
  inherits: true;
  initial-value: #F0F0F0;
}

@property --color-black {
  syntax: "<color>";
  inherits: true;
  initial-value: #000000;
}

@property --color-white {
  syntax: "<color>";
  inherits: true;
  initial-value: #FFFFFF;
}

/* @end */

/* @end */

/* @group BASE */

html,
body {
	min-width: var(--min-width);
	color: var(--color-base);
	font: var(--font);
}

strong {
	font-weight: var(--font-weight-bold);
}

h1 {
	color: var(--color-black);
	font: var(--font-h1);
}

* + h1 {
	margin-top: .75em;
}

h1:has(+ *) {
	margin-bottom: .5em;
}

h2 {
	color: var(--color-black);
	font: var(--font-h2);
}

* + h2 {
	margin-top: 1em;
}

h2:has(+ *) {
	margin-bottom: .3em;
}

h3 {
	color: var(--color-black);
	font: var(--font-h3);
}

* + h3 {
	margin-top: 1.5em;
}

h3:has(+ *) {
	margin-bottom: .5em;
}

h4 {
	font: var(--font-h4);
	font-weight: var(--font-weight-bold);
}

* + h4 {
	margin-top: 1.5em;
}

h4:has(+ *) {
	margin-bottom: .5em;
}

p:has(+ *) {
	margin-bottom: 1em;
}

img,
video {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

img + figcaption,
video + figcaption {
	margin-top: .5em;
	color: var(--color-grey);
}

.main figure:has(+ *) {
	margin-bottom: 1em;
}

nobr {
	white-space: nowrap;
}

/* @group Table */

table:has(+ *) {
	margin-bottom: 1.5em;
}

	table td {
		vertical-align: top;
	}

	table td:not(:last-child) {
		padding-right: 1em;
	}
			
	table tr:not(:last-child) td {
		padding-bottom: .5em;
	}
	
	.footer table tr:not(:last-child) td {
		padding-bottom: unset;
	}
	
/* @end */

/* @group Lists */

.main ul:not([class]):has(+ *) {
    margin-bottom: 1.5em;
}

	.main ul:not([class]) li:not([class]) {
	   display: flex;
	}
	
		.main ul:not([class]) li:not([class])::before {
	    content: "•";
	    flex: 0 0 1.25em;
			padding-right: .25em;
			color: var(--color-primary);
			text-align: center;
		}
	
	.main ul:not([class]) li:not([class]):has(+ li) {
	   margin-bottom: .5em;
	}
	
ol {
  counter-reset: counter;
}

ol:has(+ *) {
	margin-bottom: 1em;
}

	ol li {
		display: table;
	  counter-increment: counter;
	}
	
	ol li:has(+ li) {
		margin-bottom: .5em;
	}
	
		ol li::before {
		  content: counter(counter) ".";
	    display: table-cell;
	    width: 2em;
			padding-right: .6em;
			text-align: right;
		}

/* @end */

/* @group Links */

/* Underlined */

.section a,
.teaser a,
.intro a,
.colophon a[href^="mailto:"],
.colophon a[href^="tel:"],
.colophon a[href^="fax:"],
.colophon a[href*="maps.app"],
.footer a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
	transition: all .15s ease-in-out 0s;
}

.section a,
.teaser a,
.intro a {
	text-decoration-color: var(--color-primary);
}

.section a:hover,
.teaser a:hover,
.intro a:hover {
	color: var(--color-highlight);
	text-decoration-color: var(--color-highlight);
}

.colophon a[href^="mailto:"],
.colophon a[href^="tel:"],
.colophon a[href^="fax:"],
.colophon a[href*="maps.app"] {
	text-decoration-color: transparent;
}

.colophon a[href^="mailto:"]:hover,
.colophon a[href^="tel:"]:hover,
.colophon a[href^="fax:"]:hover,
.colophon a[href*="maps.app"]:hover {
	text-decoration-color: currentColor;
}

.footer a:hover {
	color: var(--color-grey);
}

/* Uppercase */

.news a,
.teaser p:last-child a:only-child {
	font: var(--font-uppercase);
	text-transform: uppercase;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
	letter-spacing: .03em;
	transition: all .15s ease-in-out 0s;
}

.news a {
	color: currentColor;
}

.teaser p:last-child a:only-child {
	color: var(--color-primary);
}

.news p:last-child a:only-child:hover,
.teaser p:last-child a:only-child:hover {
	text-decoration-color: currentColor;
}

.teaser p:last-child a:only-child:hover {
	color: var(--color-highlight);
}

/* Menu */

@media (min-width: 1200px) {
	
	.primary-menu a,
	.secondary-menu a {
		transition: all .15s ease-in-out 0s;
	}
	
	.primary-menu a:hover,
	.secondary-menu a:hover {
		color: var(--color-highlight);
	}
	
	.primary-menu a.active,
	.secondary-menu a.active {
		text-decoration: underline;
		text-decoration-color: currentColor;
		text-decoration-thickness: 1px;
		text-underline-offset: .2em;
	}
	
}

/* @end */

/* @group Buttons */

.button {
	position: relative;
	display: inline-block;
	padding-block: .6em;
	padding-inline: 1.3em;
	color: var(--color-white);
	background-color: var(--color-primary);
	font-weight: 600;
	line-height: 1em;
	text-decoration: unset;
	transition: background-color .15s ease-in-out 0s;
}

.button:hover,
.card:has(> a.card__link):hover .button {
	background-color: var(--color-highlight);
}

	.button::after {
		content: "";
	  width: 0;
	  height: 0;
		color: var(--color-primary);
	  border-top: 1.1em solid transparent;
	  border-bottom: 1.1em solid transparent;
	  border-left: .6em solid currentColor;
	  position: absolute;
	  right: -.58em;
	  top: 50%;
	  transform: translateY(-50%);
		transition: color .15s ease-in-out 0s;
	}
	
	.button:hover::after,
	.card:has(> a.card__link):hover .button::after {
		color: var(--color-highlight);
	}

/* @end */

/* @group Form */

form {
	display: flex;
	flex-direction: column;
	row-gap: 1.5rem;
}

.field {
	display: flex;
	flex-direction: column;
	row-gap: .5rem;
}

.honeypot {
  position: absolute;
  left: -9999px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
	width: 100%;
	padding: .5em .5em;
	color: var(--color-black);
	background-color: var(--color-white);
	font: var(--font-intro);
}

textarea {
	resize: vertical;
}

.select-container {
	position: relative;
	display: grid;
	grid-template-areas: "select";
	align-items: center;
}

select {
	-webkit-appearance: none; 
	-moz-appearance: none;
	appearance: none;
	outline: none;
	position: relative;
	padding-right: 2.2em;
	border-radius: 0;
}

select:hover {
	cursor: pointer;
}

	select,
	.select-container::after {
    grid-area: select;
  }

	.select-container::after {
		content: "";
		display: block;
    justify-self: end;
    width: 1em;
    height: 0.6em;
		margin-right: 1em;
    background-color: currentColor;
    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
	}
	
	/* Remove dropdown arrow in IE10 & IE11 */
	.select::-ms-expand {
	  display: none;
	}

.error {
	color: var(--color-primary);
}

/* @end */

/* @end */

/* @group Header */

.header {
	font: 450 clamp(.9rem, 5vw, 2.2rem)/1.1em var(--font-family-serif);
}

	@media (max-width: 1399px) {
		
		.header.fixed,
		.header.open {
			/*font-size: .9rem;*/
		}
		
	}

	@media (min-width: 1400px) {
		
		.header {
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			padding-inline: var(--spacing-inline);
			color: var(--color-primary);
		}
	
	}

/* @end */

/* @group Banner */

.banner {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding-block: 1rem;
}

	@media (max-width: 1399px) {
		
		.banner {
			position: fixed;
			z-index: 10;
			top: 0;
			right: 0;
			left: 0;
			padding-inline: var(--spacing-inline);
			transition: all .3s ease-in-out 0s;
		}
		
		.banner.open,
		.banner.fixed {
			align-items: center;
			color: var(--color-white);
			background-color: var(--color-primary);
			padding-block: unset;
		}
		
	}
	
	@media (min-width: 1400px) {
		
		.banner {
			position: absolute;
			z-index: 10;
			top: 0;
			left: var(--spacing-inline);
		}
		
	}
	
/* @group Logo */
	
	.logo {
		display: flex;
		align-items: center;
		column-gap: .4em;
		width: 15em;
		margin-bottom: -.2em;
		color: var(--color-base);
	}
	
		.logo svg {
			width: 7em;
			height: auto;
			margin-bottom: .25em;
			vertical-align: bottom;
		}
		
		@media (max-width: 1399px) {
			
			.logo.open,
			.logo.fixed {
				color: var(--color-white);
			}
			
					.logo.open svg path[fill="black"],
					.logo.fixed svg path[fill="black"] {
						fill: rgba(255,255,255,1);
					}
					
					.logo.open svg path[fill="#8F8F8F"],
					.logo.fixed svg path[fill="#8F8F8F"] {
						fill: rgba(255,255,255,.4);
					}
					
					.logo.open svg path[fill="#803654"],
					.logo.fixed svg path[fill="#803654"] {
						fill: rgba(255,255,255,.7);
					}
			
		}
	
	/* @end */

/* @group Toggle */

.toggle {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.toggle:hover {
	cursor: pointer;
}

	@media (max-width: 1399px) {
		
		.toggle {
			color: var(--color-primary);
		}
		
		.toggle.fixed,
		.toggle.open {
			color: var(--color-white);
		}
		
	}

	@media (min-width: 1400px) {
		
		.toggle {
			display: none;
		}
		
	}

/* @group Hamburger */

.hamburger {
	position: relative;
	width: clamp(1.8rem, 5vw, 5rem);
	height: clamp(1.8rem, 5vw, 5rem);
}

	.hamburger > * {
		display: block;
		position: absolute;
		top: 50%;
		height: .07em;
		width: 100%;
		background-color: currentColor;
		transition: all .15s ease-in-out 0s;
		transform: translateY(-50%);
	}
	
	.hamburger > *:nth-child(1) {
		transform: translateY(calc(-50% + .25em));
	}

	.hamburger > *:nth-child(3) {
		transform: translateY(calc(-50% - .25em));
	}
	
	.hamburger.open > *:nth-child(1),
	.hamburger.open > *:nth-child(3) {
		margin-inline: auto;
	}
	
	.hamburger.open > *:nth-child(1) {
		transform: rotate(45deg);
	}
	
	.hamburger.open > *:nth-child(2) {
		opacity: 0;
	}
	
	.hamburger.open > *:nth-child(3) {
		transform: rotate(-45deg);
	}

/* @end */

/* @end */

/* @end */

/* @group Menu */

.menu {
	
}

	@media (max-width: 1399px) {
		
		.menu {
			position: fixed;
			z-index: 8;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			display: flex;
			flex-direction: column;
			row-gap: var(--spacing-block-lg);
			padding-top: 5em;
			padding-bottom: var(--spacing-block);
			padding-right: var(--spacing-inline);
			padding-left: calc(var(--spacing-inline) + 4.2em);
			color: var(--color-white);
			background-color: var(--color-primary);
			transform: translateY(-200vh);
			transition: all .3s ease-in-out 0s;
		}
		
		.menu.open {
			transform: translateY(0);
		}
		
	}

	@media (min-width: 1400px) {
		
		.menu {
			pointer-events: none;
			position: relative;
			z-index: 30;
			display: grid;
			align-items: flex-start;
			grid-template-columns: 15em 1fr;
			column-gap: var(--spacing-columns);
			padding-block: 1rem;
		}
		
			.menu > *:nth-child(1) {
				pointer-events: auto;
				margin-top: 7.35em;
				margin-left: 9.55em;
			}
			
			.menu > *:nth-child(2) {
				pointer-events: auto;
				padding-top: 2.6em;
			}
	}

/* @group Primary menu */

.primary-menu {
	display: flex;
	font: var(--font-menu);
	text-transform: uppercase;
	letter-spacing: .03em;
}

	@media (max-width: 1399px) {
	
		.primary-menu {
			flex-direction: column;
			row-gap: .8em;
			font: var(--font-menu);
		}
		
	}

	@media (min-width: 1400px) {
		
			.primary-menu > *:not(:last-child)::after {
				content: "·";
				display: inline-block;
				width: 1em;
				text-align: center;
			}
		
	}

/* @end */

/* @group Secondary menu */

.secondary-menu {
	display: flex;
	font: var(--font);
	line-height: 1;
}
	
	@media (max-width: 1399px) {
		
		.secondary-menu {
			flex-direction: column;
			row-gap: .8em;
			font: var(--font-menu);
		}
		
	}
	
	@media (min-width: 1400px) {
		
		.secondary-menu {
			justify-content: flex-end;
			flex-wrap: wrap;
			column-gap: 1.2em;
			row-gap: .5em;
		}
		
			.secondary-menu > * {
				white-space: nowrap;
			}
		
	}

/* @end */

/* @group Tertiary menu */

.tertiary-menu {
	display: flex;
	font: var(--font);
	line-height: 1em;
}
	
	@media (max-width: 1399px) {
	
		.tertiary-menu {
			flex-direction: column;
			row-gap: .8em;
			padding-bottom: 2em;
			font: var(--font-menu);
		}
		
	}
	
	@media (min-width: 1400px) {
		
		.tertiary-menu {
			display: none;
		}
		
}

/* @end */

/* @end */

/* @group Cover */

.cover {
	position: relative;
	z-index: 1;
	margin-bottom: var(--spacing-block-lg);
}

	.cover img {
		width: 100%;
		height: 70vh;
		object-fit: cover;
	}
	
	@media (orientation: portrait) {
		
			.cover img {
				height: auto;
			}
		
	}

/* @end */

/* @group Main */

.main {
	max-width: var(--max-width-sm);
	margin-inline: auto;
	padding-inline: var(--spacing-inline);
}

.main:has(> .cards-section) {
	max-width: var(--max-width);
}

/* @end */

/* @group Submenu */

.submenu {
	display: flex;
	flex-direction: column;
	color: var(--color-primary);
	border-top: 1px solid currentColor;
	font: var(--font-h3);
}

	.submenu > * {
		border-bottom: 1px solid var(--color-primary);
	}
	
	.submenu a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		column-gap: 1rem;
		height: 4rem;
	}
	
	.submenu a:hover {
		color: var(--color-highlight);
	}
	
		.submenu a::after {
			content: "";
			display: inline-block;
		  width: 2rem;
		  height: 2rem;
			-webkit-mask-size: cover;
		  mask-size: cover;
			-webkit-mask-image: url(../images/arrow-large-right.svg);
			mask-image: url(../images/arrow-large-right.svg);
		  background-color: currentColor;
			transition: transform .15s ease-in-out 0s;
		}
				
		.submenu a:hover::after {
			transform: translateX(.5rem);
		}

/* @end */

/* @group Overview-link */

.overview-link {
	color: var(--color-primary);
	font: var(--font-h3);
}

	.overview-link a {
		display: flex;
		align-items: center;
		column-gap: .5rem;
		height: 4rem;
		border-top: 1px solid var(--color-primary);
		border-bottom: 1px solid var(--color-primary);
	}
	
	.overview-link a:hover {
		color: var(--color-highlight);
	}

		.overview-link a::before {
			content: "";
			display: inline-block;
		  width: 2rem;
		  height: 2rem;
			-webkit-mask-size: cover;
		  mask-size: cover;
			-webkit-mask-image: url(../images/arrow-large-left.svg);
			mask-image: url(../images/arrow-large-left.svg);
		  background-color: currentColor;
			transition: transform .15s ease-in-out 0s;
		}
	
		.overview-link a:hover::before {
			transform: translateX(-.5rem);
		}

/* @end */

/* @group Sections */

.section:has(+ *),
*[class*="-section"]:has(+ *) {
	margin-bottom: var(--spacing-block-lg);
}

/* @group News-section */

.news-section {
	position: relative;
	z-index: 5;
	display: grid;
	align-items: flex-start;
}

	@media (max-width: 899px) {
		
		.news-section {
			row-gap: var(--spacing-block);
		}
		
			.news-section .news {
				margin-top: calc(-1 * var(--spacing-block-lg) - 2rem);
			}
		
	}

	@media (min-width: 900px) {
		
		.news-section {
			grid-template-columns: repeat(2, 1fr);
			column-gap: var(--spacing-columns);
		}
		
			.news-section .news {
				position: relative;
				grid-column: 2;
				margin-top: calc(-1 * var(--spacing-block-lg) - 6rem);
			}
			
			.news-section .intro {
				grid-row: 1;
			}
		
	}

/* @end */

/* @group Header-section */

.header-section:has(+ .intro-section) {
	margin-bottom: 1rem;
}

	.header-section h1 {
		margin-top: .75rem;
	}

/* @end */

/* @group Intro-section */

.intro-section {
	
}

	@media (min-width: 1000px) {
		
		.main:has(> .cards-section) .intro-section {
			width: calc(50% - var(--spacing-columns)*.5);
		}
		
	}

/* @end */

/* @group Teasers-section */

.teasers-section {
	
}

/* @end */

/* @group Cards-section */

	.cards-section h2 {
		margin-bottom: var(--spacing-block-sm);
	}

/* @end */

/* @group Form-section */

.form-section {
	padding-top: 1.5rem;
	padding-bottom: 2rem;
	padding-inline: clamp(1rem, 2vw, 1.5rem);
	background-color: var(--color-grey-light);
}

	.form-section h2 {
		margin-bottom: var(--spacing-block-sm);
	}

/* @end */

/* @end */

/* @group Breadcrumb */

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	column-gap: .5em;
	color: var(--color-primary);
}

	.breadcrumb a {
		display: inline-flex;
		align-items: center;
		column-gap: .4em;
		white-space: nowrap;
	}
	
	.breadcrumb a:last-child {
		display: none;
	}
	
	.breadcrumb a:hover {
		color: var(--color-highlight);
	}

		.breadcrumb a::after {
			content: "";
			position: relative;
		  -webkit-mask-size: cover;
		  mask-size: cover;
		  width: .8em;
		  height: .8em;
		  background-color: var(--color-primary);
			-webkit-mask-image: url(../images/arrow.svg);
			mask-image: url(../images/arrow.svg);
			transition: transform .15s ease-in-out 0s;
		}

/* @end */

/* @group Home */

h1.home {
	position: absolute;
	font-size: 0;
  line-height: 0;
  overflow: hidden;
  width: 1px;
  height: 1px;
  white-space: nowrap;
}

/* @end */

/* @group News */

.news {
	padding: var(--spacing-inline-sm);
	color: var(--color-white);
	background-color: var(--color-primary);
}

	.news h3 {
		color: currentColor;
	}

/* @end */

/* @group Intro */

.intro {
	font: var(--font-intro);
}

/* @end */

/* @group Teasers & Teaser */

.teasers {
	display: grid;
	margin-inline: calc(-1 * var(--spacing-inline));
	background-color: var(--color-grey-light);
}

	@media (max-width: 899px) {
		
		.teasers {
			padding-inline: var(--spacing-inline);
		}
		
			.teasers > * {
				padding-block: var(--spacing-block);
			}
		
			.teasers > *:not(:last-child) {
				border-bottom: 1px solid currentColor;
			}
		
	}
	
	@media (min-width: 900px) {
		
		.teasers {
			grid-template-columns: repeat(3, 1fr);
			padding-block: var(--spacing-block);
			padding-inline: calc(.5 * var(--spacing-inline));
		}
		
			.teasers > * {
				padding-inline: calc(.5 * var(--spacing-inline));
			}
		
			.teasers > *:not(:last-child) {
				border-right: 1px solid currentColor;
			}
		
	}

	.teaser p:last-child:has(> a:only-child) {
		margin-top: 1.5rem;
	}

/* @end */

/* @group Cards & Card */

.cards {
	display: grid;
	column-gap: var(--spacing-columns);
	row-gap: var(--spacing-block-lg);
}

	@media (min-width: 600px) {
		
		.cards {
			grid-template-columns: repeat(2, 1fr);
		}
		
	}
	
	@media (min-width: 1000px) {
		
		.cards:not(.cards--lg) {
			grid-template-columns: repeat(3, 1fr);
		}
		
	}

.card {
	position: relative;
}

	.card figure {
		overflow: hidden;
	}
	
	.card img {
		width: 100%;
		aspect-ratio: 3/2;
		object-fit: cover;
		transform: scale(1);
		transition: all .15s ease-in-out 0s;
	}
	
	.card * + h3 {
		margin-top: 1rem;
	}
	
	.card .card__link {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
	}
	
	.card:has(> .card__link):hover img {
		transform: scale(1.07);
	}

/* @end */

/* @group Footer */

.footer {
	margin-top: var(--spacing-block-xl);
	padding-top: var(--spacing-block-lg);
	padding-bottom: var(--spacing-block-xl);
	color: var(--color-white);
	background-color: var(--color-grey-dark);
}

	.footer > * {
		max-width: var(--max-width);
		margin-inline: auto;
		padding-inline: var(--spacing-inline);
	}
		
/* @group Colophon */

.colophon {
	margin-bottom: var(--spacing-block-lg);
}

	.colophon h2 {
		max-width: 11em;
		color: currentColor;
	}
	
	.colophon a[href^="mailto:"],
	.colophon a[href^="tel:"],
	.colophon a[href^="fax:"],
	.colophon a[href*="maps.app"] {
		display: inline-flex;
		column-gap: .4em;
	}
	
		.colophon a[href^="mailto:"]::before,
		.colophon a[href^="tel:"]::before,
		.colophon a[href^="fax:"]::before,
		.colophon a[href*="maps.app"]::before {
		  content: "";
			flex: 0 0 1.2em;
		  -webkit-mask-size: cover;
		  mask-size: cover;
		  width: 1.2em;
		  height: 1.2em;
			margin-top: .2em;
		  background-color: currentColor;
			transition: transform .15s ease-in-out 0s;
		}
		
		.colophon a[href^="mailto:"]::before {
		  -webkit-mask-image: url(../images/paper-plane.svg);
		  mask-image: url(../images/paper-plane.svg);
		}
		
		.colophon a[href^="tel:"]::before {
		  -webkit-mask-image: url(../images/phone.svg);
		  mask-image: url(../images/phone.svg);
		}
		
		.colophon a[href^="fax:"]::before {
		  -webkit-mask-image: url(../images/printer.svg);
		  mask-image: url(../images/printer.svg);
		}
		
		.colophon a[href*="maps.app"]::before {
		  -webkit-mask-image: url(../images/map.svg);
		  mask-image: url(../images/map.svg);
		}


/* @end */

/* @group Subtitle */

.subtitle {
	display: flex;
	flex-wrap: wrap;
	row-gap: .5em;
	margin-bottom: var(--spacing-block);
	font: var(--font-uppercase);
	text-transform: uppercase;
	letter-spacing: .03em;
}

	.subtitle > *:not(:last-child)::after {
		content: "·";
		display: inline-block;
		width: 1em;
		text-align: center;
	}

	@media (min-width: 1200px) {
		
			
		
	}

/* @end */

/* @group Columns */

.columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
	row-gap: var(--spacing-block);
}

/* @end */

/* @group Footer-menu */

.footer-menu {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1.25em;
}

/* @end */

/* @end */