:root {
   --base: #ffffff;
   --base2: #ffffff;
   --base3: #a3958c;
}

html {height:100%; scroll-behavior: smooth;}
*, ::before, ::after {box-sizing: border-box;}
* {padding:0; margin:0; box-sizing: border-box;}
img {display: block;}
.img-fluid {max-width: 100%; width: 100%; height:auto;}
body {font-family: sans-serif; font-weight: 100; line-height: 150%; margin:0 20px;}

h1 {font-family: Inter,sans-serif; font-size: clamp(2rem, 0rem + 8vw, 3.0rem); font-weight: 600;letter-spacing: -1px; line-height: normal;}
h2 {font-size: 30px;}
h3 {font-size: 17px;font-weight: 400;margin-bottom: 10px;}
h4 {font-size: 12px;font-weight: 100;margin-bottom: 10px; letter-spacing: 2px; text-transform: uppercase;}
p {font-weight: 100;margin-bottom: 10px; font-size: 17px; letter-spacing: .4px;}
.cfs {display:flex; justify-content: center; flex-wrap: wrap; margin:0 auto; padding:0 20px; width:100%; max-width: 1900px; }

.nowrap {flex-wrap: nowrap;}
.flex800 {flex:1 1 800px;}
.flex250 {flex:1 1 250px;}


.flexfull {flex:1 1 100%; text-align: center;}
a {color:#222; transition: all .3s ease;}
a:hover { transition: all .3s ease;}


li {margin:0 0 10px 20px; list-style: auto; line-height: 140%;}
.vermarktung {padding: 15px 0; text-align: center; background: #111; color: rgba(255,255,255,.35); font-size: 13px; display: flex; justify-content: center;
& a {color:rgba(255,255,255,.5);}
& a:hover {color:rgba(255,255,255,.8);}
}



.logo img {width: 100%; height:auto;}
.img-fluid {border-radius: 20px;}

a.link {color:#000000; letter-spacing: .5px; text-decoration: none; font-weight: 500; position:relative; margin:0 30px 0 0 ; font-size: 15px; transition: all .3s ease;}
a.link:hover {color:#000; transition: all .3s ease;}
a.link::after {content:''; left:0; bottom:0; position:absolute; background: #000000; height:1px; width:0px; transition: all .3s ease;}
a.link:hover::after {width:100%; transition: all .3s ease;}
a.weiss {color:#fff;}
a.weiss::before {background:url(images/pfeil_weiss.png) center center no-repeat; background-size: cover;}

.flex200 {flex: 1 1 200px;}
.flex800 {flex: 1 1 800px;}

#footer {padding:100px 0 50px; color:rgba(0, 0, 0, 0.5); letter-spacing: .4px; font-size:14px;
& .cfs {max-width: 1582px; justify-content: space-between;}
& h4 {color:rgba(0, 0, 0, 0.7);}
& .item {flex: 1 1 200px; max-width: 360px; padding: 40px;}
& .logos_footer {height: 34px;width: auto; margin: 5px 0 10px;}
& a {font-weight:100;color:rgba(0, 0, 0, 0.5);}
& a:hover {color:rgba(0, 0, 0, 0.8);}
}
#shops {padding: 80px 20px; max-width: 1000px; margin: 0 auto;
   & .cfs {border: 1px solid rgba(255,255,255,.15); padding-top: 16px; border-radius: 150px;}
}


#header {
& .cfs {padding:0;}
& .logo {max-width: 222px;}
& .menucontainer {width:300px;}
& .menu {display: flex; justify-content: space-between;}
& .header {justify-content: space-between; align-items: center; padding:1.5vw;}
}



#unterseiten {background: #f2f2f2; padding: 100px 0;
  .cfs {max-width: 1500px;}
  & h2 {margin-bottom: 10px;}
  }