.bn_wrapper{
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: flex-start;
	padding-top: 20px;
	box-sizing: border-box;
}
.bn_leftframe{
	width: 25%;
	display: flex;
	justify-content: flex-start;
	justify-items: center;
	align-items: center;
	flex-direction: column;
}
.bn_mainframe{
	width: 50%;
	min-height: 83vh;
	display: flex;
	justify-content: space-between;
	justify-items: center;
	align-items: center;
	flex-direction: column;
}
.bn_rightframe{
	width: 25%;
	display: flex;
	justify-content: flex-start;
	justify-items: center;
	align-items: center;
	flex-direction: column;
	gap: 20px;
	padding-right: 40px;
	box-sizing: border-box;
}
.bn_topcon{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	justify-items: center;
	align-items: center;
	flex-direction: column;
	gap: 40px;
}
.bn_headwrapper{
	width: 100%;
	height: 100px;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
}
.bn_header {
  width: 80%;
  font-size: 24px;
  line-height: 1.2; /* natürliche Zeilenhöhe */
  margin: 0;
  color: #2D1A5B;
  text-align: center;
  position: relative;
  display: inline-block;
  font-weight: 600;
}

#frage_tooltip {
  display: inline-block;
  vertical-align: middle;
  margin-left: 9px;
  cursor: pointer;
}
.bn_questinfofieldpic{
	position: absolute;
	right: 0;
	bottom: 0;
	transform: translateX(120%);
}
.main_mid_con{
	width: 100%;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	flex-direction: column;
	gap: 40px;
}
.bn_questwrap{
	width: 100%;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	flex-direction: column;
	gap: 20px;
}
.bn_selectwrap{
	position: relative;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	width: 100%;
}
.bn_select_arraow{
	pointer-events: none;
	position: absolute;
	right: 12%;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
}
.bn_questselect{
	width: 80%;
	border: 1px solid #D5D7DA;
	color: #717680;
	height: 50px;
	font-size: 16px;
	border-radius: 10px;
	padding-left: 15px;
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: none;
	background-color: transparent;
	padding-right: 20px; /* Optional: Abstand nach rechts */
	cursor: pointer;
}
.bn_vorschlagbox{
	width: 80%;
	border-radius: 10px;
	bottom: 0;
	transform: translateY(103%);
}
.bn_kkbox{
	width: 80%;
	background-color: #F9F5FF;
	border-radius: 25px;
	padding-top: 40px;
	padding-bottom: 40px;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	flex-direction: column;
	gap: 15px;
}
.bn_countkk{
	font-size: 40px;
	font-weight: bold;
	color: #434343;
	line-height: 40px;
	margin: 0;
}
.bn_countunderliner{
	margin: 0;
	color: #434343;
	font-size: 18px;
	font-weight: 200;
}
.bn_botcon{
	width: 80%;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	flex-direction: column;
	gap: 80px;
}
.bn_gobutton{
	color: white;
    background-color: #3A296D;
    padding: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    box-sizing: border-box;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color .4s linear;
}
.bn_gobutton:hover{
	background-color: #765cc1;
}
.bn_reflogobox{
	width: 100%;
	display: flex;
	justify-content: space-between;
	justify-items: center;
	align-items: center;
	filter: grayscale(100%);
}
.bn_reflogopics{

}
.bn_r_top{
	width: 100%;
	background-color: #F9F5FF;
	display: flex;
	justify-content: flex-start;
	justify-items: center;
	align-items: flex-start;
	flex-direction: column;
	padding: 18px;
	padding-top: 16px;
	padding-bottom: 16px;
	box-sizing: border-box;
	border-radius: 15px;
	gap: 15px;
}
.bn_rt_header{
	margin: 0;
	font-size: 18px;
	color: #4F378A;
	font-weight: 600;
}
.bn_rt_box{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	justify-items: center;
	align-items: center;
	gap: 10px;
}
.bn_rt_pic{

}
.bn_rt_boxrigth{
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: flex-start;
	flex-direction: column;
	gap: 5px;
	font-size: 14px;
	font-weight: 600;
}
.bn_rt_checkwrap{
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	gap: 10px;
}
.bn_rt_checkpic{}
.bn_rt_checktext{
	line-height: 12px;
	font-size: 12px;
	margin: 0;
}
.bn_r_bot{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	justify-items: center;
	align-items: flex-start;
	flex-direction: column;
	padding: 18px;
	box-sizing: border-box;
	border-radius: 15px;
	border: 1px solid #D5D7DA;
	gap: 15px;
}
.bn_r_bot_quests{
	flex-direction: row;
}
.bn_rb_toppic{
}
.bn_rb_text{
	margin: 0;
	font-size: 16px;
	font-weight: 600;
}
.bn_rb_gbox{
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	gap: 3px;
}
.bn_rb_gtext{
	margin: 0;
	font-weight: 600;
}
.bn_rb_gstar{

}
.bn_rb_gpic{

}
.bn_errortext{
	position:absolute;
	bottom:0px;
	margin: 0;
	transform: translateY(50%);
	left:11%;
	color:red;
	background-color: white;
	padding-left: 8px;
	padding-right:8px;
	box-sizing: border-box;
	font-size: 12px;
}
/*Bonusrechner Daten Seite*/
.bn_famselbox {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	flex-direction: column;
	box-sizing: border-box;
	gap: 8px;
} 
.bn_famsel_top {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: space-between;
	justify-items: center;
	align-items: center;
} 
.bn_famseltext {
	margin: 0;
	color: #474A73;
	font-size: var(--Typography-body4);
	margin-left: 20px;
} 
.bn_famsel_tooltip {
	width: 16px;
	margin-right: 12px;
} 
.bn_famsel_bot {
	width: 100%;
	display: flex;
	justify-content: space-between;
	justify-items: center;
	align-items: center;
	border: 1px solid #C6BEF4;
	border-radius: var(--radius-sm);
	overflow: hidden;
} 
.bn_famsel_but {
	width: 50%;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	height: 50px;
	font-weight: 500;
	color: #474A73;
	cursor: pointer;
	font-size: var(--Typography-body3);
	background-color: white;
} 
.act_but {
	background-color: #DEDBF9;
	color: #6A3DC4;
}
.bn_datensparbox {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	flex-direction: column;
} 

