/* ===========================
   MEDIA QUERY: ≤1350px
=========================== */
@media only screen and (max-width: 1350px) {


  .infobild {
    margin-top: 0;
    width: 25rem;
  }



  .wertemarquee {
    margin-top: -3rem;
  }
  .wert-detail-content {
    width: 80%;
  }
.infohead {
  padding-left: 3rem;
  padding-right: 2rem;
}

.infofoot, .sub_foot {
  padding-left: 4.5rem;

}

.rowfooter .typogross {
  font-size: 1.7rem;
}

.newsticker.active {
  width: 75%;
  /* margin-left: 12.5%; */

}

.griddrei {
  grid-template-columns: 1fr  1fr ;}


.aboutbild {
    margin-top: 0;
    width: 36rem;
    height: 60svh;
  }


  #karte-stadtrand {
    grid-column: span 2;}

.formular-box {
    width: 100%;}
  /* Text display switching */


  .full {
    display: none;
  }

  .medium {
    display: inline;
  }

  .short {
    display: inline;
    justify-self: end;

  }



}

/* ===========================
   MEDIA QUERY: ≤1000px
=========================== */
@media only screen and (max-width: 1000px) {

#onepager {
    scroll-snap-type:none;
   

}


  .container {
    width: 100%;
    padding: 4rem 3rem;

  }

  .infofoot, .sub_foot {   padding: 0.25rem 3rem;}

  .infobild {
    margin-top: 0;
    width: 20rem;
    height: 60svh;
  }


   .infohead {
    /* padding: 0.7rem 3rem; */

  }



.logogross {
  width: 90%;
  margin-top: 2rem;


}
  .infohead .typogrossweiss {
    font-size: 1.6rem;
  }



.background_img {
  margin-left: -3rem;
  margin-right: -3rem;
          width: 110%;
          height: 100svh;

}





  .wertemarquee {
    margin-top: -1rem;
  }

  .wert-detail-content {
    width: 90%;
  }
  .news-content {
    flex-direction: column;
  }


  /* Shop section */
  .shopsection {
 
    padding: 4rem 0;
    display: grid;
    grid-template-areas: "a a a";
    grid-auto-columns: 30%;
    justify-content: space-between;
  }


/*   .merch-detail-content {
    display: flex;
    flex-direction: column;
  } */
  .merch-detail {
    width: 90%;
    left: 5%;
    height: 86%;
    top: 9svh;
  }

.wert-detail-content .bild {
  width: 60%;
}

.newsticker.active {
  width: 80%;
/* 
  margin-left: 10%; */
}


.rowfooter .typogross {
  font-size: 1.2rem;
}

  .sectioninfo {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .infobild, .aboutbild {
    grid-column: 1;
    grid-row: 2; /* icon moves below description */
       margin-left: 0;
    margin-top: 0;
    width: 100%;
    height: 45svh;
    margin: 0 auto;
  }

  .kundensection {
    margin-top: 4svh;
  }

  .footer-content-singel.active {
    padding: 0rem;
  }
  .newsticker .typogross h3 {
  font-size: 4rem;
}

  .news-title-button {
    width: 45%;
    
  }
  .news-marquee-track {

  animation: news-marquee 10s linear infinite; 
  animation-play-state: running;
}


.news-marquee-group .margin-left-super-big {
  margin-left: 4rem;
}


}

/* ===========================
   MEDIA QUERY: ≤860px
=========================== */
@media only screen and (max-width: 860px) {

  html {
    font-size: 16px;
  }

  .full {
    display: none;
  }

  .short {
    display: inline;
  }


 
  .sectioninfo {
    width: 100%;
  }

/*   .infohead {
    padding: 0.7rem 2rem;
    padding-left: 3rem;
  } */
  .news-title-button {
    width: 60%;
     flex-shrink: 0;
  }



 .newsticker.active {
  width: 84%;
  /* margin-left: 8%; */

  height: fit-content;
}
 .newsticker.active .row{
flex-direction: column;
}

 .newsticker.active .icon{
width: 100%;
}
.gridhalb {
 grid-template-columns: 100%;
}

  h1 {
    font-size: 6rem;
    line-height: 5rem;
  }


.infofoot, .sub_foot {
padding: 0 1rem;
 font-size: 1.25rem;
}


  .giff {
    width: 10rem;
    align-self: flex-end;
  }

 .griddrei {
  display: flex;
flex-direction: column;}
.griddrei.gap {
  gap: 0.5rem }

  .tarif-box, .extra-box {
    width: 30rem;
  }
 
  .tarif-box, .extra-box {

    min-height: max-content;
  }



#karte-stadtrand{
    width: 100%;
  }

  #karte-stadtrand .gridzwei {
   grid-template-columns: 1fr;
  }
 
