* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Global Green Theme */
body {
  background-color: #5BBF21;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

.GreatVibes {
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  text-align: center;
  font-size: 74px;
}

.page-warp {
  min-height: 700px;
  background-color: #5BBF21;
}

@media (min-width: 1800px) {
  .page-warp {
    background-position: center center;
    background-size: cover;
    background-color: #5BBF21;
  }
}



.wpml-ls-flag {
  max-width: 20px;
  max-height: 50px;
}

.countnumber {
  font-size: 40px;
  color: #fff;
  font-weight: 500;
}

.counter {
  text-align: center;
  font-size: 28px;
  color: #fff;
}

.midtext {
  line-height: 0.7;
  padding-bottom: 20px;
  color: #fff;
}

/* Content Areas */
.content, .main-content, article, .post, .page {
  background-color: #5BBF21;
  color: #fff;
}

.content h1, .content h2, .content h3, .content h4, .content h5, .content h6,
.main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6,
article h1, article h2, article h3, article h4, article h5, article h6,
.post h1, .post h2, .post h3, .post h4, .post h5, .post h6,
.page h1, .page h2, .page h3, .page h4, .page h5, .page h6 {
  color: #fff;
}

.content p, .main-content p, article p, .post p, .page p {
  color: #fff;
}

.content a, .main-content a, article a, .post a, .page a {
  color: #fff;
  text-decoration: underline;
}

.content a:hover, .main-content a:hover, article a:hover, .post a:hover, .page a:hover {
  color: #e0e0e0;
}


#filter-dropdowns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;         /* Allow items to wrap to the next line */
  justify-content: center;
  align-items: center;
  gap: 3px;               /* Adds space between dropdowns */
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  #filter-dropdowns {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
}

#filter-dropdowns select {
  cursor: pointer;
  color: #fff;
  background-color: #5BBF21;
  border-color: #fff;
  display: inline-block;
  font-weight: 200;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid #fff;
  padding: .375rem .75rem;
  font-size: 0.75rem;
  line-height: 1.5;
  border-radius: .25rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  text-decoration: none;
  margin: 2px;
  padding-top: 10px;
  min-height: 20px;
}

a:link {
  color: #fff;
}

a:visited {
  color: #fff;
}

a:hover {
  color: #ff8534 !important;
}

a:active {
  background-color: #ff8534;
}  

h1 {
  padding-bottom: 10px;
  color: #FFF;
}

h2 {
  padding-bottom: 10px;
  color: #FFF;
}



