Kopfzeile (Logo, Navigation, Buttons) etwas größer

Logo, Markenname, Hauptnavigation, Sprachumschalter, Konto-/Warenkorb-
Icons sowie die zweite Kategorien-Leiste darunter sind jetzt insgesamt
etwas größer/luftiger (Schriftgrößen, Icon-Maße, Innenabstände moderat
erhöht) — wie gewünscht "bissl größer" statt eines kompletten Redesigns.

Dabei einen kleinen, durch die Vergrößerung ausgelösten Folgefehler
gleich mitbehoben: auf schmalen Handy-Breiten (<480px) hätte der neue,
größere Header nicht mehr komplett reingepasst und den Menü-Button (☰)
rechts aus dem sichtbaren Bereich geschoben, unerreichbar für Klicks.
Neue Media Query verkleinert dort gezielt Logo/Markentext und blendet
den Sprachumschalter-Text (bleibt nur der Globus) sowie den Pfeil aus —
geprüft: kein horizontales Überlaufen mehr bei 420px, 700px und
Desktop-Breite.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

src/layouts/Layout.astro

@@ -58,7 +58,7 @@ const p = (href: string) => `${localePrefix(lang)}${href}`;
   <header class="site-header">
     <div class="container header-inner">
       <a href={p("/")} class="brand">
-        <img src="/logo.png" alt="Van's DIY & Bastelbedarf Logo" width="42" height="42" />
+        <img src="/logo.png" alt="Van's DIY & Bastelbedarf Logo" width="48" height="48" />
         <span>Van's DIY &amp; Bastelbedarf</span>
       </a>
 
@@ -74,7 +74,7 @@ const p = (href: string) => `${localePrefix(lang)}${href}`;
         <LanguageSwitcher lang={lang} path={path} legalOnly={legalOnly} />
         <a href={p("/konto/")} class="account-btn">
           <span class="account-icon" aria-hidden="true">
-            <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.4 0-9 2.2-9 5v2h18v-2c0-2.8-4.6-5-9-5Z"/></svg>
+            <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.4 0-9 2.2-9 5v2h18v-2c0-2.8-4.6-5-9-5Z"/></svg>
           </span>
           <span class="account-label">{t.nav.login}</span>
         </a>
@@ -176,8 +176,8 @@ const p = (href: string) => `${localePrefix(lang)}${href}`;
       background: linear-gradient(90deg, var(--c-purple), var(--c-purple-deep));
       color: var(--c-text);
       text-align: center;
-      font-size: 0.82rem;
-      padding: 0.5rem 1rem;
+      font-size: 0.9rem;
+      padding: 0.6rem 1rem;
       letter-spacing: 0.01em;
     }
 
@@ -194,7 +194,7 @@ const p = (href: string) => `${localePrefix(lang)}${href}`;
       align-items: center;
       justify-content: space-between;
       gap: 1rem;
-      padding-block: 0.8rem;
+      padding-block: 1rem;
     }
     .brand {
       display: flex;
@@ -202,20 +202,20 @@ const p = (href: string) => `${localePrefix(lang)}${href}`;
       gap: 0.6rem;
       font-family: var(--font-head);
       font-weight: 600;
-      font-size: 1.05rem;
+      font-size: 1.18rem;
     }
     .brand img { border-radius: 50%; }
 
-    .main-nav { display: flex; gap: 1.6rem; }
+    .main-nav { display: flex; gap: 1.7rem; }
     .main-nav a {
-      font-size: 0.92rem;
+      font-size: 1.02rem;
       color: var(--c-text-muted);
       transition: color 0.2s var(--ease);
     }
     .main-nav a:hover { color: var(--c-accent); }
 
     .header-actions { display: flex; align-items: center; gap: 0.8rem; }
-    .icon-link { font-size: 1.1rem; position: relative; display: inline-flex; align-items: center; gap: 0.3rem; }
+    .icon-link { font-size: 1.25rem; position: relative; display: inline-flex; align-items: center; gap: 0.3rem; }
     .cart-count {
       background: var(--c-accent);
       color: #08181c;
@@ -256,6 +256,17 @@ const p = (href: string) => `${localePrefix(lang)}${href}`;
       .main-nav { display: none; }
       .hamburger { display: inline-block; }
     }
+    /* Auf schmalen Screens (Handy) reicht der Platz nicht mehr für Logo+Markenname+
+       Sprachumschalter-Text+Konto-Icon+Warenkorb+Menü-Button nebeneinander in voller Größe —
+       ohne diese Anpassung würde der Menü-Button (☰) rechts aus dem Bildschirm rausgeschoben
+       und wäre gar nicht mehr anklickbar. Zeigt auf schmalen Screens nur noch die Icons/Kürzel. */
+    @media (max-width: 480px) {
+      .brand img { width: 38px; height: 38px; }
+      .brand span { font-size: 0.98rem; }
+      .lang-switch-btn { padding: 0.35em 0.55em; }
+      .lang-switch-btn .lang-label,
+      .lang-switch-btn .chevron { display: none; }
+    }
 
     /* Zweite Navigationsleiste: Schnellzugriff auf die 5 Hauptkategorien, direkt unter der
        Hauptnav — gleicher Designstil (dunkler Anthrazit-Streifen, Akzent-Unterstrich bei Hover). */
@@ -267,13 +278,13 @@ const p = (href: string) => `${localePrefix(lang)}${href}`;
       display: flex;
       gap: clamp(1.1rem, 3vw, 2rem);
       overflow-x: auto;
-      padding-block: 0.6rem;
+      padding-block: 0.75rem;
       scrollbar-width: none;
     }
     .sub-nav-inner::-webkit-scrollbar { display: none; }
     .sub-nav-inner a {
       position: relative;
-      font-size: 0.83rem;
+      font-size: 0.92rem;
       font-weight: 600;
       color: var(--c-text-muted);
       white-space: nowrap;