Widerrufsformular: Feldränder mit 3:1 Kontrast (K76)

Die Felder nehmen den Feldrand des Themes, sonst ein Grau, das auf hellem und dunklem Grund reicht.

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

2 files changed, 6 insertions, 4 deletions

diff --git a/views/css/wpsg-theme.css b/views/css/wpsg-theme.css
index b4f3a92..182cc63 100644
--- a/views/css/wpsg-theme.css
+++ b/views/css/wpsg-theme.css
@@ -319,8 +319,8 @@
 .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); html body über der festen Farbe in wpsg_revocation.css */
-html body #wpsg_revocation_dialog .inner { background-color:var(--wpsg-color-background); color:var(--wpsg-color-foreground); }
+/* Widerrufsdialog in den Farben des Themes (W5), Feldränder wie auf der Seite (K76); html body über der festen Farbe in 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; }
 .wpsg-product :where(.wpsg-product__breadcrumbs li + li)::before { content:"/" / ""; margin-right:0.5em; opacity:var(--wpsg-muted-opacity); }
diff --git a/views/mods/mod_revocation/wpsg_revocation.css b/views/mods/mod_revocation/wpsg_revocation.css
index 0480de0..f1151d9 100644
--- a/views/mods/mod_revocation/wpsg_revocation.css
+++ b/views/mods/mod_revocation/wpsg_revocation.css
@@ -1,6 +1,8 @@
 /* Widerrufsformular — schlichte Gestaltung passend zum SmartCheckout: dünne Linien, gedämpfte Beschriftungen, Farbe vom Theme */
 
-#wpsg_revocation_button, #wpsg_revocation_dialog, .wpsg_revocation_product_button, .wpsg_revocation_page, .wpsg_mod_kundenverwaltung_order { --rv-line:rgba(127, 127, 127, 0.35); --rv-line-soft:rgba(127, 127, 127, 0.2); --rv-flat:rgba(127, 127, 127, 0.08); --rv-error:#b3261e; --rv-success:#2e7d32; --rv-radius:3px; }
+#wpsg_revocation_button, #wpsg_revocation_dialog, .wpsg_revocation_product_button, .wpsg_revocation_page, .wpsg_mod_kundenverwaltung_order { --rv-line:rgba(127, 127, 127, 0.35); --rv-field-border:1px solid rgba(127, 127, 127, 0.9); --rv-line-soft:rgba(127, 127, 127, 0.2); --rv-flat:rgba(127, 127, 127, 0.08); --rv-error:#b3261e; --rv-success:#2e7d32; --rv-radius:3px; }
+/* Feldränder brauchen 3:1 (WCAG 1.4.11, K76): der Feldrand des Themes, sonst ein Grau, das auf hellem und dunklem Grund reicht; den Dialog färbt wpsg-theme.css */
+.wpsg_revocation_page { --rv-field-border:var(--wpsg-field-border, 1px solid rgba(127, 127, 127, 0.9)); }
 
 /* Button am Produkt (Produkttemplate, SmartCheckout) */
 .wpsg_revocation_product_button { display:inline-flex; align-items:center; gap:0.4706em; width:auto; padding:0.4118em 0.8235em; border:1px solid var(--rv-line); border-radius:var(--rv-radius); background:none; color:inherit; font-size:0.85em; line-height:1.2; cursor:pointer; user-select:none; transition:background-color 0.15s ease-out, border-color 0.15s ease-out; }
@@ -58,7 +60,7 @@
 /* Links in Schriftfarbe: Die Linkfarbe des Themes ist auf dem Dialog sonst zu blass (W5) */
 #wpsg_revocation_dialog .inner a, .wpsg_revocation_page a { color:inherit; text-decoration:underline; }
 #wpsg_revocation_form .form_field .value, #wpsg_revocation_page_form .form_field .value { display:flex; gap:0.5em; justify-content:stretch; }
-#wpsg_revocation_form .form_field .value input, #wpsg_revocation_form .form_field .value textarea, #wpsg_revocation_form .form_field .value select, #wpsg_revocation_page_form .form_field .value input, #wpsg_revocation_page_form .form_field .value textarea, #wpsg_revocation_page_form .form_field .value select { flex:1 1 auto; width:auto; min-width:0; min-height:0; margin:0; padding:0.55em 0.7em; border:1px solid var(--rv-line); border-radius:var(--rv-radius); background:none; color:inherit; font:inherit; text-indent:0; box-shadow:none; }
+#wpsg_revocation_form .form_field .value input, #wpsg_revocation_form .form_field .value textarea, #wpsg_revocation_form .form_field .value select, #wpsg_revocation_page_form .form_field .value input, #wpsg_revocation_page_form .form_field .value textarea, #wpsg_revocation_page_form .form_field .value select { flex:1 1 auto; width:auto; min-width:0; min-height:0; margin:0; padding:0.55em 0.7em; border:var(--rv-field-border); border-radius:var(--rv-radius); background:none; color:inherit; font:inherit; text-indent:0; box-shadow:none; }
 #wpsg_revocation_form .form_field .value input:focus, #wpsg_revocation_form .form_field .value textarea:focus, #wpsg_revocation_form .form_field .value select:focus, #wpsg_revocation_page_form .form_field .value input:focus, #wpsg_revocation_page_form .form_field .value textarea:focus, #wpsg_revocation_page_form .form_field .value select:focus { border-color:currentColor; outline:none; }
 #wpsg_revocation_form .form_field .value input[readonly], #wpsg_revocation_page_form .form_field .value input[readonly] { background:var(--rv-flat); }
 #wpsg_revocation_form .form_field .value input[type="number"], #wpsg_revocation_page_form .form_field .value input[type="number"] { flex:0 0 6em; }