/*
 * Produktseite (Patterns nextamed/produkt-detail, produkt-auswahlhilfe, produkt-beschreibung,
 * produkt-sicherheit, produkt-bestellhinweis): Layout und Formulargestaltung, die theme.json nicht
 * abbilden kann. Geladen ueber wp_enqueue_block_style('core/group') in functions.php, also auf jeder
 * Seite mit Group-Block; deshalb ist jede Regel auf .nxm-pdp, .nxm-kaufleiste, .nxm-produkt-details
 * oder .nxm-produkt-sicherheit eingegrenzt. Mobile first: ohne Media Query gilt die Handy-Reihenfolge
 * aus dem Pattern (Kopf, Galerie, Kaufbox), ab 782 px ein Raster mit Galerie links und Kaufbox rechts.
 *
 * Spezifitaet (gemessen im Browser, nicht geschaetzt): Wo nur Global Styles konkurrieren, steht
 * :root :where(...) mit Spezifitaet 0 bis (0,1,0). Das Kaufformular, die Reiter und die Mengenauswahl
 * bringen eigenes Plugin-CSS mit, das hoeher liegt; die betroffenen Regeln tragen deshalb echte
 * Klassen vor dem Ziel:
 *   :root :where(.wp-block-woocommerce-product-stock-indicator)            (0,1,0)  Global Styles (theme.json)
 *   :root :where(.wp-block-woocommerce-gzd-product-unit-price)             (0,1,0)  Global Styles (theme.json)
 *   .wc-block-components-product-stock-indicator                           (0,1,0)  woocommerce blocks
 *   p.stock                                                                (0,1,1)  woocommerce.css
 *   .wp-block-buttons > .wp-block-button                                   (0,2,0)  wp-block-library
 *   :where(.wc-block-product-gallery) .wc-block-next-previous-buttons.wc-block-next-previous-buttons
 *                                                                          (0,2,0)  product-gallery-style.css
 *   .woocommerce table.variations tr td select                             (0,2,4)  woocommerce-blocktheme.css
 *   .woocommerce div.product form.cart .variations select                  (0,4,3)  woocommerce.css
 *   .woocommerce div.product .woocommerce-tabs ul.tabs li a                (0,4,4)  woocommerce.css
 *   div.wc-block-add-to-cart-form--stepper … input.input-text.qty.text     (0,7,1)  add-to-cart-form-style.css
 * Die Gegenregeln hier liegen jeweils genau eine Klasse darueber. Nie !important, nie global in style.css.
 * Wichtig: Wo theme.json denselben Block trifft (Bestandshinweis, Germanized-Pflichtangaben), reicht
 * :root :where(...) nicht, weil beide bei (0,1,0) liegen und die Global Styles spaeter im Dokument
 * stehen; diese Regeln tragen deshalb .wp-site-blocks und die Kontextklasse vor dem Ziel.
 *
 * Zustaende ohne JavaScript: Die Hinweise (Variante waehlen, nicht lieferbar, nur auf Anfrage) stehen
 * als Bloecke im Pattern und werden ueber :has() nach dem Markup ein- oder ausgeblendet, das
 * WooCommerce liefert (form.variations_form, p.stock.out-of-stock, .woocommerce-variation-add-to-cart-enabled
 * und am Warenkorbknopf .wc-variation-selection-needed bzw. .wc-variation-is-unavailable; die beiden
 * letzten setzt add-to-cart-variation.js, Zeilen 130 bis 175). :has() darf nicht in :has() stecken;
 * deshalb pruefen die Regeln fuer die Kaufleiste den Zustand an .nxm-pdp selbst und nicht ueber eine
 * zweite Ebene. Browser ohne :has() (vor 2024) zeigen die Seite ohne diese Hinweise.
 */

:root :where(.nxm-pdp) {
  --nxm-pdp-gap: var(--wp--preset--spacing--50);
}

/* Platz unter dem letzten Block, damit die feste Kaufleiste den Fuss nicht verdeckt. Greift nur auf
   der Produktseite (einzige Seite mit .nxm-kaufleiste) und nur auf dem Handy. Ohne :where(), weil
   .wp-site-blocks aus den Global Styles (0,1,0) sonst gewinnt; mit :has() liegt die Regel bei (0,2,0).
   5 rem = 80 px: die Leiste traegt seit dem 05.10.2026 nur noch den Knopf und ist 65 px hoch. */
.wp-site-blocks:has(.nxm-kaufleiste) {
  padding-bottom: 5rem;
}

:root :where(.nxm-pdp__kopf .wp-block-post-terms a) {
  color: var(--wp--preset--color--muted);
  text-decoration: none;
}

:root :where(.nxm-pdp .wc-block-product-gallery-large-image img) {
  background: var(--wp--preset--color--base);
  object-fit: contain;
}

/* Galerie am Handy bedienbar halten. WooCommerce blendet die Pfeile "Vorheriges Bild" und
   "Naechstes Bild" unter 601 px aus (product-gallery-style.css, @media max-width: 600px,
   Selektor bei (0,2,0)); uebrig blieb nur Wischen, ohne jedes sichtbare Bedienelement.
   Gemessen bei MeineBase (10 Bilder, 390 px): Miniaturenstreifen 350 px breit, Inhalt 763 px,
   also fuenf von zehn Miniaturen erreichbar. Deshalb: Pfeile bleiben sichtbar als 44-px-Ziele,
   der Streifen rastet je Miniatur ein und zeigt einen schmalen Rollbalken. */
.wp-site-blocks .nxm-pdp .wc-block-next-previous-buttons.wc-block-next-previous-buttons {
  display: flex;
}

:root :where(.nxm-pdp .wc-block-next-previous-buttons__button) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--wp--custom--touch--min-size);
  height: var(--wp--custom--touch--min-size);
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
}

