@font-face {
    font-family: 'open_sansregular';
    src: url('fonts/OpenSans-Regular-webfont.eot');
    src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
*{
	padding:0px;
	margin:0px;
	font-family:open_sansregular,Helvetica, Ariel, sans-serif;
	font-weight:100;
	font-size:12px;
	line-height:16px;
	font-style:normal;
	color:#000000;
	border:0px;
	outline:none;
	text-decoration:none;
	border-collapse:collapse;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-text-size-adjust: none;
	/*-webkit-transform: translate3d(0,0,0);*/
}
html {
	width:100%;
	height:100%;
	background:#e3e3e4;
}
body {
	width:100%;
	height:100%;
}
.mitteXY{
	position:absolute;
	left:50%;
	top:50%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
.mitteX{
	position:absolute;
	left:50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}
.blur{
	-webkit-filter: blur(10px);
	-moz-filter: blur(10px);
	-o-filter: blur(10px);
	-ms-filter: blur(10px);
	filter: blur(10px);
}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
}
img{
	vertical-align:top;
}
a{
	cursor: pointer;
}
b{
	font-weight: bold;
    font-size: inherit;
    line-height: inherit;
}
i{
	font-style: italic;
    font-size: inherit;
    line-height: inherit;
}
u{
	text-decoration: underline;
    font-size: inherit;
    line-height: inherit;
}
del{
	display: inline;
	color:#f60b0b;
	font-size: inherit;
	line-height: inherit;
}
dfn{
	font-size: 9px;
	color:#666;
}
.zeilenbruch{
	display: inline-block;
	width:2px;
	height: 16px;
	margin-right: 5px;
	vertical-align: baseline;
	background: #212121;
}
/* INHALT ####################################################################*/
.content {
   min-height:100%;
   position:relative;
   overflow-x: hidden;
}
.nav{
    display: block;
    position: fixed;
    bottom:0px;
    left:0px;
    margin: auto;
    text-align: center;
    height: 20px;
    width: 100%;
    padding:10px 0px;
    z-index: 20;
    box-shadow:0px 0px 1px rgba(0,0,0,0);
    background: rgba(0,0,0,0);
    -webkit-transform: translate3d(0,0,0);
}
.mitte{
	display: inline-block;
	position: relative;
	width:100%;
	max-width:600px;
    display: block;
    margin: auto;
    text-align: left;
}
.nav .pos{
    display: inline-block;
    position: relative;
    height: 20px;
    min-width: 20px;
    text-align: center;
    line-height: 20px;
    border-radius: 100px;
    font-size:10px;
}
.nav .linie{
    display: inline-block;
    position: relative;
    vertical-align: middle;
    height: 1px;
    width:20px;
}
.nav .bt{
    display: inline-block;
    float: right;
    margin-left: 10px;
    font-size: 10px;
    opacity: 0.5;
}
.nav .bt.over{
    opacity: 1;
}

#backg{
	display: block;
	position: fixed;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}
#inhalt{
	display: block;
	position: relative;
    z-index: 2;
}
.tab{
	display: inline-block;
	position: relative;
	padding:20px;
	width:calc(100% - 40px);
	max-width:600px;
    display: block;
    margin: auto;
}
.fragebogen{
    /*-webkit-transform: translate3d(0,0,0);*/
    white-space: nowrap;
    position: relative;
    display: block;
    left:0px;
    top:0px;
}
.fragebogen .sperrflaeche{
    display: block;
    position: fixed;
    background: rgba(0,0,0,0);
    height: 100%;
    width:100%;
    left:0px;
    top:0px;
    z-index:2;
}
.fragebogen .sperrflaeche.rechts{
    left: auto;
    right: 0px;
}
.fragebogen,.fragebogen .folie,.fragebogen .gruppe{
    color:inherit;
}
.fragebogen .folie{
    position: relative;
    display: none;
    left:0px;
    top:0px;
    z-index: 1;
    white-space: normal;
    vertical-align: top;

    opacity: 0.2;
    transition: all 0.2s;

}
.fragebogen .logo{
    display: block;
    position: fixed;
    top:0px;
    left:0px;
    margin: auto;
    width: 100%;
    padding:10px 0px;
    z-index: 10;
    transition: all 0.2s;
    box-shadow:0px 0px 1px rgba(0,0,0,0);
    background: rgba(0,0,0,0);
    -webkit-transform: translate3d(0,0,0);

    /*
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    */
}
.fragebogen .logo img{
    display: block;
    margin: auto;
    transition: all 0.2s;
}

