Make the consent notice styleable and keep the back-to-top button reachable in 1.14.1

The back-to-top button was hidden as long as the consent question was open, on every device - and on a phone the question tends to stay open. Instead of `display:none` it now anchors itself 12px above the bar wherever the bar covers its corner: below 800px for the centred card, at every width for the full-width bar and the corner card. Browsers without anchor positioning keep hiding it there. The bar renders before the button so it can be an anchor, and the reserved bottom padding grows to 320px below 620px, where the bar with its default text is up to 299px tall. The notice itself gets a face. Settings → Einwilligung now carries layout (card, bar, corner), shape (soft, round, square - one setting for the box and its buttons), a heading and four colours, each as #hex or @palette key. `Theme::cssColor()` resolves both, replacing the copy inside the back-to-top code; `Consent::styles()` writes the values as `--kant-consent-*` into the hashed style block. The base layout changes with it: an accent stripe and shield icon, equal-width buttons, a disclosure with a chevron, underlined legal links, a two-column bar on wide screens. Declining stays an outlined button of the same size next to accepting. The archive and the consent page carry the same variables - the archive had no palette at all until now. In the editor, rows with an own value are labelled in orange rather than bold with a dot; the device chips sit 6px apart with the focus ring inside the gap. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
2026-09-15 06:57:38 +02:00
1 parent 860bed9199
commit 0bdcc7f90e
@@ -4,6 +4,14 @@ Lokaler CMS-Prototyp für PHP-Webhosting mit erstem visuellen Editor. Symfony 7.

 Die übernommenen Originaldokumente sind `AGENTS.md` und `ENTWICKLUNGSPLAN.md`. Den tatsächlichen Stand enthält `docs/STATUS.md`, Entscheidungen und Datenmodell stehen in `docs/ARCHITECTURE.md`.

+## 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 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.
+
+**Im Designbereich** sind belegte Eigenschaften jetzt in Orange beschriftet, nicht nur mit Punkt und Fettdruck; die Gerätechips D/T/M stehen weiter auseinander, und der Fokusring bleibt in der Lücke.
+
 ## Schriften vom eigenen Server, Hinweise auf jedem Bildschirm (ab 1.14.0)

 **Schriften kommen ausschließlich von deinem Server.** Die Ausgabe verlinkt kein Stylesheet mehr von `fonts.googleapis.com` – weder die öffentliche Seite noch die Editorvorschau, die es bisher bei jedem Aufruf tat. Fehlen die Dateien, zeigt die Website die eingestellte Ersatzschrift und sagt es dir. Geholt werden sie wie bisher einmalig unter **Design → Schriften ausliefern**. Zusätzlich wird jetzt **jeder** Schnitt des Designs vorab geladen: bisher waren es die ersten zwei je Familie, weshalb die Überschriften sichtbar von der Ersatzschrift auf die richtige Schrift sprangen.
@@ -1 +1 @@
-1.14.0
+1.14.1
@@ -2,7 +2,19 @@

 Stand: 15.09.2026. Arbeitstitel KantSites; Produktname offen.

-## ADR 095 – Schriften ausschließlich vom eigenen Server (15.09.2026)
+## ADR 097 – Der Einwilligungshinweis bekommt ein Gesicht, und der Nach-oben-Knopf weicht ihm aus (15.09.2026)
+
+**Anlass.** Umut gefiel das Banner nicht: nicht gestaltbar, ein kantiger Kasten in Papierfarbe. Und der Nach-oben-Knopf „funktionierte auf dem Handy nicht“ – er war ausgeblendet, solange die Frage offen stand, und auf dem Telefon bleibt sie das oft.
+
+**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.
+
+**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.
+
+**Der Nach-oben-Knopf.** Statt `display:none` bei offener Frage setzt er sich per Ankerpositionierung auf die Oberkante der Leiste (`anchor-name`, `bottom:calc(anchor(top) + 12px)`), wo sie die Ecke abdeckt: bis 799 px bei der Karte, auf jeder Breite bei Leiste und Ecke (`:has()`). Browser ohne Ankerpositionierung blenden ihn dort weiter aus. Damit die Leiste als Anker taugt, steht sie in `page.html.twig` vor dem Knopf. Der reservierte Abstand unten wächst auf 320 px bis 620 px, weil die Leiste dort mit Standardtext bis 290 px hoch ist.
+
+## ADR 096 – Schriften ausschließlich vom eigenen Server (15.09.2026)

 **Entscheidung.** Die Ausgabe verlinkt kein Stylesheet von `fonts.googleapis.com` mehr, in keinem Pfad. Liegen die Schriftdateien lokal, liefert die Website sie selbst; liegen sie nicht vor, zeigt sie die eingestellte Ersatzschrift. `Theme::googleFontsUrl()` entfällt, und die Richtlinien nennen keinen fremden Schrifthost mehr – öffentlich `font-src 'self'`, in der Verwaltung zusätzlich `style-src 'self'`. Das Herunterladen der Dateien bleibt, wo es hingehört: ein Knopf im Designbereich beziehungsweise `cms:fonts:fetch`, einmalig und von einem Menschen ausgelöst.

@@ -450,7 +462,7 @@ Das Stylesheet steht aus Geschwindigkeitsgründen inline und ist **über seinen

 `Theme` ist die Grundlage darüber: eine frei definierbare Farbpalette, Schriften und die Grundtypografie. Farben werden als `@schlüssel` referenziert und zu CSS-Variablen; eine Farbe zu ändern wirkt überall, wo sie benutzt wird. Die Überschriftengrößen entstehen aus einer modularen Skala, sodass eine Zahl die ganze Hierarchie verschiebt.

-**Schriften von Google, aber nicht zur Laufzeit.** Eine Familie lässt sich weiterhin bei Google aussuchen; ausgeliefert wird sie aber ausschließlich vom eigenen Server. Die Dateien holt ein Knopf im Designbereich einmalig her, und die Ausgabe verlinkt nie ein fremdes Stylesheet – Näheres in ADR 095.
+**Schriften von Google, aber nicht zur Laufzeit.** Eine Familie lässt sich weiterhin bei Google aussuchen; ausgeliefert wird sie aber ausschließlich vom eigenen Server. Die Dateien holt ein Knopf im Designbereich einmalig her, und die Ausgabe verlinkt nie ein fremdes Stylesheet – Näheres in ADR 096.

 Die alten Tokenwerte aus v2 bis v9 bleiben gültig und werden weiterhin gerendert. Blöcke, die noch welche tragen, zeigen sie im Editor in einem eingeklappten Bereich „Klassische Werte dieser Seite“, damit ältere Seiten bearbeitbar bleiben, ohne das neue Panel zu überladen.

