/*************************************************
	Global
**************************************************/ 

html {
height: 100%;
box-sizing: border-box;
} 

body {
position: relative;
margin: 0 auto;
padding: 0 0 6rem 0;
font-size: 100%;
/*
display: flex;
flex: 1;
flex-direction: column;
*/
min-height: 100%;

/*
background: rgb(238,174,202);
background: radial-gradient(circle, rgba(238,174,202,1) 20%, rgba(46,119,154,1) 85%);
background-attachment: fixed;
counter-reset: step;
*/
/*
background-image: url("bg_01.jpg");
background-position: 50% 15%;
background-repeat: no-repeat;
background-size: cover;
*/

background: linear-gradient(135deg, rgba(18, 18, 18, 0.09) 0%, rgba(18, 18, 18, 0.09) 67%,rgba(202, 202, 202, 0.09) 67%, rgba(202, 202, 202, 0.09) 100%),linear-gradient(135deg, rgba(207, 207, 207, 0.17) 0%, rgba(207, 207, 207, 0.17) 30%,rgba(164, 164, 164, 0.17) 30%, rgba(164, 164, 164, 0.17) 100%),linear-gradient(45deg, rgb(54, 31, 124) 0%, rgb(54, 31, 124) 12.5%,rgb(55, 59, 128) 12.5%, rgb(55, 59, 128) 25%,rgb(56, 88, 132) 25%, rgb(56, 88, 132) 37.5%,rgb(57, 116, 136) 37.5%, rgb(57, 116, 136) 50%,rgb(57, 145, 141) 50%, rgb(57, 145, 141) 62.5%,rgb(58, 173, 145) 62.5%, rgb(58, 173, 145) 75%,rgb(59, 202, 149) 75%, rgb(59, 202, 149) 87.5%,rgb(60, 230, 153) 87.5%, rgb(60, 230, 153) 100%);

background-attachment: fixed;
-webkit-transition: 0.3s;
transition: 0.3s;
}

input {
margin: 0;
}
 
a:link, a:visited {
text-decoration: none;
color: #4f84c4;
-webkit-transition: 0.3s;
transition: 0.3s;
}

a:active {
text-decoration: none;	
}

a:link:hover {
text-decoration: none;
color: #333;
-webkit-transition: 0.3s;
transition: 0.3s;
} 

button {
-webkit-transition: 0.3s;
transition: 0.3s;
}

button:hover {
-webkit-transition: 0.3s;
transition: 0.3s;
} 

.content {
margin: 150px auto 0 auto;
padding: 0;
max-width: 50em;
}

#lock-modal {
display: none;
background-color: black;
opacity: 0.5;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
transition: opacity 2s ease-in-out;
z-index: 9999;
}

/* https://loading.io/css/ */

.loading {
display: none;
position: fixed;
margin: -60px 0px 0px -55px;
left: 50%;
top: 40%;
width: 100%;
height: 100%;
z-index: 9999;
}

