/* =========================================================================
   Parallax-Banner (zentral)
   Wird von der KI-Vorlage "Parallax-Banner" ueber Klassennamen genutzt.
   Die KI erzeugt nur die Struktur:
     <div class="parallax-banner">
       <img ...>                                  (tauschbares Bild)
       <div class="parallax-banner__overlay"></div>
       <div class="parallax-banner__content"> Ueberschrift + Text </div>
     </div>
   Positionierung, Overlay, heller Text und der Parallax-Effekt kommen von hier
   (JS: /js/parallax-banner.js). Das Bild bleibt ein normales, im Inline-Editor
   per Doppelklick austauschbares <img>-Element.
   ========================================================================= */

.parallax-banner{
	position:relative;
	width:100%;
	min-height:340px;
	overflow:hidden;
	display:flex;
	align-items:center;
	justify-content:center;
}

/* Das Bild als Cover - ueberschreibt bewusst die globale img-thumbnail-Klasse */
.parallax-banner img{
	position:absolute !important;
	left:0;
	top:-15%;
	width:100% !important;
	max-width:none !important;
	height:130% !important;
	object-fit:cover !important;
	margin:0 !important;
	padding:0 !important;
	border:0 !important;
	border-radius:0 !important;
	background:none !important;
	box-shadow:none !important;
	z-index:0;
	will-change:transform;
}

.parallax-banner__overlay{
	position:absolute;
	inset:0;
	background:rgba(0,0,0,.4);
	z-index:1;
	pointer-events:none;
}

.parallax-banner__content{
	position:relative;
	z-index:2;
	max-width:960px;
	padding:3rem 1.25rem;
	text-align:center;
	color:#fff;
	/* Damit das Bild im Inline-Editor durch die freie Flaeche anklickbar bleibt: */
	pointer-events:none;
}
.parallax-banner__content > *{ pointer-events:auto; }
.parallax-banner__content,
.parallax-banner__content h1,
.parallax-banner__content h2,
.parallax-banner__content h3,
.parallax-banner__content p{ color:#fff; }

/* Touch-Geraete und "reduzierte Bewegung": kein Parallax, stabiles Cover-Bild */
@media (hover:none){
	.parallax-banner img{ top:0; height:100% !important; transform:none !important; }
}
@media (prefers-reduced-motion: reduce){
	.parallax-banner img{ top:0; height:100% !important; transform:none !important; }
}


/* =========================================================================
   Video-Vorschaubilder (Klasse "videostart") bzw. das per Klick eingeblendete
   <video>-Element: der umgebende Container (z.B. mit overflow:hidden und
   aspect-ratio) wuerde das Video beschneiden. Sobald ein videostart-Bild oder
   ein <video> direkt darin liegt, wird das Beschneiden aufgehoben.
   ========================================================================= */
*:has(> .videostart),
*:has(> video){ overflow:visible !important; }