@import 'fonts.css';
@import 'variables.css';




html {

    font-size: 18px;
    letter-spacing: 0.04rem;
    line-height: 1.25rem;
    font-family: "ClashGrotesk-Variable";
    color: var(--black);
    hyphens: auto;
    width: 100%;
    box-sizing: border-box;
  

}


body {
  box-sizing: border-box;
  width: 100%;
  min-width: 100%;
}
#onepager {
    scroll-behavior: smooth;

    /* scroll-snap-type: y mandatory;  */
    height: 100svh;
    overflow-y: scroll;
    overflow-x: hidden;
    width: 100%;

}


a, a:link, a:visited {
  cursor: pointer;
}



.onepager-section {
  width: 100%;
  min-height: 100svh;
  box-sizing: border-box;
  position: relative;
  scroll-snap-align: start;
  height: auto;
  position: relative;

}




/*container fuer sections*/
.container {
  width: 100%;
  margin: 0;
  padding: 6rem 4rem;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
}

.scroll-margin {
  scroll-margin: 3svh;
}



/* BASICS !!!*/
.column {
  display: flex;
  flex-direction: column;

}
.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.column-scroll {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;       
  scroll-snap-type: y mandatory; 
  height: 85svh; 
  width: 100%;       
  row-gap: 0.5rem;              
}

.column-wrapper{
  display: flex;
  flex-direction: column;
  width: 100%;       
  row-gap: 0.5rem;              
}





.row-scroll {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: scroll;
  gap: 2rem;
}

.gridzwei {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-self: flex-start;
  width: 100%;
  max-width: 100%;
}

.griddrei {
  display: grid;
  grid-template-columns: 1fr  1fr 1fr;
  align-self: flex-start;
  width: 100%;
  max-width: 100%;
}


.gridhalb {
  display: grid;
  grid-template-columns: 45% 55%;
  align-self: flex-start;
  width: 100%;
  max-width: 100%;
}


.grid-eins-zwei {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-self: flex-start;
  width: 100%;
}

.grid-zwei-eins {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-self: flex-start;
  width: 100%;
}

.rowklein {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}

.rowmittel {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

.baseline {
  align-items: baseline;
}
.zweidrittel {
  max-width: 66%;
}
.rowfooter {
  display: grid;
  grid-template-columns: repeat(2, min-content) 1fr repeat(2, min-content);
  gap: 1.2rem;
  width: 100%;
  align-self:center;
}

.margin-top {
  margin-top: 5svh;
}

.margin-top-small {
  margin-top: 1.5svh;
}

.margin-top-big {
  margin-top: 10svh;
}

.margin-bottom {
  margin-bottom: 2svh;
}

.margin-left-big { 
  margin-left: 4rem;}


.margin-left {
  margin-left: 1vw;}

.margin-left-super-big {
  margin-left: 10rem;
}

.gap {
  gap: 2rem
}

.short {
  display: none;
}

.full {
  justify-self: flex-end;
}

.medium {
  justify-self: flex-end;
  display: none;
}
.shorter{
  display: none;
}

.max-width-fuenf {
max-width: 50%;
}



/* Bilder und Icons*/

.logogross {
  margin-top: -2rem;
  width: 38rem;
  display: flex;
  align-self: center;
  position: absolute;
}


.logo_head {
  width: 8rem;
  align-self: flex-end;
}

.logo_head_normal {
  width: 8rem;
  align-self: center;
  justify-self: center;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.2s ease;
  pointer-events: none;
}

.logo_head_normal.active {
  opacity: 1;
  pointer-events: auto;
}

.logo_sub_head {
  width: 8rem;
  align-self: center;
  justify-self: center;
}

.bild {
  height: 60svh;
  object-fit: cover;
}

.bildw {
  width: 40rem;
  object-fit: cover;
}

.icon {
  height: 20svh;
  width: 15rem;
  object-fit: cover;
}

.giff {
  height: 90%;
  width: 15rem;
  object-fit: cover;
}

.success-giff {
  height: 90%;
  width: 15rem;
  object-fit: cover;
  align-self: center;
}

/* nav und menu*/


.infohead {
  width: 100%;
  font-size: 2rem;
  padding: 0rem 2rem 0rem 4rem;
  box-sizing: border-box;
  display: inline-flex;
  position: fixed;
  top: 0;
  z-index: 1100;
  background-color: var(--color-primary);
  color: white;
  align-items: center;
  display: grid;
  grid-template-columns: auto auto auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: var(--headheight);
}

.infohead a {
  justify-self: center;
}

.infofoot {
  width: 100%;
  font-size: 1.5rem;
  padding: 0rem 4rem;
  bottom: 0;
  box-sizing: border-box;
  background-color: white;
  border-top: solid 0.09rem black;
  display:flex;
  position: fixed;
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);   /* hidden below viewport */
  height: 2.8rem;
  transition: 
    height 0.25s ease;
  z-index: 88;
  align-content: space-between;
}

