From 2015454f6c0887bff25a1bb377b4c8a9e7902ecb Mon Sep 17 00:00:00 2001
From: oswaldsimona <simona.oswald@stud.fhgr.ch>
Date: Fri, 17 Apr 2026 09:57:41 +0200
Subject: [PATCH] Anpassung Progress Bar Event erstellen

---
 css/event_create.css      | 36 +++++++++++++++++------
 css/index.css             |  4 +--
 css/stylesheet_global.css | 60 ++++++++++++++++++++++++++++-----------
 event_create.html         | 42 +++++++++++++++++----------
 4 files changed, 101 insertions(+), 41 deletions(-)

diff --git a/css/event_create.css b/css/event_create.css
index 5810d07..5adf8a3 100644
--- a/css/event_create.css
+++ b/css/event_create.css
@@ -126,7 +126,14 @@ fieldset {
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
 }
 
-label,
+
+label {
+  font-family: var(--font-main);
+  font-weight: 400;
+  font-size: 1.25rem;
+}
+
+
 legend {
     font-size: 1rem;
     font-weight: 600;
@@ -146,11 +153,15 @@ input[type="date"],
 input[type="time"],
 input[type="number"],
 textarea {
+  font-family: var(--font-main);
+  font-weight: 400;
+  font-size: 1.25rem;;
   padding: 1rem 1.25rem;
   border: 1.5px solid var(--olive-light);
   border-radius: var(--radius-md);
   background: var(--butter-light);
   transition: border-color 0.2s ease;
+
 }
 
 /* Blendet die Standard-Buttons für number inputs aus */
@@ -320,16 +331,24 @@ textarea:focus {
 }
 
 .flow-footer {
-  position: sticky;
   bottom: 0;
-  z-index: 5;
-  margin-top: auto;
-  background: var(--color-bg);
   backdrop-filter: none;
   padding-top: var(--space-4);
   padding-bottom: env(safe-area-inset-bottom);
 }
 
+.flow-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.error-message {
+  order: -1;              /* nach oben verschieben */
+  text-align: center; 
+  width: 100%;
+}
+
 .progress-wrap {
   width: min(100%, var(--content-width));
   margin: 0 auto;
@@ -349,8 +368,8 @@ textarea:focus {
 .progress {
   flex: 1;
   height: 0.3rem;
-  background: var(--color-progress-bg);
-  border-radius: 999px;
+  background: var(--olive-lightg);
+  border-radius: var(--radius-sm);
   overflow: hidden;
 }
 
@@ -508,9 +527,10 @@ textarea:focus-visible {
     justify-content: flex-start;
   }
 
+  /*
   .button--primary {
     width: 100%;
-  }
+  */
 
   .event-flow-header {
     justify-content: flex-start;
diff --git a/css/index.css b/css/index.css
index f130ba3..746e8a9 100644
--- a/css/index.css
+++ b/css/index.css
@@ -55,7 +55,7 @@
 }
 
 /*
-.hero__button-primarys {
+.hero__buttons {
   display: flex;
   gap: var(--space-3);
   flex-wrap: wrap;
@@ -356,7 +356,7 @@
 }
 
 
-/* --- CTA button-primary --- */
+/* --- CTA button --- */
 
 .btn {
   border: none;
diff --git a/css/stylesheet_global.css b/css/stylesheet_global.css
index 2cb741f..091435a 100644
--- a/css/stylesheet_global.css
+++ b/css/stylesheet_global.css
@@ -97,13 +97,18 @@ h2 {
 }
 
 p {
-    font-family: 'Jost', sans-serif;
+    font-family: var(--font-main);
     font-size: 1.125rem;
     line-height: 1.5;
     color: var(--black);
     margin-bottom: 1rem;
 }
 
+.error-message {
+  color: var(--error);
+  font-size: 1rem;
+}
+
 /* Layout */
 
 .main-content {
@@ -161,7 +166,7 @@ p {
 .nav-tab {
     color: var(--black);
     font-size: 1.125rem;
-    font-weight: 500;
+    font-weight: 400;
     letter-spacing: var(--ls-sm);
     line-height: 1;
     text-decoration: none;
@@ -222,27 +227,49 @@ p {
 /* Buttons */
 .button-primary {
     display: inline-block;
-    padding: 0.5rem 1.5rem;
+    padding: 0.375rem 1.5rem;
     background-color: var(--olive);
-    border: none;
+    border: 1.5px solid var(--olive);
     border-radius: var(--radius-lg);
-    font-family: 'Jost', sans-serif;
+    font-family: var(--font-main);
     font-weight: 400;
     font-size: 1.25rem;
-    color: var(--butter-light);
+    color: var(--butter);
     cursor: pointer;
     text-decoration: none;
-    transition: background-color 0.2s ease;
+    transition: background-color 0.2s ease, border-color 0.2s ease;
 }
 
 .button-primary:hover {
     background-color: var(--olive-dark);
+    border-color: var(--olive-dark);
+}
+
+.button-secondary {
+    display: inline-block;
+    padding: 0.375rem 1.5rem;
+    background-color: var(--butter);
+    border: 1.5px solid var(--olive);
+    border-radius: var(--radius-lg);
+    font-family: var(--font-main);
+    font-weight: 400;
+    font-size: 1.25rem;
+    color: var(--olive);
+    cursor: pointer;
+    text-decoration: none;
+    transition: color 0.2s ease;
+}
+
+.button-secondary:hover {
+    color: var(--olive-dark);
+    background-color: var(--olive-light);
+    border-color: var(--olive-dark);
 }
 
 .button--outline {
     background-color: transparent;
     color: var(--olive);
-    border: 2px solid var(--olive);
+    border: 1.5px solid var(--olive);
 }
 
 .button--outline:hover {
@@ -251,29 +278,30 @@ p {
 }
 
 .counter-button {
-    padding: 0.5rem 1rem;
-    width: 46px;
+    width: 44px;
+    height: 44px;
     background-color: var(--olive);
-    border: none;
+    border: 1.5px solid var(--olive);
     border-radius: var(--radius-lg);
-    font-family: 'Jost', sans-serif;
+    font-family: var(--font-main);
     font-weight: 400;
     font-size: 1.25rem;
-    color: var(--butter-light);
+    color: var(--butter);
     cursor: pointer;
     text-decoration: none;
-    transition: background-color 0.2s ease;
+    transition: background-color 0.2s ease, border-color 0.2s ease;
 }
 
 .counter-button:hover, .counter-button:focus-visible {
     background-color: var(--olive-dark);
+    border-color: var(--olive-dark);
 }
 
 .button-small {
     background: var(--olive);
     color: var(--butter-light);
     font-size: 1.125rem;
-    font-weight: 500;
+    font-weight: 400;
     letter-spacing: var(--ls-sm);
     line-height: 1;
     text-decoration: none;
@@ -314,7 +342,7 @@ p {
     background: var(--tomato);
     color: var(--white);
     font-size: 1.0625rem;
-    font-weight: 500;
+    font-weight: 400;
     letter-spacing: var(--ls-ui);
     line-height: 1.3;
     display: inline-flex;
diff --git a/event_create.html b/event_create.html
index 51bcd3c..217d4f3 100644
--- a/event_create.html
+++ b/event_create.html
@@ -373,23 +373,35 @@
         </div>
       </section>
 
-      <div class="flow-footer" id="flowFooter" hidden>
-        <div class="progress-wrap" aria-hidden="true">
-          <span class="progress-label" id="progressMarkerLabel">Schritt 1 von 7</span>
-          <div class="progress">
-            <span id="progressBar" class="progress-bar"></span>
-          </div>
-        </div>
 
-        <div class="flow-actions">
-          <button type="button" id="backButton" class="button-primary">Zurück</button>
+<div class="flow-footer" id="flowFooter" hidden>
 
-          <div class="flow-actions-right">
-            <p id="errorMessage" class="error-message" role="alert" aria-live="assertive"></p>
-            <button type="button" id="nextButton" class="button-primary button--primary">Weiter</button>
-          </div>
-        </div>
+  <p id="errorMessage" class="error-message" role="alert" aria-live="assertive"></p>
+
+  <div class="flow-actions">
+    <button type="button" id="backButton" class="button-secondary">
+      Zurück
+    </button>
+
+    <div class="progress-wrap">
+      <span class="progress-label" id="progressMarkerLabel">
+        Schritt 1 von 7
+      </span>
+      <div class="progress">
+        <span id="progressBar" class="progress-bar"></span>
       </div>
+    </div>
+
+      <button type="button" id="nextButton" class="button-primary">
+        Weiter
+      </button>
+    </div>
+
+      <div class="flow-actions-right">
+      <p id="errorMessage" class="error-message" role="alert" aria-live="assertive"></p>
+
+  </div>
+</div>
 
       <section
         id="submissionSuccess"
@@ -410,7 +422,7 @@
 
           <div class="review-card review-card--success">
             <div class="submission-success-actions">
-              <a class="button-primary button--primary" href="my_profil.html">Weiter zu deinem Profil</a>
+              <a class="button-primary" href="my_profil.html">Weiter zu deinem Profil</a>
             </div>
           </div>
         </div>