Close the open menu on a click beside it and add social icons

The open burger menu now closes when someone clicks elsewhere, without a script: an invisible layer that belongs to the menu button covers the page while the menu is open. Facebook, Instagram and WhatsApp join the icon set, so menu buttons can carry them. The stroke attributes of every icon move into the stylesheet, which saves about 4 KB per page. Hüfner gets a right-aligned menu with the quote button, Facebook and Instagram as menu buttons. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-12 16:06:15 +02:00
1 parent 3c5c50f499
commit 9e82918a5e
@@ -2,6 +2,17 @@

 Stand: 12.10.2026. Arbeitstitel KantSites; Produktname offen.

+## ADR 117 – Menü schließt beim Klick daneben, Netzwerk-Symbole, schlankere Symbole (12.10.2026)
+
+Anlass: Umut: „Bei Mobilmenü, wenn es aufgeklappt ist, schließt es nicht, wenn man irgendwo anders hinklickt.“ Und für Hüfner: Facebook, Instagram und „Angebot anfragen“ als Menü-Buttons statt eigener Knöpfe im Kopf.
+
+**Entscheidungen.**
+1. **Klick daneben schließt – ohne Skript.** Das Menü bleibt ein `details` (es soll auf jeder Seite ohne Skript aufgehen). Solange es offen ist, legt `summary::before` eine unsichtbare, feste Fläche über die Seite (`z-index:29`); sie gehört zum Knopf, ein Klick darauf schließt also. Die Menüfläche liegt darüber (`z-index:30`; außerhalb des Kopfbereichs per `:where()` mit niedriger Spezifität, damit die Platzierung im Kopf gewinnt). Der erste Klick daneben schließt nur und löst nichts darunter aus – wie bei jedem aufgeklappten Menü. Escape schließt weiterhin nicht (das bräuchte ein Skript). Grenze: Hat ein Vorfahr des Menüs `transform`/`filter`, deckt die feste Fläche nur diesen Vorfahren ab.
+2. **Facebook, Instagram, WhatsApp im Symbolsatz.** Dieselben Strichformen wie `social-icon.html.twig`, als Pfad in `icon.html.twig`, `icons.js` (Reiter „Soziale Netzwerke“) und `DocumentValidator::ICONS`. Damit sind sie an Menü-Buttons, Buttons, Symbolkarten und Symbolen wählbar. Keine Schemaänderung; ein Dokument mit diesen Symbolen braucht aber einen Kern ab 1.31.0.
+3. **Strichattribute ins Stylesheet.** Jedes Symbol trug `fill`, `stroke`, `stroke-width`, `stroke-linecap` und `stroke-linejoin` als Attribute, rund 105 Zeichen, bei etwa 40 Symbolen je Seite gut 4 KB HTML. Jetzt steht das einmal als `svg.block-icon{…}` in `site.css` und `admin.css`; `width`/`height` bleiben am Element, damit nichts ohne Stylesheet riesig wird. Anlass war die Hüfner-Startseite, die mit den Menü-Buttons das HTML-Budget von 150 KB riss.
+
+**Geprüft:** Eigene Browserprüfung auf iPad (quer) und iPhone: Menü öffnet, Menülinks liegen über der Fläche, Klick daneben schließt, kein waagerechtes Scrollen. `test:menu-buttons` (Menü-Buttons, axe), `test:editor` (Verwaltung mit Symbolen, axe), `npm test` (Symbolsatz in Twig, JS und Validator gleich). `test:responsive-navigation` scheitert im Editorteil am Klick auf den Strukturbaum – ebenso ohne diese Änderungen (Gegenprobe mit zurückgesetzten Dateien), also vorbestehend.
+
 ## ADR 116 – Härtung nach dem Sicherheitscheck (12.10.2026)

 Anlass: Umut: „Kannst du mal einen Sicherheitscheck für KantSites machen? Das Ding muss bombensicher sein.“ Fünf getrennte Prüfungen (Anmeldung/Rollen, öffentliche Eingaben, XSS/Ausgabe, Uploads/Dateien, Installer/Updater/Betrieb) plus ein Blick von außen auf die Live-Seiten. Keine ausnutzbare Lücke ohne Anmeldung bei korrekt eingerichteter Installation; behoben wird, was übrig blieb.
