/* Beitrags-Karussell "Referenzen" (Klasse "referenzen-karussell").
   Ausgangs-Styling identisch zu "projekt-karussell.css" (Referenz-Vorlage "Sallier Website
   Startseite.html" im Projektordner) — bewusst als EIGENE Datei angelegt, damit dieses
   Karussell unabhängig von "projekt-karussell.css" angepasst werden kann.
   Die per PHP eingefügten Elemente (Pfeile, Titel-Gruppe, Status-Badge, Schlagworte-Zeile;
   siehe projekt-karussell-schlagworte.php) nutzen dieselben Klassennamen wie beim
   Projekt-Karussell, werden hier aber jeweils an ".referenzen-karussell" gebunden. */

/* Der eigentliche Engpass für die volle Zeilenbreite war eine WordPress-Core-Regel
   (".is-layout-constrained > *"), die den Bereich unabhängig von Divi auf "max-width:823px"
   begrenzte, da der Divi-"Section"-Block kein "alignfull" trägt — hier aufgehoben.
   Zeile/Spalte/Section werden über ":has()" anhand der Karussell-Klasse gefunden statt über
   Divis nummerierte Klassen (".et_pb_row_2" usw.) — die Nummerierung ist pro Modul-Instanz
   unterschiedlich und ändert sich, sobald im Builder etwas hinzugefügt/entfernt wird. */
.et_pb_section:has(> .et_pb_row > .et_pb_column > .referenzen-karussell) {
	max-width: none !important;
}

/* Nur ab Desktop-Breite erzwingen — auf Mobile/Tablet sonst kein Rand mehr zum Rest der
   Seite (Divis eigenes, zentriertes Standard-Verhalten, das z. B. der Footer unverändert
   nutzt, sollte dort erhalten bleiben). */
@media (min-width: 1440px) {
	.et_pb_row:has(> .et_pb_column > .referenzen-karussell) {
		width: 100% !important;
		max-width: 1440px !important;
	}
}

/* Das Modul selbst hat "flex-grow:0"/"flex-shrink:0" und dehnt sich dadurch nicht
   automatisch auf die volle Breite seiner Spalte. */
.et_pb_column:has(> .referenzen-karussell) {
	width: 100% !important;
}

/* Modul als Flex-Container für seine eigenen Kinder: Überschrift + Pfeile in einer Zeile
   (Referenz: "justify-content:space-between;align-items:flex-end"), Kartenreihe darunter
   (per "flex-basis:100%" auf ".et_pb_portfolio_items" in eine neue Zeile gezwungen). */
/* "flex-direction:row" MUSS explizit gesetzt werden: Divi setzt für "et_flex_module"-
   Elemente die CSS-Variable "--flex-direction:column", die ohne unsere eigene, explizite
   Angabe von einer Divi-eigenen Regel gelesen wird — das Modul layoutete dadurch in
   Spalten- statt Zeilenrichtung, wodurch Überschrift/Pfeile/Karten weit auseinanderrissen. */
.referenzen-karussell {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: flex-end !important;
	justify-content: space-between !important;
	gap: 24px !important;
	width: 100% !important;
	flex: 1 1 100% !important;
	/* War 120px: siehe Begründung in projekt-karussell.css — durch "height:auto" +
	   ausreichendes "min-height" an ".et_pb_portfolio_items" (siehe unten) nicht mehr nötig. */
	margin-bottom: var(--space-16) !important;
}

/* Titel-Gruppe — ohne explizite Breitenbegrenzung beanspruchte die Überschrift offenbar die
   volle Zeilenbreite (Flex-Item-Standardverhalten für Block-Elemente kann das je nach
   Kontext tun) und drängte dadurch die Pfeile allein in eine neue Zeile statt daneben. */
.referenzen-karussell > .projekt-karussell-titelgruppe {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto !important;
	width: auto !important;
}

