body{
  /* overflow: hidden; */
}

/* Section */
#projects-overview {
  /* display: flex; */
  margin-top: 4vw;
  height: 100vh;

  display: grid;
  place-items: center;
}

/* wrapper */
#projects-wrapper {
  margin: 0 auto; /* Zentriert den Container */
  /* margin-top: var(--margin-m); */

}

/* projects */
#projectsAll {
  display: grid;
  /* grid-template-columns: 50% 50%; */
  /* gap: 2vw; */
  place-content: center;
  margin: var(--margin-l);
}

h2 {
  font-size: clamp(var(--font-size-m), 1.7vw, var(--font-size-xl));
  font-weight: 600;
  color: var(--primary-color);
  text-align: center;

}

.article-card {
  /* min-width: 400px; */
  max-width: 500px;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  /* font-family: Arial, Helvetica, sans-serif; */
  font-family: var(--font-family);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 300ms;

  cursor: pointer;
}

.article-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.article-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-card .content {
  box-sizing: border-box;
  width: 100%;
  position: absolute;
  padding: 30px 20px 20px 20px;
  height: auto;
  bottom: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
}

.article-card,
.article-card .title {
  margin: 0;
}

.article-card .title {
  font-size: var(--font-size-l);
  color: #fff;
  font-weight: 600;

  transition: all 300ms;
}

.article-card:hover .title {
  color: var(--accent-color);
}


/* Status */
.progress {
  background: rgba(255,255,255,0.1);
  justify-content: flex-start;
  border-radius: 100px;
  align-items: center;
  position: relative;
  padding: 0 5px;
  display: flex;
  height: 40px;
  width: 500px;
  /* justify-content: center; */
}

.progress-value {
  animation: load 3s normal forwards;
  box-shadow: 0 10px 40px -10px #fff;
  border-radius: 100px;
  background: #fff;
  height: 30px;
  width: 0;
}

@keyframes load {
  0% { width: 0; }
  100% { width: 40%; }
}

#status-this{
  display: grid;
  /* place-content: center; */
  place-items: center;
  width: 100%;
  margin: var(--margin-l) 0;
  background-color: var(--secondary-bg-color);
  border-radius: 4vw;
  padding: var(--padding-l) 0;
}

#status-this h2{
  margin-bottom: 24px;
  text-decoration: underline;
}
#todo{
  margin-top: 24px;
}
#todo p{
  font-size: var(--font-size-l);
  text-decoration: underline;
  font-weight: 700;
}
li{
  font-size: var(--font-size-l);
}