@@ -1,5 +1,15 @@
 # Projektstatus

+## Fassung 1.31.0: Menü schließt beim Klick daneben, Netzwerk-Symbole; Hüfner-Kopf (12.10.2026)
+
+**Anlass:** Umut: aufgeklapptes Mobilmenü schließt nicht beim Klick daneben; bei Hüfner wirkt der Kopf auf dem iPad verloren (Menü-Knopf mittig), und Facebook, Instagram und „Angebot anfragen“ sollen ins Menü.
+
+**Neu im Kern (ADR 117):** Klick neben das aufgeklappte Menü schließt es – reines CSS (unsichtbare Fläche am Menü-Knopf), kein Skript. Facebook, Instagram und WhatsApp im Symbolsatz (Menü-Buttons, Buttons, Symbole). Die Strichattribute der Symbole stehen jetzt als `svg.block-icon` in `site.css`/`admin.css` statt an jedem Symbol (rund 4 KB weniger HTML je Seite).
+
+**Hüfner (nur Inhalt):** Kopf aus Logo und rechtsbündigem Menü; „Angebot anfragen“, Facebook und Instagram als Menü-Buttons. Desktop zeigt in der Zeile nur „Angebot anfragen“ (F/I stehen in der Leiste darüber), im aufgeklappten Menü stehen alle drei, die Symbole nebeneinander. Menü-Knopf auf iPad und Telefon rechts; Abstand und Schrift schrumpfen knapp über 1024 px mit, damit die Zeile nicht umbricht. Upload-Paket neu (`var/huefner-upload.zip`, braucht 1.31.0).
+
+**Geprüft:** PHPUnit vollständig 657 grün; `npm test` 41; `lint:twig`; `test:menu-buttons` und `test:editor` grün inklusive axe; `test:browser` auf Hüfner grün (HTML Startseite rund 148 KB). Eigene Browserprüfung auf iPad quer und iPhone: öffnen, Menülinks bedienbar, Klick daneben schließt, kein waagerechtes Scrollen; Kopf bei 810, 1025, 1080, 1100, 1280 und 1366 px im Bild. **Bekannt:** `test:responsive-navigation` scheitert im Editorteil am Klick auf den Strukturbaum – auch ohne diese Änderungen (Gegenprobe), vorbestehend.
+
 ## Fassung 1.30.0: Härtung nach dem Sicherheitscheck (12.10.2026)

 **Anlass:** Umut: „Sicherheitscheck für KantSites … das Ding muss bombensicher sein.“ Prüfung in fünf Bereichen plus Blick von außen auf huefner-gartenbau.de und kant-it.de; Ergebnis im Chat vom 12.10.2026, Umsetzung „1.30.0, Signatur später“.
