/*! normalize-plus.css v8.0.1 | MIT License | vincentleinhos.com/normalize-plus */*,:before,:after{margin:0;padding:0;border:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-size:100%}html{line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;overflow-y:scroll;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}address{font-style:normal}hr{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}ul{list-style:none}a{outline:0;background-color:transparent;-webkit-text-decoration-skip:objects}b,strong{font-weight:bolder}small{font-size:80%}abbr[title],dfn[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}code,kbd,samp,pre{font-family:monospace,monospace}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img,video{max-width:100%;height:auto!important}audio{width:100%}audio,canvas,iframe,img,svg,video{vertical-align:middle}svg{fill:currentColor}svg:not(:root){overflow:hidden}table{border-collapse:collapse;border-spacing:0}input{-webkit-border-radius:0;border-radius:0}input[type=checkbox],input[type=radio]{cursor:pointer}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}button,input,optgroup,select,textarea{font:inherit;color:inherit;line-height:inherit}button:focus,input:focus,optgroup:focus,select:focus,textarea:focus{outline:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;cursor:pointer}[disabled]{color:#777;cursor:default}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}textarea{overflow:auto;resize:vertical}progress{vertical-align:baseline}legend{display:table;max-width:100%;white-space:normal;color:inherit}details,main{display:block}summary{display:list-item}h1,h2,h3,h4,h5,h6,p{text-rendering:optimizeLegibility}template,[hidden]{display:none}a,area,button,input,label,select,summary,textarea,[tabindex]{-ms-touch-action:manipulation;touch-action:manipulation}


/* Universal styles for all media
========================================================================== */

/* document
========================================================================== */

html {
  height: 100%;
  overflow-x: hidden;
  line-height: 1.32;
}
body {
  font-family: Calibri, "Calibri", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: calc(19.25px + 0.25vw);

  color: #000;
  background-color: #fdfefc;
  min-height: 100%;
}

h1, h2, h3, b {
  font-weight: 700;
}
h1, h2, h3 {
  display: table; /* yup, really */
}
mark {
  background-color: transparent;
  color: #000;
}
#dessert-statement mark,
#parallax-rl-text mark {
  box-shadow: inset 0 calc(-7.5px - 0.125vw) 0 0 #d5ed9d;
}


/* intro-header // all media
========================================================================== */

#intro-header {
  display: none;
}


/* fade-in-up // all media
========================================================================== */

#intro-header, #book {
  opacity: 0;

    /* transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) */
  -webkit-transform: translateY(10px);
  -ms-transform: translateY(10px);
  transform: translateY(10px);

  transition: opacity 1s cubic-bezier(0.5, 0, 0, 1), transform 1s cubic-bezier(0.5, 0, 0, 1);
}


/* laid-table grid // all media
========================================================================== */

.laid-table {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr; /*minmax(300px, 1fr) 600px minmax(300px, 1fr)*/
  grid-template-rows: 15vh 1fr; /* 300px / 1,5 */
  grid-template-areas: "helpera dessert helperb" "fork book knife";
  grid-row-gap: 2vw;
  grid-column-gap: 3vw;

  width: calc(100vw - 6vw);
  height: calc(100vh - 6vw - 67px);

  margin-top: 3vw;
  margin-left: 3vw;
  margin-right: 3vw;
  margin-bottom: calc(3vw + 67px);
}

#dessertspoon-svg,
#fork-svg,
#knife-svg {
  fill: #FFF; /* alternative: #e9e9ea */
  stroke: #000;
  stroke-width: 2.4px;
  stroke-linecap: butt;
  stroke-linejoin: bevel;
}

/* center vertical and horizontal */
#dessert {
  display: flex;
  align-items: center;
  justify-content: center;
}

#dessertspoon-svg {
  /*width: calc((75vh - 3vw - 67px) / 2); /* copied from `.fork` and `.knife` and lowered `vh` at the beginning */

  /*width: calc(25vh - 15vh - 6vw + 25vw);
  max-width: 100%;
  min-width: 100px;
  height: 80%;*/
  width: calc(50px + 45%);

  opacity: 0;

  transition: opacity 1.725s ease-out 1.725s;
}
#dessert-statement {
  position: absolute;

  /*font-size: 24px;*/
  letter-spacing: 0.2px;
  word-spacing: 0.4px;
  white-space: nowrap;

  opacity: 0;

  transition: opacity 0.575s ease-in 0.215625s;
}

