diff --git a/anmeldung.html b/anmeldung.html
index 08a8dc6..45bd523 100644
--- a/anmeldung.html
+++ b/anmeldung.html
@@ -5,6 +5,7 @@
     <meta charset="utf-8">
     <meta name="description" content="Gästebuch Beispiel">
     <meta name="author" content="Dietrich Boles">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="css/main.css" />
     <title>Gästebuch</title>
 </head>
diff --git a/css/main.css b/css/main.css
index c9f08fb..46b14bd 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,3 +1,183 @@
+/* ====================================
+   RESET
+==================================== */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* ====================================
+   BODY
+==================================== */
 body {
-  background-color: coral;
+  font-family: Arial, Helvetica, sans-serif;
+  color: #1f2937;
+  line-height: 1.6;
+
+  background: linear-gradient(
+          135deg,
+          #eef2ff,
+          #f8fafc
+  );
+
+  min-height: 100vh;
+
+  /* sorgt dafür, dass Footer unten bleibt */
+  display: flex;
+  flex-direction: column;
+}
+
+/* ====================================
+   NAVIGATION
+==================================== */
+nav {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+
+  padding: 1.5rem;
+
+  background: white;
+  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
+}
+
+nav div a {
+  display: block;
+  text-decoration: none;
+
+  background: #2563eb;
+  color: white;
+
+  padding: 0.9rem 1.4rem;
+
+  border-radius: 30px;
+
+  font-weight: bold;
+
+  transition: all 0.3s ease;
+}
+
+nav div a:hover,
+nav div a:focus {
+  background: #1d4ed8;
+  transform: translateY(-2px);
+
+  outline: 3px solid #f59e0b;
+  outline-offset: 2px;
+}
+
+/* ====================================
+   MAIN
+==================================== */
+main {
+  flex: 1;
+
+  max-width: 900px;
+  margin: 3rem auto;
+  padding: 2rem;
+
+  background: white;
+
+  border-radius: 20px;
+
+  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
+}
+
+/* ====================================
+   ÜBERSCHRIFT
+==================================== */
+h1 {
+  text-align: center;
+  color: #1e3a8a;
+  margin-bottom: 2rem;
+
+  font-size: 2.2rem;
+}
+
+/* ====================================
+   BILD
+==================================== */
+img {
+  display: block;
+  margin: 0 auto 2rem auto;
+
+  max-width: 100%;
+  height: auto;
+
+  border-radius: 15px;
+}
+
+/* ====================================
+   TEXT
+==================================== */
+p {
+  font-size: 1.05rem;
+}
+
+/* ====================================
+   FOOTER
+==================================== */
+footer {
+  background: #1e293b;
+
+  padding: 1.5rem;
+
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
+  flex-wrap: wrap;
+}
+
+footer a {
+  color: white;
+  text-decoration: none;
+}
+
+footer a:hover,
+footer a:focus {
+  text-decoration: underline;
+
+  outline: 2px solid white;
+  outline-offset: 2px;
+}
+
+/* ====================================
+   RESPONSIVE TABLET
+==================================== */
+@media (max-width: 768px) {
+  nav {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  main {
+    margin: 1rem;
+    padding: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.8rem;
+  }
+}
+
+/* ====================================
+   RESPONSIVE HANDY
+==================================== */
+@media (max-width: 480px) {
+  body {
+    font-size: 15px;
+  }
+
+  nav div a {
+    width: 100%;
+    text-align: center;
+  }
+
+  footer {
+    flex-direction: column;
+    text-align: center;
+    gap: 1rem;
+  }
 }
\ No newline at end of file
diff --git a/datenschutz.html b/datenschutz.html
index 796b643..15c94a6 100644
--- a/datenschutz.html
+++ b/datenschutz.html
@@ -5,6 +5,7 @@
     <meta charset="utf-8">
     <meta name="description" content="Gästebuch Beispiel">
     <meta name="author" content="Dietrich Boles">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="css/main.css" />
     <title>Gästebuch</title>
 </head>
diff --git a/impressum.html b/impressum.html
index eb02980..d5b3856 100644
--- a/impressum.html
+++ b/impressum.html
@@ -5,6 +5,7 @@
     <meta charset="utf-8">
     <meta name="description" content="Gästebuch Beispiel">
     <meta name="author" content="Dietrich Boles">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="css/main.css" />
     <title>Gästebuch</title>
 </head>
diff --git a/index.html b/index.html
index 812a625..f44c5e6 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
     <meta charset="utf-8">
     <meta name="description" content="Gästebuch Beispiel">
     <meta name="author" content="Dietrich Boles">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="css/main.css" />
     <title>Gästebuch</title>
 </head>
@@ -12,41 +13,41 @@
 
 <body>
 
-    <nav>
-        <div>
-            <a href="index.html">Homepage</a>
-        </div>
-        <div>
-            <a href="anmeldung.html">Anmelden/Abmelden</a>
-        </div>
-        <div>
-            <a href="registrierung.html">Registrieren</a>
-        </div>
-    </nav>
+<nav>
+    <div>
+        <a href="index.html">Homepage</a>
+    </div>
+    <div>
+        <a href="anmeldung.html">Anmelden/Abmelden</a>
+    </div>
+    <div>
+        <a href="registrierung.html">Registrieren</a>
+    </div>
+</nav>
 
 
-    <main>
+<main>
 
-        <h1>Homepage</h1>
+    <h1>Homepage</h1>
 
-        <img src="images/guestbook.png" alt="Gästebuch">
+    <img src="images/guestbook.png" alt="Gästebuch">
 
-        <p>
-            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
-            dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-            clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
-            consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
-            sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
-            sea takimata sanctus est Lorem ipsum dolor sit amet.
-        </p>
+    <p>
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
+        consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
+        sea takimata sanctus est Lorem ipsum dolor sit amet.
+    </p>
 
-    </main>
+</main>
 
-    <footer>
-        <a href="impressum.html">Impressum</a>
-        <a href="datenschutz.html">Datenschutz</a>
-        <a href="nutzungsbedingungen.html">Nutzungsbedingungen</a>
-    </footer>
+<footer>
+    <a href="impressum.html">Impressum</a>
+    <a href="datenschutz.html">Datenschutz</a>
+    <a href="nutzungsbedingungen.html">Nutzungsbedingungen</a>
+</footer>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/nutzungsbedingungen.html b/nutzungsbedingungen.html
index 804cc98..5204ed5 100644
--- a/nutzungsbedingungen.html
+++ b/nutzungsbedingungen.html
@@ -5,6 +5,7 @@
     <meta charset="utf-8">
     <meta name="description" content="Gästebuch Beispiel">
     <meta name="author" content="Dietrich Boles">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="css/main.css" />
     <title>Gästebuch</title>
 </head>
diff --git a/registrierung.html b/registrierung.html
index fce6d6f..b665459 100644
--- a/registrierung.html
+++ b/registrierung.html
@@ -5,6 +5,7 @@
     <meta charset="utf-8">
     <meta name="description" content="Gästebuch Beispiel">
     <meta name="author" content="Dietrich Boles">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="css/main.css" />
     <title>Gästebuch</title>
 </head>