.rot {
  color: #AF3E27; }

.blau {
  color: #333E99; }

.gruen {
  color: #328443; }

.grosseschrift {
  font-size: 20px; }

.kleineschrift {
  font-size: 10px; }

.fett {
  font-weight: bold; }

.kursiv {
  font-style: italic; }

* {
  box-sizing: border-box; }

.row::after {
  content: "";
  clear: both;
  display: table;
  padding: 10px 0; }

[class*="col-"] {
  float: left; }

.col-1 {
  width: 8.33%; }

.col-2 {
  width: 16.66%; }

.col-3 {
  width: 25%; }

.col-4 {
  width: 33.33%; }

.col-5 {
  width: 41.66%; }

.col-6 {
  width: 50%; }

.col-7 {
  width: 58.33%; }

.col-8 {
  width: 66.66%; }

.col-9 {
  width: 75%; }

.col-10 {
  width: 83.33%; }

.col-11 {
  width: 91.66%; }

.col-12 {
  width: 100%; }

@media only screen and (min-device-width: 319px) and (max-device-width: 667px) {
  .col-8 {
    width: 100%; }

  .col-4 {
    width: 100%; }

  .col-6 {
    width: 100%; } }
body {
  background-color: #CEF6F5;
  width: 70%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  font-size: 18px;
  font-family: "Comic Sans MS", cursive, sans-serif; }

a {
  text-decoration: none;
  cursor: pointer; }

.header {
  width: 100%;
  margin: auto;
  background-color: #CEF6F5; }
  .header .logocontainer {
    margin: auto;
    text-align: center;
    border-bottom: 2px solid black; }
    .header .logocontainer h2 {
      color: black; }
    .header .logocontainer img {
      width: 200px;
      height: auto; }
    .header .logocontainer .burgercontainer {
      display: none; }

.imgcontainer {
  text-align: center; }

figure {
  text-align: center;
  margin-block-start: 0em; }

.center {
  text-align: center; }

.content {
  margin-top: 50px; }

.footer {
  margin: 40px auto 0 auto;
  text-align: center;
  list-style: none; }

.footer_item {
  display: inline-block;
  color: #fff; }
  .footer_item a {
    color: black; }

.footer_item:not(:last-child):after {
  content: "-";
  display: inline-block;
  margin-left: 4px; }

@media only screen and (min-device-width: 319px) and (max-device-width: 667px) {
  body {
    font-family: "Comic Sans", "Comic Sans MS", "Chalkboard", "ChalkboardSE-Regular", sans-serif; }

  .header .logocontainer h2 {
    color: black;
    font-size: 16px; }
  .header .logocontainer .burgercontainer {
    display: inline-block; }

  .imgcontainer img {
    width: 100%; } }
@media (min-width: 801px) {
  .row__margin-top {
    margin-top: -40px; } }
.nav {
  list-style: none;
  text-align: center; }
  .nav .nav_item {
    display: inline-block;
    background-color: #328443;
    border-radius: 3px;
    font-size: 18px;
    padding: 0; }
    .nav .nav_item a {
      display: block;
      color: #fff;
      padding: 5px 10px;
      position: relative; }
  .nav .sub_nav {
    display: none;
    list-style-type: none;
    padding: 0;
    min-width: 100px;
    position: absolute;
    background-color: transparent;
    border-radius: 3px; }
    .nav .sub_nav .placeholder {
      padding: 2px;
      background-color: #CEF6F5; }
    .nav .sub_nav .sub_nav_item {
      background-color: #328443;
      border-radius: 3px; }
  .nav .arrow_right {
    display: none; }
  .nav .active {
    background-color: #EFD522 !important;
    color: #fff; }
  .nav .nav_item:hover .sub_nav {
    display: block;
    border-radius: 3px; }
  .nav .nav_item:hover .sub_nav_item:hover {
    border-radius: 3px;
    background-color: #EFD522;
    color: #fff; }

@media only screen and (min-device-width: 319px) and (max-device-width: 667px) {
  ul {
    padding-inline-start: 0px; }

  .header .nav {
    display: none;
    text-align: center; }
    .header .nav .nav_item {
      display: block;
      margin: 5px;
      position: relative; }
      .header .nav .nav_item a {
        display: inline-block;
        padding: 5px 40px; }
      .header .nav .nav_item .sub_nav {
        display: none;
        background-color: #328443;
        position: relative; }
        .header .nav .nav_item .sub_nav .sub_nav_item:hover .sub_nav_item:active {
          background-color: #EFD522; }

  .sub_nav--active {
    display: block !important;
    transform: .5s; }

  .burgercontainer {
    right: 0px;
    display: block;
    cursor: pointer;
    float: right;
    top: -37px;
    position: relative; }

  .bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s; }

  .change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px); }

  .change .bar2 {
    opacity: 0; }

  .change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px); }

  .arrow_right {
    display: block !important;
    transition: .5s;
    width: 20px;
    height: 20px;
    position: relative;
    float: right;
    top: 10px;
    right: 7px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #fff; }

  .arrow_right--active {
    transform: rotate(90deg);
    transition: all .25s ease-out; } }
.infobox {
  width: 600px;
  border: 2px solid black;
  border-radius: 5px;
  text-align: center;
  margin: 0 auto; }

@media only screen and (min-device-width: 319px) and (max-device-width: 667px) {
  .infobox {
    width: 100%; } }

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