/*/////////////////////////////////////////////////////////////////////
 // 
 // Custom theme code styles
 // Written by Themelize.me (http://themelize.me)
 // 
 // This is an empty starter template for overriding styles
 // set by Bootstrap & the theme
 // 
 // ----------------------------------------------------
 // 
 // Remove unused code for better performances
 // 
 // ----------------------------------------------------
 // 
 // $see - Usefuls tools online for editing
 // 1. http://charliepark.org/bootstrap_buttons/ - Button style generator
 // 2. http://www.colorzilla.com/gradient-editor/ - CSS3 gradient maker
 // 
 // $note
 // To ensure custom styles are picked up
 // wrap definitions in body tag
 // ie.
 // body .navbar-inner {
 //   background: #ff0000;
 // }
 // 
 /////////////////////////////////////////////////////////////////////*/
/*******************************************************
 * Custom theme code styles
 * Written by Themelize.me (http://themelize.me)
 *
 * Includes the base variables & mixins needed for all
 * scss files
 *******************************************************/
/*
 * --------------------------------------------------
 * 1. General Elements
 *--------------------------------------------------
 */
#header {
  /* 1. Header wrapper */
}

#highlighted {
  /* 2. Highlighted (below header) wrapper */
}

#content {
  /* 3. Content wrapper */

}

#content-below {
  /* 4. Content Below wrapper */
}

#footer {
  /* 5. Footer wrapper */
}

/*
 * --------------------------------------------------
 * Sticky Footer: Footer immer am Seitenende
 * --------------------------------------------------
 */
html { height: 100%; }
body.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.page #footer {
  margin-top: auto;
}
/* Mobile Sitenav (Page ohne/wenig Content ist Sitenav sichtbar) */
.navbar-offcanvas
.navbar-main,
.navbar-offcanvas
.navbar-main.collapse,
.navbar-offcanvas
.navbar-main.in,
.navbar-offcanvas.navbar-main,
.navbar-offcanvas.navbar-main.collapse,
.navbar-offcanvas.navbar-main.in {
    padding: 0;
    margin: 0;
    height: auto !important; /* Default: 100% !important */
    display: block !important;
    visibility: visible !important;
}

/*
 * --------------------------------------------------
 * 2. Colours
 *-------------------------------------------------- 
 */
.submenu-link { 
  color: #c9c9c9 !important; 
}
/*
 * --------------------------------------------------
 * 3. Responsiveness/media queries
 *--------------------------------------------------
 */
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
@media (min-width: 576px) {
  /* Small devices (576px and up). Mixin: media-breakpoint-up(sm) */
}

@media (min-width: 768px) {
  /* Medium devices (768px and up). Mixin: media-breakpoint-up(md) */
}

@media (min-width: 992px) {
  /* Large devices (992px and up). Mixin: media-breakpoint-up(lg) */

  /* ===== Desktop Navigation: Hover-Dropdown ===== */
  /* Haupt-Dropdown beim Hover öffnen */
  .navbar-nav .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
    opacity: 1 !important;
    visibility: visible !important;
  }
  /* Sub-Dropdown beim Hover öffnen */
  .dropdown-submenu:hover > .dropdown-menu {
    display: block;
    opacity: 1 !important;
    visibility: visible !important;
  }
  /* Sanfte Einblend-Animation */
  .navbar-nav .nav-item.dropdown .dropdown-menu,
  .dropdown-submenu .dropdown-menu {
    transition: opacity .18s ease, visibility .18s ease;
    display: none;
  }
  /* Nav-Link aktiv-Indikator beim Hover */
  .navbar-nav .nav-item > .nav-link:hover {
    opacity: 1;
  }
}

@media (min-width: 1200px) {
  /* X-Large devices (1200px and up). Mixin: media-breakpoint-up(xl) */
}

/* max-width */
@media (max-width: 575.98px) {
  /* Small devices (575px and down). Mixin: media-breakpoint-down(xs) */
}

