/* EXAKTES 4-KARTEN-SYSTEM nach deiner Beschreibung */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    line-height: 1.6;
    color: #333;
    background: #EDE8E2;
    overflow-x: hidden;
}

/* Logo oben links */
.logo {
    position: fixed;
    top: 30px;
    left: 50px;
    /* Gleiche Position wie die linke Linie */
    width: 200px;
    height: auto;
    z-index: 1000;
}

/* DESKTOP NAVIGATION - NUR WEIßE SCHRIFT, KEIN CONTAINER */
.main-navigation {
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 8888;
    /* Kein Hintergrund, keine Boxen! */
}

.nav-menu {
    display: flex;
    gap: 25px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu li {
    margin: 0;
}

.nav-menu a {
    color: white;
    text-decoration: none;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    padding: 0;
    /* Kein Padding für Boxen */
    transition: all 0.3s ease;
    position: relative;
}

.nav-menu a:hover {
    color: white;
    /* Bleibt weiß */
}

.nav-menu a.active {
    color: white;
    /* Bleibt weiß */
    text-decoration: underline;
    /* Nur unterstreichen */
}

.nav-link {
    position: absolute;
    top: 30px;
    right: 30px;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    padding: 12px 24px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    z-index: 10;
    backdrop-filter: blur(10px);
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

/* Sektionen */
.main-content {
    background: #EDE8E2;
    position: relative;
    z-index: 10;
}

.content-section {
    padding: 4rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}

/* WENIGER ABSTAND UNTEN für Galerie-Sektionen */
.content-section:has(.carousel-wrapper) {
    padding-bottom: 2rem;
    /* Weniger Abstand unten: war 4rem */
}

/* Alternative für Browser ohne :has() Support */
#getraenke,
#speisen {
    padding-bottom: 2rem !important;
    /* Weniger Abstand unten für Getränke und Speisen Sektionen */
}

.content-section.dark {
    background: #39312A;
    color: white;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding: 0 2rem;
}

.section-info {
    flex: 1;
    max-width: 600px;
    text-align: left;
}

.section-title {
    font-size: 40px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: left;
    margin-bottom: 1rem;
    color: #222;
}

.content-section.dark .section-title {
    color: #FFF;
}

.section-subtitle {
    font-size: 16px;
    color: #666;
    text-align: left;
    line-height: 1.4;
    margin: 0;
}

.content-section.dark .section-subtitle {
    color: #DDD;
}

.section-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-shrink: 0;
}

/* MATHEMATISCHES 4-KARTEN-LAYOUT */
.carousel-wrapper {
    position: relative;
    width: 100%;
    height: 500px;
    /* Feste Höhe */
    margin: 0 auto;
    overflow: hidden;
    /* VERSTECKT alle anderen Karten */
}

.carousel {
    position: relative;
    width: 100%;
    height: 100%;
}

/* MATHEMATISCHE BERECHNUNG:
   Container: 100% Breite
   - 100px links Abstand
   - 100px rechts Abstand  
   = Verfügbare Breite für 4 Karten + 3 Abstände
   
   Kleine Karten: 200px
   Große Karten: 260px (30% breiter)
   Mittlerer Abstand wird automatisch berechnet
*/

/* GETRÄNKE-KARTEN: Dunkle Karten mit hellem Text */
.product-card {
    position: absolute;
    background: #39312A;
    /* Dunkler Braun-Hintergrund für Getränkekarten */
    border-radius: 16px;
    overflow: visible !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    transform-origin: bottom center;
    bottom: 0;
    /* Alle von unten ausgerichtet */
    opacity: 0;
    /* Standardmäßig unsichtbar */
}

/* SPEISE-KARTEN: Helle Karten (wie vorher) */
.content-section.dark .product-card {
    background: #ECE7E1;
    /* ZURÜCK ZU HELL: Wie es vorher war */
}

/* Schriftfarben für Getränkekarten (dunkle Karten) - HELLE SCHRIFT */
.product-card .product-name {
    color: #E5D5C7;
    /* Helles Beige für Getränkekarten */
}

.product-card .product-description {
    color: #D0C0B0;
    /* Helles Graubeige für Getränkekarten */
}