.sub_foot {
  width: 100%;
  font-size: 1.5rem;
  padding: 0rem 4rem;
  bottom: 0;
  box-sizing: border-box;
  background-color: white;
  border-top: solid 0.09rem black;
  display:flex;
  position: fixed;
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);   /* hidden below viewport */
  height: 2.8rem;
  transition: 
    height 0.25s ease;
  align-content: space-between;
  z-index: 90;
}



.infofoot.visible,  .sub_foot.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);   
}

.infofoot.active, .sub_foot.active {
  height: calc(100svh - var(--headheight));
  align-items: start;
  overflow-y: scroll;
  flex-direction: column;
  padding: 1rem 4rem;
  z-index: 90;
 }


.footer-content-singel {
  display: none;
  width: 100%;
  box-sizing: border-box;
  padding: 0 4rem;
  flex-direction: row;
}

.footer-content-singel.active {
  margin-top: 2rem;
  display: flex;
  box-sizing: border-box;
  padding: 0 4rem;
  flex-direction: row;
  justify-content: space-between;
}

.footer-btn, .link-footer-btn {
  transition: all 0.3s ease;  
  text-wrap: nowrap;
}

 
.footer-btn.active {
  transform: skew(-20deg);
  color: var(--color-primary);
  font-weight: 700;
}




.menuicon {
  margin-top: 0.2rem;
cursor: pointer;
}

.menu {
  position: absolute;
  top: 0;
  left: 1%;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.2s ease; }


/* Open state */
.menu.active {
  width: 18rem;
  min-width: max-content;

}


/* Nav list hidden by default */
.nav-title {
  width: 100%;
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  margin-top: 1rem;
  box-sizing: border-box;
  background-color: white;
}

/* Show links when active */
.menu.active .nav-title {
  display: flex;
}


.nav-title li,
.nav-title a {
  cursor: pointer;
}



.language-switcher ul {
  list-style: none;
  display: flex;
  gap: 0.5rem;
  margin-top: 1vh;
  cursor: pointer;
  color: black;
  font-size: 1.2rem;
}

.language-switcher a:hover {
  color: var(--color-primary);
}


.language-switcher a.active {
  font-weight: bold;
  cursor: pointer;
  color: var(--color-primary);
}

.hoch{ height: 100svh;}

/* Startseite */

/* #hometext {
  text-align: center;
  line-height: 1.08em;
  text-wrap: balance;
  color: var(--color-primary);
  background-color: white;
  align-self: center;
  width: 100%;
  text-wrap: balance;
  padding: 1rem 8rem;
  box-sizing: border-box;
  display: flex;
  position: absolute;
  bottom: 2.2rem;
} */
#hometext-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
    margin-top: auto;
    height: 78svh;

   box-sizing: border-box;
} 


#hometext {
  line-height: 1.08em;
  text-wrap: balance;
  background-color: none;
  color: white;

  width: 40rem;
  text-wrap: balance;

  box-sizing: border-box;
  display: flex;
 

  font-size: 1.2rem;

  gap: 1rem;


} 

.home-short {
  display: none!important;
  line-height: 1.08em;
  background-color: none;
  color: white!important;
  font-weight: 800;
   box-sizing: border-box;
  display: flex;
  font-size: 2rem;
  width: 100%;

}


.background_img {
  width: 100%;
  margin-left: -4rem;
  margin-right: -4rem;
  margin-top: -3rem;
  height: 97svh;
  z-index: -1;
  position: absolute;
  object-fit: cover;
}

.homelogocontainer {
  display: flex;
  justify-self: center;

}




/*bestell-button*/
.bestellen-button {
  position: fixed;
  font-size: 2rem;
  padding: 0.5rem 0.75rem;
  box-sizing: border-box;
  bottom: 0.8rem;
  right: 1.5rem;
  z-index: 89;
  background-color: var(--color-green);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  }

 .bestellen-button:hover {
  transform: skew(-20deg);
    }

#bestellen-button {
  transition: all 0.4s cubic-bezier(.77,0,.175,1);
  cursor: pointer;
}

#bestellen-button.move-up{
    bottom: 3.2rem;

}


.bestellen-panel {
  position: fixed;
  bottom: 4.2rem;
  right: 1.5rem;
  /* width: 28rem; */
  height: 48svh;
  box-sizing: border-box;
  padding: 1rem;
  background-color: var(--color-grey-box);
  overflow: hidden;
  transform: scale(0.1) ;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 10;
  will-change: transform, opacity;
  transition:
    transform 0.4s cubic-bezier(.77,0,.175,1),
    opacity 0.25s ease,
    visibility 0s linear 0.25s;
}

.bestellen-panel.expanded {
  transform: scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  display: flex;
  transition:
    transform 0.4s cubic-bezier(.77,0,.175,1),
    opacity 0.25s ease,
    visibility 0s;
}


.bestellen-content {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease;
  gap: 1rem;
  display: flex;
  flex-direction: column;
}

.bestellen-content.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}



/*bestell-button ENDE*/



/*layout einzeln*/