.loading div {
position: absolute;
border: 6px solid #dfc;
opacity: 1;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.loading div:nth-child(2) {
animation-delay: -0.5s;
}

@keyframes lds-ripple {
  0% {
	top: 28px;
    left: 28px;
    width: 50px;
    height: 50px;
    opacity: 1;
  }
  
  100% {
    top: -1px;
    left: -1px;
    width: 108px;
    height: 108px;
    opacity: 0;
  }
}


/*************************************************
	Header
**************************************************/   

.header {
grid-area: header;
/*position: fixed;*/
width: 100%;
top: 0;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
background-color: #2e779a;
color: #ffff66;
padding: 0;
font-weight: bold;
margin: 0 auto;
transition: all 0.4s ease;
box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 8px 0 rgba(0, 0, 0, 0.10);
}

.header span {
text-align: center;
margin: 0;
padding: 0;
}

.header .fa-info-circle,
.header .fa-pen-square,
.zehn-wrapper .fa-info-circle {
color: #ffff99 !important;
transition: 0.3s;
}

.header .fa-info-circle {
position: absolute;
left: 40px;
top: 70px;
/*z-index: 100;*/
font-size: 3.3em;
}

.header .fa-home {
color: #ffff99 !important;
transition: 0.3s;
}

.header .fa-home {
position: absolute;
left: 40px;
top: 70px;
/*z-index: 100;*/
font-size: 3.3em;
}

.header .fa-question-circle {
color: #ffff99 !important;
transition: 0.3s;
}

.header .fa-question-circle,
.header .fa-pen-square {
position: absolute;
left: 140px;
top: 70px;
/*z-index: 100;*/
font-size: 3.3em;
}

.header .fa-pen-square:hover {
color: #333 !important;
cursor: pointer;
transition: 0.3s;
}

 /* Style the header: fixed position (always stay at the top) */
.progress_header {
position: fixed;
top: 0;
margin: 0;
padding: 0;
right: 0px;
z-index: 1;
width: 100%;
background-color: #d1d1d1;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10), 0 2px 4px 0 rgba(0, 0, 0, 0.10);
/*transform-origin: 0 100%;
transform: rotate(90deg);*/
}

/* The progress container (grey background) */
.progress_bar {
width: 100%;
height: 15px;
background: #555;
}


@media screen and (max-width: 768px) {
	.header .fa-info-circle {
	position: relative;
	left: 0px;
	top: 10px;
	/*z-index: 100;*/
	font-size: 2.5em;
	}
	
	.header .fa-home {
	position: relative;
	left: -20px;
	top: 10px;
	/*z-index: 100;*/
	font-size: 2.5em;
	}

	.header .fa-question-circle {
	position: relative;
	left: 20px;
	top: 10px;
	/*z-index: 100;*/
	font-size: 2.5em;
	}
	
}


@media screen and (max-width: 1600px) {
	.zehn {
	display: none;	
	}	
}

/* Bildschirme mit mindestens x Breite */
@media screen and (min-width: 1600px) {

	.zehn-wrapper {
	display: flex;
	position: fixed;
	flex-direction: column;
	justify-content: center; 
	align-items: center;
	top: 10px;
	left: 50px;
	transition: transform .25s .1s ease-in-out;
	}

	.zehn-wrapper .fa-info-circle {
	position: relative;
	top: -25px;
	font-size: 1.2em;
	display: block;
	margin-bottom: -15px;
	}

	.down .zehn-wrapper {
	transform: translate3d(0, 50px, 0);
	}

	.zehn {
	display: flex;
	align-self: center;
	align-items: center;
	justify-content: center;
	margin: 0;
	color: #eee;
	border-radius: 50%;
	width: 22rem;
	height: 22rem;
	background: #77d4c3;
	box-shadow: 0px 0px 8px 8px rgba(0, 0, 0, 0.2);
	font: normal 1.8em "Roboto Slab", Georgia, Times, serif;
	color: #fff;
	background-color: #2e779a;
	}

	.zehn span {
	color: #ffff66;
	margin: 10px 0 0 0;
	width: 220px;
	height: 220px;
	text-align: center;
	/*border: 1px solid #fff;*/
	}

}

.header h1 {
font: normal 2.8em "Roboto Slab", Georgia, Times, serif;
text-align: center;
/*border-bottom: 8px solid #ffff66;*/
margin: 0.2em 0 0.2em 0;
padding: 0;
text-shadow: 0px 4px 3px rgba(0,0,0,0.3),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
transition: 0.2s;
}

.header h2 {
margin: 0.8em 0 0 0;
padding-top: 0;
color: #fff;
font: normal 1.8em "Roboto Slab", Georgia, Times, serif;
text-shadow: 0px 4px 3px rgba(0,0,0,0.3),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
transition: 0.2s;
}

.header h2:last-of-type {
margin: 0 0 1em 0;
padding-top: 0;
}	
 
/*************************************************
	Inhaltsbereich
**************************************************/ 
 
#main {
background-color: #9ee0d4;
font: normal 100%/150% "Roboto Slab", arial, sans-serif;		
color: #333;
margin: 0 0 2em 0;
padding: 3em 2.5em;
border-radius: 12px;
box-shadow: 10px 16px 20px 5px rgba(0, 0, 0, 0.4), 0 16px 20px 0 rgba(0, 0, 0, 0.4);
}