.page-warp {

  min-height: 700px;
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  padding-bottom: 50px;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

.row:before,
.row:after {
  display: table;
  content: " ";
}

.clearfix:after,
.container:after,
.container-fluid:after,
.row:after {
  clear: both;
}

.row-no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.row-no-gutters [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}

.col-xs-12 {
  width: 100%;
}

.col-xs-11 {
  width: 91.66666667%;
}

.col-xs-10 {
  width: 83.33333333%;
}

.col-xs-9 {
  width: 75%;
}

.col-xs-8 {
  width: 66.66666667%;
}

.col-xs-7 {
  width: 58.33333333%;
}

.col-xs-6 {
  width: 50%;
}

.col-xs-5 {
  width: 41.66666667%;
}

.col-xs-4 {
  width: 33.33333333%;
}

.col-xs-3 {
  width: 25%;
}

.col-xs-2 {
  width: 16.66666667%;
}

.col-xs-1 {
  width: 8.33333333%;
}

@media (min-width: 768px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-11 {
    width: 91.66666667%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-8 {
    width: 66.66666667%;
  }
  .col-sm-7 {
    width: 58.33333333%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.66666667%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
  .col-sm-1 {
    width: 8.33333333%;
  }
}

@media (min-width: 992px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
  .col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-1 {
    width: 8.33333333%;
  }
}

@media (min-width: 1200px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
  }
  .col-lg-12 {
    width: 100%;
  }
  .col-lg-11 {
    width: 91.66666667%;
  }
  .col-lg-10 {
    width: 83.33333333%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .col-lg-8 {
    width: 66.66666667%;
  }
  .col-lg-7 {
    width: 58.33333333%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-5 {
    width: 41.66666667%;
  }
  .col-lg-4 {
    width: 33.33333333%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-2 {
    width: 16.66666667%;
  }
  .col-lg-1 {
    width: 8.33333333%;
  }

  .filterheading {
    padding-top: 15%;
  }

  #filter-dropdowns select {
    cursor: pointer;
    color: #fff;
    background-color: #1D1D1B;
    border-color: #f66200;
    display: inline-block;
    font-weight: 200;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
      border-top-color: transparent;
      border-right-color: transparent;
      border-bottom-color: transparent;
      border-left-color: transparent;
    padding: .375rem .75rem;
    font-size: 1.0rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    text-decoration: none;
    margin: 2px;
  }
}

.header {
  background-color: #5BBF21;
  font-family: helvetica, arial, sans-serif;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 100px !important;
  padding: 0 20px;
  gap: 30px;
}

.menu {
  z-index: 99999;
}

/* Hamburger-Menü standardmäßig verstecken */
.header nav.menu .hamburger {
  display: none !important;
}

.header .logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}

.header .logo a {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}

.header .logo a:hover {
  color: #fff !important;
  text-decoration: none;
}

.header .logo .brand-name {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}

.header .logo .brand-tagline {
  font-size: 16.7px;
  color: #fff;
  margin: 0;
  margin-top: 2px;
  opacity: 0.9;
}

.header .logo a img {
  width: 60px;
  height: 60px;
}

.header .menu ul {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.header .menu ul li {
  display: inline-block;
  list-style: none;
  margin: 0 15px;
  font-size: 28px;
}

.header .menu ul li:first-child {
  margin-left: 0;
}

.header .menu ul li a {
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 15px 25px;
  font-size: 28px;
  font-weight: bold;
  border-radius: 5px;
  transition: all 0.3s ease;
  text-transform: uppercase;
  transform: translateY(-15px);
}

.header .menu ul li a:hover {
  color: #fff !important;
  /*transform: translateY(-2px);*/
}

.header .menu ul li ul.submenu li {
  background-color: #4BBD1A;
  display: none;
  position: absolute;
  width: 150px;
 /* -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.05);*/
}


.header .menu ul li ul.submenu li {
  /*display: block;*/
  width: 100%;
}



.header .menu ul li ul.submenu li a {
  color: #fff;
  line-height: 25px;
  padding: 10px 27px;
}

.header .menu ul li ul.submenu li a:hover {
  color: #fff !important;
  /*background-color: rgba(255, 255, 255, 0.2);*/
}

.header .menu ul li:hover {
  color: #fff;
 /* background: rgba(255, 255, 255, 0.1);*/
}

.header .menu ul li:hover ul.submenu {
  display: block;
}

.header .menu ul li i.icon-arrow {
  display: none;
}

.sub-menu {
  background-color: #4BBD1A;
  display: none;
  position: absolute;
  width: 150px;
  -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.05);
}

li:hover .sub-menu {
  display: block !important;
}

/* Menü-Abstände verkleinern ab 1350px */
@media screen and (max-width: 1350px) {
  .header {
    gap: 20px;
  }
  
  .header .menu ul li {
    margin: 0 10px;
  }
}

@media screen and (max-width: 1250px) {
  /* make wpml flags smaller */
  .wpml-ls-flag {
    max-width: 50px;
    max-height: 50px;
  }

  /* Hamburger-Menü anzeigen */
  .header nav.menu .hamburger {
    display: inline-block !important;
  }

  .header {
    flex-direction: column;
    align-items: flex-start;
    min-height: 120px;
    padding: 15px 20px;
  }

  .header .logo .brand-name {
    font-size: 24px;
  }

  .header .logo .brand-tagline {
    font-size: 13.2px;
  }

  .header .menu ul {
    flex-direction: column;
    width: 100%;
  }

  .header .menu ul li {
    margin: 5px 0;
    width: 100%;
  }

  .header .menu ul li a {
    padding: 12px 20px;
    width: 100%;
    text-align: left;
    font-size: 24px;
    text-transform: uppercase;
    font-weight: bold;
  }

  .header nav.menu ul {
    position: fixed;
    bottom: 0;
    left: 0;
    top: 0;
    margin-left: -10000px;
    z-index: 1;
    background-color: #5BBF21;
  }
  .header nav.menu.active {
    position: fixed;
    left: 0;
    bottom: 0;
    top: 0;
    width: 100%;
  }
  .header nav.menu.active ul {
    margin-left: 0;
    -webkit-transition: margin-left 0.25s;
    transition: margin-left 0.25s;
    width: 75vw;
    /*overflow-y: scroll;*/
    overflow: hidden;
    background-color: #5BBF21;
  }
  .header nav.menu.active ul li {
    display: block;
  }
  .header nav.menu.active ul li:hover .submenu {
    display: none;
  }
  .header nav.menu.active ul li a {
    width: 100%;
  }
  .header nav.menu.active ul li a:hover {
    color: #fff !important;
  }
  .header nav.menu.active ul li .flexbox-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .header nav.menu.active ul li .flexbox-container i.icon-arrow {
    display: inline-block;
    height: 76px;
    width: 76px;
    padding: 30px 29px;
    text-align: center;
    cursor: pointer;
  }
  .header nav.menu.active ul li .flexbox-container i.icon-arrow:hover {
    background: #5BBF21;
  }
  .header nav.menu.active ul li .flexbox-container i.icon-arrow svg {
    height: 18px;
    width: 15px;
  }
  .header nav.menu.active ul li .sub-menu {
    overflow: hidden;
    padding-left: 10px;
    -webkit-box-shadow: none;
            box-shadow: none;
    
  }
  .header nav.menu.active .sub-menu {
    max-height: 1000px;
    width: 100%;
    position: relative;
    display: block;
    overflow: inherit;
    background-color: #5BBF21;
  }
  .header nav.menu.active ul li.showSubmenu .submenu .sub-menu {
    border-top: 1px solid rgb(34, 245, 45);
    border-bottom: none;
  }
  .header nav.menu.active ul li.showSubmenu .submenu .sub-menu a {
    padding: 15px 40px;
  }
  .header nav.menu.active ul li.showSubmenu .submenu .sub-menu a:hover {
    background: rgba(255, 255, 255, 0.2);
  }
  .header nav.menu.active ul li.showSubmenu i.icon-arrow {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  .header nav.menu .hamburger {
    display: inline-block;
    position: absolute;
    top: 22px;
    right: 10px;
    padding: 12px 25px;
    color: #fff;
    cursor: pointer;
    z-index: 2;
  }
  .header nav.menu .hamburger span,
  .header nav.menu .hamburger span:before,
  .header nav.menu .hamburger span:after {
    left: 0;
    border-radius: 2px;
    height: 6px;
    width: 40px;
    background: #fff;
    position: absolute;
    display: block;
    content: '';
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  }
  .header nav.menu .hamburger span:before {
    top: -14px;
  }
  .header nav.menu .hamburger span:after {
    bottom: -14px;
  }
  .header nav.menu .hamburger.active span {
    background-color: #5BBF21;
  }
  .header nav.menu .hamburger.active span:before, .header nav.menu .hamburger.active.active span:after {
    top: 0;
  }
  .header nav.menu .hamburger.active span:before {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .header nav.menu .hamburger.active span:after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .ul.sub-menu.active {
    max-height: 1000px;
    width: 100%;
    position: relative;
    display: block;
    z-index: 99999;
  }
  .header nav.menu.active ul li .sub-menu.active {
    max-height: 100%;
    overflow: hidden;
    -webkit-box-shadow: none;
            box-shadow: none;
    max-height: 1000px;
    width: 100%;
    position: relative;
    display: block;
    z-index: 99999;
  }


}

.no-scrolling {
  overflow: hidden;
  position: fixed;
}

body {
  background: rgba(0, 0, 0, 0.75);
  font-size: 22px;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  background: #5BBF21;
  color: #fff;
  height: 100%;
  font-family: 'Source Sans Pro', sans-serif;
  line-height: 1.5;
  width: 100%;
  margin: 0 auto;
}

a {
  color: #000;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

#mainContent {
  padding-top: 50px;
  padding-bottom: 50px;
}

main {
  height: 100%;
  width: 100%;
}

footer {
  padding-top: 50px;
  font-size: 1rem;
  position: relative;
  bottom: 10px;
  left: 0;
  text-align: left;
  color: #FFF;
  background-color: #5BBF21;
  padding-bottom: 20px
}

footer a {
  color: #fff;
  text-decoration: underline;
}

footer a:hover {
  color: #e0e0e0;
}

p {
  padding-bottom: 8px;
  color: #fff;
}

h1 {
  font-size: 2rem;
  color: #fff;
}

h2, h3, h4, h5, h6 {
  color: #fff;
}

#CookielawBanner {
  background-color: #FFF !important;
  position: fixed;
  font-size: 14px;
  width: 90%;
  -webkit-box-shadow: 0 0 2em rgba(5, 0, 31, 0.15);
          box-shadow: 0 0 2em rgba(5, 0, 31, 0.15);
  text-align: justify;
  line-height: 1.8em;
  border-radius: 6px;
  border-color: #ff8800 !important;
  border: 5px;
  border-style: solid;
  -webkit-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
  bottom: 40%;
  left: 0px;
  padding: 5px;
  margin: 5%;
}

img {
  width: 100%;
  height: auto;
}

.cat-header {
  font-weight: bold;
}
/*# sourceMappingURL=main.css.map */


.footerbot {
  float: right;
  padding-right: 5%;
}


#menu-footer {
  display: flex;
  float: right;
}
#menu-footer li.menu-item {
  padding-right: 30px;
  list-style: none;
}


.archive-item {
  padding: .625rem .625rem .625rem .625rem;
  height: 100%;
  border: 1px solid #ffffff;
  position: relative;
  background: green;
  border-radius: 3px;
  color: #FFF;
  margin-top: 20px;
}

.post-content {
  padding: .625rem .625rem .625rem .625rem;
  height: 100%;
  border: 0px solid #ffffff;
  position: relative;
  background: #5BBF21;
  border-radius: 3px;
  color: #FFF;
  margin-top: 20px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  /* Word breaking for very long words */
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}


.post-content p {
  margin-left: 10px;
}

.post-content h1 {
  margin-left: 10px;
}

.post-content h2 {
  margin-left: 10px;
}

.post-content h3 {
  margin-left: 10px;
}

.post-content ul {
  margin-left: 10px;
}

.post-content li {
  margin-left: 10px;
}

.post-content a {
  /*margin-left: 10px;*/
}


.archive-main a {

  color: #FFF;
}


.rl-gallery-link {
  max-height: 600px;
  width: auto;
}

/*
.rl-basicmasonry-gallery {
  position: relative;
  z-index: 2;
  display: block !important;
  margin: 0 auto;
  
}

.rl-gallery .rl-gallery-item {
  overflow: hidden;
  float: left;
}*/


.nivo-lightbox-wrap {
  position: absolute;
  top: 2%;
  bottom: 2%;
  left: 2%;
  right: 2%;
}

/* zindex pop up über menu*/
.nivo-lightbox-theme-default.nivo-lightbox-overlay {
  background: #666;
  background: rgba(0,0,0,0.6);
  z-index: 999999999 !important;
}


/* X zu schließen*/
.nivo-lightbox-theme-default .nivo-lightbox-close {
  width: 64px !important;
  height: 64px !important;
  text-indent: -9999px;
  padding: 5px;
  opacity: 1;
}

.nivo-lightbox-close {
  position: absolute;
  top: 5% !important;
  right: 2% !important;
}


#sideimg-right {
  position: fixed;
  right: 70px;
  top: 500px;
  transform: translateY(-50%);
  max-width: 180px; 
  display: block;
}

#filtered-products {
  min-height: 600px;
}
/* As screen gets wider, increase right and max-width */
@media screen and (min-width: 1481px) {
  #sideimg-right {
    right: 15px;
    max-width: 130px;
  }
}
/* As screen gets wider, increase right and max-width */
@media screen and (min-width: 1551px) {
  #sideimg-right {
    right: 30px;
    max-width: 150px;
  }
}
@media screen and (min-width: 1650px) {
  #sideimg-right {
    right: 60px;
    max-width: 180px;
  }
}
@media screen and (min-width: 1800px) {
  #sideimg-right {
    right: calc(50px + 3vw);
    max-width: 180px;
  }
}
@media screen and (min-width: 2000px) {
  #sideimg-right {
    right: calc(50px + 5vw);
    max-width: 200px;
  }
}

