/**
 * Hinweis-Popup in drei Formen (inc/popup.php, 06.10.2026).
 *
 * Es gibt keinen Figma-Frame dafür; gebaut aus NeBi-Bausteinen wie das
 * Consent-Banner: Fläche mit 1px-Rahmen ohne Radius, Überschrift in Plex Sans,
 * die Figma-Knöpfe aus buttons.css.
 *
 *   corner  Karte unten rechts, Knopf „Primary“ S. Liegt unter dem Kopf
 *           (z-index 100, darin das mobile Menü) und unter dem Consent-Banner.
 *   center  Dialog in der Mitte (720px), Knopf „Primary“ L; die Seite dahinter
 *           ist mit der Grundfläche überlagert (`::backdrop`). Schrift aus der
 *           Figma-Skala: Titel Light 55/66 wie Panel (D4) und Newsletter-Band
 *           (D7), mit deren Stufen darunter (36–48 px, mobil 27/32); Text in
 *           der Lead-Größe der Startseite (`lg`/32, mobil 18/24).
 *   bar     Leiste über dem Kopf in der Markenfläche wie der Knopf „Anmelden“,
 *           Knopf „Outlined“ S; scrollt mit der Seite weg, der Kopf klebt.
 */

.nebi-popup {
	color: var(--text-primary);
}

/* `hidden` muss gegen die display-Regeln unten gewinnen (ARCHITECTURE.md §5b). */
.nebi-popup[hidden] { display: none; }

.nebi-popup__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
}

.nebi-popup__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
}

.nebi-popup__title,
.nebi-popup__text {
	margin: 0;
}

.nebi-popup__title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 400;
	line-height: 1.4;
}

.nebi-popup__text {
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.5;
}

.nebi-popup__close {
	position: absolute;
	inset-block-start: calc(-1 * var(--wp--preset--spacing--20));
	inset-inline-end: calc(-1 * var(--wp--preset--spacing--20));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--button-block-size-sm);
	block-size: var(--button-block-size-sm);
	padding: 0;
	border: 0;
	background-color: transparent;
	color: var(--text-primary);
	cursor: pointer;
	transition: background-color var(--motion-base) var(--motion-ease);
}
.nebi-popup__close:hover { background-color: var(--button-outline-hover-fill); }

/* Die erste Zeile macht dem Schließen-Knopf oben rechts Platz, der Rest nutzt die Breite. */
.nebi-popup__close + .nebi-popup__body > :first-child { padding-inline-end: var(--wp--preset--spacing--30); }

.nebi-popup__link { margin-block-start: var(--wp--preset--spacing--10); }

/* ── corner: klein unten rechts ─────────────────────────────────────── */
.nebi-popup--corner {
	position: fixed;
	inset-block-end: var(--wp--preset--spacing--30);
	inset-inline-end: var(--wp--preset--spacing--30);
	z-index: 90;
	inline-size: min(22.5rem, 100% - 2 * var(--wp--preset--spacing--30));
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--border-strong);
	background-color: var(--surface-base);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	transform: translateY(var(--wp--preset--spacing--20));
	transition:
		opacity   var(--motion-base) var(--motion-ease),
		transform var(--motion-base) var(--motion-ease);
}
.nebi-popup--corner.is-visible {
	opacity: 1;
	transform: none;
}

/* Ist „Nach oben“ da (site.css, 56px), steht die Karte darüber statt darauf. */
body:has(.nebi-to-top:not([hidden])) .nebi-popup--corner {
	inset-block-end: calc(var(--wp--preset--spacing--30) + 56px + var(--wp--preset--spacing--20));
}

