@charset "UTF-8";
/* inter-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 100;
  src: url("../fonts/inter-v20-latin-100.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 200;
  src: url("../fonts/inter-v20-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/inter-v20-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/inter-v20-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/inter-v20-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/inter-v20-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/inter-v20-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  src: url("../fonts/inter-v20-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/inter-v20-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
html {
  background-color: lightgray;
  margin: 0;
  padding: 0;
  border-bottom: 0;
}

body {
  margin: 0 auto;
  padding: 0;
  display: block;
  max-width: 1400px;
  background: #060622;
  font-family: "Inter", Arial, Helvetica, sans-serif, sans-serif;
  font-weight: 300;
  font-size: 1rem;
  align-items: center;
  color: #FFFFFF;
  container-type: inline-size;
}
body a {
  color: #FFFFFF;
  text-decoration: none;
  margin: 0;
  padding: 0;
}
body li {
  color: #FFFFFF;
  list-style: none;
}
body .sectionClass {
  scroll-margin-top: 60px;
  padding: 40px 20px;
  max-width: 1400px;
  justify-content: flex-start;
  container-type: inline-size;
}
body .sectionClass h2 {
  text-align: center;
  font-size: clamp(1.4rem, 2.2cqw, 2.8rem);
}

#landing {
  padding: 0px;
  display: flex;
  flex-direction: column;
  margin-top: 60px;
}
#landing h1 {
  margin: 8%;
  font-weight: 10;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 4cqw, 4rem);
}
#landing #nameDetailLanding {
  font-size: clamp(1.6rem, 4cqw, 4rem);
  font-weight: 800;
}
#landing #BildGlattschnittLanding {
  transform: rotate(-22deg);
  margin-bottom: 22cqw;
  width: clamp(16rem, 80cqw, 100rem);
  align-self: center;
}
#landing #BildGezahntLanding {
  transform: rotate(160deg);
  width: clamp(16rem, 80cqw, 100rem);
  align-self: center;
  -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);
          mask-image: linear-gradient(to right, black 50%, transparent 100%);
  padding: 4em 0;
}
#landing #BildGeschweißtLanding {
  width: clamp(16rem, 60cqw, 100rem);
  align-self: center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%, black 70%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, black 30%, black 70%, transparent 100%);
  padding-bottom: 4em;
}
#landing #BildKreismesserLanding {
  align-self: center;
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  width: 80cqw;
}
#landing #BildBeschichtetLanding {
  width: 100cqw;
  align-self: center;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);
  margin-bottom: 4em;
}
#landing #BildScherenmesserLanding {
  transform: translate(0px, -22px) rotate(-4deg);
  width: 60cqw;
  align-self: center;
}
#landing p {
  padding: 6cqw 12cqw;
  width: 50cqw;
  min-width: 280px;
  max-width: 90vw;
  font-size: 1rem;
}

#description {
  display: flex;
  background-color: #252B41;
  align-items: center;
  justify-content: center;
}
#description #descriptionContainer {
  max-width: 80cqw;
  align-items: center;
  justify-content: center;
}

#produktbilder {
  display: flex;
  align-items: center;
  justify-content: center;
}

#BilderContainer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 80cqw;
  height: 50cqw;
  overflow: hidden;
  container-type: size;
  border-radius: 1rem;
}
#BilderContainer #BilderOben {
  display: flex;
  overflow: hidden;
  justify-content: space-between;
  container-type: inline-size;
  height: 48cqh;
}
#BilderContainer #BilderUnten {
  display: flex;
  overflow: hidden;
  container-type: inline-size;
  container-name: BilderUnten;
  justify-content: space-between;
  height: 48cqh;
}
#BilderContainer .produktBeispiel {
  background-color: white;
  display: flex;
  overflow: hidden;
}
#BilderContainer #ProduktObenLinks {
  width: 44cqw;
  -o-object-fit: contain;
     object-fit: contain;
}
#BilderContainer #ProduktObenLinksBeschichtet {
  width: 44cqw;
  overflow: hidden;
  -o-object-fit: contain;
     object-fit: contain;
  transform: translate(-10px, 10px) rotate(160deg);
  scale: 1.2;
}
#BilderContainer #ProduktObenRechts {
  width: 54cqw;
  -o-object-fit: contain;
     object-fit: contain;
}
#BilderContainer #ProduktObenRechtsGezahnt {
  width: 54cqw;
  -o-object-fit: cover;
     object-fit: cover;
}
#BilderContainer #ProduktObenRechtsGeschweißt {
  width: 54cqw;
  -o-object-fit: cover;
     object-fit: cover;
}
#BilderContainer #ProduktObenRechtsKreis {
  width: 54cqw;
  -o-object-fit: cover;
     object-fit: cover;
}
#BilderContainer #ProduktUntenLinks {
  width: 54cqw;
  height: 48cqh;
  -o-object-fit: cover;
     object-fit: cover;
}
#BilderContainer #ProduktUntenLinksKreis {
  width: 54cqw;
  height: 48cqh;
  -o-object-fit: cover;
     object-fit: cover;
  transform: rotate(180deg);
}
#BilderContainer #ProduktUntenRechts {
  width: 44cqw;
  -o-object-fit: contain;
     object-fit: contain;
}
#BilderContainer #ProduktUntenRechtsGeschweisst {
  width: 44cqw;
  -o-object-fit: cover;
     object-fit: cover;
}

#produktleistung p {
  font-size: clamp(1rem, 2cqw, 4rem);
  font-weight: 600;
  max-width: 80cqw;
  text-align: center;
}

#Zahnungsarten {
  display: flex;
  flex-direction: column;
  width: 80cqw;
  max-width: 900px;
  margin-bottom: 1em;
}

.verzahnungsart {
  background-color: rgba(122, 122, 122, 0.3);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border-radius: 1rem;
  border-style: solid;
  border-width: 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 2em 1em 2em;
  margin: 0.5em 0;
}

.zahnbeschreibung {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.zahnbeschreibung img {
  margin: 0 0 0 1em;
}
@media screen and (max-width: 822px) {
  .zahnbeschreibung {
    flex-direction: column;
  }
  .zahnbeschreibung img {
    margin: 1em 0 0 0;
  }
}

.beschichtungsart {
  background-color: rgba(122, 122, 122, 0.3);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border-radius: 1rem;
  border-style: solid;
  border-width: 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 2em 1em 2em;
  margin: 0.5em 0;
}

.beschichtungsbeschreibung {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.beschichtungsbeschreibung img {
  margin: 0 0 0 1em;
}
@media screen and (max-width: 822px) {
  .beschichtungsbeschreibung {
    flex-direction: column;
  }
  .beschichtungsbeschreibung img {
    transform: rotate(270deg);
  }
}

#produktleistung {
  display: flex;
  flex-direction: column;
  background-color: #252B41;
  justify-content: center;
  align-items: center;
}
#produktleistung ul {
  max-width: 66vw;
}
#produktleistung ul li {
  list-style: circle;
}