@font-face
{
  font-family: whynachten;
  src: url('itim.woff');
}

html
{
  scroll-behavior: smooth;
  width: 100%;
  min-width: 360px;
  min-height: 600px;
  overflow: auto;
  scroll-padding-top: 50px;
  background: url('background.png');
  background: linear-gradient(135deg, rgba(62,164,52,0.01) 0%, rgba(62,164,52,0.1) 80%, rgba(62,164,52,0.25) 115%), url('background.png');
  background-repeat: repeat;
  background-attachment: fixed;
}

::-webkit-scrollbar 
{
  width: 10px;
}

::-webkit-scrollbar-track 
{
  background: rgba(62, 164, 52, 0.125);
}

::-webkit-scrollbar-thumb 
{
  border-width: 2px;
  border-style: solid;
  background-color: rgba(0, 131, 48, 0.5);
  border-top-color: rgba(0, 131, 48, 0.8);
  border-left-color: rgba(0, 131, 48, 0.8);
  border-right-color: rgba(62, 164, 52, 0.1);
  border-bottom-color: rgba(62, 164, 52, 0.1);
  border-radius: 5px;
  transition: background-color 0.5s ease;
}

::-webkit-scrollbar-thumb:hover 
{
  background-color: rgba(0, 131, 48, 1);
  border-top-color: rgba(62, 164, 52, 0.1);
  border-left-color: rgba(62, 164, 52, 0.1);
  border-right-color: rgba(0, 131, 48, 0.8);
  border-bottom-color: rgba(0, 131, 48, 0.8);
}  

@media (max-width: 799px)
{
  html
  {
    scroll-padding-top: 150px;
  }
}

body 
{
  font-family: whynachten;
  line-height: 1.5em;
  font-size: 18px;
}

a:link,
a:visited
{
  color: #015921;
}

a:hover
{
  color: #619A76;
}

body > section
{
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  padding: 25px;
  border-radius: 65px 25px 10px 25px;
  position: relative;
  min-height: 80vh; 
  background-color: #D8F5D5;
  background: linear-gradient(135deg, rgba(62,164,52,0.35) 0%, rgba(62,164,52,0.2) 30%, rgba(62,164,52,0.05) 100%);
  box-shadow: 15px 15px 25px -10px rgba(28,102,55,0.35);
  background-repeat: repeat;
  text-shadow: 1px 1px rgba(255,255,255, 0.375);
}

