/**
 * RW Konfig — front-end configurator styles (Apple-like option cards).
 *
 * Native checkboxes are replaced by clickable cards with a selection ring.
 * Variables allow quick theming.
 */

.rwk-configurator {
	display: grid;
	gap: 2rem;
	color: var(--background-dark);
	max-width: 720px;
}

/* ---- Group ---- */
.rwk-configurator__group-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

.rwk-configurator__group-title {
	margin: 0;
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* ---- Teaser: description under a group heading + "mehr erfahren" (+) ----
   The link follows the text inline. When text and link need more than three
   lines, the script adds is-clamped: the text is cut after three lines and
   the link sits on top of the end of the last one. The full text stays in
   the DOM, so screen readers still read all of it. */
.rwk-teaser {
	position: relative;
	margin: 0 0 0.75rem;
	color: var(--text-muted);
	font-size: 1rem;
	line-height: 1.5;
}

.rwk-teaser strong {
	color: var(--text);
}

/* Line breaks the administrator entered are kept, so a description can be
   written as short lines. */
.rwk-teaser__text {
	white-space: pre-line;
}

/* The description may carry markup (see Option_Groups::description()).
   Nested blocks keep a tight rhythm, links stay recognisable, and a closing
   paragraph runs on into the link. */
.rwk-teaser__text p,
.rwk-teaser__text ul,
.rwk-teaser__text ol {
	margin: 0 0 0.5em;
}

.rwk-teaser__text > p:last-child {
	display: inline;
	margin: 0;
}

.rwk-teaser__text ul,
.rwk-teaser__text ol {
	padding-left: 1.2em;
}

.rwk-teaser__text a {
	color: var(--link, var(--accent-dark));
	text-decoration: underline;
}

.rwk-teaser.is-clamped .rwk-teaser__text {
	display: block;
	max-height: 4.5em; /* Three lines at line-height 1.5. */
	overflow: hidden;
}

/* "mehr erfahren" (+): a real button styled as a link. Colours are restated
   for every state because the theme paints buttons on hover. */
.rwk-teaser__more,
.rwk-teaser__more:hover,
.rwk-teaser__more:focus {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--link, var(--accent-dark));
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.rwk-teaser__more:hover {
	color: var(--text);
}

/* No focus ring on the link (RW decision, 01.10.2026). */
.rwk-teaser__more:focus,
.rwk-teaser__more:focus-visible {
	outline: 0;
}

/* Circled plus after the label; stays orange on hover, only the label
   changes colour. */
.rwk-teaser__icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-left: 0.35em;
	color: var(--accent);
	vertical-align: -0.15em;
}

/* Cut text: the link covers the end of the third line, fading the text out
   on its left edge so no half word shows next to it. */
.rwk-teaser.is-clamped .rwk-teaser__more {
	position: absolute;
	right: 0;
	bottom: 0;
	padding-left: 2em;
	background: linear-gradient(to right, transparent, var(--background) 1.5em);
}

/* ---- Cards ---- */
.rwk-cards {
	display: grid;
	gap: 0.65rem;
	margin-top: 0.5em;
}

.rwk-card {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	color: var(--text);
	/* Real border (not box-shadow) so the selected ring is never clipped by a
	   parent column; border-box keeps the outer size stable on selection. */
	border: 1px solid var(--border);
	border-radius: var(--rwk-radius);
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.rwk-card:hover {
	/* --orange-300 is not defined by the theme, so without the fallback this
	   rule resolved to transparent and the hover border never showed. */
	border-color: var(--orange-300, var(--accent));
}

.rwk-card:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.35);
}

.rwk-card.is-selected {
	/* Keep the 1px border width (no layout jump); thicken visually with an
	   inset ring that is drawn inside the card, so it is never clipped. */
	border-color: var(--accent);
	box-shadow: inset 0 0 0 1px var(--accent);
}

/* .is-disabled is gone: an option that cannot be combined is now left out of
   the list entirely rather than shown greyed out. */

.rwk-card__info {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	flex: 1;
	min-width: 0;
}

/* ---- Selection control: checkbox (combinable) or radio (either/or) ----
   Only shown in groups that allow more than one pick. Aligned with the
   option name, not centred on a multi-line card. */
.rwk-card__control {
	position: relative;
	flex: none;
	align-self: flex-start;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	margin: -1px -0.35rem 0 0;
	border: 1.5px solid var(--border);
	background: var(--background);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.rwk-card__control.is-checkbox {
	border-radius: 4px;
}

.rwk-card__control.is-radio {
	border-radius: 50%;
}

.rwk-card:hover .rwk-card__control {
	border-color: var(--accent);
}

.rwk-card.is-selected .rwk-card__control {
	border-color: var(--accent);
}

.rwk-card.is-selected .rwk-card__control.is-checkbox {
	background: var(--accent);
}

/* Tick drawn from two borders of a rotated box. */
.rwk-card.is-selected .rwk-card__control.is-checkbox::after {
	content: "";
	position: absolute;
	left: 4.5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid var(--background);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.rwk-card.is-selected .rwk-card__control.is-radio::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--accent);
}

.rwk-card__label {
	font-size: 1.02rem;
	font-weight: 500;
	line-height: 1;
}

.rwk-card__subtitle {
	font-size: 0.85rem;
	color: var(--text-muted);
	margin-top: 0.15rem;
	line-height: 1.2;
}

/* Price on the right side of the card. */
.rwk-card__price {
	flex: 0 0 auto;
	margin-left: auto;
	/* Reserves the width of a three-digit price ("+ 899,00 €") so the label
	   column does not shift between "inklusive" and a price. Wider values
	   still fit (nowrap), they only take a little more room. Kept this narrow
	   so long labels such as the Nayax option stay on one line. */
	min-width: 5.2em;
	text-align: right;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--text-muted);
	white-space: nowrap;
	line-height: 1;
}