.referenzen-karussell .et_pb_portfolio_title {
	margin: 0;
	/* Divi-Standard-Padding, siehe Begründung in projekt-karussell.css. */
	padding-bottom: 0 !important;
	color: var(--color-primary) !important;
}

/* Pfeil-Buttons neben der Überschrift (Markup siehe projekt-karussell-schlagworte.php) —
   rein optisch, ohne Funktion, da aktuell nur eine feste Anzahl Beiträge gezeigt wird.
   "margin-left:auto" hält sie rechtsbündig, auch ohne Titel-Gruppe daneben (kein Modul-Titel
   gesetzt). */
.referenzen-karussell > .projekt-karussell-pfeile {
	display: flex;
	gap: 10px;
	flex-shrink: 0;
	margin-left: auto;
}

/* Jetzt echte "<button>"-Elemente (siehe projekt-karussell-schlagworte.php) — Browser-
   Standard-Aussehen (Hintergrund, Innenabstand, Schrift) zurücksetzen. */
.referenzen-karussell > .projekt-karussell-pfeile .projekt-karussell-pfeil {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--color-primary);
	border-radius: 0;
	color: var(--color-primary);
	cursor: pointer;
	font: inherit;
}

.referenzen-karussell .projekt-karussell-pfeil:disabled {
	opacity: 0.3 !important;
	cursor: default !important;
	pointer-events: none;
}

/* Horizontal scrollbares Karussell (analog zur Referenz): mehr Karten als in die 1200px-
   Zeile passen bleiben in EINER Zeile ("flex-wrap:nowrap") und laufen stattdessen über den
   Rand hinaus in einen scrollbaren Bereich — dadurch ist die nächste Karte bewusst nur
   angeschnitten sichtbar, als Hinweis zum Weiterscrollen. Reines CSS (kein Divi-JS nötig). */
.referenzen-karussell .et_pb_portfolio_items {
	flex: 1 0 100% !important;
	width: 100% !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	overflow-x: auto !important;
	/* "hidden" statt "auto": wir wollen NIE vertikal scrollen können — mit "auto" reichte
	   schon eine winzige Restüberlappung (die sichtbare horizontale Scrollleiste selbst
	   beansprucht etwas Höhe) aus, um zusätzlich eine vertikale Scrollleiste auszulösen. */
	overflow-y: hidden !important;
	scroll-snap-type: x mandatory;
	/* Scrollleiste optisch ausblenden (Firefox + Chrome/Safari/Edge, siehe Regeln unten) —
	   gescrollt werden kann trotzdem weiterhin per Touch/Trackpad/Pfeil-Buttons, nur ohne
	   sichtbare Leiste (wie in der Referenz-Vorlage). */
	scrollbar-width: none;
	/* Platz oben/unten UND links/rechts für den Hover-Effekt der Karten (Anheben + Schatten,
	   siehe weiter unten): ohne diesen Puffer würde "overflow-y:hidden"/"overflow-x:auto"
	   (siehe oben) den Effekt abschneiden, da die Karten sonst exakt bündig mit dem Rand dieses
	   Containers abschließen. Links/rechts besonders auf Mobile sichtbar, wo jede Karte
	   "width:100%" hat und somit direkt an der Container-Kante liegt (siehe Media Query unten). */
	padding: 20px 16px;
	/* Sobald "overflow" nicht mehr "visible" ist, behandelt Flexbox die automatische
	   Mindesthöhe anders (fällt auf 0 statt auf die Inhaltsgröße zurück) — dadurch
	   kollabierte der Bereich fast komplett. "min-height" verhindert das: siehe Begründung/
	   Rechnung in projekt-karussell.css. */
	min-height: 500px;
	/* ".et_pb_portfolio_items" braucht "overflow-x:auto" fürs horizontale Scrollen — ein
	   Element kann aber nicht "overflow-x:auto" UND "overflow-y:visible" zugleich haben (der
	   Browser erzwingt bei gemischten Werten auch für "y" einen Scroll-Container statt
	   "visible"). Statt dessen bekommt der Container per "height:auto" genug eigene Höhe,
	   damit Bild + Titel-Bereich komplett hineinpassen und es vertikal gar nichts zum
	   Abschneiden gibt — Divis eigene, per JS fest gesetzte (zu kurze) Höhe wird damit
	   überschrieben. */
	height: auto !important;
}

