
.kontakt__inner {
  position: relative;
  width: 100vw;
  height: 100svh;
}


.kontakt__scene {
  position: absolute;
  left: 0;
  bottom: clamp(calc(100dvh - 844 * var(--m)), 0px, 0px);
  width: 100vw;
  height: calc(844 * var(--m));
}

.kontakt__heading {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(155 * var(--m));
  width: calc(345 * var(--m));
  padding: calc(10 * var(--m));
}

.kontakt__heading-line1,
.kontakt__heading-line2 {
  font-size: calc(64 * var(--m));
  line-height: 102%;
  display: block;
  text-align: center;
}
.kontakt__heading-line1{
    text-align: left;
    letter-spacing: 0.1em;
    margin-left: 0.055em;
}

.kontakt__email-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(310 * var(--m));
  width: calc(312 * var(--m));
  height: calc(30 * var(--m));
  padding-left: calc(7 * var(--m)); 
  font-size: calc(12 * var(--m));
  display: flex;
}

.kontakt__message {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(350 * var(--m));
  width: calc(312 * var(--m));
  height: calc(103 * var(--m));
  padding-left: calc(6 * var(--m));
  padding-top: calc(6 * var(--m));
  font-size: calc(12 * var(--m));
}

.kontakt__submit {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(465 * var(--m));
  width: calc(312 * var(--m));
  height: calc(40 * var(--m));
  font-size: calc(16 * var(--m));
  letter-spacing: 0.51em;
}

.kontakt__social {
  position: absolute;
  left: 0;
  top: calc(520 * var(--m));
  width: 100%;
  height: calc(104 * var(--m));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-align: center;
  gap: calc(17 * var(--m));
}

.kontakt__social-links {
  font-size: calc(30 * var(--m));
  letter-spacing: 0.08em;
}

.kontakt__social-email {
  font-size: calc(22 * var(--m));
  letter-spacing: 0.17em;
}

.kontakt__image {
  position: absolute;
  left: calc(-16 * var(--m));
  bottom: calc(-85 * var(--m));
  width: calc(406 * var(--m));
  height: auto;
  z-index: 0;
}

@media (max-width: 380px) and (max-height: 600px) {
  /* SE 3gen */
  .kontakt__heading{
    top: calc(270 * var(--m));
  }

  .kontakt__heading-line1,
  .kontakt__heading-line2 {
    font-size: calc(45 * var(--m));
    line-height: 102%;
    display: block;
    text-align: center;
  }
  .kontakt__heading-line1{
    text-align: center;
    letter-spacing: 0.27em; 
    margin-left: 0.31em;
  }
  .kontakt__heading-line2{
    letter-spacing: 0.15em; 
    margin-left: 0.17em;
  }

  .kontakt__email-label{
    top: calc(380 * var(--m));
    width: calc(280 * var(--m));
  }
  .kontakt__message{
    top: calc(415 * var(--m));
    width: calc(280 * var(--m));
  }
  .kontakt__submit{
    top: calc(530 * var(--m));
    width: calc(280 * var(--m));
  }

  .kontakt__social{
    top: calc(585 * var(--m));
    height: calc(80 * var(--m));
    gap: calc(11 * var(--m));
    
  }
  .kontakt__social-links {
    font-size: calc(27 * var(--m));
    letter-spacing: 0.08em;
  }

  .kontakt__social-email {
    font-size: calc(20 * var(--m));
    letter-spacing: 0.17em;
    margin-left: 0.15em;
  }

  .kontakt__image{
    width: calc(386 * var(--m));
    left: calc(0 * var(--m));
    bottom: calc(-100 * var(--m));
    transform: scaleX(-1);
  }
}

@media (min-width: 385px) and (max-height: 700px) {

    .kontakt__image {
        left: calc(-16 * var(--m));
        bottom: calc(-95 * var(--m));
        width: calc(406 * var(--m));
    }
    .kontakt__social{
        top: calc(540 * var(--m)); 
    }
    .kontakt__submit{
        top: calc(485 * var(--m));
    }
    .kontakt__message{
        top: calc(370 * var(--m));
    }
    .kontakt__email-label{
        top: calc(330 * var(--m));
    }
    .kontakt__heading{
        top: calc(185 * var(--m));
    }
}
