diff --git a/css/event_create.css b/css/event_create.css
index 86acb3e..cc2ebdc 100644
--- a/css/event_create.css
+++ b/css/event_create.css
@@ -30,7 +30,7 @@
 }
 
 .submission-success {
-  padding: var(--space-4) 0 var(--space-7);
+  padding: var(--space-24) 0 var(--space-7);
 }
 
 .submission-success-title-row {
@@ -76,7 +76,9 @@
 }
 
 .startseite {
-  display: flex;
+  display: grid;  
+  grid-template-columns: 1fr 1fr;
+  gap: 80px;
 }
 
 .step-layout--intro {
@@ -91,11 +93,11 @@
 .form-field,
 fieldset {
   display: grid;
-  gap: var(--space-4);
+  gap: var(--space-24);
 }
 
 .step-copy {
-  gap: var(--space-4);
+  gap: var(--space-24);
   align-content: start;
 }
 
@@ -130,25 +132,14 @@ fieldset {
   background: linear-gradient(135deg, var(--color-surface), var(--color-surface-soft));
 }
 
-.intro-card--image {
-  width: 60%;
-  padding: 0;
-  border: 0;
-  overflow: hidden;
-  background: transparent;
-  box-shadow: none;
-}
-
 .intro-image {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
   border-radius: var(--radius-lg); 
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
 }
 
-
 .field-hint {
   margin: -0.25rem 0 0;
   color: var(--color-muted);
@@ -162,8 +153,8 @@ input[type="number"],
 textarea {
   font-family: var(--font-main);
   font-weight: 400;
-  font-size: 1.25rem;;
-  padding: 1rem 1.25rem;
+  font-size: 1.25rem;
+  padding: var(--space-16) var(--space-20);
   border: 1.5px solid var(--olive-light);
   border-radius: var(--radius-md);
   background: var(--butter-light);
@@ -211,7 +202,7 @@ textarea:focus {
 
 .field-row {
   display: grid;
-  gap: var(--space-4);
+  gap: var(--space-24);
 }
 
 .option-grid {
@@ -232,7 +223,7 @@ textarea:focus {
 .option-card--with-icon {
   justify-items: center;
   align-content: center;
-  gap: var(--space-2);
+  gap: var(--space-12);
   color: var(--brown);
 }
 
@@ -329,7 +320,7 @@ textarea:focus {
 .counter-value-group {
   display: grid;
   justify-items: stretch;
-  row-gap: var(--space-1);
+  row-gap: var(--space-8);
   width: 6rem;
 }
 
@@ -342,7 +333,7 @@ textarea:focus {
 
 .review-card {
   display: grid;
-  gap: var(--space-4);
+  gap: var(--space-24);
   padding: 0;
   border: 0;
   border-radius: 0;
@@ -362,13 +353,13 @@ textarea:focus {
 
 .review-list {
   display: grid;
-  gap: var(--space-4);
+  gap: var(--space-24);
   margin: 0;
 }
 
 .review-item {
   display: grid;
-  gap: var(--space-2);
+  gap: var(--space-12);
   padding: 1rem 1.1rem;
   border: 1px solid var(--input-border-soft);
   border-radius: 1.125rem;
@@ -406,7 +397,7 @@ textarea:focus {
 .review-gallery {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--space-1);
+  gap: var(--space-8);
 }
 
 .review-gallery__thumb {
@@ -426,7 +417,7 @@ textarea:focus {
 .flow-footer {
   bottom: 0;
   backdrop-filter: none;
-  padding-top: var(--space-4);
+  padding-top: var(--space-24);
   padding-bottom: env(safe-area-inset-bottom);
 }
 
@@ -479,8 +470,8 @@ textarea:focus {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--space-4);
-  padding: var(--space-4) 0;
+  gap: var(--space-24);
+  padding: var(--space-24) 0;
   width: 100%;
 }
 
@@ -504,7 +495,7 @@ textarea:focus {
 
 .button--intro {
   justify-self: start;
-  margin-top: var(--space-2);
+  margin-top: var(--space-12);
 }
 
 .gallery-upload {
@@ -524,8 +515,8 @@ textarea:focus {
   display: grid;
   place-items: center;
   align-content: center;
-  gap: var(--space-1);
-  padding: var(--space-1);
+  gap: var(--space-8);
+  padding: var(--space-8);
   border: 1.5px solid var(--olive-light);
   border-radius: var(--radius-md);
   background: var(--butter-light);
@@ -626,7 +617,7 @@ textarea:focus-visible {
     position: static;
     width: 100%;
     max-width: 100%;
-    margin-bottom: var(--space-2);
+    margin-bottom: var(--space-12);
   }
 
   .progress-wrap {
diff --git a/css/event_overview.css b/css/event_overview.css
index 432bbaa..0fe5ac3 100644
--- a/css/event_overview.css
+++ b/css/event_overview.css
@@ -13,7 +13,7 @@
 
 /* Heading hierarchy: page title > detail title > card title > section title */
 .overview-title {
-    margin: 0 0 var(--space-4);
+    margin: 0 0 var(--space-24);
     color: var(--olive);
     font-family: "Bagel Fat One", cursive;
     font-size: clamp(38px, 5vw, 44px);
@@ -25,15 +25,15 @@
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
-    gap: var(--space-4);
+    gap: var(--space-24);
 }
 
 .overview-title-row .overview-title {
-    margin-bottom: var(--space-4);
+    margin-bottom: var(--space-24);
 }
 
 .detail-title {
-    margin-bottom: var(--space-4);
+    margin-bottom: var(--space-24);
 }
 
 .detail-section-title {
@@ -54,7 +54,7 @@
   font-weight: 600;
   letter-spacing: var(--ls-sm);
   line-height: 1;
-  margin-bottom: var(--space-1);
+  margin-bottom: var(--space-8);
 }
 
 .filter-row {
@@ -67,7 +67,7 @@
 
 .category-group {
     display: flex;
-    gap: var(--space-1);
+    gap: var(--space-8);
     margin-bottom: 0;
     flex-wrap: wrap;
     flex: 1;
@@ -81,7 +81,7 @@
     font-weight: 400;
     font-size: 1rem;
     line-height: 1;
-    padding: var(--space-1) var(--space-20);
+    padding: var(--space-8) var(--space-20);
 }
 
 .meta-filter-group {
@@ -105,7 +105,7 @@
     border-radius: var(--radius-sm);
     background: var(--butter-light);
     height: 37px;
-    padding: 0 var(--space-4);
+    padding: 0 var(--space-24);
     box-sizing: border-box;
 }
 
@@ -138,7 +138,7 @@
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='currentColor' stroke-width='1.5' fill='none' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     color: var(--black);
-    background-position: right var(--space-4) center;
+    background-position: right var(--space-24) center;
 }
 
 /* ---------------------------------------------------------
@@ -183,7 +183,7 @@
     /* Primary metadata line: location + date/time/guest counters. */
     display: flex;
     align-items: center;
-    gap: var(--space-4);
+    gap: var(--space-24);
     margin-bottom: var(--space-0);
     flex-wrap: wrap;
 }
@@ -203,7 +203,7 @@
 .event-meta-row {
     display: flex;
     align-items: center;
-    gap: var(--space-1);
+    gap: var(--space-8);
     flex-wrap: wrap;
 }
 
@@ -215,7 +215,7 @@
     font-weight: 400;
     font-size: 1rem;
     line-height: 1;
-    padding: var(--space-1) var(--space-20);
+    padding: var(--space-8) var(--space-20);
 }
 
 .event-spec-chip {
@@ -247,7 +247,7 @@
 
 .button-plaetze {
     border: none;
-    padding: var(--space-01) var(--space-4);
+    padding: var(--space-8) var(--space-24);
     font-family: var(--font-main);
     font-weight: 400;
     font-size: 1.125rem;
@@ -263,7 +263,7 @@
 .event-spots-full, .detail-spots-pill-full {
     /* Sold-out visual state, intentionally high-contrast and always filled. */
     border: 1.5px solid var(--tomato-light);
-    padding: var(--space-01) var(--space-4);
+    padding: var(--space-8) var(--space-24);
     border-radius: var(--radius-pill);
     color: var(--butter-light);
     background: var(--tomato-light);
@@ -399,7 +399,7 @@
     font-size: 1rem;
     line-height: 1;
     letter-spacing: var(--ls-la);
-    padding: var(--space-1) var(--space-20);
+    padding: var(--space-8) var(--space-20);
 }*/
 
 .detail-gallery {
@@ -524,7 +524,7 @@
 .detail-panel {
     background: var(--butter-light);
     border-radius: var(--radius-md);
-    padding: var(--space-4) var(--space-5);
+    padding: var(--space-24) var(--space-5);
 }
 
 .detail-panel-compact {
@@ -623,7 +623,7 @@
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-interaction);
 
-    padding: var(--space-4) var(--space-5);
+    padding: var(--space-24) var(--space-5);
     margin-top: var(--space-40);
     position: sticky;
     bottom: var(--space-40);
@@ -671,13 +671,13 @@
 .detail-action-buttons {
     display: flex;
     align-items: center;
-    gap: var(--space-1);
+    gap: var(--space-8);
 }
 
 
 .detail-spots-pill {
     border: none;
-    padding: var(--space-01) var(--space-4);
+    padding: var(--space-8) var(--space-24);
     font-family: var(--font-main);
     font-weight: 400;
     font-size: 1rem;
diff --git a/css/index.css b/css/index.css
index 29bb4d3..2c56295 100644
--- a/css/index.css
+++ b/css/index.css
@@ -152,7 +152,7 @@
 .how-step_icon {
   font-size: 3.5rem;
   color: var(--brown);
-  margin: var(--space-4) 0;
+  margin: var(--space-24) 0;
 }
 
 .how-step__png {
@@ -166,7 +166,7 @@
 }
 
 .how-step_text {
-  margin-bottom: var(--space-4);
+  margin-bottom: var(--space-24);
   text-align: center;
 }
 
@@ -308,11 +308,11 @@
 }
 
 .gallery__arrow--prev {
-  left: var(--space-4);
+  left: var(--space-24);
 }
 
 .gallery__arrow--next {
-  right: var(--space-4);
+  right: var(--space-24);
 }
 
 
@@ -433,7 +433,7 @@
 /* --- FAQ Section: Akkordion --- */
 
 .faq-section {
-  padding: var(--space-8) var(--space-4);
+  padding: var(--space-8) var(--space-24);
   margin: var(--space-8) 0 var(--space-5);
 }
 
@@ -469,7 +469,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--space-3) var(--space-4);
+  padding: var(--space-3) var(--space-24);
   background: transparent;
   border: none;
   cursor: pointer;
@@ -513,7 +513,7 @@
 }
 
 .faq-content {
-  padding: 0 var(--space-4);
+  padding: 0 var(--space-24);
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s ease, padding 0.3s ease;
@@ -531,7 +531,7 @@
 .faq-trigger[aria-expanded="true"] + .faq-content {
   display: block;
   max-height: 500px;
-  padding: var(--space-3) var(--space-4);
+  padding: var(--space-3) var(--space-24);
 }
 
 
@@ -539,7 +539,7 @@
 
 @media (max-width: 768px) {
   .faq-section {
-    padding: var(--space-40) var(--space-4);
+    padding: var(--space-40) var(--space-24);
     margin: var(--space-40) 0 var(--space-5);
   }
 
diff --git a/css/login_signup.css b/css/login_signup.css
index b257730..ba67901 100644
--- a/css/login_signup.css
+++ b/css/login_signup.css
@@ -4,139 +4,76 @@
    typography) are in stylesheet_global.css
    =========================================== */
 
-
-/* --- Page layout --- */
-
-.container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex: 1;
-    padding: var(--space-4);
+.container-login {
+    background-color: var(--butter-light);
+    border: 1.5px solid var(--olive-light);
+    border-radius: var(--radius-lg);
+    padding: var(--space-40) var(--space-80) var(--space-80) var(--space-80);
 }
 
-.container {
-    background-color: var(--white);
+.container-registration {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-64);
+
+    background-color: var(--butter-light);
+    border: 1.5px solid var(--olive-light);
     border-radius: var(--radius-lg);
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-    max-width: 1000px;
-    width: 100%;
-    display: flex;
-    gap: var(--space-4);
     overflow: hidden;
 }
 
+.text-section {
+    padding: var(--space-40) var(--space-80) var(--space-80) var(--space-80);
+}
+
 
 /* --- Image section --- */
 
 .image-section {
-    flex: 1;
-    background-color: var(--butter-light);
+    height: 100%;
     display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 500px;
 }
 
 .image-section img {
     width: 100%;
     height: 100%;
     object-fit: cover;
+    display: block; 
 }
 
 
-/* --- Form section --- */
-
-.form-section {
-    flex: 1;
-    padding: 40px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-
-h1 {
-    color: var(--black);
-    margin-bottom: var(--space-4);
-    text-align: center;
-}
-
-
-/* --- Form elements --- */
-
-.form-group {
-    margin-bottom: var(--space-4);
-}
-
 .form-group.has-error {
-    margin-bottom: var(--space-2);
-}
-
-label {
-    display: block;
-    margin-bottom: var(--space-1);
-    color: var(--black);
-    font-weight: 600;
-    font-size: 0.9rem;
+    margin-bottom: 0;
 }
 
 input[type="text"],
 input[type="email"],
 input[type="password"] {
-    width: 100%;
-    padding: var(--space-2);
-    border: 2px solid var(--olive-light);
-    border-radius: var(--radius-md);
-    font-size: 0.9rem;
+    font-size: 1.125rem;
     font-family: var(--font-main);
+    width: 100%;
+    padding: var(--space-8) var(--space-16);
+    border: 1.5px solid var(--olive-light);
+    border-radius: var(--radius-md);
+    background: transparent;
     transition: border-color 0.3s ease;
-    background: var(--white);
-    color: var(--black);
 }
 
 input:focus {
     outline: none;
-    border-color: var(--olive);
-    box-shadow: 0 0 5px rgba(107, 107, 5, 0.25);
-}
-
-button[type="submit"] {
-    width: 100%;
-    padding: var(--space-2);
-    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, transform 0.2s ease;
-    margin-top: var(--space-2);
-}
-
-button[type="submit"]:hover {
-    background-color: var(--olive-dark);
-    transform: translateY(-1px);
-}
-
-button[type="submit"]:active {
-    background-color: var(--olive-dark);
-    transform: translateY(0);
+    border: 2px solid var(--olive);
 }
 
 
 /* --- Info box --- */
-
 .info-box {
-    background-color: var(--butter-light);
-    border-left: 4px solid var(--olive);
+    background-color: var(--olive-light);
     padding: var(--space-16);
     margin-bottom: var(--space-40);
-    border-radius: 4px;
-    font-size: 0.9rem;
+    border-radius: var(--radius-md);
+    font-size: 1rem;
     color: var(--black);
-    line-height: 1.5;
+    line-height: 1.4;
 }
 
 
@@ -150,13 +87,12 @@ button[type="submit"]:active {
 
 .form-group.has-error input {
     border-color: var(--error);
-    box-shadow: 0 0 5px rgba(212, 75, 36, 0.3);
 }
 
 .form-group.has-error .error-message--field-callout {
     display: block;
 }
-
+*/
 
 /* --- Modal / Popup --- */
 
@@ -232,7 +168,6 @@ button[type="submit"]:active {
 
 /* --- Footer --- */
 
-
 .footer {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
@@ -263,7 +198,7 @@ button[type="submit"]:active {
 .footer-right {
   justify-self: end;
   display: flex;
-  gap: var(--space-4);
+  gap: var(--space-24);
 }
 
 
diff --git a/css/my_profil.css b/css/my_profil.css
index f45da26..887d9ac 100644
--- a/css/my_profil.css
+++ b/css/my_profil.css
@@ -5,7 +5,7 @@
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
-    gap: var(--space-4);
+    gap: var(--space-24);
     margin-bottom: var(--space-5);
 }
 
@@ -36,7 +36,7 @@
 .profile-grid {
     display: grid;
     grid-template-columns: 1fr;
-    gap: var(--space-4);
+    gap: var(--space-24);
 }
 
 .btn-count {
@@ -72,7 +72,7 @@
 
 .profile-card-list {
     display: grid;
-    gap: var(--space-2);
+    gap: var();
 }
 
 /* Einzelne Eventkarte für "Meine Events" und "Meine Anmeldungen". */
@@ -146,7 +146,7 @@
 .profile-event-actions {
     display: flex;
     align-items: center;
-    gap: var(--space-2);
+    gap: var();
 }
 
 .profile-empty {
@@ -188,16 +188,14 @@
     gap: var(--space-16);
 }
 
-.form-group {
-    margin-bottom: var(--space-16);
-}
+/*
 
 .form-group label {
     display: block;
     margin-bottom: 0.35rem;
     font-size: 0.95rem;
     font-weight: 500;
-}
+}*/
 
 .form-group input {
     width: 100%;
@@ -243,7 +241,7 @@
 
 .profile-cta-row {
     display: flex;
-    gap: var(--space-2);
+    gap: var();
     margin-top: var(--space-16);
 }
 
diff --git a/css/stylesheet_global.css b/css/stylesheet_global.css
index c650c64..3e74d74 100644
--- a/css/stylesheet_global.css
+++ b/css/stylesheet_global.css
@@ -42,16 +42,17 @@
 
     /* Spacing Scale > 1rem = 16px*/
     --space-0: 0.25rem; /* 4px */
-    --space-01: 0.375rem; /* 6px */
-    --space-1: 0.5rem; /* 8px */
-    --space-2: 0.75rem; /* 12px */
+    --space-6: 0.375rem; /* 6px */
+    --space-8: 0.5rem; /* 8px */
+    --space-12: 0.75rem; /* 12px */
     --space-16: 1rem; /* 16px */
     --space-20: 1.25rem; /* 20px */
-    --space-4: 1.5rem; /* 24px */
+    --space-24: 1.5rem; /* 24px */
     --space-5: 2rem; /* 32px */
     --space-40: 2.5rem; /* 40px */
     --space-7: 3rem; /* 48px */
-    --space-8: 4rem; /* 64px */
+    --space-64: 4rem; /* 64px */
+    --space-80: 5rem; /* 80px */
 
 
     /* Radius Scale */
@@ -81,32 +82,25 @@ img {
 
 h1, h2, h3, h4, h5, h6 {
     font-family: 'Bagel Fat One';
+    font-weight: 500;
+    letter-spacing: var(--ls-sm);
+    line-height: 120%;
+    color: var(--brown);
 }
 
 h1 {
     font-size: clamp(2.25rem, 5vw, 3rem);
-    font-weight: 600;
-    line-height: 120%;
     letter-spacing: var(--ls-sm);
-    color: var(--brown);
     margin-bottom: var(--space-5);
 }
 
 h2 {
     font-size: 2.5rem;
-    font-weight: 600;
-    line-height: 120%;
-    letter-spacing: var(--ls-sm);
-    color: var(--brown);
-    margin-bottom: var(--space-4);
+    margin-bottom: var(--space-24);
 }
 
 h3 {
     font-size: 2rem;
-    font-weight: 600;
-    line-height: 120%;
-    letter-spacing: var(--ls-sm);
-    color: var(--brown);
     margin-bottom: 1.5rem;
 }
 
@@ -121,19 +115,20 @@ p {
 .p-small {
     font-family: var(--font-main);
     font-size: 1rem;
+    font-weight: 400;
     line-height: 1.5;
     margin-bottom: 0rem;
 }
 
 .label-input-field {
   font-family: var(--font-main);
-  font-size: 1.125rem;
-  font-weight: 600;
-  letter-spacing: var(--ls-sm);
+  font-size: 1rem;
+  font-weight: 400;
   line-height: 1;
-  margin-bottom: var(--space-16);
+  margin-bottom: var(--space-8);
 }
 
+/*
 label {
   font-family: var(--font-main);
   font-size: 1.125rem;
@@ -141,7 +136,7 @@ label {
   letter-spacing: var(--ls-sm);
   line-height: 1;
   margin-bottom: var(--space-0);
-}
+}*/
 
 .option {
   font-family: var(--font-main);
@@ -154,7 +149,7 @@ label {
 
 .link-text a{
     color: var(--blue);
-    margin-top: var(--space-4);
+    margin-top: var(--space-24);
     text-decoration: none;
     transition: color 0.3s ease;
 }
@@ -177,7 +172,7 @@ label {
 .error-message {
   font-family: var(--font-main);
   font-size: 1rem;
-  line-height: 1.4;
+  line-height: 1.5;
 }
 
 .error-message--inline {
@@ -188,14 +183,13 @@ label {
   display: none;
   width: fit-content;
   max-width: min(100%, 20rem);
-  padding: 0.35rem 0.8rem;
+  padding: var(--space-6) var(--space-16);
+  /*margin-bottom: -32px;*/
   border-radius: var(--radius-md);
+  
   background: var(--error);
-  color: var(--white);
+  color: var(--butter-light);
   text-align: center;
-  font-size: 0.8125rem;
-  line-height: 1.2;
-  white-space: normal;
   overflow-wrap: anywhere;
   position: relative;
 }
@@ -247,8 +241,12 @@ label {
 
 /* Margins */
 
+.margin-bottom-16 {
+    margin-bottom: var(--space-16);
+}
+
 .margin-bottom-24 {
-    margin-bottom: var(--space-4);
+    margin-bottom: var(--space-24);
 }
 
 .margin-bottom-40 {
@@ -428,7 +426,7 @@ label {
 /* Buttons */
 .button-primary {
     display: inline-block;
-    padding: var(--space-01) var(--space-4);
+    padding: var(--space-6) var(--space-24);
     background-color: var(--olive);
     border: 1.5px solid var(--olive);
     border-radius: var(--radius-lg);
@@ -451,7 +449,7 @@ label {
     background: transparent;
     color: var(--olive-dark);
     opacity: 0.6;
-    padding: var(--space-01) 0 var(--space-01) var(--space-4);
+    padding: var() 0 var(--space-6) var(--space-24);
     cursor: not-allowed;
 }
 
@@ -602,7 +600,7 @@ label {
     font-weight: 400;
     line-height: 1;
     height: 44px;
-    padding: 0 var(--space-4);
+    padding: 0 var(--space-24);
     display: inline-flex;
     align-items: center;
     gap: var(--space-16);
@@ -806,7 +804,7 @@ label {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
-    gap: var(--space-4);
+    gap: var(--space-24);
 }
 
 .modal-header h2 {
@@ -859,14 +857,14 @@ label {
 }
 
 .modal-body {
-    padding: var(--space-4) 0 0;
+    padding: var(--space-24) 0 0;
     text-align: left;
     line-height: 1.7;
 }
 
 .modal-footer {
     display: flex;
-    gap: var(--space-2);
+    gap: var();
     justify-content: center;
 }
 
@@ -949,6 +947,27 @@ label {
     cursor: pointer;
 }
 
+/* Formulare */
+
+input[type="text"],
+input[type="email"],
+input[type="password"] {
+    font-size: 1.125rem;
+    font-family: var(--font-main);
+    width: 100%;
+    padding: var(--space-12) var(--space-16);
+    border: 1.5px solid var(--olive-light);
+    border-radius: var(--radius-md);
+    background: transparent;
+    transition: border-color 0.3s ease;
+}
+
+input:focus {
+    outline: none;
+    border: 2px solid var(--olive);
+}
+
+
 /* Footer */
 
 .footer {
@@ -961,7 +980,7 @@ label {
 
 .footer-links {
   display: flex;
-  gap: var(--space-4);
+  gap: var(--space-24);
 }
 
 /* Left aligned */
@@ -978,6 +997,6 @@ label {
 .footer-right {
   justify-self: end;
   display: flex;
-  gap: var(--space-4);
+  gap: var(--space-24);
 }
 
diff --git a/event_create.html b/event_create.html
index ffc061a..4887b14 100644
--- a/event_create.html
+++ b/event_create.html
@@ -32,13 +32,13 @@
 </header>
 
 
-  <main class="event-create-page">
+  <main class="event-create-page layout-narrow">
     <section class="event-flow-header" aria-label="Event erstellen Aktionen">
     </section>
 
     <form id="eventForm" class="event-form" novalidate>
       <section
-        class="step step--active step--intro layout-wide"
+        class="step step--active step--intro"
         data-step="0"
         aria-labelledby="intro-title"
       >
@@ -55,7 +55,7 @@
             </button>
           </div>
 
-          <div class="intro-card intro-card--image hero__right" aria-label="Stimmungsbild zur Event-Erstellung">
+          <div class="hero__right" aria-label="Stimmungsbild zur Event-Erstellung">
             <img
               class="intro-image"
               src="assets/eventcreate_foodtable-new.jpg"
@@ -65,7 +65,7 @@
         </div>
       </section>
 
-      <section class="step layout-narrow" data-step="1" aria-labelledby="step1-title">
+      <section class="step" data-step="1" aria-labelledby="step1-title">
         <div class="step-layout">
           <div class="step-copy">
             <p class="badge">Schritt 1</p>
@@ -145,7 +145,7 @@
         </div>
       </section>
 
-      <section class="step layout-narrow" data-step="2" aria-labelledby="step2-title">
+      <section class="step" data-step="2" aria-labelledby="step2-title">
         <div class="step-layout">
           <div class="step-copy">
             <p class="badge">Schritt 2</p>
@@ -194,7 +194,7 @@
         </div>
       </section>
 
-      <section class="step layout-narrow" data-step="3" aria-labelledby="step3-title">
+      <section class="step" data-step="3" aria-labelledby="step3-title">
         <div class="step-layout">
           <div class="step-copy">
             <p class="badge">Schritt 3</p>
@@ -235,7 +235,7 @@
         </div>
       </section>
 
-      <section class="step layout-narrow" data-step="4" aria-labelledby="step4-title">
+      <section class="step" data-step="4" aria-labelledby="step4-title">
         <div class="step-layout">
           <div class="step-copy">
             <p class="badge">Schritt 4</p>
@@ -261,7 +261,7 @@
         </div>
       </section>
 
-      <section class="step layout-narrow" data-step="5" aria-labelledby="step5-title">
+      <section class="step" data-step="5" aria-labelledby="step5-title">
         <div class="step-layout">
           <div class="step-copy">
             <p class="badge">Schritt 5</p>
@@ -285,7 +285,7 @@
         </div>
       </section>
 
-      <section class="step layout-narrow" data-step="6" aria-labelledby="step6-title">
+      <section class="step" data-step="6" aria-labelledby="step6-title">
         <div class="step-layout">
           <div class="step-copy">
             <p class="badge">Schritt 6</p>
@@ -322,7 +322,7 @@
         </div>
       </section>
 
-      <section class="step layout-narrow" data-step="7" aria-labelledby="step7-title">
+      <section class="step" data-step="7" aria-labelledby="step7-title">
         <div class="step-layout">
           <div class="step-copy">
             <p class="badge">Schritt 7</p>
@@ -404,7 +404,7 @@
       </section>
 
 
-<div class="flow-footer layout-narrow" id="flowFooter" hidden>
+<div class="flow-footer" id="flowFooter" hidden>
   <div class="flow-actions">
     <button type="button" id="backButton" class="button-secondary">
       Zurück
diff --git a/login.html b/login.html
index 946f00f..cd14050 100644
--- a/login.html
+++ b/login.html
@@ -5,10 +5,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Invité | Login</title>
 
-    <!-- Globales Stylesheet -->
-    <link rel="stylesheet" href="css/stylesheet_global.css">
     <!-- Stylesheet für diese Seite -->
     <link rel="stylesheet" href="css/login_signup.css">
+
+    <!-- Globales Stylesheet -->
+    <link rel="stylesheet" href="css/stylesheet_global.css">
     <script src="js/navigation.js" defer></script>
 
 </head>
@@ -26,36 +27,34 @@
 </header>
 
     <!-- Main Content -->
-    <div class="container">
-        <div class="container">
-            <div class="image-section">
-                <img src="assets/index_cooking.jpg" alt="Social Cooking">
-            </div>
+    <div class="container-login layout-narrow">
 
-        <div class="form-section">
+        <div>
             <h1>Login</h1>
 
-            <form id="loginForm" novalidate>
-                <div class="form-group">
-                    <label for="email">E-Mail</label>
-                    <input type="email" id="email" name="email" required placeholder="deine.email@example.com">
-                    <div class="error-message error-message--field-callout" id="emailError">Bitte gib eine gültige E-Mail Adresse ein.</div>
+            <form id="loginForm" novalidate >
+                <div class="form-group margin-bottom-16">
+                    <p class= "label-input-field" for="email">E-Mail</p>
+                    <input type="email" id="email" name="email" required placeholder="Deine E-mail-Adresse">
+                    <div class="error-message error-message--field-callout" id="emailError">Bitte gib eine gültige E-Mail-Adresse ein.</div>
                 </div>
 
-                <div class="form-group">
-                    <label for="passwort">Passwort</label>
-                    <input type="password" id="passwort" name="passwort" required placeholder="Gib dein Passwort ein">
+                <div class="form-group margin-bottom-40">
+                    <p class= "label-input-field" for="passwort">Passwort</p>
+                    <input type="password" id="passwort" name="passwort" required placeholder="Dein Passwort">
                     <div class="error-message error-message--field-callout" id="passwortError">Bitte gib dein Passwort ein.</div>
                 </div>
 
-                <button type="submit" class="button-primary">Login</button>
+                <button class="button-primary margin-bottom-24">Login</button>
 
                 <div class="link-text">
-                    Du hast noch keinen Account? <a href="signup.html">Hier geht es zur Anmeldung.</a>
+                    Du hast noch keinen Account? <a href="signup.html">Hier geht es zur Registration.</a>
                 </div>
             </form>
+
         </div>
     </div>
+
     </div>  <!-- Schliesst container -->
     <div class="snackbar" id="snackbar">Willkommen zurück! Du wirst weitergeleitet...</div>
     <script src="js/login.js"></script>
diff --git a/my_profil.html b/my_profil.html
index 94698db..549b4c9 100644
--- a/my_profil.html
+++ b/my_profil.html
@@ -85,26 +85,26 @@
             <h2 class="panel-title">Profil verwalten</h2>
             <form id="profile-form" novalidate>
                 <div class="form-grid">
-                    <div class="form-group">
+                    <div class="margin-bottom-16">
                         <label for="vorname">Vorname</label>
                         <input type="text" id="vorname" name="vorname" required>
                         <p class="input-error" id="vorname-error">Bitte gib deinen Vornamen ein.</p>
                     </div>
 
-                    <div class="form-group">
+                    <div class="margin-bottom-16">
                         <label for="nachname">Nachname</label>
                         <input type="text" id="nachname" name="nachname" required>
                         <p class="input-error" id="nachname-error">Bitte gib deinen Nachnamen ein.</p>
                     </div>
                 </div>
 
-                <div class="form-group">
+                <div class="margin-bottom-16">
                     <label for="email">E-Mail</label>
                     <input type="email" id="email" name="email" required>
                     <p class="input-error" id="email-error">Bitte gib eine gültige E-Mail-Adresse ein.</p>
                 </div>
 
-                <div class="form-group">
+                <div class="margin-bottom-40">
                     <label for="passwort">Passwort</label>
                     <input type="password" id="passwort" name="passwort" minlength="6" placeholder="Mindestens 6 Zeichen">
                     <p class="input-hint">Nur ausfüllen, wenn du dein Passwort ändern möchtest.</p>
diff --git a/signup.html b/signup.html
index 56b7a4c..e971d08 100644
--- a/signup.html
+++ b/signup.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Kontaktseite - Invité</title>
+    <title>Invité | Registration</title>
 
     <!-- Globales Stylesheet -->
     <link rel="stylesheet" href="css/stylesheet_global.css">
@@ -26,12 +26,8 @@
 </header>
 
     <!-- Main Content -->
-    <div class="container">
-        <div class="container">
-            <div class="image-section">
-                <img src="assets/index_cooking.jpg" alt="Social Cooking">
-            </div>
-
+    <div class="container-registration layout-wide">
+        <div class="text-section">
         <div class="form-section">
             <h1>Erstelle deinen Account</h1>
             
@@ -40,31 +36,31 @@
             </div>
 
             <form id="signupForm" novalidate>
-                <div class="form-group">
-                    <label for="vorname">Vorname *</label>
+                <div class="margin-bottom-16">
+                    <p class= "label-input-field" for="vorname">Vorname*</p>
                     <input type="text" id="vorname" name="vorname" required placeholder="Dein Vorname">
                     <div class="error-message error-message--field-callout" id="vornameError">Bitte gib deinen Vornamen ein.</div>
                 </div>
 
-                <div class="form-group">
-                    <label for="nachname">Nachname *</label>
+                <div class="margin-bottom-16">
+                    <p class= "label-input-field" for="nachname">Nachname*</p>
                     <input type="text" id="nachname" name="nachname" required placeholder="Dein Nachname">
                     <div class="error-message error-message--field-callout" id="nachnameError">Bitte gib deinen Nachnamen ein.</div>
                 </div>
 
-                <div class="form-group">
-                    <label for="email">E-Mail *</label>
-                    <input type="email" id="email" name="email" required placeholder="deine.email@example.com">
-                    <div class="error-message error-message--field-callout" id="emailError">Bitte gib eine gültige E-Mail Adresse ein.</div>
+                <div class="margin-bottom-16">
+                    <p class= "label-input-field" for="email">E-Mail*</p>
+                    <input type="email" id="email" name="email" required placeholder="Deine E-mail-Adresse">
+                    <div class="error-message error-message--field-callout" id="emailError">Bitte gib eine gültige E-Mail-Adresse ein.</div>
                 </div>
 
-                <div class="form-group">
-                    <label for="passwort">Passwort *</label>
+                <div class="margin-bottom-40">
+                    <p class= "label-input-field" for="passwort">Passwort*</p>
                     <input type="password" id="passwort" name="passwort" required placeholder="Mindestens 8 Zeichen">
                     <div class="error-message error-message--field-callout" id="passwortError">Dein Passwort muss mindestens 8 Zeichen lang sein.</div>
                 </div>
 
-                <button type="submit" class="button-primary">Konto erstellen</button>
+                <button type="submit" class="button-primary margin-bottom-24">Konto erstellen</button>
 
 
                 <div class="link-text">
@@ -72,6 +68,13 @@
                 </div>
             </form>
         </div>
+        </div>
+
+
+         <div class="image-section">
+                <img src="assets/index_cooking.jpg" alt="Social Cooking">
+            </div>
+
     </div>
     </div>  <!-- Schliesst container -->