Eigener Suchtitel, Schriften lokal, Bilder in Anzeigegroesse

Getrennter Titel fuer Suchergebnisse je Seite und Beitrag (Migration
20260913000100): auf der Seite steht "Leistungen", im Suchergebnis darf
der lange Titel stehen. Leer heisst weiterhin: der Titel der Seite.

Schriften kommen jetzt vom eigenen Server. Ein Knopf im Designbereich
oder cms:fonts:fetch holt die gewaehlten Google-Schnitte als WOFF2 nach
public/assets/fonts. Das spart zwei fremde Verbindungen nacheinander
(gemessen 820 ms) und die IP-Weitergabe an Google. Ohne Dateien bleibt
es beim bisherigen Verweis - eine Seite ohne Schrift waere schlimmer.

Ein Stylesheet statt vier, mit Pruefsumme im Namen und ohne Kommentare,
dazu eine .htaccess mit Kompression, Cache und Schutz interner Dateien.
Der Entwicklungsserver sendet dieselben Kopfzeilen, sonst misst man
lokal etwas, das es im Betrieb nicht gibt.

Bilder in der Groesse, in der sie erscheinen: ein nur fuer Desktop
gesetztes Hintergrundbild gilt auf dem Telefon in Telefongroesse
(189 KB -> 40 KB), img nennt seine feste Breite oder sizes="auto", und
fetchpriority liegt auf dem ersten Bild des Inhalts statt auf dem Logo.

Neu: npm run test:links prueft jeden internen Verweis auf seine
Antwort. Lighthouse gegen den Nachbau: Barrierefreiheit, Best
Practices und SEO 100 auf allen vier geprueften Adressen, Performance
100 ausser auf der bilderreichen Startseite (98 mobil, 96 Desktop).

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

templates/admin/base.html.twig

@@ -6,7 +6,7 @@
     <meta name="robots" content="noindex, nofollow">
     <title>{% block title %}Verwaltung{% endblock %} · KantSites</title>
     {% include 'favicon.html.twig' %}
-    <link rel="stylesheet" href="/assets/admin.css">
+    <link rel="stylesheet" href="/assets/admin.css?v={{ kant_version() }}">
 {% block styles %}{% endblock %}
     {% block scripts %}{% endblock %}
 </head>

templates/admin/editor.html.twig

@@ -3,8 +3,8 @@
 {% set subject = area ? area.document : page.document %}
 {% block title %}{{ subject.title }} bearbeiten{% endblock %}
 {% block body_class %}editor-body{% endblock %}