/* Covered by the base price. Deliberately without its own styling: it sits in
   the price slot and inherits size, weight and colour from .rwk-card__price, so
   the column reads as one consistent line of values. */

/* ---- Product image preview ----
   The configurator swaps the product gallery image by laying its own picture
   over the original. That keeps the gallery's slider and lightbox markup
   untouched, so hiding the overlay restores the original exactly. */
.woocommerce-product-gallery__image {
	position: relative;
}

.rwk-preview-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* Opaque, so a product image of a different shape cannot show through. */
	background: var(--background-light);
}

.woocommerce-product-gallery__image {
	background: var(--background-light);
}

.rwk-preview-image[hidden] {
	display: none;
}

/* ---- Stepper ---- */
.rwk-qty {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.55rem;
}

.rwk-stepper {
	display: inline-flex;
	align-items: stretch;
	height: 1.9rem;
	border-radius: 999px;
	background: #f0f0f2;
	overflow: hidden;
}

.rwk-stepper__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--background-dark);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.12s ease;
}

.rwk-stepper__btn:hover:not(:disabled) {
	background: rgba(0, 0, 0, 0.06);
}

/* Last pick of a required group: it may not be stepped down to zero. */
.rwk-stepper__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.rwk-stepper__val {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 1.6rem;
	font-size: 0.95rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--background-dark);
}

/* ---- Errors ---- */
.rwk-configurator__errors {
	margin: 0;
	padding: 0.75rem 1rem;
	list-style: none;
	background: #fff4f4;
	border: 1px solid #f3c0c0;
	border-radius: 10px;
	color: #b32d2e;
}

/* GeneratePress clears the floated product gallery by giving the summary column
   overflow: hidden. That turns the column into a scroll container, which
   silently disables position: sticky inside it. flow-root establishes the same
   block formatting context without clipping or scrolling, so the float layout
   stays intact and sticky elements in the column keep working. Scoped to
   products that actually show the configurator. */
.rwk-has-configurator.woocommerce #content div.product div.summary,
.rwk-has-configurator.woocommerce div.product div.summary,
.rwk-has-configurator.woocommerce-page #content div.product div.summary,
.rwk-has-configurator.woocommerce-page div.product div.summary {
	display: flow-root;
	overflow: visible;
}

/* ---- Action bar ----
   Total price, tax notice and add-to-cart button, above the option groups.
   The button is rendered by WooCommerce itself: the wrapper is opened on
   woocommerce_before_add_to_cart_button and closed on
   woocommerce_after_add_to_cart_button, so it ends up inside without
   overriding a template. The quantity is a hidden 1 on configurable products.

   The script pins the bar (.is-pinned, position: fixed) below the site header
   once it scrolls up to it and sets top, left and width inline; the slot
   around it keeps its height in the flow meanwhile. */
