:root {
  --c-1: #F16644;
  --c-1-o50: #f167447b;
  --c-1-o80: #f167442b;
  --c-1-dark: #d45738;
  --c-1-darker: #af4c33;
  --c-bg: #F1EBE5;
  --c-blue: #5A6073;
  --c-red: #e00000;
  --c-2: #81BAEF;
  --c-2-o80: #4583df32;
  --c-3: #333;
  --c-3-o80: #33333323;
  --c-4: #37B54A;
  --c-5: #9B5941;
  --f-main: "Inter", -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,"Apple Color Emoji",Arial,sans-serif,"Segoe UI Emoji","Segoe UI Symbol",sans-serif;
}

@keyframes picker-bounce {
  0%, 20%, 45%, 75%, 81% {
    padding-top: 0.35rem;
    margin-top: -0.35rem;
  }
  40% {
    padding-top: 1.2rem;
    margin-top: -1.2rem;
  }
  60% {
    padding-top: 0.75rem;
    margin-top: -0.75rem;
    opacity: 0.9;
  }
  100% {
    padding-top: 0.35rem;
    margin-top: -0.35rem;
  }
}
@keyframes picker-bounce-2 {
  0%, 20%, 45%, 75%, 81% {
    padding-top: 0.35rem;
  }
  40% {
    padding-top: 1.2rem;
  }
  60% {
    padding-top: 0.75rem;
    opacity: 0.9;
  }
  100% {
    padding-top: 0.35rem;
  }
}
@font-face {
  font-family: "Pecking Order";
  src: url("fonts/dehinted-PeckingOrder-Regular.woff2") format("woff2"), url("fonts/dehinted-PeckingOrder-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pecking Order";
  src: url("fonts/dehinted-PeckingOrder-Italic.woff2") format("woff2"), url("fonts/dehinted-PeckingOrder-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
.doodle {
  display: block;
  position: fixed;
  left: -2%;
  height: 15rem;
  width: 15rem;
  opacity: 0.1;
}
.doodle.d1 {
  top: -2%;
  left: 35%;
  background: url(../img/doodle_1.svg) no-repeat center center;
}
.doodle.d2 {
  top: -2%;
  left: 90%;
  background: url(../img/doodle_2.svg) no-repeat center center;
}
.doodle.d3 {
  bottom: 10%;
  left: 10%;
  background: url(../img/doodle_3.svg) no-repeat center center;
}
.doodle.d4 {
  bottom: 45%;
  left: -4%;
  background: url(../img/doodle_4.svg) no-repeat center center;
}
.doodle.d5 {
  bottom: -5%;
  left: 45%;
  background: url(../img/doodle_5.svg) no-repeat center center;
}
.doodle.d6 {
  bottom: -7%;
  left: 90%;
  width: 25rem;
  height: 25rem;
  background: url(../img/doodle_6.svg) no-repeat center center;
}
.doodle.d7 {
  bottom: 35%;
  left: 25%;
  background: url(../img/doodle_7.svg) no-repeat center center;
}

#loader {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 1000;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  display: flex;
  justify-content: center;
  align-items: center;
}
#loader img {
  height: 150px;
}
#loader.hide {
  display: none;
}

.popup {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 998;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
}
.popup.popupage {
  z-index: 999;
}
.popup p.hint {
  color: #ff4444;
  font-weight: bold;
  border: 1px dashed #ff3333;
  padding: 0.5rem;
  text-align: center;
}
.popup > div {
  box-sizing: border-box;
  background: #fff;
  border-radius: 2rem;
  padding: 2rem;
}
.popup img {
  height: 150px;
}
.popup.hide {
  display: none;
}
.popup label {
  display: block;
}
.popup .upl-confirm, .popup .upl-cancel, .popup .age-confirm, .popup .age-cancel {
  display: inline-block;
  text-decoration: none;
  border-bottom: none;
  padding: 0.75rem 1.5rem;
  border-radius: 4rem;
  background: #F16644;
  color: #fff;
  padding: 0.75rem 1.5rem;
  margin: 0.5rem;
}
.popup .upl-confirm i, .popup .upl-cancel i, .popup .age-confirm i, .popup .age-cancel i {
  display: inline-block;
  transition: all 200ms ease-in-out;
  margin-right: 0.25rem;
}
.popup .upl-confirm:hover, .popup .upl-cancel:hover, .popup .age-confirm:hover, .popup .age-cancel:hover {
  border-bottom: none;
  background: #d45738;
}
.popup .age-cancel {
  background: #333;
}
.popup .age-cancel:hover {
  border-bottom: none;
  background: #000;
}
.popup #char_age {
  z-index: 12;
  position: relative;
  height: 3rem;
  line-height: 3rem;
  border-radius: 50rem;
  background: #fff;
  padding-left: 4.5rem;
  text-align: left;
  box-shadow: 0 0 0.75rem 0 rgba(0, 0, 0, 0.1);
}
.popup #char_age input {
  transition: all 200ms ease-in-out;
  padding: 0;
  margin: 0;
  line-height: 1.5rem;
  position: absolute;
  left: 0;
  font-size: 1.4rem;
  text-align: center;
  font-weight: 700;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50rem;
  transition: all 200ms ease-in-out;
  outline: none;
  border: 3px solid #d45738;
  margin-right: 0.5rem;
}
.popup #char_human div, .popup #char_gender div {
  margin: 1rem 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  text-align: center;
}
.popup #char_human div span, .popup #char_gender div span {
  box-shadow: 0 0 0.75rem 0 rgba(0, 0, 0, 0.1);
  background: #fff;
  padding: 0.5rem;
  border-radius: 5rem;
}
.popup #char_human div span.active, .popup #char_gender div span.active {
  color: #fff;
  font-weight: bold;
}
.popup #char_human span.active {
  background: #333;
  color: #fff;
}
.popup #char_gender span.active:nth-child(1) {
  background: #4582df;
}
.popup #char_gender span.active:nth-child(2) {
  background: #dc1e47;
}
.popup #char_name {
  margin-bottom: 0.5rem;
  z-index: 10;
  position: relative;
}
.popup #char_name > i {
  z-index: 11;
  position: absolute;
  top: 0.5rem;
  left: 1rem;
  font-size: 2rem;
  opacity: 0.5;
}
.popup #char_name input {
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  border-radius: 50rem;
  font-size: 1rem;
  text-align: left;
  box-sizing: border-box;
  padding: 1rem 1rem 1rem 4.5rem;
  font-weight: 700;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  width: 100%;
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.05);
  transition: all 200ms ease-in-out;
  outline: none;
  background: #fff;
  box-shadow: 0 0 0.75rem 0 rgba(0, 0, 0, 0.1);
}
.popup #char_name input::-moz-placeholder {
  font-weight: 500;
  opacity: 0.5;
}
.popup #char_name input::placeholder {
  font-weight: 500;
  opacity: 0.5;
}
.popup #char_name input:hover, .popup #char_name input:focus {
  outline: none;
  box-shadow: 0 0 2.5rem 0 rgba(0, 0, 0, 0.2);
}
.popup #char_name input:focus::-moz-placeholder {
  opacity: 0.15;
}
.popup #char_name input:focus::placeholder {
  opacity: 0.15;
}

