/* ===== OFFCANVAS MOBILE MENU ===== */
.offcanvas__area {
   position: fixed;
   top: 0;
   right: -100%;
   width: 100%;
   max-width: 380px;
   height: 100vh;
   background: #fff;
   z-index: 99999;
   transition: right 0.4s ease;
   overflow: hidden;
   box-shadow: -5px 0 30px rgba(0,0,0,0.15);
}
.offcanvas__area.opened { right: 0; }
.offcanvas__wrapper { height: 100%; display: flex; flex-direction: column; }
.offcanvas__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 20px;
   border-bottom: 1px solid #eee;
   background: #fff;
   z-index: 10;
   flex-shrink: 0;
}
.offcanvas__logo img { max-height: 40px; }
.offcanvas__close-btn {
   width: 40px;
   height: 40px;
   border: none;
   background: #f5f5f5;
   border-radius: 50%;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s ease;
}
.offcanvas__close-btn:hover { background: #AB0C2F; color: #fff; }

/* Mobile Menu Navigation */
.mobile-menu { flex: 1; overflow-y: auto; position: relative; }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu > ul > li { border-bottom: 1px solid #f0f0f0; }
.mobile-menu-item { display: flex; align-items: center; }
.mobile-menu-item > a {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 18px 20px;
   font-size: 16px;
   font-weight: 600;
   color: #333;
   text-decoration: none;
   transition: all 0.2s ease;
}
.mobile-menu-item > a:hover { color: #AB0C2F; background: #fafafa; }
.mobile-menu-item .menu-arrow { width: 16px; height: 16px; color: #999; transition: transform 0.3s ease; }

/* Mobile Submenu Slide Panel */
.mobile-submenu {
   position: absolute;
   top: 0;
   left: 100%;
   width: 100%;
   height: 100%;
   background: #fff;
   transition: left 0.3s ease;
   overflow-y: auto;
   z-index: 20;
}
.mobile-submenu.open { left: 0; }
.mobile-submenu-back {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 18px 20px;
   font-size: 15px;
   font-weight: 600;
   color: #AB0C2F;
   background: #f9f9f9;
   border-bottom: 1px solid #eee;
   cursor: pointer;
   transition: background 0.2s ease;
}
.mobile-submenu-back:hover { background: #f0f0f0; }
.mobile-submenu-back svg { width: 18px; height: 18px; }
.mobile-submenu-main-link {
   display: block;
   padding: 16px 20px;
   font-size: 15px;
   font-weight: 700;
   color: #AB0C2F;
   text-decoration: none;
   background: rgba(171, 12, 47, 0.05);
   border-bottom: 1px solid #eee;
}
.mobile-submenu-main-link:hover { background: rgba(171, 12, 47, 0.1); }
.mobile-submenu-category {
   padding: 15px 20px 8px;
   font-size: 12px;
   font-weight: 700;
   color: #AB0C2F;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   border-top: 1px solid #f0f0f0;
   margin-top: 5px;
}
.mobile-submenu-category:first-of-type { border-top: none; margin-top: 0; }
.mobile-submenu ul { padding: 0 0 10px 0; }
.mobile-submenu li a {
   display: block;
   padding: 12px 20px 12px 30px;
   font-size: 14px;
   color: #555;
   text-decoration: none;
   transition: all 0.2s ease;
}
.mobile-submenu li a:hover { color: #AB0C2F; background: #fafafa; padding-left: 35px; }

/* Mobile Category Cards */
.mobile-category-list { padding: 10px 15px 15px; }
.mobile-category-item {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 14px 15px;
   background: #fff;
   border-radius: 10px;
   margin-bottom: 8px;
   text-decoration: none;
   border: 1px solid #eee;
   transition: all 0.2s ease;
}
.mobile-category-item:hover {
   border-color: #AB0C2F;
   box-shadow: 0 4px 15px rgba(171,12,47,0.12);
   transform: translateX(5px);
}
.mobile-category-item .cat-icon { font-size: 24px; flex-shrink: 0; }
.mobile-category-item .cat-info { display: flex; flex-direction: column; gap: 2px; }
.mobile-category-item .cat-name { font-size: 14px; font-weight: 600; color: #333; }
.mobile-category-item .cat-count { font-size: 12px; color: #888; }

/* Offcanvas Footer */
.offcanvas__footer { padding: 20px; border-top: 1px solid #eee; background: #f9f9f9; flex-shrink: 0; }
.offcanvas__contact-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-size: 14px; }
.offcanvas__contact-item svg { width: 18px; height: 18px; color: #AB0C2F; flex-shrink: 0; }
.offcanvas__contact-item a { color: #333; text-decoration: none; }
.offcanvas__contact-item a:hover { color: #AB0C2F; }
.offcanvas__social { display: flex; gap: 10px; margin-top: 15px; }
.offcanvas__social a {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: #fff;
   border: 1px solid #e5e5e5;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #666;
   transition: all 0.2s ease;
}
.offcanvas__social a:hover { background: #AB0C2F; border-color: #AB0C2F; color: #fff; }
.offcanvas__social a svg { width: 18px; height: 18px; }

/* Mobile Login Button */
.mobile-login-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   width: 100%;
   padding: 14px 20px;
   background: linear-gradient(135deg, #AB0C2F, #8a0a26);
   color: #fff;
   border: none;
   border-radius: 10px;
   font-size: 15px;
   font-weight: 600;
   cursor: pointer;
   margin-top: 15px;
   transition: all 0.3s ease;
   text-decoration: none;
}
.mobile-login-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(171,12,47,0.3); }
.mobile-login-btn svg { width: 18px; height: 18px; }

/* Mobile User Info (eingeloggt) */
.mobile-user-info { display: none; padding: 15px; background: #fff; border-radius: 10px; margin-top: 15px; border: 1px solid #eee; }
.mobile-user-info.show { display: block; }
.mobile-user-header { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.mobile-user-avatar {
   width: 45px;
   height: 45px;
   background: linear-gradient(135deg, #AB0C2F, #8a0a26);
   color: #fff;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   font-weight: 700;
}
.mobile-user-name { font-size: 16px; font-weight: 600; color: #333; }
.mobile-user-email { font-size: 13px; color: #888; }
.mobile-logout-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   width: 100%;
   padding: 12px;
   background: #f5f5f5;
   color: #dc2626;
   border: none;
   border-radius: 8px;
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
}
.mobile-logout-btn:hover { background: #fef2f2; }

/* Body Overlay */
.body-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0,0,0,0.5);
   z-index: 99998;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease;
}
.body-overlay.active { opacity: 1; visibility: visible; }

/* ===== RESPONSIVE ===== */
@media (max-width: 500px) {
   .offcanvas__area { max-width: 100%; }
}