/* MUSEOMODERNO */

@font-face {
  font-family: "MuseoModerno";
  src: url("MuseoModerno-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/* GRUNDEINSTELLUNGEN */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #ffffff;
  color: #111111;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.55;
}

main {
  width: 100%;
}


/* HERO */

.hero {
  min-height: 90vh;
  max-width: 850px;
  margin: 0 auto;
  padding: 100px 30px 80px;
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.scribble {
  margin-bottom: 25px;
  line-height: 0;
}

.scribble img {
  display: block;
  width: 410px;
  max-width: 90vw;
  height: auto;
}

.journal-title {
  border: 3px solid #111;
  padding: 10px 30px 14px;
  margin-bottom: 35px;
  line-height: 0.85;
  font-family: "MuseoModerno", Arial, sans-serif;
}

.bfrb {
  display: block;
  font-size: clamp(65px, 11vw, 115px);
  font-weight: 500;
  letter-spacing: -5px;
}

.journal {
  display: block;
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 400;
}

.hero h1 {
  font-family: "MuseoModerno", Arial, sans-serif;
  font-size: clamp(23px, 4vw, 34px);
  font-weight: 600;
  line-height: 1.2;
  max-width: 700px;
  margin: 0 0 25px;
}

.intro {
  max-width: 610px;
  font-size: 19px;
  margin: 0 0 35px;
}


/* HEADER-BUTTON */

.button,
.button:link,
.button:visited {
  display: inline-block;
  background: #111;
  color: white;
  text-decoration: none;
  padding: 15px 27px;
  border: 2px solid #111;
  font-weight: bold;
  font-size: 17px;
}

.button:hover {
  background: white;
  color: #111;
}

.small {
  font-size: 14px;
  margin-top: 18px;
}


/* BFRB INFO */

.bfrb-info {
  max-width: 700px;
  margin: 0 auto 120px;
  padding: 30px;
  border-top: 2px solid #111;
  border-bottom: 2px solid #111;
}

.bfrb-info h2 {
  margin-top: 0;
  font-family: "MuseoModerno", Arial, sans-serif;
  font-size: 27px;
  font-weight: 600;
}

.bfrb-info p {
  margin-bottom: 0;
}


/* INHALT */

.content {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 30px 120px;
}

.section-title {
  border: 2px solid #111;
  padding: 7px 15px;
  font-family: "MuseoModerno", Arial, sans-serif;
  font-weight: 600;
  text-align: center;
  font-size: 21px;
  margin-bottom: 45px;
}

.content h2 {
  font-family: "MuseoModerno", Arial, sans-serif;
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 30px;
}

.content p {
  font-size: 18px;
  margin-bottom: 24px;
}


/* HINWEISKASTEN */

.note {
  border: 2px solid #111;
  padding: 25px 28px;
  margin: 50px 0 40px;
}

.note h3 {
  font-family: "MuseoModerno", Arial, sans-serif;
  font-size: 25px;
  font-weight: 600;
  margin: 0 0 15px;
}

.note p {
  margin-bottom: 12px;
}

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

.freedom {
  font-size: 16px !important;
}


/* DOWNLOAD */

.downloads {
  max-width: 1050px;
  margin: 0 auto;
  padding: 0 30px 80px;
  scroll-margin-top: 35px;
}

.download-intro {
  max-width: 680px;
  margin: 0 auto 30px;
  text-align: center;
  font-size: 17px;
}

.download-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.download-card {
  border: 2px solid #111;
  padding: 25px 32px;
}

.download-card > h2 {
  margin: 0 0 12px;
  font-family: "MuseoModerno", Arial, sans-serif;
  font-size: 27px;
  font-weight: 600;
}

.download-card > p {
  margin: 0 0 20px;
}

.download-option {
  border-top: 1px solid #111;
  padding-top: 18px;
  margin-top: 18px;
}

.download-option h3 {
  margin: 0 0 5px;
  font-family: "MuseoModerno", Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
}

.download-option p {
  font-size: 15px;
  margin: 0 0 10px;
}


/* DOWNLOAD-BUTTONS */

.download-button,
.download-button:link,
.download-button:visited {
  display: inline-block;
  margin-top: 4px;
  padding: 15px 27px;
  background: #111;
  color: white;
  border: 2px solid #111;
  font-weight: bold;
  font-size: 17px;
  text-decoration: none;
}

.download-button:hover {
  background: white;
  color: #111;
}

.download-button.disabled {
  opacity: 0.45;
}


/* DRUCKANLEITUNG-LINK */

.print-link {
  display: inline-block;
  margin-top: 12px !important;
  margin-left: 2px;
  font-size: 14px !important;
  color: #111;
  text-decoration: none;
  border-bottom: 1px solid #111;
}

.print-link:link,
.print-link:visited {
  color: #111;
}

.print-link:hover {
  border-bottom: 2px solid #111;
}


/* DRUCKANLEITUNG */

.print-instructions {
  margin-top: 55px;
  padding-top: 35px;
  border-top: 2px solid #111;
  scroll-margin-top: 35px;
}

.print-instructions summary {
  cursor: pointer;
  font-family: "MuseoModerno", Arial, sans-serif;
  font-size: 22px;
  font-weight: 600;
  list-style-position: outside;
}

.print-instructions > p {
  margin-top: 25px;
  font-size: 16px;
}

.print-instructions ol {
  margin-top: 20px;
  padding-left: 40px;
}

.print-instructions li {
  margin-bottom: 5px;
}

.print-instructions .tip {
  margin-top: 20px;
}


/* HANDY */

@media (max-width: 600px) {

  .hero {
    padding: 70px 20px 60px;
  }

  .journal-title {
    padding: 10px 20px 13px;
  }

  .bfrb {
    letter-spacing: -3px;
  }

  .intro {
    font-size: 17px;
  }

  .content {
    padding-left: 20px;
    padding-right: 20px;
  }

  .bfrb-info {
    margin-left: 20px;
    margin-right: 20px;
  }

  .downloads {
    padding-left: 20px;
    padding-right: 20px;
  }

  .download-grid {
    grid-template-columns: 1fr;
  }

  .print-instructions {
    margin-top: 45px;
  }

}