.referenzen-karussell .et_pb_portfolio_items::-webkit-scrollbar {
	display: none;
}

/* "gap" auf ".et_pb_portfolio_items" hat bei diesem Modul wiederholt keine sichtbare
   Wirkung gezeigt (0px Abstand trotz gesetztem Wert) — Abstand daher per "padding" an der
   Karte selbst, wirkt zuverlässig unabhängig von Divis Layout-Mechanismus. Da Bild und
   Titel-Bereich beide Kinder DIESER Karte sind, wirkt sich das Padding gleichermaßen auf
   beide aus. */
/* Breiter als vorher (560px statt 364px): bei 1200px Zeilenbreite passen so nur noch 2 volle
   Karten hinein, plus ein angeschnittenes Stück der 3. Karte (~80px) als Scroll-Hinweis. */
.referenzen-karussell .et_pb_portfolio_item {
	box-sizing: border-box !important;
	flex: none !important;
	width: 560px !important;
	padding-right: 24px;
	display: flex !important;
	flex-direction: column !important;
	scroll-snap-align: start;
	overflow: visible !important;
}

/* Bei der letzten Karte fällt sowohl das Padding als auch die dafür zusätzlich eingerechneten
   24px der Breite weg, damit sie genauso breit (sichtbar 536px) wie die anderen Karten ist. */
.referenzen-karussell .et_pb_portfolio_item:last-child {
	width: 536px !important;
	padding-right: 0;
}