.sectioninfo {
  display: grid;
  grid-template-columns: 1fr auto; 
  grid-template-rows: auto auto;  
  gap: 2rem;
}


.infotext {
  grid-column: 1;
  grid-row: 1;
}


.infobild {
  grid-column: 2;
  grid-row: 1 / span 2; /* span two rows */
  height: auto;
  object-fit: cover;
  align-self: start;   
  width: 34rem;
  height: 90svh;
    margin-top: -16svh;
    object-fit: cover;
    margin-right: -4rem;

}

.aboutbild{

    width: 40rem;
    height: 60svh;
    margin-top: -16svh;
    object-fit: cover;}



#stadtfahrten-preise, #stadtfahrten-extras, #overnights-n-preise,  #overnights-i-preise, #lager-preise, #about-jobs {
  scroll-margin-top: 10svh;
}

#about-werte{
  scroll-margin-top: 10svh;
}


summary:hover {
  cursor: pointer;
}




    /* Toggle and Close Buttons */
/* .close-button {
  display: flex;
  position: absolute;
  top: 5rem;
  left: 2rem;
  cursor: pointer;
  color: var(--color-primary);
  padding: 0.15rem 0.45rem;;
  box-sizing: border-box;
  align-items: center;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.2s ease; 
  border: 0.17rem solid var(--color-primary);
  max-height: max-content;
  max-width: max-content;

  } */

.close-button-green {
     align-self: flex-start;
    }


   .close-button-info, .close-button-footer {
      display: flex;
      position: absolute;
      top: 1rem;
      right: 1rem;
      cursor: pointer;
      color: var(--color-primary);
      padding: 0.15rem 0.45rem;;
      box-sizing: border-box;
      align-items: center;
      font-size: 1rem;
      font-weight: 600;
      transition: all 0.2s ease; 
      border: 0.17rem solid var(--color-primary);
      max-height: max-content;
      max-width: max-content;

    }

  .close-button-info:hover, .close-button-footer:hover, .newstickerclosebtn:hover {

      background-color: var(--color-primary);
      color: white;
      cursor: pointer;
      transform: skew(-20deg);
    }

/* .close-button-green {
      display: flex;
       position: absolute;
        top: 5rem;
      left: 2rem;
      cursor: pointer;
      color: var(--color-green);
      padding:0.15rem 0.45rem;
      box-sizing: border-box;
      align-items: center;
      font-size: 1rem;
     font-weight: 600;
      transition: all 0.2s ease; 
      border: 0.17rem solid var(--color-green);
      max-height: max-content;
      max-width: max-content;
    }

    .close-button-green:hover {

      background-color: var(--color-green);
      color: white;
      cursor: pointer;
      transform: skew(-20deg);
    }
 */


.newstickerclosebtn,  .zeiten-close-btn  {
      display: flex;
      position: absolute;
      top: 1rem;
      right: 1rem;
      cursor: pointer;
      color: white;
      padding:0.15rem 0.45rem;
      box-sizing: border-box;
      align-items: center;
      font-size: 1rem;
      font-weight: 600;
      transition: all 0.2s ease; 
      border: 0.17rem solid white;
      max-height: max-content;
      max-width: max-content;
      z-index: 10;
    }


.newstickerclosebtn:hover, .zeiten-close-btn:hover{

      background-color: white;
       color: var(--color-lila-dark);
      cursor: pointer;
      transform: skew(-20deg);
      font-weight: bold ;
    }

.close-button-dark , .zeiten-close-btn  {
      display: flex;
      position: absolute;
      top: 1rem;
      right: 1rem;
      cursor: pointer;
      color: var(--color-lila-dark);
      padding:0.15rem 0.45rem;
      box-sizing: border-box;
      align-items: center;
      font-size: 1rem;
      transition: all 0.2s ease; 
      border: 0.17rem solid var(--color-lila-dark);
      max-height: max-content;
      max-width: max-content;
    }

.close-button-dark:hover, .zeiten-close-btn:hover{

      background-color: var(--color-lila-dark);
       color: white;
      cursor: pointer;
      transform: skew(-20deg);
      font-weight: bold ;
    }



  /* plan to remove , replace linke button*/
/*     .toggle-button {
      max-width: max-content;
      padding-left: 0.5rem;
      padding-right: 1rem;
      box-sizing: border-box;
      transition: all 0.2s ease;  
      background-color: var(--color-primary);
      margin-left: 1rem;
      cursor: pointer;
          white-space: nowrap;

    
    }
    .toggle-button:hover {
    padding-left: 1vw;
    box-sizing: border-box;
    letter-spacing: 0.1rem;
    transform: skew(-20deg);
  } */
  /* plan to remove */

  .link_button{
    max-width: max-content;
    padding-left: 0.5rem;
    padding-right: 1rem;
    box-sizing: border-box;
    transition: all 0.2s ease;  
    background-color: var(--color-primary);
    margin-left: 1rem;
    cursor: pointer;
    white-space: nowrap;
    height: max-content;
    display: flex;
  }




  .link_button_green {
    max-width: max-content;
    padding-left: 0.5rem;
    padding-right: 1rem;
    box-sizing: border-box;
    transition: all 0.2s ease;  
    background-color: var(--color-green);
    margin-left: 1rem;
    cursor: pointer;
    white-space: nowrap;
    height: max-content;
    display: flex;
  }


    .link_button_green_home {

    padding-left: 0.5rem;
    padding-right: 1rem;
    box-sizing: border-box;
    transition: all 0.2s ease;  
    background-color: var(--color-green);
    cursor: pointer;
    /* white-space: wrap; */
    height: max-content;
    display: flex;
    width: max-content;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
  
  }

