/* open-sans-300 - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('fonts/open-sans-v18-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/open-sans-v18-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

body{margin:0; height:100%;}
html{height:100%;overflow-y:scroll;margin-bottom:0;}
img{vertical-align:middle;border:0px;}
.image_container{padding-bottom:1px;}
a,button,body,div,em,input,label,li,ol,p,select,span,strong,td,th,textarea,u,ul{font-family:"Open Sans", sans-serif; line-height:1.7em; word-spacing:0.15em;}
a,button,body,div,input,label,li,ol,p,select,textarea,u,ul{font-size:1em;color:#666; font-weight:300;}
p,pre,form{margin:0;padding:0;}
a{text-decoration:none;color:#e30613;outline:none;}
a:hover{color:#000;}

#main a,
#footer a,
#main a i {transition: color 0.3s;}

/*Textauszeichnung*/
h1,h2,h3,h4,h5{padding-bottom:0px; color:#e30613; font-weight:300; line-height:1.2em; margin:1em 0 1em;}
h1{font-size:2.1em;}
h2{margin-top:0;font-size:1.7em;}
h3{margin-top:0;font-size:1.4em;}
h4{margin-top:0;font-size:1.2em;}
h5{margin-top:0;font-size:1.2em; color:#333;}

b, strong { 	color: #696969; font-weight: bold; margin: 0; padding: 0; }
.bigger {	font-size: 1.2 em; line-height: 1.4em;}
.small,.small a{font-size:0.8em;}
.highlight{font-weight:bold;}
.dir_rtl {direction: rtl;}

.red,
.red label {		color:#df2222; font-weight:bold; } /*Fehlerfelder bei Dateneingabe */

.hidden {	position:relative; left:-9999px; } 
.super {		vertical-align:top; font-size:70%; line-height:0.9em;}
.clear {		clear:both;}

#main p {margin-bottom:1.5em;}
.fa, .fal, .far, .fab {color:#e30613}

#help_popup {width:100%; max-width:470px; padding:1em;}

#wrapper{ margin:0px auto; padding:0px; width:100%; position:relative; min-width:980px;}
#header{min-height:140px; padding:0px; overflow:visible; position:relative; background-color:rgba(255,255,255,1);}
.w960{width:960px; margin:0px auto; padding:0px; position:relative !important;}
#container{width:100%; clear:both; overflow:auto; background-color:rgba(255,255,255,1); }
#main{width:880px; min-height:200px; overflow:hidden; margin:0px auto 10px; padding:20px 40px 40px; float:none; border:1px solid #ECEDED;}

/* footer */
#footer{padding-bottom:20px;}
#footer .inside {font-size:0.75em;width: 940px; margin: 0 auto; padding-left:20px;}
#footer a {color:#666;}
#footer a:hover {color:#000;}

/* logo */
#logo_pv {border-bottom:2px solid #e30613; position:relative; top:20px; left:0px; height:90px;}
#logo_pv img {width:330px; position:absolute; top:41px; left:20px;}
#logo_pid {position:absolute; top:20px; right:20px; height:80px; width:340px; text-align:right;}
#logo_pid img {height:80px;}

/* popup */
#mbOverlay {		visibility: hidden; width: 100%; height: 100%; position: fixed; z-index: 9998; top: 0; left: 0; background-color: #fff;}
#popup_box { 		visibility: hidden; position:fixed; margin-left:150px; width:500px; background-color:#F6F7F7; padding:20px; border:1px solid rgb(128,128,128);
					z-index:9999; border-radius:5px; box-shadow: 1px 1px 8px rgb(128,128,128);}
#popup_box div { 	display:inline; font-size:13px; font-weight:300; letter-spacing: 2px; text-align:left; text-transform:uppercase; color: #000; }
#popup_box table{	width:100% }
#popup_box tr{ 		vertical-align:top;}
#popup_box th { 	color:#e30613; font-weight:300; line-height:1.2em; margin:1em 0 1em;
					font-size:1.7em; text-align:left; border-bottom:1px solid #ddd; padding-bottom:10px; }
#popup_box td { 	padding:1em 0; }
#popup_box .last {	border-top:1px solid #ddd;}
#popup_box select {	width:300px;}
#scrollOverlay {display: none;}

/* profilinglisten */
.dir_rtl #liste {	margin-left:0em; margin-right:2.5em;}
#profiling {		margin:0; padding:0; list-style-type:none;}

#profiling li {	margin:0.3em 0; cursor: pointer; border:1px solid #ddd; background-color: #f7f9f9; padding:0.1em 0.5em; touch-action:none; transition: background 0.3s; }
#profiling li:hover {	background-color: #ECEDED;}
#profiling li .sortable_number{	padding:0.1em;  display:inline-block; width:1.5em; vertical-align:top;}
#profiling li .sortable_item{	padding:0.1em 0.4em; display:inline-block; width: calc(100% - 2.5em);}

/* teamrollen */
#trt_part_2, #trt_part_3, #trt_part_4, #trt_part_5 {opacity: 0; display: none; visibility: hidden;}
.trt_block {border:1px solid #ECEDED; padding:10px 10px 60px; margin-bottom:2em; opacity: 0; display: none; visibility: hidden;}
.trt_block h3 {margin:0.5em 0 1em;}

.trt-toggler{cursor: pointer;  outline:none; position:relative; transition: color 0.3s;}
.trt-toggler:hover{color:#000;}
.trt-toggler:after {font-family:'Font Awesome 5 Pro'; content:"\f107"; xpadding:0.25em 0.5em 0; position:relative; left:0.5em; top:0.15em;}
.trt-toggler.active:after {content:"\f106";}

.trt_eigenschaften ul {	margin:0; padding:0; list-style-type:none;}
.trt_eigenschaften li {	cursor: pointer; border:1px solid #ddd; background-color: #f7f9f9; padding:0.2em 0.5em; margin:0.7em 0; min-height:1.8em; transition: background 0.3s;
							-webkit-user-select: none; touch-action:none; display:flex;flex-wrap: nowrap; justify-content: space-between;align-items:center; }
.trt_eigenschaften li.moved {background-color:#f0f3fa; border-color: #dfe5f3;}
.trt_eigenschaften li:hover {	background-color: #ECEDED; border-color: #ddd;}

.trt_eigenschaften i {padding:0px 0px 0px 15px; touch-action:none; color:rgba(0,0,0,0.2);}


.trt_verben label {	margin:0.3em 0 0.3em 3em; cursor: pointer; border:1px solid #ddd; background-color: #f7f9f9; display:inline-block;
	max-width:90%; width:350px; padding:0.1em 0.5em; touch-action:none; transition: background,border 0.3s; position:relative; }
.trt_verben label:hover {background-color: #ECEDED;}
.trt_verben input.active + label {background-color:#E6F2E8; border-color: #7DCA8A;}
.trt_verben input.active + label:after {content: "\f00c"; font-family:'Font Awesome 5 Pro'; display: inline-block; position:absolute; right:5px;	font-size:1.2em; width:1em; font-style: normal; font-weight: 400; text-align:left; padding-left:0.2em; padding-right:0.2em; color:#7DCA8A}
.trt_verben input:disabled + label {background-color: #ECEDED; color:#a99; cursor: unset; }
.trt_verben input[type=checkbox]{display: none;}

.box_fes_name {border:1px solid #dfe5f3; display: inline-block; padding:1em; width: calc(100% - 2em); text-align:center; background-color:#f0f3fa;}

.progressbar_wrapper { position:relative; xborder:1px solid red; }
.progressbar { width: 300px; position: absolute; top:20px; left:calc(50% - 150px);}

.steps { position: relative; display: flex; justify-content: space-between; width: 100%;}
.step { width: 5px; height: 5px; background: #fff; border: 2px solid #ccc; border-radius: 50%;  transition: background 1s, border-color 1s;}
.step.selected { border: 2px solid #e30613;}
.step.completed { border: 2px solid #e30613; background: #e30613;}
.progress { position: absolute; width: 100%; height: 2px; margin-top:3px; background-color: #ccc;}
#progress_percent { position: absolute; width: 0%; border-bottom: 2px solid #e30613; transition: width 1s;}

/* selbsteinschätzung */
.selbst_block {border:1px solid #ddd; padding:10px; margin-bottom:20px;}
.selbst_nummerierung {	width:25px; float:left; text-align:left;}
.selbst_eigenschaften {	margin-left:25px; }
.selbst_nummerierung ul,
.selbst_eigenschaften ul {	margin:0; padding:0; list-style-type:none;}
.selbst_nummerierung li{	padding:0.1em; margin:0.3em 0; height:1.8em; border:1px solid #fff; }
.selbst_eigenschaften li {	cursor: pointer; border:1px solid #ddd; background-color: #f7f9f9;
							padding:0.1em 0.5em; margin:0.3em 0; height:1.8em;
							-webkit-user-select: none; touch-action:none;}
.selbst_eigenschaften li:hover {	background-color: #ECEDED;}


/* webprofiling */
.web_flex {display: flex; justify-content: center; flex-wrap:wrap; align-items: stretch; gap:2em; text-align:center;}
.web_flex>div {max-width: 200px; border:1px solid #f0f0f0; padding:2em 2em 0em;}
.web_flex_img {border:0px solid #e30613; width:150px; height:150px; border-radius:50%; display: flex; justify-content: center; align-items: center; margin: 0 auto 2em;  background-color: #DCECF3;}


/* pat-listen */
.patblock  table{	padding:5px; table-layout:fixed; margin:10px 0px; width:99%; border:1px solid #ddd;}
.patblock .col_0{	text-align:left; padding-top:3px;}
.patblock .col_werte { text-align:center; width:25px; padding-top:3px;}
.patblock .col_werte2 { text-align:center; width:85px; padding-top:0px; line-height:1.6em}
.patblock .odd { background-color:#ECEDED;}
.patblock th, .patblock tr { vertical-align:middle; height:35px;}
.patblock th { height:20px}
.patblock  table.red { border:2px solid #df2222;} /*Fehlerfelder bei Dateneingabe */
.patblock .red { color:#666; font-weight:300;}
.patblock .mob_nr {	display:none;}

/* formular */
input[type=text], select, textarea {padding:0.5em; border:1px solid #ededed; width:90%; margin:5px 0px 15px; resize: none; background-color:#f9f9f9;}
input[type=text]:disabled, select:disabled, textarea:disabled {border:1px solid #ededed; background-color:#fff;}

select {cursor:pointer; -ms-box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box;}
.select_arrow {position:relative;}

fieldset {padding:0px; width:95%; margin:5px 0px 0px; border-width:0px;}
fieldset legend{margin:0px 0px 10px -3px;}
fieldset label{display:block; padding:5px; }
fieldset input{display:block; float:left; margin-top:7px;}
fieldset input.checkbox{margin:12px 10px 0 0;}

input.submit {	padding:0.4em 1em; border-radius: 5px; margin-top:0.5em; margin-bottom:0.1em; border:1px solid #E30613;
				background-color:#E30613; color:#fff; text-shadow:1px 1px 0px rgba(0,0,0,0.3); transition: all 0.3s !important; cursor:pointer;}
input.submit:hover { background-color:#fff; text-shadow:1px 1px 0px rgba(0,0,0,0); color:#E30613;}

p.error {font-size:0.8em; color:#E30613; margin-bottom:0px !important;}
input.text.error,
input.captcha.error,
select.error,
textarea.error {border:1px solid #E30613;}

.textbutton,
.textbutton2 {padding:0.4em 1em; border-radius: 5px; margin-top:0.5em; margin-bottom:0.1em; border:1px solid #E30613;
background-color:#E30613; color:#fff; text-shadow:1px 1px 0px rgba(0,0,0,0.3); cursor:pointer;}
.textbutton { float:right;}
form[name=Formular]{margin-bottom:2em;}

.textbutton:hover,
.textbutton2:hover {background-color:#fff; text-shadow:1px 1px 0px rgba(0,0,0,0); color:#E30613;}
button i {margin-right:8px; color:#fff !important;}
button:hover i {color:#E30613 !important;}

.textbutton:disabled,
.textbutton2:disabled{	color:#666 !important; cursor: default; text-shadow:1px 1px 0px rgba(0,0,0,0); background-color:#aaa !important; border-color:#aaa !important;}

/* namenseingabe */
table#get_details { max-width:720px;}
#get_details td:nth-of-type(1) {width:50%;}
#get_details input[type=text],
#get_details select,
#get_details textarea {width: 400px; float: right;}

#get_details td {	padding-right:2em; min-height:3em;}
.anmerkung { 		text-indent:-1em; padding-left:25px; padding-bottom:10px;}
.fussnote { 		vertical-align:top; font-size:70%; color:#444444;}
.p_flex_top {display: flex; align-items: flex-start;}
.flexbox {display: flex; justify-content: flex-start; align-items: baseline; column-gap: 10px;}
#dsgvo_check {margin: 0.5em 1em 0 0;}

/* login */
#main.login {opacity: 0; visibility: hidden;}
#main.login .inside {	position:relative; max-width: 850px; margin:0 auto;}
#footer.login {opacity: 0; visibility: hidden;}

#text_03, #text_04, #text_05, #text_06, #text_09 {text-align: center;}
#text_03 {padding-top:2em;}
#text_04 {padding-top:1em; font-size: 1.4em;}
#text_06 {padding-top:1em;}
#text_09 {padding-top:5em;}

#text_05 input{ width:195px; font-weight: 600; border-radius: 5px; text-align: center; padding:0.4em 2.5em; margin:0.5em 0; border:1px solid #c0c0c0; box-shadow:0px 0px 3px #bbb; background-color:#fff;}
#text_05 i { position:relative; left:1.7em; font-size:1.2em;}
#text_05 form { margin-bottom: 0em;}

#accordion .toggler { cursor:pointer; }
#sprache_kasten { font-size:0.9em; width:120px; font-weight: 600; text-align: center; border-radius: 5px; padding:0.4em 1.5em; margin:0.5em auto; border:1px solid #c0c0c0; box-shadow:0px 0px 3px #bbb; transition:background 0.3s, color 0.3s;position: relative;}
#sprache_kasten i { font-size:1.4em; width:1em; position: absolute; left:0.4em; top:0.4em;}
#sprache_kasten:hover { border:1px solid #c0c0c0; box-shadow:0px 0px 3px #bbb; color:#000; background-color: #fafafa;}

#text_08 { background-color:rgba(240,200,200,0.5); padding:1em 0.5em; text-align:center; font-weight:bold; border:1px solid rgba(240,200,200,1); margin:5em auto; box-shadow:0px 0px 3px #bbb; max-width:850px; width:80%;}
#text_08 span{ display:none;}
#text_08 span.visible { display:block;}


.text_sprache { z-index:100; margin:1em auto 0; display: flex; max-width: 750px; flex-wrap: wrap; justify-content: center; flex-direction: row; height: 0;}
.text_sprache div { margin: 5px 15px;}
.text_sprache span { display:block; cursor:pointer; font-size:0.9em; color:#333; width:100px; margin:0px auto; padding:7px 12px; border:1px solid #e5e5e5; border-radius: 3px; box-shadow:0px 0px 3px #eee; text-align: center;}
.text_sprache img { margin-right:10px; height:15px; box-shadow:0px 0px 3px rgba(0,0,0,0.4);}

.text_sprache span.active {cursor:default;}
.text_sprache span.active,
.text_sprache span:hover {border:1px solid #c0c0c0; box-shadow:0px 0px 3px #bbb; color:#000; background-color: #fafafa;}
.text_sprache span.disabled {cursor: default; color: #bbb; border: 1px solid #e5e5e5; box-shadow: 0px 0px 3px #eee !important;  background-color: #f0f0f0;}

/* ------------- button transition ------*/
.textbutton, .textbutton2,.text_sprache span, button i { transition:background 0.3s, color 0.3s, box-shadow 0.3s, text-shadow 0.3s}


/* ----------- newsletter box --------*/
.nl_box {margin: 60px auto 0; border:1px solid rgba(0,0,0,0.05); padding:1.5em 1.5em 1.5em 8em; background-color: rgba(0,0,0,0.01); cursor: pointer; position: relative; transition: all 0.5s}
.nl_box:hover {border:1px solid rgba(0,0,0,0.2); background-color: rgba(0,0,0,0.03)}
.nl_box .nl_link {position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1;}
.nl_box a {color:#666;}
.nl_box h4 {font-size:1.2em;}
.nl_box i.bigicon {color:rgba(0,0,0,0.05); font-size:5em; position: absolute; top: 0.3em; left: 0.3em;}
.nl_box:hover i.bigicon {color:rgba(0,0,0,0.2);}


@media screen and (max-width: 979px) {
	body{ min-width: 320px; width: 100%; max-width: 979px;}
	#wrapper{ width: 100%; min-width:320px; margin: 0px; padding: 0px; transform:none !important; -webkit-transform: none !important;}
	#container{ margin: 0px; padding: 0px; width:100% !important;}
	#main{ width:92% !important; padding: 2px 4%; margin: 0px 0px 20px !important; border-width:0px;}
	.w960 {width:92%;}
	#header {min-height:110px;}
	#footer { border-top:1px solid #ECEDED; padding-top:10px;}
	#footer .inside { width:92%; padding-left:4%;}
	#logo_pv {border-bottom:2px solid #e30613; position:relative; top:0px; left:0px; height:80px;}
	#logo_pv img {width:250px !important; height:auto; left:10px;}
	
	#logo_pid { right:10px; height:70px; width:unset;}
	#logo_pid img {width:230px; height:auto;}

	#main .image_container img{ max-width: 100%; height: auto;}
	#header .caption {display:none;}

	/* pat-listen */
	.patblock  table{	margin:10px 0px 30px; width:98%;}
	.patblock td.col_0 {display:block; padding: 0.5em 0.5em;}
	.patblock td.col_werte {display: inline-block; width:15%; max-width:40px; padding:0 0 15px;}
	.patblock tr { vertical-align:middle;}
	.patblock tr.first { display: none;}
	.patblock .mob_nr {	display: block; font-size:0.8em;}
	
	/* namenseingabe */
	table#get_details {width:98%;margin-bottom: 1.5em;}
	#get_details td:nth-of-type(1) {width:unset; min-height:1.5em; margin-top:0.5em;}
	#get_details input[type=text],
	#get_details select,
	#get_details textarea {width:98%; float:none;}
	#get_details td, #get_details th{display:block;}
	#get_details td {	padding-right:0;}

	#profiling li {	margin-right:1.3em;}
	
	/* popup */
	#popup_box {position:fixed; top:0px; left:0px; margin:0px; width:calc(100% - 40px); background-color:#F6F7F7; padding:20px; border-width:0px;
						z-index:9999; border-radius:0px; box-shadow: 1px 1px 8px rgb(128,128,128);}
	#popup_box div { 	display:inline; font-size:13px; font-weight:300; letter-spacing: 2px; text-align:left;
						text-transform:uppercase; color: #000; }
	#popup_box table{	width:auto;}
	#popup_box td.buttons {text-align: center;}
	#popup_box td { display:block; }

}

@media screen and (max-width: 599px) {
	body{ max-width: 599px;}
	#header {min-height:120px;}
	#logo_pv.pid_present {border-bottom:0px;}
	#logo_pid {border-bottom:2px solid #e30613; position:relative; top:10px; right:0px; margin-bottom:30px;}

	h1{font-size:1.7em;}
	h2{font-size:1.5em;}

	#profiling li {	margin-right:0;}
	
	.trt_verben label {	margin-left:5px;}
	.trt_block {padding-top:30px;}
	
	#scrollOverlay {display: block; background-color: rgba(0,0,0,0.3); width:3em; padding:5em 0; position: fixed; right:0px; margin-top: calc(50% - 5em); text-align: center; vertical-align:center; z-index:1;}
	#scrollOverlay i { color: rgba(255,255,255,0.8); font-size: 3em;}
	
	.nl_box { padding-left:6em;}
	.nl_box i {font-size:4em;}
}