.product-card .product-price {
    color: #F5F0E8;
    /* Sehr hell für Preise bei Getränkekarten */
}

.product-card .product-size {
    color: #C0B0A0;
    /* Mittleres Beige für Getränkekarten */
}

/* Schriftfarben für Speisekarten (helle Karten) - DUNKLE SCHRIFT (wie vorher) */
.content-section.dark .product-card .product-name {
    color: #7B5B3C;
    /* ZURÜCK: Braun wie vorher */
}

.content-section.dark .product-card .product-description {
    color: #666;
    /* ZURÜCK: Grau wie vorher */
}

.content-section.dark .product-card .product-price {
    color: #222;
    /* ZURÜCK: Dunkel wie vorher */
}

.content-section.dark .product-card .product-size {
    color: #666;
    /* ZURÜCK: Grau wie vorher */
}

/* Nur die 4 sichtbaren Karten */
.product-card.visible {
    opacity: 1;
}

/* STANDARD LAYOUT BIS 1330px: 4 KARTEN MIT EXAKT GLEICHEN ABSTÄNDEN */
/* Mathematik: Container - 200px (Ränder) - 960px (Karten) = Rest für 3 gleiche Abstände */

/* Position 1: Kleine Karte links - GRÖSSER GEMACHT */
.product-card.pos-1 {
    left: 50px;
    /* REDUZIERT: 50px statt 100px Abstand von links */
    width: 240px;
    /* Größer: war 220px */
    height: 280px;
    /* Größer: war 260px */
    transform: scale(0.95);
    /* Weniger verkleinert: war 0.9 */
    z-index: 1;
    opacity: 1;
}

/* Position 2: Große Karte links-mitte */
.product-card.pos-2 {
    left: calc(50px + 240px + var(--gap));
    /* KORRIGIERT: 50px Startpunkt + 240px pos-1 */
    width: 260px;
    height: 285px;
    transform: scale(1.1);
    z-index: 10;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    opacity: 1;
}

/* Position 3: Große Karte rechts-mitte */
.product-card.pos-3 {
    left: calc(50px + 240px + var(--gap) + 260px + var(--gap));
    /* KORRIGIERT: 50px Startpunkt + 240px pos-1 */
    width: 260px;
    height: 285px;
    transform: scale(1.1);
    z-index: 10;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    opacity: 1;
}

/* Position 4: Kleine Karte rechts - GRÖSSER GEMACHT für gleiche Abstände */
.product-card.pos-4 {
    left: calc(50px + 240px + var(--gap) + 260px + var(--gap) + 260px + var(--gap));
    /* KORRIGIERT: 50px Startpunkt + 240px pos-1 */
    width: 240px;
    /* Größer: war 220px */
    height: 280px;
    /* Größer: war 260px */
    transform: scale(0.95);
    /* Weniger verkleinert: war 0.9 */
    z-index: 1;
    opacity: 1;
}

/* BREAKPOINT 1: 1300px - 1150px → BREITERE KARTEN, GLEICHE HÖHE */
@media (max-width: 1300px) and (min-width: 1150px) {

    .product-card.pos-1,
    .product-card.pos-4 {
        width: 200px;
        /* Breiter: war 180px */
        height: 280px;
        /* GLEICHE HÖHE wie bei >1300px */
        transform: scale(0.95);
        /* Weniger verkleinert */
    }

    .product-card.pos-2,
    .product-card.pos-3 {
        width: 240px;
        /* Breiter: war 220px */
        height: 285px;
        /* GLEICHE HÖHE wie bei >1300px */
        transform: scale(1.1);
        /* Gleiches Scale wie große Karten */
    }

    /* Neue Positionen für breitere Karten */
    .product-card.pos-2 {
        left: calc(50px + 200px + var(--gap));
        /* Angepasst für 200px */
    }

    .product-card.pos-3 {
        left: calc(50px + 200px + var(--gap) + 240px + var(--gap));
        /* Angepasst für 200px und 240px */
    }

    .product-card.pos-4 {
        left: calc(50px + 200px + var(--gap) + 240px + var(--gap) + 240px + var(--gap));
        /* Angepasst */
    }
}

