@charset "UTF-8";
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; 
}


:root {
  --gutter: 20px;
  --color-primary:rgba(134, 0, 0, 1);
  --color-secondary:#333;
  --color-buttons: #646464;
  --h1-font: "Inter", Arial, sans-serif;
  --h1-size: 5.3rem;
  --h1-weight: 700;

}

html 
{
  font-size: 62.5%; 
  scrollbar-width: thin;              /* auto | thin | none */
  scrollbar-color: #888;      /* thumb | track */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

}
  
body {
  font-family: 'Inter';
  color: white;
  background-color: black;
  font-size: 1.6rem;

}

a
{
  color:white;
}
.wp-block-button{
  cursor:pointer;
}
p{
  margin-bottom: 0rem;
}

/* FONT DEFINITION START */
p,
li
{
  font-family: "Inter", sans-serif;
  font-weight: 400;
  line-height: 1.6;
  font-size: clamp(1.60rem, calc(1.547rem + 0.175vw), 1.80rem)
  
}
.like_p{
  font-family: "Inter", sans-serif;
  font-weight: 400;
  line-height: 1.6;
  font-size: clamp(1.60rem, calc(1.547rem + 0.175vw), 1.80rem)
}
.header_footer_txt li {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.5; 
}
h1 {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: clamp(3.00rem, calc(2.4rem + 1.028vw), 4.40rem);
}

.h2_fat {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: clamp(1.50rem, calc(0.700rem + 2.500vw), 3.70rem);
}


h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: clamp(2.00rem, calc(1.337rem + 0.877vw), 3.00rem);
}

h3 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: clamp(1.70rem, calc(1.289rem + 0.702vw), 2.50rem);
}

h4 {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: clamp(1.60rem, calc(1.273rem + 1.023vw), 2.50rem);
}

h5 {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: clamp(1.60rem, calc(1.468rem + 0.439vw), 2.10rem);
}

.italic_txt {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: clamp(1.60rem, calc(1.547rem + 0.175vw), 1.80rem)
}

.articles_txt {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 1.8rem;
}
.like_h3{
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: clamp(1.70rem, calc(1.289rem + 0.702vw), 2.50rem);
}
.like_h4 {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: clamp(1.60rem, calc(1.273rem + 1.023vw), 2.50rem);
}
.like_h5 {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: clamp(1.60rem, calc(1.468rem + 0.439vw), 2.10rem);
}
.distance{
  margin-bottom: 2rem;
}

.buttons{
  background-color: var(--color-primary);
  color:white;
  margin-left: 5rem;
  padding:2rem;
  text-align: center;
}

.txt-align-center {
  text-align: center;
}
.txt-align-left{
  text-align: left;
}

.hide{ 
  display: none;
}

button{
  cursor: pointer;
}



/* FONT DEF END */


/* CONTAINERS */


.container{
  display: grid;
  background-color: black;
  grid-template-columns: [full-start] 1fr [center-start] repeat(10, [col-start] minmax(0, 1fr) [col-end]) [center-end] 1fr [full-end];
  max-width: 1440px;
  min-width: 300px;
  margin: 0 auto;
  overflow-x: hidden;
}

  @media only screen and (max-width: 991.98px) {
    .container{
      display: grid;
      background-color: black;
      grid-row-gap: 1.5rem;
      padding-left: 2vw;
      padding-right: 2vw;
      grid-template-columns: [full-start] 0.5fr [center-start] repeat(10, [col-start] minmax(0, 1fr) [col-end]) [center-end] 0.5fr [full-end];
       }
    
  }
/* To make all paragraphs (or any element) span by default: */
@media only screen and (min-width: 722px) {
  .container> * 
  {
    grid-column: center-start/center-end;
  }
}
@media only screen and (max-width: 721.98px) {
  .container> * 
  {
    grid-column: 1 / -1;
  }
}

.container-txt{
  margin: 20rem;
}
.containerOverview {
  width: 100%;
  display: grid;
  background-color: black;
  grid-template-rows: repeat(auto-fit, min-content);
  grid-template-columns: [full-start] minmax(7vw, 1fr) [center-start] repeat(10, [col-start] minmax(min-content, 14rem) [col-end]) [center-end] minmax(7vw, 1fr) [full-end]; }

.containerMascOverview {
  display: grid;
  background-color: black;
  grid-template-rows:repeat(auto-fit, min-content);

  grid-template-columns: [full-start] minmax(7vw, 1fr) [center-start] repeat(10, [col-start] minmax(min-content, 14rem) [col-end]) [center-end] minmax(7vw, 1fr) [full-end]; }

  
  /* iIMPRESSUM */

  .impressumContainer{
    padding-top:10rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:"textimpr imgimpr";
    align-items: start;
    justify-items: stretch;
    margin-bottom: 5rem;
  }
  .impressumContainer figure{
    max-width: 501px;
    order:2
  }
  .impressumContainer figure img{
    height: auto;
    width: 100%;
  }
  @media only screen and (max-width: 991.98px) {
  .impressumContainer {
    display: flex;
    flex-direction: column;
  }
  .impressumContainer figure {
    max-width: 100%;
    order: 2;
    margin-top: 10rem;
  }
} 
  .textCont{
    grid-area:textimpr;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    grid-row-gap: 2rem;
  }


  .impressumContainer img{
    grid-area: imgimpr;
    grid-column: 2;
    justify-self: start;
  }

  .block_center_position{
    grid-column: center-start/center-end;
    text-align: center;
  }

  /* HEADER  (LOGO + NAV) */

.header 
{
  background-color: transparent;
  grid-column: full-start / full-end;
  z-index: 99998;
  position:sticky; 
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  left: 0;
  top:0;
}
  @media only screen and (max-width: 1024px) {

    .header {
      padding:0px;
    }
}
  .logo-box {
    grid-area: logo;
    justify-self: end;
    color: white;
    height: auto;
    z-index: 17;
    display: grid;
    align-items: center; }
    .logo-box__img {
      padding-left: 20px;
      width: 100%;
      height: auto; }


@media only screen and (max-width: 991.98px) {
  .logo-box {
    padding:1rem ;
    grid-area: logo;
    justify-self: center;
    color: white;
    min-width: 13.938rem;
    height: auto;
    z-index: 17;
    display: grid;
    align-self: center; }

}


    
.toggle-nav {
    display: none !important;

}
.main-nav ul{
  display:none;
}
.small-nav ul{
  display:none;
}  

.smallnavigation{
  display: none;
}
.toggle-nav {
  display: none;
}
@media only screen and (min-width: 992px) {

  .nav {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(min-content, max-content) 0.5fr;
    grid-template-areas: "logo . navigation";
    justify-items: end; 
    align-items: center;
    background-color: black;
    padding-top: 20px;
    padding-left: 2rem;
    padding-bottom: 15px;
  }
}
@media only screen and (max-width: 991.98px) {

  .nav {
    grid-row: 1;
    padding-top: 4rem;
    z-index: 13;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
    align-items: center;
    background-color: black;
    /* position: fixed; */
    margin-left: 0px;

  
  }
  .smallnavigation{
    align-self: end;
    padding-right: 2rem;
  }
  #menu-small-nav {
    margin:0;
  }
}
@media only screen and (max-width: 991.98px) {
  .smallnavigation {
    display: block;
    grid-area: navigation; }
}
   @media screen and ( min-width: 992px) {
  .navigation {
    display: block !important;
    z-index: 12;
    grid-area: navigation;
    justify-self: end;
    list-style: none; 
    margin-right: 120px;
  }
  
  .main-nav{
    display: block !important;
  }
  .small-nav{
    display: none !important;
  }
  
  .main-nav ul{
    position: relative;
    display: inline-block;
    z-index: 10;
    display: flex;
    flex-direction: row;
    list-style-type: none;
    margin-right:20px;
    grid-column-gap: 25px;
    align-items: center;
  }

  .main-nav ul li {
    background-color: transparent;
    color: white;
    padding: 1px;
    border: none;
    cursor: pointer; }
    }

    
  .main-nav ul ul {

    display: none;
    background-color: rgb(0, 0, 0);
    opacity: 80%;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    position: absolute;
    z-index: 1; 
  }
  
  .main-nav ul li a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  .main-nav ul li a:hover {
  background-color: #222222;
  transform: scale(1.05);
  
  }
  
.main-nav:hover .main-nav ul li {
    display: block; }
.main-nav > .main-nav ul li:hover > .main-nav ul li ul > a {
  display: block; }

.main-nav > .main-nav ul li > .main-nav ul li ul > a {
    display: none; }
  
.main-nav:hover .main-nav ul li {
    background-color: #222222; }
  

.main-nav ul li:hover > ul {
  display: block;
}

.small-nav ul{
  position: relative;
  display: inline-block;
  z-index: 10;
  display: flex;
  flex-direction: row;
  list-style-type: none;
  margin-right:20px;
}

.small-nav ul li {
  background-color: transparent;
  color: white;
  padding: 16px;
  font-size: 1.5rem;
  border: none;
  cursor: pointer; }


  
.small-nav ul ul {

  display: none;
  font-size: 1.5rem;
  background-color: rgb(0, 0, 0);
  opacity: 80%;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  position: absolute;
  z-index: 1; 
}

.small-nav ul li a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  /*border-bottom: 1px dotted grey; */
}

  .small-nav ul li a:hover {
  background-color: #222222;
  
 }
 

.small-nav:hover .small-nav ul li {
  display: block; }
.small-nav > .small-nav ul li:hover > .small-nav ul li ul > a {
  display: block; }
.small-nav > .small-nav ul li > .small-nav ul li ul > a {
  display: none; }
.small-nav:hover .small-nav ul li {
  background-color: #222222; }
.small-nav ul li:hover > ul {
  display: block;
}
.main-nav ul li.current-menu-item a {
  border-bottom: 3px solid #630101;
}


@media screen and ( max-width: 1060px) {
  .main-nav ul {
    
    grid-column-gap: 0px;

}
}
@media only screen and (max-width: 991.98px) {

  .toggle-nav {
    display: inline-block !important;
  }
  a.toggle-nav {
    color: #fff;
    transition: color linear 0.15s;
    font-size:30px;
    text-decoration: none;
  }
  a.toggle-nav:hover, a.toggle-nav:active {
      text-decoration: none;
      color: #fff;
  } 
    
  a.toggle-nav:link, 
    a.toggle-nav:visited,
    a.toggle-nav:hover, 
    a.toggle-nav:active {
          text-decoration: none;
          color: #fff;
      } 

 
  #menu-small-nav{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: min-content;

  }
  #menu-item-4569{
    grid-column: 1;
    grid-row: 1;
  }
  #menu-item-4570{
    grid-column: 1;
    grid-row: 2;
  }
  #menu-item-4574 {
    grid-column: 1;
    grid-row: 3;
  }
  #menu-item-4573 {
    grid-column: 1;
    grid-row: 4;
  }
  #menu-item-4571 {
    grid-column: 2;
    grid-row: 1;
  }
  #menu-item-4572{
    grid-column: 2;
    grid-row: 2;
  }
  #menu-item-4575{
    grid-column: 2;
    grid-row: 3;
  }
  #menu-item-4576{
    grid-column: 2;
    grid-row: 4;
  }
  #menu-item-4577{
    grid-column: 2;
    grid-row: 5;
  }
  
 
.logoImg{
  grid-column: 1;
  grid-area: logo;
}
.logoImg a img{
  width: 200px;
}
.main-nav{
  position: relative;
  display: none;
  z-index: 10;
}
.small-nav{
  position: relative;
  display: none;
  z-index: 10;
}

.menu-navbar {
  display: none;
  font-size: 1.5rem;
  background-color: black;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  position: absolute;
  z-index: 1; 
  align-items: center;

}


#menu-item-4568 > a{
  font-size: 3rem ;
}


.main-nav ul {
  display: inline-block;
  left:0px;
  z-index: 10;
  list-style-type: none;
  }
  .main-nav ul li 
  {
    
    background-color: transparent;
    
    color: white;
    font-size: 1.5rem;
    border: none;
    cursor: pointer; 
  }
  
     
  .main-nav ul ul {
    display: none;
    font-size: 1.5rem;
    background-color: black;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

    z-index: 1; 
} 
  
.main-nav ul li a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  transition: width 0.3s ease;
  
}

.main-nav ul li.current_page_item {
    border-bottom: 3px solid red !important;
    display: inline-block !important;
    padding-bottom: 3px !important;
}
.main-nav ul li:active{
  border-bottom: 2px solid #a20000;
}
.main-nav ul li:hover {
  background-color: #0c0c0c; 
  
}

.main-nav:hover .menu-navbar li {
  display: block; }

.main-nav ul li:hover > ul {
  display: block; }

  .main-nav ul li > ul{
  display: none; }

.small-nav ul {
  display: inline-block;
  left:0px;
  z-index: 10;
  list-style-type: none;
  }
  .small-nav ul li 
  {
    
    background-color: transparent;
    
    color: white;
    font-size: 1.5rem;
    border: none;
    cursor: pointer; 
    

  }
      
       
    .small-nav ul ul {
      display: none;
      font-size: 1.5rem;
      background-color: black;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  
      z-index: 1; 
  }
      
    .small-nav ul li a {
      color: white;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      /* border-bottom: 1px dotted grey; */
      
    }
    .small-nav ul li:hover {
      background-color: #0c0c0c; }
    
    .small-nav:hover .menu-navbar li {
      display: block; }
    
    .small-nav ul li:hover > ul {
      display: block; }
    
      .small-nav ul li > ul{
      display: none; }
}
@media only screen and (max-width: 991.98px) {


  .small-nav ul li {
    padding:0px;
  }
}


/*  HEADER HOMEPAGE BEGIN */

.homepageTitle{
    margin-top: 9vw;
}


/* HEADER HOMEPAGE END */
/* VIDEO */

/* TIM  */

.bg-video {
  grid-column: full-start / full-end;
  position: relative;
  height: 50vh;
  overflow: hidden;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

  .bg-video__content {
   position: absolute;
   height: 100%;
  top: 0; left: 0;
  width: 100%;
  object-fit: cover;
  z-index: 0;
  
}


@media only screen and (max-width: 991.98px) {
  .bg-video__content {
    object-position: 90% 30%;
}
   
}

.bg-video__DetailMaschine__content {
  height: auto;
  width: 80%;
  object-fit: cover;
  justify-self: end;
}

.bg-video::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.9));
  z-index: 1;
  pointer-events: none; /* Allow clicks through */
    }
    @media only screen and (max-width: 991.98px) {
      /* .bg-video {
        height: 20vh;
      } */
    }
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
      /* .bg-video {
        height: 30vh;
      } */

    }
  .videoIcons {
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: center;
    align-items: start;
    height: 100%; 
    width: 100%;
    flex-direction: column;
    margin-left: 100px;
  }
  .videoIcons img {
    object-fit: contain;
    transition: transform 0.3s ease-in-out;
  }

  .maschineImage{
    position:absolute;
    height: auto;
    z-index: 1;
    background-color: transparent;
    display: grid;
    grid-template-rows: repeat(6, min-content);
    z-index: 4;
    transition: transform .2s;
    align-self:center;
    margin-left: 2w;
    width:30%;
  }
  .maschineImage figure img{
    width: 99%;
  }
  .videoIcons img {
    width: clamp(90px, 1rem + 10vw, 120px);
    height: auto;
    transition: width 0.3s ease;
  }
  .videoIcons a{
    display: flex;
    justify-content: center;
  }
  .videoIcons img:hover, .maschineImage figure img:hover{
    transform: scale(1.1);
      }
    @media only screen and (max-width: 991.98px) {
      .videoIcons {
        display: flex;
        flex-direction: row;
        z-index: 10000;
        justify-self: center;
        margin-left: 0px;
        align-items: center;
        height: 100%;
      }
      
    }
   


/* TIM END */


.video-box {
  background-color: black;
  grid-column: full-start / full-end;
  grid-row: 2;
  display: grid;
  justify-content: center;
  }

.static-box {
  grid-column: full-start / full-end;
    position: relative;
    height: 50vh;
    /* max-height: 455px; */
    overflow: hidden;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
  }
  @media only screen and (max-width: 991.98px) {
    .static-box .videoOv{
      object-position: 50% 0%;
    }
    .static-box{
      margin-left: 0;
      margin-right: 0;
    }
  }
  
.static-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.9));
  z-index: 1;
  pointer-events: none;
}

#video-box {
  grid-column: full-start / full-end;
  grid-row: 2;
  display: grid;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100%;
  margin: auto;
  }
#video-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgb(0, 0, 0) 0%, transparent 50%, transparent 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 2em;
  pointer-events: none; /* allow clicks to pass through to video */
    }
  #video-box video {
    display: block;
    width: 100%;
    height: auto;
  }
  @media only screen and (max-width: 991.98px) {

    .video-box video{
      object-fit: fill;
      width: 100%;
      height: 180px;
    }
  }
