section .pyrum-overline-container {
	position: sticky !important;
	top: 66px;
	bottom: 200px;
	z-index: 100;
}

@media (min-width: 782px) {
	section .pyrum-overline-container {
		position: static !important;
	}
}

.wp-admin section .pyrum-overline-container {
	z-index: 10;
}

section.has-background .pyrum-overline-container {
	margin-top: 36px;
	transform: translateY(-50%);
	/* Sticky "top" gilt für die Position VOR dem translateY(-50%) - ohne
	   Ausgleich rutscht die obere Hälfte der Badge unter den fixed Header
	   (z-index 10000 > 100) und wirkt "abgeschnitten". Container-Höhe
	   entspricht der Badge-Höhe (2 x 0.75em Padding + 1em Line-Height),
	   die Hälfte davon holen wir hier oben drauf. */
	top: calc(66px + 1.25 * var(--wp--preset--font-size--overline));
}

section.has-background .pyrum-overline-container + h2 {
	margin-top: 0;
}

.is-style-pyrum-overline {
	position: relative;
	width: fit-content;
	margin-inline-start: calc(-1 * var(--wp--style--root--padding-right));
	margin-inline-end: auto;
	background-color: var(--wp--preset--color--primary-light);
	padding: 0.75em 1.5em;
	border-radius: 0 8px 8px 0;
	font-size: var(--wp--preset--font-size--overline);
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
}

@media (min-width: 1460px) {
	.is-style-pyrum-overline::before {
		content: "";
		position: absolute;
		right: 100%;
		top: 0;
		bottom: 0;
		width: 200px;
		background-color: var(--wp--preset--color--primary-light);
		border-radius: 8px 0 0 8px;
	}
}

@media (min-width: 1700px) {
	.is-style-pyrum-overline::before {
		display: none;
	}

	.is-style-pyrum-overline {
		margin-inline-start: 0;
		border-radius: 8px;
	}
}