html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font: 16px/1.25 'Times New Roman', Times, serif;
}
.container_mybook {
  /*background-color: rgba(110, 124, 222, 0.5);*/
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

input[type=checkbox] {
  display: none;
}

.title_mybook {
  padding: 15px 0px 15px 0px;
  text-align: center;
  color: rgba(26, 97, 31, 0.7);
  font-size: 40px;
  font-weight: bold;
  text-shadow: 4px 4px 4px rgba(224, 155, 54, 0.5);
}
/*---*/
#page1 ~ .pages div.page1 {
	/*background: rgba(139,69,19,1.0);*/
  background-image: url('https://psychotherapie-christ.de/wp-content/uploads/2025/08/bucheinband-part.png');
  background-repeat: repeat;
	
  -webkit-transform: rotateY(-18deg);
  -moz-transform: rotateY(-18deg);
  transform: rotateY(-18deg);
}

#page1:checked ~ .pages div.page1 {
  -webkit-transform: rotateY(-178deg);
  -moz-transform: rotateY(-178deg);
  transform: rotateY(-178deg);
}

#page1 ~ .pages div.page1 label span {
	display: block;
}
#page1:checked ~ .pages div.page1 label span {
  display: none;
}
/*---*/
#page2 ~ .pages div.page2 {
  -webkit-transform: rotateY(-17deg);
  -moz-transform: rotateY(-17deg);
  transform: rotateY(-17deg);
}

#page2:checked ~ .pages div.page2 {
  -webkit-transform: rotateY(-177deg);
  -moz-transform: rotateY(-177deg);
  transform: rotateY(-177deg);
}

#page2 ~ .pages div.page2 label span {
  display: block;
}
#page2:checked ~ .pages div.page2 label span {
  display: none;
}
/*---*/
#page3 ~ .pages div.page3 {
  -webkit-transform: rotateY(-16deg);
  -moz-transform: rotateY(-16deg);
  transform: rotateY(-16deg);
}

#page3:checked ~ .pages div.page3 {
  -webkit-transform: rotateY(-176deg);
  -moz-transform: rotateY(-176deg);
  transform: rotateY(-176deg);
}

#page3 ~ .pages div.page3 label span {
  display: block;
}
#page3:checked ~ .pages div.page3 label span {
  display: none;
}
/*---*/
#page4 ~ .pages div.page4 {
  -webkit-transform: rotateY(-15deg);
  -moz-transform: rotateY(-15deg);
  transform: rotateY(-15deg);
}

#page4:checked ~ .pages div.page4 {
  -webkit-transform: rotateY(-175deg);
  -moz-transform: rotateY(-175deg);
  transform: rotateY(-175deg);
}

#page4 ~ .pages div.page4 label span {
  display: block;
}
#page4:checked ~ .pages div.page4 label span {
  display: none;
}
/*---*/
#page5 ~ .pages div.page5 {
  -webkit-transform: rotateY(-14deg);
  -moz-transform: rotateY(-14deg);
  transform: rotateY(-14deg);
}

#page5:checked ~ .pages div.page5 {
  -webkit-transform: rotateY(-174deg);
  -moz-transform: rotateY(-174deg);
  transform: rotateY(-174deg);
}

#page5 ~ .pages div.page5 label span {
  display: block;
}
#page5:checked ~ .pages div.page5 label span {
  display: none;
}
/*---*/
#page6 ~ .pages div.page6 {
  -webkit-transform: rotateY(-13deg);
  -moz-transform: rotateY(-13deg);
  transform: rotateY(-13deg);
}

#page6:checked ~ .pages div.page6 {
  -webkit-transform: rotateY(-173deg);
  -moz-transform: rotateY(-173deg);
  transform: rotateY(-173deg);
}

#page6 ~ .pages div.page6 label span {
  display: block;
}
#page6:checked ~ .pages div.page6 label span {
  display: none;
}
/*---*/
#page7 ~ .pages div.page7 {
  -webkit-transform: rotateY(-12deg);
  -moz-transform: rotateY(-12deg);
  transform: rotateY(-12deg);
}

