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