Formular-Regeln in CLAUDE.md; A11y-Fixes: Feldränder 3:1-Kontrast (neuer Token), Checkbox 24px + größeres Label, aria-live-Region nie display:none

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

public/assets/css/components.css

@@ -331,7 +331,7 @@
     width: 100%;
     padding: 10px 12px;
     background: var(--clr-glass-bg);
-    border: 1px solid var(--clr-glass-border);
+    border: 1px solid var(--clr-glass-border-strong);
     border-radius: var(--radius-btn);
     color: var(--clr-text);
     transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
@@ -340,7 +340,7 @@
 .form__field input:hover,
 .form__field select:hover,
 .form__field textarea:hover {
-    border-color: rgb(255 255 255 / 0.4);
+    border-color: rgb(255 255 255 / 0.55);
 }
 
 /* Eigener, deutlich sichtbarer Fokus-Ring statt des globalen Outlines */
@@ -416,19 +416,25 @@
 }
 
 .form__field--checkbox input {
-    width: 1.25rem;
-    height: 1.25rem;
-    margin-top: 0.2rem;
+    /* 24px — Mindest-Zielgröße (WCAG 2.5.8) */
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-top: 0.1rem;
     accent-color: var(--clr-accent);
 }
 
 .form__field--checkbox label {
-    font-size: var(--fs-400);
-    color: var(--clr-text-muted);
+    font-size: var(--fs-500);
 }
 
+/* Leer: unsichtbar, aber im Accessibility-Tree — display:none würde die
+   aria-live-Region abmelden und Screenreader verpassen die erste Meldung. */
 .form__status:empty {
-    display: none;
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
 }
 
 .form__success {
@@ -601,25 +607,21 @@
     outline-offset: 3px;
 }
 
-/* Pause-Symbol (zwei Balken) im Abspiel-Zustand … */
-.ad-banner__toggle::before {
-    content: "";
-    display: block;
-    width: 4px;
-    height: 13px;
-    border-left: 4px solid currentColor;
-    border-right: 4px solid currentColor;
+.ad-banner__toggle-icon {
+    font-size: 1.15rem;
 }
 
-/* … Play-Dreieck, wenn pausiert. */
-.ad-banner__toggle[aria-pressed="true"]::before {
-    width: 0;
-    height: 0;
-    margin-left: 3px;
-    border: 0;
-    border-left: 13px solid currentColor;
-    border-top: 8px solid transparent;
-    border-bottom: 8px solid transparent;
+/* Pause-Icon im Abspiel-Zustand, Play-Icon wenn pausiert. */
+.ad-banner__toggle .ad-banner__toggle-icon--play {
+    display: none;
+}
+
+.ad-banner__toggle[aria-pressed="true"] .ad-banner__toggle-icon--pause {
+    display: none;
+}
+
+.ad-banner__toggle[aria-pressed="true"] .ad-banner__toggle-icon--play {
+    display: inline-block;
 }
 
 /* Indikatorleiste — die aktive Leiste füllt sich über --banner-interval. */

public/assets/css/tokens.css

@@ -18,6 +18,7 @@
     --clr-text-faint:    #8c8c8c;            /* 4.5:1 auf --clr-bg (AA) */
     --clr-glass-bg:      rgb(255 255 255 / 0.11);
     --clr-glass-border:  rgb(255 255 255 / 0.22);
+    --clr-glass-border-strong: rgb(255 255 255 / 0.4); /* Formularfelder: ≥3:1 Kontrast (WCAG 1.4.11) */
     --clr-error:         #ff8a8a;            /* Formularfehler, lesbar auf dunkel */
     --clr-success:       #8ce99a;