-{% block styles %}<link rel="stylesheet" href="/assets/editor.css">{% endblock %}
-{% block scripts %}<script type="module" src="/assets/editor.js"></script>{% endblock %}
+{% block styles %}<link rel="stylesheet" href="/assets/editor.css?v={{ kant_version() }}">{% endblock %}
+{% block scripts %}<script type="module" src="/assets/editor.js?v={{ kant_version() }}"></script>{% endblock %}
 {% block body %}
 {# The API base decides what is edited. An area is shared, so it has no draft and no
    publication: saving is live, and the publish button is left out. #}

templates/admin/media.html.twig

@@ -1,7 +1,7 @@
 {% extends 'admin/shell.html.twig' %}
 {% set nav = 'media' %}
 {% block title %}Mediathek{% endblock %}
-{% block scripts %}<script type="module" src="/assets/media-drop.js"></script>{% endblock %}
+{% block scripts %}<script type="module" src="/assets/media-drop.js?v={{ kant_version() }}"></script>{% endblock %}
 {% block heading %}Mediathek{% endblock %}
 {% block lead %}Alle Bilder, neueste zuerst. Beim Hochladen wird jedes Bild in WebP umgewandelt und in mehreren Breiten abgelegt; die Seite liefert dann die passende aus.{% endblock %}
 {% block content %}

templates/admin/pages.html.twig

@@ -88,6 +88,11 @@
                         <input type="hidden" name="_csrf_token" value="{{ csrf_token('pages') }}">
                         <input type="hidden" name="expectedVersion" value="{{ page.version }}">
                         <div class="fields">
+                            <div>
+                                <label for="seotitle-{{ page.id }}">Titel für Suchergebnisse</label>
+                                <input id="seotitle-{{ page.id }}" name="seoTitle" maxlength="160" value="{{ page.seo_title }}" placeholder="{{ page.document.title|default(page.path) }}">
+                                <p class="field-help">Leer lassen, wenn der Titel der Seite auch in der Suche stehen soll. Google zeigt etwa 60 Zeichen und schneidet danach ab; was dahinter steht, liest niemand.</p>
+                            </div>
                             <div>
                                 <label for="robots-{{ page.id }}">Suchmaschinen</label>
                                 <select id="robots-{{ page.id }}" name="robots">

templates/admin/theme.html.twig

@@ -110,5 +110,23 @@
     <p class="field-help">Farben entweder als <code>@schlüssel</code> aus der Palette oder als Wert wie <code>#1a2b3c</code>.</p>
     <button class="primary" type="submit">Design speichern</button>
 </form>
+
+<div class="section-head"><h2>Schriften ausliefern</h2><span class="muted">Von Google oder vom eigenen Server</span></div>
+{% if fontsMissing is empty and not fontsLocal %}
+<p class="field-help">Dieses Design nutzt nur Systemschriften – es lädt ohnehin nichts von Google.</p>
+{% else %}
+<p class="field-help">
+    {% if fontsLocal %}
+    <strong>Die Schriften liegen auf diesem Server.</strong> Besucher laden nichts von Google, und die Seite baut sich schneller auf, weil eine Kette aus zwei fremden Verbindungen entfällt.
+    {% else %}
+    <strong>Die Schriften kommen zurzeit von Google.</strong> Damit erfährt Google die IP-Adresse jedes Besuchers – in Deutschland ein abmahnfähiger Mangel (LG München I, 3 O 17493/20) –, und der Seitenaufbau wartet auf zwei fremde Verbindungen nacheinander. Mit dem Knopf werden die Dateien einmalig hierher geholt; die Lizenz der Schriften erlaubt das ausdrücklich.
+    {% endif %}
+    {% if fontsMissing %}<br>Noch nicht hier: {{ fontsMissing|join(', ') }}.{% endif %}
+</p>
+<form method="post" action="{{ path('admin_theme_fonts') }}">
+    <input type="hidden" name="_csrf_token" value="{{ csrf_token('theme') }}">
+    <button type="submit">{{ fontsLocal ? 'Schriften erneut holen' : 'Schriften auf diesen Server holen' }}</button>
+</form>
+{% endif %}
 <p class="footnote">KantSites · Arbeitsstand</p>
 {% endblock %}

templates/archive.html.twig

@@ -16,8 +16,8 @@
     {% if result.page < result.pages %}<link rel="next" href="{{ base }}?seite={{ result.page + 1 }}">{% endif %}
     <link rel="alternate" type="application/rss+xml" title="Beiträge" href="/feed.xml">
     {% include 'favicon.html.twig' %}
-    <link rel="stylesheet" href="/assets/site.css">
-    <link rel="stylesheet" href="/assets/design.css">
+    <link rel="stylesheet" href="/assets/site.css?v={{ kant_version() }}">
+    <link rel="stylesheet" href="/assets/design.css?v={{ kant_version() }}">
 </head>
 {% set consentOpen = not editing|default(false) and consentGate.needsBanner(app.request) %}
 <body class="kant{{ consentOpen ? ' consent-open' : '' }}">

templates/blocks/block.html.twig

@@ -10,7 +10,7 @@
     {% set tag = type == 'section' ? 'section' : 'div' %}
     <{{ tag }} id="{{ block.id }}" class="block-{{ type }} tone-{{ layout.tone|default('paper') }} width-{{ layout.width|default('normal') }}{{ designClasses }}">
         {% if type == 'section' %}<div class="shell section-inner">{% endif %}
-        {% 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), richHeadings: richHeadings|default(false), neighbours: neighbours|default({}), eagerImage: eagerImage|default(null)} only %}{% endfor %}
+        {% 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), richHeadings: richHeadings|default(false), neighbours: neighbours|default({}), eagerImage: eagerImage|default(null), inHeader: inHeader|default(false)} only %}{% endfor %}
         {% if type == 'section' %}</div>{% endif %}
     </{{ tag }}>
 {% elseif type == 'heading' %}
@@ -26,7 +26,18 @@
 {% elseif type == 'button' %}
     <a id="{{ block.id }}" class="button{{ designClasses }}" href="{{ props.href }}">{{ props.text }} <span aria-hidden="true">↗</span></a>
 {% elseif type == 'image' %}
