@charset "utf-8";

/****************************************************************************************************
 *
 * Das Hamburger-Menu bei kleinen Displays
 *
 ****************************************************************************************************/

/**
 * Kleine Displays
 */
@media all and (max-width: 767px) {

	.navbar-default .menu-button {
		display: table-cell;
		vertical-align: middle;
		height: var(--menu-small-screen-level-1---height);
		line-height: var(--menu-small-screen-level-1---height);
		font-size: var(--menu-small-screen-level-1---font-size);
		right: 0;
		color: var(--menu-level-1---color);
		background-color: var(--menu-level-1---background-color);
		width: var(--menu-small-screen-level-1---width);
	}

@media (hover: hover) {
	/* Verhindert, dass auf dem iPhone das hover hängen bleibt, was leider eine sehr unangenehme Eigenschaft von iOS ist */
	.navbar-default .menu-button:hover {
		display: table-cell;
		vertical-align: middle;
		color: var(--menu-active-level-1---color);
		background-color: var(--menu-active-level-1---background-color);
	}
}

	.navbar-default .navbar-toggle {
		height: var(--menu-small-screen-level-1---height);
		line-height: var(--menu-small-screen-level-1---height);
		width: var(--menu-small-screen-level-1---width);
		margin: 0 10px 0 0;
	}

	/* Menu-"Wuerste" */
	.navbar-default .navbar-toggle .icon-bar {
		background-color: #ffffff;
	}

	/* Menu-"Wuerste" */
	.navbar-toggle .icon-bar {
		width: var(--hamburger-menu---sausage-length-closed);    /* Länge der Wurst */
		height: var(--hamburger-menu---sausage-thickness-closed);    /* Dicke der Wurst */
		transform-origin: left center;
/*		border-top-left-radius: 0;  */ /* überschreibt Bootstrap Setting! */
/*		border-top-right-radius: 0;  */ /* überschreibt Bootstrap Setting! */
/*		border-bottom-left-radius: 0; */ /* überschreibt Bootstrap Setting! */
/*		border-bottom-right-radius: 0; */ /* überschreibt Bootstrap Setting! */
	}

	/* So löst Bootstrap den Abstand zwischen den Bars */
	.navbar-toggle .icon-bar + .icon-bar {
		margin-top: var(--hamburger-menu---sausage-distance);    /* Abstand zur oberen Wurst */
	}

	/* Menu Hover und Focus */
	.navbar-default .navbar-toggle:hover {
		background-color: inherit;
		background-image: none;
	}

	.navbar-default .navbar-toggle:focus,
	.navbar-default .navbar-toggle:active {
		background-color: inherit;
		background-image: none;
	}

	/*
     * Kreiert einen Hamburger und beim öffnen ein Kreuz
     * Die CSS-Klassen 'hamburger-open' und 'hamburger-closed' werden von menu.js gesetzt
     */

	/* Oberer Balken beim öffnen des Hamburgers */
	.hamburger-menu.hamburger-open .icon-bar:nth-child(2) {
		width: var(--hamburger-menu---sausage-length-open);
		height: var(--hamburger-menu---sausage-thickness-open);
		transition:
			transform var(--menu-transition-time) ease-in-out,
			width var(--menu-transition-time) ease-in-out;
		transform: rotate(45deg) translateY(-3px);
	}

	/* Oberer Balken beim schliessen des Hamburgers */
	.hamburger-menu:not(.hamburger-open) .icon-bar:nth-child(2) {
		width: var(--hamburger-menu---sausage-length-closed);
		height: var(--hamburger-menu---sausage-thickness-closed);
		transition:
			transform var(--menu-transition-time) ease-in-out,
			width var(--menu-transition-time) ease-in-out;
		transform: rotate(0deg) translateY(0);
	}

	/* Mittlerer Balken beim öffnen des Hamburgers */
	.hamburger-menu.hamburger-open .icon-bar:nth-child(3) {
		width: var(--hamburger-menu---sausage-length-open);
		transition:
			transform var(--menu-transition-time) ease-in-out,
			width var(--menu-transition-time) ease-in-out,
			opacity var(--menu-transition-time) ease-in-out;
		opacity: 0;
	}

	/* Mittlerer Balken beim schliessen des Hamburgers */
	.hamburger-menu:not(.hamburger-open) .icon-bar:nth-child(3) {
		width: var(--hamburger-menu---sausage-length-closed);
		transition:
			transform var(--menu-transition-time) ease-in-out,
			width var(--menu-transition-time) ease-in-out,
			opacity var(--menu-transition-time) ease-in-out;
		opacity: 1;
	}

	/* Unterer Balken beim öffnen des Hamburgers */
	.hamburger-menu.hamburger-open .icon-bar:nth-child(4) {
		width: var(--hamburger-menu---sausage-length-open);
		height: var(--hamburger-menu---sausage-thickness-open);
		transition:
			transform var(--menu-transition-time) ease-in-out,
			width var(--menu-transition-time) ease-in-out;
		transform: rotate(-45deg) translateY(3px);
	}

	/* Unterer Balken beim schliessen des Hamburgers */
	.hamburger-menu:not(.hamburger-open) .icon-bar:nth-child(4) {
		width: var(--hamburger-menu---sausage-length-closed);
		height: var(--hamburger-menu---sausage-thickness-closed);
		transition:
			transform var(--menu-transition-time) ease-in-out,
			width var(--menu-transition-time) ease-in-out;
		transform: rotate(0deg) translateY(0);
	}

}