/* BREAKPOINT 2: Ab 1150px → NUR 3 KARTEN, GLEICHE HÖHE */
@media (max-width: 1150px) {

    /* Verstecke Position 2 (erste große Karte) */
    .product-card.pos-2 {
        opacity: 0 !important;
        pointer-events: none;
    }

    /* Position 1: Kleine Karte links bleibt */
    .product-card.pos-1 {
        left: 50px;
        /* Angepasst für Konsistenz */
        width: 180px;
        /* Breiter: war 160px */
        height: 280px;
        /* GLEICHE HÖHE wie bei größeren Breakpoints */
        transform: scale(0.95);
        /* Weniger verkleinert */
    }

    /* Position 3: Große Karte wird zentriert */
    .product-card.pos-3 {
        left: calc(50% - 130px);
        /* Zentriert (260px / 2 = 130px) */
        width: 260px;
        height: 285px;
        /* GLEICHE HÖHE beibehalten */
        transform: scale(1.1);
    }

    /* Position 4: Kleine Karte rechts */
    .product-card.pos-4 {
        right: 50px;
        /* Angepasst für Konsistenz */
        /* Von rechts positioniert */
        left: auto;
        /* Überschreibt left-Berechnung */
        width: 180px;
        /* Breiter: war 160px */
        height: 280px;
        /* GLEICHE HÖHE wie bei größeren Breakpoints */
        transform: scale(0.95);
        /* Weniger verkleinert */
    }
}

/* Produktbilder - Standard */
.product-image {
    position: absolute;
    top: -40px;
    /* Zurück zur ursprünglichen Position */
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    /* Kleiner für normale Karten: war 210px */
    height: auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 20;
    pointer-events: none;
}

.product-image img {
    width: 200px;
    /* Kleiner für normale Karten: war 210px */
    height: auto;
    max-height: 240px;
    /* Kleiner: war 270px */
    object-fit: contain;
    object-position: bottom;
}

/* Größere Bilder für kleine Karten (Position 1 & 4) */
.product-card.pos-1 .product-image,
.product-card.pos-4 .product-image {
    top: -70px;
    /* Zurück zur ursprünglichen Position */
    width: 220px;
    /* Größer: war 180px */
}

.product-card.pos-1 .product-image img,
.product-card.pos-4 .product-image img {
    width: 220px;
    /* Größer: war 180px */
    max-height: 280px;
    /* Höher: war 240px */
}

/* Größere Bilder für aktive Karten (Position 2 & 3) */
.product-card.pos-2 .product-image,
.product-card.pos-3 .product-image {
    top: -80px;
    /* Zurück zur ursprünglichen Position */
    width: 280px;
    /* Größer: war 210px */
}

.product-card.pos-2 .product-image img,
.product-card.pos-3 .product-image img {
    width: 280px;
    /* Größer: war 210px */
    max-height: 320px;
    /* Höher: war 270px */
}

/* SPEZIELLE REGELN FÜR MATCHA-BILDER (Gruppe 1-6) - SCHMALER */
.product-image img[src*="Gruppe"] {
    width: 160px !important;
    /* SCHMALER für Matcha-Bilder */
    max-height: 200px !important;
    /* NIEDRIGER für bessere Proportionen */
    object-fit: contain !important;
    object-position: center bottom !important;
    /* Zentriert und nach unten */
}

/* Aktive Matcha-Karten (Position 2 & 3) - etwas größer aber immer noch angepasst */
.product-card.pos-2 .product-image img[src*="Gruppe"],
.product-card.pos-3 .product-image img[src*="Gruppe"] {
    width: 200px !important;
    /* Größer für aktive Karten */
    max-height: 250px !important;
    /* Entsprechend höher */
}

/* Kleine Matcha-Karten (Position 1 & 4) */
.product-card.pos-1 .product-image img[src*="Gruppe"],
.product-card.pos-4 .product-image img[src*="Gruppe"] {
    width: 140px !important;
    /* Kleiner für seitliche Karten */
    max-height: 180px !important;
    /* Entsprechend niedriger */
}

/* GETRÄNKE-SEKTION: Bilder höher positionieren um Text-Überlappung zu vermeiden */
#getraenke .product-image {
    top: -60px !important;
    /* Höher: war -40px */
}

#getraenke .product-card.pos-1 .product-image,
#getraenke .product-card.pos-4 .product-image {
    top: -90px !important;
    /* Höher: war -70px */
}

