/* =========================
   BACKGROUND (SAUBER & FUNKTIONIERT)
   ========================= */

/* Hintergrund auf die Elemente die WIRKEN */
.page,
.container,
.container-xxl,
.container-fluid,
main {
    background: linear-gradient(
        180deg,
        #f8fbff 0%,
        #eef4fb 50%,
        #f4f8ff 100%
    ) !important;
}

/* =========================
   HEADER
   ========================= */

.header-inner .row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.header-inner .row > div {
    width: 100% !important;
    text-align: center !important;
}

/* Logo */
.logo img {
    max-width: 420px !important;
    height: auto !important;
    margin: 0 auto 15px auto !important;
    display: block;
}

/* Suche */
.main-search input {
    width: 300px;
    max-width: 90%;
    border-radius: 8px;
    padding: 8px 12px;
}

/* =========================
   DESIGN
   ========================= */

/* Buttons */
button,
.btn,
input[type="submit"],
.addtocart-button {
    background: linear-gradient(45deg, #ff2f8f, #00bfff);
    border: none;
    color: white;
    border-radius: 8px;
    padding: 8px 12px;
}

/* Hover Links */
a:hover {
    color: #ff2f8f;
}

/* Karten */
.moduletable,
.vmCartModule,
.com-users-login,
.product,
.vm-product,
.browseProductContainer {
    background: #ffffff;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* Produkte Hover */
.product:hover,
.vm-product:hover,
.browseProductContainer:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* Preis */
.PricesalesPrice {
    color: #ff2f8f;
    font-size: 18px;
    font-weight: bold;
}

/* Bilder */
.product img,
.vm-product img {
    max-height: 180px;
    object-fit: contain;
}html, body {
    background: linear-gradient(
        180deg,
        #d6ecff 0%,     /* kräftigeres Blau oben */
        #c2e2ff 40%,    /* deutlich sichtbar */
        #e6d8ff 75%,    /* stärkeres Lila */
        #ffd6e8 100%    /* sichtbares Pink unten */
    ) !important;
}/* ===== HINTERGRUND ÜBERALL SICHTBAR ===== */

/* echter Seitenhintergrund */
html, body {
    background: linear-gradient(
        180deg,
        #d6ecff 0%,
        #c2e2ff 40%,
        #e6d8ff 75%,
        #ffd6e8 100%
    ) !important;
}

/* DIE ÜBELTÄTER ENTFERNEN */
.page,
.site,
.wrapper,
#wrapper,
.container,
.container-fluid,
.container-xxl,
main {
    background: transparent !important;
}/* ===== SIDEBAR MENÜ UPGRADE ===== */

/* Menü Box */
.moduletable {
    background: rgba(255,255,255,0.85);
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* Menü Titel */
.moduletable h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    text-align: left;
}

/* Liste reset */
.moduletable ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* einzelne Menü Punkte */
.moduletable ul li {
    margin-bottom: 6px;
}

/* Links */
.moduletable ul li a {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    color: #333;
    text-decoration: none;
    transition: 0.25s;
}

/* Hover Effekt */
.moduletable ul li a:hover {
    background: linear-gradient(45deg, #ff2f8f, #00bfff);
    color: white;
    transform: translateX(4px);
}

/* AKTIVE Seite */
.moduletable ul li.active > a {
    background: linear-gradient(45deg, #ff2f8f, #00bfff);
    color: white;
    font-weight: 500;
}
/* ===== NUR AKTIVE SEITE HERVORHEBEN ===== */

/* Elternpunkt wieder neutral machen */
.moduletable ul li.parent.active > a {
    background: transparent !important;
    color: #333 !important;
}

/* Nur echter aktiver Punkt bleibt farbig */
.moduletable ul li.current > a,
.moduletable ul li.active.current > a {
    background: linear-gradient(45deg, #ff2f8f, #00bfff) !important;
    color: white !important;
}