#zutmapwrapper {
    position: relative;
    display: block;
    width: 100%;
    max-width: 1220px;
    height: auto;
    margin: 0 auto;
    padding: 0;
    z-index: 1;
}

/* START TRAILS */
#trails {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;

    left: 0;
    top: 0;
    background-size: 100% auto;
    background-position: center;
}

#trails.finish {
    background-image: url('https://www.zugspitz-ultratrail.com/wp-content/uploads/2023/04/trails_finish.png');
    z-index: 60;
}
#trails.ultra {
    background-image: url('https://www.zugspitz-ultratrail.com/wp-content/uploads/2024/04/trails_ultra.png');
    z-index: 59;
}
#trails.ehrwald {
    background-image: url('https://www.zugspitz-ultratrail.com/wp-content/uploads/2024/04/trails_ehrwald.png');
    z-index: 58;
}
#trails.leutasch {
    background-image: url('https://www.zugspitz-ultratrail.com/wp-content/uploads/2024/04/trails_leutasch.png');
    z-index: 57;
}
#trails.mittenwald {
    background-image: url('https://www.zugspitz-ultratrail.com/wp-content/uploads/2024/04/trails_mittenwald.png');
    z-index: 56;
}
#trails.gapa {
    background-image: url('https://www.zugspitz-ultratrail.com/wp-content/uploads/2024/04/trails_gapa.png');
    z-index: 52;
}
#trails.grainau {
    background-image: url('https://www.zugspitz-ultratrail.com/wp-content/uploads/2024/04/trails_grainau.png');
    z-index: 51;
}
/* END TRAILS */



/* START STARTORT */
a.maprace {
    display: inline-block;
    position: absolute;
    height: auto;
    line-height: 0;
    font-size: 14px;
    font-weight: 800;
    text-align: left;
    margin: 0;
    padding: 1.75% 1.25%;
    color: white !important;
    background-color: black !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

a.maprace:hover {
    color: black !important;
    background-color: white !important;
}

a.maprace.ultra {
    left: 43%;
    top: 9%;
    border-left: 0.75em solid #2a8d2d;
    z-index: 109;
}

a.maprace.gapa {
    left: 43%;
    top: 2%;
    border-left: 0.75em solid #546d78;
    z-index: 108;
}

a.maprace.grainau {
    left: 27%;
    top: 20%;
    border-left: 0.75em solid #aca8a5;
    z-index: 109;
}

a.maprace.ehrwald {
    left: 1.5%;
    top: 62.5%;
    border-left: 0.75em solid #7eb348;
    z-index: 101;
}

a.maprace.leutasch {
    right: 13%;
    top: 81.75%;
    border-left: 0.75em solid #007ec6;
    z-index: 102;
}

a.maprace.mittenwald {
    right: 1.5%;
    top: 25%;
    border-left: 0.75em solid #2dbdef;
    z-index: 103;
}


a.maprace.ultra:hover ~ #trails.ehrwald,
a.maprace.ultra:hover ~ #trails.leutasch,
a.maprace.ultra:hover ~ #trails.mittenwald,
a.maprace.ultra:hover ~ #trails.gapa,
a.maprace.ultra:hover ~ #trails.grainau { display: none; }

a.maprace.ehrwald:hover ~ #trails.ultra,
a.maprace.ehrwald:hover ~ #trails.leutasch,
a.maprace.ehrwald:hover ~ #trails.mittenwald,
a.maprace.ehrwald:hover ~ #trails.gapa,
a.maprace.ehrwald:hover ~ #trails.grainau { display: none; }
a.maprace.ehrwald:hover ~ #vstelle.v1,
a.maprace.ehrwald:hover ~ #vstelle.v2 { display: none; }

a.maprace.leutasch:hover ~ #trails.ultra,
a.maprace.leutasch:hover ~ #trails.ehrwald,
a.maprace.leutasch:hover ~ #trails.mittenwald,
a.maprace.leutasch:hover ~ #trails.gapa,
a.maprace.leutasch:hover ~ #trails.grainau { display: none; }
a.maprace.leutasch:hover ~ #vstelle.v1,
a.maprace.leutasch:hover ~ #vstelle.v2,
a.maprace.leutasch:hover ~ #vstelle.v3,
a.maprace.leutasch:hover ~ #vstelle.v4 { display: none; }

a.maprace.mittenwald:hover ~ #trails.ultra,
a.maprace.mittenwald:hover ~ #trails.leutasch,
a.maprace.mittenwald:hover ~ #trails.ehrwald,
a.maprace.mittenwald:hover ~ #trails.gapa,
a.maprace.mittenwald:hover ~ #trails.grainau { display: none; }
a.maprace.mittenwald:hover ~ #vstelle.v1,
a.maprace.mittenwald:hover ~ #vstelle.v2,
a.maprace.mittenwald:hover ~ #vstelle.v3,
a.maprace.mittenwald:hover ~ #vstelle.v4,
a.maprace.mittenwald:hover ~ #vstelle.v5,
a.maprace.mittenwald:hover ~ #vstelle.v6 { display: none; }


a.maprace.gapa:hover ~ #trails.ultra,
a.maprace.gapa:hover ~ #trails.leutasch,
a.maprace.gapa:hover ~ #trails.mittenwald,
a.maprace.gapa:hover ~ #trails.ehrwald,
a.maprace.gapa:hover ~ #trails.grainau { display: none; }
a.maprace.gapa:hover ~ #vstelle.v1,
a.maprace.gapa:hover ~ #vstelle.v2,
a.maprace.gapa:hover ~ #vstelle.v3,
a.maprace.gapa:hover ~ #vstelle.v4,
a.maprace.gapa:hover ~ #vstelle.v5,
a.maprace.gapa:hover ~ #vstelle.v6,
a.maprace.gapa:hover ~ #vstelle.v7 { display: none; }

a.maprace.grainau:hover ~ #trails.ultra,
a.maprace.grainau:hover ~ #trails.leutasch,
a.maprace.grainau:hover ~ #trails.mittenwald,
a.maprace.grainau:hover ~ #trails.ehrwald,
a.maprace.grainau:hover ~ #trails.gapa { display: none; }
a.maprace.grainau:hover ~ #vstelle.v1,
a.maprace.grainau:hover ~ #vstelle.v2,
a.maprace.grainau:hover ~ #vstelle.v3,
a.maprace.grainau:hover ~ #vstelle.v4,
a.maprace.grainau:hover ~ #vstelle.v5,
a.maprace.grainau:hover ~ #vstelle.v6,
a.maprace.grainau:hover ~ #vstelle.v7,
a.maprace.grainau:hover ~ #vstelle.v8,
a.maprace.grainau:hover ~ #vstelle.v9 { display: none; }
/* END STARTORT */



/* START VSTELLE */
#vstelle {
    position: absolute;
    display: inline-block;
    width: 3.5%;
    height: auto;
    background: black;
    padding: 0;
    margin: 0;
}

