/* =========================================================
   FUCHSBAU – Beitragsseite
   ========================================================= */


/* =========================================================
   SEITENLAYOUT
   ========================================================= */

.fuchsbau-posts-page {
	max-width: 1380px;

	margin:
		90px
		auto
		110px !important;

	padding:
		0
		32px;
}


.fuchsbau-posts-intro {
	max-width: 760px;

	margin:
		0
		0
		56px !important;
}


.fuchsbau-posts-heading {
	margin:
		0
		0
		18px;

	color:
		var(--fb3-dark);

	font-size:
		clamp(
			42px,
			4vw,
			60px
		);

	font-weight:
		700;

	line-height:
		1.05;

	letter-spacing:
		-1.5px;
}


.fuchsbau-posts-lead {
	max-width: 680px;

	margin: 0;

	color:
		var(--fb3-muted);

	font-size:
		19px;

	line-height:
		1.7;
}


/* =========================================================
   CAROUSEL
   ========================================================= */

.fuchsbau-posts-carousel {
	position: relative;

	margin-bottom:
		110px;

	background:
		transparent !important;
}


.fuchsbau-posts-carousel-query {
	position: relative;

	padding-bottom:
		84px;

	background:
		transparent !important;

	border-radius:
		0 !important;

	box-shadow:
		none !important;

	overflow:
		visible;
}


/*
 * Die Karten stammen weiterhin aus dem WordPress Query Loop.
 * Nur deren Anordnung wird hier zum horizontalen Carousel.
 */

.fuchsbau-posts-carousel-query
> .wp-block-post-template {
	display: grid !important;

	grid-template-columns:
		none !important;

	grid-template-rows:
		1fr !important;

	grid-auto-flow:
		column;

	grid-auto-columns:
		calc((100% - 48px) / 3);

	gap:
		24px !important;

	width:
		100%;

	margin:
		0 !important;

	padding:
		0
		0
		8px !important;

	overflow-x:
		auto;

	overflow-y:
		hidden;
    
    background:
		transparent !important;

	list-style:
		none !important;

	border-radius:
		0 !important;

	scroll-snap-type:
		x mandatory;

	scroll-behavior:
		smooth;

	scrollbar-width:
		none;

	overscroll-behavior-inline:
		contain;
}


.fuchsbau-posts-carousel-query
> .wp-block-post-template::-webkit-scrollbar {
	display: none;
}


.fuchsbau-posts-carousel-query
> .wp-block-post-template
> .wp-block-post {
	scroll-snap-align:
		start;

	scroll-snap-stop:
		always;
}


/* =========================================================
   CAROUSEL-STEUERUNG
   ========================================================= */

.fuchsbau-carousel-controls {
	position: absolute;

	left: 0;
	right: 0;
	bottom: 0;

	display: flex;

	align-items: center;
	justify-content: center;

	min-height: 56px;

	pointer-events: none;
}


.fuchsbau-carousel-meta {
	display: flex;

	align-items: center;
	justify-content: center;

	gap: 14px;
}


/* Pfeile als überlagerte Buttons */

.fuchsbau-carousel-button {
	position: absolute;

	/* zentriert an der Kachelhöhe, nicht am Progress darunter */
	top: calc((100% - 84px) / 2);
	transform: translateY(-50%);

	display: inline-flex;
	align-items: center;
	justify-content: center;

	pointer-events: auto;

	width: 64px;
	height: 64px;

	padding: 0;

	background:
		rgba(255, 242, 209, 0.96);

	border:
		1px solid rgba(31, 60, 46, 0.10);

	border-radius:
		999px;

	box-shadow:
		0 10px 24px rgba(31, 60, 46, 0.14);

	cursor: pointer;

	transition:
		transform 180ms ease,
		box-shadow 180ms ease,
		background-color 180ms ease,
		border-color 180ms ease;

	overflow: hidden;
}


/* SVG/Icon über Pseudo-Element */
.fuchsbau-carousel-button::before {
	content: "";

	display: block;

	width: 26px;
	height: 26px;

	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}


/* Linker Pfeil */
.fuchsbau-carousel-prev {
	left: -22px;
}

.fuchsbau-carousel-prev::before {
	background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'>\
<path d='M14.5 4.5L7 12l7.5 7.5' stroke='%23E74D24' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>");
}


/* Rechter Pfeil */
.fuchsbau-carousel-next {
	right: -22px;
}

.fuchsbau-carousel-next::before {
	background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'>\
<path d='M9.5 4.5L17 12l-7.5 7.5' stroke='%23E74D24' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>");
}


.fuchsbau-carousel-button:hover:not(:disabled),
.fuchsbau-carousel-button:focus-visible:not(:disabled) {
	background:
		#ffffff;

	border-color:
		rgba(231, 77, 36, 0.28);

	transform:
		translateY(-50%) scale(1.04);

	box-shadow:
		0 14px 28px rgba(31, 60, 46, 0.18);
}


