@font-face {
  font-family:'Hanken Grotesk';
  font-style:normal;
  font-weight:100 900;
  font-display: swap;
  src:url('/typo3conf/ext/typoconfiguration/Resources/Public/Fonts/HankenGrotesk-VariableFont_wght.ttf') format('truetype');
}

body{
  font-family:'Hanken Grotesk',Arial,sans-serif;  
  font-weight:400;
}

    
    html {
        background-image: url(../images/background.jpg);
        background-color: #9e9e9e;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        font-family: 'Hanken Grotesk','Arial Narrow',sans-serif;
     }

     body {
      color:#3e3c3d;
      background-color: initial;
      font-family: 'Hanken Grotesk','Arial Narrow',sans-serif;
      overflow: hidden;
      height: 100vh;
      min-height: 100vh;
      min-height: -webkit-fill-available;
    }

     .headlines {
      margin-left: 2em;
      margin-top: 30px;
      position: absolute;
     }

     h1 {
      text-transform: uppercase;
     }

     h1, h2 {
      color: #3a3939;
      font-family: 'Hanken Grotesk', 'Arial Narrow', Arial, sans-serif;
     }

     .modal-body {
      font-size: 1.2rem;
    }

    .modal-body .zitat {
      font-size: 1rem;
    }

    #contactModalCenter .modal-content {
      background-color: #EEEEEE;
    }    

  #videoModalCenter .modal-dialog {
      max-width: 100%;
      margin: 0;
  }
  #videoModalCenter .modal-content {
      height: 100vh;
  }
  #videoModalCenter .modal-body {
      padding: 0;
      height: 100%;
  }
  #videoModalCenter .embed-responsive {
      height: 100%;
  }


    .zitat {
      display: none;
    }

    .zitat br {
      margin-bottom: 15px;
    }

    .footer {
      position: absolute;
      bottom: 0;
      text-align: center;
      width: 100%;
      font-size: 1rem;
      color: #1a1a1a;
    }

    .footer a {
      color: #1a1a1a;
    }

    .btn.btn-euro.btn-secondary {
      background-color: #13a538;
    }    

    /* Contact Button */
    #contact-button {
      width: 100px;
      position: absolute;
      left: 20px;
      bottom: 20px;
      cursor: pointer;
      font-family: 'Hanken Grotesk', 'Arial Narrow', sans-serif;
    }

    #contact-button:hover svg polygon {
      fill: #0db14b;
    }

     .automate {
        position: absolute;
        bottom: 0;
        right: -300px; /* Startposition außerhalb des Bildschirms */
        transition: right 1s ease-in-out;
        width: 30%;        
     }

     .automate img {
        cursor: pointer;
        width: 100%;
        min-width: 200px;
        max-width: 350px;
        float: right;        
     }

     .automate img:hover {
        filter: drop-shadow(2px 4px 6px #1a1a1a);
     }

     svg#endosvg {
      max-width: 1200px;
      margin: auto;
      display: block;
      width: 100%; 
      height: 100%;
    }

    polygon {
        filter: drop-shadow(2px 4px 6px grey);
        -webkit-filter: drop-shadow(2px 4px 6px grey);
      }

      polygon {
        cursor: pointer;
      }

      polygon.cls-6:hover, polygon.cls-2:hover, .st5:hover, .st1:hover {
        fill: #d5d5d5;
        filter: drop-shadow(0 0 0 white);
        -webkit-filter: drop-shadow(0 0 0 white);
      }  
      
      svg g[id^="additional"] > g {
        display: none;
        cursor: pointer;
        transition: opacity 0.5s ease-in;
        -webkit-transition: opacity 0.5s ease-in;
        -moz-transition: opacity 0.5s ease-in;
        -o-transition: opacity 0.5s ease-in;
      }

      svg g[id^="additional"] g:hover polygon{
        fill: #FFFFFF;
      } 

      svg g[id^="additional"] text {
        font-family:'Hanken Grotesk';
      }

      svg g polygon ~ [id^="text"] {
        opacity: 0;
      }

      svg  g[id^="main"]:hover {
        fill: #FFFFFF;
        color: #000000;
        cursor: pointer;   
      }

      svg  g[id^="main"]:hover polygon, svg  g[id^="main"]:hover polyline {
        fill: #FFFFFF;
        color: #000000;
        filter: none;
      }     

      svg  g[id^="main"]:hover [id^="title"] {
        opacity: 0;
      }

      svg  g[id^="main"]:hover [id^="text"] {
        opacity: 1;
        color: #000000;
        fill: #000000;    
        transition: opacity 0.5s ease-in;    
        -webkit-transition: opacity 0.5s ease-in;
        -moz-transition: opacity 0.5s ease-in;
        -o-transition: opacity 0.5s ease-in;
      }

      #Ebene4 {
        animation: blink 1s infinite alternate;
      }

      @keyframes blink {
        0% {
          filter: drop-shadow(2px 4px 10px #ed2a53);
        }
        100% {
          filter: drop-shadow(0 0 10px white);
        }
      }



    .svg-contact-text {
      fill: #fff;

      font-size: 21.46px;
    }

  .svg-contact-polygon {
    fill: #ed2a53;
  }


/* SVG */

.st0, .st1, .st2, .st3, .st4 {
        fill: #fff;
      }

      .st0, .st5 {
        font-size: 14px;
      }

      .st1, .st3 {
        font-size: 24px;
      }

      .st6 {
        fill: #0db14b;
      }

      .st5 {
        fill: #3d3d3d;
      }

      .st2 {
        stroke: #bcbcbb;
        stroke-miterlimit: 10;
        stroke-width: 4.5px;
      }

      .st7 {
        fill: #d5d5d5;
      }

      .st8 {
        fill: #f9f9f9;
      }

      .st4 {
        font-size: 18px;
        fill: #3f3f3f;
      }

      .st9 {
        fill: #ed2a53;
      }

@media (max-width: 600px) {
      svg#endosvg {
        margin-left: -60px;
        margin-right: -50px;
        width: auto;
        margin-top: -60px;
      }
  }