/* COLORS */
/* FONTS */
/* >= 768px */
@media screen and (min-width: 768px) {
  .section {
    margin-left: 50px;
    margin-right: 50px;
  }
  :root {
    --font-size-h1: 7vw !important;
    --line-height-h1: 7.5vw !important;
    --font-size-h4: 4vw !important;
    --line-height-h4: 4.5vw !important;
  }
  a.button,
  a.button:active,
  a.button:focus,
  a.button:link,
  a.button:visited,
  button.button,
  button.button:active,
  button.button:link,
  button.button:visited,
  input.form-submit,
  input.form-submit:focus {
    padding: 9px 25px;
  }
  #header > .section #navigation {
    bottom: auto;
    top: 0;
    background-color: #111111;
    height: 100%;
    width: 100%;
    left: 100%;
    transform: translateX(0);
    transition: transform 0.5s ease;
  }
  #header > .section #navigation .table {
    background-color: #111111;
    width: 60%;
  }
  #header > .section #navigation .table .table-cell {
    position: static;
    padding: 100px 50px;
  }
  #header > .section #navigation .table .table-cell #block-cart {
    left: 50px;
  }
  #header > .section #navigation .table .table-cell #block-custom-main-menu ul.menu li a {
    font-size: 5vw;
    line-height: 5vw;
  }
  #header > .section #navigation .table .table-cell #block-custom-main-menu ul.menu li.has-submenu > a::before {
    font-size: 30px;
    line-height: 5vw;
  }
  #header > .section #navigation .table .table-cell #block-custom-main-menu ul.menu li.has-submenu .submenu {
    width: 40%;
    height: 100% !important;
    background-color: #292929;
    position: absolute;
    top: 0;
    right: 0;
    transform: translateX(100%);
    display: flex !important;
    transition: transform 0.5s ease;
    margin-top: 0;
    flex-direction: column;
    justify-content: center;
    padding: 100px 50px;
  }
  #header > .section #navigation .table .table-cell #block-custom-main-menu ul.menu li.has-submenu .submenu li a {
    font-size: 3.5vw;
    line-height: 3.75vw;
  }
  #header.promotion #secondary-menu {
    top: 60px;
  }
  body.menu-open #header #navigation {
    transform: translateX(-100%);
    transition: transform 0.5s ease;
  }
  body.menu-open #header.small.promotion > .section #menu-icon {
    top: 65px;
  }
  body.menu-open #header.small > .section #menu-icon {
    position: fixed;
    top: 25px;
    right: 50px;
  }
  body.submenu-open #header #navigation .table .table-cell #block-custom-main-menu ul.menu li.has-submenu.open > a {
    color: #ef0003;
  }
  body.submenu-open #header #navigation .table .table-cell #block-custom-main-menu ul.menu li.has-submenu.open > a::before {
    transform: none;
  }
  body.submenu-open #header #navigation .table .table-cell #block-custom-main-menu ul.menu li.has-submenu .submenu {
    transform: translateX(0);
  }
  body.menu-open #secondary-menu {
    min-width: unset;
  }
  #header.promotion + #secondary-menu {
    top: 60px;
  }
  #secondary-menu {
    bottom: auto;
    top: 30px;
    transform: translate(-50%, -200%);
    width: calc(100% - 100px);
    z-index: 999;
    max-width: unset;
    padding: 10px 50px;
  }
  #secondary-menu .current {
    display: none;
  }
  #secondary-menu .menu {
    display: block;
  }
  #secondary-menu .menu .menu {
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
  }
  #secondary-menu .menu .menu li {
    line-height: 30px;
    list-style: none;
    position: relative;
  }
  #secondary-menu .menu .menu li a {
    font-weight: 700;
    color: #fff;
    line-height: 30px;
    white-space: nowrap;
  }
  #secondary-menu .menu .menu li a:hover {
    color: #111111;
  }
  #secondary-menu .menu .menu li a:hover.dropdown::after {
    background-color: #111111;
  }
  #secondary-menu .menu .menu li a:hover.dropdown::before {
    background-color: #111111;
  }
  #secondary-menu .menu .menu li a.is-active {
    color: #111111;
    position: relative;
  }
  #secondary-menu .menu .menu li a.dropdown {
    position: relative;
    /*
                            &::before {
                                content: '';
                                width: 14px;
                                height: 3px;
                                background-color: #fff;
                                position: absolute;
                                top: ~"calc(50% - 1.5px)";
                                right: 0;
                                transition: background-color 0.5s ease;
                            }

                            &::after {
                                content: '';
                                width: 14px;
                                height: 3px;
                                background-color: #fff;
                                position: absolute;
                                top: ~"calc(50% - 1.5px)";
                                right: 0;
                                transform: rotate(90deg);
                                transition: background-color 0.5s ease, transform 0.5s ease;
                            }
                            */
  }
  #secondary-menu .menu .menu li a.dropdown.active:after {
    transform: rotate(0deg);
  }
  #secondary-menu .menu .menu li .submenu.dropdown-content {
    background-color: #ef0003;
    margin-right: 0;
    transform: translateX(50%);
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5);
  }
  #secondary-menu .menu .menu li .submenu.dropdown-content::before {
    right: 50%;
    transition: translateX(-50%) rotate(45deg);
    background: #ef0003;
  }
  #footer {
    text-align: left;
    padding: 100px 0;
  }
  #footer > .section .logo {
    margin: 0 0 20px 0;
  }
  #footer > .section .siegel {
    margin: 0 0 50px 0;
  }
  #footer > .section .social-media {
    display: inline-flex;
    position: absolute;
    bottom: 0;
    right: 0;
    justify-content: flex-start;
  }
  #standorte {
    padding: 50px;
  }
  #standorte .wrapper .standort .promotion .wrapper .info a .icon-info {
    transition: color 0.5s ease;
  }
  #standorte .wrapper .standort .promotion .wrapper .info a:hover .icon-info {
    color: #ef0003;
  }
}
/* >= 1024 */
@media screen and (min-width: 1023px) {
  :root {
    --font-size-h1: 5vw !important;
    --line-height-h1: 5.25vw !important;
    --font-size-h4: 3vw !important;
    --line-height-h4: 3.5vw !important;
    --font-size-default: 1.57vw !important;
    --line-height-default: 1.97vw !important;
    --font-size-default: clamp(18px, 1.57vw, 30px) !important;
    --line-height-default: clamp(26px, 2.34vw, 45px) !important;
  }
  .section {
    margin-left: 8.33vw !important;
    margin-right: 8.33vw !important;
  }
  #main-wrapper {
    padding-top: 13vw;
  }
  #main.promotion #intro .section {
    min-height: calc(100vh - 16.8vw - 44px);
  }
  a.button,
  a.button:active,
  a.button:focus,
  a.button:link,
  a.button:visited,
  button.button,
  button.button:active,
  button.button:link,
  button.button:visited,
  input.form-submit,
  input.form-submit:focus {
    border-radius: clamp(26px, 2.34vw, 45px) !important;
  }
  .h1 {
    margin-bottom: 4.8vw;
  }
  .h4 {
    margin-bottom: 2.9vw;
  }
  #header > .section {
    padding: 2.9vw 0;
  }
  #header > .section #logo {
    width: clamp(200px, 15vw , 450px);
  }
  #header > .section #navigation {
    background-size: cover;
  }
  #header > .section #navigation .menu-video {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 40vw;
    height: 100%;
  }
  #header > .section #navigation .menu-video video {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #header > .section #navigation .table {
    position: relative;
    transform: translateX(40vw);
    transition: transform 0.5s ease;
    width: 100%;
  }
  #header > .section #navigation .table .table-cell {
    padding: 100px 50px 100px 8.33vw;
  }
  #header > .section #navigation .table .table-cell #block-cart {
    left: 8.33vw;
  }
  #header > .section #navigation .table .table-cell #block-custom-main-menu ul.menu li.has-submenu .submenu {
    padding: 100px 100px 100px 8.33vw;
  }
  body.submenu-open #header #navigation .table {
    transform: translateX(0vw);
  }
  #secondary-menu {
    width: auto;
  }
  #kontakt-wrapper #kontakt {
    border-bottom-left-radius: 1.56vw;
    border-bottom-right-radius: 1.56vw;
  }
  #kontakt-wrapper #kontakt .h4 {
    font-size: var(--font-size-h1);
    line-height: var(--line-height-h1);
    margin-bottom: 0.5vw;
  }
  #kontakt-wrapper #kontakt .small {
    font-size: clamp(12px,  1.04vw , 20px);
    line-height: clamp(12px,  1.04vw , 20px);
    margin-bottom: 7.8vw;
  }
  #kontakt-wrapper #kontakt .hours {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4.8vw;
  }
  #kontakt-wrapper #kontakt .hours .outside,
  #kontakt-wrapper #kontakt .hours .inside,
  #kontakt-wrapper #kontakt .hours .special {
    border-bottom: none;
    position: relative;
    display: flex;
    flex-direction: column;
  }
  #kontakt-wrapper #kontakt .hours .outside::before,
  #kontakt-wrapper #kontakt .hours .inside::before,
  #kontakt-wrapper #kontakt .hours .special::before {
    content: '';
    height: 100%;
    width: 1px;
    background-color: #111111;
    position: absolute;
    right: -2.4vw;
    top: 0;
  }
  #kontakt-wrapper #kontakt .hours .outside .wrapper .titel,
  #kontakt-wrapper #kontakt .hours .inside .wrapper .titel,
  #kontakt-wrapper #kontakt .hours .special .wrapper .titel {
    pointer-events: none;
  }
  #kontakt-wrapper #kontakt .hours .outside .wrapper .more,
  #kontakt-wrapper #kontakt .hours .inside .wrapper .more,
  #kontakt-wrapper #kontakt .hours .special .wrapper .more {
    display: none;
  }
  #kontakt-wrapper #kontakt .hours .outside .open,
  #kontakt-wrapper #kontakt .hours .inside .open,
  #kontakt-wrapper #kontakt .hours .special .open {
    display: block !important;
    margin-top: auto;
  }
  #kontakt-wrapper #kontakt .hours .outside .open .office-hours .office-hours__item .office-hours__item-label,
  #kontakt-wrapper #kontakt .hours .inside .open .office-hours .office-hours__item .office-hours__item-label,
  #kontakt-wrapper #kontakt .hours .special .open .office-hours .office-hours__item .office-hours__item-label {
    min-width: 8.8vw;
  }
  #kontakt-wrapper #kontakt .hours .inside {
    padding-left: 20%;
  }
  #kontakt-wrapper #kontakt .hours .inside::before {
    display: none;
  }
  #kontakt-wrapper #kontakt .hours .special::before {
    display: none;
  }
  #standorte {
    padding: 4.165vw 8.33vw;
  }
  #standorte .logo {
    width: clamp(200px, 13vw , 350px);
    margin-bottom: 5.2vw;
  }
  #standorte .h4 {
    font-size: var(--font-size-h1);
    line-height: var(--line-height-h1);
  }
  #standorte .wrapper {
    padding: 4.88vw 0;
    position: relative;
    gap: 2.6vw;
  }
  #standorte .wrapper .standort {
    position: static;
    height: auto;
  }
  #standorte .wrapper .standort:first-of-type a {
    border: none;
  }
  #standorte .wrapper .standort:first-of-type a .titel {
    font-size: var(--font-size-h1);
    line-height: var(--line-height-h1);
    opacity: 1;
  }
  #standorte .wrapper .standort:first-of-type a .image .titel {
    font-size: var(--font-size-h1);
    line-height: var(--line-height-h1);
    color: #fff;
    display: block;
    position: absolute;
    top: 4.88vw;
    left: -66.67%;
  }
  #standorte .wrapper .standort > a {
    position: static;
    height: auto;
  }
  #standorte .wrapper .standort > a .titel {
    position: relative;
    top: auto;
    left: auto;
    font-size: var(--font-size-h1);
    line-height: var(--line-height-h1);
    opacity: 0.3;
    transition: opacity 0.5s ease;
    padding-bottom: 0.15vw;
  }
  #standorte .wrapper .standort > a .image {
    width: 60%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 30;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
  }
  #standorte .wrapper .standort > a .image video,
  #standorte .wrapper .standort > a .image img {
    transform: none !important;
  }
  #standorte .wrapper .standort > a .image .icon-more {
    display: block;
    font-size: 60px;
    line-height: 60px;
    color: #ef0003;
    position: absolute;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    z-index: 99;
  }
  #standorte .wrapper .standort > a:hover .titel {
    opacity: 1;
  }
  #standorte .wrapper .standort > a:hover .image {
    opacity: 1;
  }
  #standorte .wrapper .standort .promotion {
    position: relative;
    left: auto;
    top: auto;
    margin-top: 0.5vw;
  }
  #standorte .wrapper .standort .promotion .icon {
    height: 3.9vw;
    width: 3.9vw;
  }
  #standorte .wrapper .standort .promotion .wrapper {
    padding: 0 20px 0 0;
  }
  #standorte .wrapper .standort .promotion .wrapper .titel {
    font-size: clamp(16px, 1.04vw , 20px);
    line-height: clamp(18px, 1.09vw , 22px);
  }
  #standorte .wrapper .standort .promotion .wrapper .text {
    font-size: clamp(16px, 1.04vw , 20px);
    line-height: clamp(18px, 1.09vw , 22px);
  }
  #standorte .wrapper .standort .promotion .wrapper .info {
    margin-top: 0.25vw;
  }
  #standorte .wrapper .standort .promotion .wrapper .info .icon-info {
    font-size: clamp(16px, 1.04vw , 20px);
    line-height: clamp(18px, 1.09vw , 22px);
  }
}
/* >= 1248 */
@media screen and (min-width: 1247px) {
  #header.promotion #secondary-menu {
    top: 80px;
  }
  #header #secondary-menu {
    top: 50px;
  }
}