@font-face {
  font-family: RoboBold;
  src: url('Roboto-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: fallback
}

@font-face {
  font-family: RoboReg;
  src: url('Roboto-Light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: fallback
}

* { margin: 0; padding: 0 }

html { width: 100%; --top-spacing: 150px; scroll-padding-top: var(--top-spacing) }
body { background: #134b81; color: #000; font-family: RoboReg, Helvetica, Verdana, Arial, sans-serif; font-size: 1em; padding: var(--top-spacing) auto }
header {  }
h1, h2 { color: #134b81; font-family: RoboReg; font-size: 300%; text-transform: uppercase; margin-bottom: 30px }
.imprint h2, .privacy h2 { font-size: 200% }
h3 { font-size: 200% }
h4 { font-size: 150%; font-family: RoboBold }
section { padding: 15px 30px 50px 30px }
p { font-size: 150%; margin-bottom: 25px; line-height: 150% }
details { margin: 0 0 25px 5px; word-break: break-word }
details p { margin-bottom: 0 }
summary { font-size: 150%; list-style-type: none; list-style-image: url('list-plus-black.png'); cursor: pointer; word-break: break-word }
strong { font-family: RoboBold }
ul { margin-left: 40px }
li { list-style-type: none; list-style-image: url('list-arrow.png'); font-size: 150%; padding: 0 0 25px 0 }
footer { border-top: 10px solid #fff}
a { color: #fff; text-decoration: none }
.imprint a, .privacy a { color:#ef7d00 }
summary:hover, a:hover { color:#ef7d00; text-decoration: none }
img.picture { max-width: 100% }
figure.firstIMG { padding-top: 90px }

#contentElements { background: #fff }
#generalHeader { position: fixed; background: #134b81; box-shadow: 0px 0px 10px 0px #000; color: #fff; text-transform: none; width: 100%; z-index: 11 }
.rmenu input[type="checkbox"],
.rmenu .hamburger-lines { display: none }
.rmenu { z-index: 12; padding: 15px 30px }
.rmenu-container { display: flex; justify-content: space-between; width: 100% }
.menu-items { display: flex; gap: 40px; order: 2; padding: 20px 0 0 0 }
.menu-items li { list-style-image: none; padding: 0 0 20px 0 }
.menu-items li .en, .menu-items li .de { border-top: 3px dashed #ef7d00; padding: 5% 0; width: 60%; display: inline-block }
.logo { color: #fff; display: inline-block; order: 1; margin: 10px 10px 17px 10px }

.content { word-wrap: break-word; word-break: break-word; position: static }
.content h1, .content h2 { margin-top: 50px }
.content li { margin-left: 20px }
.blue { background: #134b81; color: #fff; position: static }
.blue h1, .blue h2 { color: #fff; margin-top: 50px }
.blue details:first-of-type { margin-top: 25px }
.blue summary { list-style-image: url('list-plus-white.png'); font-size: 100% }
.blue p { font-size: 100% }
.kennenSiedasIMG { text-align: center; overflow: hidden }
.kennenSiedasIMG img { max-width: 100% }

.contact div { padding: 15px 30px 50px 30px }
.contact div a { color: #134b81 }
.contact div a:hover { color:#ef7d00 }

.imprint h1, .privacy h1 { margin-top: 100px }

.navFooter { padding: 20px 30px }
.navFooter ul { display: flex; justify-content: center; gap: 20px }
.navFooter li { margin-left: 0; list-style-image: none }

@media screen and (min-width: 590px) {
  h1, h2 { font-size: 500% }
  p, summary, li { font-size: 150% }
  .menu-items li .en, .menu-items li .de { padding: 25px 0 25px 0 }

  .content { margin-top: 0 !important }
  .contact { position: relative; z-index: 9 }
  .contact div { position: absolute; top: 30%; left: 57%; color: #134b81; font-size: 90%; padding: 0; z-index: 10 }
  .contact div p:first-of-type { font-size: 200% }
}



@media screen and (min-width: 1020px) {
  .menu-items li .en, .menu-items li .de { border-top: none; padding: 0; width: auto; display: inline }
  .content, .blue div  { width: 75%; margin: auto }
  .contact div { font-size: 150% } 
  .imprint, .privacy { padding-top: 100px !important }
}

@media screen and (min-width: 1190px) {
  .content, .blue div  { width: 50%; margin: auto }
}

@media (max-width: 1022px) {

  .rmenu-container { display: block; position: relative; height: 64px }
  .rmenu-container input[type="checkbox"] { position: absolute; top: 20px; right: 20px; display: block; width: 35px; height: 32px; z-index: 5; opacity: 0 }

  .rmenu-container .hamburger-lines { position: absolute; top: 20px; right: 20px; display: flex; flex-direction: column; justify-content: space-between; width: 35px; height: 23px; margin-bottom: 5px; z-index: 2 }
  .rmenu-container .hamburger-lines .line { display: block; border-radius: 10px; background: #ef7d00; height: 4px; width: 100% }
  .rmenu-container .hamburger-lines .line1 { transform-origin: 0% 0%; transition: transform 0.4s ease-in-out }
  .rmenu-container .hamburger-lines .line2 { transition: transform 0.2s ease-in-out }
  .rmenu-container .hamburger-lines .line3 { transform-origin: 0% 100%; transition: transform 0.4s ease-in-out }

  .rmenu .menu-items { background: #134b81; transform: translate(-150%); display: flex; flex-direction: column; transition: transform 0.5s ease-in-out; box-shadow: 5px 0px 10px 0px #000; max-width: 300px; height: 100vh; padding-top: 20px; margin-left: -40px; padding-left: 50px }

  .rmenu-container input[type="checkbox"]:checked ~ .menu-items { transform: translateX(0) }
  .rmenu-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 { transform: rotate(35deg) }
  .rmenu-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 { transform: scaleY(0) }
  .rmenu-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 { transform: rotate(-35deg) }
}

@media (max-width: 590px) {
/* .hamburger-lines, .menu-items { display: none !important } */
  .menu-items { gap: 10px }
  .menu-items li { padding: 0 0 5px 0 }
}