/* roboto-condensed-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 200;
  src: url('./fonts/roboto-condensed-v27-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-200italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 200;
  src: url('./fonts/roboto-condensed-v27-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/roboto-condensed-v27-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 400;
  src: url('./fonts/roboto-condensed-v27-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/roboto-condensed-v27-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 700;
  src: url('./fonts/roboto-condensed-v27-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


      :root {
               --nisemo-spacing: 80px;
               --nisemo-fontsize: 10px;
               --nisemo-blue: #0056b3;
               --nisemo-white: rgba(255, 255, 255, 0.7);
               --nisemo-white-full: #ffffff;
               --nisemo-highlight: #ffffff;
               --nisemo-max-width: 1200px;
      }
   
      
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
            font-family: 'Roboto Condensed', sans-serif;
            font-style: normal;
            font-weight: 400;
  }

  .nisemo-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px var(--nisemo-spacing);
    z-index: 9999;
  }
  
  .nisemo-logo {
    width: 250px;
    -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -ms-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out;
    
  }
  
   @media screen and (max-width: 1000px) {
         :root {   --nisemo-spacing: 60px; }
   }
   @media screen and (max-width: 800px) {
         :root {   --nisemo-spacing: 40px; }
   }
   @media screen and (max-width: 500px) {
         :root {   --nisemo-spacing: 20px; }
   }
   
    .nisemo-logo img { width: 100%; height: auto; }
    
    .scrolled .nisemo-logo {
      width: 150px;
    }

  .nisemo-nav {
  display: flex;
  gap: 20px;
  align-items: center;
  background: rgba(0, 54, 202, 0.5);
  -webkit-border-radius: 50px 50px 50px 50px;
  border-radius: 50px 50px 50px 50px;
  }

  .nisemo-nav a {
    color: var(--nisemo-white);
    text-decoration: none;
    transition: opacity 0.3s;
    display: inline-block;
    padding: 10px 0 10px 20px;
  }
  .nisemo-nav a:first-of-type {
    padding-left: 40px;
  }
  .nisemo-call a:first-of-type {
    padding: 10px 10px;
    -webkit-border-radius: 50px 50px 50px 50px;
    border-radius: 50px 50px 50px 50px;
  }
  
  .scrolled .nisemo-nav {
    background: var(--nisemo-blue);
  }
   
   .nisemo-header--gradient {
            position: fixed;
            top: -400px;
            width: 100%;
            height: 400px;
            pointer-events: none;
            -webkit-transition: all 300ms ease-in-out;
             -moz-transition: all 300ms ease-in-out;
             -ms-transition: all 300ms ease-in-out;
             -o-transition: all 300ms ease-in-out;
             transition: all 300ms ease-in-out;
            background: #ffffff;
            background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0) 100%);
            background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0) 100%);
            background: linear-gradient(180deg, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFF", endColorstr="#FFFFFF", GradientType=0);
            left: 0;
            opacity: 1;
            z-index: 1000
   }
   .scrolled .nisemo-header--gradient { top: 0 }
   
   .nisemo-logo {
      position: relative
   }
   .nik-selemo-logo-top { text-align: center }
   .nik-selemo-logo-top img {
      width: 40%;
      margin: 0 auto;
      vertical-align: middle;
      -webkit-transition: all 300ms ease-in-out;
       -moz-transition: all 300ms ease-in-out;
       -ms-transition: all 300ms ease-in-out;
       -o-transition: all 300ms ease-in-out;
       transition: all 300ms ease-in-out;
   }
   
   .scrolled .nik-selemo-logo-bottom svg path {
 fill: #2c3e6b !important;
 -webkit-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -ms-transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 transition: all 300ms ease-in-out;
   }
   
  .scrolled .nik-selemo-logo-top img {
     width: 20%
  }
  
   
   .nik-selemo-logo-bottom {
      padding: 20px 0 0 0
   }
   
   .scrolled .nik-selemo-logo-bottom {
      padding: 10px 0 0 0
   }
   
   .nik-selemo-logo-bottom svg {
      vertical-align: middle
   }
   
   .nisemo-nav a:hover,
   .nisemo-nav a.active {
      color: var(--nisemo-highlight);
      opacity: 1;
   }
    
  .nisemo-nav a,
  .nisemo-call {
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
  }


    .nisemo-call {
      background-color: #0044FF;
      color: #fff;
      padding: 8px 16px;
      border-radius: 4px;
      margin-left: 20px;
      font-weight: bold;
      white-space: nowrap;
      margin-right: -5px;
      -webkit-border-radius: 50px 50px 50px 50px;
      border-radius: 50px 50px 50px 50px;
    }
    .nisemo-call a { 
     color: #fff;
    }
    
    .nisemo-call:hover {
     background: var(--nisemo-blue); 
    }
    
    .scrolled .nisemo-nav {
      -webkit-box-shadow: -20px 20px 60px 0 rgba(0,0,0,0.2);
      box-shadow: -20px 20px 60px 0 rgba(0,0,0,0.2);
    }

    main {
    }

    .nisemo-stage {
      position: relative;
    }
    #stagesub {
       width: 100%;
       position: relative;
    }

    .nisemo-stage img,
    #stagesub img {
      width: 100%;
      display: block;
    }

    .nisemo-stage-text {
      position: absolute;
      bottom: 40px;
      width: calc(100% - calc(2* var(--nisemo-spacing)));
      left: var(--nisemo-spacing);
      color: var(--nisemo-white-full);
      text-align: left;
      font-weight: bold;
    }
    
    #default--content {
        background: var(--nisemo-blue);
        padding: 250px 0 150px 0
    }
    
    #default--content h1 { font-size: 3rem; margin: 0 0 20px 0;
      color: #0044FF; /* Fallback-Farbe */
      background: linear-gradient(90deg, #0044FF, #002079);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    
    #default--content h2 { font-size: 2rem; margin: 30px 0 5px 0;
      color: #0044FF; /* Fallback-Farbe */
      background: linear-gradient(90deg, #002691, #002079);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    
    #default--content h3 { font-size: 2rem; margin: 30px 0 5px 0;
      color: #444; /* Fallback-Farbe */

    }
    #default--content h4 { font-size: 1.6rem; margin: 30px 0 5px 0;
      color: #0044FF; /* Fallback-Farbe */
      background: linear-gradient(90deg, #002691, #002079);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    
    #default--content a {
      color: #002079
    }
    #default--content p { font-size: calc(2* var(--nisemo-fontsize)); margin: 0 0 10px 0}
    #default--content ul { font-size: calc(2* var(--nisemo-fontsize)); margin: 0 0 10px 30px; }
    #default--content ol { font-size: calc(2* var(--nisemo-fontsize)); margin: 0 0 10px 0}
    
    .default-content--inner {
      padding: calc(var(--nisemo-spacing));
    }
    
    .default-content--group {
      max-width: calc(100% - calc(2 * var(--nisemo-spacing)));
      margin: auto;
      background: #fff;
      -webkit-border-radius: 7px 7px 7px 7px;
      border-radius: 7px 7px 7px 7px;
      -webkit-box-shadow: -20px 20px 60px 0 rgba(0,0,0,0.2);
      box-shadow: -20px 20px 60px 0 rgba(0,0,0,0.2);
    }
    
    .nik-selemo--logo-layer { 
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .nik-selemo--logo-layer a {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%
    }
    .nisemo-overlay-text p {
       font-size: 4rem;
       font-family: 'Roboto Condensed';
         font-style: normal;
         font-weight: 700;
    }
    
    .nisemo-stage-text h2 {
      font-size: 3rem;
    }
    
   

    .nisemo-profile {
      position: relative;
      text-align: center;
      margin-top: -200px;
    }
   
     

    .nisemo-profile img {
      width: 400px;
      height: 400px;
      border-radius: 50%;
      object-fit: cover;
      margin: 0 auto;
    }
    
    
    .mindset-container {
    display: grid;
    gap: 50px;
    margin: 40px 0 0 0;
    grid-template-columns: repeat(4, 1fr); /* Standard: 4 Spalten */
  }
  
  /* Ab 1000px auf 2 Spalten wechseln */
  @media (max-width: 1300px) {
    .mindset-container {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
     .mindset-spalte {
       flex: 1;
       padding: 0;
     }
     
     .mindset-spalte h3 {
        color: #0044FF; /* Fallback-Farbe */
          background: linear-gradient(90deg, #0044FF, #002079);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          font-size: 2rem;
          line-height: 1em;
          margin: 0 0 20px 0
     }
     
     .mindset-portrait {
      -webkit-box-shadow: -40px 40px 80px 0 rgba(0,0,0,0.5);
      box-shadow: -40px 40px 80px 0 rgba(0,0,0,0.5);
     }
     
     .mindset-portrait,
     .mindset-portrait img {
       width: 100%;
       height: auto;
     }
     .mindset-portrait img {
       vertical-align: middle
     }
    
    .mindset-spalte p {
      font-size: calc(1.9 * var(--nisemo-fontsize));
    }
    
    
     /* Responsiv: Untereinander bei kleiner Breite */
     @media (max-width: 658px) {
       .mindset-container {
         grid-template-columns: 1fr;
       }
     }
     
     
     @media screen and (max-width: 1000px) {
         .nisemo-stage-text h2 {
          font-size: 2rem;
          }
          
          .nisemo-profile {
             margin-top: -100px;
           }
           
           .nisemo-profile img {
           width: 300px;
           height: 300px;
        }
        
        .nisemo-overlay-text p {
            font-size: 3rem;
         }
         
           
      }
 
   .nisemo-mindset-group h2 {
      font-size: 3rem;
      line-height: 1em;
      margin: 0 0 30px 0;
      color: #0044FF; /* Fallback-Farbe */
        background: linear-gradient(90deg, #0044FF, #002079);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        
   }
    
    .nisemo-textblock {
      display: flex;
      gap: 20px;
    }
    
    .nisemo-textblock p {
       color: var(--nisemo-blue);
    }
    
    .nisemo-textblock-group {
      max-width: 70%;
      margin: auto;
       padding: 50px 0 0 0
    }
   .nisemo-textblock > div {
      flex: 1;
      padding: 20px;
      box-sizing: border-box;
      text-align: left
    }
    
    .nisemo-textblock p {
       font-size: calc(2.2 * var(--nisemo-fontsize));
       line-height: 1.35em;
    }
    
    .nik-signature {
       width: 100%;
       -webkit-border-radius: 0 0 0 0;
       border-radius: 0 0 0 0;
       padding: 30px 0 0 0
    }
    .nik-signature img { 
       width: 70%;
       height: auto;
       -webkit-border-radius: 0 0 0 0;
       border-radius: 0 0 0 0;
       max-width: 200px
    }
    
    @media (max-width: 768px) {
      .nisemo-textblock {
  flex-direction: column;
      }
    }
    
    
    .box-animate {
      opacity: 0;
     -moz-transform: translateX(0px) translateY(100px);
     -webkit-transform: translateX(0px) translateY(100px);
     -o-transform: translateX(0px) translateY(100px);
     -ms-transform: translateX(0px) translateY(100px);
     transform: translateX(0px) translateY(100px);
      transition: all 1s ease-out;
    }
    .box-animate.box-animate-left {
       -moz-transform: translateX(-100px) translateY(0px);
       -webkit-transform: translateX(-100px) translateY(0px);
       -o-transform: translateX(-100px) translateY(0px);
       -ms-transform: translateX(-100px) translateY(0px);
       transform: translateX(-100px) translateY(0px);
    }
    .box-animate.box-animate-right {
        -moz-transform: translateX(100px) translateY(0px);
        -webkit-transform: translateX(100px) translateY(0px);
        -o-transform: translateX(100px) translateY(0px);
        -ms-transform: translateX(100px) translateY(0px);
        transform: translateX(100px) translateY(0px);
     }
     
    .box-animate.visible {
      opacity: 1;
      -moz-transform: translateX(0) translateY(0px);
       -webkit-transform: translateX(0) translateY(0px);
       -o-transform: translateX(0) translateY(0px);
       -ms-transform: translateX(0) translateY(0px);
       transform: translateX(0) translateY(0px);
    }
    
    

    .nisemo-image-text-section {
      position: relative;
      margin: 80px var(--nisemo-spacing);
    }

    .nisemo-image-text-section .nisemo-bg-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      z-index: -1;
    }

    .nisemo-overlay-text {
      padding: 400px 50px 100px 50px;
      color: white;
      font-size: 2rem;
      line-height: 1.2;
      max-width: var(--nisemo-max-width);
      margin: auto;
      text-align: center;
    }

    .nisemo-overlap-img {
      display: block;
      margin: -120px auto 40px;
      max-width: 100%;
      position: relative;
      z-index: 200
    }
    


    .nisemo-teaser-section {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 80px;
      margin-bottom: 80px;
      max-width: calc(100% - calc(4 * var(--nisemo-spacing)));
      margin: 0 auto 70px auto
    }
    
    .nisemo-teaser h3 {
       font-size: calc(3.2 * var(--nisemo-fontsize));
       color: var(--nisemo-blue);
       margin: 0 0 10px 0
    }
    
    .nisemo-teaser p {
       font-size: calc(1.9 * var(--nisemo-fontsize));
    }
    .nisemo-teaser-potrait-overlap {
       padding: 0 0 50px 0
    }

    .nisemo-teaser-column {
      flex: 1;
      min-width: 300px;
    }

    .nisemo-teaser {
      margin-bottom: 40px;
    }
    


    .nisemo-callout {
      background-color: #0044FF;
      color: white;
      padding: 40px;
      font-weight: bold;
      margin-top: 20px;
      border-radius: 8px;   
    }
    
    .nisemo-callout p { 
       font-size: calc(3 * var(--nisemo-fontsize));
    }
    .nisemo-callout p span{ 
        opacity: .6
     }
     
    .nisemo-callout a { display: inline-block; padding: 10px 0 0 0; color: #fff; text-decoration: none}

    .nisemo-footer {
      background-color: var(--nisemo-blue);
      color: white;
      padding: 80px var(--nisemo-spacing) 40px;
      position: relative;
    }

    .nisemo-footer-img {
      display: block;
      width: 100%;
      margin: -80px auto 0;
    }

    .nisemo-footer-content {
      display: flex;
      justify-content: space-between;
      gap: 40px;
      flex-wrap: wrap;
    }

    .nisemo-footer-contact {
      flex: 1;
      min-width: 300px;
    }

    .nisemo-footer-impressum {
      margin-top: 40px;
      text-align: left;
    }
    
    .nisemo-stage, #stagesub {
       overflow: hidden
    }
 
      main {
      overflow: hidden
      }
 
    @media screen and (max-width: 800px) {
    .stage-image-nisemo { 
       width: calc(100% + 400px);
       -moz-transform: translateX(-200px) translateY(0px);
        -webkit-transform: translateX(-200px) translateY(0px);
        -o-transform: translateX(-200px) translateY(0px);
        -ms-transform: translateX(-200px) translateY(0px);
        transform: translateX(-200px) translateY(0px);
     }
  }
  
  @media screen and (max-width: 600px) {
      .stage-image-nisemo { 
         width: calc(100% + 300px);
         -moz-transform: translateX(-150px) translateY(0px);
          -webkit-transform: translateX(-150px) translateY(0px);
          -o-transform: translateX(-150px) translateY(0px);
          -ms-transform: translateX(-150px) translateY(0px);
          transform: translateX(-150px) translateY(0px);
       }
       
       .nisemo-stage-text h2 {
           font-size: 1.6rem;
         }
    }
    
    
    @media screen and (max-width: 1000px) {
      .main--nav-item { display: none !important }
      .nik-selemo--logo-layer .main--nav-item {  display: block !important }
      .nisemo-call { margin: 0 }
    }
    
   
    @media screen and (max-width: 800px) {
     .nisemo-teaser-potrait-overlap { max-width: 70%; margin: 0 auto }
    }
    
    @media screen and (max-width: 700px) {
      .nisemo-teaser-potrait-overlap { max-width: calc(100% - var(--nisemo-spacing)); }
      
      .nisemo-teaser-section {
         gap: 0
      }
   }
   
   .nisemo-mindset-group { 
      width: calc(100% - calc( 2 * var(--nisemo-spacing)));
      margin: 0 auto 150px auto;
   }
   
   
   .nisemo-mindset-group-inner {
      background: #fff;
      -webkit-box-shadow: -100px 50px 100px 0 rgba(0,0,0,0.2);
      box-shadow: -100px 50px 100px 0 rgba(0,0,0,0.2);
      padding: var(--nisemo-spacing);
   }
     
    @media screen and (max-width: 700px) {
     
     .nisemo-footer-contact {
        width: 100%;
        margin: 0;
        left: 0;
     }
      .nisemo-overlay-text {
         padding: 200px 50px 100px;
      }
      
      .nisemo-overlay-text p {
          font-size: 2.3rem;
       }
       
    }
    
    .nisemo-footer-contact { 
       width: 50%;
       margin: 0 0 0 50%;
    
    }
    
    .nisemo-footer-contact h2 {
        font-size: 1.8rem;
        margin: 0 0 13px 0
     }
     
    .nisemo-footer-contact p {
       font-size: 1.4rem;
       line-height: 1.6em
    }
    
    .nisemo-footer-contact a {
       color: #fff;
       text-decoration: none
    }
    
    @media (max-width: 768px) {
      .nisemo-footer-content {
  flex-direction: column;
  max-width: 100%;
      }
      
      .nisemo-footer-contact { 
          width: 100%;
          margin: 0 0 0 0%;
       
       }
       
       .nisemo-logo { margin: 0 auto }
       
       .nisemo-call {
          position: fixed;
          bottom: 20px;
          right: 20px;
          font-size: 16px;
          padding: 15px 30px
       }
       
       .nisemo-call a {
          padding: 0 !important
       }
    }
    
    .nisemo-footer-impressum a  {
       color: #fff;
       text-decoration: none;
       opacity: .7
    }
    .nisemo-footer-impressum a:hover {
      opacity: 1
    }
    .nik-selemo-footer-image
     {
        margin: -140px auto 0;
     }
     
     .nisemo-footer-content {
        padding: 100px 0 0 0
     }
     
     .nisemo-footer-impressum {
        
     }
     
     @media (max-width: 668px) {
     .nisemo-footer-impressum {
        padding: 0 0 100px 0
     }
     
     .nisemo-textblock-group {
        max-width: calc( 100% - calc(2* var(--nisemo-spacing) ) );
     }
     
     .nisemo-overlay-text p {
         font-size: 1.7rem;
       }
       
       .nisemo-teaser-potrait-overlap {
         max-width: calc(100% - calc( 4* var(--nisemo-spacing) ));
       }
       
       .nisemo-mindset-group h2 { 
          font-size: 2rem
       }
       
       .nisemo-mindset-group-inner {
          padding: 40px
       }
       
       .nisemo-stage-text {
          text-align: center
       }
  }
    
    
    
   @media (max-width: 400px) {
      .nisemo-profile .nisemo-theprofile img {
         width: 200px;
         height: 200px;
      }
   }