:root :where(.nxm-pdp .wc-block-next-previous-buttons__button:focus-visible) {
  outline: 3px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}

/* Rollbalken sichtbar machen (WooCommerce setzt scrollbar-width: none): gilt fuer die waagerechte
   Reihe am Handy und die senkrechte Spalte ab 601 px. */
:root :where(.nxm-pdp .wc-block-product-gallery-thumbnails__scrollable) {
  scrollbar-width: thin;
  scrollbar-color: var(--wp--preset--color--line-strong) var(--wp--preset--color--surface);
}

/* Einrasten nur, solange die Reihe waagerecht laeuft; ab 601 px stellt WooCommerce sie senkrecht
   (product-gallery-style.css, @media min-width: 601px, flex-direction: column). */
@media (max-width: 600px) {
  :root :where(.nxm-pdp .wc-block-product-gallery-thumbnails__scrollable) {
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--wp--preset--spacing--10);
  }

  :root :where(.nxm-pdp .wc-block-product-gallery-thumbnails__thumbnail) {
    scroll-snap-align: start;
  }
}

/* Preisblock: Preis, Grundpreis, Steuer, Versand, Verfuegbarkeit, Lieferzeit */
:root :where(.nxm-pdp__preis .wp-block-woocommerce-product-price) {
  line-height: 1.15;
}

/* Bestandshinweis: die wichtigste Einschraenkung in Grundtextgroesse. theme.json setzt den Block auf
   small und warning mit (0,1,0) und stand vorher spaeter im Dokument (gemessen: 14,08 px, warning
   auch bei "Noch 2 vorraetig"); deshalb .wp-site-blocks und .nxm-pdp__preis vor dem Ziel (0,3,0). */
.wp-site-blocks .nxm-pdp__preis .wc-block-components-product-stock-indicator {
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
}

.wp-site-blocks .nxm-pdp__preis .wc-block-components-product-stock-indicator--out-of-stock {
  color: var(--wp--preset--color--warning);
}

.wp-site-blocks .nxm-pdp__preis .wc-block-components-product-stock-indicator--in-stock,
.wp-site-blocks .nxm-pdp__preis .wc-block-components-product-stock-indicator--available-on-backorder {
  color: var(--wp--preset--color--primary-dark);
}

/* Germanized-Pflichtangaben im Preisblock (Grundpreis, Steuer- und Versandhinweis, Lieferzeit):
   theme.json fuehrt sie auf small, und zwar am inneren Knoten, den Germanized ueber "selectors"
   anmeldet: :root :where(.wp-block-woocommerce-gzd-product-tax-info .wc-gzd-block-components-product-tax-info)
   bei (0,2,0) (gemessen im ausgelieferten Global-Styles-Block; der aeussere Knoten trug 16,16 px,
   der sichtbare Text 14,08 px). Am Artikel selbst sind das die Angaben, die ein Kunde ab 40 vor dem
   Kauf liest; hier deshalb Grundtextgroesse, mit vier Klassen vor dem Ziel (0,4,0). In der Kaufleiste
   bleiben sie klein, weil die Leiste sonst ein Viertel des Handybildschirms belegt; dort sind sie
   die Zweitanzeige derselben Angaben. */
.wp-site-blocks .nxm-pdp .nxm-pdp__preis .wc-gzd-block-components-product-unit-price,
.wp-site-blocks .nxm-pdp .nxm-pdp__preis .wc-gzd-block-components-product-tax-info,
.wp-site-blocks .nxm-pdp .nxm-pdp__preis .wc-gzd-block-components-product-shipping-costs-info,
.wp-site-blocks .nxm-pdp .nxm-pdp__preis .wc-gzd-block-components-product-delivery-time {
  font-size: var(--wp--preset--font-size--medium);
}

/* Ohne Text belegt der Block keinen Abstand: vorraetig ohne Bestandsverwaltung liefert WooCommerce
   keinen Block, beim variablen Produkt ein leeres div (Text kaeme nur vom Beta-Block). */
:root :where(.nxm-pdp__preis .wp-block-woocommerce-product-stock-indicator:empty) {
  display: none;
}

/* Nur auf Anfrage: ohne Preis bleibt die Preisflaeche leer und wird nicht gezeigt (sonst stuende
   ein leerer gruener Kasten ueber der Kurzbeschreibung). Erkennungsmerkmal ist der Preisbetrag,
   den WooCommerce als .woocommerce-Price-amount ausgibt. */
:root :where(.nxm-pdp__preis:not(:has(.woocommerce-Price-amount))) {
  display: none;
}

/* Menge: sichtbares Wort direkt vor dem Feld. Nur beim einfachen Produkt, denn beim variablen
   Produkt liegt das Mengenfeld im Formular hinter den Auswahlfeldern (WooCommerce baut
   .single_variation_wrap > .woocommerce-variation-add-to-cart), und ein Block aus dem Pattern kann
   nicht zwischen die Formularteile. Dort nennt der Hinweis .nxm-pdp__hinweis--wahl die Menge im
   Satz; ein sichtbares Feldlabel braucht einen Filter im mu-plugin (Wunsch, siehe docs/design/produkt.md). */
:root :where(.nxm-pdp__menge) {
  display: none;
  margin-bottom: calc(-1 * var(--wp--preset--spacing--20));
}

:root :where(.nxm-pdp__kaufen:not(:has(form.variations_form)):has(form.cart) .nxm-pdp__menge) {
  display: block;
}

/* Kaufformular: WooCommerce legt form.cart und .variations_button als Raster mit
   grid-template-columns: min-content auto auto aus (add-to-cart-form-style.css, (0,2,0)); hier
   stattdessen ein Flex-Fluss. Auf dem Handy faellt der Knopf in die naechste Zeile und nimmt die
   volle Breite (ein Hauptknopf, kein Umbruch in der Aufschrift), ab 782 px steht er neben der Menge. */