@@ -255,7 +255,7 @@ Die Messung prüft die gemeinsame öffentliche Ausgabe nach Entfernung der feste
 - **154 PHP-Tests / 563 Assertions** unter PHP 8.2.12 und PHP 8.4.22 erfolgreich, dazu **15 JavaScript-Modelltests**.
 - Ein v10-Dokument mit Palettenfarbe, eigenem Farbwert, Abständen je Seite, Ecken je Ecke, Schatten, Buchstabenabstand, Hover-Zustand und eigenem Mobilwert wird Byte für Byte gespeichert und zu blockgenauem CSS: Regel für den Block, eigene Regel für `:hover,:focus-within` und eine Media Query für die schmale Breite.
 - **Vierzehn abgewiesene Eingaben schreiben nichts.** Darunter gezielt die Ausbruchsversuche: eine Farbe als Funktion (`rgb(1,2,3)`), eine Länge als Ausdruck (`calc(1px + 2px)`), eine angehängte Deklaration (`18px;position:fixed`), ein Schriftschlüssel mit Anführungszeichen und ein Hintergrundbild als Dateipfad. Jeder dieser Werte scheitert am verankerten Muster seines Typs, bevor er gespeichert wird.
- **Die Sicherheitsrichtlinie wurde eigens geprüft:** das erzeugte Stylesheet ist über seinen eigenen SHA-256-Hash erlaubt, `unsafe-inline` kommt im Kopf nicht vor, und Skripte bleiben auf Seiten ohne Tabs abgeschaltet. Ein fremder Schrifthost wird nie erlaubt und nie kontaktiert: Schriften liefert seit 1.14.0 ausschliesslich der eigene Server (ADR 095).
+- **Die Sicherheitsrichtlinie wurde eigens geprüft:** das erzeugte Stylesheet ist über seinen eigenen SHA-256-Hash erlaubt, `unsafe-inline` kommt im Kopf nicht vor, und Skripte bleiben auf Seiten ohne Tabs abgeschaltet. Ein fremder Schrifthost wird nie erlaubt und nie kontaktiert: Schriften liefert seit 1.14.0 ausschliesslich der eigene Server (ADR 096).
 - **Acht ungültige Themes** werden abgewiesen, ohne das gespeicherte Theme zu verändern; danach liefert das Theme weiterhin die Voreinstellungen.
 - Im Editormodell geprüft: Vererbung, einzelnes Zurücksetzen, Entfernen leerer Reste, Kopieren ohne geteilte Objekte und vollständiges Undo.
 - **Im Browser geprüft wurde nur der Aufbau, nicht die Bedienung.** Im laufenden Editor wurde über das DOM bestätigt, dass das Designpanel aus dem Serverschema entsteht: sieben Gruppen, 58 Felder, 11 Farbwähler, 12 Schieberegler, 34 Einheitenauswahlen. **Es wurde kein Gestaltungsvorgang von Hand ausgeführt**, keine Tastaturbedienung erprobt und keine axe- oder Lighthouse-Messung gemacht. Für ein Werkzeug dieser Größe ist das ein erheblicher Vorbehalt.
@@ -1,5 +1,35 @@
 # Projektstatus