.link_button:hover, .link_button_green:hover,  .link_button_green_home:hover {
    padding-left: 1vw;
    box-sizing: border-box;
    letter-spacing: 0.1rem;
    transform: skew(-20deg);
  }



  #buttonneukund{
    margin-left: 0rem;
  }


/* TARIFE */

  .tarif-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    box-sizing: border-box;
    background-color: var(--color-grey-box);
    min-height: 25rem;
    }


.tarif-maße  {
  min-height: 8svh;
  }
 

  .map-box {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    box-sizing: border-box;
    background-color: var(--color-grey-box);
    min-height: 25rem;
    gap: 1rem;
    }


  .preisesection {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    grid-column: 1;
    grid-row: 2;
  }




/* extras*/


.extrasection {
  margin-top: 2svh;
  margin-left: 5rem;
  display: flex;
  flex-direction: column;
  }


.extra-box {
  display: grid;
  grid-template-rows: 2rem max-content auto;
  align-items: baseline;
  background-color: #f7f7f7;
  padding: 1rem;
  margin-top: 2rem;
  box-sizing: border-box;
  min-height: 46svh;
}

.extra-box-preis {
  align-self: end;
}

.extra-box-detail {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem; 
  width: 100%;
}

.preis-table {
  border-collapse: separate;
  border-spacing: 0 0.5rem;
  width: 100%;
  max-width: 28em;
}

.preis-table tr {
  background-color: white;
  }

.preis-table td {
  padding: 0.8rem 0rem;;
  text-align: left;
  vertical-align: bottom;
}


.preis-table td:first-child {
  padding-left: 0.8rem;
  padding-right: 0.25rem;
  width: 47.5%;
}

.preis-table td:last-child {
  padding-right: 0.8rem;
  padding-left: 0.8rem;
}

.preis-table td:nth-child(2) {
  padding-right: 0.8rem;
  padding-left: 0rem;
}


.preis-table thead tr {
  background-color: var(--color-grey-box);
}

.preis-table thead th:last-child  {
  padding-right: 0.8rem;
  padding-left: 0.8rem;
}

.table-spacer td {
  padding: 0.4rem 0rem;
  background-color: var(--color-grey-box);
}


.preis-text-box {
  box-sizing: border-box;
  padding: 0.8rem;
  background-color: white;
}

/* 
.aboutdetail {
  margin-top: -6svh;
  height: 100svh;
  width: 40%;
  box-sizing: border-box;
  padding-top: 4svh;
  padding-left: 2rem;
}
 */





 .wert-btn {
  display: inline-block;
  border: none;
  position: relative;
  transition: all 0.2s ease; 
  margin-right: 8rem;
  font-weight: bold;
  height: 6rem;
  align-content: center;
}

.wert-btn:hover {
   transform: skew(-20deg);
   letter-spacing: 0.1rem;
  }
 

.wertemarquee {
  width: calc(100% + 8rem);
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  background-color: var(--color-green);
  color: white;
  font-size: 5rem;
  margin-top: -3rem; 
  margin-left: -4rem; 
  margin-right: 4rem;
}

.marquee-content {
  display: inline-flex;
  animation: marquee 20s linear infinite;
  height: 100%;
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }

}

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


.werte-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
  box-sizing: border-box;
  background-color: var(--color-primary);
  min-height: 25rem;
  transition: all 0.3s;
  transition-timing-function: cubic-bezier(.77, 0, .175, 1);
}





.werte-box {
  --color-progress: 0;
  transition: background-color 0.5s cubic-bezier(.77, 0, .175, 1);

 

  background-color: color-mix(
    in srgb,
    var(--color-primary) calc((1 - var(--color-progress)) * 100%),
    var(--color-green) calc(var(--color-progress) * 100%)
  );}




.zeiten-marquee {
  position: fixed;
  white-space: nowrap;
  background-color: var(--color-lila-dark);
  box-sizing: border-box;
  width: calc(100% + 8rem);
  overflow: hidden;
  position: absolute;
  top: var(--headheight);
  margin-left: -4rem; 
  margin-right: 4rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  z-index: 30;
  display: flex;

}

.zeiten-marquee-content {
  display: inline-flex;
  animation: marquee 20s linear infinite;
  gap: 8rem;
  align-items: center;
  text-wrap: nowrap;
  cursor: pointer;
}

