Einwilligung, die tatsächlich zurückhält, und Pflichtseiten

Ein Hinweis, der nur fragt und sonst nichts ändert, ist Theater. Deshalb zwei
Hälften, und die zweite ist die wichtigere.

Die Frage: serverseitig gerendert, per Formular beantwortet, ohne JavaScript -
die öffentlichen Seiten laufen mit script-src 'none', und ein Banner mit
Skript wäre das eine, was diese Regel bricht. "Alle akzeptieren" und "Nur
notwendige" sind dieselbe Art Knopf, gleich groß, nebeneinander. Die
Entscheidung steht in einem eigenen Cookie: Fassung der Frage, gewährte
Gruppen, Zeitpunkt. Keine Kennung, kein Serverabgleich, ein halbes Jahr. Kein
CSRF-Token, absichtlich: die Anfrage ändert nichts auf dem Server, und ein
Token bräuchte für jeden Besucher eine Sitzung - genau das, was ein
Einwilligungshinweis vermeiden soll. Geprüft wird stattdessen das
Rücksprungziel.

Das Zurückhalten: der neue Block "Externer Inhalt" (Dokumentschema v14) lädt
ohne Einwilligung nichts - kein iframe, keine Adresse im Markup, frame-src
'none'. Der Platzhalter nennt den Anbieter; sein Knopf gewährt genau diese
Gruppe und nimmt die vorher gewährten mit. Erst danach kommt der Host in die
Sicherheitsrichtlinie, und nur dieser. Im Editor bleibt es immer ein
Platzhalter.

Datenschutz und Impressum sind keine Einstellung mehr: fehlen sie, warnt die
Verwaltung und legt sie auf Knopfdruck als Gerüst an, mit NOCH AUSZUFÜLLEN an
jeder Pflichtangabe. Den Text schreibt das CMS nicht - das ist eine rechtliche
Aussage über eine Firma. Verlinkt werden beide aus dem Template, nicht aus dem
Fußbereich: ein Pflichtlink, den man löschen kann, ist keiner.

Dazu der Fehler, den Umut im Screenshot gesehen hat: die Wortmarke stand als
Buchstabenkolonne in einem 60 Pixel breiten Kasten. .site-header war noch ein
Flexcontainer aus der Zeit des handgeschriebenen Markups und quetschte die
Sektion zusammen, und design.css band jede Designklasse an #main - wo Kopf-
und Fußbereich seit ADR 026 nicht mehr liegen. Beides behoben.

Neu im Ausbauplan: Statistik (serverseitige, wiedererkennungsfreie Zählung,
die deshalb keine Einwilligung braucht), Inhalte und Ladeverhalten prüfen
(Blättern überall, minimal laden, Ladebudget), Installer (Schritt für Schritt
im Browser, Migration inklusive).

245 PHP-Tests / 976 Assertions unter PHP 8.2.12 und 8.4.22. Der Browsertest
fand zwei Fehler von mir: grauer Text auf dunklem Fußbereich mit 2,24:1, und
das fixierte Banner verdeckte den Einwilligungsknopf am Seitenende.

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

templates/admin/editor.html.twig

@@ -22,7 +22,7 @@
             <section class="panel-section"><div class="panel-title"><h2>Werkzeugkasten</h2><button id="toggle-library" class="text-button" aria-expanded="true" aria-controls="toolbox">− <span class="visually-hidden">Werkzeugkasten einklappen</span></button></div><div id="toolbox"><h3 class="preset-heading">Element hinzufügen</h3>
                 <p class="panel-hint">In die gewählte Sektion oder hinter das gewählte Element.</p>
                 <div id="library" class="library">
