webfarben/Frida---Fred
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Verbessere Eventdarstellung auf mobilen Geräten

Browse Source
This commit is contained in:
webfarben
2026-09-09 18:14:19 +02:00
parent 2c53ad8f8b
commit 293386912d
2 changed files with 476 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+272 -51
View File
@@ -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;
}
index.html
+137 -275
View File
@@ -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>
</div>
</div>
<!-- Slide 2: Event Details -->
<div class="carousel-item">
<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 style="grid-column: 1 / -1; margin-bottom: 10px;">Weinreisen 2026/27</h3>
<h3>Weinreisen 2026/27</h3>
<div class="event-detail-item">
<i class="fas fa-wine-glass-alt"></i>
<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"></i>
<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"></i>
<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"></i>
<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>
<!-- Slide 3: Weinreisen Termine -->
<div class="carousel-item">
<div class="events-dates">
<h3>Weinreisen Termine 2026</h3>
<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"></i>
<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>
<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>
</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"></i>
<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>
<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> -->
</details>
</div>
</div>
<!-- Slide 4: Event Details (Käse) -->
<div class="carousel-item">
<div class="events-tabpanel" id="cheese-panel" role="tabpanel" aria-labelledby="cheese-tab" tabindex="0" hidden>
<div class="event-details">
<h3 style="grid-column: 1 / -1; margin-bottom: 10px;">Käsetastings 2026/27</h3>
<h3>Käsetastings 2026/27</h3>
<div class="event-detail-item">
<i class="fas fa-cheese"></i>
<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"></i>
<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"></i>
<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"></i>
<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>
<!-- Slide 5: Käsetastings Termine -->
<div class="carousel-item">
<div class="events-dates">
<h3>Käsetastings Termine 2026</h3>
<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"></i>
<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>
<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>
</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"></i>
<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>
<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>
</details>
</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>
</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) {