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

/*helpies*/
.border {border:1px solid red;}


*{ box-sizing:border-box; }

.clearfix{*zoom:1;}
.clearfix:before,
.clearfix:after{display:table;content:"";line-height:0;}
.clearfix:after{clear:both;}

html { scroll-behavior: smooth; }
html, body{ margin:0;padding:0; }

body{
	background-color:#E1E1E1;
	font-family:'Roboto',sans-serif;
	font-size:1.1em;
	font-weight:300;
	line-height:1.5em;
	color:#222222;
	}

.outer{
	max-width:960px;
	background-color:white;
	}

section{padding:1em;}
.section-box {margin:10px;}

.top{background:#f99e17;}
.ticker  {padding:8px 15px ;}
.ticker p {margin:0;font-size:16px;}

.head{padding:0;}
.head > div{
	padding:1em;
	}

/*colors*/
.bg-grey {background-color:#E9E9E9;}
.bg-rosa {background-color:#FEF4E3;}  /*#FEF6E9*/
.red {color:#C73D10;} /*#B40000*/
.white {color:#ffffff;}

.bg-gradient01 {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f9b44e+0,fcddb3+100 */
	background: #f9b44e; /* Old browsers */
	background: -moz-linear-gradient(top,  #f9b44e 0%, #fcddb3 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #f9b44e 0%,#fcddb3 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #f9b44e 0%,#fcddb3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9b44e', endColorstr='#fcddb3',GradientType=0 ); /* IE6-9 */
}

.bg-gradient02 {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e9e9e9+0,f9f9f9+100 */
	background: #e9e9e9; /* Old browsers */
	background: -moz-linear-gradient(top,  #e9e9e9 0%, #f9f9f9 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #e9e9e9 0%,#f9f9f9 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #e9e9e9 0%,#f9f9f9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9e9e9', endColorstr='#f9f9f9',GradientType=0 ); /* IE6-9 */
}

.bg-gradient03 {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e0e0e0+0,ffffff+30,ffffff+70,e0e0e0+100 */
	background: rgb(224,224,224); /* Old browsers */
	background: -moz-linear-gradient(45deg,  rgba(224,224,224,1) 0%, rgba(255,255,255,1) 30%, rgba(255,255,255,1) 70%, rgba(224,224,224,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg,  rgba(224,224,224,1) 0%,rgba(255,255,255,1) 30%,rgba(255,255,255,1) 70%,rgba(224,224,224,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg,  rgba(224,224,224,1) 0%,rgba(255,255,255,1) 30%,rgba(255,255,255,1) 70%,rgba(224,224,224,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#e0e0e0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

/*typo*/
h1{font-size:1.5em;line-height:normal;color:#B40000;margin:0;text-align:center}
h2{
	font-size:1.3em;
	font-weight:700;
	line-height:normal;
	color:#222222;
	}
.head h2{
	color:#222222;
	margin:0 0 .25em 0;
	font-size:.9em;
	font-weight:700;
	}

h3{
	font-size:1.2em;
	color:#222222;
	}

b{font-weight:700;color:#333;}
a{color:#007bff;}
a.normal {font-weight:normal;}
a:hover{text-decoration:none;}
hr{height:0;border:0;border-top:1px solid #CCC; --width:80%;}
img{max-width:100%; height:auto;display:block;}


.lnkImage{display:block;line-height:0;}

.columns{display:flex;flex-direction:column;}		
.txt{flex:1 0 0;}
.center{align-self:center;}
.middle{text-align:center;}

.mx-auto {margin-left:auto;margin-right:auto;}
.mb-0 {margin-bottom:0;}
.mt-0 {margin-top:0;}
.my-0 {margin-bottom:0;margin-top:0;}
.mb-3 {margin-bottom:1.5em !important;}

.list2{list-style-type:none;padding-left:0;}
.list2 li{background:url(../images/list2.png) left .6em no-repeat;padding:.5em 0 .5em 2em;}
.list3 li{background-image:url(../images/list3.png);}

.list4 {
	list-style-type:none;
	padding-left:0;
	}
.list4 li {	
	background:url(../images/icon_donwload.png) left .3em no-repeat;
	padding:.5em 0 .5em 2.3em;
	-ms-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto !important;
}

.btnWrapper{margin:2em 0;}
.btn{
	display:inline-block;
	position:relative;
	text-decoration:none;
	padding:.5em 1em;
	margin:0;
	font-size:1em;
	font-weight:500;
	background-color:#ff8200;
	border-radius:2.5em;
	box-shadow:0 8px 6px -6px #000;
	color:#FFF;
	transition:all .5s;
	}
.btn:hover{background-color:#c46400;text-decoration:none;}
.btn2{max-width:560px;}
.btn4{max-width:480px;}


.copy{font-size:11px;color:#666;}
.impressum{text-align:center;}
.impressum ul{padding-left:0;color:#2c517e;font-size:.7em;}
.impressum ul li{display:inline;}		


.authors{font-size:.78em;line-height:1.4em;}
.authors p{margin-top:.5em;}
.info{color:#0d657e;padding-left:3em;background:url(info.png) left top no-repeat;}
.info b{color:#333;}
.widthH3{max-width:800px;}
.smaller{font-size:1.48em;}
.special{padding:0 4em 0 0;}
.special .txt{padding-left:1em;}


.mark {
  margin: 0 -0.4em;
  padding: 0.1em 0.4em;
  border-radius: 0.8em 0.3em;
  background: transparent;
  background-image: linear-gradient(
    to right,
    rgba(255, 225, 0, 0.1),
    rgba(255, 225, 0, 0.7) 4%,
    rgba(255, 225, 0, 0.3)
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hyphens-auto {	
		-ms-hyphens: auto;
		-webkit-hyphens: auto;
		hyphens: auto;
}

img.hand {display:none;}

.box-shadow01 {box-shadow: 0 10px 20px -10px #b8b8b8;}
.box-shadow02 {box-shadow:0px 0px 5px #999;}
.box-shadow03 {box-shadow:0px 0px 10px #999;}	
.box-shadow04 {box-shadow:0px 0px 15px  #333;}	

.box-tipp  { 
	border:1px solid #efefef;
	background-color:#ffffff; 
	padding:0 1em;
	margin:25px auto;
	box-shadow: 0 10px 20px -10px #b8b8b8;
	border-radius:15px;
	
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+15,ffffff+46,f7f7f7+100 */
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f7f7f7+0,ffffff+54,ffffff+85,ffffff+100 */
	background: #f7f7f7; /* Old browsers */
	background: -moz-linear-gradient(45deg,  #f7f7f7 0%, #ffffff 54%, #ffffff 85%, #ffffff 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg,  #f7f7f7 0%,#ffffff 54%,#ffffff 85%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg,  #f7f7f7 0%,#ffffff 54%,#ffffff 85%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

	}

/********Testis***/
.testi  {
	margin: 1em 0;
	border-radius:10px;
	padding:1em 2em 1em 2em;
	position:relative;
	}

.testi p {
	font-family:"Courier New", Courier, monospace;
	line-height:1.3;
	}
	
.testi p:before {
	content: "„";
	font-family:"Times New Roman", Times, serif;
	font-size:60px;
	/*line-height:10px;*/
	font-style:normal;
	font-weight:700;
	color:rgba(204,204,204,0.2);

	position:absolute;
	top:-45px;left:5px;
}


.dokument {border:1px solid #efefef;box-shadow: 0 10px 20px -10px #b8b8b8;}

.dokument.left {transform: rotate(-2.5deg);}
.dokument.right {transform: rotate(2.5deg);}

/* Minimum width of 768 pixels. */
@media screen and (min-width: 768px) {
	 .testi {padding:2.5em 2em 2em 2.0em;}
	.testi p:before {font-size:120px;top:-95px}
}

@media only screen and (min-width: 640px){
	.outer{margin:1em auto;box-shadow:3px 7px 30px -7px rgba(0,0,0,0.7);}
	section{padding:1em 4em;}
	.header-image-mobile {}
	.head{position:relative;}
	.head > div{
		width:100%;
		/*align-self:flex-end;
		background:rgba(255,255,255,.9);*/
		margin-bottom:0em;
		padding:2em 2em 2em 2em;
		text-align:left;
		}
	
	h1{font-size:1.5em;max-width:none;margin:15px 0 0 0;}
	h2{font-size:1.6em;}
	h3{font-size:1.2em;}
	.columns{flex-direction:row;}
	.txt *:first-child{margin-top:0;}
	.txt *:last-child{margin-bottom:0;}
	.more-right-margin{margin-right:2em;}			
	.more-top-margin{margin-top:2em;}

	.head h2{font-size:1em;}
	.cover{position:absolute;left:1em;bottom:-1em;}
	.btn{padding:.75em 2em;font-size:1.1em;}
	.authors{--width:250px;}
	
	img.hand {
	display:inline-block;
	max-width:85px;
	right: -42px; 
	bottom: -40px;

	height:auto;
	position:absolute;
	}
}

@media only screen and (min-width: 960px){
	h1{font-size:2.8em;}
	.head h2{font-size:1.0em;}
}