/* Beitrags-Karussell "Aktuelle Projekte" (Klasse "projekt-karussell").
   Styling an die Referenz-Vorlage ("Sallier Website Startseite.html" im Projektordner)
   angeglichen: 340px breite Karten, 260px Bild (wie im Projekt-Grid, siehe projekt-grid.css) +
   Status-Badge, blauer Titel-Bereich mit
   kleiner Schlagworte-Zeile über dem fetten Titel, Pfeil-Buttons neben der Überschrift.
   Die Anzahl der Beiträge ist bereits im Divi-Modul selbst auf 3 begrenzt
   ("postsNumber":"3"). */

/* 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_1" 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 > .projekt-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 > .projekt-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(> .projekt-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. */
.projekt-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: Kompensation dafür, dass ".et_pb_portfolio_items" früher nicht mitwuchs, wenn
	   Kind-Elemente (Titel-Bereich) darüber hinausragten. Das ist durch "height:auto" +
	   ausreichendes "min-height" an ".et_pb_portfolio_items" selbst (siehe unten) inzwischen
	   behoben — 120px waren dadurch reiner Extra-Abstand zum nächsten Modul geworden (sichtbar
	   z. B. zwischen "Aktuelle Projekte" und "Referenzen" auf der Startseite). Auf den normalen
	   Modul-Abstand der Seite reduziert. */
	margin-bottom: var(--space-8) !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. */
.projekt-karussell > .projekt-karussell-titelgruppe {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto !important;
	width: auto !important;
}

.projekt-karussell .et_pb_portfolio_title {
	margin: 0;
	/* Divi setzt hier standardmäßig "padding-bottom:10px" — addiert sich unsichtbar zum
	   "gap:24px" des Moduls und macht den Abstand zu den Karten optisch größer als
	   beabsichtigt (fällt besonders auf, da die Pfeile daneben höher als der Text sind). */
	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). */
.projekt-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. */
.projekt-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;
}

.projekt-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). */
.projekt-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. Wert an die
	   Kartenhöhe angepasst: 360px Bild + 92px Titel-Bereich + 2x20px Padding (siehe unten) = 492px,
	   vorher noch auf die alte, kleinere Bildhöhe (260px) kalibriert — dadurch wurde der
	   untere Teil der Karte (Titel/Standort) abgeschnitten. */
	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;
}

.projekt-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 —
   vorher waren es ~3 volle Karten + Anschnitt. */