body, html {
  background: #F1EBE5;
  margin: 0;
  padding: 0;
  font-family: var(--f-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 16px;
  position: relative;
}

.body_wrapper {
  padding: 0 1rem;
  max-width: 1900px;
  margin: 0 auto;
  overflow-x: clip;
  position: relative;
}

header {
  width: 100%;
  height: 6.7rem;
  padding: 1.5rem 1rem;
  box-sizing: border-box;
}
header > img {
  position: relative;
  z-index: 1;
  height: 100%;
}
header #cheap_german {
  z-index: 0;
  position: absolute;
  margin: 0rem 0;
  display: inline-block;
  left: 0;
  right: 0;
  text-align: left;
  margin-top: 1.25rem;
  padding-left: 13rem;
}
header nav {
  position: relative;
  z-index: 1;
  float: right;
}
header nav a {
  transition: all 200ms ease-in-out;
  color: #222;
  text-decoration: none;
  display: inline-block;
  padding: 0.25rem;
  margin: 1rem;
  border-bottom: 2px dashed transparent;
}
header nav a:hover {
  border-bottom: 2px dashed #F16644;
}
header nav a.btn {
  border-bottom: none;
  padding: 0.75rem 1.5rem;
  border-radius: 4rem;
  background: #F16644;
  color: #fff;
  padding: 0.75rem 1.5rem;
  margin: 0.5rem;
}
header nav a.btn i {
  display: inline-block;
  transition: all 200ms ease-in-out;
  margin-right: 0.25rem;
}
header nav a.btn:hover {
  padding: 0.75rem 1.75rem;
  border-bottom: none;
  background: #d45738;
}
header nav a.btn:hover i {
  transform: rotate(-15deg);
  margin-right: 0.5rem;
}

#configurator {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  width: 100%;
  position: relative;
}
#configurator [name=camera] {
  display: none;
}
#configurator #config_wrapper {
  grid-column: span 3;
  aspect-ratio: 1;
  position: relative;
  top: 0;
  left: -5rem;
  width: calc(100% + 5rem);
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 100rem;
}
#configurator #config_wrapper #char_preview {
  position: absolute;
  z-index: 7;
  top: 6rem;
  left: 6rem;
  right: 6rem;
  bottom: 6rem;
  border-radius: 100rem;
  border: 0.75rem solid #fff;
  box-shadow: 0 6rem 5rem -5rem rgba(0, 0, 0, 0.5), 0 0 1rem 0 rgba(0, 0, 0, 0.08);
  background-position: center center;
  background-size: cover;
  background-color: #fff;
  background-repeat: no-repeat;
}
#configurator #config_wrapper #char_preview_loader {
  position: absolute;
  z-index: 8;
  top: 6rem;
  left: 6rem;
  right: 6rem;
  bottom: 6rem;
  border-radius: 100rem;
  box-shadow: none;
  transition: all 200ms ease-in-out;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
#configurator #config_wrapper #char_preview_loader.blur {
  background-color: #fff;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
