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>

public/assets/admin.css

@@ -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. */
 

public/assets/icons.js

@@ -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';

public/assets/site.css

@@ -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