/**
 * @author Valentin Alisch, Jonas Zieher <hallo@valentinalisch.de>
 * @version 1.0
 *
 * Koeber_La Module: Header
 */

header#header {
	padding: var( --inner_spacing ) 0;
	background: white;
	z-index: 100;
	transition: background 0.125s ease-in-out;
	overflow: hidden;
	/*position: relative;*/

	position: -webkit-sticky;
	position: -moz-sticky;
	position: sticky;
	top: 0;
}

/*.view-startseite header#header:not( .active ) {
	background: transparent;
}*/

	header#header h1 {}

		header#header h1 img {
			display: none;
		}



	header#header #header__navigation {
		display: none;
		color: var( --light_gray );
	}

		header#header #header__navigation .menu_item a {
			display: inline-block;
		}

		header#header #header__navigation .menu_item a:hover,
		header#header #header__navigation .menu_item a:active,
		header#header #header__navigation .menu_item.active a {
			color: var( --text_color );
		}

		header#header #header__trigger {
			text-align: right;
		}

			header#header #header__trigger .trigger {
				display: inline-block;
				cursor: pointer;
			}

			header#header #header__trigger .header__trigger--open {
				max-width: 1.5em;
			}

			header#header #header__trigger .header__trigger--close {
				max-width: 1.25em;
				display: none;
			}

			header#header #header__trigger .trigger.active .header__trigger--open {
				display: none;
			}

			header#header #header__trigger .trigger.active .header__trigger--close {
				display: block;
			}



@media ( max-width: 699px ) {

	header#header #header__navigation nav {
		margin-top: var( --inner_spacing );
		padding-top: var( --inner_spacing );
		border-top: var( --border_width ) var( --border_style ) var( --border_color );
	}

	header#header #header__navigation .menu_item a {
		padding: 0.1em 0;
	}

}



/**
 * ——————————————————————————
 */
@media ( min-width: 700px ) {

	header#header {
		padding: calc( var( --line_height ) * 1em ) 0;
	}

	header#header #header__navigation {
		display: block !important;
	}

	header#header #header__trigger {
		display: none;
	}

	header#header > grid-wrap > grid-row {
		flex-wrap: nowrap;
	}

	header#header h1 img {
		display: block;
		position: absolute;
		top: 50%;
		left: calc( ( ( 100vw - var( --grid-content_width ) ) * 0.5 ) * 0.5 );
		height: 40%;
		width: auto;

		-webkit-transform: translate( -50%, -50% );
		-moz-transform: translate( -50%, -50% );
		transform: translate( -50%, -50% );
	}

	.view-startseite:not( .skip-animation ) header#header h1 img {
		transition: all 0.2s ease-in-out;
	}

	.view-startseite:not( .skip-animation ) header#header h1 img:not( .active ) {
		-webkit-transform: translate( -50%, 130% );
		-moz-transform: translate( -50%, 130% );
		transform: translate( -50%, 130% );
	}

}



/**
 * ——————————————————————————
 */
@media ( min-width: 1100px ) {

}