/* Partials – loaded first so their rules are available below */
@import "fonts.css"; /* @font-face declarations */
@import "modal.css"; /* modal overlay & navigation styles */
@import "footer.css"; /* footer styles */
@import "header.css"; /* header styles */

/* CSS variables: defined once here, reused everywhere via var(--name) */
:root {
  --font-family-mono: pt_mono, monospace;
  --font-weight-mono: 400;
  --font-style-mono: normal;
  --font-size-mono: 11px;

  --font-family-gopher: "gopher", sans-serif;
  --font-family-jaquard: "jacquard_24", system-ui;
  --font-family-sans: "gta_std_light", sans-serif;

  --h1-margin-top: 30px;

  --color-rose: #f9efec;
  --color-dark: #464646;
  --color-green: #1ec7bd;

  --modal-z: 1000;

  --page-padding-x: 1.5rem;

  --icon-open: url(../images/Menu_bar_open.svg);
  --icon-closed: url(../images/Menu_bar_closed.svg);

  --luchslogo-top: calc(
    var(--h1-margin-top) + var(--font-size-large) + var(--body-padding-top)
  );
  --modal-close-top: var(--luchslogo-top);
  --luchslogo-sidelength: 50px;

  --header-toggle-right: calc(
    var(--page-padding-x) + var(--luchslogo-sidelength) + 0px
  );
  --header-toggle-sidelength: 50px;

  --body-padding-top: 0px;

  --font-size-xlarge: 28px;
  --font-size-large: 20px;
  --font-size-body: 15px;
  --font-size-small: 10px;
}

@media only screen and (min-width: 601px) {
  :root {
    --page-padding-x: 2rem;

    --body-padding-top: 50px;

    --font-size-xlarge: 36px;
    --font-size-large: 28px;
    --font-size-body: 17px;
    --font-size-small: 11px;
  }
}

@media only screen and (min-width: 993px) {
  :root {
    --page-padding-x: 15vw;
  }
}

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

/* Style Seite */

body {
  max-width: calc(100vw - calc(2 * var(--page-padding-x)));
  padding-top: var(--body-padding-top);
  padding-bottom: 50px;
  margin: 0 auto;

  font-family: var(--font-family-sans);
  color: var(--color-dark);
  background-color: var(--color-rose);

  /* Break long unbreakable strings (e.g. URLs) so they wrap instead of
     overflowing their container and forcing horizontal scroll. */
  overflow-wrap: anywhere;
}

a {
  color: currentColor;
}

/**
 * For headlines, we do not style the tags (h1, h2, etc.) directly,
 * but rather use CSS variables to define their styles. This allows us to separate
 * the headline styles from the HTML structure/meaning.
 */

.h1 {
  font-family: var(--font-family-gopher);
  font-weight: 700;
  font-style: normal;
  font-size: var(--font-size-large);
  margin-top: var(--h1-margin-top);
}

.h1.no-margin-top {
  margin-top: 0;
}

.h1 a {
  text-decoration: none;
}

.h2 {
  font-family: var(--font-family-gopher);
  font-weight: 400;
  font-style: normal;
  font-size: var(--font-size-large);
}

.h2 a {
  text-decoration: none;
}

.jaquard {
  font-family: var(--font-family-jaquard);
  font-weight: 400;
  font-style: normal;
  font-size: calc( var(--font-size-xlarge) + 40%);
 
}

p {
  font-size: var(--font-size-body);
  line-height: 1.65;
  margin-top: var(--font-size-body);
}

strong {
  font-family: var(--font-family-gopher);
  font-weight: 700;
}

.mono {
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-mono);
  font-style: var(--font-style-mono);
  font-size: var(--font-size-small);
}

.home {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 3rem;
}

.posters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  grid-gap: 1rem;
  list-style: none;
}

.books {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--h1-margin-top);
}

.books a {
  text-decoration: none;
}

.responsive-image {
  margin: 0;
  background-size: cover;
  background-position: center;
}

.responsive-image img {
  display: block;
  width: 100%;
}

.poster {
  display: grid;
  grid-gap: 3rem;
  grid-template-columns: 1fr;
  list-style: none;
}

@media only screen and (min-width: 601px) {
  .poster {
    grid-template-columns: 3fr 7fr;
  }
}

.zweispaltig {
  display: grid;
  grid-gap: 3rem;
  grid-template-columns: 1fr;
  list-style: none;
}

@media only screen and (min-width: 601px) {
  .zweispaltig {
    grid-template-columns: auto auto; 
  }
}


ul {
  list-style-type: none;
}

.sitetitle {
  text-wrap: balance;
  max-width: 38vw;
  max-width: calc(
    100% - var(--luchslogo-sidelength) - var(--header-toggle-sidelength) - 0.5em
  );
}

@media only screen and (max-width: 600px) {
  .home {
    display: block;
  }

  section {
    margin-bottom: 100px;
  }
}

@media only screen and (min-width: 993px) {
  .sitetitle {
    max-width: 38vw;
  }
}

.book-text {
  --book-date: attr(data-date);
}

.mono-inline-date,
.book-text p:first-of-type:before {
  display: inline-block;
  margin-right: 0.5em;

  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-mono);
  font-style: var(--font-style-mono);
  font-size: var(--font-size-small);

  transform: translateY(-0.05em);
}

.book-text p:first-of-type:before {
  content: var(--book-date);
}

.home-mobile-nav,
.home-mobile-nav-input {
  display: none;
}

.home-section-title {
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-mono);
  font-style: var(--font-style-mono);
  font-size: var(--font-size-small);

  margin-bottom: var(--h1-margin-top);
}

@media only screen and (max-width: 600px) {
  .home-section-title,
  .home-section {
    display: none;
  }

  .home-mobile-nav {
    display: flex;
    gap: 1rem;
    margin-bottom: var(--h1-margin-top);
  }
}

.display-block {
  display: block;
}