+## 1.14.1 – Einwilligungshinweis gestaltbar, Nach-oben-Knopf bei offener Frage, orange Beschriftungen (15.09.2026)
+
+**Anlass:** Umut wollte das Banner gestaltbar (rund, Farben) und schöner, den Abstand unten korrigiert, belegte Eigenschaften im Editor orange statt nur fett mit Punkt, und Gerätechips, die sich „aktiv überlagern“.
+
+**Einwilligungshinweis (ADR 097).** Sieben neue Einstellungen: `consentLayout` (karte/leiste/ecke), `consentShape` (weich/rund/eckig), `consentTitle`, `consentColor`, `consentInk`, `consentAccent`, `consentAccentInk`; Farben mit `StyleSchema::COLOR` geprüft, Palette über `Theme::cssColor()` (neu, ersetzt die Kopie im Nach-oben-Knopf). `Consent::styles()` schreibt `:root{--kant-consent-…}` in den gehashten Stylesblock; die Anordnung ist eine Klasse. Neues Grundlayout: Streifen und Symbol in der Knopffarbe, gleich breite Knöpfe, aufklappbares „Einzeln wählen“ mit Pfeil, unterstrichene Rechtslinks; Leiste auf breiten Bildschirmen zweispaltig. Archiv und `/einwilligung` bekommen Theme- und Hinweisvariablen als gehashten Stylesblock – das Archiv trug bisher gar keine Palette.
+
+**Abstand unten:** 320 px bis 620 px (Leiste bis 299 px hoch), 270 px bis 899 px, 200 px darüber; die Fläche scrollt ab `100dvh − 24px` in sich. Nach-oben-Knopf hebt sich bei Leiste und Ecke auf jeder Breite (`:has()`), bei der Karte bis 799 px.
+
+**Editor:** belegte Beschriftungen in `--used` (#9d4e0d, 5,6:1); Chips mit 6 px Lücke, Fokusring ohne Versatz, Gruppe `flex:none`. Ein Überlagern der Chips ließ sich in 1.14.0 nicht reproduzieren – am Handy (390 px) liegen die drei Chips bei 22 px Breite mit 6 px Abstand, kein `outline` gezeichnet; die Rückmeldung bezog sich wohl auf den `outline`-Ring von 1.13.0.
+
+**Geprüft:** PHP 505 Tests grün, darunter neu `testTheConsentQuestionTakesLayoutShapeAndColoursFromTheSettings` (Standard, eigene Werte, unbekannter Palettenschlüssel fällt weg, Einwilligungsseite mit Hash, ungültige Farbe abgewiesen). Chromium: vier Varianten (Karte, Leiste, Ecke rund dunkel, Karte eckig dunkel) auf 1440 und 390 px – Klasse, Radien, Farben und Überschrift stimmen, Nach-oben-Knopf sichtbar, treffbar, ohne Überlappung; `/einwilligung` 200 mit gehashtem `style-src`. Nach-oben-Prüfung auf acht Breiten bestanden. `browser-check.mjs`, `editor-check.mjs` (Einstellungen, Einwilligung) und axe über die Editorseitenleiste bestanden. Screenshots: `reports/consent-look/`, `reports/admin-hints/`.
+
+**Nicht geprüft:** echtes iOS-Safari; der `@supports not`-Zweig; Lighthouse.
+
+## Nach-oben-Knopf bei offener Einwilligungsfrage (15.09.2026)
+
+**Anlass:** Umut meldete, der Nach-oben-Knopf funktioniere auf dem Handy nicht.
+
+**Befund.** Der Knopf selbst funktioniert auf dem Telefon: In iPhone- und Pixel-Emulation (Chromium), lokal wie auf `web.kant-it.de` (dort bereits 1.14.0 mit `scrolled.js`), erscheint er nach 500 px, ist treffbar, und Tippen springt nach oben – **sobald die Einwilligungsfrage beantwortet ist**. Vorher galt `body.consent-open .scroll-top{display:none}` auf allen Geräten. Live trägt jeder Erstbesuch `consent-open`, und auf dem Telefon bleibt die Leiste unten oft einfach stehen – der Knopf kam dort nie. Kein Fehler im Skript und nicht der alte Safari-Fehler aus 1.13.0.
+
+**Korrektur (`site.css`, `page.html.twig`).** Der Knopf bleibt bei offener Frage sichtbar. Gemessen deckt die Leiste die rechte Ecke nur bis knapp 800 px ab (bis 620 px volle Breite, 262–285 px hoch; darüber zentriert mit höchstens 620 px). In dieser Stufe setzt sich der Knopf per Ankerpositionierung 12 px auf die Oberkante der Leiste (`anchor-name:--kant-consent`, `bottom:calc(anchor(top) + 12px)`), unabhängig davon, wie hoch ihr Text umbricht. Browser ohne Ankerpositionierung blenden ihn dort weiter aus (`@supports not`). Ab 800 px bleibt er an seinem Platz. Weil ein Anker im Dokument vor dem positionierten Element stehen muss, gibt die Vorlage die Leiste jetzt vor dem Knopf aus.
+
+**Geprüft:** Chromium, isolierte Kopie der Pilotdatenbank, Einwilligung offen auf 360, 390, 700, 768, 799, 800 und 1440 px sowie beantwortet auf 390 px – in allen acht Fällen sichtbar, keine Überlappung mit der Leiste, treffbar, nach dem Tippen `scrollY` 0. Twig-Lint gültig. PHP-Tests 504 grün, `browser-check.mjs` und `editor-check.mjs` (einschließlich Einwilligungsabläufe) bestanden.
+
+**Nicht geprüft:** echtes iOS-Safari – WebKit ist für Playwright auf diesem Rechner nicht installiert. Der `@supports not`-Zweig wurde nicht ausgeführt, weil Chromium Ankerpositionierung kann.
+
+**Nebenbefund, nicht geändert:** Bis 620 px reserviert `body.consent-open` 260 px Abstand unten, die Leiste ist mit Standardtext bis 285 px hoch – auf kleinen Telefonen liegen die letzten rund 25 px der Seite unter der offenen Leiste.
+
+**Nächster Schritt:** nicht committet und nicht veröffentlicht; live erst mit einem Release (z. B. 1.14.1).
+
 ## 1.14.0 veröffentlicht (15.09.2026)

 Tag `v1.14.0` (Commit `a434e0c`), Release: https://git.kant-it.de/kantarci/KantSites/releases/tag/v1.14.0. Enthält die Schriften vom eigenen Server, den Hinweisstreifen, System und Update auf dem Telefon, die Gerätechips sowie Öffnungszeiten, Einsatzgebiet und FAQ in den strukturierten Daten.
@@ -190,7 +190,7 @@ html:has(>.editor-body){overflow:hidden;height:100%}
 .design-row-head label{margin:0;font-size:11px;line-height:1.5;flex:1;min-width:0}
 /* Belegte Zeilen tragen dieselbe Farbe wie die belegten Geraetechips - eine Farbe, eine
   Bedeutung: hier steht ein eigener Wert und nicht der geerbte. */
-.design-own .design-row-head label{color:#6f3c0a;font-weight:700}
+.design-own .design-row-head label{color:var(--used);font-weight:700}
 .design-own .design-row-head label::before{content:'● ';color:var(--used)}
 .design-reset-one{font-size:14px;padding:2px 6px;min-height:24px;line-height:1}
 .design-inherited{font-size:10px;color:var(--muted);margin:5px 0 0;line-height:1.45}
@@ -222,13 +222,14 @@ html:has(>.editor-body){overflow:hidden;height:100%}
   "Gerade bearbeitet" ist ein Rahmen, und zwar ein Rahmen INNEN: ein `outline` liegt ausserhalb
   des Kaestchens, laeuft bei 2 px Abstand unter den Nachbarn und wird von der seitlich
   beschnittenen Spalte gekappt - es sah aus wie ein abgeschnittener roter Kasten. */
-.device-chips{display:flex;gap:4px;margin-left:auto}
+.device-chips{display:flex;flex:none;gap:6px;margin-left:auto}
 .device-chip{width:22px;height:22px;display:grid;place-items:center;padding:0;min-height:0;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--muted);font:700 10px/1 system-ui,sans-serif;cursor:pointer}
 .device-chip:hover{border-color:var(--ink)}
 .device-chip-own{background:var(--used);border-color:var(--used);color:#fff}
 .device-chip[aria-pressed=true]{border-width:2px;border-color:var(--ink)}
 .device-chip-own[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px #fff}
-.device-chip:focus-visible{outline-width:2px;outline-offset:1px}
+/* Der Fokusring bleibt innerhalb der Luecke zwischen zwei Chips - nichts liegt uebereinander. */
+.device-chip:focus-visible{outline-width:2px;outline-offset:0}
 .design-side-head{margin-bottom:5px}
 .design-side-head .design-group-label{margin:0}
 /* A number field that can be dragged sideways. The cursor is the only announcement it needs. */
@@ -126,31 +126,51 @@ p{hyphens:auto}

 /* The consent question. Fixed to the bottom, but it never covers the whole page: the content
   stays readable while the decision is open, because a wall would make "accept" the only way
-   forward. Accepting and refusing are the same button in the same row. */
-.consent-bar{position:fixed;inset-inline:12px;bottom:12px;z-index:50;max-width:620px;margin-inline:auto;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:20px 22px;box-shadow:0 18px 50px color-mix(in srgb,var(--ink) 15%,transparent);font-size:14px;line-height:1.6}
-.kant .consent-bar h2{font-size:16px;margin:0 0 8px}
-.consent-bar p{margin:0 0 14px}
+   forward. Accepting and refusing are the same button in the same row.
+
+   Aussehen aus den Einstellungen: `--kant-consent-*` im Kopf der Seite (Consent::styles), die
+   Anordnung als Klasse. Ohne Einstellung gilt Papier, Tinte und Akzent des Themes. Ein Wert wie
+   `--k-consent` aus der Palette bleibt als Zwischenstufe erhalten. */
+.consent-bar{position:fixed;inset-inline:16px;bottom:16px;z-index:50;max-width:640px;max-height:calc(100dvh - 24px);overflow:auto;margin-inline:auto;background:var(--kant-consent-bg,var(--paper));color:var(--kant-consent-ink,var(--ink));border:1px solid color-mix(in srgb,currentColor 12%,transparent);border-radius:var(--kant-consent-radius,18px);padding:22px 24px 20px;box-shadow:0 24px 60px color-mix(in srgb,var(--ink) 22%,transparent);font-size:14px;line-height:1.6;overscroll-behavior:contain}
+/* Ein schmaler Streifen in der Akzentfarbe oben: die Fläche gehört sichtbar zur Website. */
+.consent-bar::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:var(--kant-consent-accent,var(--k-consent,var(--accent)))}
+.kant .consent-bar h2{display:flex;align-items:center;gap:10px;font-size:17px;line-height:1.3;margin:0 0 8px}
+.consent-icon{flex:none;color:var(--kant-consent-accent,var(--k-consent,var(--accent)))}
+.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-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 18px;border-radius:8px;border:1px solid var(--k-consent,var(--accent));background:var(--k-consent,var(--accent));color:#fff;font:inherit;font-weight:600;cursor:pointer}
-.consent-actions .consent-button:last-child{background:var(--paper);color:var(--ink);border-color:var(--line)}
+.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)}
 .consent-button:hover{filter:brightness(.94)}