#configurator #config_wrapper #camera_loader {
  position: absolute;
  z-index: 8;
  top: 6rem;
  left: 6rem;
  right: 6rem;
  bottom: 6rem;
  border-radius: 100rem;
  box-shadow: none;
  transition: all 200ms ease-in-out;
  background: url(../img/camera_loader.svg) no-repeat center center rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  background-size: 8rem;
}
#configurator #config_wrapper #camera_loader span {
  display: block;
  left: 0;
  right: 0;
  position: absolute;
  text-align: center;
  bottom: 9rem;
  font-size: 1.5rem;
  color: #F16644;
}
#configurator #config_wrapper #camera_loader.hide {
  display: none;
}
#configurator #config_wrapper #camera {
  z-index: 10;
  position: absolute;
  top: 50%;
  transform: translateY(-2rem);
  right: 4rem;
  background-color: #F16644;
  border-radius: 100%;
  padding: 1rem;
  color: #fff;
  transition: all 200ms ease-in-out;
}
#configurator #config_wrapper #camera i {
  font-size: 2rem;
}
#configurator #config_wrapper #camera:hover {
  cursor: pointer;
  transform: translateY(-2rem) scale(1.4);
  box-shadow: 0 0 6rem 2rem #fff;
}
#configurator #config_wrapper #char_name {
  z-index: 10;
  position: absolute;
  bottom: 5rem;
  left: 25%;
  right: 25%;
}
#configurator #config_wrapper #char_name > i {
  z-index: 11;
  position: absolute;
  top: 0.75rem;
  left: 1rem;
  font-size: 2rem;
  opacity: 0.5;
}
#configurator #config_wrapper #char_name input {
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  border-radius: 50rem;
  font-size: 1.5rem;
  text-align: center;
  box-sizing: border-box;
  padding: 1rem 3rem;
  font-weight: 700;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  width: 100%;
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.05);
  transition: all 200ms ease-in-out;
  outline: none;
}
#configurator #config_wrapper #char_name input::-moz-placeholder {
  font-weight: 500;
  opacity: 0.5;
}
#configurator #config_wrapper #char_name input::placeholder {
  font-weight: 500;
  opacity: 0.5;
}
#configurator #config_wrapper #char_name input:hover, #configurator #config_wrapper #char_name input:focus {
  outline: none;
  box-shadow: 0 0 2.5rem 0 rgba(0, 0, 0, 0.2);
}
#configurator #config_wrapper #char_name input:focus::-moz-placeholder {
  opacity: 0.15;
}
#configurator #config_wrapper #char_name input:focus::placeholder {
  opacity: 0.15;
}
#configurator #config_wrapper #char_age {
  z-index: 12;
  position: absolute;
  bottom: 2.5rem;
  left: 38%;
  right: 38%;
  height: 3rem;
  line-height: 3rem;
  border-radius: 50rem;
  background: #fff;
  padding-left: 2.5rem;
  text-align: center;
  box-shadow: 0 0 0.75rem 0 rgba(0, 0, 0, 0.1);
}
#configurator #config_wrapper #char_age input {
  transition: all 200ms ease-in-out;
  padding: 0;
  margin: 0;
  line-height: 1.5rem;
  position: absolute;
  left: 0;
  font-size: 1.4rem;
  text-align: center;
  font-weight: 700;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50rem;
  transition: all 200ms ease-in-out;
  outline: none;
  border: 3px solid #d45738;
  margin-right: 0.5rem;
}
#configurator #config_wrapper #char_age input::-moz-placeholder {
  font-weight: 500;
  opacity: 0.5;
}
#configurator #config_wrapper #char_age input::placeholder {
  font-weight: 500;
  opacity: 0.5;
}
#configurator #config_wrapper #char_age input:hover, #configurator #config_wrapper #char_age input:focus {
  transform: scale(1.25);
  outline: none;
  box-shadow: 0 0 2rem 1rem #fff;
}
#configurator #config_wrapper .picker_wrapper {
  transform: rotate(-20deg);
  z-index: 9;
  position: absolute;
  bottom: 50%;
  margin-bottom: 3rem;
  right: 5.5rem;
  background-color: #fff;
  border-radius: 50rem;
  padding: 0.25rem;
  color: #525252;
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.1);
  transition: all 200ms ease-in-out;
}
#configurator #config_wrapper .picker_wrapper span.picker_bg {
  z-index: 10;
  position: absolute;
  top: 0.125rem;
  left: -0.125rem;
  right: -0.125rem;
  margin-top: -0.375rem;
  aspect-ratio: 1;
  background: #333;
  transition: all 200ms ease-in-out;
}
#configurator #config_wrapper .picker_wrapper span {
  position: relative;
  z-index: 11;
  border-radius: 50rem;
  padding: 0.5rem;
  display: block;
}
#configurator #config_wrapper .picker_wrapper span i {
  display: inline-block;
  transform: rotate(20deg);
  font-size: 1.75rem;
}
#configurator #config_wrapper .picker_wrapper span.active {
  color: #fff;
}
#configurator #config_wrapper .picker_wrapper span:hover {
  cursor: pointer;
}
#configurator #config_wrapper .picker_wrapper span[bs-val="2"].active ~ span.picker_bg {
  top: 3rem;
}
#configurator #config_wrapper .picker_wrapper:hover span[bs-val="1"].active ~ span.picker_bg {
  animation: 1.5s ease-in-out 0s infinite picker-bounce-2;
}
#configurator #config_wrapper .picker_wrapper:hover span[bs-val="2"].active ~ span.picker_bg {
  animation: 1.5s ease-in-out 0s infinite picker-bounce;
}
#configurator #config_wrapper .picker_wrapper.gender {
  transform: rotate(20deg);
  top: 50%;
  bottom: auto;
  margin-bottom: 0;
  margin-top: 3rem;
}
#configurator #config_wrapper .picker_wrapper.gender span i {
  transform: rotate(-20deg);
}
#configurator #config_wrapper .picker_wrapper.gender span.picker_bg {
  background: #4582df;
}
#configurator #config_wrapper .picker_wrapper.gender span[bs-val="2"].active ~ span.picker_bg {
  background: #db1c46;
}
#configurator #book_wrapper {
  grid-column: span 5;
  display: grid;
  align-items: center;
  padding-left: 2rem;
}
#configurator #book_wrapper .book_list {
  display: block;
  background-color: #f9f5f3;
  height: auto;
  border-radius: 10rem 2rem 2rem 10rem;
  position: relative;
  margin: 1rem 0;
  width: 100%;
  /*
  .book {
      position: relative;
      background-color: #f9f5f3;
      width: 100%;
      aspect-ratio: 1 / 1.5;
      border-radius: 3rem;
      .prev {
          border-radius: .25rem;
          border-radius: 2rem;
          width: 80%;
          margin: 10% 10% 0 10%;
          aspect-ratio: 1 / 1.4;
          background-size: cover;
          background-position: right;
      }
      h4 {text-align: center;margin:.25rem 10%;padding:0;}
  }*/
}
#configurator #book_wrapper .book_list > h4 {
  top: 0;
  bottom: 0;
  position: absolute;
  width: 7rem;
  margin: 0;
  color: #333;
  font-size: 2rem;
  padding: 0 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
#configurator #book_wrapper .book_list .prev, #configurator #book_wrapper .book_list .next {
  position: absolute;
  left: 10rem;
  top: 0;
  bottom: 0;
  width: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
