/* ============================================================
   Hero-Glitch-Hintergrund oben auf Blog-, Kategorie-,
   Einzelartikel- und Standard-Seiten – analog zum Hero der
   "Über uns"/SITE-Seite.

   Umsetzung als begrenztes Hero-Band per ::before (feste Höhe,
   background-size: cover), damit die Glitch-Textur sauber und
   unverzerrt im Kopfbereich sitzt und nach unten in Schwarz
   ausläuft – statt über die ganze Seitenhöhe gestreckt zu werden.
   ============================================================ */
body.category,
body.page-template-page_alle_artikel,
body.page-template-default,
body.single {
	position: relative;
	/* Der Body beginnt sonst durch Margin-Collapse erst ~98px unter dem
	   Viewport-Rand – dadurch säße das Band (top:0 relativ zum Body) zu tief
	   und oben bliebe ein schwarzer Streifen. Ein transparenter 1px-Border oben
	   unterbindet den Collapse, sodass Body und Band am echten oberen
	   Browserrand ansetzen (Desktop wie Mobil). */
	border-top: 1px solid transparent;
}

body.category::before,
body.page-template-page_alle_artikel::before,
body.page-template-default::before,
body.single::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: clamp(380px, 56vh, 640px);
	background: #0a0a0a url(../img/bg_hero_uu.jpg) center top / cover no-repeat;
	z-index: 0;
	pointer-events: none;
}

/* Inhalts-Container transparent + über dem Hero-Band. */
body.category .blog,
body.page-template-page_alle_artikel .blog,
body.page-template-default .page-view,
body.single .blog {
	background-color: transparent !important;
	background-image: none !important;
	position: relative;
	z-index: 1;
}

/* Blog-/Kategorie-Headlines auf dem Handy eine Stufe größer.
   Desktop bleibt fs-3 (in den Templates gesetzt); hier nur mobil auf die
   fs-2-Größe angehoben. Höhere Spezifität als die Bootstrap-Utility, gewinnt
   daher ohne !important. */
@media (max-width: 767.9px) {
	.blog-grid .card-title {
		font-size: calc(1.325rem + .9vw); /* entspricht Bootstrap .fs-2 */
	}
}