.grid-helper-a { grid-area: helpera; }
.grid-helper-b { grid-area: helperb; }
#dessert {
  grid-area: dessert;
  /*background: lightseagreen;*/
}
.fork {
  grid-area: fork;
  /*background: lightcoral;*/
}
#book {
  grid-area: book;
  /*background: lightsalmon;*/
}
.knife {
  grid-area: knife;
  /*background: lightgreen;*/
}

/* center vertical and horizontal */
.fork, .book-wrapper, .knife-positioning {
  display: flex;
  align-items: center;
  justify-content: center;
}

#fork-svg, #knife-svg {
  /*height: 380px!important;
  width: 100%;*/

  /*max-height: calc(25vh - 15vh - 6vw + 25vw);
  min-height: 100px;*/
  height: calc(20vh - 15vh - 6vw + 20vw + 50px); /* (1) `vh` === (2) `vw` */
  width: auto;
}


/* book cover // all media
========================================================================== */

#book {
  width: 100%;
  height: 100%;

  background: transparent;
}
.book-wrapper {
  width: 100%;
  height: 100%;
}
#book-front {
  width: auto; /*statt problematisch davor: width: 100%;*/
  max-height: 100%;

  border: 2.4px solid #c5c5c5;
}
#book-cover-back,
#book-spine {
  display: none;
}


/* napkin // all media
========================================================================== */

#napkin-wrapper {
  width: 100%;
  height: 100%;
}

.napkin-wrapper-helper {
  width: 100%;
  height: 100%;

  position: relative;
  z-index: 12;
}

.knife-positioning {
  width: 100%;
  height: 100%;
}

.napkin-pointer {
  display: none;
}


/* book-link // all media
========================================================================== */

#book-external-link,
#modal button,
#prev.possible,
#next.possible {
  transition: background-color 0.08s ease-in;
}

#book-external-link {
  position: fixed;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #000;
  text-decoration: none;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1.6px;
  line-height: 1;
  cursor: pointer;

  left: 0;
  width: 100%;

  background-color: #d5ed9d;
  border-top: 3px solid #000;
  bottom: 0;
}
#book-external-link .spacing {
  padding-left: 10px;
  margin-right: 15px;
}
#book-external-link .icon-amazon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;

  width: 0.9960714285714285em;

  color: #000;
  font-size: 21.5px;
}


/* about-book // all media
========================================================================== */

.about-book {
  /*display: grid;
  grid-template-columns: minmax(300px, 1fr) 600px minmax(300px, 1fr);
  grid-template-rows: auto;
  grid-template-areas: "abe abe helperc";*/

  /*width: 100%;*/
  /*height: calc(100vh - 3vw);*/

  margin-top: 6vw;
  margin-left: calc(12.5px + 3vw);
  margin-right: calc(16px + 3vw);
  margin-bottom: 6vw;

  overflow: hidden;
  /*outline: 1px dotted red;*/
}

main h2,
#modal h2 {
  letter-spacing: 0.2px;
  word-spacing: 0.4px;

  border-bottom-style: solid;
  border-bottom-color: #d5ed9d;
  border-bottom-width: 10px;
  border-bottom-width: calc(8px + 0.125vw);

  margin-bottom: calc(10px + 0.5vw);
}
/* increase `margin` for not-text-`div` slightly */
.about-book-preview h2 {
  margin-bottom: calc(12.5px + 0.75vw); /* from `h2` `margin-bottom` */
}
main h2 {
  font-size: 32px;
  font-size: calc(23px + 0.5vw);
}
main h2::after {
  content: ".";
}
main #about-book h2,
.about-book-preview {
  margin-top: calc(56px + 3vw);
}

main h3 {
  /*font-size: calc(19px + 0.25vw);
  font-size: calc(26px + 0.25vw);*/
  /*font-size: calc(19px + 0.25vw);*/
  /* inherit default `body` font-size, yep */

  /*border-bottom: 7px solid #d5ed9d;*/
  border-bottom-style: solid;
  border-bottom-color: #d5ed9d;
  border-bottom-width: 6px;
  border-bottom-width: calc(6px + 0.125vw);
}


