/**
 * Print-Engine – Frontend-Styling
 *
 * Integrations-Prinzip: wo immer möglich auf WooCommerce-Standardklassen
 * setzen (".shop_table", ".button.alt.single_add_to_cart_button" für den
 * Kauf-Button), damit das aktive Theme (z.B. Blocksy) automatisch seine
 * eigene Optik anwendet – Farbe, Radius, Hover-Zustand des Buttons kommen
 * dadurch 1:1 vom Theme.
 *
 * Für die Akzentfarben nutzen wir Blocksys CSS-Custom-Properties
 * (--theme-palette-color-1/-2), mit Fallback-Werten, falls das Theme
 * diese (noch) nicht definiert oder ein anderes Theme aktiv ist.
 *
 * WICHTIGE ÄNDERUNG gegenüber der ersten Version: Die Preisauswahl ist
 * KEIN kleiner Radio-Punkt mehr, sondern die komplette Zelle ist eine
 * grosse, klickbare "Karte". Ausgewählt = komplett eingefärbt + Häkchen.
 * Das native Radio-Input bleibt aus Barrierefreiheits-/Formular-Gründen
 * bestehen, wird aber optisch unsichtbar gemacht (nicht "display:none",
 * sondern per Clip-Technik – bleibt so für Screenreader/Tastatur nutzbar).
 */

/* Absicherung für JS-gesteuertes .prop('hidden', true/false): das
 * `[hidden]`-Attribut hat von Haus aus dieselbe CSS-Spezifität (0,1,0) wie
 * eine einfache .klasse{...}-Regel – bei Gleichstand gewinnt die später im
 * Stylesheet stehende Regel. Eigene "display: flex"-Regeln auf Elementen
 * wie .pe-cs-row/.pe-current-selection-total (die auch mal "hidden"
 * bekommen, siehe frontend.js updateSelectionBox()) haben dadurch bisher
 * [hidden] überstimmt: die Zeile blieb sichtbar mit veraltetem Inhalt,
 * obwohl JS sie korrekt auf hidden gesetzt hat. Diese Regel erzwingt
 * [hidden] IMMER mit höchster Priorität, unabhängig von Ladereihenfolge. */
[hidden] {
	display: none !important;
}

