/*
Theme Name:  autoclaim
Theme URL:   https://autoclaim.ymnky.space
Description: autoclaim Wordpress Theme
Author:      ymnky
Author URL:  https://ymnky.de
Template:    twentytwentyfour
Version:     1.0.0
*/


/* #######################################################################
          GENERAL SETINGS
####################################################################### */

/* COLOR DEFINITIONS */

:root {
  scroll-behavior: smooth;
  --color-accent: #85C9BD;
  --color-cmyk: #85C9BD;
  --color-petrol: #0B5E73;
  --color-dark-blue: #18363E;
}

h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
  text-decoration-color: var(--color-cmyk) !important;
  text-decoration-thickness: 8px !important;
  -webkit-text-decoration-thickness: 8px !important;
  text-underline-offset: 10px;
}

.tw-shadow{
  box-shadow: 0 0 34px 0 rgba(0,0,0,0.06);
}

.is-style-ac-list-checks{
  padding-left: 30px;
  list-style: none;
}
.is-style-ac-list-checks li{
  margin-bottom: 1rem;
}

.is-style-ac-list-checks li::before{
  display: inline-block;
  content: "";
  width: 20px;
  height: 20px;
  background-image: url("assets/img/check-circle.svg");
  background-size: contain;
  background-position: center;
  position: absolute;
  left: 0;
  margin-top: 2px;
}

/* Subheadlines mit inline Häkchen*/
.subhead-inline-checks img{
  margin-right: 4px;
  transform: translateY(3px);
}
.subhead-inline-checks img:not(:first-child){
  margin-left: 60px;
}



/*remove black outlines on focus*/
:where(.wp-site-blocks *:focus){
  outline-width: 0;
}



/* #######################################################################
          HEADER
####################################################################### */

/*sticky header */
header{
  transition: all 0.3s ease-in-out;
}
header.shrink-logo{
  box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1);
}
.page-template-wp-custom-template-autoclaim-header-v2 img{
  transition: all 0.3s ease;
}

header a{
  font-size:
}

.page-template-wp-custom-template-autoclaim-header-v2 .shrink-logo img{
  height: auto !important;
  width: 70px !important;
}

/* #######################################################################
          INTRO
####################################################################### */

#ki-stoerer{
  position: absolute;
  left: 50%;
  margin: 0;
  margin-top: -130px;
  margin-left: 380px;
  margin-top: -402px;
  margin-left: 17px;
}



lottie-player{
  width: unset !important;
  height: unset !important;
}



/* #######################################################################
          STICKY/LOGIN BUTTONS
####################################################################### */

.stickybutton{
  width: 190px;
  padding: 10px 10px !important;
  position: fixed;
  margin: 0;
  bottom: 120px;
  cursor: pointer;
  z-index: 10;
  text-transform: uppercase;
  transform-origin: 0% 0%;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
}
.stickybutton img{
  max-width: 28px;
  max-height: 28px;
}
.stickybutton a{
  text-decoration: none;
}


/* DSA */
#dsa-feedback{
  left: 0;
  transform: rotate(-90deg) translateX(-50%) translateY(-20px);
  padding-top: 30px !important;
}
#dsa-feedback:hover{
  transform: rotate(-90deg) translateX(-50%) translateY(-15px);
}
#dsa-feedback img{
  transform: rotate(90deg) translateX(-2px);
}

/* LOGIN */
#login-button{
  left: 100%;
  padding-bottom: 30px !important;
  transform: rotate(-90deg) translateY(-100%) translateY(20px) translateX(-50%);
}
#login-button:hover{
  transform: rotate(-90deg) translateY(-100%) translateY(15px) translateX(-50%);
}
#login-button img{
  transform: rotate(90deg) translateX(-4px);
}

@media only screen and (max-width: 767px) {
  .stickybutton{
    width: 50vw;
    bottom: 0;
    height: 48px;
  }
  #dsa-feedback img, #login-button img{
    transform: none;
  }
  #dsa-feedback, #dsa-feedback:hover{
    left: 0;
    transform: none;
    padding-top: 10px !important;
  }
  #login-button, #login-button:hover{
    left: 50%;
    transform: none;
    padding-bottom: 10px !important;
  }
}

