First Implementation

css/main.css

@@ -1,183 +1,64 @@
 /* ====================================
-   RESET
+   1. SCHRIFT & HINTERGRUND
-==================================== */
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-/* ====================================
-   BODY
 ==================================== */
 body {
+  /* Deine gewünschte Schriftart */
   font-family: Arial, Helvetica, sans-serif;
+
+  /* Hintergrundfarbe der Seite */
+  background-color: #eef2ff;
+
+  /* Standard-Textfarbe */
   color: #1f2937;
+
   line-height: 1.6;
-
+  margin: 0;
-  background: linear-gradient(
+  padding: 20px;
-          135deg,
-          #eef2ff,
-          #f8fafc
-  );
-
-  min-height: 100vh;
-
-  /* sorgt dafür, dass Footer unten bleibt */
-  display: flex;
-  flex-direction: column;
 }
 
 /* ====================================
-   NAVIGATION
+   2. BUTTON STYLING (Links als Buttons)
 ==================================== */
-nav {
+nav a {
-  display: flex;
+  /* Macht aus dem Link eine Box */
-  justify-content: center;
+  display: inline-block;
-  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;
+  /* Farben */
-  color: white;
+  background-color: #2563eb;
+  color: #ffffff;
 
-  padding: 0.9rem 1.4rem;
+  /* Abstände & Form */
-
+  padding: 0.8rem 1.5rem;
-  border-radius: 30px;
+  border-radius: 8px;
 
+  /* Schrift im Button */
   font-weight: bold;
+  font-size: 1rem;
 
-  transition: all 0.3s ease;
+  /* Sanfter Übergang beim Drüberfahren */
+  transition: background-color 0.3s ease;
 }
 
-nav div a:hover,
+/* Hover-Effekt für die Buttons */
-nav div a:focus {
+nav a:hover {
-  background: #1d4ed8;
+  background-color: #1d4ed8;
-  transform: translateY(-2px);
+  cursor: pointer;
-
-  outline: 3px solid #f59e0b;
-  outline-offset: 2px;
 }
 
 /* ====================================
-   MAIN
+   3. FARBEN FÜR ÜBERSCHRIFTEN
-==================================== */
-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;
+  text-align: center;
-
-  font-size: 2.2rem;
 }
 
 /* ====================================
-   BILD
+   4. EINFACHER TEXT (p)
-==================================== */
-img {
-  display: block;
-  margin: 0 auto 2rem auto;
-
-  max-width: 100%;
-  height: auto;
-
-  border-radius: 15px;
-}
-
-/* ====================================
-   TEXT
 ==================================== */
 p {
-  font-size: 1.05rem;
+  color: #374151;
-}
+  max-width: 800px;
-
+  margin: 1rem auto;
-/* ====================================
-   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;
-  }
 }