@@ -1,3 +1,5 @@
+/* Der Strich aller Symbole aus icon.html.twig, wie auf der Website (site.css). */
+svg.block-icon{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
 /* Administration: shared foundation and the management screens.
   The editor has its own stylesheet (editor.css) that only the editor and the media page load. */

@@ -107,6 +107,10 @@ export const ICON_PATHS = {
  hardware: 'M4 5h16v11H4Zm4 15h8m-4-4v4',
  network: 'M5 3h14v5H5Zm0 13h14v5H5Zm7-8v8M8 8v3h8V8',
  design: 'M4 20h16M6 16 18 4l3 3L9 19l-4 1Z',
+  // Soziale Netzwerke
+  facebook: 'M15.5 4h-2.2A3.8 3.8 0 0 0 9.5 7.8V10H7v3.2h2.5V20h3.3v-6.8h2.4l.5-3.2h-2.9V8.2c0-.6.3-.9.9-.9h2Z',
+  instagram: 'M8.1 3.5h7.8a4.6 4.6 0 0 1 4.6 4.6v7.8a4.6 4.6 0 0 1-4.6 4.6H8.1a4.6 4.6 0 0 1-4.6-4.6V8.1a4.6 4.6 0 0 1 4.6-4.6ZM12 8.1a3.9 3.9 0 1 0 0 7.8 3.9 3.9 0 0 0 0-7.8ZM17 7h.01',
+  whatsapp: 'M4 20l1.4-4A8.5 8.5 0 1 1 8.6 19.1ZM9.3 9.2c0 3 2.5 5.5 5.5 5.5l1.3-1.4-2-.9-.9.8a4.1 4.1 0 0 1-2.3-2.3l.8-.9-.9-2Z',
 };

 export const ICON_LABELS = {
@@ -130,6 +134,7 @@ export const ICON_LABELS = {
  check: 'Häkchen', 'check-circle': 'Häkchen im Kreis', info: 'Info', help: 'Frage', alert: 'Warnung',
  search: 'Suche', settings: 'Einstellungen', filter: 'Filter', grid: 'Raster', list: 'Liste', sparkle: 'Funkeln',
  coffee: 'Kaffee', utensils: 'Besteck', laptop: 'Laptop', hardware: 'Bildschirm', network: 'Netzwerk', design: 'Stift',
+  facebook: 'Facebook', instagram: 'Instagram', whatsapp: 'WhatsApp',
 };

 /** Die Kategorien des Auswahlfensters, in der Reihenfolge der Reiter. Jedes Symbol steht genau einmal. */
@@ -141,6 +146,7 @@ export const ICON_GROUPS = [
  ['Personen & Sicherheit', ['user', 'people', 'login', 'lock', 'key', 'shield', 'eye', 'thumbs-up', 'award', 'graduation', 'heart', 'star']],
  ['Haus & Handwerk', ['home', 'building', 'wrench', 'hammer', 'brush', 'ruler', 'leaf', 'tree', 'sun', 'droplet', 'flame', 'bolt', 'solar', 'thermometer', 'snowflake', 'car']],
  ['Allgemein', ['check', 'check-circle', 'info', 'help', 'alert', 'search', 'settings', 'filter', 'grid', 'list', 'sparkle', 'coffee', 'utensils', 'laptop', 'hardware', 'network', 'design']],
+  ['Soziale Netzwerke', ['facebook', 'instagram', 'whatsapp']],
 ];

 const svgNS = 'http://www.w3.org/2000/svg';
@@ -264,6 +264,8 @@ body.consent-open{padding-bottom:320px}
 /* A single icon, sized by class because inline styles are forbidden by the policy. */
 .block-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--accent);line-height:0}
 .block-icon svg{width:100%;height:100%;display:block}
+/* Der Strich aller Symbole (icon.html.twig) - einmal hier statt als Attribute an jedem einzelnen. */
+svg.block-icon{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
 /* Das eingebettete SVG traegt dieselbe Klasse wie seine Huelle und setzte deshalb die
   Akzentfarbe erneut - eine am Symbolblock eingestellte Farbe kam nie an. */
 .block-icon .block-icon{color:inherit}
@@ -475,6 +477,12 @@ body.consent-open{padding-bottom:320px}
  .menu-collapse-mobile>.menu-list{display:none}
 }
 .menu-burger>summary{min-height:44px;min-width:44px}
