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

site/portrait-und-model/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":"Portrait- und Model-Fotografie","serviceType":"Portrait- und Model-Fotografie","description":"Portraits, Sedcards, Editorial und Fashion im Studio oder on location.","url":"https://desfoto.de/portrait-und-model/","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":"Portrait & Model","item":"https://desfoto.de/portrait-und-model/"}]}</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/" aria-current="page">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/" 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/" aria-current="page">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="page-head">
   <div class="page-head__bg">
-    <img class="" src="/assets/img/editorial-colour-1200.webp" srcset="/assets/img/editorial-colour-480.webp 480w, /assets/img/editorial-colour-768.webp 768w, /assets/img/editorial-colour-1200.webp 1200w, /assets/img/editorial-colour-1600.webp 1600w" sizes="100vw" width="1600" height="2398" decoding="async" loading="eager" alt="Model in dunklem Kleid in farbigem Licht" style="object-position:50% 28%" fetchpriority="high">
+    <img class="" src="/assets/img/editorial-colour-1200.webp" srcset="/assets/img/editorial-colour-480.webp 480w, /assets/img/editorial-colour-768.webp 768w, /assets/img/editorial-colour-1200.webp 1200w, /assets/img/editorial-colour-1600.webp 1600w" sizes="100vw" width="1600" height="2398" decoding="async" loading="eager" alt="Fashion-Portrait in kräftigen Farben" style="object-position:50% 28%" fetchpriority="high">
   </div>
   <div class="shell page-head__inner">
     <div class="breadcrumb"><a href="/">Start</a><span>/</span><span>Portrait &amp; Model</span></div>
@@ -63,7 +59,7 @@
     <p class="page-head__lead">Portraits, Sedcards, Editorial und Fashion. Im Studio in Neumünster oder an einem Ort, der zu dir und deiner Geschichte passt.</p>
     <div class="page-head__actions"><a class="btn btn--solid" href="/kontakt/">Shooting anfragen</a><a class="btn btn--outline-light" href="/minishootings/">Kurz mal reinschnuppern</a></div>
   </div>
