@font-face {
     font-family: 'CaviarDreams';
     src: url(/CaviarDreams/CaviarDreams.ttf) format('truetype');
     font-style: normal;
     font-weight: normal;
   }
   @font-face {
     font-family: 'Montserrat';
     src: url(/Montserrat/Montserrat-Regular.ttf) format('truetype');
     font-style: normal;
     font-weight: normal;
   }
   @font-face {
     font-family: 'Montserrat';
     src: url(/Montserrat/Montserrat-Medium.ttf) format('truetype');
     font-style: normal;
     font-weight: 500;
   }
   @font-face {
     font-family: 'Montserrat';
     src: url(/Montserrat/Montserrat-SemiBold.ttf) format('truetype');
     font-style: normal;
     font-weight: 600;
   }
   @font-face {
     font-family: 'Montserrat';
     src: url(/Montserrat/Montserrat-Bold.ttf) format('truetype');
     font-style: normal;
     font-weight: bold;
   }
   html {
     margin: 0;
     padding: 0;
     background-color:#f8f8f8;
   }
   body {
     margin: 0;
     padding: 0;
     font-family: Montserrat;
     line-height: 150%;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     -webkit-hyphens: auto;
     -moz-hyphens: auto;
     -ms-hyphens: auto;
     hyphens: auto;
   }
   nav {
     width: 100%;
     background-color:rgb(198,98,78);
     color: #ffffff;
     height: 60px;
     padding: 0;
   }
   div.nav {
     padding: 0 10% 0 10%;
     margin: 0 auto 0 auto;
   }
   img.nav-icon {
     width: 2em;
   }
   #nav-content {
     display:flex;
     flex-direction: row;
     height: 60px;
     justify-content: space-between;
   }
   #nav-content-left {
     display:table;
     height:100%;
     text-align:left;
     font-size:80%;
   }
   #nav-content-left-wrapper {
     display:table-cell;
     vertical-align:middle;
   }
   #nav-content-right {
     display:table;
     height:100%;
     text-align:left;
     font-size:80%;
   }
   #nav-content-right-wrapper {
     display:table-cell;
     vertical-align:middle;
     padding-top:6px;
   }
   div.auf-kurs {
     margin: 3ex 0;
   }
   nav a:link {
     text-decoration: none;
     color: #ffffff;
   }
   nav a:visited {
     text-decoration: none;
     color: #ffffff;
   }
   a:link {
     text-decoration: none;
     color:rgb(198, 91, 78);
   }
   a:visited {
     text-decoration: none;
     color:rgb(198, 91, 78);
   }
   a.undecorated {
     color: unset;
   }
   .st0 {
     fill:#c7d5d8;
     fill-opacity:0.2;
   }
   .st1 {
     fill:#d7e5e8;
     fill-opacity:0.4;
   }
   .st2 {
     fill:#a7c5c8;
     fill-opacity:0.6;
   }
   .st3 {
     fill:#d7e5e8;
     fill-opacity:0.8;
   }
   .st4 {
     fill:#c7d5d8;
     fill-opacity:1;
   }
   footer {
     margin-top: auto;
     background-color: #005966;
     padding: 2ex 0;
     font-size: 90%;
   }
   #footer-outer-wrapper {
      width: 90%;
      color:#ffffff;
      margin: 0 auto;
   }
   #footer-inner-wrapper {
     display: table;
     width: 100%;
   }
   #footer-lower-left {
     display: table-cell;
     width: 50%;
     text-align: left;
   }
   #footer-lower-right {
     display: table-cell;
     width: 50%;
     text-align: right;
   }

   #top-bar-wrapper {
     z-index: 2;
   }
   #top-bar {
     bottom:0;
     padding: 0 2% 0 10%;
     left:0;
     right: 0;
     display: flex;
     justify-content: space-between;
     flex-direction: row;
     height: 150px;
   }
   #top-bar.fix-to-top {
     top: 0px;
     position: fixed;
   }
   #top-left-logo {
     display: table;
     margin: 0 0 0 -10ex;
     padding: 0;
     height: 150px;
   }
   #top-left-logo-content {
     display: table-cell;
     vertical-align: middle;
     color:rgb(51,110,106);
     font-weight:500;
   }
   #top-left-logos {
     display: flex;
     flex-direction: row;
     align-items: center;
     font-weight:500;
   }
   #first-top-left-logo-image {
     width: 60ex;
     padding-right: 1ex;
       padding-right: 5ex;
   }
   /*
   #second-top-left-logo-image {
     padding-top: 0.5ex;
     height: 5ex;
   }
   #second-top-left-logo-subtext {
     color:rgb(51,110,106);
   }
   */
   #w1 {
      position: relative;
   }
   #hamburger {
     display: none;
     flex-direction: row;
     justify-content: space-between;
     position: relative;
     right: 0px;
     top: 0px;
     background-color: rgba(240,240,240,0.55);
     padding: 0px 5px 9px 5px;
     border-radius: 4px;
     margin: 2px;
     height: 20px;
   }
   #hamburger-title {
     padding: 3px 15px;
     color:#435554;
   }
   #hamburger-icon {
     font-size: 200%;
   }
   div#page-menu {
     margin-top: 5ex;
     display: grid;
     grid-template-rows: repeat(2, auto);
     grid-auto-flow: column;
     justify-content: left;
     padding-top:10px;
   }
   .menubar {
     color:#435554;
     font-weight: 600;
     background-color: rgba(240,240,240,0.9);
     /* padding: 3px 20px; */
     padding: 0;
     display: table;
     font-size: 90%;
   }
   .menubar-inside {
     padding: 3px 15px;
   }
   .menubar.first {
     border-top-left-radius: 6px;
     border-bottom-left-radius: 6px;
   }
   .menubar.last {
     border-top-right-radius: 6px;
     border-bottom-right-radius: 6px;
   }
   .menu-content-wrapper.hovered {
     visibility: visible;
   }
   .menu-content-wrapper.not-hovered {
     visibility: hidden;
   }
   #page-menu a:link {
     color:#435554;
   }
   #page-menu a:visited {
     color:#435554;
   }
   #page-menu a:hover {
     color:rgb(198, 91, 78);
   }
   #page-menu a:active {
     color:#ffffff;
   }
   .menu-content-wrapper {
     visibility: hidden;
     position: relative;
   }
   .menu-contents {
     background-color: rgba(240,240,240,0.9);
     padding: 0px;
     border-radius: 4px;
     margin-top: 5px;
     position: absolute;
     z-index:1;
   }
   .menu-content-entry {
     padding: 3px 15px;
     min-width: 11em;
   }
   .no-hyphenation {
     -webkit-hyphens: none;
     -ms-hyphens: none;
     hyphens: none;
   }
   .ignore-if-large {
     display:none;
   }
   .button-block {
     font-weight: 600;
     margin: 1ex auto 0 auto;
     background-color:rgba(198,98,78,0.9);
     padding: 2ex 3em;
     border-radius: 5px;
     text-align: center;
     color: #ffffff;
   }
   #footer-small-prints {
     display: flex;
     flex-direction: row;
     justify-content: right;
   }
   .footer-small-print {
   }
   .footer-small-print:not(:first-child) {
     padding-left: 2em;
   }
   #contact-footer {
     display: flex;
     flex-direction: row;
     justify-content: stretch;
     max-width: 70em;
     margin: 0 auto;
     width: 90%;
     color:rgb(51,110,106);
   }
   .contact-footer-element {
     vertical-align:top;
     margin-bottom: 6ex;
   }
   .contact-footer-element.left {
     flex-basis: 25%;
   }
   .contact-footer-element.center {
     flex-basis: 60%;
   }
   .contact-footer-element.right {
     flex-basis: 15%;
     text-align: center;
   }
   .contact-footer-element:not(:first-child) {
     margin-left: 10%;
   }
   #contact-footer-wrapper {
     background-color: rgb(199, 213, 216);
     margin-top:0;
     padding-top:3ex;
     font-size:90%;
   }
   #footer-logo-left {
     width: 15em;
   }
   #footer-text-left {
     margin-top: 3ex;
   }
   #footer-icons-left {
     margin-top: 3ex;
   }
   #footer-badge-left {
     margin-top: 3ex;
   }
   #footer-text {
     margin-bottom: 2ex;
   }
   div.footer-contact-data {
     margin-top: 1ex;
   }
   img.contact-footer {
     width:1.75em;
     position:relative;
     top:8px;
     padding-right:1em;
   }
   #contact-logo-right {
     width:100%;
     max-width:10em;
   }
   h1 {
     font-size:250%;
     color:rgb(198, 91, 78);
     font-weight:600;
     margin-top: 3ex;
     margin-bottom: 1ex;
     line-height: 110%;
   }
   .hide-if-large {
     display: none;
   }

   @media only screen and (max-width: 45em) {
     #contact-footer {
       flex-direction: column;
     }
     .contact-footer-element.left {
       flex-basis: auto;
       margin: 0 auto 10ex auto;
     }
     .contact-footer-element.center {
       max-width: 25em;
       flex-basis: auto;
       margin: 0 auto 10ex auto;
     }
     .contact-footer-element.right {
       flex-basis: auto;
       text-align: center;
       margin: 0 auto 10ex auto;
     }
     .hide-if-large {
       display: unset;
     }
   }

   #circle-wrapper {
     z-index: -1;
     text-align:right;
     padding-right:3ex;
     padding-top:1ex;
   }

   #neu-wrapper {
     position: relative;
     z-index: 0;
   }

   #neu-bar {
     position: absolute;
     z-index: -1;
     padding: 0.2ex 0.5em 0.2ex 0.5em;
     left: -50px;
     background-color: rgba(240,240,240,0.9);
     border: 1px solid black;
     border-radius: 5px;
     color: red;
     font-size: 120%;
     font-weight: 600;
   }

  .circleBase {
    display: inline-block;
    z-index: -1;
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
    color:#435554;
    font-weight: 600;
    text-align:center;
    width: 110px;
    height: 110px;
    background-color: rgba(240,240,240,0.9);
    border: 2px solid rgb(51,110,106);
  }

   @media only screen and (max-width: 70em) {
     #w1 {
       width: 100%;
     }
     #hamburger {
       display: flex;
     }
     #top-bar-wrapper {
       width: 100%;
     }
     #top-bar {
       /*flex-direction: column;*/
       display: block;
     }
     div#page-menu {
       margin-top: 0;
       padding-top: 0;
       justify-content: right;
     }
     div#page-menu.closed {
       display: none;
     }
     div#page-menu.opened{
       display: block;
     }
     .menubar {
       width: 100%;
     }
     .menubar.first {
       border-bottom-left-radius: 0;
       border-top-right-radius: 6px;
     }
     .menubar.last {
       border-top-right-radius: 0;
       border-bottom-left-radius: 6px;
     }
     .menu-content-wrapper {
       display: none;
     }
     .menu-content-wrapper.hovered {
       visibility: visible;
     }
     .menu-content-wrapper.not-hovered {
       visibility: visible;
     }
     .menu-content-wrapper.clicked {
       display: block;
     }
     .menu-content-wrapper.not-clicked {
       display: none;
     }
     .menu-contents {
       background-color: rgba(240,240,240,0.9);
       padding: 0px;
       border-radius: 0;
       margin-top: 0;
       position: static;
       width: 100%;
     }
     .menu-content-entry {
       padding: 3px 0px 3px 35px;
       min-width: 10em;
     }
     #top-left-logo {
       height: 100px;
       margin: 0;
     }
     #top-left-logo-content {
       font-size: 80%;
     }
     #first-top-left-logo-image {
       width: 60ex;
       max-width: 100%;
     }
     /*
     #second-top-left-logo-image {
       height: 4ex;
     }
     */
     .ignore-if-large {
       display:unset;
     }
     .hide-if-small {
       display: none;
     }
     #footer-small-prints {
       flex-direction: column;
     }
     .hide-if-large {
       display: unset;
     }
   }