.head-nav {
    background-color: var(--picked2); 
	display: flex; 
	flex-direction: row; 
	flex:1;
	justify-content: space-between; /*damit werden die child-divs (head-avatar und caption) an beiden enden des flex-divs (head-nav) ausgerichtet */
    height: 50px;
	opacity: 90%;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index: 20;
    border-bottom: 8px solid var(--zwei);
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
}

@media (max-width: 1200px) {
	.head-nav { 
		height: 100px;
	}
}

.head-avatar {
    margin: 5px 10px 5px 40px; /*position vom linken rand entfernt*/
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
}

img#index_ava { 
	object-fit: cover; /*damit das bild nicht verzerrt dargestellt sondern abgeschnitten wird */
	width: 80px;
	height: 80px;
	border: 8px solid transparent;
	box-sizing: content-box; /*sonst wird der rahmen nach innen gedrückt und das ava ist so klein wie ne ameise*/
	-moz-border-image: var(--asback) 8 8 stretch; /* Old firefox */
	-webkit-border-image: var(--asback) 8 8 stretch; /* Safari - klappt aber schon mal nicht*/
	-o-border-image: var(--asback) 8 8 stretch; /* Opera */
	border-image: var(--asback) 8 8 stretch;
	/* border-radius:100% wäre die rundung - aber klappt nur für das bild, nicht den rahmen - (? überprüf das mal) */
}

.caption, .caption a {
    margin: auto 0;
    color: var(--eins); 
    font-family: var(--calibri);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
	text-decoration: none;
	text-align: right;
	line-height: 1.4em;
}

.welcome {
	margin: 0;
}

.caption a:hover {
	    color: var(--picked); 
}

.caption li {
    list-style-type: none;
    display: inline-block;
    padding: 10px;
}