.wp-site-blocks .nxm-pdp .nxm-pdp__kaufen form.cart,
.wp-site-blocks .nxm-pdp .nxm-pdp__kaufen .variations_button,
.wp-site-blocks .nxm-pdp .nxm-pdp__kaufen .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  margin: 0;
}

.wp-site-blocks .nxm-pdp .nxm-pdp__kaufen form.cart > .variations,
.wp-site-blocks .nxm-pdp .nxm-pdp__kaufen form.cart > .single_variation_wrap {
  flex: 1 1 100%;
  min-width: 0;
}

:root :where(.nxm-pdp__kaufen .single_variation:not(:empty)) {
  margin-bottom: var(--wp--preset--spacing--30);
}

/* Vor der Wahl ist der Kasten fuer Variantenpreis und Verfuegbarkeit leer und soll keine Luecke
   zwischen Auswahlfeld und Knopf lassen. */
:root :where(.nxm-pdp__kaufen .single_variation:empty) {
  display: none;
}

.wp-site-blocks .nxm-pdp .nxm-pdp__kaufen form.cart button.single_add_to_cart_button {
  flex: 1 1 100%;
  width: auto;
  min-height: var(--wp--custom--button--min-height);
  margin: 0;
  text-align: center;
  white-space: normal;
}

/* Nicht ausloesbarer Knopf: WooCommerce setzt nur die Klasse .disabled (das Element bleibt
   klickbar, jQuery faengt den Klick), deshalb beide Faelle grau statt halbtransparent gruen. */
.wp-site-blocks .nxm-pdp .nxm-pdp__kaufen form.cart button.single_add_to_cart_button.disabled,
.wp-site-blocks .nxm-pdp .nxm-pdp__kaufen form.cart button.single_add_to_cart_button:disabled {
  opacity: 1;
  background-color: var(--wp--preset--color--surface-2);
  color: var(--wp--preset--color--muted);
  cursor: not-allowed;
}

/* Menge: 48 px hohes Ziel, Grundtextgroesse, kraeftiger Rahmen. */
.wp-site-blocks .nxm-pdp .nxm-pdp__kaufen .quantity {
  display: inline-flex;
  align-items: stretch;
  margin: 0;
  min-height: var(--wp--custom--button--min-height);
}

.wp-site-blocks .nxm-pdp .nxm-pdp__kaufen .quantity .qty {
  width: 3.5rem;
  min-width: 3.5rem;
  margin: 0;
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--wp--custom--radius--small);
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  text-align: center;
}

.wp-site-blocks .nxm-pdp .nxm-pdp__kaufen .quantity .qty:focus-visible {
  outline: 3px solid var(--wp--preset--color--primary);
  outline-offset: -3px;
  box-shadow: none;
}

/* Stepper (quantitySelectorStyle stepper): Minus, Zahl, Plus als 48-px-Ziele in einem Rahmen.
   Schrift und Innenabstand des Feldes kommen aus add-to-cart-form-style.css mit (0,7,1). */
.wp-site-blocks .nxm-pdp .nxm-pdp__kaufen .wc-block-components-quantity-selector {
  width: auto;
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--wp--custom--radius--small);
  background: var(--wp--preset--color--base);
}

.wp-site-blocks .nxm-pdp .nxm-pdp__kaufen div.wc-block-add-to-cart-form .wc-block-components-quantity-selector input.input-text.qty.text {
  min-height: var(--wp--custom--button--min-height);
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.2;
}

.wp-site-blocks .nxm-pdp .nxm-pdp__kaufen .wc-block-components-quantity-selector__button {
  min-width: var(--wp--custom--button--min-height);
  min-height: var(--wp--custom--button--min-height);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--contrast);
  font-size: var(--wp--preset--font-size--large);
  line-height: 1;
  opacity: 1;
  cursor: pointer;
}

.wp-site-blocks .nxm-pdp .nxm-pdp__kaufen .wc-block-components-quantity-selector__button:hover {
  background: var(--wp--preset--color--surface);
}

.wp-site-blocks .nxm-pdp .nxm-pdp__kaufen .wc-block-components-quantity-selector__button:focus-visible {
  outline: 3px solid var(--wp--preset--color--primary);
  outline-offset: -3px;
  box-shadow: none;
}

/* Variantenauswahl: WooCommerce liefert eine Tabelle (Label links, Feld rechts). Hier als Liste:
   Label ueber dem Feld, Feld volle Breite, 48 px hoch, Grundtextgroesse, Rahmen 3:1. */
.wp-site-blocks .nxm-pdp .nxm-pdp__kaufen form.cart table.variations,
.wp-site-blocks .nxm-pdp .nxm-pdp__kaufen form.cart table.variations tbody,
.wp-site-blocks .nxm-pdp .nxm-pdp__kaufen form.cart table.variations tr,
.wp-site-blocks .nxm-pdp .nxm-pdp__kaufen form.cart table.variations th,
.wp-site-blocks .nxm-pdp .nxm-pdp__kaufen form.cart table.variations td {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: left;
  box-sizing: border-box;
}

.wp-site-blocks .nxm-pdp .nxm-pdp__kaufen form.cart table.variations tr + tr {
  margin-top: var(--wp--preset--spacing--30);
}

.wp-site-blocks .nxm-pdp .nxm-pdp__kaufen form.cart table.variations th label {
  display: block;
  margin: 0 0 var(--wp--preset--spacing--10);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  line-height: 1.4;
}

.wp-site-blocks .nxm-pdp .nxm-pdp__kaufen form.cart table.variations td select {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: var(--wp--custom--button--min-height);
  margin: 0;
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50) var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--wp--custom--radius--small);
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.4;
  cursor: pointer;
}

.wp-site-blocks .nxm-pdp .nxm-pdp__kaufen form.cart table.variations td select:focus-visible {
  outline: 3px solid var(--wp--preset--color--primary);
  outline-offset: -3px;
}

