/* kolckmann.eu
-------------------------------------------------- */



/* inter
-------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url(../fonts/inter-300-light.woff2) format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 300;
  src: url(../fonts/inter-300-light-italic.woff2) format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url(../fonts/inter-500-medium.woff2) format('woff2');
}



/* basics
------------------------------------------------ */

* {
  box-sizing: border-box;
  margin: 0;
}

*::before, *::after {
  box-sizing: inherit;
}

html {
  scroll-behavior: smooth;
}

body {
  overflow-wrap: anywhere;
  color: rgba(0, 0, 0, 1);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 100%;
  font-weight: 300;
  line-height: 1.75; /* 28 */
  letter-spacing: 0.015625rem; /* 1/64 */
}



/* typo
------------------------------------------------ */

img, video {
  display: block;
  width: 100%;
}

/* typo
------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
  font-weight: 300;
}

strong {
  font-weight: 500;
}

/* typo
------------------------------------------------ */

ul, ol {
  padding-left: 1.75rem;
}

ul {
  list-style: "\00BB\0020";
}

ul[class] {
  list-style: none;
  padding: 0;
}

/* typo
------------------------------------------------ */

.form-input--search,
.form-input--submit {
  outline: none;
  padding: 0;
  color: rgba(255, 255, 255, 1);
  font-weight: 300;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.6875; /* 27 */
  border: 0;
  background-color: rgba(255, 255, 255, 0);
}

