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

site/minishootings/index.html

@@ -28,6 +28,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>
 
 <script type="application/ld+json">{"@context":"https://schema.org","@type":"Service","name":"Minishootings","serviceType":"Minishootings","description":"Kurze Fotosessions mit festem Preis und schneller Lieferung.","url":"https://desfoto.de/minishootings/","provider":{"@type":"ProfessionalService","name":"desfoto","legalName":"Denny Schulz Fotografie","url":"https://desfoto.de","email":"info@dennyschulz.de","telephone":"+49 175 4083133","address":{"@type":"PostalAddress","streetAddress":"Flensburger Str. 16","postalCode":"24537","addressLocality":"Neumünster","addressCountry":"DE"}},"areaServed":["Neumünster","Schleswig-Holstein","Hamburg","Kiel"]}</script>
 <script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Start","item":"https://desfoto.de/"},{"@type":"ListItem","position":2,"name":"Minishootings","item":"https://desfoto.de/minishootings/"}]}</script>
@@ -37,24 +38,19 @@
 <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/" aria-current="page">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/" aria-current="page">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/" aria-current="page">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/" aria-current="page">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="page-head">
   <div class="page-head__bg">
-    <img class="" src="/assets/img/portrait-natural-1200.webp" srcset="/assets/img/portrait-natural-480.webp 480w, /assets/img/portrait-natural-768.webp 768w, /assets/img/portrait-natural-1200.webp 1200w, /assets/img/portrait-natural-1600.webp 1600w, /assets/img/portrait-natural-2000.webp 2000w" sizes="100vw" width="2000" height="1334" decoding="async" loading="eager" alt="Lachendes Paar im natürlichen Licht" style="object-position:50% 30%" fetchpriority="high">
+    <img class="" src="/assets/img/portrait-natural-1200.webp" srcset="/assets/img/portrait-natural-480.webp 480w, /assets/img/portrait-natural-768.webp 768w, /assets/img/portrait-natural-1200.webp 1200w, /assets/img/portrait-natural-1600.webp 1600w" sizes="100vw" width="1600" height="1067" decoding="async" loading="eager" alt="Natürliches Portrait im Freien" style="object-position:50% 30%" fetchpriority="high">
   </div>
   <div class="shell page-head__inner">
     <div class="breadcrumb"><a href="/">Start</a><span>/</span><span>Minishootings</span></div>
@@ -63,7 +59,7 @@
     <p class="page-head__lead">Der Termin für alle, die schnell ein gutes Bild brauchen: klarer Ablauf, kleine Auswahl, kurze Lieferzeit. Meist in rund 20 bis 30 Minuten erledigt.</p>
     <div class="page-head__actions"><a class="btn btn--solid" href="/kontakt/">Minishooting buchen</a></div>
   </div>
