@font-face{
  font-family:"Meta Offc W01 Normal";
  src:url("fonts/1377966/4ce43a49-0d61-4c34-8054-465d5981fd0b.woff2") format("woff2"),url("Fonts/1377966/d7b73a86-9fc7-41b4-a367-cbbd20039787.woff") format("woff");
}
@font-face{
  font-family:"Meta Headline Offc W01_1378916";
  src:url("fonts/1378916/eed3241b-fae8-43cf-bfd6-d841426c03a0.woff2") format("woff2"),url("Fonts/1378916/a8a05c22-59a5-4e0c-88cc-fdc6e69f6db8.woff") format("woff");
}
@font-face{
  font-family:"MetaCompPro-Bold W01 Regular";
  src:url("fonts/1401211/94400875-1ce0-47f5-b278-c6ccfa287f52.woff2") format("woff2"),url("Fonts/1401211/3acf28fb-87d9-4146-b959-a0e26918dc14.woff") format("woff");
}



:root
{
  /* --basic-font-size: 13px; */
  /* font-family: ff-meta-headline-web-pro; */
  font-family: "Meta Offc W01 Normal"; /* ff-meta-headline-web-pro; */
}

/* h1 { font-size: 32px; margin-top: 5px; margin-bottom: 10px; } */
h2 { font-size: 34px; font-family: "MetaCompPro-Bold W01 Regular"; margin-top: 10px; margin-bottom: 0px; color: #e30613; font-weight: 900; line-height: 120%;} 
h3 { font-size: 30px; font-family: "MetaCompPro-Bold W01 Regular"; margin-top: 5px; margin-bottom: 10px; color: #e30613; font-weight: 600; line-height: 120%;}
h4 { font-size: 14px; font-family: "Meta Offc W01 Normal"; margin-top: 5px; margin-bottom: 3px; padding-bottom: 0px; color: #e30613; font-weight: 900; line-height: 120%;}

.contentLine
{
  border: 1.5px solid #DEEAF1;
  margin-top: 10px;
  margin-bottom: 20px;
}

.clear { clear: both; }

.floatright { float: right; }
.floatleft { float: left; }

body
{
  min-width: 310px;
  text-align: left;
  letter-spacing: 0px;
  color: #000000;
  opacity: 1;

  padding: 0px;
  margin: 0px;
  user-select: none;
  overflow-x: hidden;
  background-color: #F8F8F8;
}

.contentbox
{
  max-width: 1040px;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  background-color: #DEEAF1;
  border: 2px solid #E0E0E0;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 70px;
  padding-right: 70px;
}

/*
.contentbox-impressum
{
  max-width: 812px;
  font-size: 14px; 
}

.contentbox-datenschutz
{
  max-width: 812px;
  font-size: 14px; 
}
*/

.logoLeft
{
  margin-top: 20px;
  float: left;
  width: 180px;
}

.logoRight
{
  float: right;
  width: 320px;
}

.titleBox
{
  margin-top: 30px;
  position: relative;
  width: calc(100% - 0px);
  height: 440px;
  background-image: url(../images/titleimage.jpg); 
  background-size: cover;  
  background-position: center center;
}

.titleText
{
  position: absolute;
  width: 400px;
  bottom: 185px;
  margin-left: 20px;
}

.titleTextImage
{
  position: absolute;
  width: 100%;
}


.titleLinks
{
  position: absolute;
  bottom: 25px;
  margin-left: 20px;
  font-size: 28px;
  color: white;
  line-height: 120%;
}

.titleSubtext
{
  margin-top: 20px;
  margin-bottom: 25px;
  margin-left: 20px;
  font-size: 22px;
  line-height: 115%;
}

.contentFrame
{
  position: relative;
  width: calc(100% - 44px); 
  /* height: 200px; */
  margin-left: 2px;
  margin-bottom: 40px;
  
  background-color: white;
  border: 2px solid #e30613;

  padding-left: 30px;
  padding-right: 10px;
  padding-bottom: 20px;
  
}

.contentPlus
{
  position: absolute;
  float: left;
  left: -15px;
  top: -13px;
  width: 30px;
  height: 30px;

  background-image: url(../images/plus.svg); 
  background-size: 30px 30px;
  background-position: left top;
  background-repeat: no-repeat;
  
}

.contentTitleSubtext
{
  padding-top: 0px;
  margin-top: 0px;
  margin-bottom: 15px;
  margin-left: 0px;
  font-size: 24px;
  line-height: 120%;
}

.anchorlink
{
  text-decoration: underline;
  cursor: pointer;
}

/* --------------------------------------------------------------------------------------------------  */

.downloadFrame
{
  float: left;
  position: relative;
  width: 302px;
  height: 144px;
  /* background-color: blue; */
  margin-right: 10px;
  margin-left: 0px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.downloadImage
{
  position: absolute;
  left: 0px;
  top: 0px;
  /* width: 100px; */
  height: 130px;
  /* height: 200px; */
  /* background-color: yellow; */
}

.downloadImageItem
{
  width: 100px;
  border: 1px solid silver;
  cursor: pointer;
}

.downloadContent
{
  position: absolute;
  left: 110px;
  top: 0px;
  width: 190px;
  height: 144px;
  /* background-color: red; */
}

.downloadText
{
  font-size: 11.5px;
  margin-top: 0px;
  padding-top: 0px;
  line-height: 120%;
}

.downloadButtonLeft
{
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 50px;
  height: 45px;
  /* background-color: silver; */
  margin: 0px;
  /* cursor: pointer; */
}

.downloadButtonRight
{
  position: absolute;
  bottom: 0px;
  left: 60px;
  width: 50px;
  height: 45px;
  /* background-color: silver; */
  margin: 0px;
  cursor: pointer;
}

.downloadButtonImage
{
  width: 30px;
  height: 30px;
  margin-left: 10px;
}
.downloadButtonImageLeft
{
  background-image: url(../images/download.svg); 
  background-size: cover;  
  background-position: center center;
}
.downloadButtonImageRight
{
  background-image: url(../images/warenkorb.svg); 
  background-size: cover;  
  background-position: center center;
}

.downloadButtonText
{
  font-family: "MetaCompPro-Bold W01 Regular";
  font-size: 7px;
  text-align: center;
  margin: 0px;
  padding: 0px;
  color: #e30613;
  /* font-weight: 800; */
  font-size: 10px;
}

.downloadLink
{
  display: block;
  height: 5px;
  font-style: normal;
  text-decoration: none;
  /* border: 1px solid yellow; */
  margin: 0px;
  padding: 0px;
}

.orderLink
{
  font-style: normal;
  text-decoration: none;
}


/* --------------------------------------------------------------------------------------------------  */

.formsFloatFrame
{
  position: relative; 
  width: 100%; 
}
@media screen and (min-width: 900px)
{
  .formsFloatFrame
  {
    position: relative; 
    width: 49%; 
    float: left;
  } 
}

.formsFrame
{
  float: left;
  position: relative;
  /* width: calc(50% - 30px); */
  width: calc(100% - 20px);
  min-height: 40px;
  background-color: #DEEAF1;
  margin-right: 20px;
  margin-left: 0px;
  margin-top: 10px;
  margin-bottom: 5px;
  padding: 5px;
}
.formsFrameLight
{
  background-color: rgb(253,236,229);
  min-height: 110px;
}

.formsFrameTransparent
{
  background-color: rgba(0,0,0,0);
  width: 100%;
  margin-top: 0px;
  margin-bottom: 0px;
  float: none;
}

.formsImage
{
  /* position: absolute; */
  float: left;
  left: 5px;
  top: 5px;
  width: 40px;
  height: 40px;
  /* background-color: yellow; */
}


.formsContent
{
  /* position: absolute; */
  float: right;
  left: 50px;
  top: 5px;
  width: calc(100% - 50px);
  padding-bottom: 4px;
  /* background-color: silver; */
}

.formsText
{
  font-size: 11.5px;
  margin: 0px;
  line-height: 120%;
}

.formsLink
{
  font-style: normal;
  text-decoration: none;
  color: black;
}

.formsButtonImage
{
  width: 40px;
  height: 40px;
}

/* --------------------------------------------------------------------------------------------------  */

.footerLink
{
  float: right;
  font-size: 16px;
  color: gray;
  text-decoration: none;
  margin-left: 15px;
}


/* --------------------------------------------------------------------------------------------------  */


.imageZoom
{
  display: none;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
}

.imageZoomImage
{
  position: fixed;
  left: 10%;
  top: 10%;
  width: 80%;
  height: 80%;
  /* background-color: rgba(0,0,200, 1); */

  background-image: url(../images/warenkorb.svg);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------------------------------  */

@media screen and (max-width: 820px)
{
  h2 { font-size: 28px; margin-top: 15px; margin-bottom: 0px; }
  h3 { font-size: 24px; margin-top: 5px; margin-bottom: 10px; }
  h4 { font-size: 12px; margin-top: 5px; margin-bottom: 0px; }

  .titleSubtext
  {
    font-size: 24px;
  }

  .contentbox
  {
    padding-left: 20px;
    padding-right: 20px;
  } 

  .contentFrame
  {
    width: calc(100% - 44px); 
  }
}

@media screen and (max-width: 550px)
{
  h2 { font-size: 24px; margin-top: 10px; margin-bottom: 0px; }
  h3 { font-size: 20px; margin-top: 5px; margin-bottom: 10px; }
  h4 { font-size: 11px; margin-top: 5px; margin-bottom: 0px; }

  .titleSubtext
  {
    font-size: 22px;
  }
}

@media screen and (max-width: 450px)
{
  .contentbox
  {
    padding-left: 10px;
    padding-right: 10px;
  } 

  .contentFrame
  {
    width: calc(100% - 44px); 
  }
}

@media screen and (max-width: 400px)
{
  h2 { font-size: 18px; margin-top: 5px; margin-bottom: 0px; }
  h3 { font-size: 16px; margin-top: 5px; margin-bottom: 10px; }
  h4 { font-size: 10px; margin-top: 5px; margin-bottom: 0px; }

  .titleSubtext
  {
    font-size: 18px;
  }

  .contentFrame
  {
    padding-left: 10px;
    padding-right: 10px;
    width: calc(100% - 24px); 
  }
}

@media screen and (max-width: 380px)
{
  .downloadFrame
  {
    width: 250px;
  }
  .downloadContent
  {
    width: 150px;
  }
}

@media screen and (max-width: 340px)
{
  .downloadFrame
  {
    width: 230px;
  }
  .downloadContent
  {
    width: 130px;
  }
}

/*  -------------  HEADER-LOGO  -------------------  */


@media screen and (max-width: 680px)
{
  .logoLeft
  {
    margin-top: 15px;
    float: left;
    width: 140px;
  }

  .logoRight
  {
    float: right;
    width: 260px;
  }

  .titleBox
  {
    margin-top: 20px;
  }

}

@media screen and (max-width: 500px)
{
  .logoLeft
  {
    margin-top: 10px;
    float: left;
    width: 120px;
  }

  .logoRight
  {
    float: right;
    width: 180px;
  }

  .titleBox
  {
    margin-top: 10px;
  }

  .titleText
  {
    bottom: 150px;
    width: 280px;
  }

  .titleLinks
  {
    font-size: 22px;
    bottom: 30px;
  }

}


@media screen and (max-width: 360px)
{
  .logoLeft
  {
    margin-top: 0px;
    width: 100px;
  }

  .logoRight
  {
    width: 120px;
  }

  .titleBox
  {
    margin-top: 5px;
  }

  .titleLinks
  {
    font-size: 20px;
  }


  .titleText
  {
    bottom: 125px;
    width: 230px;
  }

  .titleLinks
  {
    font-size: 22px;
    bottom: 20px;
  }
}


.impressumText
{
  font-family: "Meta Offc W01 Normal";
  font-size: 15px;
  line-height: 120%;
}

.datenschutzTitle
{
  font-family: "Meta Offc W01 Normal";
  font-size: 17px;
  font-weight: 800;
}

.datenschutzSubtitle
{
  font-family: "Meta Offc W01 Normal";
  font-size: 14px;
  font-weight: 800;
  padding-bottom: 0px;
  margin-bottom: 10px;
}

.datenschutzSpace
{
  height: 10px;
}

.datenschutzText
{
  font-family: "Meta Offc W01 Normal";
  font-size: 14px;
  line-height: 120%;
  margin-bottom: 30px;
}

.datenschutzTextFloat
{
  margin-bottom: 10px;
}

.datenschutzTextL
{
  font-family: "Meta Offc W01 Normal";
  font-size: 14px;
  line-height: 100%;
  margin-bottom: 30px;
  padding-left: 20px;
}

.TableLineSpace
{
  height: 4px;
}

.datenschutzTextR
{
  font-family: "Meta Offc W01 Normal";
  font-size: 14px;
  line-height: 120%;
  margin-bottom: 30px;
}