Theme-Darstellung: Kommentare in wpsg-theme.css gekürzt

Lighthouse meldete die Datei als unverkleinert (K85). Die längeren
Erklärungen stehen jetzt in doc/code-kommentar.md.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

1 files changed, 15 insertions, 47 deletions

diff --git a/views/css/wpsg-theme.css b/views/css/wpsg-theme.css
index db118a4..3510baf 100644
--- a/views/css/wpsg-theme.css
+++ b/views/css/wpsg-theme.css
@@ -1,26 +1,11 @@
 @charset "UTF-8";
 
 /*
- * wpShopGermany, Darstellung „An das Theme angepasst“
- *
- * Schrift, Textfarbe, Hintergrund, Knöpfe und Eingabefelder kommen aus dem Theme. Regeln für eigene
- * Bausteine haben die Spezifität 0-1-0: Der erste Klassen- oder ID-Teil steht außerhalb von :where(), IDs als
- * [id="…"]. So gewinnen sie gegen Resets wie div { margin:0; border:0 }, Regeln des Themes mit Klasse gewinnen
- * weiter. Rückfälle für Felder und Knöpfe und Regeln auf reine Elemente (input, select, h2 …) bleiben bei 0.
- * Linien und Flächen sind halbtransparentes Grau und passen zu hellen wie dunklen Themes. Feldränder brauchen 3:1
- * (WCAG 1.4.11) und mischen sich deshalb aus Vorder- und Hintergrund des Themes.
- *
- * Anpassen über die Variablen --wpsg-* (Liste und Bedeutung: Handbuch „Für Theme-Entwickler“), etwa
- *   :root { --wpsg-color-accent: #8a2be2; }
- *
- * Ausnahme: Wenige Aufbauregeln (Breiten von Feldern in eigenen Bausteinen, Ausblenden, Einblendungen) haben
- * volle Spezifität, damit allgemeine Regeln eines Themes wie form input[type=radio] das Layout nicht sprengen.
- * Sie sind mit „Aufbau mit Klassen-Spezifität“ markiert.
- *
- * Die Darstellung „Klassisch“ nutzt css/frontend.css; diese Datei wird dann nicht geladen.
+ * wpShopGermany, Darstellung „An das Theme angepasst“; Spezifität und Aufbau: doc/code-kommentar.md#wpsg-theme-css
+ * Anpassen über die Variablen --wpsg-* (Handbuch „Für Theme-Entwickler“)
  */
 
