Darstellung neu: Feldränder aus den Farben des Themes (K77)

Ohne eigenen Wert des Themes hatten Feldränder 1,5:1; jetzt mischen sie sich aus Vorder- und Hintergrund und erreichen 3:1.

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

1 files changed, 11 insertions, 4 deletions

diff --git a/views/css/wpsg-theme.css b/views/css/wpsg-theme.css
index 182cc63..0496682 100644
--- a/views/css/wpsg-theme.css
+++ b/views/css/wpsg-theme.css
@@ -7,7 +7,8 @@
  * 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.
+ * 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; }
@@ -37,7 +38,8 @@
 	--wpsg-label-color: var(--wpsg-color-background);
 	--wpsg-gap: 1rem;
 	--wpsg-font-size-small: var(--wp--preset--font-size--small, 0.875em);
-	--wpsg-field-border: 1px solid var(--wpsg-color-line);
+	--wpsg-color-field-line: color-mix(in srgb, var(--wpsg-color-foreground) 55%, var(--wpsg-color-background));
+	--wpsg-field-border: 1px solid var(--wpsg-color-field-line);
 	--wpsg-field-padding: 0.6em 0.75em;
 	--wpsg-field-background: transparent;
 	--wpsg-button-background: transparent;
@@ -45,6 +47,11 @@
 	--wpsg-button-padding: 0.6em 1.2em;
 }
 
+/* Browser ohne color-mix(): Grau, das auf hellem und dunklem Grund 3:1 erreicht */
+@supports not (color: color-mix(in srgb, red 50%, blue)) {
+	:where(:root) { --wpsg-color-field-line: rgba(127, 127, 127, 0.9); }
+}
+
 /* Allgemein */
 .wpsg-flex { display:flex; }
 .wpsg-align-center { align-items:center; }
@@ -181,7 +188,7 @@
 .wpsg-checkout__layout { display:grid; grid-template-columns:minmax(0, 1fr); gap:calc(var(--wpsg-gap) * 2); align-items:start; }
 @media (min-width: 900px) { .wpsg-checkout__layout { grid-template-columns:minmax(0, 2fr) minmax(16rem, 1fr); } .wpsg-checkout__summary { position:sticky; top:var(--wpsg-gap); } }
 .wpsg-checkout__layout > form { min-width:0; }
-.wpsg-checkout__summary { padding:calc(var(--wpsg-gap) * 1.5); border:var(--wpsg-field-border); border-radius:var(--wpsg-radius); background:var(--wpsg-color-surface); }
+.wpsg-checkout__summary { padding:calc(var(--wpsg-gap) * 1.5); border:1px solid var(--wpsg-color-line); border-radius:var(--wpsg-radius); background:var(--wpsg-color-surface); }
 .wpsg-checkout__summary-title { margin:0 0 0.75em; font-size:1.25em; }
 .wpsg-checkout__summary-items { margin:0; padding:0; list-style:none; }
 .wpsg-checkout__summary-row { display:flex; flex-wrap:wrap; justify-content:space-between; column-gap:var(--wpsg-gap); margin:0 0 0.5em; }
@@ -189,7 +196,7 @@
 .wpsg-checkout__summary-row > span:first-child { flex:1 1 0; min-width:min-content; overflow-wrap:break-word; hyphens:manual; }
 .wpsg-checkout__summary-variant, .wpsg-checkout__summary-detail { display:block; font-size:var(--wpsg-font-size-small); opacity:var(--wpsg-muted-opacity); }
 .wpsg-checkout__summary-row.is-muted, .wpsg-checkout__summary-tax { opacity:var(--wpsg-muted-opacity); }
-.wpsg-checkout__summary-total { margin-top:0.75em; padding-top:0.75em; border-top:var(--wpsg-field-border); font-weight:700; font-size:1.1em; }
+.wpsg-checkout__summary-total { margin-top:0.75em; padding-top:0.75em; border-top:1px solid var(--wpsg-color-line); font-weight:700; font-size:1.1em; }
 .wpsg-checkout__summary-tax { margin:0.25em 0 0; font-size:var(--wpsg-font-size-small); }
 .wpsg_checkout :where(.wpsg_mod_ordervars), .wpsg_checkout :where(.wpsg_mod_shippingadress) { margin-bottom:var(--wpsg-gap); }
 .wpsg_checkout :where(.wpsg_mod_ordervars_field) { display:inline; }