/* black gradient 1 */

  .video {
  width: 90%;
  height: auto; }

  .video-overview {
    background-color: black;
    grid-column: full-start / full-end;
    grid-row: 2; }
  
  .video {
    width: 100%;
    height: auto; }

    
    .videoDesc {
      grid-row: 2;
      background-color: transparent;
      grid-column: col-start 1 / col-start 2;
      align-self: center;
      /* margin-top: 15rem; */
      display: grid;
      grid-template-rows: repeat(6, min-content);
      z-index: 4;
      transition: transform .2s;
    }
    .videoDesc img:hover{
      transform: scale(1.1);
        }
      @media only screen and (max-width: 68.75em) {
        .videoDesc {
          grid-column: center-start / center-end;
          /* grid-row: min-content; */
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          justify-items: center;
          margin-top: 10rem;
        } }
    
    @media only screen and (max-width: 68.75em) {
      .videofrasenimg {
        grid-row: 1; } }
    
    @media only screen and (max-width: 68.75em) {
      .videofrasenpar {
        grid-row: 2; } }
    
    @media only screen and (max-width: 68.75em) {
      .videodrehenimg {
        grid-row: 1; } }
        
    
    @media only screen and (max-width: 68.75em) {
      .videodrehenpar {
        grid-row: 2; } }
    
    @media only screen and (max-width: 68.75em) {
      .videoschleifenimg {
        grid-row: 1; } }
    
    @media only screen and (max-width: 68.75em) {
      .videoschleifenpar {
        grid-row: 2; } }
    
    .videoDesc p {
      text-align: center;
      font-size: 2rem; }
    
    .videoDesc img {
      justify-self: center; }
    
    
    
    .video-box-overview {
      background-color: black;
      grid-column: col-start 2 / full-end;
      
      grid-row: 2;
      width: 100%;
      height: 100%;
      justify-content: end;
      padding-bottom: 2%;
      position: relative; }
    
    #video-box-overview:before {
      min-height: 100%;
      content: '';
      position: absolute;
      height: 100%;
      width: 100%;
      background: white;
      background: linear-gradient(to right, #000000, transparent, transparent, transparent, transparent), linear-gradient(to top, #000000, #1d1d1d, transparent, transparent, transparent); }
  
        /* VIDEO GRADIENTS */
    .video-box-overview-det{
      background-color: black;
      grid-column: col-start 2 / -1;
      grid-row: 2;
      width: 85%;
      height: 100%;
      justify-content: end;
      position: relative;
      justify-self: end;
    }
    #video-box-overview-det:before {
    min-height: 100%;
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background: linear-gradient(to right, #000, transparent, transparent, transparent, transparent), linear-gradient(to top, black, black 1%, black, transparent, transparent);}
    /* black gradient 1 */
    .videoOv {
      position: absolute;
      height: 100%;
      top: 0;
      left: 0;
      width: 100%;
      object-fit: cover;
      z-index: 0;
      object-position: 10% 0%;
    }
  
    .videoImg {
      background-color: black;
      padding-top: 10em;
      display: grid;
      align-items: center; }
    
    .videoImg figure img {
      width: 25vw;
      height: auto;
      z-index: 15; }
  
      @media only screen and (max-width: 50.5em) {
        .videoImg {
          grid-column: col-start 1 / col-start 2;
          grid-row: 1 / 2;
          display: grid;
          justify-items: left;
        }
      }

  /* 4BUTTONS HOMEPAGE */
  .imageSeq {
    background-color: black;
    grid-column: full-start / full-end;
    display: grid;
    grid-template-columns: [full-start] minmax(3rem, 1fr) repeat(4, [col-start] minmax(min-content, 1fr) [col-end]) minmax(3rem, 1fr) [full-end];
    grid-auto-rows: repeat(2, minmax(auto, min-content));
    grid-column-gap: 4rem;
    grid-row-gap: 3rem;
    align-items: center;
    justify-content: center;
    padding-bottom: 6.875rem;
    padding-top: 10rem; }


  
@media only screen and (max-width: 991.98px) {

  .imageSeq {

    padding-bottom: 1rem;
   
  }
}
  

.imageSeq__im1 img {
  /* width: calc(5vw + 80%); */
  height: auto;
  opacity: 0.6; 
  transition: transform .2s;
  object-fit: cover;
  aspect-ratio: 0.65;
}
.imageSeq__im1 img:hover{
  transform: scale(1.1);
    }
.imageSeq__MaschineDesc1 {
  text-align: center;
  grid-column: 2;
  grid-row: 2; }

.imageSeq__MaschineDesc1_par{
  color: white; 
  text-align: center; 
}

.imageSeq__im2 {
  grid-column: 3;
  grid-row: 1; }
.imageSeq__im2 img {
  /* width: calc(5vw + 80%); */
  height: auto;
  opacity: 0.6; 
  transition: transform .2s;
  object-fit: cover;
  aspect-ratio: 0.65;
}
  .imageSeq__im2 img:hover{
    transform: scale(1.1);
      }
.imageSeq__MaschineDesc2 {
  text-align: center;
  grid-column: 3;
  grid-row: 2; }
  .imageSeq__MaschineDesc2 p{
    color: white; 
    text-align: center; 
    font-size: 1.8em;
  }
.imageSeq__im3 {
  grid-column: 4;
  grid-row: 1; }
.imageSeq__im3 img {
  /* width: calc(5vw + 80%); */
  height: auto;
  opacity: 0.5; 
  transition: transform .2s;
  object-fit: cover;
  aspect-ratio: 0.65;
}
.imageSeq__im3 img:hover{
transform: scale(1.1);
  }
.imageSeq__MaschineDesc3 {
  text-align: center;
  grid-column: 4;
  grid-row: 2; }
  .imageSeq__MaschineDesc3 p{
    color: white; 
    text-align: center; 
    font-size: 1.8em;
  }
.imageSeq__im4 {
  grid-column: 5;
  grid-row: 1; }
.imageSeq__im4 img {
  /* width: calc(5vw + 80%); */
  height: auto;
  opacity: 0.85; 
  transition: transform .2s;
  object-fit: cover;
  aspect-ratio: 0.65;
}
.imageSeq__im4 img:hover{
  transform: scale(1.1);
    }
.imageSeq__MaschineDesc4 {
  text-align: center;
  grid-column: 5;
  grid-row: 2; }
  .imageSeq__MaschineDesc4 p{
    color: white; 
    text-align: center; 
    font-size: 1.8em;
  }
  /* AKTUELLE EREIGISSE  */
  
  .description {
    border-top: 1px solid #1c1c1c;
    background-color: black;
    color: white;
    display: grid;
    grid-template-areas: ". text-group .";
    grid-template-columns: 1fr max-content 1fr;
    justify-items: center;
    grid-row-gap: 0.7rem;
    padding:4vw;
}
.description__text-group {
  grid-area: text-group;
  display: grid;
  grid-template-areas: "desctitle" "descpar1" "descpar2";
  grid-row-gap: 0.938vw; 
}
.description__title {
  grid-area: desctitle;
  letter-spacing: 0em;
  text-align: center; 
}
.description__par1 {
  grid-area: descpar1;
  text-align: center; 
}
.description__par2 {
  grid-area: descpar2;
  text-align: center; 
}

      @media only screen and (max-width: 991.98px) {

  
        .description {
          color:white;
          padding-bottom: 3vw;
        }
        .description__par1 {
          
          /* font-size: 9px; */
          object-fit: cover;
          width: 300px;
          word-wrap: break-word;
        }
        .description__par2 {
          /* font-size: 9px; */
          object-fit: cover;
          width: 300px;
          word-wrap: break-word;
        }
      }

  
  /* MASCHINE HOMPAGE IMAGE */
  .image2 {
    background-color: black;
    grid-column: 1 / -1;
  }
  .image2__pic {
    width: 100%;
    height: auto; }

  .wp-image-5576{
      width: 100%;
      height: auto; }
  .image2 img{
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  .wp-block-button__link {
    padding-left: 10px;
    padding-right: 10px;
    text-decoration: none;
  }

 
  div.wp-block-cover.image2 div.wp-block-cover__inner-container.is-layout-constrained.wp-block-cover-is-layout-constrained div.wp-block-buttons.is-layout-flex.wp-block-buttons-is-layout-flex div.wp-block-button a.wp-block-button__link.has-vivid-red-background-color.has-background.has-small-font-size.has-text-align-right.has-custom-font-size.wp-element-button{
    background-color: rgba(134, 0, 0, 1);
    width: max-content;
    padding: 10px;
    line-height: 0px;
  }
  .wp-block-buttons a {
    line-height: 0px;
  }


  /* image2 tim */

  .angebot-anfragen {
    position: relative;
    display: flex;
    align-items: center; /* vertical center */
    justify-content: center; /* push content left, use flex-end for right */
    width: 100%;
  }
  
  .angebot-anfragen__img {
    width: 100%;
    height: auto; /*scales with window */
    display: block;
  }
  
  .angebot-anfragen__content {
    position: absolute; /*Sits on top of the image*/
    color: #fff;
    left: 60%;
  }

  
  
  .angebot-anfragen__title {
    text-align: left;
    margin-bottom: 1.5rem;
  }
  @media only screen and (max-width: 400.98px)
  {
    .angebot-anfragen__content {
      left:57%;
    }
  }
  

  .angebot-anfragen__btn {
    border: none;
    padding: 0.75em 1.5em;
    color: #fff;
    cursor: pointer;
    border-radius: 10px;
    background-color: var(--color-primary); /* solid color */
    box-shadow: var(--shadow-dark);
    transition: transform 0.2s;
  }
  


  .angebot-anfragen figure img{
    width: 100%;
  height: auto;
  }
  
  .angebot-anfragen__btn:hover {
    transform: translateY(-3px);
  }

  /* end */

  /* Befragung nach ISO9001 */


.feature__icon {
  justify-self: center;

  height: 70px;

  align-self: end;

}
.feature__icon figure img{
  height:auto;

}
.feature__num p {
  color: white;
  font-size: 5rem;
  text-shadow: 0px 0px 30px rgba(255, 255, 255, 0.3), 0px 0px 30px rgba(255, 255, 255, 0.3), 0px 0px 30px rgba(255, 255, 255, 0.3), 0px 0px 10px rgba(255, 255, 255, 0.3), 0px 0px 10px rgba(255, 255, 255, 0.3);
  line-height: 1.5rem;
  font-family: 'Inter' ; 
  text-decoration: none;
}
  .feature__text {
    font-size: 2rem;
    text-decoration: none;
    text-align: center;
    font-weight: 300;
    line-height: 2.5rem;
    letter-spacing: 0em;
    font-family: 'Inter';
    display: grid;
    grid-template-rows: min-content min-content;
    grid-row-gap: 1rem;
  }
    .feature__text p:nth-child(1) { 
      color: white; 
      font-weight: bold;
    }
    .feature__text p:nth-child(2) { 
      color: white; 
    }
    @media only screen and (max-width: 991.98px) {
      .kundenzufriedenheit {
      grid-column: center-start / center-end;
      margin: 5rem 0;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
      justify-items: stretch;
      grid-row-gap: 3rem;
     
    }
    .feature {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(3, min-content);
      justify-items: center;
      grid-row-gap: 3rem;
      align-content: baseline; 
    }
  .feature__icon {
    
    height: auto;
    align-self: end; 
    display: grid;
    grid-template-columns: repeat(3, min-content);

    }
  .feature__icon figure  {
    grid-column: 2;
    justify-self:center;
      }
      .feature__icon img  {
      width: 10vw;
        }
  .feature__num p {
    color: white;
    font-size: 2rem;
    text-shadow: 0px 0px 30px rgba(255, 255, 255, 0.3), 0px 0px 30px rgba(255, 255, 255, 0.3), 0px 0px 30px rgba(255, 255, 255, 0.3), 0px 0px 10px rgba(255, 255, 255, 0.3), 0px 0px 10px rgba(255, 255, 255, 0.3);
    line-height: 1.5rem;
    font-family: 'Inter' ; 
    text-decoration: none;
  }
  .feature__text {
    font-size: 2rem;
    text-decoration: none;
    text-align: center;
    font-weight: 300;
    line-height: 1.5rem;
    letter-spacing: 0em;
    font-family: 'Inter' ;
    display: grid;
    grid-template-rows: min-content min-content;
    grid-row-gap: 1rem; }
  .feature__text p:nth-child(1) { 
    color: white; 
    font-weight: bold;
    font-size: 1.8rem;
  }
  .feature__text p:nth-child(2) { 
    color: white; 
    font-size: 1.8rem;
  }
  
  }

  /* ANWENDER BERICHTE */

  .anwendeberichte_posts{
    list-style-type:none; 
    display: grid;
    grid-row-gap: 3rem ;
    margin-bottom: 10rem;
    
  }
  
  @media only screen and (max-width: 991.98px) {
  .anwendeberichte_posts {
    list-style-type: none;
    margin-bottom: 5rem;
  }
  }
  .wp-block-latest-posts__post-title{
    display: none;
  }
  .history {
    background-color: black;
    grid-column: center-start / center-end;
    display: grid;
    grid-template-rows: min-content 3, minmax(163.5px, 1fr);
    grid-row-gap: 2.5rem;
    justify-items: center; }
    @media only screen and (max-width: 50.5em) {
      .history {
        grid-template-rows: 1fr;
        grid-row-gap: 2.5rem;
        justify-self: center;
        padding-bottom: 8rem; } }
    @media only screen and (max-width: 50.5em) {
      .history {
        grid-row-gap: rem; } }
  
  .historyTitle {
    grid-row: 1;
    font-family: 'Inter' ;
    text-align: center;
    font-size: 3rem;
    font-style: normal;
    font-weight: 300;
    line-height: 1.5rem;
    /* 80% */
    padding-bottom: 5rem; }
  
  .historyCard {
    background: #2a2a2a;
    display: grid; 
    transition: transform .2s;
    

  
  }
  .imgCard:hover{
    transform: scale(1.1);
    transition: transform 0.3s ease-in-out;
      }
  .icons a:hover{

    transform: scale(1.3);
    transition: transform 0.3s ease-in-out;

  }

  @media only screen and (max-width: 30em) {
    .historyCard {
      max-width: 300px; } }
      @media only screen and (min-width: 601px) {
        #myBtn,  #myBtn2, #myBtn3, #dots {
          display: none; }
        #more {
          display: block; } }
  @media only screen and (min-width: 601px) {
    .historyCard {
      grid-template-columns: 1fr 2fr;
      grid-template-areas: "imgcard textcard"; } }
  
  
  
  @media only screen and (max-width: 600.98px) {
    .historyCard {
      grid-template-areas: "imgcard" "textcard";
      grid-template-rows: min-content min-content;
      max-width: 400px;
    .textCard__par {
  margin-top: 2.5rem;
  grid-area: par;
  align-self: center;
  margin-right: 0rem;
} }
    #more2 {
      display: none; }
    #more3 {
      display: none; }
    #more {
      display: none; } 
      }
  
  .imgCard {
    grid-area: imgcard; }
  
  
  .textCard {
    width: 100%;
    height: 100%;
    grid-area: textcard;
    color: white;
    /* padding: 3.125rem; */
    align-content: center;
    justify-self: center;
    display: grid;
    grid-template-rows: repeat(2, min-content);
    grid-template-areas: "title" "par"; }
    .textCard a{
      text-decoration: none;
      color:white;
    }
    @media only screen and (max-width: 50.5em) {
      .textCard {
        background-color: #454545;
        padding: 2rem; } }
    @media only screen and (max-width: 30em) {
      .textCard {
        height: 100%; } }

.AnwendeberichteTitle {
  font-family: 'Inter' ;
  text-align: center;
  font-size: 3rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.5rem;
  /* 80% */
  padding-bottom: 2rem;
  grid-column: center-start / center-end;
}

      .anwendeberichte_posts_title{
        font-family: 'Inter';
        font-size: 25px;
      }

/* REFERENZEN */

  .referenzen {
    overflow: hidden;
    padding-top: 10rem;
    background-color: black;
    grid-row: 8;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, min-content);
    grid-row-gap: 10rem; }



  .referenzenTitle {
    grid-column: 1 / -1;
    grid-row: 1;
    color: #FFF;
    font-family: 'Inter';
    font-size: 3.5rem;
    font-style: normal;
    font-weight: 200;
    line-height: normal; }

  .referenzenList {
    padding-top: 5rem;
    grid-column: 1 / -1;
    background-color: black;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-column-gap: 22rem; }

  @keyframes infiniteScroll {
    0% { background-position: 0 0; }
  50% { background-position: 0 -500px; }
  100% { background-position: 0 -900px; } }

  .horizontal-scrolling-items {
    display: flex;
    justify-content: space-evenly;
    grid-column-gap: 20rem;
    width: 100%;
    font-size: 4rem;
    animation-name: infiniteScroll;
    animation-duration: 40s;
    animation-iteration-count: infinite;
    animation-timing-function: linear; }

  .horizontal-scrolling-items__item {
    white-space: nowrap; }

  .horizontal-scrolling-items__item p {
    color: #606060;
    font-family: 'Inter';
    font-size: 3.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal; }

    .Referenzen {
      margin-bottom: 15rem;
    }
  .marquee {
  
    width: 100%;
    overflow: hidden;
    background: transparent;
    position: relative;
  }
  .marquee_title{
    color: #FFF;
    text-align: left;
    margin-bottom: 5.2rem;
  
  }
  .marquee-content {
    max-width: 1120px;
    margin-top: 20px;
    display: flex;
    width: max-content;
    animation: scroll-marquee 0s linear infinite;
    animation-duration: 50s;
    color: #bbb;
    font-family: 'Inter';
    font-size: 3.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
  
.marquee-item {
  flex: 0 0 auto;
  padding: 10px 20px;
  margin-right: 30px;
  background: transparent;
  white-space: nowrap;
}
.marquee-item p {

  font-size: clamp(1.70rem, calc(1.289rem + 0.702vw), 2.50rem);
}
  
  @keyframes scroll-marquee {
    0% {
      transform: translateX(0%);
    }
  
    100% {
      transform: translateX(-100%);
    }
  }
  
    
  /* FOOTER  */
  
 /* FOOTER  */
 .kontakt {
  background-color: black;
  margin-bottom: 10rem;
  display: grid;
  grid-auto-rows: max-content;
  grid-template-columns: max-content max-content max-content;
  align-content: stretch;
  grid-column-gap: 7rem; }
  

.contacts 
{
  grid-row: 1;
  grid-column: 1;
  color: white;
  display: grid;
}
.contacts h2 
{
  margin-bottom: 1.5rem;
}
.contacts p:nth-of-type(2n) {
  margin-bottom: 2rem; /* or margin-bottom, or both */
}
  

    a[href^="tel:"] {
      color: white;
      text-decoration: none;
      
    }
    .contacts a{
      text-decoration: none;
      color:white;
    }
   
  .contacts br {
    margin: 1em;
    display: block;
    font-size: 24%; }
  
  
  .mapSite {
    align-self: center;
    grid-row: 1;
    grid-column: 2;
    color: white;
    border-left: 1px solid white;
    padding-left: 3rem;
    justify-self: center; }
    @media only screen and (max-width: 50.5em) {
      .mapSite {
        grid-row: 2;
        grid-column: 4;
        justify-self: center; } }
    @media only screen and (max-width: 30em) {
      .mapSite {
        grid-row: 2;
        grid-column: 3;
        justify-self: center; } }
  
  .mapSite > ul > li {
    font-family: 'Inter' ; }

    @media only screen and (max-width: 30em) {
      .mapSite > ul > li {
        max-width: 13ch; }
    }
  
  .icons {
    grid-row: 1;
    grid-column: 5 / 6;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(3, max-content);
    grid-auto-rows: max-content;
    align-self: end;
    justify-self: end; }
    @media only screen and (max-width: 50.5em) {
      .icons {
        grid-row: 1;
        grid-column: 2 / 6;
        justify-self: center; } }
    @media only screen and (max-width: 30em) {
      .icons {
        grid-row: 1;
        grid-column: 2 / 4;
        justify-self: center; } }
  
  .youtube {
    align-self: end;
    grid-row: 1;
    grid-template-columns: 1;
    align-self: end; }
  
  .instagram {
    grid-row: 1;
    grid-template-columns: 2;
    align-self: end; }
  
  .linkedin {
    grid-row: 1;
    grid-template-columns: 3;
    align-self: end; }
  
  .kundenzufriedenheit {
    grid-column: center-start / center-end;
    margin: 5rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    justify-items: stretch;
    grid-row-gap: 3rem;
    grid-column-gap: 3rem;
   
  }
  
  .iconsgroup {
    max-width: 3rem;
    max-height: 3rem; }
  
  .feature {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, min-content);
    justify-items: center;
    grid-row-gap: 3rem;
    align-content: baseline; 
    
    
  }


  hr {
    display: block;
    height: 1px;
    width: 100%;
    grid-column: 1 / -1;
    padding: 0;
    border: 0.1885rem solid #7a0000; }
   
      @media only screen and (max-width: 50.5em) {
        .mapSite {
          grid-row: 2;
          grid-column: 4;
          justify-self: center; } }
      @media only screen and (max-width: 30em) {
        .mapSite {
          grid-row: 2;
          grid-column: 3;
          justify-self: center; } }
    
    .mapSite > ul > li {
      font-family: 'Inter' ; }

      .mapSite a{
        color: white;
        text-decoration: none;
        overflow-wrap: break-word;
        word-break: break-word;
        white-space: normal;
        hyphens: auto;
      }
    
    .icons {
      grid-row: 1;
      grid-column: 5 / 6;
      display: grid;
      grid-auto-flow: column;
      grid-template-columns: repeat(3, max-content);
      grid-auto-rows: max-content;
      align-self: end;
      justify-self: end; }
    
    
    .youtube {
      align-self: end;
      grid-row: 1;
      grid-template-columns: 1;
      align-self: end; }
    
    .instagram {
      grid-row: 1;
      grid-template-columns: 2;
      align-self: end; }
    
    .linkedin {
      grid-row: 1;
      grid-template-columns: 3;
      align-self: end; }
      .icons {
        grid-row: 1;
        grid-column: 5 / 6;
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: repeat(3, max-content);
        grid-auto-rows: max-content;
        align-self: end;
        justify-self: end; }
  
      @media only screen and (max-width: 991.98px) {
        .kontakt {
          display: grid;
          grid-template-rows: min-content 1fr;
          grid-template-columns: repeat(2,1fr);
          grid-row-gap: 3rem;
          padding: 0px;
          margin: 0px;
          justify-content: center;
          grid-column-gap: 0;
        } 
          .contacts 
          {
            grid-row: 2;
            grid-column: 1;
          }
          .mapSite{
            grid-row: 2;
            grid-column: 2;
            padding-left: 1rem;
          }
          .icons{
            grid-row: 1;
            justify-self: center;
            grid-column: 1 / -1;
          }
        }
        @media only screen and (max-width: 400.98px) {
          .kontakt {
            display: grid;
            grid-template-rows: min-content 1fr;
            grid-template-columns: 180px auto;
            grid-row-gap: 3rem;
            padding: 0px;
            margin: 0px;
            justify-content: center;
            grid-column-gap: 0;
          } 
        }
/* DREHEN FRASEN SCHLEIFEN MASCHINE OVERVIEW BUTTONS */
  .lagermaschineDes{
    margin-top: 10vh;
  }
  .maschinesIcons {
    padding-bottom: 20rem;
    background-color: black;
    grid-column: center-start / center-end;
    display: grid;
    grid-auto-rows: min-content;
    grid-row-gap: 30px; }
  
  .myDivFrasenTitle {
    grid-row: 1;
    font-family: 'Inter';
    font-size: 3rem;
    font-style: normal;
    font-weight: 200;
    line-height: normal; }
  
  .Frasendivcont, .FrasendivcontSale {
    grid-column: 1 / -1; }
  
  .myDivFrasen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: min-content;
    justify-content: center; }

 
  
  .myDivDrehenTitle {
    grid-column: 1 / -1;
    justify-self: start;
    justify-self: start;
    margin-top: 5rem;
    margin-bottom: 2rem;
   }
   .myDivDrehenTitle ~ p{
    grid-column: 1 / -1;
    justify-self: start;
    justify-self: start;
    margin-bottom: 4rem;
    margin-top: -5rem;
   }
   .myDivDrehenPar{
    grid-column: 1 / -1;
    justify-self: start;
    justify-self: start;
    margin-bottom: 10rem;
   }
   .DrehendivcontSale .myDivDrehenGrid h2, .FrasendivcontSale .myDivDrehenGrid h2, .SchleifendivcontSale .myDivDrehenGrid h2{
    margin-bottom: 2rem;
  }
  #menu-item-6279 a{
    color:red;
  }
  @media only screen and (max-width: 991.98px) {
  
      .myDivDrehenTitle {
        grid-column: 1 / -1;
        padding-bottom:3rem;
        padding-top:0rem;
        justify-self: center;
        text-align: center;
        margin-top: 1rem;
      }}
        @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
          .myDivDrehenTitle {
            grid-column: 1 / -1;
            padding-top:0rem;
            padding-bottom:3rem;
            justify-self: center;
            text-align: center;
            margin-top: 1rem;
          
          }
      }

  
  .myDivDrehen {
    display: none;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, min-content));
    grid-column-gap: 10rem;
    grid-auto-rows: min-content;
    justify-content: start; }

  .myDivDrehenGrid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, max-content));
    justify-items: stretch;
    grid-row-gap: 5rem;
    grid-column-gap: 10rem;
    margin-bottom: 10rem;
    align-items: start;
    grid-template-rows: min-content min-content 1fr;
  }
  .maschineGrid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, min-content));
    justify-content: center;
    grid-row-gap: 8rem;
    grid-column-gap: 8rem;
    margin-bottom: 10rem;
    align-items: start;
    grid-template-rows: min-content min-content 1fr;
  }
  .myDivDrehenGrid__subgrid {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    color: white;
    grid-row-gap: 1.5rem;
  }
  @media only screen and (max-width: 991.98px) {
    .myDivDrehenGrid__subgrid{
    justify-self: center;
    }
  }
  .myDivDrehenGrid__subgrid figure{
    justify-self: center;
  }
  .myDivDrehenGrid__subgrid figure:hover{
    transform: scale(1.1);
    transition: transform 0.3s ease-in-out;
    
  }
  .maschine__subgrid {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    color: white;
    grid-row-gap: 0rem;
    /* grid-row-gap: 1.5rem; */
  }
  .maschine__subgrid p{
    text-align: center;
    font-style: oblique;
  }
  .myDivDrehenGrid__subgrid ul, .maschine__subgrid ul {
    justify-self: center;
  }
 
    .DrehendivcontSale .myDivDrehenGrid .myDivDrehenGrid__subgrid ul li {
      max-width: 21ch;
    }

  .myDivDrehenGrid__subgrid h3, .maschine__subgrid h3 {
    text-align: center;
    align-self: center;
  }
  .myDivDrehenGrid__subgrid figure{
    max-width: 280px;
    justify-self: center;
  }
  .maschine__subgrid figure{
    max-width: 200px;
  }
  .myDivDrehenGrid__subgrid img, .maschine__subgrid img{
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 3px 6px rgb(255, 255, 255));
  }
  /* .myDivDrehenGrid__subgrid img:hover, .maschine__subgrid img:hover {
    transform: scale(1.1);
    transition: transform 0.3s ease-in-out;
  } */
  .myDivSchleifenTitle {
    grid-row: 1;
    font-family: 'Inter';
    font-size: 3rem;
    font-style: normal;
    font-weight: 200;
    line-height: normal; }
  
  .myDivSchleifen {
    display: none;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: min-content;
    justify-items: start; }
  .myDivSchleifen{
    display: none;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, min-content));
    grid-column-gap: 10rem;
    grid-auto-rows: min-content;
    justify-content: start; }
  .myDivFrasen{
    display: none;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, min-content));
    grid-column-gap: 10rem;
    grid-auto-rows: min-content;
    justify-content: start; }
      
  .buttonsList {
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 1.25rem; }
  
  .buttonFrasen, .buttonFrasenSale {
    grid-column: 2;
    width: 35rem;
    height: 8rem;
    background-color: #606060;
    border: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-self: start; }
  
    .buttonFrasen img, .buttonFrasenSale figure {
    grid-column: 2;
    width: 8rem;
    height: 8rem; }
  .buttonFrasenSale img, .buttonSchleifenSale img {
    width: 100%;
    height: auto;
  }
  .buttonFrasen p,  .buttonFrasenSale p{
    grid-column: 3;
    color: white;
    text-align: center;
    align-self: center; 
   font-size: 2.5rem;
   font-family: 'Inter';}
  
  .buttonDrehen, .buttonDrehenSale {
    grid-column: 1;
    width: 35rem;
    height: 8rem;
    background-color: #606060;
    border: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-self: center; 
    }
  
  .buttonDrehen img, .buttonDrehenSale figure {
    grid-column: 2;
    width: 8rem;
    height: 8rem; }
  
  .buttonDrehen p, .buttonDrehenSale p {
    grid-column: 3;
    color: white;
    text-align: center;
    align-self: center;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 2.5rem; }
  
  .buttonSchleifen {
    grid-column: 3;
    width: 35rem;
    height: 8rem;
    background-color: #606060;
    border: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-self: end; }
  
  .buttonSchleifen img {
    grid-column: 2;
    width: 8rem;
    height: 8rem; }
  
  .buttonSchleifen p {
    grid-column: 3;
    color: white;
    text-align: center;
    align-self: center; }

    .buttonSchleifenSale {
      grid-column: 3;
      width: 35rem;
      height: 8rem;
      background-color: #606060;
      border: none;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      justify-self: end;}
    
    .buttonSchleifenSale figure {
      grid-column: 2;
      width: 8rem;
      height: 8rem; }
    
    .buttonSchleifenSale p {
      grid-column: 3;
      color: white;
      text-align: center;
      align-self: center;
      font-size: 2.5rem; 
      font-family: 'Inter';}

      .buttonFrasenSale, .buttonDrehenSale, .buttonSchleifenSale {
        width: 38rem;
        height: 8rem;
      }
      @media only screen and (min-width: 991.99px) {
      .buttonsListSales {
        grid-row: 1;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
      margin-bottom: 9rem;
      justify-content: space-between;
      column-gap: 2rem;
      }
    }
  
  .FräsenIcon2 {
    grid-row: 2;
    grid-column: 2;
    justify-self: center;
    display: grid;
    grid-template-rows: repeat(3, min-content);
    grid-template-columns: repeat(4, 1fr); }
  
  .FräsenIcon1 {
    grid-row: 2;
    grid-column: 1;
    justify-items: center;
    display: grid;
    grid-template-rows: repeat(3, min-content);
    grid-template-columns: repeat(4, 1fr); }
  
  .FräsenIcon1 img {
    grid-row: 1;
    grid-column: 1 / -1; }
  
  .FräsenIcon1 p {
    grid-row: 2;
    grid-column: 2 / -1;
    justify-self: start; }

  
  
  .FräsenIcon1 ul {
    padding-left: 1rem;
    grid-row: 3;
    grid-column: 2 / -1;
    justify-self: start; }
  
  .FräsenIcon2 img {
    grid-row: 1;
    grid-column: 1 / -1; }
  
  .FräsenIcon2 p {
    grid-row: 2;
    grid-column: 2 / -1;
    justify-self: start; }
  
  .FräsenIcon2 ul {
    padding-left: 1rem;
    grid-row: 3;
    grid-column: 2 / -1;
    justify-self: start; }
  
  .DrehenIcon2 {
    grid-row: 2;
    grid-column: 2;
    justify-self: center;
    display: grid;
    grid-template-rows: repeat(3, min-content);
    grid-template-columns: repeat(3, 1fr); }
  
  .MaschineIcon {
    padding:3rem;
    justify-items: center;
    display: grid;
    /* grid-template-rows:  1fr 30px 1fr; */
    grid-template-rows: 280px min-content min-content;
    grid-auto-columns: repeat(auto-fit, min-content);
    grid-row-gap: 3rem;
    align-content: start;
  }
  
  .MaschineIcon figure{
    grid-row: 1;
    transition: transform .2s;
    max-height: 280px;
    max-width: 280px;
    display: grid;
  align-content: end;
  }
  .MaschineIcon img {
    max-height:100%;
    max-width: 100%;
    filter: drop-shadow(0 3px 6px rgb(255, 255, 255));
  }

  .MaschineIcon img:hover {
    transform: scale(1.1); 
    transition: transform 0.3s ease-in-out;
  }
  .MaschineIcon h3 {
    grid-row: 2;
    justify-self: center;
    white-space: nowrap;
  }
  
  .MaschineIcon ul {
    padding-left: 1.6rem;
    grid-row: 3;
    justify-self: center; }
  
  .DrehenIcon2 img {
    grid-row: 1;
    grid-column: 1 / -1; }
  
  .DrehenIcon2 p {
    grid-row: 2;
    grid-column: 2 / -1;
    justify-self: start; }
  
  .DrehenIcon2 ul {
    padding-left: 1rem;
    grid-row: 3;
    grid-column: 2 / -1;
    justify-self: start; }
  
  .SchleifenIcon2 {
    grid-row: 2;
    grid-column: 2;
    justify-self: center;
    display: grid;
    grid-template-rows: repeat(3, min-content);
    grid-template-columns: repeat(4, 1fr); }
  
  .SchleifenIcon1 {
    grid-row: 2;
    grid-column: 1;
    justify-items: center;
    display: grid;
    grid-template-rows: repeat(3, min-content);
    grid-template-columns: repeat(4, 1fr); }
  
  .SchleifenIcon1 img {
    grid-row: 1;
    grid-column: 1 / -1; }
  
  .SchleifenIcon1 p {
    grid-row: 2;
    grid-column: 2 / -1;
    justify-self: start; }
  
  .SchleifenIcon1 ul {
    padding-left: 1rem;
    grid-row: 3;
    grid-column: 2 / -1;
    justify-self: start; }
  
  .SchleifenIcon2 img {
    grid-row: 1;
    grid-column: 1 / -1; }
  
  .SchleifenIcon2 p {
    grid-row: 2;
    grid-column: 2 / -1;
    justify-self: start; }
  
  .SchleifenIcon2 ul {
    padding-left: 1rem;
    grid-row: 3;
    grid-column: 2 / -1;
    justify-self: start; }
  
  .kontaktList {
    animation: pop 5s;
    position:sticky;
    padding-bottom: 10rem;
    background-color: black;
    grid-column: col-start 5 / col-end 6;
    display: grid;
    grid-auto-rows: repeat(3, min-content);
    grid-row-gap: 0.5rem; }
  
  .button1 {
    border: 1px solid black;
    width: 100%;
    grid-row: 1;
    padding: 1rem;
    background: rgba(134, 0, 0, 1);
    color: white;
    border: none; }
  
  .button2 {
    width: 100%;
    grid-row: 2;
    padding: 1rem;
    background-color: rgba(134, 0, 0, 1);
    color: white;
    border: none; }
  
  .button3 {
    width: 100%;
    grid-row: 3;
    padding: 1rem;
    background-color: rgba(134, 0, 0, 1);
    color: white;
    border: none; }
  
    @media only screen and (max-width: 991.98px) {
  
      .MaschineIcon img{
        width: 70%;
        height: auto;
        align-items: center;
      }
      .MaschineIcon figure{
        text-align: center;
      }
    }
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

   
      .MaschineIcon img{
        width: 90%;
        height: auto;
        align-items: center;
      }
      .MaschineIcon figure{
        text-align: center;
      }
    }
  
  