/* #######################################################################
          Benefits Tab
####################################################################### */

/* General Settings */
.qubely-tab-item .image-type-nav-title{
  text-decoration: underline;
  color: var(--color-petrol);
  text-decoration-color: transparent !important;
  text-underline-offset: 10px !important;
  text-decoration-thickness: 8px !important;
  transition: all 0.4s;
}

.qubely-tab-nav{
  justify-content: space-evenly !important;
}

/* Active */
.qubely-tab-item.qubely-active .image-type-nav-title{
  text-decoration: underline;
  text-decoration-color: var(--color-cmyk) !important;
}
.qubely-tab-item.qubely-active .qubely-tab-title{
  background-color: transparent !important;
}

/* Hover */
.qubely-tab-item:hover .image-type-nav-title{
  text-decoration-color: var(--color-cmyk) !important;
  text-underline-offset: 10px !important;
  text-decoration-thickness: 8px !important;
}
.qubely-tab-item img{
  transition: all 0.2s ease;
}
.qubely-tab-item:hover img{
  transform: scale(1.1);
}

/* Tab content */

body .wp-block-media-text__content{
  background: #fff !important;
  padding: 60px !important;
  padding-left: 0 !important;
}

/* Tab Mobiloptimierung */

@media only screen and (max-width: 767px) {
  .qubely-tab-item .image-type-nav-title{
    font-size: 1.6rem !important;
    text-decoration-thickness: 4px !important;
  }
  .qubely-tab-image{
    max-width: 60px !important;
    margin-bottom: 0 !important;
  }
  #vorteile .qubely-tab-body .wp-block-columns-is-layout-flex{
    gap: 0;
  }
  #vorteile .qubely-tab-body .has-background{
    padding: 4px 8px;
  }
  #vorteile .qubely-tab-body .has-background *{
    text-align: left;
  }
}

@media only screen and (max-width: 540px) {
  .qubely-tab-item .image-type-nav-title{
    font-size: 1.2rem !important;
  }
  .qubely-tab-title{
    padding: 5px !important;
  }
  .qubely-tab-image{
    max-width: 48px !important;
  }
  .qubely-tab-nav{

  }
}



/* #######################################################################
          Plattform-Modul
####################################################################### */

#plattform-bullets p{
  position: relative;
  /* cursor: pointer; */
}
/* #plattform-bullets p::after{
  display: block;
  content: "";
  width: 4px;
  height: 0%;
  position: absolute;
  top: 0;
  left: -12px;
  background: var(--color-accent);
} */

#plattform-bullets p.has-text-align-right::after{
  left: auto;
  right: -10px;
}



/* #plattform-bullets p:hover{
  font-weight: bold;
}

#plattform-bullets p:hover::after{
  height: 100%;
} */
@media only screen and (max-width: 900px) {
  #system-checkmarks p{
    width: 100%;
    flex-shrink: 0;
  }
  #system-checkmarks{
    flex-wrap: wrap;
    margin-bottom: 40px;
  }

}
@media only screen and (max-width: 767px) {
  #plattform-bullets p{
    text-align: center;
  }
}




/* #######################################################################
          MITARBEITER
####################################################################### */


.mitarbeiter .wp-block-group .wp-block-cover .wp-block-cover__background,
.mitarbeiter .wp-block-cover .wp-block-cover__inner-container {
  opacity: 0 !important;
  transition: all 0.3s ease;
  cursor: pointer;
  scale: 1.1;
  font-size: 14px;
}

.mitarbeiter .wp-block-cover,
.mitarbeiter .wp-block-image img{
  border: 5px solid var(--color-cmyk) !important;
}

.mitarbeiter .wp-block-group:hover .wp-block-cover .wp-block-cover__background{
  opacity: 0.9 !important
}
.mitarbeiter .wp-block-group:hover .wp-block-cover .wp-block-cover__inner-container {
  opacity: 1 !important;
  scale: 1;
}