.fragebogen .abstand{
    display: block;
    height: 50px;
}
.fragebogen h2{
    font-size:14px;
    margin-bottom: 15px;
    color:inherit;
}
.fragebogen h3{
    margin-bottom: 10px;
    color:inherit;
}
.fragebogen small{

}
.fragebogen .linie{
    display: block;
    height: 1px;
    width: 100%;

    margin: auto;
    margin-top:30px;
    margin-bottom: 30px;
}
.fragebogen .bez{
    color:inherit;
    margin-bottom: 2px;
}
.fragebogen .feld{
    position: relative;
    display: block;
    margin-bottom: 10px;
    color: inherit;
}
.fragebogen .feld .pflicht{
    display: none;
    position: absolute;
    left:-10px;
    top:0px;
    height: 100%;
    width: 5px;
    background: #f00;
    border-radius: 2px;
    animation: ani_pflicht 1s ease infinite;
}
.fragebogen .feld .pflicht.list,.fragebogen .feld .pflicht.check{
    top:-2px;
    height: calc(100% - 1px);
}
.fragebogen .feld .pflicht.list_bild{
    top:10px;
    height:calc(100% - 20px);
}
@keyframes ani_pflicht {
  0% {opacity:1;} 50% {opacity:0.3;} 100% {opacity:1;}
}

.fragebogen .auswahl_bild{
    display: inline-block;
    padding:10px;
    border-radius: 2px;
    margin-right: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    color: inherit;
    vertical-align: top;
}
.fragebogen .auswahl_bild.over{
    border:1px solid #f00 !important;
    transition: all 0.2s;
}
.fragebogen .auswahl_bild img{
    margin-bottom: 5px;
    border-radius:2px;
}
.fragebogen .auswahl_bild .checkbox2{
    position: absolute;
    top:1px;
    left: 0px;
}
.fragebogen .auswahl_bild .label{
    position: relative;
    color: inherit;
    white-space: normal;
    padding-top: 3px;
    padding-left:28px;
}
.fragebogen input:focus,.fragebogen textarea:focus{
    border:1px solid #f00 !important;
    transition: all 0.2s;
}
.fragebogen .btn{
    display: inline-block;
    position: relative;
    padding:10px 20px;
    border-radius: 2px;
    transition: all 0.2s;
}
.fragebogen .btn.over{
    opacity: 0.5;
}

/* WIN ####################################################################*/
#win {
	display:none;
	position:fixed;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:99;
}
#win.black{
	background: #212121;
	background: linear-gradient(to right,#212121,#1e3b5d);
}
#win .bg{
	position: absolute;
	top:0px;
	left:0px;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.75);
	backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    -webkit-transform: translate3d(0,0,0);
	z-index:1;
}
#win .close{
	position: absolute;
	bottom:-40px;
	width: 40px;
	height: 40px;
	cursor: pointer;
}
#win .close.over{
	opacity: 0.5;
}
#win .win{
    position: relative;
	width:240px;
	padding:20px;
	margin-top:-10px;
	background: #fff;
	box-shadow: 0px 2px 10px rgba(0,0,0,0.5);
	text-align: left;
	z-index:2;
}
#win .win.klein{
	width:200px;
}
#win.black .win{
	background: none;
	box-shadow: none;
	color:#ffffff;
}
#win .win .logo{
	max-width: 200px;
	max-height: 100px;
	margin-bottom: 20px;
}
#win .win h2{
	display: block;
	text-align: left;
	font-weight: bold;
	font-size:14px;
	margin-bottom: 10px;
}
#win .win input{
	margin-bottom:5px;
}
#win .win.datenschutz{
    height:calc(100% - 200px);
    width:100%;
    padding:0px;
    max-width:540px;
    font-size:11px;
    line-height: 13px;
    border-radius: 2px;
    color:#000;
}
#win .win.datenschutz .mask{
    overflow:scroll;
	-webkit-overflow-scrolling:touch;
    padding:20px;
    height:calc(100% - 40px);
    width:calc(100% - 40px);
    font-size:inherit;
    line-height: inherit;
}

