release v1.0.1

remove test comment
test commit
2026-06-21 23:39:42 +02:00 · 2026-06-21 19:42:38 +02:00 · 2026-06-21 19:41:37 +02:00 · 2026-06-21 12:44:42 +02:00 · 2026-06-15 22:58:43 +02:00 · 2026-06-15 22:50:54 +02:00
11 changed files with 760 additions and 528 deletions
@@ -3,59 +3,91 @@

 <head>
  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <title>Page Not Found</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="/css/a11y.css" id="a11y-css" disabled>
+  <meta name="description" content="Creator of visual identities and digital interfaces">
+
+  <meta property="og:title" content="Lars Winter">
+  <meta property="og:description" content="Portfolio of Lars Winter">
+  <meta property="og:url" content="https://larswinter.me">
+  <meta property="og:image" content="https://larswinter.me/img/lw-og_image.png">
+  <meta property="og:image:alt" content="">
+  <meta name="fediverse:creator" content="@larswinter@mastodon.social">
+
+  <link rel="icon" href="img/favicon.ico" sizes="any">
+  <!-- <link rel="icon" href="img/icon.svg" type="image/svg+xml"> -->
+  <link rel="apple-touch-icon" href="img/lw.png">
+  
+  <meta name="theme-color" content="#F7F7F7" media="(prefers-color-scheme: light)">
+  <meta name="theme-color" content="#0f0f0f" media="(prefers-color-scheme: dark)">
+  
  <style>
