/* Leikwood Preis- und Optionen-Baustein
 *
 * Aufbau und Masse nach der Designreferenz vom 01.09.2026.
 * Bewusst ohne font-family: der Block erbt die globalen Elementor-Schriften,
 * damit die Umstellung auf Bitter und Manrope hier von selbst greift.
 */

.lwpb {
	--lwpb-anthrazit: #383E42;
	--lwpb-gold:      #AD9271;
	--lwpb-grau:      #666666;
	--lwpb-linie:     #E3E3E3;
	--lwpb-offweiss:  #F8F8F8;
	display: block;
	color: var(--lwpb-anthrazit);
	font-family: inherit;
}

/* Im Warenkorb-Formular der Produktseite (Madex-Block) */
form.cart .lwpb { margin: 4px 0 26px; }
.csp-single .price-big[hidden] { display: none !important; }

/*
 * Ruhigere Proportionen wie in der Designreferenz: auf breiten Bildschirmen wuchs der
 * Inhalt bisher mit und alle Kacheln wurden dadurch klobig. Zwei Deckel halten das.
 */
/* Madex setzt auf .csp-wrap selbst ein max-width: none, deshalb greift der Deckel
   eine Ebene hoeher an der Sektion. */
.csp-single {
	max-width: 1120px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.lwpb { max-width: 560px; }

/* „Passe deinen Tisch an" von Madex ist doppelt, seit der Baustein hier steht. */
.csp-single .pcp-custom-form-under-cart { display: none !important; }

/* --- Feld: Beschriftung links, gewählter Wert rechts -------------------- */
.lwpb-feld { margin: 0 0 24px; }

.lwpb-kopf {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	margin: 0 0 10px;
}
.lwpb-label {
	margin: 0;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lwpb-grau);
	line-height: 1.2;
}
.lwpb-wert {
	font-size: 17px;
	line-height: 1.2;
	color: var(--lwpb-anthrazit);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* --- Knopfreihe (Länge) ------------------------------------------------- */
.lwpb-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.lwpb-knopf { margin: 0; cursor: pointer; }
.lwpb-knopf input { position: absolute; opacity: 0; width: 0; height: 0; }
.lwpb-knopf > span {
	display: block;
	min-width: 56px;
	padding: 9px 12px;
	border: 1px solid var(--lwpb-linie);
	text-align: center;
	font-size: 14px;
	background: #fff;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.lwpb-knopf:hover > span { border-color: var(--lwpb-gold); }
.lwpb-knopf input:focus-visible + span { outline: 2px solid var(--lwpb-gold); outline-offset: 2px; }
.lwpb-knopf input:checked + span {
	background: var(--lwpb-anthrazit);
	border-color: var(--lwpb-anthrazit);
	color: #fff;
}
.lwpb-knopf--sonder input:checked + span { background: var(--lwpb-gold); border-color: var(--lwpb-gold); }

/* --- Feste Platte (Produktseite eines Einzelstücks) -------------------- */
.lwpb-plattefix {
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--lwpb-linie);
	background: var(--lwpb-offweiss);
	font-size: 15px;
	font-variant-numeric: tabular-nums;
}
.lwpb-plattefix-hinweis {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	color: var(--lwpb-grau);
	font-variant-numeric: normal;
}

/* --- Regler (Breite, Stärke) ------------------------------------------- */
.lwpb-masse[data-gesperrt] { opacity: .4; pointer-events: none; }
/* Produktnummer/SKU wird nicht gebraucht (Salome 02.09.2026). */
.csp-single .sku-ml,
.sku-ml { display: none !important; }

/* Goldene Linie mit rundem Griff, wie in der Designreferenz.
   Das Theme legt um jedes input einen Rahmen mit Hintergrund und Schatten – der muss weg,
   sonst sieht der Regler wie ein Eingabefeld aus. */
.lwpb-regler {
	display: block;
	width: 100%;
	margin: 0;
	height: 20px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	min-height: 0 !important;
	line-height: normal !important;
}
.lwpb-regler:focus-visible { outline: 2px solid var(--lwpb-gold); outline-offset: 4px; }

/* Spur – eine feine goldene Linie.
   Alles mit !important: gemessen am 09.09.2026 auf /test wurde die Spur als dicke, runde
   Pille gerendert und der Griff schwarz. Ohne !important gewinnt die Theme-Regel fuer
   input[type=range], genau wie bei den Knoepfen. Werte aus der Designreferenz
   (leikwood-konfigurator-prototyp_2026-08-11.html, Zeile 61-71): Spur 2 px in Linienfarbe
   #E3E3E3, Griff 17 px rund in Holzton #AD9271. Erst war die Spur golden; Salome hat sich am
   09.09.2026 nach dem Ansehen fuer die Referenz entschieden ("spur grau und griff golden"). */
.lwpb-regler::-webkit-slider-runnable-track {
	height: 2px !important;
	background: var(--lwpb-linie) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.lwpb-regler::-moz-range-track {
	height: 2px !important;
	background: var(--lwpb-linie) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
/* Der zurueckgelegte Teil bleibt golden: er zeigt den gewaehlten Wert an. */
.lwpb-regler::-moz-range-progress { height: 2px !important; background: var(--lwpb-gold) !important; }

/* Griff – runder Punkt in Holzton. Das ist bewusst der einzige runde Umriss im ganzen
   Baustein: ein Punkt, keine Flaeche (D-097). */
.lwpb-regler::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 17px !important;
	height: 17px !important;
	margin-top: -7.5px !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--lwpb-gold) !important;
	box-shadow: none !important;
	cursor: pointer !important;
}
.lwpb-regler::-moz-range-thumb {
	width: 17px !important;
	height: 17px !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--lwpb-gold) !important;
	box-shadow: none !important;
	cursor: pointer !important;
}
.lwpb-regler::-webkit-slider-thumb:hover { background: var(--lwpb-anthrazit) !important; }
.lwpb-regler::-moz-range-thumb:hover { background: var(--lwpb-anthrazit) !important; }
.lwpb-skala {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 6px;
	font-size: 13px;
	color: var(--lwpb-grau);
}
.lwpb-skala-mitte { color: var(--lwpb-gold); }