#vstelle span.vstellekleinezahl {
    position: absolute;
    display: inline-block;
    width: 22px;
    height: 22px;
    top: 0;
    left: 120%;
    background: white;
    color: black;
    font-size: 12px;
    font-weight: bold;
    line-height: 22px;
    text-align: center;
}


@media (max-width: 1100px) {
a.maprace { font-size: 12px; }
#vstelle span.vstellekleinezahl {
    width: 18px;
    height: 18px;
    font-size: 10px;
    line-height: 18px;
}
}
@media (max-width: 680px) { a.maprace { font-size: 10px; } }
@media (max-width: 1000px) { #vstelle span.vstellekleinezahl { display: none; } }
@media (max-width: 480px) { a.maprace { font-size: 8px; } }


#vstelle.v1 {
    left: 22%;
    top: 28.5%;
    z-index: 215;
}
#vstelle.v2 {
    left: 7%;
    top: 49.5%;
    z-index: 219;
}
#vstelle.v3 {
    left: 25%;
    bottom: 18.5%;
    z-index: 214;
}
#vstelle.v4 {
    left: 55.5%;
    bottom: 14.5%;
    z-index: 208;
}
#vstelle.v5 {
    left: 77.5%;
    bottom: 35.5%;
    z-index: 210;
}
#vstelle.v6 {
    right: 4.5%;
    bottom: 55.5%;
    z-index: 211;
}
#vstelle.v7 {
    right: 23%;
    top: 13.5%;
    z-index: 212;
}
#vstelle.v8 {
    right: 41%;
    top: 44.5%;
    z-index: 213;
}
#vstelle.v9 {
    right: 50%;
    top: 44.5%;
    z-index: 214;
}
#vstelle.v10 {
    left: 50%;
    top: 32%;
    z-index: 209;
}

#vstelle.v1:hover,
#vstelle.v2:hover,
#vstelle.v3:hover,
#vstelle.v4:hover,
#vstelle.v5:hover,
#vstelle.v6:hover,
#vstelle.v7:hover,
#vstelle.v8:hover,
#vstelle.v9:hover,
#vstelle.v10:hover { z-index: 225; }

#vstelle span.vstelleimg {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}

/* END VSTELLE */



