* {
	-webkit-tap-highlight-color: transparent; /*der hellblaue Hintergrund bei touch auf smartphone link soll weg...*/
}

:root {
	--bg-hell: #FFFAF4;
	--bg-medium: #F7F7F7;
  	--bg-dunkel: #888072;
	--bg-extra-dunkel: #2F2E2E;
	--grey: #D3D3D3;
	--font-normal: #363636;
}

html { scroll-behavior: smooth; }

.grid-container {
	max-width: 65rem;
	scroll-margin-top: 150px;
	scroll-snap-margin-top: 150px; /* iOS 11 and older */
}

@font-face {font-family: 'Lato';src: url('fonts/Lato/Lato-Regular.ttf') format('truetype');}
@font-face {font-family: 'Lato Light';src: url('fonts/Lato/Lato-Light.ttf') format('truetype');}
@font-face {font-family: 'Marcellus';src: url('fonts/marcellus/Marcellus-Regular.ttf') format('truetype');}


body{
	font-family: "Lato Light", sans-serif;	color: var(--font-normal);
  	background: var(--bg-hell); font-size: 1.3rem;scroll-padding-top: 5rem;
}

h1, h2, h5, h6 {
	font-family:  "Lato", sans-serif;
	color: var(--font-normal);
}
h3, h4 { font-family: "Marcellus", serif;column-span: all; }
h3 {font-size: 1.7rem; text-align: center; }
h4 {font-size: 1.4rem;}

@media screen and (max-width: 63.9375em) {
	h1, h2 {font-size: 1.5rem;}
}
@media screen and (max-width: 39.9375em) {
		h1, h2 {font-size: 1rem;}
}
p{}

.align_center{	text-align:center; }
.align_middle{	align-self: center;}
.align_bottom{ align-self: flex-end;}

header{ }
header .h1und2{position:absolute; top:0;}

header div.logo {
	position:relative; z-index:6;
	text-align:center; padding-top: 2rem;	background:var(--bg-hell);}
header div.logo img{width:380px;}
header div.verlauf{
	height: 4rem; position:relative; z-index:6;
	background-image: linear-gradient(to bottom, var(--bg-hell), transparent);}
#logo-fixed { 	position: fixed; top:0;left:0; width: 100%; z-index:3 ;
					text-align:center; background:var(--bg-hell) }
#logo-fixed a {color: var(--font-normal);}
#logo-fixed img {	 margin-top: 1.3rem;margin-bottom:0.2rem; height: 3rem;}


@media screen and (max-width: 39.9375em) {
	header div.logo img{width:220px;}
	#logo-fixed img {width: 130px;	}

}


/* Navigation ----------------------------------------------------------------------*/
.nav-container{
	position: sticky; top:4.4rem; z-index:5;
	background: var(--bg-hell); ;
	border-bottom: 4px solid #FFFFFF; box-shadow: 0 2px 2px 0 #999185;
}
#main-nav{ margin-bottom: 1rem; }
#main-nav ul {padding-bottom: 0.2rem;}
#main-nav a{
	font-family: 'Lato ', sans-serif; color: var(--font-normal); border: 2px solid transparent;
	font-size: 0.94rem; letter-spacing: 0.01em ;margin: 0 0.7rem ; padding: 0; line-height: 1.7rem;
}
#main-nav a:hover{border-bottom: 1px solid var(--bg-dunkel)}
#main-nav a:focus{text-decoration:none;}
/*-------------------------------*/

#main:not(.home){padding-top:2rem;}

/* --- Video --------------------------------------------------------------------------*/
.video-wrapper {
	position: relative; overflow: hidden; padding:2rem 0;
	display: flex; align-items: center;	justify-content: center;
	border-bottom: 4px solid #FFFFFF; box-shadow: 0 0 3px 2px #999185; margin-bottom: 1rem;
}