@media (max-width: 767.98px) {
  /* Medium devices (767px and down). Mixin: media-breakpoint-down(sm) */
}

@media (max-width: 991.98px) {
  /* Large devices (992px and down). Mixin: media-breakpoint-down(md) */
}

@media (max-width: 1199.98px) {
  /* X-Large devices (1200px and down). Mixin: media-breakpoint-down(lg) */
}

/* target one breakpoint */
@media (min-width: 576px) and (max-width: 767.98px) {
  /* Small devices (between 576px and 767px). Mixin: media-breakpoint-only(sm) */
}

@media (min-width: 768px) and (max-width: 991.98px) {
  /* Medium devices (tablets, between 768px and 991px). Mixin: media-breakpoint-only(md) */
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  /* Large devices (desktops, between 992px and 1199px). Mixin: media-breakpoint-only(lg) */
}

@media (min-width: 1200px) {
  /* Extra large devices (large desktops, 1200px and up). Mixin: media-breakpoint-only(xl) */
}

/* span multiple screenwidths */
@media (min-width: 768px) {
  /* From medium to large (between 768px and 1199px). Mixin: media-breakpoint-between(md, xl)  */
}

/*
 * --------------------------------------------------
 * 4. Google Font
 * Open-Sans, 300, 400, 700 - latin
 * public/assets/fonts
 *--------------------------------------------------
 */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans-v34-latin-300.woff2') format('woff2'),
       url('../fonts/open-sans-v34-latin-300.woff') format('woff');
}
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2'),
       url('../fonts/open-sans-v34-latin-regular.woff') format('woff');
}
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v34-latin-700.woff2') format('woff2'),
       url('../fonts/open-sans-v34-latin-700.woff') format('woff');
}

/*
 * --------------------------------------------------
 * 5. Google Font
 * Rambla, 400, 700 - latin
 * public/assets/fonts
 *--------------------------------------------------
 */
@font-face {
  font-display: swap;
  font-family: 'Rambla';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/rambla-v13-latin-regular.woff2') format('woff2'),
       url('../fonts/rambla-v13-latin-regular.woff') format('woff');
}
@font-face {
  font-display: swap;
  font-family: 'Rambla';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/rambla-v13-latin-700.woff2') format('woff2'),
       url('../fonts/rambla-v13-latin-700.woff') format('woff');
}

 /*
 * --------------------------------------------------
 * 6. Google Font
 * Calligraffitti - latin
 * public/assets/fonts
 *--------------------------------------------------
 */
@font-face {
  font-display: swap;
  font-family: 'Calligraffitti';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/calligraffitti-v19-latin-regular.woff2') format('woff2'),
       url('../fonts/calligraffitti-v19-latin-regular.woff') format('woff');
}

 /*
 * --------------------------------------------------
 * 7. Google Font
 * Roboto-Slab, 400, 700 - latin
 * public/assets/fonts
 *--------------------------------------------------
 */
@font-face {
  font-display: swap;
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-slab-v24-latin-regular.woff2') format('woff2'),
       url('../fonts/roboto-slab-v24-latin-regular.woff') format('woff');
}
@font-face {
  font-display: swap;
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-slab-v24-latin-700.woff2') format('woff2'),
       url('../fonts/roboto-slab-v24-latin-700.woff') format('woff');
}

 /*
 * --------------------------------------------------
 * 8. Google Font
 * Special Elite, 400 - latin
 * public/assets/fonts
 *--------------------------------------------------
 */
/* @font-face {
  font-display: swap;
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/special-elite-v18-latin-regular.woff2') format('woff2'),
       url('../fonts/special-elite-v18-latin-regular.woff') format('woff');
} */

 /*
 * --------------------------------------------------
 * 9. Google Font
 * Roboto, 100, 400, 700 - latin
 * public/assets/fonts
 *--------------------------------------------------
 */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/roboto-v30-latin-100.woff2') format('woff2'),
       url('../fonts/roboto-v30-latin-100.woff') format('woff');
}
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'),
       url('../fonts/roboto-v30-latin-regular.woff') format('woff');
}
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v30-latin-700.woff2') format('woff2'),
       url('../fonts/roboto-v30-latin-700.woff') format('woff');
}

