/*
Theme Name: Tec2
Author: Marcus Kober
*/

header + .entry-content {
  margin-top: 0;
}

/********************************
 MENU
 */

.hamburger {
  background-color: var(--wp--preset--color--primary);
  border-radius: 50%;
  height: 100px;
  position: relative;
  transition: all .3s ease;
  width: 100px;
}

.hamburger__patty {
  background-color: var(--wp--preset--color--grey-03);
  border-radius: 3px;
  left: 30%;
  height: 6px;
  position: absolute;
  right: 30%;
  transition: all .4s ease;
}

.hamburger__patty:nth-child(1) {
  transform-origin: 0 0;
  top: 33%;
}

.hamburger__patty:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.hamburger__patty:nth-child(3) {
  bottom: 33%;
  transform-origin: 0 100%;
}

.has-modal-open .hamburger {
  background-color: white;
  transform: translateY(-7vh) rotate(-360deg) scale(-0.4);
}

.has-modal-open .hamburger__patty {
  background-color: var(--wp--preset--color--primary);
}

.has-modal-open .hamburger__patty:nth-child(1) {
  transform: translateX(10px) translateY(2px) rotate(45deg);
}

.has-modal-open .hamburger__patty:nth-child(2) {
  opacity: 0;
}

.has-modal-open .hamburger__patty:nth-child(3) {
  transform: translateX(10px) translateY(-2px) rotate(-45deg);
}


.navigation {
  position: static;
}

.hamburger {
  position: fixed;
  right: var(--wp--style--root--padding-left);
  top: 12vh;
  z-index: 900000;
}

.wp-block-navigation__responsive-container-close {
  position: fixed;
  right: var(--wp--style--root--padding-left);
  top: 8vh;
  z-index: 990000;
  border-radius: 50%;
  height: 124px;
  transform: translateY(-7vh) rotate(-360deg) scale(-0.4);
  width: 124px;
}

.wp-block-navigation__responsive-container {
  left: 50% !important;
}

.wp-block-navigation__responsive-container a {
  color: white !important;
}

.wp-block-navigation__responsive-container-close svg {
  display: none;
}

@media screen and (min-width: 1852px) {
  .wp-block-navigation__responsive-container-close,
  .hamburger {
    right: calc((100vw - var(--wp--style--global--wide-size)) / 2);
  }
}

.wp-block-navigation__responsive-container-open:hover .hamburger {
  transform: rotate(180deg);
}

.wp-block-navigation__responsive-container-open:hover .hamburger__patty {
  background-color: white;
}

.has-modal-open .wp-block-navigation__responsive-container-open {
  pointer-events: none;
}

.navigation .wp-block-navigation a:where(:not(.wp-element-button)) {
  color: white !important;
  font-size: var(--wp--preset--font-size--xxlarge) !important;
  font-weight: 500;
}

.wp-block-navigation__responsive-container.has-modal-open {
  padding-left: var(--wp--style--root--padding-left);
}

.wp-block-navigation__responsive-container-content .wp-block-spacer {
  background-color: white !important;
  display: block !important;
  visibility: visible !important;
  height: 1px !important;
  flex-basis: 1px !important;
  width: 100%;
}

.first-help img {
  display: block;
}

.first-help {
  color: var(--wp--preset--color--contrast);
}

.first-help:hover {
  color: var(--wp--preset--color--primary);
}

.header-email p:first-child,
.header-support p:first-child {
  display: none;
}

body .header-email {
  display: none;
}

@media screen and (min-width: 450px) {
  body .header-email {
    display: flex;
  }
}

@media screen and (min-width: 600px) {
  .header-email p:first-child,
  .header-support p:first-child {
    display: block;
  }
}

/********************************
 HERO
 */

.hero.wp-block-media-text.has-media-on-the-right {
  grid-template-columns: 1fr 1.5fr;
}

.hero .wp-block-media-text__content {
  padding-left: var(--wp--style--root--padding-left);
}

@media screen and (min-width: 600px) {
  .hero .wp-block-media-text__content {
    min-height: 70vh;
  }
}

@media screen and (min-width: 1322px) {
  .hero .wp-block-media-text__content {
    padding-left: calc((100vw - var(--wp--style--global--content-size)) / 2);
  }
}

.wp-block-button__link {
  background-color: var(--wp--preset--color--primary);
  color: white;
}

.is-style-reverse .wp-block-button__link {
  background-color: white;
  color: var(--wp--preset--color--primary);
}

@media screen and (max-width: 799px) {
  .raster-3 {
    grid-template-columns: 1fr !important;
  }
}


@media screen and (max-width: 1200px) {
  .raster-3-gruppe {
    padding-left: 50px !important;
    padding-right: 50px !important;
  }
}

@media screen and (max-width: 450px) {
  .raster-3-gruppe {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

.circle {
  aspect-ratio: 1;
  border: 30px solid var(--wp--preset--color--primary);
  border-radius: 50%;
  position: relative;
}

.circle:nth-child(2) {
  border-color: var(--wp--preset--color--grey-03);
}

.circle::before {
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 25px solid white;
  content: '';
  height: 0;
  left: -30px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
}

.circle::after {
  background-color: white;
  content: '';
  height: 30px;
  position: absolute;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
}

.testimonial-slider {
  color: white;
  font-size: .9em;
}

.testimonial-slider__count {
  display: none;
}

.testimonial__autor {
  font-style: italic;
  margin-top: 20px;
  padding-left: 40px;
  padding-right: 40px;
}

.testimonial__content {
  padding-left: 40px;
  padding-right: 40px;
  position: relative;
}

.testimonial__content::before {
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 20px solid white;
  content: '';
  height: 0;
  left: 0;
  position: absolute;
  top: 6px;
  width: 0;
}

.testimonial__content::after {
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 20px solid white;
  bottom: 6px;
  content: '';
  height: 0;
  right: 0;
  position: absolute;
  width: 0;
}

.splide__arrow {
  display: none !important;
}

.slider-container {
  height: 100%;
  position: relative;
}

.slider-group {
  height: 85%;
}

.splide {
  position: static !important;
}

.splide__pagination {
  align-items: flex-start !important;
  bottom: 0 !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  top: auto !important;
}

.splide__pagination__page {
  background: transparent !important;
  border: 2px solid white !important;
  height: 15px !important;
  opacity: 1 !important;
  width: 15px !important;
}

.splide__pagination__page.is-active {
  background-color: white !important;
  transform: unset !important;
}

.footer {
  margin-top: 0;
}