/* ── Hinweis-Modal ── */

/*
 * margin: auto stellt die UA-Zentrierung wieder her, die der globale Reset (* { margin: 0 })
 * aufhebt. Breite/Höhe deckelt das UA-Stylesheet für modale Dialoge bereits auf den Viewport.
 */
.hinweis-modal {
	inline-size: 40rem;
	margin: auto;
	padding: 0;
	border: 0;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--gray-100);
}

.hinweis-modal::backdrop {
	background: color-mix(in srgb, var(--wp--preset--color--primary-dark) 70%, transparent);
}

/* Eigene Media Query: der globale Reduced-Motion-Reset (*, *::before, *::after) erfasst ::backdrop nicht. */
@media (prefers-reduced-motion: no-preference) {
	.hinweis-modal[open],
	.hinweis-modal[open]::backdrop {
		animation: hinweis-modal-fade-in 1s var(--ease-smooth);
	}
}

@keyframes hinweis-modal-fade-in {
	from {
		opacity: 0;
	}
}

.hinweis-modal__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--jw-space-16);
	padding: var(--jw-space-24);
}


/* ── Schließen (X) ── */

.hinweis-modal__close {
	position: absolute;
	inset-block-start: var(--jw-space-8);
	inset-inline-end: var(--jw-space-8);
	display: flex;
	align-items: center;
	justify-content: center;
	min-inline-size: var(--min-tap-target);
	min-block-size: var(--min-tap-target);
	padding: var(--jw-space-8);
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.hinweis-modal__close:hover {
	color: var(--wp--preset--color--primary);
}

.hinweis-modal__close:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}


/* ── Inhalt ── */

/* Platz rechts, damit lange Überschriften nicht unter das X laufen. */
.hinweis-modal__title {
	margin: 0;
	padding-inline-end: var(--min-tap-target);
	font-size: var(--wp--preset--font-size--large);
}

.hinweis-modal__text > :first-child {
	margin-block-start: 0;
}

.hinweis-modal__text > :last-child {
	margin-block-end: 0;
}

/* Rhythmus um Zwischenüberschriften wie im jw-base-Richtext-Block – global gibt es nur p + p. */
.hinweis-modal__text > * + :is(h3, h4) {
	margin-block-start: 1em;
}

.hinweis-modal__text > :is(h3, h4) + * {
	margin-block-start: var(--jw-space-8);
}