-.consent-button:focus-visible,.consent-bar a:focus-visible,.consent-bar summary:focus-visible,.consent-bar input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
+.consent-decline:hover,.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-details{margin-top:14px}
-.consent-details>summary{cursor:pointer;font-size:13px;font-weight:600;padding:4px 0}
+.consent-details>summary{cursor:pointer;font-size:13px;font-weight:600;padding:6px 0;list-style:none;display:inline-flex;align-items:center;gap:6px}
+.consent-details>summary::-webkit-details-marker{display:none}
+.consent-details>summary::after{content:'';width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
+.consent-details[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
+.consent-details>summary:hover{text-decoration:underline}
 .consent-groups{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
 .consent-groups label{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5}
-.consent-groups input{margin-top:3px;width:18px;height:18px;flex-shrink:0}
-.consent-choice{margin-top:14px;background:var(--paper);color:var(--ink);border-color:var(--line)}
-.consent-links{margin:14px 0 0;font-size:12px}
-.consent-links a{color:var(--accent)}
+.consent-groups input{margin-top:3px;width:18px;height:18px;flex-shrink:0;accent-color:var(--kant-consent-accent,var(--k-consent,var(--accent)))}
+.consent-choice{margin-top:14px;flex:none;width:auto}
+.consent-links{margin:14px 0 0;font-size:12px;color:color-mix(in srgb,currentColor 72%,transparent)}
+.consent-links a{color:inherit;text-decoration:underline;text-underline-offset:2px}
+.consent-links a:hover{color:var(--kant-consent-accent,var(--k-consent,var(--accent)))}
+/* Leiste: über die ganze Breite am unteren Rand, auf breiten Bildschirmen Text links und Knöpfe
+   rechts. Ecke: eine kleine Karte rechts unten, die den Inhalt kaum verdeckt. */
+.consent-layout-leiste{inset-inline:0;bottom:0;max-width:none;border-radius:var(--kant-consent-radius,18px) var(--kant-consent-radius,18px) 0 0;border-inline:0;border-bottom:0;padding-inline:max(24px,calc((100% - 1180px) / 2))}
+@media (min-width:900px){.consent-layout-leiste{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 40px;align-items:center}.consent-layout-leiste .consent-body p{margin-bottom:0}.consent-layout-leiste .consent-form{width:360px;max-width:100%}}
+.consent-layout-ecke{inset-inline:auto 16px;max-width:400px;margin:0}
 /* While the question is open the bar is fixed at the bottom, so the page has to end above it -
   otherwise it covers the last element, and an embed's own consent button sat right underneath.
-   Found by the browser test, which could not click it. */
-body.consent-open{padding-bottom:260px}
+   Found by the browser test, which could not click it. Auf schmalen Bildschirmen ist die Leiste
+   mit Standardtext bis 290 px hoch; 320 px lassen ihr Luft, ohne einen Bildschirm zu verschenken. */
+body.consent-open{padding-bottom:320px}
+@media (min-width:621px){body.consent-open{padding-bottom:270px}}
@media (min-width:900px){body.consent-open{padding-bottom:200px}}
 .consent-page main{max-width:680px;margin-inline:auto;padding:40px 20px}
-.consent-page .consent-bar{position:static;inset:auto;box-shadow:none;max-width:none;margin-top:24px}
-@media (max-width:620px){.consent-bar{inset-inline:0;bottom:0;border-radius:14px 14px 0 0;padding:16px}.consent-actions .consent-button{flex:1 1 140px}}
+.consent-page .consent-bar{position:static;inset:auto;box-shadow:none;max-width:none;max-height:none;margin:24px 0 0;display:block}
+@media (max-width:620px){.consent-bar,.consent-layout-ecke{inset-inline:0;bottom:0;max-width:none;border-radius:var(--kant-consent-radius,18px) var(--kant-consent-radius,18px) 0 0;border-inline:0;border-bottom:0;padding:18px 18px 16px}.consent-layout-leiste{padding-inline:18px}}

 /* An embedded third party, and what stands in its place until it may load. */
 .block-embed iframe{display:block;width:100%;border:0;border-radius:10px;background:color-mix(in srgb,var(--ink) 8%,var(--paper))}
@@ -406,8 +426,21 @@ body.consent-open{padding-bottom:260px}
 .scroll-top:hover{filter:brightness(1.08)}
 .scroll-top:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media (max-width:767px){.scroll-top{bottom:16px;right:16px}.scroll-top-links{left:16px;right:auto}}
-/* Solange der Einwilligungsdialog unten steht, würde der Knopf darauf liegen. */
-body.consent-open .scroll-top{display:none}
+/* Solange die Einwilligungsfrage offen ist, bleibt der Knopf da. Frueher verschwand er ganz -
+   und auf dem Telefon bleibt die Frage oft einfach stehen, der Knopf kam dort also nie.
+   Bis 799 px deckt die Leiste die Ecke ab, in der er steht: dort setzt er sich per
+   Ankerpositionierung auf ihre Oberkante, wie hoch ihr Text auch umbricht. Ab 800 px steht die
+   Leiste zentriert mit Rand, die Ecke bleibt frei. Ein Browser ohne Ankerpositionierung blendet
+   ihn in der schmalen Stufe weiter aus - lieber kein Knopf als einer unter der Leiste. Der Anker
+   muss im Dokument vor dem Knopf stehen; page.html.twig gibt die Leiste deshalb zuerst aus. */
+.consent-bar{anchor-name:--kant-consent}
+@media (max-width:799px){
+@supports (anchor-name:--kant-consent){body.consent-open .scroll-top{position-anchor:--kant-consent;bottom:calc(anchor(top) + 12px)}}
+@supports not (anchor-name:--kant-consent){body.consent-open .scroll-top{display:none}}
+}
+/* Leiste und Ecke decken die Ecke auf jeder Breite ab - dort gilt dasselbe ohne Stufe. */
+@supports (anchor-name:--kant-consent){body.consent-open:has(.consent-layout-leiste,.consent-layout-ecke) .scroll-top{position-anchor:--kant-consent;bottom:calc(anchor(top) + 12px)}}
+@supports not (anchor-name:--kant-consent){body.consent-open:has(.consent-layout-leiste,.consent-layout-ecke) .scroll-top{display:none}}
 /* Sichtbar, sobald der Leser ein Stueck gescrollt hat - gesteuert von scrolled.js ueber
   `kant-top-armed` und `kant-top-shown`. Ohne Skript bleibt der Knopf einfach sichtbar. */
 html.kant-top-armed .scroll-top{opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s,visibility .25s,transform .25s}
@@ -172,8 +172,39 @@ final class Consent
            'decided' => null !== $decision,
            'decidedAt' => $decision['at'] ?? null,
            'text' => $settings['consentText'],
+            'title' => $settings['consentTitle'],
+            'layout' => $settings['consentLayout'],
            'privacyPath' => $settings['privacyPath'],
            'imprintPath' => $settings['imprintPath'],
        ];
    }
+
+    /**
+     * Die Gestaltung des Hinweises als CSS-Variablen für den Kopf der Seite.
+     *
+     * Das Stylesheet kennt die Standardwerte; hier stehen nur die Abweichungen, die jemand in den
+     * Einstellungen gewählt hat. Die Form bestimmt zwei Radien auf einmal - Fläche und Knöpfe
+     * gehören zusammen, und zwei Regler dafür wären zwei Regler, die man gegeneinander verstellt.
+     */
+    public function styles(array $theme): string
+    {
+        $settings = $this->settings->load();
+        if (!$settings['consentBanner']) {
+            return '';
+        }
+        [$box, $button] = match ($settings['consentShape']) {
+            'rund' => ['28px', '999px'],
+            'eckig' => ['0', '0'],
+            default => ['18px', '10px'],
+        };
+        $values = ['--kant-consent-radius:'.$box, '--kant-consent-button-radius:'.$button];
+        foreach (['consentColor' => '--kant-consent-bg', 'consentInk' => '--kant-consent-ink', 'consentAccent' => '--kant-consent-accent', 'consentAccentInk' => '--kant-consent-accent-ink'] as $field => $variable) {
+            $value = Theme::cssColor((string) $settings[$field], $theme);
+            if (null !== $value) {
+                $values[] = $variable.':'.$value;
+            }
+        }
+
+        return ':root{'.implode(';', $values).'}';
+    }
 }
