/* ### General site ### */

.h-body {
   padding: 0;
   margin: 0;
   background-color: #FFF;
}

.h-header {
   font-family: caveat;
   border-bottom: 2px black solid;
   margin-bottom: 15px;
}

.h-header .h-title {
   text-align: center;
   font-size: 60px;
}

.h-header .h-title a {
   text-decoration: none;
   color: unset;
}

.h-header .h-title img {
   width:50px;
   padding-left:5px;
   top:4px;
   position:relative;
}

.h-header .h-navbar {
   margin-bottom: 10px;
}

.h-content {
   margin-left: auto;
   margin-right: auto;
   display: flex;
   font-size: 18px;
   hyphens: auto;
   -webkit-hyphens: auto;
}

.h-content.disabled {
   opacity: 0.3;
   pointer-events: none;
}

.h-welcome {
   margin-left: auto;
   margin-right: auto;
   display: flex;
   height: 35px;
}

.h-welcome .h-company-select a {
   color: #000;
   text-align: right;
}

.h-main {
   float: left;
   font-family: helvetica;
   padding-bottom: 50px;
   min-height: 800px;
}

.h-content-body, .h-headline {
   width: 800px;
   margin-left: auto;
   margin-right: auto;
   font-family: roboto;
}

.h-headline {
   margin-bottom: 15px;
   font-size: 36px;
   line-height: 36px;
   clear: both;
}

.h-introduction {
   font-size: 18px;
   margin-bottom: 15px;
}

.h-introduction a {
   color: inherit;
}

.h-gap {
   padding-top: 20px;
}

.h-name-input .k-input {
   width: 100%;
   font-size: 30px;
   margin-bottom: 10px;
   border: 0;
}

.h-name-input input {
   text-align: center;
}

.h-section {
   width: 100%;
   clear: both;
}

.h-section-title {
   text-align: left;
   padding: 2px;
   font-stretch: extra-expanded;
   font-size: 20px;
   font-weight: bold;
   border-bottom: 1px dotted #666;
}

.h-section .r-tab {
   border: 0 !important;
   padding: 0 !important;;
}

.h-section .r-tab-strip {
   border: 0;
   background: inherit;
   padding: 0 !important;
}

.h-section .k-tabstrip-items-wrapper {
   display: none;
}

.h-section .h-section-body {
   padding: 10px 15px 0 15px;
}

.h-section .h-section-body .h-label {
   margin-left: 20px;
   margin-right: 20px;
   margin-top: 2px;
   font-size: 20px;
   float: left;
}

.h-section .h-section-body .h-label:not([style*="display:none"]) + .h-label:not([style*="display:none"]) {
   margin-left: 0;
}

.h-section .h-section-body .h-errorlist {
  padding-top: 5px;
  margin: 10px 0 0 0;
  text-align: left;
  display: grid;
}

.h-section .h-section-body .h-comment {
   padding: 5px 0 10px 0;
   font-size: 17px;
   color: #2e2e2e;
   clear: both;
}

.h-section .h-section-body .h-comment:first-child {
   padding-top: 0;;
}

.h-section .h-section-body .h-left {
   text-align: left;
}

.h-section .h-section-body .h-right {
   text-align: right;
}

.h-sidebox-left, .h-sidebox-right {
   float: left;
   width: 200px;
   min-width: 200px;
   margin-top: 35px;
   font-family: roboto;
   font-size: 14px;
}

.h-sidebox-left {
   margin-left: auto;
   margin-right: 10px;
}

.h-sidebox-right {
   margin-right: auto;
   margin-left: 10px;
}

.h-footer {
   width: 100%;
   font-family: roboto;
   position: fixed;
   bottom: 0px;
   background: inherit;
   padding-top: 10px;
   border-top: 2px black solid;
   clear: both;
}

.h-copyright {
   text-align: left;
   margin-left: 10px;
   padding-top: 0;
   float: left;
   top: -5px;
   position: relative;
   color: grey;
}

.h-updated {
   text-align: right;
   margin-right: 10px;
   padding-top: 0;
   float: right;
   top: -5px;
   position: relative;
   color: grey;
}

.h-impressum {
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   width: 300px;
   top: -6px;
   position: relative;
}

.h-impressum a {
   color: grey;
}



/* ### Forms ### */

.r-form-row p.help {
   font-size: 18px;
   font-style: italic;
   color: grey;
}

.r-form-row.r-lined:not(:first-child) {
   border-top: 1px dotted #666 !important;
}



/* ### Handy Portrait Mode ### */

@media only screen {
   .h-mobile .h-header {
      padding-bottom: 0px;
   }
   .h-mobile .h-header .h-title {
      font-size: 90px;
   }
   .h-mobile .h-header .h-navbar {
      display: none;
      background: white;
      margin-left: auto;
      margin-right: auto;
      width: 800px;
      height: 100%;
   }
   .h-mobile .h-welcome {
      padding-top: 10px;
      padding-bottom: 10px;
      font-size: 40px;
   }
   .h-mobile .h-main {
      margin-left: auto;
      margin-right: auto;
   }
   .h-mobile .h-headline {
      padding-top: 26px;
   }
   .h-mobile .h-headline-wrap {
      font-size: 26px;
   }
   .h-mobile .h-headline-wrap h1 {
      margin-bottom: 20px;
   }
   .h-mobile .h-introduction {
      font-size: 24px;
   }
   .h-mobile .k-button-text {
      font-size: 24px;
   }
   .h-mobile .h-content .r-navbar-vertical {
      padding-top: 20px;
      font-family: roboto;
   }
   .h-mobile .h-content .r-navbar-vertical .r-navbar-entry {
      font-size: 50px;
      clear: both;
   }
   .h-mobile .h-content .r-navbar-vertical .k-icon.k-i-cart {
      font-size: 60px !important;
   }
   .h-mobile .h-content .r-navbar-vertical .r-navbar-level-1 {
      padding-left: 50px;
   }
   .h-mobile .h-content .r-navbar-vertical .r-navbar-level-2 {
      padding-left: 100px;
   }
   .h-mobile .h-content .r-page-intro {
      font-size: 30px
   }
   .h-mobile .h-sidebox-left, .h-mobile .h-sidebox-right {
      display: none;
   }
   .h-mobile .h-sidebox-left {
      width: 410px;
   }
   .h-mobile .h-sidebox-left .k-tabstrip-items {
      width: 100%;
   }
   .h-mobile .h-sidebox-left .k-tabstrip .k-link {
      font-size: 28px;
   }
   .h-mobile .h-sidebox-left .k-tabstrip .h-close {
      margin-left: auto;
   }
   .h-mobile .h-sidebox-left .k-tabstrip .h-close span {
      font-size: 32px;
      top: 15px;
      right: 15px;
   }
   .h-mobile .h-sidebox-right {
      width: 410px;
   }
   .h-mobile .h-sidebox-right .k-tabstrip-items {
      width: 100%;
   }
   .h-mobile .h-sidebox-right .k-tabstrip .k-link {
      font-size: 28px;
   }
   .h-mobile .h-footer {
      display: none;
   }
}



/* ### Handy Landscape Mode ### */

@media only screen and (orientation:landscape) {
   .h-mobile .h-sidebox-left .k-tabstrip .h-close {
      width: 115px;
      text-align: right;
   }
   .h-mobile .h-sidebox-left .k-tabstrip .h-close span {
      font-size: 20px;
      top: 4px;
   }
}