.pe-configurator-panel,
.pe-matrix-section {
	--pe-heading-color: var( --theme-palette-color-1, #2f7cb0 );
	--pe-accent-color: var( --theme-palette-color-2, #e2a530 );
	--pe-accent-color-contrast: #ffffff;
	--pe-border-color: #e1e1e1;
	--pe-row-stripe: #f7f7f7;
}

/* -----------------------------------------------------------------------
 * Options-Panel (schmale Spalte, innerhalb der Produkt-Summary)
 * --------------------------------------------------------------------- */
.pe-configurator-panel {
	/* KEIN margin-top mehr: Blocksy-Ära-Rest aus der Zeit vor der freien
	   Platzierung im WoodMart-Layout-Builder. Der Top-Margin schob die Box
	   gegenüber dem Produktbild nach unten, da beide jetzt als eigene
	   Flex-Elemente in derselben Builder-Spalte/-Reihe stehen (die den
	   Abstand zwischen Elementen selbst über "Gap" regelt). Bottom-Margin
	   bleibt als Fallback-Abstand, falls in der jeweiligen Builder-Spalte
	   kein eigener Gap gesetzt ist. */
	margin: 0 0 1.5em;
	padding: 1.25em 1.5em;
	border: 1px solid var( --pe-border-color );
	border-radius: var( --theme-card-border-radius, 6px );
	background: #fff;
}

.pe-panel-title {
	margin: 0 0 0.75em;
	font-size: 1.05em;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* -----------------------------------------------------------------------
 * Absicherung gegen das doppelte Standard-Add-to-Cart-Formular
 * -----------------------------------------------------------------------
 * maybe_remove_default_add_to_cart() in class-pe-woocommerce.php entfernt
 * das Standardformular normalerweise sauber über remove_action(). Manche
 * Themes (u.a. Blocksy in bestimmten Konfigurationen) rendern den
 * Add-to-Cart-Bereich im Produkt-Template aber nicht strikt über die
 * WooCommerce-Standard-Hook-Priorität – dann läuft das remove_action()
 * ins Leere und das alte Formular (Mengenfeld + eigener Button) taucht
 * trotzdem auf. Diese Regel ist die zweite Verteidigungslinie: Jedes
 * form.cart INNERHALB der Produkt-Zusammenfassung, das NICHT unser
 * eigenes Formular (.pe-cart-form) ist, wird ausgeblendet. Bewusst auf
 * .summary/.entry-summary begrenzt, damit z.B. Formulare in "Ähnliche
 * Produkte" weiter unten auf der Seite NICHT betroffen sind. */
.summary form.cart:not( .pe-cart-form ),
.entry-summary form.cart:not( .pe-cart-form ) {
	display: none !important;
}

.pe-configurator-panel .pe-field label {
	display: block;
	color: var( --pe-heading-color );
	font-weight: 600;
	margin-bottom: 0.35em;
}

.pe-configurator-panel .pe-material-select {
	width: 100%;
	padding: 0.6em 0.7em;
	border: 1px solid var( --pe-border-color );
	border-radius: var( --theme-input-border-radius, 4px );
	background: #fff;
	font: inherit;
}

.pe-configurator-panel .pe-material-select:focus {
	outline: none;
	border-color: var( --pe-heading-color );
	box-shadow: 0 0 0 1px var( --pe-heading-color );
}

/* -----------------------------------------------------------------------
 * "Ihre Auswahl"-Box – wird per JS direkt unter das Produktbild verschoben
 * (siehe frontend.js). Bewusst als EIGENSTÄNDIGER Block gestaltet (nicht
 * wie zuvor als Text-Zeile mitten im Konfigurator), mit klarer visueller
 * Trennung von Konfigurator und Preistabelle.
 * --------------------------------------------------------------------- */
.pe-current-selection {
	/* Gleicher Grund wie bei .pe-configurator-panel oben: kein margin-top
	   mehr, damit die Box nicht ungewollt nach unten rutscht, falls sie im
	   Builder als erstes Element einer Spalte platziert wird. */
	margin: 0 0 1em;
	padding: 1em 1.25em;
	background: #fff;
	border: 1px solid var( --pe-border-color, #e1e1e1 );
	border-radius: var( --theme-card-border-radius, 6px );
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.06 );
}

.pe-current-selection-title {
	margin: 0 0 0.6em;
	font-size: 0.95em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var( --pe-heading-color, #2f7cb0 );
}

.pe-current-selection-empty {
	margin: 0;
	font-size: 0.9em;
	color: #888;
	font-style: italic;
}

.pe-current-selection-details {
	margin: 0;
}

.pe-cs-row {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	padding: 0.3em 0;
	border-bottom: 1px solid #f2f2f2;
	font-size: 0.92em;
}

.pe-cs-row:last-child {
	border-bottom: none;
}

.pe-cs-row dt {
	color: #777;
	font-weight: 500;
}

.pe-cs-row dd {
	margin: 0;
	text-align: right;
	font-weight: 600;
}

.pe-cs-row--options dd {
	font-weight: 400;
	line-height: 1.5;
}

.pe-current-selection-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-top: 0.7em;
	padding-top: 0.6em;
	border-top: 2px solid var( --pe-accent-color, #e2a530 );
	font-size: 1.05em;
}

.pe-current-selection-total strong {
	font-size: 1.2em;
	color: var( --pe-accent-color, #e2a530 );
}

/* -----------------------------------------------------------------------
 * Matrix-Sektion (vollbreiter Block unterhalb der Produkt-Summary)
 * --------------------------------------------------------------------- */
.pe-matrix-section {
	margin: 2em 0;
	padding-top: 1.5em;
	border-top: 1px solid var( --pe-border-color );
	/* Kein eigenes max-width mehr: Auf Blocksy musste dieser Hook
	   (woocommerce_after_single_product_summary) selbst begrenzt werden,
	   da er dort ausserhalb des normalen Content-Containers lag. Auf
	   WoodMart (aktuelles Theme) sitzt dieser Bereich bereits korrekt
	   innerhalb der normalen Seitenbreite – ein zusätzliches, hart
	   gesetztes max-width hätte hier nur wieder zu einer falschen Breite
	   relativ zum Rest der Seite geführt. Sollte ein zukünftiges Theme das
	   erneut brauchen, gehört die Breite dort themespezifisch (per
	   passender CSS-Variable) wieder ergänzt, nicht pauschal auf 1200px.
	*/
	box-sizing: border-box;
}

.pe-matrix-heading {
	margin: 0 0 1em;
	color: var( --pe-accent-color );
	font-size: 1.15em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* CSS-Grid statt Flex-Wrap: beide Auflagen-Hälften bekommen garantiert
   exakt gleich viel Platz und bleiben sauber untereinander ausgerichtet,
   unabhängig vom Inhalt (kein "Verrutschen" bei unterschiedlich langen
   Preisen mehr). */
.pe-matrix-columns {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 320px, 1fr ) );
	gap: 1.5em 2em;
	align-items: start;
}

.pe-matrix-table-wrap {
	min-width: 0;
}

table.pe-matrix-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 0.4em;
	table-layout: fixed;
}

.pe-matrix-table col.pe-matrix-col-qty,
.pe-matrix-table th.pe-matrix-col-qty {
	width: 34%;
}

.pe-matrix-table th {
	padding: 0 0.5em 0.4em;
	text-align: center;
	font-size: 0.78em;
	font-weight: 700;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border: none;
}

.pe-matrix-table .pe-matrix-col-qty {
	text-align: left;
}

/* Voraussichtlicher Liefertermin, unter "Standard-/Budget-Lieferung" im
   Spaltenkopf – je Material/Lieferart fix (Auflage ändert daran nichts),
   siehe PE_Delivery_Calculator. */
.pe-matrix-delivery-date {
	display: block;
	margin-top: 0.15em;
	font-size: 0.85em;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	color: #999;
}

.pe-matrix-table tbody tr {
	background: var( --pe-row-stripe );
}

.pe-matrix-table tbody tr:nth-child( even ) {
	background: #eeeeee;
}

.pe-matrix-table td {
	padding: 0;
	vertical-align: middle;
}

.pe-matrix-table td.pe-matrix-col-qty {
	padding: 0 0.7em;
	font-weight: 700;
	font-size: 0.95em;
	white-space: nowrap;
}

.pe-matrix-table tbody tr td:first-child {
	border-top-left-radius: var( --theme-input-border-radius, 4px );
	border-bottom-left-radius: var( --theme-input-border-radius, 4px );
}

.pe-matrix-table tbody tr td:last-child {
	border-top-right-radius: var( --theme-input-border-radius, 4px );
	border-bottom-right-radius: var( --theme-input-border-radius, 4px );
}

/* -----------------------------------------------------------------------
 * Preisauswahl: eine grosse, eindeutige Karte pro Zelle statt Radio-Punkt.
 * Das <input type="radio"> existiert weiterhin im Markup (Formularlogik,
 * Barrierefreiheit), ist aber visuell komplett unsichtbar gemacht – die
 * ganze <label>-Fläche IST der Klick-/Auswahlbereich.
 * --------------------------------------------------------------------- */
.pe-price-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.pe-price-option {
	position: relative;
	display: block;
	margin: 0.15em 0.2em;
	padding: 0.65em 0.5em;
	text-align: center;
	background: #fff;
	border: 2px solid transparent;
	border-radius: var( --theme-input-border-radius, 4px );
	font-weight: 600;
	font-size: 0.95em;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.pe-price-option:hover {
	border-color: var( --pe-accent-color );
}

/* Tastatur-Fokus auf dem (unsichtbaren) Radio muss trotzdem sichtbar
   sein – wird auf die sichtbare Karte "durchgereicht". */
.pe-price-radio:focus-visible + .pe-price-text,
.pe-price-option:focus-within {
	outline: 2px solid var( --pe-heading-color );
	outline-offset: 2px;
}

/* Ausgewählter Zustand: klare, kräftige Füllung + Häkchen davor.
   Zwei redundante Mechanismen sorgen für die Markierung, damit sie in
   JEDEM Browser zuverlässig sichtbar ist:
   1. Die Klasse "is-selected" wird per JS gesetzt (siehe frontend.js).
   2. Zusätzlich :has() als CSS-natives Fallback/Backup. */
.pe-price-option.is-selected,
.pe-price-option:has( .pe-price-radio:checked ) {
	background: var( --pe-accent-color );
	border-color: var( --pe-accent-color );
	color: var( --pe-accent-color-contrast );
	transform: scale( 1.03 );
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.15 );
}

.pe-price-option.is-selected::before,
.pe-price-option:has( .pe-price-radio:checked )::before {
	content: '✓';
	position: absolute;
	top: 4px;
	right: 6px;
	font-weight: 700;
	font-size: 0.85em;
	line-height: 1;
}

.pe-price-option--empty {
	display: block;
	padding: 0.65em 0.5em;
	margin: 0.15em 0.2em;
	color: #aaa;
	font-weight: 400;
	font-size: 0.85em;
	font-style: italic;
	text-align: center;
	cursor: default;
}

.pe-price-option--empty:hover {
	border-color: transparent;
}

/* Aktionspreis: regulärer VK durchgestrichen + Aktionspreis fett
   darunter/daneben. Nur sichtbar, wenn ein Aktionspreis > 0 hinterlegt
   ist (siehe PE_Pricing::has_active_action_price()). */
.pe-price-regular {
	display: block;
	text-decoration: line-through;
	opacity: 0.7;
	font-size: 0.85em;
	font-weight: 400;
}

.pe-price-action {
	display: block;
	font-weight: 700;
}

/* Reiner, immer sichtbarer Totalpreis der Zelle (Basis + evtl. Optionen,
   siehe refreshMatrixWithOptions() in frontend.js). Ersetzt die frühere
   separate "= CHF X.XX"-Zusatzzeile – nur noch EINE fett dargestellte Zahl.
   BEWUSST kein "display:block": das Häkchen (✓) wird per ::before direkt
   auf .pe-price-option gesetzt und muss auf derselben Zeile wie der Preis
   bleiben – als Block-Element würde es eine eigene Zeile erzwingen und
   die ausgewählte Karte unnötig in die Höhe ziehen. */
.pe-price-current {
	font-weight: 700;
}

/* -----------------------------------------------------------------------
 * Zusatzoptionen (Veredelungen/Verarbeitung) – jetzt IM Panel, direkt
 * unter der Grammatur-Auswahl (schmale Spalte, nicht die breite Matrix).
 * --------------------------------------------------------------------- */
.pe-options-list {
	margin: 1em 0;
}

.pe-option-item {
	padding: 0.6em 0;
	border-bottom: 1px solid #f0f0f0;
}

.pe-option-item:last-child {
	border-bottom: none;
}

.pe-option-item--checkbox .pe-option-checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	cursor: pointer;
	font-weight: 400;
}

.pe-option-item--checkbox .pe-option-checkbox {
	margin-top: 0.2em;
}

.pe-option-item--select .pe-option-label {
	display: block;
	font-weight: 600;
	color: var( --pe-heading-color );
	margin-bottom: 0.35em;
}

.pe-option-item .pe-option-select {
	width: 100%;
	padding: 0.5em 0.6em;
	border: 1px solid var( --pe-border-color, #e1e1e1 );
	border-radius: var( --theme-input-border-radius, 4px );
	background: #fff;
	font: inherit;
}

.pe-option-item .pe-option-label {
	font-weight: 600;
}

.pe-option-required-mark {
	color: var( --pe-required-color, #d9534f );
	margin-left: 0.2em;
	font-weight: 700;
}

.pe-option-description {
	margin-top: 0.4em;
	font-size: 0.85em;
	color: #666;
	line-height: 1.4;
}

.pe-option-description p:first-child {
	margin-top: 0;
}

.pe-option-description p:last-child {
	margin-bottom: 0;
}

.pe-option-description a {
	text-decoration: underline;
}

/* Experten-Optionen: nativer <details>-Aufklapper, kein JS nötig. */
.pe-options-expert {
	margin-top: 0.75em;
	border-top: 1px solid var( --pe-border-color, #e1e1e1 );
	padding-top: 0.6em;
}

.pe-options-expert > summary {
	display: flex;
	align-items: center;
	gap: 0.5em;
	cursor: pointer;
	font-weight: 700;
	color: var( --pe-accent-color, #e2a530 );
	list-style: none;
}

.pe-options-expert > summary::-webkit-details-marker {
	display: none;
}

/* Gängiges Chevron-Dreieck statt "+"/"-": zeigt geschlossen nach rechts,
   dreht sich beim Aufklappen auf "nach unten". Reines CSS-Dreieck via
   Border-Trick, keine externe Icon-Bibliothek nötig. */
.pe-options-expert-arrow {
	display: inline-block;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 6px solid var( --pe-accent-color, #e2a530 );
	transition: transform 0.15s ease;
	flex-shrink: 0;
}

.pe-options-expert[open] > summary .pe-options-expert-arrow {
	transform: rotate( 90deg );
}

.pe-options-expert-inner {
	margin-top: 0.5em;
}

/* -----------------------------------------------------------------------
 * Kaufbereich: grosse Bestätigungszeile + Button
 * --------------------------------------------------------------------- */
.pe-matrix-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.75em;
	margin-top: 1.75em;
}

/* Zweiter Kaufen-Button direkt in der "Ihre Auswahl"-Box, synchron zum
   Button unter der Matrix (beide teilen sich .pe-add-to-cart-button und
   werden von frontend.js identisch behandelt). */
.pe-add-to-cart-button--box {
	display: block;
	width: 100%;
	margin-top: 1em;
}

/* Bewusst KEINE eigene Button-Farb-/Radius-Optik – "button alt
   single_add_to_cart_button" im Markup sorgt dafür, dass das Theme
   seinen normalen Kauf-Button-Stil anwendet. Hier nur Layout-Feinheiten. */
.pe-add-to-cart-button:disabled,
.pe-add-to-cart-button.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.pe-notice {
	color: #a94442;
}

.pe-loading {
	font-style: italic;
	color: #666;
}

/* -----------------------------------------------------------------------
 * Bestätigungs-Modal nach erfolgreichem Add-to-Cart
 * --------------------------------------------------------------------- */
.pe-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba( 0, 0, 0, 0.55 );
	align-items: center;
	justify-content: center;
	padding: 1em;
}

.pe-modal-overlay.is-visible {
	display: flex;
}

.pe-modal {
	background: #fff;
	border-radius: var( --theme-card-border-radius, 6px );
	max-width: 480px;
	width: 100%;
	padding: 1.5em;
	box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.25 );
	max-height: 90vh;
	overflow-y: auto;
}

.pe-modal h3 {
	margin: 0 0 1em;
	color: var( --pe-heading-color, #2f7cb0 );
}

.pe-modal-details {
	margin: 0 0 1em;
}

.pe-modal-row {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	padding: 0.3em 0;
	border-bottom: 1px solid #f2f2f2;
	font-size: 0.92em;
}

.pe-modal-row dt {
	color: #777;
	font-weight: 500;
}

.pe-modal-row dd {
	margin: 0;
	text-align: right;
}

.pe-modal-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-top: 0.6em;
	border-top: 2px solid var( --pe-accent-color, #e2a530 );
	font-size: 1.1em;
	margin-bottom: 1em;
}

.pe-modal-total strong {
	font-size: 1.3em;
	color: var( --pe-accent-color, #e2a530 );
}

.pe-modal-hint {
	font-size: 0.88em;
	color: #555;
	background: #f7f7f7;
	border-left: 3px solid var( --pe-accent-color, #e2a530 );
	padding: 0.6em 0.8em;
	margin-bottom: 1.2em;
}

.pe-modal-actions {
	display: flex;
	gap: 0.75em;
	flex-wrap: wrap;
}

.pe-modal-actions .button {
	flex: 1 1 auto;
	text-align: center;
}

/* -----------------------------------------------------------------------
 * Responsive
 * --------------------------------------------------------------------- */
@media ( max-width: 480px ) {
	.pe-matrix-table td.pe-matrix-col-qty {
		font-size: 0.85em;
	}

	.pe-price-option,
	.pe-price-option--empty {
		font-size: 0.85em;
		padding: 0.5em 0.3em;
	}

	.pe-matrix-actions {
		align-items: stretch;
	}

	.pe-add-to-cart-button {
		width: 100%;
	}

	.pe-modal-actions {
		flex-direction: column;
	}
}

/* [pe_price_summary] – kompaktes zweispaltiges Preis-Snippet, frei
   platzierbar im WoodMart-Layout-Builder. Erbt bewusst Schrift vom Theme
   (kein eigenes font-family), nur Farben/Abstände kommen von der Print-
   Engine (dieselben --pe-*-Variablen wie die übrige Konfigurator-UI). */
.pe-price-summary,
p > .pe-price-summary,
p:has( > .pe-price-summary ) {
	margin: 0; /* falls wpautop/der Theme-Builder das Shortcode-Output in ein <p> mit Default-Margin wickelt (:has() wird von Firefox <121 ignoriert, schadet dort aber nicht). */
}

.pe-price-summary {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	padding: 0.5em 0;
	/* Bewusst KEIN background/border mehr – das Snippet soll ohne eigenen
	   "Kasten" auskommen und sich frei ins WoodMart-Layout einfügen. */
}

.pe-price-summary-top {
	display: flex;
	align-items: flex-end; /* Gesamt-Preis unten bündig mit der 2. Zeile links, siehe Kommentar an render_price_summary(). */
	justify-content: space-between;
	gap: 1.5em;
}

.pe-price-summary-col--left {
	display: flex;
	flex-direction: column;
	gap: 0.1em;
	flex: 1 1 auto;
	min-width: 0;
	padding-right: 15%; /* rückt die rechtsbündigen Preise von der Gesamt-Spalte weg nach links. */
}

.pe-ps-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6em;
	font-size: 0.92em;
	line-height: 1.4;
}

.pe-ps-label {
	color: #555;
}

.pe-ps-value {
	flex: 0 0 auto;
	text-align: right;
	color: #222;
	font-variant-numeric: tabular-nums;
}

.pe-ps-scroll-link {
	font-size: 0.9em;
	color: var( --pe-heading-color, #2f7cb0 );
	text-decoration: underline;
	cursor: pointer;
	align-self: flex-start;
}

.pe-ps-scroll-link:hover {
	color: var( --pe-accent-color, #e2a530 );
}

.pe-price-summary-col--right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.1em;
	flex: 0 0 auto;
	text-align: right;
}

.pe-ps-total-label {
	font-size: 0.75em;
	font-weight: 700;
	color: #777;
}

.pe-ps-total-value {
	font-size: 1.7em;
	font-weight: 700;
	line-height: 1.1;
	color: #1a1a1a;
	font-variant-numeric: tabular-nums;
}

@media ( max-width: 480px ) {
	.pe-price-summary-top {
		flex-direction: column;
		align-items: stretch;
		gap: 0.4em;
	}

	.pe-price-summary-col--left {
		padding-right: 0;
	}

	.pe-price-summary-col--right {
		align-items: flex-start;
		text-align: left;
	}
}

/**
 * Format-Gruppen-Zwischenüberschriften auf der Kategorie-Übersichtsseite
 * (siehe PE_Category_Grouping). Das Trenner-Element (.pe-format-group-
 * divider) ist ein normales Geschwister-<div> INNERHALB von
 * div.products (WoodMarts eigenes Produktraster) – erzwingt per
 * flex-basis/grid-column einen Zeilenumbruch unabhängig davon, ob das
 * Grid auf Flexbox oder CSS-Grid basiert, ohne das Raster selbst
 * aufzubrechen.
 *
 * WICHTIG (v0.9.5): WoodMarts Grid-Container trägt häufig die Klasse
 * "products-bordered-grid" (Feineinstellung "Rahmen um Produktkarten" im
 * WoodMart-Theme-Customizer). Diese Option fügt JEDEM direkten
 * Kind-Element von .products einen Rahmen + Hintergrund hinzu, ohne
 * Rücksicht darauf, ob es sich um eine echte Produktkarte handelt – trifft
 * also auch unser Trenner-Element, was zu den hässlichen "Kästchen"-Linien
 * oben/unten um die Zwischenüberschrift führte. Die folgenden Regeln
 * setzen Rahmen/Hintergrund/Padding für unser Element gezielt zurück,
 * unabhängig davon, ob "Rahmen um Produktkarten" ein- oder ausgeschaltet
 * ist – nur die bewusst gesetzte Unterstreichung der Überschrift selbst
 * (siehe .pe-format-group-heading) bleibt sichtbar.
 */
.products .pe-format-group-divider,
.products.products-bordered-grid .pe-format-group-divider {
	width: 100%;
	flex-basis: 100%;
	grid-column: 1 / -1;
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

/* v0.9.6: KEIN border-bottom mehr. Als Block-Element zieht sich die
   Linie über die gesamte Rasterbreite statt nur unter dem Überschrift-
   Text - wirkt dadurch wie eine unmotivierte, lose Trennlinie quer über
   die Seite statt einer dezenten Unterstreichung. Die Zwischenüberschrift
   trägt sich jetzt allein über Grösse/Gewicht/Abstand ab, ohne Linie. */
.pe-format-group-heading {
	margin: 2.2em 0 0.75em;
}

.pe-format-group-divider:first-child .pe-format-group-heading {
	margin-top: 0.6em;
}

/* Bearbeiten-Modus (Link "Bearbeiten" im Warenkorb), siehe frontend.js initEditMode() */
.pe-edit-notice {
	margin: 0 0 16px;
	padding: 10px 14px;
	border-left: 3px solid currentColor;
	background: rgba(0, 0, 0, 0.04);
	font-size: 14px;
}

/* v0.28.0: Sprung-Chips zu den Format-Gruppen + Formatangabe auf Produktkarten */
.pe-format-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 4px 0 24px;
	margin-bottom: 8px;
	border-bottom: 1px solid #E3E6EA;
}
.pe-format-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 16px;
	border-radius: 999px;
	background: #F0F2F5;
	color: #1D1D1F !important;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s;
}
.pe-format-chip:hover,
.pe-format-chip:focus-visible {
	background: #E3E7EB;
	color: #1D1D1F !important;
}
.pe-format-chip-count {
	color: #5E6470;
	font-weight: 400;
}
.pe-format-group-heading {
	scroll-margin-top: 140px;
}
.pe-card-format {
	font-size: 14px;
	line-height: 1.4;
	color: #5E6470;
	margin: 2px 0 8px;
}

/* =======================================================================
 * v0.29.0: Konfigurator im neuen Shop-Design (3 Schritte + mitlaufende Box)
 * Farben/Masse aus dem Designsystem: Aktionsblau #1C6A91, Gelb #FFCD61,
 * helles Gelb #FFF4D6 (Rand #E9B23C), Text #1D1D1F / #5E6470, Linien #E3E6EA.
 * Alles hängt an .pe-cfg / .pe-box / .pe-mobilebar und überstimmt die
 * älteren Regeln oben, ohne sie zu löschen (alte Layouts bleiben lesbar).
 * ===================================================================== */
.pe-cfg,
.pe-box,
.pe-mobilebar {
	--pe-blue: #1c6a91;
	--pe-blue-dark: #134c69;
	--pe-blue-soft: #eaf3f8;
	--pe-yellow: #ffcd61;
	--pe-yellow-soft: #fff4d6;
	--pe-yellow-line: #e9b23c;
	--pe-ink: #1d1d1f;
	--pe-ink-2: #5e6470;
	--pe-line: #e3e6ea;
	--pe-surface: #f5f6f8;
	--pe-brand-font: var( --fk-brand, 'Century Gothic', 'Questrial', 'Futura', 'Avenir Next', sans-serif );
	color: var( --pe-ink );
}

.pe-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.pe-cfg.pe-configurator-panel {
	padding: 0;
	margin: 0 0 1.5em;
	border: 0;
	background: transparent;
}

/* ---- Schritte ---------------------------------------------------------- */
.pe-cfg .pe-step {
	margin: 0 0 20px;
	padding: 20px;
	background: #fff;
	border: 1px solid var( --pe-line );
	border-radius: 18px;
}

.pe-cfg .pe-step-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
}

.pe-cfg .pe-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var( --pe-blue );
	color: #fff;
	font-family: var( --pe-brand-font );
	font-weight: 700;
	font-size: 15px;
}

.pe-cfg .pe-step-title {
	margin: 0;
	font-family: var( --pe-brand-font );
	font-size: 20px;
	line-height: 1.2;
	font-weight: 700;
	color: var( --pe-ink );
}

/* ---- Schritt 1: Papier-Karten ------------------------------------------ */
.pe-cfg .pe-mat-grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 10px;
}

.pe-cfg .pe-mat-grid.is-collapsed .pe-mat-card--more {
	display: none;
}

.pe-cfg .pe-mat-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	min-height: 56px;
	padding: 10px 14px;
	text-align: left;
	background: #fff;
	color: var( --pe-ink );
	border: 1.5px solid var( --pe-line );
	border-radius: 12px;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.pe-cfg .pe-mat-card:hover {
	border-color: var( --pe-blue );
	background: #fff;
	color: var( --pe-ink );
}

.pe-cfg .pe-mat-card.is-active {
	border-color: var( --pe-blue );
	background: var( --pe-blue-soft );
	box-shadow: 0 0 0 1px var( --pe-blue );
}

.pe-cfg .pe-mat-card:focus-visible,
.pe-cfg .pe-seg-btn:focus-visible,
.pe-cfg .pe-link-btn:focus-visible {
	outline: 3px solid var( --pe-blue );
	outline-offset: 2px;
}

.pe-cfg .pe-mat-title {
	font-family: var( --pe-brand-font );
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
}

.pe-cfg .pe-mat-sub {
	font-size: 13px;
	line-height: 1.3;
	color: var( --pe-ink-2 );
	font-weight: 400;
}

.pe-link-btn {
	display: inline-block;
	margin: 12px 0 0;
	padding: 6px 0;
	background: none;
	border: 0;
	box-shadow: none;
	color: var( --pe-blue, #1c6a91 );
	font-size: 14px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.pe-link-btn:hover {
	background: none;
	color: var( --pe-blue-dark, #134c69 );
}

.pe-cfg .pe-mat-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	background: var( --pe-blue-soft );
	border-radius: 12px;
	font-weight: 600;
}

.pe-cfg .pe-mat-change {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 6px 4px;
	color: var( --pe-blue );
	font-weight: 600;
	text-decoration: underline;
	text-transform: none;
	cursor: pointer;
}

/* ---- Segmente (Druck-Ausführung u.a.) ----------------------------------- */
.pe-cfg .pe-print-wrapper:not( :empty ) {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var( --pe-line );
}

.pe-cfg .pe-extra-label {
	display: block;
	margin: 0 0 8px;
	font-weight: 700;
	font-size: 15px;
	color: var( --pe-ink );
}

.pe-cfg .pe-option-required-mark {
	color: #b3261e;
	margin-left: 2px;
}

.pe-cfg .pe-seg {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 4px;
	background: var( --pe-surface );
	border: 1.5px solid transparent;
	border-radius: 14px;
}

.pe-cfg .pe-seg.is-missing {
	border-color: #b3261e;
	background: #fdecea;
}

.pe-cfg .pe-seg-btn {
	flex: 1 1 0;
	min-width: 0;
	min-height: 48px;
	padding: 8px 12px;
	background: transparent;
	color: var( --pe-ink );
	border: 0;
	border-radius: 10px;
	box-shadow: none;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.pe-cfg .pe-seg-btn:hover {
	background: rgba( 255, 255, 255, 0.7 );
	color: var( --pe-ink );
}

.pe-cfg .pe-seg-btn.is-active {
	background: #fff;
	color: var( --pe-blue-dark );
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.16 );
}

/* ---- Auswahllisten (viele Wahlen) --------------------------------------- */
.pe-cfg .pe-option-item .pe-option-select:not( .pe-sr-only ) {
	width: 100%;
	min-height: 48px;
	padding: 8px 14px;
	border: 1.5px solid var( --pe-line );
	border-radius: 12px;
	background-color: #fff;
	font-size: 15px;
	color: var( --pe-ink );
}

.pe-cfg .pe-option-item .pe-option-select:not( .pe-sr-only ):focus {
	border-color: var( --pe-blue );
	box-shadow: 0 0 0 1px var( --pe-blue );
	outline: none;
}

/* ---- Datencheck-Karte (hervorgehobene Option) --------------------------- */
.pe-cfg .pe-featured-wrapper:not( :empty ) {
	margin: 0 0 20px;
}

.pe-cfg .pe-featured {
	padding: 16px 18px;
	margin: 0 0 10px;
	background: var( --pe-yellow-soft );
	border: 1.5px solid var( --pe-yellow-line );
	border-radius: 18px;
}

.pe-cfg .pe-featured .pe-option-label {
	font-family: var( --pe-brand-font );
	font-size: 17px;
	font-weight: 700;
	color: var( --pe-ink );
}

.pe-cfg .pe-featured .pe-option-description {
	margin: 8px 0 0 62px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var( --pe-ink-2 );
}

.pe-cfg .pe-featured .pe-option-description a {
	color: var( --pe-blue );
	font-weight: 600;
}

.pe-cfg .pe-featured .pe-extra-price {
	font-family: var( --pe-brand-font );
	font-size: 17px;
	font-weight: 700;
}

.pe-cfg .pe-badge {
	display: inline-block;
	margin: 0 8px 0 0;
	padding: 2px 9px;
	border-radius: 99px;
	background: var( --pe-yellow );
	color: var( --pe-ink );
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	vertical-align: 2px;
}

/* ---- Extras (Schalter-Zeilen) ------------------------------------------- */
.pe-cfg .pe-options-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.pe-cfg .pe-option-item {
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid var( --pe-line );
}

.pe-cfg .pe-option-item:last-child {
	border-bottom: 0;
}

.pe-cfg .pe-option-item.pe-featured {
	padding: 16px 18px;
	margin: 0 0 10px;
	background: var( --pe-yellow-soft );
	border: 1.5px solid var( --pe-yellow-line );
	border-radius: 18px;
}

.pe-cfg .pe-extra-row {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 48px;
	margin: 0;
	cursor: pointer;
}

.pe-cfg .pe-extra-text {
	flex: 1 1 auto;
	min-width: 0;
}

.pe-cfg .pe-extra-row .pe-option-label {
	font-weight: 600;
	font-size: 15px;
}

.pe-cfg .pe-extra-price {
	flex: 0 0 auto;
	color: var( --pe-ink-2 );
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
}

.pe-cfg .pe-option-description {
	margin: 6px 0 0 62px;
	font-size: 13px;
	line-height: 1.5;
	color: var( --pe-ink-2 );
}

.pe-cfg .pe-option-item--select .pe-option-description {
	margin-left: 0;
}

/* Schalter: das echte Checkbox-<input> selbst wird zum Schalter gestylt. */
.pe-cfg input.pe-switch {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	position: relative;
	width: 48px;
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 99px;
	background: #c9d3db;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.pe-cfg input.pe-switch::before {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.3 );
	transition: transform 0.18s ease;
}

.pe-cfg input.pe-switch:checked {
	background: var( --pe-blue );
}

.pe-cfg input.pe-switch:checked::before {
	transform: translateX( 20px );
}

.pe-cfg input.pe-switch:checked::after {
	content: none;
}

.pe-cfg input.pe-switch:focus-visible {
	outline: 3px solid var( --pe-blue );
	outline-offset: 3px;
}

.pe-cfg .pe-options-expert {
	margin-top: 6px;
	border: 0;
}

.pe-cfg .pe-options-expert > summary {
	padding: 14px 0 6px;
	font-weight: 600;
	color: var( --pe-blue );
}

/* ---- Schritt 2: Auflage und Liefertermin -------------------------------- */
.pe-cfg .pe-matrix-section {
	margin: 0;
	padding: 0;
	border: 0;
}

.pe-cfg .pe-aufl-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 6px;
	table-layout: fixed;
	margin: 0;
}

.pe-cfg .pe-aufl-table thead th {
	padding: 0 4px 4px;
	text-align: center;
	font-weight: 700;
	font-size: 13px;
	color: var( --pe-ink-2 );
	text-transform: none;
	letter-spacing: normal;
	border: 0;
	background: transparent;
}

.pe-cfg .pe-aufl-table thead th.pe-aufl-qty-head {
	width: 28%;
	text-align: left;
}

.pe-cfg .pe-aufl-col-title {
	display: block;
	font-family: var( --pe-brand-font );
	font-size: 15px;
	color: var( --pe-ink );
}

.pe-cfg .pe-matrix-delivery-date {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	font-weight: 600;
	color: var( --pe-ink-2 );
}

.pe-cfg .pe-aufl-table tbody tr {
	background: transparent;
}

.pe-cfg .pe-aufl-table td,
.pe-cfg .pe-aufl-table tbody th {
	padding: 0;
	border: 0;
	background: transparent;
	vertical-align: middle;
}

.pe-cfg .pe-aufl-qty {
	text-align: left;
	padding: 0 4px 0 2px;
	font-family: var( --pe-brand-font );
	font-size: 16px;
	font-weight: 700;
	white-space: nowrap;
}

.pe-cfg .pe-aufl-unit {
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 500;
	color: var( --pe-ink-2 );
}

.pe-cfg .pe-aufl.is-collapsed .pe-aufl-row--more {
	display: none;
}

.pe-cfg .pe-price-option {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin: 0 3px;
	padding: 6px 8px;
	background: #fff;
	color: var( --pe-ink );
	border: 1.5px solid var( --pe-line );
	border-radius: 12px;
	font-size: 15px;
	font-weight: 700;
	box-shadow: none;
	transform: none;
}

.pe-cfg .pe-price-option:hover {
	border-color: var( --pe-yellow-line );
	background: var( --pe-yellow-soft );
}

.pe-cfg .pe-price-option.is-selected,
.pe-cfg .pe-price-option:has( .pe-price-radio:checked ) {
	background: var( --pe-yellow-soft );
	border-color: var( --pe-yellow-line );
	color: var( --pe-ink );
	box-shadow: 0 0 0 1px var( --pe-yellow-line );
	transform: none;
}

.pe-cfg .pe-price-option.is-selected::before,
.pe-cfg .pe-price-option:has( .pe-price-radio:checked )::before {
	content: none;
}

.pe-cfg .pe-price-option .pe-price-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.2;
}

.pe-cfg .pe-price-option--empty {
	color: #9aa1ab;
	background: var( --pe-surface );
	border-style: dashed;
	font-weight: 500;
	font-size: 12.5px;
	cursor: default;
}

.pe-cfg .pe-price-option--empty:hover {
	background: var( --pe-surface );
	border-color: var( --pe-line );
}

/* ---- Mitlaufende Box ---------------------------------------------------- */
.pe-box.pe-current-selection {
	position: sticky;
	top: 160px;
	margin: 0 0 1em;
	padding: 22px;
	background: #fff;
	border: 1px solid var( --pe-line );
	border-radius: 18px;
	box-shadow: 0 8px 28px rgba( 14, 59, 82, 0.1 );
}

.pe-box .pe-current-selection-title {
	margin: 0 0 4px;
	font-family: var( --pe-brand-font );
	font-size: 12.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --pe-ink-2 );
}

.pe-box .pe-box-product {
	margin: 0 0 14px;
	font-family: var( --pe-brand-font );
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	color: var( --pe-ink );
}

.pe-box .pe-current-selection-empty {
	margin: 0 0 16px;
	font-size: 14px;
	font-style: normal;
	color: var( --pe-ink-2 );
}

.pe-box .pe-cs-row {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 7px 0;
	border: 0;
	font-size: 14.5px;
}

.pe-box .pe-cs-row dt {
	color: var( --pe-ink-2 );
	font-weight: 500;
}

.pe-box .pe-cs-row dd {
	margin: 0;
	text-align: right;
	font-weight: 600;
	color: var( --pe-ink );
}

.pe-box .pe-box-delivery {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: 12px 0 4px;
	padding: 12px 14px;
	background: var( --pe-yellow-soft );
	border: 1.5px solid var( --pe-yellow-line );
	border-radius: 14px;
}

.pe-box .pe-box-delivery-label {
	font-size: 14px;
	font-weight: 600;
}

.pe-box .pe-box-delivery-date {
	font-family: var( --pe-brand-font );
	font-size: 22px;
	font-weight: 700;
	color: var( --pe-ink );
}

.pe-box .pe-current-selection-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 14px 0 16px;
	padding: 0;
	border: 0;
}

.pe-box .pe-current-selection-total span {
	font-size: 15px;
	font-weight: 600;
	color: var( --pe-ink-2 );
}

.pe-box .pe-current-selection-total strong {
	font-family: var( --pe-brand-font );
	font-size: 32px;
	line-height: 1;
	font-weight: 700;
	color: var( --pe-ink );
}

.pe-add-to-cart-button--box,
.pe-add-to-cart-button--bar {
	display: block;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 12px 18px;
	background: var( --pe-blue, #1c6a91 );
	border: 0;
	border-radius: 14px;
	color: #fff;
	font-family: var( --pe-brand-font, var( --fk-brand, 'Century Gothic', 'Questrial', 'Futura', 'Avenir Next', sans-serif ) );
	font-size: 17px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	cursor: pointer;
}

.pe-add-to-cart-button--box:hover,
.pe-add-to-cart-button--bar:hover {
	background: var( --pe-blue-dark, #134c69 );
	color: #fff;
}

.pe-add-to-cart-button--box:disabled,
.pe-add-to-cart-button--bar:disabled {
	background: #c9d3db;
	color: #5e6470;
	cursor: not-allowed;
	opacity: 1;
}

.pe-add-to-cart-button--box:focus-visible,
.pe-add-to-cart-button--bar:focus-visible {
	outline: 3px solid var( --pe-blue, #1c6a91 );
	outline-offset: 3px;
}

.pe-box .pe-box-hint {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: var( --pe-ink-2 );
}

.pe-box .pe-share-link-button {
	display: block;
	width: 100%;
	margin: 10px 0 0;
	text-align: center;
}

/* ---- Handy: Schritte untereinander, feste Leiste unten ------------------- */
.pe-mobilebar {
	display: none;
}

@media ( max-width: 768px ) {
	.pe-cfg .pe-step {
		padding: 16px;
		border-radius: 16px;
	}

	.pe-cfg .pe-step-title {
		font-size: 18px;
	}

	.pe-cfg .pe-mat-grid {
		grid-template-columns: 1fr;
	}

	.pe-cfg #pe-step-paper.is-collapsed .pe-mat-grid,
	.pe-cfg #pe-step-paper.is-collapsed .pe-mat-more {
		display: none;
	}

	.pe-cfg .pe-option-description,
	.pe-cfg .pe-featured .pe-option-description {
		margin-left: 0;
	}

	.pe-cfg .pe-seg {
		flex-direction: column;
	}

	.pe-box.pe-current-selection {
		position: static;
		box-shadow: none;
	}

	/* Die Box oben bleibt als Zusammenfassung; gekauft wird über die Leiste. */
	.pe-box .pe-add-to-cart-button--box {
		display: none;
	}

	.pe-mobilebar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: var( --wd-toolbar-h, 0px );
		z-index: 999;
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 10px 14px calc( 10px + env( safe-area-inset-bottom, 0px ) );
		background: #fff;
		border-top: 1px solid var( --pe-line );
		box-shadow: 0 -6px 20px rgba( 14, 59, 82, 0.12 );
	}

	.pe-mobilebar .pe-mb-info {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-width: 0;
	}

	.pe-mobilebar .pe-mb-meta {
		font-size: 12.5px;
		color: var( --pe-ink-2 );
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.pe-mobilebar .pe-mb-total {
		font-family: var( --pe-brand-font );
		font-size: 22px;
		line-height: 1.15;
		font-weight: 700;
	}

	.pe-mobilebar .pe-mb-date {
		display: inline-block;
		align-self: flex-start;
		margin-top: 2px;
		padding: 1px 8px;
		border-radius: 99px;
		background: var( --pe-yellow-soft );
		border: 1px solid var( --pe-yellow-line );
		font-size: 12px;
		font-weight: 700;
	}

	.pe-mobilebar .pe-add-to-cart-button--bar {
		flex: 0 0 auto;
		width: auto;
		min-width: 150px;
	}

	/* Platz, damit die feste Leiste nichts verdeckt. */
	body:has( #pe-mobilebar ) {
		padding-bottom: 96px;
	}
}


/* ---- v0.30.0: einheitliche Karten, Abholtermin, Vorlagen, Hinweiskarte ---- */
/* Alle Karten der Produktseite: gleicher Radius (18), gleicher Rand, gleicher
   leiser Schatten. Nur die mitlaufende Preis-Box hat bewusst den staerkeren. */
.pe-cfg .pe-step {
	box-shadow: 0 2px 8px rgba( 14, 59, 82, 0.05 );
}

/* Linke Spalte (Galerie + Kurzdaten) als gleiche Karte. */
.wp-block-wd-row:has( .pe-cfg ) > .wp-block-wd-column:first-child {
	box-sizing: border-box;
	padding: 20px;
	background: #fff;
	border: 1px solid #e3e6ea;
	border-radius: 18px;
	box-shadow: 0 2px 8px rgba( 14, 59, 82, 0.05 );
}

.pe-box [hidden] {
	display: none !important;
}

.pe-box .pe-box-delivery {
	display: block;
}

.pe-box .pe-box-delivery-main {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.pe-box .pe-box-delivery-sub {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px dashed var( --pe-yellow-line, #e9b23c );
	font-size: 13.5px;
	color: var( --pe-ink-2, #5e6470 );
}

.pe-box .pe-box-delivery-sub strong {
	font-weight: 700;
	color: var( --pe-ink, #1d1d1f );
}

.pe-box .pe-box-cutoff {
	margin: 6px 2px 0;
	font-size: 12.5px;
	line-height: 1.4;
	color: var( --pe-ink-2, #5e6470 );
}

.pe-box .pe-box-templates {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 12px;
	padding: 10px 12px;
	background: #f5f6f8;
	border: 1px solid var( --pe-line, #e3e6ea );
	border-radius: 12px;
	color: var( --pe-ink, #1d1d1f );
	text-decoration: none;
}

.pe-box .pe-box-templates:hover,
.pe-box .pe-box-templates:focus-visible {
	background: #eaf3f8;
	border-color: #2987b5;
	color: var( --pe-ink, #1d1d1f );
}

.pe-box .pe-box-templates-icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #1c6a91;
	color: #fff;
	font-size: 18px;
	line-height: 1;
}

.pe-box .pe-box-templates-text strong,
.pe-box .pe-box-templates-text small {
	display: block;
}

.pe-box .pe-box-templates-text strong {
	font-size: 14px;
	line-height: 1.3;
}

.pe-box .pe-box-templates-text small {
	font-size: 12.5px;
	color: var( --pe-ink-2, #5e6470 );
}

/* Hinweiskarte "Fragen oder Sonderwuensche?" (als Gruppen-Block mit der
   zusaetzlichen CSS-Klasse pe-note-card im WoodMart-Layout). */
.pe-note-card {
	margin: 20px 0 0;
	padding: 18px 20px;
	background: #f5f6f8;
	border: 1px solid #e3e6ea;
	border-radius: 18px;
}

.pe-note-card h3 {
	margin: 0 0 8px;
	font-family: var( --pe-brand-font, var( --fk-brand, 'Century Gothic', CenturyGothic, 'Apple Gothic', sans-serif ) );
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #1d1d1f;
}

.pe-note-card p {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: #5e6470;
}

.pe-note-card a {
	color: #1c6a91;
	font-weight: 600;
}

@media ( max-width: 768px ) {
	.wp-block-wd-row:has( .pe-cfg ) > .wp-block-wd-column:first-child {
		padding: 14px;
	}
}

/* Auf niedrigen Bildschirmen darf die mitlaufende Box intern scrollen,
   statt unten abgeschnitten zu werden. */
@media ( min-width: 769px ) {
	.pe-box.pe-current-selection {
		max-height: calc( 100vh - 180px );
		overflow-y: auto;
	}
}

/* v0.31.0: kleine Knoepfe mit dem gleichen Radius (12) wie Karten und Felder. */
.pe-cfg .pe-mat-more,
.pe-cfg .pe-more-rows,
.pe-box .pe-share-link-button {
	border-radius: 12px;
}

/* v0.31.1: Titel oben in der Bild-Karte (im WoodMart-Layout als Titel-Block ueber der Galerie). */
.wp-block-wd-row:has( .pe-cfg ) > .wp-block-wd-column:first-child .wp-block-post-title {
	margin: 0 0 14px;
	font-family: var( --pe-brand-font, var( --fk-brand, 'Century Gothic', CenturyGothic, 'Apple Gothic', sans-serif ) );
	font-size: 28px;
	font-weight: 700;
	line-height: 1.15;
	color: #1d1d1f;
}

@media ( max-width: 768px ) {
	.wp-block-wd-row:has( .pe-cfg ) > .wp-block-wd-column:first-child .wp-block-post-title {
		font-size: 24px;
	}
}

/* =======================================================================
 * v0.33.0: Konfigurator für Flächenprodukte (Blachen usw.), siehe area.js
 * Nutzt die Karten/Schritte/Box von oben, ergänzt Masseingabe, Stückzahl
 * und Lieferart-Karten.
 * ===================================================================== */
.pe-cfg--area.is-loading .pe-step--finishing {
	opacity: 0.55;
	pointer-events: none;
}

.pe-cfg .pe-size-grid {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto minmax( 0, 1fr );
	align-items: end;
	gap: 12px;
}

.pe-cfg .pe-size-field--qty {
	grid-column: 1 / -1;
	max-width: 240px;
}

.pe-cfg .pe-size-field label {
	display: block;
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 600;
	color: var( --pe-ink );
}

.pe-cfg .pe-unit-input {
	position: relative;
}

.pe-cfg .pe-unit-input input,
.pe-cfg .pe-stepper input {
	box-sizing: border-box;
	width: 100%;
	min-height: 0;
	height: 52px;
	margin: 0;
	padding: 0 44px 0 14px;
	font-size: 18px;
	font-weight: 600;
	color: var( --pe-ink );
	background: #fff;
	border: 1.5px solid var( --pe-line );
	border-radius: 12px;
	box-shadow: none;
	-moz-appearance: textfield;
}

.pe-cfg .pe-unit-input input::-webkit-outer-spin-button,
.pe-cfg .pe-unit-input input::-webkit-inner-spin-button,
.pe-cfg .pe-stepper input::-webkit-outer-spin-button,
.pe-cfg .pe-stepper input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.pe-cfg .pe-unit-input input:focus,
.pe-cfg .pe-stepper input:focus {
	outline: none;
	border-color: var( --pe-blue );
	box-shadow: 0 0 0 3px var( --pe-blue-soft );
}

.pe-cfg .pe-size-field.is-invalid .pe-unit-input input {
	border-color: #c62828;
}

.pe-cfg .pe-unit {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY( -50% );
	font-size: 15px;
	color: var( --pe-ink-2 );
	pointer-events: none;
}

.pe-cfg .pe-size-swap {
	box-sizing: border-box;
	min-width: 44px;
	min-height: 0;
	width: 44px;
	height: 52px;
	padding: 0;
	font-size: 20px;
	line-height: 1;
	color: var( --pe-blue );
	background: transparent;
	border: 0;
	border-radius: 12px;
	box-shadow: none;
	cursor: pointer;
}

.pe-cfg .pe-size-swap:hover {
	background: var( --pe-blue-soft );
	color: var( --pe-blue );
}

.pe-cfg .pe-stepper {
	display: grid;
	grid-template-columns: 44px minmax( 0, 1fr ) 44px;
	align-items: center;
	height: 52px;
	border: 1.5px solid var( --pe-line );
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}

.pe-cfg .pe-stepper input {
	height: 48px;
	padding: 0 4px;
	text-align: center;
	border: 0;
	border-radius: 0;
}

.pe-cfg .pe-stepper input:focus {
	box-shadow: none;
}

.pe-cfg .pe-stepper:focus-within {
	border-color: var( --pe-blue );
	box-shadow: 0 0 0 3px var( --pe-blue-soft );
}

.pe-cfg .pe-stepper-btn {
	height: 48px;
	min-height: 0;
	padding: 0;
	font-size: 22px;
	font-weight: 600;
	line-height: 1;
	color: var( --pe-blue );
	background: transparent;
	border: 0;
	box-shadow: none;
	cursor: pointer;
}

.pe-cfg .pe-stepper-btn:hover {
	background: var( --pe-blue-soft );
	color: var( --pe-blue );
}

.pe-cfg .pe-size-limits {
	margin: 10px 0 0;
	font-size: 13px;
	color: var( --pe-ink-2 );
}

.pe-cfg .pe-size-error {
	margin: 8px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: #c62828;
}

.pe-cfg .pe-size-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 14px 0 0;
	padding: 12px 14px;
	font-size: 14px;
	color: var( --pe-ink-2 );
	background: var( --pe-surface );
	border-radius: 12px;
}

.pe-cfg .pe-size-facts strong {
	margin-left: 4px;
	color: var( --pe-ink );
}

.pe-cfg--area .pe-print-wrapper:not( :empty ) {
	margin-top: 0;
}

.pe-cfg .pe-delivery-grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 10px;
}

.pe-cfg .pe-delivery-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 14px 16px;
	background: #fff;
	border: 1.5px solid var( --pe-line );
	border-radius: 12px;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pe-cfg .pe-delivery-card:hover {
	border-color: var( --pe-blue );
}

.pe-cfg .pe-delivery-card.is-active {
	border-color: var( --pe-blue );
	background: var( --pe-blue-soft );
	box-shadow: 0 0 0 1px var( --pe-blue );
}

.pe-cfg .pe-delivery-card:has( input:focus-visible ) {
	outline: 3px solid var( --pe-blue );
	outline-offset: 2px;
}

.pe-cfg .pe-delivery-card.is-disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

.pe-cfg .pe-delivery-name {
	font-family: var( --pe-brand-font );
	font-size: 17px;
	font-weight: 700;
}

.pe-cfg .pe-delivery-date {
	font-size: 13px;
	color: var( --pe-ink-2 );
}

.pe-cfg .pe-delivery-date strong {
	color: var( --pe-ink );
}

.pe-cfg .pe-delivery-price {
	margin-top: 4px;
	font-family: var( --pe-brand-font );
	font-size: 20px;
	font-weight: 700;
	color: var( --pe-ink );
}

.pe-cfg .pe-delivery-note:empty {
	display: none;
}

.pe-cfg .pe-delivery-note {
	font-size: 12px;
	color: var( --pe-ink-2 );
}

.pe-box .pe-box-perpiece {
	margin: -4px 0 12px;
	font-size: 13px;
	text-align: right;
	color: var( --pe-ink-2 );
}

@media ( max-width: 768px ) {
	.pe-cfg .pe-size-field--qty {
		max-width: none;
	}

	.pe-cfg .pe-delivery-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- v0.34.0 / v0.35.0: Live-Vorschau [pe_area_preview] ---------------
 * Farben als Variablen: ein Theme kann sie z. B. auf body setzen.
 * --------------------------------------------------------------------- */
.pe-area-preview,
.pe-qc,
[data-pe-preview] {
	--pe-ap-a: #2987b5;
	--pe-ap-b: #134c69;
	--pe-ap-ink: #1d1d1f;
	--pe-ap-ink-2: #5e6470;
	--pe-ap-person: #b7c3cd;
	--pe-ap-stack: #d9e5ed;
	--pe-ap-stack-line: #a9bccb;
	--pe-ap-ground: #c9d3db;
	--pe-ap-hole: #eef3f7;
	--pe-ap-badge: #ffcd61;
	--pe-ap-bg: linear-gradient( 180deg, #f7f9fb 0%, #eef3f7 100% );
	--pe-ap-line: #e3e6ea;
}

.pe-area-preview {
	margin: 0 0 16px;
	padding: 16px 16px 12px;
	background: var( --pe-ap-bg );
	border: 1px solid var( --pe-ap-line );
	border-radius: 18px;
}

.pe-area-preview-stage {
	aspect-ratio: 480 / 340;
	width: 100%;
}

.pe-area-preview.is-compact .pe-area-preview-stage {
	aspect-ratio: 480 / 200;
}

.pe-area-preview .pe-ap-svg,
[data-pe-preview] .pe-ap-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.pe-area-preview.is-empty .pe-area-preview-stage {
	background: repeating-linear-gradient( 45deg, transparent 0 10px, rgba( 0, 0, 0, 0.04 ) 10px 20px );
	border-radius: 12px;
}

.pe-area-preview-caption {
	margin: 8px 0 0;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	color: var( --pe-ap-ink );
}

.pe-ap-svg .pe-ap-ground { stroke: var( --pe-ap-ground ); stroke-width: 1.5; }
.pe-ap-svg .pe-ap-stop1 { stop-color: var( --pe-ap-a ); }
.pe-ap-svg .pe-ap-stop2 { stop-color: var( --pe-ap-b ); }
.pe-ap-svg .pe-ap-fill { fill: var( --pe-ap-a ); }
.pe-ap-svg .pe-ap-hole { fill: var( --pe-ap-hole ); }
.pe-ap-svg .pe-ap-banner { stroke: var( --pe-ap-b ); stroke-width: 1; filter: drop-shadow( 0 4px 8px rgba( 0, 0, 0, 0.16 ) ); transition: all 0.25s ease; }
.pe-ap-svg .pe-ap-stack { fill: var( --pe-ap-stack ); stroke: var( --pe-ap-stack-line ); stroke-width: 1; }
.pe-ap-svg .pe-ap-motif { fill: rgba( 255, 255, 255, 0.88 ); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; }
.pe-ap-svg .pe-ap-hem { fill: none; stroke: rgba( 255, 255, 255, 0.85 ); stroke-width: 1.5; stroke-dasharray: 4 3; }
.pe-ap-svg .pe-ap-eyelet { fill: #e6eaee; stroke: var( --pe-ap-ink-2 ); stroke-width: 1.2; }
.pe-ap-svg .pe-ap-dim { stroke: var( --pe-ap-ink-2 ); stroke-width: 1; }
.pe-ap-svg .pe-ap-label { fill: var( --pe-ap-ink ); font-size: 12px; font-weight: 700; }
.pe-ap-svg .pe-ap-person { fill: var( --pe-ap-person ); }
.pe-ap-svg .pe-ap-person-label { fill: var( --pe-ap-ink-2 ); font-size: 10px; }
.pe-ap-svg .pe-ap-badge { fill: var( --pe-ap-badge ); }
.pe-ap-svg .pe-ap-badge-text { fill: var( --pe-ap-ink ); font-size: 12px; font-weight: 700; }

/* =======================================================================
 * v0.35.0: Flächen-Konfigurator nach Blachenfabrik-Entwurf
 * Format-Chips, Staffel-Tipp, Material-Karten mit Muster, Ausführungs-
 * Karten mit Skizze + Preis, Liefertermin-Karten mit Ersparnis, Box mit
 * Preisaufschlüsselung, Offerte, Vorteile. Schnellrechner [pe_area_quickcalc].
 * ===================================================================== */
.pe-cfg--area {
	container-type: inline-size;
	container-name: pe-area;
}

.pe-cfg .pe-size-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}

.pe-cfg .pe-size-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	margin: 0;
	padding: 0 14px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: normal;
	color: var( --pe-ink );
	background: #fff;
	border: 1.5px solid var( --pe-line );
	border-radius: 999px;
	box-shadow: none;
	cursor: pointer;
}

.pe-cfg .pe-size-chip:hover {
	border-color: var( --pe-blue );
	color: var( --pe-ink );
	background: #fff;
}

.pe-cfg .pe-size-chip.is-active {
	border-color: var( --pe-blue );
	background: var( --pe-blue-soft );
}

.pe-cfg .pe-size-chip-label {
	font-weight: 500;
	color: var( --pe-ink-2 );
}

@container pe-area ( min-width: 560px ) {
	.pe-cfg .pe-size-grid {
		grid-template-columns: minmax( 0, 1fr ) auto minmax( 0, 1fr ) minmax( 0, 1.1fr );
	}

	.pe-cfg .pe-size-field--qty {
		grid-column: auto;
		max-width: none;
	}
}

.pe-cfg .pe-size-facts {
	display: block;
	line-height: 1.5;
}

.pe-cfg .pe-size-facts strong {
	margin-left: 0;
}

.pe-cfg .pe-size-limits:empty {
	display: none;
}

/* Material-Karten mit Muster */
.pe-cfg .pe-mat-grid--area {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 140px, 1fr ) );
	gap: 12px;
}

.pe-cfg .pe-mat-grid--area .pe-mat-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	text-align: left;
}

.pe-cfg .pe-mat-swatch {
	display: block;
	height: 52px;
	margin: 0 0 8px;
	border-radius: 8px;
	background: linear-gradient( 135deg, var( --pe-blue ), var( --pe-blue-dark ) );
}

.pe-cfg .pe-mat-swatch.is-mesh {
	background-color: var( --pe-blue );
	background-image: radial-gradient( #fff 1.1px, transparent 1.4px );
	background-size: 6px 6px;
}

.pe-cfg .pe-mat-desc {
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	color: var( --pe-ink-2 );
}

/* Ausführungs-Karten (Segmente im Flächen-Modus) */
.pe-cfg .pe-seg--cards {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 140px, 1fr ) );
	gap: 12px;
	padding: 0;
	background: transparent;
	border: 0;
}

.pe-cfg .pe-seg--cards.is-missing {
	padding: 6px;
	border: 1.5px solid #b3261e;
	background: #fdecea;
}

.pe-cfg .pe-seg--cards .pe-seg-btn {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	min-height: 0;
	padding: 12px;
	text-align: left;
	background: #fff;
	border: 1.5px solid var( --pe-line );
	border-radius: 14px;
}

.pe-cfg .pe-seg--cards .pe-seg-btn:hover {
	background: #fff;
	border-color: var( --pe-blue );
}

.pe-cfg .pe-seg--cards .pe-seg-btn.is-active {
	color: var( --pe-ink );
	background: var( --pe-blue-soft );
	border-color: var( --pe-blue );
	box-shadow: 0 0 0 1px var( --pe-blue );
}

.pe-cfg .pe-fin-art {
	display: block;
	margin: 0 0 6px;
}

.pe-cfg .pe-fin-svg {
	display: block;
	width: 100%;
	height: 48px;
}

.pe-cfg .pe-fin-body { fill: var( --pe-blue ); }
.pe-cfg .pe-fin-svg.is-plain .pe-fin-body { fill: #e3e7e6; }
.pe-cfg .pe-fin-hem { fill: none; stroke: #fff; stroke-width: 1.2; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.pe-cfg .pe-fin-eyelet { fill: #fff; }

.pe-cfg .pe-fin-name {
	font-size: 15px;
	font-weight: 700;
}

.pe-cfg .pe-fin-price {
	font-size: 13px;
	font-weight: 500;
	color: var( --pe-ink-2 );
}

/* Liefertermin-Karten */
.pe-cfg .pe-delivery-pricewrap {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
}

.pe-cfg .pe-delivery-save {
	font-size: 14px;
	font-weight: 700;
	color: var( --pe-blue );
}

/* Box: Kopf, Aufschlüsselung, Offerte, Vorteile */
.pe-box .pe-box-kicker {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --pe-ink-2 );
}

.pe-box .pe-box-headline {
	margin: 0 0 14px;
	font-family: var( --pe-brand-font );
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
	color: var( --pe-ink );
}

.pe-box .pe-box-breakdown {
	margin: 14px 0 6px;
	padding: 12px 0 0;
	border-top: 1px solid var( --pe-line );
}

.pe-box .pe-box-breakdown dl {
	display: grid;
	gap: 6px;
	margin: 0;
}

.pe-box .pe-bd-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
}

.pe-box .pe-bd-row dt {
	color: var( --pe-ink-2 );
	font-weight: 400;
}

.pe-box .pe-bd-row dd {
	margin: 0;
	text-align: right;
	white-space: nowrap;
}

.pe-box .pe-bd-row--vat {
	font-size: 13px;
}

.pe-box .pe-box-secondary {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	margin: 10px 0 0;
	padding: 0 16px;
	font-size: 15px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
	color: var( --pe-ink );
	background: #fff;
	border: 1.5px solid var( --pe-ink );
	border-radius: 12px;
	box-shadow: none;
	cursor: pointer;
}

.pe-box .pe-box-secondary:hover {
	color: var( --pe-ink );
	background: var( --pe-surface );
}

.pe-box .pe-box-secondary:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.pe-box .pe-box-trust {
	display: grid;
	gap: 6px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var( --pe-ink-2 );
}

.pe-box .pe-box-trust li {
	position: relative;
	margin: 0;
	padding-left: 22px;
}

.pe-box .pe-box-trust li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 4px;
	width: 10px;
	height: 6px;
	border-left: 2px solid var( --pe-blue );
	border-bottom: 2px solid var( --pe-blue );
	transform: rotate( -45deg );
}

/* Schnellrechner [pe_area_quickcalc] */
.pe-qc {
	--pe-qc-ink: #1d1d1f;
	--pe-qc-ink-2: #5e6470;
	--pe-qc-line: #d6d3cb;
	--pe-qc-action: #1c6a91;
	--pe-qc-go: #1d1d1f;
	--pe-qc-font: inherit;
	box-sizing: border-box;
	padding: 24px;
	color: var( --pe-qc-ink );
	background: #fff;
	border: 1px solid #e2e0da;
	border-radius: 22px;
	box-shadow: 0 18px 40px rgba( 20, 24, 27, 0.08 );
}

.pe-qc *,
.pe-qc *::before,
.pe-qc *::after {
	box-sizing: border-box;
}

.pe-qc-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 8px 12px;
	margin: 0 0 14px;
}

.pe-qc-title {
	margin: 0;
	font-family: var( --pe-qc-font );
	font-size: 22px;
	line-height: 1.2;
}

.pe-qc-matname {
	font-size: 13px;
	color: var( --pe-qc-ink-2 );
}

.pe-qc-mats {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	background: #f1f4f3;
	border-radius: 12px;
}

.pe-qc-mat {
	min-height: 36px;
	padding: 0 12px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var( --pe-qc-ink );
	background: transparent;
	border: 0;
	border-radius: 9px;
	cursor: pointer;
}

.pe-qc-mat[aria-pressed="true"] {
	background: #fff;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.14 );
}

.pe-qc .pe-qc-preview {
	margin: 0;
	padding: 14px 10px 8px;
	border: 0;
	border-radius: 14px;
}

.pe-qc .pe-qc-preview .pe-area-preview-stage {
	aspect-ratio: 480 / 230;
}

.pe-qc-fields {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 10px;
	margin: 16px 0 0;
}

.pe-qc-field label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
}

.pe-qc-field input {
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 12px;
	font: inherit;
	font-size: 17px;
	font-weight: 600;
	color: var( --pe-qc-ink );
	background: #fff;
	border: 1.5px solid var( --pe-qc-line );
	border-radius: 10px;
	-moz-appearance: textfield;
}

.pe-qc-field input::-webkit-outer-spin-button,
.pe-qc-field input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.pe-qc-field input:focus {
	outline: none;
	border-color: var( --pe-qc-action );
	box-shadow: 0 0 0 3px rgba( 0, 0, 0, 0.06 );
}

.pe-qc-error {
	margin: 10px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: #c62828;
}

.pe-qc-foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin: 18px 0 0;
}

.pe-qc-result {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pe-qc-meta,
.pe-qc-note {
	font-size: 13px;
	color: var( --pe-qc-ink-2 );
}

.pe-qc-price {
	font-family: var( --pe-qc-font );
	font-size: 30px;
	line-height: 1.15;
}

.pe-qc-go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 20px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	background: var( --pe-qc-go );
	border-radius: 12px;
}

.pe-qc-go:hover,
.pe-qc-go:focus {
	color: #fff;
	opacity: 0.9;
}

@media ( max-width: 480px ) {
	.pe-qc {
		padding: 16px;
	}

	.pe-qc-fields {
		gap: 8px;
	}

	.pe-qc-go {
		width: 100%;
	}
}

/* v0.36.0: Versand im Preis – Wahl "Versand gratis / Selbst abholen", Spar-Hinweis */
.pe-cfg .pe-receive-title {
	margin: 18px 0 8px;
	font-size: 14px;
	font-weight: 600;
	color: var( --pe-ink );
}

.pe-cfg .pe-receive {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 180px, 1fr ) );
	gap: 10px;
}