-</section><section class="section"><div class="shell"><div class="section-head"><div class="section-head__text stack"><span class="kicker">Formate</span><h2 class="balance">Was wir zusammen machen können</h2></div></div><div class="grid grid--3"><article class="card reveal"><h3>Portrait</h3><p class="card__text">Natürlich, klar oder dramatisch — je nachdem, wie du gesehen werden willst. Auch für Bewerbung und Profil.</p></article><article class="card reveal"><h3>Sedcard &amp; Modelbook</h3><p class="card__text">Für neue Gesichter und erfahrene Models: ein Set, das Agenturen und Kundinnen einen Überblick gibt.</p></article><article class="card reveal"><h3>Editorial &amp; Fashion</h3><p class="card__text">Konzept, Licht und Location als zusammenhängende Bildstrecke — mit oder ohne Team.</p></article><article class="card reveal"><h3>Testshooting / TFP</h3><p class="card__text">Gemeinsam Ideen ausprobieren, ohne Budget. Auf Anfrage, wenn Konzept und Termin passen.</p></article><article class="card reveal"><h3>Bewerbungs- &amp; Businessportrait</h3><p class="card__text">Der Klassiker in sauber: keine Steifheit, aber ein Bild, das im Bewerbungsverfahren funktioniert.</p></article><article class="card reveal"><h3>Content für deine Kanäle</h3><p class="card__text">Bilder, die du danach über Wochen posten kannst — verschiedene Looks, ein Termin.</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">Ablauf</span><h2 class="balance">Von der Idee zur Auswahl</h2><p class="lead measure">Du musst nicht wissen, wie du vor der Kamera stehen sollst. Genau dafür bin ich da.</p></div></div><div class="steps"><div class="step reveal"><h3>Anfrage</h3><p>Du schreibst kurz, worum es geht. Ich melde mich mit einer ehrlichen Einschätzung, einem Ablauf und einem Preis.</p></div><div class="step reveal"><h3>Planung</h3><p>Wir klären Ort, Licht, Zeit und Bildidee. Bei größeren Produktionen gibt es vorab ein Moodboard oder ein Treatment.</p></div><div class="step reveal"><h3>Dreh</h3><p>Am Termin übernehme ich Technik, Licht und Regie. Du musst nichts mitbringen außer Zeit und dich.</p></div><div class="step reveal"><h3>Lieferung</h3><p>Du bekommst eine Auswahlgalerie, bearbeitete Dateien in Web- und Druckgröße und bei Video das passende Exportformat für deinen Kanal.</p></div></div></div></section><section class="section"><div class="shell"><div class="section-head"><div class="section-head__text stack"><span class="kicker">Studio &amp; on location</span><h2 class="balance">Zwei Wege zum Bild</h2></div></div><div class="grid" style="grid-template-columns:minmax(0,1fr) minmax(0,1fr)"><div class="stack">
+</section><section class="section"><div class="shell"><div class="section-head"><div class="section-head__text stack"><span class="kicker">Formate</span><h2 class="balance">Was wir zusammen machen können</h2></div></div><div class="grid grid--3"><article class="card reveal"><h3>Portrait</h3><p class="card__text">Natürlich, klar oder dramatisch — je nachdem, wie du gesehen werden willst. Auch für Bewerbung und Profil.</p></article><article class="card reveal"><h3>Sedcard &amp; Modelbook</h3><p class="card__text">Für neue Gesichter und erfahrene Models: ein Set, das Agenturen und Kundinnen einen Überblick gibt.</p></article><article class="card reveal"><h3>Editorial &amp; Fashion</h3><p class="card__text">Konzept, Licht und Location als zusammenhängende Bildstrecke — mit oder ohne Team.</p></article><article class="card reveal"><h3>Testshooting / TFP</h3><p class="card__text">Gemeinsam Ideen ausprobieren, ohne Budget. Auf Anfrage, wenn Konzept und Termin passen.</p></article><article class="card reveal"><h3>Bewerbungs- &amp; Businessportrait</h3><p class="card__text">Der Klassiker in sauber: keine Steifheit, aber ein Bild, das im Bewerbungsverfahren funktioniert.</p></article><article class="card reveal"><h3>Content für deine Kanäle</h3><p class="card__text">Bilder, die du danach über Wochen posten kannst — verschiedene Looks, ein Termin.</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">Ablauf</span><h2 class="balance">Von der Idee zur Auswahl</h2><p class="lead measure">Du musst nicht wissen, wie du vor der Kamera stehen sollst. Genau dafür bin ich da.</p></div></div><div class="steps"><div class="step reveal"><h3>Anfrage</h3><p>Du schreibst kurz, worum es geht. Ich melde mich mit einer ehrlichen Einschätzung, einem Ablauf und einem Preis.</p></div><div class="step reveal"><h3>Planung</h3><p>Wir klären Ort, Licht, Zeit und Bildidee. Bei größeren Produktionen gibt es vorab ein Moodboard oder ein Treatment.</p></div><div class="step reveal"><h3>Dreh</h3><p>Am Termin übernehme ich Technik, Licht und Regie — auf Wunsch mit dem mobilen Studio inklusive autarker Blitzanlage an deinem Ort. Du musst nichts mitbringen außer Zeit und dich.</p></div><div class="step reveal"><h3>Lieferung</h3><p>Du bekommst eine Auswahlgalerie, bearbeitete Dateien in Web- und Druckgröße und bei Video das passende Exportformat für deinen Kanal.</p></div></div></div></section><section class="section"><div class="shell"><div class="section-head"><div class="section-head__text stack"><span class="kicker">Studio &amp; on location</span><h2 class="balance">Zwei Wege zum Bild</h2></div></div><div class="grid" style="grid-template-columns:minmax(0,1fr) minmax(0,1fr)"><div class="stack">
             <h3>Im Studio Neumünster</h3>
             <p class="card__text">Kontrolliertes Licht, ruhiger Hintergrund, Platz für Konzeptarbeit.
             Gut bei Wind und Wetter und für alles, was eine klare, wiederholbare Optik braucht.</p>
@@ -71,7 +67,7 @@
             <h3>Draußen, wo du bist</h3>
             <p class="card__text">Available light, Stadt, Wald, Wasser oder dein eigener Ort.
             Lebendiger, weniger kontrolliert — und oft genau richtig für Portraits, die sich echt anfühlen.</p>
