/*
		21.10.2026	Claude		Neues mobiles Listing (Mass-Plissee): 2-spaltige Karten mit Fensterbild + Stoffkreis,
								Badges (Rabatt / Lichtdurchlaessigkeit), Leiste mit Filter / Sortierung / aktiven Filtern.
								Alles unter 500px (gleicher Umbruch wie layoutMobile.js). Desktop bleibt unveraendert.
								Eingebunden in /plissee/_inc_mass_listing.php -> filterHead()
*/

/* ---------- Desktop: neue Elemente ausblenden ---------- */
.lhm-rabatt,
.lhm-licht,
.lhm-text-mobil,
#lhm-toolbar,
.lhm-count,
#lhm-sortsheet {
		display: none;
}

@media (max-width: 500px) {

		/* ---------- Leiste (wird von mobile_listing.js erzeugt) ---------- */
		.artikel_alle .mainRight .call_filter_mobile.lhm-ersetzt,
		.artikel_alle.lhm-an .call_filter_mobile {		/* "Auswahl verfeinern" ersetzt durch die neue Leiste */
				display: none !important;
		}
		/* zwei Geschwister-Elemente in .mainRight (Flex-Spalte): Leiste (sticky), Trefferzahl */
		#lhm-toolbar,
		.lhm-count {
				order: 1;		/* wie .call_filter_mobile in mass_listing.css */
				font-family: var(--primaryFont, Roboto, Arial, sans-serif);
				color: #141414;
		}
		#lhm-toolbar {
				display: block;
				position: sticky;		/* muss direktes Kind von .mainRight sein, sonst klebt es nicht */
				top: 0;
				z-index: 30;
				width: 100vw;
				margin-left: calc(50% - 50vw);		/* volle Breite trotz Seitenrand von .artikel_alle */
				background: #FFFFFF;
				border-top: 1px solid #E4E2DC;
				border-bottom: 1px solid #E4E2DC;
				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
				padding: 10px 0;
		}
				.lhm-scroll {
						display: flex;
						gap: 8px;
						overflow-x: auto;
						padding: 0 16px;
						scrollbar-width: none;
						-webkit-overflow-scrolling: touch;
				}
				.lhm-scroll::-webkit-scrollbar {
						display: none;
				}
				.lhm-scroll + .lhm-scroll {
						margin-top: 8px;
				}
				.lhm-btn {
						flex-shrink: 0;
						display: inline-flex;
						align-items: center;
						gap: 6px;
						height: 40px;
						padding: 0 14px;
						border-radius: 999px;
						border: 1.5px solid #CFCCC4;
						background: #FFFFFF;
						color: #141414;
						font: 500 14px/1 var(--primaryFont, Roboto, Arial, sans-serif);
						cursor: pointer;
						white-space: nowrap;
						-webkit-tap-highlight-color: transparent;
				}
				.lhm-btn svg {
						flex-shrink: 0;
				}
				.lhm-btn-filter {
						background: #141414;
						border-color: #141414;
						color: #FFFFFF;
						font-weight: 700;
				}
						.lhm-badge {
								min-width: 20px;
								height: 20px;
								border-radius: 999px;
								background: var(--secondary-color, #FACF00);
								color: #141414;
								font-size: 12px;
								display: inline-flex;
								align-items: center;
								justify-content: center;
								padding: 0 5px;
								box-sizing: border-box;
						}
						.lhm-badge:empty {
								display: none;
						}
				.lhm-chip-aktiv {
						background: #FFF4C7;
						border-color: #141414;
						padding-right: 12px;
				}
				.lhm-quick {
						flex-shrink: 0;
						height: 34px;
						padding: 0 12px;
						border-radius: 8px;
						border: 0;
						background: #F3F2EE;
						color: #141414;
						font: 500 13px/1 var(--primaryFont, Roboto, Arial, sans-serif);
						cursor: pointer;
						white-space: nowrap;
				}
				.lhm-quick.lhm-an {
						background: #141414;
						color: #FFFFFF;
				}
		.lhm-count {
				display: flex;
				justify-content: space-between;
				align-items: baseline;
				padding: 14px 0 6px;
				font-size: 14px;
		}
				.lhm-count strong {
						font-weight: 700;
				}
				.lhm-count span {
						font-size: 12.5px;
						color: #5C5C5C;
				}

		/* ---------- Sortier-Sheet ---------- */
		#lhm-sortsheet.lhm-offen {
				display: flex;
				position: fixed;
				inset: 0;
				z-index: 1000;
				background: rgba(20, 20, 20, 0.55);
				flex-direction: column;
				justify-content: flex-end;
				font-family: var(--primaryFont, Roboto, Arial, sans-serif);
		}
				.lhm-sheet {
						background: #FFFFFF;
						border-radius: 18px 18px 0 0;
						padding: 8px 16px calc(22px + env(safe-area-inset-bottom, 0px));
				}
				.lhm-sheet-griff {
						width: 40px;
						height: 4px;
						border-radius: 999px;
						background: #CFCCC4;
						margin: 0 auto 6px;
				}
				.lhm-sheet-kopf {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 20px;
						font-weight: 700;
						color: #141414;
						padding: 4px 0 8px;
				}
				.lhm-sheet-zu {
						width: 44px;
						height: 44px;
						border: 0;
						background: transparent;
						color: #141414;
						display: flex;
						align-items: center;
						justify-content: center;
						cursor: pointer;
						margin-right: -10px;
				}
				.lhm-sort-option {
						display: flex;
						align-items: center;
						gap: 12px;
						width: 100%;
						min-height: 56px;
						border: 0;
						border-top: 1px solid #ECEAE4;
						background: transparent;
						font: 400 16px var(--primaryFont, Roboto, Arial, sans-serif);
						color: #141414;
						text-align: left;
						cursor: pointer;
						padding: 0;
				}
				.lhm-sort-option::before {
						content: '';
						width: 22px;
						height: 22px;
						border-radius: 50%;
						border: 2px solid #8A8A8A;
						box-sizing: border-box;
						flex-shrink: 0;
				}
				.lhm-sort-option[aria-checked="true"] {
						font-weight: 700;
				}
				.lhm-sort-option[aria-checked="true"]::before {
						border-color: #141414;
						background: radial-gradient(circle, #141414 0 4.5px, transparent 5px);
				}

		/* ---------- Listing: 2 Spalten ---------- */
		.artikel_alle #listing_artikel.listing {
				grid-template-columns: repeat(2, minmax(0, 1fr));
				grid-gap: 12px;
				gap: 12px;
				padding-bottom: 90px;		/* Platz fuer die feste untere Navigation */
		}
		.artikel_alle #listing_artikel .versandzeit {
				margin: 6px 0 0;
				font-size: 14px;
		}
		.artikel_alle #listing_artikel .link_weitere {
				grid-column: 1 / -1;
		}

		/* ---------- Karte ---------- */
		.artikel_alle #listing_artikel .listingBox {
				max-width: none;
				min-width: 0;
				margin: 0;
				border-radius: 12px;
				overflow: hidden;
				background: #FFFFFF;
				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
				text-align: left;
		}
		.artikel_alle #listing_artikel .listingBox .herstellerLogo {
				display: none;
		}
		.artikel_alle #listing_artikel .listingBox .nooverflow {
				padding-top: 0;
				display: flex;
				flex-direction: column;
				height: 100%;
		}
		.artikel_alle #listing_artikel .listingBox .nooverflow > a:first-child {
				display: flex;
				flex-direction: column;
				flex: 1 1 auto;
		}

				/* Bild */
				.artikel_alle #listing_artikel .listingBox .artikelBild {
						order: 0;
						position: relative;
						display: block;
						aspect-ratio: 5 / 6;
						background: #EDEBE6;
						overflow: hidden;
				}
				.artikel_alle #listing_artikel .listingBox .artikelBild img {
						display: block;
						width: 100%;
						height: 100%;
						max-width: none;
						min-width: 0;
						margin: 0;
						aspect-ratio: auto;
						object-fit: cover;
				}
				.artikel_alle #listing_artikel .listingBox2 .artikelBild img.lhm-fenster,
				.artikel_alle #listing_artikel .listingBox2 .artikelBild img:first-of-type {
						object-position: center 40%;
				}
				/* Stoff als Kreis ueber dem Fensterbild */
				.artikel_alle #listing_artikel .listingBox2 .artikelBild img.lhm-stoff,
				.artikel_alle #listing_artikel .listingBox2 .artikelBild img:nth-of-type(2) {
						position: absolute;
						right: 8px;
						bottom: 8px;
						width: 60px;
						height: 60px;
						border-radius: 50%;
						border: 3px solid #FFFFFF;
						box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
						box-sizing: border-box;
						object-fit: cover;
						background: #FFFFFF;
				}
				.lhm-rabatt {
						display: block;
						position: absolute;
						top: 8px;
						right: 8px;
						background: var(--discountColor, #C00D0D);
						color: #FFFFFF;
						font-size: 12px;
						font-weight: 700;
						line-height: 1;
						padding: 4px 7px;
						border-radius: 6px;
						z-index: 2;
				}
				.lhm-licht {
						display: inline-flex;
						align-items: center;
						gap: 5px;
						position: absolute;
						left: 8px;
						bottom: 8px;
						max-width: calc(100% - 84px);
						background: rgba(255, 255, 255, 0.94);
						color: #141414;
						font-size: 11.5px;
						font-weight: 500;
						line-height: 1.2;
						padding: 4px 7px;
						border-radius: 6px;
						z-index: 2;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
				}
				.lhm-licht::before {
						content: '';
						flex-shrink: 0;
						width: 9px;
						height: 9px;
						border-radius: 50%;
						border: 1px solid #8A8A8A;
						background: #F2E6B8;
				}
				.lhm-licht-0::before { background: #FFFFFF; }		/* transparent */
				.lhm-licht-1::before { background: #F8F3E2; }		/* halbtransparent */
				.lhm-licht-2::before { background: #F2E6B8; }		/* lichtdurchlaessig */
				.lhm-licht-3::before { background: #8C8C8C; }		/* dimout */
				.lhm-licht-4::before { background: #2A2A2A; }		/* abdunkelnd */

				/* Name */
				.artikel_alle #listing_artikel .listingBox .artikelBez {
						order: 1;
						padding: 10px 10px 0;
						font-size: 15px;
						font-weight: 700;
						line-height: 1.25;
						color: #141414;
				}
				.artikel_alle #listing_artikel .listingBox .artikelBez span {
						display: block;
						font-weight: 700;
				}
				.artikel_alle #listing_artikel .listingBox .artikelBez dfn {
						display: block;
						font-style: normal;
						font-size: 11px;
						font-weight: 700;
						letter-spacing: 0.04em;
						text-transform: uppercase;
						color: #5C5C5C;
						margin-bottom: 2px;
				}

				/* Preis */
				.artikel_alle #listing_artikel .listingBox .artikelKonfi {
						order: 2;
						flex-direction: row;
						flex-wrap: wrap;
						align-items: baseline;
						column-gap: 6px;
						padding: 6px 10px 0;
				}
				.artikel_alle #listing_artikel .listingBox .artikelKonfi .abPreis {
						order: 1;
						padding: 0;
						font-size: 12px;
						font-style: normal;
						font-weight: 400;
						color: #4A4A4A;
				}
				.artikel_alle #listing_artikel .listingBox .artikelKonfi .abPreisRabatthinweis {
						display: none;
				}
				.artikel_alle #listing_artikel .listingBox .artikelKonfi .abPreisPreis {
						font-size: 19px;
						font-weight: 900;
						font-style: normal;
						color: var(--discountColor, #C00D0D);
						white-space: nowrap;
				}
				.artikel_alle #listing_artikel .listingBox .artikelKonfi .preisAlt {
						order: 2;
						font-size: 12.5px;
						color: #5C5C5C;
						white-space: nowrap;
				}
				.artikel_alle #listing_artikel .listingBox .artikelKonfi > span {
						display: none;
				}
				.artikel_alle #listing_artikel .listingBox .artikelKonfi ~ span {
						display: none;
				}

				/* Button */
				.artikel_alle #listing_artikel .listingBox .konfigurieren {
						position: static;
						transform: none;
						display: flex;
						align-items: center;
						justify-content: center;
						width: auto;
						min-height: 44px;
						margin: 10px 10px 12px;
						padding: 0 8px;
						border-radius: 10px;
						background: var(--secondary-color, #FACF00);
						color: #141414;
						font-size: 14px;
						font-weight: 700;
						text-align: center;
				}
				.artikel_alle #listing_artikel .listingBox .konfigurieren .lhm-text-desktop {
						display: none;
				}
				.artikel_alle #listing_artikel .listingBox .konfigurieren .lhm-text-mobil {
						display: inline;
				}
				.artikel_alle #listing_artikel .listingBox .konfigurieren .lhm-text-mobil::after {
						content: ' \203A';
						font-size: 16px;
				}

				/* Ribbons (XL / Smart Frame) kleiner, damit sie das Bild nicht zu sehr verdecken */
				.artikel_alle #listing_artikel .listingBox .listing_box_ribbon,
				.artikel_alle #listing_artikel .listingBox .kennzeichnungSmartframe {
						top: 0.7rem;
						left: -2rem;
						font-size: 0.65rem;
						z-index: 3;
				}
}

