/*
@mixin font-headline-regular {
    font-family:                adelle,serif;
    font-weight:                400;
    font-style:                 normal;
}
*/
/*
@mixin font-main-light {
    font-family:                adelle-sans,sans-serif;
    font-weight:                300;
    font-style:                 normal;
}

@mixin font-main-thin {
	font-family:				adelle-sans, sans-serif;
	font-weight:				100;
	font-style:					normal;
}
*/
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.main-grid {
  display: grid;
  margin: 12vh 6vw;
  margin: clamp(grid-size(5), 12vh, grid-size(18)) clamp(grid-size(2), 6vw, grid-size(6));
  grid-template-rows: auto;
  column-gap: 5vw;
  column-gap: clamp(grid-size(3), 5vw, grid-size(10));
  row-gap: 60px;
}
@media (min-width: 600px) {
  .main-grid {
    grid-template-columns: 60px 5fr;
  }
}
@media (min-width: 1000px) {
  .main-grid {
    grid-template-columns: 60px 5fr 7fr;
  }
}
@media (min-width: 1441px) {
  .main-grid {
    grid-template-columns: 60px minmax(auto, 540px) minmax(320px, auto) 180px;
  }
}

header {
  text-align: center;
}
@media (min-width: 600px) and (max-width: 1000px) {
  header {
    grid-row-end: span 3;
  }
}
@media (min-width: 1000px) and (max-width: 1441px) {
  header {
    grid-row-end: span 2;
  }
}
header .logo svg {
  width: 100%;
  max-width: 60px;
  height: auto;
  margin: 0 auto;
  position: relative;
  display: flow-root;
  /*
  > * {
  	position: 							absolute;
  	top: 								0;
  	left: 								0;
  	right: 								0;
  	bottom: 							0;
  }
  */
}
header .logo svg:before {
  float: left;
  content: "";
  padding-bottom: 100%;
}
header .logo svg path {
  fill: var(--text);
}

@media (min-width: 1000px) {
  article {
    margin-left: -24px;
  }
}

