fix: correct stylesheet references, shorten login snackbar, add datenschutz page

css/index.css

@@ -0,0 +1,375 @@
+/* ===========================================
+   INDEX.CSS — Styles specific to index.html
+   Global styles (reset, variables, body, nav,
+   brand, typography) are in stylesheet_global.css
+   =========================================== */
+
+
+/* --- Navigation overrides (index-specific) --- */
+
+.nav-link {
+  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: var(--olive);
+  color: var(--white);
+  border-color: var(--olive);
+}
+
+.nav-link--login {
+  background: var(--olive);
+  color: var(--white);
+  border-color: var(--olive);
+}
+
+.nav-link--login:hover,
+.nav-link--login:focus-visible {
+  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 section --- */
+
+.hero {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 50px;
+  margin-bottom: 80px;
+  align-items: center;
+  padding: 40px 0;
+}
+
+.hero__left h1 {
+  white-space: nowrap;
+  font-size: 2.4rem;
+  color: var(--black);
+}
+
+.hero__left p {
+  margin: 24px 0 32px;
+  line-height: 1.8;
+}
+
+.hero__right {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-card {
+  width: 100%;
+  max-width: 396px;
+  overflow: hidden;
+  border-radius: var(--radius-lg);
+}
+
+.hero-image {
+  width: 100%;
+  max-width: 396px;
+  max-height: 464px;
+  height: auto;
+  border-radius: var(--radius-lg);
+  object-fit: cover;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
+}
+
+@media (max-width: 900px) {
+  .hero {
+    grid-template-columns: 1fr;
+    padding: 30px 0;
+  }
+
+  .hero__right {
+    order: -1;
+  }
+
+  .hero-image {
+    min-height: 320px;
+  }
+}
+
+
+/* --- "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;
+  margin-bottom: 30px;
+}
+
+.gallery__item {
+  flex: 0 0 calc((100% - 40px) / 3);
+  min-width: calc((100% - 40px) / 3);
+  border-radius: 24px;
+  overflow: hidden;
+  background: var(--white);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
+  aspect-ratio: 2 / 3;
+}
+
+.gallery__item img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
+.gallery__arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 44px;
+  height: 44px;
+  display: grid;
+  place-items: center;
+  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.2rem;
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+  transition: background 0.2s ease, transform 0.2s ease;
+  z-index: 2;
+}
+
+.gallery__arrow:hover {
+  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 {
+  left: 12px;
+}
+
+.gallery__arrow--next {
+  right: 12px;
+}
+
+
+/* --- 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) {
+  .gallery__track {
+    gap: 16px;
+  }
+
+  .gallery__item {
+    flex: 0 0 100%;
+    min-width: 100%;
+  }
+}
+
+
+/* --- Gallery info (Instagram link) --- */
+
+.gallery__info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.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;
+  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;
+}
+
+.btn:hover {
+  background-color: var(--olive-dark);
+  transform: translateY(-1px);
+}
+
+
+/* --- Footer --- */
+
+.footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 24px;
+  padding: 16px 24px;
+  border: none;
+  margin-top: 40px;
+}
+
+.footer__link {
+  color: var(--black);
+  text-decoration: underline;
+  font-size: 0.8rem;
+  font-weight: 400;
+}

css/landingpage.css

