html {
  scroll-behavior: smooth;
}
:root {
    --bs-border-radius: 18px !important;
    --gs-green: rgb(72,106,34);
    --gs-accent: rgba(90,128,53,1);
    --gs-green2: rgb(149,193,30);
    --gs-display-size: clamp(3rem, 4.6vw, 5rem);
    --gs-section-title-size: clamp(2.4rem, 3.45vw, 3.75rem);
    --gs-display-spacing: -.028em;
}

/* Einheitliches Display-System für die öffentlichen Seiten */
h1.headline,
h2.headline,
h3.headline,
.journal-hero h1.headline {
    font-family: aptly, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: var(--gs-display-spacing) !important;
    text-wrap: balance;
}

body > header h1.headline,
.journal-hero h1.headline {
    font-size: var(--gs-display-size) !important;
    line-height: 1 !important;
}

h2.headline.h1,
.section h2.headline.h1 {
    font-size: var(--gs-section-title-size) !important;
    line-height: .98 !important;
}

@media (max-width: 767.98px) {
    :root {
        --gs-display-size: clamp(2.75rem, 12.5vw, 4.25rem);
        --gs-section-title-size: clamp(2.35rem, 10.5vw, 3.65rem);
    }
    body > header h1.headline,
    .journal-hero h1.headline {
        line-height: .98 !important;
    }
}
.shadow-strong{ text-shadow: 0 4px 18px rgba(0,0,0,.55); }
  /* ===== Scroll Reveal ===== */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ===== Parallax Layers ===== */
.parallax {
  position: relative; /* oder absolute/fixed je nach Layer */
  will-change: transform;
  transform: translateZ(0);
}



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

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

.white{
    color: #fff;
}

.social-button a:link {
    color: #fff;
    text-decoration: none;
}

.social-button a:hover, .social-button a:active, .social-button a:visited {
    color: rgb(255,252,245);
    text-decoration: none;
}

.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;
    }
}

.extra-bold {
    font-weight: 500;
}

.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: inline-block;
  cursor: pointer;
}

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

.change .bar1,
.change .bar2,
.change .bar3 {
    background-color: #fff !important;
}

.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: relative;
    right: auto;
    top: auto;
    margin-left: 1.1rem;
    padding: .2rem 0;
    transition: .35s ease;
    flex: 0 0 auto;
}

.nav-cross {
    right: auto;
    top: auto;
    transition: .35s ease;
}

.cross a {
    display: block;
    line-height: 0;
}

.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:100%;
    transition: 1s;
    height: 60px;
}

.site-scroll-progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    overflow: hidden;
    visibility: hidden;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}

.site-scroll-progress.is-visible {
    visibility: visible;
    opacity: 1;
}

.site-scroll-progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--gs-green2, rgb(149,193,30));
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}

.navbar-new .container-fluid {
    align-items: center;
}

.navbar-new .navbar-collapse {
    min-width: 0;
}

.navbar-new .desktop-nav {
    gap: clamp(.45rem, 1vw, 1rem) !important;
}

.navbar-new .desktop-nav .nav-link,
.navbar-new .shop-quick-actions .nav-link {
    position: relative;
    padding: .45rem .08rem !important;
    font-family: "azo-sans-web", sans-serif !important;
    font-size: clamp(.76rem, .82vw, .9rem) !important;
    font-weight: 650 !important;
    letter-spacing: .018em;
    line-height: 1.1;
    white-space: nowrap;
}

.navbar-new .desktop-nav .nav-link::after,
.navbar-new .shop-quick-actions .nav-link::after {
    content: "";
    position: absolute;
    right: 100%;
    bottom: .2rem;
    left: 0;
    height: 1px;
    background: currentColor;
    opacity: .62;
    transition: right .25s ease;
}

.navbar-new .desktop-nav .nav-link:hover::after,
.navbar-new .desktop-nav .nav-link:focus-visible::after,
.navbar-new .shop-quick-actions .nav-link:hover::after,
.navbar-new .shop-quick-actions .nav-link:focus-visible::after {
    right: 0;
}

.navbar-new .shop-quick-actions {
    gap: clamp(.45rem, 1vw, 1rem);
}

@media (min-width: 992px) {
    #navbar.navbar-new .shop-quick-actions {
        margin-left: clamp(.8rem, 1vw, 1rem) !important;
    }
}

