/* GLOBAL STYLES

Blue: 				#6993c3	
Blue (middle): 		#5f85b0
Blue (heller): 		#c3d4e7
Blue (noch heller): #E1E9F3
Orange: 			#e8481e
Orange (dunkler): 	#d1411b
Orange (heller): 	#fadad2

-------------------------------------------------- */
@font-face {
 	font-family:'LatoRegular';src:url('../../include/fonts/lato-v23-latin-regular.eot');
	src:url('../../include/fonts/lato-v23-latin-regular.eot') format('embedded-opentype'),
	url('../../include/fonts/lato-v23-latin-regular.woff2') format('woff2'),
	url('../../include/fonts/lato-v23-latin-regular.woff') format('woff'),
	url('../../include/fonts/lato-v23-latin-regular.ttf') format('truetype'),
	url('../../include/fonts/lato-v23-latin-regular.svg') format('svg');
}
@font-face {
 	font-family:'Lato700';src:url('../../include/fonts/lato-v23-latin-700.eot');
	src:url('../../include/fonts/lato-v23-latin-700.eot') format('embedded-opentype'),
	url('../../include/fonts/lato-v23-latin-700.woff2') format('woff2'),
	url('../../include/fonts/lato-v23-latin-700.woff') format('woff'),
	url('../../include/fonts/lato-v23-latin-700.ttf') format('truetype'),
	url('../../include/fonts/lato-v23-latin-700.svg') format('svg');
}
@font-face {
 	font-family:'Lato900';src:url('../../include/fonts/lato-v23-latin-900.eot');
	src:url('../../include/fonts/lato-v23-latin-900.eot') format('embedded-opentype'),
	url('../../include/fonts/lato-v23-latin-900.woff2') format('woff2'),
	url('../../include/fonts/lato-v23-latin-900.woff') format('woff'),
	url('../../include/fonts/lato-v23-latin-900.ttf') format('truetype'),
	url('../../include/fonts/lato-v23-latin-900.svg') format('svg');
}
@font-face {
 	font-family:'LatoItalic';src:url('../../include/fonts/lato-v23-latin-italic.eot');
	src:url('../../include/fonts/lato-v23-latin-italic.eot') format('embedded-opentype'),
	url('../../include/fonts/lato-v23-latin-italic.woff2') format('woff2'),
	url('../../include/fonts/lato-v23-latin-italic.woff') format('woff'),
	url('../../include/fonts/lato-v23-latin-italic.ttf') format('truetype'),
	url('../../include/fonts/lato-v23-latin-italic.svg') format('svg');
}
@font-face {
 	font-family:'FontAwesome';src:url('../../include/fonts/fa-solid-900.eot');
	src:url('../../include/fonts/fa-solid-900.eot') format('embedded-opentype'),
	url('../../include/fonts/fa-solid-900.woff2') format('woff2'),
	url('../../include/fonts/fa-solid-900.woff') format('woff'),
	url('../../include/fonts/fa-solid-900.ttf') format('truetype'),
	url('../../include/fonts/fa-solid-900.svg') format('svg');
}



/* global stuff */
.clearfix:after {content: " "; clear:both;display:block;visibility:hidden;height:0px; }