/* sj-430-sj-470 IMAGE */
  
  .maschineSpecsImg {
    background-color: black;
    grid-column: col-start 1 / col-end 9;
    position: relative;
    padding-bottom: 10rem; }
  
  #maschineSpecsImg:before {
    min-height: 100%;
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background: linear-gradient(to right, #000000, transparent, transparent, transparent, transparent), linear-gradient(to top, #000000, #1d1d1d, transparent, transparent, transparent); }
  
  .maschineSpecsImg img {
    width: 100%;
    height: auto; }
    @media only screen and (max-width: 991.98px) {


      .maschineSpecsImg figure{
          display: grid;
          grid-template-areas: ". imag .";
          grid-template-columns: 1fr 1fr 1fr;
          margin-bottom:10px;
        }
        .maschineSpecsImg img{
          grid-area: imag;
          width: 300px;
        }
      }
      @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {


        .maschineSpecsImg img{
          grid-area: imag;
          width: 700px;
        }
      }

  /* sj-430-sj-470 TABLE */
  .maschineInfos {
    background-color: black;
    grid-row: 5;
    grid-column: center-start / center-end;
    display: grid;
    justify-items: center; }
  
  .maschineInfos th {
    text-align: start; }



  /* sj-430-sj-470 IMAGE */

  .m600Img {
    background-color: black;
    grid-column: col-start 1 / col-end 9;
    position: relative;
    padding-bottom: 10rem; }
  
  #m600Img:before {
    min-height: 100%;
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background: linear-gradient(to right, #000000, transparent, transparent, transparent, transparent), linear-gradient(to top, #000000, #1d1d1d, transparent, transparent, transparent); }
  
  .m600Img img {
    width: 100%;
    height: auto; }

  /* TABLES STYILING */
  
  .wp-block-table 
  {
    border-collapse: separate;
    border-spacing: 3.125rem 0; }
  
    .wp-block-table tr td {
      
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    
  }
  
  .wp-block-table table tbody tr th{
    border:none;
  }
  
    .wp-block-table th {
    padding: 0.625rem 0;
    color: #FFF;
    font-family: 'Inter' ;
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal; }
  
   
    .wp-block-table td {
    color: #FFF;
    border: none;
    font-family: 'Inter' ;
    font-size: 2rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal; }

    .maschineInfos2 {
      background-color: black;
      grid-column: center-start / center-end;
      display: grid;
      justify-items: center; }
    
    
    .maschineInfos2 th {
      text-align: start; }
    
    table {
      border-collapse: separate;
      }
    
    table tr td {
      padding-top: 2.5rem;
      padding-bottom: 2.5rem; }
    
    th {
      padding: 0.625rem 0;
      
      font-family: 'Inter' ;
      font-size: 2.5rem;
      font-style: normal;
      font-weight: 400;
      line-height: normal; }
    
    td {
      color: blue;
      
      font-family: 'Inter' ;
      font-size: 2rem;
      font-style: normal;
      font-weight: 300;
      line-height: normal; }
  
      .maschineInfos2 figure table tbody tr td {
        font-size: 1.3vw;
    
    
      }
      @media only screen and (max-width: 991.98px) {

        table tr td {
          padding-top: 1.5rem;
          padding-bottom: 0rem;
        }
        .wp-block-table tr td {
          padding-top: 1.5rem;
          padding-bottom: 0rem;
        }
      }
  
  

  /* YOUTUBE VIDEOS */

  .imageSeqOverviewMaschineVideoMed {
    display: grid;
    grid-gap: calc(var(--gutter) / 2);
    grid-template-columns: 10px;
    grid-template-rows: minmax(150px, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: calc(25% - var(--gutter) * 2);

    overflow-x: scroll;
    scroll-snap-type: x proximity;
    padding-bottom: calc(.75 * var(--gutter));
    margin-bottom: calc(-.25 * var(--gutter));

  }
    
    .imageSeqOverviewMaschineVideoMed:before,
    .imageSeqOverviewMaschineVideoMed:after {
      content: '';
      width: 10px;
    }

    .imageSeqOverviewMaschineVideoMed > div,
    .imageSeqOverviewMaschineVideo__im1Med {
      scroll-snap-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 8px;
    }
@media only screen and (max-width: 991.98px) {

  .imageSeqOverviewMaschineVideo__im1{
    grid-column: 1 / 6;
  }
  .imageSeqOverviewMaschineVideoMed {
    display: grid;
    grid-gap: 0px;
    column-gap: calc(130px / 2);
    grid-template-columns: 10px;
    grid-template-rows: minmax(150px, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: calc(25% - var(--gutter) * 2);
    overflow-x: scroll;
    scroll-snap-type: x proximity;
    padding-bottom: calc(.75 * var(--gutter));
    margin-bottom: calc(-.25 * var(--gutter));
    
  }

}
    .imageSeqOverviewMaschineVideo__im1Med iframe {
        aspect-ratio: 16 / 9;
        width: 100% !important;
    }

  
  .imageSeqOverviewMaschineVideo {
    background-color: black;
    grid-column: full-start / full-end;
    display: grid;
    grid-template-columns: [full-start] minmax(3rem, 1fr) repeat(3, [col-start] minmax(min-content, 1fr) [col-end]) minmax(3rem, 1fr) [full-end];
    grid-auto-rows: minmax(auto, min-content);
    align-items: center;
    justify-items: stretch;
    padding-bottom: 6.875rem;
    padding-top: 3.125rem; 
    margin-top: 13rem;
    margin-bottom: 8rem;
}
    .imageSeqOverviewMaschineVideo__rectangle 
    {
      width: minmax(100%,(5vw + 100%));
      height: calc(1vh + 60%);
      background-color: #7A0000;
      grid-column: full-start / full-end;
      grid-row: 1; 
      margin-left: calc(-50vw + 50%);
      margin-right: calc(-50vw + 50%);
    }
.imageSeqOverviewMaschineVideo__im1 {
  grid-column: 2 / 5;
  grid-row: 1; 
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  
}
@media only screen and (max-width: 670.98px) {


  .imageSeqOverviewMaschineVideo {
    margin-top: 3rem;
  }
}


@media only screen and (max-width: 991.98px) {

  .imageSeqOverviewMaschineVideo__im1{
    grid-column: 2 / 8;
  }
  .imageSeqOverviewMaschineVideo {
    grid-template-columns: [full-start] minmax(3rem, 1fr) repeat(6, [col-start] minmax(min-content, 1fr) [col-end]) minmax(3rem, 1fr) [full-end];

  }
}
.imageSeqOverviewMaschineVideo__im1 p{
  z-index: 0;
  grid-column: 1;
  grid-row: 1;
  background-image: linear-gradient(#080808);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
      .imageSeqOverviewMaschineVideo__im1 iframe {
        aspect-ratio: 16 / 9;
        z-index: 0;
        grid-row: 1;
        grid-column: 1;
        width: 100%;
        object-fit: cover;
      }

      @media only screen and (max-width: 991.98px) {

        .imageSeqOverviewMaschineVideo {
          background-color: black;

          display: grid;
          /* grid-template-columns: 1fr; */
          align-items: left;
          justify-items: stretch;
          padding-bottom: 6.875rem;
          padding-top: 3.125rem; 
        }
      }
      @media only screen and (max-width: 400.98px) {
        .imageSeqOverviewMaschineVideo__im1 iframe {

          width: 100%;
        }
      }

      @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

        .imageSeqOverviewMaschineVideo {
          background-color: black;
          grid-column: center-start / center-end;
          display: grid;
          /* grid-template-columns: 1fr; */
          align-items: left;
          justify-items: stretch;
          padding-bottom: 6.875rem;
          padding-top: 3.125rem; 
        }
      }


  /* AnwenderBerichte */

  .historyMaschine {
    background-color: black;
    grid-column: center-start / center-end;
    padding-top: 1.5rem;
    display: grid;
    grid-template-rows: min-content 3, minmax(163.5px, 1fr);
    grid-row-gap: 2.5rem;
    justify-items: center; }
    @media only screen and (max-width: 50.5em) {
      .historyMaschine {
        grid-template-rows: 1fr;
        grid-row-gap: 2.5rem;
        justify-self: center;
        padding-bottom: 8rem; } }
    @media only screen and (max-width: 50.5em) {
      .historyMaschine {
        grid-row-gap: rem; } }
  
  .historyTitle {
    grid-row: 1;
    text-align: center;
    line-height: 1.5rem;
    /* 80% */
    padding-bottom: 5rem; }

    .historyTitle p{
      color: white;
    }
  
  
  
  @media only screen and (max-width: 50.5em) {
    #more2 {
      display: none; }
    #more3 {
      display: none; }
    #more {
      display: none; } }
  
  .imgCard {
    grid-area: imgcard; }
  .imgCard figure{
    width: 100%;
    height: 100%;
  }
  
.historyCard img {
  width: 100%;
  height: 100%;
  flex-shrink: 0; 
  object-fit: cover;
  
}
    
.historyCardImg {
  width: 100%;
  height: 100%;
  flex-shrink: 0; 
}
  
.textCard {
  width: 100%;
  height: 100%;
  grid-area: textcard;
  color: white;
  /* padding: 3.125rem; */
  margin-left: 3rem;
  align-content: center;
  justify-self: center;
  display: grid;
  grid-template-rows: repeat(2, min-content);
  grid-template-areas: "title" "par";
  padding:2rem; 
}

@media only screen and (max-width: 50.5em) {
  .textCard {
    background-color: #454545;
    padding: 2rem; 
    margin-left: 0;}
}
@media only screen and (max-width: 30em) {
  .textCard {
    height: 100%; } 
}

.textCard__title {
  grid-area: title;
  align-self: center;

  /* 68.571% */ 
}

.textCard__par {
  margin-top: 2.5rem;
  grid-area: par;
  align-self: center;
  margin-right: 3rem;


}
  
  /* PROGRESSION BARS */
  
  .barsMaschine {
    background-color: black;
    grid-column: center-start / center-end;
    margin: 100px auto;
    width: 500px;
    text-align: center; }
    @media only screen and (max-width: 991.98px) {

      .barsMaschine {
        background-color: black;
        grid-column: center-start / center-end;
        margin: 0;
        width: auto;
        text-align: center;
      }
    }
  
  .title {
    justify-self: start;
    align-self: center;
    grid-row: 1;
    padding-right: 10px; }
  
  .advancement {
    padding: 1rem;
    grid-row: 1; }
  
  .progress {
    padding: 6px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08); }
  
  .progress-bar {
    text-align: end;
    align-content: center;
    height: 2.5rem;
    background-color: #3A3A3A;
    border-radius: 4px;
    transition: 0.4s linear;
    transition-property: width, background-color;
    display: grid;
    grid-template-rows: 1fr 1fr; }
  
  .progress-striped .progress-bar {
    background-color: #3A3A3A;
    width: 100%;
    background-image: linear-gradient(45deg, #3A3A3A 25%, transparent 25%, transparent 50%, #3A3A3A 50%, #3A3A3A 75%, transparent 75%, transparent);
    animation: progressAnimationStrike 6s; }
  
  @keyframes progressAnimationStrike {
    from {
      width: 0; }
    to {
      width: 100%; } }
  
  .progress2 {
    padding: 6px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08); }
  
  .progress-bar2 {
    text-align: end;
    align-content: center;
    height: 2.5rem;
    background-color: #3A3A3A;
    border-radius: 4px;
    transition: 0.4s linear;
    transition-property: width, background-color;
    display: grid;
    grid-template-rows: 1fr 1fr; }
  
  .progress-striped2 .progress-bar2 {
    background-color: #3A3A3A;
    width: 100%;
    background-image: linear-gradient(45deg, #3A3A3A 25%, transparent 25%, transparent 50%, #3A3A3A 50%, #3A3A3A 75%, transparent 75%, transparent);
    animation: progressAnimationStrike2 6s; }
  
  @keyframes progressAnimationStrike2 {
    from {
      width: 0; }
    to {
      width: 100%; } }
  
  .progress3 {
    padding: 6px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08); }
  
  .progress-bar3 {
    text-align: end;
    align-content: center;
    height: 2.5rem;
    background-color: #3A3A3A;
    border-radius: 4px;
    transition: 0.4s linear;
    transition-property: width, background-color;
    display: grid;
    grid-template-rows: 1fr 1fr; }
  
  .progress-striped3 .progress-bar3 {
    background-color: #3A3A3A;
    width: 80%;
    background-image: linear-gradient(45deg, #3A3A3A 25%, transparent 25%, transparent 50%, #3A3A3A 50%, #3A3A3A 75%, transparent 75%, transparent);
    animation: progressAnimationStrike3 6s; }
  
  @keyframes progressAnimationStrike3 {
    from {
      width: 0; }
    to {
      width: 80%; } }
  
  .progress4 {
    padding: 6px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08); }
  
  .progress-bar4 {
    text-align: end;
    align-content: center;
    height: 2.5rem;
    background-color: #3A3A3A;
    border-radius: 4px;
    transition: 0.4s linear;
    transition-property: width, background-color;
    display: grid;
    grid-template-rows: 1fr 1fr; }
  
  .progress-striped4 .progress-bar4 {
    background-color: #3A3A3A;
    width: 80%;
    background-image: linear-gradient(45deg, #3A3A3A 25%, transparent 25%, transparent 50%, #3A3A3A 50%, #3A3A3A 75%, transparent 75%, transparent);
    animation: progressAnimationStrike4 6s; }
  
  @keyframes progressAnimationStrike4 {
    from {
      width: 0; }
    to {
      width: 80%; } }
  
  .progress5 {
    padding: 6px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08); }
  
  .progress-bar5 {
    text-align: end;
    align-content: center;
    height: 2.5rem;
    background-color: #3A3A3A;
    border-radius: 4px;
    transition: 0.4s linear;
    transition-property: width, background-color;
    display: grid;
    grid-template-rows: 1fr 1fr; }
  
  .progress-striped5 .progress-bar5 {
    background-color: #3A3A3A;
    width: 100%;
    background-image: linear-gradient(45deg, #3A3A3A 25%, transparent 25%, transparent 50%, #3A3A3A 50%, #3A3A3A 75%, transparent 75%, transparent);
    animation: progressAnimationStrike5 6s; }
  
  @keyframes progressAnimationStrike5 {
    from {
      width: 0; }
    to {
      width: 100%; } }
  
  .progress6 {
    padding: 6px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08); }
  
  .progress-bar6 {
    text-align: end;
    align-content: center;
    height: 2.5rem;
    background-color: #3A3A3A;
    border-radius: 4px;
    transition: 0.4s linear;
    transition-property: width, background-color;
    display: grid;
    grid-template-rows: 1fr 1fr; }
  
  .progress-striped6 .progress-bar6 {
    background-color: #3A3A3A;
    width: 100%;
    background-image: linear-gradient(45deg, #3A3A3A 25%, transparent 25%, transparent 50%, #3A3A3A 50%, #3A3A3A 75%, transparent 75%, transparent);
    animation: progressAnimationStrike6 6s; }
  
  @keyframes progressAnimationStrike6 {
    from {
      width: 0; }
    to {
      width: 100%; } }
  
  .title {
    padding: 1rem; }


    /* DREHEN / SCHLLEIFEN / FRÄSEN maschine lists and buttons view AND SAME BUTTONS fOR SALES */
    @media only screen and ( min-width: 992px) {
      .minibuttons a p {
        align-self: center;
      }
      .minibuttons a img{
        grid-column: 2;
      }
      .minibuttons a p{
        grid-column: 3;
      }
      .maschinesIcons2 {
        grid-column: center-start/ center-end;
        background-color: black;
        display: grid;
        grid-auto-rows: min-content;
        margin-top: 7rem;
      }
    
      .buttonsList2 {
        grid-row: 1;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(20rem,1fr));
        margin-bottom: 8rem;
        justify-content: space-between;
        grid-column-gap: 2rem;
        
      }
    #buttonFrasen2, #buttonDrehen2, #buttonSchleifen2,  #buttonFrasenSale, #buttonDrehenSale, #buttonSchleifenSale{
      height: 100%;
      width: 100%;
    }
    
    .buttonsList2 .wp-block-buttons{
      max-width: 38rem;
    }
    
    #buttonFrasen2 a, #buttonFrasenSale a {
      grid-column: 1;
      background-color: #606060;
      border: none;
      display: grid;
      grid-template-columns: 1fr repeat(2, min-content) 1fr;
      justify-self: start;
      text-decoration: none;
      grid-column-gap: 1rem;
    }
  }
      .minibuttons a, #buttonDrehenSale a {
        grid-column: 2;
        background-color: #606060;
        border: none;
        display: grid;
        grid-template-columns: 1fr repeat(2, min-content) 1fr;
        justify-self: end;
        justify-self: center; 
        text-decoration: none;
        grid-column-gap: 1rem;
      }
      .minibuttons a{
        width: 40rem;
        height: auto;
        grid-column: 3;
        background-color: #606060;
        border: none;
        display: grid;
        grid-template-columns: 1fr repeat(2, min-content) 1fr;
        justify-self: end;
        text-decoration: none; 
      grid-column-gap: 1rem;}
      #buttonSchleifenSale a{
        grid-column: 3;
        width: 45rem;
        height: 8rem;
        background-color: #606060;
        border: none;
        display: grid;
        grid-template-columns: 1fr repeat(2, min-content) 1fr;
        justify-self: end;
      text-decoration: none; }
    



  @media only screen and (max-width: 991.98px) {
   
    .buttonsListSales{
      justify-self: center;
      margin-bottom: 8rem;
    }
    #buttonSchleifenSale, #buttonFrasenSale, #buttonDrehenSale{
      display: grid;
      grid-template-columns: 1fr 92px 100px 1fr;
      min-width: 32rem;
    }
    #buttonSchleifenSale p, #buttonFrasenSale p, #buttonDrehenSale p{
      font-size: 2rem;
    }
    .wp-block-button__link{
      padding: 0;
    }
    .maschinesIcons2 {
      padding-bottom: 0rem;
      padding-top: 0rem;
      grid-column: center-start / center-end;
      display: grid;
      grid-template-columns: minmax(0,1fr);
      grid-auto-rows: min-content;
      margin-top: 0rem;
    }
    .salesicons{
      margin-top: 7rem;
    }
    .myDivDrehenGrid{
      justify-content: center;
    }
    .buttonsList2 {
      grid-row: 1;
      display: grid;
      grid-template-rows: repeat(3, 1fr);
      justify-self: center;
      grid-row-gap: 1em;
      margin-bottom: 15rem;
      min-width: 32rem;
    }
    .minibuttons{
      display: grid;
      grid-template-columns: 1fr 72px 100px 1fr;
    }
    .minibuttons a{
      display: grid;
      grid-template-columns: subgrid;
      grid-column: span 4;
      align-items: center;
  justify-items: center;
  text-align: center;
    }
    .minibuttons a img{
      justify-self: center;
      grid-column: 2;
    }
    .minibuttons a p{
      justify-self: left;
      grid-column: 3;
    }
  .buttonsListSales {
      display: flex;
      flex-direction: column;
      grid-row-gap: 1rem;
  }
  .buttonFrasenSale, .buttonDrehenSale, .buttonSchleifenSale {
    width: 100%;
  }
 
  
  #buttonFrasenSale a{
    grid-row: 1;
    width: 40rem;
    height: 8rem;
    background-color: #606060;
    border: none;
    display: grid;
    grid-template-columns: 1fr repeat(2, min-content) 1fr;
    justify-self: start;
    text-decoration: none; 
    margin: 0;
    grid-column-gap: 2rem;}
   #buttonDrehenSale a {
    grid-row: 2;
    width: 40rem;
    height: 8rem;
    background-color: #606060;
    border: none;
    display: grid;
    grid-template-columns: 1fr repeat(2, min-content) 1fr;
    justify-self: end;
    justify-self: center; 
    text-decoration: none;
    margin: 0;}

    #buttonSchleifenSale a{
      grid-row: 3;
      width: 40rem;
      height: 8rem;
      background-color: #606060;
      border: none;
      display: grid;
      grid-template-columns: 1fr repeat(2, min-content) 1fr;
      justify-self: end;
      text-decoration: none; }
    }
    @media only screen and (max-width: 400.98px) {
    .buttonsList2 {
      scale:90%;
    }
  }
    #buttonFrasenSale figure {
      grid-column: 2;
      width: 8rem;
      height: 8rem; }
    
    #buttonFrasenSale p {
      grid-column: 3;
      color: white;
      text-align: center;
      align-self: center; }
      #buttonFrasenSale p, #buttonDrehenSale p, #buttonSchleifenSale p {
        justify-self: start;

      }
    
  
    
     #buttonDrehenSale img {
      grid-column: 2;
      width: 8rem;
      height: auto;
     align-self: center; }
    
     #buttonDrehenSale p {
      grid-column: 3;
      color: white;
      text-align: center;
      align-self: center; }
    
    
    #buttonDrehen2 a p, #buttonFrasen2 a p, #buttonSchleifen2 a p{
      
      font-family: "Inter", sans-serif;
      font-weight: 400;
      font-size: 2.5rem;
      
    }
    #buttonDrehen2:hover, #buttonFrasen2:hover, #buttonSchleifen2:hover{
      transform: scale(1.05);
    }
    #buttonDrehen2, #buttonFrasen2, #buttonSchleifen2{
      transition: width 0.3s ease;
    }
    
      #buttonSchleifenSale img {
        grid-column: 2;
        width: 8rem;
        height: 8rem; }
      
      #buttonSchleifenSale p {
        grid-column: 3;
        color: white;
        text-align: center;
        align-self: center; }
  
    
  
  .myDivFrasenTitle2 {
    grid-row: 1;
    font-family: 'Inter';
    font-size: 3rem;
    font-style: normal;
    font-weight: 200;
    line-height: normal; }
  
  .Frasendivcont2, .FrasendivcontSale {
    display:none;
    grid-column: 1 / -1; }
    .Schleifendivcont2 {
      display:none;
      grid-column: 1 / -1; }
      .SchleifendivcontSale {
        display:none;
        grid-column: 1 / -1; }
  
    .Drehendivcont2, .DrehendivcontSale  {
      display:none;
      grid-column: 1 / -1;
      display: grid;
  grid-template-rows: repeat(3,min-content);
    }

  #menu-item-86 a{
    color: red;
  }

  @media only screen and (min-width: 992px) {
  #buttonFrasen2 a, #buttonDrehen2 a, #buttonSchleifen2 a, #buttonFrasenSale a, #buttonDrehenSale a, #buttonSchleifenSale a{

    height: 100%;
    width: 100%;

  }
}
  #buttonFrasen2 a img, #buttonDrehen2 a img, #buttonSchleifen2 a img,  #buttonFrasenSale figure, #buttonDrehenSale  figure, #buttonSchleifenSale figure{
   width: 9rem;
   height: auto;

  } 
  #buttonFrasenSale img, #buttonDrehenSale  img, #buttonSchleifenSale img {
    width: 100%;
    height: auto;
    pointer-events: none;
  }
  
  #buttonFrasenSale figure, #buttonDrehenSale  figure, #buttonSchleifenSale figure {
    pointer-events: none;
  }
  #buttonFrasenSale, #buttonDrehenSale, #buttonSchleifenSale{
    height: 9rem;
  }
  .buttonsListSales button{
    transition: width 0.3s ease;
  }
  .buttonsListSales button:hover{
    transform:scale(1.05);
  }
  /* SALES IMAGES WITH SYMBOL TEST */

