#cursor-ring
{
   position: fixed;
   left: 0;
   top: 0;

   width: 50px;
   height: 50px;

   border: 1px solid #3C3C3C;
   border-radius: 50%;
   background-color: transparent;

   pointer-events: none;
   z-index: 999999;

   opacity: 0;

   transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
   will-change: transform;

   transition:
      width 0.2s ease-out,
      height 0.2s ease-out,
      border-color 0.2s ease-out,
      background-color 0.2s ease-out,
      opacity 0.2s ease-out;
}

#cursor-ring.hover
{
   width: 100px;
   height: 100px;

   border-color: transparent;
   background-color: rgba(60, 60, 60, 0.12);
}

/* Auf Touchgeräten wird der Effekt ausgeblendet */
@media (hover: none), (pointer: coarse)
{
   #cursor-ring
   {
      display: none;
   }
}
body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: "Courier Prime";
   font-weight: normal;
   font-size: 13px;
   line-height: 140%;
   margin: 0;
   padding: 0;
}
a
{
   color: #464646;
   text-decoration: none;
}
a:hover
{
   color: #8C8C8C;
   text-decoration: none;
}
.visibility-hidden
{
   visibility: hidden;
}
#Layer1
{
   background-color: transparent;
   background-image: url('./images/johannes%2draschke.jpg');
   background-repeat: repeat;
   background-position: right center;
   background-size: cover;
   border-radius: 0px;
   margin: 0;
}
#wb_contentgrid
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background-color: transparent;
   background-image: none;
   border: 0px solid #CCCCCC;
   border-radius: 0px;
   box-sizing: border-box;
   margin: 0;
}
#contentgrid
{
   box-sizing: border-box;
   padding: 0 0 180px 0;
   margin-right: auto;
   margin-left: auto;
}
#contentgrid > .row
{
   margin-right: 0;
   margin-left: 0;
}
#contentgrid > .row > .col-1, #contentgrid > .row > .col-2
{
   box-sizing: border-box;
   font-size: 0;
   min-height: 1px;
   padding-right: 0px;
   padding-left: 0px;
   position: relative;
}
#contentgrid > .row > .col-1, #contentgrid > .row > .col-2
{
   float: left;
}
#contentgrid > .row > .col-1
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   width: 75%;
   text-align: left;
}
#contentgrid > .row > .col-2
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   width: 25%;
   text-align: left;
}
#contentgrid:before,
#contentgrid:after,
#contentgrid .row:before,
#contentgrid .row:after
{
   display: table;
   content: " ";
}
#contentgrid:after,
#contentgrid .row:after
{
   clear: both;
}
@media (max-width: 1000px)
{
#contentgrid > .row > .col-1, #contentgrid > .row > .col-2
{
   float: none;
   width: 100% !important;
}
}
#wb_footergrid
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background-color: transparent;
   background-image: none;
   border-top-width: 1px;
   border-right-width: 0px;
   border-bottom-width: 0px;
   border-left-width: 0px;
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   border-top-color: #C0C0C0;
   border-right-color: #C0C0C0;
   border-bottom-color: #C0C0C0;
   border-left-color: #C0C0C0;
   box-sizing: border-box;
   margin: 0;
}
#footergrid
{
   box-sizing: border-box;
   padding: 0;
   margin-right: auto;
   margin-left: auto;
}
#footergrid > .row
{
   margin-right: 0;
   margin-left: 0;
}
#footergrid > .row > .col-1, #footergrid > .row > .col-2, #footergrid > .row > .col-3, #footergrid > .row > .col-4
{
   box-sizing: border-box;
   font-size: 0;
   min-height: 1px;
   padding-right: 0px;
   padding-left: 0px;
   position: relative;
}
#footergrid > .row > .col-1, #footergrid > .row > .col-2, #footergrid > .row > .col-3, #footergrid > .row > .col-4
{
   float: left;
}
#footergrid > .row > .col-1
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   width: 25%;
   text-align: left;
}
#footergrid > .row > .col-2
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   width: 25%;
   text-align: left;
}
#footergrid > .row > .col-3
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   width: 25%;
   text-align: left;
}
#footergrid > .row > .col-4
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   width: 25%;
   text-align: left;
}
#footergrid:before,
#footergrid:after,
#footergrid .row:before,
#footergrid .row:after
{
   display: table;
   content: " ";
}
#footergrid:after,
#footergrid .row:after
{
   clear: both;
}
@media (max-width: 1000px)
{
#footergrid > .row > .col-1, #footergrid > .row > .col-2, #footergrid > .row > .col-3, #footergrid > .row > .col-4
{
   float: none;
   width: 100% !important;
}
}
#wb_Text13 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid transparent;
   border-radius: 0px;
   padding: 30px 20px 0 0;
   margin: 0;
   text-align: left;
}
#wb_Text13 div
{
   text-align: left;
}
#wb_Text13
{
   display: block;
   margin: 0;
   box-sizing: border-box;
   width: 100%;
}
#wrapper-navi
{
   background-color: #FFFFFF;
   background-image: none;
}
#wrapper-navi_panel
{
   background-color: #FFFFFF;
   background-image: none;
   border-top-width: 0px;
   border-right-width: 0px;
   border-bottom-width: 0px;
   border-left-width: 1px;
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   border-top-color: #000000;
   border-right-color: #000000;
   border-bottom-color: #000000;
   border-left-color: #C0C0C0;
   box-sizing: border-box;
   display: none;
   position: fixed;
   top: 0;
   height: 100%;
   width: 321px;
   z-index: 9999;
}
#wrapper-hamburger
{
   background-color: transparent;
   background-image: url('./images/hamburger%2dwhite.svg');
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 50px 50px;
   border-radius: 0px;
}
#wrapper-close
{
   background-color: transparent;
   background-image: url('./images/close%2d505050.svg');
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 50px 50px;
   border-radius: 0px;
}
#wb_Text4 
{
   background-color: transparent;
   background-image: none;
   border-top-width: 1px;
   border-right-width: 0px;
   border-bottom-width: 0px;
   border-left-width: 0px;
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   border-top-color: #C0C0C0;
   border-right-color: #DCDCDC;
   border-bottom-color: #C0C0C0;
   border-left-color: #DCDCDC;
   border-radius: 0px;
   padding: 20px 0 15px 0;
   margin: 0;
   text-align: left;
}
#wb_Text4 div
{
   text-align: left;
}
#wb_Text4
{
   display: block;
   margin: 0;
   box-sizing: border-box;
   width: 100%;
}
#sidepanel
{
   background-color: #FFFFFF;
   background-image: none;
   border-radius: 0px;
}
#wrapper-menu
{
   background-color: #FFFFFF;
   background-image: none;
   border-radius: 0px;
   padding: 0;
}
#wb_johannesraschke 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid transparent;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: right;
}
#wb_johannesraschke div
{
   text-align: right;
}
#wb_languageswitch 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid transparent;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: center;
}
#wb_languageswitch div
{
   text-align: center;
}
#wb_instagram-linkedin 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid transparent;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_instagram-linkedin div
{
   text-align: left;
}
#wb_Text2 
{
   background-color: transparent;
   background-image: none;
   border-top-width: 1px;
   border-right-width: 0px;
   border-bottom-width: 0px;
   border-left-width: 0px;
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   border-top-color: #C0C0C0;
   border-right-color: #DCDCDC;
   border-bottom-color: #C0C0C0;
   border-left-color: #DCDCDC;
   border-radius: 0px;
   padding: 20px 0 15px 0;
   margin: 0;
   text-align: left;
}
#wb_Text2 div
{
   text-align: left;
}
#wb_Text2
{
   display: block;
   margin: 0;
   box-sizing: border-box;
   width: 100%;
}
#wb_Text3 
{
   background-color: transparent;
   background-image: none;
   border-top-width: 1px;
   border-right-width: 0px;
   border-bottom-width: 0px;
   border-left-width: 0px;
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   border-top-color: #C0C0C0;
   border-right-color: #DCDCDC;
   border-bottom-color: #C0C0C0;
   border-left-color: #DCDCDC;
   border-radius: 0px;
   padding: 20px 0 15px 0;
   margin: 0;
   text-align: left;
}
#wb_Text3 div
{
   text-align: left;
}
#wb_Text3
{
   display: block;
   margin: 0;
   box-sizing: border-box;
   width: 100%;
}
#overlay
{
   background-color: rgba(255,255,255,0.08);
   background-image: none;
   border-radius: 0px;
}
#wb_Text6 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid transparent;
   border-radius: 0px;
   padding: 70px 20px 0 0;
   margin: 0;
   text-align: left;
}
#wb_Text6 div
{
   text-align: left;
}
#wb_Text6
{
   display: block;
   margin: 0;
   box-sizing: border-box;
   width: 100%;
}
#wb_Text7 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid transparent;
   border-radius: 0px;
   padding: 20px 20px 0 0;
   margin: 0;
   text-align: left;
}
#wb_Text7 div
{
   text-align: left;
}
#wb_Text7
{
   display: block;
   margin: 0;
   box-sizing: border-box;
   width: 100%;
}
#wb_Text5 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid transparent;
   border-radius: 0px;
   padding: 20px 20px 0 0;
   margin: 0;
   text-align: left;
}
#wb_Text5 div
{
   text-align: left;
}
#wb_Text5
{
   display: block;
   margin: 0;
   box-sizing: border-box;
   width: 100%;
}
#wb_Text14 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid transparent;
   border-radius: 0px;
   padding: 0 20px 0 0;
   margin: 0;
   text-align: left;
}
#wb_Text14 div
{
   text-align: left;
}
#wb_Text14
{
   display: block;
   margin: 0;
   box-sizing: border-box;
   width: 100%;
}
#wb_Text15 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid transparent;
   border-radius: 0px;
   padding: 20px 20px 0 0;
   margin: 0;
   text-align: left;
}
#wb_Text15 div
{
   text-align: left;
}
#wb_Text15
{
   display: block;
   margin: 0;
   box-sizing: border-box;
   width: 100%;
}
#wb_Text16 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid transparent;
   border-radius: 0px;
   padding: 0 20px 0 0;
   margin: 0;
   text-align: left;
}
#wb_Text16 div
{
   text-align: left;
}
#wb_Text16
{
   display: block;
   margin: 0;
   box-sizing: border-box;
   width: 100%;
}
#wb_Text17 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid transparent;
   border-radius: 0px;
   padding: 20px 30px 80px 0;
   margin: 0;
   text-align: left;
}
#wb_Text17 div
{
   text-align: left;
}
#wb_Text17
{
   display: block;
   margin: 0;
   box-sizing: border-box;
   width: 100%;
}
#wb_uid4
{
   color: #5A5A5A;
   font-family: "Calling Code";
   font-size: 16px;
   letter-spacing: 0.07px;
   line-height: 20px;
}
#wb_instagram-linkedin
{
   position: absolute;
   left: 0px;
   top: 295px;
   width: 171px;
   height: 24px;
   z-index: 15;
}
#wb_uid3
{
   color: #5A5A5A;
   font-family: "Calling Code";
   font-size: 16px;
   letter-spacing: 0.07px;
   line-height: 20px;
}
#wb_johannesraschke
{
   position: absolute;
   left: 0px;
   top: 127px;
   width: 171px;
   height: 24px;
   text-align: right;
   z-index: 13;
}
#wb_uid2
{
   color: #5A5A5A;
   font-family: "Calling Code";
   font-size: 16px;
   letter-spacing: 0.07px;
   line-height: 20px;
}
#wb_Text4
{
   margin-left: 30px;
   width: calc(100% - 30px);
}
#wb_style
{
   position: absolute;
   left: 81px;
   top: 53px;
   width: 50px;
   height: 50px;
   z-index: 26;
}
#wb_uid1
{
   color: #5A5A5A;
   font-family: "Calling Code";
   font-size: 16px;
   letter-spacing: 0.07px;
   line-height: 20px;
}
#wrapper-hamburger
{
   position: fixed;
   text-align: left;
   left: auto;
   right: 10px;
   top: 10px;
   width: 60px;
   height: 60px;
   z-index: 21;
   mix-blend-mode: difference;
   z-index: 1000;
}
#wrapper-menu
{
   position: absolute;
   text-align: left;
   left: 0px;
   top: 81px;
   width: 100%;
   height: 399px;
   z-index: 12;
}
#wb_uid0
{
   color: #5A5A5A;
   font-family: "Calling Code";
   font-size: 16px;
   letter-spacing: 0.07px;
   line-height: 20px;
}
#wb_Extension1
{
   position: absolute;
   left: 1px;
   top: 480px;
   width: 50px;
   height: 50px;
   z-index: 20;
}
#wb_Text2
{
   margin-left: 30px;
   width: calc(100% - 30px);
}
#sidepanel
{
   position: fixed;
   overflow: hidden;
   text-align: left;
   visibility: hidden;
   left: 0;
   top: 0;
   bottom: 0;
   width: 70px;
   z-index: 22;
}
#wb_Text3
{
   margin-left: 30px;
   width: calc(100% - 30px);
}
#wrapper-navi
{
   text-align: left;
}
#wb_languageswitch
{
   position: absolute;
   left: 1px;
   top: 222px;
   width: 90px;
   height: 24px;
   text-align: center;
   z-index: 14;
}
#Layer1
{
   position: relative;
   text-align: center;
   width: 970px;
   height: 100vh;
   float: left;
   display: inline-block;
   z-index: 25;
   z-index: -999;
}
#wrapper-close
{
   position: absolute;
   text-align: left;
   right: 0px;
   top: 0px;
   width: 60px;
   height: 60px;
   z-index: 11;
}
#overlay
{
   position: fixed;
   text-align: left;
   visibility: hidden;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   z-index: 24;
}
#Layer1_Container
{
   width: 970px;
   position: relative;
   margin-left: auto;
   margin-right: auto;
   text-align: left;
}
@media screen and (max-width: 1000px) {
.footertext {
   text-align: left;
}
}

