/*
Theme Name: Toyota Strobel
Template: blockundstift
Version: 1.0.0
Description: Custom WordPress Theme for Autohaus Franz Strobel KG
Author: blockundstift.de
Author URI: https://blockundstift.de
Text Domain: toy
*/

/*
## Variables
## Basic HTML Settings
## Type & Colors
  ### Type
  ### Colors
## Header & Navigation
  ### Header
  ### Navigation
  ### Search
  ### Off Canvas Navigation
  ### Hamburger Menu
## Layout
  ### Basic Layout
  ### Flexbox
  ### Cover & Slider
  ### Independent Layout Elements
  ### Layout Elements by Page/ID
## Utility
  ### Margins
  ### Paddings
  ### Font Sizes
  ### Width Height Aspect-Ratio
## Footer
## Input & Buttons
## Cookies
## Galleries & Images
## Gutenberg Blocks
## SnipCart
## Playground & Page Animations
## Layout Grid

----------------------------------------------------------------
## Variables
--------------------------------------------------------------*/

:root {
  --text-color: #282830;
  --primary-color: #282830;
  --secondary-color: #FF0022;
  --tertiary-color: #6C7073;
  --additional-color: #0072F0;
  --grey: #EFF0F0;
  /* --light-grey: #f8f8f8; */
}
:root {
  --admin-bar-color: #FF0022;
  --admin-bar-active-color: #282830;
}


:root {
  --icon-color: var(--primary-color);
  --icon-hover-color: var(--secondary-color);

  --button-color: #fff;
  --button-hover-color: #fff;

  --button-background: var(--primary-color);
  --button-hover-background: var(--tertiary-color);

  /* --input-border-width: 1px; */
  /* --input-border: var(--input-border-width) solid var(--primary-color); */
  /* --input-hover-border: var(--input-border-width) solid var(--secondary-color); */
  /* --input-background: transparent; */
  /* --input-hover-background: transparent; */

  --navigation-color: var(--tertiary-color);
  --navigation-hover-color: var(--primary-color);
  --navigation-active-color: var(--primary-color);

  --link-color: var(--text-color);
  --link-hover-color: var(--primary-color);


  --arrow-color: var(--primary-color);
  --arrow-hover-color: var(--secondary-color);
  --arrow-background: rgb(255 255 255 / 100%);
  --arrow-hover-background: rgb(255 255 255 / 30%);
}

:root {
  --header-height-estimated: 92px;
  --cursor: url('img/cursor.svg') 7.5 7.5, pointer;
}

:root {
  --font-size-p: 16px;
  /* --font-size-p: clamp(1rem, calc(1.125 / 87.5 * 100vw), 1.125rem);
  --font-size-h1: clamp(2.25rem, calc(2.625 / 8.75 * 100vw), 2.625rem);
  --font-size-h2: clamp(1.953rem, calc(2.125 / 112.5 * 100vw), 2.125rem);
  --font-size-h3: clamp(1.563rem, calc(1.75 / 112.5 * 100vw), 1.75rem); */
  --font-size-h4: clamp(1rem, calc(1.125 / 87.5 * 100vw), 1.125rem);
}


@media (min-width: 376px) and (min-height: 376px) {
  :root {
    --font-size-big-faktor: 1.15;
    /* --font-size-huge-faktor: var(--font-size-big-faktor); */
    --font-size-huge-faktor: 1.5;
  }
}
@media (min-width: 576px) and (min-height: 576px) {
  :root {
    --font-size-huge-faktor: 1.5;
  }
}


/*--------------------------------------------------------------
## Basic HTML Settings
--------------------------------------------------------------*/

body {
  hyphens: none;
}

/*--------------------------------------------------------------
## Type & Colors
--------------------------------------------------------------*/

/*--------------------------
### Type
---------------------------*/