.bn_sparanzeigewrapper {
	position: absolute;
	width: 100%;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	top: 0;
	transform: translateY(-160%);
	gap: 8px;
} 
.bn_sparanzeigetext {
	margin: 0;
	color: #079455;
	font-weight: 600;
}
.bn_kklogoextension{
	padding-left: 50px;
}
.bn_kk_logo{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 11%;
	width: 30px;
}
.bn_labelinput{
	color: #717680;
	font-size: 12px;
	margin: 0;
	position: absolute;
	left: 11%;
	background-color: white;
	padding-left: 5px;
	padding-right: 5px;
	top: 0px;
	transform: translateY(-50%);
}
.bn_toolbox {
	width: 294px;
	display: none;
	max-width: 300px;
	position: absolute;
	right: 3%;
	top: 0;
	transform: translateX(100%);
	background-color: #333346;
	padding: 14px;
	box-sizing: border-box;
	border-radius: var(--radius-sm);
	-webkit-box-shadow: -4px 9px 15px -15px #0a0d12; 
	box-shadow: 0px 2px 2px -1px #0A0D120A,
				0px 4px 6px -2px #0A0D120A,
				0px 12px 16px -4px #0A0D120A;
	z-index: 999;

}
.bnv_salary_tool{
	right: -41px;
}
.bn_toolbox::before {
    content: "";
    position: absolute;
    top: 10px;
    left: -7px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 7px 6px 0;
    border-color: transparent #333346 transparent transparent;
}
.bn_toolboxheader {
	margin: 0;
	color: #E1E3EC;
	font-size: var(--Typography-body3);
} 
.bn_toolboxtext {
	margin: 0;
	color: #E1E3EC;
	font-size: 12px;
}
#salary:focus + #salary_tip {
  display: block;
}
#employ:focus + #profgroup_tip{
	display: block;
}
#famseltip:hover + #famseltip_tip {
	display: block;
	/* right: -4%; */
		right: -7%;
	top: -30%;
	/* left: -120px; */
}
/*Bonusrechner Daten Seite*/
/*Bonusrechner Fragen Seite*/
.bn_questtopbox {
	width: 100%;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	flex-direction: column;
	gap: 15px;
}
.bn_questprogress {
	margin-top: 6px;
	width: 592px;
	height: 10px;
	border-radius: 10px;
	background-color: #DCD3CC;
	position: relative;
}
.bn_questprogressfill{
	position: absolute;
	left: 0;
	height: 100%;
	width: 0%;
	background-color: #6A3DC4;
	border-radius: 10px;
	transition: all .6s;
}
.bn_questunderliner {
	text-align: center;
	color: black;
	margin: 0;
}
.bn_bot_buttonbox {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	margin-top: 25px;
}
.bn_backbut {
	padding: 12px 16px;
	box-sizing: border-box;
	border: 1px solid #6A3DC4;
	border-radius: 10px;
	color: #414651;
	font-weight: 500;

	cursor: pointer;
	color: #6A3DC4;
}
.bn_skipbutbox {
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	gap: 6px;
}
.bn_skiptext {
	margin: 0;
	color: #5933A4;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
}
.bn_skipicon {

}
.bn_frontbut {
	padding: 14px;
	padding-left: 18px;
	padding-right: 18px;
	box-sizing: border-box;
	border: 1px solid #3A296D;
	background-color: #3A296D;
	border-radius: 10px;
	color: white;
	font-weight: 600;
	cursor: pointer;
}
.bn_rb_questtext{
	position: relative;
	padding: 10px;
	font-size: 12px;
	font-weight: 600;
	border-radius: 10px;
	background-color: #F6F6F6;
	/*color: #2D2D2D;*/
}
.bn_rb_questtext::before {
    content: "";
    position: absolute;
    top: 10px;
    left: -14px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 14px 6px 0;
    border-color: transparent #F6F6F6 transparent transparent;
}
.bn_questwrapper {
	width: 80%;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	flex-direction: column;
	gap: 16px;
	margin-top: 36px;
}
.bn_questtopline {
	width: 100%;
	display: flex;
	justify-content: space-between;
	justify-items: center;
	align-items: center;
	padding: 8px;
	padding-left: 16px;
	padding-right: 16px;
	box-sizing: border-box;
	background-color: #F9F5FF;
	border: 1px solid #E9D7FE;
	border-radius: 10px;
	box-shadow: 0px 4px 16px 0px #0000000D;

}
.bn_questtoptext {
	margin: 0;
	font-size: 14px;
	color: #3A296D;
	font-weight: 600;
}
.bn_questtopresult {
	margin: 0;
	color: #3A296D;
	font-weight: bold;
	font-size: 22px;
}
#resulteuro {}

