@font-face{
  font-family: "as-icons";
  src: url("../fonts/as-icons.woff2") format("woff2"),
  url("../fonts/as-icons.ttf") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


@font-face{
  font-family: "open-sans";
  src: url("../fonts/opensans-regular.woff2") format("woff2"),
  url("../fonts/opensans-regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
	font-family:"hello-my-love-pro";
	src:url("../fonts/hello-my-love-pro.woff2") format("woff2"), 
  url("../fonts/hello-my-love-pro.woff") format("woff"), 
  url("../fonts/hello-my-love-pro.otf") format("opentype");
	font-display:auto;
	font-style:normal;
	font-weight:400;
	font-stretch:normal;
}

.bg-dark {
    --bs-bg-opacity: 1;
    background-color: #a00000 !important;
  }

  .text-shadow-1 { text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25); }
  .text-shadow-2 { text-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25); }
  .text-shadow-3 { text-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); }
  

  .hautpmotiv-fluid{ 
    width: 100%;
    max-width: calc(45rem + 4.5vw);
    background-size: cover;
    background-position: center;
    height: calc(28rem + 4.5vw);
    overflow: hidden !important; 
  }
  

  .detailmotiv-fluid{ 
    max-width: 50rem;
    width: 100%;
    object-fit: cover;
    height: calc(20rem + 4.5vw); 
    overflow: hidden !important; 
  }
   

  .bilder-db{ 
    width: 100%;
    max-width: calc(55rem + 4.5vw);
    max-height: 50rem;
    object-fit: cover;
    height: calc(42rem + 4.5vw);
    overflow: hidden !important; 
  }
  
  .bilderbeschreibung-db{ 
    width: 100%;
    max-width: 60rem;
    max-height: 50rem;
    object-fit: cover;
    height: calc(35rem + 4.5vw);
    overflow: hidden !important; 
  }



    .tk-hello-my-love-pro { font-family: "hello-my-love-pro",sans-serif; }

   .h-nav {
      margin-top: 0;
      margin-bottom: 0;
      padding-top: 0;
      padding-bottom: 0;
      font-family: "as-icons",sans-serif; 
      font-weight: normal;
      font-size: 3em;
    }
    .h-contact {
      
      font-family: "as-icons",sans-serif; 
      font-weight: normal;
      vertical-align: -0.2em;
    }


    h1 {
      margin-top: 0;
      margin-bottom: 0.5rem;
      font-family: "open-sans",sans-serif; 
      font-weight: 400;
      font-size: xx-large;
    }
    .flex-equal > * {
      flex: 1;
    }
    @media (min-width: 768px) {
      .hautpmotiv-fluid{ 
        width: 100%;
        max-width: calc(45rem + 4.5vw);
        background-size: cover;
        background-position: center;
        height: calc(35rem + 4.5vw);
        overflow: hidden !important; 
      }
      
      .detailmotiv-fluid{ 
        max-width: 30rem;
        width: 100%;
        background-size: cover;
        background-position: center;
        height: auto;
        overflow: hidden !important; 
      }
      .flex-md-equal > * {
        flex: 1;
      }
    }
    
    .display-1 {
      font-size: calc(4rem + 4.5vw);
      font-weight: 300;
      line-height: 1.2;
    }
    .produkt1 {
      font-size: calc(2rem + 2.5vw);
      font-weight: 300;
      line-height: 1.2;
    }
    .produkt-db-1 {
      font-size: calc(4rem + 2.5vw);
      font-weight: 300;
      line-height: 1.2;
    }

    p {
      font-family: open-sans, sans-serif;
      font-weight: 400;
      font-style: normal;
    }
    .hfont1 {
  
      margin-bottom: 0.5rem;
      line-height: calc(3.4rem + 2.5vw);
      font-family: "hello-my-love-pro",sans-serif; 
      font-size: calc(3.4rem + 2.5vw);
     }
     .hfont3 {
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
      font-family: open-sans, sans-serif;
      font-weight: 300;

  
    }
    /* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item1 {
  height: 32rem;
}
.carousel-item1 > img {
  position: absolute;

  min-width: 100%;
  height: 100%;
}
.mein-bild{ 
  max-width: 2000px;
    width: 100%;
    object-fit: cover;
    height: 250px; 
 }
 
 .beschreibungsbild{ 
    width: 100%;
    object-position: 10% 90%;
    object-fit: cover;
    height: 300px;
    overflow: hidden !important; 
 }
 .beschreibungsbild-2{ 
  width: 100%;
  object-position: 10% 90% 10% 90%; 
  object-fit: cover;
  height: 300px;
  overflow: hidden !important; 
}


 .produkt-slide-xl{ 
  max-width: 2000px;
    width: 100%;
    object-fit: cover;
    height: 500px; 
 }
 .maincontainer {
  padding: 60px 15px 0;
}


.flex-bild { 
  display: flex !important;  justify-content: center; align-items: center;

}
.rubrik {width:280px; height:280px;}

.logofont-1 {
  font-size: calc(1.625rem + 1.5vw);
  font-weight: 300;
  line-height: 1.2;
  vertical-align: -10%;
}
@media (min-width: 768px) {
  .produkt-slide-xl{ 
    max-width: 2000px;
      width: 100%;
      object-fit: cover;
      height: 700px; 
   }  
   .mein-bild{ 
    max-width: 2000px;
      width: 100%;
      object-fit: cover;
      height: 500px; 
   }
  
  }
@media (min-width: 1250px) {
  .logofont-1 {
    font-size: 2rem;
    vertical-align: -10%;
  }
  .beschreibungsbild-2{ 
    width: 100%;
    object-position: 10% 90%;
    object-fit: cover;
    height: 500px;
    overflow: hidden !important; 
  }
  .produkt1 {
    font-size: calc(2rem + 4.5vw);
    font-weight: 300;
    line-height: 1.2;
  }
  .produkt-db-1 {
    font-size: calc(6rem + 2.5vw);
    font-weight: 300;
    line-height: 1.2;
  }

}
.info-vorg {
  color: #fff;
  background-color: #4846d1;
  border-color: #a10000;
}

.info-got {
  color: #fff;
  background-color: #a00000;
  border-color: #a00000;
}

.info-lepp {
  color: #fff;
  background-color: #dab203;
  border-color: #a10000;
}

.bg-danger {
  --bs-bg-opacity: 1;
  background-color: #a10000;
}

.text-danger1 {
  --bs-text-opacity: 1;
  color: #6c116d;
}

.btn-danger {
  color: #fff;
  background-color: #6c116d;
  border-color: #6c116d;
}
.btn-danger:hover {
  color: #fff;
  background-color: #a10000;
  border-color: #a10000;
}
.btn-check:focus + .btn-danger, .btn-danger:focus {
  color: #fff;
  background-color: #a10000;
  border-color: #a10000;
  box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5);
}
.btn-check:checked + .btn-danger, .btn-check:active + .btn-danger, .btn-danger:active, .btn-danger.active, .show > .btn-danger.dropdown-toggle {
  color: #fff;
  background-color: #a10000;
  border-color: #a10000;
}
.btn-check:checked + .btn-danger:focus, .btn-check:active + .btn-danger:focus, .btn-danger:active:focus, .btn-danger.active:focus, .show > .btn-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5);
}
.btn-danger:disabled, .btn-danger.disabled {
  color: #fff;
  background-color: #a10000;
  border-color: #a10000;
}

.btn-link {
  font-weight: 400;
  color: #a10000;
  text-decoration: underline;
}
.btn-link:hover {
  color: #a10000;
}

.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #a10000;
}

.link-danger {
  color: #a10000;
  text-decoration: none;
}
.link-danger:hover, .link-danger:focus {
  color: #ff0202;
}

.link-light {
  color: #fff;
  text-decoration: none;
}
.link-light:hover, .link-danger:focus {
  color: #fff;
}

.contact {
	text-decoration: none;
    	color: #FFFFFF;
}
.contact:hover {
  color: #FFFFFF;
    font-weight: 700;
  text-decoration: none;
}


a.anchorPos {
  display: block;
  position: relative;
  top: -250px;  
  visibility: hidden;
}

.img-info {
  padding: 0.25rem;
  max-height: 80px;
  width: 80px;
}

.mx-u-d-flex {
  display: flex !important;
  margin-right: auto !important;
    margin-left: auto !important;
 }

 .featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  /* rtl:remove */
  letter-spacing: -.05rem;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 3rem;
  }}

  .bg-danger1 {
    --bs-bg-opacity: 1;
    background-color: #6c116d;
  }

  .list-group-item-action1:hover, .list-group-item-action1:focus {
    z-index: 1;
    color: #495057;
    text-decoration: none;
    background-color: #afb1b460;
    transition:2s;
  }
  .list-group-item {

    border: 0px solid rgba(0, 0, 0, 0.125);
  }