@media screen and (min-width: 1001px) {
.footertext {
   text-align: right;
}
}

@media screen and (max-width: 680px) {
#Layer1 {
   min-width: calc(100% - 70px);
   max-width: calc(100% - 70px);
   margin-left: 70px;
   height: calc(100vh - 300px);
}
#contentgrid {
   margin-left: 70px;
}
#wb_footergrid {
   min-width: calc(100% - 70px);
   max-width: calc(100% - 70px);
   margin-left: 70px;
   margin-top: 130px;
}
}

@media screen and (min-width: 681px) {
#Layer1 {
   min-width: 70%;
   max-width: 70%;
   margin-left: 30%;
   height: calc(100vh - 150px);
}
#contentgrid {
   margin-left: 30%;
}
#wb_footergrid {
   min-width: 70%;
   max-width: 70%;
   margin-left: 30%;
   margin-top: 130px;
}
}


@font-face {
    font-family: 'Calling Code';
    src: url('fonts/CallingCode-BoldItalic.eot');
    src: url('fonts/CallingCode-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/CallingCode-BoldItalic.woff2') format('woff2'),
        url('fonts/CallingCode-BoldItalic.woff') format('woff'),
        url('fonts/CallingCode-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Calling Code';
    src: url('fonts/CallingCode-Regular.eot');
    src: url('fonts/CallingCode-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/CallingCode-Regular.woff2') format('woff2'),
        url('fonts/CallingCode-Regular.woff') format('woff'),
        url('fonts/CallingCode-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Calling Code';
    src: url('fonts/CallingCode-Italic.eot');
    src: url('fonts/CallingCode-Italic.eot?#iefix') format('embedded-opentype'),
        url('fonts/CallingCode-Italic.woff2') format('woff2'),
        url('fonts/CallingCode-Italic.woff') format('woff'),
        url('fonts/CallingCode-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Calling Code';
    src: url('fonts/CallingCode-Bold.eot');
    src: url('fonts/CallingCode-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/CallingCode-Bold.woff2') format('woff2'),
        url('fonts/CallingCode-Bold.woff') format('woff'),
        url('fonts/CallingCode-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@media screen and (max-width: 680px) {
#wrapper-navi_panel {
   width: calc(100% - 70px);
}
.navigationmenu {
   font-size: 20px;
}
}

@media screen and (min-width: 681px) {
#wrapper-navi_panel {
   width: 70%;
}
.navigationmenu {
   font-size: 3.5vw;
}
}

.rotated {
-moz-transform: rotate(-90deg) translate(0, 100%);
-moz-transform-origin: 0% 100%;
-o-transform: rotate(-90deg) translate(0, 100%);
-o-transform-origin: 0% 100%;
-webkit-transform: rotate(-90deg) translate(0, 100%);
-webkit-transform-origin: 0% 100%;
-ms-transform: translate(0%, 106%) rotate(-90deg);
-ms-transform-origin: 0% 0%;
transform: translate(0%, 106%) rotate(-90deg);
transform-origin: 0% 0%;
}


@font-face {
    font-family: 'Calling Code';
    src: url('fonts/CallingCode-BoldItalic.eot');
    src: url('fonts/CallingCode-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/CallingCode-BoldItalic.woff2') format('woff2'),
        url('fonts/CallingCode-BoldItalic.woff') format('woff'),
        url('fonts/CallingCode-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Calling Code';
    src: url('fonts/CallingCode-Regular.eot');
    src: url('fonts/CallingCode-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/CallingCode-Regular.woff2') format('woff2'),
        url('fonts/CallingCode-Regular.woff') format('woff'),
        url('fonts/CallingCode-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Calling Code';
    src: url('fonts/CallingCode-Italic.eot');
    src: url('fonts/CallingCode-Italic.eot?#iefix') format('embedded-opentype'),
        url('fonts/CallingCode-Italic.woff2') format('woff2'),
        url('fonts/CallingCode-Italic.woff') format('woff'),
        url('fonts/CallingCode-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Calling Code';
    src: url('fonts/CallingCode-Bold.eot');
    src: url('fonts/CallingCode-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/CallingCode-Bold.woff2') format('woff2'),
        url('fonts/CallingCode-Bold.woff') format('woff'),
        url('fonts/CallingCode-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@media (max-width: 600px) {
   h1, .h1 {
      font-size: clamp(
         30px,
         calc(30px + (40 - 30) * ((100vw - 320px) / (600 - 320))),
         40px
      );
   }
}