/* =========================
   HERO CONTENT POSITION
   ========================= */

/*
 * Abstand zum Rand.
 *
 * Wenn du später alle Positionen etwas
 * weiter innen oder außen haben möchtest,
 * musst du nur diesen Wert ändern.
 */

.hero {
	--hero-content-offset: clamp(1.5rem, 5vw, 6rem);
}


/* =========================
   MITTE
   ========================= */

.hero.hero-position-center .hero-content {
	top: 50%;
	left: 50%;
	right: auto;
	bottom: auto;

	transform: translate(-50%, -50%);
}


/* =========================
   OBEN LINKS
   ========================= */

.hero.hero-position-top-left .hero-content {
	top: var(--hero-content-offset);
	left: var(--hero-content-offset);
	right: auto;
	bottom: auto;

	transform: none;
}


/* =========================
   OBEN RECHTS
   ========================= */

.hero.hero-position-top-right .hero-content {
	top: var(--hero-content-offset);
	right: var(--hero-content-offset);
	left: auto;
	bottom: auto;

	transform: none;
}


/* =========================
   UNTEN LINKS
   ========================= */

.hero.hero-position-bottom-left .hero-content {
	bottom: var(--hero-content-offset);
	left: var(--hero-content-offset);
	top: auto;
	right: auto;

	transform: none;
}


/* =========================
   UNTEN RECHTS
   ========================= */

.hero.hero-position-bottom-right .hero-content {
	right: var(--hero-content-offset);
	bottom: var(--hero-content-offset);
	top: auto;
	left: auto;

	transform: none;
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 900px) {

	/*
	 * Auf kleinen Displays wird der
	 * Abstand zum Bildrand kleiner.
	 */

	.hero {
		--hero-content-offset: 1rem;
	}


	/*
	 * Die mobile Breite bleibt begrenzt,
	 * unabhängig von der gewählten Position.
	 */

	.hero .hero-content {
		width: calc(100% - 2rem);

		max-width: 650px;
	}

}