html, body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  overflow:hidden;
  max-width: 100%;
  max-height: 100%;
  position:fixed

}

   /* background-color:#ffdc00; */

 li {
        list-style:none;
    }

@keyframes AniKasten {
    0%   {margin-left: 100%;}
    100% {margin-left: 59%;}
}

@keyframes AniKastenfünfzig {
    0%   {margin-left: 100%;}
    100% {margin-left: 50%;}
}

@keyframes AniKastenHandyQ {
    0%   {margin-left: 100%;}
    100% {margin-left: 25%;}
}

@keyframes AniKastenHandyH {
    0%   {margin-left: 100%;}
    100% {margin-left: 0%;}
}

@keyframes AniText {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}


body {
  font-family:sans-serif;
}

.hintergrund {
  position:absolute;
  width:105%;
  z-index:1;
}

#BGimpr {width: 100vw; height: 100vh; background-color: #924d3d;}

#BGgelb {overflow:hidden; width: 200%; height: 200%; background-color: #ffdc00;}

#BGgruen {width: 200%; height: 200%; background-color: #8fa318;}

#BGblau {width: 200%; height: 200%; background-color: #cae7f3;}

#BGrot {width: 200%; height: 200%; background-color: #d21505;}

.HB {display:none;}

.scrollbereich {
  width:42%;
  position:absolute;
  top:0;
  left:0;
  margin-left: 59%;
  margin-top: -100px;
  overflow:scroll;
  z-index:5;
  animation-name: AniKasten;
    animation-duration: 4s;
    height:200%;


}

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

.nav:hover .menu {
    display: inline-block;
}

.menu {
    clear:both;
    width: 100%;
    padding-top: 5%;
    }

.button1, .button2, .button3, .button4 {
  display: inline-block; margin-right:3%;

}

#inhaltGRUEN, #inhaltGELB, #inhaltBLAU, #inhaltROT, #inhaltIMPR, #inhaltDAT {
  background:rgba(0,0,0,0.7); 
   padding-left: 5%;
   padding-top: 5%;
   padding-right: 10%;
   padding-bottom: 0%;
   animation-name: AniText;
   animation-duration: 3.5s;
min-height:100%;
overflow:scroll;

  }

  #inhaltROT {height:107%;}

#inhaltIMPR {height:140%;}

#inhaltDAT {height:350vw;}
/*hier muss Inhalt auf 100% Höhe sein, damit der schwarze Balken sich durchzieht*/

#logo {
  margin-top:100px;
  float:left;
  width:100%;

}

/* Inhalt außer Logo*/
.PageContent {
 padding: 5%;
 padding-top: 0;
 padding-bottom: 0;
  clear: both;
border-left: solid 1px #ffffff;
}

.portrait {width:34%; padding-left:5%; padding-top:5px; padding-bottom:3%; float:right;}

