/*********** totale **********************/

g.totale.flaeche {
    fill: none;
}

g.totale.flaeche .outline {
    stroke: white;
    stroke-width: 2px;
    stroke-opacity: 0.8;
    stroke-linejoin: round;
}

g.totale.flaeche .flaeche {
    fill: white;
    opacity: 0;
    transition: opacity 0.3s;
}

g.totale.flaeche .flaeche:hover {
    opacity: 0.4;
}

g.totale.flaeche > * {
    fill:rgba(255,255,255,0.5);
}

g.totale.outline > * {
    fill: transparent;
    stroke: #fff;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
}
body.totale g.flaeche:hover .flaeche{
    fill: #fff;
}


/*********** zoom ***********/

body.zoom g.flaeche {
    opacity: 1;
    visibility: visible;
    stroke: rgb(239,239,239);
    transition: fill 0.3s, stroke 0.3s, opacity 0.3s;
    stroke-width: 0.5px;
}

body.zoom g.hidden {
    opacity: 0;
    visibility: hidden;
    transition: visibility 0s 0.3s, opacity 0.3s;
}
body.zoom g .erschliessung {
    transition: fill 0.3s;
}
body.zoom g.disabled .erschliessung {
    fill: black;
}


body.zoom .hotspot {
}



.erschliessung {
    fill:#fff;
    stroke:none;
    fill-opacity: 0.4;
}

.A1 .erschliessung,
.A2 .erschliessung,
.A5 .erschliessung,
.A6 .erschliessung {
    fill: #000;
}

.extrusion {
    fill:rgb(239,239,239);
    stroke: none;
    transition: fill 0.3s;
}

body svg g.A1,
body svg g.A2,
body svg g.A3,
body svg g.A4,
body svg g.A5,
body svg g.A6 {
    transition: opacity 0.5s ease;
    opacity: 1;
}

body.hover svg g,
body.front.hoverBack svg g,
body.back.hoverFront svg g
{
    transition: opacity 0.5s ease;
    opacity: 1;
}

body.front.hoverBack div.zoom svg g.A1 .flaeche,
body.front.hoverBack div.zoom svg g.A2 .flaeche,
body.front.hoverBack div.zoom svg g.A5 .flaeche,
body.front.hoverBack div.zoom svg g.A6 .flaeche,

body.back.hoverFront div.zoom svg g.A3 .flaeche,
body.back.hoverFront div.zoom svg g.A4 .flaeche
{
    stroke: rgb(239,239,239);
}

body.front.hoverBack div.zoom svg g.A1 .extrusion,
body.front.hoverBack div.zoom svg g.A2 .extrusion,
body.front.hoverBack div.zoom svg g.A5 .extrusion,
body.front.hoverBack div.zoom svg g.A6 .extrusion,

body.back.hoverFront div.zoom svg g.A3 .extrusion,
body.back.hoverFront div.zoom svg g.A4 .extrusion
{
    fill: rgb(239,239,239);
}

/***/

body.zoom.flaeche.A1 svg g.A1 g.detail,
body.zoom.flaeche.A2 svg g.A2 g.detail,
body.zoom.flaeche.A3 svg g.A3 g.detail,
body.zoom.flaeche.A4 svg g.A4 g.detail,
body.zoom.flaeche.A5 svg g.A5 g.detail,
body.zoom.flaeche.A6 svg g.A6 g.detail {
    visibility: visible; /*** Einschalten der Ebenen ***/
    opacity: 1;
    transition: opacity 0.5s ease;
}

/*********** detail ***********/
body.animation g.detail {
    display: none;
}

body.detail  g.detail { visibility: hidden; }

g.detail > *{
    stroke: white;
    stroke-width: 0.1px;
    stroke-linejoin: round;
    stroke-linecap: round;
    fill:transparent; 
}

body.detail .flaeche {
    stroke-width: 0.1px;
}

