html {
  scroll-behavior: smooth;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
    z-index:50;
}

/* Track */
::-webkit-scrollbar-track {
    background: rgb(72,106,34);
    z-index: 50;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgb(149,193,30);
    z-index: 50;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgb(119, 154, 23);
    z-index: 50;
}

@font-face {
    font-family: 'museo';
    src: url('Fonts/museo-500.otf') format('truetype');
}

@media (max-width: 767px) {
    .eu {
        margin-bottom: 25px;
    }
}

.nav-content-main li, .nav-content-side li {
    cursor: pointer;
}

.fullscreenNavbar {
    display: none;
    position: fixed;
    width: 100vw;
    visibility: hidden;
    height: 100vh;
    background-color: #fff;
    color: rgb(72, 106, 24);
    z-index: 130;
    top:0;
    opacity: 0;
}

.fullscreenShow{
    display: block;
    opacity: 1;
    visibility: visible;
    transition: 1s;
}

footer h6, footer h2{
    margin: 0;
}

.down div {
    top:25%;
}
.down {
    margin:0;
    margin-top:1.6%;
}

@media (max-width: 767px) {
    .foot-cent {
        text-align: center!important;
    }
}

.col-inner {
  display: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.nav-fullscreen {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100vh;
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    padding-left:5vw;
    padding-right:5vw;
    max-width: 490px;
}

.nav-text {
    align-items: center;
}

.nav-content-main ul {
    list-style-type: none;
    font-size: 3em;
    text-transform: uppercase;
    letter-spacing: .025em;
    line-height: 1.05;
    padding:0;
    font-family: 'atrament-web';
    font-weight: 400;
    font-style: normal;
}

.nav-content-side ul {
    list-style-type: none;
    font-size: 1.2em;
    letter-spacing: .025em;
    line-height: 1.05;
    padding:0;
    text-align:left;
    font-family: 'atrament-web';
    font-weight: 200;
    font-style: normal;
}

#nav-picture, #new {
    background-repeat: no-repeat;
    background-position: center center;
    /*background-attachment: fixed;*/
    background-size: cover;
}

a{
    color: rgb(72, 106, 24);
}
a:hover{
    color: rgb(45, 66, 16);
    text-decoration: none;
}

.container-cross {
  display: block;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
  height: 0.26rem;
  background-color: #fff;
  margin: 6px 0;
  transition: 1s;
}

.bar-color{
    background-color: rgb(72, 106, 24);
    transition: 1s;
    border-radius: 5em;
}

.bar1 {
  width: 35px;
  border-radius: 5em;
}

.bar2 {
  width: 30px;
  border-radius: 5em;
}

.bar3 {
  width: 25px;
  border-radius: 5em;
}

.over .bar2 {
    width: 35px;
}

.over .bar3 {
    width: 35px;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-0.4rem, 0.4rem); /* Feinjustierung der Werte */
    transform: rotate(-45deg) translate(-0.4rem, 0.4rem);
    width: 3rem;
  }
  
  .change .bar2 {
      opacity: 0;
      width: 0;
  }
  
  .change .bar3 {
    -webkit-transform: rotate(45deg) translate(-0.5rem, -0.5rem); /* Entsprechende Anpassung für Bar 3 */
    transform: rotate(45deg) translate(-0.5rem, -0.5rem);
    width: 3rem;
  }


.cross {
    z-index: 200;
    border: none;
    position: fixed;
    right:23px;
    top:18px;
    transition: 1s;
}

.nav-cross {
    right:15px;
    top:10px;
    transition: 1s;
}

.logo{
    position:fixed;
    left:10px;
    top:10px;
    height: 70px;
    margin: 5px;
    width: auto;
    transition: 1s;
    visibility: hidden;
    opacity: 0;
    z-index: 100;
}
.logo_white{
    position: fixed;
    height: 70px;
    margin: 5px;
    width: auto;
    transition: 1s;
    visibility: visible;
    opacity: 1;
    z-index: 120;
    left:10px;
    top:10px;
}

.navbar-new{
    /*background-image: linear-gradient(to top,rgba(0,0,0,0), rgba(0,0,0,0.6));*/
    background-color: transparent;
    position: fixed;
    top:0;
    z-index: 90;
    width:100vw;
    transition: 1s;
    height: 60px;
}

.logo-shrink{
    transition: 1s;
    visibility: visible;
    opacity: 1;
    z-index: 100;
    height: 50px;
    left:0;
    top:0;
}

.nav-white{
    background-color: #fff;
    transition: 1s;
}