#lock-modal {
display: none;
z-index: 1000;
background-color: black;
opacity: 0.5;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
transition: opacity 2s ease-in-out;
}

/* https://loading.io/css/ */

.loading {
display: none;
z-index: 1000;
position: fixed;
margin: -60px 0px 0px -55px;
left: 50%;
top: 40%;
width: 100%;
height: 100%;
}

.loading div {
position: absolute;
border: 6px solid #dfc;
opacity: 1;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.loading div:nth-child(2) {
animation-delay: -0.5s;
}

@keyframes lds-ripple {
  0% {
	top: 28px;
    left: 28px;
    width: 50px;
    height: 50px;
    opacity: 1;
  }
  
  100% {
    top: -1px;
    left: -1px;
    width: 108px;
    height: 108px;
    opacity: 0;
  }
}



.symbol-wrapper {
display: flex;
flex-direction: column;
justify-content: center; 
align-items: center;
font-weight: bold;
}

.symbol {
display: flex;
align-self: center;
align-items: center;
justify-content: center;
margin: -1.5em 0 0.5em 0;
font-size: 3.0em;
color: #eee;
border-radius: 50%;
/*border: 3px solid #eee;*/
width: 4rem;
height: 4rem;
padding: 0;
background: #77d4c3;
box-shadow: 0px 0px 8px 8px rgba(0, 0, 0, 0.2);
}

.symbol span {
width: 20px;
height: 35px;
transform: rotate(90deg);
}

h3 {
font: normal 1.4em "Roboto Slab", Georgia, Times, serif;
margin: 10px 0 0 0;
padding: 15px 0 8px 0;
color: #87d37c;
/*border-bottom: 2px solid #ddd;*/
}



/*************************************************
	-->	Modal
**************************************************/

.trigger {
transition: 0.3s;
}

.trigger:hover {
color: #333 !important;
cursor: pointer;
transition: 0.3s;
}

.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transform: scale(1.1);
z-index: 1000;
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}

.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #f6f6f6;
color: #333;
padding: 1.5rem;
width: 28rem;
max-width: 80%;
border-radius: 0.5rem;
font-family: "Roboto Slab", Georgia, Times, serif;
font-size: 1.2em;
line-height: 140%;
/*box-shadow: 5px 4px 5px 5px rgba(0, 0, 0, 0.4), 0 4px 5px 0 rgba(0, 0, 0, 0.4);*/
}

.projekt-info {
max-height: calc(100vh - 210px);
overflow-y: auto;
font-size: 1.1em;
width: 30rem;
}


.show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

.close-button {
float: right;
width: 1.5rem;
line-height: 1.5rem;
text-align: center;
cursor: pointer;
border-radius: 0.25rem;
/*background-color: lightgray;*/
font-size: 1.4em;
-webkit-transition: 0.3s;
transition: 0.3s;
}

.close-button:hover {
/*background-color: darkgray;*/
color: darkgray;
-webkit-transition: 0.3s;
transition: 0.3s;
}

/*************************************************
	-->	Allgemein
**************************************************/


label, select {
cursor: pointer;
}





/*************************************************
	Beitragsseite
**************************************************/
/* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout */


.inhalte_beitraege {
grid-area: content;
}

.sidebar_beitraege {
grid-area: sidebar;
}

.footer {
grid-area: footer;
}

#wrapper {
margin: 10px auto 50px auto;
padding: 15px;
display: grid;
grid-gap: 20px;
grid-template-areas: 
	"header"
	"sidebar"
	"content"
	"footer";
}

.inhalte_beitraege {
/*background-color: #fff;*/
display: block;
font: normal 1.0em/150% "Roboto Slab", arial, sans-serif;		
color: #444;
/*border: 4px solid #333;*/
}

.beitrag_einzel > span {
margin: 15px 0;
display: flex;
flex-flow: column;
justify-content: space-between;
align-items: center;
}

.inhalte_oben {
display: flex;
flex-flow: column;
justify-content: space-between;
align-items: center;	
margin: 0 0 45px 0;
width: 100%;
height: auto;
}


.inhalte_oben span:last-of-type {
/*margin-left: auto;*/
}