-    <figure id="{{ block.id }}" class="block-image{{ designClasses }}">{% set eager = eagerImage|default(null) == block.id %}{% if props.href|default('') %}<a class="image-link" href="{{ props.href }}">{% endif %}<img src="{{ props.src }}" alt="{{ props.alt }}" width="{{ props.width }}" height="{{ props.height }}" loading="{{ eager ? '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="(max-width: 650px) 100vw, (max-width: 1024px) 50vw, 800px"{% endif %}>{% if props.href|default('') %}</a>{% endif %}{% if props.caption|default('') %}<figcaption>{{ props.caption }}</figcaption>{% endif %}</figure>
+    {# Wie breit das Bild tatsaechlich erscheint. Steht im Block eine feste Breite - ein Logo mit
+       190px, ein Symbol mit 72px -, dann ist das die Antwort, und der Browser laedt die kleine
+       Variante statt der grossen. Ohne feste Breite bleibt es bei der Annahme nach Spaltenbreite. #}
+    {% set festeBreite = block.style.desktop.maxWidth|default('') %}
+    {% set eager = eagerImage|default(null) == block.id %}
+    {# „auto“ heißt: der Browser misst selbst nach, wie breit das Bild tatsächlich erscheint, und
+       wählt genau dazu die Variante. Das geht nur bei verzögert geladenen Bildern - beim
+       vorgezogenen Bild steht die Größe noch nicht fest. Die Angaben dahinter sind der Rückfall
+       für Browser, die „auto“ noch nicht kennen (heute Safari). #}
+    {% set annahme = '(max-width: 650px) 100vw, (max-width: 1024px) 50vw, 800px' %}
+    {% set imageSizes = festeBreite ends with 'px' ? festeBreite : (eager or inHeader|default(false) ? annahme : 'auto, ' ~ annahme) %}
+    <figure id="{{ block.id }}" class="block-image{{ designClasses }}">{% if props.href|default('') %}<a class="image-link" href="{{ props.href }}">{% 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 props.href|default('') %}</a>{% endif %}{% if props.caption|default('') %}<figcaption>{{ props.caption }}</figcaption>{% endif %}</figure>
 {% elseif type == 'iconcard' %}
     <div id="{{ block.id }}" class="block-iconcard{{ designClasses }}">
         {% include 'blocks/icon.html.twig' with {name: props.icon} only %}
@@ -45,7 +56,7 @@
     </figure>
 {% elseif type == 'logos' %}
     <ul id="{{ block.id }}" class="block-logos{{ designClasses }}">
-        {% for child in block.children|default([]) %}<li>{% 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), richHeadings: richHeadings|default(false), neighbours: neighbours|default({}), eagerImage: eagerImage|default(null)} only %}</li>{% endfor %}
+        {% for child in block.children|default([]) %}<li>{% 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), richHeadings: richHeadings|default(false), neighbours: neighbours|default({}), eagerImage: eagerImage|default(null), inHeader: inHeader|default(false)} only %}</li>{% endfor %}
     </ul>
 {% elseif type == 'cta' %}
     <div id="{{ block.id }}" class="block-cta{{ designClasses }}">
@@ -88,7 +99,7 @@
     {% set section = sections[props.partial]|default(null) %}
     {% if section %}
         <div id="{{ block.id }}" class="block-partialref{{ designClasses }}">
-            {% for child in section.blocks %}{% 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), richHeadings: richHeadings|default(false), neighbours: neighbours|default({}), eagerImage: eagerImage|default(null)} only %}{% endfor %}
+            {% for child in section.blocks %}{% 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), richHeadings: richHeadings|default(false), neighbours: neighbours|default({}), eagerImage: eagerImage|default(null), inHeader: inHeader|default(false)} only %}{% endfor %}
         </div>
     {% elseif editing|default(false) %}
         <p id="{{ block.id }}" class="block-unavailable" role="note">Die verknüpfte Sektion „{{ props.partial }}“ gibt es nicht mehr. Der Verweis bleibt gespeichert.</p>
@@ -117,22 +128,22 @@
         <ul class="tabs-nav">
             {% for child in block.children|default([]) %}<li><a href="#{{ child.id }}">{{ child.props.title }}</a></li>{% endfor %}
         </ul>
-        {% 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), richHeadings: richHeadings|default(false), neighbours: neighbours|default({}), eagerImage: eagerImage|default(null)} only %}{% endfor %}
+        {% 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), richHeadings: richHeadings|default(false), neighbours: neighbours|default({}), eagerImage: eagerImage|default(null), inHeader: inHeader|default(false)} only %}{% endfor %}
     </div>
 {% elseif type == 'tabitem' %}
     <section id="{{ block.id }}" class="block-tabitem{{ designClasses }}">
         <h3 class="tabs-heading">{{ props.title }}</h3>
