Header: Logo und Menü als schwebende, abgerundete Elemente

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

assets/site.css

@@ -33,36 +33,49 @@ h1, h2, h3 { font-weight: 400; line-height: 1.05; letter-spacing: -.025em; margi
 p { margin: 0; }
 svg { flex: none; }
 
-/* ===== Header ===== */
+/* ===== Header: Logo und Menü als zwei schwebende Elemente ===== */
 .site-header {
   position: sticky; top: 0; z-index: 50;
-  background: color-mix(in srgb, var(--bg) 90%, transparent);
+  pointer-events: none;            /* Fläche zwischen Logo und Menü bleibt klickbar */
-  backdrop-filter: blur(14px);
-  -webkit-backdrop-filter: blur(14px);
 }
 .header-inner {
   display: flex; align-items: center; gap: 24px;
   height: 88px;
   padding: 0 var(--pad);
 }
-.brand { display: inline-flex; align-items: center; }
+.brand, .nav, .burger {
-.brand img { width: 84px; height: 84px; transition: transform .5s var(--ease); }
+  pointer-events: auto;
+  background: color-mix(in srgb, var(--bg) 90%, transparent);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  box-shadow: 0 10px 30px rgba(25, 66, 66, .12);
+}
+.brand {
+  width: 72px; height: 72px;
+  border-radius: 50%;
+  display: grid; place-items: center;
+}
+.brand img { width: 68px; height: 68px; transition: transform .5s var(--ease); }
 .brand:hover img { transform: rotate(-6deg); }
-.nav { display: flex; gap: 4px; margin-left: auto; }
+.nav {
+  display: flex; gap: 4px;
+  margin-left: auto;
+  padding: 8px;
+  border-radius: var(--radius);
+}
 .nav a {
-  padding: 10px 16px;
+  padding: 12px 20px;
-  border-radius: 999px;
+  border-radius: 14px;
   font-size: 1.05rem;
   transition: background .25s var(--ease);
 }
 .nav a:hover, .nav a[aria-current="page"] { background: var(--sage-soft); }
 .burger {
   display: none;
-  width: 52px; height: 52px;
+  width: 60px; height: 60px;
   margin-left: auto;
-  border: 1px solid var(--line);
+  border: 0;
   border-radius: 50%;
-  background: transparent;
   color: var(--ink);
   cursor: pointer;
   place-items: center;
@@ -72,7 +85,7 @@ svg { flex: none; }
 /* Startseite: Header erst nach dem Hero einblenden */
 .is-home .site-header {
   position: fixed; left: 0; right: 0;
-  transform: translateY(-100%);
+  transform: translateY(-120%);
   transition: transform .45s var(--ease);
 }
 .is-home.scrolled .site-header, .is-home.menu-open .site-header { transform: none; }
@@ -454,10 +467,9 @@ a.panel:hover .panel-arrow svg { transform: rotate(-45deg); }
   .burger { display: grid; }
   .menu-open .nav {
     display: flex; flex-direction: column; gap: 4px;
-    position: fixed; top: 88px; left: 0; right: 0;
+    position: fixed; top: 88px; left: var(--pad); right: var(--pad);
-    padding: 16px var(--pad) 28px;
+    padding: 10px;
     background: var(--bg);
-    box-shadow: 0 24px 40px rgba(25, 66, 66, .12);
   }
   .menu-open .nav a { padding: 16px 18px; font-size: 1.35rem; }
   .row, .row--3, .row--wide, .row--wide-r { grid-template-columns: 1fr; }
@@ -470,7 +482,9 @@ a.panel:hover .panel-arrow svg { transform: rotate(-45deg); }
 @media (max-width: 767px) {
   body { font-size: 18px; }
   .header-inner { height: 76px; }
-  .brand img { width: 70px; height: 70px; }
+  .brand { width: 62px; height: 62px; }
+  .brand img { width: 58px; height: 58px; }
+  .burger { width: 54px; height: 54px; }
   .menu-open .nav { top: 76px; }
   .hero { height: auto; min-height: 0; display: block; padding: 0 16px 16px; }
   .tiles { grid-template-columns: 1fr; grid-template-rows: none; gap: 12px; }