@import url('https://fonts.cdnfonts.com/css/bernard');
@font-face {
    font-family: 'coolvetica'; /* Gewünschter Name */
    src:    url('coolvetica.otf') 
              format('truetype');
            /* für Safari, Android, iOS */
   }
   body{font: 500 17px/1.2em 'coolvetica', sans-serif;
    color: black;}
  * {
  overflow-y: noscroll}
  .modal-open{overflow:hidden}
  .modal-open .modal{overflow-x:hidden;overflow-y:auto}
  .modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;display:none;overflow:hidden;outline:0}
  .modal-dialog{position:relative;width:auto;margin:.5rem;pointer-events:none}
  .modal.fade .modal-dialog{transition:-webkit-transform .3s ease-out;transition:transform .3s ease-out;transition:transform .3s ease-out,-webkit-transform .3s ease-out;-webkit-transform:translate(0,-25%);transform:translate(0,-25%)}
  @media screen and (prefers-reduced-motion:reduce){
      .modal.fade .modal-dialog{transition:none}}
      .modal.show .modal-dialog{-webkit-transform:translate(0,0);transform:translate(0,0)}
      .modal-dialog-centered{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:calc(100% - (.5rem * 2))}
      .modal-dialog-centered::before{display:block;height:calc(100vh - (.5rem * 2));content:""}
      .modal-content{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;pointer-events:auto;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem;outline:0}
  .modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000}
  .modal-backdrop.fade{opacity:0}
  .modal-backdrop.show{opacity:.5}
  .modal-header{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:justify;justify-content:space-between;padding:1rem;border-bottom:1px solid #e9ecef;border-top-left-radius:.3rem;border-top-right-radius:.3rem}
  .modal-header .close{padding:1rem;margin:-1rem -1rem -1rem auto}
  .modal-title{margin-bottom:0;line-height:1.5}
  .modal-body{position:relative;-ms-flex:1 1 auto;flex:1 1 auto;padding:1rem}
  .modal-footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;padding:1rem;border-top:1px solid #e9ecef}
  .modal-footer>:not(:first-child){margin-left:.25rem}
  .modal-footer>:not(:last-child){margin-right:.25rem}
  .modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}
  @media (min-width:576px){.modal-dialog{max-width:500px;margin:1.75rem auto}
  .modal-dialog-centered{min-height:calc(100% - (1.75rem * 2))}
  .modal-dialog-centered::before{height:calc(100vh - (1.75rem * 2))}
  .modal-sm{max-width:300px}}@media (min-width:992px){.modal-lg{max-width:800px}}
.dropdown-item button, input[type="submit"], input[type="reset"] {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}