body.detail g.flaeche:hover .flaeche,
body.front.detail.hoverBack div.zoom svg g.A1 .extrusion, 
body.front.detail.hoverBack div.zoom svg g.A2 .extrusion, 
body.front.detail.hoverBack div.zoom svg g.A5 .extrusion, 
body.front.detail.hoverBack div.zoom svg g.A6 .extrusion,

body.front.detail.hoverBack div.zoom svg g.A1 .flaeche, 
body.front.detail.hoverBack div.zoom svg g.A2 .flaeche,
body.front.detail.hoverBack div.zoom svg g.A5 .flaeche, 
body.front.detail.hoverBack div.zoom svg g.A6 .flaeche,

body.back.detail.hoverFront div.zoom svg g.A3 .extrusion, 
body.back.detail.hoverFront div.zoom svg g.A4 .extrusion,

body.back.detail.hoverFront div.zoom svg g.A3 .flaeche, 
body.back.detail.hoverFront div.zoom svg g.A4 .flaeche 
{
    fill : inherit;
    stroke: inherit;
}
body.zoom div.zoom svg g g.detail {
    visibility: hidden;
    opacity: 0;
}
body.front.detail.L100 div.front svg g.L100 g.detail,
body.front.detail.L101 div.front svg g.L101 g.detail,
body.front.detail.L102 div.front svg g.L102 g.detail,
body.front.detail.L103 div.front svg g.L103 g.detail,
body.front.detail.L104 div.front svg g.L104 g.detail,
body.front.detail.L105 div.front svg g.L105 g.detail,
body.front.detail.L106 div.front svg g.L106 g.detail,

body.back.detail.L100 div.back svg g.L100 g.detail,
body.back.detail.L101 div.back svg g.L101 g.detail,
body.back.detail.L102 div.back svg g.L102 g.detail,
body.back.detail.L103 div.back svg g.L103 g.detail,
body.back.detail.L104 div.back svg g.L104 g.detail,
body.back.detail.L105 div.back svg g.L105 g.detail,
body.back.detail.L106 div.back svg g.L106 g.detail
{
    opacity: 0.5;
    visibility: visible;
}

body.detail svg g {
    opacity: 1;
    transition: all 0.5s ease;
    transition-delay: 0.5s;
}

body.detail g.image image,
body.detail .totale  svg {
    visibility: hidden !important;
    display:none;
}

body.detail div.totale img {
    visibility: hidden;
}
/********************** Abschalten der darüberliegenden Flächen **********************/
/*** EG ***/
body.detail.L100 svg g.L101.flaeche, 
body.detail.L100 svg g.L102.flaeche, 
body.detail.L100 svg g.L103.flaeche, 
body.detail.L100 svg g.L104.flaeche,
body.detail.L100 svg g.L105.flaeche,
body.detail.L100 svg g.L106.flaeche,
/*** OG1 ***/
body.detail.L101 svg g.L102.flaeche, 
body.detail.L101 svg g.L103.flaeche, 
body.detail.L101 svg g.L104.flaeche,
body.detail.L101 svg g.L105.flaeche,
body.detail.L101 svg g.L106.flaeche,
/*** OG2 ***/
body.detail.L102 svg g.L103.flaeche, 
body.detail.L102 svg g.L104.flaeche,
body.detail.L102 svg g.L105.flaeche,
body.detail.L102 svg g.L106.flaeche,
/*** OG3 ***/
body.detail.L103 svg g.L104.flaeche,
body.detail.L103 svg g.L105.flaeche,
body.detail.L103 svg g.L106.flaeche,
/*** OG4 ***/
body.detail.L104 svg g.L105.flaeche,
body.detail.L104 svg g.L106.flaeche,
/*** OG5 ***/
body.detail.L105 svg g.L106.flaeche {
    visibility: hidden;
    opacity: 0;
}
/********************** Opacity der darunterliegenden Flächen **********************/
/*** L106 ***/
body.detail.L106 svg g.L105 { opacity: 0.6;}
body.detail.L106 svg g.L104 { opacity: 0.5;}
body.detail.L106 svg g.L103 { opacity: 0.4;}
body.detail.L106 svg g.L102 {opacity: 0.3;}
body.detail.L106 svg g.L101 { opacity: 0.2;}
body.detail.L106 svg g.L100 {opacity: 0.1;}

