/* Grundaufbau: Tiefschwarzer Hintergrund */
body {
    background-color: #000000;
    color: #000000;
    font-family: 'Times New Roman', Times, serif; /* Passend zum klassischen Look */
    margin: 0;
    padding: 20px 0;
}

/* Zentrierter Layout-Container */
.vb-layout-wrapper {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Abstand zwischen oberem und unterem Kasten */
}

/* Gemeinsame Basis für die hellgrauen Blöcke */
.vb-block {
    background-color: #E6E6E6; /* Hellgrauer Hintergrund der Boxen */
    border: 1px solid #C0C0C0;
    padding: 20px;
    text-align: center;
}

/* Container für Logo und Avatare */
.vb-logo-container {
    display: flex;
    justify-content: center; /* Zentriert die gesamte Gruppe */
    align-items: center;     /* Richtet alle drei Bilder perfekt vertikal mittig aus */
    gap: 120px;               /* Abstand zwischen den Bildern – nach Bedarf erhöhen/verringern */
    margin: 25px 0;
    width: 100%;
}

/* Die beiden Avatare */
.vb-avatar {
    height: 220px;           /* Wunschgröße der äußeren Bilder */
    width: auto;
    object-fit: contain;
    display: block;
}

/* Das neue, mittige PNG-Logo */
.vb-logo-img {
    height: 220px;           /* Eigenständige Höhe für das Logo – hier flexibel anpassbar */
    width: auto;
    object-fit: contain;
    display: block;
}
.vb-slogan {
    color: #A31D1D; /* Dunkelroter Slogan-Text */
    font-weight: bold;
    font-size: 16px;
    margin-top: 15px;
    letter-spacing: 1px;
}

/* Untere Box: Inhalt */
.vb-content-block {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.vb-inner-content {
    margin: auto 0;
    font-size: 24px;
    border-top: 1px solid #B0B0B0;
    border-bottom: 1px solid #B0B0B0;
    padding: 30px 0;
}

/* Zurück-Button */
.vb-btn-back {
    display: inline-block;
    color: #000;
    text-decoration: none;
    border: 1px solid #000;
    background: #C0C0C0;
    padding: 5px 20px;
    font-size: 14px;
    box-shadow: 1px 1px 0px #fff inset;
}

/* Grundstruktur des neuen Menüs */
.vb-nav {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}

.vb-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px; /* Abstand zwischen den Hauptmenüpunkten */
}

/* Einzelne Menüpunkte */
.vb-menu-item {
    position: relative; /* Wichtig für die Positionierung des Dropdowns */
}

.vb-menu-item a {
    display: block;
    color: #000000;
    text-decoration: none;
    border: 1px solid #000;
    padding: 5px 20px;
    background: #fff;
    font-size: 14px;
    white-space: nowrap;
}

/* Das Dropdown-Menü (standardmäßig unsichtbar) */
.vb-dropdown {
    position: absolute;
    top: 100%; /* Erscheint direkt unter dem Hauptpunkt */
    left: 0;
    list-style: none;
    padding: 0;
    margin: 5px 0 0 0;
    display: none; /* Versteckt das Menü */
    z-index: 100;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
}

.vb-dropdown li a {
    border-top: none; /* Verhindert doppelte Rahmenlinien */
    background: #E6E6E6; /* Etwas dunklerer Hintergrund im Dropdown */
}

.vb-dropdown li a:hover {
    background: #fff; /* Highlight-Effekt beim Drüberfahren */
}

/* Dropdown anzeigen, wenn man mit der Maus über den Hauptpunkt fährt */
.vb-menu-item:hover .vb-dropdown {
    display: block;
}

/* Kleiner visueller Indikator für Menüs mit Unterseiten (optional) */
.has-dropdown > a::after {
    content: " ▾";
    font-size: 11px;
}
/* Shop Grid System */
.vb-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 20px 0;
    width: 100%;
}

.vb-produkt-card {
    background-color: #E6E6E6;
    border: 1px solid #C0C0C0;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.vb-produkt-img {
    max-height: 200px;
    width: auto;
    object-fit: contain;
    margin-bottom: 15px;
    border: 1px solid #000;
    background: #fff;
}

.vb-produkt-card h3 {
    margin: 10px 0 5px 0;
    color: #000;
    font-size: 20px;
}

.vb-produkt-beschreibung {
    font-size: 14px;
    color: #333;
    margin-bottom: 15px;
}

.vb-produkt-preis {
    font-size: 22px;
    font-weight: bold;
    color: #A31D1D;
    margin-bottom: 15px;
}
/* ==========================================================================
   KOMPLETTER BLOCK: RESPONSIVE OPTIMIERUNG (KORRIGIERTE FARBEN)
   ========================================================================= */

@media screen and (max-width: 768px) {
    
    /* Hintergrund und Abstände für Smartphones */
    body {
        background-color: #000000 !important;
        padding: 10px;
    }

    .vb-layout-wrapper {
        max-width: 100%;
        gap: 15px;
    }

    /* REPARATUR: Nur Schriften im UNTEREN Kasten werden auf Schwarz gezwungen */
    .vb-content-block, 
    .vb-inner-content, 
    .vb-inner-content p,
    .vb-inner-content h1,
    .vb-inner-content h2,
    .vb-inner-content h3,
    .vb-inner-content span {
        color: #000000 !important;
    }

    /* OBERER KASTEN (Header): Behält seine Original-Farbwerte bei */
    .vb-header-block .vb-slogan {
        color: #A31D1D !important; /* Ursprünglicher dunkelroter Slogan */
        font-size: 11px !important; 
        line-height: 1.3 !important;
        letter-spacing: 0px !important;
    }

    .vb-header-block .vb-menu-item a {
        color: #000000 !important; /* Menüpunkte bleiben schwarz */
    }

    /* Hält Avatare und Logo in einer horizontalen Reihe */
    .vb-logo-container {
        display: flex !important;
        flex-direction: row !important; 
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 10px 0 !important;
        width: 100% !important;
    }

    /* Proportionale Verkleinerung der Grafiken für Handys */
    .vb-avatar {
        height: 60px !important; 
        width: auto !important;
        display: block !important;
    }

    .vb-logo-img {
        height: 50px !important; 
        width: auto !important;
        display: block !important;
    }

    /* Menü-Struktur für Touch-Bedienung untereinander */
    .vb-menu-list {
        flex-direction: column !important;
        width: 100% !important;
        gap: 8px !important;
    }
    
    .vb-menu-item, 
    .vb-menu-item a {
        width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
    
    /* Das mobile Dropdown-Untermenü */
    .vb-dropdown {
        position: relative !important;
        top: 0 !important;
        width: 100% !important;
        box-shadow: none !important;
        margin-top: 5px !important;
    }
    
    .vb-dropdown li a {
        text-align: center !important;
        color: #000000 !important;
    }

    /* Inhalt und Formularfelder mobil optimieren */
    .vb-inner-content {
        font-size: 18px !important;
        padding: 15px 0 !important;
    }
    
    form[name="kontakt-formular"] {
        max-width: 100% !important;
    }

    /* Eingabefelder Textfarbe sichern */
    form[name="kontakt-formular"] input[type="text"],
    form[name="kontakt-formular"] input[type="email"],
    form[name="kontakt-formular"] input[type="tel"],
    form[name="kontakt-formular"] textarea {
        color: #000000 !important;
        background-color: #ffffff !important;
    }
}