@charset "UTF-8";
/* CSS Document */

/* [Claude 2026-08-19] .ElementMedia/.ElementOverlay - s. Element-Bauplan Abschnitt 1/7.
   .cor kommt weiterhin aus der bestehenden, block-eigenen #<id> .cor{...}-Regel
   (modul-element-settings.php) - hier nur die Struktur/Faerbung drumherum, kein Duplikat. */

/* [Claude 2026-08-19, Bugfix] .Element ist meist ein <a> - ohne "display:block" bleibt es
   inline, wodurch jede von aussen gesetzte Hoehe (z. B. "#<id> .SliderOverviewSlide .Element{
   height:...}") wirkungslos ist und die ganze Karte auf 0px Hoehe kollabiert (live beobachtet:
   Slider Overview auf der Startseite komplett unsichtbar). */
.Element{
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

/* [Claude 2026-09-05] Zweite Karten-Huelle neben dem bestehenden Overlay-Layout (Text UEBER dem
   Bild, s. .ElementMedia/.ElementOverlay unten): .ElementList stellt Medium (Spalte 1) und
   Header/Boxen/Footer (Spalte 2, .ElementInfo) stattdessen als zwei GLEICHRANGIGE Grid-Spalten
   nebeneinander - fuer Listen-Darstellungen (News Overview), bei denen das Bild nicht als
   Hintergrund hinter dem Text liegen soll. .ElementMedia/.ElementOverlay/.ElementContentWrapper
   selbst sind unveraendert (dieselben Regeln unten gelten in beiden Layouts), nur ihre Anordnung
   und die fehlende Ueberlappung sind hier neu. Spaltenbreite der Medienspalte ueber
   --card-list-media-width (vom Aufrufer gesetzt, Default 30%). */
.Element.ElementList{
	display: grid;
	grid-template-columns: var(--card-list-media-width, 30%) auto;
	align-items: stretch;
	height: auto;
}
.Element.ElementList .ElementInfo{
	position: relative;
	min-width: 0;
}

.ElementMedia{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	/* [Claude 2026-09-01] Karten-Hintergrund - Rolle "BG Color Select" (--card-bg), sichtbar wenn
	   kein Bild/Video gesetzt ist bzw. durch ein transparentes Bild/den Overlay-Tint hindurch. */
	background-color: var(--card-bg);
}
.Element:hover .ElementMedia{
	background-color: var(--card-bg-hover, var(--card-bg));
}

.ElementMediaImage{
	position: absolute;
	inset: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	transition: transform 0.4s ease-out;
}

/* [Claude 2026-08-29, Bugfix] "top/left/transform: none" noetig, um die globale "video{...}"-
   Regel in style.css zu kontern - die setzt (fuer eine aeltere Video-Hintergrund-Technik)
   top:50%;left:50%;transform:translate(-50%,-50%), was hier nicht mit ueberschrieben wurde, da
   "inset:0" den transform nicht mit abdeckt. Ergebnis war ein Versatz um die halbe eigene
   Breite/Hoehe nach oben-links (live per getBoundingClientRect() verifiziert). */
.ElementMediaVideo{
	position: absolute;
	inset: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: none;
}

/* Zoom bei Hover - nur wirksam, wenn .zoom gesetzt ist (nur bei Bild-Modus, s. Abschnitt 7) */
.ElementMedia.zoom .ElementMediaImage,
.Element:hover .ElementMedia.zoom .ElementMediaImage{
	transform: scale(1);
}
.Element:hover .ElementMedia.zoom .ElementMediaImage{
	transform: scale(1.06);
}
/* [Claude 2026-09-04, Bugfix] Zoom reagierte im Content Slider (Flickity mit wrapAround:true,
   klont Slides fuer endloses Loopen und positioniert sie selbst per eigenem transform) nicht auf
   Hover, obwohl exakt dieselbe Regel bei Slider Overview (wrapAround:false, keine Klone) einwandfrei
   funktioniert - live per getComputedStyle() bestaetigt: selbst ein direkt inline gesetztes
   "transform...!important" auf dem exakten, tatsaechlich gehoverten Element wurde nicht neu
   berechnet, waehrend andere Properties (z.B. background-color) sofort griffen. Deutet auf eine
   Compositing-Layer-Kollision mit Flickitys eigenem, auf den geklonten Zellen laufendem Transform
   hin. "will-change:transform" zwingt den Browser, fuer dieses Bild von vornherein eine EIGENE
   Compositing-Ebene zu reservieren, unabhaengig von Flickitys Zell-Transform - das ist der
   Standard-Fix fuer verschachtelte Transforms, die innerhalb eines fremdverwalteten (hier: von
   Flickity animierten) Transform-Kontexts nicht neu rendern. */
.ElementMedia.zoom .ElementMediaImage{
	will-change: transform;
}

.ElementOverlay{
	position: absolute;
	inset: 0;
	background-color: var(--card-overlay, transparent);
	transition: background-color 0.3s ease;
}
.Element:hover .ElementOverlay{
	background-color: var(--card-overlay-hover, var(--card-overlay, transparent));
}

/* [Claude 2026-08-19, Bugfix] Kein Innenabstand vorhanden - Boxen/Footer sassen buendig am
   Rand des Overlays. box-sizing:border-box noetig, sonst sprengt das Padding die 100%-Hoehe. */
.ElementContentWrapper{
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	padding: calc(var(--space-m, 1vw) * 2);
}