.wp-site-blocks .nxm-pdp .nxm-pdp__kaufen form.cart .reset_variations {
  display: inline-block;
  margin-top: var(--wp--preset--spacing--20);
  padding: var(--wp--preset--spacing--10) 0;
  font-size: var(--wp--preset--font-size--small);
}

/* Verfuegbarkeit der gewaehlten Variante (WooCommerce-Text im Formular). p.stock {font-size: .92em}
   aus woocommerce.css liegt bei (0,1,1) und gewann gegen :where() (gemessen 14,87 px); die Regel
   traegt deshalb .wp-site-blocks und .nxm-pdp__kaufen vor dem Ziel (0,3,1). */
.wp-site-blocks .nxm-pdp__kaufen .woocommerce-variation p.stock {
  margin: 0 0 var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
}

.wp-site-blocks .nxm-pdp__kaufen .woocommerce-variation p.stock.out-of-stock {
  color: var(--wp--preset--color--warning);
}

.wp-site-blocks .nxm-pdp__kaufen .woocommerce-variation p.stock.in-stock,
.wp-site-blocks .nxm-pdp__kaufen .woocommerce-variation p.stock.available-on-backorder {
  color: var(--wp--preset--color--primary-dark);
}

:root :where(.nxm-pdp__kaufen .woocommerce-variation-description p) {
  margin: 0 0 var(--wp--preset--spacing--20);
}

/* Einfaches Produkt ohne Vorrat: WooCommerce gibt statt des Formulars nur "Nicht vorraetig" aus.
   Der Zustand steht schon im Preisblock (product-stock-indicator), der Hinweiskasten erklaert ihn. */
:root :where(.nxm-pdp__kaufen > .wp-block-woocommerce-add-to-cart-form > p.stock) {
  display: none;
}

/* Hinweise je Zustand: alle unsichtbar, sichtbar nur der passende. */
:root :where(.nxm-pdp__hinweis) {
  display: none;
}

/* Anleitung am variablen Produkt: dauerhaft sichtbar, solange es etwas zu waehlen gibt. Sie ersetzt
   die Rueckmeldung, die WooCommerce nur als Browser-Warnfenster gibt, wenn jemand den grauen Knopf
   antippt, und nennt auch das Mengenfeld (das im Formular kein sichtbares Label hat).
   Nicht beim vollstaendig nicht lieferbaren Artikel, dort erklaert der Kasten darunter den Zustand. */
:root :where(.nxm-pdp__kaufen:has(form.variations_form):not(:has(form.variations_form > p.stock.out-of-stock)) .nxm-pdp__hinweis--wahl) {
  display: block;
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
  border-left: 3px solid var(--wp--preset--color--primary);
  background: var(--wp--preset--color--surface);
}

/* Gewaehlte Ausfuehrung nicht kaufbar: add-to-cart-variation.js setzt am Warenkorbknopf
   .wc-variation-is-unavailable (Zeile 169). Derselbe Zustand blendet unten das Formularende aus. */
:root :where(.nxm-pdp__kaufen:has(.single_add_to_cart_button.wc-variation-is-unavailable) .nxm-pdp__hinweis--variante) {
  display: block;
}

/* Produkt nicht lieferbar (einfaches Produkt oder alle Varianten). */
:root :where(.nxm-pdp__kaufen:has(.wp-block-woocommerce-add-to-cart-form > p.stock.out-of-stock) .nxm-pdp__hinweis--ausverkauft),
:root :where(.nxm-pdp__kaufen:has(form.variations_form > p.stock.out-of-stock) .nxm-pdp__hinweis--ausverkauft) {
  display: block;
}

/* Ist die gewaehlte Ausfuehrung nicht kaufbar, verschwindet das Formularende (Menge und der nicht
   ausloesbare Warenkorbknopf). Sonst waere das groesste Element der Sicht ein grauer Knopf, der
   nichts tut; der gefuellte Hauptknopf ist dann "Liefertermin anfragen" im Kasten darunter.
   Der Verfuegbarkeitstext der Variante steht in .single_variation und bleibt sichtbar. */
.wp-site-blocks .nxm-pdp .nxm-pdp__kaufen:has(.single_add_to_cart_button.wc-variation-is-unavailable) .woocommerce-variation-add-to-cart {
  display: none;
}

/* Nur auf Anfrage: kein Kaufformular und kein Bestandstext (Produkt ohne Preis). */
:root :where(.nxm-pdp__kaufen:not(:has(form.cart)):not(:has(p.stock)) .nxm-pdp__hinweis--anfrage) {
  display: block;
}

/* Auswahlhilfe (Pattern produkt-auswahlhilfe): im Kaufbereich nur bei einem Auswahlfeld "Haertegrad".
   Allein gesetzt (und im Snapshot des Bausteins) ist sie sichtbar; bis zum 05.10.2026 war sie ohne
   Kaufbereich immer verborgen und ihr Referenzbild eine weisse Flaeche. Browser ohne :has() zeigen
   sie im Kaufbereich nicht. */
:root :where(.nxm-pdp__kaufen .nxm-pdp__auswahlhilfe) {
  display: none;
}

:root :where(.nxm-pdp__kaufen:has(select[name*="haertegrad"]) .nxm-pdp__auswahlhilfe) {
  display: block;
}

/* Knopf in der Kaufleiste als Umriss, damit je Sicht nur ein gefuellter Hauptknopf steht (der in der
   Kaufbox). Vor .wp-block-button__link steht .wp-site-blocks, weil elements.button aus theme.json
   sonst gewinnt. Nur fuer die Leiste; eine allgemeine Knopfsprache "Umriss" gehoert als Variation
   nach styles/ (Wunsch, siehe docs/design/produkt.md), nicht in eine Seiten-CSS. */