#getraenke .product-card.pos-2 .product-image,
#getraenke .product-card.pos-3 .product-image {
    top: -150px !important;
    /* Etwas höher: war -80px, aber nicht zu hoch um Abschneiden zu vermeiden */
}

.product-content {
    padding: 12px 18px 50px;
    /* 50px unten für mehr Abstand bei kleinen Karten */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Alles nach unten drücken */
    gap: 8px;
    height: calc(100% - 40px);
    margin-top: 60px;
}

/* Mehr Platz für Content bei aktiven Karten - weniger Padding da sie höher sind */
.product-card.pos-2 .product-content,
.product-card.pos-3 .product-content {
    margin-top: 80px;
    /* Mehr Platz für größere Bilder */
    padding: 15px 18px 35px;
    /* Weniger Padding unten da Karten höher sind */
    height: calc(100% - 60px);
    /* Mehr Höhe für größere Karten */
}

.product-name {
    font-size: 20px;
    color: #7B5B3C;
    margin: 0 0 8px 0;
    /* 8px Abstand zur Beschreibung */
    line-height: 1.2;
    text-align: left;
    text-shadow: 0 1px 2px rgba(123, 91, 60, 0.1);
    font-weight: 600;
}

.product-description {
    font-size: 13px;
    color: #666;
    margin: 0 0 30px 0;
    /* 30px Abstand zum Footer (maximal wie gewünscht) */
    text-align: left;
    line-height: 1.4;
}

.product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    /* Kein zusätzlicher Margin - 20px Padding reicht */
}

.product-size {
    font-size: 12px;
    color: #666;
}

.product-price {
    font-size: 20px;
    font-weight: 700;
    color: #222;
}

/* Nur leichte Anpassungen für aktive Karten */
.product-card.pos-2 .product-name,
.product-card.pos-3 .product-name {
    font-size: 22px;
}

.product-card.pos-2 .product-price,
.product-card.pos-3 .product-price {
    font-size: 22px;
}

.product-name {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    text-transform: capitalize;
}

.product-description {
    font-size: 14px;
    color: #555;
    line-height: 1.4;
    margin-bottom: 12px;
}

.product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-size {
    font-size: 12px;
    color: #666;
}

.product-price {
    font-size: 20px;
    font-weight: 700;
    color: #222;
}

