.umbruch {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.favor {
  width: 90px;
  height: 120px;
  perspective: 1000px;
  margin: 10px;
  flex: 0 0 auto; /* verhindert Schrumpfen */
}
.quer {
  width: 120px;
  height: 90px;
  margin: 10px;
    flex: 0 0 auto; /* verhindert Schrumpfen */
}

.flip-card {
  width: 100%;
  height: 100%;
  position: relative;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border: 2px solid black;
  border-radius: 5px;
}

.flip-card-front {
  background-size: cover;
  background-position: center;
}

.flip-card-back {
  background-color: #f0f0f0;
  color: black;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5px;
  font-size: 12px;

}


.gabriel {
  background-image: url("../img/musik/gabriel.jpg");
}
.heine {
  background-image: url("../img/musik/heine.jpg");
}
.villon {
  background-image: url("../img/musik/villon.jpg");
}
.rilke {
  background-image: url("../img/musik/rilke.jpg");
}
.mozart {
  background-image: url("../img/musik/mozart.jpg");
}
.ibrahim {
  background-image: url("../img/musik/ibrahim.jpg");
}
.marshall {
  background-image: url("../img/musik/marshall.jpg");
}
.jarret {
  background-image: url("../img/musik/jarret.jpg");
}
.ott {
  background-image: url("../img/musik/ott.jpg");
}
.orff {
  background-image: url("../img/musik/orff.jpg");
}
.grateful_dead {
  background-image: url("../img/musik/grateful_dead.jpg");
}
.paul_simon {
  background-image: url("../img/musik/paul_simon.jpg");
}
//Hier starten Links zu Bekannten
.burkhardt {
  background-image: url("../img/links/burkhardt.jpg");
}
.ekiw {
  background-image: url("../img/links/ekiw.jpg");
}
.tolle {
  background-image: url("../img/links/tolle.jpg");
}
.vipassana {
  background-image: url("../img/links/vipassana.jpg");
}
//Hier starten Links zu Literaturtipps
.charakteranalyse {
  background-image: url("../img/literatur/charakteranalyse.jpg");
}
.orgasmus {
  background-image: url("../img/literatur/orgasmus.jpg");
}
.faschismus {
  background-image: url("../img/literatur/faschismus.jpg");
}
.zwangsmoral {
  background-image: url("../img/literatur/zwangsmoral.jpg");
}
.bioenergetik {
  background-image: url("../img/literatur/bioenergetik.jpg");
}
.verrat {
  background-image: url("../img/literatur/verrat.jpg");
}
.angst {
  background-image: url("../img/literatur/angst.jpg");
}
.koerpertypen {
  background-image: url("../img/literatur/koerpertypen.jpg");
}




@media only screen and (min-width: 600px) and (max-width: 1024px) {
  .favor, .quer {
    flex: 0 0 calc(25% - 20px); /* 4 Bilder pro Reihe */
  }
}