/* RESET */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;font-weight:normal;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:rgba(0,0,0,1);text-decoration:none}mark{background-color:#ff9;color:rgba(0,0,0,1);font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}li, ul{list-style:none;}


* :focus { outline: none; }
*, * :before, * :after { -webkit-box-sizing: border-box; box-sizing: border-box; }

:root {
  color-scheme: light dark; /* both supported */
}


/* STANDARDS */ 

body, html {
    font: 400 16px / 1.5 "din-2014", sans-serif;
    height: 100%;
    position: relative;
    background: radial-gradient(circle at 0% 50%, #f5f5f5 0%, #e1eaf6 90%) top right/100% 100%;
    background-attachment: fixed;
    background-color: #F0F0F0;
}


input, label, button{
    font-family: "din-2014", sans-serif;
    font-size: 16px;
}

a{
	color: rgba(0,0,0,1);
	text-decoration: none;
}

strong{
	font-weight: bold;
}


/* SIDEBAR */

.sidebar{
	position: fixed;
	left: 0;
	top: 0;
	width: 300px;
	height: 100vh;
	overflow-y: scroll;
	padding: 50px 35px 0 35px;	
	background-color: rgba(255,255,255,.7);
	box-shadow: 0 0 100px rgba(0,0,0,.01);
	min-height: -webkit-fill-available;
	z-index: 10000000;
}


.sidebar h1{
	color: #0084FF;
	font-size: 24px;
	line-height: 35px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}	

.sidebar h1 a{
	color: #0084FF;
	position: relative;
}

.sidebar h1 a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    border-radius: 1px;
    background-color: #0084FF;
    bottom: 0;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .2s ease-in-out;
  }
  
.sidebar h1 a:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}


.sidebar p.slogan{
	font-size: 18px;
	line-height: 1.3;
	font-weight: 600;
	margin: 10px 0;
}


.sidebar a{
    transition: all .1s ease;
}

.sidebar a:hover{
	color: #0084FF;
}

.sidebar nav{
	float: right;
	margin: 0;
	font-size: 18px;
	line-height: 30px;
	padding: 25px 0 0 0;
}

.sidebar nav li{
	float: left;
	width: 100%;
	margin-bottom: 5px;
}

.sidebar nav li a{
	display: inline-block;
}

.sidebar nav li a i{
	display: inline-block;
	margin-right: 20px;
}

.sidebar nav li a.active{
	color: #0084FF;
}

.sidebar .project-information{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 50px 0;
	text-align: center;
	color: rgba(0,0,0,.3);
}

.sidebar .project-information a{
	color: rgba(0,0,0,.3);
}

.sidebar .project-information a:hover{
	border-bottom: 1px solid rgba(0,0,0,.3);
}

@media only screen and (max-width: 800px) {
	.sidebar{
		display: none;
		width: 100%;
		z-index: 100;
		padding: 100px 0 25px 25px;
		background-color: rgba(240, 240, 240, .1);
		backdrop-filter: blur(25px);
		-webkit-backdrop-filter: blur(25px);
	}
	
	@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)){
		.sidebar{
			background: radial-gradient(circle at 0% 50%, rgba(245, 245, 245, .8) 0%, rgba(225, 234, 246, .8) 90%) top right/100% 100%;
			backdrop-filter: blur(25px);
			-webkit-backdrop-filter: blur(25px);
		}
	}
			
	.sidebar h1, .sidebar p.slogan{
		display: none;
	}

}


/* RESPSONSIVE BAR */
.responsive-bar{
	position: fixed;
	width: 100%;
	min-width: 300px;
	z-index: 1000000;
	display: none;
	background-color: #F0F0F0;
}


@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
	.responsive-bar {
		background-color: rgba(255,255,255,0);
		backdrop-filter: blur(25px);
		-webkit-backdrop-filter: blur(25px);
	}
}


.responsive-bar h1 a{
	float: left;
	padding: 40px 0 0 0;
	margin:  0 0 40px 25px;	
	font-size: 20px;
	line-height: 30px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	mix-blend-mode:screen;
	position: relative;
}

.responsive-bar h1 a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    border-radius: 1px;
    background-color: #0084FF;
    bottom: 0;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .2s ease-in-out;
  }
  
.responsive-bar h1 a:hover::before {
	transform-origin: left;
	transform: scaleX(1);
}