.form-input--search {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.form-input--submit {
  background: center / contain no-repeat url('../images/magnifier.png');
}

/* typo
------------------------------------------------ */

h1 {
  font-size: 1.5rem;
  line-height: 1.167;
}

h2 {
  font-size: 1.25rem;
  line-height: 1.4;
}

h3, h4, h5, h6 {
  font-size: 1rem;
  line-height: 1.75;
}

p, ul, ol {
  font-size: 1rem;
  line-height: 1.75;
}

figcaption {
  font-size: 0.875rem;
  line-height: 1.5;
}

@media all and (min-width: 30em) {
  h1 {
    font-size: 1.875rem;
    line-height: 1.167;
  }
  h2 {
    font-size: 1.5rem;
    line-height: 1.167;
  }
}

@media all and (min-width: 45em) {
  h1 {
    font-size: 2.25rem;
    line-height: 1.167;
  }
}

@media all and (min-width: 60em) {
  h1 {
    font-size: 3rem;
    line-height: 1.167;
  }
}

/* typo
------------------------------------------------ */

h1, h2, figure {
  margin-top: 2.625rem;
}

h3, h4, h5, h6, ul, ol, p, figcaption {
  margin-top: 0.875rem;
}

h1 + * {
  margin-top: 2.625rem;
}

h2 + * {
  margin-top: 1.75rem;
}

ul[class],
figure[class] {
  margin-top: 0;
}

/* typo
------------------------------------------------ */

figcaption {
  color: rgba(153, 153, 153, 1);
}

/* typo
------------------------------------------------ */

.block-site form,
.block-site img,
.block-site li {
  margin-top: 0.875rem;
}

.site-contents ul {
  margin-top: 1.75rem;
}

.site-crumb li {
  display: inline-block;
  margin-right: 0.4375rem;
}

.site-identity img {
  display: inline-block;
  vertical-align: top;
  max-width: 8.75rem; /* 5/2 */ /* height: 3.5rem */
}

.site-languages {
  text-align: right;
}

.site-languages li {
  display: inline-block;
  margin-left: 0.4375rem;
}

.site-links li {
  display: inline-block;
  margin-right: 0.875rem;
}

.site-search .form-input--search {
  width: 7rem;
}

.site-search .form-input--submit {
  width: 1.75rem;
}

/* typo
------------------------------------------------ */

.info-column > *:first-child,
.product-column > *:first-child,
.text-column > *:first-child {
  margin-top: 2.625rem; /* missing headline */
}

.product-column ul {
  font-weight: 500;
}



/* link
------------------------------------------------ */

.header a,
.footer a {
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
}

.header a:hover, .header a:focus,
.footer a:hover, .footer a:focus {
  text-decoration: underline;
}

.main a {
  color: rgba(153, 153, 153, 1);
  text-decoration: underline;
}

.main a:hover, .main a:focus {
  color: rgba(0, 0, 0, 1);
}

.main .block-site a {
  text-decoration: none;
}

.main .block-articles a,
.main .block-related a {
  color: rgba(0, 0, 0, 1);
  text-decoration: none;
}

.main .block-banner a {
  display: block;
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
}

.main .block-articles a:hover .item-title, .main .block-articles a:focus .item-title,
.main .block-banner a:hover h2, .main .block-banner a:focus h2,
.main .block-related a:hover .item-title, .main .block-related a:focus .item-title {
  text-decoration: underline;
}



/* header
------------------------------------------------ */

.header {
  color: rgba(255, 255, 255, 1);
  background-color: rgba(102, 102, 102, 1);
  border-top: 0.875rem solid rgba(0, 170, 153, 1);
}

/* footer
------------------------------------------------ */

.footer {
  color: rgba(255, 255, 255, 1);
  background-color: rgba(102, 102, 102, 1);
}



/* blocks
------------------------------------------------ */

.block-site,
.block-articles,
.block-categories,
.block-gallery,
.block-heading,
.block-info,
.news-item,
.block-manuals,
.block-product,
.block-related,
.block-text,
.block-video,
.block-view {
  display: flex;
  flex-wrap: wrap;
  padding: 0 0 2.625rem; /* 1/1 gutter */
}

.block-site {
  padding: 0 0 0.875rem; /* 1/3 gutter */
}

.block-categories,
.block-gallery--cover,
.block-video--cover {
  padding: 0;
}

.block-site > *,
.block-articles > *,
.block-gallery > *,
.block-heading > *,
.news-item > *,
.block-info > *,
.block-manuals > *,
.block-product > *,
.block-related > *,
.block-text > *,
.block-video > *,
.block-view > * {
  flex-basis: calc(100% - 2.625rem); /* 1/1 gutter */
  margin: 0 1.3125rem 0; /* 1/2 gutter */
}

.block-categories > *,
.block-gallery--cover > *,
.block-video--cover > * {
  flex-basis: 100%;
  margin: 0;
}



/* blocks @media
------------------------------------------------ */

@media all and (min-width: 60em) {
  .block-site {
    padding: 0 3.9375rem 0.875rem; /* 3/2 gutter */ /* 1/3 gutter */
  }
  .block-articles,
  .block-gallery,
  .block-heading,
  .block-info,
  .news-item,
  .block-manuals,
  .block-product,
  .block-related,
  .block-text,
  .block-video,
  .block-view {
    padding: 0 3.9375rem 2.625rem; /* 3/2 gutter */ /* 1/1 gutter */
  }
  .block-gallery--cover,
  .block-video--cover {
    padding: 0;
  }
}

@media all and (min-width: 90em) {
  .block-site {
    padding: 0 calc(50% - 45rem + 3.9375rem) 0.875rem; /* … */ /* 1/3 gutter */
  }
  .block-articles,
  .block-gallery,
  .block-heading,
  .block-info,
  .news-item,
  .block-manuals,
  .block-product,
  .block-related,
  .block-text,
  .block-video,
  .block-view {
    padding: 0 calc(50% - 45rem + 3.9375rem) 2.625rem; /* … */ /* 1/1 gutter */
  }
  .block-gallery--cover,
  .block-video--cover {
    padding: 0;
  }
}



/* blocks @media
------------------------------------------------ */

@media all and (min-width: 15em) {
  .block-site .site-identity,
  .block-site .site-languages {
    flex-basis: calc(50% - 2.625rem);
  }
}

@media all and (min-width: 30em) {
  .block-site .site-contents {
    flex-basis: calc(50% - 2.625rem);
  }
  .block-articles .articles-item {
    flex-basis: calc(50% - 2.625rem);
  }
  .block-gallery .gallery-item--01-04 {
    flex-basis: calc(50% - 2.625rem);
  }
  .block-gallery--cover .gallery-item--01-04 {
    flex-basis: 50%;
  }
  .block-content .content-column--01-03-copy,
  .block-content .content-column--01-03-media {
    flex-basis: calc(50% - 2.625rem);
  }
  .block-related .related-item {
    flex-basis: calc(50% - 2.625rem);
  }
}

@media all and (min-width: 45em) {
  .block-site .site-links {
    flex-basis: calc(66.667% - 2.625rem);
  }
  .block-site .site-search {
    flex-basis: calc(33.333% - 2.625rem);
    text-align: right;
  }
  .block-site .site-contents {
    flex-basis: calc(33.333% - 2.625rem);
  }
  .categories-item {
    flex-basis: 50%;
  }
  .block-gallery .gallery-item--01-02 {
    flex-basis: calc(50% - 2.625rem);
  }
  .block-gallery--cover .gallery-item--01-02 {
    flex-basis: 50%;
  }
  .block-gallery .gallery-item--01-03 {
    flex-basis: calc(33.333% - 2.625rem);
  }
  .block-gallery--cover .gallery-item--01-03 {
    flex-basis: 33.333%;
  }
  .block-gallery .gallery-item--01-04 {
    flex-basis: calc(25% - 2.625rem);
  }
  .block-gallery--cover .gallery-item--01-04 {
    flex-basis: 25%;
  }
  .news-item > * {
    flex-basis: calc(50% - 2.625rem);
  }
  .block-product .product-column {
    flex-basis: calc(50% - 2.625rem);
  }
  .block-related .related-item {
    flex-basis: calc(33.333% - 2.625rem);
  }
  .block-info .info-column--01-02 {
    flex-basis: calc(50% - 2.625rem);
  }
  .block-info .info-column--01-03 {
    flex-basis: calc(50% - 2.625rem);
  }
  .block-view > * {
    flex-basis: calc(50% - 2.625rem);
  }
}

@media all and (min-width: 45em) {
  .block-articles .articles-heading,
  .block-gallery .gallery-heading,
  .block-heading .heading-column,
  .block-info .info-column--01-01,
  .block-related .related-heading,
  .block-text .text-column,
  .block-video .video-heading {
    padding-right: 33.333%;
  }
}

@media all and (min-width: 60em) {
  .block-articles .articles-item {
    flex-basis: calc(33.333% - 2.625rem);
  }
  .block-info .info-column--01-03 {
    flex-basis: calc(33.333% - 2.625rem);
  }
  .block-related .related-item {
    flex-basis: calc(25% - 2.625rem);
  }
}

@media all and (min-width: 75em) {
  .block-site .site-contents {
    flex-basis: calc(25% - 2.625rem);
  }
}



/* important @media
------------------------------------------------ */

.block-gallery--cover figcaption,
.block-video--cover figcaption {
  padding: 0 1.3125rem 0;
}

/* important @media
------------------------------------------------ */

@media screen and (min-width: 45em) {
  .block-product,
  .block-view--reverse {
    flex-direction: row-reverse;
  }
}



/* blocks
------------------------------------------------ */

.articles-item a {
  display: block;
  position: relative;
}

.articles-item .item-media span {
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  padding: 0.4375rem 1.3125rem 0.4375rem;
  text-align: right;
}

.articles-item .item-media span {
  color: rgba(255, 255, 255, 1);
  background-color: rgba(0, 0, 0, 0.9);
}

.articles-item .item-media span.gold {
  background-color: rgba(204, 153, 34, 0.9);
}

.articles-item .item-media span.silver {
  background-color: rgba(136, 136, 153, 0.9);
}

.articles-item .item-media span.bronze {
  background-color: rgba(187, 119, 51, 0.9);
}

.articles-item img {
  margin-top: 1.75rem;
}

/* blocks
------------------------------------------------ */

.block-banner {
  position: relative;
  padding: 0;
}

.banner-media {
  overflow: hidden;
  height: 0;
}

.banner-media {
  padding-bottom: 90%; /* 10/09 */
}

.banner-media img {
  width: 200%; /* 20/9*90 */
  margin-left: -50%;
}

.banner-copy {
  color: rgba(255, 255, 255, 1);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0 1.3125rem 5.25rem;
}

@media all and (min-width: 45em) {
  .banner-media {
    padding-bottom: 45%; /* 20/09 */
  }
  .banner-media img {
    width: 100%; /* 20/9*45 */
    margin-left: 0;
  }
  .banner-copy h2,
  .banner-copy p {
    padding-right: 33.333%;
  }
}

@media all and (min-width: 60em) {
  .banner-copy {
    padding: 0 5.25rem 5.25rem;
  }
  .banner-copy h2,
  .banner-copy p {
    padding-right: 50%;
  }
}

@media all and (min-width: 75em) {
  .banner-copy {
    padding: 0 calc(50% - 37.5rem + 5.25rem) 5.25rem;
  }
}

/* blocks
------------------------------------------------ */

.categories-item a {
  display: block;
  position: relative;
}

.categories-item .item-media {
  overflow: hidden;
  height: 0;
  padding-bottom: 90%; /* 20/9 */
}

.categories-item .item-media img {
  width: 200%; /* 20/9*90 */
  margin-left: -50%;
}

.categories-item .item-media:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.125);
}

