/* =========================================================
   CARD.CSS
   Alle eigenen Card-Designs
   ========================================================= */

/* =========================================================
   ANCHOR: BASIS-CARD
   ========================================================= */

.basis-card {
  width: 60%;
  margin-bottom: 20px;
}

.basis-header {
  background-color: var(--color-FLUORESCENT_YELLOW);
  color: var(--color-schwarz);
  border-radius: 25px 25px 0 0;
  padding: 10px;
  font-weight: bold;
}

.basis-card div {
  padding: 10px;
  border-bottom: 1px solid var(--color-lightblue);
  text-align: left;
}

.basis-card div:last-of-type {
  border-bottom: 2px solid var(--color-FLUORESCENT_YELLOW);
}

.basis-card div > span {
  color: var(--color-red);
  font-weight: bold;
}

/* =========================================================
   ANCHOR: BASIS-CARD-ST
   ========================================================= */

.basis-card-ST {
  width: 40%;
  margin: 25px 25px 20px;
}

.basis-header-ST {
  background-color: var(--color-greenyellow);
  color: var(--color-schwarz);
  border-radius: 40px 40px 0 0;
  padding: 10px;
  font-weight: bold;
}

.basis-card-ST div {
  padding: 10px;
  border-bottom: 1px solid var(--color-lightblue);
  text-align: left;
}

.basis-card-ST div:last-of-type {
  border-bottom: 2px solid var(--color-greenyellow);
}

.basis-Link-ST {
  background-color: var(--color-azure);
  font-weight: bold;
}

/* =========================================================
   ANCHOR: CARD RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {
  .basis-card,
  .basis-card-ST {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}