.was h2 {
font-family: "Roboto Slab", arial, sans-serif;
margin: 0 15px;
}

.was {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
border: 3px solid #ddd;
border-radius: 8px;
padding: 35px;
margin-bottom: 25px;
background-color: #467282;
color: #fff;
transition: 0.3s;
font: normal 1.0em/150% "Roboto Slab", arial, sans-serif;
cursor: pointer;
}

.was:hover {
background-color: #479d88;
}

.was_info {
display: flex;
justify-content: center;
align-items: flex-start;
width: 100%;
}

.username {
margin: 0 0 10px 0px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
align-self: center;
min-width: 220px;
height: 60px;
width: 220px;
background-color: #333;
color: #ffff99;
padding: 0 20px;
border-radius: 6px;
text-align: center;
font-weight: bold;
box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.5);
cursor: pointer;
transition: 0.3s;
}

.username i {
margin: -50px 0 15px 0px;
font-size: 2em;
color: #333;
}

.registriert_seit {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
font-size: 90%;
line-height: 130%;
background-color: #333;
/*border: 2px solid #333;*/
padding: 0 25px;
border-radius: 6px;
text-align: center;
color: #fff;
box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.5);
height: 60px;
}

.tasse {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #333;
margin: 10px 0 10px 0;
padding: 0 20px;
height: 60px;
border-radius: 6px;
text-align: center;
color: #ffff99;
box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.5);
cursor: pointer;
transition: 0.3s;
}

.permalink {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 0px 0 0px;
background-color: #333;
padding: 0 20px;
height: 60px;
border-radius: 6px;
text-align: center;
color: #ffff99;
box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.5);
cursor: pointer;
transition: 0.3s;
}

.username:hover,
.permalink:hover,
.tasse:hover {
background-color: #ffff99;
color: #333;
}

.username:hover > .fa-user {
color: #ffff99;
transition: 0.3s;
}


.kategorie {
font-style: italic;
}


.beitrag_einzel .parent {
display: flex;
width: 100%;
margin: 10px 0 0 0;
height: 20px;
align-items: center;
}

.beitrag_einzel .inhalt {
padding: 10px 20px;
font: normal 1.0em "Roboto Slab", Georgia, Times, serif;
transition: 0.2s;
flex-basis: auto;
border-radius: 6px;
flex-grow: 0;
margin: 0 5px 0 5px;
/*background-color: #a21032;*/
background-color: #f7e0d4;
border: 1px solid #ccc;
color: #333;
}

.beitrag_einzel .edge {
flex-grow: 2;
height: 1px;
background-color: #ccc;
/*border: 1px #333 solid;*/
}

.beitrag_einzel .beitrag {
display: inline-block;	
margin: 45px 0 45px 0;
text-align: center;
/*border: 1px solid #333;*/
}

.glueckwunsch {
font-size: 1.3em;
width: 85%;
}

.wort {
font-size: 1.3em;
}	

.beitrag_einzel .beitrag_text {
display: block;
margin: 45px 0 45px 0px;
width: 75%;
/*border: 1px solid #333;*/
/*padding: 0 85px;*/
}

.hinweis {
font-size: 120%;
line-height: 135%;
margin: 0 0 30px 0;
padding: 0 0 10px 0;
border-bottom: 1px solid #888;
}

.hinweis:before {
/*display: inline-block;*/
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f152";
color: #888;
margin: 0 18px 0 -43px;
font-size: 145%;
position: relative;
top: 3px;
transition: 0.3s;
}

.box_hinweise .hinweis:before {
display: none !important;
}

.fa-info-circle {
margin-right: 5px;
color: #349be5 !important;
}

.erforderlich {
margin-right: 5px;
color: #ff6666 !important;
}

.hinweis:nth-of-type(2),
.hinweis:nth-of-type(3) {
margin-top: 40px;
}

.toggle_wrapper_mobile {
display: flex;
justify-content: space-around;
align-items: center;
height: 50px;
background-color: #ffff99;
cursor: pointer;
font: normal 1em "Roboto Slab", arial, sans-serif;		
}

/*************************************************
	Navi für Beiträge
**************************************************/