.fuchsbau-carousel-button:disabled {
	background:
		rgba(255, 255, 255, 0.70);

	border-color:
		rgba(31, 60, 46, 0.06);

	box-shadow: none;

	cursor: default;

	opacity: 1;
}

.fuchsbau-carousel-button:disabled::before {
	opacity: 0.28;
}


/* Progress */
.fuchsbau-carousel-progress {
	position: relative;

	width: 170px;
	height: 4px;

	background:
		rgba(31, 60, 46, 0.14);

	border-radius: 999px;

	overflow: hidden;
}

.fuchsbau-carousel-progress-bar {
	display: block;

	width: 0;
	height: 100%;

	background:
		var(--fb3-orange);

	border-radius: 999px;

	transition: width 220ms ease;
}


/* Meta-Bereich unter dem Carousel */

.fuchsbau-carousel-meta {
	display: flex;

	align-items: center;
	justify-content: center;

	gap:
		14px;
}


/* Pfeile im Carousel integriert */

.fuchsbau-carousel-button {
	position: absolute;

	top: calc(50% - 42px);

	transform:
		translateY(-50%);

	display: inline-flex;

	align-items: center;
	justify-content: center;

	pointer-events:
		auto;

	width:
		58px;

	height:
		58px;

	padding:
		0;

	background:
		rgba(255, 242, 209, 0.96);

	color:
		var(--fb3-orange);

	border:
		1px solid
		rgba(31, 60, 46, 0.12);

	border-radius:
		999px;

	box-shadow:
		0 10px 26px
		rgba(31, 60, 46, 0.14);

	font-family:
		var(--fb3-font);

	font-size:
		42px;

	font-weight:
		400;

	line-height:
		1;

	cursor:
		pointer;

	transition:
		background-color 180ms ease,
		color 180ms ease,
		border-color 180ms ease,
		transform 180ms ease,
		box-shadow 180ms ease;
}


.fuchsbau-carousel-prev {
	left:
		-28px;
}


.fuchsbau-carousel-next {
	right:
		-28px;
}


.fuchsbau-carousel-button:hover:not(:disabled),
.fuchsbau-carousel-button:focus-visible:not(:disabled) {
	background:
		var(--fb3-orange);

	color:
		#ffffff;

	border-color:
		var(--fb3-orange);

	transform:
		translateY(-50%)
		scale(1.04);

	box-shadow:
		0 12px 28px
		rgba(209, 63, 26, 0.24);
}


.fuchsbau-carousel-button:disabled {
	background:
		rgba(255, 255, 255, 0.88);

	color:
		rgba(31, 60, 46, 0.28);

	border-color:
		rgba(31, 60, 46, 0.08);

	box-shadow:
		none;

	cursor:
		default;

	opacity:
		1;
}


/* Progress */

.fuchsbau-carousel-progress {
	position: relative;

	width:
		170px;

	height:
		4px;

	background:
		rgba(31, 60, 46, 0.14);

	border-radius:
		999px;

	overflow:
		hidden;
}


.fuchsbau-carousel-progress-bar {
	display: block;

	width:
		0;

	height:
		100%;

	background:
		var(--fb3-orange);

	border-radius:
		999px;

	transition:
		width 220ms ease;
}


/* =========================================================
   ARCHIV
   ========================================================= */

.fuchsbau-posts-archive {
	position:
		relative;
}


.fuchsbau-posts-archive-heading {
	margin:
		0
		0
		42px;

	color:
		var(--fb3-dark);

	font-size:
		clamp(
			36px,
			3vw,
			50px
		);

	font-weight:
		700;

	line-height:
		1.1;

	letter-spacing:
		-1px;
}


/* Query-Liste */

.fuchsbau-posts-archive-query
> .wp-block-post-template {
	display: flex !important;

	flex-direction:
		column;

	gap:
		0 !important;

	margin:
		0 !important;

	padding:
		0 !important;

	list-style:
		none !important;
}


/* einzelner Archiveintrag */

.fuchsbau-posts-archive-query
.wp-block-post {
	margin:
		0 !important;

	padding:
		0 !important;
}


.fuchsbau-posts-archive-item {
	display: grid !important;

	grid-template-columns:
		220px
		minmax(0, 1fr);

	align-items:
		center;

	gap:
		34px;

	margin:
		0 !important;

	padding:
		28px
		0 !important;

	border-bottom:
		1px solid
		rgba(31, 60, 46, 0.13);
}


/* Archivbild */

.fuchsbau-posts-archive-image {
	margin:
		0 !important;

	overflow:
		hidden;

	border-radius:
		18px;
}


.fuchsbau-posts-archive-image a {
	display:
		block;
}


