/**
 * Logo beim Scrollen einfahren, Menue behalten.
 *
 * Die Logo-Spalte ist .col.span_3, die Menuespalte .col.span_9 - beide liegen
 * untereinander in derselben .row. Eingefahren wird nur die erste.
 * Erst oberhalb des Mobil-Breakpoints (1000px), darunter greift der eigene
 * mobile Kopf von Salient.
 */
@media only screen and (min-width: 1000px) {

	#header-outer[data-format="centered-menu-under-logo"] #top .row .col.span_3 {
		max-height: 200px;
		min-height: 0;
		overflow: hidden;
		opacity: 1;
		transform: translateY(0);
		transition: max-height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
					transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
					opacity 0.25s ease;
	}

	#header-outer[data-format="centered-menu-under-logo"].kopf-kompakt #top .row .col.span_3 {
		max-height: 0;
		opacity: 0;
		transform: translateY(-40px);
	}

	/**
	 * Abstand oberhalb der Menueeintraege.
	 *
	 * Salient gibt den Links nur ein margin-bottom von 20px; die Luft darueber
	 * kam aus dem Logo-Block. Faehrt der ein, saessen sie ohne diese Regel
	 * buendig an der Oberkante. 20px oben spiegeln die 20px unten.
	 */
	#header-outer[data-format="centered-menu-under-logo"] #top .row .col.span_9 {
		padding-top: 0;
		transition: padding-top 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}

	#header-outer[data-format="centered-menu-under-logo"].kopf-kompakt #top .row .col.span_9 {
		padding-top: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {

	#header-outer[data-format="centered-menu-under-logo"] #top .row .col.span_3,
	#header-outer[data-format="centered-menu-under-logo"] #top .row .col.span_9 {
		transition: none;
	}
}