@font-face {
  font-family: "Noto Serif";
  font-weight: normal;
  font-style: normal;
  src: url("fonts/NotoSerif-Regular.ttf");
}

@font-face {
  font-family: "Noto Serif";
  font-weight: bold;
  font-style: normal;
  src: url("fonts/NotoSerif-Bold.ttf");

}

@font-face {
  font-family: "Noto Serif";
  font-weight: normal;
  font-style: italic;
  src: url("fonts/NotoSerif-Italic.ttf");
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: "Noto Serif";
}

@media (width >= 1000px) {
  html {
    --h1-size: 50px;
    --h2-size: 24px;
    --h3-size: 21px;
    --edge-padding: 2em;
    --section-max-width: 88em;
  }

  div#header {
    display: flex;
    flex-direction: row;
    background: #c8c8c8;
    justify-content: right;
    position: sticky;
    top: 0;
    height: calc(3.5 * var(--h3-size));
    font-size: var(--h3-size);
    padding: 0 var(--edge-padding);
  }

  div#header div {
    flex-grow: 1;
  }

  div#header :visited {
    color: #0000ee;
  }

  #header ul.tabs {
    display: flex;
    flex-direction: row;
    padding: 0;
  }

  #header ul.tabs li {
    margin-right: 2em;
    list-style: none;
  }

  div#titelbild {
    width: 100%;
    height: calc(100dvh - 3.5 * var(--h3-size));
    background-image: url("photos/fruehling.jpg");
    text-align: center;
    background-size: cover;
  }

  div#titelbild h1 {
    padding-top: calc(2 * var(--h3-size));
  }

  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .section img {
    padding: 16px;
    max-width: calc(100% - var(--edge-padding));
    max-height: fit-content;
    aspect-ratio: auto;
  }

}

@media (width < 1000px) {
  html {
    --h1-size: 22pt;
    --h2-size: 14pt;
    --h3-size: 12pt;
    font-size: 10pt;
    --edge-padding: 1ex;
    --section-max-width: calc(100dvw - 2 * var(--edge-padding));
  }

  div#header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background: #c8c8c8;
    justify-content: right;
    position: fixed;
    top: auto;
    bottom: 0;
    width: 100%;
    /* height: calc(3.5 * var(--h3-size)); */
    font-size: var(--h2-size);
    padding: 0 var(--edge-padding);
  }

  div#header p {
    grid-column-start: 1;
    grid-column-end: 4;
    text-align: center;
    margin: 1ex auto;
  }

  div#header div {
    display: none;
  }

  div#header :visited {
    color: #0000ee;
  }

  #header ul.tabs {
    grid-column-start: 1;
    grid-column-end: 4;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 0;
    margin: 0 auto 1ex auto;
  }

  #header ul.tabs li {
    margin-right: 1ex;
    list-style: none;
  }

  div#titelbild {
    width: 100%;
    height: 100dvh;
    text-align: center;
  }

  div#titelbild h1 {
    display: block;
  }

  div#titelbild h2 {
    width: 100%;
    height: calc(100dvh - 8 * var(--h3-size) - var(--h1-size));
    background-image: url("photos/fruehling.jpg");
    background-size: cover;
    padding-top: calc(2 * var(--h3-size));
  }

  div#content {
    padding-bottom: calc(7 * var(--h3-size));
  }

  div#content h2 {
    width: 100%;
    text-align: center;
  }

  .container {
    display: block;
  }

  .section img {
    padding: 0;
    max-width: 100%;
    max-height: fit-content;
    aspect-ratio: auto;
  }

}

.section {
  display: flex;
  flex-direction: row;
  max-width: var(--section-max-width);
  margin-left: auto;
  margin-right: auto;
  padding: 0 1em;
}

.container div {
  align-content: center;
}

div.footer {
  border-top: 1px solid #ccc;
  padding-top: 1ex;
}

.container div.footer {
  grid-column-start: 1;
  grid-column-end: 3;
  border-top: 1px solid #ccc;
  padding-top: 1ex;
}

.container img {
  padding: var(--edge-padding);
  max-width: 800;
  max-height: fit-content;
  aspect-ratio: auto;
}

h2 {
  font-size: var(--h2-size);
  font-weight: 300;
  margin: var(--h2-size) 0;
}

h3 {
  font-size: var(--h3-size);
  font-weight: 260;
  margin: var(--h3-size) 0 0 0;
}

p {
  line-height: 1.5;
}