#page7:checked ~ .pages div.page7 {
  -webkit-transform: rotateY(-172deg);
  -moz-transform: rotateY(-172deg);
  transform: rotateY(-172deg);
}

#page7 ~ .pages div.page7 label span {
  display: block;
}
#page7:checked ~ .pages div.page7 label span {
  display: none;
}
/*---*/
#page8 ~ .pages div.page8 {
  -webkit-transform: rotateY(-11deg);
  -moz-transform: rotateY(-11deg);
  transform: rotateY(-11deg);
}

#page8:checked ~ .pages div.page8 {
  -webkit-transform: rotateY(-171deg);
  -moz-transform: rotateY(-171deg);
  transform: rotateY(-171deg);
}

#page8 ~ .pages div.page8 label span {
  display: block;
}
#page8:checked ~ .pages div.page8 label span {
  display: none;
}
/*---*/
#page9 ~ .pages div.page9 {
  -webkit-transform: rotateY(-10deg);
  -moz-transform: rotateY(-10deg);
  transform: rotateY(-10deg);
}

#page9:checked ~ .pages div.page9 {
  -webkit-transform: rotateY(-170deg);
  -moz-transform: rotateY(-170deg);
  transform: rotateY(-170deg);
}

#page9 ~ .pages div.page9 label span {
  display: block;
}
#page9:checked ~ .pages div.page9 label span {
  display: none;
}
/*---*/
#page10 ~ .pages div.page10 {
  -webkit-transform: rotateY(-9deg);
  -moz-transform: rotateY(-9deg);
  transform: rotateY(-9deg);
}

#page10:checked ~ .pages div.page10 {
  -webkit-transform: rotateY(-169deg);
  -moz-transform: rotateY(-169deg);
  transform: rotateY(-169deg);
}

#page10 ~ .pages div.page10 label span {
  display: block;
}
#page10:checked ~ .pages div.page10 label span {
  display: none;
}
/*---*/
#page11 ~ .pages div.page11 {
  -webkit-transform: rotateY(-8deg);
  -moz-transform: rotateY(-8deg);
  transform: rotateY(-8deg);
}

#page11:checked ~ .pages div.page11 {
  -webkit-transform: rotateY(-168deg);
  -moz-transform: rotateY(-168deg);
  transform: rotateY(-168deg);
}

#page11 ~ .pages div.page11 label span {
  display: block;
}
#page11:checked ~ .pages div.page11 label span {
  display: none;
}
/*---*/
#page12 ~ .pages div.page12 {
  -webkit-transform: rotateY(-7deg);
  -moz-transform: rotateY(-7deg);
  transform: rotateY(-7deg);
}

#page12:checked ~ .pages div.page12 {
  -webkit-transform: rotateY(-167deg);
  -moz-transform: rotateY(-167deg);
  transform: rotateY(-167deg);
}

#page12 ~ .pages div.page12 label span {
  display: block;
}
#page12:checked ~ .pages div.page12 label span {
  display: none;
}
/*---*/
#page13 ~ .pages div.page13 {
  -webkit-transform: rotateY(-6deg);
  -moz-transform: rotateY(-6deg);
  transform: rotateY(-6deg);
}

#page13:checked ~ .pages div.page13 {
  -webkit-transform: rotateY(-166deg);
  -moz-transform: rotateY(-166deg);
  transform: rotateY(-166deg);
}

#page13 ~ .pages div.page13 label span {
  display: block;
}
#page13:checked ~ .pages div.page13 label span {
  display: none;
}
/*---*/
#page14 ~ .pages div.page14 {
  -webkit-transform: rotateY(-5deg);
  -moz-transform: rotateY(-5deg);
  transform: rotateY(-5deg);
}

#page14:checked ~ .pages div.page14 {
  -webkit-transform: rotateY(-165deg);
  -moz-transform: rotateY(-165deg);
  transform: rotateY(-165deg);
}

#page14 ~ .pages div.page14 label span {
  display: block;
}
#page14:checked ~ .pages div.page14 label span {
  display: none;
}
/*---*/
#page15 ~ .pages div.page15 {
  -webkit-transform: rotateY(-4deg);
  -moz-transform: rotateY(-4deg);
  transform: rotateY(-4deg);
}