/* LOADING & SPERRE #######################################################*/
#loading {
	display:none;
	position:fixed;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0);
	z-index:100;
}
@keyframes rotation_ani {
  0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}
}
.load_icon{
	position:fixed;
	bottom:10px;
	left:50%;
	margin-left:-20px;
	height:40px;
	width:40px;
	animation: rotation_ani 0.7s linear infinite;
}
.load_icon .pics.loading {
	position:absolute;
	left:0px;
	top:0px;
	width:40px;
	height:40px;
}
#sperre{
	position: fixed;
	top:0px;
	left:0px;
	width:100%;
	height: 100%;
	z-index:200;
}
#hinweis {
	display:none;
	position:fixed;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	cursor: pointer;
	background:rgba(0,0,0,0.9);
	backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    -webkit-transform: translate3d(0,0,0);
	z-index:199;
}
.hinweis{
	position:absolute;
	min-width:240px;
	max-width:560px;
	color:#f00;
	text-align:center;
	margin-top:-10px;
    font-size:14px;
}
.hinweis.ok{
	color:#0f0;
}
.hinweis .load_icon{
	position: relative;
	margin-top: 10px;
	bottom:auto;
}
.hinweis .refresh{
	margin-top:10px;
}
#cache_progress{
	position: relative;
	display: block;
	border:1px solid #f00;
	width:240px;
	height: 4px;
	border-radius: 10px;
	margin-top:10px;
	overflow: hidden;
}
#cache_progress div{
	position: absolute;
	top:0px;
	left:0px;
	height:100%;
	width:0px;
	background: #a00;
	transition:width .2s;
}
#saveicon{
	position:fixed;
	left:0px;
	top:0px;
	z-index:102;
}
#saveicon .saveicon{
	position:absolute;
	width:80px;
	height:80px;
	opacity:0;
	opacity: 1;
	animation: saveicon_ani 0.6s;
}
#saveicon .saveicon.save_ok{
	background: #3ad041;
	border-radius:100px;
}
#saveicon .saveicon.save_error{
	background: #f60b0b;
	border-radius:100px;
}
@keyframes saveicon_ani {
  0% {opacity:0;} 50% {opacity:1;} 100% {opacity:0;}
}
/* FORM #######################################################*/
/*
input,textarea,select {
	display:block;
	margin: auto;
	margin-top: -1px;
	padding:3px 5px;
	line-height:20px;
	background: none;
	border:1px solid #dddddd;
	border-radius:0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width:calc(100% - 12px);

}
input.white,textarea.white,select.white{
	color:#ffffff;
}
textarea{
	resize:none;
	height:40px;
}
select{
	width:100%;
}
input:focus,select:focus,textarea:focus {
	background: rgba(255,0,0,0.1);
}
input.white:focus,select.white:focus,textarea.white:focus {
	background:rgba(0,0,0,0.25);
}
input:hover,select:hover,textarea:hover {
	background: rgba(255,0,0,0.05);
}
input.white:hover,select.white:hover,textarea.white:hover {
	background:rgba(255,255,255,0.15);
}
input:disabled,select:disabled,textarea:disabled {
	background:none;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
	color: rgba(0,0,0,0.5);
}
input::-moz-placeholder,textarea::-moz-placeholder{
	color: rgba(0,0,0,0.5);
}

input.hint,textarea.hint,select.hint{
	border:1px solid #f00;
}
*/
.form_btn{
	display: block;
	color:#fff;
	padding:10px 20px;
	text-align: center;
	background: #212121;
	cursor: pointer;
}
.form_btn.black{
	background: #171e43;
}
.form_btn.white{
	background:#fff;
	color:#000;
}
.form_btn.inline{
	display: inline-block;
}
.form_btn.abbruch_oben{
	position:absolute;
	top:10px;
	right:0px;
}
.form_btn.abbruch_unten{
	position:absolute;
	bottom:20px;
	right:0px;
}
.form_btn.over{
	opacity: 0.5;
}
.form_btn.rot{
	background: #f60b0b;
}
.form_btn.gruen{
	background: #3ad041;
}
.form_btn.blau{
	background: #3d9ffe;
}
/* INPUT */
input,textarea,select,.select_multi,.checkbox {
	display:block;
	margin: auto;
	margin-top: -1px;
	padding:3px 5px;
	line-height:20px;
	background: none;
	border:1px solid #dddddd;
	border-radius:2px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width:calc(100% - 12px);
	height: 20px;
}
input.white,textarea.white,select.white{
	color:#ffffff;
}
textarea{
	resize:none;
	height:60px;
}
select{
	width:100%;
	height: 28px;
}
.select_multi {
	cursor: pointer;
	vertical-align: middle;
	height: auto;
}
.select_multi .leer{
	display: inline-block;
	color:#ccc;
}
.checkbox{
    display: inline-block;
	position: relative;
	color:inherit;
    border:0px !important;
    width: auto;
    margin-right: 20px;
    padding-top: 1px;
    margin-bottom: 5px;
}
.checkbox .big{
    display: inline-block;
	position: absolute;
	left:0px;
	top:1px;
    width: 20px;
    height: 20px;
    border-radius: 20px;
}
.checkbox .label{
    display: inline-block;
	position: relative;
    padding-top:0px;
    padding-left:23px;
    line-height:16px;

    color:inherit;
}
.checkbox2{
    display: inline-block;
	position: relative;
	border-radius: 20px;
    width: 20px;
    height: 20px;
    vertical-align:top;
}
input:focus,select:focus,textarea:focus,.select_multi.focus {
	background: rgba(255,0,0,0.1);
    border:1px solid #f00 !important;
    transition: all 0.2s;
}
input.white:focus,select.white:focus,textarea.white:focus {
	background:rgba(0,0,0,0.25);
}
input:hover,select:hover,textarea:hover,.select_multi:hover {
	background: rgba(255,0,0,0.05);
}
input.white:hover,select.white:hover,textarea.white:hover {
	background:rgba(255,255,255,0.15);
}
input:disabled,select:disabled,textarea:disabled {
	background:none;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
	color: rgba(0,0,0,0.5);
}
input::-moz-placeholder,textarea::-moz-placeholder{
	color: rgba(0,0,0,0.5);
}
input.white::-webkit-input-placeholder, textarea.white::-webkit-input-placeholder {
	color: rgba(255,255,255,0.5);
}
input.white::-moz-placeholder,textarea.white::-moz-placeholder{
	color: rgba(255,255,255,0.5);
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin:0;
}
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
  margin: 0;
}

