Give both consent answers the same look

"Alle akzeptieren" was filled in the button colour while "Nur notwendige"
was an outlined button. A privacy scan flagged that as nudging. Both now
share fill, text colour and hover; only "Auswahl speichern" in the
per-group disclosure stays outlined. ADR 131.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
kantarciandClaude Opus 5.5 committed 2026-11-11 12:56:56 +01:00
1 parent 86da83f754
commit 84cdf6a261
5 files changed
+29 -6

No files matched your search

+1 -1
View File
@@ -66,7 +66,7 @@ Unter **Formulare → Zustellung** gibt es neben dem Empfänger ein Feld **Absen
## Einwilligungshinweis gestalten, Nach-oben-Knopf auch bei offener Frage (ab 1.14.1) ## Einwilligungshinweis gestalten, Nach-oben-Knopf auch bei offener Frage (ab 1.14.1)
**Der Einwilligungshinweis lässt sich gestalten**, unter **Einstellungen → Einwilligung → Aussehen des Hinweises**: Anordnung (Karte unten in der Mitte, Leiste über die volle Breite, kleine Karte rechts unten), Form (abgerundet, rund, eckig – gilt für Fläche und Knöpfe zusammen), eigene Überschrift und vier Farben (Fläche, Schrift, Knopf „Alle akzeptieren“, Schrift auf dem Knopf), jeweils als `#hex` oder `@schlüssel` aus der Palette. Leer heißt Papier, Tinte und Akzent aus dem Design. Die Fläche trägt einen schmalen Streifen und ein Symbol in der Knopffarbe; „Nur notwendige“ bleibt ein gleich großer Rahmenknopf daneben. Dieselben Farben gelten auf `/einwilligung` und in den Beitragsarchiven. **Der Einwilligungshinweis lässt sich gestalten**, unter **Einstellungen → Einwilligung → Aussehen des Hinweises**: Anordnung (Karte unten in der Mitte, Leiste über die volle Breite, kleine Karte rechts unten), Form (abgerundet, rund, eckig – gilt für Fläche und Knöpfe zusammen), eigene Überschrift und vier Farben (Fläche, Schrift, Knopf „Alle akzeptieren“, Schrift auf dem Knopf), jeweils als `#hex` oder `@schlüssel` aus der Palette. Leer heißt Papier, Tinte und Akzent aus dem Design. Die Fläche trägt einen schmalen Streifen und ein Symbol in der Knopffarbe; „Nur notwendige“ steht gleich groß und in derselben Farbe daneben (ADR 131). Dieselben Farben gelten auf `/einwilligung` und in den Beitragsarchiven.
**Der Nach-oben-Knopf** war ausgeblendet, solange die Einwilligungsfrage offen stand – auf dem Telefon bleibt sie das oft, und der Knopf kam dort nie. Jetzt setzt er sich auf die Oberkante der Leiste, wo sie die Ecke abdeckt; Browser ohne Ankerpositionierung blenden ihn dort weiter aus. Der reservierte Abstand unten reicht auf schmalen Bildschirmen wieder für die ganze Leiste. **Der Nach-oben-Knopf** war ausgeblendet, solange die Einwilligungsfrage offen stand – auf dem Telefon bleibt sie das oft, und der Knopf kam dort nie. Jetzt setzt er sich auf die Oberkante der Leiste, wo sie die Ecke abdeckt; Browser ohne Ankerpositionierung blenden ihn dort weiter aus. Der reservierte Abstand unten reicht auf schmalen Bildschirmen wieder für die ganze Leiste.
+9 -1
View File
@@ -2,6 +2,14 @@
Stand: 10.11.2026. Arbeitstitel KantSites; Produktname offen. Stand: 10.11.2026. Arbeitstitel KantSites; Produktname offen.
## ADR 131 – Einwilligung: beide Antworten sehen gleich aus (11.11.2026)
**Anlass:** Ein Datenschutz-Scan (SUASIO) von huefner-gartenbau.de meldete die Einwilligung als „nicht rechtskonform“ wegen Nudging. „Alle akzeptieren“ war in der Knopffarbe gefüllt, „Nur notwendige“ ein Rahmenknopf – gleich groß, aber die Zustimmung farbig hervorgehoben. Aufsichtsbehörden werten eine solche Hervorhebung zunehmend als Lenkung.
**Entscheidung:** „Nur notwendige“ bekommt dieselbe Füllung, Schrift und Hover-Wirkung wie „Alle akzeptieren“ (`.consent-decline` hat keine eigenen Regeln mehr). Die einstellbare Farbe heißt jetzt „Farbe der Knöpfe“ und gilt für beide. „Auswahl speichern“ in der aufgeklappten Einzelwahl bleibt ein Rahmenknopf, weil es dort keine konkurrierende Antwort gibt. Das ersetzt den Absatz „Was gleich bleibt“ aus ADR 097.
**Folgen:** Alle Installationen ändern ihr Banner mit dem Update, ohne Einstellungsänderung. Der Kontrast der Knopfschrift gilt nun für beide Knöpfe; wer eine helle Knopffarbe gewählt hat, muss „Schrift auf dem Knopf“ passend setzen. Ob ein Scanner oder eine Behörde das Banner damit als rechtskonform ansieht, ist nicht garantiert.
## ADR 130 – Editor: lokale Sicherung statt Autosave auf dem Server (10.11.2026) ## ADR 130 – Editor: lokale Sicherung statt Autosave auf dem Server (10.11.2026)
**Kontext:** Der Entwicklungsplan nennt „Autosave mit sichtbarem Speicherstatus“. Gespeichert wurde nur per Knopf oder Strg+S; nach Absturz, geschlossenem Tab oder abgelaufener Sitzung war die Arbeit weg, und „Als JSON sichern“ hatte kein Gegenstück zum Einlesen. **Kontext:** Der Entwicklungsplan nennt „Autosave mit sichtbarem Speicherstatus“. Gespeichert wurde nur per Knopf oder Strg+S; nach Absturz, geschlossenem Tab oder abgelaufener Sitzung war die Arbeit weg, und „Als JSON sichern“ hatte kein Gegenstück zum Einlesen.
@@ -451,7 +459,7 @@ Umut wollte für die DEEG-Website „kein Kontaktformular weiteres, sondern so e
**Gestaltung aus den Einstellungen, nicht aus dem Editor.** Der Hinweis ist kein Baustein einer Seite, sondern eine Frage der Website; seine Gestaltung gehört deshalb neben seinen Text unter Einstellungen → Einwilligung: Anordnung (`karte`, `leiste`, `ecke`), Form (`weich`, `rund`, `eckig`), Überschrift, vier Farben (Fläche, Schrift, Knopf, Schrift auf dem Knopf). Die Farben nehmen `#hex` oder `@schlüssel` aus der Palette wie der Nach-oben-Knopf; `Theme::cssColor()` löst beides für beide auf. Ausgegeben wird das als `:root{--kant-consent-…}` im gehashten Stylesblock (`Consent::styles()`), die Anordnung als Klasse. Die Form setzt zwei Radien zugleich – Fläche und Knöpfe gehören zusammen; zwei Regler dafür wären zwei, die man gegeneinander verstellt. Leer heißt weiterhin Papier, Tinte und Akzent des Themes. **Gestaltung aus den Einstellungen, nicht aus dem Editor.** Der Hinweis ist kein Baustein einer Seite, sondern eine Frage der Website; seine Gestaltung gehört deshalb neben seinen Text unter Einstellungen → Einwilligung: Anordnung (`karte`, `leiste`, `ecke`), Form (`weich`, `rund`, `eckig`), Überschrift, vier Farben (Fläche, Schrift, Knopf, Schrift auf dem Knopf). Die Farben nehmen `#hex` oder `@schlüssel` aus der Palette wie der Nach-oben-Knopf; `Theme::cssColor()` löst beides für beide auf. Ausgegeben wird das als `:root{--kant-consent-…}` im gehashten Stylesblock (`Consent::styles()`), die Anordnung als Klasse. Die Form setzt zwei Radien zugleich – Fläche und Knöpfe gehören zusammen; zwei Regler dafür wären zwei, die man gegeneinander verstellt. Leer heißt weiterhin Papier, Tinte und Akzent des Themes.
**Was gleich bleibt, mit Absicht.** „Nur notwendige“ bleibt ein Rahmenknopf in der Schriftfarbe, genauso groß wie „Alle akzeptieren“, in derselben Zeile – die Farbe des Knopfes ist einstellbar, die Gleichwertigkeit der Antworten nicht. Kein Skript, keine Cookie-Wand. **Was gleich bleibt, mit Absicht.** „Nur notwendige“ bleibt ein Rahmenknopf in der Schriftfarbe, genauso groß wie „Alle akzeptieren“, in derselben Zeile – die Farbe des Knopfes ist einstellbar, die Gleichwertigkeit der Antworten nicht. Kein Skript, keine Cookie-Wand. *(Ab 1.43.1 abgelöst durch ADR 131: beide Knöpfe sehen gleich aus.)*
**Archiv und Einwilligungsseite.** Beide trugen bisher keine Palette im Kopf. Sie bekommen jetzt Theme- und Hinweisvariablen als gehashten Stylesblock; die Einwilligungsseite erweitert ihre Richtlinie um genau diesen einen Hash. **Archiv und Einwilligungsseite.** Beide trugen bisher keine Palette im Kopf. Sie bekommen jetzt Theme- und Hinweisvariablen als gehashten Stylesblock; die Einwilligungsseite erweitert ihre Richtlinie um genau diesen einen Hash.
+12
View File
@@ -1,5 +1,17 @@
# Projektstatus # Projektstatus
## Fassung 1.43.1: Einwilligung – beide Antworten gleich gestaltet (11.11.2026)
**Anlass:** SUASIO-Scan von huefner-gartenbau.de: Einwilligung „nicht rechtskonform“ wegen Nudging (grün gefülltes „Alle akzeptieren“ neben Rahmenknopf „Nur notwendige“). ADR 131.
**Erledigt:** `site.css`: „Nur notwendige“ hat dieselbe Füllung, Schrift und Hover-Wirkung wie „Alle akzeptieren“; nur „Auswahl speichern“ bleibt Rahmenknopf. Einstellungen: Feld heißt „Farbe der Knöpfe“, Hilfetext angepasst; README und ADR 097 nachgezogen.
**Geprüft:** Live-Seite: kein Cookie beim Laden, `kant_consent` erst nach der Wahl; Formular mit Labels und Datenschutz-Checkbox. Lokal (Hüfner, 8102): beide Knöpfe `rgb(6,127,48)`, weiße Schrift, gleich groß. PHPUnit 701 grün (PHP 8.4), `test:editor` grün (inkl. Banner und axe), `test:buttons` grün.
**Bekannte Fehler / offen:** `test:responsive-navigation` scheitert im Editor-Strukturbaum (`qa-all` nicht sichtbar, Zeile 54), vor dem Banner-Teil; auf 1.43.0 nicht nachgestellt (Release-Ordner ohne `vendor`). `test:browser` gegen Hüfner scheitert an der HTML-Obergrenze (153 529 > 150 000 Bytes), bekannt knapp. Ob SUASIO den Punkt nach dem Update grün meldet, ist erst nach einem neuen Scan sicher. In der Datenschutzerklärung von Hüfner `kant_consent` mit Name, Zweck und Dauer nennen (macht Umut).
**Nächster Schritt:** Release 1.43.1 veröffentlichen, Hüfner aktualisieren, neu scannen.
## Fassung 1.43.0: Oberfläche – lokale Sicherung im Editor, Einstellungen gegliedert, Archive barrierefrei (10.11.2026) ## Fassung 1.43.0: Oberfläche – lokale Sicherung im Editor, Einstellungen gegliedert, Archive barrierefrei (10.11.2026)
**Anlass:** Umut: „Ja, weiter“ – das vierte Paket aus der Komplettanalyse. ADR 130. **Anlass:** Umut: „Ja, weiter“ – das vierte Paket aus der Komplettanalyse. ADR 130.
+5 -2
View File
@@ -199,9 +199,12 @@ p{hyphens:auto}
.consent-bar p{margin:0 0 16px;color:color-mix(in srgb,currentColor 82%,transparent)} .consent-bar p{margin:0 0 16px;color:color-mix(in srgb,currentColor 82%,transparent)}
.consent-actions{display:flex;flex-wrap:wrap;gap:10px} .consent-actions{display:flex;flex-wrap:wrap;gap:10px}
.consent-button{display:inline-flex;align-items:center;justify-content:center;flex:1 1 150px;min-height:46px;padding:11px 18px;border-radius:var(--kant-consent-button-radius,10px);border:1.5px solid var(--kant-consent-accent,var(--k-consent,var(--accent)));background:var(--kant-consent-accent,var(--k-consent,var(--accent)));color:var(--kant-consent-accent-ink,#fff);font:inherit;font-weight:600;cursor:pointer;transition:filter .12s,background-color .12s} .consent-button{display:inline-flex;align-items:center;justify-content:center;flex:1 1 150px;min-height:46px;padding:11px 18px;border-radius:var(--kant-consent-button-radius,10px);border:1.5px solid var(--kant-consent-accent,var(--k-consent,var(--accent)));background:var(--kant-consent-accent,var(--k-consent,var(--accent)));color:var(--kant-consent-accent-ink,#fff);font:inherit;font-weight:600;cursor:pointer;transition:filter .12s,background-color .12s}
.consent-decline,.consent-choice{background:transparent;color:inherit;border-color:color-mix(in srgb,currentColor 28%,transparent)} /* „Alle akzeptieren“ und „Nur notwendige“ sehen gleich aus (ADR 131): eine farbig hervorgehobene
Zustimmung neben einem Rahmenknopf gilt als Lenkung. Nur „Auswahl speichern“ in der
aufgeklappten Einzelwahl bleibt ein Rahmenknopf. */
.consent-choice{background:transparent;color:inherit;border-color:color-mix(in srgb,currentColor 28%,transparent)}
.consent-button:hover{filter:brightness(.94)} .consent-button:hover{filter:brightness(.94)}
.consent-decline:hover,.consent-choice:hover{filter:none;background:color-mix(in srgb,currentColor 7%,transparent)} .consent-choice:hover{filter:none;background:color-mix(in srgb,currentColor 7%,transparent)}
.consent-button:focus-visible,.consent-bar a:focus-visible,.consent-bar summary:focus-visible,.consent-bar input:focus-visible{outline:3px solid var(--kant-consent-accent,var(--k-consent,var(--accent)));outline-offset:2px} .consent-button:focus-visible,.consent-bar a:focus-visible,.consent-bar summary:focus-visible,.consent-bar input:focus-visible{outline:3px solid var(--kant-consent-accent,var(--k-consent,var(--accent)));outline-offset:2px}
/* Fusszeile der Frage: Einzelwahl links, Rechtslinks rechts, auf einer Linie. Aufgeklappt /* Fusszeile der Frage: Einzelwahl links, Rechtslinks rechts, auf einer Linie. Aufgeklappt
nimmt die Einzelwahl die volle Breite und die Links rutschen rechtsbuendig darunter. */ nimmt die Einzelwahl die volle Breite und die Links rutschen rechtsbuendig darunter. */
+2 -2
View File
@@ -342,7 +342,7 @@
<input id="consentInk" name="consentInk" value="{{ settings.consentInk }}" placeholder="@ink" data-color data-palette="{{ palette|json_encode|e('html_attr') }}"> <input id="consentInk" name="consentInk" value="{{ settings.consentInk }}" placeholder="@ink" data-color data-palette="{{ palette|json_encode|e('html_attr') }}">
</div> </div>
<div> <div>
<label for="consentAccent">Farbe des Knopfes „Alle akzeptieren“</label> <label for="consentAccent">Farbe der Knöpfe</label>
<input id="consentAccent" name="consentAccent" value="{{ settings.consentAccent }}" placeholder="@accent" data-color data-palette="{{ palette|json_encode|e('html_attr') }}"> <input id="consentAccent" name="consentAccent" value="{{ settings.consentAccent }}" placeholder="@accent" data-color data-palette="{{ palette|json_encode|e('html_attr') }}">
<p class="field-help">Färbt auch den Streifen oben, das Symbol und die Kästchen.</p> <p class="field-help">Färbt auch den Streifen oben, das Symbol und die Kästchen.</p>
</div> </div>
@@ -351,7 +351,7 @@
<input id="consentAccentInk" name="consentAccentInk" value="{{ settings.consentAccentInk }}" placeholder="#ffffff" data-color data-palette="{{ palette|json_encode|e('html_attr') }}"> <input id="consentAccentInk" name="consentAccentInk" value="{{ settings.consentAccentInk }}" placeholder="#ffffff" data-color data-palette="{{ palette|json_encode|e('html_attr') }}">
</div> </div>
</div> </div>
<p class="field-help">Leer heißt: Papier, Tinte und Akzent aus dem Design. „Nur notwendige“ bleibt bewusst ein Rahmenknopf in der Schriftfarbe – beide Antworten sind gleich groß, keine wird versteckt.</p> <p class="field-help">Leer heißt: Papier, Tinte und Akzent aus dem Design. „Alle akzeptieren“ und „Nur notwendige“ bekommen bewusst dieselbe Farbe und Größe – eine hervorgehobene Zustimmung gilt als Lenkung.</p>
</fieldset> </fieldset>
<div class="fields"> <div class="fields">
<div> <div>