-                {% for type, label in {section:'Sektion', row:'Zeile', column:'Spalte', heading:'Überschrift', text:'Text', image:'Bild', button:'Button', gallery:'Galerie', postlist:'Beitragsliste', iconcard:'Symbolkarte', stat:'Kennzahl', quote:'Kundenstimme', logos:'Logoleiste', cta:'Aufruf-Band', contact:'Kontaktdaten', accordion:'Akkordeon', accordionitem:'Eintrag', tabs:'Tabs', tabitem:'Tab', form:'Formular', breadcrumb:'Brotkrumen', menu:'Navigation', partialref:'Verkn. Sektion', divider:'Trennlinie', spacer:'Abstand'} %}<button type="button" data-add="{{ type }}" disabled><span aria-hidden="true">{{ {section:'▣',row:'☰',column:'▥',heading:'H',text:'T',image:'▧',button:'↗',gallery:'▦',postlist:'☷',iconcard:'◈',stat:'№',quote:'❝',logos:'⬚',cta:'◉',contact:'✆',accordion:'⌵',accordionitem:'·',tabs:'▭',tabitem:'▫',form:'✉',breadcrumb:'⟩',menu:'☰',partialref:'⧉',divider:'—',spacer:'⇳'}[type] }}</span>{{ label }}</button>{% endfor %}
+                {% for type, label in {section:'Sektion', row:'Zeile', column:'Spalte', heading:'Überschrift', text:'Text', image:'Bild', button:'Button', gallery:'Galerie', postlist:'Beitragsliste', iconcard:'Symbolkarte', stat:'Kennzahl', quote:'Kundenstimme', logos:'Logoleiste', cta:'Aufruf-Band', contact:'Kontaktdaten', accordion:'Akkordeon', accordionitem:'Eintrag', tabs:'Tabs', tabitem:'Tab', form:'Formular', breadcrumb:'Brotkrumen', menu:'Navigation', partialref:'Verkn. Sektion', embed:'Externer Inhalt', divider:'Trennlinie', spacer:'Abstand'} %}<button type="button" data-add="{{ type }}" disabled><span aria-hidden="true">{{ {section:'▣',row:'☰',column:'▥',heading:'H',text:'T',image:'▧',button:'↗',gallery:'▦',postlist:'☷',iconcard:'◈',stat:'№',quote:'❝',logos:'⬚',cta:'◉',contact:'✆',accordion:'⌵',accordionitem:'·',tabs:'▭',tabitem:'▫',form:'✉',breadcrumb:'⟩',menu:'☰',partialref:'⧉',embed:'⬓',divider:'—',spacer:'⇳'}[type] }}</span>{{ label }}</button>{% endfor %}
                 </div>
                 <button id="open-media-library" class="secondary full-width media-launch" disabled>Medienverwaltung öffnen</button>
                 <h3 class="preset-heading">Fertige Abschnitte</h3><p class="panel-hint">Wird nach dem aktuellen Seitenabschnitt eingefügt.</p>

templates/admin/settings.html.twig

@@ -4,6 +4,22 @@
 {% block heading %}Unternehmen und Adressen{% endblock %}
 {% block lead %}Aus diesen Angaben entstehen die strukturierten Daten der Startseite. Was hier steht, ist genau das, was Suchmaschinen lesen – es gibt keine zweite, unsichtbare Fassung.{% endblock %}
 {% block content %}