.page-template-wp-custom-template-autoclaim-header-v1 .mitarbeiter .wp-block-group:hover .ma-name {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 4px;
  -webkit-text-decoration-thickness: 4px;
  text-underline-offset: 2px;
}

.mitarbeiter.backoffice .wp-block-group:hover .ma-name {
  text-decoration: none;
}


.mitarbeiter .ma-name{
  text-transform: uppercase;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.4;
}
.mitarbeiter:not(.backoffice) .ma-name{
  cursor: pointer;
}

.page-template-wp-custom-template-autoclaim-header-v1 .mitarbeiter.is-layout-flex .wp-block-group{
  width: 22%;
}

.mitarbeiter.is-layout-flex > .wp-block-group{
  width: 48%;
}
@media only screen and (max-width: 900px) {
  .mitarbeiter.is-layout-flex > .wp-block-group{
    width: 100%;
  }
  .mitarbeiter{
    max-width: 440px;
  }
}





/* #######################################################################
          BACKOFFICE
####################################################################### */

.group-behindcolor > figure{
  margin-bottom: -220px;
  z-index: 1;
  position: relative;
}

.group-behindcolor > div{
  z-index: 10;
  position: relative;
}

.group-oncolor .groupimage{
  position: relative;
}

.group-oncolor .groupimage{
  margin: auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -390px !important;
}

.group-oncolor{
  margin-top: 400px;
}

#ueber-uns{
  padding-bottom: 0;
}

.bottomimage{
  width: 100%;
}
.bottomimage img{
  width: 90%;
  margin-top: 1rem;
}

/* #######################################################################
          LOGIN MODAL
####################################################################### */

.bod-block-popup-wrap .bod-block-popup{
  padding: 3rem;
  /* box-shadow: 0 0 34px 0 rgba(0,0,0,0.06); */
  background: transparent !important
}

.bod-block-popup-wrap .bod-block-popup{
  padding: 3rem;
  /* box-shadow: 0 0 34px 0 rgba(0,0,0,0.06); */
  background: transparent !important
}

.bod-block-popup-wrap img{
  width: 80px;
  height: auto;
}

.logincontainer{
  margin: 0;
}


/* Close Button */
.bod-block-popup-wrap .bod-block-popup-closer::before{
  font-size: 60px;
  color: var(--color-cmyk);
}

.bod-block-popup-wrap .bod-block-popup-closer:hover::before{
  color: var(--color-accent);
}

/* Animation */
.bod-block-popup-wrap .bod-block-popup{
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: translate(-50%, -50%) scale(0.7);
}

.bod-block-popup-wrap.active .bod-block-popup{
  transform: translate(-50%, -50%) scale(1);
}

.loginerror a{
  display: inline-block;
  margin: 20px 0;
}

/* #######################################################################
          FORM FIELDS
####################################################################### */


input, textarea, select {
  background: #F9F9F9;
  border: none;
  font-size: 16px;
  padding: 15px;
  width: 100%;
  color: var(--color-dark-blue);
  border: 1px solid #F9F9F9;
  margin-bottom: 20px;
  transition: all 0.3s ease;
  max-width: 100% !important;
  box-sizing: border-box;
  font-family: Outfit, sans-serif;
  margin-top: 10px;
}

input:focus, textarea:focus{
  border: 1px solid var(--color-dark-blue);
  outline: none;
}

input[type=submit]{
  background: var(--color-accent);
  color: var(--color-dark-blue);
  border: none;
  cursor: pointer;
}

input[type=submit]:hover{
  background: var(--color-cmyk);
  color: #fff;
}
input[type=checkbox]{
  width: auto;
  float: left;
  margin-right: 20px;
}


::placeholder{
  color: rgba(24,54,62,0.4);
  font-family: Outfit, sans-serif;
}

label{
  display: block;
  font-size: 14px;
  color: var(--color-dark-blue);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.wpcf7 span{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: block;
}

.wpcf7 input, .wpcf7 textarea{
  margin-top: 10px;
  max-width: 96%;
}