body {
  box-sizing: border-box;
}

/* FlipBook */

#flipbook_container {
  /* or any other parent wrapper */
  margin: 0;
  display: flex;
  min-height: calc(100dvh - 100px);
  perspective: 1500px;
  font: 1em/1.4 "Poppins", sans-serif;
  overflow: hidden;
  color: hsl(180, 68%, 5%);
 /* background-image: radial-gradient(circle farthest-corner at 50% 50%, hsl(187, 20%, 88%) 30%, hsl(149, 20%, 94%) 100%); */
}

.book {
  position: relative;
  display: flex;
  margin: auto;
/*  width: 40cqmin; 								  !!!!!!!!!!!!  adapted   !!!!!!!!!!!!! */
  width: 70cqmin;
  pointer-events: none;
  transform-style: preserve-3d;
  transition: translate 1s;
  translate: calc(min(var(--c), 1) * 50%) 0%;
  rotate: 1 0 0 15deg;
}

.page {
  --thickness: 7;
  flex: none;
  display: flex;
  width: 100%;
  font-size: 2cqmin;
  pointer-events: all;
  user-select: none;
  transform-style: preserve-3d;
  transform-origin: left center;
  transition: transform 1s, rotate 1s ease-in calc((min(var(--i), var(--c)) - max(var(--i), var(--c))) * 50ms);
  translate: calc(var(--i) * -100%) 0px 0px;
  transform: translateZ(calc((var(--c) - var(--i) - 0.5) * calc(var(--thickness) * 0.23cqmin)));
  rotate: 0 1 0 calc(clamp(0, var(--c) - var(--i), 1) * -180deg);
}
@media screen and (max-width:1300px) and (orientation:portrait) {
  .book {
    width: 48cqmin;
  }
  .page {
  --thickness: 2;
  } 
}

.front,
.back {
  position: relative;
  flex: none;
  width: 100%;
  backface-visibility: hidden;
  overflow: hidden;
  background-color: #fff;
  translate: 0px;
}

.back {
  translate: -100% 0;
  rotate: 0 1 0 180deg;
}

/* That's it. Your FlipBook customization styles: */

.book {
  counter-reset: page -1;
}

.book a {
  color: inherit;
}

.page {
  box-shadow: 0em 0.5em 1em -0.2em #00000020;
  cursor:pointer;
}

.front,
.back {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
/*  padding: 2em;								  !!!!!!!!!!!!  adapted   !!!!!!!!!!!!! */
  border: 1px solid #0002;
}
/*
.front:has(img),
.back:has(img) {
  padding: 0;
}
*/
.nopadding {
	padding:0;
}
.front img,
.back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
.front::after,
.back::after {
  position: absolute;
  bottom: 1em;
  counter-increment: page;
  content: counter(page) ".";
  font-size: 0.8em;
}
   								  !!!!!!!!!!!!  adapted: do not show page numeration   !!!!!!!!!!!!!  */
.cover::after {
  content: "";
  
}

.front::after {
  right: 1em;
}

.front {
  background: linear-gradient(to left, #f7f7f7 80%, #eee 100%);
  border-radius: 0.1em 0.5em 0.5em 0.1em;
}

.back::after {
  left: 1em;
}

.back {
  background-image: linear-gradient(to right, #f7f7f7 80%, #eee 100%);
  border-radius: 0.5em 0.1em 0.1em 0.5em;
}

.cover {
/*  background: radial-gradient(circle farthest-corner at 80% 20%, hsl(150, 80%, 20%, 0.3) 0%, hsl(170, 60%, 10%, 0.1) 100%), url("https://2.drtapis.ch/files/testseite/AVI-1-F-09.jpg");   !important!important!important!important!important removed tinting of the front/back cover by opacity 0 
background:  radial-gradient(circle farthest-corner at 80% 20%, hsl(150, 80%, 20%, 0) 0%, hsl(170, 60%, 10%, 0) 100%), url("files/pictures/booklets/avi1F/AVI-1-F-01.webp"); */
  background-size: cover;
  background-position: center;
  color: hsl(200, 30%, 98%);
}
.photo1 {
  background: radial-gradient(circle farthest-corner at 80% 20%, hsl(150, 80%, 20%, 0.3) 0%, hsl(170, 60%, 10%, 0.1) 100%), url("files/pictures/booklets/avi1F/AVI-1-F-36.webp");
  background-size: cover;
  background-position: center;
  color: hsl(200, 30%, 98%);
}
/*                                                          CLICK                        */
.click-wrapper {
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}
.click {
   position: relative;
   left:15%;
   display: flex;
   justify-content:space-around;
   align-items: center;
   padding:8px;
   border:1px solid var(--col3);
   border-radius:4px;
}
.click::after {
    content:"";
    background-image: url(data:image/png;base64,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);
  background-size: cover;
  width: 2.1rem;
  height: 2.1rem;
  margin-left: 12px;
}
.click h4, .click h5, .click p {
  margin:0;
  font-size:1.3rem;
}
@media screen and (orientation:portrait) {
  .click-wrapper {
    justify-content: flex-end;
  }
  .click {
    position: relative;
    padding: 4px;
    margin-right: 3%;
    left: 0;
  }
.click h4 {
  font-size:1.1rem;
}
  -click::after {
    width: 1rem;
    height: 1rem;
    padding:3px;
    margin-left: 5px;
  }
    -click::after h4 {
    font-size:1.5rem;
  }
}