html,body {
    margin-top: 8px;
margin-bottom: 0px;
Margin-left: 0px;
Margin-right: 0px;
	padding: 0;
font-family: 'Epilogue', sans-serif;
  color: black;
background-color: rgb(28, 251, 187);
height: 100%;
}
.container {
	scroll-snap-type: y mandatory;
	overflow-y: scroll;
Margin-top: 0px;
	height: 100vh;
}
section {
height: 100vh;
	scroll-snap-align: start;
}
.one {
Margin-top: 0px; 
	overflow-y: scroll;
scroll-snap-align: normal;
height: 100vh;
	background-color: rgb(28, 251, 187);
display: -webkit-flex; /* Safari */  
  display: flex;
  -webkit-align-items: center; /* Safari 7.0+ */
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.two {
Margin-top: 0px; 
	height: 100vh;
	overflow-y: scroll;
Background-color: yellow;
}
.three {
background-image: url('../image/map.jpg');
  background-size: cover;
	height: 100vh;
	overflow-y: hidden;
}
.four {
background-image: url('../image/wandbild.jpg');
  background-size: cover;
	height: 100vh;
	overflow-y: hidden;
}
.five {
background-image: linear-gradient(#5B8365, #6373AF, #92302C);
	height: 100vh;
	overflow-y: scroll;
}
.language {
color: black;
  position: absolute;
Top: 30px;
Right: 30px;
 font-size: 0.8em;
font-weight: 500;Epilogue;
 text-align: right;
Z-index: 100; 
}
@media screen and (min-width: 1024px) {
  div.language {
 text-align: right;
}
}
@media screen and (max-width: 1023px) {
  div.language {
 text-align: right;
}
}
@media screen and (max-width: 600px) {
  div.language {
  position: absolute;
Top: 30px;
Right: 100px;
 text-align: right;
}
}
.yellow{
background-color: #fbec5d ;
}
.white{
background-color: white;
}
  box-sizing: border-box;
}
.row::after {
  content: "";
  clear: both;
  display: table;
}

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

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 601px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 1024px) {
  /* For desktop: */
  .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%;}
}
.topnav {
  overflow: hidden;
  background-color: none;
font-weight: 500;Epilogue;
z-index: 100;
}
@media screen and (min-width: 1024px) {
  div.topnav {
position: absolute;
Top: 15px;
Left: 15px;
Margin-right: 15px;
}
}
@media screen and (max-width: 1023px) {
  div.topnav {
position: absolute;
Top: 15px;
Left: 15px;
Margin-right: 15px;
}
}
@media screen and (max-width: 600px) {
  div.topnav {
position: relative;
Top: -15px;
Left: 0px;
margin-bottom: 0px;
}
}
.topnav a {
  float: left;
  display: block;
  color: black;
background-color: white;
  text-align: center;
  text-decoration: none;
  font-size: 0.8em;
z-index: 100;
}
@media screen and (min-width: 1024px) {
  div.topnav a {
  padding: 15px 15px;
Border: solid;
border-width: 0px 2px 2px 0px;
}
}
@media screen and (max-width: 1023px) {
  div.topnav a {
  padding: 15px 15px;
Border: solid;
border-width: 0px 2px 2px 0px;
}
}
@media screen and (max-width: 600px) {
  div.topnav a {
  padding: 15px 10px;
Margin-left: 15px;
Margin-right: 0px;
margin-bottom: 0px;
font-weight: 500;Epilogue;
Border: solid;
border-width: 0px 0px 2.5px 0px;
}
}
.topnav a:hover {
  color: black;
}
@media screen and (min-width: 1024px) {
  div.topnav a:hover {
  background-color: yellow;
}
}
@media screen and (max-width: 1023px) {
  div.topnav a:hover {
  background-color: yellow;
}
}
@media screen and (max-width: 600px) {
  div.topnav a:hover {
  background-color: yellow;
}
}
.topnav a.active {
  color: black;
z-index: 100;
  background-color: hsl(155, 100%, 80%);
}
.topnav a.sub {
  color: black;
z-index: 100;
  background-color: hsl(155, 100%, 90%);
}
@media screen and (min-width: 1024px) {
  div.topnav a.sub {
Border: solid;
border-width: 0px 2px 2px 0px;
}
}
@media screen and (max-width: 1023px) {
  div.topnav a.sub {
Border: solid;
border-width: 0px 2px 2px 0px;
}
}
@media screen and (max-width: 600px) {
  div.topnav a.sub {
Border: solid;
border-width: 0px 0px 2.5px 0px;
}
}
.topnav a.main {
  color: black;
}
@media screen and (min-width: 1024px) {
  div.topnav a.main {
  background-color: pink;
Border: solid;
border-width: 0px 2px 2px 0px;
}
}
@media screen and (max-width: 1023px) {
  div.topnav a.main {
  background-color: pink;
Border: solid;
border-width: 0px 2px 2px 0px;
}
}
@media screen and (max-width: 600px) {
  div.topnav a.main {
Margin-left: 10px;
  background-color: rgb(28, 251, 187);
Border: none;
border-width: 0px 0px 0px 0px;
font-weight: 500;Epilogue;
}
}
@media screen and (min-width: 1024px) {
  div.topnav a.maingreen {
  background-color: hsl(155, 100%, 80%);
Border: solid;
border-width: 0px 2px 2px 0px;
}
}
@media screen and (max-width: 1023px) {
  div.topnav a.maingreen {
  background-color: hsl(155, 100%, 80%);
Border: solid;
border-width: 0px 2px 2px 0px;
}
}
@media screen and (max-width: 600px) {
  div.topnav a.maingreen {
Margin-left: 15px;
  background-color: rgb(28, 251, 187);
Border: none;
border-width: 0px 0px 0px 0px;
font-weight: 500;Epilogue;
}
}
.topnav .icon {
  display: none;
}
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
Background-color: pink;
Border: none;
border-width: 0px 0px 0px 0px;
z-index: 100;
  }
}
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
z-index: 100;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
z-index: 100;
  }