-        {% 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), richHeadings: richHeadings|default(false), neighbours: neighbours|default({}), eagerImage: eagerImage|default(null)} only %}{% endfor %}
+        {% 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), richHeadings: richHeadings|default(false), neighbours: neighbours|default({}), eagerImage: eagerImage|default(null), inHeader: inHeader|default(false)} only %}{% endfor %}
     </section>
 {% elseif type == 'accordion' %}
     <div id="{{ block.id }}" class="block-accordion{{ designClasses }}">
-        {% 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), richHeadings: richHeadings|default(false), neighbours: neighbours|default({}), eagerImage: eagerImage|default(null)} only %}{% endfor %}
+        {% 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), richHeadings: richHeadings|default(false), neighbours: neighbours|default({}), eagerImage: eagerImage|default(null), inHeader: inHeader|default(false)} only %}{% endfor %}
     </div>
 {% elseif type == 'accordionitem' %}
     <details id="{{ block.id }}" class="block-accordionitem{{ designClasses }}"{% if props.open|default(false) %} open{% endif %}>
         <summary>{{ props.title }}</summary>
         <div class="accordion-body">
-            {% 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), richHeadings: richHeadings|default(false), neighbours: neighbours|default({}), eagerImage: eagerImage|default(null)} only %}{% endfor %}
+            {% 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), richHeadings: richHeadings|default(false), neighbours: neighbours|default({}), eagerImage: eagerImage|default(null), inHeader: inHeader|default(false)} only %}{% endfor %}
         </div>
     </details>
 {% elseif type == 'icon' %}
@@ -161,7 +172,7 @@
     <div id="{{ block.id }}" class="block-slider{{ designClasses }} slide-desktop-{{ props.desktopVisible }} slide-tablet-{{ props.tabletVisible }} slide-mobile-{{ props.mobileVisible }}{{ props.snap ? ' slider-snap' : '' }}{{ props.dots ?? false ? ' slider-dots' : '' }}"{% if props.autoplay|default(0) >= 3 %} data-autoplay="{{ props.autoplay }}"{% endif %}
          tabindex="0" role="group" aria-label="Zum Blättern seitwärts scrollen">
         {% for child in block.children|default([]) %}
-        <div class="slider-slide">{% 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), richHeadings: richHeadings|default(false), neighbours: neighbours|default({}), eagerImage: eagerImage|default(null)} only %}</div>
+        <div class="slider-slide">{% 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), richHeadings: richHeadings|default(false), neighbours: neighbours|default({}), eagerImage: eagerImage|default(null), inHeader: inHeader|default(false)} only %}</div>
         {% endfor %}
     </div>
 {% elseif type == 'embed' %}
@@ -204,7 +215,7 @@
     </div>
 {% elseif type == 'gallery' %}
     <div id="{{ block.id }}" class="block-gallery{{ designClasses }}" role="group" aria-label="Bildergalerie">
