@import url('https://fonts.googleapis.com/css2?family=Lemonada:wght@300;400;500;600;700&display=swap');

h2{
  font-size: 1em;
  font-family: 'Lemonada', cursive;
  color: #666;
}
h3{
  font-size: 1em;
  font-family: 'Lemonada', cursive;
  color: #666;
}
p{
  font-size: 0.9em;
  font-family: 'Lemonada', cursive;
}
li{
  font-size: 0.9em;
  font-family: 'Lemonada', cursive;
}
a{
  font-family: 'Lemonada', cursive;
}
h1 {
  display: none;
}
table{
  font-family: 'Lemonada', cursive;
}


/* Navigation */
#navigation {
  position: fixed;
  top: 0;
  }
.navi ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: grey;
  overflow: hidden;
}
.navi li {
  display: inline;
  float: left;
}
.navi li a:hover {
  color: white;
background-color: #555;
}
.navi li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navi a {
  display: block;
  padding: 8px;
  background-color: grey;
}


ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #555;
}

ul.topnav li {float: left;}

ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

ul.topnav li a:hover:not(.active) {background-color: #111;}

ul.topnav li a.active {background-color: #4CAF50;}

ul.topnav li.right {float: right;}

@media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {float: none;}
#navigation {position: fixed;}
}



	body {
		line-height: 1.2;
	}

	ol, ul {
		list-style: disc;
	}

	blockquote, q {
		quotes: none;
	}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	body {
		-webkit-text-size-adjust: none;
	}

  div.logo{
    width: 100%;
    background-size: cover;
    text-align: center;
  }
  img.logo2{
    width: 30%;
  }

/* Box Model */

	*, *:before, *:after {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}


/* Basic */

	@-ms-viewport {
		width: device-width;
	}

	body {
		-ms-overflow-style: scrollbar;
	}

	@media screen and (max-width: 480px) {

		html, body {
			min-width: 320px;
		}

	}

	body {
		background: #fff;
	}

		body.is-loading *, body.is-loading *:before, body.is-loading *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}







/* Image */

.image {
  width: 60%;
}

  .image img {
    max-width: 100%;
  }
  .imageheld {
    width: 80% !important;
  }

	.image {
		display: inline-block;
		position: relative;
	}

		.image.flush {
			margin: 0 !important;
		}

		.image img {
			display: block;
		}

		.image.left, .image.right {
			max-width: 50%;
		}

			.image.left img, .image.right img {
				width: 100%;
			}

		.image.left {
			float: left;
			margin: 0 1rem 1rem 0;
			top: 0.25rem;
		}

		.image.right {
			float: right;
			margin: 0 0 1rem 1rem;
			top: 0.25rem;
		}

		.image.fit {
			display: block;
			margin: 0 0 2rem 0;
			width: 100%;
		}

		.image.fit.konzept img {
        margin: auto;
				width: 25%;
			}
    .image.fit img {
				width: 100%;
			}

		.image.haupt {
			display: block;
			margin: 0 0 3rem 0;
			width: 100%;
		}

			.image.haupt img {
				width: 100%;
			}



/* Section/Article */

	section.spezial, article.spezial {
		text-align: center;
	}

	header p {
		position: relative;
		margin: 0 0 1.5rem 0;
	}

	header h2 + p {
		font-size: 1.25rem;
		margin-top: -1rem;
	}

	header h3 + p {
		font-size: 1.1rem;
		margin-top: -0.8rem;
	}

	header h4 + p,
	header h5 + p,
	header h6 + p {
		font-size: 0.9rem;
		margin-top: -0.6rem;
	}

	header p {
		color: #888;
	}


/* Header */

	body {
		background-color: LightGoldenRodYellow;
		padding-top: 1rem;
	}

		body.is-loading:after {
			visibility: hidden;
			opacity: 0;
		}

		body:after {
			-moz-pointer-events: none;
			-webkit-pointer-events: none;
			-ms-pointer-events: none;
			pointer-events: none;
			-moz-transition: opacity 1.5s ease-in-out, visibility 1.5s;
			-webkit-transition: opacity 1.5s ease-in-out, visibility 1.5s;
			-ms-transition: opacity 1.5s ease-in-out, visibility 1.5s;
			transition: opacity 1.5s ease-in-out, visibility 1.5s;
			content: '';
			background-color: LightGoldenRodYellow;
			background-attachment: fixed;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			position: fixed;
			display: block;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			z-index: -1;
			visibility: visible;
			opacity: 1;
		}

			@media screen and (max-width: 980px) {

				body:after {
					background-attachment: scroll;
					background-position: top;
					background-size: 100%;
				}

			}

	#header {
		color: #a6a6a6;
		cursor: default;
		position: relative;
		text-align: center;
		z-index: 10001;
	}

		#header > .logo {
			margin: 0 0 4rem 0;
			padding: 0;
		}

			#header > .logo a {
				font-size: 4rem;
				font-weight: 700;
				color: #FFF;
				text-decoration: none;
				line-height: 1rem;
			}

			#header > .logo span {
				font-weight: 300;
				font-size: 1rem;
				display: block;
				color: rgba(255, 255, 255, 0.65);
			}

	@media screen and (max-width: 1280px) {

		body {
			padding-top: 1rem;
			background-attachment: scroll;
			background-size: auto;
			background-position: top;
		}

	}

	@media screen and (max-width: 736px) {

		#header > .logo {
			margin: 0 0 2rem 0;
		}

			#header > .logo a {
				font-size: 3rem;
			}

	}