@@ -75,6 +75,14 @@ final class SiteSettings
        'consentBanner' => false,
        'consentGroups' => ['external'],
        'consentText' => '',
+        // Sein Aussehen: Anordnung, Form, Farben, Überschrift. Leer heißt Theme-Standard.
+        'consentLayout' => 'karte',
+        'consentShape' => 'weich',
+        'consentTitle' => '',
+        'consentColor' => '',
+        'consentInk' => '',
+        'consentAccent' => '',
+        'consentAccentInk' => '',
        'privacyPath' => '',
        'imprintPath' => '',
    ];
@@ -303,6 +311,16 @@ final class SiteSettings
            array_map(static fn (mixed $group): string => (string) $group, (array) ($input['consentGroups'] ?? [])),
        ));
        $values['consentText'] = mb_substr(trim((string) ($input['consentText'] ?? '')), 0, 600);
+        $values['consentLayout'] = in_array($input['consentLayout'] ?? '', ['karte', 'leiste', 'ecke'], true) ? $input['consentLayout'] : 'karte';
+        $values['consentShape'] = in_array($input['consentShape'] ?? '', ['weich', 'rund', 'eckig'], true) ? $input['consentShape'] : 'weich';
+        $values['consentTitle'] = mb_substr(trim((string) ($input['consentTitle'] ?? '')), 0, 80);
+        foreach (['consentColor', 'consentInk', 'consentAccent', 'consentAccentInk'] as $feld) {
+            $farbe = trim((string) ($input[$feld] ?? ''));
+            if ('' !== $farbe && 1 !== preg_match(StyleSchema::COLOR, $farbe)) {
+                throw new InvalidPage('Die Farben des Einwilligungshinweises werden als #1a2b3c oder als @schlüssel aus der Palette angegeben.');
+            }
+            $values[$feld] = $farbe;
+        }
        foreach (['privacyPath', 'imprintPath'] as $key) {
            $path = trim(trim((string) ($input[$key] ?? '')), '/');
            if ('' !== $path && 1 !== preg_match('#^[a-z0-9]+(?:[-/][a-z0-9]+)*$#D', $path)) {
@@ -269,6 +269,29 @@ final class Theme
    }

    /** The stylesheet every page carries: palette variables, font variables and base typography. */
+    /**
+     * Eine Farbe aus den Einstellungen als CSS-Wert: `@schlüssel` wird zur Palettenvariablen,
+     * ein Hexwert bleibt, und leer heißt "nicht gesetzt" - dann gilt der Standard des Stylesheets.
+     * Ein Schlüssel, den die Palette nicht kennt, wird ebenfalls zu null: lieber der Standard als
+     * eine Variable, die auf nichts zeigt.
+     */
+    public static function cssColor(string $value, array $theme): ?string
+    {
+        if ('' === $value) {
+            return null;
+        }
+        if (!str_starts_with($value, '@')) {
+            return $value;
+        }
+        foreach ($theme['colors'] as $color) {
+            if ($color['key'] === substr($value, 1)) {
+                return sprintf('var(--k-%s)', $color['key']);
+            }
+        }
+
+        return null;
+    }
+
    public function css(array $theme): string
    {
        $variables = [];
@@ -4,6 +4,7 @@ namespace App\Controller;

 use App\Content\Consent;
 use App\Content\SiteSettings;
+use App\Content\Theme;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
@@ -19,7 +20,7 @@ use Symfony\Component\Routing\Attribute\Route;
 */
 final class ConsentController extends AbstractController
 {
-    public function __construct(private Consent $consent, private SiteSettings $settings)
+    public function __construct(private Consent $consent, private SiteSettings $settings, private Theme $theme)
    {
    }

@@ -46,16 +47,21 @@ final class ConsentController extends AbstractController
        }
        // Deliberately without header and footer: this is a page about a decision, not a page of
        // the website, and it must work even when an area is broken.
+        // Palette und Hinweisfarben wie auf den Seiten, damit die Entscheidung hier aussieht wie
+        // die Frage dort. Das Stylesheet ist ueber seinen Hash erlaubt, nichts weiter.
+        $theme = $this->theme->load();
+        $styles = $this->theme->css($theme).$this->consent->styles($theme);
        $response = $this->render('consent.html.twig', [
            'consent' => $this->consent->state($request),
            'settings' => $this->settings->load(),
+            'pageStyles' => $styles,
        ]);
        $response->headers->set('Cache-Control', 'no-store');
        $response->headers->set('X-Robots-Tag', 'noindex, follow');
        $response->headers->set('X-Content-Type-Options', 'nosniff');
        $response->headers->set('Referrer-Policy', 'strict-origin-when-cross-origin');
-        // The page carries no embeds and no own styles, so it keeps the strictest policy.
-        $response->headers->set('Content-Security-Policy', "default-src 'self'; script-src 'none'; style-src 'self'; img-src 'self' https: data:; object-src 'none'; base-uri 'none'; frame-ancestors 'none'; form-action 'self'");
+        // The page carries no embeds, so it keeps the strictest policy - plus the one hashed style block.
+        $response->headers->set('Content-Security-Policy', sprintf("default-src 'self'; script-src 'none'; style-src 'self' 'sha256-%s'; img-src 'self' https: data:; object-src 'none'; base-uri 'none'; frame-ancestors 'none'; form-action 'self'", base64_encode(hash('sha256', $styles, true))));

        return $response;
    }
@@ -82,7 +82,7 @@ final class PageController extends AbstractController
        // for the small script that marks the page as scrolled.
        // Den Nach-oben-Knopf blendet dasselbe Skript ein; ohne es bleibt er dauerhaft sichtbar.
        $needsScrolled = (isset($areas['header']) && $this->hasScrolled($areas['header'])) || (bool) ($this->settings->load()['scrollTop'] ?? false);
-        $styles = $this->theme->css($theme).$this->scrollTopStyles($this->settings->load(), $theme).$this->styles->compileDocument($page['document']).$this->code->compileDocument($page['document']);
+        $styles = $this->theme->css($theme).$this->scrollTopStyles($this->settings->load(), $theme).$this->consent->styles($theme).$this->styles->compileDocument($page['document']).$this->code->compileDocument($page['document']);
        foreach ([...array_values($areas), ...array_values($sections)] as $extra) {
            $styles .= $this->styles->compileDocument($extra).$this->code->compileDocument($extra);
        }
@@ -308,21 +308,6 @@ final class PageController extends AbstractController
        if (!($settings['scrollTop'] ?? false)) {
            return '';
        }
-        $farbe = static function (string $wert) use ($theme): ?string {
-            if ('' === $wert) {
-                return null;
-            }
-            if (!str_starts_with($wert, '@')) {
-                return $wert;
-            }
-            foreach ($theme['colors'] as $eintrag) {
-                if ($eintrag['key'] === substr($wert, 1)) {
-                    return sprintf('var(--k-%s)', $eintrag['key']);
-                }
-            }
-
-            return null;
-        };
        $werte = [sprintf('--kant-top-size:%dpx', (int) ($settings['scrollTopSize'] ?? 48))];
        $werte[] = sprintf('--kant-top-radius:%s', match ($settings['scrollTopShape'] ?? 'rund') {
            'eckig' => '0',
@@ -331,7 +316,7 @@ final class PageController extends AbstractController
        });
        $werte[] = sprintf('--kant-top-after:%dpx', (int) ($settings['scrollTopAfter'] ?? 400));
        foreach (['scrollTopColor' => '--kant-top-bg', 'scrollTopInk' => '--kant-top-ink'] as $feld => $variable) {
-            $wert = $farbe((string) ($settings[$feld] ?? ''));
+            $wert = Theme::cssColor((string) ($settings[$feld] ?? ''), $theme);
            if (null !== $wert) {
                $werte[] = $variable.':'.$wert;
            }
@@ -514,8 +499,13 @@ final class PageController extends AbstractController
        $areas = $this->areas();
        $frames = $this->frameHosts($request, ...array_values($areas));
        $needsScrolled = isset($areas['header']) && $this->hasScrolled($areas['header']);
+        // Palette und Hinweisfarben wie auf jeder Seite - das Archiv trug bisher weder das eine
+        // noch das andere und zeigte den Einwilligungshinweis in den Standardfarben.
+        $theme = $this->theme->load();
+        $styles = $this->theme->css($theme).$this->consent->styles($theme);

        return $this->shell($this->render('archive.html.twig', [
+            'pageStyles' => $styles,
            'areas' => $areas,
            'needsScrolled' => $needsScrolled,
            'navigation' => $this->navigation(''),
@@ -525,7 +515,7 @@ final class PageController extends AbstractController
            'base' => $base,
            'canonical' => rtrim($this->siteOrigin, '/').$base.($result['page'] > 1 ? '?seite='.$result['page'] : ''),
            'navigation' => $this->navigation(''),
-        ]), $needsScrolled, frameHosts: $frames);
+        ]), $needsScrolled, $styles, $frames);
    }

    #[Route('/feed.xml', name: 'feed', methods: ['GET'])]