main #flexing {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 2vw;
  grid-column-gap: 3vw;
}
/*main #flexing > li {
  outline: 1px dotted red;
}*/
main #flexing li ul {
  margin-top: 1vw;
}

main #flexing li ul li {
  line-height: 1.4;
}


/* book-block // all media
========================================================================== */

#about-book-container {
  /*width: 400px;
  height: 300px;*/
  position: relative;

  width: 100%;

  z-index: 5;
  -webkit-perspective: 2636px;
  perspective: 2636px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.page {
  position: absolute;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;

  width: 50%;
  height: 100%;
  left: 50%;
  -webkit-transform-origin: left center;
  transform-origin: left center;
}

#first,
#first .back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

#first {
  z-index: 7;
}
#second {
  z-index: 8;
  transition: transform 0.9s ease-in-out;
}
/*#third .content {
  width: 400px;
}*/
#fourth {
  z-index: 6;
}
#first, #second, #fourth {
  border: 2.4px solid #c5c5c5;
  border-left-width: 0.6px;
}
#first img, #second img, #third img, #fourth img {
  width: 100%;
}

.page > div,
.outer,
.content,
.inner {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.page > div {
  width: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.back {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

.outer {
  width: 100%;
  overflow: hidden;
    z-index: 10;
}

/* problematic class: `.content` */
.content {
  width: 200%;
  /*background: red;*/
  background: transparent;
}

.front .content {
  left: -100%;
}

/* controls */
#prev, #next {
  position: absolute;
  width: 50%;
  height: 100%;
  z-index: 10;
}
#prev.possible:hover, #next.possible:hover {
  background: rgba(0,0,0,0.05);
  cursor: pointer;
}
#prev {
  top: 0;
  left: 0;
}
#next {
  top: 0;
  left: 50%;
}


/* about-author // all media
========================================================================== */

.about-author {
  /*display: grid;
  grid-template-columns: minmax(300px, 1fr) 600px minmax(300px, 1fr);
  grid-template-rows: auto;
  grid-template-areas: "aai aai helperd";*/

  height: calc(100vh - 200px - 1.5vw - 1.5vw); /* same `height` as napkin */
  width: 100vw;

  position: relative;
}



/* Stuff is gonna get stretchy, so maintain some order and crop media */
/* object-fit: cover; */


/*.items {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.items__inner {
  position: relative;
  width: 100%;
  max-width: 1250px;
  height: 100%;
  background: transparent;
}
.items__layer {
  background: url("../img/parallax_bg.jpg") no-repeat center center fixed;
  background-size: cover;

  height: 150%;
  width: 150%;
  overflow: hidden;
}*/

#about-author-parallax {
  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  width: 100%;
  height: 100%;
}

#parallax-bg {
  transform: scale(1.05);
  width: 100%;
  height: 100%;

  position: relative;
  top: 0;
  left: 0;
}

#parallax-rl {
  width: auto!important;

  height: 97%!important;
  max-height: 97%!important;

  position: absolute;
  bottom: 0;
  left: 26vw;
}

#parallax-rl-text {
  position: absolute;
  left: 48vw;
  top: 22%;

  width: 18vw;
  min-width: 270px;

  background: #fdfefc;
  padding: 1vw;

    letter-spacing: 0.05px;
    word-spacing: 0.05px;
}


/* footer
========================================================================== */

footer {
  display: grid;
  grid-template-columns: 1fr;

  width: 100%;

  padding-left: calc(22.5px + 0.5vw);
  padding-right: calc(22.5px + 0.5vw);
  padding-bottom: calc(34px + 0.5vw + 67px);

  background: #000;
}
footer .credit,
footer .legal {
  padding-top: calc(22.5px + 0.5vw);

  width: 100%;
  max-width: 76ch;
  margin: 0 auto;

  color: #FFF;
  font-size: calc(15px + 0.125vw);
}

footer small a {
  text-decoration: none;
}
footer small a:hover {
  text-decoration: underline;
}
footer a {
  color: #FFF;
}
footer p > a {
  text-decoration: underline;
}
footer p + p {
  margin-top: calc(15px + 0.125vw);
}

