.Header {
	border-bottom: 1px solid #ccc;
	margin-bottom: 2rem;
}

.Header--inner {
	display: flex;
	gap: 2em 2em;
	flex-wrap: wrap;
	align-items: center;
	padding: 2em;
	background-color: var(--c-primary);
	background: radial-gradient(circle, var(--c-primary-dark) 0%, var(--c-primary) 100%);
	background-position: 70% 50%;
	background-size: 200% 100%;
	color: white;
	border-radius: 6px;

	@media screen and (max-width: 600px) {
		flex-direction: column;
		border-radius: 0;
	}
}

.Header--logo {
	width: 200px;
}

.Header--title {
	flex: 1 0 auto;
}

.Header--menu {
	flex: 0 0 auto;
	margin-right: 2em;
	text-align: right;
	@media screen and (max-width: 600px) {
		margin-right: 0;
		margin-top: 1em;
		text-align: center;
	}
}
.Menu ul {
	display: flex;
	flex-direction: column;
	gap: .5em 0;
}

.Header--menu a {
	text-transform: uppercase;
}
.Header--menu a:hover {
	font-weight: 700;
}
.Header--menu a[aria-current]:before {
	content: '⚽︎';
	margin-right: 0.5em;
}
.Menu {
	display: flex;
	padding: 0;
	margin: 0;
	list-style: none;
}
.PageTitle {
	max-width: 50rem;
	padding: 0 1rem;
	width: 100%;
	margin: 0 auto;

	text-align: center;
	font-size: 48px;
	letter-spacing: -1px;
	font-weight: 700;
	background: -webkit-linear-gradient(45deg, var(--c-primary-dark), var(--c-primary) 80%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

	&.left {
		text-align: left;
	}
}
.ArticleText {
	max-width: 50rem;
	padding: 0 1rem;
	width: 100%;
	margin: 0 auto;
}

.ArticleText p {
	margin: 1em 0;
}

.ArticleText h1 {
	background: -webkit-linear-gradient(45deg, var(--c-primary-dark), var(--c-primary) 80%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.ArticleText.center {
	text-align: center;
}

.ArticleText.lead {
	font-size: 22px;
	text-align: left;
	margin-top: -2em;
}
/* part 1 */

.ContactTeaser {
		max-width: 50em;
		margin: 0 auto;
		padding: 0 1em;
		margin-bottom: 2em;
		margin-top: 2em;
}

.ContactTeaser--inner {
    display: flex;
    flex-direction: row;

		align-items: center;
		gap: 2em;

    @media screen and (max-width: 600px) {
			flex-direction: column;
		}
}

.ContactTeaser--media {
		flex: 1 1 auto;
		width: calc(33% - 2em);
		border-radius: 100%;
		overflow: hidden;
    @media screen and (max-width: 600px) {
			width: 66%;
		}
		> img {
			width: 100%;
			transition: filter 0.3s ease-in-out, transform 0.5s ease-in-out;
		}

		.ContactTeaser:hover & {
			> img {
				transform: scale(1.02) rotate(1deg);
				filter: brightness(1.1);
			}
		}
}
.ContactTeaser--content {
		flex: 1 1 auto;
		width: calc(66% - 2em);
    @media screen and (max-width: 600px) {
			width: 100%;
			text-align: center;
		}
		> * {
			width: 100%;
		}
}
.ContactTeaser--title {
		background: -webkit-linear-gradient(45deg, var(--c-primary-dark), var(--c-primary) 80%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		font-size: 48px;
		letter-spacing: -1px;
		font-weight: 700;
		margin: 0;
		margin-bottom: 0.5em;
    @media screen and (max-width: 600px) {
			font-size: 36px;
		}
}
/* Footer */
.Footer {
	padding: 1em 2em;
	border-radius: 6px;
	background-color: var(--c-bg);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 1em 2em;
}
@media screen and (max-width: 600px) {
	.Footer {
		flex-direction: column-reverse;
		align-items: center;
	}
}


.Footer--Menu ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em 1em;
	padding: 0;
	margin: 0;
	list-style: none;
}


.Footer a:hover {
	font-weight: 700;
}
// Copyright (c) 2011, Yahoo! Inc. All rights reserved.
// Code licensed under the BSD License:
// http://developer.yahoo.com/yui/license.html
// version: 2.9.0

// Mixed with normalize:
//! normalize.css v2.0.1 | MIT License | git.io/normalize
/* stylelint-disable */

* {
	font: inherit;
	color: inherit;
	line-height: inherit;
	text-decoration: inherit;
	margin: 0;
	padding: 0;
}

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

html {
	color: #000;
	background: #fff;
}

figure {
	-webkit-margin-start: 0;
	-webkit-margin-end: 0;
	margin-left: 0;
	margin-right: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
	display: block;
}

// Corrects `inline-block` display not defined in IE 8/9.

audio,
canvas,
video {
	display: inline-block;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

fieldset,
img {
	border: 0;
}

del,
ins {
	text-decoration: none;
}

li {
	list-style: none;
}

caption,
th {
	text-align: left;
}

q:before,
q:after {
	content: "";
}

abbr,
acronym {
	border: 0;
	text-decoration: none;
	font-variant: normal;
}

sup {
	vertical-align: baseline;
}

sub {
	vertical-align: baseline;
}

iframe {
	border: 0;
}

//because legend doesn't inherit in IE

legend {
	color: inherit;
	*color: #000;
}

// taken from normalize

// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
// 	  and `video` controls.
// 2. Corrects inability to style clickable `input` types in iOS.
// 3. Improves usability and consistency of cursor style between image-type
// 	  `input` and others.
// 4. Removes border-radius in Chrome v62

button,
input[type="button"],
input[type="submit"] {
	background: transparent;
	-webkit-appearance: button; // 2
	cursor: pointer; // 3
	border-radius: 0; // 4
	border: 0;
}

// Re-set default cursor for disabled elements.

button[disabled],
input[disabled] {
	cursor: default;
}

// 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
// 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome (include `-moz` to future-proof).

input[type="search"] {
	-webkit-appearance: textfield; // 1
}

//
// Removes inner padding and search cancel button in Safari 5 and Chrome
// on OS X.
//

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

//
// Removes inner padding and border in Firefox 4+.
//

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

//
// 1. Removes default vertical scrollbar in IE 8/9.
// 2. Improves readability and alignment in all browsers.
//

textarea {
	overflow: auto; // 1
	vertical-align: top; // 2
}

//
// Corrects font family set oddly in Safari 5 and Chrome.
//

code,
kbd,
pre,
samp {
	font-family: monospace, serif;
	font-size: 1em;
}

//
// Improves readability of pre-formatted text in all browsers.
//

pre {
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
svg,
video {
	vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}
/* stylelint-enable */

			:root {
	--font-family: 'Roboto', sans-serif;
	--font-size: 1em; /* 16px /16 */
	--line-height: 1.5; /* 24px /16 */

	--c-text: #333;
	--c-background: #fff;
	--c-primary: #287758;
	--c-primary-dark: #0d271d;
	--c-secondary: #c2d1eb;
	--c-accent: #38a87d;

	--c-bg: #f5f5f5;
}

@mixin mq($breakpoint) {
	@if $breakpoint == phone {
		@media screen and (max-width: 600px) {
			@content;
		}
	} @else if $breakpoint == tablet {
		@media screen and (max-width: 900px) {
			@content;
		}
	} @else if $breakpoint == desktop {
		@media screen and (min-width: 1200px) {
			@content;
		}
	} @else if $breakpoint == large {
		@media screen and (min-width: 1800px) {
			@content;
		}
	} @else {
		@error "Breakpoint not found";
	}
}

			/* https://www.a11yproject.com/posts/how-to-hide-content/ */
.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

html,
body {
	margin: 0;
	padding: 0;
	font-family: var(--font-family);
	font-size: var(--font-size);
	line-height: var(--line-height);
	color: var(--c-text);
	background-color: var(--c-background);
}

body {
	max-width: min(1400px, 90vw);

	margin: 0 auto;
	@media screen and (max-width: 600px) {
		max-width: 100%;
	}
}

main {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 4em;
	margin: 3em 0;
}


.site-width {
	width: 100%;
	max-width: 60em;
	margin: 0 auto;
}
h1, h2, h3, h4, ul, ol, p {
	margin: 0;
	padding: 0;
}
h1:not([class]) {
	font-size: 48px;
	letter-spacing: -1px;
	font-weight: 700;
	margin: 0;
}

h2:not([class]) {
	font-size: 36px;
	letter-spacing: -1px;
	font-weight: 700;
	margin: 0;
}

h3:not([class]) {
	font-size: 24px;
	letter-spacing: -1px;
	font-weight: 700;
	margin: 0;
}

h4:not([class]) {
	font-size: 18px;
	letter-spacing: -1px;
	font-weight: 700;
	margin: 0;
}

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

p {
	margin: 0;
}

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

a {
	color: inherit;
	text-decoration: none;
}