PageSourceSearch

https://jenny-wullich.de/

html jenny-wullich.de collected 2026-10-09 22:44:24 UTC 34,450 bytes, 435 lines download raw bytes

1<!DOCTYPE html>
2<html lang="de">
3<head>
4<meta name="robots" content="index, follow">
5<meta name="google-site-verification" content="o3greaKAILJQOJUGOCkcpjMnp-s5_YcScZmdz-FLULY" />
6<meta charset="UTF-8" />
7<meta name="viewport" content="width=device-width, initial-scale=1" />
8  <meta name="theme-color" content="#080712">
9<link rel="icon" href="favicon.ico?v=2" sizes="any">
10<link rel="icon" href="favicon-192.png?v=2" type="image/png" sizes="192x192">
11<link rel="apple-touch-icon" href="apple-touch-icon.png?v=2">
12<title>Webdesign, Logodesign &amp; Marke aus München | Jenny Wullich</title>
13<meta name="description" content="Onlineportfolio mit über 100 Arbeiten aus 15 Jahren: Websites, Logos und Markenauftritte aus München ✨">
14
15<link rel="canonical" href="https://jenny-wullich.de/">
16<link rel="alternate" hreflang="de" href="https://jenny-wullich.de/">
17<link rel="alternate" hreflang="en" href="https://jenny-wullich.de/en/">
18<link rel="alternate" hreflang="la" href="https://jenny-wullich.de/la/">
19<link rel="alternate" hreflang="x-default" href="https://jenny-wullich.de/">
20<meta property="og:type" content="website">
21<meta property="og:locale" content="de_DE">
22<meta property="og:site_name" content="Jenny Wullich">
23<meta property="og:title" content="Webdesign, Logodesign &amp; Marke aus München | Jenny Wullich">
24<meta property="og:description" content="Onlineportfolio mit über 100 Arbeiten aus 15 Jahren: Websites, Logos und Markenauftritte aus München ✨">
25<meta property="og:url" content="https://jenny-wullich.de/">
26<meta property="og:image" content="https://jenny-wullich.de/bilder/img-f871f97ea2.jpg">
27<meta name="twitter:card" content="summary_large_image">
28<link rel="stylesheet" href="assets/fonts/fonts.css?v=ac28721f">
29<link rel="preload" href="assets/fonts/inter-latin-700-normal.woff2" as="font" type="font/woff2" crossorigin>
30<link rel="stylesheet" href="css/lumina-base.css?v=3bb4cd2d">
31<script>(function(){var t=document.getElementById('magicToggle');if(t&&document.body.classList.contains('reduced-motion'))t.tabIndex=-1;})();</script>
vendor: 1 bytes, line 31
31
32<script type="application/ld+json">
33{
34  "@context": "https://schema.org",
35  "@type": "ProfessionalService",
36  "name": "Jenny Wullich, Kommunikationsdesign",
37  "description": "Grafik- und Webdesign aus München: Websites, Logos und Markenauftritte mit langfristiger Betreuung.",
38  "url": "https://jenny-wullich.de/",
39  "image": "https://jenny-wullich.de/bilder/img-f871f97ea2.jpg",
40  "email": "[email protected]",
41  "telephone": "+49 89 21539726",
42  "address": {
43    "@type": "PostalAddress",
44    "streetAddress": "Ludwigstraße 8",
45    "postalCode": "80539",
46    "addressLocality": "München",
47    "addressCountry": "DE"
48  },
49  "areaServed": "München",
50  "knowsLanguage": ["de", "en"],
51  "sameAs": ["https://designhoch10.de"],
52  "founder": { "@type": "Person", "name": "Jenny Wullich" }
53}
54</script>
vendor: 1 bytes, line 54
54
55<script type="application/ld+json">
56{
57  "@context": "https://schema.org",
58  "@type": "WebSite",
59  "name": "Jenny Wullich",
60  "alternateName": "Jenny Wullich – Grafik- und Webdesign München",
61  "url": "https://jenny-wullich.de/",
62  "inLanguage": [
63    "de",
64    "en"
65  ],
66  "publisher": {
67    "@type": "ProfessionalService",
68    "name": "Jenny Wullich, Kommunikationsdesign",
69    "url": "https://jenny-wullich.de/"
70  }
71}
72</script>
72
73</head>
74<body class="home-scroll">
75<div class="read-bar" id="readBar" aria-hidden="true"><span></span></div>
76<div class="statusleisten-schutz" aria-hidden="true"></div>
77<div class="kopf-kappe" aria-hidden="true"></div>
78<script>/* Start-Modus: gespeicherte Wahl vor OS-Einstellung, vor dem Rendern */try{var _jm=localStorage.getItem('jw-mode');if(_jm==='reduced'){document.body.classList.add('reduced-motion');}else if(_jm==='magic'){document.body.classList.add('magic');}else if(window.matchMedia('(prefers-reduced-motion: reduce)').matches){document.documentElement.classList.add('prm');document.body.classList.add('reduced-motion');}else if(window.matchMedia('(forced-colors: active)').matches){document.body.classList.add('reduced-motion');}else{document.body.classList.add('magic');}}catch(e){document.body.classList.add('magic');}</script>
78
79<a class="skip-link" href="#menuOverlay">Zur Navigation springen</a>
80<a class="skip-link a11y-switch" href="#" id="a11ySwitch" role="button" aria-pressed="false">Barrierefreie Version ohne Animationen aktivieren</a>
81<div class="vh" id="a11yLive" aria-live="polite"></div>
82<div class="magic-switch">
83  <input type="checkbox" id="magicToggle">
84  <label for="magicToggle">
85    <span class="ls-row" aria-hidden="true"><span class="ls-off">OFF</span><span class="ls-track"><span class="ls-dot"></span></span><span class="ls-on">ON</span></span>
86    <span class="ms-text">Zauberwelt an/aus</span>
87  </label>
88</div>
89
90<canvas id="cvs"></canvas>
91
92<div class="scroll-header" id="scrollHeader" aria-hidden="true"></div>
93
94<button class="burger" id="burger" aria-label="Menü öffnen" aria-expanded="false">
95  <span></span>
96  <span></span><span class="burger-label" aria-hidden="true">Menü</span>
97</button>
98
99<div class="menu-overlay" id="menuOverlay">
100  <nav class="menu-nav">
101      <button class="ff-trigger" id="ffTrigger" type="button" aria-label="Release the fireflies"><svg class="ff-bug" viewBox="684.41 334.23 512.76 1027.94" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><defs><linearGradient id="ffLG" x1="983.52" y1="1055.06" x2="796.15" y2="867.69" gradientUnits="userSpaceOnUse"><stop offset="0" class="g0"/><stop offset=".36" class="g1"/><stop offset=".46" class="g2"/><stop offset=".6" class="g3"/><stop offset=".73" class="g4"/><stop offset=".85" class="g5"/><stop offset=".97" class="g6"/></linearGradient><linearGradient id="ffLG1" x1="1007" y1="994.4" x2="813.36" y2="800.76" href="#ffLG"/><linearGradient id="ffLG2" x1="1058.38" y1="1142.02" x2="847.32" y2="930.96" href="#ffLG"/></defs><g class="ff-glow"><path fill="url(#ffLG)" d="M1025.87,897.58c-.37-.09-.73-.2-1.11-.28,8.03,28.18,3.1,56.38-12.54,76.09-12.6,15.87-32.14,26.24-57.44,26.64-52.38-.84-80.11-44.41-72.58-91.19-1.17-4.02-2.17-8.12-2.83-12.33-.8-5.1-1.2-10.3-1.2-15.62,0-14.35,3.02-28.02,8.52-40.39,5.1-11.64,12.35-22.13,21.27-30.98l20.39-20.73c8.68-28.84,14.6-53.07,14.6-53.07l-139.94,140.25c-71.88,78.83-52.84,190.08,0,267.7,21.09,30.97,25.09,35.08,23.25,32.7,198.8-45.12,214.55-201.3,208.42-243.52-1.91-13.12-4.98-24.83-8.8-35.28Z"/><path fill="url(#ffLG1)" d="M1015.4,896.34c-19.59,0-36.31,12.18-42.9,29.36-1.93,5.03-2.99,10.49-2.99,16.2,0,16.67,9.03,31.27,22.54,39.19-4.01.47-8.09.72-12.2.72-5.39,0-10.67-.4-15.81-1.23-43.52-6.73-77.9-40.86-84.67-84.06-.8-5.1-1.2-10.3-1.2-15.62,0-14.35,3.02-28.02,8.52-40.39,5.1-11.64,12.35-22.13,21.27-30.98l35.02-35.61.02.02,85.75,86.61,17.19,33.36c.17-6.55.04-13.13-.48-19.7l-102.57-138.44c-51.44,49.35-89.55,91.22-114.62,114.88-44.52,39.83-52.37,167.79,61.96,191.65,87.88,18.34,147.11-53.66,154.9-135.02-8.01-6.8-18.36-10.94-29.75-10.94Z"/><path fill="url(#ffLG2)" d="M942.95,735.73c58.03,55.33,109.73,111.86,135.61,140.25,71.88,78.83,52.84,190.08,0,267.7-55.56,81.6-138.41,171.76-138.41,171.76,0,0-31.38-34.68-68.47-80.49-15.68-19.36-43.58-56.18-45.42-58.57,198.8-45.12,214.55-201.3,208.42-243.52-4.45-30.61-13.72-61.26-29.65-87.97-15.75-26.4-48.9-57.84-62.01-70.95l-.06-38.21Z"/></g><path class="ff-wing" d="M1093.4,423.14l-41.99-42.19-47.62,47.4c-18.68-8.7-39.5-13.58-61.45-13.58s-41.2,4.51-59.33,12.6l-46.64-46.42-42,42.19,39.86,39.67c-23.11,25.59-37.2,59.4-37.2,96.42,0,79.66,65.18,144.46,145.3,144.46s145.3-64.81,145.3-144.46c0-36.23-13.49-69.39-35.74-94.78l41.5-41.31ZM942.34,644.16c-47.29,0-85.77-38.1-85.77-84.93s38.48-84.93,85.77-84.93,85.77,38.1,85.77,84.93-38.48,84.93-85.77,84.93Z"/><g class="ff-wing"><rect x="597.76" y="793.88" width="258.2" height="59.53" transform="translate(-369.26 751.2) rotate(-44.79)"/><rect x="1131.16" y="694.55" width="59.53" height="258.2" transform="translate(-241.5034 1067.2385) rotate(-45.2082)"/></g></svg></button>
102      <div class="nav-group nav-group--design" style="--i:1">
103        <button type="button" class="nav-group-toggle" aria-expanded="false" aria-controls="navDesignSub">Design</button>
104        <div class="nav-sub" id="navDesignSub">
105          <div class="nav-group nav-group--web">
106            <button type="button" class="nav-group-toggle nav-sub-toggle" aria-expanded="false" aria-controls="navWebSub">Web</button>
107            <div class="nav-sub" id="navWebSub">
108            <a href="webdesign-muenchen.html">Webdesign</a>
109            <a href="webseiten-relaunch.html">Webseiten-Relaunch</a>
110            <a href="joomla-relaunch.html">Mit Joomla!</a>
111            <a href="barrierefreies-webdesign-muenchen.html">Barrierefreiheit</a>
112            </div>
113          </div>
114          <div class="nav-group nav-group--marke">
115            <button type="button" class="nav-group-toggle nav-sub-toggle" aria-expanded="false" aria-controls="navMarkeSub">Marke</button>
116            <div class="nav-sub" id="navMarkeSub">
117            <a href="branding.html">Markenentwicklung</a>
118            <a href="logodesign.html">Logodesign</a>
119            </div>
120          </div>
121        </div>
122      </div>
123      <a href="artboard.html" style="--i:2">Artboard</a>
124      <a href="labor.html" style="--i:3">Designlabor</a>
125      <a href="logbuch.html" style="--i:4">Logbuch</a>
126      <a href="about.html" style="--i:5">Me</a>
127      <a href="zusammenarbeit.html" style="--i:6">Zusammenarbeit</a>
128      <div class="nav-group nav-group--lumina" style="--i:7">
129        <button type="button" class="nav-group-toggle" aria-expanded="false" aria-controls="navLuminaSub">Lumina</button>
130        <div class="nav-sub" id="navLuminaSub">
131          <a href="lumina.html">Was ist Lumina?</a>
132        </div>
133      </div>
134      <a href="kontakt.html" style="--i:8">Kontakt</a>
135    <div class="menu-contact">
136      <a href="tel:+498921539726" aria-label="Anrufen"><svg class="ico ico-phone" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9
1361.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg><span class="ct-pop">+49&nbsp;89&nbsp;21539726</span></a>
137      <a data-eml-link href="#" aria-label="E-Mail schreiben"><svg class="ico ico-mail" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 6L2 7"/></svg><span class="ct-pop" data-eml-text>flaschenpost(at)jenny-wullich.de</span></a>
138      <a href="#" data-wa-link target="_blank" rel="noopener" aria-label="WhatsApp schreiben"><svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.5 8.5 0 0 1-12.3 7.6L3 21l1.9-5.7A8.5 8.5 0 1 1 21 11.5z"/><path d="M9 9.5c.4 2.2 3.1 4.9 5.3 5.3l1.2-1.2-1.8-1.1-.9.5c-.7-.4-1.6-1.3-2-2l.5-.9-1.1-1.8z"/></svg><span class="ct-pop">WhatsApp</span></a>
139      <a class="ct-item ct-cal" href="https://neura.jenny-wullich.de/termin.php?t=107871e5c22bb845" target="_blank" rel="noopener" aria-label="Rückruf vereinbaren"><svg class="ico ico-cal" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg><span class="ct-pop">Rückruf vereinbaren</span></a>
140    </div>
141    <div class="menu-legal">
142      <a href="datenschutz.html">Datenschutz</a><span class="sep">&middot;</span><a href="impressum.html">Impressum</a><span class="sep">&middot;</span><a href="barrierefreiheit.html">Barrierefreiheit</a>
143    </div>
144  </nav>
145</div>
146
147<div class="headline">
148  <img class="headline-mark" src="bilder/jennys-artboard.png" srcset="bilder/jennys-artboard-520.webp 520w, bilder/jennys-artboard.png 792w" sizes="(max-width:640px) 50vw, 255px" alt="Jennys Artboard" width="792" height="329">
149  <p class="headline-word">a Place of Tales</p>
150  <a class="tagline" href="lumina.html" aria-label="Quod latet, lucet - Was verborgen ist, leuchtet. Zu Lumina"><span class="tl-la">Quod latet, lucet</span><span class="tl-de" aria-hidden="true">Was verborgen ist, leuchtet</span></a>
151</div>
152<div class="stage" role="main">
153  <div class="lower">
154  <div class="btn-row">
155    <a href="about.html" class="pill-btn"><span>About</span></a>
156    <a href="artboard.html" class="pill-btn"><span>Artboard</span></a>
157  </div>
158  </div>
159  <button class="color-switch" id="colorSwitch" aria-label="Farbe wechseln">
160    <span class="dot"></span>
161    <span class="cs-label" id="csLabel">Nocturna</span>
162  </button>
163</div>
164
165<div class="lang-switch lang-fixed" role="group" aria-label="Sprache / Language">
166  <a href="/" hreflang="de" aria-current="page"><span class="lc">de</span><span class="lr" aria-hidden="true">utsch</span></a>
167  <span class="ls-sep" aria-hidden="true">&middot;</span>
168  <a href="/en/" hreflang="en" lang="en"><span class="lc">en</span><span class="lr" aria-hidden="true">glish</span></a>
169  <span class="ls-sep" aria-hidden="true">&middot;</span>
170  <a href="/la/" hreflang="la" lang="la"><span class="lc">la</span><span class="lr" aria-hidden="true">tine</span></a>
171</div>
172
173<style>
174/* Safari (iOS) malt hinter der Statusleiste eine Spiegelung der Scroll-Ebene,
175   an allen fixierten Elementen vorbei - deshalb griff die fixe Kappe dort nie.
176   Dieser Riegel parkt per sticky dauerhaft direkt UEBER dem Viewport-Anfang,
177   exakt in der gespiegelten Zone, und haelt sie dunkel. margin-bottom gleicht
178   die Hoehe aus: kein Layoutplatz, kein Versatz. Mobil ist body kein
179   Scroll-Container (overflow clip/visible), sticky haftet also am Viewport. */
180.statusleisten-schutz{ display:none; }
181@media (max-width:640px){
182  .statusleisten-schutz{ display:block; position:sticky; top:-90px; height:90px;
183    margin-bottom:-90px; background:transparent; transition:background .35s ease;
184    z-index:8; pointer-events:none; }
185  body.scrolled .statusleisten-schutz{ background:#080712; }
186}
187
188/* Obere Abdeckung als ECHTES fixiertes Element: iOS verankert body::before
189   nicht zuverlaessig am Viewport (scrollt mit weg), eine echte DIV schon -
190   Burger und Magic-Switch beweisen es. Transparent am Seitenanfang,
191   deckend sobald gescrollt. Nur mobil; Desktop deckt der .scroll-header. */
192.kopf-kappe{ display:none; }
193@media (max-width:640px){
194  .kopf-kappe{ display:block; position:fixed; top:-140px; left:0; right:0;
195    height:calc(228px + env(safe-area-inset-top, 0px)); z-index:19;
196    background:transparent; transition:background .35s ease; pointer-events:none;
197    /* eigene Compositing-Ebene erzwingen: iOS malt die async scrollende
198       Inhaltsebene sonst UEBER nicht-kompositierte fixe Elemente */
199    transform:translateZ(0); will-change:transform; }
200  body.scrolled .kopf-kappe{ background:rgba(8,7,18,.5);
201    -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%);
202    border-bottom:1px solid rgba(255,255,255,.08); }
203  body.reduced-motion .kopf-kappe{ background:#080712;
204    -webkit-backdrop-filter:none; backdrop-filter:none; }
205  body.menu-open .kopf-kappe{ background:transparent; }
206}
207
208/* Startseite scrollbar machen (Hero bleibt der erste Screen) */
209body.home-scroll{ overflow-y:auto !important; overflow-x:hidden !important; scroll-behavior:smooth; }
210
211/* Mobil muss das DOKUMENT scrollen (nicht der body als Container), sonst
212   greifen position:sticky-Elemente nicht - weder die Inhalts-Sektionen noch
213   der .statusleisten-schutz, der die iOS-Spiegelzone hinter der Statusleiste
214   abdunkelt. `clip` schneidet horizontal wie `hidden`, erzeugt aber keinen
215   Scroll-Container. */
216@media (max-width:640px){
217  html{ overflow-x:clip !important; overflow-y:visible !important; }
218  body.home-scroll:not(.menu-open){ overflow-x:clip !important; overflow-y:visible !important; }
219}
220
221/* Scroll-Sperre bei offenem Menue.
222   VORBESTEHENDER FEHLER (nicht durch den Umbau entstanden): lumina-base.css
223   hat `body.menu-open{ overflow:hidden }` ohne !important, das obige
224   `overflow-y:auto !important` gewinnt aber - auf der Startseite liess sich
225   der Hintergrund bei offenem Menue immer mitscrollen. Hier mit gleicher
226   Gewichtung nachgezogen. Mobil muss zusaetzlich <html> gesperrt werden,
227   weil body sein overflow dort nicht an den Viewport weiterreicht. */
228body.home-scroll.menu-open{ overflow:hidden !important; }
229@media (max-width:640px){
230  html:has(body.menu-open){ overflow:hidden !important; }
231}
232
233/* Hero-Overlays beim Scrollen sanft ausblenden, Aurora-Canvas bleibt Hintergrund */
234body.home-scroll.scrolled .headline,
235body.home-scroll.scrolled .stage,
236body.home-scroll.scrolled .tagline{ opacity:0 !important; pointer-events:none; transition:opacity .45s ease; }
237
238/* „Quod latet, lucet" steht jetzt im .headline-Block direkt unter dem Titel.
239   lumina-base.css haengt die Tagline per position:fixed an den unteren Rand
240   (Z. 515/523) - hier wird sie fuer die Startseite zurueck in den Fluss geholt. */
241body .headline .tagline{ position:relative !important; left:auto !important; right:auto !important;
242  bottom:auto !important; transform:translateY(-5px) translateZ(0) !important; z-index:auto;
243  margin:clamp(5px,1.0vh,12px) 0 0 !important; }
244/* Das Motto ist auf der Startseite ein Link auf Lumina - kein Unterstrich,
245   Fokus sichtbar wie bei den uebrigen Hero-Links. */
246body .headline a.tagline{ text-decoration:none; }
247body .headline a.tagline:focus-visible{ outline:2px solid #fff; outline-offset:6px; border-radius:4px; }
248/* Sprachschalter rueckt auf den frei gewordenen Platz am unteren Rand nach */
249.lang-switch.lang-fixed{ position:fixed !important; left:50% !important; right:auto !important; top:auto !important; bottom:calc(56px + var(--ft-h,44px)) !important; transform:translateX(-50%) !important; z-index:41; }
250body.home-scroll.scrolled .lang-switch.lang-fixed{ opacity:0 !important; pointer-events:none; transition:opacity .45s ease; }
251.home-scrollcue{ position:fixed; left:50%; bottom:30px; transform:translateX(-50%); z-index:6;
252  width:40px; height:40px;
252 color:rgb(var(--ff-accent, var(--btn-accent, 255,255,255))); opacity:.68; pointer-events:auto; cursor:pointer;
253  transition:opacity .4s ease; animation:cueBob 1.9s ease-in-out infinite; }
254.home-scrollcue:hover, .home-scrollcue:focus-visible{ opacity:1; }
255.home-scrollcue svg{ width:100%; height:100%; display:block; }
256body.home-scroll.scrolled .home-scrollcue,
257body.menu-open .home-scrollcue{ opacity:0; }
258body.reduced-motion .home-scrollcue{ animation:none; }
259@media (prefers-reduced-motion: reduce){ .home-scrollcue{ animation:none; } }
260@keyframes cueBob{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(5px); } }
261
262/* Inhaltsbereich unter dem Hero.
263   position:sticky = der Text bleibt als eigener Screen stehen, sobald er oben
264   ankommt. Der Block darunter schiebt sich dann darueber - dasselbe Prinzip,
265   mit dem sich dieser Text hier ueber den Hero schiebt. */
266.home-about{ position:sticky; top:0; z-index:5; margin-top:100vh; min-height:100vh;
267  display:flex; align-items:center; justify-content:center; padding:12vh 24px 7vh;
268  /* Endet bewusst NICHT mehr auf fast deckendem Schwarz (vorher .95): die Aurora
269     muss hier durchscheinen, sonst schiebt sich gleich Schwarz ueber Schwarz und
270     man sieht von der Bewegung nichts. Same Prinzip wie beim Hero darueber. */
271  background:linear-gradient(180deg, rgba(8,7,18,0) 0%, rgba(8,7,18,.68) 20%, rgba(8,7,18,.74) 100%); }
272.home-about-inner{ max-width:44rem; margin:0 auto; text-align:center; color:#fff; }
273.home-about-eyebrow{ font-family:var(--sans); letter-spacing:.22em; text-transform:uppercase;
274  font-size:12px; opacity:.6; margin:0 0 14px; }
275/* Mobil: Schriftzug, Titel und die Knoepfe etwas hoeher setzen.
276   .lower steht sonst in lumina-base.css (60%) – hier nur fuer die Startseite. */
277@media (max-width:640px){ .headline{ top:34%; } .lower{ top:56%; } }
278/* Farbschalter auf den goldenen Schnitt: Mittelpunkt auf 61,8 % der Buehnenhoehe.
279   Er haengt dafuer nicht mehr an der Button-Reihe (lumina-base.css Z. 859:
280   top:100% + 18px Abstand), sondern direkt an .stage - die liegt fix ueber dem
281   ganzen Viewport, die Prozentangabe misst also die sichtbare Hoehe. */
282.stage > .color-switch{ position:absolute; left:50%; top:61.8%; transform:translate(-50%,-50%); margin:0; }
283/* mobil tiefer - NACH der Basisregel, sonst gewinnt deren top:61.8% */
284@media (max-width:640px){ .stage > .color-switch{ top:69%; } }
285/* Handschrift-Schriftzug ueber dem Hero-Titel.
286   translateY schiebt nur die Grafik tiefer, ohne Titel und Motto darunter
287   mitzuziehen (margin wuerde den ganzen Block verschieben). */
288.headline-mark{ display:block; width:clamp(155px, 20vw, 255px); height:auto; margin:0 auto -28px; transform:translateY(9px); }
289@media (max-width:640px){ .headline-mark{ width:clamp(150px, 50vw, 215px); margin-bottom:-20px; transform:translateY(5px); } }
290.home-about-inner h2{ font-size:clamp(24px,3.4vw,36px); line-height:1.18; margin:0 0 .6em; color:#fff; }
291.home-about-inner h2 .h2-sep{ opacity:.4; font-weight:400; }
292.home-about-inner p{ font-family:var(--sans); font-size:clamp(14.5px,1.25vw,17px); line-height:1.65;
293  opacity:.85; margin:0 auto .85em; max-width:38rem; }
294.home-about-sign{ display:block; position:relative; z-index:2; width:clamp(81px,11vw,113px); height:auto; margin:1.2em auto 0; transform:translateX(8px); opacity:.9; }
295.home-about-inner p.home-about-signname{ position:relative; z-index:1; margin:-1.8em auto 0; max-width:none; font-family:var(--sans); font-size:clamp(14.5px,1.25vw,17px); font-weight:700; line-height:1.35; letter-spacing:.01em; color:#fff; opacity:.78; }
296.home-about-inner p.home-about-signname a{ color:inherit; text-decoration:none; transition:opacity .2s ease; }
297.home-about-inner p.home-about-signname a:hover, .home-about-inner p.home-about-signname a:focus-visible{ text-decoration:underline; text-underline-offset:3px; }
298.home-about-links{ margin:.15em 0 0; text-align:center; font-family:var(--sans); font-size:13.5px; line-height:1.9; }
299.home-about-links a{ color:#fff; text-decoration:none; opacity:.6; transition:opacity .2s ease; }
300.home-about-links a:hover, .home-about-links a:focus-visible{ opacity:1; text-decoration:underline; text-underline-offset:3px; }
301.home-about-links span{ margin:0 .5em; opacity:.32; }
302.home-about-contact{ display:flex; flex-direction:column; align-items:center; gap:.85em;
303  margin:2.6em 0 0; font-family:var(--sans); font-size:15px; letter-spacing:.01em; }
304.home-about-contact a{ display:inline-flex; align-items:center; gap:.6em; color:#fff; text-decoration:none;
305  opacity:.82; transition:opacity .2s ease; }
306.home-about-contact a:hover, .home-about-contact a:focus-visible{ opacity:1; }
307.home-about-contact svg{ width:17px; height:17px; flex:none; opacity:.7; }
308.home-about-contact a:hover svg, .home-about-contact a:focus-visible svg{ opacity:1; }
309.home-about-contact a span{ border-bottom:1px solid rgba(255,255,255,.26); padding-bottom:1px;
310  transition:border-color .2s ease; }
311.home-about-contact a:hover span, .home-about-contact a:focus-visible span{ border-color:rgba(255,255,255,.65); }
312.home-about-more{ margin-top:1.6em; }
313.home-about-more a{ color:#fff; opacity:.75; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3); padding-bottom:2px; }
314.home-about-more a:hover, .home-about-more a:focus-visible{ opacity:1; }
315/* Pfeil am unteren Rand des persoenlichen Screens - optisch derselbe wie im
316   Hero, nur nicht fixiert, sondern am Ende der Sektion verankert. */
317.home-cue-more{ position:absolute; left:50%; bottom:4.5vh; transform:translateX(-50%);
318  display:block; width:40px; height:40px;
318 cursor:pointer; z-index:2;
319  color:rgb(var(--ff-accent, var(--btn-accent, 255,255,255))); opacity:.6;
320  transition:opacity .3s ease; animation:cueBob 1.9s ease-in-out infinite; }
321.home-cue-more:hover, .home-cue-more:focus-visible{ opacity:1; }
322.home-cue-more svg{ width:100%; height:100%; display:block; }
323body.reduced-motion .home-cue-more{ animation:none; }
324@media (prefers-reduced-motion: reduce){ .home-cue-more{ animation:none; } }
325
326/* Zweite Scroll-Sektion (Leistungen): traegt die technische H1 der Seite.
327   Schiebt sich als eigener, deckender Screen ueber den feststehenden Text
328   darueber. Deshalb KEIN sticky (das erbt sie sonst von .home-about) und ein
329   voll deckender Hintergrund - sonst schiene der Text darunter durch.
330   z-index bleibt 5: durch die spaetere DOM-Position deckt sie ohnehin, und
331   der fixierte Footer auf 6 bleibt frei. */
332.home-about--more{ position:relative; top:auto; margin-top:0; min-height:100vh;
333  padding:12vh 24px 10vh; background:#060512;
334  /* Sichtbare Kante, damit die Bewegung lesbar ist: abgerundete Oberkante +
335     helles Haarlinien-Highlight + breiter Schatten. Ohne das schiebt sich die
336     Flaeche unsichtbar ueber den Text darunter. */
337  border-radius:26px 26px 0 0;
338  border-top:1px solid rgba(255,255,255,.14);
339  box-shadow:0 -34px 70px rgba(0,0,0,.75); }
340.home-about--more .home-about-inner h1{ font-family:var(--sans); font-weight:700; font-size:clamp(22px,3vw,32px);
341  line-height:1.25; letter-spacing:.005em; max-width:none; margin:0 0 .7em; color:#fff; }
342.home-about-inner p a{ color:#fff; text-decoration:underline; text-underline-offset:3px;
343  text-decoration-color:rgba(255,255,255,.35); transition:text-decoration-color .2s ease; }
344.home-about-inner p a:hover, .home-about-inner p a:focus-visible{ text-decoration-color:#fff; }
345/* Scroll-Pfeil unter dem Spruch etwas tiefer */
346.home-scrollcue{ bottom:14px; }
347/* Mobil: untere Sektionen deutlich kompakter (vh wirkt auf hohen Displays sonst sehr gross) */
348@media (max-width:640px){
349  .home-about{ padding:7vh 20px 9vh; }
350  /* min-height:100vh bleibt auch mobil - sonst steht der Text nicht als
351     eigener Screen und der Block darunter lugt am Rand schon hervor. */
352  .home-about--more{ padding:10vh 20px 8vh; }
353  .home-cue-more{ bottom:3.5vh; }
354  .home-about-inner h2{ margin:0 0 .45em; }
355  .home-about--more .home-about-inner h1{ margin:0 0 .55em; }
356  .home-about-inner p{ margin:0 auto .7em; line-height:1.6; }
357  .home-about-sign{ margin:.9em auto 0; }
358  .home-about-inner p.home-about-signname{ margin:-1.5em auto 0; }
359}
360.home-balken{ margin:2.2em auto 0; max-width:560px; }
361.home-balken img{ width:100%; height:auto; aspect-ratio:2.2/1; object-fit:cover; object-position:center 32%;
362  border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.45); }
363</style>
364<a class="home-scrollcue" href="#home-about" aria-label="Zum Inhalt scrollen">
365  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
366</a>
367<section class="home-about" id="home-about" aria-label="Über Jenny Wullich und meine Leistungen">
368  <div class="home-about-inner">
369    <h2 class="only-de">Für Dich <span class="h2-sep">&middot;</span> zum Wir</h2>
370    
371    
372    <p class="only-de">Ich bin Jenny, Grafik- und Webdesignerin aus München. Ich gestalte Websites, Logos und ganze Markenauftritte &ndash; mit Charakter, persönlich und so, dass sich wirklich jeder darin zurechtfindet. Gutes Design entsteht für mich nie allein am Reißbrett, sondern im Miteinander: Ich höre zu, frage nach und entwickle deine Marke gemeinsam mit dir und den Menschen, die sie am Ende mit Leben füllen.</p>
373    
374    
375    <p class="only-de">So wird aus &bdquo;für dich&ldquo; ganz schnell ein &bdquo;wir&ldquo;.</p>
376    
377    
378    <p class="only-de">Dafür stehe ich.</p>
379    
380    
381    <img class="home-about-sign" src="bilder/jw-sign.png" srcset="bilder/jw-sign-240.webp 240w, bilder/jw-sign.png 463w" sizes="(max-width:640px) 81px, 113px" alt="Jenny Wullich" width="463" height="409" loading="lazy">
382    <p class="home-about-signname"><a href="about.html">Jenny Wullich</a></p>
383    <figure class="home-balken">
384      <img src="bilder/jenny-wullich-kommunikationsdesignerin-muenchen.webp?v=2" srcset="bilder/jenny-wullich-kommunikationsdesignerin-muenchen-560.webp?v=2 560w, bilder/jenny-wullich-kommunikationsdesignerin-muenchen-1120.webp?v=2 1120w, bilder/jenny-wullich-kommunikationsdesignerin-muenchen.webp?v=2 1600w" sizes="(max-width:640px) 92vw, 560px" alt="Jenny Wullich, Kommunikationsdesignerin aus München, lehnt an einem alten Holzbalken" width="1600" height="976" loading="lazy">
385    </figure>
386  </div>
387  <a class="home-cue-more" href="#leistungen" aria-label="Weiter: Um was geht es hier">
388    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
389  </a>
390</section>
391
392<section class="home-about home-about--more" id="leistungen">
393  <div class="home-about-inner">
394    <p class="home-about-eyebrow">Um was geht es hier: f&uuml;r KI und Google</p>
395    <h1>Webdesign, Logodesign &amp; Markenentwicklung aus M&uuml;nchen</h1>
396    <p class="only-de">Hinter a Place of Tales stecke ich, Jenny Wullich, Kommunikationsdesignerin aus M&uuml;nchen. Seit &uuml;ber vierzehn Jahren baue ich Websites, die meisten von Grund auf; meine Projekte plane und steuere ich selbst. Dazu kommen Logos, Erscheinungsbilder und alles, was eine Marke sonst noch braucht.</p>
397    
398    
399    <p class="only-de">Barrierefreies Webdesign ist dabei mein Schwerpunkt, denn ich habe Websites gemeinsam mit blinden und sehbehinderten Menschen entwickelt und dabei gesehen, was auf dem Papier zwar gut aussieht und in der Bedienung trotzdem scheitert. WCAG und BFSG sind seitdem mein Alltag. Auch diese Seite gibt es in einer barrierefreien Version, dr&uuml;ck einfach auf den Schalter oben.</p>
400    
401    
402    <p class="only-de">Was ich mache, findest du hier im Detail: <a href="webdesign-muenchen.html">Webdesign München</a>, <a href="barrierefreies-webdesign-muenchen.html">Barrierefreies Webdesign</a>, <a href="webseiten-relaunch.html">Webseiten-Relaunch</a>, <a href="logodesign.html">Logodesign</a> und <a href="branding.html">Markenentwicklung</a>. Und im <a href="artboard.html">Artboard</a> siehst du, wie das am Ende aussieht.</p>
403    
404    
405    <p class="only-de">Du suchst eine <a href="werbeagentur-muenchen.html">Werbeagentur in M&uuml;nchen</a>? Dann lies, warum ich keine bin &ndash; und genau das f&uuml;r dich ein Vorteil ist.</p>
406    
407    
408    <p class="only-de"><strong>
408Muss meine Website barrierefrei sein?</strong> Seit Juni 2025 greift das BFSG: Sobald &uuml;ber deine Website gebucht, bestellt oder ein Vertrag geschlossen wird, ist Barrierefreiheit f&uuml;r viele Unternehmen Pflicht &ndash; Kleinstunternehmen sind oft ausgenommen. Ob es dich betrifft, kl&auml;re ich mit dir ehrlich und ohne Panikmache: <a href="barrierefreies-webdesign-muenchen.html">Barrierefreies Webdesign</a>.</p>
409    
410    
411    <p class="only-de">Ich arbeite von der Ludwigstra&szlig;e in M&uuml;nchen aus, f&uuml;r Unternehmen, Praxen und &ouml;ffentliche Stellen &ndash; hier vor Ort und im ganzen deutschsprachigen Raum. Wenn du magst, erz&auml;hl mir von deinem Projekt: Schick mir einfach eine <a href="kontakt.html">Drachenpost</a>.</p>
412    
413      </div>
414</section>
415
416<script src="js/index.engine.js?v=d871eeb3"></script>
416
417
418<script src="js/menu.js?v=afe9e208"></script>
vendor: 1 bytes, line 418
418
419<script src="js/mail.js?v=c9cff2ff"></script>
vendor: 1 bytes, line 419
419
420<script src="js/la.js?v=18270978"></script>
420
421
422<script id="btn-accent-init">try{var _p=localStorage.getItem('auroraPalette')||'nocturna';var _m={dusk:'110,160,255',sunset:'200,100,145',nocturna:'178,180,192',lagona:'80,200,190',lunara:'170,180,215',northern:'170,150,238'};var _f={dusk:'110,160,255',sunset:'200,100,145',nocturna:'140,110,220',lagona:'80,200,190',lunara:'170,180,215',northern:'170,150,238'};document.documentElement.style.setProperty('--btn-accent',_m[_p]||'178,180,192');document.documentElement.style.setProperty('--ff-accent',_f[_p]||'140,110,220');}catch(e){}</script>
vendor: 1 bytes, line 422
422
423<script src="js/scroll.js?v=4b741cd6"></script>
vendor: 1 bytes, line 423
423
424<script>(function(){var f=document.querySelector('.site-footer');if(!f)return;var r=document.documentElement;function u(){r.style.setProperty('--ft-h',f.offsetHeight+'px');}u();window.addEventListener('resize',u);})();</script>
424
425<footer class="site-footer">
426  <p class="ft-copy">&copy; Jenny Wullich &middot; Ludwigstr.&nbsp;8 &middot; 80539&nbsp;M&uuml;nchen</p>
427  <div class="ft-actions">
428    <a class="ft-btn" href="tel:+498921539726" aria-label="Anrufen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg><span class="ft-pop">089&nbsp;215&nbsp;397&nbsp;26</span></a>
429    <a class="ft-btn" data-eml-link href="#" aria-label="E-Mail schreiben"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 6L2 7"/></svg><span class="ft-pop" data-eml-text>flaschenpost(at)jenny-wullich.de</span></a>
430    <a class="ft-btn" href="#" data-wa-link target="_blank" rel="noopener" aria-label="WhatsApp schreiben"><svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.5 8.5 0 0 1-12.3 7.6L3 21l1.9-5.7A8.5 8.5 0 1 1 21 11.5z"/><path d="M9 9.5c.4 2.2 3.1 4.9 5.3 5.3l1.2-1.2-1.8-1.1-.9.5c-.7-.4-1.6-1.3-2-2l.5-.9-1.1-1.8z"/></svg><span class="ft-pop">WhatsApp</span></a>
431    <a class="ft-btn" href="https://neura.jenny-wullich.de/termin.php?t=107871e5c22bb845" target="_blank" rel="noopener" aria-label="Rückruf vereinbaren"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg><span class="ft-pop">Rückruf vereinbaren</span></a>
432  </div>
433</footer>
434</body>
435</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.