footer #sol {
  display: block;

  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxODYuOTQgMTQuMTkiPjxnIGRhdGEtbmFtZT0iTGF5ZXIgMiI+PHRleHQgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxMC4zKSIgZm9udC1zaXplPSIxMiIgZmlsbD0iI2ZmZiIgZm9udC1mYW1pbHk9IkFyaWFsTVQsQXJpYWwsc2Fucy1zZXJpZiIgdGV4dC1kZWNvcmF0aW9uPSJ1bmRlcmxpbmUiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+a29udGFrdEBhbGxlcy1hdXNzZXItbmFjaHRpc2NoLmRlPC90ZXh0PjwvZz48L3N2Zz4=");
  background-color: transparent;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: left top;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  color: transparent;
  line-height: 1.09;

  min-height: 16px;
  width: 35ch;

  cursor: pointer;
}

/* modal
========================================================================== */

#modal {
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

	display: flex;
	align-items: center;
	justify-content: center;

  pointer-events: none;

  z-index: 20;

  opacity: 0;
  transition: opacity 0.12s ease-in;
}
#modal.show {
  opacity: 1;
  pointer-events: auto;
}
#modal #overlay {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background: rgba(0,0,0,0.5);
}
#modal-content {
  position: relative;

	width: 50%;
	max-width: 690px;
  min-width: 290px;

  background: #fdfefc;
  padding: calc(22.5px + 0.5vw);
  font-size: 80%;
}

#modal-content h2 {
  /*font-size: calc((23px + 0.5vw) * 0.8);*/
  font-size: calc(18.4px + 0.4vw); /* `main h2` multiplied by 0.8 */
}
#modal-content p + p {
  margin-top: 12px;
}
#modal-content a {
  color: #000;
}
#modal-content .buttons {
  margin-top: 36px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
#modal-content button {
  color: #000;
  font-weight: 700;

  text-align: center;

  letter-spacing: 1.6px;


  border: 2.4px solid #000;

  padding: 16px;
}
button#confirm {
  background-color: rgba(213, 237, 157, 0.8);
  margin-left: 10px;
  min-width: 40%;
}
button#confirm:hover {
  background-color: #d5ed9d;
}
button#cancel {
  background-color: rgba(199, 201, 193, 0.8);
  width: auto;
}
button#cancel:hover {
  background-color: #c7c9c1;
}


/* production
========================================================================== */

img,
svg,
#book-spine,
#book-external-link {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


/* media queries
========================================================================== */

/* mobile phone */
/*@media only screen and (min-width: 320px) {

}*/

/* tablet portrait */
@media only screen and (min-width: 720px) {
  #fork-svg {
    -webkit-transform: translateX(-100vw);
    -ms-transform: translateX(-100vw);
    transform: translateX(-100vw);
  }
  #knife-svg {
    -webkit-transform: translateX(100vw);
    -ms-transform: translateX(100vw);
    transform: translateX(100vw);
  }
  #fork-svg, #knife-svg {
    transition: transform 1.725s ease-out;
  }

  #about-book-container {
    width: 80%;
  }

  main #flexing {
    grid-template-columns: 1fr 1fr;
  }
}

/* tablet landscape */
@media only screen and (min-width: 1024px) {
  footer {
    grid-template-columns: 1fr 1fr;

    padding-right: 0;
    padding-bottom: calc(34px + 0.5vw);
  }
  footer .credit {
    width: 76ch;
  }
  footer .legal {
    width: auto;
    margin: 0;
  }
}

