/* ==========================================================================
   Post 46 Mobile — Kartenstapel mit Reveal-Button
   Widget: Elementor Nested Accordion d18d8b95 (nur < 768px sichtbar)
   Loest den frueheren horizontalen Swipe-Strip ab (Theme, bis 2026-07-31).

   Scope: @media (max-width: 767px) — das Widget selbst blendet Elementor ab
   768px aus, eine engere Grenze wuerde einen toten Korridor erzeugen.
   Variablen mit Hex-Fallback, falls das Theme-:root nicht greift.
   ========================================================================== */

@media (max-width: 767px) {

	/* ── 1. Accordion-Titel: reine Kategorie-Ueberschrift, kein Toggle ── */
	.page-id-46 .e-n-accordion-item-title {
		pointer-events: none;
		cursor: default;
		list-style: none;
		font-family: var(--hz-font-heading, Georgia, serif);
		font-weight: 400;
		font-size: 20px;
		color: var(--hz-green, #4A6B4C);
		padding: 16px 8px 8px;
		border-bottom: 2px solid var(--hz-sand, #C8B99A);
		margin-bottom: 8px;
	}

	.page-id-46 .e-n-accordion-item-title::-webkit-details-marker {
		display: none;
	}

	.page-id-46 .e-n-accordion-item[open] > .e-n-accordion-item-title {
		border-left: none;
	}

	/* ── 2. Sektions-Trenner zwischen den Panels ── */
	.page-id-46 .e-n-accordion-item + .e-n-accordion-item {
		border-top: none;
		padding-top: 0;
		position: relative;
		margin-top: 8px;
	}

	.page-id-46 .e-n-accordion-item + .e-n-accordion-item::before {
		content: '';
		display: block;
		height: 4px;
		background: linear-gradient(
			90deg,
			transparent 0%,
			var(--hz-sand, #C8B99A) 30%,
			var(--hz-sand, #C8B99A) 70%,
			transparent 100%
		);
		margin-bottom: 8px;
	}

	/* ── 3. Posts-Grid: einspaltiger Stapel (Elementor mobile-1 nutzen) ──
	   Hart abgesichert gegen Fremd-/Stale-Regeln (z. B. browser-gecachte
	   Swipe-Aera von style.css?ver=2.9.3: overflow-x:auto, scroll-snap,
	   280px-Karten) und gegen mehrspaltige Grid-Templates: eine Spalte,
	   kein horizontaler Scroll-/Clip-Zustand. */
	.page-id-46 .e-n-accordion .elementor-posts-container.elementor-grid {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 12px;
		padding: 4px 0 12px;
		overflow-x: clip;
		scroll-snap-type: none;
	}

	.page-id-46 .e-n-accordion .elementor-widget-posts {
		overflow-x: clip;
	}

	.page-id-46 .e-n-accordion .elementor-post.elementor-grid-item {
		min-width: 0 !important;
		max-width: 100% !important;
		width: 100%;
	}

	/* Reveal: alles ab Karte 2 bleibt verborgen, bis der Button geklickt wird */
	.page-id-46 .hz-offer-extra {
		display: none;
	}

	.page-id-46 .hz-offer-grid--expanded .hz-offer-extra {
		display: block;
	}

	/* ── 4. Reveal-Button ── */
	.page-id-46 .hz-offer-more {
		display: block;
		width: 100%;
		min-height: 48px;
		margin: 4px 0 18px;
		padding: 12px 16px;
		border: 2px solid var(--hz-green, #4A6B4C);
		border-radius: 6px;
		background: #FFFFFF;
		color: var(--hz-green-dark, #3A5640);
		font-family: var(--hz-font-heading, Georgia, serif);
		font-size: clamp(1rem, 4.2vw, 1.1rem);
		font-weight: 400;
		letter-spacing: 0.015em;
		line-height: 1.3;
		text-align: center;
		white-space: normal;
		cursor: pointer;
		transition: background 0.2s, color 0.2s;
	}

	.page-id-46 .hz-offer-more:hover,
	.page-id-46 .hz-offer-more:active {
		background: var(--hz-green-dark, #3A5640);
		color: #FFFFFF;
	}

	.page-id-46 .hz-offer-more:focus-visible {
		outline: 3px solid var(--hz-sand, #C8B99A);
		outline-offset: 3px;
	}

	/* ── 5. Karten-Optik (aus dem alten Swipe-Block uebernommen) ── */
	.page-id-46 .e-n-accordion .elementor-post__card {
		border-color: transparent;
		overflow: hidden;
		box-shadow: 0 1px 4px rgba(44, 44, 42, 0.08), 0 0 0 1px rgba(44, 44, 42, 0.04);
		display: flex;
		flex-direction: column;
	}

	.page-id-46 .e-n-accordion .elementor-post__thumbnail img {
		height: 160px;
		width: 100%;
		object-fit: cover;
	}

	.page-id-46 .e-n-accordion .elementor-post__thumbnail {
		position: relative;
	}

	/* Gruener Overlay ueber dem Foto */
	.page-id-46 .e-n-accordion .elementor-post__thumbnail::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(
			135deg,
			var(--hz-green, #4A6B4C),
			var(--hz-green-dark, #3A5640)
		);
		opacity: 0.3;
		z-index: 1;
		border-radius: inherit;
		pointer-events: none;
	}

	.page-id-46 .e-n-accordion .elementor-post__card .elementor-post__text {
		padding: 14px 14px 16px;
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.page-id-46 .e-n-accordion .elementor-post__title a {
		line-height: 20px;
	}

	.page-id-46 .e-n-accordion .elementor-post__excerpt p {
		line-height: 1.55;
		flex: 1;
		margin-bottom: 14px;
	}

	/* ── 6. Read-More als CTA-Button in der Karte ── */
	.page-id-46 .e-n-accordion .elementor-post__read-more {
		display: inline-block;
		background: var(--hz-green, #4A6B4C);
		color: #FFFFFF;
		font-family: var(--hz-font-body, Lato, sans-serif);
		font-size: 0.875rem;
		font-weight: 600;
		letter-spacing: 0.025em;
		padding: 11px 18px;
		border-radius: 6px;
		min-height: 44px;
		line-height: 1.35;
		text-decoration: none !important;
		text-transform: none;
		align-self: flex-start;
		transition: background 0.2s;
		margin-top: auto;
	}

	.page-id-46 .e-n-accordion .elementor-post__read-more:hover,
	.page-id-46 .e-n-accordion .elementor-post__read-more:active {
		background: var(--hz-green-dark, #3A5640);
	}

	.page-id-46 .e-n-accordion .elementor-post__read-more:focus-visible {
		outline: 3px solid var(--hz-sand, #C8B99A);
		outline-offset: 3px;
	}

	/* ── 7. Restliche Panel-Inhalte (Bilder, Buttons) ── */
	.page-id-46 .e-n-accordion .elementor-widget-image img {
		height: 140px;
		object-fit: cover;
	}

	.page-id-46 .e-n-accordion .elementor-button {
		min-height: 44px;
	}

	/* ── 8. Zebra: abwechselnde Panel-Hintergruende ── */
	.page-id-46 .e-n-tabs-content > :nth-child(even),
	.page-id-46 .e-n-accordion-item:nth-child(even) {
		background: var(--hz-bg-content, #F5F4F0);
	}

	/* ── 9. Tab-Titel (Pro-Lizenz generiert kein CSS) ── */
	.page-id-46 .e-n-tab-title {
		font-family: var(--hz-font-heading, Georgia, serif);
		font-weight: 400;
		color: var(--hz-green, #4A6B4C);
	}

	.page-id-46 .e-n-tab-title[aria-selected="true"] {
		color: var(--hz-green-dark, #3A5640);
	}
}

/* Bewegungsreduktion: keine Uebergaenge erzwingen */
@media (prefers-reduced-motion: reduce) {
	.page-id-46 .hz-offer-more,
	.page-id-46 .e-n-accordion .elementor-post__read-more {
		transition: none;
	}
}