@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;
  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;
}
body .sectionClass h2 {
  text-align: center;
  text-transform: uppercase;
}

#landing {
  padding: 10px;
  display: flex;
  flex-direction: column;
  margin-top: 60px;
  overflow: hidden;
}
#landing h1 {
  margin: 8%;
  font-weight: 200;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 3.6vw, 3.8rem);
}
#landing #einsatzLanding {
  display: inline-block;
  font-size: clamp(1.8rem, 4.4vw, 4.4rem);
  font-weight: 600;
  animation: highlight 1.2s ease-out forwards;
}
#landing #messerLanding {
  display: inline-block;
  font-size: clamp(2rem, 4.8vw, 4.8rem);
  font-weight: 700;
  animation: highlight 1.2s ease-out forwards;
  animation-delay: 1s;
}
@keyframes highlight {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
#landing #BildMesserLanding {
  width: 100%;
  transform: rotate(140deg);
  margin: 6em 0em;
  align-self: center;
  -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);
          mask-image: linear-gradient(to right, black 50%, transparent 100%);
  animation: Einblenden 1.6s;
}
@keyframes Einblenden {
  0% {
    transform: translate(16em) rotate(160deg);
    opacity: 0;
  }
  100% {
    transform: translate(0) rotate(140deg);
    opacity: 1;
  }
}
#landing p {
  padding: 6cqw 12cqw;
  width: 50cqw;
  min-width: 280px;
  max-width: 90vw;
  font-size: 1rem;
}

#unsereMesser {
  background-color: #252B41;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 80px;
}

.gridMesser {
  gap: 2rem;
  display: grid;
  width: 90cqw;
  max-width: 60em;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  container-type: inline-size;
  grid-template-areas: "produkt1 produkt2" "produkt3 produkt5" "produkt7 produkt8";
}
.gridMesser a:hover {
  z-index: 50;
  scale: 1.02;
}
.gridMesser .prodKachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  border-color: #252B41;
  aspect-ratio: 1/1;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  background-color: white;
  container-type: size;
  z-index: 50;
  min-height: 28cqw;
  border-radius: 0.2rem;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.48);
}
.gridMesser .prodKachel .prodKachel:hover {
  box-shadow: 0 12px 24px rgba(255, 255, 255, 0.8);
}
.gridMesser .prodKachel .bild {
  container-type: size;
  align-items: center;
  justify-content: center;
  height: 100cqh;
  width: 100cqw;
  border-radius: 0.2rem;
  overflow: hidden;
}
.gridMesser .prodKachel img {
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.gridMesser .prodKachel .produktName {
  container-type: size;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #060622;
  font-size: clamp(0.6rem, 8cqh, 1.8rem);
  text-align: center;
  width: 100cqw;
  height: 16cqh;
  border-radius: 0 0 0.2rem 0.2rem;
}
.gridMesser #prodGlattschnitt {
  grid-area: produkt1;
}
.gridMesser #prodGlattschnitt img {
  height: 100cqh;
  scale: 1;
  transform: rotate(340deg);
  -o-object-position: 0% 22%;
     object-position: 0% 22%;
}
.gridMesser #prodGezahnt {
  grid-area: produkt2;
}
.gridMesser #prodGezahnt img {
  height: 100cqh;
  -o-object-fit: contain;
     object-fit: contain;
  transform: rotate(160deg);
  scale: 2;
  -o-object-position: 0% 40%;
     object-position: 0% 40%;
}
.gridMesser #prodKreismesser {
  grid-area: produkt3;
  justify-content: start;
  align-items: start;
}
.gridMesser #prodKreismesser img {
  height: 100cqh;
  -o-object-fit: fill;
     object-fit: fill;
}
.gridMesser #prodGeschweißt {
  grid-area: produkt5;
}
.gridMesser #prodGeschweißt img {
  height: 100cqh;
  -o-object-fit: cover;
     object-fit: cover;
  overflow: hidden;
}
.gridMesser #prodBeschichtet {
  grid-area: produkt7;
}
.gridMesser #prodBeschichtet img {
  height: 100cqh;
  transform: translate(-10px, 10px) rotate(160deg);
  overflow: hidden;
  -o-object-fit: contain;
     object-fit: contain;
  scale: 1.2;
}
.gridMesser #prodScherenmesser {
  grid-area: produkt8;
}
.gridMesser #prodScherenmesser img {
  height: 100cqh;
  -o-object-fit: contain;
     object-fit: contain;
  overflow: hidden;
}

#leistungen {
  background-color: #060622;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.leistungContainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 10px;
  max-width: 60em;
}

.leistungBild img {
  width: 100%;
  height: 120%;
  -o-object-fit: cover;
     object-fit: cover;
  overflow: hidden;
  will-change: transform;
}

.leistungText {
  padding-top: 28px;
  padding-bottom: 28px;
  padding-right: 28px;
  height: -moz-max-content;
  height: max-content;
}

@media screen and (max-width: 650px) {
  .leistungContainer {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .leistungText {
    padding: 0;
  }
  .leistungBild {
    width: 100%;
  }
}
#ueberUns {
  display: flex;
  flex-direction: column;
  background-color: #252B41;
  align-items: center;
  max-width: 100vw;
}

.ueberUnsContainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 10px;
  max-width: 60em;
  align-self: center;
}

.ueberUnsVideoContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  container-name: "videocontainer";
  container-type: size;
}

.video1 {
  height: 48cqw;
  aspect-ratio: 16/9;
}

.video2 {
  height: 48cqw;
  aspect-ratio: 16/9;
}

@media screen and (max-width: 840px) {
  .ueberUnsContainer {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    max-width: 90cqw;
  }
  .ueberUnsTextContainer {
    display: block;
    width: 90cqw;
  }
  .ueberUnsVideoContainer {
    display: flex;
    width: 100cqw;
    height: 60cqw;
    justify-content: center;
  }
}