Back up unsaved editor work locally, structure the settings, fix archive accessibility

- The editor keeps unsaved changes in the browser and offers them
  after a crash, a closed tab or an expired session. No timed save on
  the server: every save is a full revision.
- The save status stays visible in narrow windows.
- Settings get a sticky section bar, two folded groups and a save bar
  that stays in view.
- The admin post list fetches terms and images once, not per post.
- Archive post titles are second-level headings, the archive head
  keeps full text contrast, the skip link sits above a sticky header,
  a linked image without alternative text names its link.
- The editor check starts through the dev router like the others.

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

templates/admin/editor.html.twig

@@ -37,6 +37,7 @@
         </div>
     </header>
     <div id="message" class="editor-message" role="alert" hidden></div>
+    <div id="local-backup" class="editor-message editor-backup" role="status" hidden><span id="local-backup-text"></span><span class="editor-backup-actions"><button type="button" class="secondary" id="local-backup-restore">Wiederherstellen</button><button type="button" class="text-button" id="local-backup-discard">Verwerfen</button></span></div>
     <div id="recovery" class="recovery-bar" hidden><button id="download" class="secondary">Änderungen als JSON sichern</button><button id="reload" class="secondary">Serverstand laden</button><a href="{{ path('admin_login') }}" target="_blank" rel="noopener">Erneut anmelden ↗</a></div>
     <main id="admin-main" class="editor-layout" tabindex="-1">
         <aside class="sidebar" aria-label="Bearbeitung" data-view="elements">

templates/admin/settings.html.twig

@@ -6,6 +6,19 @@
 {% block styles %}<link rel="stylesheet" href="/assets/media-dialog.css?v={{ kant_version() }}">{% endblock %}
 {% block scripts %}<script type="module" src="/assets/page-picker.js?v={{ kant_version() }}"></script><script type="module" src="/assets/favicon-field.js?v={{ kant_version() }}"></script><script type="module" src="/assets/logo-field.js?v={{ kant_version() }}"></script>{% endblock %}
 {% block content %}