.rwk-actionbar {
	z-index: 20;
	box-sizing: border-box;
	display: grid;
	/* One row: price, service fee and tax notice stacked on the left, the
	   button on the right. */
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"total   cart"
		"monthly cart"
		"legal   cart";
	align-items: center;
	column-gap: 1rem;
	row-gap: 0.15rem;
	/* Part of the page rather than a box on it: page background, no frame,
	   only a hairline underneath. Opaque, so nothing shows through when it
	   is pinned. */
	padding: 1rem 0;
	border: 0;
	border-bottom: 1px solid var(--border-light, var(--border));
	border-radius: 0;
	background: var(--background, #fff);
}

/* Pinned: a short fade below it, so the options scrolling past slip under
   it softly instead of being cut off at a hard edge. */
.rwk-actionbar.is-pinned::after {
	content: "";
	position: absolute;
	top: calc(100% + 1px);
	left: -7px;
	right: -7px;
	height: 1.25rem;
	background: linear-gradient(var(--background, #fff), transparent);
	pointer-events: none;
}

.rwk-actionbar.is-pinned {
	position: fixed;
	margin: 0;
	/* Price and button line up with the top of the picture next to it. */
	padding-top: 0;
}

/* The summary card is in view and shows the same price and button: the
   pinned bar steps aside. */
.rwk-actionbar {
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.rwk-actionbar.is-concealed {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.rwk-actionbar .rwk-configurator__total {
	grid-area: total;
}

/* Monthly service fee under the total: same row layout, quieter type, so it
   reads as an addendum to the one-off price rather than a second total. */
.rwk-actionbar .rwk-configurator__monthly {
	grid-area: monthly;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: -0.1rem;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--text-muted);
	line-height: 1.2;
}

.rwk-configurator__monthly-price {
	white-space: nowrap;
}

/* The Germanized tax and shipping notice, which its shopmark setting hooks to
   woocommerce_before_add_to_cart_quantity — inside the bar. */
.rwk-actionbar .legal-price-info {
	grid-area: legal;
	font-size: 0.78rem;
	line-height: 1.3;
	color: var(--gray-300);
	margin: 0;
}

.rwk-actionbar .legal-price-info p {
	margin: 0;
	color: var(--text-muted);
}

/* Holds only the hidden quantity input; keeps the theme's stepper buttons
   (added by script) out of sight should they appear anyway. GeneratePress
   Premium's quantity buttons show the box with
   ".do-quantity-buttons div.quantity", so this selector has to outrank it. */
.rwk-actionbar .quantity,
form.cart .rwk-actionbar div.quantity {
	display: none;
}

/* The child theme sizes the button against the whole form width
   (width: calc(100% - 154px)) to leave room for the quantity field. In the
   bar the button takes its own width at the end of the row; the selector
   matches that rule's specificity plus one so it wins. */
.woocommerce div.product form.cart .rwk-actionbar .single_add_to_cart_button.button {
	grid-area: cart;
	width: auto;
	margin: 0;
	white-space: nowrap;
	border-radius: 5px;
}

/* Phones: the row is too narrow for price and button, so the button moves
   below the price and spans the bar. */
@media (max-width: 480px) {
	.rwk-actionbar {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"total"
			"monthly"
			"legal"
			"cart";
	}

	.woocommerce div.product form.cart .rwk-actionbar .single_add_to_cart_button.button {
		width: 100%;
		margin-top: 0.5rem;
	}
}

/* Price label and figure side by side, left-aligned, in the bar. */
.rwk-actionbar .rwk-configurator__total {
	justify-content: flex-start;
	flex-wrap: wrap;
	row-gap: 0.25rem;
}

/* ---- Summary card ----
   Closes the configurator: picture, product, picked options, total, a second
   add-to-cart button and the share tools. Pinned by the script on wide
   screens (.is-pinned), like the action bar. */
.rwk-summary {
	z-index: 19;
	box-sizing: border-box;
	padding: 1.25rem;
	border: 1px solid var(--border);
	border-radius: var(--rwk-radius);
	background-color: var(--background, #fff);
}

.rwk-summary.is-pinned {
	position: fixed;
	margin: 0;
}

/* A pinned card has rounded corners; the options scrolling past
   would show in the four corner gaps. A solid ring in the page colour
   (spread, no blur) follows the rounding outwards and fills them: with a
   radius r it needs at least 0.42 r. */
.rwk-summary.is-pinned {
	box-shadow: 0 0 0 6px var(--background, #fff);
}

/* The bar has square corners now; it only needs the ring at its sides,
   where cards with a focus or selection ring could peek out. */
.rwk-actionbar.is-pinned {
	box-shadow: -7px 0 0 var(--background, #fff), 7px 0 0 var(--background, #fff);
}

/* Cover above a pinned bar or card: page background from the top of the
   window down to its top edge, so the options scrolling past do not show
   between the site header and the pinned element. The header sits above it.
   The script sets --rwk-pin-top; +1px also covers the top border. */
.rwk-actionbar.is-pinned::before,
.rwk-summary.is-pinned::before {
	content: "";
	position: absolute;
	/* As wide as the ring around it (box-shadow above). */
	left: -7px;
	right: -7px;
	bottom: calc(100% + 1px);
	height: var(--rwk-pin-top, 0);
	background: var(--background, #fff);
	pointer-events: none;
}

/* The bar has no top border: its cover reaches 1px into it instead, so no
   hairline of the options shows between the two, even at half pixels. */
.rwk-actionbar.is-pinned::before {
	bottom: calc(100% - 1px);
	height: calc(var(--rwk-pin-top, 0px) + 1px);
}

.rwk-summary__head {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--border);
}

.rwk-summary__media {
	flex: 0 0 64px;
	width: 64px;
	height: 80px;
	border-radius: var(--rwk-radius-sm);
	overflow: hidden;
}

.rwk-summary__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.rwk-summary__product {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Model name first and larger, the article number below it. */
.rwk-summary__name {
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--text);
}

.rwk-summary__sku {
	font-size: 0.85rem;
	color: var(--text-muted);
}

.rwk-summary__lines {
	margin: 0;
	padding: 1rem 0;
	border-bottom: 1px solid var(--border);
}

.rwk-summary__line {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.15rem 0;
	font-size: 0.9rem;
}

.rwk-summary__line dt {
	min-width: 0;
	font-weight: 400;
	color: var(--text-muted);
}

.rwk-summary__line dd {
	margin: 0;
	white-space: nowrap;
	text-align: right;
}

.rwk-summary__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.75rem;
	padding-top: 1rem;
}

.rwk-summary__total-label {
	color: var(--black);
	font-weight: 600;
}

.rwk-summary__total-price {
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--black);
}

.rwk-summary__monthly,
.rwk-summary__legal {
	font-size: 0.78rem;
	line-height: 1.3;
	color: var(--text-muted);
}

/* The tax notice sits under "Gesamtpreis", as in the action bar. */
.rwk-summary__legal {
	margin-top: 0.25rem;
}

.rwk-summary__legal p {
	margin: 0;
}

.woocommerce div.product form.cart .rwk-summary .rwk-summary__cart.single_add_to_cart_button.button {
	display: block;
	float: none;
	width: 100%;
	margin: 1rem 0 0;
	border-radius: 5px;
}

.rwk-summary .rwk-configurator__tools {
	justify-content: center;
	margin: 0.75rem 0 0;
}

/* The product wrapper does not contain its floated columns, so a column
   longer than the summary (description below the picture) would stick out
   of it. flow-root makes the wrapper as tall as its longest column, which is
   also the limit the pinned summary card respects. */
.rwk-has-configurator div.product {
	display: flow-root;
}

/* ---- Two-column layout ----
   Configurator on the left, product picture on the right, the product
   description right below it. From 1025px on; below, everything stacks
   (see the product description further down). */
@media (min-width: 1025px) {
	.rwk-has-configurator.woocommerce #content div.product div.images,
	.rwk-has-configurator.woocommerce div.product div.images,
	.rwk-has-configurator.woocommerce-page #content div.product div.images,
	.rwk-has-configurator.woocommerce-page div.product div.images {
		float: right;
		margin-right: 0;
		margin-left: 4%; /* GeneratePress puts 4 % on the right side. */
	}
}

/* ---- Total ---- */
.rwk-configurator__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
}

.rwk-configurator__total-label {
	color: var(--black);
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.01em;
	line-height: 1;
}

.rwk-configurator__total-price {
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* ---- Drawer layout ("Eigene Anordnung") ---- */

/* The configurator is a CSS grid, and a grid item's default min-width:auto
   lets the wide drawer table blow the group up to content width instead of
   scrolling inside it. Zero re-enables shrinking for every group. */
.rwk-configurator__group {
	min-width: 0;
}

.rwk-grid {
	margin-top: 0.65rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--border);
	border-radius: var(--rwk-radius);
}

/* Wide machines exceed the column, so the table scrolls inside its own box
   instead of breaking the page layout. */
.rwk-grid__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.rwk-grid__table {
	border-collapse: collapse;
	width: max-content;
	min-width: 100%;
	border: 0;
	margin-bottom: 0;
}

.rwk-grid__table th,
.rwk-grid__table td {
	padding: 0.3rem 0.35rem;
	border: 0;
	text-align: left;
	font-size: 0.8em;
	white-space: nowrap;
}

.rwk-grid__table thead th {
	font-weight: 600;
	opacity: 0.75;
}

/* Row headers ("Schublade 1") start flush left, aligned with the hint and
   the legend around the table. */
.rwk-grid__table tbody th {
	box-sizing: content-box;
	height: 2.5em; /* Name plus fee line, so a drawer keeps its height when a fee appears. */
	font-weight: 600;
	line-height: 1.5;
	padding-left: 0;
	padding-right: 0.75rem;
}

/* Styled like a small option card: same border, radius and hover/selected
   behaviour, with the native arrow replaced so every browser renders the same
   chevron. */
.rwk-grid__select {
	-webkit-appearance: none;
	appearance: none;
	max-width: 5.5rem;
	padding: 0.3rem 1.5rem 0.3rem 0.5rem;
	border: 1px solid var(--border);
	border-radius: var(--rwk-radius);
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23767676' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.5rem center;
	color: var(--text);
	font-family: inherit;
	font-size: 1em;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rwk-grid__select:hover {
	border-color: var(--orange-300, var(--accent));
}

.rwk-grid__select:focus-visible {
	outline: none;
	border-color: var(--accent);
	box-shadow: inset 0 0 0 1px var(--accent);
}

/* The header row alone sets the column widths, so they stay the same whatever
   the drawers hold. A dropdown's natural width is that of its longest entry;
   the dropdowns that stretch therefore use width 0 with a full min-width, which
   fills the cell without feeding that width back into the column. */
.rwk-grid__table thead th:not(:first-child) {
	box-sizing: content-box;
	min-width: 5.5rem;
}

/* A merged cell (double spiral, multi belt) stretches its dropdown across
   the joined slots, so the connection is visible at a glance. */
.rwk-grid__table td[colspan] .rwk-grid__select {
	width: 0;
	min-width: 100%;
	max-width: none;
}

/* Belt drawer: one note across the row instead of a dropdown per slot. */
.rwk-grid__table td.rwk-grid__belt {
	white-space: normal;
}

.rwk-grid__belt-inner {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.3rem 0.6rem;
	border: 1px solid var(--accent);
	border-radius: var(--rwk-radius);
	background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* On/off switch: a native checkbox with role="switch", drawn as a track. */
.rwk-switch {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
	cursor: pointer;
}

.rwk-switch__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}

.rwk-switch__track {
	position: relative;
	width: 2.2em;
	height: 1.25em;
	border-radius: 1em;
	background: var(--border);
	transition: background-color 0.15s ease;
}

.rwk-switch__track::after {
	content: "";
	position: absolute;
	top: 0.15em;
	left: 0.15em;
	width: 0.95em;
	height: 0.95em;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.15s ease;
}

.rwk-switch__input:checked + .rwk-switch__track {
	background: var(--accent);
}

.rwk-switch__input:checked + .rwk-switch__track::after {
	transform: translateX(0.95em);
}

.rwk-switch__input:focus-visible + .rwk-switch__track {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* Flat fee of a drawer, under its name. */
.rwk-grid__drawer-fee {
	display: block;
	font-weight: 400;
	line-height: 1;
	opacity: 0.75;
}

/* ---- Multi-machine sizes: one grid per machine, stacked ---- */
.rwk-grid__unit + .rwk-grid__unit {
	margin-top: 1.5rem;
}

/* Heading over each machine's grid ("Linker Automat"); hidden while the
   size consists of a single machine. */
.rwk-grid__unit-title {
	margin: 0 0 0.4rem;
	font-size: 0.95em;
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* Note under the grid: the flat per-drawer fee and what it adds right now. */
.rwk-grid__flat-note {
	margin: 0.75rem 0 0;
	font-size: 0.85em;
}

.rwk-grid__flat-note strong {
	display: block;
	font-weight: 600;
}

/* Legend under the grid, spelling out the abbreviated dropdown labels. */
/* Two tidy columns, filled row by row; very narrow screens fall back to one
   so the entries never overflow the grid box. */
/* One running text, entries separated by a bullet; wraps like a sentence. */
.rwk-grid__legend {
	display: block;
	margin: 0.75rem 0 0;
	font-size: 0.75em;
	line-height: 1.6;
	color: var(--text);
	opacity: 0.75;
}

.rwk-grid__legend-item {
	display: inline;
}

.rwk-grid__legend-item + .rwk-grid__legend-item::before {
	content: "\2022"; /* • */
	margin: 0 0.5em;
}

/* ---- Grid head: hint on the left, info panel and view toggle on the right ---- */
.rwk-grid__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}

.rwk-grid__intro {
	min-width: 0;
}

/* Heading of the fullscreen view (hidden inline). */
.rwk-grid__title {
	margin: 0 0 0.35rem;
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.rwk-grid__tools {
	display: inline-flex;
	align-items: flex-end;
	flex-direction: column;
	gap: 0.4rem;
	flex-shrink: 0;
	padding-top: 0.15rem;
}

/* "Größer anzeigen" / "Schließen": coloured like the "mehr erfahren" link,
   with a plain icon after the label — deliberately no circle. */
.rwk-grid__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--accent);
	font-size: 0.85rem;
	font-family: inherit;
	line-height: 1;
	cursor: pointer;
}

.rwk-grid__toggle svg {
	display: block;
	color: var(--accent); /* Stays orange on hover; only the label changes. */
}

/* Hover like "mehr erfahren": no background, only the text colour changes.
   Restated because the theme paints buttons on hover. */
.rwk-grid__toggle:hover,
.rwk-grid__toggle:focus {
	color: var(--text);
	text-decoration: none;
	background: none;
}

.rwk-grid__toggle:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* ---- Fullscreen view of the drawer grid ("Größer anzeigen") ---- */
/* The same grid element is promoted to a fixed layer: no second markup copy,
   so the dropdowns keep their state and the hidden inputs keep posting with
   the add-to-cart form. Sits below the GenerateBlocks overlays (z-index
   99999), so the "mehr erfahren" info panel still opens on top of it. */
.rwk-grid.is-expanded {
	position: fixed;
	inset: 0;
	z-index: 9990;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: var(--background-light, #fff);
	overflow: auto;
	padding: clamp(1.25rem, 4vh, 2.5rem) clamp(1rem, 5vw, 4rem);
}

/* The cut teaser's link fades into this layer's background. */
.rwk-grid.is-expanded .rwk-teaser.is-clamped .rwk-teaser__more {
	background: linear-gradient(to right, transparent, var(--background-light) 1.5em);
}

/* Cap the line length on very wide screens; the table itself stays centred. */
.rwk-grid.is-expanded > * {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* Room to breathe: the enlarged table (fullscreen fallback or info panel)
   drops the compact inline sizing and shares the full width between its
   columns instead of growing to the longest option text — that is what makes
   the whole grid fit without scrolling. The dropdowns bottom out at a
   readable minimum; only below that the scroll container takes over again
   (small screens). */
.rwk-grid.is-expanded .rwk-grid__table,
.rwk-grid.is-in-panel .rwk-grid__table {
	width: 100%;
}

/* .rwk-grid.is-expanded .rwk-grid__table th,
.rwk-grid.is-expanded .rwk-grid__table td,
.rwk-grid.is-in-panel .rwk-grid__table th,
.rwk-grid.is-in-panel .rwk-grid__table td {
	font-size: 1em;
	padding: 0.45rem 0.5rem;
} */

.rwk-grid.is-expanded .rwk-grid__select,
.rwk-grid.is-in-panel .rwk-grid__select {
	width: 0;
	max-width: none;
	min-width: 100%;
	padding: 0.45rem 1.75rem 0.45rem 0.6rem;
}

.rwk-grid.is-expanded .rwk-grid__legend,
.rwk-grid.is-in-panel .rwk-grid__legend {
	font-size: 0.85em;
}

/* ---- Grid inside the info panel ("Größer anzeigen") ---- */
/* The panel box already frames the content, so the grid drops its own card
   border there and simply flows with the panel. */
.rwk-grid.is-in-panel {
	border: 0;
	border-radius: 0;
	padding: 0;
	margin-top: 0;
}

/* A panel hosting the grid may outgrow the text width, so eight or nine
   slots fit without horizontal scrolling. Browsers without :has() keep the
   normal panel width — the grid then scrolls inside its own box. */
.gb-overlay__content > :has(.rwk-grid.is-in-panel) {
	width: min(1400px, 94vw);
	max-width: min(1400px, 94vw);
}

/* No page scrolling behind the fullscreen grid (class set by the script). */
html.rwk-grid-expanded,
html.rwk-grid-expanded body {
	overflow: hidden;
}

/* ------------------------------------------------------------------------
   Presets: tiles above the groups, the share/save tools and the shortcode
   card on landing pages.
   ------------------------------------------------------------------------ */


.rwk-presets__title {
	margin: 0 0 0.75rem;
}

.rwk-presets__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 0.75rem;
}

.rwk-preset-tile {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.5rem;
	margin: 0;
	padding: 0.75rem;
	font: inherit;
	text-align: left;
	color: var(--text);
	background: transparent;
	border: 1px solid var(--border);
	border-radius: var(--rwk-radius);
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rwk-preset-tile:hover,
.rwk-preset-tile:focus-visible {
	border-color: var(--accent);
	outline: none;
}

.rwk-preset-tile.is-active {
	border-color: var(--accent);
	box-shadow: inset 0 0 0 1px var(--accent);
}

.rwk-preset-tile__media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--rwk-radius-sm);
}

.rwk-preset-tile__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.rwk-preset-tile__body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.rwk-preset-tile__title {
	font-weight: 600;
}

.rwk-preset-tile__description {
	font-size: 0.85em;
	opacity: 0.75;
}

.rwk-preset-tile__description p {
	margin: 0 0 0.35em;
}

.rwk-preset-tile__price {
	font-weight: 600;
	color: var(--accent);
}

.rwk-preset-tile__monthly {
	display: block;
	font-size: 0.8em;
	font-weight: 400;
	color: var(--text);
	opacity: 0.75;
}

/* Share link and the administrators' save link. */
.rwk-configurator__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.25rem;
	margin: 0 0 1rem;
}

.rwk-configurator__tool {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0;
	font: inherit;
	font-size: 0.9rem;
	color: var(--text);
	background: transparent;
	border: 0;
	cursor: pointer;
	text-decoration: none;
}

.rwk-configurator__tool:hover,
.rwk-configurator__tool:focus-visible {
	color: var(--accent);
	background: transparent;
	outline: none;
}

.rwk-configurator__tool-icon {
	flex: 0 0 auto;
	color: var(--accent);
}

.rwk-configurator__tool--admin {
	opacity: 0.8;
}

.rwk-configurator__share-link {
	flex: 1 1 260px;
	min-width: 0;
	font-size: 0.85rem;
}

/* [rwk_vorkonfiguration] card. */
.rwk-preset-card {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	padding: 1.25rem;
	border: 1px solid var(--border, #ddd);
	border-radius: var(--rwk-radius, 8px);
}

.rwk-preset-card__media {
	flex: 1 1 220px;
	max-width: 320px;
}

.rwk-preset-card__media img {
	display: block;
	width: 100%;
	height: auto;
}

.rwk-preset-card__body {
	flex: 2 1 260px;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.rwk-preset-card__title {
	margin: 0;
}

.rwk-preset-card__description p:last-child {
	margin-bottom: 0;
}

.rwk-preset-card__price {
	margin: 0;
	font-size: 1.25em;
	font-weight: 600;
}

.rwk-preset-card__monthly {
	display: block;
	font-size: 0.7em;
	font-weight: 400;
	opacity: 0.75;
}

.rwk-preset-card__button {
	align-self: flex-start;
	margin-top: auto;
}

/* ---- [rwk_produktliste]: catalogue of a machine type ----
   Cards are rendered by the server; the script filters and sorts them.
   Filters sit in a column on wide screens and behind a toggle below. */
.rwk-product-list [x-cloak] {
	display: none !important;
}

.rwk-product-list .screen-reader-text:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.rwk-product-list__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin-bottom: 1.25rem;
}

.rwk-product-list__count {
	margin: 0;
	color: var(--text-muted);
}

.rwk-product-list__sort {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
	font-size: 0.95rem;
}

/* Like the filter toggle: light border, 5px corners, own chevron drawn in
   the text colour, so it follows dark mode. */
.rwk-product-list__sort span {
	color: var(--text-muted);
}

.rwk-product-list__sort select {
	-webkit-appearance: none;
	appearance: none;
	width: auto;
	min-width: 12rem;
	margin: 0;
	padding: 0.5rem 2.5rem 0.5rem 1rem;
	border: 1px solid var(--border, #ddd);
	border-radius: var(--rwk-radius-sm, 5px);
	background-color: var(--background, #fff);
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position:
		calc(100% - 1.15rem) 50%,
		calc(100% - 0.8rem) 50%;
	background-size: 0.35rem 0.35rem;
	background-repeat: no-repeat;
	color: var(--text, inherit);
	font: inherit;
	line-height: 1.5;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.rwk-product-list__sort select:hover {
	border-color: var(--text-muted);
}

.rwk-product-list__sort select:focus {
	border-color: var(--accent);
	outline: none;
	box-shadow: 0 0 0 1px var(--accent);
}

.rwk-product-list__toggle:hover {
	border-color: var(--text-muted);
}

.rwk-product-list__toggle {
	padding: 0.5rem 1rem;
	border: 1px solid var(--border, #ddd);
	border-radius: var(--rwk-radius-sm, 6px);
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.rwk-product-list__layout {
	display: grid;
	gap: 1.5rem;
}

.rwk-product-list__filters {
	display: none;
	padding: 1rem;
	border: 1px solid var(--border, #ddd);
	border-radius: var(--rwk-radius, 8px);
}

.rwk-product-list__filters.is-open {
	display: block;
}

.rwk-product-list__group {
	margin: 0 0 1.25rem;
	padding: 0;
	border: 0;
}

.rwk-product-list__group legend {
	margin-bottom: 0.5rem;
	padding: 0;
	font-weight: 600;
}

.rwk-product-list__option {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.2rem 0;
	cursor: pointer;
}

.rwk-product-list__option input {
	margin: 0;
}

.rwk-product-list__option-count {
	margin-left: auto;
	color: var(--text-muted);
	font-size: 0.875em;
}

.rwk-product-list__option.is-empty {
	opacity: 0.5;
	cursor: default;
}

.rwk-product-list__reset {
	padding: 0;
	border: 0;
	background: none;
	color: var(--accent);
	text-decoration: underline;
	cursor: pointer;
}

.rwk-product-list__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	align-content: start;
}

.rwk-product-list__empty {
	grid-column: 1 / -1;
	padding: 2rem;
	text-align: center;
	border: 1px dashed var(--border, #ddd);
	border-radius: var(--rwk-radius, 8px);
}

.rwk-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border, #ddd);
	border-radius: var(--rwk-radius, 8px);
	overflow: hidden;
	background: var(--background);
	transition: border-color 0.15s ease;
}

.rwk-product-card:hover,
.rwk-product-card:focus-within {
	border-color: var(--accent);
}

/* Picture field like the configurator's gallery: --background-light,
   which the theme switches to its grey in dark mode. */
.rwk-product-card__media {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: var(--background-light, #f5f5f5);
}

.rwk-product-card__media img {
	display: block;
	width: auto;
	height: 90%;
	max-width: 100%;
	object-fit: contain;
}

.rwk-product-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem 1.25rem 1.25rem;
}

.rwk-product-card__title {
	margin: 0;
	font-size: 1.15rem;
}

.rwk-product-card__features {
	margin: 0;
	color: var(--text-muted);
	font-size: 0.9rem;
}

.rwk-product-card__description p:last-child {
	margin-bottom: 0;
}

.rwk-product-card__price {
	margin: 0.25rem 0 0;
	font-size: 1em;
	font-weight: 600;
}

/* Above the card's link overlay, so the shipping link stays clickable. */
.rwk-product-card__tax {
	position: relative;
	z-index: 1;
	margin-left: 0.35em;
	color: var(--text-muted);
	font-size: 0.75em;
	font-weight: 400;
}

.rwk-product-card__monthly {
	display: block;
	font-size: 0.75em;
	font-weight: 400;
	color: var(--text-muted);
}

/* Buttons look like the configurator's "In den Warenkorb": the theme styles
   that one through WooCommerce's ".button.alt", which does not reach a
   plain page, so its look is restated here (colours from the theme). */
.rwk-product-card__button.button,
.rwk-product-list__empty .button {
	display: inline-block;
	padding: 10px 20px;
	border: 0;
	border-radius: 5px;
	background-color: var(--accent);
	color: var(--white, #fff);
	font-size: inherit;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
}

.rwk-product-card:hover .rwk-product-card__button.button,
.rwk-product-card__button.button:hover,
.rwk-product-card__button.button:focus,
.rwk-product-list__empty .button:hover,
.rwk-product-list__empty .button:focus {
	background-color: var(--accent-hover, var(--accent));
	color: var(--white, #fff);
}

.rwk-product-card__button.button {
	display: block;
	margin-top: auto;
}

/* One link per card; its overlay makes the whole card clickable. */
.rwk-product-card__button::after {
	content: "";
	position: absolute;
	inset: 0;
}

@media (min-width: 600px) {
	.rwk-product-list__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.rwk-product-list__toggle {
		display: none;
	}

	.rwk-product-list__layout:has(.rwk-product-list__filters) {
		grid-template-columns: 220px minmax(0, 1fr);
	}

	.rwk-product-list__filters {
		display: block;
		align-self: start;
	}

	/* Desktop: three products side by side, with or without filters. */
	.rwk-product-list__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Wide screens: room for filter labels on one line. */
@media (min-width: 1280px) {
	.rwk-product-list__layout:has(.rwk-product-list__filters) {
		grid-template-columns: 260px minmax(0, 1fr);
	}
}

/* ---- Product description ----
   Filled by the script from POST /description, right after the gallery.
   On wide screens it continues the picture column below the picture:
   floated like the gallery, at the gallery's width (GeneratePress: 55 %,
   adjustable via the variable). The picture rides along in its track until
   the configurator ends, then the description follows right below it (see
   the picture track further down). The theme's own sticky gallery is
   switched off, as it would run over the description. The summary card in
   the other column rides along until the end of this row (see
   pinConfigurator in the script).

   Below 1025px everything stacks: picture, title and price, configurator,
   summary card, description, then the tabs (FAQ). */
.rwk-description:empty {
	display: none;
}

@media (min-width: 1025px) {
	.rwk-has-configurator .rwk-description {
		float: right;
		clear: right;
		box-sizing: border-box;
		width: var(--rwk-gallery-width, 55%);
		margin-left: 4%;
	}
}

.rwk-has-configurator.woocommerce div.product div.images.woocommerce-product-gallery {
	position: relative;
	top: auto;
}

/* ---- Picture track ----
   Wraps the gallery (rendered around it by the plugin) and takes over its
   place in the float layout. A spacer below the picture makes the track
   reach down to the summary card, so the sticky picture rides along until
   the configurator ends and then scrolls away, with the description right
   below. The script sets the spacer (--rwk-gallery-travel) and the line the
   picture is held at (--rwk-gallery-top); it never moves anything itself,
   so the page does not shift while scrolling. Stacked below 1025px, the
   track is a plain block. */
@media (min-width: 1025px) {
	.rwk-has-configurator .rwk-gallery-track {
		float: right;
		clear: right;
		box-sizing: border-box;
		width: var(--rwk-gallery-width, 55%);
		margin: 0 0 2em 4%;
	}

	.rwk-has-configurator .rwk-gallery-track::after {
		content: '';
		display: block;
		height: var(--rwk-gallery-travel, 0px);
	}

	.rwk-has-configurator.woocommerce #content div.product .rwk-gallery-track > div.images.woocommerce-product-gallery,
	.rwk-has-configurator.woocommerce div.product .rwk-gallery-track > div.images.woocommerce-product-gallery {
		position: sticky;
		top: var(--rwk-gallery-top, 0px);
		float: none;
		width: 100%;
		margin: 0;
	}
}

@media (max-width: 1024px) {
	.rwk-has-configurator div.product :has(> .rwk-description) {
		display: flex;
		flex-direction: column;
	}

	.rwk-has-configurator div.product :has(> .rwk-description) > .rwk-description {
		order: 10;
	}

	/* GeneratePress puts picture and summary side by side from 769px. */
	.rwk-has-configurator.woocommerce #content div.product div.images,
	.rwk-has-configurator.woocommerce div.product div.images,
	.rwk-has-configurator.woocommerce #content div.product div.summary,
	.rwk-has-configurator.woocommerce div.product div.summary {
		float: none;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	.rwk-has-configurator .rwk-description {
		min-width: 0;
		margin-top: 2rem;
	}
}

/* The tabs (FAQ) start below the whole product row, at a clear distance
   from it: the summary card stops at the row end. */
.rwk-has-configurator div.product .woocommerce-tabs {
	clear: both;
	padding-top: 64px;
}

.rwk-desc__number {
	margin: 0;
	font-size: 0.85rem;
	color: var(--text-muted);
}

.rwk-desc__name {
	margin: 0.25rem 0 0.75rem;
}

.rwk-desc__intro {
	font-size: 1.05rem;
}

.rwk-desc__specs {
	width: 100%;
	margin: 0 0 2rem;
	border: 0;
	border-collapse: collapse;
	font-size: 0.9rem;
}

/* Rows divided by lines only; the theme frames every cell by default. */
.rwk-desc__specs th,
.rwk-desc__specs td {
	padding: 0.45rem 0;
	border: 0;
	border-bottom: 1px solid var(--border);
	text-align: left;
	vertical-align: top;
}

.rwk-desc__specs th {
	width: 40%;
	padding-right: 1rem;
	font-weight: 400;
	color: var(--text-muted);
}

.rwk-desc__section {
	margin: 0 0 1.5rem;
}

.rwk-desc__section h3 {
	margin: 0 0 0.5rem;
}

/* A feature block with its picture: square picture left, text right with
   the heading on top; on phones the picture sits above the text. */
.rwk-desc__section.has-media {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 1.5rem;
	align-items: start;
}

.rwk-desc__media {
	margin: 0;
	aspect-ratio: 1 / 1;
	border-radius: 20px;
	background: var(--background-light);
	overflow: hidden;
}

.rwk-desc__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.rwk-desc__body > :last-child {
	margin-bottom: 0;
}

@media (max-width: 600px) {
	.rwk-desc__section.has-media {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
	}

	.rwk-desc__media {
		max-width: 360px;
	}
}

/* Review mode only (the server leaves these out otherwise). */
.rwk-desc__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	border: 2px dashed var(--border);
	background: transparent;
	text-align: center;
}

.rwk-desc__placeholder figcaption {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	color: var(--text-muted);
	font-size: 0.8rem;
}

.rwk-desc__placeholder-note,
.rwk-desc__review {
	color: #c00000;
	font-weight: 600;
}

.rwk-desc__review {
	margin: -0.5rem 0 1.5rem;
	padding: 0.75rem 1rem;
	border: 2px solid #c00000;
	border-radius: var(--rwk-radius-sm);
	font-size: 0.85rem;
}

.rwk-desc__review-title {
	margin: 0 0 0.4rem;
}

.rwk-desc__review ul {
	margin: 0 0 0 1.1rem;
	padding: 0;
}

.rwk-desc__notice {
	font-size: 0.78rem;
	color: var(--text-muted);
}

/* Completeness report, administrators only. */
.rwk-desc-report {
	margin: 2rem 0;
	padding: 0.75rem 1rem;
	border: 1px dashed var(--border);
	border-radius: var(--rwk-radius-sm);
	font-size: 0.8rem;
}

.rwk-desc-report summary {
	cursor: pointer;
	font-weight: 600;
}

.rwk-desc-report pre {
	margin: 0.75rem 0 0;
	white-space: pre-wrap;
	font-size: 0.75rem;
	background: transparent;
	padding: 0;
}

/* ---- Info panels ("mehr erfahren", GenerateBlocks overlays) ----
   Typography of the panel content delivered per group (rwk-info-{group}).
   Scoped to the overlay content; tokens only, so dark mode follows. */
.gb-overlay__content h2 {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.gb-overlay__content h3 {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* "Geht mit / Geht nicht mit" under an option. */
.gb-overlay__content .rwk-info-kombi {
	margin-top: 4px;
	color: var(--text-muted);
	font-size: 14px;
}

.gb-overlay__content .rwk-info-netto {
	color: var(--text-muted);
	font-size: 14px;
}

/* Review mode (RW Konfig → Einstellungen → Abstimmungsmodus): questions to
   Junisis in red and frames for pictures still to come. Hidden unless the
   body carries .rwk-abstimmung, so they never show on the live site. */
.rwk-info-frage,
.rwk-info-platzhalter {
	display: none;
}

.rwk-abstimmung .rwk-info-frage {
	display: block;
	color: #c00000;
	font-weight: 600;
}

.rwk-abstimmung .rwk-info-platzhalter {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
	aspect-ratio: 4 / 3;
	max-width: 480px;
	margin: 0 0 1em;
	padding: 1em;
	border: 2px dashed var(--border);
	border-radius: 20px;
	color: var(--text-muted);
	font-size: 14px;
	text-align: center;
}

.rwk-abstimmung .rwk-info-platzhalter::after {
	content: "fehlt noch, liefert Junisis";
	color: #c00000;
	font-weight: 600;
}

/* Tables: full width, row lines only; on narrow screens they scroll in
   their own box instead of widening the panel. */
.gb-overlay__content .wp-block-table {
	margin: 0 0 1.5em;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.gb-overlay__content .wp-block-table table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

.gb-overlay__content .wp-block-table th,
.gb-overlay__content .wp-block-table td {
	padding: 0.5em 0.75em 0.5em 0;
	border: 0;
	border-bottom: 1px solid var(--border-light);
	text-align: left;
	vertical-align: top;
}

.gb-overlay__content .wp-block-table thead th {
	font-size: 14px;
	font-weight: 700;
}

.gb-overlay__content .wp-block-table thead {
	border: 0;
}

/* ---- Notice under a card whose pick changed other groups ---- */
.rwk-card__adjusted {
	margin: 0.4rem 0 0;
	color: var(--accent-dark);
	font-size: 0.85rem;
	line-height: 1.4;
}

/* ---- Product heading: configurator name small, model name as the title ---- */
.rwk-product-kicker {
	margin: 0 0 0.25rem;
	color: var(--text-muted);
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.3;
}