+/* Ein Klick neben das aufgeklappte Menue schliesst es - ohne Skript: Solange es offen ist, liegt
+   eine unsichtbare Flaeche ueber der Seite, die zum Menue-Knopf gehoert. Ein Klick darauf ist ein
+   Klick auf den Knopf, und der klappt zu. Die Flaeche des Menues liegt darueber und bleibt
+   bedienbar; :where() haelt die Regel schwaecher als die Platzierung im Kopfbereich. */
+.menu-burger[open]>summary::before{content:'';position:fixed;top:0;right:0;bottom:0;left:0;z-index:29;cursor:default}
+:where(.menu-burger[open])>.menu-burger-body{position:relative;z-index:30}
 .menu-burger-body{overflow-wrap:anywhere}
 /* Im Kopfbereich klappt das Menue als Flaeche unter dem Kopf auf, ueber die volle Breite.
   Inline geoeffnet stand es sonst in der schmalen Spalte neben der Marke und schob den
@@ -499,31 +499,43 @@ $kopf = [
                    'desktop' => ['width' => '153px', 'maxWidth' => '153px', 'flexShrink' => 0, 'margin' => $seiten('0px')],
                    'mobile' => ['width' => '121px', 'maxWidth' => '121px'],
                ], '/', '& img{display:block;width:100%;height:auto;border-radius:0}'),
+                // Umut, 12.10.2026: Facebook, Instagram und „Angebot anfragen“ gehören ins Menü
+                // (Menü-Buttons, ADR 110). Das Menü steht rechtsbündig - auch auf dem iPad quer, wo
+                // vorher der Menü-Knopf mitten im Kopf stand. Auf dem Desktop zeigt die Zeile nur den
+                // ersten Button (Angebot anfragen); Facebook und Instagram stehen dort schon in der
+                // Leiste darüber. Im aufgeklappten Menü stehen alle drei, die Symbole nebeneinander.
                $column('kopf-navigation', [
                    ['id' => 'kopf-menue', 'type' => 'menu', 'props' => ['slot' => 'header', 'layout' => 'horizontal', 'collapse' => 'tablet', 'burgerLabel' => 'icon'],
                        'style' => ['desktop' => [
-                            'fontFamily' => 'heading', 'fontSize' => '18px', 'fontWeight' => '700', 'letterSpacing' => '0.06em', 'textTransform' => 'uppercase', 'color' => '@tinte',
+                            'fontFamily' => 'heading', 'fontSize' => '18px', 'fontWeight' => '700', 'letterSpacing' => '0.04em', 'textTransform' => 'uppercase', 'color' => '@tinte',
                            'burgerColor' => '@papier', 'burgerBackgroundColor' => '@tinte', 'burgerBorderColor' => '@tinte', 'burgerBorderRadius' => '999px',
                        ]],
                        // Unterstrich, der beim Überfahren von links einläuft. Das Klappmenü auf
                        // Tablet und Telefon liegt als Fläche unter dem ganzen Kopf.
-                        'css' => "& .menu-list{gap:4px 34px;justify-content:center;align-items:center}\n"
-                            ."& .menu-list a{position:relative;padding:6px 0;text-decoration:none;color:#17221b}\n"
-                            ."& .menu-list a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;background:#067f30;transition:right .25s ease}\n"
-                            ."& .menu-list a:hover::after{right:0}\n"
-                            ."& .menu-burger summary{width:46px;height:46px;display:flex;align-items:center;justify-content:center;padding:0}\n"
-                            ."& .menu-burger-body{position:absolute;left:0;right:0;top:100%;background:#fff;padding:4px 20px 20px;border-top:1px solid #d4e8db;box-shadow:0 18px 30px rgba(20,32,26,.12);font-size:22px}\n"
-                            ."& .menu-burger-body .menu-list{flex-direction:column;align-items:stretch;gap:0}\n"
-                            ."& .menu-burger-body .menu-list a{display:block;padding:14px 0;border-bottom:1px solid #e0efe5}\n"
-                            .'& .menu-burger-body .menu-list a::after{display:none}'],
-                ], ['desktop' => ['flexGrow' => 1, 'display' => 'flex', 'justifyContent' => 'center'], 'tablet' => ['justifyContent' => 'flex-end', 'order' => 3, 'flexGrow' => 0], 'mobile' => ['justifyContent' => 'flex-end', 'order' => 3, 'flexGrow' => 0]]),
-                $zeile('kopf-aktionen', [
-                    ['id' => 'kopf-profile', 'type' => 'social', 'props' => ['size' => 20, 'shape' => 'plain', 'layout' => 'horizontal', 'labels' => false, 'networks' => ['instagram', 'facebook']],
-                        'style' => ['desktop' => ['color' => '@tinte', 'gap' => '10px']],
-                        'css' => "& a{width:46px;height:46px;justify-content:center;border-radius:50%;box-shadow:inset 0 0 0 1px #cae3d3}\n& a:hover{background:#e9f5ed;color:#067f30}",
-                        'layout' => ['visibility' => 'hide-mobile']],
-                    $knopf('kopf-knopf', 'Angebot anfragen', '/#kontakt', 'rot', true, [], 'desktop'),
-                ], '10px', ['flexShrink' => 0], ['margin' => ['left' => 'auto']], ['margin' => ['left' => 'auto']]),
+                        // Abstand und Schrift schrumpfen knapp über der Tablet-Grenze fließend mit, damit
+                        // die Zeile auch bei 1025 px nicht umbricht (eigenes CSS kennt kein @media).
+                        // justify-content am Menü selbst: zusammengeklappt steht nur der Knopf darin, und
+                        // der soll rechts stehen, nicht direkt neben dem Logo.
+                        // Knapp gehalten, die Startseite steht am HTML-Budget. Buttons im Menü (a.cms-button)
+                        // bekommen keine Linkregeln; die Symbol-Buttons sind Ringe wie früher im Kopf.
+                        'css' => "justify-content:flex-end\n& .menu-list{gap:4px clamp(12px,1.9vw,26px);justify-content:flex-end;align-items:center}\n"
+                            ."& a{position:relative;padding:6px 0;text-decoration:none;color:#17221b;font-size:clamp(15px,1.45vw,18px)}\n"
+                            ."& a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;background:#067f30;transition:right .25s ease}\n"
+                            ."& a:hover::after{right:0}\n"
+                            ."& a.cms-button{padding:13px 24px;color:#fff;font-size:17px;white-space:nowrap;margin-left:6px}\n"
+                            ."& a.cms-button::after{display:none}\n"
+                            ."& a.icon-only{width:46px;height:46px;padding:0;justify-content:center;margin:0;color:#17221b;background:transparent;box-shadow:inset 0 0 0 1px #cae3d3}\n"
+                            ."& a.icon-only:hover{background:#e9f5ed;color:#067f30}\n"
+                            ."& > .menu-list > .menu-item-button ~ .menu-item-button{display:none}\n"
+                            ."& summary{width:46px;height:46px;display:flex;align-items:center;justify-content:center;padding:0;margin-left:auto}\n"
+                            ."& .menu-burger-body{background:#fff;padding:4px 20px 20px;border-top:1px solid #d4e8db;box-shadow:0 18px 30px rgba(20,32,26,.12);font-size:22px}\n"
+                            ."& .menu-burger-body ul{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:0}\n"
+                            ."& .menu-burger-body li{flex:0 0 100%}\n"
+                            ."& .menu-burger-body a{display:block;padding:14px 0;border-bottom:1px solid #e0efe5}\n"
+                            ."& .menu-burger-body a.cms-button{display:flex;justify-content:center;border:0;margin:16px 0 0;padding:15px 24px}\n"
+                            ."& .menu-burger-body .menu-item-button ~ .menu-item-button{flex:0 0 auto;margin:16px 10px 0 0}\n"
+                            ."& .menu-burger-body a.icon-only{margin:0;padding:0}"],
+                ], ['desktop' => ['flexGrow' => 1, 'display' => 'flex', 'justifyContent' => 'flex-end', 'minWidth' => '0']]),
            ], '24px', ['justifyContent' => 'space-between', 'minHeight' => '82px'], ['minHeight' => '66px', 'gap' => '12px']),
        ], [
            'desktop' => ['backgroundColor' => '#fffffff5', 'padding' => ['top' => '0px', 'bottom' => '0px'], 'borderWidth' => $nurUnten('1px'), 'borderStyle' => 'solid', 'borderColor' => '@linie'],
@@ -533,7 +545,6 @@ $kopf = [

 // Der rote Knopf im Kopf ist kleiner als die im Inhalt.
 $kleinerKnopf = static fn (array $b): array => [...$b, 'css' => str_replace('min-height:58px;padding:0 30px', 'min-height:50px;padding:0 22px;font-size:16px;white-space:nowrap', $b['css'])];
-$kopf['blocks'][1]['children'][0]['children'][2]['children'][1]['css'] = str_replace('min-height:58px;padding:0 30px', 'min-height:46px;padding:0 24px;font-size:17px', $kopf['blocks'][1]['children'][0]['children'][2]['children'][1]['css']);

 // ---------------------------------------------------------------------------------------------
 // Fußbereich
@@ -1588,6 +1599,14 @@ $menus->save('header', 'Hauptnavigation', [
    $sprung('Karriere', 'karriere'),
    ['label' => 'Alpakas', 'type' => 'page', 'pageId' => $alpakaId, 'anchor' => '', 'children' => []],
    $sprung('Kontakt', 'kontakt'),
+    // Menü-Buttons (ADR 110). Feste Kennungen, damit die Regeln im Kopf sie finden. Facebook und
+    // Instagram nur als Symbol, wie vorher die runden Knöpfe im Kopf.
+    ['label' => 'Angebot anfragen', 'type' => 'page', 'pageId' => $homeId, 'anchor' => 'kontakt', 'icon' => 'arrow-right', 'iconPosition' => 'after',
+        'button' => ['id' => 'mc7a0000001', 'mobile' => 'menu'], 'children' => []],
+    ['label' => 'Facebook', 'type' => 'url', 'url' => $facebook, 'newTab' => true, 'icon' => 'facebook',
+        'button' => ['id' => 'mfb00000001', 'mobile' => 'menu', 'iconOnly' => true], 'children' => []],
+    ['label' => 'Instagram', 'type' => 'url', 'url' => $instagram, 'newTab' => true, 'icon' => 'instagram',
+        'button' => ['id' => 'm1600000001', 'mobile' => 'menu', 'iconOnly' => true], 'children' => []],
 ], 0);
 echo "Menü angelegt\n";

@@ -16,7 +16,7 @@ final class DocumentValidator
    /** Blocks introduced with schema v6 for the sections a marketing page actually needs. */
    public const V6_TYPES = ['iconcard', 'stat', 'quote', 'logos', 'cta', 'contact', 'divider', 'spacer', 'accordion', 'accordionitem'];
    /** Icons ship as inline SVG from this fixed list; no icon font and no external request. */