.bn_questmaster{
	width: 100%;
	height: 270px;
	overflow: hidden;
	display: flex;
	flex-direction: row;
	position: relative;
	gap: 30px;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 2px;
	padding-right: 2px;
	box-sizing: border-box;
}

.bn_awnserwrapper{
	width: 100%;
	flex: 0 0 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	justify-items: center;
	gap: 2%;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

/* Wenn zwei .bn_awnserwrapper in .bn_questmaster sind, werden sie nebeneinander angezeigt */
.bn_questmaster .bn_awnserwrapper {
	position: relative;
}

.bn_questcon {
	height: 15rem;
	flex-grow: 1;
	flex-basis: 0;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	gap: 8px;
	padding: 14px;
	position: relative;
	background-color: #FFFFFF;
	border-radius: 18px;
	overflow: visible;
	border: 1px solid transparent;
	background-image: 
		linear-gradient(to right, white, white),
		linear-gradient(137.26deg, #E9E9E9 -0.08%, #E4E4E4 100%),
		linear-gradient(110.65deg, #FFFFFF 1.16%, rgba(255, 255, 255, 0.23) 100%);
	background-clip: padding-box, border-box;
	background-origin: padding-box, border-box;
	box-shadow: 0px 1px 1px -0.7px rgba(0,0,0,0.03),
				0px 2px 3px -1.5px rgba(0,0,0,0.03),
				0px 3px 4px -1.5px rgba(0,0,0,0.03);
}

/* .bn_questcon::before {
  	content: '';
  	position: absolute;
  	top: -1px;
  	left: -1px;
  	right: -1px;
  	bottom: -1px;
  	border-radius: 18px;
  	background: linear-gradient(131.36deg, #FFFFFF 0.9%, #ACADAE 40.64%, #FFFFFF 95.76%);
  	z-index: -1;
  	-webkit-box-shadow: 0px 10px 13px -7px #00000040, 0px 14px 30px -13px rgba(0,0,0,0); 
	box-shadow: 0px 10px 13px -7px #00000040, 0px 14px 30px -13px rgba(0,0,0,0);
} */
.bn_questcon_top {
	width: 100%;
	display: flex;
	justify-content: space-between;
	justify-items: center;
	align-items: center;
	flex-direction: row-reverse;
}
.bn_questcon_topleft {
	font-size: 12px;
	padding: 4px;
	box-sizing: border-box;
	border: 1px solid #A8F2C6;
	background-color: #ECFDF3;
	color: #085D3A;
	border-radius: 5px;
}
.bn_questcon_info {
	width: 16px;
}
#frage_tooltip{
	width: 16px;
}
.bn_questcon_mid {
	width: 100%;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	flex-direction: column;
	gap: 10px;
}
.bn_questcon_mainpic {
	width: 75px;
}
.bn_questcon_text {
	width: 100%;
	font-size: 14px;
	text-align: center;
	margin: 0;
	color: #2D1A5B;
	font-weight: 500;
}
/*Bonusrechner Fragen Seite*/
/*Bonusrechner Laden*/
.bn_loadcon {
	width: 100%;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	flex-direction: column;
	gap: 20px;
}
.bn_animcon {
	width: 360px;
}
#animationContainer {}
.bn_loadinfocon {
	width: 400px;
	padding: 16px;
	box-sizing: border-box;
	border-radius: 10px;
	background-color: #ECFDF3;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: flex-start;
	flex-direction: column;
	gap: 16px;
}
.bn_loadinfo_checkwrap {
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	gap: 16px;
}
.bn_loadinfo_checkimg {

}
.bn_loadinfotext {
	color: #535862;
	margin: 0;
	font-weight: 500;
}
/*Bonusrechner Vergleich*/
.bn_alldataview {
	width: 80%;
	display: flex;
	justify-content: space-between;
	justify-items: center;
	align-items: center;
	padding: 16px;
	padding-left: 20px;
	padding-right:20px;
	box-sizing: border-box;
	border: 1px solid #D5D7DA;
	border-radius: 12px;
}
.bn_alldatatext {
	color: #858585;
	margin: 0;
}
.bn_alldataedit {
	cursor: pointer;
}
.bn_katwrapper {
	position: relative;
	width: 80%;
	display: flex;
	justify-content: space-between;
	justify-items: center;
	align-items: center;
}
.bn_katbut {
	width: 33%;
	font-weight: 600;
	color: #717680;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	cursor: pointer;
}
.bn_katbuthighlite{
	position: absolute;
	width: 33.3%;
	height: 180%;
	background: #F9F5FF;
	border-radius: 12px;
	mix-blend-mode: color-burn;
	transition: all .6s linear;
}
.bn_oldkkwrapper {
	position: relative;
	width: 80%;
	padding: 10px 16px;
	box-sizing: border-box;
	background-color: #f6f6f6;
	border: 1px solid #999;
	border-radius: 12px;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	flex-direction: column;
	gap: 15px;
}
.bn_oldkk_topline {
	width: 100%;
	display: flex;
	justify-content: space-between;
	justify-items: center;
	align-items: center;
}
.bn_showtag {
	padding: 1px;
	padding-left: 10px;
	padding-right: 10px;
	background-color: #FAFAFA;
	border: 1px solid #E9EAEB;
	border-radius: 15px;
	color: #414651;
	font-size: 14px;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	gap: 3px;
}
.bn_oldkk_showtag{
	color: white;
	background-color: #AEAEAE;
}
.bn_showtag_oldkk_overlay{
	color: #666;
	background: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 50%, #F6F6F6 50%, #F6F6F6 100%);
	position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    font-size: 14px;
}
.bn_oldkk_content {
	width: 100%;
	display: flex;
	justify-content: space-between;
	justify-items: center;
	align-items: center;
}
.bn_oldkk_logo {
	width: 100px;
}
.bn_oldkk_info {
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: flex-end;
	flex-direction: column;
}
.bn_oldkk_priceinfobox {
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	gap: 2px;
}
.bn_oldkk_price {
	color: #3A296D;
	font-size: 22px;
	font-weight: 600;
	margin: 0;
}
.bn_oldkk_pricepic{
	width: 16px;
}
.bn_oldkk_underliner {
	margin: 0;
	color: #A4A7AE;
	font-size: 14px;
}
.bn_oldkk_infotextwrapper {
	width: 100%;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: flex-start;
	flex-direction: column;
	gap: 10px;
}
.bn_oldkk_infotextcon {
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	gap: 5px;
}
.bn_oldkk_infoconpic {
	width: 18px;
}
.bn_oldkk_infocontext {
	margin: 0;
	font-size: 14px;
}
.bn_newkk_wrapper {
	width: 100%;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	flex-direction: column;
	gap: 15px;
}
.bn_newkk_con {
	width: 80%;
	padding: 10px 16px;
	box-sizing: border-box;
	border: 1px solid #D5D7DA;
	border-radius: 12px;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	flex-direction: column;
	gap: 15px;
}
.bn_newkk_headline {
	width: 100%;
	display: flex;
	justify-content: space-between;
	justify-items: center;
	align-items: center;
}
.bn_showtag_img {
	width: 16px;
}
.bn_newkk_comparewrapper {
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	gap: 5px
}
.bn_nwekk_comparetext {
	margin: 0;
	color: #A4A7AE;
	font-size: 14px;
}
.bn_newkk_comparecheck {
	height: 12px;
	width: 12px;
	border: 1px solid #A4A7AE;
	border-radius: 4px;
	cursor: pointer;
}
.bn_newkk_picline {
	width: 100%;
	display: flex;
	justify-content: space-between;
	justify-items: center;
	align-items: center;
}
.bn_newkk_kkpic {
	width: 100px;
}
.bn_newkk_savecon {
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: flex-start;
	flex-direction: column;
	background-color: #ECFDF3;
	padding:  8px 16px;
	border-radius: 8px;
}
.bn_newkk_savecontop {
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	gap: 4px;
}
.bn_newkk_savevalue {
	color: #079455;
	font-size: 22px;
	font-weight: bold;
	margin: 0;
}
.bn_newkk_saveconinfopic {
	width: 16px;
}
.bn_newkk_savecontext {
	margin: 0;
	color: #A4A7AE;
	font-size: 12px;
}
.bn_newkk_infoline {
	width: 100%;
	display: flex;
	justify-content: space-between;
	justify-items: center;
	align-items: center;
}
.bn_newkk_infolineleft {
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	gap: 5px;
}
.bn_newkk_infolinepercentpic {
	width: 18px;
}
.bn_newkk_infolinetext {
	margin: 0;
	color: #3A296D;
	font-size: 14px;
}
.bn_newkk_infolineright {
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: flex-end;
	flex-direction: column;
}
.bn_newkk_infosavecontop {
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	gap: 5px;
}
.bn_newkk_infosavevalue {
	margin: 0;
	color: #3A296D;
	font-size: 18px;
	font-weight: 600;
}
.bn_newkk_infosaveinfocircel {
	width:16px;
}
.bn_newkk_stylestripe {
	width: 100%;
	border-top: 1px solid #EBEDF0;
}
.bn_newkk_checkfieldbox {
	width: 100%;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: flex-start;
	flex-direction: column;
	gap: 12px;
}
.bn_newkk_checkcon {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	justify-items: center;
	align-items: center;
	gap: 8px;
}
.bn_newkk_checkconpic {

}
.bn_newkk_checktext {
	margin: 0;
	font-size: 14px;
	color: #3A296D;
}
.bn_newkk_buttonbox {
	width: 100%;
	display: flex;
	justify-content: space-between;
	justify-items: center;
	align-items: stretch;
	margin-top: 16px;
}
.bn_newkk_detailbut {
	width: 48%;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	gap: 10px;
	border: 1px solid #D5D7DA;
	border-radius: 8px;
	cursor: pointer;
}
.bn_newkk_detailbuttext {
	color: #414651;
	margin: 12px;
	font-weight: 600;
}
.bn_newkk_detailbutpic {

}
.bn_newkk_nextbut {
	width: 48%;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	gap: 10px;
	border: 1px solid #3A296D;
	background-color: #3A296D;
	border-radius: 8px;
	color: white;
	font-weight: 500;
	cursor: pointer;
}
/*Bonusrechner Laden*/
/*Bonusrechner vergleich*/
.bn_newkk_accordmain {
	overflow: hidden;
	height: 0;
	/* margin: -10px -16px;
	padding: 10px 16px; */
	width: 100%;
	background-color: #f9f9f9;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	flex-direction: column;
	gap: 20px;
	transition: all .6s linear;
}
.bn_newkk_accordtopline {
	width: 100%;
	display: flex;
	justify-content: space-between;
	justify-items: center;
	align-items: center;
}
.bn_newkk_accordtoplinetext {
	margin: 0;
	color: #858585;
	font-size: 14px;
}
.bn_newkk_accordtoplineppic {

}
.bn_newkk_moreperftopline {
	width: 100%;
	display: flex;
	justify-content: space-between;
	justify-items: center;
	align-items: center;
}
.bn_newkk_moreperftoplineleft {
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	gap: 12px;
}
.bn_newkk_moreperftoplinepic {
	width: 30px;
}
.bn_newkk_moreperftoplinetext {
	margin: 0;
	color: #3A296D;
	font-weight: 500;
}
.bn_newkk_moreperftoplinetextvalue{
	margin: 0;
	color: #3A296D;
	font-weight: bold;
}
.bn_newkk_moreperftoplinearrow {

}
.bn_newkk_moreperfaccord {
	width: 100%;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: stretch;
}
.bn_newkk_moreperfaccordstripebox {
	width: 3%;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: stretch;
}
.bn_newkk_moreperfaccordstripe{
	height: 100%;
	border-right: 1px solid #D9D9D9;
}
.bn_newkk_moreperfaccordinnerbox{
	width: 97%;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	flex-direction: column;
	gap: 12px;
}
.bn_newkk_accordpicvalueline {
	width: 100%;
	display: flex;
	justify-content: space-between;
	justify-items: center;
	align-items: center;
}
.bn_newkk_accordpicvalueleft {
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	gap: 12px;
}
.bn_newkk_accordpicvaluepic {
	width: 32px;
}
.bn_newkk_accordpicvalueheader {
	margin: 0;
    color: #3A296D;
    font-weight: 500;
}
.bn_newkk_accordpicvaluevalue {
	margin: 0;
    color: #3A296D;
    font-weight: bold;
}
.bn_newkkaccordmainstylestripe{
	width: 100%;
	border-top: 1px solid #D0D0D0;
}
.bn_newkk_accordmaintext{
	width: 100%;
	margin: 0;
	color: #999999;
	font-size: 12px;
	text-align: left;
}
.bn_newkk_tariftopline{
	width: 100%;
	display: flex;
	justify-content: space-between;
	justify-items: center;
	align-items: center;
	margin: -10px -16px;
	padding: 10px 16px;
	width: 100%;
	background-color: white;
	cursor: pointer;
} 
.bn_newkk_tarifhead{
	margin: 0;
	font-weight: 500;
	font-size: 18px;
	color: #3A296D;
}
.bn_newkk_tariftoplinepic{
	transform: rotate(-90deg);
}
.bn_newkk_shoconwrapper{
	margin: -10px -16px;
	padding: 10px 16px;
	width: 100%;
	background-color: #F9F5FF;
}
.bn_newkk_showconheader{
	font-weight: 500;
	font-size: 18px;
	color: #3A296D;
}
.bn_newkk_showconcontent{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	justify-items: center;
	align-items: stretch;
	gap: 12px;
}
.bn_newkk_kkshield{
	width: 80px;
}
.bn_newkk_showconcheckwrapper{
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: flex-start;
	flex-direction: column;
	gap: 4px;
}
.bn_newkk_showconcheckline{
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	gap: 8px;
}
.bn_newkk_showconcheckpic{
	
}
.bn_newkk_showconchecktext{
	font-size: 12px;
	margin: 0;
	font-weight: 500;
}
.bn_newkk_loadmorewrapper{
	width: 80%;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	gap: 18px;
}
.bn_newkk_loadmorestripe{
	width: 100%;
	border-top: 1px solid #D9D9D9;
}
.bn_newkk_loadmoremiddelwrapper{
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	flex-direction: column;
	gap: 10px;
}
.bn_newkk_loadmoretext{
	margin: 0;
	color: #3A296D;
	white-space: nowrap;
	font-weight: 600;
}
.bn_newkk_loadmorepic{

}
.bn_ver_testemonwrapper{
	width: 80%;
	display: flex;
	justify-content: space-between;
	justify-items: center;
	align-items: stretch;
	gap: 24px;
}
.bn_ver_logowrapper{
	width: 80%;
	display: flex;
	justify-content: space-between;
	justify-items: center;
	align-items: center;
	filter: grayscale(100%);
	margin: 20px 0px;
}
.bn_ver_faq{
	width: 80%;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: flex-start;
	flex-direction: column;
}
.bn_ver_faqheader{
	font-size: 24px;
	font-weight: 500;
	margin: 0;
	width: 100%;
	text-align: center;
	margin-bottom: 20px;
}
.bn_ver_faqcon{
	width: 100%;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	flex-direction: column;
	border-radius: 16px;
}
.bn_ver_faqfirstline{
	width: 100%;
	padding: 10px 10px;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	justify-items: center;
	align-items: center;
}
.bn_ver_faqquestheader{
	margin: 0;
	font-size: 16px;
	font-weight: 500;
}
.bn_ver_faqaccordbutton{
	cursor: pointer;
}
.bn_ver_faqaccord{
	width: 100%;
	/* padding: 10px 10px; */
	box-sizing: border-box;
	overflow: hidden;
	height: 0;
	color: #535862;
	font-size: 14px;
}
.bn_ver_faqmorewrapper{
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	gap: 10px;
	margin-bottom: 120px;
	cursor: pointer;
}
.bn_ver_faqmorearrow{

}
.bn_ver_faqmoretext{
	margin: 0;
	color: #3A296D;
	font-weight: 600;
	font-size: 14px;
}
/*Detail Seite----------------------------------------------------------------------------------------------------*/
.bn_de_backwrapper{
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	gap: 8px;
}
.bn_de_backarrow{

}
.bn_de_backtext{
	margin: 0;
	color: #3A296D;
	font-weight: 600;
}
.bn_det_checkline{
	width: 100%;
	display: flex;
	justify-content: space-between;
	justify-items: center;
	align-items: center;
}
.bn_det_toprightcon {
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	flex-direction: column;
	gap: 8px;
}
.bn_det_nextbut {
	padding: 12px;
	padding-left: 28px;
	padding-right: 28px;
	background-color: #3A296D;
	color: white;
	font-weight: 600;
	border-radius: 8px;
	cursor: pointer;
}
.bn_det_toprtext {
	color: #079455;
	font-size: 14px;
	margin: 0;
	white-space: nowrap;
}
.bn_det_kktextbox {
	margin-top: 10px;
	width: 100%;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: flex-start;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
}
.bn_det_kktextheader {
	font-weight: 500;
	font-size: 18px;
	margin: 0;
	color: #181D27;
}
.bn_det_kktext {
	color: #414651;
	margin: 0;
}
.bn_det_togglewrapper{
	width: 100%;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	flex-direction: column;
	margin-top: 10px;
}
.bn_det_toggleline {
	width: 100%;
	background-color: #F9F9F9;
	margin: -10px -16px;
    padding: 15px 16px;
	display: flex;
	justify-content: space-between;
	justify-items: center;
	align-items: center;
	cursor: pointer;
}
.bn_det_toggleline_rad {
	border-radius: 0px 0px 12px 12px;
}
.bn_det_toggletext {
	margin: 0;
	color: #535862;
	font-weight: 600;
}
.bn_det_arrow {

}
.bn_det_toggleaccord {
	height: auto;
	overflow: hidden;
	transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	flex-direction: column;
	margin-top: 8px;
	gap: 12px;
	width: 100%;
}
.bn_det_showcon {
	width: 100%;
	border: 1px solid #D5D7DA;
	border-radius: 12px;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	margin-top: 12px;
	margin-bottom: 12px;
}
.bn_det_aktkk {
	width: 50%;
	background-color: #F9F9F9;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	border-radius: 12px 0px 0px 12px;
	padding: 28px;
	box-sizing: border-box;
}
.bn_det_aktkkpic {
	width: 120px;
}
.bn_det_newkk {
	width: 50%;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
}
.bn_det_newkkpic {
	width: 120px;
}
.bn_det_showconall {
	width: 100%;
	border: 1px solid #D5D7DA;
	border-radius: 12px;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	flex-direction: column;
	padding: 16px;
	gap: 12px;
	margin-top: 12px;
	margin-bottom: 12px;
}
.bn_det_ocattopline {
	width: 100%;
	display: flex;
	justify-content: space-between;
	justify-items: center;
	align-items: center;
}
.bn_det_ocatlineleft {
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	gap: 8px;
}
.bn_det_ocattoppic {
	width: 42px;
}
.bn_det_ocattophead {
	margin: 0;
	color: #3A296D;
	font-weight: 600;
	font-size: 18px;
}
.bn_det_ocattopinfo {
	width: 16px;
}
.bn_det_ocatratingwrapper {
	width: 100%;
	display: flex;
	justify-content: space-between;
	justify-items: center;
	align-items: stretch;
}
.bn_det_ocatrating {
	width: 49%;
	display: flex;
	justify-content: flex-start;
	justify-items: center;
	align-items: center;
	flex-direction: column;
	background-color: #ECFDF3;
	padding: 16px;
	box-sizing: border-box;
	gap: 2px;
	border-radius: 8px;
}

.bn_det_ocatratingred{
	background-color: #FEF3F2;
}
.bn_det_ocatratingyellow{
	background-color: #FFF9E5;
}
.bn_det_ocatratepic {}
.bn_det_transcon {
	width: 100%;
	padding: 16px;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	flex-direction: column;
	gap: 12px;
	margin-top: 12px;
	margin-bottom: 12px;
}
.bn_det_valuetopline {
	width: 100%;
	display: flex;
	justify-content: space-between;
	justify-items: center;
	align-items: center;
}
.bn_det_valuehead {
	font-size: 14px;
	font-weight: 600;
	color: #3A296D;

}
.bn_det_valueinfo {
	width: 16px;
}
.bn_det_valuetext {
	color: #3A296D;
	font-size: 14px;
	text-align: center;
	margin: 0;
}
.bn_det_ucataccord {
	height: 0;
	overflow: hidden;
	color: #3A296D;
	font-size: 14px;
	text-align: center;
	margin: 0;
}
.bn_det_altatop {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	justify-items: center;
	align-items: center;
	gap: 14px;
	font-weight: 500;
}
.bn_det_altapic {

}
.bn_det_altaheader {
	margin: 0;
	color: #3A296D;
	font-size: 16px;
	font-weight: 500;
}
.bn_det_altaline {
	width: 100%;
	display: flex;
	justify-content: space-between;
	justify-items: center;
	align-items: center;
}
.bn_det_altasubhead {
	margin: 0;
	color: #3A296D;
	font-size: 14px;
}
.bn_det_altalineright {
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	gap: 8px;
}
.bn_det_altalineperc {
	margin: 8px;
	color: #3A296D;
	font-size: 14px;
}
.bn_det_altalineinfo {
	width: 16px;
}
.bn_det_altastylestripe {
	width: 100%;
	border-top: 1px solid #d0d0d0;
	margin-top: 6px;
	margin-bottom: 6px;
}
.bn_newkk_infoexwrapper{
	width: 100%;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	gap: 24px;
}
.bn_newkk_infoexcon{
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	gap: 5px;
}
.bn_newkk_infoexpic{

}
.bn_newkk_infoextext{
	margin: 0;
	font-size: 14px;
}
.nm_newkk_infoexinfo{
	width: 16px;
}
.bn_blendin_wrapper {
	position: fixed;
	-webkit-box-shadow: 0px -3px 10px 1px #ddd; 
	box-shadow: 0px -3px 10px 1px #ddd;
	width: 100%;
	bottom: 0;
	background-color: white;
	display: flex;
    justify-content: space-between;
    justify-items: center;
    align-items: center;
	padding: 10px;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
	z-index: 99999;
}
.bn_blendinleft {
	display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
	gap:10px;
	cursor: pointer;
	border: 1px solid #3A296D;
	border-radius: 12px;
	padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
	box-sizing: border-box;
	font-size: 14px;
}
.bn_blendinmailicon {
	width: 22px;
}
.bn_blendinsendtext {
	margin: 0;
	color: #3A296D;
	font-weight: 600;
	font-size: 14px;
}
.bn_blendinright {
	display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
	gap:10px;
}
.bn_blendinspartext {
	font-size: 14px;
	margin: 0;
	color: #079455;
	font-weight: 600;
}
.bn_oldkk_styleline{
	width: 80%;
	border-top: 1px solid #D9D9D9;
}
.bn_newkk_con_empf{
	position: relative;
	border-color: #079455;
}
.bn_newkk_empftext{
	margin: 0;
	color: #079455;
	background-color: white;
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%,-50%);
	padding: 5px;
	padding-left: 10px;
	padding-right: 10px;
	box-sizing: border-box;
	font-size: 14px;
}
.bn_blendinnextbut {
	font-size: 14px;
	padding: 10px;
	padding-left: 20px;
	padding-right: 20px;
	color: white;
	background-color: #3A296D;
	border-radius: 12px;
	cursor: pointer;
}
.bn_sve_wrapper {
	z-index: 999999;
	position: fixed;
	width: 100%;
	height: 100lvh;
	display: none;
	justify-content: center;
	justify-items: center;
	align-items: center;
	background-color: rgba(0,0,0,0.4);
}
.bn_sve_con {
	width: min(95vw, 380px);
	background-color: white;
	border-radius: 12px;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	flex-direction: column;
	box-sizing: border-box;
	padding: 25px;
	gap: 18px;
}
.bn_sve_top {
	width: 100%;
	display: flex;
	justify-content: space-between;
	justify-items: center;
	align-items: flex-start;
}
.bn_sve_mailpic {
	width: 55px;
}
.bn_sve_closesve {
	color: #A4A7AE;
	font-weight: bold;
	cursor: pointer;
}
.bn_sve_textbox {
	width: 100%;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: flex-start;
	flex-direction: column;
}
.bn_sve_header {
	color: #3A296D;
	font-size: 14px;
	font-weight: 600;
}
.bn_sve_underliner {
	font-size: 14px;
	color: #535862;
}
.bn_sve_smbut {
	padding: 10px;
	font-size: 14px;
	padding-left: 20px;
	padding-right: 20px;
	background-color: #3A296D;
	color: white;
	border-radius: 12px;
	cursor: pointer;
}
.bn_questmaster{
	/* height: 392px; */
	min-height: 260px;
	height: auto;
	transition: all .2s linear;
}
.bn_questwrapper{
	width: 90%;
}
.bn_questtopresult{
	font-size: 16px;
}
.bn_awnserwrapper {
display: grid;
grid-template-columns: 1fr 1fr;  /* Zwei Spalten */
grid-template-rows: auto auto;   /* Zwei Zeilen */
column-gap: 3%;   /* Abstand zwischen den beiden Spalten */
row-gap: 3%;      /* Abstand zwischen den Zeilen */
}

.bn_awnserwrapper > .bn_questcon {
flex-grow: 0;  /* Flex-Eigenschaften deaktivieren */
flex-basis: auto;
width: 100%;
height: 180px;
}

/* Wenn 3 Antworten: Erste Antwort oben über beide Spalten, zwei kleine unten */
.bn_awnserwrapper > :nth-child(1) {
grid-column: 1 / span 2;  /* Überspannt beide Spalten */
grid-row: 1;
}

.bn_awnserwrapper > :nth-child(2) {
grid-column: 1;
grid-row: 2;
}

.bn_awnserwrapper > :nth-child(3) {
grid-column: 2;
grid-row: 2;
}

/* Wenn nur 2 Antworten: Beide nebeneinander in der ersten Zeile */
.bn_awnserwrapper:has(.bn_questcon:nth-child(2):last-child) > :nth-child(1) {
grid-column: 1;
grid-row: 1;
}

.bn_awnserwrapper:has(.bn_questcon:nth-child(2):last-child) > :nth-child(2) {
grid-column: 2;
grid-row: 1;
}
@media only screen and (max-width: 1350px) {
	.bn_leftframe{
		display: none;
	}
	.bn_wrapper{
		flex-direction: column;
		align-items: center;
		gap: 28px;
	}
	.bn_mainframe{
		width: 100%;
	}
	.bn_rightframe{
		padding: 0;
		padding-left: 2%;
		padding-right: 2%;
		width: 80%;
		flex-direction: row;
		justify-content: center;
		align-items: stretch;
		margin-bottom: 48px;
	}
	#famseltip:hover + #famseltip_tip {
		display: block;
		right: -2px;
		top: -5px;
	}
	.bn_toolbox{
		transform: translateX(5px) translateY(-100%);
		right: 0;
		z-index: 10000;
		height: auto;
	}
	.bn_toolbox::before {
		content: "";
		position: absolute;
		bottom: -6px;
		top: auto;
		left: 87%;
		transform: translateX(-50%) rotate(180deg);
		right: 10px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 7px 6px 0 6px;
		border-color: #333346 transparent transparent transparent;
		transform: translateX(50%);
	}
}
@media only screen and (max-width: 800px) {
	.bn_rightframe{
		flex-direction: column;
	}
	.bn_reflogobox{
		width: 100%;
		gap: 16px;
		overflow: scroll;
		scrollbar-width: none; /* Für Firefox */
    	-ms-overflow-style: none; /* Für Internet Explorer und Edge */
	}
	.bn_reflogobox::-webkit-scrollbar {
	    display: none; /* Für Chrome, Safari und Edge */
	}
}
@media only screen and (max-width: 750px) {
	.bn_questcon{
		gap: 8px;
	}
	
  .bn_bot_buttonbox{
  	margin-top: 80px;
  }
  .bn_questwrapper{
	margin-top: 0;
  }
  .bn_header{
	font-size: 18px;
	line-height: 18px;
  }
  .bn_headwrapper{
	height: 70px;
  }
  .bn_questcon_mainpic{
	width: 64px;
	height: 64px !important;
	object-fit: contain;
  }
}
@media only screen and (max-width: 650px){
	.bn_questprogress{
		width: 100%;
	}
	
}
@media only screen and (max-width: 600px) {
	
	.bn_kkbox{
		padding-top: 16px;
		padding-bottom: 16px;
	}
	.bn_countkk{
		font-size: 26px;
	}
	.bn_countunderliner{
		text-align: center;
		font-size: 14px;
	}
	.bn_famseltext{
		font-size: 14px;
	}
	.bn_famsel_but{
	}
	.bn_bot_buttonbox{
		position: relative;
	}
	.bn_skipbutbox{
	}
}
@media only screen and (max-width: 500px){
	.bn_loadinfocon {
		width: 85%;
	}
	.bn_loadinfotext {
		font-size: 14px;
	}
}
/*Height*/
@media (max-height: 900px) {
    .bn_mainframe_plus{
    	gap: 50px;
    }
}