.pe-cfg .pe-receive-card {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 12px 14px;
	background: #fff;
	border: 1.5px solid var( --pe-line );
	border-radius: 12px;
	cursor: pointer;
}

.pe-cfg .pe-receive-card:hover {
	border-color: var( --pe-blue );
}

.pe-cfg .pe-receive-card.is-active {
	background: var( --pe-blue-soft );
	border-color: var( --pe-blue );
	box-shadow: 0 0 0 1px var( --pe-blue );
}

.pe-cfg .pe-receive-card:has( input:focus-visible ) {
	outline: 3px solid var( --pe-blue );
	outline-offset: 2px;
}

.pe-cfg .pe-receive-name {
	font-size: 15px;
	font-weight: 700;
}

.pe-cfg .pe-receive-note {
	font-size: 13px;
	color: var( --pe-ink-2 );
}

.pe-cfg .pe-receive-free,
.pe-cfg .pe-receive-save:not( :empty ) {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 8px;
	font-size: 12px;
	font-weight: 700;
	border-radius: 999px;
	vertical-align: 1px;
}

.pe-cfg .pe-receive-free {
	color: var( --pe-ink );
	background: var( --pe-surface );
}

.pe-cfg .pe-receive-save:not( :empty ) {
	color: #fff;
	background: var( --pe-blue );
}

.pe-box .pe-bd-row--rebate dd {
	color: var( --pe-blue );
	font-weight: 700;
}

.pe-box .pe-box-pickuphint {
	display: block;
	width: 100%;
	margin: 0 0 12px;
	padding: 8px 12px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	text-transform: none;
	letter-spacing: normal;
	color: var( --pe-blue-dark );
	background: var( --pe-blue-soft );
	border: 0;
	border-radius: 10px;
	box-shadow: none;
	cursor: pointer;
}

.pe-box .pe-box-pickuphint:hover {
	color: var( --pe-blue-dark );
	background: var( --pe-blue-soft );
	text-decoration: underline;
}

.pe-box .pe-box-pickuphint[hidden] {
	display: none;
}