@media (max-width: 767px) {
	.referenzen-karussell .et_pb_portfolio_items {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.referenzen-karussell .et_pb_portfolio_item {
		width: 100% !important;
		padding-right: 0;
	}

	/* ":last-child" oben ist spezifischer als die normale Karten-Regel und gewinnt daher auch
	   hier — muss deshalb hier nochmal mit gleicher Spezifität überschrieben werden, sonst
	   bleibt die letzte Karte auf Mobile bei der festen 340px-Breite hängen, statt wie die
	   anderen auf 100% zu wachsen. */
	.referenzen-karussell .et_pb_portfolio_item:last-child {
		width: 100% !important;
	}
}

/* Divi setzt auf mehreren Ebenen standardmäßig "overflow:hidden" (Modul, Karte,
   Bild-Container) — dadurch würde der jetzt darüber hinausragende Titel-Bereich
   abgeschnitten, wenn nicht überall "visible" erzwungen wird. */
.referenzen-karussell {
	overflow: visible !important;
}

.referenzen-karussell .et_pb_portfolio_image {
	position: relative;
	height: auto !important;
	overflow: visible !important;
	display: flex !important;
	flex-direction: column !important;
	/* War Navy, jetzt Weiß: siehe Begründung in projekt-karussell.css. */
	background: var(--color-surface);
	box-shadow: var(--shadow-soft);
	/* Das Bild hat in Divis Markup keinen eigenen Link (nur der Titel-Bereich) — die
	   Navigation dorthin wird per JS ausgelöst (siehe projekt-karussell.js), der Cursor
	   signalisiert trotzdem die Klickbarkeit. */
	cursor: pointer;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Leichter Hover-Effekt: siehe Begründung in projekt-karussell.css. */
.referenzen-karussell .et_pb_portfolio_item:hover .et_pb_portfolio_image {
	transform: translateY(-4px);
	box-shadow: var(--shadow-hover);
}

/* "Mehr erfahren"-Badge: Klasse wird von der PHP-Injektion (projekt-karussell-schlagworte.php)
   für BEIDE Karussells gleich benannt ("projekt-karussell-hover-badge", analog zu
   "projekt-status-badge" & Co.) — die Basis-Optik steht daher schon in projekt-karussell.css
   (immer mitgeladen, siehe projektseiten.php), hier nur der Hover-Trigger für dieses Karussell. */
.referenzen-karussell .et_pb_portfolio_item:hover .projekt-karussell-hover-badge {
	opacity: 1;
	transform: translateY(0);
}

.referenzen-karussell .et_pb_portfolio_image img {
	width: 100% !important;
	/* 360px, wie die Bildkarten auf sallier-immobilien.de: siehe Begründung in
	   projekt-karussell.css. */
	height: 360px !important;
	/* Siehe Begründung in projekt-karussell.css: Divis "min-height:100%" bläst das Bild sonst
	   auf die volle Karten-Höhe auf und schneidet dadurch die Meta-Box unten ab. */
	min-height: 0 !important;
	flex-shrink: 0;
	object-fit: cover !important;
}

/* Grauer Platzhalter für Beiträge ohne Galeriebild: siehe Begründung in projekt-karussell.css. */
.referenzen-karussell .et_pb_portfolio_image .projekt-bild-platzhalter {
	width: 100%;
	height: 360px;
	flex-shrink: 0;
	background: var(--color-canvas);
}

/* Status-Badge oben links auf dem Bild (Markup siehe projekt-karussell-schlagworte.php). */
.referenzen-karussell .projekt-status-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 6px 12px;
	background: var(--color-accent);
	color: var(--color-surface);
	font-family: var(--font-body);
	font-weight: var(--weight-semibold);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: 0;
}

/* Titel-Bereich als eigener blauer Container UNTER dem Bild statt Divis Standard-Hover-
   Overlay (Divi setzt hier standardmäßig "position:absolute;opacity:0", nur bei Hover
   sichtbar) — hier im normalen Fluss dauerhaft sichtbar direkt unter dem Bild. */
.referenzen-karussell .et_pb_portfolio_image .meta {
	position: static !important;
	opacity: 1 !important;
	/* Siehe Begründung in projekt-karussell.css: Divis "z-index:-1" schiebt die Box sonst (als
	   Flex-Item trotz "position:static") hinter das Bild, Titel/Standort werden unsichtbar. */
	z-index: 1 !important;
	width: 100% !important;
	height: auto !important;
	flex: 1;
	background: transparent;
}

.referenzen-karussell .et_pb_portfolio_image .meta a {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 20px 24px;
	/* Die globale Body-Link-Regel (".et_pb_text a", siehe style.css) unterstreicht Links
	   standardmäßig — Karten-Links sollen nie unterstrichen sein. */
	text-decoration: none !important;
}

/* Ort jetzt als h3-artige, prominente Zeile — Kategorie darunter als Standard-Fließtext (siehe
   Begründung in projekt-karussell.css; vorher war es umgekehrt). "order" sortiert visuell, ohne
   die Reihenfolge im HTML zu ändern. */
.referenzen-karussell .et_pb_portfolio_image .meta .projekt-schlagworte {
	order: 1;
	display: block;
	margin: 0;
	padding: 0;
	text-indent: 0;
	font-family: var(--font-heading);
	font-weight: var(--weight-semibold);
	font-size: 24px;
	letter-spacing: var(--tracking-wide);
	text-transform: none;
	text-decoration: none;
	color: var(--color-primary);
}

/* Standard-Fließtext statt der vorherigen h3-Optik: siehe Begründung in projekt-karussell.css. */
.referenzen-karussell .et_pb_portfolio_image .meta .et_pb_module_header {
	order: 2;
	margin: 4px 0 0 !important;
	padding: 0 !important;
	text-indent: 0 !important;
	font-family: var(--font-body) !important;
	font-weight: var(--weight-light) !important;
	font-size: 18px !important;
	letter-spacing: var(--tracking-wide) !important;
	color: var(--color-text) !important;
}

/* Hover-Lupe wird nicht mehr gebraucht, da der Titel jetzt dauerhaft sichtbar ist. */
.referenzen-karussell .et_overlay {
	display: none;
}