From 293386912d82a79315fc8d29e6554a613c058d93 Mon Sep 17 00:00:00 2001
From: webfarben <kontakt@webfarben.net>
Date: Wed, 9 Sep 2026 18:14:19 +0200
Subject: [PATCH] =?UTF-8?q?Verbessere=20Eventdarstellung=20auf=20mobilen?=
 =?UTF-8?q?=20Ger=C3=A4ten?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/style.css | 323 ++++++++++++++++++++++++-----
 index.html    | 546 +++++++++++++++++++-------------------------------
 2 files changed, 476 insertions(+), 393 deletions(-)

diff --git a/css/style.css b/css/style.css
index bc2efef..047c7f9 100644
--- a/css/style.css
+++ b/css/style.css
@@ -836,6 +836,12 @@ section {
     margin-top: 30px;
 }
 
+.events-tabpanel .event-details h3 {
+    font-size: 1.8rem;
+    color: var(--primary-color);
+    margin-bottom: 0;
+}
+
 @media (max-width: 768px) {
     .event-details {
         grid-template-columns: 1fr;
@@ -947,77 +953,184 @@ section {
     text-align: center;
 }
 
-/* Events Carousel Styling */
-.events-carousel {
-    margin-top: 40px;
+.events-overview {
+    width: 100%;
+    max-width: 1100px;
+    margin: 40px auto 0;
+    padding: 0;
+    background: var(--white);
+    border-radius: 8px;
+    overflow: hidden;
 }
 
-.events-carousel .carousel-inner {
-    padding: 40px 20px;
-    min-height: 500px;
-    background: var(--white);
+.events-overview-content {
+    position: relative;
+}
+
+.events-overview h3 {
+    font-size: 1.8rem;
+    color: var(--primary-color);
+    margin-bottom: 20px;
+}
+
+.events-overview p {
+    margin: 0 0 24px;
+    color: var(--text-light);
+    line-height: 1.8;
+}
+
+.events-overview-media {
+    position: relative;
+    width: 100%;
+}
+
+.events-overview img {
+    width: 100%;
+    max-width: none;
+    display: block;
     border-radius: 8px;
 }
 
-.events-carousel .carousel-item {
-    transition: transform 0.6s ease-in-out;
-}
-
-.events-carousel .carousel-indicators {
-    margin-bottom: -30px;
-}
-
-.events-carousel .carousel-indicators button {
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    background-color: var(--secondary-color);
-    opacity: 0.5;
-    border: none;
-}
-
-.events-carousel .carousel-indicators button.active {
-    opacity: 1;
-}
-
-.events-carousel .carousel-control-prev,
-.events-carousel .carousel-control-next {
-    width: 50px;
-    height: 50px;
-    background-color: var(--secondary-color);
-    border-radius: 50%;
+.events-overview-text {
+    position: absolute;
     top: 50%;
+    left: 32px;
+    width: min(48%, 520px);
+    padding: 28px;
+    background: rgba(255, 255, 255, 0.92);
+    border-left: 4px solid var(--secondary-color);
     transform: translateY(-50%);
-    opacity: 0.8;
 }
 
-.events-carousel .carousel-control-prev {
-    left: -25px;
+.events-tabs {
+    max-width: 1100px;
+    margin: 32px auto 0;
+    background: var(--white);
+    border-radius: 8px;
+    overflow: hidden;
 }
 
-.events-carousel .carousel-control-next {
-    right: -25px;
+.events-tablist {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    border-bottom: 1px solid #e8e6e1;
 }
 
-.events-carousel .carousel-control-prev:hover,
-.events-carousel .carousel-control-next:hover {
-    opacity: 1;
-    background-color: var(--primary-color);
+.events-tab {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    min-height: 64px;
+    padding: 15px 20px;
+    border: 0;
+    border-bottom: 3px solid transparent;
+    background: var(--white);
+    color: var(--text-light);
+    font: inherit;
+    font-weight: 600;
+    cursor: pointer;
+    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
 }
 
-.events-carousel .carousel-control-prev-icon,
-.events-carousel .carousel-control-next-icon {
-    width: 20px;
-    height: 20px;
+.events-tab:hover,
+.events-tab:focus-visible {
+    background: var(--light-bg);
+    color: var(--primary-color);
 }
 
-.events-carousel .events-info,
-.events-carousel .event-details,
-.events-carousel .events-dates {
+.events-tab:focus-visible {
+    outline: 2px solid var(--secondary-color);
+    outline-offset: -4px;
+}
+
+.events-tab.is-active {
+    color: var(--primary-color);
+    border-bottom-color: var(--secondary-color);
+}
+
+.events-tab i {
+    color: var(--secondary-color);
+    font-size: 1.2rem;
+}
+
+.events-tabpanel {
+    padding: 40px;
+}
+
+.events-tabpanel[hidden] {
+    display: none;
+}
+
+.events-tabpanel .event-details,
+.events-tabpanel .events-dates {
     max-width: 900px;
     margin: 0 auto;
 }
 
+.events-tabpanel .event-details {
+    margin-top: 0;
+}
+
+.events-tabpanel .event-details h3,
+.events-tabpanel .events-dates h3 {
+    grid-column: 1 / -1;
+}
+
+.events-tabpanel .events-dates {
+    margin-top: 48px;
+}
+
+.events-tabpanel .events-dates h3 + .dates-grid {
+    margin-bottom: 32px;
+}
+
+.events-year-accordion {
+    border-bottom: 1px solid #e8e6e1;
+}
+
+.events-year-accordion:first-of-type {
+    border-top: 1px solid #e8e6e1;
+}
+
+.events-year-accordion summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 4px;
+    color: var(--primary-color);
+    font-size: 1.35rem;
+    font-weight: 600;
+    cursor: pointer;
+    list-style: none;
+}
+
+.events-year-accordion summary::-webkit-details-marker {
+    display: none;
+}
+
+.events-year-accordion summary::after {
+    content: '\f078';
+    color: var(--secondary-color);
+    font-family: 'Font Awesome 5 Free';
+    font-size: 0.9rem;
+    font-weight: 900;
+    transition: transform 0.2s ease;
+}
+
+.events-year-accordion[open] summary::after {
+    transform: rotate(180deg);
+}
+
+.events-year-accordion summary:focus-visible {
+    outline: 2px solid var(--secondary-color);
+    outline-offset: -2px;
+}
+
+.events-year-accordion .dates-grid {
+    margin-bottom: 24px;
+}
+
 /* Suppliers Section */
 .section-suppliers {
     background: var(--light-bg);
@@ -1410,7 +1523,89 @@ section {
     }
 
     .dates-grid {
-        grid-template-columns: repeat(2, 1fr);
+        grid-template-columns: 1fr;
+    }
+
+    .date-card {
+        padding: 12px 14px;
+        gap: 10px;
+        min-height: 58px;
+    }
+
+    .date-icon {
+        width: 26px;
+        font-size: 1.25rem;
+        text-align: center;
+    }
+
+    .date-info {
+        flex: 1;
+        display: grid;
+        grid-template-columns: auto 1fr auto;
+        align-items: baseline;
+        column-gap: 8px;
+    }
+
+    .date-day {
+        font-size: 0.72rem;
+        letter-spacing: 0.3px;
+        white-space: nowrap;
+    }
+
+    .date-number {
+        font-size: 1rem;
+        margin-top: 0;
+        white-space: nowrap;
+    }
+
+    .date-time {
+        font-size: 0.82rem;
+        margin-top: 0;
+        white-space: nowrap;
+    }
+
+    .events-overview {
+        margin-top: 25px;
+        padding: 0;
+    }
+
+    .events-overview-content {
+        display: block;
+    }
+
+    .events-overview-text {
+        position: static;
+        width: 100%;
+        padding: 20px;
+        background: var(--white);
+        border-left: 0;
+        transform: none;
+    }
+
+    .events-overview h3 {
+        font-size: 1.5rem;
+    }
+
+    .events-overview p {
+        font-size: 0.95rem;
+        line-height: 1.65;
+    }
+
+    .events-tabs {
+        margin-top: 24px;
+    }
+
+    .events-tab {
+        min-height: 58px;
+        padding: 12px 10px;
+    }
+
+    .events-tabpanel {
+        padding: 28px 20px;
+    }
+
+    .events-tabpanel .events-dates {
+        margin-top: 36px;
     }
 
     .footer-content {
@@ -1454,6 +1649,32 @@ section {
         grid-template-columns: 1fr;
     }
 
+    .date-card {
+        padding: 10px 12px;
+        gap: 8px;
+    }
+
+    .date-icon {
+        width: 22px;
+        font-size: 1.1rem;
+    }
+
+    .date-info {
+        column-gap: 6px;
+    }
+
+    .date-day {
+        font-size: 0.68rem;
+    }
+
+    .date-number {
+        font-size: 0.95rem;
+    }
+
+    .date-time {
+        font-size: 0.78rem;
+    }
+
     .event-details {
         gap: 15px;
     }
diff --git a/index.html b/index.html
index 8851fd5..e32e09d 100644
--- a/index.html
+++ b/index.html
@@ -51,8 +51,15 @@
     <script type="application/ld+json">
     {
         "@context": "https://schema.org",
-        "@type": "GourmetStore",
-        "name": "Frida & Fred – Allgäuer Schmankerl",
+                <div class="events-overview-content">
+                    <div class="events-overview-text">
+                        <h3>Ihre Weinreise & Käseverkostung bei Frida & Fred</h3>
+                        <p>Der Abend in der Frida beinhaltet eine Weinreise mit 5-7 Weinen und natürlich unserem leckeren Heumilchkäse. Auch für Häppchen ist selbstverständlich gesorgt. Bei Allergenen oder Ernährungspräferenzen gehen wir gerne auf individuelle Wünsche ein!</p>
+                    </div>
+                    <div class="events-overview-media">
+                        <img src="img/slider01.jpg" alt="Weinreise und Käseverkostung bei Frida & Fred in Regensburg">
+                    </div>
+                </div>
         "alternateName": "Frida Allgäuer Schmankerl",
         "url": "https://frida-fred.com",
         "logo": "https://frida-fred.com/img/logo.png",
@@ -340,351 +347,143 @@
             <h2 class="section-heading text-center mb-3">Weinreisen & Käsetastings</h2>
             <p class="section-subtitle text-center mb-5">Entdecken Sie unsere kulinarischen Erlebnisse – eine Weinreise von Lindau über Hagnau bis nach Überlingen mit exquisiten Weinen und unserem leckeren Bio-Heumilchkäse. Jedes Tasting ist auch eine Käseverkostung mit verschiedenen Allgäuer Käsespezialitäten.</p>
             
-            <!-- Events Carousel -->
-            <div id="eventsCarousel" class="carousel slide events-carousel" data-bs-ride="carousel" data-bs-interval="6000">
-                <div class="carousel-indicators">
-                    <button type="button" data-bs-target="#eventsCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
-                    <button type="button" data-bs-target="#eventsCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
-                    <button type="button" data-bs-target="#eventsCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
-                    <button type="button" data-bs-target="#eventsCarousel" data-bs-slide-to="3" aria-label="Slide 4"></button>
-                    <button type="button" data-bs-target="#eventsCarousel" data-bs-slide-to="4" aria-label="Slide 5"></button>
-                </div>
-                
-                <div class="carousel-inner">
-                    <!-- Slide 1: Events Info -->
-                    <div class="carousel-item active">
-                        <div class="events-info">
+            <div class="events-overview">
+                <div class="events-overview-content">
+                    <div class="events-overview-media">
+                        <img src="img/slider01.jpg" alt="Weinreise und Käseverkostung bei Frida & Fred in Regensburg">
+                        <div class="events-overview-text">
                             <h3>Ihre Weinreise & Käseverkostung bei Frida & Fred</h3>
                             <p>Der Abend in der Frida beinhaltet eine Weinreise mit 5-7 Weinen und natürlich unserem leckeren Heumilchkäse. Auch für Häppchen ist selbstverständlich gesorgt. Bei Allergenen oder Ernährungspräferenzen gehen wir gerne auf individuelle Wünsche ein!</p>
-                            <hr style="border: none; border-top: 1px solid var(--secondary-color); margin: 30px 0;">
-                            <img src="img/slider01.jpg" alt="Weinreise und Käseverkostung bei Frida & Fred in Regensburg" style="width: 100%; max-width: 600px; margin: 20px auto 0; display: block; border-radius: 8px;">
-                        </div>
-                    </div>
-                    
-                    <!-- Slide 2: Event Details -->
-                    <div class="carousel-item">
-                        <div class="event-details">
-                            <h3 style="grid-column: 1 / -1; margin-bottom: 10px;">Weinreisen 2026/27</h3>
-                            <div class="event-detail-item">
-                                <i class="fas fa-wine-glass-alt"></i>
-                                <div>
-                                    <strong>Weintasting</strong>
-                                    <p>5-7 exquisite Weine vom Bodensee – von Lindau über Hagnau bis Überlingen</p>
-                                </div>
-                            </div>
-                            <div class="event-detail-item">
-                                <i class="fas fa-euro-sign"></i>
-                                <div>
-                                    <strong>Preis pro Person</strong>
-                                    <p>70€</p>
-                                </div>
-                            </div>
-                            <div class="event-detail-item">
-                                <i class="fas fa-users"></i>
-                                <div>
-                                    <strong>Hinweis</strong>
-                                    <p>Da unsere Räumlichkeiten begrenzt sind, vergesst nicht eure Personenanzahl anzugeben.</p>
-                                </div>
-                            </div>
-                            <div class="event-detail-item">
-                                <i class="fas fa-envelope"></i>
-                                <div>
-                                    <strong>Anmeldung</strong>
-                                    <p>Per E-Mail an <a href="mailto:info@frida-fred.com">info@frida-fred.com</a> oder telefonisch/WhatsApp: <a href="tel:+49015119426530">0151 19426530</a></p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <!-- Slide 3: Weinreisen Termine -->
-                    <div class="carousel-item">
-                        <div class="events-dates">
-                            <h3>Weinreisen Termine 2026</h3>
-                            <div class="dates-grid">
-                                <div class="date-card wine-event">
-                                    <div class="date-icon">
-                                        <i class="fas fa-wine-glass-alt"></i>
-                                    </div>
-                                    <div class="date-info">
-                                        <span class="date-day">Samstag</span>
-                                        <span class="date-number">19. September</span>
-                                    </div>
-                                </div>
-                                <div class="date-card wine-event">
-                                    <div class="date-icon">
-                                        <i class="fas fa-wine-glass-alt"></i>
-                                    </div>
-                                    <div class="date-info">
-                                        <span class="date-day">Donnerstag</span>
-                                        <span class="date-number">30. Oktober</span>
-                                    </div>
-                                </div>
-                                <div class="date-card wine-event">
-                                    <div class="date-icon">
-                                        <i class="fas fa-wine-glass-alt"></i>
-                                    </div>
-                                    <div class="date-info">
-                                        <span class="date-day">Samstag</span>
-                                        <span class="date-number">17. Oktober</span>
-                                    </div>
-                                </div>
-                                <div class="date-card wine-event">
-                                    <div class="date-icon">
-                                        <i class="fas fa-wine-glass-alt"></i>
-                                    </div>
-                                    <div class="date-info">
-                                        <span class="date-day">Dienstag</span>
-                                        <span class="date-number">29. Dezember</span>
-                                    </div>
-                                </div>
-                            </div>
-                            <h3>Weinreisen Termine 2027</h3>
-                            <div class="dates-grid">
-                                <div class="date-card wine-event">
-                                    <div class="date-icon">
-                                        <i class="fas fa-wine-glass-alt"></i>
-                                    </div>
-                                    <div class="date-info">
-                                        <span class="date-day">Freitag</span>
-                                        <span class="date-number">22. Januar</span>
-                                        <span class="date-time">19:30 Uhr</span>
-                                    </div>
-                                </div>
-                                <div class="date-card wine-event">
-                                    <div class="date-icon">
-                                        <i class="fas fa-wine-glass-alt"></i>
-                                    </div>
-                                    <div class="date-info">
-                                        <span class="date-day">Freitag</span>
-                                        <span class="date-number">19. Februar</span>
-                                        <span class="date-time">19:30 Uhr</span>
-                                    </div>
-                                </div>
-                                <div class="date-card wine-event">
-                                    <div class="date-icon">
-                                        <i class="fas fa-wine-glass-alt"></i>
-                                    </div>
-                                    <div class="date-info">
-                                        <span class="date-day">Donnerstag</span>
-                                        <span class="date-number">25. März</span>
-                                        <span class="date-time">19:30 Uhr</span>
-                                    </div>
-                                </div>
-                                <div class="date-card wine-event">
-                                    <div class="date-icon">
-                                        <i class="fas fa-wine-glass-alt"></i>
-                                    </div>
-                                    <div class="date-info">
-                                        <span class="date-day">Freitag</span>
-                                        <span class="date-number">16. April</span>
-                                        <span class="date-time">19:30 Uhr</span>
-                                    </div>
-                                </div>
-                                <div class="date-card wine-event">
-                                    <div class="date-icon">
-                                        <i class="fas fa-wine-glass-alt"></i>
-                                    </div>
-                                    <div class="date-info">
-                                        <span class="date-day">Freitag</span>
-                                        <span class="date-number">11. Juni</span>
-                                        <span class="date-time">19:30 Uhr</span>
-                                    </div>
-                                </div>
-                                <div class="date-card wine-event">
-                                    <div class="date-icon">
-                                        <i class="fas fa-wine-glass-alt"></i>
-                                    </div>
-                                    <div class="date-info">
-                                        <span class="date-day">Freitag</span>
-                                        <span class="date-number">17. September</span>
-                                        <span class="date-time">19:30 Uhr</span>
-                                    </div>
-                                </div>
-                                <div class="date-card wine-event">
-                                    <div class="date-icon">
-                                        <i class="fas fa-wine-glass-alt"></i>
-                                    </div>
-                                    <div class="date-info">
-                                        <span class="date-day">Freitag</span>
-                                        <span class="date-number">15. Oktober</span>
-                                        <span class="date-time">19:30 Uhr</span>
-                                    </div>
-                                </div>
-                                <div class="date-card wine-event">
-                                    <div class="date-icon">
-                                        <i class="fas fa-wine-glass-alt"></i>
-                                    </div>
-                                    <div class="date-info">
-                                        <span class="date-day">Freitag</span>
-                                        <span class="date-number">19. November</span>
-                                        <span class="date-time">19:30 Uhr</span>
-                                    </div>
-                                </div>
-                            </div>
-                            <!-- <div class="events-cta">
-                                <a href="mailto:info@frida-fred.com" class="btn-cta">Jetzt anmelden</a>
-                            </div> -->
-                        </div>
-                    </div>
-                    
-                    <!-- Slide 4: Event Details (Käse) -->
-                    <div class="carousel-item">
-                        <div class="event-details">
-                            <h3 style="grid-column: 1 / -1; margin-bottom: 10px;">Käsetastings 2026/27</h3>
-                            <div class="event-detail-item">
-                                <i class="fas fa-cheese"></i>
-                                <div>
-                                    <strong>Käsetasting</strong>
-                                    <p>Verschiedene Heumilchkäse-Spezialitäten, perfekt auf die Weine abgestimmt</p>
-                                </div>
-                            </div>
-                            <div class="event-detail-item">
-                                <i class="fas fa-euro-sign"></i>
-                                <div>
-                                    <strong>Preis pro Person</strong>
-                                    <p>55€</p>
-                                </div>
-                            </div>
-                            <div class="event-detail-item">
-                                <i class="fas fa-users"></i>
-                                <div>
-                                    <strong>Hinweis</strong>
-                                    <p>Da unsere Räumlichkeiten begrenzt sind, vergesst nicht eure Personenanzahl anzugeben.</p>
-                                </div>
-                            </div>
-                            <div class="event-detail-item">
-                                <i class="fas fa-envelope"></i>
-                                <div>
-                                    <strong>Anmeldung</strong>
-                                    <p>Per E-Mail an <a href="mailto:info@frida-fred.com">info@frida-fred.com</a> oder telefonisch/WhatsApp: <a href="tel:+49015119426530">0151 19426530</a></p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <!-- Slide 5: Käsetastings Termine -->
-                    <div class="carousel-item">
-                        <div class="events-dates">
-                            <h3>Käsetastings Termine 2026</h3>
-                            <div class="dates-grid">
-                                <div class="date-card cheese-event">
-                                    <div class="date-icon">
-                                        <i class="fas fa-cheese"></i>
-                                    </div>
-                                    <div class="date-info">
-                                        <span class="date-day">Freitag</span>
-                                        <span class="date-number">09. Oktober</span>
-                                    </div>
-                                </div>
-                                <div class="date-card cheese-event">
-                                    <div class="date-icon">
-                                        <i class="fas fa-cheese"></i>
-                                    </div>
-                                    <div class="date-info">
-                                        <span class="date-day">Freitag</span>
-                                        <span class="date-number">06. November</span>
-                                    </div>
-                                </div>
-                            </div>
-                            <h3>Käsetastings Termine 2027</h3>
-                            <div class="dates-grid">
-                                <div class="date-card cheese-event">
-                                    <div class="date-icon">
-                                        <i class="fas fa-cheese"></i>
-                                    </div>
-                                    <div class="date-info">
-                                        <span class="date-day">Sonntag</span>
-                                        <span class="date-number">17. Januar</span>
-                                        <span class="date-time">18:30 Uhr</span>
-                                    </div>
-                                </div>
-                                <div class="date-card cheese-event">
-                                    <div class="date-icon">
-                                        <i class="fas fa-cheese"></i>
-                                    </div>
-                                    <div class="date-info">
-                                        <span class="date-day">Sonntag</span>
-                                        <span class="date-number">14. Februar</span>
-                                        <span class="date-time">18:30 Uhr</span>
-                                    </div>
-                                </div>
-                                <div class="date-card cheese-event">
-                                    <div class="date-icon">
-                                        <i class="fas fa-cheese"></i>
-                                    </div>
-                                    <div class="date-info">
-                                        <span class="date-day">Sonntag</span>
-                                        <span class="date-number">14. März</span>
-                                        <span class="date-time">18:30 Uhr</span>
-                                    </div>
-                                </div>
-                                <div class="date-card cheese-event">
-                                    <div class="date-icon">
-                                        <i class="fas fa-cheese"></i>
-                                    </div>
-                                    <div class="date-info">
-                                        <span class="date-day">Sonntag</span>
-                                        <span class="date-number">11. April</span>
-                                        <span class="date-time">18:30 Uhr</span>
-                                    </div>
-                                </div>
-                                <div class="date-card cheese-event">
-                                    <div class="date-icon">
-                                        <i class="fas fa-cheese"></i>
-                                    </div>
-                                    <div class="date-info">
-                                        <span class="date-day">Sonntag</span>
-                                        <span class="date-number">09. Mai</span>
-                                        <span class="date-time">18:30 Uhr</span>
-                                    </div>
-                                </div>
-                                <div class="date-card cheese-event">
-                                    <div class="date-icon">
-                                        <i class="fas fa-cheese"></i>
-                                    </div>
-                                    <div class="date-info">
-                                        <span class="date-day">Sonntag</span>
-                                        <span class="date-number">11. Juli</span>
-                                        <span class="date-time">18:30 Uhr</span>
-                                    </div>
-                                </div>
-                                <div class="date-card cheese-event">
-                                    <div class="date-icon">
-                                        <i class="fas fa-cheese"></i>
-                                    </div>
-                                    <div class="date-info">
-                                        <span class="date-day">Sonntag</span>
-                                        <span class="date-number">10. Oktober</span>
-                                        <span class="date-time">18:30 Uhr</span>
-                                    </div>
-                                </div>
-                                <div class="date-card cheese-event">
-                                    <div class="date-icon">
-                                        <i class="fas fa-cheese"></i>
-                                    </div>
-                                    <div class="date-info">
-                                        <span class="date-day">Sonntag</span>
-                                        <span class="date-number">14. November</span>
-                                        <span class="date-time">18:30 Uhr</span>
-                                    </div>
-                                </div>
-                            </div>
-                            <!-- <div class="events-cta">
-                                <a href="mailto:info@frida-fred.com" class="btn-cta">Jetzt anmelden</a>
-                            </div> -->
                         </div>
                     </div>
                 </div>
-                
-                <!-- Carousel Controls -->
-                <button class="carousel-control-prev" type="button" data-bs-target="#eventsCarousel" data-bs-slide="prev">
-                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-                    <span class="visually-hidden">Previous</span>
-                </button>
-                <button class="carousel-control-next" type="button" data-bs-target="#eventsCarousel" data-bs-slide="next">
-                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
-                    <span class="visually-hidden">Next</span>
-                </button>
+            </div>
+
+            <div class="events-tabs" data-events-tabs>
+                <div class="events-tablist" role="tablist" aria-label="Veranstaltungsarten">
+                    <button type="button" class="events-tab is-active" id="wine-tab" role="tab" aria-selected="true" aria-controls="wine-panel" tabindex="0">
+                        <i class="fas fa-wine-glass-alt" aria-hidden="true"></i>
+                        <span>Weinreisen</span>
+                    </button>
+                    <button type="button" class="events-tab" id="cheese-tab" role="tab" aria-selected="false" aria-controls="cheese-panel" tabindex="-1">
+                        <i class="fas fa-cheese" aria-hidden="true"></i>
+                        <span>Käsetastings</span>
+                    </button>
+                </div>
+
+                <div class="events-tabpanel is-active" id="wine-panel" role="tabpanel" aria-labelledby="wine-tab" tabindex="0">
+                    <div class="event-details">
+                        <h3>Weinreisen 2026/27</h3>
+                        <div class="event-detail-item">
+                            <i class="fas fa-wine-glass-alt" aria-hidden="true"></i>
+                            <div>
+                                <strong>Weintasting</strong>
+                                <p>5-7 exquisite Weine vom Bodensee – von Lindau über Hagnau bis Überlingen</p>
+                            </div>
+                        </div>
+                        <div class="event-detail-item">
+                            <i class="fas fa-euro-sign" aria-hidden="true"></i>
+                            <div>
+                                <strong>Preis pro Person</strong>
+                                <p>70€</p>
+                            </div>
+                        </div>
+                        <div class="event-detail-item">
+                            <i class="fas fa-users" aria-hidden="true"></i>
+                            <div>
+                                <strong>Hinweis</strong>
+                                <p>Da unsere Räumlichkeiten begrenzt sind, vergesst nicht eure Personenanzahl anzugeben.</p>
+                            </div>
+                        </div>
+                        <div class="event-detail-item">
+                            <i class="fas fa-envelope" aria-hidden="true"></i>
+                            <div>
+                                <strong>Anmeldung</strong>
+                                <p>Per E-Mail an <a href="mailto:info@frida-fred.com">info@frida-fred.com</a> oder telefonisch/WhatsApp: <a href="tel:+49015119426530">0151 19426530</a></p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="events-dates">
+                        <details class="events-year-accordion" data-year-accordion open>
+                            <summary>Termine 2026</summary>
+                        <div class="dates-grid">
+                            <div class="date-card wine-event"><div class="date-icon"><i class="fas fa-wine-glass-alt" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Samstag</span><span class="date-number">19. September</span></div></div>
+                            <div class="date-card wine-event"><div class="date-icon"><i class="fas fa-wine-glass-alt" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Samstag</span><span class="date-number">17. Oktober</span></div></div>
+                            <div class="date-card wine-event"><div class="date-icon"><i class="fas fa-wine-glass-alt" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Donnerstag</span><span class="date-number">30. Oktober</span></div></div>
+                            <div class="date-card wine-event"><div class="date-icon"><i class="fas fa-wine-glass-alt" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Dienstag</span><span class="date-number">29. Dezember</span></div></div>
+                        </div>
+                        </details>
+                        <details class="events-year-accordion" data-year-accordion>
+                            <summary>Termine 2027</summary>
+                        <div class="dates-grid">
+                            <div class="date-card wine-event"><div class="date-icon"><i class="fas fa-wine-glass-alt" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Freitag</span><span class="date-number">22. Januar</span><span class="date-time">19:30 Uhr</span></div></div>
+                            <div class="date-card wine-event"><div class="date-icon"><i class="fas fa-wine-glass-alt" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Freitag</span><span class="date-number">19. Februar</span><span class="date-time">19:30 Uhr</span></div></div>
+                            <div class="date-card wine-event"><div class="date-icon"><i class="fas fa-wine-glass-alt" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Donnerstag</span><span class="date-number">25. März</span><span class="date-time">19:30 Uhr</span></div></div>
+                            <div class="date-card wine-event"><div class="date-icon"><i class="fas fa-wine-glass-alt" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Freitag</span><span class="date-number">16. April</span><span class="date-time">19:30 Uhr</span></div></div>
+                            <div class="date-card wine-event"><div class="date-icon"><i class="fas fa-wine-glass-alt" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Freitag</span><span class="date-number">11. Juni</span><span class="date-time">19:30 Uhr</span></div></div>
+                            <div class="date-card wine-event"><div class="date-icon"><i class="fas fa-wine-glass-alt" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Freitag</span><span class="date-number">17. September</span><span class="date-time">19:30 Uhr</span></div></div>
+                            <div class="date-card wine-event"><div class="date-icon"><i class="fas fa-wine-glass-alt" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Freitag</span><span class="date-number">15. Oktober</span><span class="date-time">19:30 Uhr</span></div></div>
+                            <div class="date-card wine-event"><div class="date-icon"><i class="fas fa-wine-glass-alt" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Freitag</span><span class="date-number">19. November</span><span class="date-time">19:30 Uhr</span></div></div>
+                            </div>
+                        </details>
+                    </div>
+                </div>
+
+                <div class="events-tabpanel" id="cheese-panel" role="tabpanel" aria-labelledby="cheese-tab" tabindex="0" hidden>
+                    <div class="event-details">
+                        <h3>Käsetastings 2026/27</h3>
+                        <div class="event-detail-item">
+                            <i class="fas fa-cheese" aria-hidden="true"></i>
+                            <div>
+                                <strong>Käsetasting</strong>
+                                <p>Verschiedene Heumilchkäse-Spezialitäten, perfekt auf die Weine abgestimmt</p>
+                            </div>
+                        </div>
+                        <div class="event-detail-item">
+                            <i class="fas fa-euro-sign" aria-hidden="true"></i>
+                            <div>
+                                <strong>Preis pro Person</strong>
+                                <p>55€</p>
+                            </div>
+                        </div>
+                        <div class="event-detail-item">
+                            <i class="fas fa-users" aria-hidden="true"></i>
+                            <div>
+                                <strong>Hinweis</strong>
+                                <p>Da unsere Räumlichkeiten begrenzt sind, vergesst nicht eure Personenanzahl anzugeben.</p>
+                            </div>
+                        </div>
+                        <div class="event-detail-item">
+                            <i class="fas fa-envelope" aria-hidden="true"></i>
+                            <div>
+                                <strong>Anmeldung</strong>
+                                <p>Per E-Mail an <a href="mailto:info@frida-fred.com">info@frida-fred.com</a> oder telefonisch/WhatsApp: <a href="tel:+49015119426530">0151 19426530</a></p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="events-dates">
+                        <details class="events-year-accordion" data-year-accordion open>
+                            <summary>Termine 2026</summary>
+                        <div class="dates-grid">
+                            <div class="date-card cheese-event"><div class="date-icon"><i class="fas fa-cheese" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Freitag</span><span class="date-number">09. Oktober</span></div></div>
+                            <div class="date-card cheese-event"><div class="date-icon"><i class="fas fa-cheese" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Freitag</span><span class="date-number">06. November</span></div></div>
+                        </div>
+                        </details>
+                        <details class="events-year-accordion" data-year-accordion>
+                            <summary>Termine 2027</summary>
+                        <div class="dates-grid">
+                            <div class="date-card cheese-event"><div class="date-icon"><i class="fas fa-cheese" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Sonntag</span><span class="date-number">17. Januar</span><span class="date-time">18:30 Uhr</span></div></div>
+                            <div class="date-card cheese-event"><div class="date-icon"><i class="fas fa-cheese" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Sonntag</span><span class="date-number">14. Februar</span><span class="date-time">18:30 Uhr</span></div></div>
+                            <div class="date-card cheese-event"><div class="date-icon"><i class="fas fa-cheese" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Sonntag</span><span class="date-number">14. März</span><span class="date-time">18:30 Uhr</span></div></div>
+                            <div class="date-card cheese-event"><div class="date-icon"><i class="fas fa-cheese" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Sonntag</span><span class="date-number">11. April</span><span class="date-time">18:30 Uhr</span></div></div>
+                            <div class="date-card cheese-event"><div class="date-icon"><i class="fas fa-cheese" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Sonntag</span><span class="date-number">09. Mai</span><span class="date-time">18:30 Uhr</span></div></div>
+                            <div class="date-card cheese-event"><div class="date-icon"><i class="fas fa-cheese" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Sonntag</span><span class="date-number">11. Juli</span><span class="date-time">18:30 Uhr</span></div></div>
+                            <div class="date-card cheese-event"><div class="date-icon"><i class="fas fa-cheese" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Sonntag</span><span class="date-number">10. Oktober</span><span class="date-time">18:30 Uhr</span></div></div>
+                            <div class="date-card cheese-event"><div class="date-icon"><i class="fas fa-cheese" aria-hidden="true"></i></div><div class="date-info"><span class="date-day">Sonntag</span><span class="date-number">14. November</span><span class="date-time">18:30 Uhr</span></div></div>
+                        </div>
+                        </details>
+                    </div>
+                </div>
             </div>
         </div>
     </section>
@@ -813,6 +612,69 @@
 
     <script src="lib/bootstrap.bundle.min.js"></script>
     <script>
+        // Event tabs
+        const eventsTabs = document.querySelector('[data-events-tabs]');
+
+        if (eventsTabs) {
+            const tabButtons = Array.from(eventsTabs.querySelectorAll('[role="tab"]'));
+            const tabPanels = Array.from(eventsTabs.querySelectorAll('[role="tabpanel"]'));
+
+            const activateEventTab = (tabButton, moveFocus = false) => {
+                tabButtons.forEach(button => {
+                    const isActive = button === tabButton;
+                    button.classList.toggle('is-active', isActive);
+                    button.setAttribute('aria-selected', String(isActive));
+                    button.tabIndex = isActive ? 0 : -1;
+                });
+
+                tabPanels.forEach(panel => {
+                    const isActive = panel.id === tabButton.getAttribute('aria-controls');
+                    panel.hidden = !isActive;
+                    panel.classList.toggle('is-active', isActive);
+                });
+
+                if (moveFocus) {
+                    tabButton.focus();
+                }
+            };
+
+            tabButtons.forEach((tabButton, tabIndex) => {
+                tabButton.addEventListener('click', () => activateEventTab(tabButton));
+                tabButton.addEventListener('keydown', event => {
+                    let nextIndex;
+
+                    if (event.key === 'ArrowRight') {
+                        nextIndex = (tabIndex + 1) % tabButtons.length;
+                    } else if (event.key === 'ArrowLeft') {
+                        nextIndex = (tabIndex - 1 + tabButtons.length) % tabButtons.length;
+                    } else if (event.key === 'Home') {
+                        nextIndex = 0;
+                    } else if (event.key === 'End') {
+                        nextIndex = tabButtons.length - 1;
+                    }
+
+                    if (nextIndex !== undefined) {
+                        event.preventDefault();
+                        activateEventTab(tabButtons[nextIndex], true);
+                    }
+                });
+            });
+
+            eventsTabs.querySelectorAll('[data-year-accordion]').forEach(accordion => {
+                accordion.addEventListener('toggle', () => {
+                    if (!accordion.open) {
+                        return;
+                    }
+
+                    accordion.closest('.events-dates').querySelectorAll('[data-year-accordion]').forEach(otherAccordion => {
+                        if (otherAccordion !== accordion) {
+                            otherAccordion.open = false;
+                        }
+                    });
+                });
+            });
+        }
+
         // Smooth scrolling for internal links
         document.querySelectorAll('a[href^="#"]').forEach(anchor => {
             anchor.addEventListener('click', function (e) {