/*
		mobile_listing_swiss.css - Swiss-Plissees: Optik fuer mobiles Listing und Stoff-Detailseite, nach mobile_listing.css laden
		(eingebunden in /plissee/_inc_mass_listing.php -> filterHead()). Nur Farben/Formen und Anpassungen an das Swiss-Markup.
		04.11.2026	Claude		Erste Version
*/
@media (max-width: 500px) {
		:root { --sp-navy: #00226A; --sp-rot: #C70707; --sp-linie: #D4DAE8; --sp-flaeche: #EEF1F8; --sp-hell: #F6F8FC; --sp-grau: #5C6B8A; }

		/* ---------- Leiste ---------- */
		#lhm-toolbar, .lhm-count, #lhm-sortsheet, html.lhm-filter-offen #layout_mobile_overlay { font-family: Inter, Arial, sans-serif; }
		#lhm-toolbar button { border-radius: 4px; color: var(--sp-navy); border-color: var(--sp-linie); }
		#lhm-toolbar .lhm-btn-filter { background: var(--sp-navy); border-color: var(--sp-navy); color: #fff; }
		#lhm-toolbar .lhm-btn-filter .lhm-badge { background: var(--sp-rot); color: #fff; }
		#lhm-toolbar .lhm-chip-aktiv { background: var(--sp-flaeche); border-color: var(--sp-navy); }
		#lhm-toolbar .lhm-quick { background: var(--sp-hell); border: 1px solid var(--sp-linie); }
		.lhm-count { color: var(--sp-navy); }

		/* ---------- Listing ---------- */
		/* .inhalt hat schon 16px Rand - .artikel_alle nicht noch einmal (sonst nur ~145px breite Karten) */
		.artikel_alle.lhm-an { padding-left: 0; padding-right: 0; }
		/* Swiss: Liste heisst .massListing (plissee-held: .listing) */
		.artikel_alle #listing_artikel.massListing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-bottom: 90px; }
		.artikel_alle #listing_artikel .listingBox { padding: 0; border: 1px solid var(--sp-linie); border-radius: 4px; box-shadow: none; }
		.artikel_alle #listing_artikel .listingBox .nooverflow > a:first-child { padding: 0; margin: 0; }
		/* Bewertung + Icons: auf der Karte zu klein, Lichtdurchlaessigkeit steht als Badge im Bild */
		.artikel_alle #listing_artikel .listingBox .artikelInfos,
		.artikel_alle #listing_artikel .listingBox .listing_box_plus { display: none; }
		.artikel_alle #listing_artikel .listingBox .artikelBez { padding: 10px 10px 0; margin: 0; min-height: 0; color: var(--sp-navy); font-family: Inter, Arial, sans-serif; font-size: 14px; text-align: left; }
		.artikel_alle #listing_artikel .listingBox .artikelBez span { font-weight: 700; }
		.artikel_alle #listing_artikel .listingBox .artikelKonfi { display: flex; justify-content: flex-start; align-items: baseline; height: auto; max-height: none; overflow: visible; padding: 6px 10px 0; margin: 0; text-align: left; }
		.artikel_alle #listing_artikel .listingBox .artikelKonfi > span.abPreis,
		.artikel_alle #listing_artikel .listingBox .artikelKonfi > span.preisAlt { display: inline; position: static; float: none; width: auto; margin: 0; }
		.artikel_alle #listing_artikel .listingBox .artikelKonfi .abPreis { order: 1; font-size: 12px; color: var(--sp-grau); }
		.artikel_alle #listing_artikel .listingBox .artikelKonfi .abPreis small { font-size: 12px; }
		.artikel_alle #listing_artikel .listingBox .artikelKonfi .abPreisPreis { font-size: 19px; font-weight: 800; color: var(--sp-rot); }
		.artikel_alle #listing_artikel .listingBox .artikelKonfi .preisAlt { order: 2; font-size: 12px; color: var(--sp-grau); text-decoration: line-through; }
		.artikel_alle #listing_artikel .listingBox .nooverflow > a.konfigurieren { min-height: 44px; height: auto; margin: 10px 10px 12px; padding: 0 6px; border-radius: 4px; background: var(--sp-navy); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none; }
		.artikel_alle #listing_artikel .listingBox .nooverflow > a.konfigurieren > span:empty { display: none; }
		.artikel_alle #listing_artikel .listingBox2 .artikelBild img.lhm-stoff { width: 52px; height: 52px; }
		.lhm-rabatt { background: var(--sp-rot); border-radius: 3px; }
		.lhm-licht { max-width: calc(100% - 72px); border-radius: 3px; color: var(--sp-navy); font-size: 11px; }

		/* ---------- Filter-Overlay (Swiss: eigene Ueberschriften-Kaesten, Haken-Rahmen, 32px Innenabstand, Leiste 60px hoch) ---------- */
		html.lhm-filter-offen #layout_mobile_overlay { padding-left: 16px; padding-right: 16px; padding-bottom: 96px !important; }
		html.lhm-filter-offen #layout_mobile_overlay #layout_mobile_filter_controls { margin: 16px 0 0; bottom: 0; }
		html.lhm-filter-offen .layout_mobile_filter_box_ueberschrift { border: 0; text-align: left; padding: 0 0 10px; color: var(--sp-navy); }
		html.lhm-filter-offen .layout_mobile_filter_box_element .hakenBorder { display: none; }
		html.lhm-filter-offen #layout_mobile_overlay .layout_mobile_filter_box_elements.filter .layout_mobile_filter_box_element { border-color: var(--sp-linie); border-radius: 4px; color: var(--sp-navy); font-family: Inter, Arial, sans-serif; }
		html.lhm-filter-offen #layout_mobile_overlay .layout_mobile_filter_box_elements.filter .layout_mobile_filter_box_element.active { background: var(--sp-flaeche); border-color: var(--sp-navy); color: var(--sp-navy); }
		html.lhm-filter-offen #layout_mobile_overlay .layout_mobile_filter_controls_reset { border-color: var(--sp-navy); border-radius: 4px; color: var(--sp-navy); }
		html.lhm-filter-offen #layout_mobile_overlay .layout_mobile_filter_controls_confirm { background: var(--sp-navy); border-radius: 4px; }

		/* ---------- Stoff-Detailseite ---------- */
		html.lhm-detail .oben_flex_wrapper { row-gap: 14px; }
		/* Titel ueber das Bild (Swiss: Titel steckt in .design_eigenschaften) */
		html.lhm-detail .oben_flex_wrapper > .beschreibungsspalte,
		html.lhm-detail .beschreibungsspalte > .design_eigenschaften { display: contents; }
		html.lhm-detail .design_top_ueberschrift { order: -2; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-grau); }
		html.lhm-detail .design_eigenschaften_ueberschrift_group { order: -1; margin: -10px 0 0; }
		html.lhm-detail .design_eigenschaften_ueberschrift_group * { margin: 0; font-size: 21px; line-height: 1.25; color: var(--sp-navy); }
		html.lhm-detail .design_eigenschaften .massanfertigung,
		html.lhm-detail .design_eigenschaften > br { display: none; }
		html.lhm-detail .design_eigenschaften_liste { order: 3; }
		/* Haupt-Button und untere Leiste in Dunkelblau wie Listing/Konfigurator */
		html.lhm-detail .zusatz a.button.btn4 { background: var(--sp-navy); border-color: var(--sp-navy); color: #fff; border-radius: 4px; }
		html.lhm-detail .zusatz a.button.btn3 { border-color: var(--sp-navy); color: var(--sp-navy); border-radius: 4px; }
		html.lhm-detail .design_abpreis_hervorgehoben { color: var(--sp-navy); }
		html.lhm-detail .lhm-detail-rabatt { background: var(--sp-rot); border-radius: 3px; }
		html.lhm-detail .lhm-detail-vorteile li { color: var(--sp-navy); }
		/* untere Leiste kompakt: Button + Preis in einer Zeile */
		html.lhm-detail .artikelKonfigurieren { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 12px; margin-left: -16px; margin-right: -16px; padding: 10px 12px; border: 0; border-top: 1px solid var(--sp-linie); border-radius: 0; background: #fff; box-shadow: 0 -4px 12px rgba(0, 0, 0, .06); }
		html.lhm-detail .artikelKonfigurieren .buttonKonfigurierenMobile { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 48px; margin: 0; padding: 0 14px; border-radius: 4px; background: var(--sp-navy); border-color: var(--sp-navy); }
		html.lhm-detail .child_buttonKonfigurierenMobile { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-weight: 600; }
		html.lhm-detail .child_buttonKonfigurierenMobile img { width: 20px; height: 20px; margin: 0; filter: brightness(0) invert(1); }
		html.lhm-detail .layout_mobile_bottom_sticky_right { flex: none; }
		html.lhm-detail .textPreisMobile { font-weight: 700; color: var(--sp-navy); white-space: nowrap; }

		/* layout.css: button:hover faerbt auch die Kontur */
		#lhm-toolbar button:hover, #lhm-sortsheet button:hover { outline-color: transparent; }
}

/* ---------- :hover-Kopien (erzeugt mit hover_fix.py --praefix "" aus mobile_listing.css + obigen Regeln) ----------
   layout.css faerbt jeden button:hover um (var(--btn1BgHover)); auf Handys bleibt :hover nach dem Tippen haengen. */
@media (max-width: 500px) {
	#lhm-toolbar:hover, .lhm-count:hover { color: #141414; }
	#lhm-toolbar:hover { background: #FFFFFF; }
	.lhm-btn:hover { border-color: #CFCCC4; background: #FFFFFF; color: #141414; }
	.lhm-btn-filter:hover { background: #141414; border-color: #141414; color: #FFFFFF; }
	.lhm-badge:hover { background: var(--secondary-color, #FACF00); color: #141414; }
	.lhm-chip-aktiv:hover { background: #FFF4C7; border-color: #141414; }
	.lhm-quick:hover { background: #F3F2EE; color: #141414; }
	.lhm-quick.lhm-an:hover { background: #141414; color: #FFFFFF; }
	.lhm-count span:hover { color: #5C5C5C; }
	#lhm-sortsheet.lhm-offen:hover { background: rgba(20, 20, 20, 0.55); }
	.lhm-sheet:hover { background: #FFFFFF; }
	.lhm-sheet-griff:hover { background: #CFCCC4; }
	.lhm-sheet-kopf:hover { color: #141414; }
	.lhm-sheet-zu:hover { background: transparent; color: #141414; }
	.lhm-sort-option:hover { background: transparent; color: #141414; }
	.artikel_alle #listing_artikel .listingBox:hover { background: #FFFFFF; }
	.artikel_alle #listing_artikel .listingBox .artikelBild:hover { background: #EDEBE6; }
	.artikel_alle #listing_artikel .listingBox2 .artikelBild img.lhm-stoff:hover, .artikel_alle #listing_artikel .listingBox2 .artikelBild img:nth-of-type(2):hover { border-color: #FFFFFF; background: #FFFFFF; }
	.lhm-rabatt:hover { background: var(--discountColor, #C00D0D); color: #FFFFFF; }
	.lhm-licht:hover { background: rgba(255, 255, 255, 0.94); color: #141414; }
	.artikel_alle #listing_artikel .listingBox .artikelBez:hover { color: #141414; }
	.artikel_alle #listing_artikel .listingBox .artikelBez dfn:hover { color: #5C5C5C; }
	.artikel_alle #listing_artikel .listingBox .artikelKonfi .abPreis:hover { color: #4A4A4A; }
	.artikel_alle #listing_artikel .listingBox .artikelKonfi .abPreisPreis:hover { color: var(--discountColor, #C00D0D); }
	.artikel_alle #listing_artikel .listingBox .artikelKonfi .preisAlt:hover { color: #5C5C5C; }
	.artikel_alle #listing_artikel .listingBox .konfigurieren:hover { background: var(--secondary-color, #FACF00); color: #141414; }
	html.lhm-filter-offen #layout_mobile_head_schliessen:hover { background: #FFFFFF; color: #141414; }
	html.lhm-filter-offen #layout_mobile_head_schliessen_left:hover { color: #141414; }
	html.lhm-filter-offen #layout_mobile_overlay:hover { background: #FFFFFF; color: #141414; }
	html.lhm-filter-offen #layout_mobile_overlay .layout_mobile_search input[type=search]:hover { background: #F3F2EE; color: #141414; }
	html.lhm-filter-offen #layout_mobile_overlay .layout_mobile_filter_box_ueberschrift:hover { background: transparent; color: #141414; }
	html.lhm-filter-offen #layout_mobile_overlay .layout_mobile_filter_box_elements.filter .layout_mobile_filter_box_element:hover { border-color: #CFCCC4; background: #FFFFFF; color: #141414; }
	html.lhm-filter-offen #layout_mobile_overlay .layout_mobile_filter_box_elements.filter .layout_mobile_filter_box_element.active:hover { background: #FFF4C7; border-color: #141414; color: #141414; }
	html.lhm-filter-offen #layout_mobile_overlay .farbgruppe .layout_mobile_filter_box_element:hover { background: transparent; }
	html.lhm-filter-offen #layout_mobile_overlay .farbgruppe .kreis:hover { border-color: rgba(0, 0, 0, 0.2); }
	html.lhm-filter-offen #layout_mobile_overlay #layout_mobile_filter_gruppenumschalter_button:hover { background: #FFFFFF; color: #141414; border-color: #CFCCC4; }
	html.lhm-filter-offen #layout_mobile_overlay #layout_mobile_filter_controls:hover { background: #FFFFFF; }
	html.lhm-filter-offen #layout_mobile_overlay .layout_mobile_filter_controls_reset:hover { border-color: #141414; background: #FFFFFF; color: #141414; }
	html.lhm-filter-offen #layout_mobile_overlay .layout_mobile_filter_controls_confirm:hover { background: #141414; color: #FFFFFF; }
	html.lhm-detail .mobile_design_top_ueberschrift:hover { color: #6b6b68; }
	html.lhm-detail .mobile_design_eigenschaften_ueberschrift:hover { color: #141414; }
	html.lhm-detail .design_gruppe_weitere_ueberschrift:hover { color: #6b6b68; }
	html.lhm-detail .design_abpreis_hervorgehoben:hover { color: #141414; }
	html.lhm-detail .design_abpreis .preisAlt:hover { color: #6b6b68; }
	html.lhm-detail .lhm-detail-rabatt:hover { background: #C62828; color: #FFFFFF; }
	html.lhm-detail .zusatz .button_muster:hover { background: #FFFFFF !important; color: #141414 !important; border-color: #141414; }
	html.lhm-detail .lhm-detail-vorteile:hover { color: #2E7D32; }
	html.lhm-detail .stoffeigenschaftenIcons:not(.lichttechnischeWerte) > div:hover { background: #F2F2F0; }
	html.lhm-detail #text_stern_erklaerung:hover { color: #6b6b68; }
	html.lhm-detail .lhm-detail-bewerten:hover { border-color: #D6D6D2; background: #FFFFFF; color: #141414; }
	#lhm-toolbar button:hover { color: var(--sp-navy); border-color: var(--sp-linie); }
	#lhm-toolbar .lhm-btn-filter:hover { background: var(--sp-navy); border-color: var(--sp-navy); color: #fff; }
	#lhm-toolbar .lhm-btn-filter .lhm-badge:hover { background: var(--sp-rot); color: #fff; }
	#lhm-toolbar .lhm-chip-aktiv:hover { background: var(--sp-flaeche); border-color: var(--sp-navy); }
	#lhm-toolbar .lhm-quick:hover { background: var(--sp-hell); border-color: var(--sp-linie); }
	.lhm-count:hover { color: var(--sp-navy); }
	.artikel_alle #listing_artikel .listingBox:hover { border-color: var(--sp-linie); }
	.artikel_alle #listing_artikel .listingBox .artikelBez:hover { color: var(--sp-navy); }
	.artikel_alle #listing_artikel .listingBox .artikelKonfi .abPreis:hover { color: var(--sp-grau); }
	.artikel_alle #listing_artikel .listingBox .artikelKonfi .abPreisPreis:hover { color: var(--sp-rot); }
	.artikel_alle #listing_artikel .listingBox .artikelKonfi .preisAlt:hover { color: var(--sp-grau); }
	.artikel_alle #listing_artikel .listingBox .nooverflow > a.konfigurieren:hover { background: var(--sp-navy); color: #fff; }
	.lhm-rabatt:hover { background: var(--sp-rot); }
	.lhm-licht:hover { color: var(--sp-navy); }
	html.lhm-filter-offen .layout_mobile_filter_box_ueberschrift:hover { color: var(--sp-navy); }
	html.lhm-filter-offen #layout_mobile_overlay .layout_mobile_filter_box_elements.filter .layout_mobile_filter_box_element:hover { border-color: var(--sp-linie); color: var(--sp-navy); }
	html.lhm-filter-offen #layout_mobile_overlay .layout_mobile_filter_box_elements.filter .layout_mobile_filter_box_element.active:hover { background: var(--sp-flaeche); border-color: var(--sp-navy); color: var(--sp-navy); }
	html.lhm-filter-offen #layout_mobile_overlay .layout_mobile_filter_controls_reset:hover { border-color: var(--sp-navy); color: var(--sp-navy); }
	html.lhm-filter-offen #layout_mobile_overlay .layout_mobile_filter_controls_confirm:hover { background: var(--sp-navy); }
	html.lhm-detail .design_top_ueberschrift:hover { color: var(--sp-grau); }
	html.lhm-detail .design_eigenschaften_ueberschrift_group *:hover { color: var(--sp-navy); }
	html.lhm-detail .zusatz a.button.btn4:hover { background: var(--sp-navy); border-color: var(--sp-navy); color: #fff; }
	html.lhm-detail .zusatz a.button.btn3:hover { border-color: var(--sp-navy); color: var(--sp-navy); }
	html.lhm-detail .design_abpreis_hervorgehoben:hover { color: var(--sp-navy); }
	html.lhm-detail .lhm-detail-rabatt:hover { background: var(--sp-rot); }
	html.lhm-detail .lhm-detail-vorteile li:hover { color: var(--sp-navy); }
	html.lhm-detail .artikelKonfigurieren:hover { background: #fff; }
	html.lhm-detail .artikelKonfigurieren .buttonKonfigurierenMobile:hover { background: var(--sp-navy); border-color: var(--sp-navy); }
	html.lhm-detail .textPreisMobile:hover { color: var(--sp-navy); }
	#lhm-toolbar button:hover:hover, #lhm-sortsheet button:hover:hover { outline-color: transparent; }
}

/* Sortier-Sheet ueber der Swiss-Navigationsleiste unten (#layout_mobile_navigation z-index 1850) */
@media (max-width: 500px) {
	#lhm-sortsheet { z-index: 2000 !important; }
}

/* Detailseite: Icon + Text in den Buttons "Masse eingeben" / "Gratis Muster" mittig (Swiss img { margin:auto } schob sie auseinander) */
@media (max-width: 500px) {
	.design .zusatz a.button { gap: 10px; }
	.design .zusatz a.button img { margin: 0 !important; flex: 0 0 auto; }
	.design .zusatz a.button span { flex: 0 1 auto !important; width: auto !important; margin: 0 !important; }
}

/* Desktop/Tablet (>500px): Swiss mass_listing.css gibt JEDEM span im Konfigurieren-Link ein Zahnrad-Icon
   (.listingBox a:last-child span) - die Text-Spans wieder normal, "Masse eingeben" nur mobil */
.listingBox a.konfigurieren span.lhm-text-desktop,
.listingBox:hover a.konfigurieren span.lhm-text-desktop { display: inline; background: none; transform: none; transition: none; padding: 0; }
.listingBox a.konfigurieren span.lhm-text-mobil { display: none; }