-</section><section class="section"><div class="shell"><div class="section-head"><div class="section-head__text stack"><span class="kicker">Gut geeignet für</span><h2 class="balance">Wann ein Minishooting reicht</h2></div></div><div class="grid grid--3"><article class="card reveal"><h3>Profilbild</h3><p class="card__text">Für LinkedIn, Bewerbung, Vereinsseite oder die Website.</p></article><article class="card reveal"><h3>Paar &amp; Familie</h3><p class="card__text">Ein, zwei schöne Bilder zusammen — ohne großen Termin.</p></article><article class="card reveal"><h3>Social Media</h3><p class="card__text">Frisches Material für deine Kanäle, passend zum Format.</p></article><article class="card reveal"><h3>Verein &amp; Mannschaft</h3><p class="card__text">Schnell alle Gesichter für Mannschaftsfotos und Anmeldungen.</p></article><article class="card reveal"><h3>Businesskurzportrait</h3><p class="card__text">Du brauchst nur ein Bild für die neue Stelle oder Präsentation.</p></article><article class="card reveal"><h3>Geschenkidee</h3><p class="card__text">Gutschein für ein gemeinsames Shooting — auf Anfrage.</p></article></div></div></section><section class="section section--paper2"><div class="shell"><div class="section-head"><div class="section-head__text stack"><span class="kicker">So läuft es</span><h2 class="balance">Drei Schritte, ein Termin</h2></div></div><div class="steps"><div class="step reveal"><h3>Termin und Ort</h3><p>Du wählst einen freien Slot im Studio Neumünster oder draußen. Kurze Info vorab reicht.</p></div><div class="step reveal"><h3>Die Session</h3><p>Rund 20 bis 30 Minuten. Ich führe durch Licht und Position, du musst nichts vorbereiten.</p></div><div class="step reveal"><h3>Lieferung</h3><p>Du bekommst eine Auswahl zum Ansehen und die bearbeiteten Dateien in Web- und Druckgröße.</p></div></div></div></section><section class="section"><div class="shell"><div class="section-head"><div class="section-head__text stack"><span class="kicker">Gut zu wissen</span><h2 class="balance">Was du vorher wissen solltest</h2></div></div><div class="grid" style="grid-template-columns:minmax(0,1fr) minmax(0,1fr)"><ul class="ticks"><li>Outfitwechsel ist möglich, wenn du etwas mitbringst</li><li>Studio- oder Außentermin — je nach Wunsch und Licht</li><li>Fester Preis, vorab geklärt, keine Nachforderung</li><li>Termine nach Absprache, auch kurzfristig</li></ul><div class="note">Wie viele Bilder du bekommst und was das Shooting kostet, hängt von Umfang und Nutzung ab. Sag mir kurz, was du brauchst — dann nenne ich dir den Preis für dein Paket, bevor du buchst.</div></div></div></section><section class="section section--paper2"><div class="shell"><div class="section-head"><div class="section-head__text stack"><span class="kicker">Beispiele</span><h2 class="balance">Schnell und trotzdem gut</h2></div></div><div class="grid grid--3"><img class="frame frame--4x5 frame--hover" src="/assets/img/portrait-natural-1200.webp" srcset="/assets/img/portrait-natural-480.webp 480w, /assets/img/portrait-natural-768.webp 768w, /assets/img/portrait-natural-1200.webp 1200w, /assets/img/portrait-natural-1600.webp 1600w, /assets/img/portrait-natural-2000.webp 2000w" sizes="(min-width: 62rem) 30vw, 92vw" width="2000" height="1334" decoding="async" loading="lazy" alt="Lachendes Paar im natürlichen Licht" style="object-position:50% 28%"><img class="frame frame--4x5 frame--hover" src="/assets/img/business-portrait-studio-1200.webp" srcset="/assets/img/business-portrait-studio-480.webp 480w, /assets/img/business-portrait-studio-768.webp 768w, /assets/img/business-portrait-studio-1200.webp 1200w, /assets/img/business-portrait-studio-1600.webp 1600w" sizes="(min-width: 62rem) 30vw, 92vw" width="1600" height="2400" decoding="async" loading="lazy" alt="Mann im weißen Hemd vor dunklem Hintergrund, Softbox im Bild" style="object-position:50% 28%"><img class="frame frame--4x5 frame--hover" src="/assets/img/editorial-black-1200.webp" srcset="/assets/img/editorial-black-480.webp 480w, /assets/img/editorial-black-768.webp 768w, /assets/img/editorial-black-1200.webp 1200w, /assets/img/editorial-black-1600.webp 1600w" sizes="(min-width: 62rem) 30vw, 92vw" width="1600" height="2398" decoding="async" loading="lazy" alt="Model im Sporttop vor schwarzem Hintergrund" style="object-position:50% 28%"></div></div></section><section class="section section--ink">
+</section><section class="section"><div class="shell"><div class="section-head"><div class="section-head__text stack"><span class="kicker">Gut geeignet für</span><h2 class="balance">Wann ein Minishooting reicht</h2></div></div><div class="grid grid--3"><article class="card reveal"><h3>Profilbild</h3><p class="card__text">Für LinkedIn, Bewerbung, Vereinsseite oder die Website.</p></article><article class="card reveal"><h3>Paar &amp; Familie</h3><p class="card__text">Ein, zwei schöne Bilder zusammen — ohne großen Termin.</p></article><article class="card reveal"><h3>Social Media</h3><p class="card__text">Frisches Material für deine Kanäle, passend zum Format.</p></article><article class="card reveal"><h3>Verein &amp; Mannschaft</h3><p class="card__text">Schnell alle Gesichter für Mannschaftsfotos und Anmeldungen.</p></article><article class="card reveal"><h3>Businesskurzportrait</h3><p class="card__text">Du brauchst nur ein Bild für die neue Stelle oder Präsentation.</p></article><article class="card reveal"><h3>Geschenkidee</h3><p class="card__text">Gutschein für ein gemeinsames Shooting — auf Anfrage.</p></article></div></div></section><section class="section section--paper2"><div class="shell"><div class="section-head"><div class="section-head__text stack"><span class="kicker">So läuft es</span><h2 class="balance">Drei Schritte, ein Termin</h2></div></div><div class="steps"><div class="step reveal"><h3>Termin und Ort</h3><p>Du wählst einen freien Slot im Studio Neumünster oder draußen. Kurze Info vorab reicht.</p></div><div class="step reveal"><h3>Die Session</h3><p>Rund 20 bis 30 Minuten. Ich führe durch Licht und Position, du musst nichts vorbereiten.</p></div><div class="step reveal"><h3>Lieferung</h3><p>Du bekommst eine Auswahl zum Ansehen und die bearbeiteten Dateien in Web- und Druckgröße.</p></div></div></div></section><section class="section"><div class="shell"><div class="section-head"><div class="section-head__text stack"><span class="kicker">Gut zu wissen</span><h2 class="balance">Was du vorher wissen solltest</h2></div></div><div class="grid" style="grid-template-columns:minmax(0,1fr) minmax(0,1fr)"><ul class="ticks"><li>Outfitwechsel ist möglich, wenn du etwas mitbringst</li><li>Studio- oder Außentermin — je nach Wunsch und Licht</li><li>Fester Preis, vorab geklärt, keine Nachforderung</li><li>Termine nach Absprache, auch kurzfristig</li></ul><div class="note">Wie viele Bilder du bekommst und was das Shooting kostet, hängt von Umfang und Nutzung ab. Sag mir kurz, was du brauchst — dann nenne ich dir den Preis für dein Paket, bevor du buchst.</div></div></div></section><section class="section section--paper2"><div class="shell"><div class="section-head"><div class="section-head__text stack"><span class="kicker">Beispiele</span><h2 class="balance">Schnell und trotzdem gut</h2></div></div><div class="grid grid--3"><img class="frame frame--4x5 frame--hover" src="/assets/img/portrait-natural-1200.webp" srcset="/assets/img/portrait-natural-480.webp 480w, /assets/img/portrait-natural-768.webp 768w, /assets/img/portrait-natural-1200.webp 1200w, /assets/img/portrait-natural-1600.webp 1600w" sizes="(min-width: 62rem) 30vw, 92vw" width="1600" height="1067" decoding="async" loading="lazy" alt="Natürliches Portrait im Freien" style="object-position:50% 28%"><img class="frame frame--4x5 frame--hover" src="/assets/img/business-portrait-studio-1200.webp" srcset="/assets/img/business-portrait-studio-480.webp 480w, /assets/img/business-portrait-studio-768.webp 768w, /assets/img/business-portrait-studio-1200.webp 1200w, /assets/img/business-portrait-studio-1600.webp 1600w" sizes="(min-width: 62rem) 30vw, 92vw" width="1600" height="2400" decoding="async" loading="lazy" alt="Mann im weißen Hemd vor dunklem Hintergrund, Softbox im Bild" style="object-position:50% 28%"><img class="frame frame--4x5 frame--hover" src="/assets/img/editorial-black-1200.webp" srcset="/assets/img/editorial-black-480.webp 480w, /assets/img/editorial-black-768.webp 768w, /assets/img/editorial-black-1200.webp 1200w, /assets/img/editorial-black-1600.webp 1600w" sizes="(min-width: 62rem) 30vw, 92vw" width="1600" height="2398" decoding="async" loading="lazy" alt="Model im Sporttop vor schwarzem Hintergrund" style="object-position:50% 28%"><img class="frame frame--4x5 frame--hover" src="/assets/img/free-modern-portrait-1200.webp" srcset="/assets/img/free-modern-portrait-480.webp 480w, /assets/img/free-modern-portrait-768.webp 768w, /assets/img/free-modern-portrait-1200.webp 1200w, /assets/img/free-modern-portrait-1600.webp 1600w" sizes="(min-width: 62rem) 30vw, 92vw" width="1600" height="2000" decoding="async" loading="lazy" alt="Portrait einer Frau mit Sonnenbrille" style="object-position:50% 30%"></div></div></section><section class="section section--ink">
   <div class="shell">
     <div class="section-head">
       <div class="section-head__text stack">
@@ -83,20 +79,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>
@@ -104,7 +95,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>
@@ -121,6 +112,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">