* {
  margin: 0;
  padding: 0;
}

:root {
  --padding: 1.5rem;
  --color-black: #000;
  --color-white: #fff;
  --color-grey: #777;
  --color-highlight: #696969;
  --font-family-sans: "tt_normsmedium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-extralight: "tt_normsextralight";
  --font-family-light: "tt_normslight";
  --font-family-regular: "tt_normsregular";
  --font-family-bold: "tt_normsbold";
  --text-size: 100%;
}

html {
  font-family: var(--font-family-sans);
  font-size: var(--text-size);
  color: var(--color-white);
  background: var(--color-black);
}

img {
  width: 100%;
}

body {
  padding: var(--padding);
  max-width: 70rem;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-direction: column-reverse;
}

li {
  list-style: none;
}

.logo {
  display: flex;
  align-items: center;
  font-weight: 600;
  cursor: pointer;
}
.logo svg .bnr-fill {
  fill: var(--color-white);
}
.logo svg .bnr-outline {
  fill: var(--color-black);
}

a {
  padding-top: 0;
  color: var(--color-white);
  text-decoration: none;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
a:hover {
  color: var(--color-highlight);
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "tt_normsbold";
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.grid {
  --columns: 13;
  --gutter: 0;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: 1fr;
}
.grid .column {
  align-self: end;
}

.autogrid {
  --gutter: 3rem;
  --min: 10rem;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
  grid-auto-flow: dense;
}

.stacks {
  /* home stack type position + effect */
}
.stacks a.stack {
  white-space: inherit;
  padding: calc(var(--padding) / 2) 0;
  border-bottom: 1px solid var(--color-grey);
}
.stacks a.stack:first-child {
  padding-top: 0;
}
.stacks a.stack:last-child {
  border: 0 none;
}
.stacks .type_1, .stacks .type_2, .stacks .type_3, .stacks .type_4, .stacks .type_5, .stacks .type_6, .stacks .type_7, .stacks .type_8, .stacks .type_9, .stacks .type_10, .stacks .type_11, .stacks .type_12, .stacks .type_13 {
  margin-left: 0;
}
.stacks .type_1:hover, .stacks .type_2:hover, .stacks .type_3:hover, .stacks .type_4:hover, .stacks .type_5:hover, .stacks .type_6:hover, .stacks .type_7:hover, .stacks .type_8:hover, .stacks .type_9:hover, .stacks .type_10:hover, .stacks .type_11:hover, .stacks .type_12:hover, .stacks .type_13:hover {
  color: var(--color-highlight);
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

/* home stack type style */
.stack_type, .clients, .contact, .imprint {
  font-family: var(--font-family-light);
  font-size: clamp(1.8rem, -1rem + 9vw, 5rem);
  color: var(--color-white);
  line-height: 1;
  text-transform: uppercase;
  padding-top: 0;
}

.clients li {
  padding: calc(var(--padding) / 2) 0;
  border-top: 1px solid var(--color-grey);
  line-height: normal;
}
.clients ul.first-col li:first-child {
  padding-top: 0;
  border: 0 none;
}

.imprint {
  font-size: clamp(1.4rem, -1rem + 9vw, 2rem);
  text-transform: none;
  line-height: inherit;
}

.karsten, .andreas {
  font-family: var(--font-family-bold);
}
.karsten span, .andreas span {
  font-family: var(--font-family-light);
}

.karsten {
  color: var(--color-white);
  padding-bottom: var(--padding);
}

.andreas {
  color: var(--color-grey);
  padding-top: var(--padding);
  border-top: 1px solid var(--color-grey);
}
.andreas a {
  color: var(--color-grey);
}

.privacy_policy .card {
  padding: 0 0 var(--padding) 0;
  font-size: clamp(0.6rem, -1.3rem + 5.1vw, 1em);
  hyphens: auto;
}
.privacy_policy .card h2 {
  padding-bottom: 1rem;
  font-size: clamp(0.8rem, -1.3rem + 5.1vw, 1.4em);
}

.mobile {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-auto-flow: row;
  margin-top: calc(var(--padding) * 3);
  margin-bottom: calc(var(--padding) * 2);
}
.mobile div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mobile div span {
  height: 1px;
  width: 2rem;
  background-color: var(--color-grey);
}
.mobile a {
  color: var(--color-grey);
  text-decoration: none;
  padding: calc(var(--padding) / 4) 0;
}

.footer {
  margin-bottom: calc(var(--padding) * 2);
}
.footer .grid {
  display: flex;
  padding-bottom: var(--padding);
  justify-content: space-between;
}
.footer .logo h1 a {
  display: block;
  width: 8rem;
  color: var(--color-white);
  text-transform: uppercase;
  margin: 0;
}
.footer .logo h1 svg .bnr-fill {
  fill: var(--color-white);
}
.footer .logo h1 svg .bnr-outline {
  fill: var(--color-black);
}
.footer a {
  display: none;
}
.footer .skill_display {
  display: none;
}

/* *********** breakpoint *********** */
@media screen and (min-width: 60rem) {
  html {
    background: var(--color-white);
    color: var(--color-black);
  }
  body {
    --padding: 3rem;
  }
  .container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 460px 70px 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    min-height: calc(100vh - 2 * var(--padding));
  }
  .main {
    grid-area: 2/1/4/2;
  }
  .grid {
    grid-template-columns: repeat(13, 1fr);
  }
  .grid .column {
    grid-column: span var(--columns);
    align-self: end;
  }
  /* home stacks */
  .stacks {
    grid-auto-rows: minmax(460px, auto);
  }
  .stacks a.stack {
    padding: 0;
    background-color: var(--color-white);
    background-image: linear-gradient(90deg, #bebebe 0%, var(--color-white) 100%);
    border-right: 1px solid var(--color-white);
    border-bottom: 0 none;
    overflow: hidden;
    white-space: nowrap;
    -ms-transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    width: auto;
    margin: 0;
  }
  .stacks a.stack:hover {
    background-color: var(--color-black);
    background-image: linear-gradient(90deg, var(--color-black) 0%, var(--color-black) 100%);
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    white-space: inherit;
  }
  .stacks a.stack .skill {
    background-position-y: center;
    background-repeat: no-repeat;
    background-size: 200em;
    height: 100%;
  }
  .stacks a.stack .stack_type {
    font-size: 19em;
    line-height: 0;
    text-transform: uppercase;
    padding-top: 227px;
    color: var(--color-black);
    font-family: var(--font-family-bold);
  }
  .stacks a.stack .type_1 {
    margin-left: -1842px;
  }
  .stacks a.stack .type_2 {
    margin-left: -452px;
  }
  .stacks a.stack .type_3 {
    margin-left: -432px;
  }
  .stacks a.stack .type_4 {
    margin-left: -485px;
  }
  .stacks a.stack .type_5 {
    margin-left: -862px;
  }
  .stacks a.stack .type_6 {
    margin-left: -386px;
  }
  .stacks a.stack .type_7 {
    margin-left: -768px;
  }
  .stacks a.stack .type_8 {
    margin-left: -642px;
  }
  .stacks a.stack .type_9 {
    margin-left: -1331px;
  }
  .stacks a.stack .type_10 {
    margin-left: -1298px;
  }
  .stacks a.stack .type_11 {
    margin-left: -448px;
  }
  .stacks a.stack .type_12 {
    margin-left: -2430px;
  }
  .stacks a.stack .type_13 {
    margin-left: -2377px;
  }
  .stacks a.stack .type_1, .stacks a.stack .type_2, .stacks a.stack .type_3, .stacks a.stack .type_4, .stacks a.stack .type_5, .stacks a.stack .type_6, .stacks a.stack .type_7, .stacks a.stack .type_8, .stacks a.stack .type_9, .stacks a.stack .type_10, .stacks a.stack .type_11, .stacks a.stack .type_12, .stacks a.stack .type_13 {
    -o-transition: 1.5s;
    -ms-transition: 1.5s;
    -moz-transition: 1.5s;
    -webkit-transition: 1.5s;
    transition: 1.5s;
  }
  .stacks #stack_1:hover .type_1, .stacks #stack_2:hover .type_2, .stacks #stack_3:hover .type_3, .stacks #stack_4:hover .type_4, .stacks #stack_5:hover .type_5, .stacks #stack_6:hover .type_6, .stacks #stack_7:hover .type_7, .stacks #stack_8:hover .type_8, .stacks #stack_9:hover .type_9, .stacks #stack_11:hover .type_11, .stacks #stack_13:hover .type_13 {
    color: var(--color-white);
    transform: translateX(400px);
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
  }
  .stacks #stack_10:hover .type_10 {
    color: var(--color-white);
    transform: translateX(760px);
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
  }
  .stacks #stack_12:hover .type_12 {
    color: var(--color-white);
    transform: translateX(790px);
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
  }
  .mobile {
    display: none;
  }
  .footer {
    grid-area: 3/1/4/2;
    align-self: end;
    background-color: transparent;
    border: 0 none;
    margin: 0;
  }
  .footer .grid {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    padding: 0;
  }
  .footer .logo h1 a {
    display: block;
    width: 7.5rem; /*width: 120px;*/
  }
  .footer .logo h1 svg .bnr-fill {
    fill: var(--color-black);
  }
  .footer .logo h1 svg .bnr-outline {
    fill: var(--color-white);
  }
  .footer a {
    font-size: clamp(0.8rem, -0.4rem + 2vw, 1rem);
    color: var(--color-black);
    margin: 0;
    text-transform: none;
    flex-direction: row;
    justify-content: flex-start;
    display: block;
  }
  .footer a:hover {
    color: var(--color-grey);
    text-decoration: underline;
  }
  .footer .skill_display {
    position: relative;
    top: 0.4rem;
    display: block;
  }
  .footer .skill_display .skill_type {
    font-size: 2.6rem;
    font-family: "tt_normsbold";
    text-transform: uppercase;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
  }
  /* clients */
  .clients {
    gap: 1px;
    background-image: url(../img/binar-clients.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }
  .clients ul {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1px;
    height: 460px;
  }
  .clients ul li {
    padding: 0.5125rem;
    list-style: none;
    overflow: hidden;
    background: var(--color-black);
    color: var(--color-white);
    opacity: 0.6;
    font-size: 0.8rem;
    font-family: "tt_normsmedium";
    line-height: normal;
    text-transform: none;
    -o-transition: 1s;
    -ms-transition: 1s;
    -moz-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
    border: 0 none;
  }
  .clients ul li:hover {
    opacity: 1;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
  .clients ul.first-col li:first-child {
    padding: 0.5125rem;
  }
  /* contact */
  .contact {
    gap: 1px;
    background-image: url(../img/binar-contact.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }
  .contact a {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 396px;
    padding: 2rem;
    margin: 0;
    overflow: hidden;
    background: var(--color-black);
    color: var(--color-white);
    opacity: 0.6;
    font-size: 0.8rem;
    font-family: "tt_normsregular";
  }
  .contact a:hover {
    opacity: 0.9;
  }
  .contact a:hover .vcard .ping {
    opacity: 1;
    -o-transition: 1s;
    -ms-transition: 1s;
    -moz-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
  }
  .contact a:hover .vcard {
    margin-bottom: 0.5rem;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
  }
  .contact a span {
    text-transform: none;
    font-family: var(--font-family-regular);
  }
  .contact a .karsten, .contact a .andreas {
    color: var(--color-white);
    padding: 0;
    border: 0 none;
  }
  .contact a .vcard {
    margin-bottom: -3rem;
    -o-transition: 1s;
    -ms-transition: 1s;
    -moz-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
  }
  .contact a .vcard h2 {
    font-size: 2.4rem;
    line-height: 1.9rem;
    font-family: "tt_normsextralight";
    text-transform: uppercase;
  }
  .contact a .vcard .ping {
    margin-top: 1rem;
    opacity: 0;
    text-transform: uppercase;
    line-height: 1rem;
    -o-transition: 1s;
    -ms-transition: 1s;
    -moz-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
  }
  /* imprint */
  .imprint {
    background-image: url(../img/binar-imprint.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }
  .imprint .card {
    height: 396px;
    padding: 2rem;
    overflow: hidden;
    background: var(--color-black);
    color: var(--color-white);
    opacity: 0.6;
    font-size: 0.8rem;
    font-family: "tt_normsregular";
    text-transform: none;
  }
  .imprint .card a {
    color: var(--color-white);
  }
  .imprint .card a:hover {
    text-decoration: underline;
  }
  /* privacy_policy */
  .privacy_policy {
    grid-template-rows: 1fr auto 70px auto;
  }
  .privacy_policy .main {
    grid-area: auto;
    background-color: var(--color-black);
  }
  .privacy_policy .main .grid .column {
    align-self: auto !important;
  }
  .privacy_policy .card {
    padding: 2rem;
    overflow: hidden;
    background: var(--color-black);
    color: var(--color-white);
    opacity: 0.6;
    font-size: 0.6rem;
    font-family: "tt_normsregular";
  }
  .privacy_policy .card h2 {
    padding-bottom: 1rem;
    font-size: 0.8rem;
  }
  .privacy_policy .card a {
    color: var(--color-white);
  }
  .privacy_policy .card a:hover {
    text-decoration: underline;
  }
}
/* debug*/
*,
*:before,
*:after {
  /*outline: 1px solid red;*/
}