.responsive-bar a.responsive{
	float: right;
	font-size: 16px;
	line-height: 30px;
	padding: 40px 25px 40px 0;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: #000;
}

.responsive-bar a.close{
	display: none;
	z-index: 10000000;
}

.responsive-bar a, .responsive-bar h1 a{
	color: #0084FF;
	-ms-transition: all .1s ease;
    -webkit-transition: all .1s ease;
    transition: all .1s ease;
}

.responsive-bar-helper{
	display: none;
}

@media only screen and (max-width: 800px) {
	.responsive-bar{
		display: inherit;
	}
	
	.responsive-bar-helper{
		display: block;
		height: 66px;
	}
	
	.responsive-closed{
		display: inherit !important;
	}
}



/* SEARCH */

.search{
	float: left;
	width: calc(100% - 300px);
	min-width: 300px;
	margin: 50px 0 0 300px;
	padding: 0 40px;
}

.search form{
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	border: 0;
	background-color: rgba(255,255,255,1);
	border-radius: 25px;
	display: block;
	position: relative;
}

.search form input, .search form button {
	background-color: rgba(0,0,0,0);
	-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 0 !important;
    margin: 0 !important;
    font-size: 20px;
    line-height: 40px;
}

.search form input{
	width: 100% !important;
	padding: 13px 20px 13px 25px;
}

.search form input::placeholder {
    font-size: 16px;
}



.search form button{
	position: absolute;
	top: 0;
	right: 0;
	font-size: 20px;
	width: 50px;
	padding: 13px 25px 13px 5px;
	color: #0084FF;
	background-color: #FFF;
	border-radius: 0 25px 25px 0;
	text-align: center;
}

.search .easy-autocomplete {
	width: 100%;
	position: relative;
}

.search .easy-autocomplete-container {
  left: -2px;
  top: 56px;
  width: 100%;
  z-index: 5000000000;
}

.search .easy-autocomplete-container a{
	display: block;
}

.search .easy-autocomplete-container ul {
	width: 100%;
	display: none;
	position: relative;
}
.search .easy-autocomplete-container ul li, .search .easy-autocomplete-container ul .eac-category {
	background-color: #FFFFFF;
	display: block;
	padding: 6px 25px;
	font-size: 16px;
	line-height: 22px;
}
.search .easy-autocomplete-container ul li:last-child {
	padding-bottom: 15px;
	border-radius: 0 0 25px 25px;
}
.search .easy-autocomplete-container ul li.selected {
	cursor: pointer;
	transition: all .1s ease;
}

.search .easy-autocomplete-container ul li.selected a{
	color: #0084FF;
}

.search .easy-autocomplete-container ul li a {
	color: #000000;
}

.search .easy-autocomplete-container ul li a .icon{
	display: inline-block;
	font-size: 20px;
	line-height: 22px;
	width: 20px;
	margin-right: 20px;
}


@media only screen and (max-width: 800px) {
	.search{
		width: 100%;
		margin: 50px 0 0 0;
		padding: 0 25px !important;
	}
}



/* CONTENT */

main{
	float: left;
	width: calc(100% - 300px);
	min-width: 300px;
	margin: 50px 0 0 300px;
	padding: 0 40px;
	z-index: 0;
	overflow: hidden;
}