@media screen and (max-width: 1480px) {
  #sideimg-right {
      display: none;
  }
}


#sideimg-left {
  position: fixed;
  left: 70px;
  top: 500px;
  transform: translateY(-50%);
  max-width: 180px;
  display: block;
}

/* As screen gets wider, increase left and max-width */
@media screen and (min-width: 1481px) {
  #sideimg-left {
    left: 15px;
    max-width: 130px;
  }
}

@media screen and (min-width: 1551px) {
  #sideimg-left {
    left: 30px;
    max-width: 150px;
  }
}
@media screen and (min-width: 1650px) {
  #sideimg-left {
    left: 60px;
    max-width: 180px;
  }
}
@media screen and (min-width: 1800px) {
  #sideimg-left {
    left: calc(50px + 3vw);
    max-width: 180px;
  }
}
@media screen and (min-width: 2000px) {
  #sideimg-left {
    left: calc(50px + 5vw);
    max-width: 200px;
  }
}

/* Hide image on screens smaller than 1500px */
@media screen and (max-width: 1480px) {
  #sideimg-left {
    display: none;
  }
}


.card-img-custom {
    max-width: 100%;
    max-height: 230px; /* adjust as needed */
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin-left: auto;
    margin-right: auto;
}




.card-img-dynamic-search {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 24px auto; /* gleichmäßiger Abstand oben/unten */
}