input.hint,textarea.hint,select.hint{
	background: rgba(255,0,0,0.2);
}
/* PICS #######################################################*/
.pics{
	position:relative;
	display:inline-block;
	vertical-align:top;
	background:url(images/pics.png?v13) no-repeat 0 0;
	background-size: 400px 400px;
	width:40px;
	height:40px;
}
.pics.kreis{
	border:1px solid #fff;
	border-radius:50px;
}
.pics.nav_menu		 		{background-position:0px 0px;}
.pics.icon_loading			{background-position:-40px 0px;}
.pics.nav_user		 		{background-position:-80px 0px;}
.pics.nav_cloud		 		{background-position:-120px 0px;}
.pics.nav_cloud_black		{background-position:-120px -40px;}
.pics.nav_x			 		{background-position:-160px 0px;}
.pics.nav_location	 		{background-position:-200px 0px;}
.pics.icon_refresh		 	{background-position:-240px 0px;}
.pics.icon_close		 	{background-position:-280px 0px;}
.pics.hinweis_klein	 		{background-position:-210px -10px;width:20px;height:20px;}

.pics.ok_big        		{background-position:0px -140px;width:20px;height:20px;}

.pics.cb1_1				{background-position:0px -160px;width:14px;height:14px;}
.pics.cb1_0				{background-position:-14px -160px;width:14px;height:14px;}
.pics.cb2_1				{background-position:-28px -160px;width:14px;height:14px;}
.pics.cb2_0				{background-position:-42px -160px;width:14px;height:14px;}
.pics.close				{background-position:-56px -160px;width:14px;height:14px;}
.pics.sync				{background-position:-70px -160px;width:14px;height:14px;}
.pics.sync_black		{background-position:-84px -160px;width:14px;height:14px;}
.pics.cb3_1				{background-position:-98px -160px;width:14px;height:14px;}
.pics.cb3_0				{background-position:-112px -160px;width:14px;height:14px;}

.pics.save_error		{background-position:0px -320px;width:80px;height:80px;}
.pics.save_ok			{background-position:-80px -320px;width:80px;height:80px;}