@media (min-width: 1000px) and (max-width: 1441px) {
  footer {
    margin-left: -30px;
    grid-column-end: span 2;
  }
}
footer h3 {
  margin: 24px 0px 6px;
  font-family: adelle-sans, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 1rem;
}
footer ul {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  list-style: none;
}
footer li {
  list-style-type: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
@media (max-width: 600px) {
  footer {
    text-align: center;
  }
}

h2 {
  margin: 0px 0px 48px;
  font-family: adelle-sans, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #6f6f6f;
  text-transform: uppercase;
  font-size: 12px;
}
@media (max-width: 600px) {
  h2 {
    text-align: center;
  }
}

blockquote {
  margin: 0px 0px 24px;
  font-family: adelle, serif;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  font-size: calc(2.8rem / 1.75)1vw;
  font-size: min(max(calc(2.8rem / 1.75), calc(2.8rem / 1.75) + 1vw), 2.8rem);
  font-size: calc(clamp(calc(2.8rem / 1.75), calc(2.8rem / 1.75) + 1vw, 2.8rem));
  line-height: calc((1em * 1.2))1vw;
  line-height: min(max(calc((1em * 1.2)), calc((1em * 1.2)) + 1vw), (1em * 1.2));
  line-height: calc(clamp(calc((1em * 1.2)), calc((1em * 1.2)) + 1vw, (1em * 1.2)));
}
blockquote:before, blockquote:after {
  content: "";
}
@media (max-width: 600px) {
  blockquote {
    text-align: center;
  }
}

h3 {
  margin: 60px 0px 24px;
  font-family: adelle, serif;
  font-weight: 600;
  font-style: normal;
  font-size: calc(1.8rem / 1.75)1vw;
  font-size: min(max(calc(1.8rem / 1.75), calc(1.8rem / 1.75) + 1vw), 1.8rem);
  font-size: calc(clamp(calc(1.8rem / 1.75), calc(1.8rem / 1.75) + 1vw, 1.8rem));
  line-height: calc((1em * 1.2))1vw;
  line-height: min(max(calc((1em * 1.2)), calc((1em * 1.2)) + 1vw), (1em * 1.2));
  line-height: calc(clamp(calc((1em * 1.2)), calc((1em * 1.2)) + 1vw, (1em * 1.2)));
}

.intro {
  margin: 0px 0px 48px;
  font-style: normal;
  font-size: calc(1.8rem / 1.75)1vw;
  font-size: min(max(calc(1.8rem / 1.75), calc(1.8rem / 1.75) + 1vw), 1.8rem);
  font-size: calc(clamp(calc(1.8rem / 1.75), calc(1.8rem / 1.75) + 1vw, 1.8rem));
  line-height: calc((1em * 1.3))1vw;
  line-height: min(max(calc((1em * 1.3)), calc((1em * 1.3)) + 1vw), (1em * 1.3));
  line-height: calc(clamp(calc((1em * 1.3)), calc((1em * 1.3)) + 1vw, (1em * 1.3)));
}
@media (max-width: 600px) {
  .intro {
    text-align: center;
  }
}
.intro em {
  font-family: adelle-sans, sans-serif;
  font-weight: 400;
  font-style: normal;
  display: inline-block;
  padding: 0 0.4em 0.1em;
  background-color: var(--image-bg);
  font-style: normal;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}

.taglist li span {
  font-family: adelle-sans, sans-serif;
  font-weight: 400;
  font-style: normal;
  display: inline-block;
  padding: 0 0.4em 0.1em;
  background-color: var(--image-bg);
  font-style: normal;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}

.projectlist {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  column-gap: min(max(24px, 1vw), 48px);
  column-gap: clamp(grid-size(2), 1vw, grid-size(4));
  column-gap: 12px;
  margin: 0 0 60px 0;
  padding: 0 0 0 0;
  list-style: none;
  /*
  &--2cols {
  }
  */
}
.projectlist li {
  opacity: 0;
  -webkit-animation: fadeIn ease-in 1;
  -moz-animation: fadeIn ease-in 1;
  animation: fadeIn ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
  position: relative;
  margin-bottom: 12px;
  overflow: hidden;
  position: relative;
  display: flow-root;
  /*
  > * {
  	position: 							absolute;
  	top: 								0;
  	left: 								0;
  	right: 								0;
  	bottom: 							0;
  }
  */
}
.projectlist li:before {
  float: left;
  content: "";
  padding-bottom: 66.4879356568%;
}
.projectlist li:hover .projectlist__desc {
  transform: translate(0, 1%);
  transition: all 0.36s ease-in-out;
}
.projectlist li:hover .soon {
  opacity: 0;
  transition: all 0.36s ease-in-out;
}
.projectlist .project-kaiserxlabs {
  grid-column: span 2;
}
.projectlist li > a, .projectlist li > span {
  display: block;
  text-decoration: none;
  background-color: #F2F4F6;
}
.projectlist img {
  display: block;
  width: 100%;
}
.projectlist .title {
  display: block;
  margin-bottom: 0.4rem;
  font-size: calc(1.3rem / 1.75)1vw;
  font-size: min(max(calc(1.3rem / 1.75), calc(1.3rem / 1.75) + 1vw), 1.3rem);
  font-size: calc(clamp(calc(1.3rem / 1.75), calc(1.3rem / 1.75) + 1vw, 1.3rem));
  line-height: calc((1em * 1.2))1vw;
  line-height: min(max(calc((1em * 1.2)), calc((1em * 1.2)) + 1vw), (1em * 1.2));
  line-height: calc(clamp(calc((1em * 1.2)), calc((1em * 1.2)) + 1vw, (1em * 1.2)));
  font-family: adelle, serif;
  font-weight: 600;
  font-style: normal;
}
.projectlist .desc {
  display: block;
  color: #6f6f6f;
  font-size: calc(1rem / 1.75)1vw;
  font-size: min(max(calc(1rem / 1.75), calc(1rem / 1.75) + 1vw), 1rem);
  font-size: calc(clamp(calc(1rem / 1.75), calc(1rem / 1.75) + 1vw, 1rem));
  line-height: calc((1em * 1.4))1vw;
  line-height: min(max(calc((1em * 1.4)), calc((1em * 1.4)) + 1vw), (1em * 1.4));
  line-height: calc(clamp(calc((1em * 1.4)), calc((1em * 1.4)) + 1vw, (1em * 1.4)));
}
.projectlist.filter li {
  display: none;
  opacity: 0.5;
}
.projectlist.filter .show {
  display: block;
  opacity: 1;
}
.projectlist .soon {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  padding: 6px 24px;
  background-color: #1a1a1a;
  color: #ffffff;
  opacity: 1;
  transition: all 0.36s ease-in-out;
}

.projectlist__image {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.projectlist__desc {
  display: block;
  position: absolute;
  background-color: var(--body);
  right: 0;
  bottom: 0;
  left: 0;
  transform: translate(0, 100%);
  transition: all 0.12s ease-in-out;
  padding: min(max(24px, 1vw), 36px);
  -webkit-box-shadow: 0 0 18px rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 0 18px rgba(0, 0, 0, 0.12);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.12);
  /*
  -webkit-box-shadow:                 0px 0px grid-size(1.5) 0px lighten(#2C3338, 50%);
  -moz-box-shadow:	                0px 0px grid-size(1.5) 0px lighten(#2C3338, 50%);
  box-shadow:			                0px 0px grid-size(1.5) 0px lighten(#2C3338, 50%);
  */
}
.projectlist__desc .desc {
  font-size: calc(0.9rem / 1.75)1vw;
  font-size: min(max(calc(0.9rem / 1.75), calc(0.9rem / 1.75) + 1vw), 0.9rem);
  font-size: calc(clamp(calc(0.9rem / 1.75), calc(0.9rem / 1.75) + 1vw, 0.9rem));
  line-height: calc((1em * 1.3))1vw;
  line-height: min(max(calc((1em * 1.3)), calc((1em * 1.3)) + 1vw), (1em * 1.3));
  line-height: calc(clamp(calc((1em * 1.3)), calc((1em * 1.3)) + 1vw, (1em * 1.3)));
}

.client-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 12px;
  row-gap: 12px;
  margin: 0 0 0 0;
  padding: 24px 0 24px 0;
  list-style: none;
}