/* --- Kacheln (Holzart, Gestell, Platten) ------------------------------- */
.lwpb-kacheln { display: grid; gap: 8px; }
.lwpb-kacheln--holz    { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.lwpb-kacheln--gestell { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lwpb-kacheln--ausfuehrung { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lwpb-kacheln--platten { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.lwpb-kachel {
	position: relative;
	margin: 0;
	display: flex;
	flex-direction: column;
	cursor: pointer;
	border: 1px solid var(--lwpb-linie);
	background: #fff;
	transition: border-color .15s ease;
}
.lwpb-kachel:hover { border-color: var(--lwpb-gold); }
.lwpb-kachel input { position: absolute; opacity: 0; width: 0; height: 0; }
.lwpb-kachel:has(input:checked) { border-color: var(--lwpb-anthrazit); box-shadow: inset 0 0 0 1px var(--lwpb-anthrazit); }

.lwpb-kachel-bild { display: block; overflow: hidden; background: var(--lwpb-offweiss); }
.lwpb-kachel-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lwpb-kacheln--holz .lwpb-kachel-bild { aspect-ratio: 1 / 1; }
.lwpb-kacheln--gestell .lwpb-kachel-bild,
.lwpb-kacheln--platten .lwpb-kachel-bild,
.lwpb-kacheln--ausfuehrung .lwpb-kachel-bild { aspect-ratio: 4 / 3; }

.lwpb-kachel-bild--leer {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lwpb-grau);
	background: #fff;
}

.lwpb-kachel-name {
	display: block;
	padding: 7px 6px 0;
	font-size: 12px;
	line-height: 1.3;
	text-align: center;
}
.lwpb-kacheln--gestell .lwpb-kachel-name,
.lwpb-kacheln--platten .lwpb-kachel-name,
.lwpb-kacheln--ausfuehrung .lwpb-kachel-name { text-align: left; padding: 7px 8px 0; }

/* Fixe Ausführungen: verkaufte Einzelstücke bleiben als Schaustück sichtbar –
   erkennbar am goldenen Band, aber nicht wählbar (Salome 02.09.2026). */
.lwpb-kachel--verkauft { cursor: default; }
.lwpb-kachel--verkauft:hover { border-color: var(--lwpb-linie); }
.lwpb-kachel--verkauft .lwpb-kachel-bild { position: relative; }
.lwpb-kachel--verkauft .lwpb-kachel-bild img { filter: grayscale(1); opacity: .75; }
.lwpb-verkauft {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	background: var(--lwpb-gold);
	color: #fff;
	text-align: center;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: 5px 4px;
}
.lwpb-kachel--nachmass .lwpb-kachel-bild--leer { aspect-ratio: 4 / 3; }
.lwpb-feld--ausfuehrung .lwpb-kachel-zusatz { font-style: italic; padding-bottom: 8px; }

.lwpb-kachel-zusatz,
.lwpb-kachel-preis {
	display: block;
	padding: 1px 8px;
	font-size: 11px;
	color: var(--lwpb-grau);
}
.lwpb-kachel-name:last-child,
.lwpb-kachel-preis:last-child { padding-bottom: 9px; }
.lwpb-kacheln--holz .lwpb-kachel-name { padding-bottom: 8px; }
.lwpb-kachel--ohne-preis .lwpb-kachel-preis { font-style: italic; }

.lwpb-mehr {
	display: inline-block;
	margin-top: 14px;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lwpb-grau);
	border-bottom: 1px solid var(--lwpb-linie);
	text-decoration: none;
	padding-bottom: 2px;
}
.lwpb-mehr:hover { color: var(--lwpb-anthrazit); border-bottom-color: var(--lwpb-gold); }

/* --- Preis und Anfrageweg ---------------------------------------------- */
.lwpb-abschluss {
	border-top: 1px solid var(--lwpb-anthrazit);
	padding-top: 16px;
	margin-top: 28px;
}
.lwpb-abschluss .lwpb-kopf { margin-bottom: 6px; }
.lwpb-preis {
	margin: 0;
	font-size: 30px;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}
.lwpb-preis--anfrage { font-size: 24px; color: var(--lwpb-grau); }
.lwpb-grund { margin: 8px 0 0; font-size: 13px; color: var(--lwpb-grau); }
.lwpb-grund:empty { display: none; }

.lwpb-anfrage {
	display: block;
	margin: 12px 0 0;
	padding: 13px 16px;
	border: 1px solid var(--lwpb-anthrazit);
	text-align: center;
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lwpb-anthrazit);
	text-decoration: none;
	background: #fff;
}
.lwpb-anfrage:hover { background: var(--lwpb-anthrazit); color: #fff; }

/* Ohne Preis ist der Kaufbutton gesperrt – der Anfrageweg tritt in den Vordergrund. */
.lwpb-gesperrt { opacity: .4; pointer-events: none; }
.lwpb--anfrage .lwpb-anfrage { background: var(--lwpb-anthrazit); color: #fff; }

@media (max-width: 780px) {
	.lwpb-kacheln--holz { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.lwpb-kacheln--gestell,
	.lwpb-kacheln--platten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lwpb-preis { font-size: 28px; }
	.lwpb-wert { font-size: 17px; }
}


/* --- Rundungen (Salome 02.09.2026) -------------------------------------
 * Die ganze Produktseite ist eckig, auch das grosse Produktbild – so wie die CI
 * es vorgibt (0 px) und wie es die Designreferenz zeigt.
 * Die Regeln sind absichtlich breit gefasst, weil die Rundungen aus dem Theme
 * und aus dem Madex-Block kommen, nicht aus diesem Baustein.
 */
.csp-single .hero,
.csp-single .hero-inner,
.csp-single .hero img,
.csp-single .media > .hero {
	border-radius: 0 !important;
	overflow: hidden;
}

.csp-single .thumbs button,
.csp-single .thumbs img,
.csp-single .summary,
.csp-single .short,
.csp-single .sku-ml,
.csp-single .badge-list span,
.csp-single .crumbs,
.csp-single .production-time,
.csp-single form.cart,
.csp-single form.cart button,
.csp-single form.cart input,
.csp-single form.cart label,
.csp-single .pcp-wrapper,
.csp-single .pcp-card,
.csp-single .pcp-extra-option,
.csp-single .pcp-submit,
.csp-single .pcp-cancel,
.lwpb,
.lwpb *,
.lwpb-kachel,
.lwpb-kachel-bild,
.lwpb-kachel-bild img,
.lwpb-knopf > span,
.lwpb-plattefix,
.lwpb-anfrage,
.lwpb-verkauft {
	border-radius: 0 !important;
}

/* Der Regler-Griff bleibt rund, der ist ja ein Punkt und keine Fläche. */
.lwpb-regler::-webkit-slider-thumb { border-radius: 50% !important; }
.lwpb-regler::-moz-range-thumb { border-radius: 50% !important; }

/* Die Ausführungszeile steht neu unter der Galerie in der linken Spalte. */
.lwpb-feld--unten {
	max-width: none;
	margin: 26px 0 0;
}
.lwpb-feld--unten .lwpb-kacheln--ausfuehrung {
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

/* Der Kaufbutton holt seine Rundung aus einer Media-Query des Themes –
   deshalb hier mit hoeherer Spezifitaet nachziehen. */
html body .csp-single button,
html body .csp-single .button,
html body .csp-single input[type="submit"],
html body .csp-single form.cart button.single_add_to_cart_button,
html body .csp-single .buyrow button,
html body .lwpb-anfrage {
	border-radius: 0 !important;
}

/* --- Anfrageweg --------------------------------------------------------
 * Der Knopf sieht wie der zweite Weg aus, nicht wie der Hauptweg. Das Formular
 * ist zugeklappt und öffnet sich von selbst, wenn es keinen Preis gibt.
 */
.lwpb-anfrage-block { margin: 12px 0 0; }

.lwpb-anfrage-knopf {
	display: block;
	width: 100%;
	margin: 0;
	padding: 13px 16px;
	border: 1px solid var(--lwpb-anthrazit);
	background: #fff;
	color: var(--lwpb-anthrazit);
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
}
.lwpb-anfrage-knopf:hover { background: var(--lwpb-anthrazit); color: #fff; }
.lwpb--anfrage .lwpb-anfrage-knopf { background: var(--lwpb-anthrazit); color: #fff; }

.lwpb-anfrage-form {
	margin-top: 14px;
	padding: 18px;
	border: 1px solid var(--lwpb-linie);
	background: var(--lwpb-offweiss);
}
.lwpb-anfrage-text { margin: 0 0 14px; font-size: 13px; color: var(--lwpb-grau); }

.lwpb-anfrage-felder {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
.lwpb-anfrage-feld--breit { grid-column: 1 / -1; }
.lwpb-anfrage-feld { display: block; margin: 0; }
.lwpb-anfrage-feld > span {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--lwpb-grau);
}
.lwpb-anfrage-feld > span em { text-transform: none; letter-spacing: 0; font-style: italic; }
.lwpb-anfrage-feld input,
.lwpb-anfrage-feld textarea {
	width: 100%;
	padding: 9px 10px;
	border: 1px solid var(--lwpb-linie);
	background: #fff;
	font-size: 14px;
	font-family: inherit;
}
.lwpb-anfrage-feld input:focus,
.lwpb-anfrage-feld textarea:focus { outline: 2px solid var(--lwpb-gold); outline-offset: 1px; }

.lwpb-anfrage-mitschick {
	margin: 12px 0 0;
	font-size: 12px;
	color: var(--lwpb-grau);
	line-height: 1.5;
}
.lwpb-anfrage-mitschick:empty { display: none; }

.lwpb-anfrage-senden {
	display: block;
	width: 100%;
	margin: 14px 0 0;
	padding: 13px 16px;
	border: 1px solid var(--lwpb-gold);
	background: var(--lwpb-gold);
	color: #fff;
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
}
.lwpb-anfrage-senden:hover { background: var(--lwpb-anthrazit); border-color: var(--lwpb-anthrazit); }

/* Köderfeld gegen automatische Ausfüller: für Menschen unsichtbar, für Roboter da. */
.lwpb-koeder {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 600px) {
	.lwpb-anfrage-felder { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Produkte ohne Preis: "Preis auf Anfrage" statt "CHF 0.00".
   Ruhig gesetzt - es ist eine Information, kein Angebot. Gleiche Groesse wie
   ein Preis, aber im Grauton des Fliesstexts, damit es nicht wie ein Betrag
   um Aufmerksamkeit kaempft.
   -------------------------------------------------------------------------- */
.lwpb-auf-anfrage{
  color: var(--lwpb-grau, #666666);
  font-style: normal;
  letter-spacing: .2px;
}
.lwpb-knopf-anfrage{
  border-radius: 0 !important;
}

/* Rückmeldung nach dem Absenden einer Anfrage.
   Reines CSS, kein JavaScript: LiteSpeed verschiebt Skripte auf die erste Nutzerhandlung,
   eine Bestätigung darf davon nicht abhängen (D-120: Sichtbarkeit ist der Grundzustand). */
.lwpb-anfrage-meldung {
	margin: 12px 0 0;
	padding: 12px 16px;
	border-left: 2px solid #AD9271;
	background: #F8F8F8;
	font-family: Manrope, sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 26px;
	color: #383E42;
	border-radius: 0;
}
.lwpb-anfrage-meldung--hinweis {
	border-left-color: #69727D;
}

/* --- Produktseite ohne Konfigurator (0.9.2) ---------------------------------
   Für Produkte ohne Preis und ohne Serie – die 23 Tischbeine und Gestelle.
   Sie bekommen denselben Anfrageweg, damit auch dort keine Sackgasse steht. */
.lwpb--nur-anfrage {
	margin: 24px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid #E5E5E5;
}
.lwpb-nur-anfrage-text {
	font-family: Manrope, sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 26px;
	color: #666666;
	margin: 0 0 20px;
}

/* --- Fenster mit allen Gestellen (T-257, ab 1.1.0) --------------------------
   Werte aus der Designreferenz Editorial vom 20.08.2026 (.ov / .ovBox / .ovGrid).
   Der Link darunter bleibt ein echter Link auf die Kategorieseite – laeuft das
   Skript nicht, fuehrt er dorthin. Sichtbarkeit haengt nicht am Effekt (D-120). */
.lwpb-fenster {
	position: fixed;
	inset: 0;
	background: rgba(56, 62, 66, .55);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	z-index: 100000;
	overflow-y: auto;
	padding: 40px 20px;
}
.lwpb-fenster[hidden] { display: none !important; }

.lwpb-fenster-kasten {
	background: #FFFFFF;
	max-width: 940px;
	width: 100%;
	padding: 30px 34px 34px;
	position: relative;
	border-radius: 0;
}
.lwpb-fenster-titel {
	font-family: Bitter, Georgia, serif;
	font-size: 20px;
	font-weight: 400;
	color: var(--lwpb-anthrazit);
	margin: 0 0 4px;
}
.lwpb-fenster-text {
	color: var(--lwpb-grau);
	font-size: 14px;
	font-weight: 300;
	margin: 0 0 22px;
}
.lwpb-fenster-gruppe {
	font-family: Manrope, sans-serif;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--lwpb-blaugrau, #69727D);
	margin: 22px 0 10px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--lwpb-linie);
}
.lwpb-fenster-gruppe:first-of-type { margin-top: 0; }

.lwpb-fenster-raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 14px;
}

.lwpb-fenster-zu {
	position: absolute;
	top: 10px;
	right: 12px;
	background: none !important;
	border: 0 !important;
	font-size: 26px !important;
	line-height: 1 !important;
	color: var(--lwpb-grau) !important;
	cursor: pointer;
	padding: 4px 8px !important;
	box-shadow: none !important;
	min-height: 0 !important;
}
.lwpb-fenster-zu:hover { color: var(--lwpb-anthrazit) !important; }

@media (max-width: 600px) {
	.lwpb-fenster { padding: 0; }
	.lwpb-fenster-kasten { padding: 24px 18px 28px; min-height: 100%; }
	.lwpb-fenster-raster { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* --- Plattenwahl unter dem Produktbild (T-258, ab 1.2.0) --------------------
   Werte aus der Designreferenz Editorial vom 20.08.2026 (.pickRow / .pickScroll / .pcard).

   `contain: inline-size` ist kein Schmuck, sondern die Reparatur von 1.2.0 (R-021).
   Gemessen am 10.09.2026 auf /product/shack/: die Kartenreihe ist 1860 px breit. Sie
   scrollt zwar selbst (overflow-x: auto), aber ihre volle Breite zaehlt trotzdem bei
   der Spaltenberechnung mit. Die Produktseite von Madex ist ein Raster
   (`div.csp-wrap`), dessen linke Spalte sich am Inhalt orientiert – also wurde sie
   1860 px breit, `div.summary` rutschte auf x = 2620 und die ganze Seite liess sich
   nach rechts schieben. Mit `contain: inline-size` bekommt die Reihe ihre Breite von
   der Spalte statt umgekehrt: gemessen danach 536 px links, 536 px rechts, und der
   Scrollbalken sitzt dort, wo er hingehoert – in der Reihe. Der Inhalt bleibt dabei
   vollstaendig erreichbar, es wird nichts abgeschnitten (D-136). */
.lwpb-plattenwahl { margin-top: 34px; width: 100%; contain: inline-size; }

/* Aus dem versteckten Kaufformular gerettete Bloecke (R-022) brauchen etwas Luft. */
.lwpb--gerettet { margin-top: 20px; }

.lwpb-plattenwahl-titel {
	font-family: Manrope, sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--lwpb-anthrazit);
	margin: 0 0 4px;
}
.lwpb-plattenwahl-text {
	margin: 0 0 16px;
	color: var(--lwpb-grau);
	font-size: 15px;
	font-weight: 300;
	line-height: 26px;
}

/* Der Schiebebalken ist hier kein Beiwerk, sondern der Weg zu den hinteren Platten
   (Salome, 10.09.2026: „ein Balken zum Rüberschieben, dass trotzdem alle angesehen werden
   können"). Deshalb `scroll` statt `auto`: der Balken ist immer da, auch wenn das
   Betriebssystem ihn sonst erst beim Scrollen einblendet. Farben wie bei den Reglern –
   graue Spur, goldener Griff. */
.lwpb-plattenwahl-reihe {
	display: flex;
	gap: 20px;
	overflow-x: scroll;
	padding-bottom: 14px;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: var(--lwpb-gold) var(--lwpb-linie);
}
.lwpb-plattenwahl-reihe::-webkit-scrollbar { height: 8px; }
.lwpb-plattenwahl-reihe::-webkit-scrollbar-track { background: var(--lwpb-linie); border-radius: 0; }
.lwpb-plattenwahl-reihe::-webkit-scrollbar-thumb { background: var(--lwpb-gold); border-radius: 0; }
.lwpb-plattenwahl-reihe::-webkit-scrollbar-thumb:hover { background: var(--lwpb-anthrazit); }

/* Platte ohne Shop-Produkt: leere Flaeche statt erfundenem Bild. */
.lwpb-pkarte-leer {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 300;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--lwpb-grau);
}

.lwpb-pkarte {
	flex: 0 0 168px;
	scroll-snap-align: start;
	cursor: pointer;
	text-align: left;
}
.lwpb-pkarte input { position: absolute; opacity: 0; width: 0; height: 0; }

.lwpb-pkarte-bild {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	border: 1px solid var(--lwpb-linie);
	background: var(--lwpb-offweiss);
	position: relative;
	overflow: hidden;
}
.lwpb-pkarte-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lwpb-pkarte-marke {
	position: absolute;
	bottom: 6px;
	right: 6px;
	background: rgba(255, 255, 255, .86);
	font-style: normal;
	color: var(--lwpb-grau);
	font-size: 9px;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 2px 5px;
}
.lwpb-pkarte-nr {
	display: block;
	font-family: Manrope, sans-serif;
	font-size: 18px;
	font-weight: 400;
	color: var(--lwpb-anthrazit);
	margin: 11px 0 1px;
}
.lwpb-pkarte-masse { display: block; font-size: 15px; font-weight: 300; color: var(--lwpb-grau); }
.lwpb-pkarte-preis { display: block; font-size: 15px; margin-top: 5px; font-variant-numeric: tabular-nums; }
.lwpb-pkarte--ohne-preis .lwpb-pkarte-preis { color: var(--lwpb-grau); }

/* Gewählt: Rahmen am Bild, Nummer fett, Vermerk darunter. */
.lwpb-pkarte-haken {
	display: none;
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lwpb-gold);
	margin-top: 4px;
}
.lwpb-pkarte input:checked ~ .lwpb-pkarte-bild { outline: 2px solid var(--lwpb-anthrazit); outline-offset: -2px; }
.lwpb-pkarte input:checked ~ .lwpb-pkarte-nr { font-weight: 700; }
.lwpb-pkarte input:checked ~ .lwpb-pkarte-haken { display: block; }
.lwpb-pkarte input:focus-visible ~ .lwpb-pkarte-bild { outline: 2px solid var(--lwpb-gold); outline-offset: 2px; }