.video-wrapper video {
	object-fit: cover; position: absolute;	top: 0; left: 0;
	height: 100%; width: 100%;

}
.video-wrapper .cell{position:relative;max-width:100%;}
.video-wrapper .cell h3{
	margin: 7rem 0 2rem 0; text-align: left;
	color: #FFFFFF; font-size: 5rem; text-shadow:2px 2px 2px #B2B2B2;
}
.video-wrapper .cell h3{
	margin: 7rem 0 2rem 0; text-align: left;
	color: #FFFFFF; font-size: 5rem; text-shadow:2px 2px 2px #B2B2B2;
}
.video-wrapper .cell h4{  text-align: left;color: #FFFFFF; font-size: 1.8rem;}
.video-wrapper .cell p{	color: #FFFFFF; font-size:1.2rem; font-weight:600;}

@media screen and (max-width: 39.9375em) {
	.video-wrapper .cell h3{font-size: 3rem;margin-top: 3rem;}
}

/* --- ptn Elemente -------------------------------------------------------------------*/
/* --- Elemente Wrapper ---------------------------------------------------------------*/
.ptn-wrapper{ background-position: center; background-size: cover; margin:0; }
.ptn-wrapper .transparenz {background-color: rgba(255, 255, 255, 0.9);padding:0 0 2rem 0;margin:0; }

.ptn-wrapper a, .ptn-wrapper a:focus,.ptn-wrapper a:visited{text-decoration: none;}
.ptn-wrapper a:hover{border-bottom: none; text-decoration:underline; }

.bg-light{ background: var(--bg-hell); color: var(--font-normal); }
.bg-light a{color: var(--font-normal)!important; border-bottom: 1px solid var(--font-normal);}
.bg-dark{ background: var(--bg-dunkel); color:#FFFFFF; }
.bg-dark>.bg-light{
	border-top: 1.5rem solid var(--bg-dunkel); border-bottom: 1.5rem solid var(--bg-dunkel);
	padding-top:1rem; padding-bottom: 1rem;
}

a, a:visited, a:focus{ color:var(--font-normal);border-bottom: 1px solid var(--font-normal); text-decoration:none;}
.bg-dark a, .bg-dark a:visited, .bg-dark a:focus{ color:var(--bg-hell);}


/* --- Text ---------------------------------------------------------------------------*/
.text-wrapper {padding-top: 2rem ;}
@media screen and (min-width: 40em) {
	.text-wrapper .spalten{	column-count: 2;}
}

/* --- Bild-Text ----------------------------------------------------------------------*/
.bild-text-wrapper img{border: 2px solid #FFFFFF; box-shadow: 0 0 3px 2px #999185;}
.bild-text-wrapper .bild-unterschrift{margin-top:1rem;}

/* --- Button -- ----------------------------------------------------------------------*/


.button-wrapper a.button {
	padding:0.8rem 1.5rem;  border-radius: 2rem;
	font-size: 1rem; font-weight: bold; text-decoration: none;
}
.button-wrapper a.button:hover {
	color: var(--font-normal) !important; background: var(--bg-hell) !important;
	border: 2px solid var(--bg-dunkel) !important;
}
.bg-light a.button, .bg-dark .bg-light a.button, .bg-image a.button{
	color: #FFFFFF !important; background: var(--bg-dunkel);
	border: 2px solid var(--bg-dunkel)!important;
}
.bg-light a.button:hover, .bg-dark .bg-light a.button:hover, .bg-image a.button:hover{
	color: var(--font-normal) !important; background: var(--bg-hell) !important;
	border: 2px solid var(--bg-dunkel) !important;
}

.bg-dark a.button{color: var(--font-normal) !important;background: var(--bg-hell); border: 2px solid var(--bg-hell) !important; }
.bg-dark a.button:hover{
	background: var(--bg-dunkel) !important; color:var(--bg-hell) !important; border: 2px solid var(--bg-hell) !important;;
}



/* --- Aufzählung ---------------------------------------------------------------------*/
.aufzaehlung-wrapper { padding-top:2rem ; padding-bottom:2rem;}

.aufzaehlung-wrapper .aufzaehlung {
	background-image: url('../images/kreis1.png'); background-position:1rem 0;
	background-repeat: no-repeat; background-size: 2rem;
	padding: 0.6rem 0 0 2rem; margin-bottom:0.5rem;
	font-size:1.5rem;
}
.aufzaehlung-wrapper a { border:none; }
.aufzaehlung-wrapper a:hover { border-top:none; }


/* --- Personen  ----------------------------------------------------------------------*/
.personen-wrapper img{border: 2px solid #FFFFFF;
	box-shadow: 0 0 3px 2px #999185; margin-bottom:2rem;
}



/*-------------------------------------------------------------------------------------*/
footer {	background:var(--bg-extra-dunkel); 	color: #FFFFFF; font-size: 1rem;}
footer h5{ color: #FFFFFF;}
footer a, footer a:visited, footer a:focus{ color:#FFFFFF;text-decoration:none;border:none;}
footer a:hover{ color:#FFFFFF !important; border-bottom: 1px solid #FFFFFF; border:none; text-decoration: underline }


/*Scrolltop Button */
#btn_scroll_top{
	display: none;	height: 40px; 	width: 40px; 	position: fixed;
	right: 20px; bottom: 40px;
	background-color:var(--bg-dunkel); 	filter: brightness(1.5);
	padding: 8px; border: none; outline: none;
	cursor: pointer;z-index:90;
}
#btn_scroll_top i{
	text-align: center; 	font-size: 20px;color: white;	z-index:100;}
.arrow {
	border: solid var(--bg-hell); border-width: 0 3px 3px 0;
	display: inline-block; padding: 3px;
}
.arrow-up {	transform: rotate(-135deg);	-webkit-transform: rotate(-135deg);}

/*mobile menu  und  slicknav ----------------------------------------------------------------------------*/
.slicknav_menu {display:none;	background: transparent !important;}
.slicknav_menu a{ border:none;}
nav.slicknav_nav {
	position:absolute; top:-5rem; z-index:-10;
	background-color: var(--bg-dunkel);
	position:relative; width: 120vw;right:-2.5rem;
	height: 95vh; padding: 6rem 0;
}
.slicknav_btn { background-color: transparent!important; text-shadow: none !important; }
.slicknav_btn a:focus, .slicknav_btn a:active {background: transparent !important;}
.slicknav_btn .slicknav_icon .slicknav_icon-bar {
	background-color: var(--font-normal);width: 1.6rem; height: 0.1rem; margin:0.2rem }
.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar {margin-top: 0.35rem !important;}
.slicknav_nav a {font-size: 1.4rem; line-height: 2.2rem; font-weight: 500; border:none;}
.slicknav_btn.slicknav_open .slicknav_icon .slicknav_icon-bar{background-color: var(--bg-dunkel);}

.slicknav_nav .slicknav_row:hover,
	.slicknav_nav .menu-item:hover,
	.slicknav_nav .slicknav_row:focus,
	.slicknav_nav .menu-item:focus,
	.slicknav_nav a:hover,
	.slicknav_nav a:focus,
	.slicknav_nav a:active {border-radius: 0 !important; background-color: transparent !important;}

@media screen and (max-width: 39.9375em) {
	.js .slicknav_menu {	display:block;	position: fixed; top:1rem; right:1rem; z-index:100;	}
	#main-nav {	display:none;}
}