/*
 * --------------------------------------------------
 * Cart Dropdown & Badge
 * --------------------------------------------------
 */

/* Badge: Kreis oben rechts am Warenkorb-Icon */
.cart-badge {
  position: absolute;
  top: -8px;
  right: -10px;
  background: #495057;
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}

/* Warenkorb-Icon-Wrapper braucht relative Positionierung für Badge */
.cart-link-icon {
  position: relative;
}

/* Dropdown: rechte Kante ausrichten */
#cart-dropdown-menu {
  position: absolute;
  right: 0 !important;
  left: auto !important;
  top: 100%;
  z-index: 1050;
}

/* Header-Block: Overflow visible damit Cart-Dropdown nicht geclippt wird */
.header-block,
.header-inner,
.header {
  overflow: visible !important;
}

/*
 * --------------------------------------------------
 * Neuer Site-Header: Topbar + Navbar
 * --------------------------------------------------
 */

/* Topbar */
.site-topbar {
  background: rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 12px;
  padding: 4px 0;
  position: relative;
  z-index: 1065;
}
.site-topbar-link {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  padding: 2px 8px;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.site-topbar-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  text-decoration: none;
}

.site-topbar .dropdown-menu {
  z-index: 2100;
}

/* Hauptnavbar */
.site-navbar {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 3px 12px rgba(0,0,0,.14);
  position: sticky;
  top: 0;
  z-index: 1055;
  padding: 0.5rem 0;
}

/* Brand */
.site-navbar-brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  padding: 0;
  margin-right: 2rem;
}
.site-navbar-brand:hover {
  text-decoration: none;
}
.site-navbar-brand-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.3px;
}
.site-navbar-brand-slogan {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 400;
}

/* Nav links */
.site-navbar .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  transition: background .15s, color .15s;
}
.site-navbar .navbar-nav .nav-link:hover,
.site-navbar .navbar-nav .nav-item.show > .nav-link {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}
.site-navbar .navbar-nav .dropdown-menu {
  border: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  border-radius: 8px;
  padding: 6px 0;
}
.site-navbar .navbar-nav .dropdown-item {
  font-size: 0.875rem;
  padding: 0.45rem 1rem;
  color: #495057;
  border-radius: 4px;
  margin: 1px 4px;
}
.site-navbar .navbar-nav .dropdown-item:hover {
  background: #f0f0f0;
  color: #212529;
}

/* Desktop hover auf Nav-Dropdowns */
@media (min-width: 992px) {
  .site-navbar .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
  }
}

/* Warenkorb-Button */
.site-navbar-cart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.96);
  font-size: 1.15rem;
  text-decoration: none;
  transition: background .15s, color .15s;
  background: transparent;
}
.site-navbar-cart-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  text-decoration: none;
}

/* Icon-Buttons (Off-Canvas, etc.) */
.site-navbar-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.2rem;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.site-navbar-icon-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  text-decoration: none;
}

/* Hamburger */
.site-navbar-toggler {
  padding: 6px 8px;
  border-radius: 8px;
  color: #fff;
}
.site-navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

/* Mobile Collapse */
@media (max-width: 991.98px) {
  .site-navbar .navbar-collapse {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
  }
  .site-navbar .navbar-nav .dropdown-menu {
    background: #ffffff;
  }
  .site-navbar .navbar-nav .nav-link {
    padding: 0.5rem 0.75rem;
  }
  .site-navbar .navbar-nav .dropdown-menu {
    box-shadow: none;
    border: none;
    border-radius: 6px;
    margin: 2px 0 4px 12px;
    padding: 4px 0;
  }
  .site-navbar-mobile-user {
    padding-bottom: 8px;
  }
}

#cart-dropdown-menu {
  background: #fff !important;
  border: 1px solid #dee2e6;
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
  z-index: 2100;
}