.zeiten-marquee-content.paused {
  animation-play-state: paused;
}


.zeiten-marquee.active  .zeiten-marquee-content{
max-width: 95%;
}


.zeiten-deatils {
  display: none;
  box-sizing: border-box;
  padding: 0;
  justify-self: center;
  align-self: center;
  background-color: var(--color-grey-box);
  transition: all cubic-bezier(1, 0, 0, 5) ease;

  margin-inline: auto;

}

.zeiten-deatils.active {
  display: flex;
  position: absolute;
  z-index: 33;
  padding: 2rem 2rem;
    margin-top: 10rem;
}
.zeiten-marquee-content:hover .typogrossweiss {
 transform: skew(-20deg);

}




/* shopsection*/


.shopsection {
  width: 100%;
  box-sizing: border-box;
  padding: 4rem 4rem;
  display: grid;
  grid-template-areas: "a a a a";
  grid-auto-columns: 22%;
  justify-content: space-between;
}

.merch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;

}

.merchbild {
  width: 100%;
  aspect-ratio: 6 / 9;
  object-fit: cover;
  transition: all 0.3s;
	transition-timing-function: cubic-bezier(.77, 0, .175, 1);

}

.merch:hover .merchbild{
  transform: skew(-5deg);
}

.merch:hover .merchbild img {
  transform: skew(-5deg);
}

.merch {
  cursor: pointer;
}

.merchbild-flow {
  scroll-snap-align: start; 
  flex-shrink: 0;        
}

.merchbild-flow img {
  width: 100%;
  height: auto;
  display: block;
}






.merchbild-detail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0; 
}



/* 
  .merch-detail-content {
    position: relative;
    display: grid;
    justify-content: space-between;
    flex-direction: a a;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;

    min-height: max-content;
  }
 */

/* .merch-detail{
  display: none;
  position: fixed;
  align-self: center;
  background: var(--color-grey-box);
  padding: 2rem;
  box-sizing: border-box;
  z-index: 1000;
  top: 15svh; 
  left: 15%;
  width: 70%; 
  height: 70svh;
  overflow-y: scroll;
    
  }

.merch-detail.inactive {
    display: none;

}

.merch-detail.active {
  display: flex;
  flex-direction: row;
} */


/* NEWS */



.news-marquee {
  overflow: hidden;
  width: 100%;
  background: var(--color-green);
  padding: 1rem;
  box-sizing: border-box;
}

.news-marquee-track {
  display: flex;
  width: max-content;
  animation: news-marquee 15s linear infinite; 
  animation-play-state: paused; 
}
.news-marquee:hover .news-marquee-track {
  animation-play-state: running; 
}

.news-marquee-group {
  display: flex;
  white-space: nowrap;
}

.news-marquee-group h3 {
  white-space: nowrap;
  margin-right: 4rem;
}

@keyframes news-marquee {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}


.fahrwerknews-banner {
  position: relative;
  width: calc(100% + 8rem);
  height: 80svh;
  overflow: hidden;
  margin-left: calc(-4rem);
  box-sizing: border-box;
}


.fahrwerknews-scroll-container {
  display: flex;
  height: calc(100% - var(--bannertitel));
  overflow-x: auto;
  scroll-behavior: smooth;
  box-sizing: content-box;
  scrollbar-width: none; 
}
.fahrwerknews-scroll-container::-webkit-scrollbar {
  display: none;
}


.fahrwerknews-image {
  height: 100%;
  width: 100%;         
  object-fit: cover;
  position: relative;
  z-index: 0;
  opacity: 1;
  transition: all cubic-bezier(0.5, 0, 0.5, 1) 0.25s;
}


.news-title-button {
  width: 40%;       
  height: 100%;
  max-height: 100%;
  position: relative;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  user-select: none;
  align-items: center;
  justify-content: center;
  transition: all cubic-bezier(0.5, 0, 0.5, 1) 0.25s;
  flex-shrink: 0;
}


.news-title-button:hover .fahrwerknews-image {
  filter: blur(0.5rem);
  opacity: 0.25;

}


.news-typo {
  display: flex;
  width: 86%;
  position: absolute;
  text-align: center;
  transition: all cubic-bezier(0.5, 0, 0.5, 1) 0.25s;
}


#news-note{
  visibility: hidden;
  opacity: 0;
  align-self: center;
}

.news-title-button:hover #news-note {
  display: block;
  visibility: visible;
  opacity: 1;
}


.news-detail.active {
  display: flex;
}



.bannertitel {
  font-size: 5rem;
  color: white;
  font-family: "ClashGrotesk-Bold";
  padding: 0rem 2rem;
  width: 100%;
  display: flex;
  align-items: center;
  background-color:  var(--color-lila-dark);
  border-bottom: solid black;
  box-sizing: border-box;
  height: var(--bannertitel);
}


/*Kunden section*/

.kundensection {
  margin-top: 8vh;

}

.kunde {
  align-content: center;}

.kundenlogo {
  width: 8rem;
  max-height: 6.5rem;
  object-fit: contain;
}






