header {
    position: relative;
	//border-bottom: 1px solid #5d5c58

    @media all and (min-width: 440px) {
        height: 107px;
    }

    width: 100%;    
    text-align: right;
    
    /*border-bottom: 1px solid #5d5c58*/
    background: url("https://technikum29.de/shared/img-v6/line.header-footer.png") bottom left repeat-x;
}


h1 {
	display: inline;
	a {
		display: block;
		@media all and (min-width: @must-be-singlecolumn) {
			position: absolute;
        }
		@media all and (max-width: @must-be-singlecolumn) {
			float: left;
        }
		top: 10px;
		left: 10px;
		z-index: 2;
		text-indent: -9999px;
		text-align: left;
		
		@logo-width: 310px;
		@logo-height: 84px;
		
		width: @logo-width;
		height: @logo-height;
		
		@media all and (max-width: @must-be-singlecolumn) {
			background-size: cover;
			background-repeat: no-repeat;
			width: 150px;
			height: 40px;
        }
			
		@media all and (max-width: @min-width-threecols) {
			background-size: cover;
			background-repeat: no-repeat;
			width: 0.7 * @logo-width;
			height: 0.7 * @logo-height;
        }
    }
}

body.lang-de h1 a {
    background-image: url("https://technikum29.de/shared/img-v6/banner.de.svg");
}

body.lang-en h1 a {
	background-image: url("https://technikum29.de/shared/img-v6/banner.en.svg");
}


/* Farben */
nav.horizontal a,
nav.top li.active a,
nav.side a {
	color: #1a5160;
	/*font-weight: bold;*/
	opacity: .8;
}


/* Header "horizontal main" navigation */
nav.horizontal {
	// The following is only for @media all and (max-width: @max-width-mobile) 
	ul  {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
    }

    a {
		flex-grow: 1;
		padding: 7px;
		margin-bottom: 3px;
		font-size: 17px;
    }

    @media all and (min-width: @must-be-singlecolumn) {
        position: absolute;
        right: 0;
        bottom: 0;
        margin-right: 2em;
        
        /* Primary Mobile navigation nur sublevel zeigen */
        #nav-primary-mobile > li > a {
            display: none;
        }
    }
    @media all and (max-width: @must-be-singlecolumn) {
        clear: both;
        
        /* Nur primary mobile zeigen */
        #nav-primary-mobile ul {
            display: none;
        }
    }
    
    /*
    & > ul > li:hover > ul,
    & > ul > li.dev-force-open > ul {  
        display: block;
    }
    */

    li.active a,
    li.selected a {
        /*color: #6F2A41; *//* gedecktes bordot */
        color: #E90015; /* knalliges Rot von rechter Navi */
    }
}


/* header "top auxilliary" navigation */
/* Topnavigation (Nebenheadernavigation) */
nav.top {
    @media all and (min-width: 440px) {
        & {
            position: absolute;
            right: 0;
            top: 0;
            margin: 1em;
            margin-right: 2em; 
        }
    }

    &, input, a {
        /*font: 15px "Futura Std Medium"*/
        font-size: 17px;
        /*text-transform: uppercase*/
        color: #757575;
        /*font-weight: bold*/
    }

    form, ul {
        display: inline-block;
        position: relative;
    }

    input.text, input.text.defaultvalue {
        border: 1px solid transparent;
        background: transparent;
        //width: 4em 
        //text-align: right
        //padding-right: 22px
        border: 2px solid #d8d8d8;
        width: 10em;
        padding-left: .3em;
    }

    input.text:focus, input.text.no-defaultvalue {
        background-color: white;
        text-transform: none;
        color: #000;
        //	text-align: left
        //	width: 8em
        //	border: 1px solid #bababa
    }

    input.button {
        display: block;
        text-indent: -999px;
        border: none;
        background: no-repeat center url(https://de.wikipedia.org/w/skins/Vector/resources/skins.vector.styles/images/search.svg);
        width: 2.2em;
        position: absolute;
        right: 0px;
        top: 1px;
        bottom: 1px;
        cursor: pointer;
        opacity: .5;
    }

    a {
        display: inline-block;
        margin-right: 1em;
    }

    li.active a {
        /* Aktuell ausgewaehlte Farben */
        /*color: #124b6b*/
        border-bottom: 2px solid #E90015;
    }
    
    /* Topnav dropdowns as mixin: They only appear at small screens */
    .nav-dropdown() { // to be applied on the li
        ul, form {
            display: none;
        }
            
        //&:focus ul, &:focus form, a:focus + ul, a:focus form
            //	display: block;
        
        &:focus, &:focus-within {
            ul, form {
                display: block;
            }
        }
        
        a {
            display: inline-block;
            text-indent: -999px;
            text-align: left;
            cursor: pointer;
            overflow: hidden;
            width: 1.2em;
            height: 1.2em;

            &:hover {
                opacity: 1.0;
            }
            
            /* they all share the background icon: */
            background-size: contain;
        }
    }

    @media all and (max-width: @must-be-singlecolumn) {
        & {  padding: 1em 0 1em;  }
        li { .nav-dropdown(); }
    }

    @media all and (min-width: 440px) {
        & > ul > li > a {
            display: none;  // Behelfstexte
        }
    }
    
    @media all and (max-width: @sheet-1col-width) {
        #user-menu { .nav-dropdown(); }
    }
    
    #pt-anonuserpage, #pt-userpage a {
        background-image: url(/w/skins/Vector/resources/skins.vector.styles/images/user-avatar.svg?b7f58);
        background-position: left 0;
        background-repeat: no-repeat;
        background-size: 1em 1em;
        padding-left: 20px;
    }
}

/* These are the nav .button-dropdown() icon defintions */
#language-chooser > a {
    background: no-repeat center url(images/language-icon.header.svg);
    opacity: .5;
}

#search-link > a {
    background: no-repeat center url(/w/skins/Vector/resources/skins.vector.styles/images/search.svg);
    opacity: .5;
}

#user-menu > a {
    background: no-repeat center url(/w/skins/Vector/resources/skins.vector.styles/images/user-avatar.svg);
}