/*** L105 ***/
body.detail.L105 svg g.L104 { opacity: 0.6;}
body.detail.L105 svg g.L103 { opacity: 0.5;}
body.detail.L105 svg g.L102 {opacity: 0.6;}
body.detail.L105 svg g.L101 { opacity: 0.3;}
body.detail.L105 svg g.L100 {opacity: 0.2;}

/*** L104 ***/

body.detail.L104 svg g.L103 { opacity: 0.6;}
body.detail.L104 svg g.L102 {opacity: 0.5;}
body.detail.L104 svg g.L101 { opacity: 0.4;}
body.detail.L104 svg g.L100 {opacity: 0.2;}

/*** L103 ***/
body.detail.L103 svg g.L102 {opacity: 0.5;}
body.detail.L103 svg g.L101 { opacity: 0.3;}
body.detail.L103 svg g.L100 {opacity: 0.2;}

/*** L102 ***/
body.detail.L102 svg g.L101 { opacity: 0.4;}
body.detail.L102 svg g.L100 {opacity: 0.2;}

/*** L101 ***/
body.detail.L101 svg g.L100 {opacity: 0.3;}

/*********** interaction hotspots ***********/

div.zoom .hotspot {
    stroke: rgba(0, 48, 86 ,0.5);
    stroke: rgba(255, 255, 255 ,1);
    stroke-linecap:round;
    stroke-dasharray: 2,1;
    stroke-width: 0.4px;
    fill:rgba(0,0,0,0.2);
    transition: fill 0.5s;
}
div.zoom .hotspot.hover {
    fill:rgba(255,255,255,0.6);
}


image.hotspot.hover,
a.hotspotMarker:hover{
    animation: jumpUp 0.3s linear;
}

@keyframes jumpUp {

    0%, 100% {
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
	-moz-transform: translate(0, 0);
	-o-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
    }

    50% {
	transform: translate(0, -3px);
	-webkit-transform: translate(0, -3px);
	-moz-transform: translate(0, -3px);
	-o-transform: translate(0, -3px);
	-ms-transform: translate(0, -3px);
    }
}


/*********** plans ***********/

body.plans .viewport div.plans div.container > svg {
    width: 100%;
    height: 100%;
}

body.plans .viewport div.plans svg g.flaeche {
    fill: rgb(34,34,34);
    stroke: rgb(34,34,34);
    stroke-width:4px;
    stroke-linecap:round;
    stroke-linejoin:round;
}

body.plans:not(.L100) .viewport div.plans svg g.A6 {
    /* fill: rgb(48,48,48);
     stroke: rgb(48,48,48); */
    opacity: 0.1;
} 

body.plans:not(.L100) .viewport div.plans svg g.flaeche.A6{
    opacity: 0.5;
}

body.plans .viewport div.plans svg g.detail {
    opacity:0.2;
}

body.plans .viewport div.plans svg g.detail > * {
    stroke-width: 0.5px;
}

body.plans .viewport div.plans div.infobox {
    width:615px;
    flex: 1 1 615px;
    position: relative;
}

g.mietflaechen > * {
    transition: fill 1s;
    fill:transparent;
    stroke:rgba(255,255,255,0.5);
    stroke-linecap:round;
    stroke-width: 1.5px;
    stroke-dasharray:0.2,3;
}

g.mietflaechen > .A {
    stroke:#d50000;
}

g.mietflaechen > .B {
    stroke:#f6bf26;
}

g.mietflaechen > .C {
    stroke: #7cb342;
}

g.mietflaechen > .selected {
    fill: rgba(255,255,255,0.2);
    transition: fill 0.1s;
}