add impressum

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Dockerfile

@@ -1,4 +1,4 @@
 FROM nginx:alpine
-COPY index.html /usr/share/nginx/html/index.html
+COPY index.html impressum.html legal.css /usr/share/nginx/html/
 COPY fonts /usr/share/nginx/html/fonts
 EXPOSE 80

impressum.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width,initial-scale=1"/>
+<title>Impressum: noctura.dev</title>
+<meta name="theme-color" content="#2b2a80"/>
+<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%232b2a80'/%3E%3Cpath d='M2 14V7l4 3V7l4 3V3h4v11z' fill='%23ffc93c'/%3E%3C/svg%3E"/>
+<link rel="stylesheet" href="legal.css"/>
+</head>
+<body>
+<a class="skip" href="#inhalt">Zum Inhalt springen</a>
+<header class="wrap top">
+  <a class="logo" href="./">noctura.dev</a>
+</header>
+
+<main id="inhalt">
+  <div class="wrap">
+    <h1>Impressum</h1>
+
+    <h2>Angaben gemäß § 5 DDG</h2>
+    <address>
+      Jayson Cleve<br/>
+      Zehntstr. 5<br/>
+      88356 Ostrach<br/>
+      Deutschland
+    </address>
+
+    <h2>Kontakt</h2>
+    <p>E-Mail: <a href="mailto:Jaysonmatthew2005@gmail.com">Jaysonmatthew2005@gmail.com</a></p>
+
+    <p>Dies ist eine private Webseite zur persönlichen Vorstellung und als Portfolio.</p>
+
+    <p>Stand: November 2026</p>
+  </div>
+</main>
+
+<footer class="wrap">
+  <ul>
+    <li><a href="./">Startseite</a></li>
+    <li><a href="datenschutz.html">Datenschutz</a></li>
+  </ul>
+</footer>
+</body>
+</html>

index.html

@@ -284,6 +284,7 @@ button:disabled{opacity:.6;cursor:default}
 
 footer{padding-block:0 2rem;text-align:center}
 footer p{margin-inline:auto}
+.legal a{font-weight:800;margin-inline:.6rem}
 
 @media(max-width:1000px){
   .hero-grid{grid-template-columns:minmax(0,1fr)}
@@ -501,13 +502,14 @@ footer p{margin-inline:auto}
     <div class="wrap">
       <h2>Lust auf ein technisches Gespräch?</h2>
       <p class="intro">Schreib mir gern zu meinen Projekten, zu Tiny Factory oder zu Technik im Allgemeinen. Bewerbungen nehme ich aktuell nicht an.</p>
-      <a class="mail" href="mailto:kontakt@noctura.dev">kontakt@noctura.dev</a>
+      <a class="mail" href="mailto:Jaysonmatthew2005@gmail.com">Jaysonmatthew2005@gmail.com</a>
     </div>
   </section>
 </main>
 
 <footer class="wrap">
   <p>noctura.dev läuft auf eigener Infrastruktur mit Debian.</p>
+  <p class="legal"><a href="impressum.html">Impressum</a></p>
 </footer>
 
 <script>

legal.css

@@ -0,0 +1,67 @@
+@font-face{
+  font-family:'Lilita One';
+  src:url('fonts/lilita-one.woff2') format('woff2');
+  font-display:swap;
+}
+@font-face{
+  font-family:'Nunito';
+  src:url('fonts/nunito.woff2') format('woff2');
+  font-weight:200 1000;
+  font-display:swap;
+}
+
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+:root{
+  --ink:#1a1648;
+  --night:#2b2a80;
+  --lamp:#ffc93c;
+  --paper:#fffaf0;
+  --ff-display:'Lilita One',system-ui,sans-serif;
+  --ff-body:'Nunito',system-ui,sans-serif;
+  --gutter:clamp(1rem,4vw,3rem);
+}
+html{font-size:100%;-webkit-text-size-adjust:100%}
+body{
+  background:var(--night);
+  color:var(--paper);
+  font-family:var(--ff-body);
+  font-size:1.0625rem;
+  font-weight:600;
+  line-height:1.6;
+  overflow-x:clip;
+}
+::selection{background:var(--lamp);color:var(--ink)}
+a{color:inherit}
+:focus-visible{outline:3px solid var(--lamp);outline-offset:3px}
+main :focus-visible{outline-color:var(--ink)}
+.skip{
+  position:absolute;left:var(--gutter);top:-5rem;z-index:10;
+  padding:.6rem 1rem;background:var(--lamp);color:var(--ink);font-weight:800;
+}
+.skip:focus{top:.75rem}
+.wrap{max-width:48rem;margin-inline:auto;padding-inline:var(--gutter)}
+.top{padding-block:1.25rem}
+.logo{font-family:var(--ff-display);font-size:1.6rem;text-decoration:none;color:var(--lamp)}
+main{
+  position:relative;
+  margin-top:24px;
+  background:var(--paper);color:var(--ink);
+  padding-block:clamp(2.5rem,6vw,4rem);
+}
+main::before{
+  content:'';position:absolute;left:0;right:0;bottom:100%;height:24px;
+  background:linear-gradient(to top right,var(--paper) 50%,transparent 51%) 0 100%/48px 24px repeat-x;
+}
+h1,h2{font-family:var(--ff-display);font-weight:400;line-height:1.1;text-wrap:balance}
+h1{font-size:clamp(2.4rem,7vw,3.75rem)}
+h2{margin-top:2.25rem;font-size:1.5rem}
+h3{margin-top:1.25rem;font-size:1.0625rem;font-weight:800}
+p,ul{margin-top:.6rem}
+ul{padding-left:1.25rem}
+li{margin-top:.25rem}
+address{margin-top:.6rem;font-style:normal}
+main a{overflow-wrap:anywhere;text-underline-offset:.15em}
+footer{padding-block:1.5rem 2rem}
+footer ul{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;margin:0;padding:0;list-style:none}
+footer li{margin:0}
+footer a{font-weight:800}