h1 {color:#ffffff; font-size:30px; font-family: 'Josefin Sans', sans-serif; line-height:20px; padding-top: 5px;}

h2 {color:#ffffff; font-size:28px; font-family: 'Josefin Sans', sans-serif;}

/* Zitate */ 
h4 {color:#ffffff; font-family: 'Bad Script', cursive; font-size:1.7vmax; line-height: 2.5vmax;}

/* Zitat-Unterschriften */
h5 {text-align: right; color:#ffffff; font-size:1.25vmax; font-family: 'Josefin Sans', sans-serif; margin-top: -5%; line-height:1.25vmax; margin-bottom:7%; font-weight: 400;}

h6 {color:#ffffff; font-size:16px; font-family: 'Josefin Sans', sans-serif; line-height:20px; padding-top: 5px; text-align: center;}

/*Links gelb*/
a.Agelb:link {color: #ffffff; text-decoration:none; font-size:16px; font-family: 'Josefin Sans', sans-serif; line-height:20px;text-align: center;}
a.Agelb:active {color: #ffdc00; text-decoration: underline;}
a.Agelb:visited {color: #ffffff; text-decoration:none}
a.Agelb:hover {color: #ffdc00; text-decoration:none;}
/*Links grün*/
a.Agruen:link {color: #ffffff; text-decoration:none; font-size:16px; font-family: 'Josefin Sans', sans-serif; line-height:20px;text-align: center;}
a.Agruen:active {color: #A9C938; text-decoration: underline;}
a.Agruen:visited {color: #ffffff; text-decoration:none}
a.Agruen:hover {color: #A9C938; text-decoration:none;}
/*Links rot*/
a.Arot:link {color: #ffffff; text-decoration:none; font-size:16px; font-family: 'Josefin Sans', sans-serif; line-height:20px;text-align: center;}
a.Arot:active {color: #ff3000; text-decoration: underline;}
a.Arot:visited {color: #ffffff; text-decoration:none}
a.Arot:hover {color: #ff3000; text-decoration:none;}
/*Links blau*/
a.Ablau:link {color: #ffffff; text-decoration:none; font-size:16px; font-family: 'Josefin Sans', sans-serif; line-height:20px;text-align: center;}
a.Ablau:active {color: #70cbdf; text-decoration: underline;}
a.Ablau:visited {color: #ffffff; text-decoration:none}
a.Ablau:hover {color: #70cbdf; text-decoration:none;}

a.Textlink:link {color:#ffffff; font-size:1.25vmax; font-family: 'Josefin Sans', sans-serif; font-style:italic; text-decoration:none; line-height:1.5vmax; padding-top: 5px;}
a.Textlink:active {color:#ffffff; font-size:1.25vmax; font-family: 'Josefin Sans', sans-serif; font-style:italic; text-decoration:none; line-height:1.5vmax; padding-top: 5px;}
a.Textlink:visited {color:#ffffff; font-size:1.25vmax; font-family: 'Josefin Sans', sans-serif; font-style:italic; text-decoration:none; line-height:1.5vmax; padding-top: 5px;}
a.Textlink:hover {color:#ffffff; font-size:1.25vmax; font-family: 'Josefin Sans', sans-serif; font-style:italic; text-decoration:none; line-height:1.5vmax; padding-top: 5px;}

/*Links Impressum*/
a.Aimpr:link {color: #ffffff; text-decoration:none; font-size:16px; font-family: 'Josefin Sans', sans-serif; line-height:20px;text-align: center;}
a.Aimpr:active {color: #924d3d; text-decoration: underline;}
a.Aimpr:visited {color: #ffffff; text-decoration:none}
a.Aimpr:hover {color: #924d3d; text-decoration:none;}

a.maillink {color:#ffffff; font-size:1.25vmax; font-family: 'Josefin Sans', sans-serif; line-height:1.5vmax; text-decoration:none; padding-top: 5px;}

p {color:#ffffff; font-size:1.25vmax; font-family: 'Josefin Sans', sans-serif; line-height:1.5vmax; padding-top: 5px;}

/* ab iPad quer */
@media only screen and (max-width: 1024px) and (min-width: 750px) and (orientation:landscape) {
  .reframe { max-width: 1024px }

#inhaltGELB {height:102%;}
#inhaltGRUEN {height:110%;}
#inhaltBLAU {height:105%;}
#inhaltROT {height:115%;}
#inhaltIMPR {height:150%;}
#inhaltDAT {height:150%;}

.hintergrund {
  position:absolute;
  position:fixed;
  width:auto;
  height:105%;
  z-index:1;
}

.scrollbereich {
  float:right;

}

.menu {width:70%; padding-bottom: 15%;}

.button1, .button3  {float:left; padding-right:0%; padding-bottom: 3%;}
.button2, .button4 {float:right; padding-bottom: 3%;
}

/* (vorübergehend?) nicht mehr nötig
a.Agelb:link {font-size:20px;}
a.Agelb:active {font-size:20px;}
a.Agelb:visited {font-size:14px;}
a.Agelb:hover {font-size:14px;}
/*Links grün*/ /*
a.Agruen:link {font-size:14px;}
a.Agruen:active {font-size:14px;}
a.Agruen:visited {font-size:14px;}
a.Agruen:hover {font-size:14px;}
/*Links rot*/ /*
a.Arot:link {font-size:16px;}
a.Arot:active {font-size:16px;}
a.Arot:visited {font-size:16px;}
a.Arot:hover {font-size:16px;}
/*Links blau*/ /*
a.Ablau:link {font-size:14px;}
a.Ablau:active {font-size:14px;}
a.Ablau:visited {font-size:14px;}
a.Ablau:hover {font-size:14px;}
*/

p {font-size: 1.7vmax; line-height: 2vmax;}

h5{font-size: 1.7vmax; line-height: 2vmax;}

h4 {font-size: 2.5vmax; line-height: 3.5vmax;}

a.Textlink:link {font-size: 1.7vmax; line-height: 2vmax;}
a.Textlink:active {font-size: 1.7vmax; line-height: 2vmax;}
a.Textlink:visited {font-size: 1.7vmax; line-height: 2vmax;}
a.Textlink:hover {font-size: 1.7vmax; line-height: 2vmax;}

a.maillink {font-size: 1.7vmax; line-height: 2vmax;}
}

/* ab iPad hoch */
@media only screen and (max-width: 1080px) and (orientation:portrait) {
  .reframe { max-width: 1080px }

.portrait {width:60%; float: left; padding-left:0; padding-top:0; padding-bottom:10%; margin-right: 100%;}

.button1 {padding-right:15%; padding-bottom: 1%; float:left;}
.button2 {padding-bottom: 1%; float:right;}
.button3 {float:left;}
.button4 {margin-right:7%; float:right;}

#inhaltDAT {height:450vh;}

.scrollbereich {
  width:50%;
  margin-left: 50%;
  animation-name: AniKastenfünfzig;

  }
}
@media only screen and (max-width: 800px) and (orientation:landscape) {
  .reframe { max-width: 800px }


.scrollbereich {
  width:50%;
  margin-left: 50%;
  animation-name: AniKastenfünfzig;

}
}


/*ab kleinem Tablet
@media only screen and (max-width: 600px) {
  .reframe { max-width: 600px }
 
 .menu {width: 90%;}

}

/* ab Handy quer 
@media only screen and (max-width: 750px) {
  .reframe { max-width: 750px }
  
  .scrollbereich {
  width:75%;
  margin-left: 25%;
  animation-name: AniKastenHandyQ;
}



.menu {width: 100%; padding-bottom: 10%;}


#inhalt {height:auto;}

}*/


/* Ansonsten neues Layout für Breiten von Tablet - Handy quer */

/* ab Handy hoch */
@media only screen and (max-width: 750px) and (orientation:portrait) {
  .reframe { max-width: 750px }
 
 .scrollbereich {
  width:100%;
  margin-left: 0%; 
  animation-name: none;
}

p {font-size: 3vmax; line-height: 4vmax;}

h5 {font-size: 3vmax; line-height: 4vmax;}

h4 {font-size: 3.5vmax; line-height: 5vmax;}

a.maillink {font-size: 5vw; line-height: 4vmax;}
a.Textlink:link {font-size: 5vw; line-height: 4vmax;}
a.Textlink:active {font-size: 5vw; line-height: 4vmax;}
a.Textlink:visited {font-size: 5vw; line-height: 4vmax;}
a.Textlink:hover {font-size: 5vw; line-height: 4vmax;}

a.Agelb:link {font-size:5vw;}
a.Agelb:active {font-size:5vw;}
a.Agelb:visited {font-size:5vw;}
a.Agelb:hover {font-size:5vw;}
/*Links grün*/ 
a.Agruen:link {font-size:5vw;}
a.Agruen:active {font-size:5vw;}
a.Agruen:visited {font-size:5vw;}
a.Agruen:hover {font-size:5vw;}
/*Links rot*/ 
a.Arot:link {font-size:5vw;}
a.Arot:active {font-size:5vw;}
a.Arot:visited {font-size:5vw;}
a.Arot:hover {font-size:5vw;}
/*Links blau*/ 
a.Ablau:link {font-size:5vw;}
a.Ablau:active {font-size:5vw;}
a.Ablau:visited {font-size:5vw;}
a.Ablau:hover {font-size:5vw;}
/*Links grün*/ 
a.Aimpr:link {font-size:5vw;}
a.Aimpr:active {font-size:5vw;}
a.Aimpr:visited {font-size:5vw;}
a.Aimpr:hover {font-size:5vw;}

.button1 {padding-bottom: 5%; float:left;}
.button2 {padding-bottom: 5%; float:right;}
.button3 {float:left;}
.button4 {margin-right:7%; float:right;}

#inhaltGRUEN, #inhaltGELB, #inhaltBLAU, #inhaltROT, #inhaltIMPR {max-width:100%; padding-left: 0; padding-right: 0;}

/* an Textmenge angepasste Höhen (gestestet am iPhone 5s) */
#inhaltGELB {height:150%;}
#inhaltGRUEN {height:170%;}
#inhaltBLAU {height:150%;}
#inhaltROT {height:200%;}
#inhaltIMPR {height:240%;}
#inhaltDAT {height:240%;}

.menu {padding-left: 5%; width:80%;}

.PageContent {margin-left: 5%;}

.fueller {height:0px;}

.HB {display:block; width: 100%;}
 .HandyBild {display:block; padding-top: 5%; width:100%; height:auto;}
}

.hintergrund {
  position:absolute;
  width:auto;
  height: 100%;
  position: fixed;
  z-index:1;

}

#logo {
  margin-top:100px;
  float:left;
  padding-left: 5%;
  width:90%;
}

html, body {max-width: 100%;}

}

/* Menü wird zweizeilig */
@media only screen and (max-width: 1080px) {

.menu {width:90%;}
.button1 {width:40%; float:left;}
.button2 {width:35%; float:left;}
.button3 {width:40%; float:left;}
.button4 {width:35%; float:left;}

}


/* ab kleinerem Handy quer (getestet am iPone 5s) */
@media only screen and (max-width: 568px) and (orientation:landscape) {

a.Agelb:link {font-size:2vmax;}
a.Agelb:active {font-size:2vmax;}
a.Agelb:visited {font-size:2vmax;}
a.Agelb:hover {font-size:2vmax;}
/*Links grün*/ 
a.Agruen:link {font-size:2vmax;}
a.Agruen:active {font-size:2vmax;}
a.Agruen:visited {font-size:2vmax;}
a.Agruen:hover {font-size:2vmax;}
/*Links rot*/ 
a.Arot:link {font-size:2vmax;}
a.Arot:active {font-size:2vmax;}
a.Arot:visited {font-size:2vmax;}
a.Arot:hover {font-size:2vmax;}
/*Links blau*/ 
a.Ablau:link {font-size:2vmax;}
a.Ablau:active {font-size:2vmax;}
a.Ablau:visited {font-size:2vmax;}
a.Ablau:hover {font-size:2vmax;}
/*Links Impr*/ 
a.Aimpr:link {font-size:2vmax;}
a.Aimpr:active {font-size:2vmax;}
a.Aimpr:visited {font-size:2vmax;}
a.Aimpr:hover {font-size:2vmax;}

a.Textlink:link {color:#ffffff; font-size:1.5vmax; font-family: 'Josefin Sans', sans-serif; font-style:italic; text-decoration:none; line-height:1.3vmax; padding-top: 5px;}
a.Textlink:active {color:#ffffff; font-size:1vmax; font-family: 'Josefin Sans', sans-serif; font-style:italic; text-decoration:none; line-height:1.3vmax; padding-top: 5px;}
a.Textlink:visited {color:#ffffff; font-size:1vmax; font-family: 'Josefin Sans', sans-serif; font-style:italic; text-decoration:none; line-height:1.3vmax; padding-top: 5px;}
a.Textlink:hover {color:#ffffff; font-size:1vmax; font-family: 'Josefin Sans', sans-serif; font-style:italic; text-decoration:none; line-height:1.3vmax; padding-top: 5px;}

a.maillink {color:#ffffff; font-size:1vmax; font-family: 'Josefin Sans', sans-serif; line-height:1.3vmax; text-decoration:none; padding-top: 5px;}

p {color:#ffffff; font-size:2.5vmax; font-family: 'Josefin Sans', sans-serif; line-height:3vmax; padding-top: 5px;}

.scrollbereich {
  width:50%;
  margin-left: 50%;
  animation-name: AniKastenfünfzig;

}

}

/* ab kleinerem Handy hoch (getestet am iPone 5s) */
@media only screen and (max-width: 320px) and (orientation:portrait) {


.button1 {padding-bottom: 1%; float:left;}
.button2 {padding-bottom: 1%; float:right;}

a.Agelb:link {font-size:3vmax;}
a.Agelb:active {font-size:3vmax;}
a.Agelb:visited {font-size:3vmax;}
a.Agelb:hover {font-size:3vmax;}
/*Links grün*/ 
a.Agruen:link {font-size:3vmax;}
a.Agruen:active {font-size:3vmax;}
a.Agruen:visited {font-size:3vmax;}
a.Agruen:hover {font-size:3vmax;}
/*Links rot*/ 
a.Arot:link {font-size:3vmax;}
a.Arot:active {font-size:3vmax;}
a.Arot:visited {font-size:3vmax;}
a.Arot:hover {font-size:3vmax;}
/*Links blau*/ 
a.Ablau:link {font-size:3vmax;}
a.Ablau:active {font-size:3vmax;}
a.Ablau:visited {font-size:3vmax;}
a.Ablau:hover {font-size:3vmax;}
}


/* für große Bildschirme */
@media only screen and (min-width: 1920px) {

a.Agelb:link {font-size:1vmax;}
a.Agelb:active {font-size:1vmax;}
a.Agelb:visited {font-size:1vmax;}
a.Agelb:hover {font-size:1vmax;}
/*Links grün*/ 
a.Agruen:link {font-size:1vmax;}
a.Agruen:active {font-size:1vmax;}
a.Agruen:visited {font-size:1vmax;}
a.Agruen:hover {font-size:1vmax;}
/*Links rot*/ 
a.Arot:link {font-size:1vmax;}
a.Arot:active {font-size:1vmax;}
a.Arot:visited {font-size:1vmax;}
a.Arot:hover {font-size:1vmax;}
/*Links blau*/ 
a.Ablau:link {font-size:1vmax;}
a.Ablau:active {font-size:1vmax;}
a.Ablau:visited {font-size:1vmax;}
a.Ablau:hover {font-size:1vmax;}
/*Links Impressum*/ 
a.Aimpr:link {font-size:1vmax;}
a.Aimpr:active {font-size:1vmax;}
a.Aimpr:visited {font-size:1vmax;}
a.Aimpr:hover {font-size:1vmax;}


a.Textlink:link {color:#ffffff; font-size:0.9vmax; font-family: 'Josefin Sans', sans-serif; font-style:italic; text-decoration:none; line-height:1.2vmax; padding-top: 5px;}
a.Textlink:active {color:#ffffff; font-size:0.9vmax; font-family: 'Josefin Sans', sans-serif; font-style:italic; text-decoration:none; line-height:1.2vmax; padding-top: 5px;}
a.Textlink:visited {color:#ffffff; font-size:0.9vmax; font-family: 'Josefin Sans', sans-serif; font-style:italic; text-decoration:none; line-height:1.2vmax; padding-top: 5px;}
a.Textlink:hover {color:#ffffff; font-size:0.9vmax; font-family: 'Josefin Sans', sans-serif; font-style:italic; text-decoration:none; line-height:1.2vmax; padding-top: 5px;}

a.maillink {color:#ffffff; font-size:0.9vmax; font-family: 'Josefin Sans', sans-serif; line-height:1.2vmax; text-decoration:none; padding-top: 5px;}

p {color:#ffffff; font-size:0.9vmax; font-family: 'Josefin Sans', sans-serif; line-height:1.2vmax; padding-top: 5px;}

h2 {font-size: 1.2vw;}

h4 {font-size: 1.5vmax; padding-top: 0;}
h5 {font-size: 0.9vmax; line-height: 1.2vmax;}

.menu {padding-bottom: 5%;}


#logo {
  margin-top:120px;
  float:left;
  padding-left: 0;
  margin-left: 0;
  width:70%;
}

}