/* NOIO – einheitlicher Desktop-Header auf Startseite und allen Unterseiten
   Aufbau wie im freigegebenen Startseiten-Screenshot:
   42px Magazinzeile + 24px Luft + 88px Hauptnavigation. */

:root{
	--noio-header-topline-h: 42px;
	--noio-header-gap: 24px;
	--noio-header-nav-h: 88px;
	--noio-header-stack-h: 154px;
	--noio-header-bg: #030e17;
}

/* ---------- Gemeinsamer sticky Header-Container ---------- */

@media (min-width: 901px){

	/* Unterseiten: der komplette Template-Part bleibt als EIN Block stehen. */
	header.wp-block-template-part{
		position: sticky !important;
		top: 0 !important;
		z-index: 12000 !important;
		width: 100% !important;
		background: var(--noio-header-bg) !important;
		box-shadow: 0 10px 30px rgba(0,0,0,.18);
	}

	body.admin-bar header.wp-block-template-part{
		top: 32px !important;
	}

	/* Startseite: JS fasst Magazinzeile + Navigation in diesen Container. */
	.noio-home-header-stack{
		position: sticky !important;
		top: 0 !important;
		z-index: 12000 !important;
		width: 100%;
		background: var(--noio-header-bg);
		box-shadow: 0 10px 30px rgba(0,0,0,.18);
	}

	body.admin-bar .noio-home-header-stack{
		top: 32px !important;
	}

	/* ---------- Magazinzeile ---------- */

	.noio-home-topline,
	.noio-sub-topline{
		position: relative !important;
		top: auto !important;
		z-index: 1 !important;
		display: block !important;
		height: var(--noio-header-topline-h);
		min-height: var(--noio-header-topline-h);
		margin: 0 !important;
		background: #092034 !important;
		border: 0 !important;
		box-shadow: none !important;
	}

	.noio-home-topline-inner,
	.noio-sub-topline-inner{
		box-sizing: border-box;
		width: min(100% - 30px,1506px) !important;
		height: var(--noio-header-topline-h);
		min-height: var(--noio-header-topline-h) !important;
		margin: 0 auto !important;
		padding: 0 !important;
	}

	/* ---------- Die gewünschte Luft zwischen Zeile und Menü ---------- */

	.noio-home-header-desktop,
	.noio-sub-nav-desktop{
		position: relative !important;
		top: auto !important;
		z-index: 2 !important;
		display: block !important;
		margin: var(--noio-header-gap) 0 0 !important;
		background: rgba(3,14,23,.99) !important;
		border-top: 1px solid rgba(23,56,75,.38);
		border-bottom: 1px solid #17384b !important;
		box-shadow: none !important;
	}

	/* Beide Menüs exakt gleich groß und ausgerichtet. */
	.noio-home-header-stage,
	.noio-sub-nav-stage{
		box-sizing: border-box;
		position: relative;
		width: 100% !important;
		max-width: 1536px !important;
		height: var(--noio-header-nav-h) !important;
		aspect-ratio: auto !important;
		margin: 0 auto !important;
		overflow: hidden;
		border-left: 1px solid #17384b;
		border-right: 1px solid #17384b;
	}

	.noio-home-header-image,
	.noio-sub-nav-image{
		display: block;
		width: 100% !important;
		height: 100% !important;
		object-fit: contain !important;
		object-position: center !important;
	}

	/* Alte Einzel-Sticky-Regeln sicher neutralisieren. */
	header.wp-block-template-part .noio-sub-nav-desktop,
	header.wp-block-template-part .noio-sub-nav-mobile,
	.noio-home-header-stack .noio-home-header-desktop{
		position: relative !important;
		top: auto !important;
	}

	/* Auf der Wahlseite gilt jetzt derselbe Header wie überall. */
	body.page-id-194 header.wp-block-template-part{
		position: sticky !important;
		top: 0 !important;
	}

	body.admin-bar.page-id-194 header.wp-block-template-part{
		top: 32px !important;
	}
}

/* Anker nicht unter dem stehenden Header verstecken. */
html{
	scroll-padding-top: 170px;
}

/* Mobile behält das kompakte Menü ohne die Desktop-Magazinzeile. */
@media (max-width: 900px){
	.noio-home-header-stack{
		display: contents;
	}

	header.wp-block-template-part{
		position: relative !important;
		top: auto !important;
	}

	.noio-home-topline,
	.noio-sub-topline,
	.noio-home-header-desktop,
	.noio-sub-nav-desktop{
		display: none !important;
	}

	.noio-home-header-mobile,
	.noio-sub-nav-mobile{
		position: sticky !important;
		top: 0 !important;
		z-index: 12000 !important;
	}

	body.admin-bar .noio-home-header-mobile,
	body.admin-bar .noio-sub-nav-mobile{
		top: 46px !important;
	}

	html{
		scroll-padding-top: 82px;
	}
}