/* Neukundinnen Formular*/

/* roboter no - contact form */
.honeypot {
    position: absolute;
    left: -9999px;
}


.formular-box {
  display: flex;
  justify-content: space-between;
  width: 90%;
  background-color: var(--color-grey-box);
  padding: 1rem;
  margin-top: 2rem;
  box-sizing: border-box;

}

.field {
   /* text-wrap: nowrap; */
   width: 100%;
   display: inline-flex;
   align-items: baseline;
   gap: 0.5rem;
}


label {
  text-wrap: nowrap;}


.kunde-typ {
  display: flex;
  flex-direction: row;
  gap: 1rem;

}

input {
  width: 100%;
  height: 1.5rem;
  box-sizing: border-box;
  padding: 0rem 0.4rem;
  -webkit-text-fill-color: inherit;

}


.input-radio {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  margin-right: 0.3rem;
  margin-bottom: -0.2rem;
  border: 1px solid black;
  border-radius: 50%;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
}

.input-radio::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.2s ease-in-out;
  background-color:var(--color-green)
}

.input-radio:checked::before {
  transform: scale(1);
}

.label-wrap {
   text-wrap: wrap;}


#dokument_upload {
  display: none;
}

.upload {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}


 .datei-upload-btn  {
  display: flex;
  cursor: pointer;
  color: var(--color-green);
  background-color: var(--color-grey-box);
  padding:0.15rem 0.45rem;
  box-sizing: border-box;
  align-items: center;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.2s ease; 
  border: 0.17rem solid var(--color-green);
  max-height: max-content;
  max-width: max-content;
}

 .datei-upload-btn:hover {
  background-color: var(--color-green);
  color: white;
  cursor: pointer;
  transform: skew(-20deg);
    }

.submit-btn
 {
  display: flex;
  cursor: pointer;
  color: var(--color-primary);
  background-color: var(--color-grey-box);
  padding:0.15rem 0.45rem;
  box-sizing: border-box;
  align-items: center;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.2s ease; 
  border: 0.17rem solid var(--color-primary);
  height: auto;
  max-height: max-content;
  max-width: max-content;}

 .submit-btn:hover {
  background-color: var(--color-primary);
  color: white;
  cursor: pointer;
  transform: skew(-20deg);
    }





/* hide native input */
.file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  background-color: aqua;

}


/* filename text */
.file-name {
    margin-left: 1rem;
}


.quelle-anderes {
    display: none;
}

.quelle-anderes.active {
    display: block;}

abbr[title] {
  text-decoration: none;
}


.input-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  margin-right: 0.3rem;
  margin-bottom: -0.2rem;
  border: 1px solid black;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
}

.input-checkbox::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  transform: scale(0);
  transition: transform 0.2s ease-in-out;
  background-color: var(--color-green);
}

.input-checkbox:checked::before {
  transform: scale(1);
}


input.links {
  background-color: white;
}






/*TYPO*/


h1 {
  font-family: "ClashGrotesk-Bold";
  font-size: 7rem;
  line-height: normal;
  color: var(--color-primary);
  z-index: 8;
}

h2 {
  color: var(--black);
  font-size: 2rem;
  line-height: 2rem;
  transition: all 0.2s ease; 
   
}
 

.news-title-button:hover h2 {
  color: var(--color-lila-dark);
  font-weight: 700;
  /* letter-spacing: 0.1rem; */
  transform: skew(-20deg);
}

h3 {
  font-size: 5rem;
  color: var(--color-primary);
  line-height: 4.2rem;
  font-weight: 600;
  max-width: 36em;
  text-wrap: balance;
  hyphens: auto; 
  word-break: normal;
  overflow-wrap:break-word;

}

.news-marquee-track h3 {
  text-wrap: nowrap;
}

h4 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 2rem;
  margin-bottom: 1rem;
  max-width: max-content;
  transition: all 0.3s;
  transition-timing-function: cubic-bezier(.77, 0, .175, 1);

}


.map-box h4{
   white-space: nowrap;}

h5 {
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--color-primary);
  line-height: 1.4rem;
  margin-bottom: 1rem;
  max-width: max-content;
  transition: all 0.2s ease; 

}

.typoklein {
  color: var(--black);
  font-size: 0.8rem;
  letter-spacing: 0.08rem;
}

.typokleinlila {

  font-size: 0.7rem;
  color: var( --color-primary);
}



.bold {
  font-weight: 600;
}

.typogross {
  font-size: 2rem;
  color: black;
  line-height: 1em;
  transition: all 0.2s ease;  
}


.typogrossweiss {
  font-size: 1.8rem;
  color: white !important;
  line-height: 1em;
  transition: all 0.2s ease;  
  font-weight: 600;
  letter-spacing: 0.05rem;
  height: fit-content;
  display: flex;

}


.nav-single:hover .typogross {
  color: white;
  background-color: var(--color-primary);
  transform: skew(-20deg);
  padding-left: 3vw;
  padding-right: 0.5vw;
  letter-spacing: 0.1rem;
  max-width: max-content;
}