@@ -1,533 +0,0 @@
-/* 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%);
-}
-
-.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;
-}
-
-.nav-link {
-  color: #221c1a;
-  line-height: 1.3;
-  text-decoration: none;
-  padding: 8px 20px;
-  border: 2px solid #e5e1b7;
-  border-radius: 20px;
-  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;
-}
-
-.nav-link--login {
-  background: #6b6b05;
-  color: #ffffff;
-  border-color: #6b6b05;
-}
-
-.nav-link--login:hover,
-.nav-link--login:focus-visible {
-  background: #ffffff;
-  color: #6b6b05;
-  border-color: #6b6b05;
-}
-
-.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; 
-  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 p {
-  margin: 24px 0 32px;
-  line-height: 1.8;
-}
-
-.hero__right {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.image-card {
-  width: 100%;
-  max-width: 396px;
-  overflow: hidden;
-  border-radius: 30px;
-}
-
-.hero-image {
-  width: 100%;
-  max-width: 396px;
-  max-height: 464px;
-  height: auto;
-  border-radius: 30px;
-  object-fit: cover;
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
-}
-
-@media (max-width: 900px) {
-  .hero {
-    grid-template-columns: 1fr;
-    padding: 30px 0;
-  }
-
-  .hero__right {
-    order: -1;
-  }
-
-  .hero-image {
-    min-height: 320px;
-  }
-}
-
-/* Carousel gallery */
-.gallery__carousel {
-  position: relative;
-}
-
-.gallery__track {
-  display: flex;
-  gap: 20px;
-  overflow: hidden;
-  margin-bottom: 30px; /* Space between photos and dots */
-  scroll-behavior: smooth;
-}
-
-.gallery__item {
-  flex: 0 0 calc((100% - 40px) / 3);
-  min-width: calc((100% - 40px) / 3);
-  border-radius: 24px;
-  overflow: hidden;
-  background: #fff;
-  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
-  aspect-ratio: 2 / 3;
-}
-
-.gallery__item img {
-  width: 100%;
-  height: 100%;
-  display: block;
-  object-fit: cover;
-}
-
-.gallery__arrow {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 48px;
-  height: 48px;
-  display: grid;
-  place-items: center;
-  border-radius: 0;
-  background: none;
-  backdrop-filter: none;
-  border: none;
-  color: #ffffff;
-  cursor: pointer;
-  font-size: 1.6rem;
-  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-  transition: transform 0.2s ease, color 0.2s ease;
-  z-index: 2;
-}
-
-.gallery__arrow:hover {
-  transform: translateY(-50%) scale(1.15);
-  color: #e5e1b7;
-}
-
-.gallery__arrow--prev {
-  left: 12px;
-}
-
-.gallery__arrow--next {
-  right: 12px;
-}
-
-/* Center arrow removed – using side arrows only */
-}
-
-@media (max-width: 900px) {
-  .gallery__track {
-    gap: 16px;
-  }
-
-  .gallery__item {
-    flex: 0 0 100%;
-    min-width: 100%;
-  }
-}
-
-/* --- 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 {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.gallery__handle {
-  display: flex;
-  align-items: center;
-  font-size: 1.1rem;
-  font-weight: 700;
-  color: var(--black);
-  gap: 6px;
-}
-
-.gallery__icon {
-  font-size: 1.15rem;
-  color: #DD541A;
-}
-
-.gallery__at {
-  font-size: 1.1rem;
-  color: #222;
-}
-
-.gallery__brand {
-  font-family: 'Inter', sans-serif;
-  color: #DD541A;
-}
-
-/* Footer */
-.footer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 16px 24px;
-  border: none;
-  margin-top: 40px;
-}
-
-.footer__link {
-  color: var(--black);
-  text-decoration: underline;
-  font-size: 0.8rem;
-  font-weight: 400;
-}

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,31 @@ button:active {
     .image-section {
         min-height: 300px;
     }
+}
 
-    .header {
-        flex-direction: column;
-        gap: 15px;
-    }
 
-    .header-buttons {
-        width: 100%;
-        flex-direction: column;
-    }
+/* --- Snackbar --- */
 
-    .header-btn {
-        width: 100%;
-        text-align: center;
-    }
+.snackbar {
+    position: fixed;
+    bottom: 30px;
+    left: 50%;
+    transform: translateX(-50%) translateY(100px);
+    background: var(--olive);
+    color: var(--white);
+    padding: var(--space-3) var(--space-6);
+    border-radius: var(--radius-pill);
+    font-size: 1rem;
+    font-weight: 600;
+    font-family: var(--font-main);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+    opacity: 0;
+    transition: transform 0.4s ease, opacity 0.4s ease;
+    z-index: 9999;
+    pointer-events: none;
+}
+
+.snackbar--visible {
+    transform: translateX(-50%) translateY(0);
+    opacity: 1;
 }

datenschutz.html

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Invité | Datenschutz</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>Datenschutzerklärung</h1>
+
+    <h2>1. Verantwortliche Stelle</h2>
+    <p>
+      Invité GmbH<br>
+      Musterstrasse 12<br>
+      7000 Chur<br>
+      Schweiz<br>
+      E-Mail: datenschutz@invite-cooking.ch
+    </p>
+
+    <h2>2. Erhebung und Verarbeitung personenbezogener Daten</h2>
+    <p>
+      Beim Besuch unserer Website werden automatisch Informationen allgemeiner Natur erfasst.
+      Diese Informationen (Server-Logfiles) beinhalten die Art des Webbrowsers, das verwendete
+      Betriebssystem, den Domainnamen Ihres Internet-Service-Providers, Ihre IP-Adresse und
+      Ähnliches. Sie werden ausschliesslich zur technischen Bereitstellung und Verbesserung
+      unserer Website verwendet.
+    </p>
+
+    <h2>3. Registrierung und Nutzerkonto</h2>
+    <p>
+      Bei der Erstellung eines Nutzerkontos erheben wir folgende Daten: Name, E-Mail-Adresse
+      und Passwort. Diese Daten werden ausschliesslich zur Bereitstellung unserer Dienste
+      verwendet und nicht an Dritte weitergegeben.
+    </p>
+
+    <h2>4. Cookies</h2>
+    <p>
+      Unsere Website verwendet Cookies, um die Nutzererfahrung zu verbessern. Cookies sind
+      kleine Textdateien, die auf Ihrem Endgerät gespeichert werden. Sie können die Verwendung
+      von Cookies in Ihren Browsereinstellungen deaktivieren. Bitte beachten Sie, dass dadurch
+      die Funktionalität der Website eingeschränkt sein kann.
+    </p>
+
+    <h2>5. Datenweitergabe an Dritte</h2>
+    <p>
+      Eine Übermittlung Ihrer persönlichen Daten an Dritte findet nicht statt, es sei denn,
+      wir sind gesetzlich dazu verpflichtet oder Sie haben Ihre ausdrückliche Einwilligung
+      erteilt.
+    </p>
+
+    <h2>6. Datensicherheit</h2>
+    <p>
+      Wir setzen technische und organisatorische Sicherheitsmassnahmen ein, um Ihre Daten
+      gegen zufällige oder vorsätzliche Manipulation, Verlust, Zerstörung oder den Zugriff
+      unberechtigter Personen zu schützen. Unsere Sicherheitsmassnahmen werden entsprechend
+      der technologischen Entwicklung fortlaufend verbessert.
+    </p>
+
+    <h2>7. Ihre Rechte</h2>
+    <p>
+      Sie haben jederzeit das Recht auf Auskunft über die bei uns gespeicherten
+      personenbezogenen Daten. Ebenso haben Sie das Recht auf Berichtigung, Löschung
+      oder Einschränkung der Verarbeitung Ihrer Daten. Bitte wenden Sie sich dazu an:
+      datenschutz@invite-cooking.ch
+    </p>
+
+    <h2>8. Änderungen dieser Datenschutzerklärung</h2>
+    <p>
+      Wir behalten uns vor, diese Datenschutzerklärung gelegentlich anzupassen, damit sie
+      stets den aktuellen rechtlichen Anforderungen entspricht oder um Änderungen unserer
+      Leistungen umzusetzen. Für Ihren erneuten Besuch gilt dann die neue Datenschutzerklärung.
+    </p>
+  </main>
+
+  <footer class="footer">
+    <a href="impressum.html" class="footer__link">Impressum</a>
+    <a href="datenschutz.html" class="footer__link">Datenschutz</a>
+  </footer>
+</body>
+</html>

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,9 @@
     </form>
   </main>
 
