/* Glossar Cards */

.card {
  position: relative;
  background-color: transparent;
  width: 100%;
  max-width: 288px;
  aspect-ratio: 1 / 1;
  perspective: 1000px;
}

.card .edit-link {
  right: auto;
  left: 10px;
}

.card-flex {
  display: flex;
  gap: 20px;
}

.card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.card:hover .card__inner, .card:focus .card__inner, .card:focus-within .card__inner  {
  transform: rotateY(-180deg);
}

.card__front, .card__back {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  hyphens: auto;
}

.card__front {
  background-color: #000073;
  color: white;
  padding: 30px;
  backface-visibility: hidden;
}

.card__icon {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 32px;
  height: 32px;
  background: #FFF;
}

.card__back {
  background-color: #EEE;
  color: black;
  transform: rotateY(-180deg);
}

.card__back p {
  font-size: 1.6rem;
  line-height: 2.2rem;
  margin-bottom: 2.2rem;
}

.card__front h2, .card__back p:last-child {
  margin-bottom: 0;
}

/* Card in Content */

.span8 .card-flex .card, .span8r .card-flex .card {
  max-width: 364px;
}

.span8 .card__back p, .span8r .card__back p {
  font-size: 2.2rem;
  line-height: 3rem;
}

@media only screen and (max-width: 1270px) {
  .span8r .card__back p {
    font-size: 1.6rem;
    line-height: 2.2rem;
  }
}

@media only screen and (max-width: 1080px) {
  .span8r .card__icon { width: 24px; height: 24px; }
  .span8r .card__front, .span8r .card__back { padding: 15px; }
}

@media only screen and (max-width: 880px) {
  .span8r .card__icon { width: 32px; height: 32px; }
  .span8r .card__front, .span8r .card__back { padding: 30px; }
}

@media only screen and (max-width: 670px) {
  .span8r .card-flex {
    flex-direction: column;
  }
  .span8r .card-flex .card {
    max-width: 288px;
  }
}

@media only screen and (max-width: 590px) {
  .span8r .card__icon { width: 24px; height: 24px; }
  .span8r .card__front, .span8r .card__back { padding: 15px; }
  .span8r .card-flex { flex-direction: column; }
}

/* Card in Sidebar */

.span3p .card-flex {
  flex-direction: column;
}

@media only screen and (max-width: 1270px) {
  .span3p .card__icon { width: 24px; height: 24px; }
  .span3p .card__front, .span3p .card__back { padding: 15px; }
}

@media only screen and (max-width: 1080px) {
  .span3p .card { aspect-ratio: 1 / 1.3; }
  .span3p .card__back p { margin-bottom: 0; }
}

@media only screen and (max-width: 880px) {
  .span3p .card { aspect-ratio: 1 / 1; }
  .span3p .card__icon { width: 32px; height: 32px; }
  .span3p .card__front, .span3p .card__back { padding: 30px; }
  .span3p .card__back p { margin-bottom: 2.2rem; }
  .span3p .card__back p:last-child { margin-bottom: 0; }
  .span3p .card-flex { flex-direction: row; }
}

@media only screen and (max-width: 590px) {
  .span3p .card__icon { width: 24px; height: 24px; }
  .span3p .card__front, .span3p .card__back { padding: 15px; }
  .span3p .card-flex { flex-direction: column; }
}


/* Forced Cards  */

.card-flex--forced .card {
  display: inline-block;
  margin: 0 20px 20px 0;
}

.card.forced_364 { width: 364px; max-width: 364px; }
.card.forced_364 .card__back p { font-size: 2.2rem; line-height: 3rem; }
.card.forced_300 { width: 300px; max-width: 300px; }
.card.forced_260 { width: 260px; max-width: 260px; }
.card.forced_260 .card__front, .card.forced_260 .card__back { padding: 15px; }
.card.forced_260 .card__icon { width: 24px; height: 24px; }

.card.forced_288 { width: 288px; }
.card.forced_240 { width: 240px; }
.card.forced_240 .card__front, .card.forced_240 .card__back { padding: 15px; }
.card.forced_240 .card__icon { width: 24px; height: 24px; }
.card.forced_210 { width: 210px; aspect-ratio: 1 / 1.3; }
.card.forced_210 .card__back p { margin-bottom: 0; }
.card.forced_210 .card__front, .card.forced_210 .card__back { padding: 15px; }
.card.forced_210 .card__icon { width: 24px; height: 24px; }