/* =============================================================================
   VERTIGO BAR – CUSTOM CSS
   Gilt für Hauptseite (via Customizer) und private-events.html (via Link)
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. TYPOGRAFIE & FARBEN
   ----------------------------------------------------------------------------- */

/* Linkfarben */
a,
a:link,
a:visited {
    color: #C97D3E;
}

a:hover,
a:focus {
    color: #E8954F;
}

a:active {
    color: #B87333;
}

/* Motto */
.about-text .motto {
    color: #a0c4bb;
    font-size: 1.3rem;
}

/* Gedimmte Texte (Infos, Beschreibungen) */
.contact-value,
.about-text p,
.fact-desc,
.include-desc,
.hero-sub,
.hero-eyebrow,
.merch-text,
.hours-note p,
.hours-day,
.hours-time,
.contact-value p {
    color: #defaef !important;
}


/* -----------------------------------------------------------------------------
   2. ÖFFNUNGSZEITEN
   ----------------------------------------------------------------------------- */

.hours-day {
    font-size: 0.75rem;
}

.hours-time {
    font-size: 1.2rem;
}

.hours-note p {
    font-size: 1.05rem;
}


/* -----------------------------------------------------------------------------
   3. MERCH
   ----------------------------------------------------------------------------- */

.merch-text {
    font-size: 1.2rem;
}


/* -----------------------------------------------------------------------------
   4. HERO & LOGO
   ----------------------------------------------------------------------------- */

.hero-logo-img {
    margin-top: 4rem;
    margin-bottom: 3rem;
    width: 120px;
}


/* -----------------------------------------------------------------------------
   5. INSTAGRAM FEED
   ----------------------------------------------------------------------------- */

.feed-item {
    aspect-ratio: 1 / 1;
}

.feed-grid {
    grid-template-columns: repeat(6, 1fr);
}

.feed-section {
    max-width: 1200px;
    margin: 0 auto;
}


/* -----------------------------------------------------------------------------
   6. KARTE
   ----------------------------------------------------------------------------- */

.map-container {
    max-height: 300px;
}


/* -----------------------------------------------------------------------------
   7. MOBILE MENÜ
   ----------------------------------------------------------------------------- */

.mobile-menu {
    background: rgba(8, 13, 13, 0.70) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}


/* -----------------------------------------------------------------------------
   8. RESPONSIVE
   ----------------------------------------------------------------------------- */

@media (max-width: 768px) {

    /* Instagram Feed: 3 Spalten auf Mobile */
    .feed-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Seitliche Abstände für alle Hauptsektionen */
    .about-section,
    .hours-section,
    .contact-section,
    .quote-section,
    .feed-section,
    .photos-section,
    .facts-section,
    .includes-section,
    .form-section {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

}