@@ -214,6 +214,50 @@
        <label for="consentText">Text im Hinweis</label>
        <textarea id="consentText" name="consentText" rows="3" maxlength="600">{{ settings.consentText }}</textarea>
        <p class="field-help">Leer lassen für den Standardtext. Er soll sagen, was geladen wird und was ohne Zustimmung passiert – nicht zum Klicken drängen.</p>
+        <fieldset class="field-set">
+            <legend>Aussehen des Hinweises</legend>
+            <div class="fields">
+                <div>
+                    <label for="consentLayout">Anordnung</label>
+                    <select id="consentLayout" name="consentLayout">
+                        <option value="karte"{{ settings.consentLayout == 'karte' ? ' selected' : '' }}>Karte unten in der Mitte</option>
+                        <option value="leiste"{{ settings.consentLayout == 'leiste' ? ' selected' : '' }}>Leiste über die volle Breite</option>
+                        <option value="ecke"{{ settings.consentLayout == 'ecke' ? ' selected' : '' }}>Kleine Karte rechts unten</option>
+                    </select>
+                </div>
+                <div>
+                    <label for="consentShape">Form</label>
+                    <select id="consentShape" name="consentShape">
+                        <option value="weich"{{ settings.consentShape == 'weich' ? ' selected' : '' }}>Abgerundet</option>
+                        <option value="rund"{{ settings.consentShape == 'rund' ? ' selected' : '' }}>Rund</option>
+                        <option value="eckig"{{ settings.consentShape == 'eckig' ? ' selected' : '' }}>Eckig</option>
+                    </select>
+                    <p class="field-help">Gilt für die Fläche und ihre Knöpfe zusammen.</p>
+                </div>
+                <div>
+                    <label for="consentTitle">Überschrift</label>
+                    <input id="consentTitle" name="consentTitle" maxlength="80" value="{{ settings.consentTitle }}" placeholder="Externe Inhalte und Einwilligung">
+                </div>
+                <div>
+                    <label for="consentColor">Farbe der Fläche</label>
+                    <input id="consentColor" name="consentColor" value="{{ settings.consentColor }}" placeholder="@paper" data-color data-palette="{{ palette|json_encode|e('html_attr') }}">
+                </div>
+                <div>
+                    <label for="consentInk">Schriftfarbe</label>
+                    <input id="consentInk" name="consentInk" value="{{ settings.consentInk }}" placeholder="@ink" data-color data-palette="{{ palette|json_encode|e('html_attr') }}">
+                </div>
+                <div>
+                    <label for="consentAccent">Farbe des Knopfes „Alle akzeptieren“</label>
+                    <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>
+                </div>
+                <div>
+                    <label for="consentAccentInk">Schrift auf dem Knopf</label>
+                    <input id="consentAccentInk" name="consentAccentInk" value="{{ settings.consentAccentInk }}" placeholder="#ffffff" data-color data-palette="{{ palette|json_encode|e('html_attr') }}">
+                </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>
+        </fieldset>
        <div class="fields">
            <div>
                <label for="privacyPath">Adresse der Datenschutzseite</label>