#page15:checked ~ .pages div.page15 {
  -webkit-transform: rotateY(-164deg);
  -moz-transform: rotateY(-164deg);
  transform: rotateY(-164deg);
}

#page15 ~ .pages div.page15 label span {
  display: block;
}
#page15:checked ~ .pages div.page15 label span {
  display: none;
}
/*---*/
#page16 ~ .pages div.page16 {
  -webkit-transform: rotateY(-3deg);
  -moz-transform: rotateY(-3deg);
  transform: rotateY(-3deg);
}

#page16:checked ~ .pages div.page16 {
  -webkit-transform: rotateY(-163deg);
  -moz-transform: rotateY(-163deg);
  transform: rotateY(-163deg);
}

#page16 ~ .pages div.page16 label span {
  display: block;
}
#page16:checked ~ .pages div.page16 label span {
  display: none;
}
/*---*/
#page17 ~ .pages div.page17 {
  -webkit-transform: rotateY(-2deg);
  -moz-transform: rotateY(-2deg);
  transform: rotateY(-2deg);
}

#page17:checked ~ .pages div.page17 {
  -webkit-transform: rotateY(-162deg);
  -moz-transform: rotateY(-162deg);
  transform: rotateY(-162deg);
}

#page17 ~ .pages div.page17 label span {
  display: block;
}
#page17:checked ~ .pages div.page17 label span {
  display: none;
}
/*---*/
#page18 ~ .pages div.page18 {
  background-image: url('https://psychotherapie-christ.de/wp-content/uploads/2025/08/bucheinband-part.png');
  background-repeat: repeat;
   
  -webkit-transform: rotateY(-1deg);
  -moz-transform: rotateY(-1deg);
  transform: rotateY(-1deg);
}

#page18:checked ~ .pages div.page18 {
  -webkit-transform: rotateY(-161deg);
  -moz-transform: rotateY(-161deg);
  transform: rotateY(-161deg);
}

#page18 ~ .pages div.page18 label span {
  display: block;
}
#page18:checked ~ .pages div.page18 label span {
  display: none;
}
/*---*/
.book {
  position: relative;
  /* 210 x 297*/
  /*width: 420px;
  height: 594px;
  margin-left: 420px;*/
  width: 630px;
  height: 891px;
  margin-left: 630px;
  -webkit-perspective: 5000px;
  -moz-perspective: 5000px;
  perspective: 5000px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.book .pages,
.book .pages > div {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.book .pages {
  width: 100%;
  height: 98%;
  top: 1%;
  left: 3%;
  z-index: 10;
}
.book .pages > div {
  width: 100%;
  height: 100%;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  transform-origin: left center;
  -webkit-transition-property: transform;
  -moz-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease;
  -moz-transition-timing-function: ease;
  transition-timing-function: ease;
  background: -webkit-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
  background: -moz-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
  background: -ms-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
  background: linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
  box-shadow: inset 0px -1px 2px rgba(50, 50, 50, 0.1), inset -1px 0px 1px rgba(150, 150, 150, 0.2);
  border-radius: 0px 5px 5px 0px;
  -webkit-transition-duration: 1s;
}
.book .pages > div:hover {
  box-shadow: inset 1px 0px 2px rgba(50, 50, 50, 0.1), inset -3px 1px 1px rgba(150, 150, 150, 0.2);
}
.book .pages > div label {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middel;
  cursor: pointer;
}
.frontpage {
  position: absolute;
  top: 50px;
  bottom: 50px;
  right: 0;
  width: 100%;
  text-align: center;
	font-size: 40px;
  font-weight: bold;
  color: rgba(231,199,53,1.0);
}
.backpage {
  position: absolute;
  top: 50px;
  bottom: 50px;
  right: 0;
  width: 100%;
  text-align: center;
  font-size: 35px;
  font-weight: bold;
  color: rgba(231,199,53,1.0);  
}
.innerpages {
  position: absolute;
  top: 50px;
  bottom: 50px;
  right: 0;
  width: 100%;
  text-align: center;
  font-size: 20px;
  font-weight: normal;
  color: #222222;
}