.nav_beitraege {
position: fixed;
top: 30%;
right: 14px;
background-color: #555;
padding: 5px 8px 8px 8px;
/*border: 1px solid #333;*/
}

.nav_beitraege > * {
display: block;
margin-top: 5px;
padding: 3px 0;
font-size: 150%;
background-color: #ffff99;
font-size: 1.0em;
height: auto;
width: 31px;
text-align: center;
color: #333;
transition: 0.3s;
}

.nav_beitraege > *:hover {
background-color: #333;
transition: 0.3s;
}

.nav_beitraege a:link {
color: #333;
}

.nav_beitraege a:link:hover {
color: #fff;
}

/*************************************************
	Displays ab x px
**************************************************/

@media screen and (min-width: 850px) {

	#wrapper {
	grid-template-columns: 100%;
	grid-template-areas: 
		"header"
		"content"
		"footer";
	}

	.shrink h1 {
	font-size: 2em;
	margin: 0.3em 0;
	}

	#wrapper {
	max-width: 45em;
	position: relative;
	top: 40px;
	left: 0;
	margin: 0 auto 150px auto;
	}
	
	.nav_beitraege {
	position: fixed;
	top: 260px;
	right: 40px;
	background-color: transparent;
	padding: 0;
	}
	
	.nav_beitraege > * {
	display: block;
	margin-top: 3px;
	padding: 3px 0;
	font-size: 150%;
	background-color: #ffff99;
	font-size: 1.5em;
	height: auto;
	width: 51px;
	text-align: center;
	color: #333;
	transition: 0.3s;
	}	

	.sidebar_beitraege {
	color: #fff;
	padding: 0 20px;
	margin: 0 10px;
	font: normal .9em "Roboto Slab", arial, sans-serif;
	width: 320px;
	height: 100%;
	background-color: #485167;
	position: fixed;
	z-index: 4000;
	overflow-x: hidden;
	overflow-y: auto;
	top: 0px;
	left: calc(100% - 360px);
	transition: left 0.2s;
	/*box-shadow: -8px 8px 15px -2px rgba(51,51,51,1);*/
	}


	/* Closed States */
	.sidebar_beitraege:not(.open) {
	left: 102%;
	}

	.sidebar_beitraege:not(.open) .show {
	left: 0px;
	}

	.sidebar_beitraege:not(.open) .hide {
	right: -50px;
	}

	.toggle_wrapper {
	/*border: 1px solid rgba(255,255,255,0.1);*/
	/*border-left: none;*/
	font-size: 1.5em;
	height: 51px;
	width: 51px;
	color: #333;
	background-color: #ffff99;
	overflow: hidden;
	position: fixed;
	top: 70px;
	right: 40px;
	transition: 0.3s;
	}

	.toggle_wrapper:hover {
	color: #ffff99;
	background-color: #333;
	}	
	
	
	.toggle_wrapper span {
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	background-color: inherit;
	color: inherit;
	cursor: pointer;
	position: absolute;
	top: 0;
	right: 0;
	transition: right 0.25s;
	}
	
	.toggle_wrapper {

	}	
	
	.toggle_wrapper .show {
	right: -50px;
	}

	.toggle_wrapper_mobile {
	display: none;
	}

	.beitrag_einzel > span {
	margin: 15px 0;
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	align-items: center;
	}

	.inhalte_oben {
	display: flex;
	flex-flow: row;
	justify-content: space-between;
	align-items: center;	
	margin: 0 0 45px 0;
	width: 100%;
	height: 90px;
	}


	.inhalte_oben span:last-of-type {
	/*margin-left: auto;*/
	}


	.username {
	margin: 0 0 0 -120px;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	align-self: center;
	min-width: 220px;
	height: 60px;
	width: 220px;
	background-color: #333;
	color: #ffff99;
	padding: 0 20px;
	border-radius: 6px;
	text-align: center;
	font-weight: bold;
	box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.5);
	}
	
	.username i {
	margin: -50px 0 15px -155px;
	font-size: 2em;
	color: #333;
	}

	.registriert_seit {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 10px 0 10px;
	font-size: 90%;
	line-height: 130%;
	background-color: #333;
	/*border: 2px solid #333;*/
	padding: 0 25px;
	border-radius: 6px;
	text-align: center;
	color: #fff;
	box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.5);
	height: 60px;
	}

	.tasse {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #333;
	padding: 0 20px;
	height: 60px;
	border-radius: 6px;
	text-align: center;
	color: #ffff99;
	box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.5);
	cursor: pointer;
	transition: 0.3s;
	}

	.permalink {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0px 0 10px;
	background-color: #333;
	padding: 0 20px;
	height: 60px;
	border-radius: 6px;
	text-align: center;
	color: #ffff99;
	box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.5);
	cursor: pointer;
	transition: 0.3s;
	}

	.permalink:hover,
	.tasse:hover {
	background-color: #ffff99;
	color: #333;
	}


	.kategorie {

	}


	.beitrag_einzel .parent {
	display: flex;
	width: 100%;
	margin: 10px 0 0 0;
	height: 20px;
	align-items: center;
	}

	.beitrag_einzel .inhalt {
	padding: 10px 20px;
	font: normal 1.2em "Roboto Slab", Georgia, Times, serif;
	transition: 0.2s;
	flex-basis: auto;
	border-radius: 6px;
	flex-grow: 0;
	margin: 0 5px 0 5px;
	/*background-color: #a21032;*/
	background-color: #f7e0d4;
	border: 1px solid #ccc;
	color: #333;
	}

	.beitrag_einzel .edge {
	flex-grow: 2;
	height: 1px;
	background-color: #ccc;
	/*border: 1px #333 solid;*/
	}

	.beitrag_einzel .beitrag {
	display: inline-block;	
	margin: 45px 0 45px 0;
	text-align: center;
	/*border: 1px solid #333;*/
	}
	
	.glueckwunsch {
	font-size: 1.2em;
	width: 65%;
	}
	
	.wort {
	font-size: 1.5em;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	}

	.beitrag_einzel .beitrag_text {
	display: block;
	margin: 45px 0 45px 0px;
	width: 65%;
	/*border: 1px solid #333;*/
	/*padding: 0 85px;*/
	}
	
	.inhalte_beitraege {
	/*background-color: #fff;*/
	display: block;
	font: normal 1.1em/150% "Roboto Slab", arial, sans-serif;		
	color: #444;
	/*border: 4px solid #333;*/
	}	

	/*
	.beitrag_einzel .beitrag_text::first-letter {
	float: left;
	display: inline-block;
	margin: 6px 10px 0 0;
	border-radius: 0%;
	width: 55x;
	height: 55px;
	padding: 18px;
	background: #fff;
	border: 3px solid red;
	font-size: 1.8em;
	color: #666;
	text-align: center;
	}
	*/



} /* Ende Media-Query

/*************************************************
	Ende Media-Query
**************************************************/