/* Arrow Buttons */
.section-controls .carousel-button {
    position: static;
    transform: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #333;
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.section-controls .carousel-button:hover {
    background: #B49A86;
}

.content-section.dark .section-controls .carousel-button {
    background: transparent;
    border: 2px solid white;
    color: white;
}

.content-section.dark .section-controls .carousel-button:hover {
    background: white;
    color: #3B3B38;
}

/* BERECHNE DEN MITTLEREN ABSTAND AUTOMATISCH */
:root {
    --container-width: 100%;
    --side-margin: 100px;
    /* REDUZIERT: 50px links + 50px rechts (war 200px) */
    --small-card: 240px;
    /* KORRIGIERT: Aktualisiert auf neue Größe */
    --big-card: 260px;
    --total-cards: calc(var(--small-card) + var(--small-card) + var(--big-card) + var(--big-card));
    --available-space: calc(100vw - var(--side-margin) - var(--total-cards));
    --gap: calc(var(--available-space) / 3);
    /* Verteile auf 3 Abstände */
}

/* AB 1440px: MAXIMALE BREITE ERREICHT - LINKER ABSTAND BLEIBT BEI 50px */
@media (min-width: 1440px) {
    :root {
        /* Berechne Abstände exakt wie bei 1420px und friere sie ein */
        --frozen-gap: calc((1420px - 100px - 1040px) / 3);
        /* Basis: 1420px */
    }

    /* Alle Positionen ab 1440px - LINKER ABSTAND BLEIBT KONSTANT BEI 50px */
    .product-card.pos-1 {
        left: 50px;
        /* KONSTANT: Bleibt immer bei 50px, verschiebt sich nicht */
    }

    .product-card.pos-2 {
        left: calc(50px + 240px + var(--frozen-gap));
    }

    .product-card.pos-3 {
        left: calc(50px + 240px + var(--frozen-gap) + 260px + var(--frozen-gap));
    }

    .product-card.pos-4 {
        left: calc(50px + 240px + var(--frozen-gap) + 260px + var(--frozen-gap) + 260px + var(--frozen-gap));
    }
}

/* ==================== MOBILE OPTIMIERUNGEN ==================== */

/* MOBILE - UX Verbesserungen für Galerien */
@media screen and (max-width: 768px) {

    /* HORIZONTALES SCROLLEN VERHINDERN - außer Galerien */
    .content-section {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* CAROUSEL WRAPPER - nur Galerie darf horizontal scrollen */
    .carousel-wrapper {
        overflow-x: auto !important;
        width: 100% !important;
        max-width: 100vw !important;

        /* SNAP SCROLL AKTIVIEREN */
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;

        /* SCROLLBAR VERSTECKEN */
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .carousel-wrapper::-webkit-scrollbar {
        display: none !important;
    }

    /* SECTION HEADER - Vertikale Anordnung für Mobile */
    .section-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
        margin-bottom: 1rem !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* SECTION INFO - Text-Bereich */
    .section-info {
        max-width: 100% !important;
        margin-bottom: 0.5rem !important;
    }

    /* SECTION TITLE - Weniger Abstand nach mehrzeiligen Titeln */
    .section-title {
        font-size: clamp(24px, 6vw, 32px) !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.1 !important;
    }

    /* SECTION SUBTITLE - Responsive Text */
    .section-subtitle {
        font-size: clamp(14px, 3.5vw, 16px) !important;
        margin-bottom: 1rem !important;
    }

    /* SECTION CONTROLS - Buttons UNTER der Beschreibung */
    .section-controls {
        justify-content: center !important;
        gap: 20px !important;
        margin-top: 0.5rem !important;
    }

    /* CAROUSEL BUTTONS - Größer für bessere Touch-Bedienung */
    .carousel-button {
        width: 50px !important;
        height: 50px !important;
        font-size: 24px !important;
        border-radius: 50% !important;
    }

    /* MOBILE CAROUSEL - Größerer Container für vollständige Karten */
    .carousel {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;

        /* GROßER Container damit Karten nicht abgeschnitten werden */
        padding: 40px calc(50vw - 120px) 40px !important;
        /* 40px oben/unten für Platz */
        gap: 35px !important;
        min-height: 380px !important;
        /* Genug Höhe für Karten + Schatten */

        /* Desktop Regeln überschreiben */
        transform: none !important;
        width: auto !important;

        /* Scrollbar verstecken */
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;

        /* Sanfte Ausblendung an den Rändern */
        position: relative !important;
    }

    /* Sanfte Ausblendung der abgeschnittenen Karten an den Rändern */
    .carousel::before,
    .carousel::after {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 30px !important;
        pointer-events: none !important;
        z-index: 20 !important;
    }

    .carousel::before {
        left: 0 !important;
        background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) !important;
    }

    .carousel::after {
        right: 0 !important;
        background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) !important;
    }

    .carousel::-webkit-scrollbar {
        display: none !important;
    }

    /* MOBILE CARDS - Mittelgröße zwischen zu groß und zu klein */
    .carousel .product-card {
        position: relative !important;
        width: 240px !important;
        /* Mittelding: zwischen 220px und 260px */
        height: 320px !important;
        /* Höher für mehr Platz */
        flex-shrink: 0 !important;
        scroll-snap-align: center !important;
        opacity: 1 !important;
        margin: 0 !important;

        /* Alle Desktop positioning entfernen */
        left: auto !important;
        top: auto !important;

        /* Design der großen Desktop-Karten, angepasst */
        transform: scale(1.08) !important;
        /* Mittelding zwischen 1.05 und 1.1 */
        z-index: 10 !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
        /* Schöner Schatten */
        border-radius: 16px !important;
    }

    /* Bilder optimal positionieren */
    .carousel .product-card img {
        width: 100% !important;
        height: 65% !important;
        /* Mehr Platz für Bild */
        object-fit: cover !important;
        object-position: center !important;
        border-radius: 12px 12px 0 0 !important;
    }

    /* ALLE Desktop Position-Klassen überschreiben - Mittelgröße */
    .carousel .product-card.visible,
    .carousel .product-card.pos-1,
    .carousel .product-card.pos-2,
    .carousel .product-card.pos-3,
    .carousel .product-card.pos-4 {
        /* Position für Mobile */
        position: relative !important;
        left: auto !important;
        top: auto !important;
        margin: 0 !important;

        /* Mittelgröße - perfekte Balance */
        width: 240px !important;
        height: 320px !important;
        transform: scale(1.08) !important;
        /* Mittelding */
        z-index: 10 !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
        /* Schöner Schatten */
        opacity: 1 !important;

        /* Flex für Mobile */
        flex-shrink: 0 !important;
        scroll-snap-align: center !important;
    }

    /* Desktop Positionierungs-Klassen komplett deaktivieren */
    .carousel .product-card.visible,
    .carousel .product-card.pos-1,
    .carousel .product-card.pos-2,
    .carousel .product-card.pos-3,
    .carousel .product-card.pos-4 {
        position: relative !important;
        transform: none !important;
        left: auto !important;
        top: auto !important;
        z-index: auto !important;
        opacity: 1 !important;
    }

    /* Navigation auf Mobile komplett verstecken */
    .carousel-nav,
    .section-controls {
        display: none !important;
    }
}

/* ==================== NEUES MOBILE SYSTEM - EINE KARTE ZENTRIERT ==================== */

@media (max-width: 767px) {

    /* Desktop Gallery verstecken */
    .carousel-wrapper {
        display: none !important;
    }

    /* Content Section - Container-Padding entfernen für Mobile */
    .content-section {
        padding: 4rem 0 !important;
        /* KEIN seitliches Padding auf Mobile */
        max-width: none !important;
    }

    /* Mobile Container - DIREKT AM BILDSCHIRMRAND */
    .mobile-gallery {
        display: flex !important;
        overflow-x: scroll !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;

        /* Container geht WIRKLICH von Rand zu Rand */
        width: 100vw !important;
        height: 500px !important;
        padding: 80px 0 20px 0 !important;
        margin: 0 0 -2rem 0 !important;
        /* NEGATIVER UNTERER MARGIN: Weniger Abstand zur nächsten Sektion nur auf Mobile */
        gap: 0 !important;
        /* KEIN GAP - sonst sieht man 2 Karten */

        /* POSITION ABSOLUT vom Bildschirmrand */
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;

        /* Scrollbar verstecken */
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .mobile-gallery::-webkit-scrollbar {
        display: none !important;
    }

    /* Mobile Karte - EINE KARTE = GANZE BILDSCHIRMBREITE */
    .mobile-card {
        /* JEDE KARTE NIMMT GANZE BILDSCHIRMBREITE - dann zentriert sich die 280px Karte automatisch */
        width: 100vw !important;
        /* VOLLE BILDSCHIRMBREITE für Snap-Bereich */
        min-width: 100vw !important;
        /* Verhindert Schrumpfen */
        height: 260px !important;
        flex-shrink: 0 !important;
        scroll-snap-align: center !important;
        /* CENTER: Karte verschwindet erst am Bildschirmrand */

        /* Karte selbst ist zentriert INNERHALB der 100vw */
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;

        /* Kein Background/Style hier - das kommt auf .mobile-card-inner */
        background: none !important;
        border: none !important;
        box-shadow: none !important;

        /* Positionierung */
        position: relative !important;
        overflow: visible !important;
        transform: none !important;
        z-index: 10 !important;
    }

    /* INNERE KARTE - das eigentliche Design */
    .mobile-card-inner {
        width: 280px !important;
        /* FESTE BREITE der eigentlichen Karte */
        height: 260px !important;

        /* STYLE der Karte */
        background: #39312A !important;
        /* Dunkle Karten für Getränke */
        border-radius: 16px !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;

        /* Positionierung */
        position: relative !important;
        overflow: visible !important;
    }

    /* Mobile Karte für Speisen (helle Karten) */
    .content-section.dark .mobile-card-inner {
        background: #ECE7E1 !important;
        /* Helle Karten für Speisen */
    }

    /* Mobile Produktbild - wie Desktop */
    .mobile-card-image {
        position: absolute !important;
        top: -80px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 200px !important;
        height: auto !important;
        z-index: 20 !important;

        /* Bildstyle */
        object-fit: contain !important;
        object-position: bottom !important;
        max-height: 240px !important;
    }

    /* GRÖSSERE BILDER für Speisekarten (helle Karten) */
    .content-section.dark .mobile-card-image {
        width: 280px !important;
        /* VIEL GRÖSSER: 200px → 280px für Speisen */
        max-height: 320px !important;
        /* Entsprechend höher für Speisen */
        top: -70px !important;
        /* Etwas höher wegen größerem Bild */
    }

    /* Spezielle Matcha-Bilder (bleiben wie sie waren) */
    .mobile-card-image[src*="Gruppe"] {
        width: 160px !important;
        max-height: 200px !important;
    }

    /* Matcha-Bilder bei Speisen auch größer */
    .content-section.dark .mobile-card-image[src*="Gruppe"] {
        width: 220px !important;
        /* Größer als normal aber nicht so groß wie andere Speisen */
        max-height: 280px !important;
    }

    /* Mobile Content - wie Desktop */
    .mobile-card-content {
        padding: 12px 18px 20px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        height: calc(100% - 40px) !important;
        margin-top: 60px !important;
    }

    /* Mobile Text - gleiche Farben wie Desktop Getränkekarten */
    .mobile-card-title {
        font-size: 20px !important;
        font-weight: 600 !important;
        color: #E5D5C7 !important;
        /* Helles Beige für Getränke */
        margin: 0 0 8px 0 !important;
        line-height: 1.2 !important;
        text-align: left !important;
    }

    .mobile-card-description {
        font-size: 13px !important;
        color: #D0C0B0 !important;
        /* Helles Graubeige für Getränke */
        margin: 0 0 30px 0 !important;
        text-align: left !important;
        line-height: 1.4 !important;
    }

    .mobile-card-footer {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin: 0 !important;
    }

    .mobile-card-size {
        font-size: 12px !important;
        color: #C0B0A0 !important;
        /* Mittleres Beige für Getränke */
    }

    .mobile-card-price {
        font-size: 20px !important;
        font-weight: 700 !important;
        color: #F5F0E8 !important;
        /* Sehr hell für Preise bei Getränken */
    }

    /* Mobile Text für Speisekarten (helle Karten) */
    .content-section.dark .mobile-card-title {
        color: #7B5B3C !important;
        /* Braun für Speisen */
    }

    .content-section.dark .mobile-card-description {
        color: #666 !important;
        /* Grau für Speisen */
    }

    .content-section.dark .mobile-card-size {
        color: #666 !important;
        /* Grau für Speisen */
    }

    .content-section.dark .mobile-card-price {
        color: #222 !important;
        /* Dunkel für Speisen */
    }
}

/* ==================== KONTAKT / LOCATION SEKTION ==================== */

/* Location Wrapper - responsive Container für Adresse + Karte */
#location-wrapper {
    background: #f5f0e8;
    /* Beige Hintergrund */
    color: #4a473f;
    /* Beige Text */
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    max-width: 1400px;
    margin: 2rem auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    min-height: 320px;
}

#location-text,
#location-map {
    flex: 1 1 320px;
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

#location-text h3 {
    font-weight: 600;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin-bottom: 1rem;
    color: #c19a6b;
    /* Accent color */
}

#location-text p {
    font-size: 1.1rem;
    line-height: 1.5;
    margin-bottom: 1.4rem;
    font-weight: 400;
}

#location-text p a {
    color: #4a473f;
    text-decoration: none;
    transition: color 0.3s ease;
}

#location-text p a:hover,
#location-text p a:focus-visible {
    text-decoration: underline;
    color: #c19a6b;
}

/* Leaflet Map */
#location-map #map {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    min-height: 280px;
    max-height: 400px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    #location-wrapper {
        flex-direction: column;
        margin: 2rem 1rem;
        min-height: auto;
    }

    #location-text,
    #location-map {
        flex: none;
        padding: 2rem 1.5rem;
    }

    #location-map #map {
        max-height: 300px;
        min-height: 240px;
    }
}

/* Ausnahme: Über uns & Catering – kompaktere Ränder als die Galerie-Defaultwerte */
@media (max-width: 767px) {

    #ueberuns.content-section,
    #catering.content-section {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }
}