.img-box-search {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Optional: min-height entfernen, damit sich der Kasten anpasst */
}

.title-center-search {
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px; /* sorgt für vertikale Zentrierung auch bei mehrzeiligen Titeln */
    word-break: break-word;
    margin: 0;
}


.img-box-auto {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0; /* z.B. nur 8px oben/unten */
}

.card-img-dynamic-auto {
    display: block;
    max-width: 100%;
    height: auto;
    width: auto !important; /* Überschreibt das globale img width:100% */
    margin: 0 auto;
}

.title-center-auto {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    word-break: break-word;
    margin: 0;
    padding: 24px;
}

.filter-item-search {
  padding: .625rem;
  border: 1px solid #f66200;
  position: relative;
  background: #1D1D1B;
  border-radius: 3px;
  color: #FFF;
  margin-top: 20px;
  /* min-height: 200px;  // Entfernt */
  /* max-height: 250px;  // Entfernt */
  height: auto; /* Standardwert, kann auch weggelassen werden */
}

.headlinemid {
  line-height: 0.5;
  padding-bottom: 24px;
}



@media (max-width: 700px) {
  .filter-item-search > div {
    flex-direction: column !important;
  }
  .img-box-auto,
  .title-center-auto {
    width: 100% !important;
    padding: 8px 0 !important;
  }
}