.heading {
margin-top: 10px;
padding: 0;
height: 35px;
font-size: 180%;
}

.sidebar_beitraege p:first-of-type {
width: 75%;
}

.heading:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f0a9";
margin-right: 15px;
}



.sidebar_beitraege {
color: #fff;
padding: 20px;
margin: 0;
font: normal .80em "Roboto Slab", arial, sans-serif;
background-color: #485167;
/*box-shadow: -8px 8px 15px -2px rgba(51,51,51,1);*/
}

.sidebar_beitraege p {
font-size: 120%;
}

/* http://manos.malihu.gr/jquery-custom-content-scroller/ */
/* https://www.jqueryscript.net/menu/overlay-side-navigation-techie.html */

#tage_range {
width: 95%;
}

#tage_range > *:hover {
cursor: pointer;
}

.sidebar_beitraege .list-group-item {
position: relative;
display: block;
padding: 4px 5px 10px 10px;
margin-bottom: -1px;
border-bottom: 1px solid #f8f8f8;
}

.sidebar_beitraege .list-group-item input {
margin-right: 10px;
}


#beitrag .form_radio {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
position: relative;
background-color: #fff;
color: #666;
top: 10px;
height: 30px;
width: 30px;
border: 2px solid #fff;
border-radius: 50px;
cursor: pointer;     
margin: 0 10px 0 15px;
outline: none;
-webkit-transition: 0.3s;
transition: 0.3s;
}