-  <footer class="site-footer">
-    <p>&copy; Social Cooking</p>
+  <footer class="footer">
+    <a href="impressum.html" class="footer__link">Impressum</a>
+    <a href="datenschutz.html" class="footer__link">Datenschutz</a>
   </footer>
 
   <script src="js/event_create.js"></script>

event_detail.html

@@ -7,6 +7,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Jost:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="css/stylesheet_global.css">
     <link rel="stylesheet" href="css/event_overview.css">
 </head>
 <body>
@@ -15,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>
@@ -35,6 +36,10 @@
 
 <!-- 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>
+  <a href="datenschutz.html" class="footer__link">Datenschutz</a>
+</footer>
 
 </body>
 </html>

event_overview.html

@@ -8,7 +8,7 @@
     <!-- Stylesheet für diese Seite-->
     <link rel="stylesheet" href="css/stylesheet_global.css">
     <!-- Globales Stylesheet -->
-    <link rel="stylesheet" href="stylesheet.css">
+    <link rel="stylesheet" href="css/event_overview.css">
 
 
 </head>
@@ -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,9 @@
 
 <!-- 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>
+  <a href="datenschutz.html" class="footer__link">Datenschutz</a>
+</footer>
 </body>
 </html>

impressum.html

@@ -0,0 +1,69 @@
+<!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>
+    <a href="datenschutz.html" class="footer__link">Datenschutz</a>
+  </footer>
+</body>
+</html>

index.html

@@ -4,7 +4,8 @@
   <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/landingpage.css" />
+  <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>
 <body>
@@ -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,22 @@
           </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>
+      <a href="datenschutz.html" class="footer__link">Datenschutz</a>
     </footer>
 </body>
 </html>

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();
   });
 }

js/login.js

@@ -45,10 +45,11 @@ function validateForm(event) {
 
     // Wenn alle Validierungen bestanden, Form absenden
     if (isValid) {
-        //alert('Login erfolgreich! (Dies ist eine Demo)');
-
-    // Weiterleitung zur event overview Page
-        window.location.href = 'event_overview.html';
+        var snackbar = document.getElementById('snackbar');
+        snackbar.classList.add('snackbar--visible');
+        setTimeout(function() {
+            window.location.href = 'event_overview.html';
+        }, 2000);
     }
 }
 

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/landingpage.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>
@@ -58,7 +56,12 @@
             </form>
         </div>
     </div>
-    </div>  <!-- Schließt main-content -->
+    </div>  <!-- Schliesst main-content -->
+    <div class="snackbar" id="snackbar">Willkommen zurück! Du wirst weitergeleitet...</div>
     <script src="js/login.js"></script>
+    <footer class="footer">
+      <a href="impressum.html" class="footer__link">Impressum</a>
+      <a href="datenschutz.html" class="footer__link">Datenschutz</a>
+    </footer>
 </body>
 </html>

signup.html

@@ -81,5 +81,9 @@
         </div>
     </div>
     <script src="js/signup.js"></script>
+    <footer class="footer">
+      <a href="impressum.html" class="footer__link">Impressum</a>
+      <a href="datenschutz.html" class="footer__link">Datenschutz</a>
+    </footer>
 </body>
 </html>