/*
 * b-bookt.de – the one stylesheet for all pages.
 *
 * Rebuilds the look of the WordPress theme "Zeitreise" (Elmastudio, GPL)
 * for the pages of this site. Sizes and breakpoints are taken from
 * that theme so the pages look the same as before.
 *
 * Breakpoints (min-width): 767px tablet, 1023px small desktop,
 * 1160px desktop, 1260px wide desktop, 2130px very wide screens.
 *
 * Sections:
 *   1. Fonts
 *   2. Base
 *   3. Header (inner pages)
 *   4. Front page and project overview
 *   5. Project pages (/portfolio/...)
 *   6. Text pages (Impressum, Datenschutz)
 *   7. Footer
 *   8. Fade-in effects
 */


/* 1. Fonts
   Martel Sans, self-hosted (SIL Open Font License, see ../fonts/OFL.txt).
   Each weight comes in two files: "latin" covers German and Western
   European text, "latin-ext" adds Central/Eastern European letters. The
   browser only downloads a file when the page uses one of its characters.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: "Martel Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/martel-sans-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Martel Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/martel-sans-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Martel Sans";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/martel-sans-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Martel Sans";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/martel-sans-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Martel Sans";
  font-style: normal;
  font-weight: 800;
  src: url("../fonts/martel-sans-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Martel Sans";
  font-style: normal;
  font-weight: 800;
  src: url("../fonts/martel-sans-800-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Martel Sans";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/martel-sans-900-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Martel Sans";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/martel-sans-900-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* 2. Base
   ------------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Body text is 18px on phones and 21px from tablet width up. The line
   height stays at the browser default ("normal"); paragraphs in the
   content areas set their own. */
body {
  margin: 0;
  font-family: "Martel Sans", sans-serif;
  font-size: 18px;
  color: #000;
  background: #fff;
}

h1,
h2,
h3,
p {
  margin: 0;
  font-size: 100%;
}

h1,
h2,
h3 {
  font-weight: bold;
  -webkit-hyphens: auto;
  hyphens: auto;
}

p {
  margin-bottom: 43px;
}

a {
  color: #000;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
}

::selection {
  background: #c2ebff;
}

@media (min-width: 767px) {
  body {
    font-size: 21px;
  }
}

/* Text that search engines and screen readers read but the page does not
   show, such as the heading of the project overview. It is clipped to
   nothing; display: none would hide it from them as well. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* 3. Header (inner pages): "b-bookt" with "Telefonakquise" next to it
   ------------------------------------------------------------------------ */

.site-header {
  overflow: hidden;
  padding: 20px 100px 0 20px;
}

.site-title {
  float: left;
  position: relative;
  z-index: 1;
  margin: 0;
  font-weight: bold;
  line-height: 1.3;
}

.site-title a {
  text-decoration: none;
}

.site-title a:hover {
  text-decoration: underline;
}

@media (min-width: 1023px) {
  .site-header {
    padding: 30px 100px 0 60px;
  }
}

@media (min-width: 2130px) {
  .site-header {
    max-width: 2010px;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
  }
}


/* 4. Front page and project overview (/portfolio/)
   ------------------------------------------------------------------------ */

/* Header picture with the site name on top. The picture file follows the
   screen size so phones do not download the large version. */
.hero {
  position: relative;
  height: 320px;
  background-image: url("../images/header-janet-1280.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.hero-branding {
  position: absolute;
  top: 125px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: center;
  text-align: center;
}

.hero-link {
  display: block;
  text-decoration: none;
}

.hero-link:hover {
  text-decoration: none;
}

.hero-description {
  margin: 0 0 43px;
}

@media (min-width: 767px), (min-resolution: 2.5dppx) {
  .hero {
    background-image: url("../images/header-janet-1920.jpg");
  }
}

@media (min-width: 1440px), (min-width: 767px) and (min-resolution: 1.5dppx) {
  .hero {
    background-image: url("../images/header-janet-2560.jpg");
  }
}

@media (min-width: 767px) {
  .hero {
    height: 100vh;
  }

  .hero-branding {
    top: 100px;
    bottom: 100px;
    left: 60px;
    right: 60px;
    align-items: center;
  }

  .hero-title {
    font-size: 90px;
    font-weight: 900;
    line-height: 1.1;
  }

  .hero-description {
    margin: -18px 0 0;
    font-size: 40px;
  }
}

/* Introduction below the header picture */
.intro {
  padding: 60px 20px 105px;
  text-align: center;
}

.intro p {
  max-width: 900px;
  margin: 0 auto 43px;
  font-weight: bold;
  line-height: 1.6;
}

.intro p:last-child {
  margin-bottom: 0;
}

/* Small emoji pictures in the contact lines (📞 ✉ 📍), sized to the text */
img.emoji {
  display: inline;
  width: 1em;
  height: 1em;
  margin: 0 0.07em;
  vertical-align: -0.1em;
}

@media (min-width: 767px) {
  .intro {
    padding-top: 205px;
    padding-bottom: 205px;
  }
}

@media (min-width: 1023px) {
  .intro {
    padding-left: 60px;
    padding-right: 60px;
  }
}

/* The two project teasers: picture plus title. On wide screens they sit
   side by side, the first with the picture on the left, the second with
   the picture on the right. */
.portfolio {
  padding-bottom: 105px;
}

.teasers {
  padding: 0 20px;
}

.teaser-image {
  display: block;
}

.teaser-image img {
  display: block;
}

.teaser-title {
  padding: 35px 0 105px;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.4;
}

.teaser-title a {
  text-decoration: none;
}

.teaser-title a:hover,
.teaser-image:hover + .teaser-title {
  text-decoration: underline;
}

/* Closing text below the teasers. It has no side padding on phones, as on
   the original site. */
.outro {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  font-weight: bold;
}

.outro p:last-child {
  margin-bottom: 0;
}

@media (min-width: 767px) {
  .portfolio {
    padding-bottom: 205px;
  }

  .teaser-title {
    font-size: 40px;
  }

  .outro {
    padding-top: 90px;
  }
}

@media (min-width: 1023px) {
  .teasers {
    padding: 0;
  }

  .teaser {
    display: flex;
    align-items: center;
  }

  .teaser:nth-child(even) {
    flex-direction: row-reverse;
  }

  .teaser-image {
    width: 50%;
  }

  .teaser-title {
    width: 50%;
    padding: 0 8.33333333333333%;
  }

  .outro {
    padding-top: 205px;
  }
}


/* Project overview (/portfolio/): the same teasers as on the front page,
   without side padding from tablet width up */
.project-list {
  padding-bottom: 210px;
}

@media (min-width: 767px) {
  .project-list .teasers {
    padding: 0;
  }
}


/* 5. Project pages: title, picture and text
   On desktop the title stays in view in the left half while the picture
   and text scroll by in the right half.
   ------------------------------------------------------------------------ */

.project {
  padding: 0 20px;
}

.project-header {
  padding-bottom: 40px;
}

.project-title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.4;
}