-/* Variablen; Astra (--ast-global-color-*) und Kadence (--global-palette*) als zusätzlicher Rückfall für die Farben */
+/* Variablen; Farben mit Rückfall auf Astra und Kadence */
 :where(:root) {
 	--wpsg-color-background: var(--wp--preset--color--base, var(--ast-global-color-5, var(--global-palette9, #ffffff)));
 	--wpsg-color-foreground: var(--wp--preset--color--contrast, var(--ast-global-color-3, var(--global-palette4, #111111)));
@@ -63,7 +48,7 @@
 :where(.wpsg, .wpsg_mod_productindex, .wpsg_productform) :where(*, *::before, *::after) { box-sizing:border-box; }
 .wpsg_required { color:var(--wpsg-color-error); font-weight:bold; }
 
-/* Shop-Container mit "alignwide" in Themes mit Inhaltskarte (z.B. Kadence "content-style-boxed") */
+/* alignwide in Themes mit Inhaltskarte (Kadence content-style-boxed) */
 :where(body.content-style-boxed .entry-content .wpsg.alignwide) { margin-left:0; margin-right:0; width:auto; max-width:100%; }
 
 /* Meldungen: Farbe nur am Rand, der Text bleibt in der Schriftfarbe des Themes */
@@ -77,10 +62,7 @@
 .wpsg_error:where(label) { position:absolute; right:2px; top:-2px; color:var(--wpsg-color-error); }
 .wpsg_checkout :where(label.wpsg_error) { background-color:var(--wpsg-color-background); }
 
-/*
- * Eingabefelder: schlichter Rückfall für Themes, die Felder nicht gestalten.
- * Gestaltet das Theme input/select/textarea, gewinnt es.
- */
+/* Eingabefelder: Rückfall; gestaltet das Theme sie, gewinnt es */
 :where(.wpsg, .wpsg_productform, .wpsg_mod_productindex, .wpsg_basket_widget, .wpsg_mod_kundenverwaltung_widget, #wpsg_calc_layer, .wpsg-pv, .wpsg-pvf) :where(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="date"], input[type="search"], input:not([type]), select, textarea) {
 	font:inherit;
 	color:inherit;
@@ -93,11 +75,7 @@
 :where(.wpsg, .wpsg_productform, .wpsg_mod_productindex, .wpsg_basket_widget, .wpsg_mod_kundenverwaltung_widget, #wpsg_calc_layer, .wpsg-pv, .wpsg-pvf) :where(select) { background-color:var(--wpsg-color-background); color:var(--wpsg-color-foreground); height:auto; }
 :where(.wpsg, .wpsg_productform) :where(textarea) { resize:vertical; }
 
-/*
- * Knöpfe: In Block-Themes tragen sie wp-element-button und bekommen den Knopfstil des Themes. Der Rückfall hier
- * greift, wo weder Theme noch Klasse einen Stil setzen (klassische Themes, überschriebene Vorlagen): ein Rahmen
- * in der Textfarbe, damit er zu jeder Link- und Textfarbe passt.
- */
+/* Knöpfe: Rückfall, siehe doc/code-kommentar.md#wpsg-theme-knoepfe */
 :where(.wpsg_button, .wpsg_checkoutbutton, .wpsg_orderbutton, .wpsg_overviewbutton, .wpsg_refreshbutton, .wpsg_basketbutton, .wpsg_checkout2button, .wpsg_saveButton, .wpsg_registerButton, .wpsg_add_basket, .wpsg_add_requestlist, .wpsg_mod_request_button_refresh, .wpsg_mod_request_button_submit, .garan_label_popup_confirm):where(:not(.wp-element-button)) {
 	display:inline-block;
 	font:inherit;
@@ -110,7 +88,7 @@
 	color:var(--wpsg-button-color);
 	text-decoration:none;
 }
-/* Links als Knopf mit Klassen-Spezifität: Resets wie a { border:0; padding:0 } nehmen ihnen sonst den Rahmen */
+/* Links als Knopf mit Klassen-Spezifität gegen Resets wie a { border:0 } */
 :where(a):is(.wpsg_button, .wpsg_checkoutbutton, .wpsg_orderbutton, .wpsg_overviewbutton, .wpsg_refreshbutton, .wpsg_basketbutton, .wpsg_checkout2button, .wpsg_saveButton, .wpsg_registerButton, .wpsg_add_basket, .wpsg_add_requestlist, .wpsg_mod_request_button_refresh, .wpsg_mod_request_button_submit, .garan_label_popup_confirm):where(:not(.wp-element-button)) { display:inline-block; padding:var(--wpsg-button-padding); border:1px solid currentColor; border-radius:var(--wpsg-radius); text-decoration:none; }
 .wpsg_button:where(:not(.wp-element-button)):where(:hover, :focus-visible), .wpsg_checkoutbutton:where(:not(.wp-element-button)):where(:hover, :focus-visible), .wpsg_orderbutton:where(:not(.wp-element-button)):where(:hover, :focus-visible), .wpsg_overviewbutton:where(:not(.wp-element-button)):where(:hover, :focus-visible), .wpsg_refreshbutton:where(:not(.wp-element-button)):where(:hover, :focus-visible), .wpsg_basketbutton:where(:not(.wp-element-button)):where(:hover, :focus-visible), .wpsg_checkout2button:where(:not(.wp-element-button)):where(:hover, :focus-visible), .wpsg_saveButton:where(:not(.wp-element-button)):where(:hover, :focus-visible), .wpsg_registerButton:where(:not(.wp-element-button)):where(:hover, :focus-visible), .wpsg_add_basket:where(:not(.wp-element-button)):where(:hover, :focus-visible), .wpsg_add_requestlist:where(:not(.wp-element-button)):where(:hover, :focus-visible), .wpsg_mod_request_button_refresh:where(:not(.wp-element-button)):where(:hover, :focus-visible), .wpsg_mod_request_button_submit:where(:not(.wp-element-button)):where(:hover, :focus-visible), .garan_label_popup_confirm:where(:not(.wp-element-button)):where(:hover, :focus-visible) { background-color:var(--wpsg-color-surface); }
 
@@ -280,7 +258,7 @@
 .wpsg_progress :where(span.current > .dot), .wpsg_progress :where(span.done > .dot) { background-color:var(--wpsg-color-background); }
 .wpsg_progress :where(span.current)::after, .wpsg_progress :where(span.done)::after { content:" "; display:block; position:absolute; top:0; width:100%; height:10px; background-color:var(--wpsg-color-accent); opacity:0.5; }
 .wpsg_progress :where(span.current)::after { width:50%; }
-/* Schrittleiste im Modus „neu“ (Punkt 8.9): vier gleiche Felder, Linie oben, erledigt und aktuell in der Akzentfarbe */
+/* Schrittleiste „neu“ (Punkt 8.9): vier gleiche Felder, erledigt und aktuell in der Akzentfarbe */
 .wpsg-steps { margin:0 0 2em; }
 .wpsg-steps__list { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0.5em; margin:0; padding:0; list-style:none; font-size:var(--wpsg-font-size-small); }
 .wpsg-steps__step { margin:0; padding-top:0.6em; border-top:4px solid var(--wpsg-color-line); overflow-wrap:break-word; hyphens:auto; }
@@ -335,7 +313,7 @@
 .wpsg_productform :where(.wpsg_produkt_wrapper .wpsg_produkt_preishinweis) { font-size:0.75em; }
 .wpsg_productform :where(.wpsg_produkt_wrapper .wpsg_mod_productview_oldprice), .product_wrap :where(.productdetails .oldprice) { text-decoration:line-through; }
 .wpsg_productform :where(.wpsg_produkt_wrapper .wpsg_mod_productview_price) { font-weight:bold; }
-/* Widerrufsdialog in den Farben des Themes (W5), Feldränder wie auf der Seite (K76); html body über der festen Farbe in wpsg_revocation.css */
+/* Widerrufsdialog in den Farben des Themes (W5, K76); html body gegen wpsg_revocation.css */
 html body #wpsg_revocation_dialog .inner { background-color:var(--wpsg-color-background); color:var(--wpsg-color-foreground); --rv-field-border:var(--wpsg-field-border); }
 .wpsg-product :where(.wpsg-product__breadcrumbs) { margin:0 0 var(--wpsg-gap); font-size:var(--wpsg-font-size-small); }
 .wpsg-product :where(.wpsg-product__breadcrumbs ol) { display:flex; flex-wrap:wrap; gap:0.25em 0.5em; margin:0; padding:0; list-style:none; }
@@ -377,7 +355,7 @@ html body #wpsg_revocation_dialog .inner { background-color:var(--wpsg-color-bac
 .wpsg_produkt_add_basket_wrapper { display:flex; flex-wrap:wrap; align-items:stretch; justify-content:flex-start; gap:var(--wpsg-gap); }
 :where(.wpsg_produkt_add_basket_wrapper > *) { margin:0; }
 .wpsg_produkt_add_basket_wrapper :where(> label) { display:flex; align-items:center; margin:0; }
-/* Aufbau mit Klassen-Spezifität: allgemeine Feldregeln der Themes (input { width:100% }) sollen die Zeile nicht sprengen */
+/* Aufbau mit Klassen-Spezifität: Feldregeln der Themes sprengen sonst die Zeile */
 .wpsg_produkt_add_basket_wrapper .wpsg_menge { width:5em; flex:0 0 auto; text-align:center; }
 .wpsg-product :where(.wpsg-product__variants .wpsg_vp_field) { display:flex; flex-direction:column; gap:0.3em; }
 .wpsg-product .wpsg-product__buy { align-items:flex-end; }
@@ -593,10 +571,7 @@ html body #wpsg_revocation_dialog .inner { background-color:var(--wpsg-color-bac
 .wpsg_mod_prepayment_info_left_currency, .wpsg_mod_prepayment_girocode_left_currency, .wpsg_mod_prepayment_qrrechnung_left_currency { display:flex; flex-direction:column; }
 .wpsg_mod_prepayment_info_left_amount, .wpsg_mod_prepayment_girocode_left_amount, .wpsg_mod_prepayment_qrrechnung_left_amount { display:flex; flex-direction:column; }
 
-/*
- * GARANTIE-Siegel: Das Siegel hat ein festes Aussehen und bleibt deshalb wie in frontend.css, mit
- * eigener Schrift, festen Farben und erhöhter Spezifität gegen Theme-Regeln.
- */
+/* GARANTIE-Siegel: feste Schrift und Farben wie in frontend.css, erhöhte Spezifität */
 .wpsg_product_garan_wrap { all:revert; padding:5px 0; margin-bottom:2rem; font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
 	* { all:revert; }
 	.wpsg_product_garan { border:1px solid black; display:inline-block; padding:5px 50px 5px 5px; position:relative; height:30px; white-space:nowrap; cursor:pointer; text-decoration:none; color:black;
@@ -665,16 +640,12 @@ html body .wpsg_product_garan_wrap a.wpsg_product_garan img { display:block; max
 /* Blöcke: Produktliste, Mini-Warenkorb, Kundenkonto */
 .wpsg-block-product-list :where(.wpsg-product-list__count) { margin:0 0 var(--wpsg-gap); }
 .wpsg-block-product-list :where(.wpsg-product-list__count:empty) { display:none; }
-/*
- * Produktkacheln (Abfrage-Schleife, Kategorievorlage): Statuszeile und Filter als Leiste über den Kacheln.
- * Abstände aus dem Theme (Blocklücke, Spacing-Presets); alle Felder und Knöpfe gleich hoch, auf einer Grundlinie.
- * Höhere Spezifität als die Fluss-Regel des Kerns (:root :where(.is-layout-flow) > *), die sonst den Abstand nimmt.
- */
+/* Produktkacheln: Leiste über den Kacheln, siehe doc/code-kommentar.md#wpsg-theme-kacheln */
 .wpsg-product-tiles { --wpsg-pvf-gap:var(--wp--style--block-gap, var(--wpsg-gap)); --wpsg-pvf-gap-small:var(--wp--preset--spacing--20, 0.5em); --wpsg-pvf-control:2.75em; }
 .wpsg-product-tiles > .wpsg-product-list__count { margin-block:0 var(--wpsg-pvf-gap); }
 .wpsg-product-tiles > .wpsg-product-list__count:empty { display:none; }
 .wpsg-product-tiles > .wpsg-block-product-filter { margin-block:var(--wp--preset--spacing--40, 1rem) var(--wp--preset--spacing--60, 2rem); }
-/* Raster mit gleich breiten Spalten, damit die Gruppen untereinander stehen; Überschriften oben bündig, „Filtern“ unten in der letzten Spalte */
+/* Gleich breite Spalten; Überschriften oben bündig, „Filtern“ unten in der letzten Spalte */
 .wpsg-product-tiles .wpsg-pvf__fields { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); align-items:start; gap:var(--wpsg-pvf-gap); padding:var(--wp--preset--spacing--40, 1rem); border:1px solid var(--wpsg-color-line-soft); border-radius:var(--wpsg-radius); background-color:var(--wpsg-color-surface); }
 .wpsg-product-tiles .wpsg-pvf__fields > * { margin:0; padding:0; border:0; min-width:0; }
 .wpsg-product-tiles .wpsg-pvf__title { display:block; margin:0 0 var(--wpsg-pvf-gap-small) 0; padding:0; font-size:inherit; font-weight:600; line-height:1.3; }
@@ -706,7 +677,7 @@ html body .wpsg_product_garan_wrap a.wpsg_product_garan img { display:block; max
 @media (max-width:781px) {
 	.wpsg-product-tiles .wpsg-pvf__toggle[open] > .wpsg-pvf__fields { margin-top:var(--wpsg-pvf-gap-small); }
 	.wpsg-product-tiles .wpsg-pvf__fields { grid-template-columns:minmax(0, 1fr); }
-	/* Untereinander braucht die Kästchenzeile keine Mindesthöhe: gleicher Abstand unter jeder Überschrift */
+	/* Untereinander ohne Mindesthöhe: gleicher Abstand unter jeder Überschrift */
 	.wpsg-product-tiles .wpsg-pvf__options { min-height:0; }
 	.wpsg-product-tiles .wpsg-pvf__price { grid-column:auto; }
 	/* Am Handy füllen die Felder die Zeile; eine feste Breite zählte sonst als Mindestbreite */
@@ -776,10 +747,7 @@ html body .wpsg_product_garan_wrap a.wpsg_product_garan img { display:block; max
 .wpsg-pvf :where(.wpsg-pvf__color) { display:inline-block; width:1.2em; height:1.2em; border:1px solid var(--wpsg-color-line); border-radius:var(--wpsg-radius); }
 .wpsg-pvf :where(.wpsg-pvf__actions) { display:flex; flex-wrap:wrap; align-items:center; gap:var(--wpsg-gap); }
 
-/*
- * Aufbau mit Klassen-Spezifität: Ausblenden, Ein- und Überblendungen. Allgemeine Regeln der Themes wie
- * form input[type=radio] { display:inline-block } dürfen versteckte Bausteine nicht einblenden.
- */
+/* Aufbau mit Klassen-Spezifität: Ausblenden, Ein- und Überblendungen */
 .shippay_wrap .shippay_item_wrap { position:relative; }
 .shippay_wrap .shippay_item_wrap input[type="radio"],
 .shippay_wrap .shippay_item_wrap .shippay_hint,