/* Sales */

.image-container {
  grid-column: 1 / -1;
  display: grid;
  position: relative;
  width: 500px;
  height: 300px;
}

.background-img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay-img {
  grid-area: 1 / 1;
  position: absolute;
  top: 30px;
  left: 158px;
  width: 100px;
  height: auto;
  z-index: 1;
}

/* TIM SALES  */


.image-container2 {
  position: relative; /* parent positioning context */
  display: inline-block; /* or block if you prefer */
  width: 280px;
  margin: 0px auto;
}
.image-container2:hover{
  transform: scale(1.1);
  transition: transform 0.3s ease-in-out;
}
.image-container2__pic {
  width: 100%; /* makes it fill the container width */
  height: auto; /* preserves aspect ratio */
  display: block; /* removes inline spacing under image */
}

.image-container2__sign {
  position: absolute;
  top: 9%;
  left: 86%;
  font-size: 2.4rem;
  color: white;
  z-index: 3;
  transform: rotate(44.31deg);
}

.image-container2__sign{
  display: none;
}


.image-container2::before{
  content: "%";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 180px;
  height: 180px;
  background-color: #8b0000;
  color: white;
  font-size: 2rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transform: rotate(360deg) translate(60%, -32%);
  transform-origin: top right;
  clip-path: polygon(64.08% 58px, 95.54% 62.22%, 95.46% 80.74%, 83px 57px);
  padding-left: 9.5rem;
  padding-top: 1.2rem;

}
.image-container2 figure img{
  object-fit: contain;
  aspect-ratio: 1 / 1;
}

  /* unknown */
  .html5-video-container video{
      width: 100%;
      height: 400px;
      left: 0px;
      top: 0px;
  }
  .wp-image-303{
    width: 100%;
    height: auto;

  }
  #player{
    width: 100%;
    height: auto;
  }

  .wp-image-302{
    width: 100%;
    height: auto;
  }

  /* forms/popup styling  */
  .form_edit{
    grid-column: 1 / -1;
    background-color: black;
    border: 1px solid gray;
    border-radius: 25px;
    margin-top: 5rem;
    padding: 2rem;
    width: 30%;
    height: auto;
    text-align: center;
    justify-self: center;
  }
  .form_edit_homepage{
    background-color: black;
    padding: 3rem;
    height: auto;
    text-align: center;
  }
  .form_edit_kontakt{
    border-radius: 2rem;
    background-color: black;
    padding: 3rem;
    height: auto;
    text-align: center;
    justify-self: center;
    max-width: 461px;
  min-width: 365px;
    
  }
  
  .form_edit_kontakt p{
    color: #919191;
    padding: 0.2rem;
  }

#wsf-2-field-102::placeholder
{
  color: white;
}
  .form_edit_homepage img{
    width: 50%;
    margin-bottom: 30px;
    
  }
@media only screen and (max-width: 1024px) 
{
  .form_edit_homepage img 
  {
    width: 70%;
    margin-bottom: 30px;
  }
}

  .form_edit_homepage p{
    color: #b7b7b7;
    text-align: center;

  }
  .AngeboteFormHeader{
    display: grid;
    grid-auto-rows:min-content;
    grid-template-columns: 1fr;
    grid-row-gap: 1.5rem;
    margin-bottom: 2.5rem;
    margin-top: 2rem;
  }
  .AngeboteFormHeader a{
    color:white;
    text-decoration: none;
  }
  .AngeboteFormHeader__icon_tel{
    display: flex;
    justify-content: center;
    grid-column-gap: 1rem;
    align-items: center;
  }
  .AngeboteFormHeader__icon_tel figure img{
    margin:0;
  }
#ws-form-2{
  font-family: inherit !important; 
}
.wsf-form a:active, .wsf-form a:focus, .wsf-form a:hover, .wsf-form a:link, .wsf-form a:visited {
  color: #959595 !important;
}
#wsf-1-field-wrapper-69, #wsf-1-field-wrapper-61, .wsf-1-field-wrapper-132,#wsf-2-field-wrapper-69, #wsf-3-field-wrapper-69, #wsf-1-field-wrapper-103,#wsf-1-field-wrapper-132{
  margin-bottom: -2px;
}
  /* text area font color for angebotanfordern */
  #wsf-1-field-114::placeholder {
    color: rgb(218, 218, 218);
  }
  /* text area font color for popupform */
  #wsf-1-field-115::placeholder {
    color: rgb(218, 218, 218);
  }
  /* Vector */

  .form_edit_homepage2{
    grid-column: 1 / -1;
    background-color: black;
    margin-top: 5rem;
    padding: 2rem;
    height: auto;
    text-align: center;
    justify-self: center;
  }

  #wsf-1-field-20, #wsf-1-field-21, #wsf-1-field-22, #wsf-1-field-23, #wsf-1-field-24{
  background-color: #646464;
  border: 1px solid transparent;
  }

  #wsf-1-field-7{
    background-color: #646464;
    font-family: 'Inter';
  }
  .wsf-label{
    color: white;
  }

  .form_edit img{
    width: 50%;
    
  }
  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding:1rem;
    width: 60%;
  }
  .form_edit p{
    font-family: 'Inter';
    color: #919191;
    font-size: 20px;
    font-weight: 300;
    text-align: center;
    padding:1rem;

  }
  #wsf-1-help-26{
    color: white;
  }
  #wsf-1-label-27, #wsf-1-label-28{
    padding:0px;
    color:#959595;
  }
  #wsf-1-field-wrapper-27{
    
    margin:0px;
  }
  #wsf-1-field-27-row-1{
    background-color: transparent;
  }


/* the titles of the pages DREHEN FRÄSEN ANWENDER ETC */


.MaschineDes {
  grid-column: center-start/center-end;
  grid-row: 1;
  align-items: center;
  display: flex;
  align-self: flex-end;
  grid-column-gap: 1rem;
  text-align: left;
  z-index: 4;
  margin-bottom: 1rem;
  margin-left: -1rem;
  
    
}
  .MaschineDes p{
    white-space:nowrap;
  }
  

  .MaschineDes img{
    width: 100%;
    height: auto;
  }

.MaschineDes figure img {
  width: 8rem;
  height: auto;
}
.MaschineDes img {
  width: 8rem;
  height: auto;
}
@media only screen and (max-width: 991.98px) {
  .MaschineDes p{
    color: white;
    font-weight: bold;
    font-family: 'Inter';
    font-size: 2.5rem;
    white-space:nowrap;
  }
  .MaschineDes img {
    width: 7rem;
    height: auto;
  }
  .MaschineDes h1{
    margin-left: -1rem;

  }
}
@media only screen and (min-width: 991.99px) {
  .MaschineDes p {
    color: white;
    font-weight: bold;
    font-family: 'Inter';
    font-weight: 900;
    font-size: 40px;
    line-height: 82px;
    white-space: nowrap;
  }
}
.MaschineDes h1 {
  white-space: nowrap;
  margin-right: 3rem;
}

