/* ############################################################
	FARBKLIMA
###############################################################

	Gold:		#be931e - rgba(190,147,30,1)
	Blau:		#274165 - rgba(39,65,101,1)
	
###############################################################
	ALLGEMEINES
############################################################ */

* {
	margin: 0;
	padding: 0;
}
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Variablen definieren */
:root {
	--main-color-gold: #be931e;
	--main-color-blau: #274165;
	--main-color-weiss: #ffffff;
	--cubic-bezier: cubic-bezier(0.41,0,0.51,1) 0s;
}

img, table, tr, td {
	border: 0;
}

a, a:focus {
	outline: none;
}

html, body { /* html = IE text resize correction */
	height: 100%;
	font-size: 100%;
}
html {
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	overflow-x: hidden;
	background-color: #fff;
}

/* Webschrift */
@font-face { 
   font-family: "Cera-Pro-Regular";
   src: url("../Fonts/Cera-Pro-Regular/Cera-Pro-Regular.woff") format("woff"),
        url("../Fonts/Cera-Pro-Regular/Cera-Pro-Regular.woff2") format("woff2");
}


/* ############################################################
	SCHRIFTEN / TEXTE / ABSÄTZE / HYPERLINKS / TITEL
############################################################ */

/* Allgemeines */
body {
	font-family: "Cera-Pro-Regular";
	font-weight: normal;
	font-style: normal;
	color: var(--main-color-blau);
}
main {
	font-size: 1.125rem; /* 18px */
	line-height: 1.55;
}
address {
	font-style: normal;
	font-size: 1.25rem; /* 20px */
	line-height: 1.35;
}
footer {
	font-size: 0.8125rem; /* 13px */
	line-height: 1.3;
	letter-spacing: 1.95px; /* 150 */
}


/* Titel, Schriftgrössen */
h1, h2, h3, h4 {
	margin: 0;
	padding: 0;
	font-family: "Cera-Pro-Regular";
	font-style: normal;
	font-weight: normal;
	color: inherit;
}
h1, h2 {
	margin-bottom: 28px;
	text-transform: uppercase;
	font-size: 1.4375rem; /* 23px */
	line-height: 1.22;
	letter-spacing: 3.45px; /* 150 */
}
	p + h1, ul + h1,
	p + h2, ul + h2 {
		margin-top: 56px;
	}
h3 {
	text-transform: uppercase;
	font-size: 1.125rem; /* 18px */
	line-height: 1.55;
	letter-spacing: 1.35px; /* 75 */
}
h4 {
	font-size: 1.125rem; /* 18px */
	line-height: 1.55;
}


/* ############################################################
	HYPERLINKS
############################################################ */

/* Allgemein */
a {
	position: relative;
	text-decoration: none;
}
main a, main a:hover, main a:focus,
address a, address a:hover, address a:focus,
footer a, footer a:hover, footer a:focus {
	color: var(--main-color-blau);
}


/* Animierte Linien */
main a, address a, footer a {
	background-image: linear-gradient(var(--main-color-blau), var(--main-color-blau));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 0.08em;
	transition: background-size 300ms var(--cubic-bezier);
}
main a:hover, address a:hover, footer a:hover {
	background-size: 100% 0.08em;
}


/* Fusszeile */
footer ul, footer ul li {
	list-style: none;
	margin: 0;
	padding: 0;
}
footer ul {
	display: flex;
	justify-content: center;
	width: 100%;
	text-transform: uppercase;
	color: rgba(39,65,101,1);
}
	/* Level 1 */
	footer ul li {
		position: relative;
		display: inline-block;
		width: 164px;
	}
	footer ul li:first-child {
		text-align: right;
		padding-right: 13px;
	}
	footer ul li:last-child {
		padding-left: 13px;
	}


/* ############################################################
	LISTEN
############################################################ */

/* Aufzählungslisten */
main ul {
	list-style: none;
	position: relative;
	padding: 0;
}
	main ul li {
		margin-left: 21px;
		padding-left: 0;
	}
	main ul li:before {
		content: "\2013";
		position: absolute;
		margin-left: -21px;
	}


/* ############################################################
	PANELS/BOXEN
############################################################ */

/* Allgemein */
header, main, address, footer,
.header-box, .content-box, .footer-box,
.header-inline, .content-inline, .footer-inline, .address-inline {
	position: relative;
	width: 100%;
	margin: 0;
}
.address-inline {
	margin-left: auto;
	margin-right: auto;
}
.header-box, .content-box, .footer-box {
	padding-right: 35px;
	padding-left: 35px;
}

/* Kopfzeile */
header {
	padding-top: 80px;
	padding-bottom: 80px;
}

/* Inhalt */
main {
	padding-bottom: 100px;
}

/* Adresse */
address {
	margin-top: auto;
}

/* Fusszeile */
footer {
	padding-top: 70px;
	padding-bottom: 40px;
}
@media (min-width: 760px) {
	/* Allgemein */
	.header-box, .content-box, .footer-box {
		padding-left: 70px;
		padding-right: 70px;
	}
	
	/* Kopfzeile */
	header {
		padding-top: 180px;
		padding-bottom: 70px;
	}
}
@media (min-width: 1020px) {
	/* Inhalt */
	main {
		padding-bottom: 200px;
	}
	
	/* Fusszeile */
	footer {
		padding-top: 70px;
		padding-bottom: 40px;
	}
}
@media (min-width: 1280px) {
	/* Allgemein */
	.header-box, .content-box, .footer-box {
		padding-left: 140px;
		padding-right: 140px;
	}
}


/* ############################################################
	BILDER, LOGO
############################################################ */

/* Logo */
.logo {
	display: inline-block;
	width: 100%;
	max-width: 205px;
	height: auto;
}
@media (min-width: 760px) {
	.logo {
		max-width: 295px;
	}
}