html {height:100%; scroll-behavior: smooth;}
*, ::before, ::after {box-sizing: border-box;}
* {padding:0; margin:0; box-sizing: border-box;}
img {display: block; max-width: 100%; width:100%; height:auto;}
.img-fluid {max-width: 100%; width: 100%; height:auto;border-radius: 20px;margin:0 auto; transition: all .3s ease; transition-delay: 0;}
body {font-family: sans-serif; font-weight: 100; line-height: 150%; font-size:1rem; width: 100%;overflow-x: hidden;}


:root {--color1:#c1b094;} /* alter Wert:  #82a3b2; */
:root {--color2: #454545;}
:root {--color3: #3a3f4b;}
:root {--callout: #000000;}
:root {--seitenbreite: 1800px;}
:root {--padding-bottom: min(80px, 6%);}
:root {--padding-top: min(100px, 6%);}
:root {--bg-esd: #3c4043;}
:root {--kontaktbutton:#6e9fb5;}

@font-face {
  font-family: 'SFPRODISPLAYMEDIUM'; 
  font-style: normal; 
  src: local('SFPRODISPLAYMEDIUM'),
  url(font/SFPRODISPLAYMEDIUM.ttf) format('truetype');
}



h1 {font-size: 56px;line-height: 1.07143;  font-family: 'SFPRODISPLAYMEDIUM'; font-weight:400;}
@media screen and (width > 1755px) {
  h1 {font-size:75px;}    
}

h2 {font-size: 38px;line-height: normal;font-family: 'SFPRODISPLAYMEDIUM';}
@media (width < 550px) {
  h2 {font-size:28px;}
}

@media (width < 350px) {
  h2 {font-size:24px;}
}
h3 {font-size: 24px;font-weight: 400;margin-bottom: 10px;line-height: normal; font-family: 'SFPRODISPLAYMEDIUM';}
h4 {font-size: 18px;font-weight: 400;margin-bottom: 10px;}
p {font-weight: 100;margin-bottom: 10px; letter-spacing: 0px;}
small {line-height: 120%;}
.subhead {font-size: 18px;line-height: 1.3;font-weight: 400; font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif; margin: 10px auto;max-width: 800px;}
.cfs {display:flex; justify-content: center; flex-wrap: wrap; margin:0 auto; padding:0 20px; width:100%; max-width: var(--seitenbreite); margin:0 auto;}
.cfs2 {max-width: 1235px;display: flex; justify-content: center; flex-wrap: wrap; align-items: center; margin: 30px auto;}
.nowrap {flex-wrap: nowrap;}
.bigger {font-size: 20px;display: block;margin-bottom: 10px;font-weight: 400;}

.itemfull {flex: 1 1 100%;text-align: center; margin-bottom: 50px;}
.item {padding:0 20px;}
.flexfull {flex:1 1 100%; text-align: center;padding-top:min(90px, 9%); padding-bottom: min(90px, 9%);}
.flexfull2 {flex:1 1 100%; text-align: center;padding-top:min(50px, 9%); padding-bottom: min(30px, 9%);}
.flexfull3 {flex:1 1 100%; text-align: center;padding-top:min(50px, 9%); padding-bottom: min(20px, 4%);}
.nopadding {padding:0;}
.nopaddingtop {padding-top:0;}
.nopaddingbottom {padding-bottom:0;}
a {text-decoration: none;transition: all .3s ease;}
a:hover { transition: all .3s ease;}
.mb100 {margin-bottom: min(100px, 10%);}
.mb15 {margin-bottom: min(15px, 2%);}
.mb50 {margin-bottom: min(50px, 5%);}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  border-radius: 15px;
  overflow: hidden;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

a {color:#000;}

.action {padding: 10px 40px; margin-bottom: 10px; background:var(--color1); color:#fff;font-weight:400; border-radius: 100px; display:inline-block;text-decoration: none; transition: all .3s ease;}
.action:hover {scale:1.1;transition: all .3s ease;}
.action2 {padding: 8px 30px; margin-left: 10px; font-weight:400; color:#ffffff; border-radius: 100px;background:#4d525d; display:inline-block;text-decoration: none;}
.action2:hover {scale:1.1; transition: all .3s ease;}


li {padding:10px 0 5px 0; list-style: auto; line-height: 140%;font-weight: 400; font-size: 15px;}


.logo img {width: 100%; height:auto;}
.logo a {text-decoration: none;}

.margintop {margin-top:min(100px,8%);}


.link {white-space: nowrap; letter-spacing: .3px; text-decoration: none; font-weight: 100; position:relative; transition: all .3s ease;}
.link:hover {transition: all .3s ease;}
.link::after {content:''; left:0; bottom:0; position:absolute; background: #000000; height:1px; width:0px; transition: all .3s ease;}
.link:hover::after {width:100%; transition: all .3s ease;}

.produktlinks {font-weight:200;font-size:16px; font-family: 'SFPRODISPLAYMEDIUM';}
.linkbox {margin:5px 0;}
.produktlink {position: relative; padding:0 0 0 30px; color:#a6a09b;}
.produktlink::before {content: ''; position: absolute; bottom: 0px; left: 0; background: url(images/pfeil2.png) center center no-repeat;border-radius:50px; background-size: cover; width: 20px; height: 20px; transition: all .3s ease;}
.produktlink:hover::before {animation: aniborder2 .5s linear;}

.produktlink:hover {color:#000; transition: color .3s linear;}


.button {display: inline-block; padding:4px 20px; border-radius: 20px; color:#fff; font-size:13px;letter-spacing: .3px; font-family: 'SFPRODISPLAYMEDIUM'; font-weight:500; background:#595f64;}
.button:hover {background:#c6581c; scale:1.05;}

.flex200 {flex: 1 1 200px;}
.flex300 {flex: 1 1 300px; margin:0 10px 20px;}
.flex350 {flex: 1 1 350px; margin:0 15px 30px;}
.flex500 {flex:1 1 500px; padding:0 2%; font-family: sans-serif;}
.flex800 {flex: 1 1 800px;}

.hundert {width:100%; display: flex; flex-wrap: wrap; & * {margin-right:5px;}}

.footer-img { transition: .3s ease;max-width: 110px; height:auto; margin:0 5px 5px 0; border-radius: 10px; border: 3px solid rgba(255,255,255,1);box-shadow:0 8px 9px -9px rgba(0,0,0,1);}
.footer-img:hover {scale:1.05; transition: .3s ease; box-shadow:0 8px 9px -9px rgba(0,0,0,1);}

#footer {padding-top:min(100px, 10%);color:rgba(0,0,0,.75); letter-spacing: .4px; font-size:14px; background: #efefef;font-weight: 100; font-size: 13px;max-width: var(--seitenbreite);margin:0 auto;
  font-family: sans-serif;
& .cfs {max-width: 1524px; justify-content: space-between;}
& h4 {color:rgba(0,0,0,.9); font-size: 12px; font-weight: 400; margin-bottom: 10px;}
& .item {margin:0 5px 40px; max-width: 360px; padding:0;}
& .links {padding-left: 20px;}
& .logos_footer {height: 34px;width: auto; margin: 5px 0 10px;}
& .link {font-weight:100;color:rgba(0,0,0,.75);}
& .tel {color: #3f9abf;}
& a:hover {color:rgba(0,0,0,.8);}
& .logo_footer {opacity: .7;transition: all .3s ease; max-width: 260px; margin: 0 auto;}
& .logo_footer:hover {opacity:.7; scale: 1.3; transition: all .3s ease;filter:drop-shadow(0px 17px 15px rgba(0,0,0,.4));}
& .flexfull {border-top: 1px solid rgba(0,0,0,.15); padding-top: 90px;}
& .random_products {display: flex; flex-wrap: wrap; justify-content: flex-start;}
& .produktlinks_nobox {border:0;}
& .produktlink::before {bottom:-3px;}

@media (width < 1000px) {
    font-size:16px;
    & h4 {font-size: 15px;}
    & .cfs {justify-content: center;}
    & .item {flex: 1 1 288px;}
    & .links {padding-left: 0;}
}
@media (width < 450px) {
  & .cfs {justify-content: center;}
  & .item {flex: 1 1 288px;}
  & .links {padding-left: 0;}
}
}




  @media screen and (width < 543px) {
    #footer, #copyright {
      & .cfs {justify-content: center; padding:0}
      & .item {flex: 1 1 100%; text-align: center;}
      & .link {margin: 0;}
      & .tel {justify-content: center;}
    }
  }


.icon {max-width: 40px; height:auto;opacity: .3;}


  #copyright {padding:10px;
    font-family: sans-serif; font-size:12px;color: rgba(0,0,0,.75);

  }


  @media screen and (width < 1040px) {
    & .flex500:nth-child(1) {order:1;}
    & .flex500:nth-child(2) {order:2;}
    & .flex500:nth-child(3) {order:4;}
    & .flex500:nth-child(4) {order:3;}
    & .flex500:nth-child(5) {order:5;}
    & .flex500:nth-child(6) {order:6;}
    & .flex500:nth-child(7) {order:8;}
    & .flex500:nth-child(8) {order:7;}
    & .flex500:nth-child(9) {order:9;}
    & .flex500:nth-child(10) {order:10;}
    & .flex500:nth-child(11) {order:12;}
    & .flex500:nth-child(12) {order:11;}
    & .flex500 h3 {font-size: 17px;}
   }


  /* SCROLLINGFUNKTION */


  .horizontal-scroll-wrapper {
    padding: 1rem 0;
    max-width: 1500px;
    margin:0 auto;
  }
  
  .product-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto; /* Wichtig für JS, da wir diese Scrollposition manipulieren */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    /* Optional: Scrollbar verstecken, aber Scrollen via JS funktioniert trotzdem */
    scrollbar-width: none;
  }
  
  .product-container::-webkit-scrollbar {
    display: none;
  }
  
  .product-item {
    box-shadow: 0 4px 18px -10px rgba(0,0,0,.15);
    margin: 20px 0;
    flex-shrink: 0;
    min-width: 300px;
    flex:1 1 300px;
    background-color: #ffffff;
    border-radius: 5px;
    text-align: center;
    border-radius: 20px;
    max-width: 356px;
    display: flex; flex-direction: column; justify-content: space-between;
    transition:all 1s ease;
  }
  
  /* Styling für die Pfeile */
  .scroll-section-wrapper {
    position: relative;
  }
  
  .scroll-arrow {
    margin-top: 300px;
    transform: translateY(-50%);
    background:none;
    border: 0;
    padding: 5px 5px;
    cursor: pointer;
    z-index: 10;

  }
  
  .button_area {position: absolute; background: #efefef; width: 60px; height: 650px; top:30px; z-index: 99; 
  & .pfeil {width:30px; height:30px;border-radius:50px; transition:  all .3s ease;}
  & .pfeil:hover {scale:1.1; animation: aniborderDark .5s linear;transition: all .3s ease;}
}
  & .area_left {left:0; text-align: left; padding-left: 10px;}
  & .area_right {right:0; text-align: right; padding-right: 10px;}
  @media (width < 1622px) {
    .button_area {width:35px;
    & .pfeil {width:25px; height:25px;}}
    & .area_left {left:0; text-align: left; padding-left: 0;}
    & .area_right {right:0; text-align: right; padding-right: 0;}
    & .scroll-section-wrapper {padding: 0 36px;}
  }  
  @media (width < 650px) {
     .product-item {       
      flex:1 1 200px;
      max-width: 250px;
      min-width: 200px;
      transition:all 1s ease;
    }
  }