@media only screen and (max-width: 991.98px) {

  .MaschineDes h1 {
    white-space: wrap;
    margin-right:0;
    margin-left: 0;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .MaschineDes {
    margin-top:20rem;
  }
}

/* the titles of the pages DREHEN FRÄSEN ANWENDER ETC */

  /* CAPTION AND TITLE OF SINGLE MACHINE  */
  .captionHeaderMasDetail{
    grid-column: center-start / center-end;
    display:grid;
    align-items: center;
    grid-template-rows: repeat(3,min-content);
    grid-template-columns: repeat(auto-fit, minmax(360px,1fr));

  }

  .titleHeaderMasDetail{
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid;
    grid-template-columns: min-content 1fr min-content;
    grid-template-columns: auto 1fr auto;
  }
  .LagerButt{
    grid-column: 1;
    background-color: rgba(134, 0, 0, 1);
    color: white;
    text-align: center;
    width: min-content;
    margin-bottom: 0rem;
    text-decoration: none;
    padding-left: 3.5rem;
    padding-right: 3.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    height: max-content;
    margin-left: 4px;
    line-height: 2.3rem;
  
  }
  .LagerButtParent{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    text-decoration: none;
    justify-self:end;
    display:flex;
    align-self: center;
    justify-content: start;
}
.titleHeaderMasDetail figure{
  /* min-width: 10rem; */
  max-width: 90px;
}
.maschine-header_imgcap
{
  z-index: 2;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  grid-column: 2 / 10;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

}
.maschine-header_img figure{
  max-width: 500px;
}
.maschine-header_img figure img{
  width:100%;
  height: auto;
}
.maschine-header
{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(10,1fr);
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  position: relative;
  height: 60vh; 
  grid-template-rows: min-content min-content;
  min-height: 563px;
}
.titleHeaderMasDetail img{
  width: 9rem;
  height: auto;
}
  @media only screen and (max-width: 780.98px) {
    .titleHeaderMasDetail {
      grid-template-columns: minmax(4rem,min-content) 1fr;
      grid-template-rows: 1fr min-content;
    }
    .titleHeaderMasDetail img{
      width: 8rem;
    }
    .LagerButtParent{
      grid-column: 2 / -1;
      justify-self: start;
      margin-top: 1rem;
    }
    .LagerButt{
      margin:0;
    }
    .maschine-header_imgcap {
      grid-column: 1 / -1;
      padding-left: 1rem;
      padding-right: 2rem;
    }
    .maschine-header_img figure{
      width: 60%;
    }
    .maschine-header{
      min-height: 450px;
    }
  }
  @media only screen and (min-width: 666.98px) {
    
    .maschine-header_img figure{
      width: 40%;
    }
  }
 
  
  .lager-maschine-button{
    display:flex;
  }
  .captionHeaderMasDetail p:first-of-type{
    grid-row: 2;
  }
  .captionHeaderMasDetail p:nth-of-type(2) {
    grid-row: 3;
  }

  .captionHeaderMasDetail p{
    font-family: 'Inter';
    font-size: 0.9vw;
    text-align:justify;  
    text-justify:inter-character;
    padding-bottom: 2rem;

    
  }
  .captionHeaderMasDetail h4{
    font-family: 'Inter';
    font-size: 1.2vw;
    text-align:justify;  
    text-justify:inter-character;
    padding-bottom: 2rem;

    
  }
  .captionHeaderMasDetail ul li{
    font-family: 'Inter';
    font-size: 1.2vw;
    text-align:justify;  
    text-justify:inter-character;
  

    
  }


/* 
.titleHeaderMasDetail h1{
  align-self: center;
  
} */



.headerContainer{
  grid-row: 2;
  grid-column: center-start / center-end;
  z-index: 10;
  grid-template-rows: min-content min-content;
}
.videoImg{
  grid-column: 1;
  background-color: transparent;

}




/* MODAL CSS */

/* Modal container for the homepage icons that lunch the popup details */
.modal-icons {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 99998;
}

.modal-icons.show {
  opacity: 1;
  pointer-events: auto;
}

.modalBtn{
  background-color: transparent;
  border: 0px transparent;
  display: grid;
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
}
.modalBtn:hover {
  transform: scale(1.1);
}
/* Modal content */
.modal-content {
  background-color: black;
  padding: 20px;
  border-radius: 6px;
  max-width: 400px;
  width: 100%;
  transform: scale(0.9);
  opacity: 0;
  transition: all 0.3s ease;
}
.modal-content p {
  margin: 1em auto;
}
.modal-icons.show .modal-content {
  transform: scale(1);
  opacity: 1;
}

/* Close button */
.close_icons {
  float: right;
  font-size: 34px;
  font-weight: bold;
  color: #888;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.close_icons:hover {
  color: var(--color-primary);
}

.modal p {
  color: white;
  font-size: 20px;
  display: block;
}

.feature {
  margin: 2em 0 0 0;
  cursor: pointer;
}
.wrap a{
  text-decoration: none;
}
.closebutton:hover {
  color: white;
  cursor: pointer;
}

.clutter {
  margin: 2em auto;
  padding: 40px;
  max-width: 100%;
  text-align: justify;
}


.clutter {width: 400px;
display: none;} */


/* second form BEGIN */


#wsf-2-field-29, #wsf-2-field-32, #wsf-2-field-33, #wsf-2-field-36, #wsf-2-field-31{
  background-color: #646464;
  border: 1px solid transparent;
  }

  .wsf-label{
    color: white;
  }

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  background-color: black;
  border: transparent;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}


/* SERVICE PAGE */

.service__grid{
  display: grid;
  grid-template-rows: repeat(auto-fit,minmax(0,1fr));
  gap:8rem;
  margin-bottom: 15rem;
}

.service__grid__subgrid{
  padding: 2rem;
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
}

.service__grid__subgrid__text{
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  grid-row-gap: 2rem;
}


.service__grid__subgrid__img figure img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}


.ServiceParagraph{
  grid-column: 4 / 10;
  justify-self: center;
  display: grid;
  text-align: center;
  margin-top: 15rem;
  grid-row-gap: 5rem;
  margin-bottom: 4rem;
}
.ServiceParagraph p{
  text-align: center;

}

.ServiceImgPar{
  grid-column: center-start / center-end;
  margin:100px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 3rem;
}
.ServiceImgPar img{
  width: 425px;
  height: auto;  
  gap: 0px;
  opacity: 0px;

}
.ServiceTextList{
  display: grid;
  grid-template-rows: min-content min-content;
  grid-row-gap: 3rem;
  align-self: center;
}

.ServiceTextList h2{
  font-family: 'Inter';
  font-size: 35px;
  font-weight: 300;
  text-align: left;

}

.ServiceTextList ul{
  text-align: left;
  margin-left: 3rem;

}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .ServiceImgPar{
    grid-column: col-start 2 / col-end 9;
    margin:40px;
    display: grid;
    grid-template-rows: min-content min-content;
    grid-auto-columns: 1fr;
    row-gap: 3rem;
    
  
  }
  .ServiceImgPar figure{
    grid-column: 1 / -1;
    display: grid;
    justify-content: center;
  }
  .ServiceImgPar img{

    
    width: 100%;
    height: auto;  
    gap: 0px;
    opacity: 0px;
    justify-self: center;
    
  
  }
  
  .ServiceTextList{
    grid-row: 2;
    grid-column: 1 /-1;
    display: grid;
    grid-template-rows: min-content min-content;
    grid-row-gap: 3rem;
  }
  .ServiceTextList h2{
    font-family: 'Inter';
    font-size: 18px;
    font-weight: 100;
    text-align: left;
  
  }
  .ServiceTextList p{
    font-family: 'Inter';
    font-size: 15px;
    font-weight: 100;
    line-height: 15px;
    text-align: left;
  
  }
  .ServiceTextList ul{
    text-align: left;
  
  }
  .contacts{
    margin:5px;
  }
  @media only screen and (max-width: 991.98px) {

    .contacts{
      display: grid;
    }
  }
  .ServiceParagraph{
    grid-column: col-start 2 / col-end 8;
    justify-self: center;
    display: grid;
    text-align: center;
    margin:50px;
  
  }
  .ServiceParagraph p{
    font-family: 'Inter';
    font-size: 18px;
    font-weight: 300;
    line-height: 34.15px;
    text-align: center;
  
  }
  
  .ServiceParagraph h2{
    font-family: 'Inter';
    font-size: 25px;
    font-weight: 300;
    text-align: center;
    margin-bottom: 10px;
  
  }
  
 }
@media only screen and (max-width: 767px) {
  .ServiceImgPar{
    grid-column: center-start / center-end;
    margin:40px;
    display: grid;
    grid-template-rows: min-content min-content;
    grid-auto-columns: 1fr;
    
  
  }
  .ServiceImgPar figure{
    grid-column: 1 / -1;
    
  }
  .ServiceImgPar img{

    width: 100%;
    height: auto;  
    gap: 0px;
    opacity: 0px;
    justify-self: center;
    
  
  }
  .ServiceImgPar figure{

    justify-self: center;
    
  
  }
  
  .ServiceTextList{
    grid-row: 2;
    grid-column: 1 /-1;
    display: grid;
    grid-template-rows: min-content min-content;
    grid-row-gap: 3rem;
  }
  .ServiceTextList h2{
    font-family: 'Inter';
    font-size: 15px;
    font-weight: 100;
    text-align: left;
  
  }
  .ServiceTextList p{
    font-family: 'Inter';
    font-size: 12px;
    font-weight: 100;
    line-height: 15px;
    text-align: left;
  
  }
  .ServiceTextList ul{
    text-align: left;
  
  }
  .ServiceParagraph{
    grid-column: center-start / center-end;
    justify-self: center;
    display: grid;
    text-align: center;
    margin:0px;
  
  }
  .ServiceParagraph p{
    font-family: 'Inter';
    font-size: 14px;
    font-weight: 300;
    line-height: 25.15px;
    text-align: center;
  
  }
  
  .ServiceParagraph h2{
    font-family: 'Inter';
    font-size: 22px;
    font-weight: 300;
    text-align: center;
    margin-bottom: 10px;
  
  }
  .ServiceImgPar {
    grid-column: center-start / center-end;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: 5rem;
  }
  
}
@media only screen and (max-width: 1100px) {
  .ServiceParagraph{
    margin-bottom: 4rem;
  
  }

}

@media only screen and (max-width: 768.98px) {
  .ServiceParagraph{
    margin-top: 5rem;
  }
}
  @media only screen and (max-width: 998px) {
    .ServiceParagraph{
      grid-column: center-start /center-end;
    
    
  }
  
}
/* SERVICE END */
/* ANWENDE STYLE */
  .anwenderTitle {
    text-align: center;
  
}

.anwenderTitle h2{
  grid-column: 2;
  text-align: center;
  margin-bottom: 5rem;

}

.anwenderTextImg{
  grid-column: center-start / center-end;
  display: grid;
  grid-template-columns: repeat(2,minmax(100px,1fr));
  margin-bottom: 3rem;
  grid-column-gap: 5rem;
  align-items: center;
}
.anwenderTextImg img{
  width: 700px;
  height: auto;
  gap: 0px;
  opacity: 0px;

}
.anwenderTextImg p{
  font-family: 'Inter';
  font-size: 22px;
  font-weight: 300;
  line-height: 34.15px;
  text-align: left;

}

.AnwendeOnlyText{
  grid-column: center-start / center-end;
  margin-bottom: 10rem;

  
}

.AnwendeOnlyText h2{
    
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-size: 30px;
    line-height: 55px;
    /* identical to box height */
    margin-bottom: 3rem;

    color: #FFFFFF;



  
}
.AnwendeOnlyText p{
  font-family: 'Inter';
  font-size: 22px;
  font-weight: 300;
  line-height: 34.15px;
  text-align: left;

}
.SchumacherTextImg{
  grid-column: center-start / center-end;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-column-gap: 5rem;
  margin-bottom: 20rem;
}
.SchumacherTextImg h2{
  font-family: 'Inter';
  font-size: 30px;
  font-weight: 300;
  line-height: 68.3px;
  text-align: left;

}
.SchumacherTextImg p{
  font-family: 'Inter';
  font-size: 22px;
  font-weight: 300;
  line-height: 34.15px;
  text-align: left;

}
.SchumacherTextImg img{
  width: 655px;
  height: 480px;
  gap: 0px;
  opacity: 0px;

}

.zerocont{
  display: grid;
  grid-template-columns: repeat(5,1fr);
  grid-template-rows: min-content min-content min-content;
  font-size: 15px;
  grid-column-gap: 50px;
  grid-row-gap: 4rem;
}
.zero_txt1{
  grid-row: 1 ;
  grid-column: 1 / 2;
  
}
.zero_txt1 h1, .zero_txt1 p, .zero_txt2 h2, .zero_txt2 p, .zero_txt3 h2, .zero_txt3 p{
  margin-bottom: 3rem;
}
.zero_txt2{
  grid-row: 2 / -1;
  grid-column: 1 / 4;
}
.zero_txt3{
  grid-row: 2;
  grid-column: 4 / -1;
}
.zero_img{
  grid-row: 1;
  grid-column: 2 / -1;
  min-height: 100px;
}
@media only screen and (max-width: 991.98px) {
  .zerocont{
    grid-column: col-start 2  / col-end 9;
    display: grid;
    grid-template-columns: 1fr ;
    grid-template-rows: min-content min-content min-content min-content;
    font-size: 15px;
    grid-column-gap: 50px;
    grid-row-gap: 20px;
  }
  .zero_txt1{
    grid-row: 1 ;
    grid-column: 1;
  }
  .zero_txt2{
    grid-row: 3;
    grid-column: 1;
  }
  .zero_txt3{
    grid-row: 4;
    grid-column: 1;
  }
  .zero_img{
    grid-row: 2;
    grid-column: 1;
  }
}

/* SCHUMACHER ANWENDER BERICHTE */
.anwenderTextImg{
  grid-column: center-start / center-end;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  }
  .anwenderTextImg figure{
    display: grid;
    grid-template-areas: ". imag .";
    grid-template-columns: 1fr 1fr 1fr;
    margin-bottom:10px;
  }
  .anwenderTextImg img{
    grid-area: imag;
    width: 300px;
  }
  .anwenderTextImg p {
    font-family: 'Inter';
    font-size: 16px;
    font-weight: 300;
    line-height: 20px;
    text-align: center;
  }
  .AnwendeOnlyText p {
    font-family: 'Inter';
    font-size: 16px;
    font-weight: 300;
    line-height: 20px;
    text-align: center;
  }
  .SchumacherTextImg {
    grid-column: center-start / center-end;
    display: grid;
    grid-template-rows: 1fr min-content;
    grid-template-columns: 1fr;
  }

  .SchumacherTextImg h2 {
    font-family: 'Inter';
    font-size: 30px;
    font-weight: 300;
    line-height: 50.3px;
    text-align: center;
  }
  .SchumacherTextImg p {
    font-family: 'Inter';
    font-size: 16px;
    font-weight: 300;
    line-height: 20px;
    text-align: center;
  }
  .SchumacherTextImg img {
    width: 350px;
    height: auto;
    gap: 0px;
    opacity: 0px;
  }


  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {



    .anwenderTextImg{
      grid-column: center-start / center-end;
      display: grid;
      grid-template-columns: 1fr;
      align-items: center;
      }
      .anwenderTextImg figure{
        display: grid;
        grid-template-areas: ". imag .";
        grid-template-columns: 1fr 1fr 1fr;
        margin-bottom:10px;
      }
      .anwenderTextImg img{
        grid-area: imag;
        width: 500px;
      }
      .anwenderTextImg p {
        font-family: 'Inter';
        font-size: 16px;
        font-weight: 300;
        line-height: 20px;
        text-align: center;
      }
      .AnwendeOnlyText p {
        font-family: 'Inter';
        font-size: 16px;
        font-weight: 300;
        line-height: 20px;
        text-align: left;
      }
      .SchumacherTextImg {
        grid-column: center-start / center-end;
        display: grid;
        grid-template-rows: 1fr min-content;
        grid-template-columns: 1fr;
      }
  
      .SchumacherTextImg h2 {
        font-family: 'Inter';
        font-size: 30px;
        font-weight: 300;
        line-height: 50.3px;
        text-align: center;
      }
      .SchumacherTextImg p {
        font-family: 'Inter';
        font-size: 16px;
        font-weight: 300;
        line-height: 20px;
        text-align: center;
      }
      .SchumacherTextImg figure{
        display: grid;
        grid-template-areas: ". imag .";
        grid-template-columns: 1fr 1fr 1fr;
        margin-bottom:10px;
      }
      .SchumacherTextImg img{
        grid-area: imag;
        width: 500px;
      }
    }

    .Schumachercont{
      grid-column: col-start 2  / col-end 9;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr ;
      grid-template-rows: min-content min-content min-content;
      font-size: 15px;
      grid-column-gap: 50px;
      grid-row-gap: 20px;
    }
    .Schumachercont_img{
      grid-row: 1;
      grid-column: 2 / -1;
    }
    .Schumachercont_txt1{
      grid-row: 2 ;
      grid-column: 1 / -1;
      
    }
    .Schumachercont_txt2{
      grid-row: 3 / -1;
      grid-column: 1 / 3;
    }
    .Schumachercont_txt3{
      grid-row: 3;
      grid-column: 3;
    }
    @media only screen and (max-width: 991.98px) {
      .Schumachercont{
    
    
        grid-column: center-start / center-end;
      display: grid;
      grid-template-columns: 1fr ;
      grid-template-rows: min-content min-content min-content min-content;
      font-size: 15px;
      grid-column-gap: 50px;
      grid-row-gap: 20px;
      }
      .Schumachercont_img{
        grid-row: 2;
        grid-column: 1;
      }
      .Schumachercont_txt1{
        grid-row: 1 ;
        grid-column: 1;
        
      }
      .Schumachercont_txt2{
        grid-row: 3 ;
        grid-column: 1;
      }
      .Schumachercont_txt3{
        grid-row: 4;
        grid-column: 1;
      }
    
    
    
    }




/* ÜBER UNS */
.uberunsTextImg{
  grid-column: center-start / center-end;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  margin-bottom: 3rem;
  grid-column-gap: 5rem;
  align-items: center;

}


.uberunsTextImg img{
  width: 100%;
  height: auto;
  gap: 0px;
  opacity: 0px;

}
.uberunsTextImg p{

  text-align: left;

}
.uberunsOnlyText{
  grid-column: center-start / center-end;
  margin-bottom: 10rem;
  grid-column: 1fr;
  margin-bottom: 10rem;

  
}
.uberunsOnlyText h2{
    margin: 3rem 0;
}
.uberunsOnlyText p{
  text-align: left;

}
.uberunsTextImg p{
  text-align: left;
}
.uberunsrect{
  margin-top: 10rem;
  grid-column: full-start / full-end;
  background-color:#404040 ;
  display: grid;
  grid-template-columns: repeat(6,1fr);
  grid-row-gap: 2rem;
  padding: 6rem;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);

}
.uberunsicon{
  grid-column: 2 / 6;
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-column-gap: 2rem;
  
}



.uberunsiconTxt{
  display: grid;
  grid-template-rows: repeat(2,min-content);
  grid-row-gap: 1rem;
}


.UberUnsText{
  display: grid;
  grid-template-rows:repeat(8,min-content);
  align-items: center;
  grid-row-gap: .5rem;
}

.uberbottombar{
  grid-column: col-start 1 / col-end 10;
  display: grid;
  grid-template-columns: 2.3fr 1fr;
  justify-items: left;
  grid-column-gap: 7rem;
  margin-top:15rem;
  margin-bottom: 15rem;
  margin-left: 70px;
}
.tuv{
  display: grid;
  grid-template-columns: min-content 2fr;
  grid-column-gap: 2rem;

}

.tuvtxt h3{
  margin-bottom: 2rem;
}

.ubermanual{
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-column-gap: 1rem;
}
.ubermanual p{
  text-decoration-line: underline;
  color: #FFFFFF;
}
.ubermanual a{
  color: #FFFFFF;
}

@media only screen and (max-width: 991.98px) {
  .uberunsTextImg{
    grid-column: center-start / center-end;
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 3rem;
    grid-column-gap: 5rem;
    align-items: center;
    grid-row-gap: 2rem;
  }
  .anwenderTitle h2{
    text-align: center;
  
  }

.tuvtxt h2 {
  margin-bottom: 5px;
}
}
.praxisticker{
  grid-column: col-start 10 / center-end;
  display: flex;
  flex-direction: column;
  background-color: rgba(42, 42, 42, 0.566);
  text-align: center;
  position: fixed;
  top: 50%;
  z-index: 99997;
  right: 0;
  padding: 2em 1em;
  row-gap: 1.5rem;

}


@media only screen and (max-width: 991.98px) {
  .uberbottombar{
    margin-top: 10rem;
    display: grid;
    /* grid-template-rows: 1fr 1fr; */
    grid-template-columns: 1fr;
    justify-items: center;
    grid-row-gap: 5rem;
    margin-left: 2rem;
  }
  .tuv{
    grid-row: 1;
    display: grid;
    grid-template-rows: min-content min-content;
    grid-template-columns: 1fr;
    grid-row-gap: 2rem;
    justify-items: center;
  
  }
  .tuvtxt h3{
    text-align: center;
  }
  .ubermanual{
    display: grid;
    grid-template-rows: repeat(2,min-content);
    grid-template-columns: 1fr;
    grid-row-gap: 1rem;
  }
  .ubermanual p{
    grid-row: 2;
    text-align: center;
  }
  .uberbottombar{
    grid-column: 1 / -1;
  }
  .uberunsrect{
    margin-top: 10rem;
    grid-column: full-start / full-end;
    background-color:#404040 ;
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 4rem;
    padding: 6rem;
  
  }
}

@media only screen and (max-width: 991.98px) {
  .uberbottombar {
    margin-left: 20rem;
    margin-right: 20rem;
    text-align: center;
  }
}
@media only screen and (max-width: 600.98px) {
  .uberbottombar {
    margin-left: 0rem;
    margin-right: 0rem;
  }
}

/* DATENSCHUTZ */

.DatenStruct{
  display: grid;
  grid-template-columns: 1fr;
  row-gap:2rem;
  margin-top: 20rem;
  align-items: start;
  justify-items: stretch;
  margin-bottom: 10rem;
}
.DatenStruct p{
  overflow-wrap: break-word;
  word-break: break-word;
}

.datenschutz-list{
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}
.DatenStruct ul{
    margin-left: 4rem;
    margin-bottom: 2rem;
    display: inline-block;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    hyphens: auto;

}




/* KONTAKT */

.KontaktTextList{
  display: grid;
  grid-template-rows: min-content min-content;
  grid-row-gap: 3rem;
}

.KontaktTextList{
  display: grid;
  grid-template-rows: min-content min-content;
  grid-row-gap: 3rem;
}

.KontaktTextListDaten{
  display: grid;
  grid-template-rows: min-content min-content;
}

.KontaktTextListDaten figure img{
  width: 655px;
  height: auto;
}

.KontaktTextListDaten h2{
  text-align: right;
  text-justify: right;
  margin-bottom: 2rem;

}
.KontaktTextListDaten p{
  text-align: right;
  margin: 0px;

}

.KontaktTextListDaten p:nth-of-type(3) {
  margin-bottom: 2rem;
}
.KontaktTextListDaten p:nth-of-type(6) {
  margin-top: 2rem;
}
.KontaktTextList img{
  width: 655px;
  height: auto;
}
.KontaktTextList h2{
  font-family: 'Inter';
  font-size: 30px;
  font-weight: 300;
  text-align: left;

}
.KontaktTextList p{
  font-family: 'Inter';
  font-size: 18px;
  font-weight: 300;
  text-align: left;

}


 .DatenStruct h1, .DatenStruct h2 {
  margin-top: 0px;
  margin-bottom: 0px;

  text-align: left;
}

