dasd

public/assets/css/app.css

@@ -19,7 +19,8 @@ body {
   align-items: center;
   justify-content: space-between;
   gap: 16px;
-  padding: 14px 0;
+  padding: 18px 0;
+  transition: padding 180ms ease;
 }
 
 .brand {
@@ -28,11 +29,15 @@ body {
   gap: 10px;
 }
 
-.brand__logo { width: 46px; height: 46px; object-fit: contain; }
+.brand__logo { width: 120px; height: 120px; object-fit: contain; transition: all 180ms ease; }
 .brand__text { display: flex; flex-direction: column; line-height: 1.1; }
-.brand__name { font-weight: 700; letter-spacing: -0.3px; }
+.brand__name { font-weight: 700; letter-spacing: -0.3px; font-size: 20px; transition: font-size 180ms ease; }
 .brand__tag { color: var(--color-muted); font-size: 13px; }
 
+.site-header.is-scrolled .nav-row { padding: 10px 0; }
+.site-header.is-scrolled .brand__logo { width: 46px; height: 46px; }
+.site-header.is-scrolled .brand__name { font-size: 17px; }
+
 .nav-links {
   display: flex;
   align-items: center;

public/assets/js/app.js

@@ -2,6 +2,7 @@ document.addEventListener('DOMContentLoaded', () => {
   const body = document.body;
   const isLoggedIn = body.dataset.auth === '1';
   const childGender = body.dataset.childGender || '';
+  const header = document.querySelector('.site-header');
 
   // Logo-Logik
   const pickLogo = (gender) => {
@@ -14,6 +15,15 @@ document.addEventListener('DOMContentLoaded', () => {
     img.src = `/assets/bilder/${chosenLogo}`;
   });
 
+  // Header shrink on scroll
+  const onScroll = () => {
+    if (!header) return;
+    const shouldShrink = window.scrollY > 40;
+    header.classList.toggle('is-scrolled', shouldShrink);
+  };
+  onScroll();
+  window.addEventListener('scroll', onScroll, { passive: true });
+
   // Mobile Menü
   const mobileMenu = document.getElementById('mobileMenu');
   document.querySelectorAll('.menu-toggle').forEach(btn => {