#configurator #book_wrapper .book_list .prev i, #configurator #book_wrapper .book_list .next i {
  font-size: 4rem;
  position: relative;
}
#configurator #book_wrapper .book_list .prev:hover, #configurator #book_wrapper .book_list .next:hover {
  cursor: pointer;
}
#configurator #book_wrapper .book_list .next {
  text-align: right;
  left: auto;
  right: 1rem;
}
#configurator #book_wrapper .book_list .book_wrapper {
  display: block;
  margin-left: 12.5rem;
  box-sizing: border-box;
  position: relative;
  width: calc(100% - 16rem);
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 7%, rgb(0, 0, 0) 93%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 7%, rgb(0, 0, 0) 93%, rgba(0, 0, 0, 0) 100%);
}
#configurator #book_wrapper .book_list .book_carousel {
  margin: 1rem 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 25%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  border-radius: 8px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  scroll-padding-inline: 2rem 2rem;
  padding-left: 2rem;
  margin-bottom: 1.5rem;
  grid-template-rows: 1fr 1fr;
}
#configurator #book_wrapper .book_list .book {
  position: relative;
  border: 0.25rem solid #fff;
  display: block;
  height: 100%;
  box-sizing: border-box;
  border-radius: 0.35rem;
  background-color: #fff;
  margin-bottom: 1.5rem;
  scroll-snap-align: start;
  cursor: pointer;
  flex-direction: column;
  background-size: contain;
  transition: all 200ms ease-in-out;
}
#configurator #book_wrapper .book_list .book .book_prev {
  border-radius: 0.2rem;
  width: 100%;
  aspect-ratio: 1/1.4;
  background-size: cover;
  background-position: right;
}
#configurator #book_wrapper .book_list .book h4 {
  margin: 0.5rem 0.5rem 0.5rem 0.5rem;
  text-align: center;
}
#configurator #book_wrapper .book_list .book.active {
  border-color: #F16644;
  background: #F16644;
  color: #fff;
}
#configurator #book_wrapper .book_list .book.active .specs span {
  color: #fff !important;
  background: transparent !important;
  border-color: #fff !important;
}
#configurator #book_wrapper .book_list .book:hover:not(.active) {
  border-color: #333;
}
#configurator #book_wrapper .book_list .book:hover:not(.active) .book_prev {
  border-radius: 0rem;
}
#configurator #book_wrapper .book_list .book .specs span {
  display: inline-block;
  margin: 0.25rem;
  font-weight: bold;
  font-size: 0.65rem;
  padding: 0.28rem;
  color: var(--c-1);
  background-color: var(--c-1-o80);
  border: 2px solid var(--c-1);
  border-radius: 50rem;
}
#configurator #book_wrapper .book_list .book .specs span[age="1"] {
  color: var(--c-2);
  background-color: var(--c-2-o80);
  border-color: var(--c-2);
}
#configurator #book_wrapper .book_list .book .specs span[style="1"] {
  color: var(--c-3);
  background-color: var(--c-3-o80);
  border-color: var(--c-3);
}
#configurator #story_wrapper {
  grid-column: span 5;
  display: grid;
  align-items: center;
}
#configurator #story_wrapper .choose_wrapper {
  display: block;
  background-color: #f9f5f3;
  height: auto;
  border-radius: 100rem;
  position: relative;
  margin: 1rem 0;
  width: 100%;
}
#configurator #story_wrapper .choose_wrapper h4 {
  top: 0;
  bottom: 0;
  position: absolute;
  width: 7rem;
  margin: 0;
  color: #333;
  font-size: 2rem;
  padding: 0 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
#configurator #story_wrapper .choose_wrapper .ball_wrapper {
  display: block;
  margin-left: 12.5rem;
  box-sizing: border-box;
  position: relative;
  width: calc(100% - 16rem);
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 7%, rgb(0, 0, 0) 93%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 7%, rgb(0, 0, 0) 93%, rgba(0, 0, 0, 0) 100%);
}
#configurator #story_wrapper .choose_wrapper .ball_wrapper .ball_carousel {
  margin: 1rem 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 20%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem 0;
  border-radius: 8px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  scroll-padding-inline: 2rem 2rem;
  padding-left: 2rem;
  margin-bottom: 1.5rem;
}
#configurator #story_wrapper .choose_wrapper .ball_wrapper .ball_carousel .ball {
  position: relative;
  border: 0.25rem solid #fff;
  margin: 0 1rem;
  width: calc(100% - 2rem);
  display: inline-block;
  box-sizing: border-box;
  aspect-ratio: 1;
  border-radius: 50rem;
  background-color: #fff;
  margin-bottom: 1.5rem;
  scroll-snap-align: start;
  cursor: pointer;
  flex-direction: column;
  background-size: contain;
  transition: border-color 500ms ease-in-out, color 200ms ease-in-out;
}
#configurator #story_wrapper .choose_wrapper .ball_wrapper .ball_carousel .ball.active {
  border-color: #F16644;
}
#configurator #story_wrapper .choose_wrapper .ball_wrapper .ball_carousel .ball.active span {
  background-color: #F16644;
  color: #fff;
}
#configurator #story_wrapper .choose_wrapper .ball_wrapper .ball_carousel .ball:hover:not(.active) {
  border-color: #333;
}
#configurator #story_wrapper .choose_wrapper .ball_wrapper .ball_carousel .ball:hover:not(.active) span {
  background-color: #333;
  color: #fff;
}
#configurator #story_wrapper .choose_wrapper .ball_wrapper .ball_carousel .ball span {
  transition: background-color 500ms ease-in-out, color 200ms ease-in-out;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  background: rgba(255, 255, 255, 0.8);
  position: absolute;
  padding: 0.5rem 1rem;
  border-radius: 10rem;
  bottom: -1.5rem;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
}
#configurator #story_wrapper .choose_wrapper .ball_wrapper .ball_carousel.stylechoose [bs-val="1"] {
  background-image: url(../img/stil_1.jpg);
}
#configurator #story_wrapper .choose_wrapper .ball_wrapper .ball_carousel.stylechoose [bs-val="2"] {
  background-image: url(../img/stil_2.jpg);
}
#configurator #story_wrapper .choose_wrapper .ball_wrapper .ball_carousel.stylechoose [bs-val="3"] {
  background-image: url(../img/stil_3.jpg);
}
#configurator #story_wrapper .choose_wrapper .ball_wrapper .ball_carousel.stylechoose [bs-val="4"] {
  background-image: url(../img/stil_4.jpg);
}
#configurator #story_wrapper .choose_wrapper .ball_wrapper .ball_carousel.storychoose [bs-val="1"] {
  background-image: url(../img/theme_1.jpg);
}
#configurator #story_wrapper .choose_wrapper .ball_wrapper .ball_carousel.storychoose [bs-val="2"] {
  background-image: url(../img/theme_2.jpg);
}
#configurator #story_wrapper .choose_wrapper .ball_wrapper .ball_carousel.storychoose [bs-val="3"] {
  background-image: url(../img/theme_3.jpg);
}
#configurator #story_wrapper .choose_wrapper .ball_wrapper .ball_carousel.storychoose [bs-val="4"] {
  background-image: url(../img/theme_4.jpg);
}
#configurator #story_wrapper .choose_wrapper .prev, #configurator #story_wrapper .choose_wrapper .next {
  position: absolute;
  left: 10rem;
  top: 0;
  bottom: 0;
  width: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
#configurator #story_wrapper .choose_wrapper .prev i, #configurator #story_wrapper .choose_wrapper .next i {
  font-size: 4rem;
  position: relative;
}
#configurator #story_wrapper .choose_wrapper .prev:hover, #configurator #story_wrapper .choose_wrapper .next:hover {
  cursor: pointer;
}
#configurator #story_wrapper .choose_wrapper .next {
  text-align: right;
  left: auto;
  right: 1rem;
}