@media only screen and (max-width: 991.98px) {

 
  .DatenStruct h1, .DatenStruct h2 {
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: center;
  }
  .DatenStruct figure{
    justify-self: center;

  }
}
.KontaktTextList ul{
  font-family: 'Inter';
  font-size: 18px;
  font-weight: 300;
  line-height: 34.15px;
  text-align: left;

}

.KontaktImgPar{
  grid-column: col-start 1 / col-end 10;
  margin: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 5rem;
  align-items: center;

}
.KontaktImgPar img{
  width: 625px;
  height: 415px;  
  gap: 0px;
  opacity: 0px;
  align-self: stretch;
}

.NewsletterButton {
  display: grid;
  grid-template-columns: 1fr;
  width: 60%;
  justify-self: center;
  background-color: var(--color-buttons);
  padding: 1rem;
  text-align: center;
  border-radius: 11px;
  margin-bottom: 4rem;
}


.NewsletterButton div{
  align-self: center;
}
/* .wp-block-buttons a{
  grid-row: 2;
  align-self: center;
  justify-self: center;
  height: 55px;
  display:block;
  text-align: center;
} */

/* SAEILO eNewsletter hier abonnieren! */

.KontaktHead {
  grid-column: col-start 1 / col-end 10;
  display: grid;
  grid-row-gap: 1rem;
  text-align: center;
  color: #FFFFFF;
  margin-top: 10rem;
  margin-bottom: 8rem;
  
}
.KontaktHead h5{
  margin-bottom: 2rem;
}
#kontakt-form{
  grid-row:4;
}

.KontaktImgPar2 {
  grid-column: col-start 2 / col-end 9;
  margin-bottom: 10rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 3rem;
  align-items: center;
  margin-top: 15rem;
  justify-items: start;
}
.KontaktImgPar2 img{
  width: 100%;
}
.KontaktImgPar img2{
  width: 625px;
  height: 415px;  
  gap: 0px;
  opacity: 0px;
  align-self: stretch;

}
.KontaktHeadIconTel{
  display: grid;
  grid-column-gap: 10px;
  grid-template-columns: min-content max-content;
  grid-template-rows: repeat(auto-fit, min-content);
  justify-content: center;
  row-gap: 0.3rem;
  margin-top: 3rem;
  
}
.is-hidden{
  display: none;
}
@media only screen and (max-width: 991.98px) {
  
  .KontaktHead {
    grid-column: 1 /-1;
    display: grid;
    grid-row-gap: 1rem;
    text-align: center;
    color: #FFFFFF;
    margin-top: 10rem;
    margin-bottom: 0;
    
  }
  .KontaktHeadIconTel{
    margin-bottom: 0;
    margin-top: 3rem;
  }
  .KontaktImgPar2 {
    grid-column: 1 /-1;
    margin: 0;
    display: grid;
    grid-template-areas: 
    "imag"
    "text";
    grid-template-columns: 1fr;
    grid-column-gap: 5rem;
    align-items: center;
    justify-items: center;
    margin-top:5rem;
    margin-bottom: 5rem;
  }

  .KontaktTextListDaten {
    grid-area: text;
    display: grid;
    grid-template-rows: min-content min-content;
  }

  .KontaktImgPar2 figure{
    grid-area: imag;

  }
  .KontaktTextListDaten h2 {
    font-family: 'Inter';
    font-size: 25px;
    font-weight: 300;
    line-height: 68.3px;
    text-align: center;
  }
  .KontaktTextListDaten p{
    text-align: center;
    font-size: 16px;
  }
  .KontaktImgPar {
    display: grid;
    grid-template-rows: min-content min-content;
    grid-template-columns: 1fr;
    grid-column-gap: 5rem;
    align-items: center;
  }
  .KontaktImgPar figure{
    grid-row: 1;
  }
  .KontaktImgPar img{ 
    width: 100%;
    height: auto;  
  }
  .KontaktImgPar2 img{ 
      width: 100%;
      height: auto;  }
  .KontaktTextList {
    grid-row: 2;
    display: grid;
    grid-template-rows: min-content min-content;
    grid-row-gap: 3rem;
  }
  .KontaktTextList h2 {
    font-family: 'Inter';
    font-size: 20px;
    font-weight: 300;
    line-height: 30.3px;
    text-align: center;
  }
  .KontaktTextList p {
    font-size:15px;
    font-weight: 100;
    line-height: 21.3px;
    text-align: center;
  }

  .KontaktTextList ul {
    font-size:15px;
    font-weight: 100;
    line-height: 21.3px;
    text-align: center;
    list-style-position: inside;
  }
  .KontaktTextList li {
    text-align: center;
  }

 
  .KontaktHeadIconTel img {
    width: 3rem;
    height: auto;
  }

  .KontaktHeadIconTel figure {
    margin-right:1rem;
  }
}


@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

  .KontaktImgPar2 {
    grid-column: col-start 1 / col-end 10;
    margin: 100px;
    display: grid;
    grid-template-areas: 
    "imag"
    "text";
    grid-template-columns: 1fr;
    grid-column-gap: 5rem;
    align-items: center;
    justify-items: center;
  }

  .KontaktTextListDaten {
    grid-area: text;
    display: grid;
    grid-template-rows: min-content min-content;
  }

  .KontaktImgPar2 figure{
    grid-area: imag;

  }
  .KontaktTextListDaten h2 {
    font-family: 'Inter';
    font-size: 25px;
    font-weight: 300;
    line-height: 68.3px;
    text-align: center;
  }
  .KontaktTextListDaten p{
    text-align: center;
    font-size: 16px;
  }
  .KontaktImgPar {
    grid-column: col-start 1 / col-end 10;
    margin: 40px;
    display: grid;
    grid-template-rows: min-content min-content;
    grid-template-columns: 1fr;
    grid-column-gap: 5rem;
    align-items: center;
    grid-row-gap: 5rem;
  }
  .KontaktImgPar figure{
    grid-row: 1;
  }
  .KontaktImgPar img{ 
    width: 100%;
    height: auto;  
  }
  .KontaktImgPar2 img{ 
      width: 100%;
      height: auto;  }
  .KontaktTextList {
    grid-row: 2;
    display: grid;
    grid-template-rows: min-content min-content;
    grid-row-gap: 3rem;
  }
  .KontaktTextList h2 {
    font-family: 'Inter';
    font-size: 20px;
    font-weight: 300;
    line-height: 30.3px;
    text-align: center;
  }
  .KontaktTextList p {
    font-size:15px;
    font-weight: 100;
    line-height: 21.3px;
    text-align: center;
  }

  .KontaktTextList ul {
    font-size:15px;
    font-weight: 100;
    line-height: 21.3px;
    text-align: center;
    list-style-position: inside;
  }
  .KontaktTextList li {
    text-align: center;
  }
  .KontaktHead {
    margin-bottom: 10px;
    grid-column: col-start 1 / col-end 10;
    display:grid;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 25px;
    text-align: center;
    color: #FFFFFF;
  }
}

.KontaktHeadIconTel a[href^="tel:"] {
  color: white;
  text-decoration: none;
  align-self:center;
}

.KontaktHeadIconTel > a:nth-child(3){
  color: white;
  text-decoration: none;
  grid-column: 1 / -1;
  grid-row:5;
  align-self:center;
}
.KontaktHeadIconTel > a:nth-child(4){
  
  color: white;
  grid-column: 1 / -1;
  font-size: 25px;
  text-decoration: none;
  grid-row:6;
  align-self:center;
}
/* praxisberichte */

.anwendeberichte_buttons{
  margin-bottom: 10rem;
  margin-top: 10rem;
}
.anwendeberichte_buttons {
  display: flex;
  flex-wrap: wrap;        /* ✅ allows buttons to move to next line */           /* spacing between buttons */
  justify-content: space-around;
  grid-row-gap: 3rem;
}

.anwendeberichte_buttons .wp-block-button {
  flex: 1 1 150px;        /* grow, shrink, and set min width */
  min-width: 100px;       /* ensures readability on small screens */
}
.anwendeberichte_buttons .wp-block-button a{
  text-decoration: none;
  color: white;
  background-color: var(--color-secondary);
  color: white;
  text-decoration: none;
  padding: 0.8rem 1.5rem;
  margin-right: 1rem;
}
@media only screen and (max-width: 1126px) {

  .anwendeberichte_buttons{
    justify-content:center;
    margin-top:5;
  }
}
@media only screen and (max-width: 600px) {

  .anwendeberichte_buttons{
    display: flex;
    flex-direction: column;
    grid-row-gap: 3rem;
    align-content: center;
    margin-bottom: 7rem;
    margin-top:5rem;
  }
  .anwendeberichte_buttons .wp-block-button {
    flex: 0;        /* grow, shrink, and set min width */

  }
}


.searchbar{
  grid-column: center-start / center-end;
  display: grid;
  justify-items: end;
  grid-template-columns: 1fr 1fr;
}
.searchbar input{
  width: 300px;
  height: 40px;
  color: white;
  padding-right:30px;
  background:  #2A2A2A url("http://localhost/wp-content/uploads/search-icon.png") no-repeat right;
  background-size: 20px;
  margin: 10px;
  text-align: end;

}
.txticon{
  display: grid;
  justify-items: end;
  grid-template-rows: 1fr;

}
.hide { display: none; };

.buttonReadMore{
  grid-column: col-start 4 / col-start 5;
  width: 23rem;
  padding:1rem;
  color: white;
  background-color: #2A2A2A;
  border: 0px solid transparent;
}

@media only screen and (max-width: 991.98px) {

  .buttonReadMore {
    grid-column: col-start 5 / col-start 5;
    width: 23rem;
    padding: 1rem;
    color: white;
    background-color: #2A2A2A;
    border: 0px solid transparent;
    justify-items: center;
  }
}


x
.praxisticker p {
  margin-bottom: 2.4rem;
}
.praxisticker .wp-block-button__link{
  background-color: rgba(134, 0, 0, 1);
  color: white;
  text-decoration: none;
  padding: 0.75em 1.5em;
}



/* Mediathek */
@media only screen and (max-width: 1100px) {
  .spacerMediathek{
    height: 50px !important;
  }
}
.mediaTitleImg{
  grid-column: center-start / center-end;
  text-align: center;
  display: grid;
  grid-template-rows: min-content min-content;
  grid-template-columns: 1fr;
  grid-template-areas: "tex"
  "imag";
  overflow-y: scroll;
}

.no-scrollbar {
  scrollbar-width: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.mediatxt{
  grid-area: tex;
}

.mediaTitleImg h2{
  /* SAEILO */

  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-size: 50px;
  line-height: 68px;
  /* identical to box height */
  text-align: left;

  color: #FFFFFF;


}

.mediaTitleImg p{
  /* Erfahren Sie in diesen Videos mehr über uns. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-size: 25px;
  line-height: 34px;
  text-align: left;
  color: #FFFFFF;
}

@media only screen and (max-width: 991.98px) {

  .mediaTitleImg h2 {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 68px;
    text-align: left;
    color: #FFFFFF;
  }
  .mediaTitleImg p {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-size: 18px;
    line-height: 24px;
    text-align: left;
    color: #FFFFFF;
  }
}
.PostTitle{
  /* Lieferbare Sonderangebote */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-size: 60px;
  line-height: 82px;
  color: #FFFFFF;
}


/* KARRIERE */


.KarriereBottomBild{

  grid-column: center-start / center-end;
  display: grid;
  justify-items: center;

}
@media only screen and (max-width: 991.98px) {

  .KarriereBottomBild figure img{
    width: 200px;
  }
}
.KarriereParagraph{
  grid-column: col-start 3 / col-end 8;
  display: grid;
  justify-items: center;
  text-align: center;
}
.KarriereParagraph{
    /* Wenn Sie gerne in einem solchen Team arbeiten würden und diese Stelle zu Ihnen passt, bewerben Sie sich bei uns! Bewerbungen schicken Sie gerne an info@saeilo.de */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-size: 20px;
  line-height: 34px;
  text-align: center;
  color: #FFFFFF;
}




.Karrieresticker .wp-block-button__link{
  background-color: #7A7A7A;
  color: white;
}
.Karrieresticker .wp-block-buttons a{
  padding:1rem;
  border-radius: 49px;
}
.Karrieresticker .wp-block-buttons{
  margin-top: 1rem;
}
.Karrieresticker {
  grid-column: col-start 10 / center-end;
  padding-top: 1rem;
  padding-bottom: 1rem;
  display: flex;
  flex-direction: column;
  background-color: rgba(42, 42, 42, 0.566);
  text-align: center;
}
.Karrieresticker{
  position: fixed;
  top: 50%;
  z-index: 1;
  right: 0;
  border-radius: 0px;
  grid-row-gap: 1rem;
  padding: 2rem;
  padding-bottom: 3rem;
}
.Karrieresticker .wp-block-button__link {
  background-color: #7A7A7A;
  color: white;
  font-size: 15px;
}
.KarriereBottomBild figure img{
  max-width: 40rem;
  margin-top: 18rem;
  margin-bottom: 18rem;
  min-width: 32rem;
}
.Karrieresticker{
  display: flex;
  flex-direction: column;
  background-color: rgba(23, 19, 19, 0.566);
  text-align: center;
  position: fixed;
  top: 50%;
  z-index: 99997;
  right: 0;
  padding: 2em 1em;
  row-gap: 1.5rem;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

   
  .Karrieresticker {
    /* grid-column: col-start 10 / center-end; */
    /* padding-top: 1rem;
    padding-bottom: 1rem; */
    display: flex;
    flex-direction: column;
    background-color: rgba(42, 42, 42, 0.566);
    text-align: center;
    /* position: fixed;
    left: 80%;
    top: 70%;
    margin-left: -30px; */
  }
  .Karrieresticker .wp-block-button__link {
    background-color: #7A7A7A;
    color: white;
    font-size: 15px;
  }
  .KarriereBottomBild figure img{
    width: 400px;
  }
}
/* YOUTUBE */

.youtube-video {

  width: 100%;
}

.videos-wrapper {
  position: relative; /* Required for arrow keys to be absolutely positioned child divs inside menu-wrapper parent. */
  width: 500px;
  height: 100px;  /* Intentionally shorter than menu items, to hide horizontal scroll bar. */
  margin: 1em auto;
  border: 1px solid black;
  overflow-x: hidden;
  overflow-y: hidden;
  display: flex;
  align-items: center;
  padding: 0 20px;  /* Inner space on the left and right sides of wrapper must match flexbox gap space between menu items. */
  box-sizing: border-box;
}

.videos {
  height: 120px;
  /* background: #f3f3f3; */
  box-sizing: border-box;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  position: relative; /* Required for animation. */
  display: flex;
  align-items: center;
  gap: 20px;  /* Flexbox space between menu items must match the left/right padding of menu wrapper. */
}

.videos .item {
  background: #f3f3f3;  /* Weird - Visible items inherit this from .menu but not hidden items# 6-8 when they slide in and can be seen. */
  width: 200px;
  height: 75px;
  color: black;
  outline: 1px dotted gray;
  box-sizing: border-box;
  border-radius: 5px;
  display: flex;            /* Needed to center number in middle of menu item, solution # 1 of 3. */
  align-items: center;      /* Needed to vertically center number in middle of menu item, solution # 2 of 3. */
  justify-content: center;  /* Needed to horizontally center number in middle of menu item, solution # 3 of 3. */
}

.arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  /* width: 3em; Excluding width means that arrow div will only be as wide as it needs to be to contain the < or > characters. */
}

.left-arrow {
  left: 0;
}

.right-arrow {
  right: 0;
}

.hidden {
  display: none;
}

.print {
  margin: auto;
  max-width: 500px;
}

.print span {
  display: inline-block;
  width: 100px;
}
#menu-item-2380 a{
  color: #FF0000;
}


/* FORM STYLE */

#wsf-1-field-8, #wsf-1-field-9,#wsf-1-field-10,#wsf-1-field-11, #wsf-1-field-14{
  background-color: #a8a8a8;
  color:black;
}


/* the option tabs of a single machine */
.nav-tabs{
  grid-column: 4 / -1;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-bottom:100px;
  

}
.red-tab {
  grid-column: 1 / -1;
  justify-self: stretch end;
  color:white;
  overflow: hidden;
  border-bottom: 1px solid var(--tab-gray);
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: flex-start!important;
  align-content: space-between;
  flex-direction: row;
  margin-bottom: 1px!important;
  gap: 0px!important;
  border-bottom: solid 0.02px #646464;
  margin-left:70px;
  margin-right: 70px;
}
.tab-title{
  /* color:white;
  font-size: clamp(1.4rem, 1.25rem + 1.1739vw, 2rem); */
}
.red-tab div{
float: left;
border-bottom: 3px solid transparent;
cursor: pointer;
transition: 0.3s;
font-size: 17px;
color:white;
}
/* .wp-block-buttons a {
  margin-left: 3rem;
  margin-right: 3rem;
  margin-bottom: 0rem;
} */
.red-tab a.wp-block-button__link {
  /* color: black!important; */
  color: white;
  background-color: transparent!important;
}
.red-tab div a {
  padding: 20px 40px!important;
}
.red-tab div:hover a, .red-tab div.active a {
  /* color: var(--tab-main)!important; */
  color:white;
}
.red-tab div.active, .red-tab div:hover {
  /* color: var(--tab-main)!important; */
  color:white;
  border-bottom: 3px solid var(--tab-main);
  z-index: 3;
}

.active {
  display: block;
}

.tabs {
  grid-column: center-start / center-end;
  margin-top: 20px;
}

.tab-titles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  margin-bottom: 3rem;
}

.tab-title {
  background-color: black;
  padding: 10px 20px;
  cursor: pointer;
  margin-right: 5px;
  font-weight: bold;
}

.tab-title.active {
  color: #fff;
  border-bottom: 2px solid #a20000;
  font-weight: bold;
}

.tab-content .tab-panel {
  display: none;
  padding: 20px;
  background-color: black;
  border: 1px solid black;
}

.tab-content .tab-panel.active {
  display: block;
}


.ServiceTextList p{
  font-family: 'Inter';
  font-size: 17px;
  font-weight: 300;
  line-height: 34.15px;
  text-align: left;

}
.contentimg{
  display: grid;
  grid-template-columns: 1fr 500px;
  grid-column-gap: 4rem;
}

.textm600
{
  display: flex;
  flex-direction: column;
  grid-row-gap: 2rem;
  width: 95%;

}
.textm600 h2
{
  margin-bottom: 2rem;
}
.textm600 ul {
  margin-left: 1.5rem;
}
.textm600 ul li {
  margin-bottom: 0.5rem;
}
.imgm100{
  grid-column: 2;
  width: 100%;
  align-self: center;
}
@media only screen and (max-width: 991.98px) {
  .contentimg{
    display: grid;
    grid-template-rows: min-content 1fr;
    grid-template-columns: 1fr;
    
  }
  .textm600
{
  grid-row: 2;

}
.imgm100{
  grid-column: 1;
  margin-bottom: 3rem;
}

}
@media only screen and (max-width: 400.98px) {
  .tab-title{
    padding: 5px 15px;
    margin-right: 0px;
  }
}

.MaschineDetails{
  grid-column: center-start / center-end;
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* ✅ Prevent overflow */
  gap: 20px;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden; /* Optional: hide any overflows */
  grid-row-gap: 8rem;
  margin-bottom: 5rem;
}

.subgrid {
  display: grid;
  grid-template-columns: subgrid;
  overflow: hidden; /* ✅ Contain child overflow */
}

.subgrid-1 {
  grid-column: 1 / -1;
  display: grid;
}

.subgrid-2 {
  grid-column: 1 / -1;
}

.subgrid-3 {
  grid-column: 1 / -1;
}


.MaschineDetails__title h2 {
  text-align: center;
}

.MaschineDetails__text{
  overflow-wrap: break-word; /* ✅ Wrap long words */
  word-break: break-word;    /* ✅ Break long URLs or text */

}

.MaschineDetails__text h3 {
  margin-bottom: 2rem; 
}

.MaschineDetails__image figure img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain; /* ✅ Prevent stretching */
}

.MaschineDetails__image {
  padding: 10px;
  max-width: 80%;
}

/* FINANZIERUNG START */




#tab-5 h2{
  margin-bottom: 6rem;
}
#tab-5 h3{
  margin-bottom: 2rem;
  margin-top: 2rem;
}
#tab-5 ul{
  margin-top: 2rem;
  margin-left: 2rem;
}
#tab-5 figure
{
  margin-bottom: 4rem;
  max-width: 400px;
}
#tab-5 figure img{
  width: 100%;
  height: auto;
}

/* FINANZIERUNG END */


.textm1000{
  grid-column: 1;
}
.textm1000 h3{
  margin-bottom: 3rem;
}

.imgm100 figure img{
  max-width: 556px;
  width: 100%;
  height: auto;
}
.tecdata{
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top:4rem;
  column-gap: 4rem;
 

}


@media only screen and (max-width: 991.98px) {
  .tecdata{
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    margin-top:4rem;
   
  
  }
}

.tecdata h2{
  text-align: left;
  margin-bottom: 3rem;
}
.tecdata h3{
  margin-bottom:2rem;
}

.tecdata_column .wp-block-table{
  border-bottom: 1px solid rgb(40, 40, 40);

}

.tecdata .wp-block-table{
  /* padding-bottom: 4rem; */
  margin-bottom: 4rem;
  border-bottom: none; /* or 0 */
}
.tecdata .wp-block-table td {
  color: #FFF;
  border: none;
  font-family: 'Inter';
  font-size: 1.7rem;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
}
.tecdata table tr td {
  padding-top: 0rem;
  padding-bottom: 1.8rem;
}
.tecdata table{
  border-spacing: 1.5rem;
  margin-left: -1.5rem;
}