/* START VSTELLEDESC */
#vstelledesc {
    position: absolute;
    display: inline-block;
    width: 100%;
    min-width: 325px;
    max-width: 350px;
    background: white;
    padding: 20px;
    margin: 0;

    transition: all .3s ease;
}

#vstelledesc.vd1 {
    top: 5px;
    left: 120%;
    visibility: hidden;
    opacity: 0;
}
#vstelledesc.vd2 {
    top: -100px;
    left: 120%;
    visibility: hidden;
    opacity: 0;
}
#vstelledesc.vd3 {
    bottom: -48px;
    left: 120%;
    visibility: hidden;
    opacity: 0;
}
#vstelledesc.vd4 {
    bottom: -48px;
    left: 120%;
    visibility: hidden;
    opacity: 0;
}
#vstelledesc.vd5 {
    bottom: -48px;
    right: 120%;
    visibility: hidden;
    opacity: 0;
}
#vstelledesc.vd6 {
    top: -100px;
    right: 120%;
    visibility: hidden;
    opacity: 0;
}
#vstelledesc.vd7 {
    top: 5px;
    right: 120%;
    visibility: hidden;
    opacity: 0;
}
#vstelledesc.vd8 {
    top: -100px;
    right: 120%;
    visibility: hidden;
    opacity: 0;
}
#vstelledesc.vd9 {
    top: -100px;
    right: 120%;
    visibility: hidden;
    opacity: 0;
}
#vstelledesc.vd10 {
    top: -100px;
    right: 120%;
    visibility: hidden;
    opacity: 0;
}

@media (min-width: 1100px) {


#vstelle span.vstelleimg:hover { cursor: help; }

#vstelle.v1 span.vstelleimg:hover ~ #vstelledesc.vd1 { opacity: 1; visibility: visible; top: 0px; }
#vstelle.v2 span.vstelleimg:hover ~ #vstelledesc.vd2 { opacity: 1; visibility: visible; top: -110px; }
#vstelle.v3 span.vstelleimg:hover ~ #vstelledesc.vd3 { opacity: 1; visibility: visible; bottom: -43px; }
#vstelle.v4 span.vstelleimg:hover ~ #vstelledesc.vd4 { opacity: 1; visibility: visible; bottom: -43px; }
#vstelle.v5 span.vstelleimg:hover ~ #vstelledesc.vd5 { opacity: 1; visibility: visible; bottom: -43px; }
#vstelle.v6 span.vstelleimg:hover ~ #vstelledesc.vd6 { opacity: 1; visibility: visible; top: -110px; }
#vstelle.v7 span.vstelleimg:hover ~ #vstelledesc.vd7 { opacity: 1; visibility: visible; top: 0px; }
#vstelle.v8 span.vstelleimg:hover ~ #vstelledesc.vd8 { opacity: 1; visibility: visible; top: -110px; }
#vstelle.v9 span.vstelleimg:hover ~ #vstelledesc.vd9 { opacity: 1; visibility: visible; top: -110px; }
#vstelle.v10 span.vstelleimg:hover ~ #vstelledesc.vd10 { opacity: 1; visibility: visible; top: -110px; }


}


#vstelledesc span.partnerimg {
    display: block;
    position: relative;
    padding: 0;
    margin: 0 0 20px 0;
    border: 1px solid #efefef;
}

#vstelledesc span.zahlpoweredbywrapper {
    position: relative;
    display: block;
    padding: 0;
    margin: 0;
    vertical-align: text-top;
}

#vstelledesc span.vstellezahl {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 40px;
    text-align: center;
    background: black;
    color: white;
    font-weight: bold;
    font-size: 24px;
    line-height: 40px;
    padding: 0 0 0 0;
    margin: 0;
    vertical-align: text-top;
}

#vstelledesc span.poweredby {
    position: relative;
    display: inline-block;
    width: calc(100% - 61px);
    text-align: left;
    padding: 0 0 0 15px;
    margin: 0;
    vertical-align: text-top;
    font-size: 100%;
}

#vstelledesc span.poweredby strong {
    font-size: 135%;
}

#vstelledesc span.anfahrt {
    position: relative;
    display: block;
    padding: 0;
    margin: 20px 0 0 0;
    font-size: 85%;
    line-height: 1.1em;
}
#vstelledesc span.anfahrt em { 
    opacity: .65;
}
/* END VSTELLEDESC */

#zutmapwrapper img.zutmapzutlogo {
    position: absolute;
    top: 4.25%;
    left: 3%;
    width: 15%;
    max-width: 175px;
    height: auto;
    z-index: 10;
}