.arrow{
    color: #fff;
    font-size: 2em;
    position: absolute;
    bottom: 15%;
    z-index: 80;
    left:50%;
    margin-left:-14px;
}

.header-neu h2 {
    font-family: aptly;
    font-weight: 400;
    color: #fff;
    cursor: pointer;
    /*transition: .5s;*/
    font-size:3em;
    /*text-shadow: 0 0 1em rgba(0, 0, 0, 0.9);*/
    margin:0;
}

$spacing: 36px;

.panel {
    max-width: 840px;
    margin: 200px auto;
}
.panel__content {
    padding: 1rem $spacing;
    margin: -$spacing auto;
    max-width: 95%;
}

@media (min-width: 768px) {
    .panel {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .panel__media {
        flex: 0 0 65%;
    }
    .panel__content {
        position: relative;
        left: -$spacing;
        margin: 0 -$spacing 0 0;
        max-width: initial;
    }
}

.img-reposition{
    width: auto;
    max-height: 87vh;
    margin-bottom: -25%;
    position: relative;
    bottom: 0;
}

#text-new {
    font-family: aptly;
    font-weight:500;
    font-size:1.6rem;
    margin:30px 10px 0px 10px;
}

@media (max-width: 767px){
    #text-new {
        font-size: 1.3rem;
    }
}
@media (min-width: 1215px){
    #text-new {
        font-size: 1.6rem;
    }
}



/*
@media (max-width: 991px) {
    .img-reposition{
        height:60%;
        width:auto;
        float:right;
    }
}


@media (min-width: 1030px) {
    .img-reposition{
        width: 45%;
    }
}

@media (min-width: 1150px) {
    .img-reposition{
        width: 40%;
    }
}
@media (min-width: 1270px) {
    .img-reposition{
        width: 30%;
    }
}
@media (min-width: 1800px) {
    .img-reposition{
        width: 20%;
    }
}
*/

.new-div{
    background-color: rgba(255,255,255,1);
    padding:15px;
}

.container {
  max-width: 960px;
}

.header-plus {
    /*transition: .5s;*/
    background-color: rgba(255,255,255,0.8);
    border: 3px;
}

.opacity-act {
    opacity: 0;
    position:absolute;
    transition:.5s;
    height:auto;
    width:100%;
}

.opacity-new {
    opacity: 1;
}

.header-plus h2 {
    /*font-weight: 500 !important;*/
    /*transition: .5s;*/
}

.header-form{
    font-family: aptly;
    color: #fff;
    font-size: 2.5em;
    margin: 10px;
}

h2 {
    font-family: aptly;
    color: rgb(72,106,24);
}

h1 {
    font-family: aptly;
    color: rgb(72,106,24);
    font-size:3rem;
}