@@ -19,6 +19,7 @@
    <link rel="stylesheet" href="/assets/site.css?v={{ kant_version() }}">
    <link rel="stylesheet" href="/assets/buttons.css?v={{ kant_version() }}">
    <link rel="stylesheet" href="/assets/design.css?v={{ kant_version() }}">
+    {% if pageStyles|default('') %}<style>{{ pageStyles|raw }}</style>{% endif %}
    {% if needsScrolled|default(false) %}<script type="module" src="/assets/scrolled.js?v={{ kant_version() }}"></script>{% endif %}
 </head>
 {% set consentOpen = not editing|default(false) and consentGate.needsBanner(app.request) %}
@@ -3,15 +3,20 @@
   No JavaScript: the public pages run with script-src 'none' by default, and a banner that needs
   a script would be the one thing that breaks that. Accepting and refusing are the same kind of
   button, next to each other, with the same weight - a refusal hidden behind a link would not be
-   a free choice. The per-group selection sits in a disclosure so the first view stays readable. #}
-<section class="consent-bar" role="region" aria-labelledby="consent-heading">
-    <h2 id="consent-heading">Externe Inhalte und Einwilligung</h2>
-    <p>{{ consent.text ?: 'Diese Website lädt bestimmte Inhalte erst, wenn du zustimmst. Ohne Zustimmung wird die Seite vollständig angezeigt, nur eingebettete Inhalte anderer Anbieter bleiben leer.' }}</p>
+   a free choice. The per-group selection sits in a disclosure so the first view stays readable.
+
+   Anordnung, Form, Farben und Ueberschrift kommen aus den Einstellungen: die Anordnung als
+   Klasse, der Rest als Variablen im Kopf der Seite (Consent::styles). #}
+<section class="consent-bar consent-layout-{{ consent.layout|default('karte') }}" role="region" aria-labelledby="consent-heading">
+    <div class="consent-body">
+        <h2 id="consent-heading"><svg class="consent-icon" viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 3 5 6v6c0 4.4 2.9 7.9 7 9 4.1-1.1 7-4.6 7-9V6Zm-2.5 9 2 2 4-4.5"/></svg><span>{{ consent.title|default('') ?: 'Externe Inhalte und Einwilligung' }}</span></h2>
+        <p>{{ consent.text ?: 'Diese Website lädt bestimmte Inhalte erst, wenn du zustimmst. Ohne Zustimmung wird die Seite vollständig angezeigt, nur eingebettete Inhalte anderer Anbieter bleiben leer.' }}</p>
+    </div>
    <form method="post" action="{{ path('consent_save') }}" class="consent-form">
        <input type="hidden" name="back" value="{{ back }}">
        <div class="consent-actions">
-            <button class="consent-button" type="submit" name="choice" value="all">Alle akzeptieren</button>
-            <button class="consent-button" type="submit" name="choice" value="none">Nur notwendige</button>
+            <button class="consent-button consent-accept" type="submit" name="choice" value="all">Alle akzeptieren</button>
+            <button class="consent-button consent-decline" type="submit" name="choice" value="none">Nur notwendige</button>
        </div>
        <details class="consent-details">
            <summary>Einzeln wählen</summary>