#beitrag .form_radio:first-of-type {
margin-left: 0;

}

#beitrag .form_radio:checked::before {
position: absolute;
font-size: 100%;
font-weight: bold;
left: 9px;
top: -1px;
content: '\02143';
transform: rotate(40deg);
}

#beitrag .form_radio:hover {
background-color: #f7f7f7;
border: 2px solid #888;
-webkit-transition: 0.3s;
transition: 0.3s;
}

#beitrag .form_radio:checked {
background-color: #f1f1f1;
border: 2px solid #888;
}


.sidebar_beitraege .form_checkbox {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
position: relative;
background-color: #f1f1f1;
color: #333;
top: 6px;
height: 25px;
width: 25px;
border: 2px solid #f1f1f1;
border-radius: 3px;
cursor: pointer;     
margin-right: 0px;
outline: none;
-webkit-transition: 0.2s;
transition: 0.2s;
}

.sidebar_beitraege .form_checkbox:checked::before {
position: absolute;
font-size: 100%;
font-weight: bold;
left: 7px;
top: 1px;
content: '\02143';
transform: rotate(40deg);
}

.sidebar_beitraege .form_checkbox:hover {
background-color: #87d37c;
border: 2px solid #f1f1f1;
-webkit-transition: 0.2s;
transition: 0.2s;
}

.sidebar_beitraege .form_checkbox:checked {
background-color: #87d37c;
border: 2px solid #f1f1f1;
}

.beitrag_einzel {
display: flex;
flex-direction: column;
align-items: center;
border: 3px solid #fff;
border-radius: 5px;
padding: 16px;
margin-bottom: 45px;
height: inherit;
background-color: #fff;
box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.5);
transition: 0.3s;
}

.beitrag_einzel:hover {
border: 3px solid #333;
background-color: #f8f8f8;
transition: 0.3s;
/*transform: scale(1.02);*/
}

.beitrag_einzel:hover .inhalt {
background-color: #f0c0a8;
color: #333;
transition: 0.3s;
}

.beitrag_einzel > span {
margin: 15px 0;
}

.img-responsive {
display: block;
max-width: 100%;
height: auto;
}





/*************************************************
	Footer
**************************************************/

/*
https://chrisbracco.com/css-sticky-footer-effect/
*/

.footer {
font: normal 1em/150% "Roboto Slab", arial, sans-serif;		
background-color: #2e779a;
color: #fff;
border-top: 3px solid #454140;
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 250px 0 0 0;
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 2rem;
}

.footer * {
/*border: 1px solid #fff;*/
text-align: center;
padding: 8px;
}

.footer a {
color: #ff0;
padding: 0;
}

.footer span {
padding-bottom: 10px;
width: 50%;
}

 
/*************************************************
	Media Queries
**************************************************/ 
/* Bildschirme mit maximal x Breite */
@media screen and (min-width: 1700px) {

.zehn-wrapper {
display: none;
}
	
}
 
 
 
 
 
/* Bildschirme mit maximal x Breite */
@media screen and (max-width: 1024px) {

	.zehn-wrapper {
	display: none;
	}

	#main {
	padding: 1em 1.5em 2em 1.5em;
	border: 0;
	-webkit-flex: 1 100%;
	flex: 1 100%;	
	-webkit-order: 2;
	order: 2;
	}
	
	.footer span {
	width: 100%;
	}

	.header h1 {
	font-size: 2.2em;
	} 

	.header h2 {
	font-size: 1.5em;
	}

	.footer {
	flex-flow: column;
	margin-top: 2em;
	}

}

/* Bildschirme mit maximal x Breite */
@media screen and (max-width: 600px) {


	
	#beitrag .form_radio input {
	margin-right: 10px;
	}
	
	.hinweis:before, .zustimmung:before {
	display: none;	
	}
	
	.buttons {
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	align-items: center;
	height: 150px;
	}
	
	.buttons #reset, .buttons #send {
	margin: 0;
	width: 100%;
	}
	
	
	

}


/* Bildschirme mit min x Breite */
@media screen and (min-width: 1250px) {

#main {
/*font-size: 1.1em;*/
}



}