.wp-site-blocks .nxm-kaufleiste .wp-block-button__link {
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--primary-dark);
  border: 1px solid var(--wp--preset--color--primary-dark);
}

.wp-site-blocks .nxm-kaufleiste .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--primary-soft);
  color: var(--wp--preset--color--primary-deep);
}

/* Servicezeile und Metazeile: Listen ohne Einzug, Links als 44-px-Ziele. */
:root :where(.nxm-pdp__service) {
  margin: 0;
  padding-left: 1.25rem;
}

:root :where(.nxm-pdp__service li + li) {
  margin-top: var(--wp--preset--spacing--20);
}

/* Links in Servicezeile und Metazeile: sie stehen im Fliesstext (Ausnahme fuer Inline-Links in
   WCAG 2.2, 2.5.8), bekommen aber Luft nach oben und unten, damit sie mit dem Finger zu treffen sind:
   Metazeile 39 px, Servicezeile 25 px (gemessen bei 390 px). */
:root :where(.nxm-pdp__meta a) {
  display: inline-block;
  padding-top: var(--wp--preset--spacing--20);
  padding-bottom: var(--wp--preset--spacing--20);
}

:root :where(.nxm-pdp__service a) {
  display: inline-block;
  padding-top: var(--wp--preset--spacing--10);
  padding-bottom: var(--wp--preset--spacing--10);
}

/* Kaufleiste: nur auf dem Handy, ohne JavaScript. Sie traegt nur den Knopf des jeweiligen Zustands,
   keinen Preis mehr (Betreiber 05.10.2026: Preis, Grundpreis, Steuer- und Versandhinweis standen
   doppelt auf der Seite); die Preisangaben stehen vollstaendig im Preisblock der Kaufbox.
   .wp-site-blocks davor, weil die Layout-Klasse .is-layout-flex (display: flex) sonst gewinnt. */
.wp-site-blocks .nxm-kaufleiste {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  box-shadow: var(--wp--preset--shadow--overlay);
}

/* Der Knopf fuellt die Leiste: Liste, Kasten und Knopf wachsen gemeinsam (der Kasten .wp-block-button
   bliebe sonst inhaltsbreit). */
.wp-site-blocks .nxm-kaufleiste .wp-block-buttons,
.wp-site-blocks .nxm-kaufleiste .wp-block-button {
  flex: 1 1 100%;
}

.wp-site-blocks .nxm-kaufleiste .wp-block-button__link {
  display: block;
  width: 100%;
  white-space: nowrap;
}

/* Die Leiste ist die Abkuerzung zum Kaufbereich und steht von Anfang an (Betreiber 05.10.2026,
   zweite Abnahme: "Von Anfang an zeigen, nur den Knopf"). Auf dem Handy liegt der Kaufbereich unter
   Galerie und Preis (gemessen auf Staging in 390 x 844: ab y = 1187); ohne Leiste stuende im ersten
   Bild kein Kaufknopf.
   Solange der Kaufbereich (#kaufen) selbst im Bild ist, waere die Leiste eine Dopplung. Wo der Browser
   Scroll-Zeitleisten kennt, gleitet sie deshalb hinaus, sobald der Kaufbereich von unten ins Bild
   kommt, und kehrt zurueck, wenn er oben hinausgerollt ist. Die Schluesselbilder nennen die Bereiche
   der Zeitleiste selbst (entry, exit); davor und danach gilt durch "both" das erste und das letzte
   Bild, also sichtbar. visibility nimmt den Knopf aus der Tastenfolge, solange die Leiste draussen
   ist. Browser ohne diese Technik zeigen die Leiste dauerhaft. */
@supports (animation-timeline: view()) {
  .wp-site-blocks .nxm-pdp {
    timeline-scope: --nxm-kaufen;
  }

  .wp-site-blocks .nxm-pdp__kaufen {
    view-timeline: --nxm-kaufen block;
  }

  .wp-site-blocks .nxm-kaufleiste {
    animation: nxm-kaufleiste-ausweichen linear both;
    animation-timeline: --nxm-kaufen;
  }

  @keyframes nxm-kaufleiste-ausweichen {
    entry 0% {
      visibility: visible;
      transform: none;
    }

    entry 40% {
      visibility: hidden;
      transform: translateY(100%);
    }

    exit 60% {
      visibility: hidden;
      transform: translateY(100%);
    }

    exit 100% {
      visibility: visible;
      transform: none;
    }
  }
}

/* Ein Knopf je Zustand, und jeder sagt, was er tut: "Zur Auswahl" springt zum Kaufbereich
   (#kaufen), "Liefertermin anfragen" und "Anfrage senden" fuehren auf die Kontaktseite, mit
   demselben Wortlaut wie der Knopf im Kasten. .wp-site-blocks .nxm-kaufleiste davor, weil
   .wp-block-buttons > .wp-block-button (0,2,0) aus wp-block-library sonst gewinnt. */
.wp-site-blocks .nxm-kaufleiste .nxm-kaufleiste__termin,
.wp-site-blocks .nxm-kaufleiste .nxm-kaufleiste__anfrage {
  display: none;
}

/* Nicht lieferbar (Artikel oder gewaehlte Ausfuehrung): die Leiste fragt den Liefertermin an.
   Der Zustand wird an .nxm-pdp selbst geprueft, weil :has() nicht in :has() stehen darf. */
.wp-site-blocks .nxm-pdp:has(p.stock.out-of-stock) .nxm-kaufleiste .nxm-kaufleiste__auswahl,
.wp-site-blocks .nxm-pdp:has(.single_add_to_cart_button.wc-variation-is-unavailable) .nxm-kaufleiste .nxm-kaufleiste__auswahl {
  display: none;
}

.wp-site-blocks .nxm-pdp:has(p.stock.out-of-stock) .nxm-kaufleiste .nxm-kaufleiste__termin,
.wp-site-blocks .nxm-pdp:has(.single_add_to_cart_button.wc-variation-is-unavailable) .nxm-kaufleiste .nxm-kaufleiste__termin {
  display: block;
}