-        {% 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), richHeadings: richHeadings|default(false), neighbours: neighbours|default({}), eagerImage: eagerImage|default(null)} only %}{% endfor %}
+        {% 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), richHeadings: richHeadings|default(false), neighbours: neighbours|default({}), eagerImage: eagerImage|default(null), inHeader: inHeader|default(false)} only %}{% endfor %}
     </div>
 {% else %}
     {#

templates/consent.html.twig

@@ -6,7 +6,7 @@
     <title>Einwilligung{{ settings.legalName ? ' · ' ~ settings.legalName : '' }}</title>
     <meta name="robots" content="noindex, follow">
     {% include 'favicon.html.twig' %}
-    <link rel="stylesheet" href="/assets/site.css">
+    <link rel="stylesheet" href="/assets/site.css?v={{ kant_version() }}">
 </head>
 <body class="kant consent-page">
     <main id="main" tabindex="-1">

templates/maintenance.html.twig

@@ -6,7 +6,7 @@
     <meta name="robots" content="noindex">
     <title>Kurz nicht erreichbar</title>
     {% include 'favicon.html.twig' %}
-    <link rel="stylesheet" href="/assets/site.css">
+    <link rel="stylesheet" href="/assets/site.css?v={{ kant_version() }}">
 </head>
 <body class="kant">
     <main class="shell error-page" id="main" tabindex="-1">

templates/not-found.html.twig

@@ -1,5 +1,5 @@
 <!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">{% include 'favicon.html.twig' %}</head>
+<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?v={{ kant_version() }}">{% include 'favicon.html.twig' %}</head>
 {% 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

templates/page.html.twig

@@ -3,11 +3,13 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>{{ page.document.title }}</title>
+    {# Der Titel fuer die Suche, sonst der Titel der Seite. #}
+    {% set seoTitle = page.seo_title|default('') ?: page.document.title %}
+    <title>{{ seoTitle }}</title>
     <meta name="description" content="{{ page.document.description }}">
     <link rel="canonical" href="{{ canonical }}">
     {% if page.robots|default('index') != 'index' %}<meta name="robots" content="noindex, follow">{% endif %}
-    <meta property="og:title" content="{{ page.document.title }}">
+    <meta property="og:title" content="{{ seoTitle }}">
     <meta property="og:description" content="{{ page.document.description }}">
     <meta property="og:type" content="{{ page.type|default('page') == 'post' ? 'article' : 'website' }}">
     <meta property="og:url" content="{{ canonical }}">
@@ -23,14 +25,24 @@
     <meta name="twitter:card" content="summary">
     {% endif %}
     {% include 'favicon.html.twig' %}
-    <link rel="stylesheet" href="/assets/site.css">
-    {% if googleFonts|default(null) %}<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="{{ googleFonts }}">{% endif %}
+    {# Ein Bündel statt vier Dateien: jede einzelne hält das Zeichnen der Seite auf. Fehlt es
+       (kein Schreibrecht im Ordner), werden die Quellen einzeln geladen - langsamer, aber heil. #}
+    {% if styleBundle|default(null) %}
+    <link rel="stylesheet" href="{{ styleBundle }}">
+    {% else %}
+    <link rel="stylesheet" href="/assets/site.css?v={{ kant_version() }}">
+    {% if localFonts|default([]) %}<link rel="stylesheet" href="/assets/fonts/fonts.css?v={{ kant_version() }}">{% endif %}
+    {% if page.document.schemaVersion >= 2 %}<link rel="stylesheet" href="/assets/design.css?v={{ kant_version() }}">{% endif %}
+    {% if page.document.schemaVersion >= 3 %}<link rel="stylesheet" href="/assets/enhancements.css?v={{ kant_version() }}">{% endif %}
+    {% endif %}
+    {% if localFonts|default([]) %}
+    {# Die wichtigsten Schnitte vorab, damit die erste Zeile in der richtigen Schrift steht. #}
+    {% for font in localFonts %}<link rel="preload" href="{{ font }}" as="font" type="font/woff2" crossorigin>{% endfor %}
+    {% elseif googleFonts|default(null) %}<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="{{ googleFonts }}">{% endif %}
 {% if hasPosts|default(false) %}    <link rel="alternate" type="application/rss+xml" title="Beiträge" href="/feed.xml">
 {% endif %}
-    {% if page.document.schemaVersion >= 2 %}<link rel="stylesheet" href="/assets/design.css">{% endif %}
-    {% if page.document.schemaVersion >= 3 %}<link rel="stylesheet" href="/assets/enhancements.css">{% endif %}
-    {% if needsTabs|default(false) %}<script src="/assets/tabs.js" defer></script>{% endif %}
-    {% if needsSlider|default(false) %}<script src="/assets/slider.js" defer></script>{% endif %}
+    {% if needsTabs|default(false) %}<script src="/assets/tabs.js?v={{ kant_version() }}" defer></script>{% endif %}
+    {% if needsSlider|default(false) %}<script src="/assets/slider.js?v={{ kant_version() }}" defer></script>{% endif %}
     {# Own scripts of this page, as a file. Never rendered in the editor preview: the preview must
        show the layout, not run code that could change the page under the editor's hands. #}
     {% if pageScript|default(null) and not editing|default(false) %}<script src="{{ pageScript }}" defer></script>{% endif %}
@@ -52,7 +64,7 @@
        instead of being written into this template. #}
     {% if areas.header|default(null) %}
     <header class="site-header{{ siteSettings.load().stickyHeader ? ' is-sticky' : '' }}">
-        {% for block in areas.header.blocks %}{% include 'blocks/block.html.twig' with {block: block, editing: editing|default(false), postLists: {}, forms: {}, breadcrumbs: [], navigation: navigation|default({}), sections: sections|default({}), richText: areas.header.schemaVersion|default(1) >= 12, richHeadings: areas.header.schemaVersion|default(1) >= 17, eagerImage: eagerImage|default(null)} only %}{% endfor %}
+        {% for block in areas.header.blocks %}{% include 'blocks/block.html.twig' with {block: block, editing: editing|default(false), postLists: {}, forms: {}, breadcrumbs: [], navigation: navigation|default({}), sections: sections|default({}), richText: areas.header.schemaVersion|default(1) >= 12, richHeadings: areas.header.schemaVersion|default(1) >= 17, eagerImage: eagerImage|default(null), inHeader: true} only %}{% endfor %}
     </header>
     {% endif %}
     <main id="main" tabindex="-1">