.btn.btn-primary		{color:#fff;background-color:#e8481e;border:none;text-transform:uppercase;font-weight:bold;padding:10px 25px 10px 25px;}
.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus, .btn-success:active.focus {color:#fff;background-color:#d1411b !important;}

.btn.btn-secondary		{font-size:0.7em;color:#fff;background-color:#6993c3;border:none;text-transform:uppercase;font-weight:bold;padding:5px 20px 5px 20px;}
.btn.btn-secondary:hover, .btn.btn-primary:active, .btn.btn-primary:focus, .btn-success:active.focus {color:#fff;background-color:#666 !important;}

.btn.btn-outline-secondary	{border:none;}

.btn.btn-primary.disabled	{background-color:#bbb;}


input[type="radio"]				{background-color:#c3d4e7;border-color:#999;width:18px;height:18px;cursor:pointer;}
input[type="radio"]:checked 	{background-color:#e8481e;border-color:#e8481e;outline:0;}
input[type="radio"]:focus		{border:none;box-shadow: none;outline:0;}

input[type="checkbox"]			{background-color:#c3d4e7;border-color:#999;width:18px;height:18px;cursor:pointer;}
input[type="checkbox"]:checked 	{background-color:#e8481e;border-color:#e8481e;outline:0;}
input[type="checkbox"]:focus	{border:none;box-shadow: none;outline:0;}


label						{cursor:pointer;}
.row.b						{cursor:pointer;}
.form-control				{cursor:pointer;}

.tooltip .tooltip-inner 	{text-align:left;background-color:#6993c3;}

.container b				{font-family:Lato700,arial,helvetica;}
.container i				{font-family:Lato700,arial,helvetica;}
.abst						{height:12px;}

.container a				{color:#6993c3;}
.container a:hover			{color:#444;}


/* major box */
.container					{font-family:LatoRegular,arial,helvetica;color:#555;}
.container.w				{width:100%;background-color:#fff !important;}
.container.w	ul			{width:100% !important;margin:0px;margin-left:0px !important;padding:40px;}
.container h1				{font-family:Lato700,arial,helvetica;font-size:2.2em;font-weight:normal;color:#6993c3;margin:80px 0px 25px 0px;text-align:center;}
.container h2				{font-family:Lato700,arial,helvetica;font-size:1.6em;font-weight:normal;color:#6993c3;}
.container h3				{font-family:Lato900,arial,helvetica;font-size:1.1em;font-weight:normal;color:#5f85b0;}
.container h4				{font-family:Lato900,arial,helvetica;font-size:0.9em;font-weight:normal;color:#6993c3;}
.container.c				{text-align:center;font-size:1.2em;}
.container.l				{text-align:left;}
.container.pic				{background-color:#5f85b0 !important;margin-bottom:-150px !important;}
.container h1.p				{color:#fff !important;text-shadow: 0px 2px black;}
.container.pic img			{width:100%;height:auto;}

.container table			{width:100%;}
.container table td			{vertical-align:top;padding:8px;}
.container table tr.tit td	{background-color:#000;color:#fff;}
.container table tr			{background-color:#f1f1f1;}
.container table tr.ugr	td	{background-color:#ddd;}



.icon_tel			{display:inline-block;color:#6993c3;font-family:FontAwesome;}
.icon_tel:before	{content:"\f879";}

.icon_inf			{display:inline-block;color:#6993c3;font-family:FontAwesome;}
.icon_inf:before	{content:"\f05a";}






/* Produkt-Konfigurator */
div.prcnfg				{width:100%;display:table;border:1px solid black;}
div.prcnfg div.tr		{display:table-row;}
div.prcnfg div.tr.h		{background-color:#6993c3;color:#fff;font-size:0.8em;}
div.prcnfg div.td		{display:table-cell;vertical-align:top;text-align:left;border-bottom:1px solid #6993c3;padding:3px 3px 3px 8px;font-size:0.9em;}
div.prcnfg div.td.inh	{font-size:0.7em;}

div.prcnfg div.td.inh .prz		{display:inline-block;width:36px;height:36px;background-color:#c3d4e7;color:#444;margin:0px;padding:12px 0px 0px 0px;border-radius:30px;text-align:center;font-size:1em;line-height:1em;font-family:Lato700;font-weight:normal;}
div.prcnfg div.td.inh .prz.gry	{background-color:#eeeeee;color:#999;}
div.prcnfg div.td.inh .prz.nrm	{background-color:#c3d4e7;color:#444;}

div.prcnfg div.td .mob	{display:none;}

div.prcnfg .icon_pls		{display:inline-block;color:#6993c3;font-family:FontAwesome;font-size:1.6em;}
div.prcnfg .icon_pls:before	{content:"\f0fe";}
div.prcnfg .icon_mns		{display:inline-block;color:#6993c3;font-family:FontAwesome;font-size:1.6em;}
div.prcnfg .icon_mns:before	{content:"\f146";}

.btn.minibox		{border:none;padding:0px;}

div.prcnfg .pranz				{display:inline-block;width:27px;height:22px;font-size:0.9em;text-align:center;border:1px solid #fff;padding:0px;color:#222;font-weight:bold;}


#progressBar 		{width:100%;margin:10px 0px 0px 0px;height:45px;background-color:#c3d4e7;}
#progressBar div 	{height:100%;text-align:right;padding: 0 5px;color:#ffffff;line-height: 25px; /* same as #progressBar height if we want text middle aligned */ width:0;background-color:#e8481e;background-repeat:no-repeat;background-position:right;box-sizing:border-box; }
#progressBarTxt 	{width:100%;height:35px;font-size:1.4em;text-align:center;margin-top:-40px;font-family:Lato900;font-weight:normal;color:#ffffff;}








.img-rounded		{border-radius:50%;margin-bottom:10px;}


.container img.toplogo				{width:300px;height:auto;margin-left:-130px;margin-right:15px;-webkit-transition: all 0.6s ease;transition: all 0.6s ease;}


.container.navi 									{padding:5px 0px 0px 0px;margin:auto;}
.container.navi button								{margin-right:10px;}
.container.navi ul.navbar-nav 						{padding-top:5px;}
.container.navi ul.navbar-nav li a					{font-family:Lato700,arial,helvetica;font-weight:normal;font-size:1.1em;line-height:2.3em;color:#6993c3;}
.container.navi ul.navbar-nav li a:hover			{color:#000;}
.container.navi ul.navbar-nav li a.nav-link.active	{text-decoration:none;color:#555;}



.intropic h1				{font-family:Lato900,arial,helvetica;font-size:2.6em;font-weight:normal;color:#fff;-webkit-transition: all 0.6s ease;transition: all 0.6s ease;}
.intropic h3				{font-family:Lato700,arial,helvetica;font-size:1.3em;font-weight:normal;color:#fff;-webkit-transition: all 0.6s ease;transition: all 0.6s ease;}
.intropic					{font-family:Lato700,arial,helvetica;margin:auto;width:1200px;height:730px;background-image:url("../../images/introbildempty.jpg");background-repeat:no-repeat;background-size:100% auto;-webkit-transition: all 0.6s ease;transition: all 0.6s ease;}
.intropic .txtbox			{width:600px;padding:80px 30px 30px 60px;-webkit-transition: all 0.6s ease;transition: all 0.6s ease;}

.intropic .homepic			{font-family:Lato700,arial,helvetica;position:absolute;top:540px;margin-left:-15px;width:475px;height:280px;background-image:url("../../images/homepic.png");background-repeat:no-repeat;background-size:100% auto;-webkit-transition: all 0.6s ease;transition: all 0.6s ease;}
.intropic .feature			{width:165px;height:165px;position:absolute;top:430px;margin-left:305px;border-radius:100px;border:3px solid #fff;background-image:url("../../images/gratisbettschutz.jpg");background-repeat:no-repeat;background-size:100% auto;-webkit-transition: all 0.6s ease;transition: all 0.6s ease;}
.intropic .sparenball		{width:169px;height:169px;position:absolute;top:145px;margin-left:945px;border-radius:100px;border:0px solid #000;background-image:url("../../images/sparenball.png");background-repeat:no-repeat;background-size:100% auto;-webkit-transition: all 0.6s ease;transition: all 0.6s ease;}


.homepic_mobile				{display:none;background-image:url("../../images/homepic.png");background-repeat:no-repeat;background-size:100% auto;}


/* special für "Vorteile" */
.myspecbgp					{margin:-80px 0px -30px 0px;padding:80px 0px 30px 0px;background-image:url("../../images/bg_vorteile.png");background-repeat:no-repeat;background-size:100% auto;background-color:#c3d4e7;}
.myspecbgp h2				{font-size:1.2em;}





/* signs */
.container.c .row.signs			{width:600px;margin:auto;color:#6993c3;font-weight:bold;line-height:1.3em;}
.container.c .row.signs img		{width:125px;margin-bottom:15px;}
.container.c ul.task			{width:600px;text-align:left;margin-left:170px;color:#6993c3;font-weight:bold;list-style:none;}
.container.c ul.task li			{text-indent: -1.5em;line-height:1.3em;margin-bottom:10px;}
.container.c ul.task li:before 	{font-family:FontAwesome;content:"\f00c";padding-right:10px;}




/* faq */
.accordion.faq								{border:none !important;margin:40px 0px 0px 0px;}
.accordion.faq .accordion-item				{border:none !important;margin:20px 0px 0px 0px;}
.accordion.faq .accordion-button			{font-size:0.7em;color:#6993c3;background-color:#f2f2f2;}
.accordion.faq .accordion-body				{text-align:left;}
.accordion.faq .accordion-body ul			{margin-top:12px;-webkit-transition: all 0.6s ease;transition: all 0.6s ease;}
		
.accordion.faq .accordion-button:focus 	{font-size:0.7em;color:#6993c3;background-color:#f2f2f2;z-index:3;border-color:#FFF !important;outline:0;box-shadow: 0 0 0 .25rem #FFF !important; }
.accordion.faq .accordion-button:hover	{background-color:#6993c3;color:#FFF;-webkit-transition: all 0.3s ease;transition: all 0.3s ease;}
.accordion.faq .accordion-button:not(.collapsed) {color:#fff  !important;background-color:#6993c3 !important; }
.accordion.faq .accordion-button {
	--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='green'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}






/* special für "Bestell-Auswahl" */
.formaw					{margin:-80px 0px -30px 0px;padding:80px 0px 30px 0px;background-color:#c3d4e7;}
.formaw .aktion			{width:70%;margin:auto;margin-bottom:45px;font-size:0.9em;text-align:left;}
.formaw .aktion img		{float:left;width:145px;height:auto;margin:0px 20px 20px 0px;}

.formaw	.col .pbox		{width:100%;min-width:240px;margin:0px 0px 20px 0px;padding:40px 0px 30px 0px;font-size:0.9em;background-color:#fff;text-align:center;border-radius:10px;-webkit-box-shadow: 1px 2px 1px 1px rgba(0,0,0,0.13);-moz-box-shadow: 1px 2px 1px 1px rgba(0,0,0,0.13);box-shadow: 1px 2px 1px 1px rgba(0,0,0,0.13);}
.formaw	.col .pbox img	{margin:0px 0px 20px 0px;}

.circle {display:inline-block;margin-bottom:20px;border-radius:50%;width:55px;height:55px;padding:8px;background:#fff;border:3px solid #6993c3;color:#6993c3;text-align:center;font-family:Lato700,arial,helvetica;font-size:30px;line-height:30px; }







/* Bestell-Formular --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------   */

h1.best			{margin-bottom:0px;}


.brdcr			{width:100%;text-align:left;border-bottom:2px solid #5f85b0;margin-bottom:10px;}
.brdcr h3		{color:#6993c3;}
.brdcr span		{float:right;font-size:0.7em;color:#333;background-color:#fadad2;border-radius:6px;padding:3px 8px 3px 8px;}

.boxaw			{width:100%;text-align:left;padding:10px;margin:auto;border:0px solid #ff0000;}
.boxaw .row		{border-left:10px solid #5f85b0;border-radius:6px;margin-bottom:5px;}
.boxaw .row.act	{background-color:#fadad2;} /* background-color:#c3d4e7; */
.boxaw img		{width:115px;height:auto;}
.boxaw .mcol	{font-size:0.8em;padding:8px 0px 10px 10px;}
.boxaw .mcol.x	{width:100px;padding-top:20px;}
.boxaw .mcol.b	{width:140px;}
.boxaw .mcol.t	{width:240px;}

.betaw						{width:100%;text-align:left;padding:20px 10px 10px 20px;margin:auto;background-color:#fadad2;border-radius:6px;border:0px solid #ff0000;}
.betaw.off					{background-color:#c3d4e7;}
.betaw img					{width:320px;height:auto;}
.betaw .col					{font-size:0.8em;}
.betaw .btbox				{font-size:0.8em;}
.betaw .btbox .anz			{margin-top:10px;}
.betaw .form-check-input	{margin-bottom:10px;}


.container.form 						{text-align:left;}
.container.form .col					{font-size:0.8em;}
.container.form .col.err				{background-color:#fadad2;padding:10px;}
.container.form .form-control			{margin:0px 15px 15px 0px;background-color:#E9ECEF;}
.container.form .form-control.sm		{max-width:120px;}
.container.form .form-control.br		{width:100% !important;}
.container.form .form-control:disabled	{font-style:italic;}
.container.form .hwbox					{padding:20px;margin-top:10px;background-color:#E1E9F3;font-size:0.9em;}
.container.form .col.bx					{max-width:32px;}

/* Unterschriften-Feld */
.container.form .signature					{width:477px;}
.container.form .signature .sign-pad		{cursor:url('../../include/css/pen.cur'), auto;}
.container.form .signature .sig.sigWrapper	{height:auto;}
.container.form .signature .icon			{width:25px;float:right;}







/* Modal */
.modal	h4	{font-family:Lato900,arial,helvetica;font-size:1.1em;font-weight:normal;color:#6993c3;}
.modal b	{color:#666;}








/* Back to top button  transition:background 0.5s ease-in-out; */
.back-to-top 			{display:none;width:60px;height:60px;text-align:center;text-decoration:none;position:fixed;bottom:50px;right:0px;float:right;background-color:#6993c3;border-radius:8px 0px 0px 8px;}
.back-to-top:after		{font-family:FontAwesome;content:"\f062";color:#dae8f0;font-size:22px;line-height:57px;}
.back-to-top:focus 		{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);opacity: 0.6;}
.back-to-top:hover 		{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);opacity: 0.6;}




/* Telefon-Butt: newsletter-butt */
.nl-butt				{width:200px;height:auto;font-family:Lato900,arial,helvetica;font-weight:normal;color:#fff;border:1px solid #6993c3;background-color:#6993c3;position:fixed;bottom:120px;right:0px;float:right;-z-index:100;padding:5px 0px 6px 0px;border-radius:8px 0px 0px 8px;text-align:center;}
.nl-butt b				{font-size:1.4em;line-height:1em;}
.nl-butt small			{font-size:0.7em;line-height:0.7em;}




/* footer */
.myfooter						{width:100%;background-color:#5f85b0;margin-top:30px;}
.myfooter .col-12.col-md		{color:#f2f2f2 !important;}
.myfooter .link-secondary		{color:#fff !important;}
.myfooter .link-secondary:hover	{color:#000 !important;}
.myfooter .container.c			{color:#f2f2f2;font-size:1em;margin-top:25px;}
.myfooter .abst					{height:8px;}





/* IPAD */
@media (min-width: 768px) and (max-width: 1199px) {
	
	body								{border:0px solid #ff0000;}
	
	.container img.toplogo				{width:250px;height:auto;margin-left:0px;;margin-right:0px;}
	.container.navi						{width:100%;}
	.container.navi ul.navbar-nav li a	{font-size:1em;line-height:1em;}
	
	.intropic							{margin:auto;width:900px;height:548px;}
	.intropic h1						{font-size:2em;}
	.intropic h3						{font-size:1.1em;}
	.intropic .txtbox					{padding:40px 30px 30px 40px;}	
	
	.container h1				{font-size:2em;}
	.container h2				{font-size:1.2em;}
	
	.container .checkoutbild img		{width:100%;height:auto;}
	
	.intropic .homepic			{top:400px;margin-left:-15px;width:350px;}
	.intropic .feature			{width:145px;height:145px;position:absolute;top:340px;margin-left:305px;}
	.intropic .sparenball		{width:125px;height:125px;position:absolute;top:120px;margin-left:705px;}
	
	
	
}




/* kleiner als IPAD */
@media (min-width: 320px) and (max-width: 767px) {

	body								{border:0px solid #ff00ff;}

	.container img.toplogo				{width:150px;height:auto;margin-left:10px;}
	.intropic							{margin:auto;width:100%;height:auto;}
	
	.intropic							{margin:auto;width:100%;height:auto;}
	.intropic h1						{font-size:1.4em;}
	.intropic h3						{font-size:1em;}
	.intropic .txtbox					{width:275px;height:250px;padding:10px 10px 10px 10px;}
	
	.container h1				{font-size:1.5em;}
	.container h2				{font-size:1.1em;}
	
	.container.c .row.signs		{width:100%;}
	.container.c .row.signs img	{width:100px;margin-top:15px;}
	.container.c ul.task		{width:100%;margin-left:10px;}
	.container.c .col-6			{width:100%;margin-bottom:15px;}
	
	.nl-butt					{display:none;}
	
	.accordion.faq .accordion-button			{font-size:0.9em;line-height:1.2em;}
	
	
	.formaw .aktion				{text-align:center;border:0px solid #ff00ff;}
	.formaw .aktion img			{float:none;width:170px;}
	
	
	.boxaw .mcol.t		{margin-left:100px;}
	
	
	.container.form .form-control		{width:320px;}
	.container.form .form-control.br	{width:320px !important;}
	
	.container.form .signature			{width:100%;}
	.container.form canvas				{width:100% !important;}
	
	.container .checkoutbild img		{width:100%;height:auto;}
	.container .checkoutpdfdl img		{width:320px;height:auto;}
	
	@media screen and (orientation: landscape) {
		.intropic .txtbox					{height:450px;}
		
		.container.form .signature			{width:500px;}
		.container.form canvas				{width:500px;height:200px !important;}
	}
	
	
	.intropic .homepic			{display:none;top:400px;margin-left:-15px;width:350px;}
	.intropic .feature			{width:105px;height:105px;position:absolute;top:200px;right:25px;margin-left:0px;}
	.intropic .sparenball		{width:95px;height:95px;position:absolute;top:350px;right:25px;margin-left:0px;}
	
	.homepic_mobile				{display:block;margin:auto;width:300px;height:177px;margin-bottom:25px;margin-top:-45px;}
		
	
	
	div.prcnfg div.td.inh	{display:none;}
	div.prcnfg div.td .mob	{display:block;font-size:0.8em;}
	
	.progressbox			{width:100%;position:fixed;bottom:0px;background-color:#ffffff;}
	
	
}

/* Phone  */
@media (min-width: 320px) and (max-width: 360px) {

}



@media (prefers-color-scheme: dark) {
  /* CSS Code wenn Dark Mode aktiv */ 
  	 body 			{background-color:#fff !important;}
	 .container 	{background-color:#fff !important;}
	 
	 .navbar-toggler		{background-color: #5f85b0 !important;}
	 .navbar-toggler-icon 	{background-color: #5f85b0;}
	 .btn-close				{background-color: #5f85b0 !important;}
	 
	 .py-4 					{background-color:#5f85b0 !important;}
	 .myfooter	.container 	{background-color:#5f85b0 !important;}
	 
	 .container.form .form-control	{background-color:#000 !important;}

}