@media only screen and (max-width: 991.98px) {
.tecdata table {
  border-spacing: 0.5rem;
  margin-left: -0.5rem;
}
}

/* Basic styling for the tab container */
.vertical-tabs-container {
  grid-column: 1 /-1;
  display: flex;
}

/* Style for the vertical tab list */
.vertical-tabs {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 200px;
  background-color: black;
}

.vertical-tabs li {
  padding: 10px;
  cursor: pointer;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

.textm1000 ul{
  margin-left:3rem;
}
.textm1000 h2{
  margin-bottom: 3rem;
}
.vertical-tabs li:hover {
  background-color: #ddd;
}

/* Style for the active tab */
.vertical-tabs li.active {
  background-color: #0073aa;
  color: white;
}

/* Container for tab content */
.tabs-content1 {
  margin-left: 20px;
  padding: 20px;
  flex-grow: 1;
}

/* Style for tab content */
.tab-content1 {
  display: none;
}
.tableDet table{ 
  margin-left: 0;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* ensures consistent column sizing */
}
.tableDet td:first-child {
  width: 70%;       /* adjust as needed */
  text-align: left; /* optional – align main text to the right */
  padding-right: 0.5rem;
}

.tableDet td:last-child {
  width: 30%;
  text-align: left;  /* align optional part to the left */
  padding-left: 0.5rem;
}
.tableDet tr:first-child td:first-child {
  /* your styles here */
  font-weight: bolder;
}

@media only screen and (min-width: 1024.98px) {
#tab-4 .post-card{
  margin-bottom: 7rem;
}
}

#tab-4 h2{
  margin-bottom: 2rem;
}
 .tab-content1.active {
  display: block;
}
.et-content-overlay{
  width: 100% !important;
  grid-row: 1;
  grid-column: 1;
}

/* style form maschine det */
#wsf-1-section-5 > legend:nth-child(1){
  color: white;
}
#ws-form-1{
  padding: 30px;
  align-content: end;
  margin-left: auto;
  background-color: black;
  margin-right: 0;
}

#ws-form-1 {
  grid-column: col-start 4 / col-end 6;
  padding: 10px;
}
#wsf-2-section-7 > legend:nth-child(1){
  color: white;
  font-family: 'Inter';
  font-size: 20px;
}

input[type="email"].wsf-field, input[type="number"].wsf-field, input[type="tel"].wsf-field, input[type="text"].wsf-field, input[type="url"].wsf-field, select.wsf-field, textarea.wsf-field {
  background-color: gray;
  color:white;
}
.wsf-form input[type="email"].wsf-field, .wsf-form input[type="number"].wsf-field, .wsf-form input[type="tel"].wsf-field, .wsf-form input[type="text"].wsf-field, .wsf-form input[type="url"].wsf-field, .wsf-form select.wsf-field, .wsf-form textarea.wsf-field {
  background-color: gray;
  color:white;
}
/* .wsf-form .wsf-field-wrapper .wsf-field {
  background: gray;
  color: white;
  border: 1px solid transparent;
} */
.wsf-form .wsf-field-wrapper .wsf-button {
  background: gray;
  color: #FFFFFF;
  color: white;
  padding: 0px 0px;
  font-size: 18px;
  font-family: 'Inter';
  height: 4rem;
  border-radius: 8px;
  border: 1px solid transparent;
}

input[type="checkbox"]{
  background-color: blue;

}

.wsf-form .wsf-field-wrapper .wsf-inline:nth-of-type(0){
  background-color: blue;
}
.wsf-form .wsf-field-wrapper .wsf-field::placeholder {
  color:rgb(86, 86, 86);
}

.fieldform{
  height:30px;
}

#wsf-1-field-wrapper-41, #wsf-1-field-wrapper-58 , #wsf-1-field-wrapper-28, #wsf-1-field-wrapper-59, #wsf-1-field-wrapper-60, #wsf-1-field-wrapper-31, #wsf-1-field-wrapper-30, #wsf-1-field-wrapper-36, #wsf-1-field-wrapper-62, #wsf-1-field-wrapper-63, #wsf-1-field-wrapper-42, #wsf-1-field-wrapper-53, #wsf-1-field-wrapper-68, #wsf-1-field-wrapper-39{
  margin-bottom:18px;
  
}
#wsf-1-field-wrapper-65{
  margin-bottom:0px;
}


#wsf-1-field-41, #wsf-1-field-58 ,  #wsf-1-field-65, #wsf-1-field-28, #wsf-1-field-59, #wsf-1-field-60, #wsf-1-field-61, #wsf-1-field-31, #wsf-1-field-30, #wsf-1-field-36, #wsf-1-field-62, #wsf-1-field-63, #wsf-1-field-42, #wsf-1-field-53, #wsf-1-field-68, #wsf-1-field-39{
  background-color: rgb(240, 240, 240);

}

#wsf-1-field-28 { /* WebKit browsers */
  color:    red;
   opacity: 1 !important;
}
#wsf-1-section-5 > legend:nth-child(1){
  padding: 10px 10px;
  border-radius: 8px;
}
.has-vivid-red-color > a:nth-child(1) > strong:nth-child(1){
  font-weight: 1000;
  color: white;
  font-family: 'Inter';
}
.has-large-font-size > strong:nth-child(1) > a:nth-child(1){
  font-weight: 1000;
  font-family: 'Inter';
}


/* ANGEBOT ANFORDERN FORM SINGLE MACHINE */
.txtForm{
  display: grid;
  border-radius: 8px;
  box-shadow: 0px 0px 30px 17px rgba(82, 82, 82, 0.4);
  grid-template-columns: 1fr 1fr;
  grid-gap: 5rem;
  padding: 5rem 5rem 5rem;
  margin-bottom: 5rem;
  margin-top:10rem;
}
@media only screen and (max-width: 590.98px) {
  .txtForm{
      grid-template-columns: 1fr;
      margin-top: 0;
  }
}
.txtForm2 {
  grid-column: center-start / center-end;
  display: grid;
  /* border: 1px solid rgb(69, 69, 69); */
  border-radius: 8px;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5rem;
  padding: 5rem 5rem 5rem;
  margin-bottom: 5rem;
}
.txtForm > h2:nth-child(1){
  grid-column: 1 / -1;
  text-align: left;

}
.txtForm2 > h2:nth-child(1){
  grid-column: 1 / -1;
  text-align: left;

}
#ws-form-2{
  grid-column: 2;
}

.txtform{
  grid-column: 1;
  font-size: 18px;
}

.txtform input{
  background-color: #a8a8a8;
}

.formField{
  background-color: #a8a8a8;
}
#myBtnF{
  background-color: rgba(123, 123, 123, 0.56);
  text-align: center;
  width: 70px;
  padding: 1.4em 1em;
}
@media only screen and (max-width: 400.98px) {
#myBtnF{
  padding: 1em 1em;
}
}

.angebot_anfordern_button{
  position: fixed;
  top: 50%;
  z-index: 99997;
  right: 0;
}


#myBtnF .wp-block-button__link{
  background-color: transparent;
}

/* The Modal (background) */
.modalform {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 100088888; /* Sit on top */
  right: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  animation-name: fadeIn;
  animation-duration: 0.4s
  
}
.modalform-content {
  margin: 0 auto;
  width: 27%;
  max-width: 461px;
  overflow-x: hidden;
  animation-name: slideIn;
  animation-duration: 0.4s;
  min-width: 380px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#myModalFormLager .modalform-content{
  width:100%;
}

#wsf-1-field-wrapper-114, #wsf-1-field-wrapper-60 {
  margin-bottom: 0 !important;
}
.wsf-alert.wsf-alert-success{
  font-family: 'Inter' !important;
  background-color: black !important;
  border-color: rgb(133, 133, 133) !important;
}
.wsf-alert.wsf-alert-success pre span{
  font-family: 'Inter';
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
@media only screen and (max-width: 800.98px) {

  .modalform {
    height: 100vh;
    overflow: hidden;

  }
  #modalformconLager{
    transform: translate(-60%, -65%);
  }
  
  .modalform-content {
    width: 110%;
    height: auto;
    scale: 0.8;
    top: 50%;
    left: 50%;
    transform: translate(-60%, -65%);
    overflow: hidden;
    }
    #myModalFormLager .modalform-content {
      width: 110%;
    }
    .form_edit_homepage{
      overflow-y: auto;
      max-height: 150vh;
      max-height: calc(130vh - 40px);
    }
    #myModalForm .modalform-content {
      width: 110%;
      height: auto;
      scale: 0.8;
      top: 50%;
      left: 50%;
      transform: translate(-60%, -60%);
      overflow: hidden;
      }
    #form-edit-lager{
      overflow-y: auto;
      max-height: calc(140vh - 100px);
    }
  #ws-form-2{
    height: 100%;
  }
}
/* Add Animation */
@-webkit-keyframes slideIn {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes slideIn {
  from {opacity: 0} 
  to {opacity: 1}
}

@-webkit-keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}


/* The Close Button */
.closeModForm {
  color: #aaaaaa;
  float: right;
  font-size: 34px;
  font-weight: bold;
  background-color: transparent;
  border: none;
}

.closeModForm:hover,
.closeModForm:focus {
  color: var(--color-primary);
  text-decoration: none;
  cursor: pointer;
} 


/* MENU STICKY ONCE SCROLLED  */
.stickyNavMobile {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  background-color: black;
  padding-right: 2rem;
}
.stickyTabtitles {
  width: 100%;
  position: fixed;
  top: 109px;
  right: 0;
  left: 0;
  z-index: 99997;
  background-color: black;
  padding-right: 2rem;
}
@media (max-width: 991.98px) {
  .stickyTabtitles {
    top: 105px;
  }
}
@media (max-width: 376px) {
  .stickyTabtitles {
    top: 120px;
  }
}
/* Landscape */
@media only screen 
  and (min-device-width: 300px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
    .stickyTabtitles {
      top: 115px;
    }
    #menu-small-nav {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-auto-rows: min-content;
    }

}

.nav-fixed {
  &--secondary {
    position: fixed;
    bottom: auto;
  }
}

.zindextabs{
  z-index: 100031;
}


/* UNKNOWN */
.Ausbildungsschmiede_txt{
  grid-row: 2;
  grid-column: 1 / -1;
}
.Ausbildungsschmiede_txt ul{
  padding-left:3rem;
}

/* NEWSLETTER PAGE */

.newsletter-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  grid-column-gap: 2rem;
  margin-top: 10rem;
}
@media (max-width: 1100px) {
  .newsletter-grid{ 
    margin-top: 10rem;
  }
}

.newsletter-grid_text{
  grid-column: 1;
  grid-row: 1;
}
.newsletter-grid_text .wp-block-list{
  margin-left: 15px;
}
.newsletter-grid_img{
  grid-column: 1;
  grid-row: 2;
}
.newsletter-grid_img figure{
  max-width: 540px;
}
.newsletter-grid_img figure img{
  width: 100%;
  height: auto;
}
.newsletter-grid_form{
  grid-column: 2;
  grid-row: 1 / -1;
}
.newsletterform_img {
  grid-row: 2;
  grid-column: 1;
  display: flex;
  flex: 0 0 70%;
  justify-content: center;
}
.newsletterform_img figure{
  align-content: center;
}
.newsletterform_img figure img{
    width: 50rem;
    height: auto;
}

.newsletterForm{
  grid-column: 1 / 2;
  grid-row: 2;
  background-color: black;
    border: 1px solid gray;
    border-radius: 25px;
    margin-top: 5rem;
    padding: 2rem;
    height: auto;
    text-align: left;
    width: 70%;
}
.newsletterImg{
  grid-column: 2;
  grid-row: 1 / 2;
}

.newsPar{
  grid-column: 1;
  grid-row: 1;
}
#wsf-1-label-94-row-1{
  color: white;
}
#wsf-1-field-95{
  background-color: rgba(134, 0, 0, 1);
  border-color: black;
}
.haet-cleverreach-form{
  display: grid;
  grid-template-rows: 1fr 1fr;
}

.haet-cleverreach-field-wrap  {
  display: block;
  margin: 0;
  text-align: left;
}
@media (max-width: 991.98px) {
  .newsletter-grid{ 
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: min-content min-content;
    justify-items: center;
  }
  .newsletter-grid_img{
    display: none;
  }
  .newsletter-grid_form{
    grid-column: 1;
    grid-row: 2;
  }
}
/* FAQ PAGE STYILING */

.faqcont{
  grid-column: center-start / center-end;
  margin-top: 10rem;
}
@media (max-width: 991.98px) {
  .faqcont{
    grid-column: center-start / center-end;
    margin-top: 0;
  }
}

.faqcont h3, .faqcont h2, .faqcont h1,.faqcont h4{
  text-align: center;
  margin-bottom: 5rem;
  
}
.accordion .accordion-item {
  border-bottom: 1px solid #e5e5e5;
}

.accordion .accordion-item button[aria-expanded='true'] {
  border-bottom: 1px solid rgb(62, 62, 62);;
}

.accordion button {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  padding: 1em 0;
  color: white;
  font-size: 1.5rem;
  font-weight: 400;
  border: none;
  background: none;
  outline: none;
}

.accordion button:hover,
.accordion button:focus {
  cursor: pointer;
  color: white;
}

.accordion button:hover::after,
.accordion button:focus::after {
  cursor: pointer;
  color: rgba(134, 0, 0, 1);
  border: 1px solid rgb(62, 62, 62);
}

.accordion button .accordion-title {
  padding: 1em 1.5em 1em 0;
}

.accordion button .icon {
  display: inline-block;
  position: absolute;
  top: 18px;
  right: 0;
  width: 22px;
  height: 22px;
  border: 1px solid;
  border-radius: 22px;
}

.accordion button .icon::before {
  display: block;
  position: absolute;
  content: '';
  top: 9px;
  left: 5px;
  width: 10px;
  height: 2px;
  background: currentColor;
}
.accordion button .icon::after {
  display: block;
  position: absolute;
  content: '';
  top: 5px;
  left: 9px;
  width: 2px;
  height: 10px;
  background: currentColor;
}

.accordion button[aria-expanded='true'] {
  color: rgba(134, 0, 0, 1);
}
.accordion button[aria-expanded='true'] .icon::after {
  width: 0;
}
.accordion button[aria-expanded='true'] + .accordion-content {
  opacity: 1;
  max-height: min-content;
  transition: all 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 200ms linear, max-height 200ms linear;
  will-change: opacity, max-height;
  margin-bottom: 2rem;
}
.accordion .accordion-content p {
  margin: .5rem 0;
}


.listOrd{
  margin-left: 30px;
}
/* LEASING */
.KontaktButton{
  display: grid;
  justify-items: start;
  
}
.KontaktButton a{
  width: 100%;
}
.KontaktButton a{
  font-size:14px;
  font-family: 'Inter';
  color:white;
  text-decoration: none;
}

.listInsidePoints{
  list-style-position: inside;
}
.formField{
  background-color: #a8a8a8;
}

/* PROSPEKT BUTTON SINLE MASCHINE */
.ProspektButtParent{
  text-decoration: none;
  display:flex;
  align-self: center;
  justify-content: start;
}
.ProspektButt{
  grid-column: 1;
  background-color:black;
  box-shadow: 0px 0px 30px 17px rgba(109, 108, 108, 0.4);
  color:white;
  text-align:center;
  width: max-content;
  margin-bottom: 0rem;
  font-size: 13px;
  font-family: 'Inter';
  border-radius: 8px;
  text-decoration: none;
  padding:2rem;
}

.ProspektButt a{
  font-size: 15px;
  font-family: 'Inter';
  padding:0px;
  border-radius: 8px;
  text-decoration: none;
  color:white;
}


/* Popup Container Styles */

#wsform-popup 
{
  position: fixed;
  z-index: 1000;
  right: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  animation-name: fadeIn;
  animation-duration: 0.4s;
  visibility: hidden;
}

#wsform-popup #wsform-inner{
  margin: 6% auto;
  overflow-y: hidden;
  overflow-x: hidden;
  overflow-x: hidden;
  max-width: 461px;
  min-width: 300px;
}
/* Inner Box Styling */
#wsform-inner p{
  padding:10px;
}

/* Active (Visible) State */
#wsform-popup.active,
#wsform-popup-overlay.active {
  opacity: 1;
  visibility: visible;
  overflow: hidden;
}
#wsform-popup.active,
#wsform-popup-overlay.active{
  background-color: rgba(0,0,0,0.4);
}

#wsf-2-field-105{
  background-color: rgba(134, 0, 0, 1);
  border-color: transparent;
}
.fielfWrapper{
  background-color: #454545;
}
/* .wsf-form input[type=email].wsf-field,
.wsf-form input[type=number].wsf-field,
.wsf-form input[type=tel].wsf-field,
.wsf-form input[type=text].wsf-field,
.wsf-form input[type=url].wsf-field,
.wsf-form select.wsf-field,
.wsf-form textarea.wsf-field 
.wsf-form textarea.wsf-field:hover:enabled:not(:focus){
  background-color: #454545 !important;
} */

.wsf-form .wsf-field-wrapper .wsf-field {
   background-color: #454545 !important;
    color: white;
    border: 1px solid transparent;
    margin-bottom: 2rem;
    height:10rem;
}
.wsf-form input[type="checkbox"].wsf-field + label.wsf-label {
  color: #959595 !important;
}
.wsf-form [data-row-checkbox] {
  text-align: left !important;
}

.wsf-form button.wsf-button.wsf-button-primary {
  background-color: #454545 !important;
  border-radius: 0px !important;
  font-family: 'Inter';
}
input::placeholder,
textarea::placeholder,
select::placeholder {
  color: white !important;
  opacity: 1; /* Ensures full opacity */
}

@media only screen and (max-width: 991.98px) {

 
  .DatenStruct h1, .DatenStruct h2 {
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: center;
  }
  /* .description__title {
    font-size: 2.8em; } */
  .kundenzufriedenheitTitle {
    padding-top: 2rem;
  }
  .kundenzufriedenheit {
    margin: 0;
    grid-column-gap: 6rem;
  }

  #wsform-popup {
    z-index: 400000;
  }
  #wsform-popup #wsform-inner {
    margin: 15% auto;
    width: 50%;
  }
  #ws-form-2 {
    grid-column: 2;
  }
  .form_edit_homepage p {
    color: #b5b1b1;
  }
  #wsf-2-label-103-row-1, #wsf-2-label-104-row-1, #wsf-2-field-99, #wsf-2-field-100, #wsf-2-field-101, #wsf-2-field-102, #wsf-2-field-103, #wsf-2-field-104, #wsf-2-field-105{
    font-size: 12px;

  }
  .form_edit_homepage {
    margin-top: 0;
  }
  .description__text-group{
    grid-row-gap: 1.938vw;
  }
  .kundenzufriedenheitTitle p {
    font-size: 1.5rem;
  }
  .kundenzufriedenheit {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  

}
.feature {
  grid-row-gap: 1rem;
}
.modal-content p {
  margin: 1em auto;
}
.modal-icons.show .modal-content {
  transform: scale(0.8);

}
.Referenzen {
  margin-top: 100px;
  max-width: 100%;
  margin: 0;
  margin-bottom: 8rem;
}
.marquee {
  padding: 0;
}
.marquee-content {
  margin-top: 0;
}
.marquee_title {
  font-size: 18px;
}
.marquee-item {
  padding: 0;
  margin-right: 10px;

}

.historyMaschine {
  padding-bottom: 2rem;
}
.historyCard{
  max-width: inherit;
}
.historyTitle p {

  color: white;
  font-size: 20px;
}
#video-box::before {
  min-height: 250px;
}
.videoHomepage{
  height: 150px;
}
.captionHeaderMasDetail p {
  font-family: 'Inter';
  font-size: 11px;
  text-align: justify;
  text-justify: inter-character;
  padding-bottom: 8px;
}
.tabs {
  grid-column: 1 / -1;
  margin-top: 20px;
}
.wp-image-3587{
  width: 100%;
}

}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024.98px) {
  .videoDesc img {
    width: 10rem;
    height: auto;
  }
  
  .historyCard img {
    object-fit: cover;
  }
  .video-box {
    justify-content: none;
  }
  .video-box video {
    object-fit: fill;
    width: 100%;
    height: 280px;
  }
  .description {
    color:white;
    padding-bottom: 3vw;
  }
  .description__par1 {
    
    font-size: 10px;
  }
  .description__par2 {
    font-size: 10px;
  }
  .kundenzufriedenheit {
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  }


  #ws-form-2 {
    grid-column: 2;
    height: 400px;
    overflow: scroll;
  }
  .modalform-content {
    width: 60%;
  }
  #video-box::before {
    min-height: 210px;
  }

  .Referenzen {
    grid-column: center-start / center-end;
    display: grid;
    margin-top: 100px;
  }
}

