/* Startseite: Position und Größe des KI-Avatars im Hero (überschreibt custom.css nur auf index.php) */

@media screen and (min-width: 1401px) { /* großer Desktop: Avatar weiter rechts */
	.intro .overlay-text {
		left: 67%;
	}
}

@media screen and (max-width: 1199px) { /* laptop/pad: Avatar etwas kleiner, rechts, Play-Button mittig darunter */
	.intro .overlay-text {
		left: auto;
		right: 2%;
		width: auto;
	}
	.intro .overlay-text .intro-video {
		width: 260px;
		height: 260px;
		margin: 0 auto;
	}
	.intro .overlay-text .video-start {
		position: relative;
		display: block;
		width: max-content;
		margin: 0 auto;
		text-align: center;
	}
}

@media screen and (max-width: 980px) { /* pad */
	.intro .overlay-text .intro-video {
		width: 210px;
		height: 210px;
	}
}

@media screen and (max-width: 767px) { /* phone: Avatar tiefer */
	.intro .overlay-text {
		top: 48%;
		right: 3%;
	}
	.intro .overlay-text .intro-video {
		width: 170px;
		height: 170px;
		margin-top: 0;
		position: static;
	}
	.intro { margin-bottom: 90px; }
}

@media screen and (max-width: 567px) { /* small phone */
	.intro .overlay-text {
		top: 52%;
		right: 2%;
	}
	.intro .overlay-text .intro-video {
		width: 150px;
		height: 150px;
		padding: 7px;
	}
}