+{# Die Seite ist lang. Die Leiste bleibt beim Scrollen stehen und führt zu jedem Abschnitt. #}
+<nav class="jump-nav" aria-label="Abschnitte dieser Seite">
+    <a href="#not-found">404-Seite</a>
+    <a href="#sprachen">Sprachen</a>
+    <a href="#unternehmen">Unternehmen</a>
+    {% if is_granted('ROLE_ADMIN') %}
+    <a href="#favicon-title">Symbol</a>
+    <a href="#nach-oben">Knopf „nach oben“</a>
+    <a href="#spamschutz">Spamschutz</a>
+    <a href="#einwilligung">Einwilligung</a>
+    {% endif %}
+    <a href="#weiterleitungen">Weiterleitungen</a>
+</nav>
 
 {% if missingLegal is not empty %}
 {# Not a hint, a warning: in Germany both pages are required, and they have to be reachable from
@@ -99,7 +112,7 @@
         {% endif %}
     </div>
 </section>
-<section class="stack-section">
+<section class="stack-section" id="unternehmen">
     <div class="section-head"><h2>Unternehmensdaten</h2><span class="muted">Grundlage für Organization und LocalBusiness</span></div>
     {% if is_granted('ROLE_ADMIN') %}
     <form action="{{ path('admin_settings_save') }}" method="post" class="card card-body">
@@ -146,8 +159,9 @@
         <label for="sameAs">Profile</label>
         <textarea id="sameAs" name="sameAs" rows="3" placeholder="https://www.linkedin.com/company/…">{{ settings.sameAs|join('\n') }}</textarea>
         <p class="field-help">Eine HTTPS-Adresse je Zeile, höchstens zwanzig. Die sozialen Profile unten stehen automatisch mit in den strukturierten Daten.</p>
-        <fieldset class="field-set">
-            <legend>Soziale Profile</legend>
+        {% set profile = settings.social|default({})|filter(v => v)|length %}
+        <details class="field-set field-fold"{{ profile ? ' open' : '' }}>
+            <summary>Soziale Profile <span class="muted">{{ profile ? profile ~ ' eingetragen' : 'keine eingetragen' }}</span></summary>
             <p class="field-help">Einmal hier eintragen, dann mit dem Element „Soziale Profile“ an jeder Stelle einsetzen – im Kopf, im Fuß, in einer Kontaktsektion. Größe, Form und Farbe bestimmt das Element. Leere Felder erscheinen nicht.</p>
             <div class="fields">
                 {% for key, name in socialNetworks %}
@@ -157,9 +171,10 @@
                 </div>
                 {% endfor %}
             </div>
-        </fieldset>
-        <fieldset class="field-set">
-            <legend>Öffnungszeiten</legend>
+        </details>
+        {% set zeiten = settings.openingHours|default([])|filter(h => h.opens|default('') or h.closes|default(''))|length %}
+        <details class="field-set field-fold"{{ zeiten ? ' open' : '' }}>
+            <summary>Öffnungszeiten <span class="muted">{{ zeiten ? zeiten ~ ' Tag(e) eingetragen' : 'keine eingetragen' }}</span></summary>
             <p class="field-help">Als Uhrzeit wie 07:30. Ein Tag ohne Angabe gilt als geschlossen. Erscheint als <code>openingHoursSpecification</code> in den strukturierten Daten – der Text auf der Website ist davon unabhängig.</p>
             <div class="fields">
                 {% for day, label in weekdays %}
@@ -170,7 +185,7 @@
                 </div>
                 {% endfor %}
             </div>
-        </fieldset>
+        </details>
         <label for="areaServed">Einsatzgebiet</label>
         <textarea id="areaServed" name="areaServed" rows="3" placeholder="Baden-Baden&#10;Rastatt&#10;Karlsruhe">{{ settings.areaServed|join('\n') }}</textarea>
         <p class="field-help">Ein Ort je Zeile, höchstens vierzig. Erscheint als <code>areaServed</code> in den strukturierten Daten.</p>
@@ -217,7 +232,7 @@
             </div>
         </div>
         <p class="field-help">Das Bild kommt aus der Mediathek, dort kann es auch gleich hochgeladen werden. Danach das Quadrat auf den gewünschten Ausschnitt ziehen und die Größe einstellen. Beim Speichern entstehen daraus PNG-Dateien in 32 und 180 Pixeln.</p>
-        <div class="section-head"><h2>Knopf „nach oben"</h2><span class="muted">Erscheint beim Scrollen, in der Ecke</span></div>
+        <div class="section-head"><h2 id="nach-oben">Knopf „nach oben"</h2><span class="muted">Erscheint beim Scrollen, in der Ecke</span></div>
         <label class="check-label" for="scrollTop"><input id="scrollTop" name="scrollTop" type="checkbox" value="1"{{ settings.scrollTop ? ' checked' : '' }}> Knopf „nach oben" anzeigen</label>
         <p class="field-help">Springt an den Seitenanfang. Er braucht kein JavaScript: In Browsern mit Scroll-Zeitachse blendet er sich beim Scrollen ein, in den übrigen steht er von Anfang an da.</p>
         <div class="fields">
@@ -260,7 +275,7 @@
             </div>
         </div>
         <p class="field-help">Farben entweder als <code>@schlüssel</code> aus der Palette oder als Wert wie <code>#1a2b3c</code>. Leer bedeutet: Akzentfarbe des Designs auf Weiß.</p>
-        <div class="section-head"><h2>Spamschutz für Formulare</h2><span class="muted">Optional, von Cloudflare</span></div>
+        <div class="section-head"><h2 id="spamschutz">Spamschutz für Formulare</h2><span class="muted">Optional, von Cloudflare</span></div>
         <p class="field-help">Eingebaut sind bereits drei Prüfungen ohne Dritte: ein verstecktes Feld, ein signierter Zeitstempel und höchstens fünf Absendungen je Absender und Stunde. Das hält automatisch ausgefüllte Formulare ab. Gegen jemanden, der einen echten Browser fernsteuert, hilft <strong>Cloudflare Turnstile</strong> – die Prüfung ohne Bilderrätsel. Der Preis: das Widget braucht JavaScript (ohne Skript ist das Formular dann nicht absendbar), und die IP-Adresse des Absenders geht an Cloudflare, was in die Datenschutzerklärung gehört. Schlüssel gibt es kostenlos im Cloudflare-Konto unter „Turnstile“.</p>
         <label class="check-label" for="turnstile"><input id="turnstile" name="turnstile" type="checkbox" value="1"{{ settings.turnstile ? ' checked' : '' }}> Turnstile-Prüfung in Formularen anzeigen</label>
         <label for="turnstileSiteKey">Öffentlicher Schlüssel (Site Key)</label>
@@ -271,7 +286,7 @@
         <label for="robotsExtra">Zusätzliche Zeilen für robots.txt</label>
         <textarea id="robotsExtra" name="robotsExtra" rows="8">{{ settings.robotsExtra }}</textarea>
         <p class="field-help">Nur Kommentarzeilen und einfache Anweisungen wie <code>Disallow: /pfad</code>, <code>Allow:</code>, <code>User-agent:</code> und <code>Crawl-delay:</code>. Leerzeilen trennen Blöcke, höchstens 200 Zeilen. Hier stehen zum Beispiel eigene Regeln je Bot – etwa welche KI-Crawler die Website lesen dürfen und welche nicht.</p>
-        <div class="section-head"><h2>Einwilligung</h2><span class="muted">Nur nötig, wenn die Website etwas von Dritten lädt</span></div>
+        <div class="section-head"><h2 id="einwilligung">Einwilligung</h2><span class="muted">Nur nötig, wenn die Website etwas von Dritten lädt</span></div>
         <label class="check-label" for="stickyHeader"><input id="stickyHeader" name="stickyHeader" type="checkbox" value="1"{{ settings.stickyHeader ? ' checked' : '' }}> Kopfbereich beim Scrollen oben halten</label>
         <label class="check-label" for="headerOverlay"><input id="headerOverlay" name="headerOverlay" type="checkbox" value="1"{{ settings.headerOverlay ? ' checked' : '' }}> Kopfbereich über dem Inhalt schweben lassen</label>
         <p class="field-help">Der Kopfbereich liegt dann über der ersten Sektion, wie der transparente Header in Flatsome. Seine Farben für den gescrollten Zustand stellst du im Editor des Kopfbereichs unter Design → Hintergrund „beim Scrollen“ ein; zusammen mit „oben halten“ bleibt er beim Scrollen sichtbar.</p>
@@ -349,14 +364,19 @@
         </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>
+        {# Bleibt am unteren Rand stehen, solange das Formular zu sehen ist: Der Knopf lag vorher
+           mehrere Bildschirmhöhen unter dem Feld, das man gerade geändert hatte. #}
+        <div class="form-save-bar">
+            <button class="primary" type="submit">Einstellungen speichern</button>
+            <span class="muted">Gilt für alles von „Unternehmensdaten“ bis „Einwilligung“.</span>
+        </div>
     </form>
     {% else %}
     <p class="card card-body muted">Unternehmensdaten, Knopf „nach oben“, Spamschutz und Einwilligung ändert nur ein Administrator.</p>
     {% endif %}
 </section>
 
-<section class="stack-section">
+<section class="stack-section" id="weiterleitungen">
     <div class="section-head"><h2>Weiterleitungen <span class="count">{{ redirects.total }}</span></h2><span class="muted">Werden vor dem 404 geprüft.</span></div>
     <form action="{{ path('admin_redirect_save') }}" method="post" class="card card-body">
         <input type="hidden" name="_csrf_token" value="{{ csrf_token('settings') }}">

templates/blocks/block.html.twig

@@ -65,7 +65,8 @@
            Betrachter den Klick ab - die Seite bleibt also in jedem Fall benutzbar. #}
         <a class="image-link image-zoom" href="{{ grossesBild }}" data-zoom data-caption="{{ props.caption|default('') }}" aria-label="{{ props.alt|default('Bild'|kant_t) }} {{ 'vergrößern'|kant_t }}">
     {%- elseif imageLinked -%}
-        <a class="image-link" href="{{ props.href }}"{% include 'blocks/link-attributes.html.twig' with {newTab: props.newTab|default(false)} only %}>
+        {# Ein Bild ohne Alternativtext - ein dekoratives Logo etwa - gäbe dem Link keinen Namen. #}
+        <a class="image-link" href="{{ props.href }}"{% if props.alt|default('') == '' %} aria-label="{{ props.caption|default('') ?: (props.href == '/' ? 'Startseite'|kant_t : 'Link'|kant_t ~ ': ' ~ props.href) }}"{% endif %}{% include 'blocks/link-attributes.html.twig' with {newTab: props.newTab|default(false)} only %}>
     {%- endif -%}<img src="{{ props.src }}" alt="{{ props.alt }}" width="{{ props.width }}" height="{{ props.height }}" loading="{{ eager or inHeader|default(false) ? 'eager' : 'lazy' }}"{{ eager ? ' fetchpriority="high"' : '' }} decoding="async"{% if props.sources|default([]) %} srcset="{% for source in props.sources %}{{ source.src }} {{ source.width }}w{% if not loop.last %}, {% endif %}{% endfor %}" sizes="{{ imageSizes }}"{% endif %}>{% if klick == 'vergroessern' or imageLinked %}</a>{% endif %}{% if props.caption|default('') %}<figcaption>{{ props.caption }}</figcaption>{% endif %}</figure>
 {% elseif type == 'iconcard' %}
     <div id="{{ block.id }}" class="block-iconcard{{ designClasses }}">
@@ -298,7 +299,7 @@
 {% elseif type == 'postlist' %}
     <div id="{{ block.id }}" class="block-postlist{{ designClasses }}">
         {% set feed = postLists[block.id]|default([]) %}
-        {% include 'blocks/post-list.html.twig' with {editing: editing|default(false), posts: feed.posts|default(feed), pages: feed.pages|default(1), page: feed.page|default(1), total: feed.total|default(null), layout: block.props.layout|default('karten'), showMeta: block.props.showMeta ?? true, showExcerpt: block.props.showExcerpt ?? true, showTerms: block.props.showTerms ?? true} only %}
+        {% include 'blocks/post-list.html.twig' with {editing: editing|default(false), posts: feed.posts|default(feed), pages: feed.pages|default(1), page: feed.page|default(1), total: feed.total|default(null), layout: block.props.layout|default('karten'), showMeta: block.props.showMeta ?? true, showExcerpt: block.props.showExcerpt ?? true, showTerms: block.props.showTerms ?? true, headingLevel: block.props.headingLevel|default(3) == 2 ? 2 : 3} only %}
     </div>
 {% elseif type == 'postnav' %}
     <div id="{{ block.id }}" class="block-postnav{{ designClasses }}">

templates/blocks/post-list.html.twig

@@ -18,7 +18,9 @@
         </a>
         {% endif %}
         <div class="post-body">
-            <h3><a href="{{ post.href }}">{{ post.title }}</a></h3>
+            {# Im Archiv folgt die Liste direkt auf die Hauptüberschrift, dort ist ein Beitrag eine
+               Überschrift zweiter Ebene. In einer Seite steht sie unter einer Abschnittsüberschrift. #}
+            <h{{ headingLevel|default(3) }}><a href="{{ post.href }}">{{ post.title }}</a></h{{ headingLevel|default(3) }}>
             {% if (showMeta ?? true) and (post.publishedAt or post.author) %}
             <p class="post-meta">
                 {% if post.publishedAt %}<time datetime="{{ post.publishedAt|date('Y-m-d') }}">{{ post.publishedAt|date('d.m.Y') }}</time>{% endif %}