/* NOIO Startseite – Hero auf Smartphones vollständig darstellen
   Desktop bleibt unverändert. */

@media (max-width: 900px) {

	body.home .noio-home-hero-stage,
	body.front-page .noio-home-hero-stage {
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		aspect-ratio: var(--noio-mobile-hero-ratio, 16 / 9) !important;
		overflow: hidden !important;
		background:
			linear-gradient(180deg, #03101a 0%, #061722 100%) !important;
	}

	body.home .noio-home-hero-stage img,
	body.front-page .noio-home-hero-stage img,
	body.home .noio-home-hero-image,
	body.front-page .noio-home-hero-image {
		position: absolute !important;
		inset: 0 !important;
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		max-height: none !important;
		object-fit: contain !important;
		object-position: center center !important;
		transform: none !important;
		margin: 0 !important;
	}

	/* Alte mobile Cover-/Crop-Regeln neutralisieren. */
	body.home .noio-home-hero-stage picture,
	body.front-page .noio-home-hero-stage picture {
		position: absolute !important;
		inset: 0 !important;
		display: block !important;
		width: 100% !important;
		height: 100% !important;
	}

	/* Der Hero bleibt sauber innerhalb der NOIO-Rahmenlinien. */
	body.home .noio-home-hero,
	body.front-page .noio-home-hero {
		overflow: visible !important;
		background: #03101a !important;
	}

	/* Auf sehr schmalen Geräten nicht unnötig gegen den Rand pressen. */
	@media (max-width: 480px) {
		body.home .noio-home-hero-stage,
		body.front-page .noio-home-hero-stage {
			width: 100% !important;
			margin-left: auto !important;
			margin-right: auto !important;
		}
	}
}