-    public const ICONS = ['arrow-up-right', 'arrow-right', 'arrow-left', 'arrow-up', 'arrow-down', 'chevron-right', 'chevron-left', 'chevron-up', 'chevron-down', 'arrow-circle', 'external', 'refresh', 'menu', 'close', 'plus', 'minus', 'phone', 'app', 'mail', 'chat', 'send', 'calendar', 'clock', 'pin', 'map', 'navigation', 'web', 'wifi', 'support', 'shop', 'cart', 'tag', 'euro', 'credit-card', 'gift', 'percent', 'truck', 'package', 'briefcase', 'document', 'download', 'upload', 'print', 'link', 'share', 'image', 'camera', 'video', 'play', 'pause', 'music', 'mic', 'book', 'user', 'people', 'login', 'lock', 'key', 'shield', 'eye', 'thumbs-up', 'award', 'graduation', 'heart', 'star', 'home', 'building', 'wrench', 'hammer', 'brush', 'ruler', 'leaf', 'tree', 'sun', 'droplet', 'flame', 'bolt', 'solar', 'thermometer', 'snowflake', 'car', 'check', 'check-circle', 'info', 'help', 'alert', 'search', 'settings', 'filter', 'grid', 'list', 'sparkle', 'coffee', 'utensils', 'laptop', 'hardware', 'network', 'design'];
+    public const ICONS = ['arrow-up-right', 'arrow-right', 'arrow-left', 'arrow-up', 'arrow-down', 'chevron-right', 'chevron-left', 'chevron-up', 'chevron-down', 'arrow-circle', 'external', 'refresh', 'menu', 'close', 'plus', 'minus', 'phone', 'app', 'mail', 'chat', 'send', 'calendar', 'clock', 'pin', 'map', 'navigation', 'web', 'wifi', 'support', 'shop', 'cart', 'tag', 'euro', 'credit-card', 'gift', 'percent', 'truck', 'package', 'briefcase', 'document', 'download', 'upload', 'print', 'link', 'share', 'image', 'camera', 'video', 'play', 'pause', 'music', 'mic', 'book', 'user', 'people', 'login', 'lock', 'key', 'shield', 'eye', 'thumbs-up', 'award', 'graduation', 'heart', 'star', 'home', 'building', 'wrench', 'hammer', 'brush', 'ruler', 'leaf', 'tree', 'sun', 'droplet', 'flame', 'bolt', 'solar', 'thermometer', 'snowflake', 'car', 'check', 'check-circle', 'info', 'help', 'alert', 'search', 'settings', 'filter', 'grid', 'list', 'sparkle', 'coffee', 'utensils', 'laptop', 'hardware', 'network', 'design', 'facebook', 'instagram', 'whatsapp'];
    /** Das Symbol eines Buttons, wenn keins gewählt ist: der Pfeil, den jeder Button vor v25 hatte. */
    public const BUTTON_DEFAULT_ICON = 'arrow-up-right';
    public const SPACER_SIZES = ['small', 'medium', 'large', 'huge'];