main .inner{
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

main .inner section{
	float: left;
	width: 100%;
	margin: 0 0 45px 0;
}


main h2{
	float: left;
	width: 100%;
	margin: 25px 0 0 0;
	padding: 0;
	font-size: 26px;
	line-height: 30px;
	font-weight: 600;
}


main h3{
	float: left;
	width: 100%;
	font-size: 22px;
	line-height: 30px;
	font-weight: 600;
	padding: 0;
	margin: 25px 0 10px 0;
}

main .inner > h4{
	float: left;
	width: 100%;
	font-size: 16px;
	line-height: 30px;
	font-weight: 600;
	padding: 0;
	margin: 25px 0 0 0;
}

main h2 a, main h3 a{
    transition: all .1s ease;
}

main h3 a{
	color: #0084FF;
}

main h2 a:hover, main h3 a:hover{
	opacity: .8;
}


main .inner > ul{
	margin: 10px 0;
}


main .inner > ul li{
	list-style: square;
	list-style-type: square;
	padding-left: 10px;
	margin-left: 25px;
}


@media only screen and (max-width: 800px) {
	main{
		width: 100%;
		margin: 25px 0 0 0;
		padding: 0;
	}
	
	main h2, main h3, main h4{
		width: calc(100% - 50px);
		margin-left: 25px;
	}
	
	main .inner > p{
		padding: 0 25px !important;
	}
}




/* POSTS */ 

main .posts-horizontal{
	float: left;
	width: calc(100% + 50px);
	margin-left: -25px;
	position: relative;
}


main .posts-horizontal::after, main .posts-horizontal::before{
	content: '';
	display: block !important;
	position: absolute;
    top: 0;
    right: -1px;
	height: calc(100% - 50px);
	width: 25px;
	background: linear-gradient(90deg, rgba(240,240,240,0) 0%, #e1eaf6 95%);
	z-index: 100000;
}

main .posts-horizontal::after{
	left: -1px;
	background: linear-gradient(90deg, #eef1f6 5%, rgba(240,240,240,0) 100%);
}


main .posts-horizontal ul.posts{
	display: flex;
	gap: 25px;
	overflow-x: auto !important;
	overflow-y:  scroll !important;
	scroll-snap-type: x proximity !important;
	scroll-padding: 0 0 0 25px !important;
	scroll-behavior: smooth;
	scroll-snap-align: start !important;
	
}

main .posts-horizontal ul.posts::-webkit-scrollbar {
	display: none;
}

main .posts-horizontal ul.posts::after{
	content: '';
	width: 25px;
	height: 1px;
	padding-right: 1px !important;
}

main .posts-horizontal ul.posts > li{
	scroll-snap-align: start !important;
	scroll-snap-stop: always;
}


main .posts-vertikal{
	float: left;
	width: calc(100% + 25px);
	margin-left: -25px;
	position: relative;
}

main .posts-vertikal ul.posts{
	display: flex;
	gap: 25px;
	overflow-x: auto !important;
	flex-wrap: wrap;
	justify-content: space-between;
}



main ul.posts{
	float: left;
	width: 100%;
	padding: 10px 0 25px 25px;
	margin: 15px 0 25px 0;
	-webkit-user-select:none;
}


main ul.posts > li{
	flex-basis: 200px;
	flex-grow: 1;
	flex-shrink: 0;
	overflow: hidden !important;
	position: relative;
    transition: all .2s ease;
    border-radius: 25px;
    background-color: rgba(250, 250, 250, 1);
    -webkit-user-select:none;
}


main ul.posts.row-two > li{
	flex-basis: 300px !important;
	min-width: calc(100% / 2 - 25px);
}

main .posts-horizontal ul.posts.row-two > li{
	min-width: calc(100% / 2);
}

main ul.posts.row-three > li{
	flex-basis: 300px !important;
	min-width: calc(100% / 3 - 25px);
}

main .posts-horizontal ul.posts.row-three > li{
	min-width: calc(100% / 3) !important;
}


main ul.posts.row-four > li{
	min-width: calc(100% / 4 - 25px);
}

main .posts-horizontal ul.posts.row-four > li{
	min-width: calc(100% / 4) !important;
}


main ul.posts > li:hover{
	background-color: rgba(255,255,255,.5);
	box-shadow: 0 0 25px rgba(0,0,0,.05);
}


main ul.posts > li .head{
	width: 100%;
	height: 175px;
	padding: 0 0 0 25px;
	color: #000;
	overflow: hidden;
	background: linear-gradient(to left, white 50%, #f0f0f0 50%) right;
	background-size: 200% !important;
    transition: all .2s ease-out;
    -webkit-user-select:none;
	-webkit-touch-callout: none;
	position: relative;
}

main ul.posts > li .head h4, main ul.posts > li .head span{
	width: 100%;
	font-size: 60px;
	line-height: 175px;
	overflow: hidden;
	white-space: nowrap !important;
	text-overflow: ellipsis;
}

main ul.posts > li .head h4.head-artikel{
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
	font-size: 18px;
	font-weight: 600 !important;
	line-height: 1.6;
	padding: 25px;
	white-space: normal !important;
	color: #FFF;
	text-shadow: 0 0 10px rgba(0,0,0,.4), 0 0 50px rgba(0,0,0,1);
}


main ul.posts > li .head.head-font-smaller h4{
	font-size: 40px !important;
}

main ul.posts > li .head.head-font-smallest h4{
	font-size: 30px !important;
}


main ul.posts > li .head.active{
	background-position: left;
}


main ul.posts > li .head img{
	object-position: center center;
	object-fit: cover;
	margin-left: -25px;
	width: calc(100% + 25px);
	height: 175px;
    transition: opacity 200ms ease-in-out;
    border-radius: 25px 25px 0 0;
}

main ul.posts > li .head-artikel-empty{
	background: linear-gradient(to left, #232323 0%, #0084FF 100%) right;
}

main ul.posts > li .head:hover{
	cursor: pointer;
}


main ul.posts > li .copy{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 175px;
	font-size: 30px;
	z-index: 100000000;
	background-color: rgba(255,255,255,.8);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
    opacity: 0;
    display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 25px 25px 0 0;
	transition: all .25s ease;
	visibility: hidden;
    opacity: 0;
}

main ul.posts > li .copy-instruction{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 175px;
	font-size: 15px;
	line-height: 50px;
	z-index: 10000000;
	text-align: center;
	transition: all .25s ease;
	border-radius: 25px 25px 0 0;
	visibility: hidden;
    opacity: 0;
}

main ul.posts > li .copy.visible, main ul.posts > li .copy-instruction.visible {
    visibility: visible !important;
    opacity: 1 !important;
}


main ul.posts > li .information{
	float: left;
	width: 100%;
	font-size: 18px;
	font-weight: 600;
	line-height: 22px;
	display: table;
	min-height: 100px;
}

main ul.posts > li .information h4, main ul.posts > li .information a{
	display: inline-block;
	width: 100% !important;
}


main ul.posts > li .information.tag-padding{
	padding-bottom: 50px !important;
}

main ul.posts > li .information.non-link.tag-padding{
	padding-bottom: 75px !important;
}


main ul.posts > li .information a, main ul.posts > li .information.non-link, main ul.posts > li .information .non-link{
	display: inline-block;
	padding: 25px;
}

main ul.posts > li .non-link a{
	padding: 0 !important;
}



main ul.posts > li .information a h4, main ul.posts > li .information.non-link h4{
	font-weight: 600;
	margin: 0;
	padding: 0;
}

main ul.posts > li .information p{
	font-weight: 400;
}

main ul.posts > li .information a, main ul.posts > li.category .information i{
	font-style: normal !important;
	display: table-cell;
	vertical-align: middle;
    transition: all .2s ease;
}

main ul.posts > li .information a:hover{
	color: #0084FF;
}
	
	
main ul.posts li ul.tags{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	margin: 0;
	padding: 0 0 25px 25px;
	display: flex;
	overflow-x: scroll;
	overflow-y: hidden;
}

main ul.posts li ul.tags::-webkit-scrollbar {
	display: none;
}

main ul.posts li ul.tags li{
	font-size: 14px;
	line-height: 20px;
	padding: 3px 6px;
	color: rgba(0,0,0,.5);
	border-radius: 10px;
	margin: 6px 5px 0 0;
	border: 2px solid #F0F0F0;
	background-color: #F0F0F0;
	white-space: nowrap;
}

main ul.posts li ul.tags::after{
	content: '';
	width: 25px;
	height: 1px;
	padding-right: 1px !important;
}

main ul.posts li ul.tags li:hover{
	cursor: default;
    user-select: none;
}

main ul.posts li .open-artikel{
	position: absolute;
	bottom: 0;
	left: 0;
	font-size: 16px;
	padding: 5px 8px;
	color: rgba(0,0,0,.5);
	border-radius: 10px;
	margin: 0 5px 25px 25px;
	background-color: #F0F0F0;
	white-space: nowrap;
	transition: all .2s ease;
	cursor: pointer !important;
}

main ul.posts li a.open-artikel i{
	padding-right: 3px;
}

main ul.posts li a.open-artikel:hover{
	color: #0084FF;
	cursor: pointer !important;
}

main ul.posts li a.post-button{
	float: left;
	width: auto !important;
	display: inline-block !important;
	font-size: 16px;
	padding: 8px 12px !important;
	margin: 12px 0 0 0 !important;
	color: #0084FF;
	border-radius: 10px;
	box-shadow: 0 0 25px rgba(0,0,0,.1);
}


main ul.posts li a.post-button i{
	padding-right: 5px;
}

main ul.posts li a.post-button:hover{
	color: #000000;
	cursor: pointer !important;
}


main ul.posts ul.vote{
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 0;
	padding: 0 25px 25px 0;
	display: flex;
	overflow-x: scroll;
	overflow-y: hidden;
}

main ul.posts li ul.vote li{
	font-size: 16px;
	line-height: 20px;
	padding: 3px 6px;
	color: rgba(0,0,0,.5);
	border-radius: 10px;
	margin: 6px 5px 0 0;
	border: 2px solid #F0F0F0;
	background-color: #F0F0F0;
	white-space: nowrap;
	transition: all .2s ease;
}

main ul.posts li ul.vote .vote-button-up::after{
	font-family: "Font Awesome 6 Pro";
	font-weight: 400;
	content: "\f164";
}

main ul.posts li ul.vote .vote-button-down::after{
	font-family: "Font Awesome 6 Pro";
	font-weight: 400;
	content: "\f165";
}

main ul.posts li ul.vote .button-active::after{
	font-weight: 900 !important;
	color: #0084FF !important;
}



main ul.posts li ul.vote li:hover{
	cursor: pointer;
	background-color: rgba(0,0,0,0);
	border-color: rgba(0,0,0,0);
}

main ul.posts li ul.vote li.vote-button-up:hover{
	color: #12B3A9;
}

main ul.posts li ul.vote li.vote-button-down:hover{
	color: #FF5F0D;
}




main ul.posts .show-more{
	background: rgba(255,255,255,.3) !important;
	text-align: center !important;
}

main ul.posts .show-more .head, main ul.posts .show-more a{
	color: #0084FF !important;
	background: rgba(255,255,255,.2) !important;
	padding: 0 !important;
	cursor: pointer;
}

main ul.posts .show-more a .head{
	transition: all .2s ease;
}

main ul.posts .show-more .text{
	width: 100%;
	display: table;
	font-size: 18px;
	font-weight: bold;
	min-height: 100px;
	height: calc(100% - 175px);
	padding: 0 25px;
	transition: all .2s ease;
}

main ul.posts .show-more .text span{
	font-size: 18px;
	font-weight: bold;
	display: table-cell;
	vertical-align: middle !important;
}

main ul.posts .show-more a:hover, main ul.posts .show-more a:hover .text, main ul.posts .show-more a:hover span{
	opacity: 0.8 !important;
	box-shadow: 0 0 0 rgba(0,0,0,0) !important;	
	color: #000 !important;
}



@media only screen and (max-width: 800px) {
	
	main .posts-vertikal{
		width: calc(100% - 25px);
		margin-left: 0;
	}
	
	main .posts-horizontal{
		width: calc(100%) !important;
		margin-left: 0 !important;
	}
	
	

	main .posts-horizontal::after, main .posts-horizontal::before{
		background: none !important;
	}
	
	main .posts-horizontal ul.posts{
		padding: 0 25px 25px 25px !important;
	}
	
	
	main .posts-mobile-v-t-h{
		float: left;
		width: calc(100%);
		margin-left: 0 !important;
		position: relative;
	}
	
	main .posts-mobile-v-t-h ul.posts{
		display: flex;
		gap: 25px;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y:  visible;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 0 0 25px;
	}
	
	main .posts-mobile-v-t-h ul.posts::-webkit-scrollbar {
		display: none;
	}
	
	main .posts-mobile-v-t-h ul.posts::after{
		content: '';
		width: 25px;
		height: 1px;
		padding-right: 1px !important;
	}
	
	main .posts-mobile-v-t-h ul.posts > li{
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}
	
	main ul.posts > li .head h4.head-artikel{
		margin-left: 0 !important;
	}
	
}



.posts-slider-indicator{
	float: left;
	width: 100%;
	margin: -10px 0 25px 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.posts-slider-indicator-v-t-h{
	display: none;
}

.posts-slider-indicator div{
	height: 10px;
	width: 10px;
	margin: 0 2px !important;
	padding: 0 !important;
	background-color: #FFF;
	transition: all .2s ease;
	border-radius: 50%;
}

.posts-slider-indicator div.active{
	background-color: rgba(0,0,0,.2);
}



.posts-slider-indicator div:hover{
	cursor: pointer;
	opacity: 0.5;
}



@media only screen and (max-width: 800px) {
	.posts-slider-indicator-v-t-h{
		display: flex !important;
	}
}


.posts-filler{
	background-color: rgba(0,0,0,0) !important;
	height: 1px !important;
}

.posts-filler:hover{
	background-color: rgba(0,0,0,0) !important;
	box-shadow: 0 0 0 rgba(0,0,0,0) !important;
}

@media only screen and (max-width: 800px) {
	main .posts-mobile-v-t-h ul.posts .posts-filler{
		display: none !important;
	}
	
	main .posts-mobile-hide{
		display: none !important;
	}
}


/* POST LISTS */


main .posts-lists{
	float: left;
	width: 100%;
	font-size: 18px;
	display: none;
}

main .posts-lists.not-hide{
	display: block;
}


main .posts-lists ul{
	float: left;
	width: 100%;
	padding: 0 25px;
	margin: 0 0 25px 0;
	overflow: hidden;
}

main .posts-lists ul li{
	float: left;
	width: 100%;
	padding: 25px 0;
	border-bottom: 2px solid #FFF;
}

main .posts-lists ul li:last-of-type{
	border-bottom: 0 !important;
}



main .posts-lists .copy-type{
	float: left;
	padding: 5px;
	font-weight: bold;
	width: 130px;
}

main .posts-lists .copy-name{
	float: left;
	padding: 5px;
}

main .posts-lists .copy-button{
	float: right;
	position: relative;
	min-width: 100px;
	text-align: center;
	padding: 7px 10px;
	background-color: #FFF;
	border-radius: 15px;
	overflow: hidden;
	transition: all .5s ease;
}

main .posts-lists .copy-button .copy-instruction, main .posts-lists .copy-button .copy-done{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	text-align: center;
	background-color: white;
	border-radius: 15px;
	padding: 7px;
	visibility: hidden;
    opacity: 0;
    transition: all .2s ease;
}

 main .posts-lists .copy-button .copy-done{
	background-color: #f0f0f0;
}

main .posts-lists .copy-button .visible {
    visibility: visible !important;
    opacity: 1 !important;
}



main .posts-lists .copy-button:hover{
	cursor: pointer;
	box-shadow: 0 0 25px rgba(0,0,0,.1);
}

@media only screen and (max-width: 800px) {
	main .posts-lists{
		display: inline-block;
	}
}






/* DESCRIPTION TEXT */


main .description{
	float: left;
	width: 100%;
	margin: 15px 0 50px 0;
	font-size: 17px;
	line-height: 28px;
	font-weight: 400;
	color: rgba(0,0,0,.6);
}

main .description p{
	padding: 0 0 15px 0;
}

main .description.description-smaller{
	margin-bottom: 15px !important;
}


@media only screen and (max-width: 800px) {
	
	main .description{
		padding: 0 25px;
	}
		
}


/* BREADCRUMB */

p.breadcrumb{
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	color: rgba(0,0,0,.4);
	margin-bottom: 25px;
}

p.breadcrumb i{
	display: inline-block;
	color: rgba(0,0,0,.2);
	padding: 0 5px;
}

p.breadcrumb a{
	color: rgba(0,0,0,.4);
	transition: all .2s ease;
}

p.breadcrumb a:hover{
	color: #0084FF;
}



@media only screen and (max-width: 800px) {
	
	p.breadcrumb{
		padding: 0 25px;
	}
		
}



/* FOOTER */

footer{
	float: left;
	width: calc(100% - 300px);
	min-width: 300px;
	margin: 50px 0 0 300px;
	padding: 25px 0;
	font-size: 14px;
	line-height: 30px;
}

footer a{
	color: rgba(0,0,0,.4);
}

footer a:hover{
	color: #0084FF;
}


footer ul{
	text-align: center;
}

footer ul li{
	display: inline-block;
	margin: 0 15px;
}


@media only screen and (max-width: 800px) {
	footer{
		width: 100%;
		margin: 25px 0 0 0 !important;
	}
	
	footer ul li{
		width: 100%;
		margin: 0 0 !important;
	}
}



/* ARTIKEL */

main.artikel{
	margin-top: 0 !important;
	padding: 0 !important;
}

main.artikel .inner{
	max-width: 100% !important;
	margin-top: 0 !important;
	padding: 0 !important;

}

main.artikel h2{
	float: none;
	padding-left: 25px;
}



@media only screen and (max-width: 800px) {
	main.artikel{
		margin-top: 40px !important;
	}

}



/* OVERLAY */

.overlay {
	display: table;
	min-height: 100vh;
	width: 100%;
	background-color: #F0F0F0;
	overflow: hidden;
	position: fixed;
	z-index: 1000000000000000;
	visibility: hidden;
	opacity: 0;
	background-color: rgba(240, 240, 240, .8);
	backdrop-filter: blur(25px);
	-webkit-backdrop-filter: blur(25px);
	}
	
	@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)){
		.overlay{
			background-color: rgba(240, 240, 240, .0);
			backdrop-filter: blur(15px);
			-webkit-backdrop-filter: blur(15px);
		}
	}
		

.overlay.visible{
	visibility: visible;
	opacity: 1;
}

.overlay .center {
	display: table-cell;
	vertical-align: middle;
}

.overlay .center .inner {
	margin: 0 auto;
	width: calc(100% - 30px);
	max-width: 1000px;
	background-color: #FFF;
	border-radius: 25px;
	box-shadow: 0 0 200px rgba(0,0,0,.3);
	overflow: hidden;
}

.overlay .center .overlay-head {
	background-color: #F0F0F0;
	padding: 25px;
	color: #0084FF;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.overlay .center .overlay-information {
	padding: 50px 25px;
	letter-spacing: 0.2px;
}

.overlay .center .overlay-information b{
	font-weight: 700;
}


.overlay-button{
	float: left;
	padding: 10px;
	margin: 0 0 25px 25px;
	border-radius: 15px;
	transition: all .2s ease;
}

.overlay-button i{
	padding: 0 5px;
}


.overlay .button-accept{
	border: 2px solid #0084FF;
	background-color: #0084FF;
	color: #FFF;
}

.overlay .button-decline{
	border: 2px solid #FFF;
	background-color: #FFF;
	color: #0084FF;
}


.overlay .overlay-button:hover{
	cursor: pointer;
}

.overlay .button-accept:hover{
	background-color: #000;
	border-color: #000;
}

.overlay .button-decline:hover{
	color: #000;
	border-color: #000;
}


.overlay .overlay-menu{
	float: right;
	margin-right: 25px;
}

.overlay .overlay-menu li{
	float: right;
	padding: 10px 5px;
	font-size: 14px;
	line-height: 30px;
}

.overlay .overlay-menu li a{
	transition: all .2s ease;
	color: rgba(0,0,0,.4);
}

.overlay .overlay-menu li a:hover{
	color: #0084FF;
}




@media only screen and (max-width: 800px) {
	
	.overlay .center .overlay-head {
		padding: 25px 15px;
		font-size: 16px;
		letter-spacing: .05em;
		text-align: center
	}
	
	.overlay .center .overlay-information {
		padding: 25px 25px;
		font-size: 14px;
		line-height: 1.5;
		text-align: center;
	}
	
	.overlay-button{
		float: none;
		width: calc(100% - 30px);
		padding: 10px;
		margin: 0 15px 0 15px;
		text-align: center;
	}
	
	.overlay .button-decline{
		border-width: 0 !important;
	}
	
	.overlay .overlay-menu{
		float: none;
		width: 100%;
		text-align: center;
	}
	
	.overlay .overlay-menu li{
		float: none;
		display: inline-block;
	}


}


/* ADS */

ins{
	float: left;
	width: 100%;
	padding: 10px 0;
	background-color: rgba(0,0,0,0) !important;
	border-top: 5px solid #FFF;
	padding-top: 25px;
	position: relative;
	margin-bottom: 50px;
}

ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}

ins::before {
	position: absolute;
	top: -20px;
	right: 35px;
	font-size: 16px;
	line-height: 16pxpx;
    content: "Anzeige";
    color: rgba(0,0,0,.3); 
    background-color: #e1eaf6;
    padding: 5px 10px;
    border-radius: 5px;
}

ins.adsbygoogle[data-ad-status="unfilled"]::before {
    display: none !important;
    content: "" !important;
}

@media only screen and (max-width: 800px) {
	main ins{
		width: calc(100% - 50px);
		margin: 0 25px 50px 25px;
	}
}



/* DARK MODE */

@media (prefers-color-scheme: dark) {
	body, html{
		background: #121212;
		color: #FFF;
	}
	
	a{
		color: #FFF;
	}
	
	.sidebar{
		background-color: #2A2A2A;
		color: #FFF;
	}
	
	.sidebar a{
		color: #FFF;
	}
	
	.responsive-bar{
		box-shadow: 0 10px 25px rgba(18,18,18,.1) inset;
	}
	
	.responsive-bar a.responsive{
		color: #FFF;
	}

	main .description{
		color: rgba(255,255,255,.6);
	}
	
	main ul.posts li{
		background-color: #2A2A2A;
	}
	
	main ul.posts > li .head{
		background: linear-gradient(to left, rgba(0,0,0,.1) 50%, rgba(0,0,0,.2) 50%) right;
	}
	
	main ul.posts > li .head h4, main ul.posts > li .head span{
		color: #FFF;
	}
	
	main ul.posts > li:hover{
		background-color: #2A2A2A;
		box-shadow: none;
	}
	
	main ul.posts > li .copy{
		background-color: rgba(0,0,0,.5);
		color: #FFF;
	}
	
	main ul.posts > li .copy-instruction{
		color: #FFF;
	}
	
	main .posts-lists ul li{
		border-bottom-color: rgba(255,255,255,.2);
	}
	
	main .posts-lists .copy-button{
		background-color: rgba(255,255,255,.8);
		color: rgba(0,0,0,1) !important;
	}
	
	
	main ul.posts .show-more{
		background-color: rgba(255,255,255,.05) !important;
	}
	
	main ul.posts .show-more .head, main ul.posts .show-more a{
		color: #FFF !important;
	}
	
	main ul.posts .show-more a:hover, main ul.posts .show-more a:hover .text, main ul.posts .show-more a:hover span{
		color: #0084FF !important;
	}

	main .posts-horizontal::before{
		background: linear-gradient(90deg, rgba(0,0,0,0) 0%, #121212 95%)
	}
	
	main .posts-horizontal::after{
		background: linear-gradient(90deg, #121212 5%, rgba(0,0,0,0) 100%);
	}
	
	.posts-slider-indicator div{
		background-color: rgba(255,255,255,.3);
	}
	
	.posts-slider-indicator div.active{
		background-color: rgba(255,255,255,.8);
	}
	
	.search form{
		width: 100%;
		background-color: #2A2A2A;
	}
	
	.search form button{
		background-color: #2A2A2A;
	}
	
	.search .easy-autocomplete-container ul li, .search .easy-autocomplete-container ul .eac-category {
		background-color: #2A2A2A;
	}

	.search .easy-autocomplete-container ul li.selected a{
		color: #0084FF;
	}
	
	.search .easy-autocomplete-container ul li a {
		color: #FFF;
	}
	
	main ul.posts li ul.tags li{
		background-color: #121212;
		border-color: #121212;
		color: rgba(255,255,255,.8);
	}
	
	main ul.posts li a.open-artikel{
		background-color: #121212;
		border-color: #121212;
		color: rgba(255,255,255,.8);
	}
	
	.sidebar .project-information, .sidebar .project-information a{
		color: rgba(255,255,255,.7);
	}
	
	.sidebar .project-information a:hover{
		color: rgba(255,255,255,.3);
	}
	
	p.breadcrumb, p.breadcrumb i{
		color: rgba(255,255,255,.4);
	}
	
	p.breadcrumb a{
		color: rgba(255,255,255,.6);
	}
	
	footer a{
		color: rgba(255,255,255,.6);
	}
	
	.overlay {
		background-color: rgba(0,0,0,.5);
	}
	
	.overlay .center .inner {
		background-color: #121212;
		box-shadow: 0 0 500px rgba(255,255,255,.4);
	}
	
	.overlay .center .overlay-head {
		background-color: #2A2A2A;
	}

	.overlay .button-accept{
		border: 2px solid #FFF;
		background-color: #FFF;
		color: #0084FF;
	}
	
	.overlay .button-decline{
		border: 2px solid #121212;
		background-color: #121212;
		color: #FFF;
	}
	
	.overlay .button-accept:hover{
		background-color: #FFF;
		border-color: #FFF;
		color: #000;
	}
	
	.overlay .button-decline:hover{
		color: #0084FF;
		border-color: #121212;
	}
	
	.overlay .overlay-menu li a{
		color: rgba(255,255,255,.4);
	}
	
	.overlay .overlay-menu li a:hover{
		color: #0084FF;
	}

	ins{
		border-top-color: rgba(255,255,255,.3);
		background-color: #121212 !important;
	}
	
	ins::before {
	    color: rgba(255,255,255,.5); 
	    background-color: #121212;
	}

	
	main ul.posts li a.post-button{
		color: #0084FF;
		background-color: rgba(0,0,0,.1);
		box-shadow: 0 0 25px rgba(255,255,255,.1);
	}
	
	main ul.posts li a.post-button:hover{
		color: #FFF;
	}


}