.navbar-new .shop-quick-actions .nav-utility-link {
    gap: .3rem;
}

.navbar-new .shop-quick-actions .nav-utility-link > i {
    width: .9em;
    font-size: .88em;
    line-height: 1;
    text-align: center;
}

#navbar.navbar-new #nav-mini-cart .badge {
    display: inline-grid;
    min-width: 1.15rem;
    height: 1.15rem;
    margin-left: .08rem;
    padding: 0 .28rem;
    place-items: center;
    font-family: "azo-sans-web", sans-serif;
    font-size: .62rem;
    font-weight: 700;
    line-height: 1;
}

.navbar-new .nav-shop-link {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    padding: .42rem .9rem !important;
    font-family: "azo-sans-web", sans-serif;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .015em;
}

.nav-shop-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    stroke-width: 1.7;
}

.nav-icon-link {
    display: inline-flex !important;
    align-items: center;
    gap: .38rem;
}

.nav-menu-trigger {
    display: block;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    line-height: 0;
    cursor: pointer;
}

.btn-gs,
.btn-gs:active,
.btn-gs:visited {
    background: var(--gs-green, rgb(72,106,34));
    color: #fff !important;
    border: none;
    border-radius: 2rem;
}

.btn-gs:hover,
.btn-gs:focus {
    background: var(--gs-accent, rgba(90,128,53,1));
    color: #fff !important;
    border: none;
    box-shadow: none;
}

.navbar-new .btn-gs {
    white-space: nowrap;
    padding: .35rem .95rem;
}

@media (max-width: 1230px) and (min-width: 992px) {
    .navbar-new .desktop-nav {
        gap: .42rem !important;
    }

    .navbar-new .desktop-nav .nav-link,
    .navbar-new .shop-quick-actions .nav-link {
        font-size: .74rem !important;
    }

    .navbar-new .nav-shop-link {
        padding-inline: .72rem !important;
        font-size: .76rem;
    }
}

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

/* Einheitliche Navigation auf allen Seiten – auch bei lokalen Legacy-Regeln. */
#navbar.navbar-new .container-fluid {
    padding-right: .5rem;
}

#navbar.navbar-new:not(.nav-down) .logo,
#navbar.navbar-new:not(.nav-down) .logo_white {
    left: 10px !important;
    top: 10px !important;
}

#navbar.navbar-new.nav-down .logo,
#navbar.navbar-new.nav-down .logo_white {
    left: 0 !important;
    top: 0 !important;
}

#navbar.navbar-new .cross {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    margin-left: 1rem !important;
    margin-right: 0 !important;
    padding: .2rem 0 !important;
    transition: .35s ease !important;
}

.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 {
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: 20px 25px;
    margin: 0px 0px;
    background-color: #fff;
    -webkit-transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    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.trash,
.value-button.trash:active,
.value-button.trash:visited {
    font-size: 1.55em;
    line-height: 1;
    padding: .15rem .25rem;
}

.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);
}

.value-button.trash:hover,
.value-button.trash:focus {
    font-size: 1.55em;
}

.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;
    backdrop-filter: saturate(130%) blur(6px);
}

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

.snackbutton {
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    line-height: 1.3rem !important;
    flex:1;
    border: 1px solid #fff;
    min-height: 48px;
    padding: .75rem 1rem;
    border-radius: 999px;
}

.snackbutton-primary {
    background-color: #fff;
    color: rgb(72,106,24) !important;
    box-shadow: 0 8px 22px rgba(20,28,16,.2);
}

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

.snackbutton-secondary {
    background-color: transparent;
    color: #fff !important;
    box-shadow: none;
}

.snackbutton-secondary:hover, .snackbutton-secondary:focus{
    background-color: rgba(255,255,255,.12);
}

.snackbuttondisplay {
    display: flex;
    align-items: center;
    gap: .65rem;
}

@media (max-width: 500px){
    #snackbar {
        width: calc(100vw - 24px);
        left: 12px;
        bottom: 12px;
        max-height: calc(100vh - 24px);
        overflow-y: auto;
        padding: 1rem;
        text-align: left;
    }
    .snackbutton {
        flex: 1 1 100%;
        width: 100%;
    }
    .snackbuttondisplay {
        display: flex;
        flex-direction: column;
    }
}