.mobile-br {
  display: none;
}
@media (max-width: 700px) {
  .mobile-br {
    display: block;
    height: 0;
    width: 100%;
  }
}

/* Order Template Styles */
.order-template-container {
  max-width: 1200px;
  margin: 1px auto;
  padding: 20px;
  background: #5BBF21;
  border-radius: 8px;
}

.order-content {
  background: #5BBF21;
  padding: 40px;
  border-radius: 8px;
  /*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);*/
  color: #fff;
}

.order-content h1 {
  color: #fff;
  margin-bottom: 20px;
  font-size: 2.5rem;
}

.order-content h2 {
  color: #fff;
  margin-top: 30px;
  margin-bottom: 20px;
  font-size: 1.8rem;
  border-bottom: 2px solid #fff;
  padding-bottom: 10px;
}

.order-content h3 {
  color: #fff;
  margin-top: 25px;
  margin-bottom: 15px;
  font-size: 1.4rem;
}

.order-success-message {
  /*background: #90ee90;*/
  border: 1px solid #7ed57e;
  color: #155724;
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 20px;
  font-size: 1.1rem;
}

.order-error-messages {
  background: #ffcccc;
  border: 1px solid #ff9999;
  color: #721c24;
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.order-error-messages ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.order-error-messages li {
  margin-bottom: 8px;
}

.order-error-messages li:before {
  content: "⚠ ";
  margin-right: 5px;
}

.order-form {
  margin-top: 30px;
}

.order-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.product-item:nth-child(4),
.product-item:nth-child(5) {
  grid-column: span 1;
}

.product-item:nth-child(4) {
  grid-column: 1 / 2;
  grid-row: 2;
}

.product-item:nth-child(5) {
  grid-column: 2 / 3;
  grid-row: 2;
}

.product-item {
  background: #4a7f28;
  padding: 20px;
  border-radius: 8px;
  border: 2px solid #5a9f38;
  transition: all 0.3s ease;
}

.product-item:hover {
  border-color: #fff;
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
}

.product-item label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-weight: 500;
  color: #fff;
}

