* {
  --col-darkblue: rgb(58, 68, 157);
  --col-blue: rgb(27, 142, 211);
  --col-lightblue: rgb(190, 220, 246);
  --col-gray: rgb(119, 120, 119);

  --content-width: 1227px;
  --content-height: 920px;
  --sidebar-width: 240px;

  --menu-fontsize: 0.9rem;
  --menu-padding-left: 25px;
}
/* basic hat niedrigste priorität */

@layer basic, utilities, components;

@layer components {
  body.home {
    .maincontent {
      font-size: 1.8rem;
      color: #fff;
      padding-block-start: 50px;
      padding-inline-start: 95px;
      .topline {
        font-size: 2rem;
      }
      span.lines {
        margin-block-start: 32px;
        margin-inline-start: 265px;
        display: block;
        line-height: 2.8rem;
      }
    }

    .content {
      background-image: url(../images/bg_home.jpg);
    }
  }
  h1 {
    font-weight: 400;
    margin-top: 0;
  }
  body.links {
    .maincontent {
      h2 {
        margin-block-end: 0;
      }
      h2 + p {
        margin-block-start: 8px;
      }
    }
  }
  .maincontent {
    padding: 30px 60px;
  }

  .maincontent.spalten2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 30px;
    margin-top: 20px;
    grid-template-rows: min-content 1fr;
  }
  .maincontent.spalten2.datenschutz {
    margin-bottom: 0;
    padding-bottom: 0;
    min-height: 650px;
  }
  .content {
    width: var(--content-width);
    height: var(--content-height);
    background-image: url(../images/bg.jpg);
    display: flex;
    flex-direction: row;
  }
  aside {
    width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    a.active,
    a:hover {
      font-weight: 700;
    }
  }
  header {
    display: flex;
    justify-content: center;
    padding-block-start: 40px;
    img {
      width: 450px;
    }
  }
  .footer {
    margin-top: auto;
    font-size: var(--menu-fontsize);
    color: var(--col-darkblue);
    padding-inline-start: var(--menu-padding-left);
    height: 96px;

    a {
      color: var(--col-darkblue);
    }
  }
  main {
    width: calc(100% - var(--sidebar-width));
    display: flex;
    flex-direction: column;
    footer {
      margin-top: auto;
    }
  }
  footer {
    color: #000;
    font-size: 0.8rem;

    margin-top: auto;
    padding-inline-start: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block-end: 25px;
    img {
      width: 170px;
      margin-inline-end: 15px;
    }
  }
  .logo {
    margin: 44px 0 0 23px;
    img {
      width: 83px;
    }
  }
  menu {
    font-size: var(--menu-fontsize);
    padding-inline-start: var(--menu-padding-left);
    padding-block-start: 14px;
    color: var(--col-darkblue);
    a {
      color: var(--col-darkblue);
    }
  }
  ul.level1 {
    li {
      margin-block-start: 30px;
    }
  }
  ul.level2 {
    li {
      margin-block-start: 12px;
    }
  }
  .team {
    display: flex;
    flex-direction: column;
    gap: 0;
    p {
      margin-block: 5px;
    }
    h2 + p {
      margin-block-start: 20px;
    }
    h2 {
      margin-block: 0;
      text-align: center;
    }
    .afterh2 {
      text-align: center;
      font-size: 17px;
      color: #000;
      font-weight: 400;
    }
    .bottom {
      margin-top: auto;

      text-align: center;
    }
  }
}

@layer utilities {
  .spalte_2 {
    padding-block-start: 0px;
  }
}

@layer basic {
  body {
    background-color: #fff;
    display: flex;
    justify-content: center;
    /* align-items: center; */
    min-height: 100vh;
    font-family: "Roboto", sans-serif;
    margin: 0;
    padding: 50px 0 0 0;
  }
  a {
    text-decoration: none;
  }
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  menu {
    margin: 0;
    padding: 0;
  }
  h1,
  h2 {
    color: var(--col-darkblue);
    font-weight: 400;
  }
}

.footer a {
  line-height: 1.6em;
}
h1.team {
  margin: 30px 0 0 60px;
}

.shift {
  margin-inline-start: 30px;
}
.pfeil {
  align-self: end;
}