/*#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);
}

/* Shared recipe teaser cards, used outside the recipe overview as well. */
.recipe-card{
    --card-accent: var(--gs-green, rgb(72,106,34));
    display:flex;
    flex-direction:column;
    height:100%;
    overflow:hidden;
    color:inherit;
    text-decoration:none;
    background:#fffdf8;
    border:1px solid rgba(72,106,34,.11);
    border-radius:26px;
    box-shadow:0 14px 38px rgba(20,28,16,.08);
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.recipe-card:hover,
.recipe-card:focus-visible{
    color:inherit;
    text-decoration:none;
    border-color:rgba(72,106,34,.28);
    box-shadow:0 22px 54px rgba(20,28,16,.14);
    transform:translateY(-6px);
}

.recipe-card-media{
    position:relative;
    overflow:hidden;
    background:#e9f3ed;
}

/* Transparenzhinweis fuer KI-generierte Rezept- und Storybook-Motive. */
.ai-photo-frame{
    position:relative;
}

.ai-photo-label{
    position:absolute;
    top:auto!important;
    right:.75rem!important;
    bottom:.75rem!important;
    left:auto!important;
    z-index:5;
    display:inline-flex;
    align-items:center;
    width:auto!important;
    height:auto!important;
    padding:.34rem .58rem;
    color:#26351c;
    font-size:.68rem;
    font-weight:850;
    line-height:1;
    letter-spacing:.035em;
    white-space:nowrap;
    background:rgba(255,255,255,.9);
    border:1px solid rgba(255,255,255,.78);
    border-radius:999px;
    box-shadow:0 7px 18px rgba(20,28,16,.14);
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
    pointer-events:none;
}

.ai-photo-label--top{
    top:.75rem!important;
    bottom:auto!important;
}

.ai-photo-label--article-hero{
    top:clamp(5.5rem, 8vw, 7rem)!important;
    bottom:auto!important;
}

.recipe-card-media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 20%;
    transform:scale(1.01);
    transition:transform .45s ease;
}

.recipe-card:hover .recipe-card-media img,
.recipe-card:focus-visible .recipe-card-media img{
    transform:scale(1.06);
}

.recipe-badge{
    position:absolute !important;
    top:.9rem !important;
    right:auto !important;
    bottom:auto !important;
    left:.9rem !important;
    z-index:2;
    display:inline-flex;
    align-items:center;
    width:auto !important;
    height:auto !important;
    padding:.38rem .68rem;
    color:var(--card-accent);
    font-size:.78rem;
    font-weight:850;
    line-height:1;
    background:rgba(255,255,255,.92);
    border-radius:999px;
    box-shadow:0 8px 20px rgba(20,28,16,.12);
}

.recipe-card-body{
    display:flex;
    flex:1;
    flex-direction:column;
    padding:1.05rem;
}

.recipe-meta-row{
    display:flex;
    flex-wrap:wrap;
    gap:.42rem;
    margin-bottom:.8rem;
}

.recipe-meta{
    display:inline-flex;
    align-items:center;
    gap:.36rem;
    padding:.34rem .58rem;
    color:#4d5d43;
    font-size:.8rem;
    font-weight:800;
    line-height:1.1;
    background:#f5f1e8;
    border-radius:999px;
}

.recipe-card h2{
    margin:0 0 .45rem;
    color:#1f2d16;
    font-size:1.15rem;
    line-height:1.17;
}

.recipe-card p{
    margin:0;
    color:#59674d;
    line-height:1.55;
}

.recipe-products{
    display:flex;
    flex-wrap:wrap;
    gap:.38rem;
    margin-top:.95rem;
}

.recipe-product-chip{
    display:inline-flex;
    align-items:center;
    padding:.34rem .58rem;
    color:var(--card-accent);
    font-size:.78rem;
    font-weight:850;
    line-height:1;
    background:rgba(72,106,34,.09);
    border-radius:999px;
}

.recipe-card-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    margin-top:auto;
    padding-top:1rem;
    color:#6b765f;
    font-size:.85rem;
    font-weight:750;
}

.recipe-card-footer span:last-child{
    color:var(--card-accent);
    font-weight:900;
}