.modal button {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
.expanded {
border-bottom: 2px solid #7e7b7b;
}
  .cart-icon {
    margin-left:-40px
    }
    
    .cart-icon i {
        color: white
    }
    
    .cart-count {
        background-color: #03b9e0;
        color: white;
        border-radius: 30%;
        padding: 5px 8px;
        font-size: 0.8em;
        position: absolute;
        margin-left:10px
    
    }
  @media (min-width: 1800px){
      body {
        background-image: url("../images/backgroundMobile.jpeg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }
      #backgroundMobile {display:none}
      h1 {text-align: center; font-size: 1.5em;}
      header>h1 {
        position: relative;
        margin-top:1%;
        }
      header>h1>img{
        display:inline-block;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        width: 159px;
        height: 83px;
        }
      li a {text-decoration : none; color : #2d2f31;}
      
      
      nav {
        width : 300px; 
        background: #d9d9d9;
        margin :  auto; 
      }
      
      span {
        padding : 30px;
        background : #2d2f31; 
        color : white;
        font-size : 1.2em;
        font-variant : small-caps;
        cursor : pointer;
        display: block;
      }
      
      span::after {
        float: right;
        right: 10%;
        content: "+";
      }
      
      .slide {
        clear:both;
        width:100%;
        height:0px;
        overflow: hidden;
        text-align: center;
        transition: height .4s ease;
      }
      
      .slide li {padding : 30px;}
      
      #touch {position: absolute; opacity: 0; height: 0px;}    
      
      #touch:checked + .slide {height: 300px;} 
      
      .dropdown-box {
        background-color: white;
        border-radius: 5px;
        padding: 10px;
        width: 400px;
        margin-left:-20%
      }
      
      .category {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        border-bottom: 2px solid #7e7b7b; /* Hinzugefügt: Trennlinie zwischen Dropdown-Titeln */
        padding: 10px;
      }
      .last{
        border-bottom: none
      }
      
      .category-title {
        font-weight: bold;
        margin-top:20px;
        margin-bottom:15px;
        margin: auto;
      }
      
      .category-expand {
        font-size: 18px;
        margin-top:20px;
        margin-bottom:15px;
      }
      
      .dropdown-content {
        display: none;
        margin-top: 0px;
        padding: 5px;
        margin-left:-5px;
      }
      
      .category.active .dropdown-content {
        display: block;
      }
      
      .dropdown-item {
        background-color: #cccccc;
        margin-bottom: 5px;
        margin-top:-5px;
        padding: 20px 10px;
        display: flex;
        align-items: center;
        width: 96.3%;
        justify-content: space-between;  border-bottom: 2px solid #7e7b7b;  /* Hinzugefügt: Linie unten */

    }

    .dropdown-item-text {
        background-color: transparent;
        margin: 0;
        padding: 0;
        flex: 1;
    }
      .add-to-cart {
        color: #7e7b7b;
        cursor:pointer;
      }
      .expanded {
        border-bottom: 2px solid #7e7b7b;
    }
    .last{
      border-bottom: none
    }
  }
    @media (min-width:1100px) and (max-width: 1500px){

      body {
        background-image: url("../images/backgroundMobile.jpeg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }
      #backgroundMobile {display:none}
      h1 {text-align: center; font-size: 1.5em;}
      header>h1 {
        position: relative;
        margin-top:1%;
        }
      header>h1>img{
        display:inline-block;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        width: 159px;
        height: 83px;
        }
      li a {text-decoration : none; color : #2d2f31;}
      
      
      nav {
        width : 300px; 
        background: #d9d9d9;
        margin :  auto; 
      }
      
      span {
        padding : 30px;
        background : #2d2f31; 
        color : white;
        font-size : 1.2em;
        font-variant : small-caps;
        cursor : pointer;
        display: block;
      }
      
      span::after {
        float: right;
        right: 10%;
        content: "+";
      }
      
      .slide {
        clear:both;
        width:100%;
        height:0px;
        overflow: hidden;
        text-align: center;
        transition: height .4s ease;
      }
      
      .slide li {padding : 30px;}
      
      #touch {position: absolute; opacity: 0; height: 0px;}    
      
      #touch:checked + .slide {height: 300px;} 
      
      .dropdown-box {
        background-color: white;
        border-radius: 5px;
        padding: 10px;
        width: 400px;
        margin-left:-20%
      }
   
      .category {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        border-bottom: 2px solid #7e7b7b; /* Hinzugefügt: Trennlinie zwischen Dropdown-Titeln */
        padding: 10px;
      }
      
      .category-title {
        font-weight: bold;
        margin-top:20px;
        margin-bottom:15px;
        margin: auto;
      }
      
      .category-expand {
        font-size: 18px;
        margin-top:20px;
        margin-bottom:15px;
      }
      
      .dropdown-content {
        display: none;
        margin-top: 0px;
        padding: 5px;
        margin-left:-5px;
      }
      
      .category.active .dropdown-content {
        display: block;
      }
      
      .dropdown-item {
        background-color: #cccccc;
        margin-bottom: 5px;
        margin-top:-5px;
        padding: 20px 10px;
        display: flex;
        align-items: center;
        width: 96.2%;
        justify-content: space-between;  border-bottom: 2px solid #7e7b7b;  /* Hinzugefügt: Linie unten */

    }

    .add-to-cart {
      color: #7e7b7b;
      cursor:pointer;
    }
    .expanded {
      border-bottom: 2px solid #7e7b7b;
  }
  .last{
    border-bottom: none
  }

      }
    @media screen and (max-width:1100px){
    

    body {
        margin: 0;
        font-family: "Open Sans", sans-serif;
        height: 100%;
        margin: 0;
        padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
        background-image: url("../images/backgroundMobile.jpeg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    h1 {
        text-align: center;
        font-size: 1.5em;
    }
    
    header > h1 {
        position: relative;
        margin-top: 10%;
        margin-left:-3%
    }
    
    header > h1 > img {
        display: inline-block;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        width: 159px;
        height: 83px;
    }
    
    nav {
      margin-top:-5%;
        text-align: center;
        padding: 10px;
    }
    
    span {
        background: #2d2f31;
        color: white;
        font-size: 1.2em;
        font-variant: small-caps;
        cursor: pointer;
        display: block;
        margin-top: 10px;
    }
    
    .slide {
        text-align: center;
        transition: max-height 0.4s ease;
        overflow: hidden;
    }
    
    .slide li {
        padding: 10px;
    }
    
    #touch {
        position: absolute;
        opacity: 0;
        height: 0px;
    }
    
    #touch:checked + .slide {
        max-height: 200px;
    }
    
    .dropdown-box {
        background-color: white;
        border-radius: 5px;
        padding: 10px;
        width: 90%;
        margin: auto;
        margin-top: 20px;
    }
    
    


          .category {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        border-bottom: 2px solid #7e7b7b; /* Hinzugefügt: Trennlinie zwischen Dropdown-Titeln */
        padding: 10px;
      }
      
      .category-title {
        font-weight: bold;
        margin-top:20px;
        margin-bottom:15px;
        margin: auto;
      }
      
      .category-expand {
        font-size: 18px;
        margin-top:20px;
        margin-bottom:15px;
      }
      
      .dropdown-content {
        display: none;
        margin-top: 0px;
        padding: 5px;
        margin-left:-5px;
      }
      
      .category.active .dropdown-content {
        display: block;
      }
      
      .dropdown-item {
        background-color: #cccccc;
        margin-bottom: 5px;
        margin-top:-5px;
        padding: 20px 10px;
        display: flex;
        align-items: center;
        width: 95.5%;
        justify-content: space-between;  border-bottom: 2px solid #7e7b7b;  /* Hinzugefügt: Linie unten */

    }

    .add-to-cart {
      color: #7e7b7b;
      cursor:pointer;
    }
    .expanded {
      border-bottom: 2px solid #7e7b7b;
  }
  .last{
    border-bottom: none
  }

    }