.hoppe-svg-karte {
	position: relative;
	overflow: hidden;
	height: 280px;
}
@media (min-width: 440px) {
	.hoppe-svg-karte {
		height: 400px;
	}
}
@media (min-width: 576px) {
	.hoppe-svg-karte {
		height: 400px;
	}
}
@media (min-width: 768px) {
	.hoppe-svg-karte {
		height: 580px;
	}
}
@media (min-width: 992px) {
	.hoppe-svg-karte {
		height: 760px;
	}
}
@media (min-width: 1200px) {
	.hoppe-svg-karte {
		height: 450px;
	}
}
@media (min-width: 1460px) {
	.hoppe-svg-karte {
		height: 540px;
	}
}
@media (min-width: 1700px) {
	.hoppe-svg-karte {
		height: 630px;
	}
}

.hoppe-svg-karte .karten-image {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
    background-size: 100% auto;
    background-position: top left;
    background-repeat: no-repeat;
	z-index: 0;
 	transition: transform .3s ease; 
}
.hoppe-svg-karte .karten-image.notransition {
 	transition: none; 
}
.hoppe-svg-karte div {
	z-index: 2;
}
.hoppe-svg-karte .karten-punkt {
	position: absolute;
   	padding: 0;
   	margin: 0;	
   	cursor: pointer;
	z-index: 1;
	opacity: 1;
 	transition: opacity .3s ease; 
}
.hoppe-svg-karte .karten-punkt.hidden {
	opacity: 0;
 	transition: opacity .3s ease; 
 	pointer-events: none;
}
.hoppe-svg-karte .karten-punkt svg {
	position: absolute;
}
.hoppe-svg-karte .karten-punkt svg circle {
	fill: #002E5B;
}
.hoppe-svg-karte .karten-punkt.active svg circle {
	fill: var(--hoppe-bubble-red);
}
.hoppe-svg-karte .karten-punkt .karten-punkt-anzahl {
	position: absolute;
	color: #fff;
	line-height: 14px;
    font-size: 12px;
   	text-align: center;
}
.hoppe-svg-karte .karte-unzoom {
	position: absolute;
	right: 0;
	top: var(--hoppe-h-1);
	opacity: 1;
 	transition: opacity .3s ease; 
}
.hoppe-svg-karte .karte-unzoom.hidden {
	opacity: 0;
 	transition: opacity .3s ease; 
}

.karte-boxen {
    position: relative;
	z-index: 3;
	margin-top: -100px;
	min-height: 70px;
}
@media (min-width: 440px) {
	.karte-boxen {
		margin-top: -150px;
		min-height: 130px;
	}
}
@media (min-width: 576px) {
	.karte-boxen {
		margin-top: -100px;
		min-height: 100px;
	}
}
@media (min-width: 1200px) {
	.karte-boxen {
		margin-top: -200px;
		min-height: 130px;
	}
}
.karte-box-template {
	display: none;
}
.karte-box-klon {
	display: none;
}
.karte-box.hidden,
.karte-box .hidden {
	display: none;
}
.karte-box .karte-location-address {
	margin-bottom: var(--hoppe-h-1);
}
.karte-box .karte-location-email,
.karte-box .karte-location-phone {
	display: block;
}

.karten-punkt[data-locationindex="2"] {
    z-index: 1000;
}
.karten-punkt[data-locationindex="3"] {
    z-index: 10000;
}

.page-id-910 .hoppe-svg-karte,
.page-id-15 .contentmodule_21_1_karte h4.text-center,
.page-id-15 .hoppe-svg-karte {
    display: none;
}

.weltkarte {
    position: relative;
    isolation: isolate;
    z-index: 1;
}
.weltkarte:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(https://www.hoppe.com/de-de/wp-content/uploads/2023/04/Weltkarte.png);
    background-size: 100%;
    background-repeat: no-repeat;
   z-index: -1;
    opacity: 0.5;
}
.wp-image-16935 {
    mix-blend-mode: multiply;
}

@media (min-width:1400px) {
    .weltkarte:after {
            left: 12%;
    width: 76%;
    }

}

.karte-boxen {
    z-index: -1;
}