body a {
  cursor: pointer;
  color: black;
  text-decoration: none;
}
body section {
  margin-bottom: 0px;
}
}
.textnon {
color: black;
  position: relative;
}
@media screen and (min-width: 1024px) {
  div.textnon {
Top: 60px;
Margin-left: 15px;
Margin-right: 15px;
}
}
@media screen and (max-width: 1023px) {
  div.textnon {
Top: 100px;
Margin-left: 15px;
Margin-right: 15px;
}
}
@media screen and (max-width: 600px) {
  div.textnon {
Top: 5px;
Margin-left: 15px;
Margin-right: 15px;
}
}
.texteinzug { 
Position: relative;
font-family: 'Epilogue', sans-serif;
letter-spacing: 0.0em;
font-kerning: auto;
line-height: 1.4;
color: black;
Z-index: 1; 
}
@media screen and (min-width: 1024px) {
  div.texteinzug {
margin-top: 150px;
Padding-left: 250px;
Padding-right: 250px;
    font-size: 1em;  
}
}
@media screen and (max-width: 1023px) {
  div.texteinzug {
margin-top: 150px;
Padding-left: 80px;
Padding-right: 80px;
    font-size: 1em; 
}
}
@media screen and (max-width: 600px) {
  div.texteinzug {
margin-top: 30px;
Padding-left: 15px;
Padding-right: 15px;
    font-size: 0.8em;
}
}
.text { 
Position: relative;
Background-color: white;
font-family: 'Epilogue', sans-serif;
letter-spacing: 0.0em;
font-kerning: auto;
line-height: 1.4;
color: black;
background-color: white; 
overflow: scroll;
Z-index: 1; 
}
@media screen and (min-width: 1024px) {
  div.text {
Margin-top: 0px; 
Margin-left: 15px;
Margin-right: 15px;
margin-bottom: 15px;
Padding-top: 120px;
Padding-left: 250px;
Padding-right: 250px;
Padding-bottom: 50px;
    font-size: 1em;  
}
}
@media screen and (max-width: 1023px) {
  div.text {
Margin-top: 0px; 
Margin-left: 15px;
Margin-right: 15px;
margin-bottom: 15px;
Padding-top: 120px;
Padding-left: 80px;
Padding-right: 80px;
Padding-bottom: 50px;
    font-size: 1em; 
}
}
@media screen and (max-width: 600px) {
  div.text {
Margin-top: 0px; 
Margin-left: 15px;
Margin-right: 15px;
margin-bottom: 15px;
Padding-top: 10px;
Padding-left: 10px;
Padding-right: 10px;
Padding-bottom: 20px;
    font-size: 0.8em;
}
}
.news { 
Position: relative;
font-family: 'Epilogue', sans-serif;
letter-spacing: 0.0em;
font-kerning: auto;
line-height: 1.4;
color: black;
background-color: white; 
overflow: scroll;
Z-index: 1; 
}
@media screen and (min-width: 1024px) {
  div.news {
Margin-top: 15px; 
Margin-left: 15px;
Margin-right: 15px;
Padding-top: 40px;
Padding-left: 250px;
Padding-right: 250px;
Padding-bottom: 40px;
    font-size: 1em;  
}
}
@media screen and (max-width: 1023px) {
  div.news {
Margin-top: 15px; 
Margin-left: 15px;
Margin-right: 15px;
Padding-top: 60px;
Padding-left: 80px;
Padding-right: 80px;
Padding-bottom: 60px;
    font-size: 1em; 
}
}
@media screen and (max-width: 600px) {
  div.news {
Margin-top: 15px; 
Margin-left: 15px;
Margin-right: 15px;
Margin-bottom: 0px;
Padding-top: 15px;
Padding-left: 10px;
Padding-right: 10px;
Padding-bottom: 15px;
    font-size: 0.8em;
}
}
.titel { 
font-weight: 700;Epilogue;
line-height: 1.18;
}
@media screen and (min-width: 1024px) {
  div.titel {
Margin-bottom: 10px;
Font-size: 1.3em;
}
}
@media screen and (max-width: 1023px) {
  div.titel {
Margin-bottom: 10px;
Font-size: 1.3em;
}
}
@media screen and (max-width: 600px) {
  div.titel {
Margin-bottom: 5px;
Font-size: 1.3em;
}
}
.titelnoshow { 
font-weight: 700;Epilogue;
Font-size: 1.3em;
line-height: 1.18;
}
@media screen and (min-width: 1024px) {
  div.titelnoshow {
Margin-bottom: 10px;
Font-size: 1.3em;
}
}
@media screen and (max-width: 1023px) {
  div.titelnoshow {
Margin-bottom: 10px;
Font-size: 1.3em;
}
}
@media screen and (max-width: 600px) {
  div.titelnoshow {
Margin-bottom: 5px;
Font-size: 1.3em;
display: none;
}
}
.subtitel { 
font-weight: 600;Epilogue;
line-height: 1.4;
}
@media screen and (min-width: 1024px) {
  div.subtitel {
Margin-bottom: 60px;
}
}
@media screen and (max-width: 1023px) {
  div.subtitel {
Margin-bottom: 60px;
}
}
@media screen and (max-width: 600px) {
  div.subtitel {
Margin-bottom: 20px;
}
}
.front {
color: black;
font-family: 'Epilogue', sans-serif;
font-weight: 700;Epilogue;
 font-size: 1.8em;
 text-align: left;
Z-index: 1; 
}
@media screen and (min-width: 1024px) {
  div.front {
Margin-top: 15px;
Margin-bottom: 100px;
}
}
@media screen and (max-width: 1023px) {
  div.front {
Margin-top: 15px;
Margin-bottom: 150px;
}
}
@media screen and (max-width: 600px) {
  div.front {
Margin-top: 10px;
Margin-bottom: 40px;
}
}
.textbold { 
font-weight: 600;Epilogue;
line-height: 1.4;
}
.legende { 
padding: 0px;
font-weight: 500;Epilogue;
Font-size: 0.8em;
line-height: 1.4;
}
.literatur { 
padding: 0px;
font-weight: 500;Epilogue;
Font-size: 0.8em;
Margin-left: 2em;
}
@media screen and (min-width: 1024px) {
  div.literatur {
Margin-top: 60px;
}
}
@media screen and (max-width: 1023px) {
  div.literatur {
Margin-top: 60px;
}
}
@media screen and (max-width: 600px) {
  div.literatur {
Margin-top: 20px;
}
}
.einzug { 
text-indent: -1.6em;
}
.textmini { 
padding: 0px;
font-weight: 500;Epilogue;
}
@media screen and (min-width: 1024px) {
  div.textmini {
Margin-top: 60px;
Margin-bottom: 60px;
Margin-left: 0px;
margin-right: 0px;
Font-size: 0.8em;
}
}
@media screen and (max-width: 1023px) {
  div.textmini {
Margin-top: 60px;
Margin-bottom: 60px;
Margin-left: 0px;
margin-right: 0px;
Font-size: 0.8em;
}
}
@media screen and (max-width: 600px) {
  div.textmini {
Margin-top: 20px;
Margin-bottom: 20px;
Margin-left: 0px;
margin-right: 0px;
Font-size: 0.8em;
}
}
.box {
  background-color: white;
  color: white;
}
  .wrapper {
    width: 100%;
    display: grid;
    grid-gap: 15px;
    Margin-top: 0px;
    margin-bottom: 0px;
   Margin-left: 0px;
   Margin-right: 0px;
grid-row-gap: 15px;
}  
  .wrappertext {
    width: 100%;
    display: grid;
    grid-gap: 15px;
    font-size: 0.8em;
Color: black;
}
@media screen and (min-width: 1024px) {
  div.wrapper, div.wrappertext {
grid-template-columns: repeat(2, 48.7%);    
}
}
@media screen and (max-width: 1023px) {
  div.wrapper, div.wrappertext {
grid-template-columns: repeat(2, 48.7%);
}
}
@media screen and (max-width: 600px) {
  div.wrapper, div.wrappertext {
        grid-template-columns: repeat(1, 100%);
}
}
.imagebox {
   width: 100%;
  object-fit: cover;
opacity: 2;
}
.textbox {
color: black;
height: 200px;
padding-top: 10px;
Padding-left: 10px;
Padding-right: 10px;
padding-bottom: 10px;
border: 8px;
Border: none;
  background-color: hsl(155, 100%, 90%);
opacity: 2;
Text-align: left;
}
.textbox:hover {
color: white;
  background-color: yellow;
}
.grid {
display: flex;
   flex-wrap:wrap;
Margin-top: 10px;
Margin-left: 10px;
Margin-right: 10px;
margin-bottom: 10px; 
}
.kachel {
position: relative;
	margin-left: 0px;
Margin-right: 0px;
Margin-top: 0px;
margin-bottom: 0px;
	z-index:1;
}
@media screen and (min-width: 1024px) {
div.kachel {
	width: 310px;
max-height: 410px;
}
}
@media screen and (max-width: 1023px) {
div.kachel {
	width: 310px;
max-height: 410px;
}
}
@media screen and (max-width: 600px) {
div.kachel {
	width: 310px;
max-height: 410px;
}
}
.imagekachel {
  object-fit: cover;
max-width: 300px;
max-height: 400px;
opacity: 2;
}
@media screen and (min-width: 1024px) {
div.imagekachel {
max-width: 300px;
max-height: 400px;
}
}
@media screen and (max-width: 1023px) {
div.imagekachel {
max-width: 300px;
max-height: 400px;
}
}
@media screen and (max-width: 600px) {
div.imagekachel {
max-width: 300px;
max-height: 400px;
}
}
.imagefull {
Margin-top: 0px;  
margin-bottom: 0px;
 margin-left: 0px;
  margin-right: 0px;
height: 60vh;
max-width: 100%;
object-fit: cover;
}
.imageover {
position: fix;
Top: 0px;
Left: 0px;
Margin-top: 0px;  
margin-bottom: 0px;
 margin-left: 0px;
  margin-right: 0px;
height: 500%;
width: 500%;
z-index: 1;
}
.center {
text-align: center;
}
.imagecolum {
 margin-left: 0px;
  margin-right: 0px;
max-width: 100%;
object-fit: contain;
}
@media screen and (min-width: 601px) {
div.imagecolum {
Margin-top: 10px;  
margin-bottom: 10px;
Max-width: 80%;   
  }
}
@media screen and (max-width: 600px) {
div.imagecolum {
Margin-top: 0px;  
margin-bottom: 0px;
width: 100%;
  }
}
.imagehalf {
Margin-top: 0px;  
margin-bottom: 0px;
 margin-left: 0px;
  margin-right: 0px;
width: 70%;
object-fit: cover;
}
.imagequarter {
Margin-top: 0px;  
margin-bottom: 0px;
 margin-left: 0px;
  margin-right: 0px;
width: 30%;
object-fit: cover;
}
/* footer */
.footer {
width: 100%;
  	color: black;
font-family: 'Epilogue', sans-serif;
	text-align: center;
font-size: 2em;
	letter-spacing: 0px;
	position: fixed;	
	bottom: 20px;
}
/* adioplayer */
.audio {
  	color: black;
font-family: 'Epilogue', sans-serif;
font-size: 1em;
	letter-spacing: 0px;
	position: fixed;	
	bottom: 50px;
}
.hr {
  Border-top: 1px dashed black;
}
.hryellow {
  Border-top: 500px solid yellow;
Margin-top: 30px;
Margin-left: 0px;
Margin-right: 0px;
margin-bottom: 30px;
}
@media screen and (max-width: 600px) {
  div.hryellow {
    display: none;
  }
}
a:link {
  text-decoration: none;
Color: black;
}
.nounderline {
	color: black;
}
.underline {
	color: black;
	border-bottom-color: black;
	border-bottom: 1px solid;
	padding-bottom: 0px;
}
.highlight {
  background: yellow;
color: black;
}
.quote {
color: black;
  font-family: "Arvo", serif;
  font-weight: 400;
 font-style: italic;
letter-spacing: 0em;
word-spacing: 0.1em
}
::selection {
  background: yellow;
color: black;
} 
.logos {
max-Height: 70px; 
Max-width: 150px; 
margin-bottom: 0px;
Margin-right: 30px;
float: left;
object-fit: contain;
}