/* ── center: groß in der Mitte ──────────────────────────────────────── */
.nebi-popup--center {
	/* Eine Quelle für Titelgröße und -zeile: das Kreuz rechnet daraus seine Mitte. */
	--popup-title-size: 55px;
	--popup-title-line: calc(var(--popup-title-size) * 1.2);
	inline-size: min(45rem, 100% - 2 * var(--wp--preset--spacing--20));
	max-inline-size: none;
	max-block-size: calc(100% - 2 * var(--wp--preset--spacing--20));
	overflow-y: auto;
	padding: var(--wp--preset--spacing--60);
	border: 1px solid var(--border-strong);
	background-color: var(--surface-base);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	transform: translateY(var(--wp--preset--spacing--20));
	transition:
		opacity   var(--motion-base) var(--motion-ease),
		transform var(--motion-base) var(--motion-ease);
}
.nebi-popup--center::backdrop {
	background-color: color-mix(in srgb, var(--surface-base) 80%, transparent);
	opacity: 0;
	transition: opacity var(--motion-base) var(--motion-ease);
}
.nebi-popup--center.is-visible,
.nebi-popup--center.is-visible::backdrop {
	opacity: 1;
	transform: none;
}
/* Nur Startpunkt des Fokus, nicht bedienbar — ohne Ring (template-parts/popup.php). */
.nebi-popup--center .nebi-popup__panel:focus { outline: none; }
.nebi-popup--center .nebi-popup__panel { gap: var(--wp--preset--spacing--40); }
.nebi-popup--center .nebi-popup__body { gap: var(--wp--preset--spacing--30); }
.nebi-popup--center .nebi-popup__title {
	font-size: var(--popup-title-size);
	font-weight: 300;
	line-height: var(--popup-title-line);
	overflow-wrap: break-word;
}
.nebi-popup--center .nebi-popup__text {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 32px;
}
.nebi-popup--center .nebi-popup__link { margin: 0; }
/* Das Kreuz mittig auf der ersten Titelzeile. */
.nebi-popup--center .nebi-popup__close { inset-block-start: calc((var(--popup-title-line) - var(--button-block-size-sm)) / 2); }
.nebi-popup--center .nebi-popup__close + .nebi-popup__body > :first-child { padding-inline-end: var(--wp--preset--spacing--40); }

/* Die Seite dahinter scrollt nicht mit — rein strukturell, deshalb CSS. */
html:has(.nebi-popup--center[open]) { overflow: hidden; }

/* ── bar: Leiste über dem Kopf ──────────────────────────────────────── */
.nebi-popup--bar {
	border-block-end: 1px solid var(--border-strong);
	background-color: var(--fill-brand);
}
.nebi-popup--bar .nebi-popup__panel {
	flex-direction: row;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--10);
}
.nebi-popup--bar .nebi-popup__body {
	flex: 1;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: var(--wp--preset--spacing--20);
	row-gap: 0;
	padding: 0;
}
.nebi-popup--bar .nebi-popup__title {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	line-height: 1.5;
}
.nebi-popup--bar .nebi-popup__link {
	order: 1;
	flex-shrink: 0;
	margin: 0;
}
.nebi-popup--bar .nebi-popup__close {
	position: static;
	order: 2;
	flex-shrink: 0;
}
.nebi-popup--bar .nebi-popup__close:hover { background-color: var(--button-secondary-hover-fill); }

@media (width < 1024px) {
	.nebi-popup--center {
		--popup-title-size: clamp(36px, 5vw, 48px);
		padding: var(--wp--preset--spacing--50);
	}
}

@media (width < 600px) {
	.nebi-popup--corner {
		inset-inline: var(--wp--preset--spacing--20);
		inset-block-end: var(--wp--preset--spacing--20);
		inline-size: auto;
	}
	body:has(.nebi-to-top:not([hidden])) .nebi-popup--corner {
		inset-block-end: calc(var(--wp--preset--spacing--20) + 56px + var(--wp--preset--spacing--20));
	}

	.nebi-popup--center {
		--popup-title-size: 27px;
		--popup-title-line: 32px;
		padding: var(--wp--preset--spacing--30);
	}
	.nebi-popup--center .nebi-popup__panel { gap: var(--wp--preset--spacing--30); }
	.nebi-popup--center .nebi-popup__body { gap: var(--wp--preset--spacing--20); }
	.nebi-popup--center .nebi-popup__text { font-size: 18px; line-height: 24px; }

	/* Text über die Breite neben dem Kreuz, der Knopf darunter. */
	.nebi-popup--bar .nebi-popup__panel {
		flex-wrap: wrap;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--10);
		padding-block: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
		padding-inline-end: var(--wp--preset--spacing--10);
	}
	.nebi-popup--bar .nebi-popup__body {
		flex-basis: calc(100% - var(--button-block-size-sm) - var(--wp--preset--spacing--10));
		flex-direction: column;
		padding-block-start: var(--wp--preset--spacing--10);
	}
	.nebi-popup--bar .nebi-popup__close { order: 1; }
	.nebi-popup--bar .nebi-popup__link { order: 2; }
}