.categories-item:hover .item-media:after {
  background-color: rgba(0, 0, 0, 0.5);
}

.categories-item .item-copy {
  color: rgba(255, 255, 255, 1);
  position: absolute;
  top: calc(50% - 1.3125rem);
  right: 0;
  width: 100%;
  padding: 0 1.3125rem 0;
  text-align: center;
}

.categories-item .item-copy h2 {
  margin-top: 0;
}

.categories-item .item-copy p {
  opacity: 0;
}

.categories-item:hover .item-copy p {
  opacity: 1;
}

@media all and (min-width: 60em) {
  .categories-item .item-copy {
    padding: 0 2.625rem 0;
  }
}

/* blocks
------------------------------------------------ */

.related-item a {
  display: block;
  position: relative;
}

.related-item img {
  margin-top: 1.75rem;
}



/* columns
------------------------------------------------ */

.column-colors {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin: 1.75rem -0.4375rem 0;
  padding-top: calc(90% + 1.75rem);
}

.column-colors .colors-item {
  flex-basis: calc(25% - 0.875rem);
  margin: 0.4375rem 0.4375rem 0.4375rem;
}

.column-colors .colors-item input {
  position: absolute; /* readable */
  left: -999px; /* readable */
}

.column-colors .colors-item .item-media {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  padding: 0 0.4375rem 0;
}

