:root {
--text-color:rgb(255,0,0);

}


body {
    background: white;
    min-height: 100vh;
    display: grid;
    place-items: center;
    color: rgb(1, 0, 0);
    font-family: 'Courier New', Courier, monospace;
  }
  
  * {margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family: 'Courier New', Courier, monospace;}
  
  a {color: rgb(56, 56, 1)}
  
  h5{font-size:clamp(20px, 4vw, 25px);
  }
  
  h6{
      font-size:clamp(18px, 4vw, 25px); 
      margin-top:0px;
  }
  
  .container {width:100%;max-width:1600px;margin:0 auto;padding-left:128px;padding-right:128px}
  
  @media (max-width: 1024px){.container{padding-left:64px;padding-right:64px}}
  
  @media (max-width: 767px){.container{padding-left:32px;padding-right:32px}}
  
  .hamburger{position:relative;display:block;width:35px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;outline:none;border:none}
  
  .hamburger .bar,.hamburger:after,.hamburger:before{content:'';display:block;width:100%;height:5px;background-color:white
    ;margin:6px 0px;-webkit-transition:0.4s;transition:0.4s}
  
  .hamburger.is-active:before{-webkit-transform:rotate(-45deg) translate(-8px, 6px);transform:rotate(-45deg) translate(-8px, 6px)}
  
  .hamburger.is-active:after{-webkit-transform:rotate(45deg) translate(-9px, -8px);transform:rotate(45deg) translate(-9px, -8px)}
  
  .hamburger.is-active .bar{opacity:0}
  
  .mobile-nav{position:fixed;top:0;left:100%;width:100%;min-height:100vh;display:block;z-index:98;background-color:transparent;padding-top:120px;-webkit-transition:0.4s;transition:0.4s}
  
  .mobile-nav.is-active{left:0}
  
  .mobile-nav a{display:block;width:100%;max-width:200px;margin:0 auto 16px;text-align:center;padding:12px 16px;background-color:#000000;color:rgb(3, 0, 0);text-decoration:none}
  
  .mobile-nav a:hover{background-color:#0000ff}
  
  @media (min-width: 768px){.mobile-nav{display:none}
  
  .hamburger{display:none}}
  
  section h2{text-align:left;margin-bottom:32px;text-transform:lowercase;color:#000000;font-size:clamp(18px, 4vw, 25px)}
  
  .button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;outline:none;background:none;display:inline-block;color:rgb(8, 0, 0);font-size:20px;background-color:rgb(252, 252, 156);padding:12px 16px;border-radius:4px;text-decoration:none;text-transform:lowercase;font-weight:700;cursor:pointer}
  
  @media (max-width: 767px){.button{font-size:18px}}
  
  img{max-width:100%}
  
  header{color: rgb(4, 4, 0);position:fixed;top:0;left:0;width:100%;z-index:99}
  
  header .container{padding-top:32px;padding-bottom:32px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
  
  header .container h2{color:inherit;text-transform:lowercase;font-size: clamp(18px, 4vw, 25px);font-weight:400}
  
  header .container h2 span{font-weight:800}
  
  header .container nav{display:-ms-grid;display:grid;grid-gap:16px;-ms-grid-columns:(auto)[4];grid-template-columns:repeat(4, auto)}
  
  @media (max-width: 767px){header .container nav{display:none}}
  
  header .container nav a{color:inherit;font-size:20px;text-decoration:none}
  
  header.is-scrolling {position:fixed; background-color:transparent;}
  
  header.is-scrolling .container{padding-top:16px;padding-bottom:16px}
  
  main section.banner{
      color:#040000;
      position:relative;
      min-height:100vh;
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-image:url("/uploads/rauschenfpresse1.png");background-position:top right;background-size:cover}
  
  main section.banner:after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background-color:#510000;opacity:0.1}
  
  main section.banner .container{position:relative;z-index:1}
  
  main section.banner .container h1{font-size:60px;margin-bottom:32px}
  
  main section.banner .container h1 span{color:rgb(158, 110, 37); font-size:clamp(18px, 4vw,30px);}
  
  @media (max-width: 767px){main section.banner .container h1{font-size:32px}}main section.banner .container h3{font-size:36px;font-weight:400;margin-bottom:32px}@media (max-width: 767px){main section.banner .container h3{font-size:20px}}
  
  main .services{background-color:rgb(255, 255, 255)}
  
  main .services .container{padding-top:64px;padding-bottom:64px}
  
  main .services .container .services-grid{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4, 1fr);grid-gap:16px}
  
  @media (max-width: 1024px){main .services .container .services-grid{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2, 1fr)}}
  
  @media (max-width: 767px){main .services .container .services-grid{-ms-grid-columns:1fr;grid-template-columns:1fr}}
  
  main .services .container .services-grid .service{background-color:rgb(252, 252, 252);border-radius:4px;overflow:hidden;-webkit-box-shadow:0px 6px 12px rgba(224, 25, 25, 0.1);box-shadow:0px 6px 12px whitesmoke}
  
  main .services .container .services-grid .service .img-box{display:block;width:100%;border-bottom:0px solid rgb(134, 239, 5)}
  
  main .services .container .services-grid .service .img-box .img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
  
  main .services .container .services-grid .service .content{
    color: rgb(0, 0, 0);
  }

  main .services .container .services-grid .service .content p{
  
    font-size:clamp(11px, 3.5vw, 14px);
    text-align: justify;
    hyphens: auto;
    text-align-last: none;
    
    }

    main .services .container .services-grid .service .content h3{
      
      font-size:clamp(15px, 4vw, 17px);
      padding-top:1em;
      padding-bottom:0.5em;
      
      }

      main .services .container .services-grid .service .content .subline{
        font-size:clamp(6px, 3vw, 10px);
        padding-top:0.0em;
        padding-bottom:0.4em;
        
        }



  main .services .container .services-grid .service .content{padding:5px}
  
  section .projects {
    height:100vh;
  }
  
  main .projects{padding-top:64px;padding-bottom:64px}
  main .projects{background-color:rgb(3, 44, 1);}
  
  main .projects .projects-grid{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3, 1fr);grid-gap:16px;margin-bottom:32px}
  
  @media (max-width: 768px){main .projects .projects-grid{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2, 1fr)}}
  
  @media (max-width: 767px){main .projects .projects-grid{-ms-grid-columns:1fr;grid-template-columns:1fr}}
  
  main .projects .projects-grid .project{background-image:url("/uploads/rauschkarte2.png");border-radius:4px;overflow:hidden}
  
  main .projects .projects-grid .project .content{opacity:0;color:var(--text-color);padding:16px;background-color:rgb(0, 0, 0);-webkit-transition:0.4s;transition:0.4s}
  
  main .projects .projects-grid .project .content h3,h4{font-size:clamp(12px, 2vw,17px);margin-bottom:16px; color:rgb(217, 90, 90)}
  
  main .projects .projects-grid .project .content p{font-size:18px;margin-bottom:16px; color:rgb(3, 0, 0);}
  

  .project h4 {
    margin-bottom:1px;
  }
  
  main .projects .projects-grid .project td{
  font-size:clamp(10px, 3.5vw, 13px);
  
  }
  



  @media (max-width: 1024px){main .projects .projects-grid .project .content h3{font-size:28px}}
  
  main .projects .projects-grid .project .content p{font-size:50px;margin-bottom:16px}@media (max-width: 1024px){main .projects .projects-grid .project .content p{font-size:30px}}
  
  main .projects .projects-grid .project:hover .content{opacity:1}
  
  main .projects .center{text-align:center}
  
  main .contact{background-color:rgb(0,0,0}
  
  main .contact .container{padding-top:64px;padding-bottom:64px}
  
  main .contact .container h2{color:#050000}
  
  main .contact .container form{display:block;margin:0 auto;max-width:680px}
  
  main .contact .container form .form-grid{display:-ms-grid;display:grid;grid-gap:16px;-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2, 1fr);margin-bottom:16px}
  
  @media (max-width: 767px){main .contact .container form .form-grid{-ms-grid-columns:1fr;grid-template-columns:1fr}}
  
  main .contact .container form .form-grid .form-element,main .contact .container form .form-grid .form-area{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;outline:none;background:none;display:block;width:100%;background-color:rgb(195, 6, 6);border-radius:4px;padding:16px;font-size:20px;color:rgb(230, 81, 7)}
  
  main .contact .container form .form-grid .form-element::-webkit-input-placeholder,main .contact .container form .form-grid .form-area::-webkit-input-placeholder{color:#AAA}
  
  main .contact .container form .form-grid .form-element:-ms-input-placeholder,main .contact .container form .form-grid .form-area:-ms-input-placeholder{color:#AAA}
  
  main .contact .container form .form-grid .form-element::-ms-input-placeholder,main .contact .container form .form-grid .form-area::-ms-input-placeholder{color:#AAA}
  
  main .contact .container form .form-grid .form-element::placeholder,main .contact .container form .form-grid .form-area::placeholder{color:#AAA}
  
  main .contact .container form .form-grid .form-area{grid-column:1/-1}
  
  main .contact .container form .right-align{text-align:right}
  
  @media (max-width: 767px){.hide-mob{display:none}}
  
  .b2{
    font-size:clamp(20px, 4vw, 25px);
  
  }
  .date {
      padding-bottom: 0px;
  }

  .mySlides
  {
margin-bottom: 4px;


  }



  .rotate{
    animation: loading 3s linear infinite;
    @keyframes loading {
     0% { 
       transform: rotate(0); 
     }
     100% { 
       transform: rotate(360deg);
     }
    }
   }

   title {
font-size: x-large;
   }