-    * {
-      line-height: 1.2;
-      margin: 0;
+	 	 main {
+	  		justify-content: center
+	  	}
+	  	h1 {
+	  		font-size: clamp(7.25rem, 4.5rem + 1.1vw, 8rem);
+			color: light-dark(var(--color-orange-red-600), var(--color-orange-red-500)); 
 	    }
 	  
-    html {
-      color: #888;
-      display: table;
-      font-family: sans-serif;
-      height: 100%;
+	  	h2 {
+			font-size: clamp(2.75rem, 2.5rem + 1.1vw, 4rem);
+		}
+		
+		h1, h2, p {
 			text-align: center;
-      width: 100%;
-    }
-
-    body {
-      display: table-cell;
-      vertical-align: middle;
-      margin: 2em auto;
-    }
-
-    h1 {
-      color: #555;
-      font-size: 2em;
-      font-weight: 400;
-    }
-
-    p {
-      margin: 0 auto;
-      width: 280px;
-    }
-
-    @media only screen and (max-width: 280px) {
-
-      body,
-      p {
-        width: 95%;
-      }
-
-      h1 {
-        font-size: 1.5em;
-        margin: 0 0 0.3em;
-      }
-
 		}
  </style>
+  
+  <script src="js/app.js" defer></script>
+  
 </head>

 <body>
-  <h1>Page Not Found</h1>
+		
+	<div id="skipLink">
+		<a href="#siteContent">Skip to content</a>
+	</div>
+
+	<header class="site-header">
+		<div class="menu-bar">
+		  <div class="menu-left">
+			<a class="logo" href="/">
+			  <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" aria-hidden="true" focusable="false" viewBox="0 0 1080 1080"><path d="M1000.022 50H499.59c-20.565 0-34.827 20.502-27.676 39.783l146.561 395.171c8.419 22.699 40.635 22.382 48.605-.478l61.821-177.315c6.903-19.8 34.906-19.8 41.809 0l61.821 177.315c7.97 22.861 40.187 23.178 48.605.478l146.561-395.171c7.151-19.281-7.112-39.783-27.676-39.783Z"/><path d="M360 538V106c0-30.928-25.072-56-56-56H106c-30.928 0-56 25.072-56 56v868c0 30.928 25.072 56 56 56h868c30.928 0 56-25.072 56-56V650c0-30.928-25.072-56-56-56H416c-30.928 0-56-25.072-56-56"/></svg>
+			  <span class="visually-hidden">Home page</span>
+			</a>
+		  
+		  </div>
+		  
+		  <div class="menu-right">
+		  <nav class="desktop-nav-secondary" aria-label="Secondary navigation">
+			<ul>
+			  <li><button type="button" id="a11y-toggle" aria-pressed="false" class="button-secondary">
+				<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+				  <path fill="currentColor" d="M21 10h-6v12h-2v-6h-2v6H9V10H3V8h18zm-9-8a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5"/>
+				</svg><span class="visually-hidden">Make the website more visually accessible</span></button></li>
+			  <li><button type="button" id="theme-toggle" class="button-secondary"><svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+				  <path fill="currentColor" fill-rule="evenodd" d="M5.302 4.574a9.96 9.96 0 0 1 6.697-2.57L12 2l.134.002a10.1 10.1 0 0 1 3.015.507l.223.076q.12.043.24.091.102.038.203.08.117.047.232.1.107.045.213.095.105.05.21.104.116.056.23.117l.153.084q.135.074.27.154.105.064.21.132.091.056.183.115.131.088.261.182l.154.109.21.162q.092.071.185.146l.123.105q.32.268.622.568l.355.373q.51.565.917 1.182l.06.095q.104.16.202.323l.082.145q.076.134.15.27l.085.166q.067.13.13.264.042.09.081.182.063.138.122.279l.049.127q.063.16.12.32.027.075.05.15.051.145.096.292l.058.206a10 10 0 0 1 .173.716l.037.201.044.254a10 10 0 0 1 .081.695 10.3 10.3 0 0 1-.084 2.374 10 10 0 0 1-.13.678 10 10 0 0 1-.184.694 10 10 0 0 1-.148.448q-.046.13-.098.26l-.075.192-.1.233q-.046.106-.095.213l-.104.21-.117.229-.095.171q-.07.127-.143.252-.065.106-.132.21-.058.096-.12.19-.087.128-.178.255l-.108.154q-.08.105-.163.209-.071.094-.145.186l-.105.123a10 10 0 0 1-.94.976q-.375.337-.773.63l-.098.07q-.147.105-.295.205l-.148.095q-.128.083-.258.162l-.163.093q-.127.075-.257.143-.087.046-.175.09-.12.062-.242.12-.102.048-.205.094-.117.052-.236.102l-.175.072a10 10 0 0 1-1.147.372q-.108.03-.218.056a10 10 0 0 1-.293.064l-.146.03a10 10 0 0 1-.294.05l-.187.029q-.135.018-.27.032l-.189.022q-.157.013-.316.022l-.15.01a9.97 9.97 0 0 1-7.162-2.563l-.373-.355c-3.905-3.905-3.905-10.237 0-14.142zm1.041 1.77A8 8 0 0 0 12 20V4a7.98 7.98 0 0 0-5.657 2.343"/>
+				</svg><span class="visually-hidden">Change light/dark mode</span></button></li>
+			</ul>
+		  </nav>
+	  
+		  </div>
+		</div>
+	  </header>
+
+	<main>
+		<section>
+			<h1>4💀4</h1>
+			<h2>Page Not Found</h2>
 			<p>Sorry, but the page you were trying to view does not exist.</p>
+		</section>
+	</main>
+	
+	<!-- <script src="js/app.js" defer></script> -->
+
 </body>

 </html>
@@ -1,4 +1,5 @@
 Copyright (c) HTML5 Boilerplate
+Copyright (c) 2026 Lars Winter

 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in
@@ -2,19 +2,10 @@

 This is the portfolio website and blog of Lars Winter.

-## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [Structure](#structure)
+## License

-## Installation
-```bash
-git clone <repo>
-cd project
-npm install  # if applicable
-```
+Code in this repository is licensed under the MIT License. See the `LICENSE` file.

-## Usage
-Quick start example.
+## Asset notice

-## Structure
+All images, screenshots, logos, trademarks, and project visuals in this repository are excluded from the code license unless explicitly stated otherwise. Such materials are the property of their respective copyright owners and may not be reused, redistributed, or modified without permission.
@@ -0,0 +1,69 @@
+*, a, span, li {
+	line-height: var(--line-loose);
+	letter-spacing: 0.12em;
+	word-spacing: 0.16em;
+}
+
+a {
+	line-height: var(--line-loose);
+	letter-spacing: 0.12em;
+	word-spacing: 0.16em;
+}
+
+p, ul, ol, li {
+  margin: 1.6em 0 3.2em 0;
+}
+
+button, .button-primary, .button-secondary, .menu-button, .logo {
+	line-height: var(--line-loose);
+	letter-spacing: 0.12em;
+	word-spacing: 0.16em;
+	text-decoration: underline;
+	text-underline-offset: 0.175rem;
+	text-decoration-thickness: 0.075rem;
+	transition: 0.2s;
+}
+
+button:hover, .button-primary:hover, .button-secondary:hover, .logo:hover {
+  text-decoration: underline;
+	text-underline-offset: 0.175rem;
+	text-decoration-thickness: 0.075rem;
+	transition: 0.2s;
+}
+
+button:active, .button-primary:active, .button-secondary:active, .logo:active {
+  text-decoration: underline;
+  text-underline-offset: 0.175rem;
+  text-decoration-thickness: 0.075rem;
+  transition: 0.2s;
+}
+
+.menu-button:hover, 
+.desktop-nav a[aria-current="page"]:hover,
+.mobile-menu a[aria-current="page"]:hover {
+  text-decoration: underline;
+	text-underline-offset: 0.175rem;
+	text-decoration-thickness: 0.075rem;
+	transition: 0.2s;
+}
+
+.menu-button:active, 
+.desktop-nav a[aria-current="page"]:active,
+.mobile-menu a[aria-current="page"]:active,
+.desktop-nav a[aria-current="page"],
+.mobile-menu a[aria-current="page"] {
+  text-decoration: underline;
+	text-underline-offset: 0.175rem;
+	text-decoration-thickness: 0.075rem;
+	transition: 0.2s;
+}
+
+.menu-button:active, 
+.desktop-nav a[aria-current="page"]:active,
+.mobile-menu a[aria-current="page"]:active {
+  text-decoration: underline;
+	text-underline-offset: 0.175rem;
+	text-decoration-thickness: 0.075rem;
+	transition: 0.2s;
+}
+
@@ -55,6 +55,7 @@

 :root {
  color-scheme: light dark;
+  background-color: light-dark(#F7F7F7, #121212);
  
  /* Primitive tokens: raw design values */
  --color-neutral-100: #F7F7F7;
@@ -65,7 +66,7 @@
  --color-neutral-600: #5B5B5B;
  --color-neutral-700: #3D3D3D;
  --color-neutral-800: #292929;
-  --color-neutral-900: #0F0F0F;
+  --color-neutral-900: #121212;
  
  --color-orange-red-100: #FFE7CC;
  --color-orange-red-200: #FFC999;
@@ -87,6 +88,21 @@
  --color-orange-800: #933D00;
  --color-orange-900: #7A2C00;
  
+  --shadow-light: 0px 2px 8px rgba(0, 0, 0, 0.3), 0px 1px 4px rgba(0, 0, 0, 0.2);
+  --shadow-dark: 0px 2px 8px rgba(0, 0, 0, 0.5), 0px 1px 4px rgba(0, 0, 0, 0.2);
+  
+  --gradient-stop-1-light: #f7f7f7;
+  --gradient-stop-1-dark:  #121212;
+  
+  --gradient-stop-2-light: #f7f7f7;
+  --gradient-stop-2-dark:  #121212;
+  
+  --gradient-stop-3-light: #f7f7f780;
+  --gradient-stop-3-dark:  #12121280;
+  
+  --gradient-stop-4-light: #f7f7f700;
+  --gradient-stop-4-dark:  #12121200;
+  
  --text-h1: clamp(2.25rem, 1.9rem + 1.1vw, 3rem);
  --text-h2: clamp(1.875rem, 1.6rem + 0.9vw, 2.5rem);
  --text-h3: clamp(1.625rem, 1.4rem + 0.7vw, 2rem);
@@ -94,6 +110,8 @@
  --text-h5: clamp(1.25rem, 1.15rem + 0.25vw, 1.5rem);
  --text-h6: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);
  
+  --round-interval: 2px;
+  
  --text-body: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);
  --text-small: 0.875rem;
  --text-button: clamp(1.25rem, 1.15rem + 0.25vw, 1.5rem);
@@ -126,9 +144,6 @@
  --radius-xl: 2rem;
  --radius-xxl: 2.5rem;
  
-  --shadow-box: 0px 2px 8px rgba(0, 0, 0, 0.4), 0px 1px 4px rgba(0, 0, 0, 0.12);
-  --shadow-button: inset 0px 1px 2px rgba(0, 0, 0, 0.16), inset 0px -1px 4px rgba(0, 0, 0, 0.28), var(--shadow-box);
-  --shadow-button-active: inset 0px -1px 2px rgba(0, 0, 0, 0.16), inset 0px 1px 4px rgba(0, 0, 0, 0.28), var(--shadow-box);

  /* Semantic tokens: contextual usage */
  --color-background: light-dark(var(--color-neutral-100), var(--color-neutral-900));
@@ -150,13 +165,29 @@
  
  --color-text-primary: light-dark(var(--color-neutral-900), var(--color-neutral-100));
  --color-text-secondary: light-dark(var(--color-neutral-700), var(--color-neutral-400));
+  --color-text-primary-inverted: light-dark(var(--color-neutral-100), var(--color-neutral-900));
+  --color-text-secondary-inverted: light-dark(var(--color-neutral-400), var(--color-neutral-700));
  
-  --color-primary-button: var(--color-orange-red-500);
-  --color-primary-button-hover: var(--color-orange-500);
-  --color-primary-button-active: var(--color-orange-red-600);
+  --color-button-primary: var(--color-orange-red-500);
+  --color-button-primary-hover: var(--color-orange-500);
+  --color-button-primary-active: var(--color-orange-red-600);
  
-  --color-text-button: var(--color-neutral-900);
-  --color-text-button-active: var(--color-neutral-100);
+  --color-button-secondary: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+  --color-button-secondary-hover: light-dark(var(--color-neutral-100), var(--color-neutral-600));
+  --color-button-secondary-active: light-dark(var(--color-neutral-300), var(--color-neutral-800));
+  
+  --color-text-button-primary: var(--color-neutral-900);
+  --color-text-button-primary-hover: var(--color-neutral-100);
+  --color-text-button-primary-active: var(--color-neutral-900);
+  
+  --color-text-button-secondary: light-dark(var(--color-neutral-800), var(--color-neutral-200));
+  --color-text-button-seconary-hover: light-dark(var(--color-neutral-900), var(--color-neutral-100));
+  --color-text-button-seconary-active: light-dark(var(--color-neutral-900), var(--color-neutral-100));
+  
+  --shadow-box: var(--shadow-light);
+  
+  --shadow-button: inset 0px 1px 2px rgba(0, 0, 0, 0.16), inset 0px -1px 4px rgba(0, 0, 0, 0.28), var(--shadow-box);
+  --shadow-button-active: inset 0px -1px 2px rgba(0, 0, 0, 0.16), inset 0px 1px 4px rgba(0, 0, 0, 0.28), var(--shadow-box);
  
  --border: #d8d8d8;
  --overlay: rgb(12 12 12 / 0.24);
@@ -173,20 +204,29 @@
  -webkit-font-smoothing: antialiased;
 }

+html,
+body {
+  margin: 0;
+  background: var(--color-background);
+  scroll-padding-top: 8rem; /* https://tetralogical.com/blog/2023/06/08/focus-in-view/ */
+}
+
 html {
  scroll-behavior: smooth;
 }

 body {
-  margin: 0;
-  background: var(--color-background);
-  color: var(--color-text);
+  color: var(--color-text-primary);
  font-family: "MD UI", Helvetica, sans;
  font-style: normal;
  font-weight: 400;
  font-size: 100%;
  line-height: var(--line-relaxed);
  letter-spacing: 0.025em;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh; 
+  min-height: 100dvh; /* better on modern mobile browsers */
 }

 h1,
@@ -195,9 +235,7 @@ h3,
 h4,
 h5,
 h6,
-p,
-li {
-  scroll-margin-top: 80px;
+p {
  width: clamp(min(100%, 40ch), 50ch, min(100%, 60ch));
 }

@@ -286,27 +324,27 @@ h1, h2, h3, h4, h5, h6 {
 }

 h1, .size-h1 {
-  font-size: var(--text-h1);
+  font-size: round(down, var(--text-h1), var(--round-interval));
 }

 h2, .size-h2 {
-  font-size: var(--text-h2);
+  font-size: round(down, var(--text-h2), var(--round-interval));
 }

 h3, .size-h3 {
-  font-size: var(--text-h3);
+  font-size: round(down, var(--text-h3), var(--round-interval));
 }

 h4, .size-h4 {
-  font-size: var(--text-h4);
+  font-size: round(down, var(--text-h4), var(--round-interval));
 }

 h5, .size-h5 {
-  font-size: var(--text-h5);
+  font-size: round(down, var(--text-h5), var(--round-interval));
 }

 h6, .size-h6 {
-  font-size: var(--text-h6);
+  font-size: round(down, var(--text-h6), var(--round-interval));
 }

 p, ul, ol, li {
@@ -314,7 +352,7 @@ p, ul, ol, li {
  font-style: normal;
  font-weight: 400;
  font-feature-settings: "ss01" 1, "ss02" 1;
-  font-size: var(--text-body);
+  font-size: round(down, var(--text-body), var(--round-interval));
  line-height: var(--line-relaxed);
  margin: var(--spacing-3) 0 var(--spacing-6) 0;
  text-align: left;
@@ -333,12 +371,17 @@ a:hover {
  text-decoration-thickness: 0.175rem;
 }

-a:visited {
+/* a:visited {
  color: var(--color-primary);
  text-decoration-thickness: 0.175rem;
-}
+} */

-button, .link-button {
+button, .button-primary, .button-secondary, .menu-button, .logo {
+  appearance: none;
+  -webkit-appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
  min-height: 44px;
  font-family: "MD IO", monospace;
  font-style: normal;
@@ -346,228 +389,233 @@ button, .link-button {
  line-height: var(--line-normal);
  letter-spacing: 0.025rem;
  padding: 0.875rem 1rem;
-  min-height: 44px;
-  background: var(--color-primary-button);
-  font-size: var(--text-button);
-  color: var(--color-text-button);
+  font-size: round(down, var(--text-button), var(--round-interval));
  border: none;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-xxl);
+  text-decoration: none;
+  transition: transform 0.2s ease;
+  cursor: pointer;
+}
+
+button, .button-primary, .logo {
+  background: var(--color-button-primary);
+  color: var(--color-text-button-primary);
  box-shadow: var(--shadow-button);
+}
+
+.button-secondary {
+  background: var(--color-button-secondary);
+  color: var(--color-text-button-secondary);
+  box-shadow: var(--shadow-button);
+}
+
+.logo, .button-secondary {
+  padding: 1rem;
+  aspect-ratio: 1/1;
+}
+
+.logo svg {
+  height: 2em;
+  width: 2em;
+  flex: none;
+  display: block;
+}
+
+.logo svg path {
+  fill: currentColor;
+}
+
+@media (hover: hover) {
+button:hover, .button-primary:hover, .button-secondary:hover, .logo:hover {
  text-decoration: none;
+  transform: scale(1.05);
 }

-button:hover, .link-button:hover {
-  background: var(--color-primary-button-hover);
-  color: var(--color-text-button);
+button:hover, .button-primary:hover, .logo:hover {
+  background: var(--color-button-primary-hover);
+  color: var(--color-text-button-primary);
 }

-button:active, .link-button:active {
-  background: var(--color-primary-button-active);
+.button-secondary:hover {
+  background: var(--color-button-secondary-hover);
+  color: var(--color-text-button-secondary-hover);
+}
+}
+
+button:active, .button-primary:active, .button-secondary:active, .logo:active {
  box-shadow: var(--shadow-button-active);
-  color: var(--color-text-button-active);
+  text-decoration: none;
+  transform: scale(1.00);
 }

-button:visited, .link-button:visited {
-  color: var(--color-text-button);
+button:active, .button-primary:active, .logo:active {
+  background: var(--color-button-primary-active);
+  color: var(--color-text-button-primary-active);
+}
+
+.button-secondary:active {
+  background: var(--color-button-secondary-active);
+  color: var(--color-text-button-secondary-active);
+}
+
+/* button:visited, .button-primary:visited, .logo:visited {
+  background: var(--color-button-primary);
+  color: var(--color-text-button-primary);
  text-decoration: none;
 }

-.link-button span {
+.button-secondary:visited {
+  background: var(--color-button-secondary);
+  color: var(--color-text-button-secondary);
+  text-decoration: none;
+} */
+
+.button-primary span {
  margin-right: 0.3em;
 }

-/* =======================
- Menu styles
- ======================= */
-
-.site-header {
-   display: flex;
-   align-items: center;
-   justify-content: space-between;
-   gap: 1rem;
-   padding: 1rem 1.25rem;
-   border-bottom: 1px solid var(--border);
-   position: sticky;
-   top: 0;
-   background: rgb(255 255 255 / 0.88);
-   backdrop-filter: blur(10px);
-   -webkit-backdrop-filter: blur(10px);
-   z-index: 100;
- }
- 
- .logo {
-   color: inherit;
-   text-decoration: none;
-   font-weight: 700;
- }
- 
- .desktop-nav ul,
- .mobile-menu ul {
-   list-style: none;
-   margin: 0;
-   padding: 0;
- }
- 
- .desktop-nav ul {
-   display: flex;
-   gap: 1.25rem;
- }
- 
- .desktop-nav a,
- .mobile-menu a {
-   color: inherit;
-   text-decoration: none;
- }
- 
- .menu-toggle,
- .menu-close {
-   width: 44px;
-   height: 44px;
-   border: 1px solid var(--border);
-   border-radius: 0.75rem;
-   background: #fff;
-   color: inherit;
-   cursor: pointer;
- }
- 
- .menu-toggle {
-   display: none;
-   position: relative;
- }
- 
- .menu-toggle span {
-   position: absolute;
-   left: 50%;
-   width: 20px;
-   height: 2px;
-   background: currentColor;
-   border-radius: 999px;
-   transform-origin: center;
-   transition: transform 0.25s ease, opacity 0.25s ease;
- }
- 
- .menu-toggle span:nth-child(1) {
-   top: 14px;
-   transform: translateX(-50%);
- }
- 
- .menu-toggle span:nth-child(2) {
-   top: 21px;
-   transform: translateX(-50%);
- }
- 
- .menu-toggle span:nth-child(3) {
-   top: 28px;
-   transform: translateX(-50%);
- }
- 
- .menu-toggle.is-open span:nth-child(1) {
-   top: 21px;
-   transform: translateX(-50%) rotate(45deg);
- }
- 
- .menu-toggle.is-open span:nth-child(2) {
-   opacity: 0;
- }
- 
- .menu-toggle.is-open span:nth-child(3) {
-   top: 21px;
-   transform: translateX(-50%) rotate(-45deg);
- }
- 
- .menu-overlay {
-   position: fixed;
-   inset: 0;
-   background: var(--overlay);
-   backdrop-filter: blur(10px);
-   -webkit-backdrop-filter: blur(10px);
-   opacity: 0;
-   pointer-events: none;
-   transition: opacity 0.25s ease;
-   z-index: 200;
- }
- 
- .mobile-menu {
-   position: fixed;
-   inset: auto 1rem 1rem 1rem;
-   width: auto;
-   max-width: 24rem;
-   margin-inline: auto;
-   background: var(--panel);
-   backdrop-filter: blur(16px);
-   -webkit-backdrop-filter: blur(16px);
-   border: 1px solid rgb(255 255 255 / 0.45);
-   border-radius: 1rem;
-   box-shadow: 0 20px 50px rgb(0 0 0 / 0.16);
-   padding: 1rem;
-   opacity: 0;
-   transform: translateY(1rem) scale(0.98);
-   pointer-events: none;
-   transition: opacity 0.25s ease, transform 0.25s ease;
-   z-index: 300;
- }
- 
- .mobile-menu__header {
-   display: flex;
-   align-items: center;
-   justify-content: space-between;
-   margin-bottom: 1rem;
- }
- 
- .mobile-menu ul {
-   display: grid;
-   gap: 0.5rem;
- }
- 
- .mobile-menu a {
-   display: block;
-   padding: 0.95rem 1rem;
-   border-radius: 0.75rem;
-   background: rgb(255 255 255 / 0.56);
- }
- 
- .page-content {
-   padding: 3rem 1.25rem;
- }
- 
- .menu-open .menu-overlay {
-   opacity: 1;
-   pointer-events: auto;
- }
- 
- .menu-open .mobile-menu {
-   opacity: 1;
-   transform: translateY(0) scale(1);
-   pointer-events: auto;
- }
- 
- @media (max-width: 767px) {
-   .desktop-nav {
-     display: none;
-   }
- 
-   .menu-toggle {
-     display: inline-block;
-   }
- }
- 
- @media (min-width: 768px) {
-   .menu-overlay,
-   .mobile-menu {
-     display: none;
-   }
- }
-
 /* =======================
 Layout styles
 ======================= */

-main {
+/* Site header */
+
+.site-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: sticky;
+  top: 0;
+  padding-top: max(1px, env(safe-area-inset-top));
+  z-index: 100;
+  background-image: linear-gradient(
+    180deg,
+    light-dark(var(--gradient-stop-1-light), var(--gradient-stop-1-dark)) 0%,
+    6%,
+    light-dark(var(--gradient-stop-2-light), var(--gradient-stop-2-dark)) 12%,
+    44%,
+    light-dark(var(--gradient-stop-3-light), var(--gradient-stop-3-dark)) 60%,
+    76%,
+    light-dark(var(--gradient-stop-4-light), var(--gradient-stop-4-dark)) 100%
+  );
+  /* background: rgb(255 255 255 / 0.88); */
+  /* backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px); */
+}
+
+.menu-bar {
+  width: 900px;
+  padding: var(--spacing-5) var(--spacing-6) var(--spacing-4) var(--spacing-6);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-4);
+}
+
+.menu-left, .menu-right {
+  display: flex;
+  align-items: stretch;
+  gap: var(--spacing-4);
+}
+
+.desktop-nav {
+  flex: 1 1 auto;
+  display: flex;
+  align-self: stretch;
+  background: var(--color-button-secondary);
+  border-radius: var(--radius-xxl);
+  box-shadow: var(--shadow-button);
+}
+
+.desktop-nav ul {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  margin: 0;
+  padding: var(--spacing-2);
+  list-style: none;
+  gap: var(--spacing-2);
+}
+
+.desktop-nav li {
+  flex: 1 1 0;
+  display: flex;
+  align-items: stretch;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.desktop-nav .menu-button {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  white-space: nowrap;
+}
+
+.menu-button {
+  background: none;
+  color: var(--color-text-button-secondary);
+  transition: transform 0.2s ease;
+}
+
+.menu-button:hover, 
+.desktop-nav a[aria-current="page"]:hover,
+.mobile-menu a[aria-current="page"]:hover {
+  background: var(--color-button-secondary-hover);
+  color: var(--color-text-button-seconary-hover);
+  text-decoration: none;
+  transform: scale(1.03);
+}
+
+.menu-button:active, 
+.desktop-nav a[aria-current="page"]:active,
+.mobile-menu a[aria-current="page"]:active,
+.desktop-nav a[aria-current="page"],
+.mobile-menu a[aria-current="page"] {
+  background: light-dark(var(--color-neutral-400), var(--color-neutral-800));
+  color: var(--color-text-button-seconary-active);
+}
+
+.menu-button:active, 
+.desktop-nav a[aria-current="page"]:active,
+.mobile-menu a[aria-current="page"]:active {
+  text-decoration: none;
+}
+
+.desktop-nav-secondary ul {
+  display: flex;
+  align-items: stretch;
+  gap: var(--spacing-4);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.desktop-nav-secondary li {
+  display: flex;
+  margin: 0;
+  padding: 0;
+}
+
+.desktop-nav-secondary svg {
+  color: currentcolor;
+  height: 1em;
+  width: 1em;
+  flex: none;
+  display: block;
+}
+
+/* Maint content */
+
+main, footer {
  max-width: 900px;
  border: none;
  margin-left:auto;
  margin-right:auto;
-  padding: var(--spacing-4) var(--spacing-6);
+  padding: 0 var(--spacing-6) var(--spacing-4) var(--spacing-6);
  display: flex;
  flex-direction: column;
  align-items: center;
@@ -575,8 +623,36 @@ main {
  justify-items: stretch;
  justify-content: space-between;
  row-gap: var(--spacing-4);
-  min-height: 100vh; 
-  min-height: 100dvh; /* better on modern mobile browsers */
+}
+
+main {
+  flex: 1;
+}
+
+footer {
+  margin-top: var(--spacing-3);
+  padding-top: var(--spacing-4);
+  padding-bottom: var(--spacing-7);
+  padding-left: var(--spacing-5);
+  padding-right: var(--spacing-5);
+  font-family: "MD IO", monospace;
+  font-style: normal;
+  font-weight: 400;
+  font-size: round(down, var(--text-small), var(--round-interval));
+  line-height: var(--line-relaxed);
+  color: var(--color-text-secondary);
+}
+
+footer a {
+  color: var(--color-secondary);
+}
+
+footer a:hover {
+  color: var(--color-secondary-hover);
+}
+
+footer a:visited {
+  color: var(--color-secondary);
 }

 .align-left {
@@ -679,43 +755,7 @@ main {
  color: var(--color-neutral-900);
 }

-footer {
-  margin-top: var(--spacing-3);
-  padding: var(--spacing-4) var(--spacing-5);
-  /* background: var(--color-neutral-800);
-  border: color-mix(in srgb, var(--color-neutral-600) 25%, transparent) solid;
-  border-width: var(--border-width-sm);
-  border-radius: var(--radius-md); */
-  box-sizing: border-box;
-  /* box-shadow: 0px 2px 12px 0px #00000080, 0px 1px 4px 0px #00000066; */
-  font-family: "MD IO", monospace;
-  font-style: normal;
-  font-weight: 400;
-  font-size: var(--text-small);
-  line-height: var(--line-relaxed);
-  color: var(--color-text-secondary);
-  z-index: 20;
-}
-
-footer a {
-	color: var(--color-secondary);
-}
-
-footer a:hover {
-	color: var(--color-secondary-hover);
-}
-
-footer a:visited {
-	color: var(--color-secondary);
-}
-
-/* .footer-fixed {
-	position: fixed;
-	left: auto;
-	right: auto;
-	bottom: 32px;
-	z-index: 20;
-} */
+/* Footer */

 .footer-content {
  display: flex;
@@ -729,40 +769,28 @@ footer a:visited {
  column-gap: var(--spacing-4);
 }

-/* .footer-fade {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 320px;
-  background: linear-gradient(
-    to bottom,
-    hsla(0, 0%, 6%, 0) 0%,
-    hsla(0, 0%, 6%, 0.1) 13.6%,
-    hsla(0, 0%, 6%, 0.199) 24.8%,
-    hsla(0, 0%, 6%, 0.296) 33.8%,
-    hsla(0, 0%, 6%, 0.391) 41%,
-    hsla(0, 0%, 6%, 0.481) 46.8%,
-    hsla(0, 0%, 6%, 0.568) 51.5%,
-    hsla(0, 0%, 6%, 0.649) 55.4%,
-    hsla(0, 0%, 6%, 0.724) 58.8%,
-    hsla(0, 0%, 6%, 0.792) 62.2%,
-    hsla(0, 0%, 6%, 0.852) 65.9%,
-    hsla(0, 0%, 6%, 0.903) 70.1%,
-    hsla(0, 0%, 6%, 0.944) 75.3%,
-    hsla(0, 0%, 6%, 0.975) 81.8%,
-    hsla(0, 0%, 6%, 0.993) 89.9%,
-    hsl(0, 0%, 6%) 100%
-  );
-  pointer-events: none;
-  z-index: 10;
-} */
-
-
 /* =======================
   Helper classes
   ======================= */

+/*
+ * Adding skipLink styling for screen readers
+ */   
+
+#skipLink a {
+  display: block;
+  position: absolute;
+  left: -999px;
+  top: -999px;
+}
+  
+#skipLink a:focus {
+  left: 0;
+  top: 0;
+  padding: var(--spacing-2);
+  background: var(--color-background-content-box);
+}
+
 /*
 * Hide visually and from screen readers
 */
@@ -840,9 +868,19 @@ footer a:visited {
   Media Queries for Responsive Design.
   ======================= */
   
+@media (prefers-color-scheme: dark) {
+  :root {
+    --shadow-box: var(--shadow-dark);
+  }
+}
+
@media screen and (max-width:768px) {
+  .menu-bar {
+    padding: var(--spacing-5) var(--spacing-5) var(--spacing-4) var(--spacing-5);
+  }
+  
  main {
-    padding: var(--spacing-4) var(--spacing-5);
+    padding: 0 var(--spacing-5) var(--spacing-4) var(--spacing-5);
  }
  .footer-content {
    flex-direction: column;
@@ -854,13 +892,9 @@ footer a:visited {
 }

@media screen and (max-width:440px) {
-  /* .footer-fixed {
-    position: unset;
-    left: unset;
-    right: unset;
-    bottom: unset;
-    z-index: unset;
-  } */
+  .menu-bar {
+    padding: var(--spacing-4) var(--spacing-5) var(--spacing-4) var(--spacing-5);
+  }
  .footer-links {
    flex-direction: column;
    row-gap: var(--spacing-4);
@@ -872,8 +906,20 @@ footer a:visited {

@media screen and (max-width:375px) {
  main {
+    padding: 0 var(--spacing-4) var(--spacing-4) var(--spacing-4);
+  }
+  .menu-bar {
  padding: var(--spacing-4);
  }
+  .menu-left, .menu-right {
+    gap: var(--spacing-3);
+  }
+  .desktop-nav-secondary ul {
+    gap: var(--spacing-3);
+  }
+  .menu-bar {
+    gap: var(--spacing-3);
+  }
 }

@media print,
@@ -3,9 +3,10 @@
  
 <head>
  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <title>Lars Winter</title>
  <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="css/a11y.css" id="a11y-css" disabled>
  <meta name="description" content="Creator of visual identities and digital interfaces">

  <meta property="og:title" content="Lars Winter">
@@ -20,84 +21,64 @@
  <link rel="apple-touch-icon" href="img/lw.png">
  
  <meta name="theme-color" content="#F7F7F7" media="(prefers-color-scheme: light)">
-  <meta name="theme-color" content="0f0f0f" media="(prefers-color-scheme: dark)">
+  <meta name="theme-color" content="#0f0f0f" media="(prefers-color-scheme: dark)">
+  
+  <script src="js/app.js" defer></script>
+  
 </head>

 <body>
  
-  <header class="site-header">
-    <a class="logo" href="/">Logo</a>
-  
-    <nav class="desktop-nav" aria-label="Primary navigation">
-      <ul>
-        <li><a href="#">Home</a></li>
-        <li><a href="#">Work</a></li>
-        <li><a href="#">About</a></li>
-        <li><a href="#">Contact</a></li>
-      </ul>
-    </nav>
-  
-    <button
-      class="menu-toggle"
-      id="menuToggle"
-      type="button"
-      aria-expanded="false"
-      aria-controls="mobileMenu"
-      aria-haspopup="true"
-      aria-label="Open menu"
-    >
-      <span></span>
-      <span></span>
-      <span></span>
-    </button>
-  </header>
-  
-  <div class="menu-overlay" id="menuOverlay" hidden></div>
-  
-  <aside
-    class="mobile-menu"
-    id="mobileMenu"
-    aria-label="Mobile navigation"
-    aria-hidden="true"
-  >
-    <div class="mobile-menu__header">
-      <strong>Menu</strong>
-      <button class="menu-close" id="menuClose" type="button" aria-label="Close menu">
-        ✕
-      </button>
+  <div id="skipLink">
+    <a href="#siteContent">Skip to content</a>
  </div>
  
-    <nav aria-label="Mobile navigation">
+  <header class="site-header">
+    <div class="menu-bar">
+      <div class="menu-left">
+        <a class="logo" href="/">
+          <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" aria-hidden="true" focusable="false" viewBox="0 0 1080 1080"><path d="M1000.022 50H499.59c-20.565 0-34.827 20.502-27.676 39.783l146.561 395.171c8.419 22.699 40.635 22.382 48.605-.478l61.821-177.315c6.903-19.8 34.906-19.8 41.809 0l61.821 177.315c7.97 22.861 40.187 23.178 48.605.478l146.561-395.171c7.151-19.281-7.112-39.783-27.676-39.783Z"/><path d="M360 538V106c0-30.928-25.072-56-56-56H106c-30.928 0-56 25.072-56 56v868c0 30.928 25.072 56 56 56h868c30.928 0 56-25.072 56-56V650c0-30.928-25.072-56-56-56H416c-30.928 0-56-25.072-56-56"/></svg>
+          <span class="visually-hidden">Home page</span>
+        </a>
+      </div>
+      
+      <div class="menu-right">
+      <nav class="desktop-nav-secondary" aria-label="Secondary navigation">
        <ul>
-        <li><a href="#">Home</a></li>
-        <li><a href="#">Work</a></li>
-        <li><a href="#">About</a></li>
-        <li><a href="#">Contact</a></li>
+          <li><button type="button" id="a11y-toggle" aria-pressed="false" class="button-secondary">
+            <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+              <path fill="currentColor" d="M21 10h-6v12h-2v-6h-2v6H9V10H3V8h18zm-9-8a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5"/>
+            </svg><span class="visually-hidden">Make the website more visually accessible</span></button></li>
+          <li><button type="button" id="theme-toggle" class="button-secondary"><svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+              <path fill="currentColor" fill-rule="evenodd" d="M5.302 4.574a9.96 9.96 0 0 1 6.697-2.57L12 2l.134.002a10.1 10.1 0 0 1 3.015.507l.223.076q.12.043.24.091.102.038.203.08.117.047.232.1.107.045.213.095.105.05.21.104.116.056.23.117l.153.084q.135.074.27.154.105.064.21.132.091.056.183.115.131.088.261.182l.154.109.21.162q.092.071.185.146l.123.105q.32.268.622.568l.355.373q.51.565.917 1.182l.06.095q.104.16.202.323l.082.145q.076.134.15.27l.085.166q.067.13.13.264.042.09.081.182.063.138.122.279l.049.127q.063.16.12.32.027.075.05.15.051.145.096.292l.058.206a10 10 0 0 1 .173.716l.037.201.044.254a10 10 0 0 1 .081.695 10.3 10.3 0 0 1-.084 2.374 10 10 0 0 1-.13.678 10 10 0 0 1-.184.694 10 10 0 0 1-.148.448q-.046.13-.098.26l-.075.192-.1.233q-.046.106-.095.213l-.104.21-.117.229-.095.171q-.07.127-.143.252-.065.106-.132.21-.058.096-.12.19-.087.128-.178.255l-.108.154q-.08.105-.163.209-.071.094-.145.186l-.105.123a10 10 0 0 1-.94.976q-.375.337-.773.63l-.098.07q-.147.105-.295.205l-.148.095q-.128.083-.258.162l-.163.093q-.127.075-.257.143-.087.046-.175.09-.12.062-.242.12-.102.048-.205.094-.117.052-.236.102l-.175.072a10 10 0 0 1-1.147.372q-.108.03-.218.056a10 10 0 0 1-.293.064l-.146.03a10 10 0 0 1-.294.05l-.187.029q-.135.018-.27.032l-.189.022q-.157.013-.316.022l-.15.01a9.97 9.97 0 0 1-7.162-2.563l-.373-.355c-3.905-3.905-3.905-10.237 0-14.142zm1.041 1.77A8 8 0 0 0 12 20V4a7.98 7.98 0 0 0-5.657 2.343"/>
+            </svg><span class="visually-hidden">Change light/dark mode</span></button></li>
        </ul>
      </nav>
-  </aside>
+      </div>
+    </div>
+  </header>
  
  <main id="siteContent" class="page-content">
    
    <!--  target="_blank" rel="noopener noreferrer"  -->
    
-    <section class="content-box content-intro">
+    <header class="content-box content-intro">
      <h1 class="headline size-h2">
-        Hey, I am Lars Winter, a graphic designer from Hamburg. I conceptualize and design projects with a focus on corporate design, design systems, icon design, web design, and editorial design.
+        Hey, I am Lars Winter, a graphic designer from Hamburg. I conceptualize and design projects focused on UX/UI design, design systems, icon design, corporate design, and editorial design.
      </h1>
-    </section>
+    </header>
    
-    <div class="content-box content-text">
+    <section class="content-box content-text">
      <p class="text">
        As usual, my portfolio is a work in progress and currently only available on request. Please feel free to contact me <a href="mailto:contact@larswinter.me">via email</a> for work collaborations and other requests. You can also find me on one of those fancy social networks, like <a rel="me" href="https://mastodon.social/@larswinter">Mastodon</a>, <a href="https://www.linkedin.com/in/larswinter">LinkedIn</a> (if really necessary), <del>Instagram</del>, and <del>Twitter</del>.
      </p>
-    </div>
+    </section>
    
    <div class="content-box placeholder">
      
    </div>
    
-    <!-- <div class="footer-fade"></div> -->
+  </main>
    
  <footer>
    <div class="footer-content">
@@ -119,9 +100,9 @@
    </div>
  </footer>
    
-  </main>
+  
  <!-- Add your site or application content here -->
-  <script src="js/app.js"></script>
+  <!-- <script src="js/app.js" defer></script> -->

 </body>

@@ -1,57 +1,98 @@
-  const body = document.body;
-  const menuToggle = document.getElementById('menuToggle');
-  const menuClose = document.getElementById('menuClose');
-  const menuOverlay = document.getElementById('menuOverlay');
-  const mobileMenu = document.getElementById('mobileMenu');
-  const siteContent = document.getElementById('siteContent');
+// accessibility toggle

-  function openMenu() {
-	body.classList.add('menu-open');
-	menuOverlay.hidden = false;
-	menuToggle.classList.add('is-open');
-	menuToggle.setAttribute('aria-expanded', 'true');
-	menuToggle.setAttribute('aria-label', 'Close menu');
-	mobileMenu.setAttribute('aria-hidden', 'false');
-	siteContent.setAttribute('inert', '');
-	menuClose.focus();
+{  
+  const STORAGE_KEY = 'extra-css-enabled';
+  
+  function applyOverrideState(enabled) {
+	const link = document.getElementById('a11y-css');
+	const button = document.getElementById('a11y-toggle');
+	if (!link) return;
+  
+	link.disabled = !enabled;
+	button?.setAttribute('aria-pressed', String(enabled));
  }
  
-  function closeMenu() {
-	body.classList.remove('menu-open');
-	menuToggle.classList.remove('is-open');
-	menuToggle.setAttribute('aria-expanded', 'false');
-	menuToggle.setAttribute('aria-label', 'Open menu');
-	mobileMenu.setAttribute('aria-hidden', 'true');
-	siteContent.removeAttribute('inert');
-	menuToggle.focus();
+  const enabled = localStorage.getItem(STORAGE_KEY) === 'true';
+  applyOverrideState(enabled);
  
-	window.setTimeout(() => {
-	  if (!body.classList.contains('menu-open')) {
-		menuOverlay.hidden = true;
-	  }
-	}, 250);
+  document.getElementById('a11y-toggle')?.addEventListener('click', () => {
+	const nextState = localStorage.getItem(STORAGE_KEY) !== 'true';
+	localStorage.setItem(STORAGE_KEY, String(nextState));
+	applyOverrideState(nextState);
+  });
+}
+  
+  
+// light-dark toggle
+  
+{
+  const STORAGE_KEY = 'theme-preference';
+  const root = document.documentElement;
+  const mq = window.matchMedia('(prefers-color-scheme: dark)');
+  
+  function getSystemTheme() {
+	return mq.matches ? 'dark' : 'light';
  }
  
-  function toggleMenu() {
-	if (body.classList.contains('menu-open')) {
-	  closeMenu();
+  function getSavedTheme() {
+	try {
+	  return localStorage.getItem(STORAGE_KEY) || 'system';
+	} catch {
+	  return 'system';
+	}
+  }
+  
+  function setSavedTheme(value) {
+	try {
+	  localStorage.setItem(STORAGE_KEY, value);
+	} catch {}
+  }
+  
+  function applyTheme(theme = getSavedTheme()) {
+	root.style.colorScheme = theme === 'system' ? 'light dark' : theme;
+  }
+  
+  function getNextTheme() {
+	return getSavedTheme() === 'system'
+	  ? (getSystemTheme() === 'dark' ? 'light' : 'dark')
+	  : 'system';
+  }
+  
+  function updateButton() {
+	const btn = document.getElementById('theme-toggle');
+	if (!btn) return;
+  
+	const theme = getSavedTheme();
+	// btn.textContent =
+	//   theme === 'system'
+	// 	? `Use ${getSystemTheme() === 'dark' ? 'light' : 'dark'} theme`
+	// 	: 'Use browser/OS theme';
+  }
+  
+  function toggleTheme() {
+	setSavedTheme(getNextTheme());
+	applyTheme();
+	updateButton();
+  }
+  
+  function initThemeToggle() {
+	applyTheme();
+	updateButton();
+  
+	const btn = document.getElementById('theme-toggle');
+	if (btn) btn.addEventListener('click', toggleTheme);
+  
+	mq.addEventListener('change', () => {
+	  if (getSavedTheme() === 'system') {
+		applyTheme('system');
+		updateButton();
+	  }
+	});
+  }
+  
+  if (document.readyState === 'loading') {
+	document.addEventListener('DOMContentLoaded', initThemeToggle);
  } else {
-	  openMenu();
+	initThemeToggle();
  }
-  }
-
-  menuToggle.addEventListener('click', toggleMenu);
-  menuClose.addEventListener('click', closeMenu);
-  menuOverlay.addEventListener('click', closeMenu);
-
-  document.addEventListener('keydown', (event) => {
-	if (event.key === 'Escape' && body.classList.contains('menu-open')) {
-	  closeMenu();
-	}
-  });
-
-  window.addEventListener('resize', () => {
-	if (window.innerWidth >= 768 && body.classList.contains('menu-open')) {
-	  closeMenu();
-	}
-  });
+}
@@ -3,9 +3,10 @@

 <head>
  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Lars Winter</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <title>Legal notice – Lars Winter</title>
  <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="css/a11y.css" id="a11y-css" disabled>
  <meta name="description" content="Creator of visual identities and digital interfaces">

  <meta property="og:title" content="Lars Winter">
@@ -20,17 +21,50 @@
  <link rel="apple-touch-icon" href="img/lw.png">
  
  <meta name="theme-color" content="#F7F7F7" media="(prefers-color-scheme: light)">
-  <meta name="theme-color" content="0f0f0f" media="(prefers-color-scheme: dark)">
+  <meta name="theme-color" content="#0f0f0f" media="(prefers-color-scheme: dark)">
+  
+  <script src="js/app.js" defer></script>
+  
 </head>

 <body>
+	
+	<div id="skipLink">
+		<a href="#siteContent">Skip to content</a>
+	</div>
+
+	<header class="site-header">
+		<div class="menu-bar">
+		  <div class="menu-left">
+			<a class="logo" href="/">
+			  <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" aria-hidden="true" focusable="false" viewBox="0 0 1080 1080"><path d="M1000.022 50H499.59c-20.565 0-34.827 20.502-27.676 39.783l146.561 395.171c8.419 22.699 40.635 22.382 48.605-.478l61.821-177.315c6.903-19.8 34.906-19.8 41.809 0l61.821 177.315c7.97 22.861 40.187 23.178 48.605.478l146.561-395.171c7.151-19.281-7.112-39.783-27.676-39.783Z"/><path d="M360 538V106c0-30.928-25.072-56-56-56H106c-30.928 0-56 25.072-56 56v868c0 30.928 25.072 56 56 56h868c30.928 0 56-25.072 56-56V650c0-30.928-25.072-56-56-56H416c-30.928 0-56-25.072-56-56"/></svg>
+			  <span class="visually-hidden">Home page</span>
+			</a>
+		  
+		  </div>
+		  
+		  <div class="menu-right">
+		  <nav class="desktop-nav-secondary" aria-label="Secondary navigation">
+			<ul>
+			  <li><button type="button" id="a11y-toggle" aria-pressed="false" class="button-secondary">
+				<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+				  <path fill="currentColor" d="M21 10h-6v12h-2v-6h-2v6H9V10H3V8h18zm-9-8a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5"/>
+				</svg><span class="visually-hidden">Make the website more visually accessible</span></button></li>
+			  <li><button type="button" id="theme-toggle" class="button-secondary"><svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+				  <path fill="currentColor" fill-rule="evenodd" d="M5.302 4.574a9.96 9.96 0 0 1 6.697-2.57L12 2l.134.002a10.1 10.1 0 0 1 3.015.507l.223.076q.12.043.24.091.102.038.203.08.117.047.232.1.107.045.213.095.105.05.21.104.116.056.23.117l.153.084q.135.074.27.154.105.064.21.132.091.056.183.115.131.088.261.182l.154.109.21.162q.092.071.185.146l.123.105q.32.268.622.568l.355.373q.51.565.917 1.182l.06.095q.104.16.202.323l.082.145q.076.134.15.27l.085.166q.067.13.13.264.042.09.081.182.063.138.122.279l.049.127q.063.16.12.32.027.075.05.15.051.145.096.292l.058.206a10 10 0 0 1 .173.716l.037.201.044.254a10 10 0 0 1 .081.695 10.3 10.3 0 0 1-.084 2.374 10 10 0 0 1-.13.678 10 10 0 0 1-.184.694 10 10 0 0 1-.148.448q-.046.13-.098.26l-.075.192-.1.233q-.046.106-.095.213l-.104.21-.117.229-.095.171q-.07.127-.143.252-.065.106-.132.21-.058.096-.12.19-.087.128-.178.255l-.108.154q-.08.105-.163.209-.071.094-.145.186l-.105.123a10 10 0 0 1-.94.976q-.375.337-.773.63l-.098.07q-.147.105-.295.205l-.148.095q-.128.083-.258.162l-.163.093q-.127.075-.257.143-.087.046-.175.09-.12.062-.242.12-.102.048-.205.094-.117.052-.236.102l-.175.072a10 10 0 0 1-1.147.372q-.108.03-.218.056a10 10 0 0 1-.293.064l-.146.03a10 10 0 0 1-.294.05l-.187.029q-.135.018-.27.032l-.189.022q-.157.013-.316.022l-.15.01a9.97 9.97 0 0 1-7.162-2.563l-.373-.355c-3.905-3.905-3.905-10.237 0-14.142zm1.041 1.77A8 8 0 0 0 12 20V4a7.98 7.98 0 0 0-5.657 2.343"/>
+				</svg><span class="visually-hidden">Change light/dark mode</span></button></li>
+			</ul>
+		  </nav>
+	  
+		  </div>
+		</div>
+	  </header>
+	  
    <main>
 	
-	<div class="align-left">
+	<section class="align-left">
 		
-		<a class="link-button" href="/"><span>←</span>Home</a>
-		
-		<div class="spacer-xl" aria-hidden="true"></div>
+		<!-- <div class="spacer-xl" aria-hidden="true"></div> -->
 		
 		<p>
 			<a href="#en-text">English</a>&#x2006;<a href="#de-text">Deutsch</a>
@@ -85,7 +119,9 @@
 		<p>Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.</p>
 		
 		<p>Quelle: <a href="https://www.e-recht24.de">https://www.e-recht24.de</a></p>
-	</div>
+	</section>
+	
+  </main>
 	
 	<footer>
 	  <div class="footer-content">
@@ -107,9 +143,8 @@
 	  </div>
 	</footer>
    
-  </main>
  <!-- Add your site or application content here -->
-  <script src="js/app.js"></script>
+  <!-- <script src="js/app.js" defer></script> -->

 </body>

@@ -3,9 +3,10 @@

 <head>
  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Lars Winter</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <title>Privacy – Lars Winter</title>
  <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="css/a11y.css" id="a11y-css" disabled>
  <meta name="description" content="Creator of visual identities and digital interfaces">

  <meta property="og:title" content="Lars Winter">
@@ -20,17 +21,50 @@
  <link rel="apple-touch-icon" href="img/lw.png">

  <meta name="theme-color" content="#F7F7F7" media="(prefers-color-scheme: light)">
-  <meta name="theme-color" content="0f0f0f" media="(prefers-color-scheme: dark)">
+  <meta name="theme-color" content="#0f0f0f" media="(prefers-color-scheme: dark)">
+  
+  <script src="js/app.js" defer></script>
+  
 </head>

 <body>
+	
+	<div id="skipLink">
+		<a href="#siteContent">Skip to content</a>
+    </div>
+	
+	<header class="site-header">
+		<div class="menu-bar">
+		  <div class="menu-left">
+			<a class="logo" href="/">
+			  <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" aria-hidden="true" focusable="false" viewBox="0 0 1080 1080"><path d="M1000.022 50H499.59c-20.565 0-34.827 20.502-27.676 39.783l146.561 395.171c8.419 22.699 40.635 22.382 48.605-.478l61.821-177.315c6.903-19.8 34.906-19.8 41.809 0l61.821 177.315c7.97 22.861 40.187 23.178 48.605.478l146.561-395.171c7.151-19.281-7.112-39.783-27.676-39.783Z"/><path d="M360 538V106c0-30.928-25.072-56-56-56H106c-30.928 0-56 25.072-56 56v868c0 30.928 25.072 56 56 56h868c30.928 0 56-25.072 56-56V650c0-30.928-25.072-56-56-56H416c-30.928 0-56-25.072-56-56"/></svg>
+			  <span class="visually-hidden">Home page</span>
+			</a>
+		  
+		  </div>
+		  
+		  <div class="menu-right">
+		  <nav class="desktop-nav-secondary" aria-label="Secondary navigation">
+			<ul>
+			  <li><button type="button" id="a11y-toggle" aria-pressed="false" class="button-secondary">
+				<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+				  <path fill="currentColor" d="M21 10h-6v12h-2v-6h-2v6H9V10H3V8h18zm-9-8a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5"/>
+				</svg><span class="visually-hidden">Make the website more visually accessible</span></button></li>
+			  <li><button type="button" id="theme-toggle" class="button-secondary"><svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+				  <path fill="currentColor" fill-rule="evenodd" d="M5.302 4.574a9.96 9.96 0 0 1 6.697-2.57L12 2l.134.002a10.1 10.1 0 0 1 3.015.507l.223.076q.12.043.24.091.102.038.203.08.117.047.232.1.107.045.213.095.105.05.21.104.116.056.23.117l.153.084q.135.074.27.154.105.064.21.132.091.056.183.115.131.088.261.182l.154.109.21.162q.092.071.185.146l.123.105q.32.268.622.568l.355.373q.51.565.917 1.182l.06.095q.104.16.202.323l.082.145q.076.134.15.27l.085.166q.067.13.13.264.042.09.081.182.063.138.122.279l.049.127q.063.16.12.32.027.075.05.15.051.145.096.292l.058.206a10 10 0 0 1 .173.716l.037.201.044.254a10 10 0 0 1 .081.695 10.3 10.3 0 0 1-.084 2.374 10 10 0 0 1-.13.678 10 10 0 0 1-.184.694 10 10 0 0 1-.148.448q-.046.13-.098.26l-.075.192-.1.233q-.046.106-.095.213l-.104.21-.117.229-.095.171q-.07.127-.143.252-.065.106-.132.21-.058.096-.12.19-.087.128-.178.255l-.108.154q-.08.105-.163.209-.071.094-.145.186l-.105.123a10 10 0 0 1-.94.976q-.375.337-.773.63l-.098.07q-.147.105-.295.205l-.148.095q-.128.083-.258.162l-.163.093q-.127.075-.257.143-.087.046-.175.09-.12.062-.242.12-.102.048-.205.094-.117.052-.236.102l-.175.072a10 10 0 0 1-1.147.372q-.108.03-.218.056a10 10 0 0 1-.293.064l-.146.03a10 10 0 0 1-.294.05l-.187.029q-.135.018-.27.032l-.189.022q-.157.013-.316.022l-.15.01a9.97 9.97 0 0 1-7.162-2.563l-.373-.355c-3.905-3.905-3.905-10.237 0-14.142zm1.041 1.77A8 8 0 0 0 12 20V4a7.98 7.98 0 0 0-5.657 2.343"/>
+				</svg><span class="visually-hidden">Change light/dark mode</span></button></li>
+			</ul>
+		  </nav>
+	  
+		  </div>
+		</div>
+	  </header>
+
  <main>
    
-	<div class="align-left">
+	<section class="align-left">
 		
-		<a class="link-button" href="/"><span>←</span>Home</a>
-		
-		<div class="spacer-xl" aria-hidden="true"></div>
+		<!-- <div class="spacer-xl" aria-hidden="true"></div> -->
 		
 		<p>
 			<a href="#en-text">English</a>&#x2006;<a href="#de-text">Deutsch</a>
@@ -118,7 +152,9 @@
 		<h3>Anfrage per E-Mail, Telefon oder Telefax</h3> <p>Wenn Sie uns per E-Mail, Telefon oder Telefax kontaktieren, wird Ihre Anfrage inklusive aller daraus hervorgehenden personenbezogenen Daten (Name, Anfrage) zum Zwecke der Bearbeitung Ihres Anliegens bei uns gespeichert und verarbeitet. Diese Daten geben wir nicht ohne Ihre Einwilligung weiter.</p> <p>Die Verarbeitung dieser Daten erfolgt auf Grundlage von Art. 6 Abs. 1 lit. b DSGVO, sofern Ihre Anfrage mit der Erf&uuml;llung eines Vertrags zusammenh&auml;ngt oder zur Durchf&uuml;hrung vorvertraglicher Ma&szlig;nahmen erforderlich ist. In allen &uuml;brigen F&auml;llen beruht die Verarbeitung auf unserem berechtigten Interesse an der effektiven Bearbeitung der an uns gerichteten Anfragen (Art. 6 Abs. 1 lit. f DSGVO) oder auf Ihrer Einwilligung (Art. 6 Abs. 1 lit. a DSGVO) sofern diese abgefragt wurde; die Einwilligung ist jederzeit widerrufbar.</p> <p>Die von Ihnen an uns per Kontaktanfragen &uuml;bersandten Daten verbleiben bei uns, bis Sie uns zur L&ouml;schung auffordern, Ihre Einwilligung zur Speicherung widerrufen oder der Zweck f&uuml;r die Datenspeicherung entf&auml;llt (z.&nbsp;B. nach abgeschlossener Bearbeitung Ihres Anliegens). Zwingende gesetzliche Bestimmungen &ndash; insbesondere gesetzliche Aufbewahrungsfristen &ndash; bleiben unber&uuml;hrt.</p>
 		<p>Quelle: <a href="https://www.e-recht24.de">https://www.e-recht24.de</a></p>
 		
-	</div>
+	</section>
+	
+  </main>
 	
 	<footer>
 	<div class="footer-content">
@@ -140,9 +176,9 @@
 	</div>
 	</footer>
    
-  </main>
+  
  <!-- Add your site or application content here -->
-  <script src="js/app.js"></script>
+  <!-- <script src="js/app.js" defer></script> -->

 </body>
Author	SHA1	Message	Date
sefaria	9267fece60	release v1.0.1	2026-06-21 23:39:42 +02:00
sefaria	b9c5316dd4	remove test comment	2026-06-21 19:42:38 +02:00
sefaria	2af76dc992	test commit	2026-06-21 19:41:37 +02:00
sefaria	1c7f7d9642	remove old comments	2026-06-21 12:44:42 +02:00
sefaria	a6c7b063ca	fix button:active scale	2026-06-15 22:58:43 +02:00
sefaria	85edb8ae02	add commented out menu bar blur code	2026-06-15 22:50:54 +02:00
sefaria	25ec79a4ae	add better scroll-margin-top	2026-06-15 22:41:53 +02:00
sefaria	dc93f8c6cc	reset scal for pressed button	2026-06-15 22:38:29 +02:00
sefaria	7f7357a835	fix hover states for ios safari with media query	2026-06-15 22:27:58 +02:00
sefaria	9e1233ce7a	comment out a:visited style	2026-06-12 12:50:56 +02:00
sefaria	d663e33c87	change visited style for all buttons	2026-06-12 12:46:52 +02:00
sefaria	4811d687a0	More scroll margin for new menu bar	2026-06-12 12:31:33 +02:00
sefaria	ac65e19f57	Merge branch 'feature-partly-done' # Conflicts: # css/style.css	2026-05-30 18:03:37 +02:00
sefaria	6e58ef2df5	delete menu items from subpages	2026-05-30 17:57:28 +02:00
sefaria	bc7972b997	delete temporary about page	2026-05-30 17:55:03 +02:00
sefaria	13def608ed	remove mobile menu js	2026-05-30 17:51:38 +02:00
sefaria	43b3defae6	remove mobile menu css	2026-05-30 17:49:23 +02:00
sefaria	6ed8664089	remove menu elements that aren’t ready	2026-05-30 17:46:26 +02:00
sefaria	455f9c355f	improved button hover size	2026-05-30 17:37:40 +02:00
sefaria	a4a9b28cb1	larger button scale on hover	2026-05-30 17:36:34 +02:00
sefaria	60fa21881f	add site header to all subpages	2026-05-30 17:32:51 +02:00
sefaria	e133278724	fixed button visited appereance	2026-05-28 23:54:42 +02:00
sefaria	a1d9d3b9d8	fixed typo	2026-05-28 23:35:26 +02:00
sefaria	88f3140357	background gradient for site-header	2026-05-28 22:41:00 +02:00
sefaria	0d7beb1dac	less top padding for screen width 440px	2026-05-27 19:31:25 +02:00
sefaria	28735f1163	first draft site-header gradient	2026-05-27 19:18:55 +02:00
sefaria	938b15b741	html, body css fix	2026-05-27 19:14:43 +02:00
sefaria	740198a939	correct meta theme-color value for dark theme	2026-05-27 15:37:06 +02:00
sefaria	579487db22	add viewport-fit=cover to all pages	2026-05-27 15:24:13 +02:00
sefaria	21f21aee0c	add fade to site-header background blur	2026-05-27 14:10:53 +02:00
sefaria	a1faad0b7a	fixed menu bar padding in media queries	2026-05-27 13:41:01 +02:00
sefaria	703670c932	removing old unused layout styles	2026-05-27 13:34:37 +02:00
sefaria	48f6410a76	new menu-bar styling, merge buttons and toggle right	2026-05-27 13:31:33 +02:00
sefaria	f4718451a8	set mobile menu toggle to button design	2026-05-27 13:16:40 +02:00
sefaria	ce85432804	implementing css round() for all font-sizes	2026-05-27 11:24:20 +02:00
sefaria	0f34535ba4	fix header background blur in light theme	2026-05-27 09:58:09 +02:00
sefaria	c22c747e4f	a11y: underline on hover/active links and buttons	2026-05-27 09:45:58 +02:00
sefaria	6bd94c8e19	a11y: more paragraph spacing	2026-05-27 09:39:45 +02:00
sefaria	b7b2861ed1	deleting double styles for visually-hidden	2026-05-27 09:33:01 +02:00
sefaria	069e5346f1	adding blur to site-header, fixing mobile padding	2026-05-27 09:27:39 +02:00
sefaria	710702b4ed	add menu to all pages	2026-05-27 09:15:00 +02:00
sefaria	de4698e6fd	a11y styles, background gradient for header	2026-05-27 09:04:45 +02:00
sefaria	13632637a9	functional a11y toggle and css	2026-05-26 23:46:05 +02:00
sefaria	430602caa3	js code for a11y toggle	2026-05-26 23:37:28 +02:00
sefaria	48de33f495	commenting out js in body	2026-05-26 23:33:19 +02:00
sefaria	96a3470419	adding js toggle for light-dark theme	2026-05-26 23:32:24 +02:00
sefaria	96ec270ed4	transform scale for buttons on hover	2026-05-26 23:00:57 +02:00
sefaria	0521d33193	consistend secondary button and menu styling	2026-05-26 22:45:51 +02:00
sefaria	93a5a13e3e	new button-secondary, coherent styling (variables)	2026-05-26 18:39:31 +02:00
sefaria	db5fe419ce	new primary menu styles, cleaned up variables	2026-05-26 17:38:54 +02:00
sefaria	4dcd811381	styling secondary; underline hover primary menu	2026-05-25 21:05:08 +02:00
sefaria	9365d7c6f9	adding icon secondary nav with buttons	2026-05-25 20:22:02 +02:00
sefaria	be60619353	changing nav shadow from button to box	2026-05-25 00:30:02 +02:00
sefaria	3b5d826ce0	creating about page for menu testing	2026-05-25 00:27:40 +02:00
sefaria	992233f4cb	Fixing desktop menu appereance	2026-05-25 00:23:45 +02:00
sefaria	9a92ed4489	menu styling and active page state	2026-05-24 00:32:41 +02:00
sefaria	4e287c0e85	change menu styling	2026-05-23 15:35:42 +02:00
sefaria	a49bc03fff	set menu width to main width, align left	2026-05-23 00:58:41 +02:00
sefaria	017ade069d	fix button sizing	2026-05-23 00:31:06 +02:00
sefaria	164fae3263	fixed button sizing	2026-05-23 00:30:23 +02:00
sefaria	013e125f37	more menu styling	2026-05-23 00:17:23 +02:00
sefaria	362fa4ef58	create left aligned menu styling	2026-05-23 00:17:02 +02:00
sefaria	2b131f2b1f	Adding menu css, styling logo	2026-05-22 22:00:08 +02:00
sefaria	d799b3ce1c	Merge branch 'main' into feature/add-menu-bar # Conflicts: # 404.html	2026-05-22 20:21:59 +02:00
sefaria	42324ff42c	redesigned 404 page	2026-05-19 15:57:48 +02:00
sefaria	5b7cdf9e84	corrected copy	2026-05-19 10:21:55 +02:00
sefaria	be9491f1e8	updated og image assets	2026-05-16 15:16:52 +02:00
sefaria	276b8eb510	Merge branch 'main' into feature/add-menu-bar # Please enter a commit message to explain why this merge is necessary, # especially if it merges an updated upstream into a topic branch. # # Lines starting with '#' will be ignored, and an empty message aborts # the commit.	2026-05-14 18:28:15 +02:00
sefaria	ec54a1f3a2	add skiplink to all sites	2026-05-14 18:25:26 +02:00
sefaria	524afd03ea	adding release tag	2026-05-14 15:42:13 +02:00
sefaria	cc6fa17247	shadow depends on light/dark, media query added	2026-05-14 15:29:04 +02:00
sefaria	4737b78b8a	change darkest black to #121212	2026-05-14 13:39:56 +02:00
sefaria	aa1f270c59	change border radius button	2026-05-13 15:59:19 +02:00
sefaria	2a590a0310	Updated border radius button	2026-05-13 15:55:50 +02:00
sefaria	90a0f39790	Adding skipLink for better screen reader mode	2026-05-13 15:48:54 +02:00
sefaria	43d23aacab	change div to section	2026-05-13 12:20:53 +02:00
sefaria	8dd4e034ee	change div to section	2026-05-13 12:20:08 +02:00
sefaria	5d888daa1d	Changing license type adding license to README	2026-05-08 11:06:26 +02:00
sefaria	13ccaa8658	Changing license type adding license to README	2026-05-08 11:05:04 +02:00
sefaria	539b9a36fc	Merge branch 'main' into feature/add-menu-bar, adding new footer and section structure	2026-05-08 09:38:45 +02:00
sefaria	95f0d01d60	Moving footer out of main, adding flexbox to body element, changing divs to sections	2026-05-07 15:09:15 +02:00
sefaria	7530619aef	Remove styling exclusively for feature branch	2026-05-02 13:20:21 +02:00