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;}
body {font-family: sans-serif; font-weight: 100; line-height: 150%;}

h1 {font-family: Inter,sans-serif;font-size: 64px; font-weight: 600;letter-spacing: -2px; line-height: normal;}
h2 {font-size: 24px;line-height: normal;}
h3 {font-size: 17px;font-weight: 400;margin-bottom: 10px;line-height: normal;}
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;}
.itemfull {flex: 1 1 100%;text-align: center; margin-bottom: 50px;}

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

.bold {font-weight: 400;}
.bolder {font-weight: 600;}

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);}
}



nav {padding:0 20px; background:var(--base2);
 & .cfs {justify-content: space-between; padding:0 10px; align-items: center; max-width: 1223px; margin:0 auto;}
 & .logo {max-width:80px; height: auto; margin-top: 3px;}

}
@media screen and (max-width:940px) {
  nav {padding:0 20px;text-align: center;
  & .cfs {justify-content: center; padding-bottom: 28px;}
  & .logo {width:90%; height: auto;margin-left: auto;  margin-right: auto;}
  }
}


.logo img {width: 100%; height:auto;}
.logo a {text-decoration: none;}
.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::before {content:''; position:absolute; bottom:6px; right:-10px; background:url(images/pfeil.png) center center no-repeat; background-size: cover; width: 6px; height: 11px;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.link:hover::before { right:-17px; 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; background:#1b1522; color:rgba(255,255,255,.5); letter-spacing: .4px; font-size:14px;
& .cfs {max-width: 1582px; justify-content: space-between;}
& h4 {color:rgba(255,255,255,.7);}
& .item {flex: 1 1 200px;margin:0 5px; border-radius: 20px; border:1px solid rgba(255,255,255,.1); max-width: 360px; padding: 40px; background-image: linear-gradient(139deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03) 30%, rgba(255, 255, 255, 0.01) 66%, rgba(255, 255, 255, 0.08));}
& .logos_footer {height: 34px;width: auto; margin: 5px 0 10px;}
& a {font-weight:100;color:rgba(255,255,255,.5);}
& a:hover {color:rgba(255,255,255,.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: 80px;}
& .menucontainer {width:385px;}
& .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;}
  }