.kunden-form .gridzwei, .kunden-form .grid-zwei-eins {
   grid-template-columns: 1fr;
  }


.kunden-form .hausnr {
   grid-template-columns: 2fr 1fr  !important;
  }
.margin-left-big, .margin-left-big .link_button {
  margin-left: 0;
}

}

/* ===========================
   MEDIA QUERY: ≤600px
=========================== */
@media only screen and (max-width: 600px) {

  html {
    font-size: 14px;
  }

.onepager-section {
        min-height: unset;
  }

  #home {
     min-height: 100svh;
  }
  /* Layout containers */
  .container {

    padding: 3rem 2rem;

  }



  #stadtfahrten,  #overnights, #lager, #kontakt {
    scroll-margin: 4svh;
  }
    .infohead {
    padding: 0.2rem 2rem;
    padding-left: 3rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
.medium {display: none;
justify-self: end;}

  .background_img {



}
  #hometext { 

           width: 90%;
     
  }
  .sectioninfo {
    width: 100%;
    flex-direction: column;
  }
.cookie {

 width: 100%;
bottom: 0;
font-size: 0.7rem;
  padding: 0.5rem 3rem 0.5rem 3rem;
}

  #keinplatzfuerzeit {
    display: none;
  }
  .infobild, .aboutbild {
    margin-left: 0;
    margin-top: 0;
    width: 100%;
    height: 35svh;

  }

  .zeiten-deatils.active {
    width: 90%;
  }

  .zeiten-deatils.active .gridzwei {
 grid-template-columns: 1fr;}

    .tarif-box, .extra-box {
    width: 100%;

  }


  .preis-table {
    max-width: 100%;
 
  }
.wert-detail-content .bild {
  width: 100%;
}


.werte-box {
  min-height: initial;
}

  .wertemarquee {
    margin-top: 0;
  }

  .bannertitel {
    padding: 2rem 4rem;
  }

  /* News section */
  .fahrwerknews-item {
    width: 100%;
  }



  .news-title-button {
    width: 60%;
     flex-shrink: 0;
  }


  /* Shop section */
  .shopsection {
    width: 100%;
    box-sizing: border-box;
    padding: 1rem 0;
    display: grid;
    grid-template-areas: "a a";
    gap: 2%;
    grid-auto-columns: 48%;
    justify-content: space-between;
  }

  .merch-detail, .news-detail {
    width: 90%;
    left: 5%;
    height: 86%;
    top: 9svh;
  }

  .merch-detail-content {
    flex-direction: column;
  }


 .merch-detail-content {
    display: flex;
    flex-direction: column;
  }

  h1 {
    font-size: 5rem;
    line-height: 4rem;
  }



   .newsticker.active {
top: 10svh;
        flex-direction: column;

}
  .giff {
   width: 100%;
        height: 18rem;
  }


.kunden-form .hausnr, .kunden-form .grid-eins-zwei{
   grid-template-columns:  1fr !important;
  }

  h1, h3 {
    overflow-wrap: break-word;
  }
.subpage {
  margin-top: 3rem;
}
.map-box {
  flex-direction: column;
}
.zone-selector {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: scroll;
    width: 100%;
    gap: 1rem;
    width: 100%;
    align-self: flex-start;


}
.infofoot.active, .sub_foot.active {
    padding: 1rem 2rem;}
.infofoot.active .rowfooter {
  display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    gap: 0.5rem;
}


.shorter {
  display: inline-block;
}


.logo_head_normal.active, .logo_sub_head {
  display: none;
  opacity: 0;
}


.success-giff {
    height: 30rem;
    width: auto;
    margin-top: 4rem;
}

}


/* ===========================
   MEDIA QUERY: ≤460px
=========================== */
@media only screen and (max-width: 460px) {

.subpage {
  padding-bottom: 10rem;
}


.subpage h3 {
  font-size: 3rem;
  line-height: 2.5rem;
}

.infofoot, .sub_foot {

  height: 6.5rem;
}

.logogross {
  display: none;
}

#hometext-wrapper {
  justify-content: space-between;
  padding-top: 2rem;
  height: 84svh;
  width: 100%;
}


  .link_button_green_home {
    top: 15svh !important;

  }

