/*
  CSS RESET
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-weight: normal;
  font-size: 100%;
}

ul,
ol {
  list-style: none;
}

img,
video {
  width: 100%;
}

a {
  color: black;
  text-decoration: none;
}




/*
  STYLES
*/

.lateef-extralight {
  font-family: "Lateef", serif;
  font-weight: 200;
  font-style: normal;
}

.lateef-light {
  font-family: "Lateef", serif;
  font-weight: 300;
  font-style: normal;
}

.lateef-regular {
  font-family: "Lateef", serif;
  font-weight: 400;
  font-style: normal;
}

.lateef-medium {
  font-family: "Lateef", serif;
  font-weight: 500;
  font-style: normal;
}

.lateef-semibold {
  font-family: "Lateef", serif;
  font-weight: 600;
  font-style: normal;
}

.lateef-bold {
  font-family: "Lateef", serif;
  font-weight: 700;
  font-style: normal;
}

.lateef-extrabold {
  font-family: "Lateef", serif;
  font-weight: 800;
  font-style: normal;
}

h1 { 
  font-family: "lateef";
  font-size: 54px;
  font-weight: bold;
  color: white;
  text-align: center;
  line-height: 90%;
} 

h2 { 
  font-family: "lateef";
  font-weight: lighter;
  font-size: 60px;
  color: rgb(0, 0, 0);
  text-align: center;
} 

h3 { 
  font-family: "lateef";
  font-weight: lighter;
  font-size: 24px;
  font-style: italic;
  color: white;
  text-align: center;
} 

body {
  background-color: black;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}


.untersuchen {
  width: 25vh;
  position: absolute;
  top: 200px;
  right: 350px;
  z-index: 10;
}

h2 a {
  color: black; 
  text-decoration: none; 
  transition: color 0.3s ease; 
}

h2 a:hover {
  color: red;
}


@media (max-width: 767px) {
  .untersuchen {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    top: 150px; /* oder was du willst */
  }
}

@media (max-width: 767px) {
  body > div {
    padding: 0 20px; /* z. B. 20px links & rechts */
  }
}