/* Header */

.article-button {
  background-color: rgb(125, 141, 134);

  color: white;
}

.articlewish-button,
.contact-button {
  background-color: rgb(241, 240, 228);

  color: black;
}

/* Artikelsortierungsknöpfe */

.order-div {
  margin-left: 50px;

  display: flex;
  flex-direction: row;
  column-gap: 5px;
}

.order-buttons {
  padding: 1px 3px;

  background-color: rgba(62, 63, 41, 0.5);

  font-size: 15px;
  color: white;

  border: solid;
  border-color: rgb(62, 63, 41);
  border-width: 3px;
  border-radius: 8px;
  
  cursor: pointer;
  transition: background-color 0.2s, opacity 0.2s;
}.order-buttons:hover {
  background-color: rgb(62, 63, 41);
}
.order-buttons:active {
  opacity: 0.6;
}

.order-buttons-active,
.search-button {
  padding: 4px 6px;

  background-color: rgb(62, 63, 41);

  font-size: 15px;
  color: white;

  border: none;
  border-radius: 8px;
  
  cursor: pointer;
  transition: opacity 0.2s;
}
.order-buttons-active:hover,
.search-button:hover {
  opacity: 0.8;
}
.order-buttons-active:active,
.search-button:active {
  opacity: 0.6;
}


/* Artikelübersicht */

.articles {
  margin-top: 10px;
  margin-right: 50px;
  margin-left: 50px;

  display: grid;
  column-gap: 30px;
  row-gap: 30px;
}

.article-image {
  width: 100%;

  object-fit: contain;

  border-radius: 10px;
}

.article-div {
  max-height: fit-content;

  display: grid;
  grid-template-columns: 1fr;

  cursor: pointer;
}

.article-text {
  text-align: center;
}

.article-title {
  margin-top: 10px;

  font-size: 19px;
  font-weight: bold;
  color: rgb(62, 63, 41);
}

.article-description {
  margin-top: -12px;

  font-size: 16px;
}

/* Bildschirmgrösseanpassung */

@media (max-width: 600px) {
  .articles {
    margin-right: 20px;
    margin-left: 20px;

    grid-template-columns: 1fr;
  }

  .order-div {
    margin-top: -80px;
    margin-bottom: 20px;
    margin-left: 20px;
  }

}
@media (min-width: 601px) and (max-width: 1150px) {
  .articles {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1151px) and (max-width: 1500px) {
  .articles {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width: 1501px) and (max-width: 2000px) {
  .articles {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

@media (min-width: 2001px) {
  .articles {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}