.client-list__item {
  height: 132px;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  background-color: var(--image-bg);
}
.client-list__item span {
  display: none;
}
.client-list__item svg polygon {
  fill: var(--text) !important;
}
.client-list__item svg path {
  fill: var(--text) !important;
}
.client-list__item--tk svg {
  width: auto;
  height: 54%;
}

.client-list__item--faz svg {
  width: 72%;
  height: auto;
}

.client-list__item--bmjv svg {
  width: auto;
  height: 48%;
}

.client-list__item--telekom svg {
  width: 30%;
  height: auto;
}

.client-list__item--iqvia svg {
  width: 60%;
  height: auto;
}

.client-list__item--hhla svg {
  width: 48%;
  height: auto;
}

.client-list__item--bueroboss svg {
  width: 48%;
  height: auto;
}

.cv-download {
  margin-top: 48px;
}

.personal p:not(.intro), .personal li {
  font-size: calc(1.1rem / 1.75)1vw;
  font-size: min(max(calc(1.1rem / 1.75), calc(1.1rem / 1.75) + 1vw), 1.1rem);
  font-size: calc(clamp(calc(1.1rem / 1.75), calc(1.1rem / 1.75) + 1vw, 1.1rem));
  line-height: calc((1em * 1.6))1vw;
  line-height: min(max(calc((1em * 1.6)), calc((1em * 1.6)) + 1vw), (1em * 1.6));
  line-height: calc(clamp(calc((1em * 1.6)), calc((1em * 1.6)) + 1vw, (1em * 1.6)));
}

.cv {
  margin-top: 72px;
}
.cv h2 {
  margin-bottom: 24px;
}
.cv__list {
  list-style: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

.cv__item {
  margin: 0 0 0 0;
  padding: 36px 0 36px 0;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  /*
    &:hover {
        background-color:           rgba($highlight, 0.1);
        padding-left:               grid-size(2);
        -webkit-transition:			all 0.5s ease;
  transition:					all 0.5s ease;
    }
    */
}
.cv__item:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.cv__period {
  font-size: 0.8rem;
}

.cv h3 {
  font-size: calc(1.4rem / 1.75)1vw;
  font-size: min(max(calc(1.4rem / 1.75), calc(1.4rem / 1.75) + 1vw), 1.4rem);
  font-size: calc(clamp(calc(1.4rem / 1.75), calc(1.4rem / 1.75) + 1vw, 1.4rem));
  line-height: calc((1em * 1.2))1vw;
  line-height: min(max(calc((1em * 1.2)), calc((1em * 1.2)) + 1vw), (1em * 1.2));
  line-height: calc(clamp(calc((1em * 1.2)), calc((1em * 1.2)) + 1vw, (1em * 1.2)));
  margin-bottom: 6px;
}
.cv__company {
  font-family: adelle-sans, sans-serif;
  font-weight: 700;
  font-style: normal;
}

.cvbutton {
  position: relative;
  display: inline-block;
  height: 36px;
  border: 2px solid var(--text);
  text-decoration: none;
  text-align: center;
  font-family: adelle-sans, sans-serif;
  font-weight: 700;
  font-style: normal;
  overflow: hidden;
}
@media (hover: none) {
  .cvbutton {
    display: -webkit-inline-flex;
    display: inline-flex;
  }
}
.cvbutton .front, .cvbutton .back {
  display: block;
  height: 36px;
  transform: translate(0, 0);
  -webkit-transition: transform 0.2s ease;
  transition: transform 0.2s ease;
  overflow: hidden;
}
.cvbutton .front {
  padding: 6px 24px 0px;
}
.cvbutton .back ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  list-style: none;
}
.cvbutton .back ul > * {
  -webkit-box-flex: 0 0 50%;
  -moz-box-flex: 0 0 50%;
  -webkit-flex: 0 0 50%;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  margin-bottom: 0px;
}
.cvbutton .back ul > *:not(:last-child) {
  border-right: 1px solid #ffffff;
}
.cvbutton .back a {
  display: block;
  height: 36px;
  padding: 3px 24px 0px;
}
.cvbutton .back a[href="#"] {
  text-decoration: line-through;
  cursor: not-allowed;
}
.cvbutton .back a[href="#"]:hover {
  background-color: transparent;
}
.cvbutton .back a:hover {
  background-color: #04B353;
}
@media (hover: hover) and (pointer: fine) {
  .cvbutton.flip:hover .front, .cvbutton.flip:hover .back {
    transform: translate(0, -100%);
    -webkit-transition: transform 0.2s ease;
    transition: transform 0.2s ease;
  }
}