@@ -7,6 +7,7 @@
    <meta name="robots" content="noindex, follow">
    {% include 'favicon.html.twig' %}
    <link rel="stylesheet" href="/assets/site.css?v={{ kant_version() }}">
+    {% if pageStyles|default('') %}<style>{{ pageStyles|raw }}</style>{% endif %}
 </head>
 <body class="kant consent-page">
    <main id="main" tabindex="-1">
@@ -97,13 +97,15 @@
        {% for block in areas.footer.blocks %}{% include 'blocks/block.html.twig' with {block: block, editing: editing|default(false), postLists: {}, forms: {}, breadcrumbs: [], navigation: navigation|default({}), sections: sections|default({}), richText: areas.footer.schemaVersion|default(1) >= 12, richHeadings: areas.footer.schemaVersion|default(1) >= 17, eagerImage: null} only %}{% endfor %}
    </footer>
    {% endif %}
+    {% if not editing|default(false) and consentGate.needsBanner(app.request) %}
+        {% include 'consent-banner.html.twig' with {consent: consentGate.state(app.request), back: app.request.pathInfo} only %}
+    {% endif %}
+    {# Der Knopf steht hinter der Einwilligungsleiste: Solange sie offen ist, setzt er sich per
+       Ankerpositionierung auf ihre Oberkante, und ein Anker muss im Dokument davor stehen. #}
    {% set oben = siteSettings.load() %}
    {% if oben.scrollTop|default(false) and not editing|default(false) %}
    {# Ein Anker, kein Skript. Er springt an den Anfang - das kann ein Browser allein. #}
    <a class="scroll-top{{ oben.scrollTopPosition|default('rechts') == 'links' ? ' scroll-top-links' : '' }}" href="#seitenanfang" aria-label="{{ oben.scrollTopLabel|default('Nach oben') }}"><span aria-hidden="true">↑</span></a>
    {% endif %}
-    {% if not editing|default(false) and consentGate.needsBanner(app.request) %}
-        {% include 'consent-banner.html.twig' with {consent: consentGate.state(app.request), back: app.request.pathInfo} only %}
-    {% endif %}
 </body>
 </html>
@@ -3475,7 +3475,8 @@ final class CmsTest extends TestCase
        self::assertStringNotContainsString('#2c6b4f', $site, 'Der Einwilligungsdialog nimmt die Farbe der Website.');
        // Und er lässt sich eigens färben: eine Palettenfarbe mit dem Schlüssel „consent“ gewinnt
        // über die Primärfarbe, ohne dass es dafür eine weitere Einstellung braucht.
-        self::assertStringContainsString('background:var(--k-consent,var(--accent))', $site);
+        // Der Palettenschlüssel `consent` bleibt die Zwischenstufe hinter der eigenen Einstellung.
+        self::assertStringContainsString('background:var(--kant-consent-accent,var(--k-consent,var(--accent)))', $site);
        self::assertStringNotContainsString('outline:3px solid #b85c12', $site, 'Auch der Fokusring folgt der Palette.');
    }

@@ -3910,6 +3911,44 @@ Achern']);
        self::assertSame(404, $this->request('/einwilligung')->getStatusCode());
    }

+    public function testTheConsentQuestionTakesLayoutShapeAndColoursFromTheSettings(): void
+    {
+        $this->pages->publish('page-1', $this->pages->saveDraft('page-1', DemoContent::pages()['home'], 0), 1);
+        $this->askConsent();
+
+        // Standard: Karte, abgerundet, Themefarben - im Kopf stehen nur die Radien.
+        $html = $this->request('/')->getContent();
+        self::assertStringContainsString('consent-layout-karte', $html);
+        self::assertStringContainsString('--kant-consent-radius:18px;--kant-consent-button-radius:10px', $html);
+        self::assertStringNotContainsString('--kant-consent-bg', $html);
+        self::assertStringContainsString('Externe Inhalte und Einwilligung', $html);
+
+        // Eigene Werte: Palette wird zur Variablen, ein unbekannter Schlüssel fällt weg statt
+        // auf nichts zu zeigen, die Überschrift steht escaped im Markup.
+        $this->site->save(['homePath' => 'home', 'consentBanner' => '1', 'consentGroups' => ['external'], 'privacyPath' => 'datenschutz',
+            'consentLayout' => 'leiste', 'consentShape' => 'rund', 'consentTitle' => 'Cookies & Co.',
+            'consentColor' => '#101820', 'consentInk' => '#ffffff', 'consentAccent' => '@ink', 'consentAccentInk' => '@nope']);
+        $response = $this->request('/');
+        $html = $response->getContent();
+        self::assertStringContainsString('consent-layout-leiste', $html);
+        self::assertStringContainsString('--kant-consent-radius:28px;--kant-consent-button-radius:999px;--kant-consent-bg:#101820;--kant-consent-ink:#ffffff;--kant-consent-accent:var(--k-ink)}', $html);
+        self::assertStringNotContainsString('--kant-consent-accent-ink', $html);
+        self::assertStringContainsString('Cookies &amp; Co.', $html);
+        self::assertStringContainsString("style-src 'self' 'sha256-", (string) $response->headers->get('Content-Security-Policy'));
+
+        // Die Einwilligungsseite trägt dieselben Werte, erlaubt per Hash und sonst nichts.
+        $page = $this->request('/einwilligung');
+        self::assertSame(200, $page->getStatusCode());
+        self::assertStringContainsString('--kant-consent-bg:#101820', $page->getContent());
+        $policy = (string) $page->headers->get('Content-Security-Policy');
+        self::assertStringContainsString("style-src 'self' 'sha256-", $policy);
+        self::assertStringContainsString("script-src 'none'", $policy);
+
+        // Eine Farbe, die weder Hex noch Palettenschlüssel ist, wird nicht gespeichert.
+        $this->expectException(InvalidPage::class);
+        $this->site->save(['homePath' => 'home', 'consentBanner' => '1', 'consentGroups' => ['external'], 'privacyPath' => 'datenschutz', 'consentColor' => 'red']);
+    }
+
    public function testTheQuestionAppearsUntilItIsAnsweredAndCanBeChangedAgain(): void
    {
        $document = DemoContent::pages()['home'];
@@ -1 +1 @@
 .14.0
 .14.1