@keyframes float_bg {
  0% {
    background: url(../img/bg_blue.png) repeat-x left bottom transparent;
    background-size: contain;
  }
  100% {
    background: url(../img/bg_blue.png) repeat-x left -6.4rem bottom transparent;
    background-size: contain;
  }
}
@keyframes float_bg2 {
  0% {
    background: url(../img/bg_grey.png) repeat-x left bottom transparent;
    background-size: contain;
  }
  100% {
    background: url(../img/bg_grey.png) repeat-x left 6.8rem bottom transparent;
    background-size: contain;
  }
}
#compare {
  display: grid;
  background: var(--c-2);
  z-index: 2;
  position: relative;
  margin-top: 8rem;
}
#compare .border_blue, #compare .border_grey {
  display: block;
  width: 100%;
  background: url(../img/bg_blue.png) repeat-x left bottom transparent;
  background-size: contain;
  height: 3rem;
  margin-top: -3rem;
  animation: 20s linear infinite float_bg;
}
#compare .border_grey {
  position: absolute;
  background: url(../img/bg_grey.png) repeat-x left bottom transparent;
  margin-top: 0;
  background-size: contain;
  bottom: -3rem;
  animation: 20s linear infinite float_bg2;
}
#compare h2 {
  margin: 2rem 0;
  color: #fff;
  font-size: 3rem;
}
#compare .compareTable {
  width: 70rem;
  margin: 0 auto;
  border-collapse: collapse;
  margin-bottom: 3rem;
  font-weight: bold;
}
#compare .compareTable tr td {
  color: #fff;
  padding: 1rem;
  border-bottom: 3px solid #fff;
  text-align: center;
  width: 33%;
}
#compare .compareTable tr td img {
  width: 7rem;
}
#compare .compareTable tr td i {
  font-size: 2rem;
}
#compare .compareTable tr td:first-child {
  text-align: left;
}
#compare .compareTable tr td.white_bg {
  background: rgba(255, 255, 255, 0.7);
}
#compare .compareTable tr td.green {
  color: var(--c-4);
}
#compare .compareTable tr td.black {
  color: #111;
}
#compare .compareTable tr td.br_top {
  padding-top: 1.25rem;
  border-radius: 2rem 2rem 0 0;
}
#compare .compareTable tr td.br_bottom {
  border-radius: 0 0 2rem 2rem;
}
#compare .compareTable tr:last-child td {
  border-bottom: none;
}

@keyframes ghost1 {
  0% {
    transform: translateY(1rem) rotate(-1deg);
  }
  50% {
    transform: translateY(-1rem) rotate(1deg);
  }
  100% {
    transform: translateY(1rem) rotate(-1deg);
  }
}
@keyframes ghost2 {
  0% {
    transform: translateY(-1rem) rotate(1deg);
  }
  50% {
    transform: translateY(1rem) rotate(-1deg);
  }
  100% {
    transform: translateY(-1rem) rotate(1deg);
  }
}
#review .review_wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  padding: 0 2rem;
}
#review .review_wrapper .review_item {
  background: #fff;
  position: relative;
  border-radius: 50rem 50rem 0 0;
  width: 15rem;
  height: 20rem;
  z-index: 2;
  margin: 0 auto 6rem auto;
  animation: 5s ease-in-out infinite ghost1;
}
#review .review_wrapper .review_item.ani_alt {
  animation: 5s ease-in-out infinite ghost2;
}
#review .review_wrapper .review_item .img_main {
  background: #fff;
  width: 11rem;
  height: 11rem;
  border: 0.5rem solid var(--c-1);
  display: block;
  margin: 1.5rem;
  border-radius: 50rem;
  background-size: cover;
}
#review .review_wrapper .review_item .img_sub {
  position: absolute;
  background: #fff;
  width: 6rem;
  height: 6rem;
  border: 0.51rem solid var(--c-1);
  display: block;
  border-radius: 50rem;
  top: 8rem;
  right: 1rem;
  background-size: cover;
}
#review .review_wrapper .review_item .quote {
  display: block;
  font-family: "Pecking Order";
  margin: 1rem 1rem 1rem 1rem;
  line-height: 1.25rem;
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 4.5rem;
}
#review .review_wrapper .review_item h4 {
  font-family: "Pecking Order";
  position: absolute;
  bottom: -6rem;
  width: 100%;
  font-weight: 100;
  text-align: center;
  opacity: 0.5;
}
#review .review_wrapper .review_item .bub_bot {
  z-index: 1;
  position: absolute;
  background: #fff;
  border-radius: 50rem;
  width: 5rem;
  height: 5rem;
  bottom: -2.5rem;
  left: 0;
}
#review .review_wrapper .review_item .bub_bot:nth-child(2n) {
  left: 5rem;
}
#review .review_wrapper .review_item .bub_bot:nth-child(3n) {
  left: 10rem;
}

#story {
  margin-top: 3rem;
  padding-bottom: 2rem;
  position: relative;
  z-index: 2;
  background: var(--c-1);
}
#story .border_o {
  position: absolute;
  display: block;
  width: 100%;
  background: url(../img/bg_o.png) repeat-x left bottom transparent;
  background-size: contain;
  height: 3rem;
  margin-top: -1.5rem;
}
#story h2 {
  margin: 0;
  padding: 2rem 0 0 0;
  color: #fff;
  font-size: 3rem;
}
#story .s_wrap {
  max-width: 50rem;
  width: 100%;
  margin: 0 auto;
}
#story .s_wrap .text {
  font-family: "Pecking Order";
  color: #fff;
  font-size: 1.5rem;
  line-height: 2rem;
}
#story .s_wrap > div {
  grid-column: 4/6;
  /*
  img {
      width:100%;
      border:1rem solid #fff;
      &:first-child {border-radius:5rem 5rem 0 0;}
      &:last-child {border-radius:0 0 5rem 5rem;  margin-top: -2rem;}
  }
  */
}
#story .s_wrap > div img {
  width: 30rem;
  float: right;
  margin-right: -10rem;
}

.text_wrapper {
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  max-width: 1003px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.5);
  padding: 1rem 3rem 2rem 3rem;
  margin-bottom: 2rem;
  border-radius: 4rem;
}
.text_wrapper > h2 {
  margin-top: 0;
}

