/* libre-baskerville-regular - latin */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  src: url('/css/fonts/libre-baskerville-v7-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Libre Baskerville'), local('LibreBaskerville-Regular'),
       url('/css/fonts/libre-baskerville-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/css/fonts/libre-baskerville-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/css/fonts/libre-baskerville-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/css/fonts/libre-baskerville-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/css/fonts/libre-baskerville-v7-latin-regular.svg#LibreBaskerville') format('svg'); /* Legacy iOS */
}        
@font-face {
  font-family: 'Merienda';
  font-style: normal;
  font-weight: 400;
  src: url('/css/fonts/Merienda-Regular.ttf'); /* IE9 Compat Modes */
  src: local('Merienda'), local('Merienda-regular'),
       url('/css/fonts/Merienda-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
}       
        /*GLOBAL */ 
        * {padding: 0; margin: 0; }
        h1 {text-align:left; color: #a61757; font-family: 'Libre Baskerville'; font-size: 150%; font-style: normal; line-height: 1.2;  }
        h2 {color: #6c6a03; font-family: 'Merienda'; font-size: 40px; font-style: normal; font-weight: 400; line-height: 1; }   /* Startseite */
        h3 {text-align:left; color: #a61757; font-family: 'Libre Baskerville'; font-size: 110%; font-style: normal; line-height: 1.2;  }
        body {background-color: #637D32; color: #637D32; font-weight: 300; font-family: 'Libre Baskerville'; font-size: 100%; line-height: 1.8; box-sizing: border-box; hyphens: auto; word-wrap: break-word;}
        
/*        body ul li {margin-left: 16px; }     */
        div#box-rahmen    {clear: both; float:none; }
        div#box-text { float:left;  margin-right: 15px;margin-bottom: 15px;  padding: 0px; float: left; width: 390px; }
        div#box-text-schmal { float:left;  margin-right: 15px;margin-bottom: 15px;  padding: 0px; float: left; width: 190px;  background-color: #E5E080; }
        div#box-text-breit { float:left;  margin-right: 80px;margin-bottom: 15px;  padding: 0px; float: left; width: 550px; background-color: #E5E080;  }
        div#box { float:left; margin-right: 15px;margin-bottom: 15px;  padding: 10px; float: left; width: 370px; background-color: #f4ca66; }
        div#box a {color: #637D32; text-decoration: none;  }
        div#box-titelbild { margin-right: 15px;margin-bottom: 15px;  padding: 0px; float: left; width: 390px; height: 520px; }
        div#banner-top {background-color: #637D32; color: #E5E080;  padding-top: 0px; padding-bottom: 0px; width: 100%; display: block; margin: 0px;  }
        div#banner-top ul li {background-color: #637D32; }
        #top-menu {background-color: #637D32; }
        div#foot {background-color: #637D32; color: #E5E080;  height : 30px;  width: 100%; bottom: 0px; display: block; margin: 0px; position: absolute; bottom: 0; position: -webkit-sticky; position: sticky; }
        div#banner-foot {clear:both; margin-left:auto; margin-right:auto; padding-top: 5px; width: 850px; font-weight: 300; font-family: 'Open Sans',sans-serif;font-size: 80%; }
        div#banner-foot a {color: #E5E080; text-decoration: none;  }
        div#rahmen { clear:both;; background-color:#E5E080 ; width: 100%; height: auto; }
        div#seite { background-color:#E5E080; margin-left:auto; margin-right:auto; width: 850px; padding-bottom: 60px;  }
        div#seite b {font-weight: 900;}
        div#seite a { color: #637D32;text-decoration: none;}
        #seite ul li {margin-left: 16px; }
        div#lied {color:#A61757;line-height: 1.5;}
        div#lied a{color:#A61757; text-decoration: none;}
        
        /* PRINT VERSION */
        @media print {
            div#seite {background-color: #FFFFFF; color: #000;  }
            #top-menu  { display: none; }
            div#banner-top { display: none; }
        }
        /* MOBILE VERSION  */
        @media only screen and (max-width: 849px) {
            h1 { margin-top: 25px; margin-bottom: 25px;}
            h2 { margin-top: 25px; margin-bottom: 25px;font-size:33px; }
            img {height: auto; width: 90% }
            div#seite { width: 90%; padding-top: 20px;}
            div#box { width:95%}
            div#banner-foot {padding-top: 5px; width: 85%;  }
            div#banner-top { height:35px; position: -webkit-sticky; /* Safari */  position: sticky;  top: 0; }
            #top-menu  { display: block; visibility: hidden; line-height: 2.0; z-index: 1; top:30px; left:0; overflow-x: hidden; height:100%; transition: 0.2s; position: fixed; }
            #top-menu ul li {background-color: #637D32;}
            #top-menu .openbtn {display:inline;}
            #top-menu a {color: #E5E080; text-decoration: none; font-family: 'Open Sans',sans-serif;font-size: 15px; position: relative; padding-left: 20px;   }
            #top-menu .dropdown-content a {display: block; padding-left: 50px;  }
            #top-menu a:hover {color: #12719d;    }
            .openbtn { margin:0; width: 60px;color: #E5E080; font-size: 18px;   cursor: pointer;border: none;background-color: #637D32; } 
            .closebtn { visibility: hidden; margin-left:0; padding-left: 270px;color: #E5E080; font-size: 18px;   cursor: pointer;border: none;background-color: #637D32; } 
        }
        /* DESKTOP VERSION */
        @media only screen and (min-width: 850px) {
            h1 { margin-top: 20px; margin-bottom: 20px;}
            h2 { margin-top: 60px; margin-bottom: 50px;}
            div#seite {width: 850px; padding-top: 30px; }
            img {height: auto; width: 390px; margin-right: 10px; }  /* Breite der Box + padding rechts und links */
            img#zyklus {width: 100px; float: left; }
            div#banner-top {background-color: #637D32; color: #E5E080;  padding-top: 0px; padding-bottom: 0px; width: 100%; display: block; margin: 0px; position: -webkit-sticky; /* Safari */  position: sticky;  top: 0; height : 50px; }
            #top-menu  {margin-left:auto; margin-right:auto; margin-top: 20px; width: 850px; list-style: none;color: #E5E080; line-height:22px; font-weight: 300; font-family: 'Open Sans',sans-serif;font-size: 15px; position: relative; }
            #top-menu a {color: #E5E080; text-decoration: none; visibility: visible; width: auto; }
            #top-menu a:hover {color: #12719d;  width: auto;  }
            #top-menu li {display: inline; padding-right: 20px; display: inline-block; width: auto;background-color: #637D32; }
            #top-menu ul { display: inline; width: auto; background-color: #637D32; }
            #top-menu .dropdown-content { display: none;z-index: 1;min-width: 160px; width: auto; position: absolute; background-color: #637D32; }
            #top-menu .dropdown-content a{display: block; margin: 15px; background-color: #637D32;}
            #top-menu .dropdown:hover .dropdown-content { display: block; background-color: #637D32; }
            #top-menu li.dropdown {display: inline-block; width: auto;background-color: #637D32;}
            .openbtn {display: none;}
            .closebtn {display: none;}
         }
 
/* Überschrift  #A61757 
/* Box-Orange   #F4CA66 
/* Menu-Grün    #637D32
/* Seiten-Gelb  #E5E080 */