/**
* Global Variables 
*/
:root {
  /* Color */
  --primary-color: #333;
  --secondary-color: #454542;
  --background-color: #fff;
  --hover-bg-color: rgba(0, 0, 0, .0392156863);
  --cta-border-color: rgba(0, 0, 0, .45);
  --border-color-light: #efefef;
  --modal-backdrop-color: rgba(114, 114, 112, 0.8);
  --box-shadow-color: rgba(0, 0, 0, 0.1);
  --link-color: #3b3b3b;
  --link-hover-color: #005382;
  --spreadshop-bg-color: #262626;
  
  /* Font */
  --font-size-small: 14px;
  --font-size-base: 16px;
  --font-size-large: 32px;
  
  /* Spacing */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-m: 24px;
  --space-ml: 32px;
  --space-l: 40px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 72px;
  --space-4xl: 80px;
  --space-5xl: 120px;
  --space-6xl: 150px;
  
  --padding-header: 0 max(var(--space-l), (100vw - 1400px) / 2);

  /* Animation */
  --transition-duration-s: 0.3s;
  --transition-style: ease-in-out;
}

/* Spreadshop */
h1, h2, h3, h4 {
  font-family: 'SoletoTKHeadline', Arial, Helvetica, sans-serif;
}

.SprdMain {
  font-family: 'SoletoTK', Arial, Helvetica, sans-serif;
  position: inherit !important;
}

.sprd-skip-nav {
  display: none;
}

.sprd-startpage-teaser {
  display: none;
}

.sprd-startpage-teaser--with-link {
  display: none;
}

.sprd-startpage {
  overflow: hidden;
}

.sprd-startpage-about-us__cta {
  display: none;
}

.sprd-c-s3 {
  color: #fff;
}

.sprd-bg-m1 {
  background-color: var(--spreadshop-bg-color);
}

.sprd-header-container {
  visibility: hidden;
  height: 0;
}
 
.SprdMain .sprd-header__actions {
  align-items: center;
  display: flex;
  position: fixed;
  top: 23px;
  z-index: 100;
  right: calc((100vw - 70%)/2);
  visibility: visible;
}

.sprd-basket-indicator__icon use{
  display: none;
}

.sprd-basket-indicator__icon {
  background-image: url('./assets/svg/bestellen.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px !important;
  height: 24px !important;
}

.SprdMain .sprd-basket-indicator__button {
  color: var(--spreadshop-bg-color);
}

.SprdMain .sprd-breadcrumb-nav {
  padding-top: 140px;
}

/* Website */
html {
  background-color: var(--background-color);
}

body.modal-open {
  overflow: hidden;
}

.hidden {
  display: none !important;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 var(--space-m);
  height: var(--space-2xl);
  background-color: var(--background-color);
  box-shadow: 0 2px 0 var(--box-shadow-color);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: var(--space-2xl);
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  gap: 10px;
  box-sizing: border-box;
}

.header-logo__container{
  position: sticky;
  top: 0;
  aspect-ratio: 1;
  height: var(--space-4xl);
  transform-origin: 0 0;
  width: auto;
  align-self: flex-start;
  transition: height .4s var(--transition-style) .15s;
  z-index: 3000;
}

.shrink .header-logo__container {
  height: var(--space-2xl);
}

.header-logo__image{
  width: 100%;
  height: 100%;
}

.header-action {
  display: flex;
}

.menu-button {
  background: none;
  border: none;
  font-size: 1.5em;
  cursor: pointer;
  color: var(--primary-color);
  height: var(--space-xl);
  width: var(--space-xl);
  padding-top: var(--space-xs);
}

.menu-button:hover {
  background-color: var(--hover-bg-color);
  border-radius: var(--space-xxs);
}

.modal {
  display: none;
  background: var(--background-color);
  border-bottom: 2px solid #ccc;
  border-radius: 0 0 var(--space-xs) var(--space-xs);
  padding: 20px;
  box-shadow: 0 var(--space-xxs) var(--space-xs) var(--box-shadow-color);
}

.modal-content {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: auto;
  animation: slide-in var(--transition-duration-s) var(--transition-style);
  background-color: var(--background-color);
}

.modal-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: var(--space-2xl);
}