.footer-btn:hover,  .link-footer-btn:hover{
  cursor: pointer;
  transform: skew(-20deg);
  font-weight: bold;
  color: var(--color-primary);
}



.links {
  display: block;
  color: var(--color-primary) !important;
  cursor: pointer;
  line-height: 1.2rem;
  max-width: max-content;
  transition: all 0.2s ease;
  cursor: pointer; 
  font-weight: 600;
}

.links:hover{
  color: white !important;
  background-color: var(--color-primary);
  transform: skew(-20deg);
  padding:0vh 0.25vw;
  cursor: pointer; 
}

.links-dark {
  display: block;
  color: var(--color-lila-dark) !important;
  cursor: pointer;
  line-height: 1.2rem;
  max-width: max-content;
  transition: all 0.2s ease;
  cursor: pointer; 
  font-weight: 600;
}

.links-dark:hover{
  color: white !important;
  background-color: var(--color-lila-dark);
  transform: skew(-20deg);
  padding:0vh 0.25vw;
  cursor: pointer; 
}





.beschreibung, .beschreibung.p {
font-size: 1rem;
line-height: 1.3rem;
width: 100%;
max-width: 36em;
text-wrap: balance;
hyphenate-limit-chars: 5 2 7;
color: var(--black);

}

.rowklein .beschreibung {
  max-width: max-content;
}

.newsticker-text {
  max-width: 12em;
  text-wrap: balance;
  hyphenate-limit-chars: 5 2 7;
  overflow-y: hidden;
}


.typomedium {
  font-size: 1.5rem;
  line-height: 1.7rem;
  transition: all 0.2s ease;  
}


.back-white .typomedium:hover {
  cursor: pointer;}

.beschreibung a, .extra-box a{
   display: inline-block;
  color: var(--color-primary) !important;
  cursor: pointer;
  line-height: 1.2rem;
  max-width: max-content;
transition: all 0.2s ease;
 cursor: pointer; 
 font-weight: 600;
   padding:0vh 0.15em;

}
.beschreibung a:hover, .extra-box a:hover{
  color: white !important;
  background-color: var(--color-primary);
  transform: skew(-20deg);

  cursor: pointer; 
}



.links-green,   a.links-green{
  display: block;
  color: var(--color-green)!important;
  cursor: pointer;
  line-height: 1.2rem;
  max-width: max-content;
transition: all 0.2s ease; 
 cursor: pointer;
 line-height: normal;
 font-weight: 600;

 
} 
.links-green:hover,   a.links-green:hover{
  color: white !important;
  background-color: var(--color-green);
  transform: skew(-20deg);
  padding:0vh 0.25vw;
   cursor: pointer;
   box-sizing: border-box;
}


.kleininfo {

  font-size:  0.9rem; 
color: var( --color-primary-light-text);

}

.white {

color: white;
}


.news-title-button:hover .white {
  color: var(--color-lila-dark);
  /* letter-spacing: 0.1rem; */

}

.lila {

  color: var(--color-primary);

}


.green {

color: var(--color-green);
}

.dark-lila {
  color: var(--color-lila-dark);
}

.back-green {
  background-color: var(--color-green);
  text-wrap: nowrap;
  box-sizing: border-box;
  padding: 0.1rem 0.5rem;

}
.back-lila {
  background-color: var(--color-primary);
  text-wrap: nowrap;
  box-sizing: border-box;
  padding: 0.1rem 0.5rem;
 transition: all cubic-bezier(0.5, 0, 0.5, 1) 0.2s;
}

.back-white {
  background-color: white;
  box-sizing: border-box;
  padding: 0.5rem;
}

.fake-italic {

 transform: skew(-20deg);
 width: max-content;
}

h3.fake-italic {

 width: 100%;
}

.werte-box:hover h4 {
 transform: skew(-20deg);
     transition: all 0.3s;
	transition-timing-function: cubic-bezier(.77, 0, .175, 1);
 margin-left: 2rem;
letter-spacing: 0.1rem;

}

.hover-italic:hover 
{
 transform: skew(-20deg);}


 .hover-green:hover 
{  color: var(--color-green);
  font-weight: 600;
}

.self-end {
  padding-top: 1rem; 
  margin-top: auto;
}

.nowrap {
  display: flex;
  flex-wrap: nowrap;
}


 .lazy {
  opacity: 0.8;
 }

 .loaded {
    opacity: 1;
    transition: 0.15s;
 }


 strong {
  font-weight: 600;
  color: var(--color-primary);
 }



.scroll-note {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;

    font-size: 1.5rem;
  opacity: 1;
  transition: opacity 0.4s ease;

    box-sizing: border-box;
  padding: 0.35rem 0.6rem;
  background: var(--color-lila-dark);
  color: #fff;
    box-sizing: border-box;
  padding:0.6rem  ;
  transition-timing-function: cubic-bezier(.77, 0, .175, 1);
    animation: scroll-bounce 1.5s infinite;
    z-index: 1999;
    cursor: pointer;
}