.fuchsbau-posts-archive-image img {
	display:
		block;

	width:
		100% !important;

	height:
		135px !important;

	object-fit:
		cover;

	transition:
		transform 350ms ease;
}


.fuchsbau-posts-archive-item:hover
.fuchsbau-posts-archive-image img {
	transform:
		scale(1.035);
}


/* Archivtext */

.fuchsbau-posts-archive-copy {
	margin:
		0 !important;
}


.fuchsbau-posts-archive-date {
	margin:
		0
		0
		8px !important;

	color:
		var(--fb3-green);

	font-size:
		12px;

	font-weight:
		700;

	letter-spacing:
		1px;

	text-transform:
		uppercase;
}


.fuchsbau-posts-archive-title {
	margin:
		0
		0
		10px !important;

	font-size:
		25px;

	font-weight:
		700;

	line-height:
		1.2;
}


.fuchsbau-posts-archive-title a {
	color:
		var(--fb3-dark);

	text-decoration:
		none;

	transition:
		color 160ms ease;
}


.fuchsbau-posts-archive-title a:hover {
	color:
		var(--fb3-orange);
}


.fuchsbau-posts-archive-excerpt {
	margin:
		0 !important;

	color:
		var(--fb3-muted);

	font-size:
		15px;

	line-height:
		1.6;
}


.fuchsbau-posts-archive-excerpt
.wp-block-post-excerpt__excerpt {
	margin:
		0
		0
		8px !important;
}


.fuchsbau-posts-archive-excerpt
.wp-block-post-excerpt__more-link {
	color:
		var(--fb3-orange);

	font-weight:
		700;

	text-decoration:
		none;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.fuchsbau-posts-archive-query
.wp-block-query-pagination {
	margin-top:
		46px;

	gap:
		10px;
}


.fuchsbau-posts-archive-query
.wp-block-query-pagination a,
.fuchsbau-posts-archive-query
.wp-block-query-pagination .page-numbers {
	color:
		var(--fb3-dark);

	text-decoration:
		none;
}


.fuchsbau-posts-archive-query
.wp-block-query-pagination
.page-numbers.current {
	color:
		var(--fb3-orange);

	font-weight:
		700;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) {

	.fuchsbau-posts-carousel-query
	> .wp-block-post-template {
		grid-template-columns:
			none !important;

		grid-auto-columns:
			calc((100% - 24px) / 2) !important;
	}


	.fuchsbau-posts-archive-item {
		grid-template-columns:
			180px
			minmax(0, 1fr);

		gap:
			26px;
	}


	.fuchsbau-posts-archive-image img {
		height:
			120px !important;
	}
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

	/* Eine vollständige Karte pro Ansicht, ohne angeschnittene zweite Karte. */
	.fuchsbau-posts-carousel-query
	> .wp-block-post-template {
		grid-auto-columns: 100% !important;
		gap: 16px !important;
	}

	.fuchsbau-posts-carousel-query
	> .wp-block-post-template
	> .wp-block-post {
		min-width: 0;
		width: 100%;
	}

	.fuchsbau-posts-carousel-query {
	padding-bottom: 72px;
}

.fuchsbau-carousel-controls {
	min-height: 52px;
}

.fuchsbau-carousel-meta {
	gap: 10px;
}

.fuchsbau-carousel-button {
	width: 52px;
	height: 52px;

	top: calc((100% - 72px) / 2);
}

.fuchsbau-carousel-button::before {
	width: 22px;
	height: 22px;
}

.fuchsbau-carousel-prev {
	left: -8px;
}

.fuchsbau-carousel-next {
	right: -8px;
}

.fuchsbau-carousel-progress {
	width: 120px;
}
}

/* =========================================================
   CAROUSEL-WRAPPER neutralisieren
   ========================================================= */

.fuchsbau-posts-carousel,
.fuchsbau-posts-carousel-query,
.fuchsbau-posts-carousel-query.wp-block-query,
.fuchsbau-posts-carousel-query > .wp-block-post-template {
	background:
		transparent !important;

	border:
		0 !important;

	border-radius:
		0 !important;

	box-shadow:
		none !important;
}


/* Falls das Theme Listen- oder Block-Hintergründe setzt */
.fuchsbau-posts-carousel-query .wp-block-post-template {
	list-style:
		none !important;
}


/* Optional: verhindert hart sichtbare Containerkanten */
.fuchsbau-posts-carousel-query::before,
.fuchsbau-posts-carousel-query::after {
	display: none !important;
	content: none !important;
}

.fuchsbau-carousel-button:hover:not(:disabled)::before,
.fuchsbau-carousel-button:focus-visible:not(:disabled)::before {
	filter:
		brightness(0)
		saturate(100%)
		invert(93%)
		sepia(22%)
		saturate(744%)
		hue-rotate(333deg)
		brightness(105%)
		contrast(101%);
}