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>

scripts/seed-huefner.php

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