/* desktop */
@media only screen and (min-width: 1260px) {
  #intro-header {
    position: absolute;

    left: calc(3vw + 2vw); /* top / 1,5 */ /* ODER: 3vw, wäre symmetrischer */
    top: 15vh; /* 200px width from grid-column */

    display: block;
  }
  #intro-header h1,
  #intro-header h2,
  #intro-header h3 {
    font-weight: 700;
    letter-spacing: 0.2px;
    word-spacing: 0.4px;
    white-space: nowrap;
    font-size: 40px;
    font-size: calc(21px + 1vw);
  }
  #intro-header mark {
    /*box-shadow: inset 0 -16px 0 0 #d5ed9d; */
    box-shadow: inset 0 calc(-11px - 0.25vw) 0 0 #d5ed9d; /* original: #fff67f */
  }

  .laid-table {
    grid-template-columns: 35fr 30fr 35fr; /*minmax(300px, 1fr) 600px minmax(300px, 1fr)*/

    height: calc(100vh - 6vw);
    margin: 3vw;
  }

  #book-cover-back,
  #book-spine {
    display: block;
  }
  #book:hover .book-wrapper,
  #book.book-turn .book-wrapper {
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  #book {
    -webkit-perspective: 2636px;
    perspective: 2636px;

    cursor: default;
  }
  .book-wrapper {
    position: relative;

    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  
    transition: transform 0.7s ease-out;
  }
  #book-front {
    position: absolute;
    left: 0;
    top: 0;
  
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  #book-spine {
    width: 30px;
    height: 100%;
  
    position: absolute;
    left: 0;
    top: 0;
  
    background: #FFF;
  
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  
    /* translateX: Half of the width of `#book-spine`, than negative */
    -webkit-transform: rotateY(-80deg) translateZ(12px) translateX(-17px);
    -ms-transform: rotateY(-80deg) translateZ(12px) translateX(-17px);
    transform: rotateY(-80deg) translateZ(12px) translateX(-17px);
  }
  #book-spine .title {
    /* rotate text and center vertically */
    position: absolute;
    top: 30%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    -ms-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    transform: translateX(-50%) translateY(-50%) rotate(-90deg);
  
    white-space: nowrap;
    font-size: 16px;
    font-size: 1vw;
  }
  #book-cover-back {
    width: 100%;
    height: 100%;
  
    position: absolute;
    left: 0;
    top: 0;
  
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  
    -webkit-transform: rotateY(180deg) translateZ(30px);
    -ms-transform: rotateY(180deg) translateZ(30px);
    transform: rotateY(180deg) translateZ(30px);

    background-image: url("../img/book-cover-back.min.png");
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
  }
  #book-spine,
  #book-cover-back {
    border: 2.4px solid #c5c5c5;
  }


  #napkin-wrapper {
    margin: 0 auto;
    display: block;
    width: calc(32px + 300px);
  }
  .napkin-pointer {
    width: calc(32px + 300px);
    height: calc(100vh - 15vh - 2vw - 6vw);

    position: fixed;

    display: block;

    pointer-events: none;
  }
  .napkin-plain, .napkin-full {
    position: absolute;

    width: 100%;
    height: 100%;

    background-size: cover;
    background-position: center 0%;
    background-repeat: no-repeat;

    transition: opacity 0.3s ease;
  }
  .napkin-pointer .napkin-plain {
    background-image: url("../img/napkin_plain.min.png");
  }
  .napkin-pointer .napkin-full {
    background-image: url("../img/napkin_full.min.png");
  }
  #napkin-wrapper.no-point .napkin-pointer {
    pointer-events: none;
    cursor: default;
  }
  #napkin-wrapper.no-point .napkin-plain {
    opacity: 1;
  }
  #napkin-wrapper.no-point .napkin-full {
    opacity: 0;
  }
  #napkin-wrapper.point .napkin-pointer {
    pointer-events: auto;
    cursor: pointer;
  }
  #napkin-wrapper.point .napkin-plain {
    opacity: 0;
  }
  #napkin-wrapper.point .napkin-full {
    opacity: 1;
  }

  .knife-positioning {
    position: absolute;
  }

  #book-external-link {
    /* unset values */
    left: auto;
    width: auto;

    /* change values */
    background-color: rgba(213, 237, 157, 0.8);
    border: 2.4px solid #000;
    bottom: 4.5vw; /* 3 * 1.5vw */

    /* set new values */
    margin-left: 24px;
    min-width: 284px;
  }
  #napkin-wrapper.point:hover #book-external-link,
  #book-external-link:hover {
    background-color: rgba(255, 153, 0, 0.8);
  }

  .about-book {
    width: 65vw;
  }
  main #about-book p {
    width: 76ch;
  }
  main #flexing {
    grid-template-columns: 1fr 1fr 1fr;
  }
}