/* Font: "League Spartan"
 * License: SIL Open Font License 1.1 (https://sil.org)
 *
 * https://fonts.google.com/specimen/League+Spartan?preview.script=Latn
 * https://gwfh.mranftl.com/fonts/league-spartan?subsets=latin
 */
@font-face {
  font-display: swap;
  font-family: "League Spartan";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/league-spartan-v15-latin_latin-ext-300.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "League Spartan";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/league-spartan-v15-latin_latin-ext-500.woff2") format("woff2");
}

:root {
  --page-width: 1080px;
  --page-border-gap: 2rem;
  --font-size-normal: 17px;
  --font-size-small: 14px;
  --font-size-menuitem: 15px;
  --font-weight-normal: 300;
  --font-weight-bold: 500;
  --section-gap: 10rem;
  --subsect-gap: 6rem;
  --text-color: #222;
  --border-color: #aaa;
  --footer-bgnd: #dde5e7;
  --hover-bgnd: #f0f0f0;
}

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

.grid > * {
  min-width: 0;
}

:focus:not(:focus-visible) {
  outline: none;
}

body {
  margin: 0;
  padding: 0;
  font-family: "League Spartan", sans-serif;
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-normal);
  line-height: 1.2;
  background: white;
  color: var(--text-color);
}

h1 {
  width: 100%;
  font-size: 50px;
  font-weight: var(--font-weight-normal);
  text-align: left;
  border-bottom: solid 1px var(--border-color);
  margin: 5rem 0 2rem 0;
}
h1.noborder {
  margin-bottom: 0.5rem;
  border-bottom: none;
}

h2 {
  font-size: 46px;
  font-weight: var(--font-weight-normal);
  letter-spacing: 0.08rem;
  margin-bottom: 1rem;
  border-bottom: solid 1px var(--border-color);
}
h2.noborder {
  margin-bottom: 0;
  border-bottom: none;
}
h2.small {
  font-size: 30px;
}

div.subsect-header {
  margin-top: var(--subsect-gap);
  padding: 1rem 0 1rem 0;
  border-top: solid 1px var(--border-color);
}

