@charset "UTF-8";
/* CSS Document */

/* cinzel-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/cinzel-v23-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cinzel-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cinzel';
  font-style: bold;
  font-weight: 600;
  src: url('../fonts/cinzel-v23-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cinzel-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cinzel';
  font-style: bolder;
  font-weight: 900;
  src: url('../fonts/cinzel-v23-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* raleway-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/raleway-v29-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* raleway-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Raleway';
  font-style: bold;
  font-weight: 600;
  src: url('../fonts/raleway-v29-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Allgemeine Einstellungen für Farben */

:root {
	--color-light-shades: #FFFFFF;
	--color-dark-shades: #000000;
	--color-light-accent: #8E9095;
	--color-dark-accent: #3A4F47;
	--color-main-brand: #D9B652;
	
}

.mainbrand{
	background-color: var(--color-main-brand);
	color: var(--color-light-shades);
}

.light-shades{
	background-color: var(--color-light-shades);
	color: var(--color-dark-shades);
}

.dark-shades{
	background-color: var(--color-dark-shades);
	color: var(--color-light-shades);
}

.light-accent{
	background-color: var(--color-light-accent);
	color: var(--color-light-shades);
}

.dark-accent{
	background-color: var(--color-dark-accent);
}

/* ENDE Allgemeine Einstellungen für Farben */


.row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

.content{
	padding: 3vw;
}

.quote{
	padding-bottom: 20vh;
}

.quote-inner{
	margin: 5vw;
	padding: 5vw;
	padding-left: 10vw;
	padding-right: 10vw;
	
}

.quotewrapper{
	position: relative;
	
}

.quotewrapper img{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 50vw;
	
}

@media (max-width:768px){
	.quoteswrapper img{
		width: 70vw;
	}
	
	.quotewrapper img{
		width: 80vw;
	}
} 

.padtop{
	padding-top: 10vh;
}

.padbottom{
	padding-bottom: 15vh;
}

h1, h2, h3, h4, h5, h6{
	font-family: 'Cinzel', sans-serif;
}

p{
	ont-family: 'Raleway', sans-serif;
}

body{
	
	
}

#background{
	position: fixed;
	top: -1vw;
	z-index: -100;
	width: 100vw;
	height: 102vh;
	overflow: hidden;
}

#header{
	display: flex;
	margin: 1vw;
	padding-bottom: 0;
	-webkit-box-shadow: 0px 10px 13px -7px #000000, 3px 3px 5px 3px rgba(0,0,0,0); 
	box-shadow: 0px 10px 13px -7px #000000, 3px 3px 5px 3px rgba(0,0,0,0);
	

}

#logo{
	width: 20vw;
	float: left;
	padding: 1vw;
	animation: scale1 0.15s linear infinite;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1s);

    animation-iteration-count: 1;
    animation-fill-mode: both;

}


@keyframes scale1 {
  to {
    	width: 10vw;
		height: auto;
  }
}


#mainmenu{
	width: 80vw;
	float: left;
	display: flex;
	padding: 1vw;
	padding-right: 3vw;   
	
	animation: scale2 0.15s linear infinite;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1s);

    animation-iteration-count: 1;
    animation-fill-mode: both;
	
}

@keyframes scale2 {
  to {
    width: 90vw;
	height: auto;
  }
}

@media (max-width:768px){
	#logo{
		width: 60vw;
		float: left;
		padding: 1vw;
		animation: scale3 0.15s linear infinite;
		animation-play-state: paused;
		animation-delay: calc(var(--scroll) * -1s);

		animation-iteration-count: 1;
		animation-fill-mode: both;

		}
	
	#mainmenu{
		width: 40vw;
		float: left;
		display: flex;
		padding: 1vw;
		padding-right: 3vw;   

		animation: scale4 0.15s linear infinite;
		animation-play-state: paused;
		animation-delay: calc(var(--scroll) * -1s);

		animation-iteration-count: 1;
		animation-fill-mode: both;

		}

} 

@keyframes scale3 {
  to {
    width: 30vw;
	height: auto;
  }
}

@keyframes scale4 {
  to {
    width: 70vw;
	height: auto;
  }
}


#mainmenu .navbar{
	width: 100%;
}

#mainmenu .container-fluid{
	justify-content: flex-end;
	position: absolute; 
	bottom: 0;
}

#mainpic{
	padding: 1vw;
}

#symbols .symbol{
	padding: 2vw;
}

#symbols .symbolimg{
	margin: 2vw;
	border-radius: 50%;
	overflow: hidden;
	transition: 0.3s;
}

#symbols .symbolimg:hover{
	margin: 1vw;
	transition: 0.2s;
}

#symbols .symboltext{
	text-align: center;
}

#symbols h3{
	font-size: 1.5em;
}

#introtext h4{
	text-align: right;
	margin-top: 10vh;
}

#news{
	
}

#news .newsitem{
	padding: 1vw;
}

#news .newsitem:hover{
	padding-top: 0.7vw;
	transition: 0.2s;
	opacity: 0.9;
}

#news img{
	padding-bottom: 2vh;
}

#footer{
	min-height: 100vh;
	padding-top: 20vh;
	padding-bottom: 20vh;
	padding-left: 5vw;
	padding-right: 5vw;
	position: relative;
}

#footer h4{
	color: var(--color-main-brand);
}

#footer h5{
	margin-top: 5vh;
}

#socials{
	width: 10vw;
	margin-top: 5vh;
}

#socials .social{
	width: 50%;
	float: left;
}

@media (max-width:768px){
	#socials{
		width: 20vw;
		margin-top: 5vh;
		padding-bottom: 5vh;
	}
} 

#legal{
	position: absolute;
	left: 0;
	bottom: 5vh;
	
}

#legal .legalitem{
	border-top: 1px solid var(--color-light-shades);
	padding-top: 2vh;
	text-align: center;
}