@font-face {
  font-family: ColabMed;
  src: url('ColabMed.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: fallback
}

@font-face {
  font-family: ColabReg;
  src: url('ColabReg.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: fallback
}

:root{
	--darkgrey: #3b3b3b;
	--white: #ffffff;
	--lime: #69DC11;
    --grade1: #3b3b3b;
    --grade2:
}

* { margin: 0; padding: 0 }

html { width: 100%; height: 100%; overflow: hidden }
body { background: #5b5b5b; font-family: ColabReg, Helvetica, Verdana, Arial, sans-serif; font-size: 1em; color: #333; width: 100%; height: 100%; overflow-y: scroll; overflow-x: hidden; perspective: 1px }
h1 { display: none }
h2, #policy h1, #imprint h1 { display: block; font-family: ColabMed, Helvetica, Verdana, Arial, sans-serif; font-size: 180%; text-transform: uppercase; text-align: center; color: var(--darkgrey); margin-bottom: 3rem }
h3, #policy h2, #imprint h2 { font-family: ColabMed, Helvetica, Verdana, Arial, sans-serif; font-size: 160%; text-transform: uppercase; color: var(--darkgrey); margin: 3rem 0 1rem 0; text-align: left }
h4 { font-family: ColabMed, Helvetica, Verdana, Arial, sans-serif; font-size: 140%; margin-bottom: 20px }
p { font-family: ColabReg, Helvetica, Verdana, Arial, sans-serif; font-size: 140%; margin: 0 0 20px 0 }
ul { margin: 0 0 20px 20px }
li { font-family: ColabReg, Helvetica, Verdana, Arial, sans-serif; font-size: 140% }
a { color: var(--lime); text-decoration: underline }
a:hover { text-decoration: none }
a:focus { color: var(--darkgrey); background: var(--lime); border: 1px solid var(--lime); outline: none }
strong { font-family: ColabMed, Helvetica, Verdana, Arial, sans-serif }

figure img { max-width: 100% }
figure { width: 30% }

#contentElements {  }
#contentElements section { padding: 2rem 2% 0 2% }

#generalHeader { position: sticky; top: 0; left: 0; background: var(--darkgrey) url(background.png) repeat; text-transform: uppercase; width: 100%; min-height: 120px; border-bottom: 1px solid var(--darkgrey); z-index: 110 }
#generalHeader a { text-decoration: none }
#generalHeader a:hover { text-decoration: underline }
.rmenu input[type="checkbox"], .rmenu .hamburger-lines { display: none }
.rmenu { z-index: 120; padding: 15px 0; max-width: 990px; margin: 0 auto }
.rmenu a { color: var(--white) }
.rmenu-container { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100% }
.logo, a.logo figure { height: 90px; display: inline-block; order: 1; width: 100%; border: 1px solid transparent }
a.logo:focus { background: none !important; border: 1px solid var(--lime); outline: none; text-decoration: none }
.logo img { max-height: 100% }
.menu-items { display: flex; gap: 40px; order: 2; margin: 0; }
.menu-items li { list-style-type: none; padding: 0 0 0 0 }
.support { width: 100% }

.content { position: relative; width: 100%; box-sizing: border-box; background-color: #EEEEEE }
.hidden, #policy h1, #imprint h1 { position: absolute !important; overflow: hidden; height: 1px }

#about-us .banner, #imprint .banner, #policy .banner { background: var(--lime); text-align: center; margin: 0; padding: 1px 0; width: 100%; max-width: 100% }
#about-us .banner figure, #imprint .banner figure, #policy .banner figure { display:table; border-top: 1px solid var(--darkgrey); border-bottom: 1px solid var(--darkgrey); width: 100% }
#about-us img, #imprint img, #policy img { margin-bottom: -4px }
#about-us div, #imprint div, #policy div { padding: 5rem 0; margin: 0 auto; max-width: 990px }

#generalFoot { background: linear-gradient(to bottom, #bbbbbb 1%,#a5a5a5 100%) }
.navFooter { background: #5b5b5b; background: linear-gradient(to bottom, #3b3b3b 1%,#5b5b5b 100%) }
.navFooter ul { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; padding: 1% 0; margin: 0; border-top: 1px solid var(--darkgrey), border-bottom: 1px solid var(--darkgrey) }
.navFooter li { margin-left: 0; list-style: none }
.navFooter a { color: var(--white); text-decoration: none }
.navFooter a:hover { text-decoration: underline }
.navFooter a:focus { color: var(--darkgrey); background: var(--lime); border: 1px solid var(--lime); outline: none }

@media screen and (min-width: 590px) {
  h2, #policy h1, #imprint h1 { font-size: 250% }
  #policy h2, #imprint h2 { font-size: 200% }
}

@media screen and (min-width: 790px) {
  .menu-items { align-items: center }
  h2, #policy h1, #imprint h1 { font-size: 325% }
}

@supports (font: -apple-system-body) and (-webkit-appearance: none) {
 @media screen and (max-width: 1020px) {

 }

 @media screen and (width: 1020px) {

 }
}

@media screen and (min-width: 1020px) {
  .logo { background-size: 306px 90px; width: 50% }
  #contentElements section { padding: 2rem 0 0 0; width: 80%; margin: 0 auto }
  h2, #policy h1, #imprint h1 { font-size: 350% }
  #policy h2, #imprint h2 { font-size: 200% }
}

@media screen and (min-width: 1400px) {
  h2, #policy h1, #imprint h1 { font-size: 400% }
}
