html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0; }

.page-wrapper {
  min-height: 100%;
  text-align: left;
  display: flex;
  flex-direction: column; }

.ui.color1.button, .ui.color1.buttons .button {
  background-color: #4375bc;
  color: #fff;
  text-shadow: none;
  background-image: none; }

header {
  display: flex;
  flex-direction: row;
  gap: 2em;
  flex-wrap: nowrap;
  justify-content: space-between;
  background-image: linear-gradient(70deg, #bac7d9, #bac7d9, #e0dfdf, #fffbd5, #fffbd5);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  border-bottom: 3px solid #4375bc; }
  header div {
    width: 100%; }
  header .zentral {
    display: flex;
    flex-direction: column; }
    header .zentral .name {
      text-align: center; }
      header .zentral .name h1 {
        margin: 0;
        font-size: 24px; }
      header .zentral .name h2 {
        margin: 0;
        font-size: 16px; }
  header nav {
    display: flex;
    flex-direction: row;
    gap: 2em;
    align-items: center;
    justify-content: center;
    text-align: center; }
    header nav .wappenliste {
      display: flex;
      flex-direction: row;
      gap: .1em;
      align-items: center;
      justify-content: center;
      height: 3em;
      width: 100%; }
      header nav .wappenliste .wappen {
        display: flex;
        flex-direction: row;
        gap: 2px;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%; }
        header nav .wappenliste .wappen > img {
          height: 100%; }
    header nav .logout a {
      color: black; }
  header nav, header .logo {
    display: flex;
    flex-direction: row;
    padding: .2em 1em;
    height: 100%; }
    header nav > img, header .logo > img {
      padding: 10px;
      max-height: 8em;
      max-width: 100%; }
  header .logo.one {
    justify-content: flex-start; }
  header .logo.two {
    justify-content: flex-end; }
  @media (max-width: 500px) {
    header .logo {
      display: none; } }
main {
  background: #8dacd8;
  flex-grow: 1; }

main.login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 6em;
  padding-right: 1em;
  padding-left: 1em;
  padding-bottom: 2em;
  background: #8dacd8; }
  main.login .einleitung {
    padding: 1em;
    background: #e6e6e6;
    border: 1px solid rgba(67, 117, 188, 0.8); }
    main.login .einleitung .textwrap {
      margin-left: 10%;
      margin-right: 10%; }
  main.login .centerbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; }
  main.login .login-form {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 2px solid #4285f4;
    border-radius: 5px;
    padding: 1em;
    width: 500px; }
    main.login .login-form .schulnummerlogin .submit-button {
      display: flex; }
  main.login .einfuhrung {
    margin: 2em 10%;
    font-size: 18px;
    color: #1d3b67;
    text-align: center; }
    main.login .einfuhrung a {
      color: #122746; }
      main.login .einfuhrung a:hover {
        color: #27487a; }
  main.login .gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: .2em; }
    main.login .gallery .screenshot {
      width: 330px;
      border: solid 1px #adadad;
      border-radius: 2px; }
      main.login .gallery .screenshot img {
        width: 100%;
        height: 100%; }

main.uebersicht .einfuhrung {
  margin: 2em 10%;
  font-size: 14px;
  color: #1d3b67;
  text-align: center; }
  main.uebersicht .einfuhrung a {
    color: #122746; }
    main.uebersicht .einfuhrung a:hover {
      color: #27487a; }

main.uebersicht .angebote {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1em;
  height: 100%;
  justify-content: center;
  align-items: center;
  margin: .5em;
  padding-top: 1em;
  padding-bottom: 2em; }
  main.uebersicht .angebote .angebot {
    display: flex;
    flex-direction: column;
    padding: 1em;
    background: #e6e6e6;
    width: 35em;
    height: 40em;
    border: 1px solid rgba(67, 117, 188, 0.8);
    border-radius: 5px;
    box-shadow: rgba(50, 50, 93, 0.25) 0 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; }
    main.uebersicht .angebote .angebot.disabled {
      opacity: .5; }
    main.uebersicht .angebote .angebot.disabled .submit-button {
      pointer-events: none; }
    main.uebersicht .angebote .angebot h2 {
      display: none;
      font-size: 1.5em;
      color: rgba(0, 0, 0, 0.7);
      text-align: center; }
    main.uebersicht .angebote .angebot .logo {
      width: 100%;
      text-align: center; }
      main.uebersicht .angebote .angebot .logo img {
        height: 80px;
        max-width: 300px; }
    main.uebersicht .angebote .angebot .beschreibung {
      flex-grow: 1;
      text-align: justify;
      overflow: hidden;
      margin-bottom: 1em; }
      main.uebersicht .angebote .angebot .beschreibung .zielgruppe, main.uebersicht .angebote .angebot .beschreibung .zeitraum {
        text-align: center; }
    main.uebersicht .angebote .angebot .gallery {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      width: 100%;
      gap: .2em; }
      main.uebersicht .angebote .angebot .gallery .screenshot {
        width: 130px;
        height: 100px;
        border: solid 1px #adadad;
        border-radius: 2px; }
        main.uebersicht .angebote .angebot .gallery .screenshot img {
          width: 100%;
          height: 100%; }
    main.uebersicht .angebote .angebot .submit-button {
      margin-top: 1em; }

footer {
  grid-area: footer;
  background: #4375bc;
  border-top: 3px solid #29528d;
  background-color: #4375bc;
  opacity: 1;
  background-size: 4px 4px;
  background-image: repeating-linear-gradient(45deg, #6891ca 0, #6891ca 0.4px, #4375bc 0, #4375bc 50%);
  height: 7em; }
  footer nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2em; }
    footer nav a {
      display: block;
      color: whitesmoke; }
      footer nav a:hover {
        color: white; }

/*# sourceMappingURL=portaluebersicht.css.map */