/* Nur auf Anfrage: kein Kaufformular und kein Bestandstext. */
.wp-site-blocks .nxm-pdp:not(:has(form.cart)):not(:has(p.stock)) .nxm-kaufleiste .nxm-kaufleiste__auswahl {
  display: none;
}

.wp-site-blocks .nxm-pdp:not(:has(form.cart)):not(:has(p.stock)) .nxm-kaufleiste .nxm-kaufleiste__anfrage {
  display: block;
}

/* Hinweise ueber dem Produkt (store-notices): ohne Inhalt kein Abstand. */
:root :where(.wc-block-store-notices:not(:has(*))) {
  display: none;
}

/* Produktdetails (Beschreibung, Zusatzinformationen, Produktsicherheit, Rezensionen): WooCommerce-Reiter.
   Handy: Reiter untereinander mit Markierung links; gemessen 60 px hoch (Desktop 63 px), also ueber
   dem 44-px-Ziel; ab 782 px in einer Zeile.
   .woocommerce div.product .woocommerce-tabs ul.tabs li a liegt bei (0,4,4), die Gegenregel eine Klasse hoeher. */
.wp-site-blocks .nxm-produkt-details .woocommerce-tabs.wc-tabs-wrapper ul.tabs {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--10);
  margin: 0 0 var(--wp--preset--spacing--40);
  padding: 0;
  border: 0;
  list-style: none;
}

.wp-site-blocks .nxm-produkt-details .woocommerce-tabs.wc-tabs-wrapper ul.tabs::before,
.wp-site-blocks .nxm-produkt-details .woocommerce-tabs.wc-tabs-wrapper ul.tabs::after,
.wp-site-blocks .nxm-produkt-details .woocommerce-tabs.wc-tabs-wrapper ul.tabs li::before,
.wp-site-blocks .nxm-produkt-details .woocommerce-tabs.wc-tabs-wrapper ul.tabs li::after {
  display: none;
}

.wp-site-blocks .nxm-produkt-details .woocommerce-tabs.wc-tabs-wrapper ul.tabs li {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.wp-site-blocks .nxm-produkt-details .woocommerce-tabs.wc-tabs-wrapper ul.tabs li a {
  display: block;
  min-height: var(--wp--custom--touch--min-size);
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
  border-left: 3px solid var(--wp--preset--color--line);
  color: var(--wp--preset--color--contrast);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  text-decoration: none;
}

.wp-site-blocks .nxm-produkt-details .woocommerce-tabs.wc-tabs-wrapper ul.tabs li.active a {
  border-left-color: var(--wp--preset--color--primary);
  background: var(--wp--preset--color--surface);
}

/* Panel: Fliesstext in Inhaltsbreite. Breite Tabellen aus den importierten Beschreibungen
   (Inline-Breiten in px und pt) werden eingepasst und notfalls im Panel gerollt. */
:root :where(.nxm-produkt-details .panel) {
  margin: 0;
  overflow-x: auto;
}

:root :where(.nxm-produkt-details .panel > h2:first-child) {
  margin-top: 0;
}

:root :where(.nxm-produkt-details .panel table) {
  max-width: 100%;
  height: auto;
  border-collapse: collapse;
}

:root :where(.nxm-produkt-details .panel table td),
:root :where(.nxm-produkt-details .panel table th) {
  max-width: 100%;
  height: auto;
  padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--medium);
  vertical-align: top;
}

:root :where(.nxm-produkt-details .panel img) {
  max-width: 100%;
  height: auto;
}

/* Hersteller und Produktsicherheit: ohne Angaben bleibt der Abschnitt samt Ueberschrift unsichtbar. */
:root :where(.nxm-produkt-sicherheit:not(:has([data-block-name^="woocommerce-germanized/"]:not(.wp-block-woocommerce-gzd-product-is-empty)))) {
  display: none;
}

@media (min-width: 782px) {
  .wp-site-blocks:has(.nxm-kaufleiste) {
    padding-bottom: var(--wp--style--root--padding-bottom);
  }

  :root :where(.nxm-pdp) {
    display: grid;
    grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
    column-gap: var(--nxm-pdp-gap);
    row-gap: var(--wp--preset--spacing--30);
    align-items: start;
  }

  :root :where(.nxm-pdp > *) {
    margin-block: 0;
  }

  :root :where(.nxm-pdp__galerie) {
    grid-column: 1;
    grid-row: 1 / span 3;
    position: sticky;
    top: var(--wp--preset--spacing--40);
  }

  :root :where(.nxm-pdp__kopf),
  :root :where(.nxm-pdp__kaufbox) {
    grid-column: 2;
  }

  .wp-site-blocks .nxm-pdp .nxm-pdp__kaufen form.cart button.single_add_to_cart_button {
    flex: 1 1 12rem;
  }

  .wp-site-blocks .nxm-kaufleiste {
    display: none;
  }

  .wp-site-blocks .nxm-produkt-details .woocommerce-tabs.wc-tabs-wrapper ul.tabs {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--20);
    border-bottom: 1px solid var(--wp--preset--color--line);
  }

  .wp-site-blocks .nxm-produkt-details .woocommerce-tabs.wc-tabs-wrapper ul.tabs li a {
    margin-bottom: -1px;
    border-left: 0;
    border-bottom: 3px solid transparent;
  }

  .wp-site-blocks .nxm-produkt-details .woocommerce-tabs.wc-tabs-wrapper ul.tabs li.active a {
    border-bottom-color: var(--wp--preset--color--primary);
    background: transparent;
  }
}

