From 8e9ad95ac1380a0cf53d84d30c4274e216878069 Mon Sep 17 00:00:00 2001
From: Ysabelle Moser <swissmoser@hotmail.com>
Date: Thu, 30 Apr 2026 09:19:36 +0200
Subject: [PATCH] Bei Index Galerie-Pfeile angepasst

---
 css/index.css | 38 ++++++++++++++++++++++----------------
 index.html    |  4 ++--
 2 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/css/index.css b/css/index.css
index ab2408e..3c34c7b 100644
--- a/css/index.css
+++ b/css/index.css
@@ -210,9 +210,9 @@
 
 .gallery__carousel {
   display: grid;
-  grid-template-columns: 42px minmax(0, 1fr) 42px;
+  grid-template-columns: 46px minmax(0, 1fr) 46px;
   align-items: center;
-  column-gap: 10px;
+  column-gap: 6px;
   margin-bottom: 30px;
 }
 
@@ -292,17 +292,17 @@
 
 .gallery__arrow {
   display: grid;
-  width: 34px;
-  height: 34px;
+  width: 46px;
+  height: 46px;
   border: 0;
-  background: #c8cb63;
+  background: transparent;
   border-radius: 999px;
   font-family: var(--font-main);
   font-weight: 400;
-  font-size: 1.45rem;
+  font-size: 2.45rem;
   place-items: center;
   z-index: 2;
-  color: var(--olive-dark);
+  color: var(--olive);
   cursor: pointer;
   text-decoration: none;
   transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
@@ -311,9 +311,9 @@
 
 .gallery__arrow:hover, 
 .gallery__arrow:focus-visible {
-  color: var(--olive-dark);
-  background: #d9dc78;
-  transform: scale(1.04);
+  color: var(--olive-light);
+  background: transparent;
+  transform: scale(1.1);
 }
 
 .gallery__arrow--prev {
@@ -345,9 +345,15 @@
   transition: background 0.25s ease, transform 0.2s ease;
 }
 
-.gallery_dot:hover,
+.gallery_dot:not(.gallery_dot--active):hover {
+  background: var(--olive-light);
+  border-color: var(--olive-light);
+  transform: scale(1.2);
+}
+
 .gallery_dot--active {
   background: var(--olive);
+  border-color: var(--olive);
   transform: scale(1.2);
 }
 
@@ -358,14 +364,14 @@
 
 @media (max-width: 900px) {
   .gallery__carousel {
-    grid-template-columns: 34px minmax(0, 1fr) 34px;
-    column-gap: 8px;
+    grid-template-columns: 38px minmax(0, 1fr) 38px;
+    column-gap: 5px;
   }
 
   .gallery__arrow {
-    width: 30px;
-    height: 30px;
-    font-size: 1.2rem;
+    width: 38px;
+    height: 38px;
+    font-size: 1.95rem;
   }
 
   .gallery__track {
diff --git a/index.html b/index.html
index 8486c42..408decd 100644
--- a/index.html
+++ b/index.html
@@ -86,7 +86,7 @@
         <p class="margin-bottom-16">#gemeinsam_invité auf Instagram</p>
         <div class="gallery__carousel">
           <button type="button" class="gallery__arrow gallery__arrow--prev" aria-label="Vorheriges Bild">
-            <i class="fa-solid fa-arrow-left"></i>
+            <i class="fa-solid fa-angle-left"></i>
           </button>
 
           <div class="gallery__viewport">
@@ -216,7 +216,7 @@
           </div>
           
           <button type="button" class="gallery__arrow gallery__arrow--next" aria-label="Nächstes Bild">
-            <i class="fa-solid fa-arrow-right"></i>
+            <i class="fa-solid fa-angle-right"></i>
           </button>
         </div>