.column-colors .colors-item .item-media {
  opacity: 0; /* not readable */
}

.column-colors .colors-item input:checked ~ .item-media {
  opacity: 1; /* readable */
}

.column-colors .colors-item label .label-button {
  height: 0;
  padding-bottom: 100%;
}

.column-colors .colors-item label span {
  display: block;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-top: 0.4375rem;
}

/* columns
------------------------------------------------ */

.column-icons {
  display: flex;
  flex-wrap: wrap;
  margin: 1.3125rem -0.4375rem 0;
}

.icons-item {
  flex-basis: calc(100% - 0.875rem);
  margin: 0.4375rem 0.4375rem 0.4375rem;
}

.icons-item--01-02 {
  flex-basis: calc(50% - 0.875rem);
}

.icons-item--01-04 {
  flex-basis: calc(25% - 0.875rem);
}

.icons-item--01-06 {
  flex-basis: calc(16.667% - 0.875rem);
}

.icons-item--01-08 {
  flex-basis: calc(12.5% - 0.875rem);
}



/* sticky
------------------------------------------------ */

.header {
  z-index: 999;
}

@media screen and (min-width: 45em) {
  .header {
    position: -webkit-sticky; /* safari */
    position: sticky;
    top: -5.25rem;
  }
}



/* scroll
------------------------------------------------ */

@media screen and (min-width: 45em) {
  .manuals-column {
    scroll-margin-top: 3.5rem; /* header height */
  }
}