.project-image {
  margin: 0 0 35px;
  line-height: 0;
}

.project-text {
  padding: 0 20px 1.6em;
}

.project-text p {
  line-height: 1.6;
}

.project-text p:last-child {
  margin-bottom: 0;
}

@media (min-width: 767px) {
  .project-title {
    font-size: 40px;
  }

  .project-image {
    margin-bottom: 55px;
  }
}

@media (min-width: 1023px) {
  .project {
    padding: 0 60px;
  }

  .project-text {
    padding-left: 60px;
    padding-right: 60px;
  }
}

@media (min-width: 1160px) {
  .project {
    display: flex;
    align-items: flex-start;
    padding: 0;
  }

  .project-header {
    position: sticky;
    top: 0;
    width: 50%;
    padding: 0 8.333% 5px;
    text-align: center;
  }

  .project-title {
    padding-top: 110px;
  }

  .project-body {
    width: 50%;
  }

  .project-text {
    max-width: 1005px;
    padding-right: 120px;
  }
}

@media (min-width: 2130px) {
  .project-text {
    padding-left: 0;
    padding-right: 0;
  }
}


/* 6. Text pages (Impressum, Datenschutz): title in a narrow left column,
   text in a wide right column on desktop.
   ------------------------------------------------------------------------ */

.text-page {
  padding: 0 20px 105px;
}

.text-page-header {
  padding-bottom: 35px;
}

.text-page-title {
  line-height: 1.6;
}

.text-page-content h2 {
  padding: 12px 0;
  line-height: 1.6;
}

.text-page-content p {
  line-height: 1.6;
}

.text-page-content p:last-child {
  margin-bottom: 0;
}

/* Impressum: the "Verweise" block follows an empty line and is set with
   the browser's default line height, as on the original site. */
.text-page-content .verweise {
  padding-top: 1.6em;
  line-height: normal;
}

@media (min-width: 767px) {
  .text-page {
    padding-bottom: 205px;
  }
}

@media (min-width: 1023px) {
  .text-page {
    padding-left: 60px;
    padding-right: 60px;
  }
}

@media (min-width: 1260px) {
  .text-page {
    display: flex;
    align-items: flex-start;
  }

  .text-page-header {
    width: 34.84848484848485%;
    padding: 0 4.54545454545455% 0 0;
  }

  .text-page-content {
    width: 65.15151515151515%;
  }
}

@media (min-width: 2130px) {
  .text-page {
    max-width: 2010px;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
  }
}


/* 7. Footer
   ------------------------------------------------------------------------ */

.site-footer {
  padding: 0 20px 50px;
  text-align: center;
}

.site-footer p {
  margin: 0;
}

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

@media (min-width: 1023px) {
  .site-footer {
    padding-left: 60px;
    padding-right: 60px;
  }
}

@media (min-width: 2130px) {
  .site-footer {
    max-width: 2010px;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
  }
}


/* 8. Fade-in effects
   Every page fades in from white after loading. On desktop, blocks marked
   with class="fade-in" also fade in when they scroll into view; fade-in.js
   adds the "fade-ready" class that switches this on. Visitors who ask
   their system for reduced motion get neither.
   ------------------------------------------------------------------------ */

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

body {
  animation: fade-in 1.5s ease-in-out 0.5s both;
}

@media (min-width: 1160px) {
  .fade-ready .fade-in {
    opacity: 0;
  }
}

/* Outside the media query on purpose: resizing the window across 1160px
   must not restart a fade that has already run. */
.fade-ready .fade-in.is-visible {
  opacity: 1;
  animation: fade-in 1s both;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  body {
    animation: none;
  }
}