.scroll-note.hidden {
  opacity: 0;
  display: none;
}


@keyframes scroll-bounce {
  0%   { transform: rotate(90deg) translate(0, 0); opacity: 0.3; }
  50%  { transform: rotate(90deg)  translate(0.5rem, 0px); opacity: 1; }
  100% { transform: rotate(90deg) translate(0, 0); opacity: 0.3; }
}






#backToTopBtn {
  position: fixed;
   bottom: 0.5rem;
    left: 1rem;
  box-sizing: border-box;
  padding: 0.35rem 0.6rem;
  background: var(--color-lila-dark);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
   transition-timing-function: cubic-bezier(.77, 0, .175, 1);
    z-index: 11;
    transform: rotate(-90deg);
    font-size: 1.5rem;
transition: bottom 0.5s ease-in-out;
}

#backToTopBtn:hover {
 bottom:1rem;

   transition: all cubic-bezier(0.5, 0, 0.5, 1) 0.25s;

}
/* Active when home is OUT of view */
#backToTopBtn.active {
  opacity: 1;
  pointer-events: auto;
}


  #backToTopBtn.move-up{

  bottom: 3rem;

}



#map-berlin {
  width: 100%;
  height: 30rem;
}


#map-berlin-lager {
  width: 100%;
  height: 20rem;
}

#map-world{
  width: 100%;
  height: 30rem;
}

#karte-stadtrand{  grid-column: span 3;
margin-top: 2rem;}


.maplibregl-map {

  font-size: 14px;
  font-family:"ClashGrotesk-Variable" ;
}
.maplibregl-popup-content {


    background: #fff;
    padding: 0.5rem;
    box-sizing: border-box;
    pointer-events: auto;
    position: relative;}

 .plzdetail{
   
    max-width: 30em;
    width: 100%;
      box-sizing: border-box;
      padding: 0.8rem 0.8rem;
    }


#zoneeins {

  background-color:#cdadd7;
  opacity: 1;
  padding: 0.25rem 0.5rem ;
  box-sizing: border-box;
  color: white;
    transition: all cubic-bezier(0.5, 0, 0.5, 1) 0.25s;
width: max-content;
display: inline-block;
  
}

#zonezwei {

  background-color: #6af2d4;
  opacity: 1;
  padding: 0.25rem 0.5rem ;
  box-sizing: border-box;
   color: white;
     transition: all cubic-bezier(0.5, 0, 0.5, 1) 0.25s;
     width: max-content;
     display: inline-block;
}


#zoneeins:hover, #zonezwei:hover {
   transform: skew(-20deg);
   cursor: pointer;

}

@keyframes wiggle {
  0% {transform: rotate(-2deg)}
  50% {transform: rotate(2deg)}
  100% {transform: rotate(-2deg)}
}

@keyframes bounce {
  0% {transform: scale(1)}
  50% {transform: scale(1.2)}
  100% {transform: scale(1)}
}

.newsticker {
  display: none;
      transition: all cubic-bezier(0.5, 0, 0.5, 1) 0.5s;
      opacity: 0.2;
  transform: translateY(-1svh) scale(0.95); /* start slightly smaller */
    top: 10svh;
    /* animation: bounce; */
    animation-iteration-count: infinite;
    animation-duration: 0.25s;
}

.newsticker.active {
  display: flex;
  background-color: var( --color-lila-dark);
  color: white;
  position: absolute;
  box-sizing: border-box;
  padding: 2rem;
  height: 60svh;
  width: 60%;
 opacity: 1;
  top: 20svh;

  z-index: 25;
  transform: translateY(0) scale(1);
   transition: all cubic-bezier(0.5, 0, 0.5, 1) 0.5s;
   /* margin-left: 20%; */
   justify-self:  center;
}

.test{

  height: fit-content;
  width: 100%;
  background-color: #3c0a46;
  position: absolute;
  top: 50%;
  color: white;
}



.zone-selector {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  /* overflow-x: scroll; */
  /* width: 100%; */
  gap: 1rem;
  width: 8rem;
    align-self: flex-end;
}

.zone-selector button {
  padding: 0.4rem 0.8rem;

  color: white;
  cursor: pointer;
  font-weight: bold;
   white-space: nowrap;
  flex-shrink: 1;

  
}





.world-zone-0 {

   background-color: #d7dcd4;
}


.world-zone-1 {

   background-color: #cdadd7;
}

.world-zone-2 {
    background-color: #a0ffa6;
}

.world-zone-3 {
    background-color: #3c0a46;
}

.world-zone-4 {
    background-color: #12dd1f;
}
.world-zone-5 {
    background-color: #6af2d4;
}
.world-zone-6 {
    background-color: #06af89;
}



.privat-only,
.gewerblich-only {
    display: none; /* hidden by default */
}

.privat-only.active,
.gewerblich-only.active {
    display: flex; /* shown when active */
}
.quelle-anderes {
    display: none;
}

.quelle-anderes.active {
    display: block;
}