@@ -1,4 +1,6 @@
-{# Inline SVG from a fixed allowlist. No icon font, no external request, no extra stylesheet. #}
+{# Inline SVG from a fixed allowlist. No icon font, no external request, no extra stylesheet.
+   Facebook, Instagram und WhatsApp am Ende: dieselben Formen wie social-icon.html.twig, damit sie
+   auch als Symbol eines Menü-Buttons oder Bausteins wählbar sind. #}
 {% set paths = {
    'arrow-up-right': 'M6.5 17.5 17.5 6.5M8.5 6.5h9v9',
    'arrow-right': 'M4 12h15.5m-6.5-6.5 6.5 6.5-6.5 6.5',
@@ -97,6 +99,9 @@
    laptop: 'M5 5h14v10H5Zm-2.5 10h19l-1 3.5h-17Z',
    hardware: 'M4 5h16v11H4Zm4 15h8m-4-4v4',
    network: 'M5 3h14v5H5Zm0 13h14v5H5Zm7-8v8M8 8v3h8V8',
-    design: 'M4 20h16M6 16 18 4l3 3L9 19l-4 1Z'
+    design: 'M4 20h16M6 16 18 4l3 3L9 19l-4 1Z',
+    facebook: 'M15.5 4h-2.2A3.8 3.8 0 0 0 9.5 7.8V10H7v3.2h2.5V20h3.3v-6.8h2.4l.5-3.2h-2.9V8.2c0-.6.3-.9.9-.9h2Z',
+    instagram: 'M8.1 3.5h7.8a4.6 4.6 0 0 1 4.6 4.6v7.8a4.6 4.6 0 0 1-4.6 4.6H8.1a4.6 4.6 0 0 1-4.6-4.6V8.1a4.6 4.6 0 0 1 4.6-4.6ZM12 8.1a3.9 3.9 0 1 0 0 7.8 3.9 3.9 0 0 0 0-7.8ZM17 7h.01',
+    whatsapp: 'M4 20l1.4-4A8.5 8.5 0 1 1 8.6 19.1ZM9.3 9.2c0 3 2.5 5.5 5.5 5.5l1.3-1.4-2-.9-.9.8a4.1 4.1 0 0 1-2.3-2.3l.8-.9-.9-2Z'
 } %}
-<svg class="block-icon" viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="{{ paths[name] }}"/></svg>
+{# Strich, Farbe und Enden stehen als Regel für svg.block-icon in site.css und admin.css, nicht an jedem Symbol: eine Seite trägt um die 40 davon. #}<svg class="block-icon" viewBox="0 0 24 24" width="32" height="32" aria-hidden="true" focusable="false"><path d="{{ paths[name] }}"/></svg>
@@ -311,7 +311,7 @@ final class CmsTest extends TestCase
    public static function rejectedButtonIcons(): iterable
    {
        yield 'Symbol vor v25' => ['icon', 'phone', 24];
-        yield 'unbekanntes Symbol' => ['icon', 'whatsapp', 25];
+        yield 'unbekanntes Symbol' => ['icon', 'telegram', 25];
        yield 'Symbol ist kein Text' => ['icon', ['phone'], 25];
        yield 'Stellung vor v25' => ['iconPosition', 'start', 24];
        yield 'unbekannte Stellung' => ['iconPosition', 'middle', 25];