/* Aufklappbare Abschnitte der Produktseite (core/details, Pattern produkt-beschreibung).
   Die Zusammenfassung ist das Klickziel: volle Breite, mindestens touch.minSize hoch, mit Linie
   darunter und einem Pfeil, der sich dreht. Ohne Inhalt verschwindet der ganze Abschnitt; das
   betrifft "Hersteller und Produktsicherheit" bei Artikeln ohne Angaben. */
:root :where(.nxm-produkt-details .nxm-klapp) {
  border-bottom: 1px solid var(--wp--preset--color--line);
}

:root :where(.nxm-produkt-details .nxm-klapp > summary) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--20);
  min-height: var(--wp--custom--touch--min-size);
  padding-block: var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

:root :where(.nxm-produkt-details .nxm-klapp > summary)::-webkit-details-marker {
  display: none;
}

:root :where(.nxm-produkt-details .nxm-klapp > summary)::after {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  border-right: 2px solid var(--wp--preset--color--primary-dark);
  border-bottom: 2px solid var(--wp--preset--color--primary-dark);
  transform: rotate(45deg);
  transition: transform var(--wp--custom--transition);
  flex: none;
}

:root :where(.nxm-produkt-details .nxm-klapp[open] > summary)::after {
  transform: rotate(-135deg);
}

:root :where(.nxm-produkt-details .nxm-klapp > summary:hover) {
  color: var(--wp--preset--color--primary-dark);
}

:root :where(.nxm-produkt-details .nxm-klapp > *:not(summary)) {
  margin-block: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

/* Ohne Germanized-Angaben bleibt der Sicherheitsabschnitt leer: dann ganz ausblenden. */
.wp-site-blocks .nxm-klapp--sicherheit:not(:has(.wc-gzd-manufacturer-address)):not(:has(.wc-gzd-block-components-product-safety-instructions *)) {
  display: none;
}

/* Breite Tabellen aus dem Shopware-Import (Naehrwerte, Zutaten) scrollen in sich, nicht die Seite.
   Befund 14.09.2026 auf Produktion: Die Naehrwerttabelle von WurzelKraft (Excel-Auszeichnung mit
   Klassen xl69, xl71) ist 654 px breit; auf dem Handy mit 390 px lief damit die ganze Seite nach
   rechts. Die Regel macht den Tabellenkasten zum Rollbereich: innen bleibt die Tabelle so breit,
   wie sie sein muss, aussen ist sie hoechstens so breit wie der Text. Lesen kostet dann eine
   Wischbewegung auf der Tabelle, aber die Seite bleibt ruhig. Pseudo-Elemente stehen HINTER
   :where(), Tabellen gibt es hier keine anderen. */
:root :where(.nxm-produkt-details table),
:root :where(.nxm-klapp table) {
  display: block;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}

/* Bewertungen (Baustein produkt-bewertungen, Plan Runde 5 P6 Schritt 2). WooCommerce rendert die klassische
   Vorlage single-product-reviews.php; ihr CSS (woocommerce.css) rechnet mit einem Avatar links (50 px Einzug,
   Rahmen je Bewertung) und setzt die Sterne nach rechts. Hier: ohne Avatar (nxm-shop-texte), jede Bewertung
   als Abschnitt mit Linie darunter, Sterne in der Warnfarbe ueber dem Namen, Formular wie die
   Variantenauswahl (Label ueber dem Feld, volle Breite, 48 px hoch, Rahmen 3:1). Die Gegenregeln liegen eine
   Klasse ueber denen von WooCommerce (.woocommerce #reviews #comments ol.commentlist li .comment-text). */
:root :where(.nxm-bewertungen-echtheit) {
  margin: 0;
  padding: var(--wp--preset--spacing--30);
  border-radius: var(--wp--custom--radius--medium);
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.5;
}

/* Ueber #reviews: .woocommerce .woocommerce-Reviews .comment-reply-title (woocommerce-blocktheme.css) kommt spaeter und
   setzte sonst bei gleicher Spezifitaet 700. */
.wp-site-blocks .nxm-bewertungen #reviews .woocommerce-Reviews-title,
.wp-site-blocks .nxm-bewertungen #reviews .comment-reply-title {
  display: block;
  margin: 0 0 var(--wp--preset--spacing--30);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  line-height: 1.4;
}

.wp-site-blocks .nxm-bewertungen #reviews #comments ol.commentlist {
  margin: 0;
  padding: 0;
}

/* Linie und Abstand nur je Bewertung; eine Antwort des Shops (thread_comments) steht eingerueckt darunter, ohne eigene Linie. */
.wp-site-blocks .nxm-bewertungen #reviews #comments ol.commentlist > li {
  margin: 0;
  padding-block: var(--wp--preset--spacing--30);
  border-bottom: 1px solid var(--wp--preset--color--line);
}

.wp-site-blocks .nxm-bewertungen #reviews #comments ol.commentlist > li:first-child {
  padding-top: 0;
}

.wp-site-blocks .nxm-bewertungen #reviews #comments ol.commentlist ul.children {
  margin: var(--wp--preset--spacing--20) 0 0;
  padding-left: var(--wp--preset--spacing--30);
  border-left: 2px solid var(--wp--preset--color--line);
}

.wp-site-blocks .nxm-bewertungen #reviews #comments ol.commentlist ul.children li {
  margin: 0;
  padding: 0;
  border: 0;
}

.wp-site-blocks .nxm-bewertungen #reviews #comments ol.commentlist li .comment-text {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

.wp-site-blocks .nxm-bewertungen #reviews #comments ol.commentlist li .comment-text p {
  margin: 0 0 var(--wp--preset--spacing--20);
}

.wp-site-blocks .nxm-bewertungen #reviews #comments ol.commentlist li .comment-text p.meta {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--small);
}

.wp-site-blocks .nxm-bewertungen #reviews #comments ol.commentlist li .comment-text p.wc-gzd-review-authenticity-status {
  margin: 0;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--small);
}

