feat: portfolio-led redesign with Shootings umbrella, original logo and motion layer

site/404.html

@@ -27,6 +27,7 @@
 <link rel="manifest" href="/site.webmanifest">
 <link rel="stylesheet" href="/assets/fonts.css">
 <link rel="stylesheet" href="/assets/site.css">
+<noscript><style>.reveal,.reveal--mask{opacity:1;transform:none;clip-path:none}.reveal--mask>*{clip-path:none}.hero__title .w>span,.hero__sub,.hero__actions,.hero__facts{opacity:1;transform:none}</style></noscript>
 
 
 </head>
@@ -35,20 +36,15 @@
 <header class="masthead">
   <div class="shell masthead__inner">
     <a class="brand" href="/" aria-label="desfoto Startseite">
-      <svg class="brand__mark" viewBox="0 0 40 40" role="img" aria-label="desfoto Bildmarke">
-        <circle class="ring" cx="20" cy="20" r="13"/>
-        <circle class="ring" cx="20" cy="20" r="5.2" stroke-width="2"/>
-        <path class="blade" d="M20 7 20 1.6"/>
-        <path class="blade" d="M31.3 26.5 36 29.2"/>
-        <path class="blade" d="M8.7 26.5 4 29.2"/>
-      </svg>
+      <span class="brand__mark"><img src="/assets/img/logo-160.png" width="160" height="160" alt="" decoding="async"></span>
       <span class="brand__text"><span>desfoto</span><small>Fotografie &amp; Video</small></span>
     </a>
     <button class="nav__toggle" type="button" aria-expanded="false" aria-controls="site-nav" data-nav-toggle>
       <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg> Menü
     </button>
-    <nav class="nav" id="site-nav" aria-label="Hauptnavigation"><div class="nav__item"><a class="nav__link" href="/fotografie/">Fotografie<svg class="nav__caret" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 6l5 5 5-5"/></svg></a><div class="nav__sub"><a href="/businessfotografie/">Businessfotografie</a><a href="/portrait-und-model/">Portrait &amp; Model</a><a href="/familien-und-paare/">Familien &amp; Paare</a><a href="/minishootings/">Minishootings</a></div></div><a class="nav__link" href="/video/">Video</a><a class="nav__link" href="/social-media/">Social Media</a><a class="nav__link" href="/projekte/">Projekte</a><a class="nav__link" href="/ueber/">Über</a><a class="btn btn--solid" href="/kontakt/">Projekt anfragen</a></nav>
+    <nav class="nav" id="site-nav" aria-label="Hauptnavigation"><div class="nav__item"><a class="nav__link" href="/shootings/">Shootings<svg class="nav__caret" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 6l5 5 5-5"/></svg></a><div class="nav__sub"><a href="/businessfotografie/">Businessfotografie</a><a href="/portrait-und-model/">Portrait &amp; Model</a><a href="/familien-und-paare/">Familien &amp; Paare</a><a href="/minishootings/">Minishootings</a></div></div><a class="nav__link" href="/video/">Video</a><a class="nav__link" href="/projekte/">Projekte</a><a class="nav__link" href="/ueber/">Über</a><a class="btn btn--solid" href="/kontakt/">Projekt anfragen</a></nav>
   </div>
+  <span class="progress" aria-hidden="true"><span class="progress__bar" data-progress></span></span>
 </header>
 <main id="main"><section class="section">
   <div class="shell center-page">
@@ -70,20 +66,15 @@
     <div class="footer__grid">
       <div class="footer__brand">
         <span class="brand">
-          <svg class="brand__mark" viewBox="0 0 40 40" role="img" aria-label="desfoto Bildmarke">
-        <circle class="ring" cx="20" cy="20" r="13"/>
-        <circle class="ring" cx="20" cy="20" r="5.2" stroke-width="2"/>
-        <path class="blade" d="M20 7 20 1.6"/>
-        <path class="blade" d="M31.3 26.5 36 29.2"/>
-        <path class="blade" d="M8.7 26.5 4 29.2"/>
-      </svg>
+          <span class="brand__mark"><img src="/assets/img/logo-160.png" width="160" height="160" alt="" decoding="async"></span>
           <span class="brand__text"><span>desfoto</span><small>Fotografie &amp; Video</small></span>
         </span>
         <p class="footer__claim">Fotografie und Video aus Neumünster. Ein Angebot von Denny Schulz Fotografie.</p>
       </div>
       <div>
-        <h2>Fotografie</h2>
+        <h2>Shootings</h2>
         <div class="footer__links">
+          <a href="/shootings/">Überblick Shootings</a>
           <a href="/businessfotografie/">Businessfotografie</a>
           <a href="/portrait-und-model/">Portrait &amp; Model</a>
           <a href="/familien-und-paare/">Familien &amp; Paare</a>
@@ -91,7 +82,7 @@
         </div>
       </div>
       <div>
-        <h2>Weitere Leistungen</h2>
+        <h2>Video &amp; mehr</h2>
         <div class="footer__links">
           <a href="/video/">Videoprojekte</a>
           <a href="/social-media/">Social Media</a>
@@ -108,6 +99,10 @@
           <span class="muted">Neumünster · Schleswig-Holstein</span>
         </div>
       </div>
+      <div>
+        <h2>Netzwerk</h2>
+        <div class="footer__links"><a class="footer__ext" href="https://www.dennyschulz.de/" target="_blank" rel="noopener">dennyschulz.de <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14 5h5v5M19 5l-7 7M18 14v4a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h4"/></svg></a><small>Hochzeiten, Portraits und Business — die fotografische Arbeit unter eigenem Namen.</small><a class="footer__ext" href="https://dennyapp.de/" target="_blank" rel="noopener">dennyapp.de <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14 5h5v5M19 5l-7 7M18 14v4a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h4"/></svg></a><small>Websites und Web-Apps aus Neumünster — Design, Entwicklung und eigene Produkte.</small></div>
+      </div>
     </div>
     <div class="footer__bottom">
       <nav aria-label="Rechtliches">