@font-face{
 font-family: 'Monckeberg';
 src: url('../font/Monckeberg.eot');
 src: url('../font/Monckeberg.eot?#iefix') format('embedded-opentype'),
      url('../font/Monckeberg.woff') format('woff'),
      url('../font/Monckeberg.ttf') format('truetype'),
      url('../font/Monckeberg.svg#webfont') format('svg');
}

   #loader-wrapper { position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 1000;}
   #loader {display: block;position: relative;left: 53%;top: 50%;width: 100px;height: 166px;margin: -75px 0 0 -75px;background-image: url("../img/face.png");-webkit-animation: spin 4s linear infinite; /* Chrome, Opera 15+, Safari 5+ */animation: spin 4s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */z-index: 1001;
   }

       @-webkit-keyframes spin {
           0%   {
               -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
               -ms-transform: rotate(0deg);  /* IE 9 */
               transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
           }
           100% {
               -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
               -ms-transform: rotate(360deg);  /* IE 9 */
               transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
           }
       }
       @keyframes spin {
           0%   {
               -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
               -ms-transform: rotate(0deg);  /* IE 9 */
               transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
           }
           100% {
               -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
               -ms-transform: rotate(360deg);  /* IE 9 */
               transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
           }
       }

       #loader-wrapper .loader-section {
           position: fixed;
           top: 0;
           width: 51%;
           height: 100%;
           background-color: #f589cd;
           z-index: 1000;
           -webkit-transform: translateX(0);  /* Chrome, Opera 15+, Safari 3.1+ */
           -ms-transform: translateX(0);  /* IE 9 */
           transform: translateX(0);  /* Firefox 16+, IE 10+, Opera */
       }

       #loader-wrapper .loader-section.section-left {
           left: 0;
       }

       #loader-wrapper .loader-section.section-right {
           right: 0;}

       /* Loaded */
       .loaded #loader-wrapper .loader-section.section-left {
           -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
               -ms-transform: translateX(-100%);  /* IE 9 */
                   transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */

          -webkit-transition: 190ms width linear;
                   transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
       }

       .loaded #loader-wrapper .loader-section.section-right {
           -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */
               -ms-transform: translateX(100%);  /* IE 9 */
                   transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */

  -webkit-transition: 190ms width linear;
           transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
       }

       .loaded #loader {
           opacity: 0;
           -webkit-transition: all 0.2s ease-out;
                   transition: all 0.2s ease-out;
       }
       .loaded #loader-wrapper {
           visibility: hidden;

           -webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
               -ms-transform: translateY(-100%);  /* IE 9 */
                   transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */

           -webkit-transition: all 0.3s 1s ease-out;
                   transition: all 0.3s 1s ease-out;
       }

       /* JavaScript Turned Off */
       .no-js #loader-wrapper {
           display: none;
       }

   body {background-color: #c5b9fa;
        font-family: "OpenSans", sans-serif;}

   html {
          color: #222;
          font-size: 1em;
          line-height: 1.4;
          cursor: url("../img/cursor.png"), auto;
          -ms-user-select: None;
          -moz-user-select: None;
          -webkit-user-select: None;
        }

  html:active  {cursor: url("../img/cursor_active.png"), auto;}



  footer {background-color: #985df6; margin-top:7%; font-family:'Monckeberg'; color: #fff; font-size: 1.25rem;}
  footer a{color: #f6c944; padding: 3px; text-decoration: underline;}


  ul li{list-style: circle!important; list-style-position:outside!important;}


.whitebg {color: #fff;}

.title {
    font-family: 'Monckeberg';
    font-style: normal;
    font-size: 5rem!important;
    font-weight: 800!important;
    color: #fff;
}

   nav {
       color: #fff;
       width: 100%;
       height: 64px;
       line-height: 64px;
     	 font-family: 'Monckeberg';
       font-size: 1.6rem;
       background-color: #985df6;

   }

   nav a{
       color: #f6c944;
       text-decoration: underline;
   		cursor: url("../img/cursor.png"), auto;}


   nav a:hover{
   		cursor: url("../img/cursor.png"), auto;
       color: #fff;}


   nav a:active  {cursor: url("../img/cursor_active.png"), auto;}

.intro {
      padding-top: 15px;
      padding-bottom: 15px;
      padding-left: 85px;
      padding-right: 85px;
      color: #000;
      background-color: #fff;
      margin-top: 35px;
      font-weight: 600;
      font-family: 'Monckeberg', sans-serif;
      -webkit-box-shadow: 0px 0px 68px -1px rgba(0,0,0,1);
      -moz-box-shadow: 0px 0px 68px -1px rgba(0,0,0,1);
      box-shadow: 0px 0px 68px -1px rgba(0,0,0,1);
}

  .intro:hover{cursor: url("../img/cursor.png"), auto;}

    .intro:active  {cursor: url("../img/cursor_active.png"), auto;}

    .col.s12 img {max-width: 100%;}

   .block:hover {cursor: url("../img/cursor.png"), auto!important;}

   .block:active  {cursor: url("../img/cursor_active.png"), auto!important;}

   .buttons { margin-top: 30px;}

h1 {font-family: 'Monckeberg', sans-serif; font-size: 80px; color: #ffc107; text-overflow: hidden;}
h2 {font-family: 'Monckeberg', sans-serif; color: #fff; text-overflow: hidden;  font-size: 3rem!important;}
h3 {font-family: 'Monckeberg', sans-serif; color: #ffc107; text-overflow: hidden;}

<style>
  :root{
    --text:#111;
    --card:#fafafa;
    --border:#eee;
    --shadow:0 2px 6px rgba(0,0,0,.06);
  }

  /* Summary card look (neutral, clean) */
  .summary-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:8px;
    background-color: #fafafa!important;
    box-shadow:var(--shadow);
    padding:26px 28px;
    margin:34px 0;
    text-align:left;
  }
  .summary-card h3{
    margin:0 0 14px;
    font-size:1.5rem;
    font-weight:700;
    color:var(--text);
  }
  .summary-card h6{
    margin:16px 0 4px;
    font-size:1.05rem;
    font-weight:700;
    color:var(--text);
  }
  .summary-card p{
    margin:0 0 12px;
    line-height:1.6;
    font-size:1rem;
    color:var(--text);
  }

 

.hero-button-wrapper {
  text-align: center;
  margin-top: 2rem; /* Abstand zum Textblock oben */
}

.hero-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #fff;
  background-color: #111;
  border: none;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.25s ease, transform 0.2s ease;
}

.hero-button:hover {
  background-color: #000;
  transform: translateY(-2px);
  cursor: pointer;
}

.hero-button:active {
  transform: translateY(0);
  background-color: #333;
}

header .move-area {
  box-shadow: 0 10px 35px rgba(0,0,0,0.18); /* etwas stärker als vorher */
}

/*Case Study*/

#CaseStudy, 
#CaseStudy * {
  color: #111 !important;
}

.bluebg {background-color: #fafafa; padding: 10px;}
.bluebg p {color: #000;}
.bluebg li {color: #000;}
.bluebg h3 {color: #000;}

.bluebg .row .col.l3  {padding-left: 30px;}

.bluebg .row .col.l6 ul {margin-left: 20px;}

.bluebg .grey-text.text-lighten-1{color:#000 !important;font-weight:bold; font-style: normal;}
.bluebg #zitat {text-align: center; font-style: italic;}

.bbutton {border-color: #0336ff!important; color: #0336ff!important;}

/*Match Insights*/

.goldbg {background-color: #fafafa;padding:5px;}
.goldbg p{color: #000;}
.goldbg li{color: #000;}
.goldbg h3{color: #000;}

.goldbg .row .col.l3  {padding-left: 30px;;}

.goldbg .row .col.l3 .grey-text.text-lighten-1 {margin-left: -20px;}

.goldbg .grey-text.text-lighten-1{color:#000 !important;font-weight:bold; font-style: normal;}

.gold {color: #000;}

.cobra {color: #000;}
.celonis {color: #000;}
.cyberport {color: #000;}

.mbutton {border-color: #fafafa!important; color: #fafafa!important;}

/*Tactic Insights*/

.gruenbg {background-color: #fafafa; padding:5px;}
.gruenbg p{color: #000;}
.gruenbg li{color: #000;}
.gruenbg h3{color: #000;}
.gruenbg .grey-text.text-lighten-1{color:#000 !important;font-weight:bold; font-style: normal;}

.gruen {color: #000;}

.gruenbg .row .col.l3  {padding-left: 30px;}

.gbutton {border-color: #fafafa!important; color: #fafafa!important;}

#zitatgruen {color: #fafafa; border: 1px solid #fafafa; padding: 30px; text-align: center;}

/*Scout One*/

.orangebg {background-color: #fafafa; padding:5px;}
.orangebg p{color: #000;}
.orangebg li{color: #000;}
.orangebg h3{color: #000;}

.orange {color: #000;}

.orangebg .grey-text.text-lighten-1{color:#000 !important;font-weight:bold; font-style: normal;}

.obutton {border-color: #000!important; color: #000!important;}

.move-area{
  padding: 0% 10% 10% 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #985df6;
  border-bottom-left-radius: 50% 150px;
  border-bottom-right-radius: 50% 150px;
}

.move-area h2{margin-top:50px;}

.container {
  width: 100%;
}

.content {
    text-align: center;
    padding-bottom: 200px;
    margin-top: -50px;}

.modal.bottom-sheet {
  z-index: 1300;
  width: 100%;
  height: 100%;
  max-height: inherit;
  margin: 0 auto;
  color: #373737;
  box-shadow: none;
}

.modal.bottom-sheet a {
    color: #985df6;
    border: 2px solid #985df6;
    padding: 15px 30px 15px 30px;
}

.modal.bottom-sheet .spacious-images img {
  margin: 2.5rem 0;
}

.modal.bottom-sheet .author img {
  position: relative;
  top: 12px;
  width: 50px;
  margin-right: 1rem;
  margin-left: -62px;
  border-radius: 50%;
}

.modal.bottom-sheet.light-modal {
  color: #fff;
}

.modal.bottom-sheet.light-modal a {
  color: #fff;
}

.modal-close {
  position: sticky;
  top: 0;
  left: 1.5rem;
  z-index: 10000;
  font-size: 3rem;
}

.modal.bottom-sheet .modal-content {
  padding-top: 1rem;
  padding-bottom: 5rem;
}


.sharebox {
  position: absolute;
  top: 77px;
  right: 15px;
  height: 30px;
  width: 240px;
  z-index: 4;
}


#mainContent .frame {
  background: url('https://schraeder.work/img/boy.png');
  width: 358px;
  height: 442px;
  margin: 10px auto;
  position: relative;
}

#mainContent .frame .inner {
  position: relative;
  z-index: 2;
}

#mainContent .frame#tim {
    background-position: -37% 1%;
}

#mainContent .frame#tim .inner {
  background-position: -465px -48px;
  width: 100%;
  height: 100%;
  /*left: 51px;
				top: 49px;*/
}



/* Follor stuff */

.frame .eyeball {
  background-color: #fff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  position: absolute;
}

.frame .eyeball span,
.pupil {
  background-color: black;
  border-radius: 50%;
  border: 3px solid green;
  display: block;
  width: 13px;
  height: 13px;
  position: absolute;
  top: 40%;
  left: 25%
}

.frame#tim .eyeball.left {
  left: 123px;
  top: 195px;
}

.frame#tim .eyeball.right {
  left: 198px;
  top: 195px;
}

/*Finetuning*/

.smalltext {font-size: 14px;}

.name {font-style:normal; font-weight: bold; font-size: 1rem;}

#imagesmall{max-width:50%;}

li {padding-bottom: 5px;}

.row .col.s6 img {padding: 0 0rem;}

.eingerueckt{padding-left: 50px; padding-right: 50px;}

#einruecken {margin-left: 20px;}

.left {text-align: center;}

.modal-nav-container {padding: 1rem 0;}
.lean-overlay {background: inherit;}
.socket{background: #fff;}
.teapot-modal {background: #fff;}
.bottles-modal {background: #fff;}
.wooden-collection-modal { background: #fff;}


/*Mobile*/

@media only screen and (max-width: 992px) {
  .modal.bottom-sheet {width: 100%;}
}

@media only screen and (max-width: 600px) {
  .modal.bottom-sheet {width: 100%;}
  .modal.bottom-sheet .author {display: none;}

  .frame#tim .eyeball.right {
    left: 198px;
    top: 188px;
}
}

@media only screen and (min-width: 1440px) {
  .modal.bottom-sheet .author {display: none;}
}

@media only screen and (min-width: 601px) {
  .modal-close::after {
    position: absolute;
    top: 0;
    left: 2px;
    font-size: 1rem;
    content: 'esc';
  }
}

@media only screen and (max-width: 35em) {
  h1 {font-size:40px;}
  h2 {text-align: center;}
  #resume {display:none;}
  .modal.bottom-sheet a {padding: 15px 15px 15px 15px!important;}
}

@media only screen and (max-width: 900px){h1{font-size: 3rem!important;}
  h2{font-size: 2.15rem!important; line-height: 140%!important;}
}

@media only screen and (max-width: 400px){
  .row .col.s6 img {margin-left:-12px;}
  .row .col.l3 li{padding-left:0px;}
  .test {margin-top: -45px;}
  h1{font-size: 2.25rem!important;}
  h2{font-size: 1.75rem!important; line-height: 140%!important;}
  .row .col.s12 {padding-left: 10px;padding-right: 10px;}
  #einruecken {margin-left: 0px;}
  .goldbg .row .col.l3 .grey-text.text-lighten-1 {margin-left: 0px;}
  .ausblenden {display:none;}
  .modal.bottom-sheet a {width: 100%;}
  .right {margin-top: 10px;}
}

@media only screen and (max-width: 500px){
  .bluebg .row .col.l3 {
    padding-left: 40px!important;
}
.goldbg .row .col.l3 {
  padding-left: 45px!important;
}
.modal.bottom-sheet a {width: 100%;}

.bbutton {width:95%!important;}

.mbutton {width:95%!important;}

.gbutton {width:95%!important;}

.obutton {width:95%!important;}

.right {margin-top: 10px;}

header {border: 0px!important;}
}

@media only screen and (max-width: 350px){
.bluebg .row .col.l6 ul {margin-left: 0px!important;}

.bbutton {width:92%!important;}

.mbutton {width:92%!important;}

.gbutton {width:92%!important;}

.obutton {width:92%!important;}

}