@font-face {
  font-family: 'Figtree';
  src: url('fonts/Figtree-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Figtree';
  src: url('fonts/Figtree-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Figtree';
  src: url('fonts/Figtree-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Figtree';
  src: url('fonts/Figtree-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Figtree';
  src: url('fonts/Figtree-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Figtree';
  src: url('fonts/Figtree-SemiBoldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Figtree';
  src: url('fonts/Figtree-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Figtree';
  src: url('fonts/Figtree-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Figtree';
  src: url('fonts/Figtree-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Figtree';
  src: url('fonts/Figtree-ExtraBoldItalic.woff2') format('woff2');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Figtree';
  src: url('fonts/Figtree-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Figtree';
  src: url('fonts/Figtree-BlackItalic.woff2') format('woff2');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Figtree';
  src: url('fonts/Figtree-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Figtree';
  src: url('fonts/Figtree-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

body {
  font-family: 'Figtree', sans-serif;
}
.text-vw,
.text-vw-max {
  font-weight: 300;
}
@media (min-width: 376px) {
  .text-vw,
  .font-size-vw,
  .headline-size-vw,
  .headline-vw,
  .child-text-vw > * {
    /* font-size: calc(3vmax * var(--font-size-huge-faktor)) !important; */
    font-size: calc(2vmax * var(--font-size-huge-faktor)) !important;
  }
  .text-vw-max,
  .font-size-vw-max,
  .headline-size-vw-max,
  .headline-vw-max,
  .child-text-vw-max > *,
  .text-vw-max .inherit-max {
    font-size: calc(6vmax * var(--font-size-huge-faktor)) !important;
  }
}

@media (max-width: 1099.98px) {
  .max-4 h1,
  .max-4 .h1,
  .max-4 h2,
  .max-4 .h2,
  .max-4 h3,
  .max-4 .h3,
  .max-4 h4,
  .max-4 .h4,
  .max-4 p,
  .max-4 .p {
    hyphens: auto;
  }
}
@media (max-width: 767.98px) {
  h1, .h1,
  h2, .h2,
  h3, .h3,
  h4, .h4 {
    hyphens: auto;
  }
}

h4 + .text-vw {
  margin-top: 0;
}
.text-vw:has(+ h4) {
  margin-bottom: 0;
}
nav.navigation-off-canvas,
nav.navigation-off-canvas ul {
  font-size: 22px !important;
}
.checkmark li {
  padding-left: 15px;
  list-style: none;
  position: relative;
}
.checkmark li:before {
  content: url('img/checked-list.svg');
  position: absolute;
  left: -1em;
}
.model-ovw-price {
  /* font-weight: 700; */
}


/*--------------------------
### Colors
---------------------------*/

.header-inverted nav .current-menu-item > a {
  color: var(--tertiary-color);
}
.primary-background,
.content-primary-background {
  color: #fff;
}
.content-primary-background div:has(> .pb-block-content) {
  background: var(--primary-color);
}
.content-primary-background.child-gutter.child-container .gutter-legacy:has(> .pb-block-content) {
  margin-right: unset;
  margin-left: unset;
}

@media (max-width: 991.98px) {
  .navigation-off-canvas ul > li.current-menu-item:not(.current-menu-ancestor) > a {
    color: var(--additional-color);
  }
  .navigation-off-canvas ul > li.current-menu-item.current-menu-ancestor > a {
    color: #fff;
  }
}

/*--------------------------------------------------------------
## Header & Navigation
--------------------------------------------------------------*/
/*--------------------------
### Header
---------------------------*/

.main-header {
  background: #fff;
  border: 1px solid #808080;
  border-width: 1px 0;
}
.main-header.header-inverted {
  background: var(--primary-color);
}
@media (min-width: 992px) {
  .main-header.header-minified.scroll-down {
    background: rgba(255, 255, 255, .7);
    backdrop-filter: blur(20px);
  }
  .main-header.header-minified.scroll-down .header-social-media,
  .main-header.header-minified.scroll-down .header-navigation {
    opacity: 1;
  }
}
.header-logo {
  padding: 20px 0;
}
.header-minified .header-logo {
  padding: 10px 0;
}
.header-logo-svg,
.footer-logo-svg,
.logo-image {
  max-width: 134px;
}
.header-group,
.footer-group {
  width: calc(100% - 250px); 
}
@media (min-width: 1200px) {
  .header-group .header-button {
    margin-right: 30px;
  }
}
@media (min-width: 1300px) {
  .header-group .header-button {
    margin-right: 75px;
  }
}
@media (min-width: 1400px) {
  .header-group .header-button {
    margin-right: 125px;
  }
}


/*--------------------------
### Navigation
---------------------------*/

@media (min-width: 992px) {
  header nav:not(.navigation-off-canvas) ul:not(.sub-menu) > li > a:not(.no-decoration):before,
  header nav:not(.navigation-off-canvas) ul:not(.sub-menu) > li.current-menu-item > a:not(.no-decoration):before {
    right: 50%;
    left: 50%;
    background: var(--secondary-color);
    height: 5px;
    top: 50px;
  }
  header.header-minified nav:not(.navigation-off-canvas) ul:not(.sub-menu) > li > a:not(.no-decoration):before,
  header.header-minified nav:not(.navigation-off-canvas) ul:not(.sub-menu) > li.current-menu-item > a:not(.no-decoration):before {
    top: 40px;
  }
  header nav:not(.navigation-off-canvas) ul:not(.sub-menu)  > li > a:not(.no-decoration):hover:before,
  header nav:not(.navigation-off-canvas) ul:not(.sub-menu) > li.current-menu-item > a:not(.no-decoration):before {
    right: 0;
    left: 0;
    height: 5px;
    opacity: 1;
    width: 100%;
  }
  header.header-inverted nav:not(.navigation-off-canvas) ul:not(.sub-menu)  > li > a:not(.no-decoration):before {
    background: var(--secondary-color);
  }
}
.main-navigation .sub-menu {
  background: rgb(255 255 255 / 80%);
  top: 55px;
  border-top: 1px solid var(--secondary-color);
}
.header-minified .main-navigation .sub-menu {
  top: 45px;
}
.main-navigation .sub-menu:before {
  content: unset;
}
@media (min-width: 992px) {
  nav .sub-menu a {
    color: var(--primar-color);
  }
  nav .sub-menu a:hover {
    color: var(--tertiary-color);
  }
}
@media (max-width: 1099.98px) {
  nav.main-navigation > ul > li:not(:first-of-type) {
    margin-left: 10px;
  }
}
@media (max-width: 991.98px) {
  .strobel-logo {
    order: 1;
  }
  .first-seperator {
    order: 2;
  }
  .toyota-logo {
    order: 3;
  }
  .pipe-seperator.second-seperator {
    order: 4;
  }
  .header-group {
    order: 5;
    justify-content: flex-end !important;
    width: auto;
  }
}
@media (max-width: 575.98px) {
  .header-group {
    width: calc(100% - 300px);
  }
  .pipe-seperator.second-seperator {
    display: none;
  }
}

/*--------------------------
### Search
---------------------------*/
/*--------------------------
### Off Canvas Navigation
---------------------------*/

.off-canvas-container,
.pop-up {
  background: rgb(40 40 48 / 95%);
}
@media (min-width: 576px) {
  .pop-up-wrapper-small.pop-up-wrapper-model {
    top: 5%;
    bottom: 5%;
  }
  .pop-up-wrapper-small.pop-up-wrapper-model + .click-outside .close-top,
  .pop-up-wrapper-small.pop-up-wrapper-model + .click-outside .close-bottom {
    height: 5%;
  }
}
@media (max-width: 575.98px) {
  .pop-up-wrapper-model {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .pop-up-wrapper-small.pop-up-wrapper-model + .click-outside .close-top,
  .pop-up-wrapper-small.pop-up-wrapper-model + .click-outside .close-right,
  .pop-up-wrapper-small.pop-up-wrapper-model + .click-outside .close-bottom,
  .pop-up-wrapper-small.pop-up-wrapper-model + .click-outside .close-left {
    width: 0;
    height: 0;
  }
  .close-off-canvas:has(+ .pop-up-wrapper-small.pop-up-wrapper-model) {
    top: 15px;
    right: 15px;
  }
  .pop-up-wrapper-small.pop-up-wrapper-model .pop-up-inner-content {
    padding: 0;
  }
}



/*--------------------------
### Hamburger Menu
---------------------------*/

/*--------------------------------------------------------------
## Layout
--------------------------------------------------------------*/
/*--------------------------
### Basic Layout
---------------------------*/

/*--------------------------
### Flexbox
---------------------------*/
/*--------------------------
### Cover & Slider
---------------------------*/

.cover-image,
.cover-slides,
.cover-video {
  height: 96vh; /* Fallback not support Custom Properties */
  height: calc(var(--vh, 1vh) * 96);
}
.button-down {
  height: 0;
  position: relative;
}
.intro-like .cover-intro-wrapper,
.intro-section:not(.cover-no-image) .cover-intro-wrapper {
  background: var(--primary-color);
  padding: var(--global-margin);
  color: #fff;
  width: 55%;
}
@media (max-width: 1099.98px) {
  .intro-like .cover-intro-wrapper,
  .intro-section:not(.cover-no-image) .cover-intro-wrapper {
    width: 70%;
  }
}
@media (max-width: 767.98px) {
  .intro-like .cover-intro-wrapper,
  .intro-section:not(.cover-no-image) .cover-intro-wrapper {
    width: 100%;
  }
}
.intro-like .cover-intro-wrapper:after,
.intro-section:not(.cover-no-image) .cover-intro-wrapper:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 5px;
  width: 80%;
  background: var(--secondary-color);
}
.cover-intro.intro-like {
  bottom: 10%;
  left: 10%;
}


/*--------------------------
### Independent Layout Elements
---------------------------*/

.container.container-header,
.container.container-footer {
  max-width: unset;
  width: 100%;
}
@media (min-width: 992px) {
  .container.container-header,
  .container.container-footer {
    padding-right: 15px;
    padding-left: 15px;
  }
}
.pop-up .container-small {
  width: auto;
}
.button-start {
  bottom: -75px;
  right: calc(50% - 40px);
}
.arrows.up,
.arrows.down {
  background: transparent;
}
.arrows.down {
  width: auto;
}
.arrows,
.slides-arrows,
button.glide__arrow {
  border-radius: 40px;
}
.slides-arrows.next,
.slides-arrows.prev,
.portfolio-thumbnail .arrows.next {
  padding: 0 14px;
  height: 40px;
}
.portfolio-thumbnail .arrows.next {
  padding-top: 11px;
  padding-left: 15px;
}
.portfolio-link .arrows {
  color: var(--arrow-color);
  background: var(--arrow-background);
}
.back-top {
  right: calc(50% - 20px);
}
.pipe-seperator {
  width: 1px;
  height: 40px;
  background: #808080;
  display: flex;
  flex-direction: column;
  align-self: center;
}
.seperator,
.seperate:after,
h1 + hr,
h2 + hr,
h3 + hr,
h4 + hr {
  height: 3px;
  background: var(--secondary-color);
  width: 60px;
  margin: var(--global-padding) 0;
}
.seperate-small:after {
  margin: var(--global-padding) 0;
}
.seperator.center {
  margin: var(--global-padding) auto;
}
.seperate:after {
  content: '';
  display: block;
}
h1.seperate[style*="text-align: center"]:after,
h2.seperate[style*="text-align: center"]:after,
h3.seperate[style*="text-align: center"]:after,
h4.seperate[style*="text-align: center"]:after,
h1.seperate.text-center:after,
h2.seperate.text-center:after,
h3.seperate.text-center:after,
h4.seperate.text-center:after {
  position: relative;
  left: calc(50% - 30px);
}
section.seperate:after {
  position: relative;
  left: calc(50% - 30px);
  bottom: -20px;
}
.pb-section-title-border,
.pb-block-contact-border {
  border-color: #acacac;
}
hr,
hr.wp-block-separator {
  background: #acacac;
}
.flava .pb-block-content {
  outline: 1px solid blue;
  background: #fff;
  padding: var(--global-padding);
}
.bordered-blocks > div {
  margin-bottom: 1px;
  margin-top: 1px;
}
.bordered-blocks .pb-block-content {
  outline: 1px solid #acacac;
  background: #fff;
  padding: var(--global-padding);
}
.child-no-gutter.bordered-blocks .portfolio-thumbnail,
.child-gutter.bordered-blocks .portfolio-thumbnail > div {
  outline: 1px solid #acacac;
  background: #fff;
}
.portfolio-filter {
  border-bottom: 1px solid #acacac;
}
.transparent-background {
  background: transparent;
}
.content-primary-background div:has(> .pb-block-content),
.pb-block-content.primary-background,
section.primary-background {
  position: relative;
}
.primary-background .button {
  margin-bottom: var(--global-padding);
}
.content-primary-background div:has(> .pb-block-content):after,
.pb-block-content.primary-background:after,
section.primary-background:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--secondary-color);
  height: 5px;
  width: 40%;
  min-width: 400px;
}
@media (max-width: 991.98px) {
  .content-primary-background div:has(> .pb-block-content):after,
  .pb-block-content.primary-background:after,
  section.primary-background:after {
    min-width: unset;
  }
}
.content-primary-background div:has(> .pb-block-content) {
  padding: 3vmax;
}
.pb-block-content.primary-background .pb-block-content-inner,
.pb-block-content.grey-background .pb-block-content-inner {
  padding: var(--global-margin) 3vmax;
}
.contain,
.contain-child img,
.image-contain,
.img-contain,
.object-fit-contain {
  object-fit: contain;
  height: 100%;
  width: 100%;
}
.portfolio-image.model-image {
  opacity: 1;
  /* mix-blend-mode: multiply; */
  padding: 1px;
}
.model-ovw-info {
  position: absolute;
  padding: var(--global-padding);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.pill {
  background: var(--grey);
  text-transform: uppercase;
  display: inline-block;
  font-size: .7em;
  border-radius: 20px;
  padding: 6px 8px 4px;
  line-height: 100%;
}
.pop-up-pill:not(:first-of-type) {
  margin-left: 5px;
}
.pop-up-image {
  max-width: 600px;
  margin: 0 auto;
}
.pop-up-pill,
.pricing-group {
  margin-top: var(--global-padding);
}
.pb-section-title-border.no-border {
  border: unset;
  margin-bottom: unset;
}
.footnote {
  position: relative;
}
.footnote-info p:first-of-type {
  margin-top: 0;
}
.footnote-number + .footnote-info p:first-of-type {
  text-indent: 15px;
}
.footnote-info a {
  text-indent: 0;
}
.footnote-number {
  position: absolute;
  top: 0px;
  left: 0;
}
.footnote-number sup {
  font-weight: 700;
  font-size: .7em !important;
}
.benefit {
  margin-bottom: var(--global-padding);
}
.benefit.has-button .benefit-content {
  padding-bottom: calc(var(--global-margin) + 15px);
}
blockquote {
  border: 1px solid var(--tertiary-color);
  border-width: 1px 0;
  border-radius: 0;
  padding: 5vw 0;
  text-align: center;
}
blockquote + p {
  text-align: center;
  margin-top: var(--global-padding);
}
blockquote:before,
blockquote:after {
  content: unset;
}
.ar-4-3 iframe,
.ar-16-9 iframe {
  min-height: 100%;
}
.max-5 .equal-child-width > div {
  flex: 1 1 20%;
}
@media (max-width: 1199.98px) {
  .max-5 .equal-child-width > div {
    flex: 1 1 50%;
  }
}
@media (max-width: 767.98px) {
  .max-5 .equal-child-width > div {
    flex: 1 1 100%;
  }
}
.max-4 .equal-child-width > div,
.max-4.equal-child-width > div {
  flex: 1 1 25%;
}
@media (max-width: 1199.98px) {
  .max-4 .equal-child-width > div,
  .max-4.equal-child-width > div {
    flex: 1 1 50%;
  }
}
@media (max-width: 767.98px) {
  .max-4 .equal-child-width > div,
  .max-4.equal-child-width > div {
    flex: 1 1 100%;
  }
}
.max-3 .equal-child-width > div,
.max-3.equal-child-width > div {
  flex: 1 1 33.33%;
}
@media (max-width: 1199.98px) {
  .max-3 .equal-child-width > div,
  .max-3.equal-child-width > div {
    flex: 1 1 50%;
  }
}
@media (max-width: 767.98px) {
  .max-3 .equal-child-width > div,
  .max-3.equal-child-width > div {
    flex: 1 1 100%;
  }
}
@media (max-width: 575.98px) {
  .equal-child-width.max-2 > div,
  .equal-child-width.max-3 > div,
  .equal-child-width.portfolio-grid-2 .portfolio-thumbnail,
  .equal-child-width.portfolio-grid-3 .portfolio-thumbnail {
    flex: 1 1 100%;
  }
  .filter-diz.equal-child-width.portfolio-grid-2 .portfolio-thumbnail,
  .filter-diz.equal-child-width.portfolio-grid-3 .portfolio-thumbnail {
    max-width: 100%;
  }
}
@media (max-width: 1199.98px) {
  .equal-child-width.total-rows-4 > div{
    flex: 1 1 50%;
  }
}
@media (max-width: 767.98px) {
  .equal-child-width.total-rows-4 > div{
    flex: 1 1 100%;
  }
}
.milestones {
  position: relative;
}
.milestones:after {
  width: 1px;
  background: var(--text-color);
  position: absolute;
  content: '';
  display: block;
  top: -25px;
  left: calc(50% - 1px);
  height: calc(100% - 75px);
}
.milestone-dot {
  width: 26px;
  height: 26px;
  border-radius: 100%;
  border: 5px solid #fff;
  background: var(--secondary-color);
  position: absolute;
  left: calc(50% - 14px);
  z-index: 1;
  margin-top: -4px;
}
.milestone-item {
  position: relative;
  padding: 75px 0;
  margin-bottom: 15px;
  cursor: var(--cursor);
}
.milestone {
  position: relative;
  width: calc(50% - 75px);
  text-align: right;
}
.milestone-item:nth-of-type(odd) .milestone {
  left: calc(50% + 75px);
  text-align: left;
}
.milestone-item:nth-of-type(odd):not(:last-of-type) .milestone:after,
.milestone-item:nth-of-type(even):not(:last-of-type) .milestone:after {
  content: '';
  display: block;
  height: 1px;
  position: absolute;
  top: 10px;  
  background: var(--secondary-color);
  width: 50px;
}
.milestone-item:nth-of-type(odd) .milestone:after {
  left: -60px;
}
.milestone-item:nth-of-type(even) .milestone:after {
  right: -60px;
}
.milestone-item:nth-of-type(odd):not(:last-of-type) .milestone:before,
.milestone-item:nth-of-type(even):not(:last-of-type) .milestone:before {
  content: '';
  display: block;
  height: 10px;
  width: 10px;
  position: absolute;
  top: 6px;
  background: var(--secondary-color);
  border-radius: 5px;
  z-index: 9999;
  border: 2px solid #fff;
}
.milestone-item:nth-of-type(odd) .milestone:before {
  left: -5px;
}
.milestone-item:nth-of-type(even) .milestone:before {
  right: -5px;
}
.always.milestone-item .milestone {
  width: 100%;
  left: 0;
  right: 0;
  text-align: center;
  padding-top: 20px;
}
.milestone-info {
  opacity: 1;
  top: -20px;
  right: 0;
  left: 0;
  overflow: hidden;
  box-shadow: 0 0 30px rgb(0 0 0 / .15);
  padding: var(--global-padding);
  background: #fff;
  position: absolute;
  z-index: 999;
  transition: var(--global-transition);
}
.always .milestone {
  background: #fff;
}
.always .milestone-info {
  display: block;
  top: 0;
  left: 15%;
  padding: var(--global-margin);
  width: 70%;
  z-index: 1;
  position: relative;
}
.always.milestone-item {
  z-index: 1;
  padding-top: 20px;
}
.always .milestone-info,
.milestone-item:hover .milestone-info {
  opacity: 1;
}
.child-gutter .milestone-info .gutter-legacy > div {
  padding-bottom: unset;
}
@media (max-width: 991.98px) {
  .milestone-description,
  .milestone-image {
    min-width: 100%;
  }
  .milestone {
    text-align: left;
  }
  .milestone-image {
    margin-top: 15px;
  }
  .milestone-item {
    padding-bottom: 100px;
  }
}
@media (max-width: 767.98px) {
  .milestone {
    width: calc(50% - 20px);
  }
  .milestone-item {
    padding-bottom: 150px;
  }
  .milestone-item:nth-of-type(2n+1) .milestone {
    left: calc(50% + 20px);
  }
  .always .milestone-info {
    width: 100%;
    left: 0;
  }
  .milestone-item:nth-of-type(odd):not(:last-of-type) .milestone:after,
  .milestone-item:nth-of-type(even):not(:last-of-type) .milestone:after,
  .milestone-item:nth-of-type(odd):not(:last-of-type) .milestone:before,
  .milestone-item:nth-of-type(even):not(:last-of-type) .milestone:before {
    content: unset;
  }
}
.edit-button-ovw {
  position: absolute !important;
  top: 0; 
  left: 0; 
  right: 0;
}
.consumption-group  {
  margin-top: 5vmax;
}
.max-width-400 {
  max-width: 400px;
}
.no-hover-helper {
  display: none;
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .no-hover-helper {
    display: block;
  }
}
body:has(.pop-up-container.show-pop-up) {
  overflow: hidden;
}
.click-outside {
  display: none;
}

/*--------------------------
### Layout Elements by Page/ID
---------------------------*/

#intro-statt-slider-geschaeftskunden {
  margin-top: -4%;
}
#intro-statt-slider-geschaeftskunden .max-width-400 {
  margin-bottom: var(--global-margin);
}
.page-id-314 .glide__slide:nth-of-type(3) .container,
.page-id-314 .glide__slide:nth-of-type(7) .container {
  display: flex;
  justify-content: flex-end;
}
.page-id-314 .glide__slide:nth-of-type(3) .cover-intro-wrapper,
.page-id-314 .glide__slide:nth-of-type(7) .cover-intro-wrapper {
  /* background: white; */
}

/*--------------------------------------------------------------
## Footer
--------------------------------------------------------------*/

.footer-main {
  border: 1px solid #808080;
  border-width: 1px 0;
  z-index: 8;
  position: relative;
  background: #fff;
  margin-top: 5%;
}
.pb-section.footnotes-section {
  padding-top: 10%;
  padding-bottom: 10%;
}

@media (max-width: 767.98px) or (max-height: 767.98px) {
  .pb-section.footnotes-section {
    padding-top: 10% !important;
    padding-bottom: 10% !important;
  }
}

@media (max-width: 757.98px) {
  .footer-logo-strobel {
    order: 1;
    /* margin: 0 25px; */
  }
  .footer-logo-strobel,
  .footer-logo-toyota {
    width: 50%;
    /* border: 1px solid red; */
    /* margin: 0; */
  }
  footer .header-logo {
    /* padding: unset; */
  }
  .footer-seperator {
    display: none !important;
  }
  .footer-logo-toyota {
    order: 3;
    /* margin: 0 25px; */
  }
  .footer-group {
    width: 100%;
    padding: 25px 0;
    border-bottom: 1px solid grey;
  }
  nav.inline-navigation ul,
  .container-footer.flex-space-between {
    justify-content: center;
  }
}



/*--------------------------------------------------------------
## Input & Buttons
--------------------------------------------------------------*/

input[type="submit"],
form button,
main button,
button.button,
.button,
.child-links-buttoned a,
.wp-block-button .wp-block-button__link,
.wp-block-button .wp-block-button__link.is-style-outline,
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-element-button {
  padding: 16.5px 24px 14px;
}
.primary-background input[type="submit"],
.primary-background main button,
.primary-background button.button,
.primary-background .button,
.primary-background .wp-block-button__link,
.primary-background .wp-element-button,
.primary-background .child-links-buttoned a,
.content-primary-background input[type="submit"],
.content-primary-background main button,
.content-primary-background button.button,
.content-primary-background .button,
.content-primary-background .wp-block-button__link,
.content-primary-background .wp-element-button,
.content-primary-background .child-links-buttoned a,
.cover-intro-wrapper .button {
  color: var(--primary-color);
  background: #fff;
}
.primary-background input[type="submit"]:hover,
.primary-background main button:hover,
.primary-background button.button:hover,
.primary-background .button:hover,
.primary-background .wp-block-button__link:hover,
.primary-background .wp-element-button:hover,
.primary-background .wp-block-button.is-style-outline .wp-block-button__link:hover,
.primary-background .wp-block-button.is-style-fill .wp-block-button__link:hover,
.primary-background .child-links-buttoned a:hover,
.content-primary-background input[type="submit"]:hover,
.content-primary-background main button:hover,
.content-primary-background button.button:hover,
.content-primary-background .button:hover,
.content-primary-background .wp-block-button__link:hover,
.content-primary-background .wp-element-button:hover,
.content-primary-background .wp-block-button.is-style-outline .wp-block-button__link:hover,
.content-primary-background .wp-block-button.is-style-fill .wp-block-button__link:hover,
.content-primary-background .child-links-buttoned a:hover,
.cover-intro-wrapper .button:hover {
  /* color: var(--primary-color) !important; */
  background: var(--tertiary-color);
}
button.tablinks,
button.tablinks-vertical,
button.filter-button,
button.tablinks:hover,
button.tablinks-vertical:hover,
button.filter-button:hover {
  border: 3px solid #fff;
  border-width: 0 0 3px;
}
button.tablinks.active,
button.tablinks-vertical.active,
button.filter-button.mixitup-control-active {
  border: 3px solid var(--secondary-color);
  border-width: 0 0 3px;
}
.button-outlined {
  background: #fff;
  outline: 1px solid var(--primary-color);
  color: var(--primary-color);
}
main button.filter-button:hover,
main button.accordion-button:hover {
  color: #aaa !important;
}
button.button-plain,
button.button-read-more {
  line-height: 130%;
  color: var(--primary-color);
  border-bottom: 1px solid var(--primary-color);
}
button.button-plain:hover,
button.button-read-more:hover {
  color: #aaa !important;
  border-bottom: 1px solid #aaa !important;
}
.error404 .cover-intro-wrapper .button {
  color: #fff;
  background: var(--primary-color);
}
.error404 .cover-intro-wrapper .button:hover {
  background: var(--button-hover-background);
}
@media (max-width: 767.98px) {
  button.filter-button-simple {
    padding: 1vmax 0;
    margin-bottom: 25px;
  }
}

/*--------------------------------------------------------------
## Cookies
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Galleries & Images
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Gutenberg Blocks
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Playground
--------------------------------------------------------------*/


.animate__animated[data-delay="1"] {
  animation-delay: calc(1 * 25ms);
}
.animate__animated[data-delay="2"] {
  animation-delay: calc(2 * 25ms);
}
.animate__animated[data-delay="3"] {
  animation-delay: calc(3 * 25ms);
}
.animate__animated[data-delay="4"] {
  animation-delay: calc(4 * 25ms);
}
.animate__animated[data-delay="5"] {
  animation-delay: calc(5 * 25ms);
}
.animate__animated[data-delay="6"] {
  animation-delay: calc(6 * 25ms);
}
.animate__animated[data-delay="7"] {
  animation-delay: calc(7 * 25ms);
}
.animate__animated[data-delay="8"] {
  animation-delay: calc(8 * 25ms);
}
.animate__animated[data-delay="9"] {
  animation-delay: calc(9 * 25ms);
}
.animate__animated[data-delay="10"] {
  animation-delay: calc(10 * 25ms);
}
.animate__animated[data-delay="11"] {
  animation-delay: calc(11 * 25ms);
}
.animate__animated[data-delay="12"] {
  animation-delay: calc(12 * 25ms);
}
.animate__animated[data-delay="13"] {
  animation-delay: calc(13 * 25ms);
}
.animate__animated[data-delay="14"] {
  animation-delay: calc(14 * 25ms);
}
.animate__animated[data-delay="15"] {
  animation-delay: calc(15 * 25ms);
}
.animate__animated[data-delay="16"] {
  animation-delay: calc(16 * 25ms);
}
.animate__animated[data-delay="17"] {
  animation-delay: calc(17 * 25ms);
}
.animate__animated[data-delay="18"] {
  animation-delay: calc(18 * 25ms);
}
.animate__animated[data-delay="19"] {
  animation-delay: calc(19 * 25ms);
}
.animate__animated[data-delay="20"] {
  animation-delay: calc(20 * 25ms);
}

/*--------------------------------------------------------------
## Layout Grid
--------------------------------------------------------------*/