/** Grundeinstellungen **/

#zindel-united-triade-navigation, #zindel-united-triade-navigation li {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 1.5em;
}
#zindel-united-triade-navigation a {
    color: var(--zindel-text-color);
    font-size: 1.3em;
}
#zindel-united-triade-navigation ul li a {
    color: var(--zindel-text-color);
}
#zindel-united-triade-navigation .active, #zindel-united-triade-navigation .active > a ,
#zindel-united-triade-navigation li:hover, #zindel-united-triade-navigation li:hover > a{
    color: var(--zindel-primary-color);
}

#zindel-united-triade-navigation {
    width: 75em;
    height: 55em;
    position: relative;
}

/** 1. Ebene **/
.Gestalten, .Bauen, .Leben {
    position: absolute;
    z-index: 0;
}
.Gestalten::before, .Bauen::before, .Leben::before {
    content: "";
    position: absolute;
    z-index: -1;
}
.Gestalten {
    top: 11.8em;
    left: 24.8em;
}
.Gestalten::before {
    inset: -20.5em -12em -15em -21em;
}
.Bauen {
    top: 25.5em;
    left: 39.2em;
}
.Bauen::before {
    inset: -4em -19em -38.5em -1em;
}
.Leben {
    top: 30.4em;
    left: 16.6em;
}
.Leben::before {
    inset: -1em -1em -33.5em -17.5em;
}

.Gestalten > a, .Bauen > a, .Leben > a {
    display: block;
    width: 12.5em;
    height: 12.5em;
    background-size: contain;
    background-repeat: no-repeat;
}
.Gestalten > a {
    background-image: url('../images/oeko_gestalten.svg');
}
#zindel-united-triade-navigation:not(.active):not(:hover) .Gestalten > a,
.Gestalten:hover > a, .Gestalten.active > a {
    background-image: url('../images/oeko_gestalten.active.svg');
}
.Bauen > a {
    background-image: url('../images/oeko_bauen.svg');
}
#zindel-united-triade-navigation:not(.active):not(:hover) .Bauen > a,
.Bauen:hover > a, .Bauen.active > a {
    background-image: url('../images/oeko_bauen.active.svg');
}
.Leben > a {
    background-image: url('../images/oeko_leben.svg');
}
#zindel-united-triade-navigation:not(.active):not(:hover) .Leben > a,
.Leben:hover > a, .Leben.active > a {
    background-image: url('../images/oeko_leben.active.svg');
}

/** 2. Ebene **/
#zindel-united-triade-navigation ul {
    display: none;
    z-index: 0;
}
#zindel-united-triade-navigation li.active ul,
#zindel-united-triade-navigation li:hover > ul {
    display: block;
}

#zindel-united-triade-navigation > li > ul > li > a {
    font-size: 1.6em;
    text-transform: uppercase;
    color: var(--zindel-text-color);
}

#zindel-united-triade-navigation > li > ul > li::before {
    content: "";
    position: absolute;
    z-index: -1;
}

.Gestalten_Idee {
    position: absolute;
    top: -7em;
    left: -3em;
}
.Gestalten_Idee::before {
    inset: 0 0 -8em -15em;
}
.Gestalten_Idee > a::after {
    top: 1.4em;
    left: 0.2em;
}
.Gestalten_Idee:hover > a::after {
    background-image: url("../images/idee.active.svg");
}

.Gestalten_Planung {
    position: absolute;
    top: -9.3em;
    left: 6.5em;
}
.Gestalten_Planung::before {
    inset: 0 -8em -10em 0;
}
.Gestalten_Planung > a::after {
    top: 1.3em;
    left: -0.4em;
}
.Gestalten_Planung:hover > a::after {
    background-image: url("../images/planung.active.svg");
}

.Bauen_Ausführung {
    position: absolute;
    top: -2.5em;
    left: 8.5em;
}
.Bauen_Ausführung::before {
    inset: 0 -14em -10em 0;
}
.Bauen_Ausführung > a::after {
    top: 1.3em;
    left: 4.1em;
}
.Bauen_Ausführung:hover > a::after {
    background-image: url("../images/ausfuehrung.active.svg");
}

.Bauen_Ressourcen {
    position: absolute;
    top: 17.5em;
    left: 9.2em;
}
.Bauen_Ressourcen::before {
    inset: -8em -13.3em -.5em 0;
}
.Bauen_Ressourcen > a::after {
    top: -4.8em;
    left: 3.6em;
}
.Bauen_Ressourcen:hover > a::after {
    background-image: url("../images/ressourcen.active.svg");
}

.Leben_Umwelt {
    position: absolute;
    top: 19.5em;
    left: -5.3em;
}
.Leben_Umwelt::before {
    inset: -7em 0 -.5em -8.5em;
}
.Leben_Umwelt > a::after {
    top: -4.8em;
    left: .7em;
}
.Leben_Umwelt:hover > a::after {
    background-image: url("../images/umwelt.active.svg");
}

.Leben_Menschen {
    position: absolute;
    top: 1.5em;
    left: -11em;
}
.Leben_Menschen::before {
    inset: 0 -1em -9em -5.5em;
}
.Leben_Menschen > a::after {
    top: 1.3em;
    left: 2.5em;
}
.Leben_Menschen:hover > a::after {
    background-image: url("../images/menschen.active.svg");
}

/** 3. Ebene **/
.Gestalten_Idee ul, .Gestalten_Planung ul,
.Bauen_Ausführung ul, .Bauen_Ressourcen ul,
.Leben_Menschen ul, .Leben_Umwelt ul {
    position: absolute;
    min-width: 15em;
}

.Gestalten_Idee li::after, .Gestalten_Planung li::before,
.Bauen_Ausführung li::before, .Bauen_Ressourcen li::before,
.Leben_Menschen li::after, .Leben_Umwelt li::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 2px;
    background-color: var(--zindel-text-color);
    border-radius: 50%;
}

#zindel-united-triade-navigation .Bauen_Ausführung ul,
#zindel-united-triade-navigation .Bauen_Ressourcen ul {
    padding-left: 0.8em;
}

.Gestalten_Idee ul {
    top: 4em;
    right: 4.6em;
    text-align: right;
}

.Gestalten_Idee li::after {
    margin: 0 0 .4em 1em;
}

.Gestalten_Planung ul {
    top: 3em;
    left: 5.2em;
}

.Gestalten_Planung li::before,
.Bauen_Ausführung li::before,
.Bauen_Ressourcen li::before {
    margin: .3em 0;
    margin-right: 1em;
}

.Bauen_Ausführung ul {
    top: 1.2em;
    left: 13.3em;
}

.Bauen_Ressourcen ul {
    top: -7.6em;
    left: 12.5em;
}

.Leben_Umwelt ul {
    top: -6.3em;
    right: 6.8em;
    text-align: right;
}

.Leben_Umwelt li::after {
    margin: 0 0 .4em 1em;
}

.Leben_Menschen ul {
    top: 4.1em;
    right: 6.7em;
    text-align: right;
}

.Leben_Menschen li::after {
    margin: 0 0 .4em 1em;
}