.svg_imagemap {
position: relative;
transition: all .3s;
}
.svg_imagemap>.textfragment {
display: none;
}
.svg_imagemap .col-12 {
position: static;
}
@media (min-width: 992px) {
.svg_imagemap .elementlist,
.svg_imagemap .col-12>div,
.svg_imagemap .elementlist.compact>div>* {
margin-bottom: 0;
}
}
.svg_imagemap svg{
max-width: 100%;
margin-bottom: 2rem !important;
transition: all .3s;
}
.svg_imagemap svg #labels,
.svg_imagemap svg #labels_de,
.svg_imagemap svg #labels_en,
.svg_imagemap svg #labels_zh,
.svg_imagemap svg #labels_dt_de,
.svg_imagemap svg #labels_dt_en,
.svg_imagemap svg #labels_dt_zh,
.svg_imagemap svg #labels_mobile,
.svg_imagemap svg #legend,
.svg_imagemap svg #circuit{
pointer-events: none;
}
.svg_imagemap svg #areas g rect{
cursor: pointer;
fill: #ccdaef;
transition: all .3s;
}
.svg_imagemap svg:hover #areas g rect{
_fill: #b3c8e7;
}
.svg_imagemap svg #areas g:hover rect,
.svg_imagemap svg #areas g.active rect{
fill: #99b5de;
}
.svg_imagemap svg #areas g:hover rect{
fill: #6690ce;
}
.svg_imagemap:not(.active) svg:not(:hover) #areas rect{
animation: pulse 3s infinite;
}
/*@keyframes pulse {
0% {fill: #ccdaef;}
70% {fill: #b3c8e7;}
100% {fill: #ccdaef;}
}*/
@keyframes pulse {
0% {fill: #ccdaef;}
30% {fill: #ccdaef;}
40% {fill: #b3c8e7;}
50% {fill: #ccdaef;}
60% {fill: #b3c8e7;}
70% {fill: #ccdaef;}
}
.svg_imagemap svg #labels_de,
.svg_imagemap svg #labels_en,
.svg_imagemap svg #labels_zh,
.svg_imagemap svg #labels_dt_de,
.svg_imagemap svg #labels_dt_en,
.svg_imagemap svg #labels_dt_zh{
display: none;
}
html[lang="de"] .svg_imagemap svg #labels_de,
html[lang="en"] .svg_imagemap svg #labels_en,
html[lang="zh"] .svg_imagemap svg #labels_zh{
display: block;
}
.svg_content{
_counter-reset: section;
}
.svg_imagemap_topic{
_counter-increment: section;
}
.svg_imagemap_topic > .elementlist > div:first-child h2:before {
_content: counter(section);
content: attr(data-index);
display: inline-block;
width: 3rem;
height: 3rem;
line-height: 3rem;
text-align: center;
border-radius: 50%;
background: #eee;
}
@media (min-width: 992px) {
.svg_imagemap svg #labels_mobile,
.svg_imagemap_topic > .elementlist > div:first-child h2:before {
display: none;
}
html[lang="de"] .svg_imagemap svg #labels_dt_de,
html[lang="en"] .svg_imagemap svg #labels_dt_en,
html[lang="zh"] .svg_imagemap svg #labels_dt_zh{
display: block;
}
}
.svg_content {
margin-bottom: 1rem !important;
}
.svg_content>.textfragment {
pointer-events: none;
text-align: center;
max-height: 3rem;
transition: all .3s;
}
.svg_content>.textfragment.hidden {
opacity: 0;
max-height: 0;
}
.svg_content .elementlist {
_margin-bottom: 0;
}
.svg_content>.elementlist>div {
height: 0;
overflow: hidden;
/* HEIGHT 0 INSTEAD OF HIDDEN, SO THAT IMAGE INITIALIZATION WORKS */
}
.svg_imagemap_topic>.elementlist>div:first-child>div {}
.svg_imagemap_topic>.elementlist>div>.textfragment {
display: none;
}
@media (min-width: 1200px) {
.svg_imagemap.active svg{
max-width: 74%;
}
.svg_imagemap_topic>.elementlist>div>.textfragment {
position: absolute;
top: 0;
right: 0;
z-index: 9;
max-width: 25%;
background: #fff;
box-shadow: 0 0 5px rgb(0 0 0 / 30%);
padding: 15px;
}
.svg_imagemap_topic>.elementlist>div>.textfragment h2{
font-size: 2.1rem;
}
.svg_imagemap_topic>.elementlist>div>.textfragment .richtext p{
font-size: 1.3rem;
}
}
.svg_imagemap .sr_prodlist {
transition: all .3s;
}
.svg_imagemap.active .sr_prodlist {}
.svg_imagemap .sr_prodlist div {}
@media (min-width: 992px) {
.svg_imagemap .sr_prodlist>.elementlist {
display: flex;
flex-wrap: nowrap;
}
.svg_imagemap .sr_prodlist>.elementlist>div {
flex: 1 1 auto;
max-width: 33%;
}
.svg_imagemap .sr_prodlist>.elementlist .teaser {
display: block;
height: 100%;
_margin-bottom: 0;
}
.svg_imagemap .sr_prodlist>.elementlist .teaser .image-column,
.svg_imagemap .sr_prodlist>.elementlist .teaser .text-column {
max-width: none;
}
}
.btn-block{
white-space: normal;
}