/*=============  Hero  =============*/
#hero {
    height: 91%;
	gap: 3rem;
	color: #fff;
	background: url(../img/kontakt.png) no-repeat center center, #26262638;
	background-blend-mode: color;
	background-size: cover;
	padding: 3rem 5rem;
}

#hero > div {
    justify-content: center;
	gap: 3rem;
	color: #f0f0f0;
}

#hero h2 {
    padding: 0 0 0.5rem;
}

#hero span {
	width: min(100%, 500px);
}

#hero > div a {
    color: #5da6ea;
	font-size: 1.45rem;
	font-weight: bold;
}

#hero form {
    width: 30%;
	gap: 2rem;
	color: #424242;
	background: #fff;
    margin: 6rem 0 1rem;
	padding: 5rem;
	border: 1px solid #424242;
	border-radius: 9px;
}

#hero h3 {
    font-size: 1.65rem;
}

#hero :is(input, textarea):not([type="checkbox"]) {
	width: -webkit-fill-available;
    min-width: 0;
    padding: 1rem;
    border: 1px solid #959595;
	border-radius: 10px;
	font-size: 1.1rem;
	outline: none;
}

#hero form div {
    gap: 1.25rem;
}

#hero textarea {
    font-family: Arial, Helvetica, sans-serif;
	resize: none;
}

#hero form button {
	border: none;
	cursor: pointer;
}

/*============  Iframe  ============*/
iframe {
    height: 35rem;
	margin: 0 0 -0.25rem;
}

/*==========  Responsive  ==========*/
@media screen and (max-width: 1399px) {

	/*===========  Hero  ===========*/
	#hero form {
		width: 40%;
		padding: 1.5rem;
	}
}

@media screen and (max-width: 950px) {

	/*===========  Hero  ===========*/
	#hero {
		height: auto;
		flex-flow: column;
		padding: 6.5rem 1rem 3rem;
	}

	#hero form {
		width: 90%;
		margin: auto;
		padding: 1rem;
	}
}