.modal-header-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--background-color);
  border: none;
  cursor: pointer;
  width: var(--space-xl);
  height: var(--space-xl); 
}

.modal-header-btn:hover {
  background-color: var(--hover-bg-color);
  border-radius: var(--space-xxs);
}

.modal-header-btn__text {
  display: none;
  font-family: 'SoletoTK', Arial, Helvetica, sans-serif;
  font-size: var(--font-size-small);
  line-height: 1.42;
  color: var(--secondary-color);
  margin-right: 10px;
}

.modal-header-btn__icon {
  height: var(--space-m);
  width: var(--space-m);
}

.modal-header-btn__icon-image {
  height: 100%;
  width: 100%;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #727270;
  opacity: .8;
  z-index: 1000;
}

@keyframes slide-in {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.modal-body {
  padding: var(--space-l) max(var(--space-l),(100vw - 1400px) / 2);
  max-height: calc(100vh - var(--space-3xl));
}

.navbar-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.navbar-link {
  display: flex;
  justify-content: space-between;
  padding: var(--space-sm) 0;
  width: 100%;
  border-bottom: 1px solid var(--border-color-light);
  text-align: left;
  align-items: center;
  font-family: 'SoletoTK', Arial, Helvetica, sans-serif;
  font-size: var(--font-size-base);
  line-height: var(--space-m);
  color: var(--link-color);
  text-decoration: none;
}

.navbar-link:hover {
  padding-left: var(--space-xs);
  color: var(--link-hover-color);
}

.sprd-basket-indicator {
  height: var(--space-m);
}

.navbar-link-image {
  height: var(--space-m);
  width: var(--space-m);
}

.navbar-link-image img {
  height: 100%;
  width: 100%;
}

.navbar ul li ul {
  display: none;
  padding-left: 20px;
}

.teaser-container {
  position: relative;
  width: 100%;
  margin: auto;
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 670px;
}

.teaser-blur {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: 1;
  background-size: cover;
  filter: blur(10px) brightness(0.8);
}

.teaser-main, .teaser-blur img {
  height: 100%;
  width: 100%;
}

.teaser-blur.left {
  left: 0;
  background: url('./assets/images/TK-BrandStore_Header.jpg') no-repeat center center;
  background-size: cover;
  transform: scale(1.1);
}

.teaser-blur.right {
  right: 0;
  background: url('./assets/images/TK-BrandStore_Header.jpg') no-repeat center center;
  background-size: cover;
  transform: scale(1.1);
}

.teaser-main {
  position: relative;
  z-index: 2;
  background: url('./assets/images/TK-BrandStore_Header.jpg') no-repeat center center;
  background-size: cover;
  width: 60%;
  height: 100%;
  margin-left: 0%;
  max-width: 1680px;
  flex: 0 0 100%;
}

.teaser-content {
  position: absolute;
  right: 0;
  bottom: 10%;
  background: rgba(255, 255, 255, 0.8);
  padding: var(--space-m);
  text-align: left;
  min-height: 100px;
  margin-left: var(--space-m);
  text-decoration: none;
  color: var(--primary-color);
  z-index: 3;
  cursor: pointer;
  pointer-events: all;
  box-shadow: 0 var(--space-xxs) var(--space-xs) rgba(0, 0, 0, 0.2);
}

.teaser-content__headline {
  font-family: 'SoletoTKHeadline', Arial, Helvetica, sans-serif;
  font-size: 22px;
  line-height: 1.27;
  margin-bottom: 0;
}

.teaser-content__subline {
  font-family: 'SoletoTK', Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.41;
}

.cta{
  display: none;
  font-family: 'SoletoTK', Arial, Helvetica, sans-serif;
  align-items: center;
  justify-content: space-around;
  cursor: pointer;
  padding: 10px;
  background-color: initial;
  color: var(--secondary-color);
  border: 2px solid var(--cta-border-color);
  min-width: 55px;
}

.cta__text {
  margin-right: 10px;
}

.teaser-content .cta__text::after {
  content: " ";
  border-bottom: 2px solid transparent;
  width: 0;
  display: block;
  height: 2px;
  transition: width .5s cubic-bezier(.191,1,.22,1);
}

.teaser-content:hover .cta__text::after {
  width: 100%;
  border-color: var(--cta-hover-border-color);

}

.cta__icon {
  height: var(--space-m);
}

.cta__icon-image {
  height: 100%;
  width: 100%;
}

@media (min-width: 768px) {
  .sprd-breadcrumb-nav {
    padding-top: 180px;
  }

  .header {
    padding: 0 max(40px,(100vw - 1280px) / 2 + 40px);
    height: var(--space-3xl);
  }

  .header-logo__container {
    height: 100px;
  }

  .shrink .header-logo__container {
    height: var(--space-3xl);
  }

  .modal-header {
    height: var(--space-3xl);
  }

  .teaser-content__headline {
    font-size: 24px;
    line-height: 1.33;
  }

  .cta {
    display: inline-flex;
  }

  .navbar-link {
    font-size: 20px;
    line-height: 28px;
  }

  .SprdMain .sprd-header__actions {
    right: calc((100vw - 80%) / 2);
  }

  .teaser-content {
    right: 10%;
    max-width: 650px;
    padding: var(--space-ml) var(--space-5xl) var(--space-ml) var(--space-l);
  }
}

@media (min-width: 1024px) {
  .header {
    height: var(--space-4xl);
  }

  .header-logo__container {
    height: var(--space-5xl);
  }

  .shrink .header-logo__container {
    height: var(--space-4xl);
  }

  .modal-header {
    height: var(--space-3xl);
  }

  .modal-header-btn {
    width: auto;
  }

  .modal-header-btn__text {
    display: block;
  }

  .teaser-content__headline {
    font-size: var(--font-size-large);
  }

  .cta {
    display: inline-flex;
  }

  .navbar-link {
    font-size: 24px;
    line-height: var(--space-ml);
  }

  .SprdMain .sprd-header__actions {
    right: calc((100vw - 80%) / 2);
  }

  .teaser-main {
    flex: 0 0 90%;
  }

  .teaser-content {
    padding: var(--space-m) var(--space-3xl) var(--space-m) var(--space-l);
  }
}

@media (min-width: 1025px) {
  .teaser-main {
    flex: 0 0 85%;
    margin-left: 0;
  }

  .teaser-content {
    max-width: 350px;
    padding: var(--space-ml) var(--space-6xl) var(--space-ml) var(--space-xl);
  }
}

@media (min-width: 1401px) {
  .modal-header {
    height: var(--space-3xl);
    padding: 0 max(var(--space-l),(100vw - 1400px) / 2);
  }

  .SprdMain .sprd-header__actions {
    right: calc((100vw - 78%) / 2);
  }

  .SprdMain .sprd-footer {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    right: 0;
    background-color: var(--spreadshop-bg-color);
    align-items: center;
    max-width: unset;
  }

  .SprdMain .sprd-info-footer {
    max-width: 1400px;
    padding: 0 0.5em;
  }

  .SprdMain .sprd-service-footer {
    max-width: 1400px;
  }

  .teaser-content {
    right: calc((100vw - 1280px) / 2);
  }
  
}

@media (min-width: 1480px) {
  .SprdMain .sprd-header__actions {
    right: calc((100vw - 70%) / 2);
  }
}

@media (min-width: 1680px) {
  .teaser-container {
    justify-content: center;

  }
  .teaser-main {
    flex: 0 0 1344px;
    margin-left: -10%;

  }
}

@media (min-width: 1700px) {
  .SprdMain .sprd-header__actions {
    right: calc((100vw - 60%) / 2);
  }
}