#footer {
  min-height: 10rem;
  background: #333;
  position: relative;
  z-index: 2;
}
#footer .body_wrapper {
  max-width: 1024px;
  padding: 2rem 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  color: #fff;
}
#footer .body_wrapper a {
  color: #fff;
  text-decoration: none;
  display: block;
  cursor: pointer;
  padding: 0 0 1rem 0;
}
#footer .body_wrapper .logo {
  max-width: 8rem;
}
#footer .body_wrapper .logo_footer {
  align-content: center;
  display: grid;
}
#footer .body_wrapper .icon_footer h4 {
  margin-bottom: 1rem;
  margin-right: 1rem;
}
#footer .body_wrapper .icon_footer img {
  width: 2rem;
}

h2 {
  margin-top: 5rem;
  color: var(--c-1);
  font-size: 3rem;
  font-family: "Pecking Order";
  text-align: center;
}

#cart_wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-items: stretch;
  align-items: start;
}
#cart_wrap #cart_data, #cart_wrap #cart_pay, #cart_wrap #cart_order {
  background: #fff;
  padding: 2rem;
  border-radius: 1.5rem;
}
#cart_wrap #cart_data h2, #cart_wrap #cart_pay h2, #cart_wrap #cart_order h2 {
  margin-top: 0;
}
#cart_wrap #cart_data {
  grid-area: 1/1/2/2;
}
#cart_wrap #cart_data label {
  transition: all 250ms ease-in-out;
  width: 100%;
  display: inline-block;
  margin-bottom: 1rem;
}
#cart_wrap #cart_data label span {
  z-index: 2;
  transition: all 250ms ease-in-out;
  position: absolute;
  opacity: 0.8;
  margin-top: 1rem;
  margin-left: 0.25rem;
}
#cart_wrap #cart_data label select, #cart_wrap #cart_data label input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  -webkit-tap-highlight-color: transparent;
  border-radius: 0;
  font-size: 1rem;
  position: relative;
  z-index: 5;
  transition: all 250ms ease-in-out;
  box-sizing: border-box;
  width: 100%;
  padding: 1rem 0.25rem;
  border: none;
  outline: none;
  background: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.8);
}
#cart_wrap #cart_data label select:focus, #cart_wrap #cart_data label input:focus {
  border-bottom: 2px solid #F16644;
  background-color: #f9f5f3;
}
#cart_wrap #cart_data label select {
  padding: 1rem 0rem;
}
#cart_wrap #cart_data label.error_input span {
  color: var(--c-red);
}
#cart_wrap #cart_data label.error_input input {
  border-color: var(--c-red);
}
#cart_wrap #cart_data label.w-30 {
  width: calc(29.8% - 1rem);
}
#cart_wrap #cart_data label.w-30.m-right {
  margin-right: 1rem;
}
#cart_wrap #cart_data label.w-50 {
  width: calc(49.8% - 1rem);
}
#cart_wrap #cart_data label.w-50.m-right {
  margin-right: 1rem;
}
#cart_wrap #cart_data label.w-70 {
  width: 68%;
}
#cart_wrap #cart_data label.hasvalue select, #cart_wrap #cart_data label.hasvalue input {
  padding: 1.5rem 0.25rem 0.5rem 0.25rem;
  z-index: 1;
}
#cart_wrap #cart_data label.hasvalue select {
  padding: 1.5rem 0.245rem 0.5rem 0rem;
}
#cart_wrap #cart_data label.hasvalue span {
  margin-top: 0;
  transition: all 250ms ease-in-out;
  position: absolute;
}
#cart_wrap #cart_pay {
  position: relative;
  grid-area: 1/3/4/4;
}
#cart_wrap #cart_pay div[checkout-payment] {
  width: calc(50% - 0.5rem);
  float: left;
  border: 2px solid #EEE;
  border-radius: 1rem;
  padding: 1rem;
  text-align: center;
  box-sizing: border-box;
}
#cart_wrap #cart_pay div[checkout-payment] img {
  display: block;
  width: 4rem;
  margin: 0 auto 1rem auto;
}
#cart_wrap #cart_pay div[checkout-payment][checkout-payment="2"] {
  margin-right: 0.5rem;
}
#cart_wrap #cart_pay div[checkout-payment][checkout-payment="1"] {
  margin-left: 0.5rem;
}
#cart_wrap #cart_pay div[checkout-payment]:hover {
  cursor: pointer;
  border-color: var(--c-1-o50);
}
#cart_wrap #cart_pay div[checkout-payment].active, #cart_wrap #cart_pay div[checkout-payment].active:hover {
  color: var(--c-1);
  border-color: var(--c-1);
}
#cart_wrap #cart_pay.type3 div[checkout-payment] {
  width: calc(33.3% - 0.25rem);
}
#cart_wrap #cart_pay.type3 div[checkout-payment][checkout-payment="2"] {
  margin-right: 0.25rem;
}
#cart_wrap #cart_pay.type3 div[checkout-payment][checkout-payment="1"] {
  width: calc(33.3% - 0.5rem);
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
#cart_wrap #cart_pay.type3 div[checkout-payment][checkout-payment="3"] {
  margin-left: 0.25rem;
}
#cart_wrap #cart_agb {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8rem;
  background: #fff;
  padding: 2rem 2rem 2rem 5rem;
  border-radius: 1.5rem;
}
#cart_wrap #cart_agb input[type=checkbox] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: absolute;
  border-radius: 3rem;
  width: 1rem;
  height: 1rem;
  position: absolute;
  background: #e5e5e5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23BBB' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;
  background-size: 1rem;
  left: 2rem;
  padding: 1rem;
  margin-top: 0.25rem;
}
#cart_wrap #cart_agb input[type=checkbox]:hover {
  cursor: pointer;
}
#cart_wrap #cart_agb input[type=checkbox]:not(:checked):hover {
  background: rgba(97, 179, 107, 0.431372549) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23BBB' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;
  background-size: 1rem;
}
#cart_wrap #cart_agb input[type=checkbox]:checked {
  background: #61b36b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;
  background-size: 1rem;
}
#cart_wrap #cart_agb label {
  display: none;
}
#cart_wrap #cart_agb #ordernow {
  color: #fff;
  font-weight: bold;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4rem;
  background: var(--c-1);
  padding: 1rem 2rem;
  border-radius: 1.5rem;
  cursor: pointer;
  transition: background 250ms ease-in-out;
}
#cart_wrap #cart_agb #ordernow:hover {
  background: var(--c-1-darker);
}
#cart_wrap #cart_agb #ordernow.disabled, #cart_wrap #cart_agb #ordernow.disabled:hover {
  opacity: 0.5;
  background: var(--c-1);
}
#cart_wrap #cart_order {
  grid-area: 1/2/4/3;
  background: #fff;
  position: relative;
}
#cart_wrap #cart_order .versandkosten {
  border: 2px dashed var(--c-1);
  border-radius: 1rem;
  padding: 0.5rem;
  color: var(--c-1);
  font-weight: bold;
  position: absolute;
  top: 2rem;
  right: 2rem;
  transform: rotate(4deg);
}
#cart_wrap #cart_order .cart_element {
  position: relative;
  margin-bottom: -3rem;
}
#cart_wrap #cart_order .cart_element #book_prev {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 600px;
  width: 250px;
  margin-bottom: 5rem;
  transform: rotate3d(0, 1, 0, 35deg);
}
#cart_wrap #cart_order .cart_element #book_prev #book_prev_cover {
  border-radius: 2px;
  box-shadow: inset 38px 0 38px -15px rgba(0, 0, 0, 0.5);
  width: 200px;
  height: 300px;
  opacity: 0.1;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-23deg) rotateX(14deg);
  background: no-repeat bottom right -53px #333;
  background-size: cover;
  z-index: 2;
}
#cart_wrap #cart_order .cart_element #book_prev #book_prev_cover.done {
  opacity: 1;
}
#cart_wrap #cart_order .cart_element #book_prev #book_prev_cover::before {
  z-index: 1;
  position: absolute;
  content: " ";
  background-color: blue;
  left: 0;
  top: 1px;
  width: 14px;
  height: 298px;
  transform: translateX(192px) translateZ(-10px) rotateY(90deg);
  background: linear-gradient(90deg, #fff 0%, #ababab 7%, #fff 14%, #ababab 21%, #fff 28%, #ababab 34%, #fff 41%, #ababab 48%, #fff 55%, #ababab 62%, #fff 69%, #ababab 76%, #fff 83%, #ababab 90%, #fff 97%, #fff 100%);
}
#cart_wrap #cart_order .cart_element #book_prev #book_prev_cover::after {
  position: absolute;
  top: 0;
  left: 2px;
  content: " ";
  width: 200px;
  height: 300px;
  transform: translateZ(-14px);
  background: url(../1/images/cover.jpg) no-repeat bottom right #333;
  background-size: cover;
  border-radius: 0 5px 5px 0;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7), 2px 2px 19px rgba(0, 0, 0, 0.7);
}
#cart_wrap #cart_order .cart_element #book_prev {
  position: relative;
  background: url(../img/camera_loader.svg) no-repeat center center rgba(255, 255, 255, 0.9);
}
#cart_wrap #cart_order .cart_element #book_prev .prev_loader_text {
  transform: rotate(4deg);
  width: 100%;
  text-align: center;
  font-weight: bold;
  display: block;
  position: absolute;
  bottom: 15%;
  color: var(--c-1);
}
#cart_wrap #cart_order .cart_element .char {
  text-align: center;
  position: absolute;
  right: 0;
  z-index: 5;
}
#cart_wrap #cart_order .cart_element .char .char_prev {
  display: block;
  height: 8rem;
  width: 8rem;
  border-radius: 100rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