.wp-site-blocks .nxm-bewertungen #reviews #comments ol.commentlist li .comment-text p.wc-gzd-review-authenticity-status.is-verified {
  color: var(--wp--preset--color--primary-dark);
  font-weight: 600;
}

.wp-site-blocks .nxm-bewertungen .woocommerce-review__author {
  color: var(--wp--preset--color--contrast);
  font-weight: 600;
}

/* Sterne: WooCommerce zeichnet sie mit seiner Symbolschrift ("sssss" leer, "SSSSS" voll), die ein
   statischer Snapshot nicht laedt (dort stuenden Buchstaben). Hier eine Sternform als Maske, eingefaerbt
   aus der Palette, je Stern 1,2em breit; die Breite des inneren span (Anteil der Bewertung, von
   WooCommerce gesetzt) schneidet die gefuellten Sterne genau an der Sterngrenze ab. Der Text im span
   ("Bewertet mit 5 von 5") bleibt fuer Screenreader, sichtbar abgeschnitten wie bei WooCommerce. */
.wp-site-blocks .nxm-bewertungen .star-rating {
  float: none;
  position: relative;
  width: 6em;
  height: 1.2em;
  margin: 0 0 var(--wp--preset--spacing--20);
  overflow: hidden;
  font-family: inherit;
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1;
}

.wp-site-blocks .nxm-bewertungen .star-rating span {
  height: 1.2em;
}

.wp-site-blocks .nxm-bewertungen .star-rating::before,
.wp-site-blocks .nxm-bewertungen .star-rating span::before,
.wp-site-blocks .nxm-bewertungen p.stars a::before {
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") left center / 1.2em 1.2em repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") left center / 1.2em 1.2em repeat-x;
}

.wp-site-blocks .nxm-bewertungen .star-rating::before,
.wp-site-blocks .nxm-bewertungen .star-rating span::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 6em;
  height: 1.2em;
}

.wp-site-blocks .nxm-bewertungen .star-rating::before {
  background-color: var(--wp--preset--color--line-strong);
}

.wp-site-blocks .nxm-bewertungen .star-rating span::before {
  background-color: var(--wp--preset--color--warning);
}

.wp-site-blocks .nxm-bewertungen .woocommerce-noreviews,
.wp-site-blocks .nxm-bewertungen .woocommerce-verification-required {
  margin: var(--wp--preset--spacing--30) 0 0;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--small);
}

.wp-site-blocks .nxm-bewertungen #review_form_wrapper {
  margin-top: var(--wp--preset--spacing--40);
}

/* Ueber #review_form #respond: .woocommerce #review_form #respond p (woocommerce.css) setzte sonst 10 px. */
.wp-site-blocks .nxm-bewertungen #review_form #respond .comment-form > p,
.wp-site-blocks .nxm-bewertungen #review_form #respond .comment-form > .comment-form-rating {
  margin: 0 0 var(--wp--preset--spacing--30);
}

.wp-site-blocks .nxm-bewertungen .comment-form label {
  display: block;
  margin: 0 0 var(--wp--preset--spacing--10);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  line-height: 1.4;
}

.wp-site-blocks .nxm-bewertungen .comment-form select,
.wp-site-blocks .nxm-bewertungen .comment-form textarea,
.wp-site-blocks .nxm-bewertungen .comment-form input[type="text"],
.wp-site-blocks .nxm-bewertungen .comment-form input[type="email"] {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: var(--wp--custom--button--min-height);
  margin: 0;
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--wp--custom--radius--small);
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.4;
  box-sizing: border-box;
}

.wp-site-blocks .nxm-bewertungen .comment-form select {
  max-width: 20rem;
  cursor: pointer;
}

.wp-site-blocks .nxm-bewertungen #reviews #comment {
  height: auto;
  min-height: 8rem;
  resize: vertical;
}

/* Mit JavaScript ersetzt WooCommerce die Auswahl durch fuenf Sterne (p.stars, single-product.js); jeder
   Stern ist ein Link und bekommt die Mindestgroesse fuer Fingertipps. */
.wp-site-blocks .nxm-bewertungen p.stars {
  margin: 0;
  line-height: 1;
}

.wp-site-blocks .nxm-bewertungen p.stars a {
  width: var(--wp--custom--touch--min-size);
  height: var(--wp--custom--touch--min-size);
  font-size: var(--wp--custom--touch--min-size);
}

/* Dieselbe Sternform wie oben; leer und voll unterscheiden sich nur in der Farbe. Die Regeln folgen denen
   von WooCommerce (woocommerce.css, p.stars), die dort zwischen zwei Zeichen der Symbolschrift wechseln. */
.wp-site-blocks .nxm-bewertungen p.stars a::before {
  width: 1em;
  height: 1em;
  -webkit-mask-size: 1em 1em;
  mask-size: 1em 1em;
  background-color: var(--wp--preset--color--line-strong);
}

/* In jedem Zustand ohne Zeichen: die Regeln von WooCommerce fuer gewaehlte Sterne
   (.woocommerce p.stars.selected a.active::before) setzen sonst wieder ein Zeichen der Symbolschrift. */
.wp-site-blocks .nxm-bewertungen p.stars:hover a::before,
.wp-site-blocks .nxm-bewertungen p.stars.selected a.active::before,
.wp-site-blocks .nxm-bewertungen p.stars.selected a:not(.active)::before {
  content: "";
  background-color: var(--wp--preset--color--warning);
}

.wp-site-blocks .nxm-bewertungen p.stars a:hover ~ a::before,
.wp-site-blocks .nxm-bewertungen p.stars.selected a.active ~ a::before {
  content: "";
  background-color: var(--wp--preset--color--line-strong);
}

.wp-site-blocks .nxm-bewertungen p.stars a:focus-visible {
  outline: 3px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}

.wp-site-blocks .nxm-bewertungen #review_form #respond .comment-form .form-submit {
  margin: 0;
}