.form-control, .form-control:focus, .form-control:active, .form-control:visited, .form-control:hover {
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: 20px 25px;
    margin: 0px 0px;
    background-color: #fff;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    border: 10px solid rgb(72,106,24);
    border-radius: 0;
    font-size: 1em;
    font-weight: 100;
    outline: none;
    outline-style: none;
    outline-offset: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

*:focus {
    outline: none;
}

.btn-form, .btn-form:focus, .btn-form:active, .btn-form:visited, .btn-form:hover {
    width: 100%;
    padding: 20px 25px;
    margin: 0px 0px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    border: 10px solid rgb(72,106,24);
    border-radius: 0;
    color: rgb(72, 106, 24);
    background-color: #fff;
    outline: none;
    font-size: 1em;
    font-weight: 300;
    outline: none;
    outline-style: none;
    outline-offset: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.form-background{
    background-image:url('Bilder/form.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    /*background-attachment: fixed;*/
    background-size: cover;
    padding:0;
    height:auto;
    padding-bottom:4vh;
    min-height: 25vh;
}
.form-div{
    margin: 0px 0px;
    padding:0;
}

.row2{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding:0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}

.col-sm-0{
    padding:0;
}

/*::placeholder {
    color: #fff;
}*/

/*
 * Custom translucent site header
 */

.site-header {
  background-color: rgba(0, 0, 0, .85);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.site-header a {
  color: #999;
  transition: ease-in-out color .15s;
}
.site-header a:hover {
  color: #fff;
  text-decoration: none;
}

/*
 * Dummy devices (replace them with your own or something else entirely!)
 */

.product-device {
  position: absolute;
  right: 10%;
  bottom: -30%;
  width: 300px;
  height: 540px;
  background-color: #333;
  border-radius: 21px;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}

.product-device::before {
  position: absolute;
  top: 10%;
  right: 10px;
  bottom: 10%;
  left: 10px;
  content: "";
  background-color: rgba(255, 255, 255, .1);
  border-radius: 5px;
}

.product-device-2 {
  top: -25%;
  right: auto;
  bottom: 0;
  left: 5%;
  background-color: #e5e5e5;
}


/*
 * Extra utilities
 */

.border-top { border-top: 1px solid #e5e5e5; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }

.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }

.flex-equal > * {
  -ms-flex: 1;
  -webkit-box-flex: 1;
  flex: 1;
}
@media (min-width: 768px) {
  .flex-md-equal > * {
    -ms-flex: 1;
    -webkit-box-flex: 1;
    flex: 1;
  }
}

.overflow-hidden { overflow: hidden; }

.jumbotron {
    background-repeat: no-repeat;
    background-position: center center;
    /*background-attachment: fixed;*/
    background-size: cover;
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
    padding-left:0;
    padding-right:0;
    border-radius:0;
  	object-fit: cover;
}
@media (max-width: 575px) {
  .jumbotron {
      background-attachment: scroll !important;
  }
}

.text-phil h1 {
    font-family: aptly;
    color: rgb(72,106,24);
    margin-bottom: 10px;
}

.text-phil p {
    font-family: aptly;
    font-size: 1.36rem;
    font-weight: 200;
    letter-spacing: 0.044rem;
    line-height: 1.5;
}

.gs-green {
    font-weight: 300;
    color: rgb(72,106,24);
}

.philo {
    min-height:40vh;
}

h4, h6 {
    font-family: aptly;
    font-weight: 200;
}

h6 {
    letter-spacing: 0.044em;
    font-size: 1.16em;
}

.sirupflasche {
    height: 37rem;
    width: auto;
}
.sirupflasche2 {
    height: 25rem;
    width: auto;
}

.text-produkte {
    font-size: 1.36rem;
    font-family: aptly;
    font-weight: 200;
}

.bottom-produkte-text{
    margin-bottom:3.5vh;
}

.sternderl-background{
    
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    padding:0;
    height:auto;
    padding-bottom:4vh;
    min-height: 0px;
}


.btn-sternderl{
    font-family: aptly;
    font-size: 1.6rem;
    font-weight: 100;
    letter-spacing: 0.1rem;
    border: 2px solid #fff;
    background-color: transparent;
    color: #fff;
    border-radius: 7px;
}

.btn-sternderl:hover,.btn-sternderl:active,.btn-sternderl:visited,.btn-sternderl:focus {
    border: 2px solid #fff;
    background-color: #fff;
    color: rgb(72,106,34);
    outline: none;
    outline-style: none;
    outline-offset: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.sternderl-text{
    margin:0;
    padding:0vh 3vw;
    letter-spacing: 0.06rem;
    font-weight: 200;
    font-size: 1.4rem;
}

.shop-background{
    
    background-position: center center;
}

@media (min-width: 768px){
    #platz {
        padding: 2vh 10vw !important;
    }
}


.shop-filter {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.shop-filter:hover {
    filter: grayscale(100%);
}


.pointer {
    cursor: pointer;
    border: none;
    border-radius: 0;
}


.flasche-shop {
    height: 19rem;
    width: auto;
}

.shop-card {
    height: auto;
    width: auto;
    border:none;
    border-radius: 0;
}

.button-shop, .button-shop:focus {
    position:absolute;
    border: none;
    border-radius:0;
    padding:3px;
    font-size:1.5em;
    right:0;
    bottom: 44px;
    background:none;
    outline: none;
    outline-style: none;
    outline-offset: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: rgb(72,106,34);
}

.button-shop:hover {
    color: rgb(45, 66, 16);
    cursor: pointer;
}


.shop-menge {
    font-size: 0.5rem;
    position: absolute;
    margin: 6px 2px;
    top: 4.36px;
    right: 6.3px;
    background-color: transparent;
    color: #fff;
    font-family: 'Font Awesome 6 Free';
    letter-spacing: 0.06rem;
}

.shop-span {
    position: absolute;
    right: 7px;
    bottom: 8px;
}


.red-shop, .red-shop:hover, .red-shop:focus, .red-shop:active{
    color: rgb(106, 34, 34);
    outline: none;
    outline-style: none;
    outline-offset: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    cursor: not-allowed;
}

.shopping-bag {
    position: fixed;
    right: 70px;
    top: 8px;
    font-size: 27px;
    color: rgb(72,106,34);
    z-index: 99;
    transition: 1s;
    cursor: pointer;
}

.bag-scroll {
    right: 78px;
    top: 16px;
    font-size: 27px;
    color: #fff;
    z-index: 99;
    transition: 1s;
}


.profile-badge {
    position: fixed;
    right: 110px;
    top: 8px;
    font-size: 27px;
    color: rgb(72,106,34);
    z-index: 99;
    transition: 1s;
    cursor: pointer;
}

.profile-scroll {
    right: 118px;
    top: 16px;
    font-size: 27px;
    color: #fff;
    z-index: 99;
    transition: 1s;
}


.value-button, .value-button:active, .value-button:visited {
    border: none;
    border-radius: 0;
    font-size: 2em;
    background: none;
    color: rgb(72,106,34);
    cursor: pointer;
}

.trash,.trash:active, .trash:visited {
    color: rgb(106, 34, 34);
}

.value-button:hover, .value-button:focus {
    outline: none;
    outline-style: none;
    outline-offset: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    font-size: 2em;
    background: none;
    color: rgb(45, 66, 16);
}

.trash:hover, .trash:focus {
    color: rgb(66, 16, 16);
}

.shop-weiter, .shop-weiter:hover, .shop-weiter:focus, .shop-weiter:active {
    height: auto;
    width: auto;
    min-width: 9rem;
    outline: none;
    outline-style: none;
    outline-offset: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 0px solid rgb(72,106,34);
    border-radius: 165px;
    font-size: 1.3rem;
    font-weight: 300;
    cursor: pointer;
    background: none;
    color: #fff;
    padding: 5px 1.5rem;
    background-color: rgb(72,106,34);
    font-family: 'aptly';
}

.shop-weiter:hover, .shop-weiter:focus, .shop-weiter:active {
    color: #fff;
    background-color: rgb(91 136 39);
}

.prod-weiter, .prod-weiter:hover, .prod-weiter:focus, .prod-weiter:active {
    background-color: #fff;
    color: rgb(72,106,34);
}

.prod-weiter:hover, .prod-weiter:focus, .prod-weiter:active {
    background-color: #e1dede;
}

.shop-link, .shop-link:hover, .shop-link:focus, .shop-link:active {
    background-color: transparent;
    padding: 9px 14px;
    font-weight: 500;
    font-size: 1.7rem;
    margin-top: 20px;
}

.shop-link:hover, .shop-link:focus, .shop-link:active {
    background-color: #fff;
}

.classicform, #bestellen input, #bestellen select, #password input, #password select, #reset input, #reset select, #data input, #data select, #login input, #login select, #register input, #register select, #country input, #country select  {
    border: none;
    background-color: rgb(230, 230, 230);
    font-size: 0.75em;
    padding:4px;
    border-radius: 6px;
}

.shopping-bag span {
    font-size: 10px;
    position: absolute;
    margin: 6px 2px;
    top: 2px;
    right: 0px;
    background-color: transparent;
    color:#fff;
}

.bag-scroll span{
    color: rgb(72,106,34);
    transition: 1s;
}



#snackbar{
    visibility: visible;
    background-color: rgba(72,106,24, 0.9);
    color: #ffffff;
    text-align: center;
    padding: 2vh 2vw;
    position: fixed;
    bottom: 2vh;
    width: 75vw;
    max-height:40vh;
    float:left;
    left: calc(50% - 75vw / 2);
    border-radius: 0.7em;
    font-size: 1rem;
    z-index: 120;
}

#snackbar a, #snackbar a:hover{
    color: #fff;
}

.snackbutton {
    background-color: #fff;
    color: rgb(72,106,24) !important;
    font-size: 1rem !important;
    margin: 5px !important;
    line-height: 1.3rem !important;
    flex:1;
}

.snackbutton:hover, .snackbutton:focus{
    background-color: #e9e8e8;
}

.snackbutton1 {
    background-color: transparent !important;
    color: #fff !important;
    border: 1px solid #fff;
}

.snackbutton1:hover, .snackbutton1:focus{
    background-color: #dcdcdc !important;
    color: rgb(72,106,24) !important;
    border: 1px solid #dcdcdc;
}

.snackbuttondisplay {
    display: flex;
}

@media (max-width: 500px){
    .snackbutton {
        flex: 0;
    }
    .snackbuttondisplay {
        display: inline-block;
    }
}

/*#snackbar input:hover{
    color: rgb(72,106,34);
    background-color: #fff;
}*/


@media (max-width: 575px){
    .col-sm-0 {
        display: none;
        height:0px;
        width:0px;
        visibility: hidden;
        padding:0;
    }
}

@media (max-width: 767px){
    .col-md-0 {
        display: none;
        height:0px;
        width:0px;
        visibility: hidden;
        padding:0;
    }
}

::selection {
  color: #fff;
  background: rgb(72,106,34);
}