From 6d3f699ea4e379c3d7986820c5bf784a80b44467 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Estelle=20K=C3=B6hler?= <estellekoehler37@gmail.com>
Date: Fri, 3 Apr 2026 16:54:16 +0200
Subject: [PATCH] Clean up CSS to use global stylesheet, fix carousel, add
 impressum page and footer to all pages, update login styles

---
 css/index.css        | 583 ++++++++++++++++---------------------------
 css/login_signup.css | 288 ++++++++++-----------
 event_create.html    |   6 +-
 event_detail.html    |   5 +-
 event_overview.html  |   5 +-
 impressum.html       |  68 +++++
 index.html           |  74 +++---
 js/index-carousel.js |  79 ++++--
 login.html           |  15 +-
 signup.html          |   3 +
 10 files changed, 534 insertions(+), 592 deletions(-)
 create mode 100644 impressum.html

diff --git a/css/index.css b/css/index.css
index c9b179a..ad5df65 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1,273 +1,63 @@
-/* Instagram and Invite logo in gallery info area */
-.gallery__icon--instagram {
-  height: 32px;
-  width: 32px;
-  object-fit: contain;
-  border-radius: 8px;
-  background: none;
-  /* Olive green filter for PNG: #6b6b05 */
-  filter: brightness(0) saturate(100%) invert(27%) sepia(81%) saturate(749%) hue-rotate(24deg) brightness(90%) contrast(90%);
-}
+/* ===========================================
+   INDEX.CSS — Styles specific to index.html
+   Global styles (reset, variables, body, nav,
+   brand, typography) are in stylesheet_global.css
+   =========================================== */
 
-.gallery__icon--invite {
-  height: 56px;
-  width: 56px;
-  object-fit: contain;
-  margin-left: 0;
-  transform: translate(-4%, -1%);
-  position: relative;
-}
-* { box-sizing: border-box; }
 