.pics.i			 		{width:14px;height:14px;}
.pics.i.pfeil_wo		{background-position:0px -175px;}
.pics.i.pfeil_nwso		{background-position:0px -175px;transform: rotate(45deg);}
.pics.i.pfeil_o			{background-position:-14px -175px;transform: rotate(0deg);}
.pics.i.pfeil_no		{background-position:-14px -175px;transform: rotate(-45deg);}
.pics.i.pfeil_n			{background-position:-14px -175px;transform: rotate(-90deg);}
.pics.i.download  		{background-position:-28px -175px;}
.pics.i.download_s  	{background-position:-28px -175px;transform: rotate(90deg);}
.pics.i.frage  		    {background-position:-42px -175px;}
.pics.i.ausruf  		{background-position:-56px -175px;}
.pics.i.sync  		    {background-position:-70px -175px;}
.pics.i.del_x  		    {background-position:-84px -175px;}
.pics.i.minus  		    {background-position:-98px -175px;}
.pics.i.plus  		    {background-position:-112px -175px;}
.pics.i.ok  		    {background-position:-126px -175px;}
.pics.i.edit  		    {background-position:-140px -175px;}
.pics.i.glocke			{background-position:-154px -175px;}
.pics.i.verlauf  		{background-position:-168px -175px;}
.pics.i.lupe	  		{background-position:-182px -175px;}

.pics.i.b_pfeil_wo		{background-position:0px -190px;}
.pics.i.b_pfeil_nwso	{background-position:0px -190px;transform: rotate(45deg);}
.pics.i.b_pfeil_o		{background-position:-14px -190px;transform: rotate(0deg);}
.pics.i.b_pfeil_no		{background-position:-14px -190px;transform: rotate(-45deg);}
.pics.i.b_pfeil_n		{background-position:-14px -190px;transform: rotate(-90deg);}
.pics.i.b_download  	{background-position:-28px -190px;}
.pics.i.b_download_s  	{background-position:-28px -190px;transform: rotate(90deg);}
.pics.i.b_frage  		{background-position:-42px -190px;}
.pics.i.b_ausruf  		{background-position:-56px -190px;}
.pics.i.b_sync  		{background-position:-70px -190px;}
.pics.i.b_del_x  		{background-position:-84px -190px;}
.pics.i.b_minus  		{background-position:-98px -190px;}
.pics.i.b_plus  		{background-position:-112px -190px;}
.pics.i.b_ok  		    {background-position:-126px -190px;}
.pics.i.b_edit  		{background-position:-140px -190px;}
.pics.i.b_glocke		{background-position:-154px -190px;}
.pics.i.b_verlauf  		{background-position:-168px -190px;}
.pics.i.b_lupe	  		{background-position:-182px -190px;}

@keyframes ani_rotate {
  0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}
}
.ani_rotate{
	animation: ani_rotate 1s linear infinite;
}

@media only screen and (max-width:800px){
	.formular{
		width:100%;
	}
	.formular .bez{
		position: absolute;
		color:#999;
		font-size:11px;
		top:0px;
		left:0px;
	}
	.formular small{
		color:#999;
		font-size:11px;
	}
	.formular .feld{
		padding-top:22px;
	}
	.formular hr{
		margin-left:-10px;
		width:calc(100% + 20px);
	}

}
@media only screen and (max-width:580px){
	#inhalt{
		padding:0px;
		padding-top:60px;
		width:calc(100% - 0px);
	}
	.tab{
		padding:10px;
		width:calc(100% - 20px);
	}
	.formular .bez{
		position: absolute;
		color:#999;
		font-size:11px;
		top:0px;
		left:0px;
		white-space: nowrap;
	}
	.formular .bez br{
		display: none;
	}
	.formular small{
		color:#999;
		font-size:11px;
	}
	.formular .feld{
		padding-top:22px;
	}
	.formular .feld3{
		padding-top:10px;
	}
	.formular .feld .list{
		top:49px;
	}
	.formular .feld .list.multi{
		top:22px;
	}
	.formular .feld .list a,.formular .feld .list .hinweis{
		font-size: 10px;
	}
	.formular hr,.jobs_projekt hr{
		margin-left:-10px;
		width:calc(100% + 20px);
	}
	.formular h2{
		margin-bottom: 5px;
	}

}