html {
    font-family: "Lato", sans-serif;
    margin: 0;
    padding: 0;
}

html, body {
  overflow-x: hidden;
}
body {
  position: relative
}

.content {
    display: flex;
    flex-direction: column;
}

h1 {
    font-weight: bold;
    text-underline: black;
    text-decoration: black underline;

    font-size: 1.5em;
}

.topmenu, .appmenu, .webmenu {
    display: flex;
}

.h1 {
  text-decoration: underline;
}

.topmenu {
    /*flex-direction: column;*/
    height: 4em;
    padding: 1em;
}
.topmenu-border {
    width: 100%;
    border-bottom: 1.5px solid lightgrey;
}

.logo-kunstv {
    max-height: 100%;
    align-self: center;
}

.appmenu, .webmenu {
    /* flex-direction: row; */
    padding: 0 4em;
}

.appmenu {
    padding-top: 2em;
    padding-bottom: 3em;
}

.appmenu-text, .appmenu-buttons {
    flex-direction: column;
    flex: 50%;
}

.appmenu-buttons {
    padding: 5px;
	  margin-top: 1em;
}

.appmenu-buttons-stores {
    display: flex;
    flex-direction: row;
}

.webmenu-text, .webmenu-buttons {
    flex-direction: column;
    flex: 50%;
}

.webmenu-buttons {
    display: flex;
    align-items: flex-start;
	  margin-top: 2em;
}

.appmenu-text, .webmenu-text {
    font-size: 1.5em;
}

.kreis-unten {
    position: fixed;
    z-index: -1;
}

.kreis-oben{
  position:absolute;
  z-index: -1;
}

.kreis-oben {
    top: 7em;
}

.kreis-unten {
    right: 0;
    bottom: 0;
}

.topmenu li {                 /** Kleiner Viewport: Handy **/
    width: 60%;
    font-size: 0.9rem;
    padding: 1em;
    background-color: khaki;
    text-decoration: black underline;
}

@media ( max-width: 720px ) {  /** Größerer Viewport: Tablett **/
    .topmenu li {
        width: 48%;
        font-size: 1rem;
        padding: 10px;
    }
    .topmenu-border {
        width: 100%;
        border-bottom: 1.5px solid lightgrey;
    }
}

		/*laptops, desktops*/
		@media (min-width: 1025px) and (max-width: 1280px) {
			.appmenu, .webmenu {
				flex-direction: row;
			}
			.appmenu-text, .webmenu-text {
				margin-right: 2em;
			}
			.appmenu-buttons, .webmenu-buttons {
				padding-left: 1em;
				margin-top: 2em;
			}
      .topmenu-border {
          width: 100%;
          border-bottom: 1.5px solid lightgrey;
      }
      .playStore{
        width: 46%;
        padding-left: 0.5em;
      }
      .appmenu-buttons-stores{
        padding-top: 2em;
      }
      .logo-kunstv{
        padding-right: 1.5em;
      }
		}

		/*tablets, ipads (portrait)*/
		@media (min-width: 768px) and (max-width: 1024px)
		{

			.appmenu, .webmenu {
				flex-direction: column;
			}
			.appmenu-text, .webmenu-text {
				margin-right: 2em;
			}
			.appmenu-buttons, .webmenu-buttons {
        flex-direction: column;
        display: block;
        align-content:flex-start;
        align-items: flex-start;
        justify-content: flex-start;
				margin-top: 2em;
			}
      .appmenu-buttons-stores {
        display: block;
        flex-direction:column;
        align-content:flex-start;
        align-items: flex-start;
        justify-content: flex-start;
        padding-top: 0.5em;
      }
      .appmenu-buttons-stores {
          display: flex;
          flex-direction: row;
          padding-top: 1em;
      }
      .playStore{
        width: 33.5%;
        padding-left: 1em;
      }
      .logo-kunstv{
        padding-right: 1.5em;
      }
		}

		/*tablets, ipads (landscape)*/
		@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape)
		{
      .topmenu {
          /*flex-direction: column;*/
          height: 6em;
      }
			.appmenu, .webmenu {
				flex-direction: row;
			}
			.appmenu-text, .webmenu-text {
				margin-right: 2em;
			}
			.appmenu-buttons, .webmenu-buttons {
				padding-left: 1em;
				margin-top: 2em;
			}
		}

		/*low resolution tablets, mobiles (landscape)*/
		@media (min-width: 481px) and (max-width: 767px)
		{
      .topmenu {
          /*flex-direction: column;*/
          height: 4em;
      }
			.appmenu, .webmenu {
				flex-direction: column;
			}
			.appmenu-buttons, .webmenu-buttons {
				padding: 0;
				margin-top: 1em;
			}
      .webmenu-buttons{
        padding-bottom: 3em;
      }
			.appmenu-buttons-stores {
				flex-direction: row;
        padding-top: 0.5em;
			}
			.appmenu-text, .webmenu-text {
				margin-bottom: 1em;
			}
      .logo-kunstv{
        width: 6em;
        padding-right: 1.5em;
      }
      .logo-kunstm{
        height: 2.5em;
        padding-top: 1em;
      }
      .kreis-oben {
          width: 18em;
      }
      .kreis-unten {
          width: 11.5em;
      }
      .playStore{
        width: 38%;
        padding-left: 0.5em;
      }
		}


		/*smartphones mobiles (portrait)*/
		@media (min-width: 320px) and (max-width: 480px)
		{
      .appmenu {
        padding-top: 1em;
      }
			.appmenu, .webmenu {
				flex-direction: column;
        padding-left: 2em;
        padding-right:1.5em;
			}
			.appmenu-buttons, .webmenu-buttons {
				padding: 0;
        margin-top: 1em;
			}
      .webmenu-buttons {

      }
			.appmenu-buttons-stores {
        display: block;
				flex-direction:column;
        align-content:flex-start;
        align-items: flex-start;
        justify-content: flex-start;
        padding-top: 0.5em;
			}
			.appmenu-text, .webmenu-text {
				margin-bottom: 1em;
			}
      .kreis-oben {
          width: 18em;
      }
      .kreis-unten {
          width: 14em;
      }
      .logo-kunstv{
        width: 6em;
        padding-right: 1.5em;
      }
      .logo-kunstm{
        height: 2.5em;
        padding-top: 1em;
      }
      .playStore{
        width: 64%;
        padding-top: 0.5em;
      }
		}

		@media (max-width: 320px)
		{
			.appmenu, .webmenu {
				flex-direction: column;
			}
			.appmenu-buttons, .webmenu-buttons {
				padding: 0;
				align-items: left;
			}
			.appmenu-buttons-stores {
				flex-direction: column;
			}
			.appmenu-text, .webmenu-text {
				margin-bottom: 1em;
			}
		}

/* Großer Viewport: Browserfenster **!*/
  @media ( min-width: 900px ) {
    .playStore{
      width: 14em;
      padding-left: 0.5em;
    }
    .appmenu-buttons-stores{
      padding-top: 3em;
    }

  }