-:root {
-  --black: #000000;
-  --white: #ffffff;
-  --button-green: #6b6b05;
-  --button-green-dark: #514c04;
-}
-
-body {
-  margin: 0;
-  font-family: 'Inter', sans-serif;
-  background: #FFFDE3; /* butter background color from stylesheet */
-}
-
-.page-wrapper {
-  max-width: 1440px;
-  margin: 0 auto;
-  background: var(--white);
-  padding: 40px;
-  border: 1px solid var(--black);
-}
-
-/* --- 1. Basic Layout Logic --- */
-.header { 
-  display: flex; 
-  justify-content: space-between; 
-  align-items: center; 
-  padding: 16px 24px;
-  border: 1px solid var(--black);
-  margin-bottom: 40px; /* Using your 40px margin from the first block */
-}
-
-.header__brand {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-weight: 700;
-  font-size: 1.2rem;
-}
-
-.brand__logo {
-  height: 34px;
-  width: auto;
-  object-fit: contain;
-}
-
-/* Grouping container for 'Event finden' and 'Login' */
-.header__actions {
-  display: flex;
-  align-items: center;
-    gap: 6px;
-}
-
-.top-nav-wrap {
-  background: #FFFDE3;
-  padding: 18px 0;
-}
-
-.top-nav {
-  background: rgba(255, 255, 255, 0.95);
-  border-radius: 30px;
-  box-shadow: 0 3px 12px rgba(102, 52, 13, 0.1);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  min-height: 58px;
-  padding: 12px 24px;
-  width: 100%;
-  max-width: none;
-  box-sizing: border-box;
-  margin: 0 0 40px;
-}
-
-.brand {
-  display: inline-flex;
-  align-items: center;
-  height: 50px;
-  text-decoration: none;
-}
-
-.brand img {
-  width: auto;
-  height: 100%;
-  max-width: 104px;
-  display: block;
-}
-
-.top-nav-links {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
+/* --- Navigation overrides (index-specific) --- */
 
 .nav-link {
-  color: #221c1a;
-  line-height: 1.3;
-  text-decoration: none;
-  padding: 8px 20px;
-  border: 2px solid #e5e1b7;
-  border-radius: 20px;
+  border: 2px solid var(--olive-light);
   transition: background-color 0.2s ease, color 0.2s ease;
 }
 
 .nav-link:hover,
 .nav-link.active,
 .nav-link:focus-visible {
-  background: #6b6b05;
-  color: #ffffff;
-  border-color: #6b6b05;
+  background: var(--olive);
+  color: var(--white);
+  border-color: var(--olive);
 }
 
 .nav-link--login {
-  background: #6b6b05;
-  color: #ffffff;
-  border-color: #6b6b05;
+  background: var(--olive);
+  color: var(--white);
+  border-color: var(--olive);
 }
 
 .nav-link--login:hover,
 .nav-link--login:focus-visible {
-  background: #ffffff;
-  color: #6b6b05;
-  border-color: #6b6b05;
+  background: var(--white);
+  color: var(--olive);
+  border-color: var(--olive);
 }
 
+
+/* --- Page layout --- */
+
 .main-content {
   width: min(100% - 4rem, 1120px);
   margin: 0 auto;
   padding: 0 20px;
 }
 
-.hero { 
-  display: grid; 
-  grid-template-columns: 1fr 1fr; 
-  gap: 50px; 
-  margin-bottom: 80px; 
+
+/* --- Hero section --- */
+
+.hero {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 50px;
+  margin-bottom: 80px;
   align-items: center;
   padding: 40px 0;
 }
 
-.how-it-works {
-  margin-bottom: 70px;
-}
-
-.how-it-works__header {
-  text-align: center;
-  margin-bottom: 32px;
-}
-
-.how-it-works__header h2 {
-  font-size: 2rem;
-  margin: 0;
-  color: #221c1a;
-}
-
-.how-it-works__steps {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(180px, 1fr));
-  gap: 20px;
-}
-
-.how-step {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  padding: 28px 20px;
-  background: #6B6B05;
-  border-radius: 28px;
-  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
-}
-
-.how-step__icon {
-  width: 64px;
-  height: 64px;
-  display: grid;
-  place-items: center;
-  background: var(--button-green);
-  color: var(--white);
-  border-radius: 50%;
-  font-size: 1.4rem;
-}
-
-.how-step__number {
-  width: 36px;
-  height: 36px;
-  display: grid;
-  place-items: center;
-  background: #f4efd7;
-  color: #221c1a;
-  border-radius: 50%;
-  font-weight: 700;
-}
-
-.how-step__label {
-  margin: 0;
-  font-size: 1rem;
-  line-height: 1.6;
-  font-weight: 600;
-  color: #221c1a;
-  text-align: center;
-}
-
-.how-step__icon--brown {
-  background: #66340d;
-}
-
-.how-step__label--brown {
-  color: #FFFDE3;
-}
-
-.how-step__label--big {
-  font-size: 1.25rem;
-  font-weight: 700;
-}
-
-.how-step--numbered {
-  position: relative;
-}
-
-.how-step__corner-number {
-  position: absolute;
-  top: 12px;
-  left: 16px;
-  font-size: 2.2rem;
-  font-weight: 700;
-}
-
-.how-step__corner-number--brown {
-  color: #FFFDE3;
-}
-
-.how-step__png {
-  width: 192px;
-  height: 192px;
-  object-fit: contain;
-}
-
-.how-step__png--brown {
-  filter: brightness(0) saturate(100%) invert(99%) sepia(6%) saturate(1200%) hue-rotate(10deg) brightness(104%) contrast(97%);
-}
-}
-
-@media (max-width: 900px) {
-  .how-it-works__steps {
-    grid-template-columns: 1fr;
-  }
-}
-
-.hero__left {
-  max-width: 520px;
+.hero__left h1 {
+  white-space: nowrap;
+  font-size: 2.4rem;
+  color: var(--black);
 }
 
 .hero__left p {
@@ -285,7 +75,7 @@ body {
   width: 100%;
   max-width: 396px;
   overflow: hidden;
-  border-radius: 30px;
+  border-radius: var(--radius-lg);
 }
 
 .hero-image {
@@ -293,7 +83,7 @@ body {
   max-width: 396px;
   max-height: 464px;
   height: auto;
-  border-radius: 30px;
+  border-radius: var(--radius-lg);
   object-fit: cover;
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
 }
@@ -313,17 +103,103 @@ body {
   }
 }
 
-/* Carousel gallery */
+
+/* --- "So funktioniert's" steps --- */
+
+.how-it-works {
+  margin-bottom: 70px;
+}
+
+.how-it-works__header {
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+.how-it-works__header h2 {
+  font-size: 2rem;
+  margin: 0;
+  color: var(--black);
+}
+
+.how-it-works__steps {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(180px, 1fr));
+  gap: 20px;
+}
+
+.how-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 28px 20px;
+  background: var(--white);
+  border-radius: 28px;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
+}
+
+.how-step--numbered {
+  position: relative;
+}
+
+.how-step__corner-number {
+  position: absolute;
+  top: 12px;
+  left: 16px;
+  font-size: 2.2rem;
+  font-weight: 700;
+}
+
+.how-step__corner-number--brown {
+  color: var(--brown);
+}
+
+.how-step__png {
+  width: 192px;
+  height: 192px;
+  object-fit: contain;
+}
+
+.how-step__png--brown {
+  filter: brightness(0) saturate(100%) invert(18%) sepia(56%) saturate(2800%) hue-rotate(16deg) brightness(92%) contrast(95%);
+}
+
+.how-step__label {
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.6;
+  font-weight: 600;
+  color: var(--black);
+  text-align: center;
+}
+
+.how-step__label--brown {
+  color: var(--brown);
+}
+
+.how-step__label--big {
+  font-size: 1.25rem;
+  font-weight: 700;
+}
+
+@media (max-width: 900px) {
+  .how-it-works__steps {
+    grid-template-columns: 1fr;
+  }
+}
+
+
+/* --- Carousel gallery --- */
+
 .gallery__carousel {
   position: relative;
+  overflow: hidden;
 }
 
 .gallery__track {
   display: flex;
   gap: 20px;
-  overflow: hidden;
-  margin-bottom: 30px; /* Space between photos and dots */
-  scroll-behavior: smooth;
+  margin-bottom: 30px;
 }
 
 .gallery__item {
@@ -331,7 +207,7 @@ body {
   min-width: calc((100% - 40px) / 3);
   border-radius: 24px;
   overflow: hidden;
-  background: #fff;
+  background: var(--white);
   box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
   aspect-ratio: 2 / 3;
 }
@@ -347,25 +223,30 @@ body {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  width: 48px;
-  height: 48px;
+  width: 44px;
+  height: 44px;
   display: grid;
   place-items: center;
-  border-radius: 0;
-  background: none;
-  backdrop-filter: none;
-  border: none;
-  color: #ffffff;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.35);
+  backdrop-filter: blur(4px);
+  border: 2px solid rgba(255, 255, 255, 0.4);
+  color: var(--white);
   cursor: pointer;
-  font-size: 1.6rem;
+  font-size: 1.2rem;
   text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-  transition: transform 0.2s ease, color 0.2s ease;
+  transition: background 0.2s ease, transform 0.2s ease;
   z-index: 2;
 }
 
 .gallery__arrow:hover {
-  transform: translateY(-50%) scale(1.15);
-  color: #e5e1b7;
+  background: rgba(0, 0, 0, 0.55);
+  transform: translateY(-50%) scale(1.1);
+}
+
+.gallery__arrow:focus-visible {
+  outline: 2px solid var(--brown);
+  outline-offset: 3px;
 }
 
 .gallery__arrow--prev {
@@ -376,7 +257,39 @@ body {
   right: 12px;
 }
 
-/* Center arrow removed – using side arrows only */
+
+/* --- Carousel dot indicators --- */
+
+.gallery__dots {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  padding: 12px 0 8px;
+}
+
+.gallery__dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 2px solid var(--brown);
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+  transition: background 0.25s ease, transform 0.2s ease;
+}
+
+.gallery__dot:hover {
+  background: rgba(102, 52, 13, 0.3);
+  transform: scale(1.2);
+}
+
+.gallery__dot:focus-visible {
+  outline: 2px solid var(--brown);
+  outline-offset: 3px;
+}
+
+.gallery__dot--active {
+  background: var(--brown);
 }
 
 @media (max-width: 900px) {
@@ -390,100 +303,8 @@ body {
   }
 }
 
-/* --- 2. Button & Link Styling --- */
-.btn {
-  border: none;
-  background: var(--button-green);
-  color: var(--white);
-  padding: 12px 22px;
-  font-weight: 700;
-  cursor: pointer;
-  text-decoration: none; /* Keeps the link from having an underline */
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 999px;
-  font-size: 0.95rem;
-  transition: background-color 0.2s ease, transform 0.2s ease;
-}
 
-.btn:hover {
-  background-color: var(--button-green-dark);
-  transform: translateY(-1px);
-}
-
-.nav__link {
-  color: var(--black); /* Fixes the purple link issue */
-}
-
-/* --- 3. The "X" Box Logic --- */
-.image-card__placeholder, .placeholder {
-  width: 100%;
-  height: 100%;
-  min-height: 250px; 
-  position: relative; 
-  border: 1px solid var(--black);
-  background: var(--white);
-}
-
-.image-card__placeholder::before, .image-card__placeholder::after,
-.placeholder::before, .placeholder::after {
-  content: "";
-  position: absolute;
-  top: 0; left: 0; right: 0; bottom: 0;
-}
-
-/* Drawing the diagonal lines for the wireframe look */
-.image-card__placeholder::before, .placeholder::before {
-  background: linear-gradient(to top left, transparent 49.5%, var(--black) 49.5%, var(--black) 50.5%, transparent 50.5%);
-}
-
-.image-card__placeholder::after, .placeholder::after {
-  background: linear-gradient(to top right, transparent 49.5%, var(--black) 49.5%, var(--black) 50.5%, transparent 50.5%);
-}
-/* The "X" Box Logic - IMPORTANT */
-.image-card__placeholder, .placeholder {
-  width: 100%;
-  height: 100%;
-  min-height: 250px; /* Ensures the box has height */
-  position: relative; /* REQUIRED for the X lines to stay inside */
-  border: 1px solid var(--black);
-  background: var(--white);
-}
-
-/* Creating the diagonal lines */
-.image-card__placeholder::before, .image-card__placeholder::after,
-.placeholder::before, .placeholder::after {
-  content: "";
-  position: absolute;
-  top: 0; left: 0; right: 0; bottom: 0;
-}
-
-.image-card__placeholder::before, .placeholder::before {
-  background: linear-gradient(to top left, transparent 49.5%, var(--black) 49.5%, var(--black) 50.5%, transparent 50.5%);
-}
-
-.image-card__placeholder::after, .placeholder::after {
-  background: linear-gradient(to top right, transparent 49.5%, var(--black) 49.5%, var(--black) 50.5%, transparent 50.5%);
-}
-
-/* Badges and Buttons */
-.social-badge {
-  display: flex;
-  justify-content: center; /* This centers the dots */
-  gap: 10px;
-  margin-top: 20px; /* This creates space between the photos and the dots */
-  /* REMOVE any line that says "position: absolute" or "bottom: 16px" */
-}
-
-.social-badge__dot { width: 12px; height: 12px; background: var(--black); border-radius: 50%; }
-
-.profile-badge {
-  width: 60px; height: 60px;
-  border-radius: 50%;
-  border: 1px solid var(--black);
-  margin-top: 20px;
-}
+/* --- Gallery info (Instagram link) --- */
 
 .gallery__info {
   display: flex;
@@ -491,31 +312,51 @@ body {
   gap: 10px;
 }
 
-.gallery__handle {
-  display: flex;
-  align-items: center;
-  font-size: 1.1rem;
+.gallery__icon--instagram {
+  height: 32px;
+  width: 32px;
+  object-fit: contain;
+  border-radius: 8px;
+  background: none;
+  filter: brightness(0) saturate(100%) invert(27%) sepia(81%) saturate(749%) hue-rotate(24deg) brightness(90%) contrast(90%);
+}
+
+.gallery__icon--invite {
+  height: 56px;
+  width: 56px;
+  object-fit: contain;
+  margin-left: 0;
+  transform: translate(-4%, -1%);
+  position: relative;
+}
+
+
+/* --- CTA button --- */
+
+.btn {
+  border: none;
+  background: var(--olive);
+  color: var(--white);
+  padding: 12px 22px;
   font-weight: 700;
-  color: var(--black);
-  gap: 6px;
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-pill);
+  font-size: 0.95rem;
+  transition: background-color 0.2s ease, transform 0.2s ease;
 }
 
-.gallery__icon {
-  font-size: 1.15rem;
-  color: #DD541A;
+.btn:hover {
+  background-color: var(--olive-dark);
+  transform: translateY(-1px);
 }
 
-.gallery__at {
-  font-size: 1.1rem;
-  color: #222;
-}
 
-.gallery__brand {
-  font-family: 'Inter', sans-serif;
-  color: #DD541A;
-}
+/* --- Footer --- */
 
-/* Footer */
 .footer {
   display: flex;
   justify-content: center;
diff --git a/css/login_signup.css b/css/login_signup.css
index f2d2e93..8ffa41e 100644
--- a/css/login_signup.css
+++ b/css/login_signup.css
@@ -1,97 +1,37 @@
-/* Grundlegende Resets */
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
+/* ===========================================
+   LOGIN_SIGNUP.CSS — Styles for login & signup
+   Global styles (reset, variables, body, nav,
+   typography) are in stylesheet_global.css
+   =========================================== */
 
-body {
-    font-family: Arial, sans-serif;
-    background-color: #f5f5f5;
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-}
 
-/* Header Styles */
-.header {
-    background-color: white;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-    padding: 15px 30px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
+/* --- Page layout --- */
 
-.header-logo {
-    font-size: 24px;
-    font-weight: bold;
-    color: #0084ff;
-    text-decoration: none;
-    letter-spacing: 1px;
-}
-
-.header-buttons {
-    display: flex;
-    gap: 15px;
-    align-items: center;
-}
-
-.header-btn {
-    padding: 10px 20px;
-    border: none;
-    border-radius: 4px;
-    font-size: 14px;
-    font-weight: bold;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    text-decoration: none;
-    display: inline-block;
-}
-
-.header-btn-secondary {
-    background-color: transparent;
-    color: #0084ff;
-    border: 2px solid #0084ff;
-}
-
-.header-btn-secondary:hover {
-    background-color: #0084ff;
-    color: white;
-}
-
-.header-btn-primary {
-    background-color: #0084ff;
-    color: white;
-}
-
-.header-btn-primary:hover {
-    background-color: #0073e6;
-}
-
-/* Main content wrapper */
 .main-content {
     display: flex;
     justify-content: center;
     align-items: center;
     flex: 1;
-    padding: 20px;
+    padding: var(--space-4);
 }
 
 .container {
-    background-color: white;
-    border-radius: 8px;
+    background-color: var(--white);
+    border-radius: var(--radius-lg);
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     max-width: 1000px;
     width: 100%;
     display: flex;
-    gap: 20px;
+    gap: var(--space-4);
     overflow: hidden;
 }
 
+
+/* --- Image section --- */
+
 .image-section {
     flex: 1;
-    background-color: #e8f4f8;
+    background-color: var(--butter-light);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -104,6 +44,9 @@ body {
     object-fit: cover;
 }
 
+
+/* --- Form section --- */
+
 .form-section {
     flex: 1;
     padding: 40px;
@@ -112,112 +55,130 @@ body {
     justify-content: center;
 }
 
-/* Formularelemente */
 h1 {
-    color: #333;
-    margin-bottom: 20px;
+    color: var(--black);
+    margin-bottom: var(--space-4);
     text-align: center;
 }
 
-.info-box {
-    background-color: #e8f4f8;
-    border-left: 4px solid #0084ff;
-    padding: 15px;
-    margin-bottom: 30px;
-    border-radius: 4px;
-    font-size: 14px;
-    color: #333;
-    line-height: 1.5;
-}
+
+/* --- Form elements --- */
 
 .form-group {
-    margin-bottom: 20px;
+    margin-bottom: var(--space-4);
 }
 
 label {
     display: block;
-    margin-bottom: 6px;
-    color: #333;
-    font-weight: bold;
-    font-size: 14px;
+    margin-bottom: var(--space-1);
+    color: var(--black);
+    font-weight: 600;
+    font-size: 0.9rem;
 }
 
 input[type="text"],
 input[type="email"],
 input[type="password"] {
     width: 100%;
-    padding: 12px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    font-size: 14px;
+    padding: var(--space-2);
+    border: 2px solid var(--olive-light);
+    border-radius: var(--radius-md);
+    font-size: 0.9rem;
+    font-family: var(--font-main);
     transition: border-color 0.3s ease;
-    font-family: Arial, sans-serif;
+    background: var(--white);
+    color: var(--black);
 }
 
 input:focus {
     outline: none;
-    border-color: #0084ff;
-    box-shadow: 0 0 5px rgba(0, 132, 255, 0.3);
+    border-color: var(--olive);
+    box-shadow: 0 0 5px rgba(107, 107, 5, 0.25);
 }
 
-button {
+button[type="submit"] {
     width: 100%;
-    padding: 12px;
-    background-color: #0084ff;
-    color: white;
+    padding: var(--space-2);
+    background-color: var(--olive);
+    color: var(--white);
     border: none;
-    border-radius: 4px;
-    font-size: 16px;
-    font-weight: bold;
+    border-radius: var(--radius-pill);
+    font-size: 1rem;
+    font-weight: 700;
+    font-family: var(--font-main);
     cursor: pointer;
-    transition: background-color 0.3s ease;
-    margin-top: 10px;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+    margin-top: var(--space-2);
 }
 
-button:hover {
-    background-color: #0073e6;
+button[type="submit"]:hover {
+    background-color: var(--olive-dark);
+    transform: translateY(-1px);
 }
 
-button:active {
-    background-color: #0063cc;
+button[type="submit"]:active {
+    background-color: var(--olive-dark);
+    transform: translateY(0);
 }
 
-/* Hilfstexte & Fehler */
-.signup-hint, .login-hint {
+
+/* --- Info box --- */
+
+.info-box {
+    background-color: var(--butter-light);
+    border-left: 4px solid var(--olive);
+    padding: var(--space-3);
+    margin-bottom: var(--space-6);
+    border-radius: 4px;
+    font-size: 0.9rem;
+    color: var(--black);
+    line-height: 1.5;
+}
+
+
+/* --- Hints & errors --- */
+
+.signup-hint,
+.login-hint {
     text-align: center;
-    margin-top: 20px;
-    color: #666;
-    font-size: 14px;
+    margin-top: var(--space-4);
+    color: var(--black);
+    font-size: 0.9rem;
 }
 
-.signup-hint a, .login-hint a {
-    color: #0084ff;
+.signup-hint a,
+.login-hint a {
+    color: var(--olive);
     text-decoration: none;
-    font-weight: bold;
+    font-weight: 600;
     transition: color 0.3s ease;
 }
 
-.signup-hint a:hover, .login-hint a:hover {
+.signup-hint a:hover,
+.login-hint a:hover {
     text-decoration: underline;
+    color: var(--olive-dark);
 }
 
 .error-message {
-    color: #d32f2f;
-    font-size: 13px;
+    color: var(--tomato);
+    font-size: 0.8rem;
     margin-top: 5px;
     display: none;
 }
 
 .form-group.has-error input {
-    border-color: #d32f2f;
-    box-shadow: 0 0 5px rgba(211, 47, 47, 0.3);
+    border-color: var(--tomato);
+    box-shadow: 0 0 5px rgba(212, 75, 36, 0.3);
 }
 
 .form-group.has-error .error-message {
     display: block;
 }
 
-/* Modal / Popup Styles */
+
+/* --- Modal / Popup --- */
+
 .modal {
     display: none;
     position: fixed;
@@ -242,9 +203,9 @@ button:active {
 }
 
 .modal-content {
-    background-color: white;
+    background-color: var(--white);
     padding: 40px;
-    border-radius: 8px;
+    border-radius: var(--radius-lg);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
     max-width: 500px;
     width: 90%;
@@ -259,12 +220,12 @@ button:active {
 
 .modal-header {
     position: relative;
-    margin-bottom: 20px;
+    margin-bottom: var(--space-4);
 }
 
 .modal-header h2 {
-    color: #0084ff;
-    font-size: 24px;
+    color: var(--olive);
+    font-size: 1.5rem;
 }
 
 .close-btn {
@@ -272,7 +233,7 @@ button:active {
     right: 0;
     top: 0;
     font-size: 28px;
-    color: #999;
+    color: var(--black);
     background: none;
     border: none;
     cursor: pointer;
@@ -284,19 +245,57 @@ button:active {
 }
 
 .modal-body {
-    color: #333;
-    font-size: 16px;
+    color: var(--black);
+    font-size: 1rem;
     line-height: 1.6;
-    margin-bottom: 30px;
+    margin-bottom: var(--space-6);
 }
 
 .modal-footer {
     display: flex;
-    gap: 10px;
+    gap: var(--space-2);
     justify-content: center;
 }
 
-/* Responsive Anpassungen */
+.btn-primary {
+    padding: var(--space-2) var(--space-5);
+    background-color: var(--olive);
+    color: var(--white);
+    border: none;
+    border-radius: var(--radius-pill);
+    font-size: 1rem;
+    font-weight: 700;
+    font-family: var(--font-main);
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.btn-primary:hover {
+    background-color: var(--olive-dark);
+}
+
+
+/* --- Footer --- */
+
+.footer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: var(--space-3) var(--space-5);
+    border: none;
+    margin-top: 40px;
+}
+
+.footer__link {
+    color: var(--black);
+    text-decoration: underline;
+    font-size: 0.8rem;
+    font-weight: 400;
+}
+
+
+/* --- Responsive --- */
+
 @media (max-width: 768px) {
     .container {
         flex-direction: column;
@@ -305,19 +304,4 @@ button:active {
     .image-section {
         min-height: 300px;
     }
-
-    .header {
-        flex-direction: column;
-        gap: 15px;
-    }
-
-    .header-buttons {
-        width: 100%;
-        flex-direction: column;
-    }
-
-    .header-btn {
-        width: 100%;
-        text-align: center;
-    }
 }
\ No newline at end of file
diff --git a/event_create.html b/event_create.html
index 54b635b..3670e60 100644
--- a/event_create.html
+++ b/event_create.html
@@ -16,7 +16,7 @@
 <header class="top-nav-wrap">
     <div class="top-nav">
         <a class="brand" href="index.html" aria-label="Zur Startseite">
-            <img src="assets/invite-logo.svg" alt="Invite Logo">
+            <img src="assets/logo_invite.svg" alt="Invite Logo">
         </a>
         <nav class="top-nav-links" aria-label="Hauptnavigation">
             <a class="nav-link active" href="event_overview.html" aria-current="page">Event finden</a>
@@ -350,8 +350,8 @@
     </form>
   </main>
 
-  <footer class="site-footer">
-    <p>&copy; Social Cooking</p>
+  <footer class="footer">
+    <a href="impressum.html" class="footer__link">Impressum</a>
   </footer>
 
   <script src="js/event_create.js"></script>
diff --git a/event_detail.html b/event_detail.html
index cf73b50..0a5cfde 100644
--- a/event_detail.html
+++ b/event_detail.html
@@ -15,7 +15,7 @@
 <header class="top-nav-wrap">
     <div class="top-nav">
         <a class="brand" href="index.html" aria-label="Zur Startseite">
-            <img src="assets/invite-logo.svg" alt="Invite Logo">
+            <img src="assets/logo_invite.svg" alt="Invite Logo">
         </a>
         <nav class="top-nav-links" aria-label="Hauptnavigation">
             <a class="nav-link active" href="event_overview.html" aria-current="page">Event finden</a>
@@ -35,6 +35,9 @@
 
 <!-- Page logic: fetch by URL id, compose detail UI, handle gallery lightbox -->
 <script src="js/event_detail.js"></script>
+<footer class="footer">
+  <a href="impressum.html" class="footer__link">Impressum</a>
+</footer>
 
 </body>
 </html>
\ No newline at end of file
diff --git a/event_overview.html b/event_overview.html
index dd405f8..740db4e 100644
--- a/event_overview.html
+++ b/event_overview.html
@@ -17,7 +17,7 @@
 <header class="top-nav-wrap">
     <div class="top-nav">
         <a class="brand" href="index.html" aria-label="Zur Startseite">
-            <img src="assets/invite-logo.svg" alt="Invite Logo">
+            <img src="assets/logo_invite.svg" alt="Invite Logo">
         </a>
         <nav class="top-nav-links" aria-label="Hauptnavigation">
             <a class="nav-link active" href="event_overview.html" aria-current="page">Event finden</a>
@@ -68,5 +68,8 @@
 
 <!-- Page logic: data loading, filtering and card rendering -->
 <script src="js/event_overview.js"></script>
+<footer class="footer">
+  <a href="impressum.html" class="footer__link">Impressum</a>
+</footer>
 </body>
 </html>
\ No newline at end of file
diff --git a/impressum.html b/impressum.html
new file mode 100644
index 0000000..365de08
--- /dev/null
+++ b/impressum.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Invité | Impressum</title>
+  <link rel="stylesheet" href="css/stylesheet_global.css" />
+  <link rel="stylesheet" href="css/index.css" />
+</head>
+<body>
+  <header class="top-nav-wrap">
+    <div class="top-nav">
+      <a class="brand" href="index.html" aria-label="Zur Startseite">
+        <img src="assets/logo_invite.svg" alt="Invité">
+      </a>
+      <nav class="top-nav-links" aria-label="Hauptnavigation">
+        <a class="nav-link" href="event_create.html">Event erstellen</a>
+        <a class="nav-link nav-link--login" href="login.html">Login</a>
+      </nav>
+    </div>
+  </header>
+
+  <main class="main-content" style="padding: 40px 20px; max-width: 800px; margin: 0 auto;">
+    <h1>Impressum</h1>
+
+    <h2>Angaben gemäss § 5 TMG</h2>
+    <p>
+      Invité GmbH<br>
+      Musterstrasse 12<br>
+      7000 Chur<br>
+      Schweiz
+    </p>
+
+    <h2>Kontakt</h2>
+    <p>
+      Telefon: +41 81 123 45 67<br>
+      E-Mail: info@invite-cooking.ch
+    </p>
+
+    <h2>Vertretungsberechtigte Person</h2>
+    <p>Max Mustermann, Geschäftsführer</p>
+
+    <h2>Handelsregistereintrag</h2>
+    <p>
+      Eingetragen im Handelsregister des Kantons Graubünden<br>
+      Firmennummer: CHE-123.456.789
+    </p>
+
+    <h2>Haftungsausschluss</h2>
+    <p>
+      Die Inhalte dieser Website wurden mit grösster Sorgfalt erstellt. Für die Richtigkeit,
+      Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen.
+    </p>
+
+    <h2>Urheberrecht</h2>
+    <p>
+      Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen
+      dem schweizerischen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede
+      Art der Verwertung ausserhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen
+      Zustimmung des jeweiligen Autors bzw. Erstellers.
+    </p>
+  </main>
+
+  <footer class="footer">
+    <a href="impressum.html" class="footer__link">Impressum</a>
+  </footer>
+</body>
+</html>
diff --git a/index.html b/index.html
index a620054..6576b1e 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Invité | Events entdecken</title>
+  <link rel="stylesheet" href="css/stylesheet_global.css" />
   <link rel="stylesheet" href="css/index.css" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-dU7ZrF1pFq5kVnPzlV9+04YhARzNjCX5Q5P1shgMpuN4s5I8mI8QD4981h7kYtV7sSgNldR0z5pZW5bS2ZpY3Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 </head>
@@ -12,7 +13,7 @@
     <header class="top-nav-wrap">
       <div class="top-nav">
         <a class="brand" href="index.html" aria-label="Zur Startseite">
-          <img src="assets/invite-logo.svg" alt="Invité">
+          <img src="assets/logo_invite.svg" alt="Invité">
         </a>
 
         <nav class="top-nav-links" aria-label="Hauptnavigation">
@@ -33,7 +34,7 @@
 
         <div class="hero__right">
           <div class="image-card">
-            <img class="hero-image" src="assets/Startpage ingredients.jpg" alt="Startpage Ingredients" />
+            <img class="hero-image" src="assets/index_ingredients.jpg" alt="Startpage Ingredients" />
           </div>
         </div>
       </section>
@@ -45,62 +46,65 @@
         <div class="how-it-works__steps">
           <article class="how-step how-step--numbered">
             <span class="how-step__corner-number how-step__corner-number--brown">1</span>
-            <img src="assets/register icon.png" alt="Register" class="how-step__png how-step__png--brown" />
+            <img src="assets/icon_register.png" alt="Register" class="how-step__png how-step__png--brown" />
             <p class="how-step__label how-step__label--brown how-step__label--big">Anmelden</p>
           </article>
           <article class="how-step how-step--numbered">
             <span class="how-step__corner-number how-step__corner-number--brown">2</span>
-            <img src="assets/add-event icon.png" alt="Event erstellen" class="how-step__png how-step__png--brown" />
+            <img src="assets/icon_add-event.png" alt="Event erstellen" class="how-step__png how-step__png--brown" />
             <p class="how-step__label how-step__label--brown how-step__label--big">Event erstellen</p>
           </article>
           <article class="how-step how-step--numbered">
             <span class="how-step__corner-number how-step__corner-number--brown">3</span>
-            <img src="assets/Plate icon.png" alt="Gemeinsam essen" class="how-step__png how-step__png--brown" />
+            <img src="assets/icon_Plate.png" alt="Gemeinsam essen" class="how-step__png how-step__png--brown" />
             <p class="how-step__label how-step__label--brown how-step__label--big">Gemeinsam essen</p>
           </article>
         </div>
       </section>
 
       <!-- Main Content: uses .gallery, .gallery__carousel, .gallery__track, .gallery__item, and .gallery__info to present event carousel content -->
-      <section class="gallery">
+      <section class="gallery" aria-label="Bildergalerie" aria-roledescription="Karussell">
         <div class="gallery__carousel">
           <button type="button" class="gallery__arrow gallery__arrow--prev" aria-label="Vorheriges Bild">
             <i class="fas fa-chevron-left"></i>
           </button>
 
-          <div class="gallery__track">
-            <article class="gallery__item">
-              <img src="assets/Red checkered social eating.jpg" alt="Red checkered social eating">
+          <div class="gallery__track" aria-live="polite">
+            <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 1 von 12">
+              <img src="assets/index_Red checkered social eating.jpg" alt="Red checkered social eating">
             </article>
-            <article class="gallery__item">
-              <img src="assets/Pasta and many forks.jpg" alt="Pasta and many forks">
+            <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 2 von 12">
+              <img src="assets/index_Pasta and many forks.jpg" alt="Pasta and many forks">
             </article>
-            <article class="gallery__item">
-              <img src="assets/Zoomed in asian eating.jpg" alt="Zoomed in asian eating">
+            <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 3 von 12">
+              <img src="assets/index_Zoomed in asian eating.jpg" alt="Zoomed in asian eating">
             </article>
-            <article class="gallery__item">
-              <img src="assets/Burger eating together.jpg" alt="Burger eating together">
+            <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 4 von 12">
+              <img src="assets/index_Burger eating together.jpg" alt="Burger eating together">
             </article>
-            <article class="gallery__item">
-              <img src="assets/Cake cutting figs.jpg" alt="Cake cutting figs">
+            <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 5 von 12">
+              <img src="assets/index_Cake cutting figs.jpg" alt="Cake cutting figs">
             </article>
-            <article class="gallery__item">
-              <img src="assets/Cooking woman at home.jpg" alt="Cooking woman at home">
+            <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 6 von 12">
+              <img src="assets/index_Cooking woman at home.jpg" alt="Cooking woman at home">
             </article>
-            <article class="gallery__item">
-              <img src="assets/Eating and laughing girls.jpg" alt="Eating and laughing girls">
+            <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 7 von 12">
+              <img src="assets/index_Eating and laughing girls.jpg" alt="Eating and laughing girls">
             </article>
-            <article class="gallery__item">
-              <img src="assets/Pasta in cheese.jpg" alt="Pasta in cheese">
+            <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 8 von 12">
+              <img src="assets/index_Pasta in cheese.jpg" alt="Pasta in cheese">
             </article>
-            <article class="gallery__item">
-              <img src="assets/Salad roommates.jpg" alt="Salad roommates">
+            <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 9 von 12">
+              <img src="assets/index_Salad roommates.jpg" alt="Salad roommates">
             </article>
-            <article class="gallery__item">
-              <img src="assets/Sharing food table.jpg" alt="Sharing food table">
+            <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 10 von 12">
+              <img src="assets/index_Sharing food table.jpg" alt="Sharing food table">
             </article>
-            <article class="gallery__item">
-              <img src="assets/Spicy food zoomed.jpg" alt="Spicy food zoomed">
+            <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 11 von 12">
+              <img src="assets/index_Spicy food zoomed.jpg" alt="Spicy food zoomed">
+            </article>
+            <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 12 von 12">
+              <img src="assets/index_cooking.jpg" alt="Cooking">
             </article>
           </div>
 
@@ -109,19 +113,21 @@
           </button>
         </div>
 
+        <div class="gallery__dots" role="tablist" aria-label="Seite auswählen"></div>
+
 
         <div class="gallery__info">
-          <div class="gallery__handle" style="display: flex; align-items: center; gap: 16px;">
-            <img src="assets/instagram.png" alt="Instagram" class="gallery__icon--instagram" />
-            <img src="assets/invite-logo.svg" alt="Invité Logo" class="gallery__icon--invite" />
-          </div>
+          <a href="https://www.instagram.com" target="_blank" rel="noopener noreferrer" class="gallery__handle" style="display: flex; align-items: center; gap: 16px; text-decoration: none;">
+            <img src="assets/Icon_instagram.png" alt="Instagram" class="gallery__icon--instagram" />
+            <img src="assets/logo_invite.svg" alt="Invité Logo" class="gallery__icon--invite" />
+          </a>
         </div>
       </section>
     </main>
 
     <script src="js/index-carousel.js"></script>
     <footer class="footer">
-      <a href="#" class="footer__link">Impressum</a>
+      <a href="impressum.html" class="footer__link">Impressum</a>
     </footer>
 </body>
 </html>
\ No newline at end of file
diff --git a/js/index-carousel.js b/js/index-carousel.js
index 42128fc..bedc437 100644
--- a/js/index-carousel.js
+++ b/js/index-carousel.js
@@ -1,52 +1,85 @@
 const carouselTrack = document.querySelector('.gallery__track');
 const prevArrow = document.querySelector('.gallery__arrow--prev');
 const nextArrow = document.querySelector('.gallery__arrow--next');
+const dotsContainer = document.querySelector('.gallery__dots');
 
 if (carouselTrack) {
   const items = Array.from(carouselTrack.querySelectorAll('.gallery__item'));
   const getItemsPerPage = () => (window.matchMedia('(max-width: 900px)').matches ? 1 : 3);
   let itemsPerPage = getItemsPerPage();
-  const pageCount = Math.ceil(items.length / itemsPerPage);
+  let pageCount = Math.ceil(items.length / itemsPerPage);
   let activePage = 0;
+  var dots = [];
 
-  function scrollToPage(page) {
+  function buildDots() {
+    if (!dotsContainer) return;
+    dotsContainer.innerHTML = '';
+    dots = [];
+    for (var i = 0; i < pageCount; i++) {
+      var dot = document.createElement('button');
+      dot.type = 'button';
+      dot.className = 'gallery__dot' + (i === activePage ? ' gallery__dot--active' : '');
+      dot.setAttribute('role', 'tab');
+      dot.setAttribute('aria-selected', i === activePage ? 'true' : 'false');
+      dot.setAttribute('aria-label', 'Seite ' + (i + 1) + ' von ' + pageCount);
+      dot.dataset.page = i;
+      dot.addEventListener('click', function() {
+        goToPage(parseInt(this.dataset.page));
+      });
+      dotsContainer.appendChild(dot);
+      dots.push(dot);
+    }
+  }
+
+  function updateDots() {
+    dots.forEach(function(dot, i) {
+      dot.classList.toggle('gallery__dot--active', i === activePage);
+      dot.setAttribute('aria-selected', i === activePage ? 'true' : 'false');
+    });
+  }
+
+  function updateTrack() {
+    var gap = parseFloat(getComputedStyle(carouselTrack).gap) || 20;
+    var itemWidth = items[0].getBoundingClientRect().width;
+    var offset = activePage * (itemWidth + gap) * itemsPerPage;
+    carouselTrack.style.transform = 'translateX(-' + offset + 'px)';
+    carouselTrack.style.transition = 'transform 0.4s ease';
+    updateDots();
+  }
+
+  function goToPage(page) {
     activePage = page;
-    const pageWidth = carouselTrack.clientWidth;
-    carouselTrack.scrollTo({ left: pageWidth * page, behavior: 'smooth' });
+    updateTrack();
   }
 
   function showNext() {
     activePage = (activePage + 1) % pageCount;
-    scrollToPage(activePage);
+    updateTrack();
   }
 
   function showPrev() {
     activePage = (activePage - 1 + pageCount) % pageCount;
-    scrollToPage(activePage);
+    updateTrack();
   }
 
-  function refreshCarousel() {
-    const responsiveItemsPerPage = getItemsPerPage();
-    if (responsiveItemsPerPage !== itemsPerPage) {
-      itemsPerPage = responsiveItemsPerPage;
-      window.location.reload();
-    }
-  }
+  buildDots();
 
   if (nextArrow) nextArrow.addEventListener('click', showNext);
   if (prevArrow) prevArrow.addEventListener('click', showPrev);
 
-  document.addEventListener('keydown', (event) => {
-    if (event.key === 'ArrowRight') {
-      showNext();
-    }
-    if (event.key === 'ArrowLeft') {
-      showPrev();
-    }
+  document.addEventListener('keydown', function(event) {
+    if (event.key === 'ArrowRight') showNext();
+    if (event.key === 'ArrowLeft') showPrev();
   });
 
-  window.addEventListener('resize', () => {
-    refreshCarousel();
-    scrollToPage(activePage);
+  window.addEventListener('resize', function() {
+    var newPerPage = getItemsPerPage();
+    if (newPerPage !== itemsPerPage) {
+      itemsPerPage = newPerPage;
+      pageCount = Math.ceil(items.length / itemsPerPage);
+      activePage = 0;
+    }
+    buildDots();
+    updateTrack();
   });
 }
diff --git a/login.html b/login.html
index 3e039fb..07f7e3e 100644
--- a/login.html
+++ b/login.html
@@ -3,14 +3,12 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Login - Social Cooking</title>
+    <title>Invité | Login</title>
 
-    <!-- Stylesheet für diese Seite-->
-    <link rel="stylesheet" href="css/login_signup.css">
-    <!-- Navigation Stylesheet -->
-    <link rel="stylesheet" href="css/index.css">
     <!-- Globales Stylesheet -->
-    <link rel="stylesheet" href="css/stylesheet.css">
+    <link rel="stylesheet" href="css/stylesheet_global.css">
+    <!-- Stylesheet für diese Seite -->
+    <link rel="stylesheet" href="css/login_signup.css">
 
 
 </head>
@@ -19,7 +17,7 @@
 <header class="top-nav-wrap">
     <div class="top-nav">
         <a class="brand" href="index.html" aria-label="Zur Startseite">
-            <img src="assets/invite-logo.svg" alt="Invité">
+            <img src="assets/logo_invite.svg" alt="Invité">
         </a>
         <nav class="top-nav-links" aria-label="Hauptnavigation">
             <a class="nav-link nav-link--login" href="login.html">Anmelden</a>
@@ -60,5 +58,8 @@
     </div>
     </div>  <!-- Schließt main-content -->
     <script src="js/login.js"></script>
+    <footer class="footer">
+      <a href="impressum.html" class="footer__link">Impressum</a>
+    </footer>
 </body>
 </html>
diff --git a/signup.html b/signup.html
index db2098b..feeb8c1 100644
--- a/signup.html
+++ b/signup.html
@@ -81,5 +81,8 @@
         </div>
     </div>
     <script src="js/signup.js"></script>
+    <footer class="footer">
+      <a href="impressum.html" class="footer__link">Impressum</a>
+    </footer>
 </body>
 </html>