/* haupt */

	#haupt > .inner {
		margin: 0 auto;
		width: 80rem;
		max-width: 90%;
		margin-bottom: 2rem;
		background: rgba(255, 255, 255, 0.95);
		-webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
		-moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
		box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
		border-radius: 4px;
	}

	@media screen and (max-width: 980px) {

		#haupt .image {
			width: 100%;
			min-width: 100%;
			float: none;
			margin: 0 0 2rem 0;
		}

			#haupt .image img {
				width: 100%;
			}
      #haupt .image.konzept img {
				width: 70%;
			}
	}

	.adap > header {
		text-align: center;
		background: #FFF;
		padding: 2rem;
		margin: 0;
	}

		.adap > header h2 {
			position: relative;
			padding-bottom: .75rem;
		}

			.adap > header h2:after {
				content: '';
				position: absolute;
				margin: auto;
				right: 0;
				bottom: 0;
				left: 0;
				width: 10%;
				height: 1px;
				background-color: rgba(0, 0, 0, 0.125);
			}

		.adap > header p {
			text-transform: uppercase;
			font-weight: 300;
			font-size: .8rem;
			letter-spacing: .25rem;
			margin: 0;
		}

		.adap > header.spezial {
			padding: 1rem 2rem;
		}

			@media screen and (max-width: 980px) {

				.adap > header.spezial {
					padding: 3rem 2rem;
				}

			}

		@media screen and (max-width: 736px) {

			.adap > header {
				padding: 1.5rem;
			}

				.adap > header h2 {
					font-size: 1.5rem;
				}

					.adap > header h2:after {
						width: 50%;
					}

		}

	.adap.stil .content {
    text-align: justify;
    color: #555;
    line-height: 2;
    padding-top: 0rem;
		padding-left: 5rem;
    padding-right: 5rem;
    padding-bottom: 4rem;
	}

		@media screen and (max-width: 1280px) {

			.adap.stil .content {
				padding: 4rem;
			}

		}

		@media screen and (max-width: 736px) {

			.adap.stil .content {
				padding: 2rem;
			}

		}

    .lastLine {
      background-color: white;
      text-align: center;
    }
    .lastLine a {
      text-decoration: none;
      font-family: Helvetica, Sans-Serif;
      padding-left: 2em;
      padding-right: 2em;
      color: grey;
    }

    .downloads a{
      text-decoration: none;
      color: #555;
    }
    .downloads i{
      color: #555;
      font-size: 1.5em;
    }
    .downloads table {
      margin: auto;
      width: 80%;
      }
    .downloads tr:nth-child(even) {
      background-color: #f2f2f2;
    }

    .downloads tr td:first-child {
      width: 5em;
      text-align: center;
    }

    @media screen and (max-width: 736px) {
      .downloads table {
        width: 100%;
        }
    }

/* heldenbotschafter */

.heldenbox {
  line-height: 2em;
  text-align: center !important;
  padding-top: 0rem !important;
  padding-left: 0rem !important;
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
}

.headline {
  font-size: 2.5em;
  text-align: center;
}

.headlineSpace{
  padding-top: 2rem;
  font-size: 1.2em;
}

.centertext {
  text-align: center !important;
  padding-left: 5rem;
  padding-right: 5rem;
  color: #555;
}
    .inner3 {
      margin: 0 auto;
      max-width: 95em;
    }

      @media screen and (max-width: 1280px) {

        .inner3 {
          max-width: 90%;
        }

      }

      @media screen and (max-width: 980px) {

        .inner3 {
          max-width: 70%;
        }

      }

      @media screen and (max-width: 736px) {

        .inner3 {
          max-width: 85%;
        }

      }

      /* Adapt */

        .adapt {
          padding: 1em 0 4em 0;
        }

          .adapt h1, .adapt h2, .adapt h3, .adapt h4, .adapt h5 {
            color: #666;
          }

          @media screen and (max-width: 980px) {

            .adapt {
              padding: 3em 0 1em 0;
            }

          }

          @media screen and (max-width: 480px) {

            .adapt {
              padding: 2em 0 0.1em 0;
            }

          }

      /* Flex */

      .flex {
        display: -ms-flexbox;
        -ms-flex-wrap: nowrap;
        -ms-flex-pack: justify;
        -ms-flex-align: stretch;
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-flex-wrap: nowrap;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -moz-justify-content: space-between;
        -webkit-justify-content: space-between;
        -ms-justify-content: space-between;
        justify-content: space-between;
        -moz-align-items: stretch;
        -webkit-align-items: stretch;
        -ms-align-items: stretch;
        align-items: stretch;
      }

        .flex.flex-3 .flex-item {
          -ms-flex: 0 1 auto;
          -ms-flex-preferred-size: 30%;
          -moz-flex-basis: 30%;
          -webkit-flex-basis: 30%;
          -ms-flex-basis: 30%;
          flex-basis: 32%;
        }

          .flex.flex-3 .flex-item.left {
            text-align: right;
          }

        @media screen and (max-width: 980px) {

          .flex {
            -ms-flex-wrap: wrap;
            -moz-flex-wrap: wrap;
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
          }

            .flex.flex-3 .flex-item {
              -ms-flex-preferred-size: 100%;
              -moz-flex-basis: 100%;
              -webkit-flex-basis: 100%;
              -ms-flex-basis: 100%;
              flex-basis: 100%;
            }

              .flex.flex-3 .flex-item.left {
                text-align: right;
              }
        }

        /* Box */

        .boxPlus {
          margin: 1em;
        }

          .box {
            border-radius: 10px;
            border: solid 1px #dee1e3;
            margin-bottom: 2em;
            overflow: hidden;
          }

            .box > :last-child,
            .box > :last-child > :last-child,
            .box > :last-child > :last-child > :last-child {
              margin-bottom: 0;
            }

            .box .image.fit {
              margin: 0;
            }

            .box.alt {
              border: 0;
              border-radius: 0;
              padding: 0;
            }