@font-face {
    /* font-family: 'Work Sans';
    font-style: normal;
    font-weight: 400;
    src: url('/build/fonts/work-sans/work-sans-v8-latin-regular.eot');
    src: local(''),
    url('/build/fonts/work-sans/work-sans-v8-latin-regular.eot?#iefix') format('embedded-opentype'),
    url('/build/fonts/work-sans/work-sans-v8-latin-regular.woff2') format('woff2'), 
    url('/build/fonts/work-sans/work-sans-v8-latin-regular.woff') format('woff'), 
    url('/build/fonts/work-sans/work-sans-v8-latin-regular.ttf') format('truetype'),
    url('/build/fonts/work-sans/work-sans-v8-latin-regular.svg#WorkSans') format('svg');
	*/
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300;
	font-stretch: 100%;
    url('/build/fonts/open_sans/OpenSans-Regular.ttf') format('truetype'), /* Super Modern Browsers */
    font-display: swap;
}
body {font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";}

p, li, a{font-size: 1.1rem;}
h1.text-center{padding-top: 1.1rem;}
h2 {margin-bottom: 1rem; margin-top: 1rem;}
h3 {margin-bottom: 1rem; margin-top: 1.4rem;}

/* END Font and Size */

/* Header inkl. Navigation */
.navbar{border-bottom: 1px solid #ccc; padding: 0; height: 100%;}
.navbar .container-fluid {padding: 0; background-color: #fde9ff;}
.nav-link{color: #000!important; padding-right: 0.8rem; padding-left: 0.8rem;}
.leftside-brand{z-index: 2000; padding-right: 1rem; padding-left: 1rem;}
.show{background-color: #f8f9fa; border-left: 1px solid #ccc;}
.dropdown-menu .row {flex-wrap: nowrap;}
.dropdown-item:hover{background-color: #fde9ff;}
.navbar-brand p {font-size: 0.8rem; margin-bottom: 0;}
.navbar-toggler{border-color: rgb(62, 61, 62)!important;}
.aktiv{color: #e97dd8!important;}
.erstinfo{color: black;}
.erstinfo:hover{color: #ABABAB;}
#eKomiWidget_default{position: absolute; top:220px; right: 60px; width: 200px; height: 200px; z-index: 10;}

/* Move down content because we have a fixed navbar that is 3.5rem tall */
.container-fluid {padding: 6rem 0 0 0;}
.active {color: #000; text-decoration: none; background-color: #e97dd8;}
.aktiv{color: #e97dd8!important; background-color: #fff;}

.customerservice {background-color: #b5b3b3; padding: 0 0;}
.customerservice a, .customerservice i{color: #fff;}
.customerservice a:hover,.customerservice i:hover{color: #000!important;}
/*.customerservice .cell a, .customerservice .cell i{color: #fff!important;}
.customerservice .cell a:hover, .customerservice .cell i:hover{color: #e5e3e5!important;}
.customerservice .kontakt a, .customerservice .kontakt i{color: #fff;}
.customerservice .kontakt a:hover, .customerservice .kontakt i:hover{color: #e5e3e5!important;}*/
.customerservice p{color: #fff;}
.customerservice_2 {display: none;}
.customerservice_2{background-color: #b5b3b3;}
.customerservice_2 a{color: #fff;}
.customerservice_2 i{color: #fff;}

/*start*/
.mobil {display: none}
.startbild {width: 100%; height: 400px;}
.index-start .card h5{color: #969696;}
.index-start .card h3{font-size: 1.4rem;}
.bgrtrans {background: rgba(192,192,192,0.4); position: absolute; display: inline-block; right: 18%; left: 18%; top: 137px; padding: 2rem;}
.bgrtrans p {margin: 0; line-height: 1.3; padding-left: 2rem;}
.bgrtrans i {margin-left: 1rem; color: green; margin-top: 3px;}
.selectbutton .mdi{display: block;}
#photovoltaikversicherung h3 {font-size: 1.4rem}

/* button Tarifrechner klein*/
.rounded-pill{margin-left: 5px;}

/*Farben*/
.bc1{background-color: #F5F5F5;}
.bc2{background-color: #ccc;}

/*Content */
.inhalt h3 {margin-top: .8rem;}
.todo .list-group-item{color: #878789; background-color: #fde9ff;}
.todo .list-group-item-light.list-group-item-action:focus, .todo .list-group-item-light.list-group-item-action:hover {color: #878789; background-color: #dadada;}
.btn-light {background-color: #fde9ff; border-color: #ccc;}
.btn{white-space: normal;}
.textcontent{padding: 1rem;}

/* Seitenspezifische Einstellungen */
.index-start .card-header{background-color: #fff; min-height: 90px;}
#bedingungen #inter, #bedingungen #condor, #bedingungen #zurich, #bedingungen #ergo, #bedingungen #zurich,#bedingungen #vhv{border: 2px solid #ccc;}
#elektronikversicherung_vergleich_wrapper{padding-top: 1rem;}
#elektronikversicherung_vergleich_filter{width: 33%; float: right;}
div.dataTables_info{padding-bottom: 0.85em;}

.social{display: none;}

/*accordion*/
.accordion{--bs-box-shadow: none; --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-btn-bg: #fff; --bs-accordion-active-bg: #FDE9FF; --bs-accordion-active-color: #000; --bs-accordion-bg: #fff;}
.accordion-button:not(.collapsed) {box-shadow: none; --bs-accordion-active-bg: #FDE9FF;}
.accordion-header{margin-top: 0!important;}
.accordion-button{border-top: 1px solid #DEE2E6;text-decoration: none; 	font-size: 1.1rem;}
.accordion-button:hover{border-top: 1px solid #DEE2E6; background-color: #DEE2E6; color: #000;}

/*video*/
.ratio {width: 75%;}

/*icon-font*/
header a:hover .mdi{color:#ccc;}
.mdi{color: #818182;}
a:hover .mdi{color:#e97dd8;}

/* formulare */
legend {margin-left: 1rem; margin-bottom: 1rem;}
form .btn-light{border: 1px solid #ccc;}
.googlemap {width: 100%; height: 400px;}
.mail_schutz {display:none !important;}

/* lexikon */
.begriff h1 {margin: 45px 0 10px 0;}
.begriff h2 {margin: 15px 0 10px 0;}
.begriff h3 {margin: 10px 0 10px 0;}
.begriff p {text-align: left!important; margin: 0; padding-bottom: 6px;}
.begriff .aenderung {font-size: 0.9em; margin-left: 280px!important;}
.begriff br {display: none;}
.begriff .small {margin: 1em 0 1em 0;}

/*kundenmeinungen
.tm {background-image: url("/images/bq.gif");}
.tm {background-position: top left, right bottom;}
.tm {background-repeat: no-repeat;}
.tm {overflow: hidden;}
.tm {background-color: #fff;}
*/

.btn .mdi:before {top: 1px!important;}

#verhalten-im-schadensfall a {font-size: 1rem;}
#verhalten-im-schadensfall h4 {font-size: 1.2rem;}

footer p a{color: #000; text-decoration: none;}
.note{font-size: 0.9rem;}
.note a{font-size: 0.9rem;}

/* Nach oben Button */
#btn-to-top {position: fixed;bottom: 60px;right: 40px; display: none; background-color: #fde9ff;border: 1px solid #000000;color: black;}

@media screen and (min-width: 1300px) and (max-width: 1600px)
{
.nav-link{font-size: 1rem;}
.carousel{top: 6.5rem;}
.carousel-caption {bottom: 15px;}
.carousel-caption img{display: none;}
.rightside-brand{display: none!important;}
.navbar-toggler{margin-right: 20px;}
.bgrtrans{top: 145px;}
.bgrtrans h1 {font-size: 2em;}
.bgrtrans p {font-size: 1.1em; padding-left: 10px;}
#eKomiWidget_default{top: 240px; right: 10px;}
.begriff h2 {margin: 50px 50px 10px 50px;}
.begriff p {text-align: left!important; margin: 0 50px 0 50px; padding-bottom: 6px;}
}

@media screen and (min-width: 1080px) and (max-width: 1299px) 
{
.nav-link{font-size: 1rem;}
.carousel{top: 6.5rem;}
.carousel-caption {bottom: 15px;}
.carousel-caption img{display: none;}
.rightside-brand{display: none!important;}
.navbar-toggler{margin-right: 20px;}
.bgrtrans{top: 160px; left: 14%; right: 14%;}
.bgrtrans h1 {font-size: 1.6em;}
.bgrtrans p {font-size: 1em; padding-left: 0;}
.bgrtrans p i {margin-left: 5px;}
#eKomiWidget_default{top: 240px; width: 195px; right: 5px;}
.selectbutton img{padding-right: 10px;}
.begriff h2 {margin: 50px 35px 10px 35px;}
.begriff p {text-align: left!important; margin: 0 35px 0 35px; padding-bottom: 6px;}
}

@media screen and (min-width: 997px) and (max-width: 1079px) 
{
.nav-link{font-size: 1rem;}
.carousel{top: 6.5rem;}
.carousel-caption {bottom: 15px;}
.carousel-caption img{display: none;}
.rightside-brand{display: none!important;}
.navbar-toggler{margin-right: 20px;}
.bgrtrans{top: 142px; left: 14%; right: 14%;}
.bgrtrans h1 {font-size: 1.6em;}
.bgrtrans p {font-size: 1em; padding-left: 0;}
.bgrtrans p i {margin-left: 5px;}
#eKomiWidget_default{width: 190px; right: 0;}
.selectbutton img{padding-right: 10px;}
.begriff h2 {margin: 50px 30px 10px 30px;}
.begriff p {text-align: left!important; margin: 0 30px 0 30px; padding-bottom: 6px;}
}

@media screen and (min-width: 768px) and (max-width: 996px) 
{
.container-fluid{margin-left: 0; margin-right: 0; padding-left: 0;padding-right: 0;}	
.nav-link{font-size: 1rem;}
.dropdown-menu hr {margin-top: 0; margin-bottom: 0;}
.carousel{top: 6.5rem;}
.carousel-caption {bottom: 15px;}
.carousel-caption img{display: none;}
.rightside-brand{display: none!important;}
.navbar-toggler{margin-right: 120px;}
.bgrtrans{top: 130px; left: 3%; right: 3%;}
.bgrtrans h1 {font-size: 1.2em;}
.bgrtrans p {line-height: 1; font-size: 13px; padding-left: 0;}
.bgrtrans p i {margin-left: 5px;}
#eKomiWidget_default {display: none!important;}
.selectbutton img{padding-right: 10px;}
.angebot_photovoltaikversicherung h3{font-size: 1.3rem;}
.begriff h2 {margin: 40px 20px 10px 20px;}
.begriff p {text-align: left!important; margin: 0 20px 0 20px; padding-bottom: 6px;}
}

@media screen and (min-width: 400px) and (max-width: 767px)
{
.logo img {width: 80%;}
.navbar {padding: 0;}
.dropdown-menu{padding: 0!important;}
.dropdown-menu .row {flex-wrap: wrap;}
.dropdown-menu .row div{margin-bottom: 0!important;}
.dropdown-menu .nav-link {margin: 0; padding: 4px 12px 4px 12px;}
.navbar-brand {margin-right: 0!important;}
.navbar-brand img{margin-left:0}
.navbar-toggler{margin-right: 3px;}
.bgrtrans{top: 123px; left: 5%; right: 5%;}
.bgrtrans h1 {font-size: 1em;}
.bgrtrans p {display: none!important;}
.startbild{height: 180px;}
.carousel-caption img{display: none;}
.customerservice {display: none;}
.customerservice_2{display: block; padding: 0;}
.customerservice_2 a{font-size: 0.9em;}
.customerservice_2 .col-6{padding: 0 6px;}
#eKomiWidget_default {display: none!important;}
.begriff h2 {margin: 30px 8px 10px 8px;}
.begriff p {text-align: left!important; margin: 0 8px 0 8px; padding-bottom: 6px;}

}

@media screen and (min-width: 300px) and (max-width: 399px)
{
.container-fluid {padding: 5.5rem 0 0 0;}
.logo img {width: 80%;}
.company {display: none;}
.navbar {padding: 0;}
.dropdown-menu{padding: 0!important;}
.dropdown-menu .row {flex-wrap: wrap;}
.dropdown-menu .row div{margin-bottom: 0!important;}
.dropdown-menu .nav-link {margin: 0; padding: 4px 12px 4px 12px;}
.navbar-brand {margin-right: 0!important;}
.navbar-brand img{margin-left:0}
.navbar-toggler{margin-right: 3px;}
.bgrtrans{display:none;}
.startbild{display: none;}
.carousel-caption img{display: none;}
.customerservice {display: none;}
.customerservice_2{display: block; padding: 0;}
.customerservice_2 a{font-size: 0.9em;}
.customerservice_2 .col-6{padding: 0 6px;}
#eKomiWidget_default {display: none!important;}
.begriff h2 {margin: 40px 5px 10px 5px;}
.begriff p {text-align: left!important; margin: 0 5px 0 5px; padding-bottom: 6px;}
}

/* mdi Icons Custom */
.auflistung p .mdi::before {
    position: relative;
    top: 3px;
    padding-right: 14px;
}
.mdi::before {
    font-size: 24px;
    line-height: 14px;
}
.btn .mdi::before {
    position: relative;
    top: 4px;
}
.btn-xs .mdi::before {
    font-size: 18px;
    top: 3px;
}
.btn-sm .mdi::before {
    font-size: 18px;
    top: 3px;
}
.customerservice .mdi::before {
    position: relative;
    top: 2px;
    padding-right: 3px;
}
.dropdown-menu .mdi {
    width: 18px;
}
.dropdown-menu .mdi::before {
    position: relative;
    top: 4px;
    left: -8px;
}
.nav .mdi::before {
    position: relative;
    top: 4px;
}
.navbar .navbar-toggle .mdi::before {
    position: relative;
    top: 4px;
    color: #FFF;
}
.breadcrumb .mdi::before {
    position: relative;
    top: 4px;
}
.breadcrumb a:hover {
    text-decoration: none;
}
.breadcrumb a:hover span {
    text-decoration: underline;
}
.alert .mdi::before {
    position: relative;
    top: 4px;
    margin-right: 2px;
}
.input-group-addon .mdi::before {
    position: relative;
    top: 3px;
}
.navbar-brand .mdi::before {
    position: relative;
    top: 2px;
    margin-right: 2px;
}
.list-group-item .mdi::before {
    position: relative;
    top: 3px;
    left: -3px
}
.mdi-check{ position: relative; top: 4px;}
/* END mdi Icons Custom */