/* Header-Wortmarke (SVG kompakt) + schrumpfendes Logo auf der Startseite.
   Eingebunden über layout.html nach base.css (base.css: .nav-logo img { height: 44px }).
   Prinzip: Die Layout-Box des Logos bleibt IMMER 44 px hoch / 154 px breit – nur die Darstellung wird auf der
   Startseite per transform um 1,364 (= 60 px) vergrößert und in den ersten 80 px Scroll auf 1 zurückgeführt.
   Dadurch ändert sich kein Layout: Header-Höhe konstant, Menü/Warenkorb bewegen sich nicht, CLS = 0, und die
   Navigation bricht auch mit der Fallback-Schrift vor dem Webfont nicht um (Kasten wie bisher 154 px).
   Das vergrößerte Logo ragt 8 px oben/unten in das .nav-Padding (.6rem ≈ 9,6 px) und 56 px nach rechts in den
   Freiraum vor dem Menü – deshalb nur ≥ 75rem (Desktop mit Luft) und ≤ 60rem (Burger-Navigation, rechts frei). */
.nav-logo { display: inline-flex; align-items: center; }
.nav-logo img { height: 44px; width: auto; transform-origin: left center; }

@keyframes logo-shrink { to { transform: scale(1); } }

@media (min-width: 75rem), (max-width: 60rem) {
  body:has(.home-hero) .nav-logo img { transform: scale(1.364); }

  /* Scroll-getrieben (Chrome/Edge 115+, Safari 26+): 0–80 px Scroll → 1,364 → 1, ohne JS */
  @supports (animation-timeline: scroll()) {
    body:has(.home-hero) .nav-logo img {
      animation: logo-shrink linear both;
      animation-timeline: scroll(root);
      animation-range: 0 80px;
    }
  }
  /* Fallback ohne Scroll-Timeline: header.js setzt .is-compact ab 80 px Scroll */
  @supports not (animation-timeline: scroll()) {
    body:has(.home-hero) .nav-logo img { transition: transform .2s ease; }
    body:has(.home-hero) .site-header.is-compact .nav-logo img { transform: scale(1); }
    @media (prefers-reduced-motion: reduce) {
      body:has(.home-hero) .nav-logo img { transition: none; }
    }
  }
}