b {
  font-weight: var(--font-weight-bold);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

a {
  display: inline-block;
}

dialog:focus {
  outline: none;
}

header a,
main a,
.footer-grid a,
dialog a {
  text-decoration: none;
  color: inherit;
}

main a:hover,
.footer-grid a:hover {
  text-decoration: underline;
}

a:active {
  color: inherit;
  background: none;
  outline: none;
}

div.download {
  display: inline-block;
  margin-top: 6rem;
  padding: 0.5rem 0.5rem 0.5rem 5px;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
}

.uppercase-header {
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.18rem;
  text-transform: uppercase;
  padding: 0;
  margin-bottom: 0;
  border-bottom: none;
}
.uppercase-header.small {
  font-size: var(--font-size-small);
}

.flushtop {
  margin-top: 0;
}

.flushbottom {
  margin-bottom: 0;
}

.img-link {
  margin-bottom: 0.5rem;
}

.img-link img {
  padding-bottom: 0.5rem;
}

.error404 {
  font-size: 24px;
  text-align: center;
  color: red;
  margin: 6rem;
}

.red {
  color: red;
}

/* icon & logo images */

img.right-arrow-icon {
  display: inline-block;
  width: 40px;
  height: 28px;
}

img.download-icon {
  margin: 0;
  width: 28px;
  height: 28px;
}

/* header */

header {
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin-bottom: 7rem;
}

header .logo {
  padding-top: 1.5rem;
  padding-left: 2rem;
}

header .logo a img {
  width: 150px;
  min-width: 150px;
}

/* footer */

footer {
  background: var(--footer-bgnd);
  margin-top: var(--subsect-gap);
  padding: 4rem var(--page-border-gap) 2rem var(--page-border-gap);
  font-size: var(--font-size-small);
}

.footer-grid .area-logo { grid-area: logo; }
.footer-grid .area-efzw { grid-area: efzw; }
.footer-grid .area-buw { grid-area: buw; }
.footer-grid .area-copyright { grid-area: copyright; }
.footer-grid .area-impressum { grid-area: impressum; }
.footer-grid .area-datenschutz { grid-area: datenschutz; }

.footer-grid {
  display: grid;
  margin-right: 6rem;
  text-align: left;
  gap: 4rem 1rem;
  grid-template-columns: 1fr auto auto;
  grid-template-areas:
    "logo efzw buw"
    "copyright impressum datenschutz";
}

.footer-grid img {
  width: 140px;
  min-width: 140px;
  margin: 0 0 1rem 0;
}

/* menu */

.menu-control {
  padding: 2rem 3rem 2rem 0;
}

.menu-control a.menu-control-anchor img {
  width: 44px;
  height: 44px;
}

dialog.menu {
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  min-width: 50dvw;
  max-width: 65rem;
  max-height: none;
  height: 100dvh;
  margin: 0;
  padding: 0;
  border: none;
  border-left: solid 1px var(--border-color);
  overflow-y: auto;
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
dialog.menu::backdrop {
  background: transparent;
}
dialog.menu.open {
  transform: translateX(0);
}

dialog.menu div {
  border-bottom: solid 1px var(--border-color);
}
dialog.menu div:first-child {
  text-align: right;
}

dialog.menu a:not(.menu-control-anchor) {
  display: block;
  font-size: var(--font-size-menuitem);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.18rem;
  text-transform: uppercase;
  padding: 1.2rem 4rem 1.2rem 2.5rem;
}
dialog.menu a:not(.menu-control-anchor):hover {
  background-color: var(--hover-bgnd);
}

/* sections */

section.hero {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--page-border-gap);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

section.main {
  max-width: var(--page-width);
  margin: 0 auto var(--section-gap) auto;
  padding: 0 var(--page-border-gap);
}

/* txttxt-, txtimg- and imgtxt-grid */

.txttxt-grid .area-txt,
.txtimg-grid .area-txt,
.imgtxt-grid .area-txt {
  grid-area: txt;
}
.txttxt-grid .area-img,
.txtimg-grid .area-img,
.imgtxt-grid .area-img {
  grid-area: img;
}

.txttxt-grid,
.txtimg-grid,
.imgtxt-grid {
  display: grid;
  text-align: left;
  gap: 2rem;
  grid-template-columns: 1fr 1fr;
}

.txtimg-grid {
  grid-template-areas: "txt img";
}
.imgtxt-grid {
  grid-template-areas: "img txt";
}

.imgtxt-grid .area-img img {
  margin: 0;
}

.txttxt-grid.subsection,
.txtimg-grid.subsection,
.imgtxt-grid.subsection {
  margin: var(--subsect-gap) 0;
  padding-top: 1.5rem;
  border-top: solid 1px #aaa;
}

/* toc-grid (table of contents) */

.toc-grid {
  display: grid;
  text-align: left;
  margin-top: 1rem;
  gap: 1rem;
  grid-template-columns: 1fr 15fr;
}
.toc-grid > :nth-child(odd) {
  white-space: nowrap;
}

/* home */

div.intro-sketch {
  margin: 0 2rem;
}
div.intro-sketch img {
  width: clamp(32rem, 100%, 100%);
}

.topic-grid {
  display: grid;
  text-align: left;
  grid-template-columns: 1fr minmax(0, var(--page-width)) 1fr;
}

.topic-grid .row {
  display: grid;
  text-decoration: none;
  grid-template-columns: minmax(0, 1fr) 5fr minmax(0, 1fr);
  grid-column: 2;
}

.topic-grid .header {
  margin: var(--subsect-gap) 0;
  font-size: 19px;
  line-height: 1.32;
}

.topic-grid .item {
  font-size: var(--font-size-menuitem);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.18rem;
  text-transform: uppercase;
  border-top: solid 1px var(--border-color);
}
.topic-grid .item:last-child {
  border-bottom: solid 1px var(--border-color);
}
.topic-grid .item:hover {
  background-color: var(--hover-bgnd);
}

.topic-grid .item .left,
.topic-grid .item .right {
  padding: 1.5rem 0;
}

.news-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr;
}
.news-grid .card {
  border-top: solid 1px var(--border-color);
  border-bottom: solid 1px var(--border-color);
  padding: 1.5rem 0 1.5rem 0;
}

.biografie-txt-grid .area-txt {
  grid-area: txt;
}
.biografie-txt-grid {
  display: grid;
  padding-top: 1rem;
  grid-template-columns: 50% auto minmax(0, 8rem);
  grid-template-areas: ". txt .";
}

.card img,
.biografie-section img,
.img-link img {
  transition: filter 200ms ease;
}

.card:hover img,
.card:focus-within img,
.biografie-section:hover img,
.biografie-section:focus-within img,
.img-link:hover img,
.img-link:focus-within img {
  filter: brightness(0.90);
}

/* gesamtausgabe */

.gesamtausgabe-grid .area-toc {
  grid-area: toc;
}
.gesamtausgabe-grid .area-img {
  grid-area: img;
}
.gesamtausgabe-grid {
  display: grid;
  margin: 1rem 0;
  text-align: left;
  gap: 2rem;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "toc img";
}

.gesamtausgabe-text p {
  max-width: 50rem;
}

/* aktuelles */

.box-antike {
  background-color: #FBF7F3;
  padding: 1rem 1rem;
  margin-top: 1rem;
  text-align: left;
}
.box-antike .img-container {
  text-align: center;
}

/* biografie */

.biografie-grid .area-head {
  grid-area: head;
}
.biografie-grid .area-body {
  grid-area: body;
}

.biografie-grid {
  display: grid;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 2rem var(--page-border-gap);
  gap: 0 3.75rem;
  grid-template-columns: 1fr 1fr;
}

.biografie-grid.head-first {
  grid-template-areas: "head body";
}
.biografie-grid.body-first {
  grid-template-areas: "body head";
}

.biografie-grid .area-head img {
  margin: 1rem 0 0 0;
}

.biografie-grid .biografie-5-spacer {
  margin-top: 16rem;
}

.biografie-paper {
  background-image: url("../img/biografie/Fink_nostalgisch_2_4.png");
  background-size: cover;
  background-repeat: no-repeat;
}

/* kontakt */

.kontakt-grid .area-schnell { grid-area: schnell; }
.kontakt-grid .area-nielsen { grid-area: nielsen; }
.kontakt-grid .area-efzw { grid-area: efzw; }
.kontakt-grid .area-buw { grid-area: buw; }
.kontakt-grid .area-itp { grid-area: itp; }

.kontakt-grid {
  display: grid;
  text-align: left;
  gap: 8rem 1rem;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas:
    "schnell nielsen . efzw"
    ". . buw itp";
}

.kontakt-grid img {
  margin: 0;
}

/* media rules */

@media (max-width: 800px) {
  .biografie-grid.head-first,
  .biografie-grid.body-first {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "body";
  }
  .biografie-grid .biografie-5-spacer {
    margin-top: 4rem;
  }

  .kontakt-grid {
    gap: 4rem;
    grid-template-columns: 1fr;
    grid-template-areas:
      "schnell"
      "nielsen"
      "efzw"
      "buw"
      "itp";
  }
}

@media (max-width: 640px) {
  .footer-grid {
    gap: 1rem 3rem;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "logo logo"
      "efzw efzw"
      "buw buw"
      "impressum datenschutz"
      "copyright copyright";
  }

  .txtimg-grid,
  .imgtxt-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "img"
      "txt";
  }
  .txttxt-grid {
    grid-template-columns: 1fr;
  }

  .news-grid {
    gap: 0.5rem;
    grid-template-columns: 1fr;
  }
  .news-grid .card:not(:first-child) {
    border-top: none;
  }
  .news-grid .card img {
    width: 100%;
  }

  .gesamtausgabe-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "img"
      "toc";
  }
}