-          </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">Portraits und Editorial</h2></div></div><div class="grid grid--3"><img class="frame frame--4x5 frame--hover" src="/assets/img/editorial-pose-1200.webp" srcset="/assets/img/editorial-pose-480.webp 480w, /assets/img/editorial-pose-768.webp 768w, /assets/img/editorial-pose-1200.webp 1200w, /assets/img/editorial-pose-1600.webp 1600w, /assets/img/editorial-pose-2000.webp 2000w" sizes="(min-width: 62rem) 30vw, 92vw" width="2000" height="2500" decoding="async" loading="lazy" alt="Editorial-Portrait vor schwarzem Hintergrund" style="object-position:50% 28%"><img class="frame frame--4x5 frame--hover" src="/assets/img/editorial-back-1200.webp" srcset="/assets/img/editorial-back-480.webp 480w, /assets/img/editorial-back-768.webp 768w, /assets/img/editorial-back-1200.webp 1200w, /assets/img/editorial-back-1600.webp 1600w" sizes="(min-width: 62rem) 30vw, 92vw" width="1600" height="2398" decoding="async" loading="lazy" alt="Detailaufnahme eines Rückens mit Sporttop" style="object-position:50% 40%"><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/editorial-earring-1200.webp" srcset="/assets/img/editorial-earring-480.webp 480w, /assets/img/editorial-earring-768.webp 768w, /assets/img/editorial-earring-1200.webp 1200w, /assets/img/editorial-earring-1600.webp 1600w" sizes="(min-width: 62rem) 30vw, 92vw" width="1600" height="2398" decoding="async" loading="lazy" alt="Portrait im Profil mit Ohrring" style="object-position:45% 28%"><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% 30%"><img class="frame frame--4x5 frame--hover" src="/assets/img/people-kiss-1200.webp" srcset="/assets/img/people-kiss-480.webp 480w, /assets/img/people-kiss-768.webp 768w, /assets/img/people-kiss-1200.webp 1200w, /assets/img/people-kiss-1600.webp 1600w, /assets/img/people-kiss-2000.webp 2000w" sizes="(min-width: 62rem) 30vw, 92vw" width="2000" height="1334" decoding="async" loading="lazy" alt="Paar in inniger Umarmung" style="object-position:50% 32%"></div></div></section><section class="section section--ink">
+          </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">Portraits und Editorial</h2></div></div><div class="grid grid--3"><img class="frame frame--4x5 frame--hover" src="/assets/img/editorial-pose-1200.webp" srcset="/assets/img/editorial-pose-480.webp 480w, /assets/img/editorial-pose-768.webp 768w, /assets/img/editorial-pose-1200.webp 1200w, /assets/img/editorial-pose-1600.webp 1600w" sizes="(min-width: 62rem) 30vw, 92vw" width="1600" height="2000" decoding="async" loading="lazy" alt="Editorial-Portrait vor schwarzem Hintergrund" style="object-position:50% 28%"><img class="frame frame--4x5 frame--hover" src="/assets/img/editorial-back-1200.webp" srcset="/assets/img/editorial-back-480.webp 480w, /assets/img/editorial-back-768.webp 768w, /assets/img/editorial-back-1200.webp 1200w, /assets/img/editorial-back-1600.webp 1600w" sizes="(min-width: 62rem) 30vw, 92vw" width="1600" height="2398" decoding="async" loading="lazy" alt="Detailaufnahme eines Rückens mit Sporttop" style="object-position:50% 40%"><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/editorial-earring-1200.webp" srcset="/assets/img/editorial-earring-480.webp 480w, /assets/img/editorial-earring-768.webp 768w, /assets/img/editorial-earring-1200.webp 1200w, /assets/img/editorial-earring-1600.webp 1600w" sizes="(min-width: 62rem) 30vw, 92vw" width="1600" height="2398" decoding="async" loading="lazy" alt="Portrait im Profil mit Ohrring" style="object-position:45% 28%"><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% 30%"><img class="frame frame--4x5 frame--hover" src="/assets/img/people-kiss-1200.webp" srcset="/assets/img/people-kiss-480.webp 480w, /assets/img/people-kiss-768.webp 768w, /assets/img/people-kiss-1200.webp 1200w, /assets/img/people-kiss-1600.webp 1600w" sizes="(min-width: 62rem) 30vw, 92vw" width="1600" height="1068" decoding="async" loading="lazy" alt="Paar küsst sich vor hellem Hintergrund" style="object-position:50% 32%"></div></div></section><section class="section section--ink">
   <div class="shell">
     <div class="section-head">
       <div class="section-head__text stack">
@@ -91,20 +87,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>
@@ -112,7 +103,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>
@@ -129,6 +120,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">