#cart_wrap #cart_order .cart_element .char p {
  margin-top: 0;
  padding: 0;
  font-weight: bold;
}
#cart_wrap #cart_order .cart_element .char p span {
  font-weight: normal;
}
#cart_wrap #cart_order > span {
  display: block;
  text-align: right;
}
#cart_wrap .p19 {
  font-size: 0.75rem;
  opacity: 0.8;
}
#cart_wrap span.price {
  font-size: 2rem;
  z-index: 5;
  position: relative;
}

.btn-wrap {
  text-align: right;
  margin-top: 1rem;
}
.btn-wrap a {
  text-decoration: none;
  border-bottom: none;
  border-radius: 4rem;
  background: #333;
  color: #fff;
  padding: 0.75rem 1.5rem 0.75rem 3rem;
  margin: 0.5rem;
  font-size: 1.5rem;
  position: relative;
}
.btn-wrap a i {
  font-size: 2rem;
  left: 1rem;
  position: absolute;
  margin-top: -0.2rem;
}
.btn-wrap a.cart {
  transition: background 250ms ease-in-out;
  background: var(--c-1);
}
.btn-wrap a.cart > span {
  font-size: 1rem;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 3.5rem;
  color: #333;
}
.btn-wrap a.cart:hover {
  background: var(--c-1-darker);
}
.btn-wrap a.addChar {
  display: none;
}

.error_popup {
  position: fixed;
  top: 4rem;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  background: rgba(210, 0, 0, 0.72);
  padding: 1rem;
  z-index: 500;
  border: 3px solid #d40404;
  font-weight: bold;
  color: #fff;
  border-radius: 5rem;
  width: 33rem;
  text-align: center;
  left: 0;
  right: 0;
  margin: 0 auto;
  box-shadow: 0 0 6rem 5rem #fff;
  transition: top 500ms ease-in-out;
}
.error_popup.scroll-top {
  top: -20rem;
}