#hometext-wrapper .typogrossweiss {
  font-size: 2.2rem;
}

    #hometext {
        width: 100%;
    }
 .home-long {
  display: none!important;
}


.home-short {
  display: flex!important;

} 


  #bestellen-button {
    right: 1rem;
  }

.bestellen-panel {
    width: 90%;
    height: 48svh;
display: flex;
align-self: center;
   min-height: fit-content;
  }


  #bestellen-button.move-up{
  bottom: 7.1rem;
}
 #backToTopBtn.move-up {
  bottom: 6.8rem;

}
 .newsticker.active {
  width: 90%;
  /* margin-left: 5%; */
  height: 80svh;
  margin-top: 5svh;
  max-height: 90svh;
  height: fit-content;
}
  .newsticker .typogross h3 {
    font-size: 2rem;
  }

    .newsticker .typogross {
      font-size: 1.2rem;
    }
    .newsticker .margin-top-small {
      margin-top: 0.5rem;
    }

.giff {
  height: 14rem;
}

.background_img {
  margin-left: -2rem;
  margin-right: -2rem;

}


.tarif-box, .extra-box {
    width: 100%;
  
}


.logogross {
    margin-top: 0rem;
    width: 20rem;}

.short {
  display: none;
}





.kundensection {
  margin-bottom: 8rem;}


.margin-left-big .link_button_green {
  margin-left: 0rem;
 }

 .infofoot.active, .sub_foot.active {
    padding: 1rem 1rem;}

.rowfooter{
  display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    gap: 0.5rem;
}


  .news-title-button {
    width: 80%;

  }


  .preis-table td:last-child {

   padding-left: 0.2rem;
 
}

.preis-table thead th:last-child  {

 padding-left: 0.2rem;
}



.news-marquee-group .margin-left-super-big {
  margin-left: 2rem;
}

    .link_button_green_home {
}


.success-giff {
    height: 24rem;
    width: auto;
    margin-top: 4rem;
    align-self: flex-start;
}


}




/* ===========================
   MEDIA QUERY: only touchscreens
=========================== */



@media (hover: none) and (pointer: coarse) {

  /* Keine Hover-Transformationen */
  *,
  *::before,
  *::after {
    /* verhindert keine normalen CSS-Transitions,
       sondern nur die unten überschriebenen Effekte */
 

  /* Buttons / Links */
  .link_button:hover,
  .link_button_green:hover,
  .link_button_green_home:hover,
  .links:hover,
  .links-dark:hover,
  .links-green:hover,
  a.links-green:hover,
  .footer-btn:hover,
  .link-footer-btn:hover,
  .datei-upload-btn:hover,
  .submit-btn:hover {
    transform: none;


  }

  /* News */
  .news-title-button:hover .fahrwerknews-image {
    filter: none;
    opacity: 1;
  }

  .news-title-button:hover #news-note {
    visibility: hidden;
    opacity: 0;
  }

  .news-title-button:hover h2 {

    transform: none;
  }

  .news-title-button:hover .white {
    color: white;

  }

  /* Merch */
  .merch:hover .merchbild,
  .merch:hover .merchbild img {
    transform: none;
  }

  /* Werte */
  .werte-box:hover h4 {
    transform: none;
    margin-left: 0;
    letter-spacing: inherit;
  }

  /* Navigation */
  .nav-single:hover .typogross {
    background-color: white;
    transform: none;
    padding-left: 0;
    padding-right: 0;

  }

  /* Sonstige Hover-Buttons */
  .close-button-info:hover,
  .close-button-footer:hover,
  .newstickerclosebtn:hover,
  .zeiten-close-btn:hover,
  .close-button-dark:hover,
  #bestellen-button:hover {

    transform: none;
  }

  #zoneeins:hover,
  #zonezwei:hover {
    transform: none;
  }

  .wert-btn:hover {
    transform: none;
  
  }

  .hover-italic:hover {
    transform: none;
  }

  .hover-green:hover {
 
  }

  /* Marquee nicht mehr durch Touch "hover" pausieren */
  .marquee-content:hover {
    animation-play-state: running;
  }

  .news-marquee:hover .news-marquee-track {
    animation-play-state: paused;
  }

  /* Cursor ist auf Touch irrelevant */
  a,
  button,
  .menu,
  .merch,
  .links,
  .link_button,
  .link_button_green,
  .link_button_green_home {
    cursor: auto;
  }}
}