.projekt-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. */
.projekt-karussell .et_pb_portfolio_item:last-child {
	width: 536px !important;
	padding-right: 0;
}

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

	.projekt-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. */
	.projekt-karussell .et_pb_portfolio_item:last-child {
		width: 100% !important;
	}

	/* Titelgruppe und Pfeile auf Mobile in einer Zeile halten:
	   Titelgruppe darf nicht die volle Breite einnehmen — 120px Freiraum für die Pfeile (98px + Gap). */
	.projekt-karussell > .projekt-karussell-titelgruppe {
		flex: 0 1 auto !important;
		min-width: 0;
		max-width: calc(100% - 120px - 24px) !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. */
.projekt-karussell {
	overflow: visible !important;
}

.projekt-karussell .et_pb_portfolio_image {
	position: relative;
	height: auto !important;
	overflow: visible !important;
	display: flex !important;
	flex-direction: column !important;
	/* War Navy (passend zur vormals blauen Meta-Box, siehe ".meta" unten) — die Box ist jetzt
	   transparent, daher hier auf Weiß (--color-surface, die tatsächliche Kartenfarbe)
	   umgestellt. Verhindert weiterhin den hauchdünnen Subpixel-Spalt, den Chrome beim Anheben
	   per "transform" (Hover, siehe unten) zwischen Bild und darunterliegendem Bereich rendern
	   kann. */
	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 (analog zum Projekt-Grid, siehe projekt-grid.css): Karte hebt sich
   minimal an. Braucht hier zusätzlich den Innenabstand oben auf ".et_pb_portfolio_items"
   (siehe oben), da der horizontal scrollbare Container sonst per "overflow-y:hidden" den
   Effekt abschneiden würde. Schatten vertieft sich zusätzlich (siehe "--shadow-hover"). */
.projekt-karussell .et_pb_portfolio_item:hover .et_pb_portfolio_image {
	transform: translateY(-4px);
	box-shadow: var(--shadow-hover);
}

/* "Mehr erfahren"-Badge (siehe projekt-karussell-schlagworte.php) — schiebt sich beim Hovern der
   Karte von unten rechts ins Bild, angelehnt an das Label-Badge auf sallier-immobilien.de
   (dort: rotes Quadrat, hier: Sallier-Blau + Text statt Icon). */
.projekt-karussell-hover-badge {
	position: absolute;
	top: -12px;
	right: -12px;
	display: flex;
	align-items: center;
	padding: 12px 20px;
	background-color: var(--color-primary);
	color: #FFFFFF;
	font-family: var(--font-body);
	font-weight: var(--weight-semibold);
	font-size: 14px;
	letter-spacing: var(--tracking-wide);
	border-radius: 0;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: none;
	z-index: 3;
}

.projekt-karussell .et_pb_portfolio_item:hover .projekt-karussell-hover-badge {
	opacity: 1;
	transform: translateY(0);
}

@media (hover: none) {
	.projekt-karussell-hover-badge {
		display: none;
	}

	.projekt-karussell .et_pb_portfolio_item:hover .et_pb_portfolio_image,
	.referenzen-karussell .et_pb_portfolio_item:hover .et_pb_portfolio_image {
		transform: none;
		box-shadow: var(--shadow-soft);
	}
}

.projekt-karussell .et_pb_portfolio_image img {
	width: 100% !important;
	/* 360px, wie die Bildkarten auf sallier-immobilien.de (".m-teaser-blog__image") — dadurch
	   nicht mehr synchron mit der Bildhöhe im Projekt-Grid (dort weiterhin 260px, siehe
	   projekt-grid.css), war vorher bewusst gleich gehalten. */
	height: 360px !important;
	/* Divi setzt hier zusätzlich (nicht "!important") "min-height:100%", was sich zirkulär
	   gegen den auto-hohen Flex-Container auflöst und das Bild trotz "height:260px" auf die
	   volle Karten-Höhe (Bild + Meta-Box) aufbläht — dieselbe Ursache wie beim Projekt-Grid
	   (siehe projekt-grid.css). Dadurch wurde die Karte insgesamt zu hoch und die Meta-Box
	   unten vom scrollbaren Container abgeschnitten. */
	min-height: 0 !important;
	flex-shrink: 0;
	object-fit: cover !important;
}

/* Grauer Platzhalter für Beiträge ohne Galeriebild (Markup siehe
   projekt-karussell-schlagworte.php) — nimmt dieselbe Fläche wie das Bild ein. */
.projekt-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). */
.projekt-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. */
.projekt-karussell .et_pb_portfolio_image .meta {
	position: static !important;
	opacity: 1 !important;
	/* Divi setzt hier "z-index:-1" (für den eigentlich hover-basierten Bildunterschrift-Effekt,
	   den wir per "opacity:1" oben schon dauerhaft sichtbar gemacht haben) — da ".et_pb_portfolio_image"
	   "display:flex" ist, gilt z-index als Flex-Item-Eigenschaft auch trotz "position:static" und
	   schiebt die Box hinter das Bild, wodurch Titel/Standort unsichtbar wurden (nur bei Divis
	   eigener Hover-Regel, die den z-index anhebt, kurz sichtbar). */
	z-index: 1 !important;
	width: 100% !important;
	height: auto !important;
	flex: 1;
	background: transparent;
}

.projekt-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 — schlägt hier auf den ganzen Kartenlink durch (sichtbar v.a. beim
	   Standort-Eyebrow). Karten-Links sollen nie unterstrichen sein. */
	text-decoration: none !important;
}

/* Ort (per Filter eingefügt) jetzt ALS die h3-artige, prominente Zeile — Kategorie darunter als
   Standard-Fließtext (siehe die beiden Regeln unten; vorher war es umgekehrt). "order" sortiert
   visuell, ohne die Reihenfolge im HTML (und damit die Lesereihenfolge für Screenreader) zu
   ändern. */
/* "!important": die globale h1-h6-Regel (style.css) setzt margin/font-family/font-weight/
   font-size/color ebenfalls mit "!important" und würde das hier sonst überschreiben. */
/* Wie die globale h1-h6-Regel (gleiche Font-Family), aber kleiner (18px statt 32px) und
   "strong" statt "light" (--weight-semibold/600 statt --weight-light/300 — 700 gibt's als
   Schriftdatei nicht, nur Light/300 und SemiBold/600 sind geladen) — passend für den Ort in der
   Karte statt einer Seitenüberschrift. */
.projekt-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 oben bei
   ".projekt-schlagworte" — die Rollen sind jetzt vertauscht). */
.projekt-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. */
.projekt-karussell .et_overlay {
	display: none;
}