/* sehr schmale Geraete */
@media (max-width: 340px) {
		.artikel_alle #listing_artikel.listing {
				grid-gap: 8px;
				gap: 8px;
		}
		.artikel_alle #listing_artikel .listingBox .artikelBez {
				font-size: 14px;
		}
		.artikel_alle #listing_artikel .listingBox2 .artikelBild img.lhm-stoff,
		.artikel_alle #listing_artikel .listingBox2 .artikelBild img:nth-of-type(2) {
				width: 50px;
				height: 50px;
		}
}

/* =====================================================================================
   23.10.2026 Filter-Overlay (layout/mobile) hell, mit Chips – nur auf Listing-Seiten,
   weil diese CSS-Datei nur dort eingebunden ist. Klasse html.lhm-filter-offen setzt
   mobile_listing.js, solange #layout_mobile_navigation[data-active="filter"] ist.
   ===================================================================================== */
@media (max-width: 500px) {
		/* Kopfzeile */
		html.lhm-filter-offen #layout_mobile_head_schliessen {
				background: #FFFFFF;
				color: #141414;
				border-bottom: 1px solid #ECEAE4;
				box-sizing: border-box;
		}
		html.lhm-filter-offen #layout_mobile_head_schliessen_left {
				color: #141414;
				font-weight: 700;
				font-size: 18px;
		}
		html.lhm-filter-offen #layout_mobile_head_schliessen .left img {
				filter: brightness(0);
		}
		/* untere Navigation ausblenden, die Buttons unten uebernehmen */
		html.lhm-filter-offen #layout_mobile_navigation {
				display: none;
		}
		html.lhm-filter-offen #layout_mobile_overlay {
				background: #FFFFFF;
				color: #141414;
				padding-bottom: 0 !important;
				border-bottom: 0 !important;
		}
		/* Massanfertigung / Fertiggroessen entfernt */
		html.lhm-filter-offen #layout_mobile_filter_massstandard {
				display: none !important;
		}

		/* Suche */
		html.lhm-filter-offen #layout_mobile_overlay .layout_mobile_search {
				margin: 12px 0 4px;
		}
		html.lhm-filter-offen #layout_mobile_overlay .layout_mobile_search input[type=search] {
				background: #F3F2EE;
				border: 0;
				border-radius: 10px;
				color: #141414;
				height: 44px;
				text-align: left;
				padding: 0 44px 0 14px;
				box-sizing: border-box;
				font-size: 16px;
		}
		html.lhm-filter-offen #layout_mobile_overlay .layout_mobile_search input[type=search]::placeholder {
				color: #6B6B6B;
		}
		html.lhm-filter-offen #layout_mobile_overlay .layout_mobile_search input[type=submit] {
				filter: brightness(0);
				opacity: 0.7;
		}

		/* Gruppen */
		html.lhm-filter-offen #layout_mobile_overlay .layout_mobile_filter_box {
				border-bottom: 1px solid #ECEAE4;
				padding: 16px 0;
				margin: 0;
		}
		html.lhm-filter-offen #layout_mobile_overlay .layout_mobile_filter_box_ueberschrift {
				background: transparent;
				color: #141414;
				font-weight: 700;
				font-size: 16px;
				padding: 0 0 12px;
				margin: 0;
		}
		html.lhm-filter-offen #layout_mobile_overlay #layout_mobile_filter_box_ueberschrift_mehr {
				padding-top: 18px;
		}

		/* Werte als Chips */
		html.lhm-filter-offen #layout_mobile_overlay .layout_mobile_filter_box_elements.filter {
				display: flex;
				flex-wrap: wrap;
				gap: 8px;
				padding: 0;
				margin: 0;
		}
		html.lhm-filter-offen #layout_mobile_overlay .layout_mobile_filter_box_elements.filter .layout_mobile_filter_box_element {
				margin: 0;
				display: inline-flex;
				align-items: center;
				gap: 6px;
				width: auto;
				min-height: 40px;
				padding: 0 14px;
				border: 1.5px solid #CFCCC4;
				border-radius: 999px;
				background: #FFFFFF;
				color: #141414;
				font: 500 14px/1.2 var(--primaryFont, Roboto, Arial, sans-serif);
				box-sizing: border-box;
				text-decoration: none;
		}
		html.lhm-filter-offen #layout_mobile_overlay .layout_mobile_filter_box_elements.filter .layout_mobile_filter_box_element .filterBez {
				width: auto;
				flex: none;
				padding: 0;
				margin: 0;
				line-height: 1.2;
		}
		html.lhm-filter-offen #layout_mobile_overlay .layout_mobile_filter_box_elements.filter .layout_mobile_filter_box_element .icon {
				width: auto;
				margin: 0;
				display: flex;
		}
		html.lhm-filter-offen #layout_mobile_overlay .layout_mobile_filter_box_elements.filter .layout_mobile_filter_box_element .icon img {
				width: 18px;
				height: 18px;
				filter: brightness(0);
		}
		html.lhm-filter-offen #layout_mobile_overlay .layout_mobile_filter_box_elements.filter .layout_mobile_filter_box_element .haken {
				display: none;
		}
		html.lhm-filter-offen #layout_mobile_overlay .layout_mobile_filter_box_elements.filter .layout_mobile_filter_box_element.active {
				background: #FFF4C7;
				border-color: #141414;
				color: #141414;
				font-weight: 700;
		}

		/* Farben als Kreise im Raster statt Scrollleiste */
		html.lhm-filter-offen #layout_mobile_overlay .layout_mobile_filter_box_elements.farbgruppe {
				display: grid;
				grid-template-columns: repeat(6, minmax(0, 1fr));
				gap: 12px 4px;
				width: 100%;
				overflow: visible;
				white-space: normal;
				padding: 0;
				margin: 0;
		}
		html.lhm-filter-offen #layout_mobile_overlay .farbgruppe .layout_mobile_filter_box_element {
				margin: 0;
				padding: 0;
				width: auto;
				height: auto;
				display: flex;
				justify-content: center;
				border: 0;
				background: transparent;
		}
		html.lhm-filter-offen #layout_mobile_overlay .farbgruppe .kreis {
				width: 38px;
				height: 38px;
				margin: 3px;
				border-radius: 50%;
				border: 1px solid rgba(0, 0, 0, 0.2);
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
		}
		html.lhm-filter-offen #layout_mobile_overlay .farbgruppe .active .kreis {
				box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #141414;
		}
		html.lhm-filter-offen #layout_mobile_overlay .farbgruppe .kreis .haken {
				width: 18px;
				height: 18px;
		}

		/* Zubehoer */
		html.lhm-filter-offen #layout_mobile_overlay #layout_mobile_filter_gruppenumschalter_button {
				background: #FFFFFF;
				color: #141414;
				border: 1.5px solid #CFCCC4;
				border-radius: 12px;
				font-weight: 500;
		}

		/* Buttons unten */
		html.lhm-filter-offen #layout_mobile_overlay #layout_mobile_filter_controls {
				background: #FFFFFF;
				border-top: 1px solid #ECEAE4;
				box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.06);
				margin: 16px -16px 0;
				padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
				gap: 10px;
		}
		html.lhm-filter-offen #layout_mobile_overlay .layout_mobile_filter_controls_reset {
				flex: 0 0 auto;
				min-height: 52px;
				padding: 0 16px;
				border: 1.5px solid #141414;
				border-radius: 12px;
				background: #FFFFFF;
				color: #141414;
				font-size: 15px;
				font-weight: 700;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0;
				box-sizing: border-box;
		}
		html.lhm-filter-offen #layout_mobile_overlay .layout_mobile_filter_controls_confirm {
				flex: 1 1 auto;
				min-width: 0;
				display: block;
				min-height: 52px;
				line-height: 52px;
				padding: 0 12px;
				border: 0;
				border-radius: 12px;
				background: #141414;
				color: #FFFFFF;
				font-size: 15px;
				font-weight: 700;
				text-align: center;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				margin: 0;
				box-sizing: border-box;
		}
}