+
+{% if missingLegal is not empty %}
+{# Not a hint, a warning: in Germany both pages are required, and they have to be reachable from
+   every page of the site. #}
+<div class="card">
+    <div class="card-head"><h2>Pflichtseiten fehlen</h2><span class="muted">{{ missingLegal|join(' und ') }}</span></div>
+    <div class="card-body">
+        <p class="notice error" role="alert">Ohne {{ missingLegal|join(' und ') }} ist diese Website in Deutschland nicht rechtskonform – beide müssen von jeder Seite aus erreichbar sein. KantSites verlinkt sie automatisch im Fuß jeder Seite, sobald sie hier eingetragen sind.</p>
+        <p class="field-help">Der Knopf legt die fehlenden Seiten mit einem Gerüst an und verknüpft sie. Jede Pflichtangabe darin ist mit <code>NOCH AUSZUFÜLLEN</code> markiert – den Text musst du selbst schreiben oder von jemandem schreiben lassen, der dafür einstehen kann. Vorhandene Seiten werden nie überschrieben.</p>
+        <form action="{{ path('admin_legal_pages') }}" method="post">
+            <input type="hidden" name="_csrf_token" value="{{ csrf_token('settings') }}">
+            <button class="primary" type="submit">Fehlende Pflichtseiten anlegen</button>
+        </form>
+    </div>
+</div>
+{% endif %}
 <section class="stack-section">
     <div class="section-head"><h2>Unternehmensdaten</h2><span class="muted">Grundlage für Organization und LocalBusiness</span></div>
     <form action="{{ path('admin_settings_save') }}" method="post" class="card card-body">
@@ -56,7 +72,33 @@
         <label for="robotsExtra">Zusätzliche Zeilen für robots.txt</label>
         <textarea id="robotsExtra" name="robotsExtra" rows="3">{{ settings.robotsExtra }}</textarea>
         <p class="field-help">Nur Kommentarzeilen und einfache Anweisungen wie <code>Disallow: /pfad</code>. Höchstens dreißig Zeilen.</p>
-        <button class="primary" type="submit">Unternehmensdaten speichern</button>
+        <div class="section-head"><h2>Einwilligung</h2><span class="muted">Nur nötig, wenn die Website etwas von Dritten lädt</span></div>
+        <label class="check-label" for="consentBanner"><input id="consentBanner" name="consentBanner" type="checkbox" value="1"{{ settings.consentBanner ? ' checked' : '' }}> Einwilligungshinweis anzeigen</label>
+        <p class="field-help">Ohne eingebettete Inhalte anderer Anbieter braucht diese Website keine Einwilligung – dann ist ein Banner nur im Weg und sollte aus bleiben. Eingebettete Inhalte laden ohnehin erst nach Zustimmung, unabhängig von diesem Schalter.</p>
+        <fieldset class="field-set">
+            <legend>Worüber gefragt wird</legend>
+            {% for value, label in consentGroups %}
+            <label class="check-label" for="group-{{ value }}"><input id="group-{{ value }}" name="consentGroups[]" type="checkbox" value="{{ value }}"{{ value in settings.consentGroups ? ' checked' : '' }}> {{ label }}</label>
+            <p class="field-help">{{ consentGroupHelp[value] }}</p>
+            {% endfor %}
+        </fieldset>
+        <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>
+        <div class="fields">
+            <div>
+                <label for="privacyPath">Adresse der Datenschutzseite</label>
+                <input id="privacyPath" name="privacyPath" maxlength="400" value="{{ settings.privacyPath }}" placeholder="datenschutz">
+                <p class="field-help">Pflicht, sobald der Hinweis an ist, und die Seite muss existieren.</p>
+            </div>
+            <div>
+                <label for="imprintPath">Adresse des Impressums</label>
+                <input id="imprintPath" name="imprintPath" maxlength="400" value="{{ settings.imprintPath }}" placeholder="impressum">
+            </div>
+        </div>
+        <p class="field-help">Die Entscheidung liegt in einem Cookie dieser Website, ein halbes Jahr lang, ohne Kennung und ohne Übermittlung. Unter <code>/einwilligung</code> kann sie jederzeit geändert werden; auf jeder Seite steht dafür ein Link.</p>
+
+        <button class="primary" type="submit">Einstellungen speichern</button>
     </form>
 </section>
 

templates/archive.html.twig

@@ -13,7 +13,8 @@
     <link rel="stylesheet" href="/assets/site.css">
     <link rel="stylesheet" href="/assets/design.css">
 </head>
-<body class="kant">
+{% set consentOpen = not editing|default(false) and consentGate.needsBanner(app.request) %}
+<body class="kant{{ consentOpen ? ' consent-open' : '' }}">
     <a class="skip-link" href="#main">Zum Inhalt springen</a>
     {% if areas.header|default(null) %}
     <header class="site-header">
@@ -46,5 +47,19 @@
         {% for block in areas.footer.blocks %}{% include 'blocks/block.html.twig' with {block: block, postLists: {}, forms: {}, breadcrumbs: [], navigation: navigation|default({}), sections: sections|default({}), richText: true} only %}{% endfor %}
     </footer>
     {% endif %}
+    {# Privacy statement, imprint and the way back to the consent decision. All three have to be
+       reachable from every page, so they are part of the template and not of the footer area,
+       which someone could delete. One labelled landmark, so they are not loose text either. #}
+    {% set legal = consentGate.legalLinks() %}
+    {% set revocable = not editing|default(false) and consentGate.askedGroups is not empty and not consentGate.needsBanner(app.request) %}
+    {% if legal is not empty or revocable %}
+    <nav class="legal-bar" aria-label="Rechtliches">
+        {% for path, label in legal %}{% if not loop.first %} · {% endif %}<a href="/{{ path }}">{{ label }}</a>{% endfor %}
+        {% if revocable %}{% if legal is not empty %} · {% endif %}<a href="/einwilligung">Einwilligung ändern</a>{% endif %}
+    </nav>
+    {% 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>

templates/blocks/block.html.twig

@@ -125,6 +125,35 @@
             {% for child in block.children|default([]) %}{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({}), forms: forms|default({}), breadcrumbs: breadcrumbs|default([]), navigation: navigation|default({}), sections: sections|default({}), richText: richText|default(false)} only %}{% endfor %}
         </div>
     </details>
+{% elseif type == 'embed' %}
+    {# Content from a third party. Until the group is granted, nothing of it is requested - no
+       iframe, no image, no preconnect. That is the whole point of the consent question: the
+       placeholder is not a nicety, it is what keeps the promise.
+       In the editor it always stays a placeholder: the administration's policy forbids foreign
+       frames, and a preview must not load anything from outside either. #}
+    {% if not editing|default(false) and consentGate.granted(app.request, props.group) %}
+    <div id="{{ block.id }}" class="block-embed{{ designClasses }}">
+        <iframe src="{{ props.url }}" title="{{ props.title }}" height="{{ props.height }}" loading="lazy" referrerpolicy="strict-origin-when-cross-origin"></iframe>
+    </div>
+    {% else %}
+    <div id="{{ block.id }}" class="block-embed embed-blocked{{ designClasses }}">
+        <p class="embed-title">{{ props.title }}</p>
+        <p class="embed-hint">{{ props.hint ?: 'Dieser Inhalt wird von einem anderen Anbieter geladen. Dabei erfährt er deine IP-Adresse und welche Seite du ansiehst.' }}</p>
+        <p class="embed-provider">Anbieter: <strong>{{ props.provider ?: props.url|split('/')[2] }}</strong></p>
+        {% if editing|default(false) %}
+        <p class="embed-hint">Wird erst auf der veröffentlichten Seite geladen, und dort erst nach Einwilligung.</p>
+        {% else %}
+        <form method="post" action="{{ path('consent_save') }}">
+            <input type="hidden" name="back" value="{{ app.request.pathInfo }}">
+            <input type="hidden" name="choice" value="some">
+            {# The groups already granted stay granted; this button adds this one. #}
+            {% for granted in consentGate.state(app.request).groups %}{% if granted.granted %}<input type="hidden" name="groups[]" value="{{ granted.key }}">{% endif %}{% endfor %}
+            <input type="hidden" name="groups[]" value="{{ props.group }}">
+            <button class="consent-button" type="submit">Inhalt laden und einwilligen</button>
+        </form>
+        {% endif %}
+    </div>
+    {% endif %}
 {% elseif type == 'postlist' %}
     <div id="{{ block.id }}" class="block-postlist{{ designClasses }}">
         {% include 'blocks/post-list.html.twig' with {posts: postLists[block.id]|default([])} only %}

templates/consent-banner.html.twig

@@ -0,0 +1,35 @@
+{# The consent question, rendered by the server and answered by a form.
+
+   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>
+    <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>
+        </div>
+        <details class="consent-details">
+            <summary>Einzeln wählen</summary>
+            <ul class="consent-groups">
+                {% for group in consent.groups %}
+                <li>
+                    <label for="consent-{{ group.key }}">
+                        <input id="consent-{{ group.key }}" type="checkbox" name="groups[]" value="{{ group.key }}"{{ group.granted ? ' checked' : '' }}>
+                        <span><strong>{{ group.name }}</strong> {{ group.help }}</span>
+                    </label>
+                </li>
+                {% endfor %}
+            </ul>
+            <button class="consent-button consent-choice" type="submit" name="choice" value="some">Auswahl speichern</button>
+        </details>
+        <p class="consent-links">
+            {% if consent.privacyPath %}<a href="/{{ consent.privacyPath }}">Datenschutz</a>{% endif %}
+            {% if consent.imprintPath %} · <a href="/{{ consent.imprintPath }}">Impressum</a>{% endif %}
+        </p>
+    </form>
+</section>

templates/consent.html.twig

@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="de">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Einwilligung{{ settings.legalName ? ' · ' ~ settings.legalName : '' }}</title>
+    <meta name="robots" content="noindex, follow">
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+    <link rel="stylesheet" href="/assets/site.css">
+</head>
+<body class="kant consent-page">
+    <main id="main" tabindex="-1">
+        <section class="block-section">
+            <h1>Deine Einwilligung</h1>
+            <p>
+                {% if consent.decided %}
+                    Du hast am <time datetime="{{ consent.decidedAt|date('c') }}">{{ consent.decidedAt|date('d.m.Y') }}</time> entschieden. Hier lässt sich das jederzeit ändern.
+                {% else %}
+                    Es ist noch nichts entschieden. Ohne Zustimmung werden eingebettete Inhalte anderer Anbieter nicht geladen.
+                {% endif %}
+            </p>
+            <p>Gespeichert wird deine Entscheidung in einem Cookie dieser Website – ohne Kennung, ohne Übermittlung an Dritte und nur für ein halbes Jahr. Danach wird erneut gefragt.</p>
+
+            {% include 'consent-banner.html.twig' with {consent: consent, back: '/einwilligung'} only %}
+
+            <p class="consent-links">
+                <a href="/">Zur Startseite</a>
+                {% if consent.privacyPath %} · <a href="/{{ consent.privacyPath }}">Datenschutz</a>{% endif %}
+                {% if consent.imprintPath %} · <a href="/{{ consent.imprintPath }}">Impressum</a>{% endif %}
+            </p>
+        </section>
+    </main>
+</body>
+</html>

templates/not-found.html.twig

@@ -1,3 +1,19 @@
 <!doctype html>
 <html lang="de"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="robots" content="noindex"><title>Seite nicht gefunden · KantSites</title><link rel="stylesheet" href="/assets/site.css"><link rel="icon" href="/favicon.svg" type="image/svg+xml"></head>
-<body><main class="shell error-page"><p>404 · KantSites</p><h1>Hier ist noch keine Seite.</h1><p>Die Adresse existiert nicht oder die Seite ist noch nicht veröffentlicht.</p><a class="button" href="/">Zur Startseite</a></main></body></html>
+{% set consentOpen = not editing|default(false) and consentGate.needsBanner(app.request) %}
+<body class="{{ consentOpen ? 'consent-open' : '' }}"><main class="shell error-page"><p>404 · KantSites</p><h1>Hier ist noch keine Seite.</h1><p>Die Adresse existiert nicht oder die Seite ist noch nicht veröffentlicht.</p><a class="button" href="/">Zur Startseite</a></main>
+    {# Privacy statement, imprint and the way back to the consent decision. All three have to be
+       reachable from every page, so they are part of the template and not of the footer area,
+       which someone could delete. One labelled landmark, so they are not loose text either. #}
+    {% set legal = consentGate.legalLinks() %}
+    {% set revocable = not editing|default(false) and consentGate.askedGroups is not empty and not consentGate.needsBanner(app.request) %}
+    {% if legal is not empty or revocable %}
+    <nav class="legal-bar" aria-label="Rechtliches">
+        {% for path, label in legal %}{% if not loop.first %} · {% endif %}<a href="/{{ path }}">{{ label }}</a>{% endfor %}
+        {% if revocable %}{% if legal is not empty %} · {% endif %}<a href="/einwilligung">Einwilligung ändern</a>{% endif %}
+    </nav>
+    {% 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>

templates/page.html.twig

@@ -33,7 +33,8 @@
         {% else %}<style>{{ pageStyles|raw }}</style>{% endif %}
     {% endif %}
 </head>
-<body class="kant">
+{% set consentOpen = not editing|default(false) and consentGate.needsBanner(app.request) %}
+<body class="kant{{ consentOpen ? ' consent-open' : '' }}">
     <a class="skip-link" href="#main">Zum Inhalt springen</a>
     {# Header and footer are block documents like any page, so they are built from elements
        instead of being written into this template. #}
@@ -58,5 +59,19 @@
         {% 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} only %}{% endfor %}
     </footer>
     {% endif %}
+    {# Privacy statement, imprint and the way back to the consent decision. All three have to be
+       reachable from every page, so they are part of the template and not of the footer area,
+       which someone could delete. One labelled landmark, so they are not loose text either. #}
+    {% set legal = consentGate.legalLinks() %}
+    {% set revocable = not editing|default(false) and consentGate.askedGroups is not empty and not consentGate.needsBanner(app.request) %}
+    {% if legal is not empty or revocable %}
+    <nav class="legal-bar" aria-label="Rechtliches">
+        {% for path, label in legal %}{% if not loop.first %} · {% endif %}<a href="/{{ path }}">{{ label }}</a>{% endfor %}
+        {% if revocable %}{% if legal is not empty %} · {% endif %}<a href="/einwilligung">Einwilligung ändern</a>{% endif %}
+    </nav>
+    {% 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>