@media (width >= 1900px) {
  .body_wrapper {
    overflow-x: visible;
  }
}
@media (1000px < width <= 1600px) {
  #configurator #book_wrapper .book_list .book_carousel {
    grid-auto-columns: 34%;
  }
}
@media (width <= 1000px) {
  .popup {
    padding: 1rem;
    background: rgba(0, 0, 0, 0.7);
  }
  .popup > div {
    border-radius: 0;
    width: 90%;
    padding: 1rem;
  }
  .cropper-container {
    margin-left: -1rem;
  }
  .text_wrapper {
    margin: 0 1rem;
    padding: 1rem 1rem;
    margin-top: 4rem;
  }
  .text_wrapper h2 {
    font-size: 2rem;
  }
  #footer .body_wrapper {
    padding: 1rem 1rem 9rem 1rem;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  #compare .border_blue {
    height: 2rem;
    margin-top: -2rem;
  }
  #compare .border_grey {
    height: 2rem;
    bottom: -2rem;
  }
  #compare h2 {
    font-size: 1.5rem;
    padding: 0 1rem;
  }
  #compare .compareTable {
    width: calc(100% - 2rem);
    margin: 0 1rem;
    margin-bottom: 3rem;
  }
  #review .review_wrapper {
    grid-template-columns: 1fr 1fr;
  }
  #review .review_wrapper .review_item {
    width: 9rem;
    height: 15rem;
    margin-bottom: 4rem;
  }
  #review .review_wrapper .review_item:nth-child(5n), #review .review_wrapper .review_item:nth-child(6n) {
    display: none;
  }
  #review .review_wrapper .review_item .img_main {
    width: 5.5rem;
    height: 5.5rem;
    border: 0.25rem solid var(--c-1);
  }
  #review .review_wrapper .review_item .img_sub {
    top: 5rem;
    width: 4rem;
    height: 4rem;
    border: 0.25rem solid var(--c-1);
  }
  #review .review_wrapper .review_item .quote {
    margin-top: 2rem;
  }
  #review .review_wrapper .review_item h4 {
    bottom: -4.5rem;
  }
  #review .review_wrapper .review_item .bub_bot {
    width: 3rem;
    height: 3rem;
    bottom: -1.5rem;
  }
  #review .review_wrapper .review_item .bub_bot:nth-child(2n) {
    left: 3rem;
  }
  #review .review_wrapper .review_item .bub_bot:nth-child(3n) {
    left: 6rem;
  }
  #story h2 {
    font-size: 1.5rem;
    padding: 2rem 1rem 0 1rem;
  }
  #story .s_wrap {
    display: block;
    padding: 0 1rem;
    width: calc(100% - 2rem);
  }
  #story .s_wrap .text {
    width: 100%;
    font-size: 1rem;
    line-height: 1.5rem;
  }
  #story .s_wrap .text img {
    float: none;
    width: 100%;
  }
  .error_popup {
    width: auto;
    top: 8rem;
    left: 1rem;
    right: 1rem;
  }
  body {
    font-size: 13px;
  }
  header {
    padding: 0;
    height: 3rem;
  }
  header nav {
    display: none;
  }
  header #cheap_german {
    text-align: center;
    padding: 0.5rem;
    font-size: 0.75rem;
    margin-top: 0;
    position: absolute;
    top: 0;
    background-color: #3C9F62;
    color: #fff;
  }
  header > img {
    position: relative;
    margin: 3rem 0 0 1rem;
    z-index: 2;
  }
  #configurator #config_wrapper {
    grid-column: span 8;
    aspect-ratio: 1;
    left: -4rem;
    right: 0;
    width: calc(100% + 8rem);
  }
  #configurator #config_wrapper #char_preview {
    top: 5rem;
    left: 5rem;
    right: 5rem;
    bottom: 5rem;
  }
  #configurator #config_wrapper #char_name {
    bottom: 3.5rem;
  }
  #configurator #config_wrapper #char_name input {
    padding: 0.75rem 3rem;
  }
  #configurator #config_wrapper #char_age {
    bottom: 1.25rem;
  }
  #configurator #book_wrapper {
    padding-left: 0;
    grid-column: span 8;
  }
  #configurator #book_wrapper .book_list {
    border-radius: 4rem;
    max-width: calc(100vw - 2rem);
  }
  #configurator #book_wrapper .book_list .book_wrapper {
    margin-left: 2.5rem;
    margin-right: 2.5rem;
    width: calc(100% - 5rem);
  }
  #configurator #book_wrapper .book_list .book_wrapper .book_carousel {
    grid-auto-columns: 40%;
  }
  #configurator #book_wrapper .book_list .book_wrapper .book .specs span {
    font-size: 0.5rem;
    margin: 0.125rem;
  }
  #configurator #book_wrapper .book_list > h4 {
    z-index: 20;
    font-size: 1.5rem;
    display: inline-block;
    top: -1.5rem;
    left: auto;
    right: auto;
    bottom: auto;
    text-align: center;
    width: auto;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 0.75rem 1.25rem;
    border-radius: 50rem;
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.05);
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
  }
  #configurator #book_wrapper .book_list .prev {
    left: 1rem;
  }
  .btn-wrap a {
    display: block;
    padding: 1.3rem 2rem 1.3rem 4rem;
    font-weight: bold;
  }
  .btn-wrap a i {
    font-size: 2rem;
    margin-top: -0.5rem;
  }
  .btn-wrap a.cart > span {
    text-align: right;
    right: 2rem;
    top: 0.42rem;
    color: #fff;
    opacity: 0.8;
  }
  .btn-wrap a.cart {
    text-align: left;
    font-size: 1rem;
    padding: 1rem 2rem 1rem 4rem;
    z-index: 9;
    position: fixed;
    bottom: 0.5rem;
    left: 1rem;
    right: 1rem;
    box-shadow: 0 0 3rem 3rem #F1EBE5;
  }
  .btn-wrap a.cart i {
    margin-top: -0.42rem;
  }
  .btn-wrap a.cart.disabled {
    opacity: 1;
  }
  #cart_wrap {
    margin-top: 5rem;
    display: block;
    margin-bottom: 16rem;
    /*
        #cart_data label select, #cart_data label input {
            font-size: .75rem;
            padding: .75rem 0.25rem;
        }
        #cart_data label.hasvalue select,  #cart_data label.hasvalue input{
            padding: 1.25rem 0.25rem 0.25rem 0.25rem
        }
        #cart_data label span {
            font-size: .75rem;
            margin-top: .75rem;
        }
    */
  }
  #cart_wrap > div {
    margin-bottom: 1rem;
  }
  #cart_wrap #cart_agb #ordernow {
    z-index: 9;
    position: fixed;
    bottom: 0.5rem;
    left: 1rem;
    right: 1rem;
    box-shadow: 0 0 3rem 3rem #F1EBE5;
  }
  #cart_wrap #cart_agb #ordernow.disabled {
    opacity: 1;
  }
  #cart_wrap #cart_order .cart_element .char .char_prev {
    height: 6rem;
    width: 6rem;
  }
  #cart_wrap span.price {
    margin-top: 1rem;
    font-weight: bold;
    font-size: 1.5rem;
  }
  #cart_wrap #cart_order .versandkosten {
    right: 1rem;
  }
}/*# sourceMappingURL=style.css.map */