body > section:not(.start):not(.start2):not(#rechtliches)
{
  border-style: solid;
  border-width: 1px;
  border-top-color: rgba(0,131,48,0.1);
  border-left-color: rgba(0,131,48,0.1);
  border-right-color: rgba(62,164,52,0.35);
  border-bottom-color: rgba(62,164,52,0.35);
}

@media (max-width: 500px)
{
  body > section
  {
    border-radius: 40px 25px 5px 25px;
  }
}

body > section.small
{
  min-height: 40vh;
}

body.desktop section.info:not(.start):not(.start2)
{
  backdrop-filter: blur(3px);
  background-color: rgba(255,255,255,0.25);
}

body.desktop section#rechtliches
{
  background-color: rgba(255,255,255,0.25);
}

body.mobile section.info
{
  background-color: rgba(255,255,255,0.75);
}
  

body > section.info.start
{
  background: none;
  background-image: url('baeume_680-550.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  max-width: 95vw;
  height: 81vw;
  min-height: unset;
  max-height: 80vh;
  background-color: transparent;
  box-shadow: none;
  margin-bottom: -150px;
  z-index: 500;
  backdrop-filter: none;
}

@media (min-width: 651px) and (min-height: 551px)
{
  body > section.info.start
  {
    background-image: url('baeume_805-650.png');
  }
}

@media (min-width: 806px) and (min-height: 651px)
{
  body > section.info.start
  {
    background-image: url('baeume_928-750.png');
  }
}

@media (min-width: 929px) and (min-height: 751px)
{
  body > section.info.start
  {
    background-image: url('baeume_1238-1000.png');
  }
}

@media (min-width: 1239px) and (min-height: 1001px) 
{
  body > section.info.start
  {
    background-image: url('baeume_3935-3179.png');
  }
}

body > section.info.start2
{
  background: none;
  background-color: #E73227;
  width: calc(100% - 180px);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align:center;
  padding: 50px;
  padding-left: 25px;
  padding-right: 25px;
  color: #FFFFFF;
  text-shadow: 1px 1px rgba(0,0,0, 0.75);
  font-size: 1.25em;
  font-weight: bold;
  min-height: unset;
  box-shadow: 15px 15px 25px -10px rgba(231,50,39,0.35);

}

body > section.info.start2:after
{
  position: absolute;
  top: -118px;
  left: -123px;
  height: 209px;
  width: 250px;
  content: "\00a0";
  background-image: url('foto4.png');
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
  /* z-index: 550; */
}

@media (max-width: 500px)
{
  body > section.info.start2:after
  {
    width: 150px;
    height: 125px;
    top: -70px;
    left: -74px;
  }
}

body > section.info.start2 > table
{
  font-size: 1em;
  margin: 0;
  border: none;
  width: 100%;
}

body > section.info.start2 > table td.qr
{
  display: none;
}


@media screen and (min-width:700px)
{
  body.desktop > section.info.start2 > table td
  {
    display: table-cell;
    width: 50%;
    vertical-align: middle;
    text-align: center;
  }

  body > section.info.start2 > table td > span.qr
  {
    display: inline-block;
    max-width: 150px;
    max-height: 150px;
    background-color: rgba(255, 255, 255, 0.75);
    padding: 5px;
    border-radius: 5px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
  }

  body > section.info.start2 > table td > span.qr > svg
  {
    max-width: 140px;
    max-height: 140px;
  }
}

body > section > h2
{
  margin-top: 0;
}

body > section#rechtliches
{
  margin-top: 7em;
  margin-bottom: 3em;
  background: none;
  min-height: unset;
  background-color: rgba(200,200,200,0.5);
  background: linear-gradient(135deg, rgba(150,160,150,0.7) 0%, rgba(150,160,150,0.55) 30%, rgba(150,160,150,0.5) 100%);
  
  color: #202020;
  text-shadow: none;
  line-height: 1.25em;
  font-size: 0.8em;
  box-shadow: 15px 15px 25px -10px rgba(0,0,0,0.125); 
}

section.info > div.content
{
  width: 100%;
  column-width: 300px;
  column-gap: 50px;
  column-count: auto;
  orphans: 3;
  widows: 3;
}

@media screen and (min-width: 731px)
{
  section.info > div.content + div.content
  {
    margin-top: 1.75em;
    padding-top: 1.75em;
    border-top: 1px dotted #A0A0A0;
  }
}

p
{
  margin: 0;
  margin-bottom: 1em;
}


section#rechtliches > div.content
{
  width: 680px;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-height: 300px;
  padding-right: 10%;
  overflow: auto;
}

body > section + section
{
  margin-top: 5em;
}

.top-nav 
{
  position: fixed;
  right: 30px;
  top: 40px;
  z-index: 1000;
  min-height: 100px;
  width: 350px;
  max-width: calc( 100vw - 60px );
  transition: right 0.5s ease, top 0.5s ease, width 0.5s ease;
}

.top-nav:before
{
  position: fixed;
  top: -210px;
  right: -30px;
  background-image: url('ast.png');
  background-repeat: no-repeat;
  width: 119px;
  height: 300px;
  content: "\00a0";
  transition: right 0.5s ease, top 0.5s ease;
}

@media screen and (min-width: 550px) and (max-height: 565px)
{
  .top-nav 
  {
    width: 400px;
  }
}

@media screen and (min-width: 700px)
{
  .top-nav { right: 80px; }
  .top-nav:before { right: 20px; }
}

@media screen and (min-width: 800px)
{
  .top-nav { right: 60px; }
  .top-nav:before { right: 0px; }
}
 
@media screen and (min-width: 1100px) and (min-height: 563px)
{
  .top-nav { top: calc( 100vh - 523px ); }
  .top-nav:before { top: calc( 100vh - 775px ); }
}

@media screen and (min-width: 1100px) and (min-height: 775px)
{
  .top-nav { top: 250px; }
  .top-nav:before { top: 0px; }
}

@media screen and (max-height: 600px)
{
  .top-nav 
  {
    top: 2px;
    right: 0;
  }
  .top-nav:before
  {
    display: none;
  }
}


.menu {
  list-style: none;
  display: none;
  margin: 0;
  padding: 0;
  position: relative;
  top: 50px;
  padding-inline-start: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  box-shadow: 15px 15px 25px -10px rgba(175,41,44,0.5);
  border-radius: 25px 0 25px 25px;
  z-index: 950;
}

#menu-toggle:checked ~ .menu
{
  display: block;
}  

div.corner
{
  display: none;
  position: absolute;
  right: 50px;
  top: 0;
  height: 50px;
  width: 50px;
  border-width: 0;
  border-radius: 50px;
  box-shadow: 37.5px 37.5px 0px 12.5px #AF332C;
  background-color: transparent;
  z-index: 900;
}

#menu-toggle:checked ~ div.corner
{
  display: block;
}

.menu > li 
{
  overflow: hidden;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.menu-button-container 
{
  width: 300px;
  max-width: 100%;
  position: absolute;
  top: 0;
  right: 0;
}

#menu-toggle 
{
  display: none;
}

.menu-button
{
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  height: 50px;
  width: 50px;
  border-radius: 25px;
  background-color: #AF332C;  
  cursor: pointer;
  color: #FFFFFF;
  font-size: 2em;
  text-align: center;
  line-height: 50px;
  z-index: 1100;
}

#menu-toggle:checked + .menu-button-container .menu-button 
{
  border-radius: 25px 25px 0 0;
 }

#menu-toggle ~ .menu li {}
#menu-toggle:checked ~ .menu li {
  height: auto;
}

.menu > li 
{
  margin: 0;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  color: white;
  background-color: #AF332C;
}

.menu > li:not(:last-child) 
{
  border-bottom-width: 1px;
  border-bottom-style: dotted;
  border-bottom-color: rgba(0, 0, 0, 0.5);
}

.menu > li:last-child
{
  padding-bottom: 25px;
  border-radius: 0 0 25px 25px;
}

.menu > li:first-child
{
  padding-top: 25px;
  border-radius: 25px 0 0 0;
}

.menu > li > a
{
  text-decoration: none;
  display: block;
  color: #FFFFFF;
  border-radius: 10px;
  padding: 10px;
  border-style: solid;
  border-width: 1px;
  border-color: transparent;
}

.menu > li > a:hover
{
  border-left-color: rgba(0, 0, 0, 0.4);
  border-top-color: rgba(0, 0, 0, 0.4);
  border-right-color: rgba(255, 255, 255, 0.3);
  border-bottom-color: rgba(255, 255, 255, 0.3);
  background-color: rgba(0, 0, 0, 0.25);
  box-shadow: 10px 10px 30px rgba(255, 255, 255, 0.1);
}

@media screen and (max-height: 475px)
{
  .menu > li 
  {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 0.125em;
    padding-bottom: 0.125em;
  }
  
  .menu > li:last-child
  {
    padding-bottom: 5px;
    border-radius: 0 0 5px 5px;
  }
  
  .menu > li:first-child
  {
    padding-top: 5px;
    border-radius: 5px 0 0 0;
  }
  
  .menu > li > a
  {
    padding: 5px;
  }
}