/* Einstieg im Layout „Modern“: Bild füllt die ganze Fläche, Text hell darüber. */
.pwit-einstieg {
	position: relative;
	min-height: 82vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-block: calc(var(--wp--preset--spacing--60) + 5rem) var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	isolation: isolate;
}

/* Abdunkelung für lesbaren Text (Weiß auf mind. 70 % dunkler Fläche). */
.pwit-einstieg::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--contrast);
	opacity: 0.7;
	z-index: -1;
}

.pwit-einstieg__inner {
	width: 100%;
}

.pwit-einstieg__text {
	max-width: 48rem;
}

.pwit-einstieg__text :is(h1, h2, p) {
	color: var(--wp--preset--color--base);
}

.pwit-einstieg__bild {
	position: absolute;
	inset: 0;
	margin: 0 !important;
	max-width: none !important;
	z-index: -2;
}

.pwit-einstieg__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pwit-einstieg .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

.pwit-einstieg .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--base);
}

.pwit-einstieg .wp-block-button > .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* Im Editor steht das Bild klein unter dem Text, damit es sich direkt anklicken und austauschen lässt. */
.editor-styles-wrapper .pwit-einstieg__bild {
	position: relative !important;
	inset: auto !important;
	z-index: 0;
	max-width: 20rem !important;
	margin-top: var(--wp--preset--spacing--30) !important;
}

.editor-styles-wrapper .pwit-einstieg__bild img {
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: 4px;
}