:root {
  --layout-max-width: 800pt;
  --layout-header-height: 60pt;
  --layout-padding: 20pt;
}


body {
  margin: 0;
  padding: 0;
}

#app {
  width: calc(100% - var(--layout-padding) * 2);
  max-width: var(--layout-max-width);
  margin: 0 auto;
  display: grid;
  gap: var(--layout-padding);
  grid-template-columns: 200pt auto;
}

#app > * {
  padding-top: var(--layout-padding);
}

/*
 *
 */

#header {
  background-color: var(--color-primary);
}

#header .content {
  width: calc(100% - var(--layout-padding) * 2);
  max-width: var(--layout-max-width);
  margin: 0 auto;
  color: #ffffff;
  box-sizing: border-box;
  height: var(--layout-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#header img {
  height: 55pt;
  min-height: 62%;
  margin-left: 8pt;
}

@media (max-width: 600px){
  #header #fau-logo{
    content: url("/static/img/FAU_Wortmarke.svg");
  }
}

#header .links {
  display: flex;
  gap: 10pt;
}

#header .mobile {
  display: none
}

#header .mobile a svg {
  color: currentColor;
  height: 1.2em;
  transform: translateY(10%);
  margin: -.1em;
}

#header .primary {
  background-color: var(--color-white);
  padding: 10pt 16pt;
  margin-left: 10pt;
  border-radius: 999pt;
  text-decoration: none;
  font-weight: 700;
  font-size: 12pt;
  color: var(--color-primary);
  cursor: pointer;
  transition: opacity .1s ease;
}

#header .primary:hover {
  opacity: .8;
}

#header .secondary {
  padding: 10pt;
  text-decoration: none;
  font-weight: 700;
  font-size: 12pt;
  color: var(--color-white);
  cursor: pointer;
  transition: opacity .1s ease;
}

#header .secondary:hover {
  opacity: .8;
}

/*
 *
 */

#sidebar {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--color-border);
  padding-right: var(--layout-padding);
}

#sidebar a {
  text-decoration: none;
  color: #444444;
  font-weight: 600;
  font-size: 14pt;
  padding: 8pt 12pt;
  border-radius: 4pt;
  margin-bottom: 2pt;
  transition:
    background-color .1s ease,
    color .1s ease;
}

#sidebar a[active=true] {
  background-color: var(--color-lighter);
  color: var(--color-primary);
}

#sidebar a:hover {
  background-color: var(--color-light);
  color: var(--color-primary);
}

/*
 *
 */

#content {
  min-height: calc(100vh - var(--layout-header-height));
  box-sizing: border-box;
  padding-bottom: 50pt;
  /* border: 1px solid #00000033; */
}

/*
 *
 */

#footer {
  background-color: var(--color-primary);
}

#footer .content {
  width: calc(100% - var(--layout-padding) * 2);
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: 20pt 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--layout-padding);
}

#footer * {
  display: block;
  font-style: normal;
  font-size: 10pt;
  color: #ffffff;
}

#footer p {
  margin: 0;
  line-height: 1.5em;
}

#footer a {
  display: inline;
}


/*************************************************************************/

/*
 * Mobile
 */

@media screen and (max-width: 830px) {
  #app {
    grid-template-columns: auto;
  }

  #header .links {
    display: none;
  }
  #header .mobile {
    display: block;
  }
  #header img {
    max-width: 60vw;
    margin-left: 0;
  }

  #sidebar {
    display: none;
  }

  #footer .content {
    grid-template-columns: 1fr;
  }

  /*
   * Navigation
   */

  body.navopen {
    overflow: hidden;
  }

  body.navopen #header .links {
    display: flex;
    position: absolute;
    top: var(--layout-header-height);
    left: 0;
    width: 100%;
    background-color: var(--color-primary);
    height: var(--layout-header-height);
    border-top: 1px solid var(--color-white);
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--layout-padding);
    box-sizing: border-box;
  }

  body.navopen #sidebar {
    display: flex;
    position: absolute;
    top: calc(var(--layout-header-height) * 2);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--layout-header-height) * 2);
    background-color: var(--color-white);
    padding: var(--layout-padding);
    box-sizing: border-box;
    overflow-x: auto;
    z-index: 999;
  }
  body.navopen #sidebar a {
    padding: 12pt 14pt;
  }

  body.navopen #app::after {
    content: '';
    display: block;
    position: absolute;
    top: 100vh;
    left: 0;
    width: 100%;
    height: 40vh;
    background-color: var(--color-white);
  }
}