@media only screen and (min-device-width: 1025px ) and (max-device-width: 1172px) {
  .modalform-content {
    width: 60%;
  }
  .Referenzen {
    grid-column: center-start / center-end;
    margin-top: 100px;
    max-width: 900px;
  }
  .praxisticker_btn a{
    padding: 0.75em 1.5em;
  }
  .video-box video {
    object-fit: cover;
    width: 100%;
    height: auto;
  }
  .imageSeq__im1, .imageSeq__im2, .imageSeq__im3, .imageSeq__im4  {
    scale: 0.9;
  }
  
  .description__par1 {
    
    font-size: 17px;
    object-fit: cover;
    width: 700px;
    word-wrap: break-word;
  }
  .description__par2 {
    font-size: 17px;
    object-fit: cover;
    width: 700px;
    word-wrap: break-word;
  }
  .description__title {
    font-size: 1.9vw; }
    #video-box::before {
      min-height: 430px;
    }

}
@media only screen and (max-width: 400px) {

 
  .DatenStruct{
    grid-template-columns: 365px;
    display: flex;
    flex-direction: column;
    padding-top: 10rem;
    align-items: start;
    justify-items: stretch;
    margin-bottom: 5rem;
    margin-top: 0;
  }
  .DatenStruct p{
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  hyphens: auto;
  }

}
.maschineIconsDescription {
  position: relative;
    z-index: 2;
    height: 100%; /* Fill hero block */
    width: 100%;
    display: grid;
    grid-template-columns: [full-start] 1fr [center-start] repeat(10, [col-start] minmax(0, 1fr) [col-end]) [center-end] 1fr [full-end];
    max-width: 1440px;
    min-width: 300px;
    margin: 0 auto;
}
@media only screen and (max-width: 991.98px) {
  .maschineIconsDescription {
      margin-left: 2rem;
  }
}
@media only screen and (max-width: 1180.98px) {
  .Referenzen {
    margin-bottom: 8rem;
  }
}

.burger-menu{
  font-size: 3rem;
}

.wsf-form [data-row-checkbox]{
  margin-top:1rem;
  margin-bottom: 0;
}


@media only screen and (max-width: 700.98px) {
  .maschine-header_img
{
  margin-bottom: 0px;
}
}

h3.maschine_caption_text{
  text-align: left;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: clamp(1.60rem, calc(1.273rem + 1.023vw), 2.50rem);
  line-height: 1.4;
}
p.maschine_caption_text {
  text-align: left;
  margin-bottom: 4rem;
  margin-top: 4rem;
}
.maschine_caption_text{
  text-align: center;
  margin-bottom: 4rem;
  margin-top: 9rem;
}
.maschine_caption_text span {
  margin-left: 0;
  margin-right: 1rem;
}
.machine-specs .item {
  display: inline;
}
@media only screen and (max-width: 600px) {
  h3.maschine_caption_text{
    /* line-height: 3rem; */
  }
  .machine-specs .separator {
    display: none; /* hide the | symbols */
  }
  .machine-specs .item {
    display: block; /* each phrase on its own line */
    margin-bottom: 4px; /* optional spacing */
  }
}
@media only screen and (max-width: 991.98px) {
  .maschine_caption_text{
    margin-bottom: 0rem;
    margin-top: 5rem;
  }
}
.maschine-header_wrapper
{
  position: absolute;
  width: 100%;
  height: 100%;
  grid-column: 1;
  grid-row: 1;
  overflow: hidden;
  grid-column: 3 / -1;
  grid-row: 1;
}


.maschine-header_wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Left gradient overlay */
.maschine-header_wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;  /* or smaller if you want only a part of it to have gradient */
  height: 100%;
  /* background: linear-gradient(to right, rgb(0, 0, 0), rgba(0,0,0,0));
   */
   background:
   linear-gradient(
     to top,
     rgba(0, 0, 0, 0.9),
     rgba(0, 0, 0, 0) 70%
   ),
   linear-gradient(
     to right,
     rgba(0, 0, 0, 0.9),
     rgba(0, 0, 0, 0) 60%,
     rgba(0, 0, 0, 0) 80%,
     rgba(0, 0, 0, 0.5)
   );
   background:
  linear-gradient(
    to top,
    rgba(0, 0, 0, 0.9),
    rgba(0, 0, 0, 0) 70%
    ),
  linear-gradient(
    90deg,
    #02090b, rgba(2, 9, 11, 0) 25%,
    rgba(2, 9, 11, 0) 75%, #02090b
    );

  pointer-events: none; /* So it doesn't block video interactions */
  z-index: 1;
}

/* DOWNLOADS START */

.downloads_grid
{
  grid-column: center-start / center-end;
  margin-top: 5rem;
  display:grid;
  grid-template-columns: repeat(2,1fr);
  grid-auto-columns: min-content;
  grid-row-gap: 10rem;
  margin-bottom: 17rem;
}
@media only screen and (max-width: 1024px) {
  .downloads_grid
{
  margin-top: 10rem;
  display: flex;
  flex-direction: column;
  margin-bottom: 8rem;
  
}
.downloads_btn{
  width: max-content;
}

}

@media only screen and (max-width: 430px) {

.downloads_btn{
  width:100%;
}

}

.downloads_btn{
  background-color: var(--color-secondary);
  color: white;
  text-align: center;
  padding: 0.75em 1.5em;
  border-radius: 8px;
  text-decoration: none;
  
}
.downloads_btn a{
  text-decoration: none;
  color: white;
}
.downloads_grid_1_1
{
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-rows: repeat(3,min-content);
  grid-row-gap: 2rem;

}
.downloads_grid_1_2
{
  grid-column: 2;
  
  display: grid;
  grid-template-rows: repeat(3,min-content);
  grid-row-gap: 2rem;
}
.allgemeine_verk{
  grid-column: center-start / center-end;
  margin-top: 10rem;
  display:grid;
  grid-template-columns: repeat(2,1fr);
  margin-bottom: 20rem;
  grid-column-gap: 3rem;

}
.allgemeine_verk_text
{
  grid-column: 1;
  display: grid;
  grid-template-rows: repeat(3,min-content);
  grid-row-gap: 3rem;
}
.allgemeine_verk figure img{
  
  width: 100%;

}
.allgemeine_verk figure{
  max-width: 555px;
  align-self: center;
}

@media only screen and (max-width: 1024px) 
{
  .allgemeine_verk
  {
    grid-column: 1 / -1;
    margin-top: 5rem;
    display: flex;
    flex-direction: column;
    grid-row-gap: 3rem;
    margin-bottom: 10rem;
    margin-top: 8rem;

  
  }
  .allgemeine_verk_text
  {
    grid-row: 1;
    max-width: 555px;
    align-self: center;
    
  }
  .allgemeine_verk_text .wp-block-buttons .wp-block-button
  {
    width: 100%;
    
  }
  .allgemeine_verk figure{
    grid-row: 2;
  }
  
}
/* CLEVER REACH FORM STYLING BEGIN */

.haet-cleverreach .haet-cleverreach-field-wrap {
  zoom: 1;
  display: grid;
  justify-content: stretch;
}
.cleverreach-checkbox input[type="checkbox"] {
  margin-right: 1rem;
}
.form_edit_Newsletter {
  background-color: black;
  border: 1px solid gray;
  border-radius: 10px;
  margin-top: 5rem;
  padding: 3rem;
  height: auto;
  justify-self: center;
  max-width: 400px;
  min-width: 300px;
}

.form_edit_Newsletter h2{
  text-align: center;
  margin-bottom: 3rem;
  color: white;
}
.haet-cleverreach-form {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-row-gap: 1rem;
}
.haet-cleverreach .label-left input, .haet-cleverreach .label-left select {
  background-color: gray;
  background-color: #454545;
  color: white;
  font-size: 14px;
  width: 100%;
  border: 0px transparent;
  padding: 0.5rem;

}
.haet-cleverreach .label-left label {
  margin-bottom: 1rem;
}
div.haet-cleverreach-field-wrap:nth-child(8){
  display: flex;
  align-items: flex-start;
  grid-column-gap: 1rem;
}
.cleverreach-checkbox label {
  display: inline !important;
  font-size: 14px;
  color: gray;
  font-family: 'Inter';
}
.haet-cleverreach .label-left label {

  font-size: 14px;
  font-family: 'Inter';
}
div.haet-cleverreach-field-wrap:nth-child(9){
  justify-content: center;
  
  
}
#haet-cleverreach-submit{
  background-color: var(--color-secondary);
  padding: 1rem;
  color: white;
  border-radius: 5px;
  border: 0px black;
  font-size: 1.8rem;
  font-family: 'Inter';
  cursor: pointer;
}
  /* CLEVER REACH FORM STYLING END  */


  /* KUNDENZUFRIEDENHEIT START */


.kundenzufriedenheitTitle 
{
  padding-top: 7rem;
  background-color: black;
  grid-column: center-start / center-end;
  text-align: center;
  margin-bottom: 8rem;
    }


.kundenzufriedenheit__grid 
{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
  justify-items: stretch;
  grid-row-gap: 10rem;
  grid-column-gap: 3rem;
  margin-bottom: 10rem; 
  grid-template-rows:repeat(2,1fr);
  align-items: start;
}
@media only screen and (max-width: 1024px) 
{
  .kundenzufriedenheit__grid{
    grid-row-gap: 4rem;

  }
}
.kundenzufriedenheit__grid__subgrid
{
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  color: white;
  grid-row-gap: 1.5rem;
}
.kundenzufriedenheit__grid__subgrid__numbers
{
  color: white;
  font-size: 5rem;
  text-shadow: 0px 0px 30px rgba(255, 255, 255, 0.3), 0px 0px 30px rgba(255, 255, 255, 0.3), 0px 0px 30px rgba(255, 255, 255, 0.3), 0px 0px 10px rgba(255, 255, 255, 0.3), 0px 0px 10px rgba(255, 255, 255, 0.3);
  text-decoration: none;
}

.kundenzufriedenheit__grid__subgrid figure img 
{
  width: auto;
  height: 75px;
}

.homepageBigButtons__grid
{
  position:relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  margin-bottom: 10rem;
  margin-top: 10rem;
  column-gap: 5rem;
  padding-left: 2.5rem; /* Half of 5rem gap */
  padding-right: 2.5rem;
}
@media only screen and (max-width: 700px) {
  .homepageBigButtons__grid
  {
    column-gap: 2rem;
    margin-top: 5rem;
    margin-bottom: 6rem;
  }
  .homepageBigButtons__grid__subgrid h4 {
    margin-top: 1rem;
  }
}

.homepageBigButtons__grid__subgrid{
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  color: white;
  grid-row-gap: 1rem;
  justify-content: center;
}
.homepageBigButtons__grid__subgrid figure a img:hover {
  transform: scale(1.1);
}
.homepageBigButtons__grid__subgrid figure a img{
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease-in-out;
  min-width: 74px;
}
.homepageBigButtons__grid__subgrid h4{
  margin-top:2rem;
}
@media only screen and (max-width: 400px) {
  .homepageBigButtons__grid__subgrid h4 {
    margin-top: 1rem;
  }
}
.imageSeq__rectangle
 {
  height: auto;
  width: 100%;
  height: calc(1vw + 60%);
  background-color: red;
  grid-column: full-start / full-end;
}
.homepageBigButtons__grid-wrapper {
  position: relative;
}

/* Rectangle that spans full width and sits behind */
.homepageBigButtons__grid-wrapper::before {
  content: '';
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 14vw;
  background-color: #282828;
  z-index: 0;
  max-height: 200px;

}
@media only screen and (max-width: 700px) {
  .homepageBigButtons__grid-wrapper::before {
      top:43%;
  }
}
/* KUNDENZUFRIEDENHEIT END */

/* VIDEOS AND FALLBACK IMAGE START */

.video-grid-container {

  position: relative;
  display: grid;
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  background-color: #000; /* fallback if both image and video fail */
  overflow: hidden;
}

/* Fallback image — bottom layer */
.video-fallback {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* YouTube iframe — top layer */
.video-iframe {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 1;
}

/* VIDEOS AND FALLBACK IMAGE END */

/* MASCHINE DETAIL STYLE HEADER START*/
.maschine-heading
{
  display: flex;
  flex-direction: column;
}
.maschine-heading h1
{
  /* text-wrap: nowrap; */
  margin-bottom: 2rem;
  
}
@media only screen and (max-width: 400.81px) {
  


  .maschine-heading h1
  {
    /* text-wrap: nowrap; */
    margin-bottom: 2rem;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;   
    font-size: 2.5rem;
  }
  .titleHeaderMasDetail img {
    width: 6rem;
  }
}
/* Hide line breaks on big screens */
.mobile-break {
  display: none;
}

/* Show them only on small screens */
@media (max-width: 400px) {
  .mobile-break {
    display: inline;
  }
}
/* MASCHINE DETAIL STYLE HEADER END */


/* CARDS STYLING : DOCUMENT IT!!*/ 

.post-card {
  overflow: hidden;
  transition: background 150ms ease-out;
  border-radius: 12px;
  position: relative;
  container: post-card / inline-size;
  margin-top:3rem;
  margin-bottom: 5rem;
}

.content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}


.content figure {
  aspect-ratio: 4 / 3;
  position: relative;
  width: 100%;
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}
.content figure img{
  width: 70%;
  height: auto;
  border-radius: 12px;
}

div.card-text {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  row-gap: 2rem;

  flex:60%;
}



div.card-text p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  margin: 0;
}
div.card-text ul{
  margin-left: 3rem;
}
div.card-text ul {
  padding-left: 0;            /* Remove default padding */
  list-style-position: inside; /* Put bullets inside content box */
  /* text-align: center;         Center-align the text + bullet */
  margin-left: 0;             /* Cancel earlier left margin */
}

div.card-text li {
  display: list-item;         /* Ensure it's not overridden by flex or other display types */
}

 div.card-text a {
  color: var(--colors-link);
  text-decoration: none;
  font-weight: bold;
  position: relative; /* Needed for the absolute ::after */
}

div.card-text a::after {
  content: " ";
  position: absolute;
  inset: 0;
}
/* or 512px? */
@container post-card (min-width: 613px) {
  div.content {
    flex-direction: row;
    align-items: center;
    column-gap: 6rem;
    overflow: hidden;
  }

  
  .content figure {
    margin-bottom: 0px;
    align-self: start;
    flex:40%;
  }
  .content figure img{
    width: 100%;
    height: auto;
  }
  .content figure {
    width: 100%;
  }
}
/* On small screens: force text first, image second */
@container post-card (max-width: 638px) {
  .content {
    flex-direction: column;
  }

  .card-text {
    order: 2; /* text always first */
  }

  .content figure {
    order: 1; /* image always second */
    margin-top: 1.5rem;
    margin-bottom: 6rem;
  }
  .content *{
    margin-bottom: 1rem;
  }
  .content figure img{
    width: 100%;
  }
}


/* CARD STYLING END */

/* FAQ START */

.faq-cont{
  width: 80%;
  padding: 50px;
  margin: 0 auto;
}
.faq-section {
  max-width: 760px;
  margin: 0 auto;
}


details {
  cursor: pointer;
}

summary:focus-visible {
  outline: 2px solid orange;
  outline-offset: 8px;
  border-radius: 4px;
}

summary {
  font-size: 20px;
  color: #f4f4f6;
  display: flex;
  justify-items: space-between;
  align-items: center;
  margin-bottom: 25px;
}

summary::marker {
  display: none;
  content: "";
}

span {
  margin-top: 4px;
  color: #f4f4f6;
}

details > p {
  max-width: 650px;
  color: #AEB9C6;
  font-size: 18px;
  line-height: 155%;
  letter-spacing: .1px;
  margin-bottom: 40px;
  padding-left: 10px;
}

hr {
  border: 1px solid #404E5C;
  margin-block-end: 30px;
}

/* FAQ END */



/* SWIPER START */

h2.space-middle-bottom {
  margin-bottom: 2rem;
}
h3.space-middle-bottom {
  margin-bottom: 4rem;
}


.swiper {
  width: 100%;
  padding-bottom: 40px !important;
  margin-bottom: 6rem;
}

/*I have to give the this class myself */
.swiper .swiper-slide-button {
  color: red;
  margin-top: -35px;
  overflow-y: scroll;
}

iframe.silder-yt {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 10px;
  pointer-events: none;
}



.yt-card {
  cursor: pointer;
}






.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.video-modal.hidden {
  display: none;
}

.video-modal__content {
  position: relative;
}

@media only screen and (max-width: 991.98px) {
  .video-modal__content{
    margin: 0 auto;
    width: 90vw;
    max-width: 900px;
    background: #000;
    overflow: hidden;
  }
  #modal-iframe{
    height: 100%;
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}

.video-modal__close {
  position: absolute;
  top: -40px;
  right: -10px;
  background: transparent;
  border: none;
  font-size: 32px;
  color: white;
  cursor: pointer;
}
.yt-card__card-title{
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.swiper-scrollbar {
   
    bottom: var(--swiper-scrollbar-bottom,-10px) !important;
  

}
.swiper .swiper-slide-button {
  color: red;
  margin-top: 35px;
  overflow-y: hidden;
  width: 43px;
  opacity: 1;
}

iframe.silder-yt {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 10px;
  pointer-events: none;
}
@media only screen and (max-width: 637px) {
  iframe.silder-yt {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 10px;
    pointer-events: none;
    height: auto;
  }
}
.swiper-wrapper .swiper-pagination-bullet-active {
  opacity: 1;
}
swiper-pagination-bullet-active {
  background: var(--swiper-pagination-color,#fff) !important;
}
.swiper-pagination-bullet {
  background: var(--swiper-pagination-bullet-inactive-color,#fff) !important;
}

.swiper-pagination-bullet {
  
  height: var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,10px)) !important;
  width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,10px)) !important;
}
.swiper-button-next, .swiper-button-prev {
  overflow: hidden !important;
}
/* SWIPER END */


.anwende-flex{
  display: flex;
  column-gap: 10rem;
}
.container-txt {
  margin: 25rem;
}
.anwende-slider {
  margin-top: 9rem;
  width: 100%;
}
.anwende-slider,
.alignnormal,
.alignnormal + div {

  overflow: hidden;
}
.alignnormal{
  width: 100%;
}

.anwende-slider h2{
  margin-bottom: 4rem;
}
.anwende-flex__2 h2{
  margin-bottom: 3rem;
}
.alignnormal{
  max-width: 60%;
  margin-left: 4rem;
  height: auto;
  object-fit: contain;
  float: right;
}
.anwende-flex__1{
  flex: 7;
}
.anwende-flex__2{
  flex: 3;
}
.anwende-video{
  max-width: 70%;
  height: auto;
}
.anwende-video iframe{
  width: 100%;
}
.anwende-video p{
  margin-top: 1rem;
}
.anwende-slider p, .anwende-slider h1, .anwende-slider h2, .anwende-slider ul{
  margin-bottom: 3rem;
}
.anwende-slider h1{
  overflow: hidden;
}
.anwende-flex *{
  margin-bottom: 2rem;
}
.anwende-flex ul, .anwende-flex ul ul{
  margin-left: 3rem;
  margin-top:1rem;
}
.anwende-flex ul li{
  margin-bottom: 1rem;
}
/* termine start */

.termine-title{
  margin-bottom: 10rem;
  margin-top: 10rem;
}
@media only screen and (max-width: 991.98px) {
  .termine-title{
    margin-bottom: 5rem;
    margin-top: 5rem;
  }
  .anwende-flex{
    flex-direction: column;
  }
  .anwende-slider{
    display: grid;
    margin-top: 5rem;
    
  }
  .alignnormal{
    max-width: 100%;
    margin-left: 0rem;
    height: auto;
    float: none;
  }
  #metaslider-id-4774,
#metaslider-id-4774 .flexslider,
#metaslider-id-4774 .flex-viewport,
#metaslider-id-4774 img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
}

/* Let the parent container control scaling */
.alignnormal {
    width: 100%;
    max-width: 100%;
    overflow: hidden; /* ensures nothing can expand outside */
}
  .anwende-slider{
    width: 100%;
  }
}

/* termine end */

.ul_txt_align_left{
  text-align: left;
}




/* testheaderflex */

.header-tabs{
  display: flex;
  flex-direction: column;
  position: sticky;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  left: 0;
  top: 0;
  z-index: 1;
  background-color: black;
  z-index: 99998;
}

.tabsHeader .tab-titles{
  margin-bottom: 0;
}
.tabsHeader{
 display: none;
}


/* form with two buttons start */

.form-toggle-wrapper {
  box-shadow: 0px 0px 30px 17px rgba(82, 82, 82, 0.4);
  display: grid;
  grid-template-rows: min-content min-content;
  grid-template-columns: 1fr 1fr;
  height: max-content;
  padding: 3rem;
  min-height: 830px;
  column-gap: 5rem;
}

.left-text {
  padding-top: 3rem;
  grid-row: 2;
  grid-column: 1;
}

.right-forms {
  position: relative;
  grid-row: 2;
  grid-column: 2;
  padding-top: 3.5rem;
}

.form-panel {
  display: none;
}

.form-panel.active {
  display: block;
}

.top-buttons {
  margin-bottom: 20px;
  grid-row: 1;
  grid-column: 1;
  display: flex;
  height: min-content;
}

.top-buttons button {
  padding: 12px 20px;
  margin-right: 10px;
  border: none;
  color: white;
  background: gray;
  cursor: pointer;
  font-size: 18px;
  border-radius: 3px;
}

.top-buttons button.active {
  background: darkred;
}


@media only screen and (max-width: 991.98px) {
  .form-toggle-wrapper {
    grid-template-columns: 1fr;
  }
  .right-forms {
    grid-column: 1;
    grid-row: 3;
  }

}
/* forms with two buttons end */