.product-name {
  font-size: 1.1rem;
  color: #fff;
}

.product-price {
  font-size: 1.2rem;
  color: #fff;
  font-weight: 600;
}

.product-quantity {
  width: 100%;
  padding: 10px;
  border: 1px solid #5a9f38;
  border-radius: 4px;
  font-size: 1rem;
  text-align: center;
  background: #fff;
  color: #333;
}

.product-quantity:focus {
  outline: none;
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.order-summary {
  background: #4a7f28;
  padding: 25px;
  border-radius: 8px;
  border: 2px solid #fff;
  margin: 30px 0;
  color: #fff;
}

.order-summary h3 {
  margin-top: 0;
  color: #fff;
}

.order-summary-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
  table-layout: fixed;
}

.order-summary-table tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.order-summary-table td {
  padding: 10px 5px;
  color: #fff;
  vertical-align: middle;
}

.order-summary-table td:first-child {
  width: 50%;
  text-align: left;
}

.order-summary-table td:nth-child(2) {
  width: 30%;
  text-align: center;
}

.order-summary-table td.price {
  width: 20%;
  text-align: right;
  font-weight: 500;
}

.order-summary-table tr.subtotal td {
  padding-top: 15px;
  font-weight: 600;
}

.order-summary-table tr.shipping td {
  color: #e0e0e0;
}

.order-summary-table tr.total td {
  padding-top: 15px;
  font-size: 1.3rem;
  color: #fff;
  border-top: 2px solid #fff;
}

.shipping-note {
  margin-top: 15px;
  color: #90ee90;
  font-weight: 600;
  text-align: center;
}

.order-customer-data {
  margin: 30px 0;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #fff;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #5a9f38;
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  color: #333;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.order-payment-info {
  background: #4a7f28;
  padding: 25px;
  border-radius: 8px;
  margin: 30px 0;
  border: 2px solid #5a9f38;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.order-payment-info h3 {
  margin-top: 0;
  color: #fff;
  word-wrap: break-word;
}

.order-payment-info p {
  margin-bottom: 15px;
  line-height: 1.6;
  color: #fff;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.info-text {
  color: #e0e0e0;
  font-style: italic;
  margin-top: 20px;
}

.form-submit {
  text-align: center;
  margin-top: 40px;
}

.order-submit-btn {
  background: #fff;
  color: #2d5016;
  padding: 15px 50px;
  font-size: 1.2rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.order-submit-btn:hover {
  background: #e0e0e0;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

.order-submit-btn:active {
  transform: translateY(0);
}

/* Responsive Styles */
@media (max-width: 768px) {
  .order-content {
    padding: 20px;
    overflow-x: hidden;
  }
  
  .order-content h1 {
    font-size: 2rem;
  }
  
  .order-content h2 {
    font-size: 1.5rem;
  }
  
  .order-content h3 {
    font-size: 1.3rem;
    word-wrap: break-word;
  }
  
  .order-products {
    grid-template-columns: 1fr;
  }
  
  .product-item:nth-child(4),
  .product-item:nth-child(5) {
    grid-column: auto;
    grid-row: auto;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .order-submit-btn {
    width: 100%;
  }
  
  .order-payment-info {
    font-size: 16px;
    padding: 15px;
    margin: 18px 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  .order-payment-info p {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
}





/* YouTube Video Responsive Styles */
iframe.video {
  max-width: 100%;
  height: auto;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Container für Videos */
.video-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 20px 0;
}

/* Desktop: 2 Videos nebeneinander */
@media (min-width: 1025px) {
  iframe.video {
    width: 48%;
    max-width: 560px;
    height: 315px;
  }
}

/* Tablet: 2 Videos nebeneinander, etwas kleiner */
@media (min-width: 768px) and (max-width: 1024px) {
  iframe.video {
    width: 49%;
    max-width: 450px;
    height: 253px;
  }
  
  .video-container {
    gap: 5px;
  }
}

/* Mobile: Videos untereinander */
@media (max-width: 767px) {
  iframe.video {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    margin: 5px 0;
  }
  
  .video-container {
    flex-direction: column;
    gap: 10px;
  }
}


.gap0 {
  gap: 15px !important;
  padding-bottom: 15px;
}