/*======================================
Theme Name: Kopf & Hand Theme
Theme URI: https://kopf-hand.de
Description: Ein individuell erstelltes Theme von Kopf & Hand Kreativ- und Werbeagentur 
Author: Kopf & Hand Kreativ- und Werbeagentur
Author URI: https://kopf-hand.de
Author Email: hallo@kopf-hand.de
Template: Divi
Version: 4.21.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
======================================*/

/* CSS */
@import url('https://fonts.cdnfonts.com/css/borna');

:root {
    --color-1: #6269ff;
    --color-2: #f6f6f6;
}


  /*Clamp p-Text*/
.clamp-p {
    /*font-size: calc(18px + (22 - 18) * ((100vw - 300px) / (1600 - 300)));*/
    font-size: max(1.2rem,1.0vw); /* fontgröße 20px resp größer*/
}

h1 {
    font-size: max(2rem, 1rem + 4vw, 5rem);
    font-family: chaloops, sans-serif;
    /* font-family: 'Borna', sans-serif; */
    font-weight: 900;
    font-style: normal;
    line-height: 1.1em;
}

.h1-start h1 {
    /* font-size:clamp(2.25rem, 1rem + 4vw, 5rem); */
    font-size:clamp(2.25rem, 1rem + 2vw, 4vw);
    line-height: 1.2;
} 

h2 {
    font-size: clamp(2.25rem, 1rem + 1.5vw, 5rem);
    font-family: laca-variable, sans-serif;
    font-weight: 900;
    font-style: normal;
    line-height: 1.2em;  
}

h3 {
    /*font-size: max(1.75rem, 1vw + 1rem)!important;*/
    font-size:clamp(1.75rem, .5rem + 1.25vw, 3rem)!important;
    font-family: laca-variable, sans-serif;
    color: #393e41;
    font-weight: 800;
    line-height: 1.3em;  
}

h4 {
    /*font-size: max(2vw, 1.5em, 1.5rem);*/
    font-size: clamp(1.5rem, .5rem + 1vw, 2.5rem);
    font-family: laca-variable, sans-serif;
    font-weight: 800;
    color:#6269ff;
    line-height: 1.3em;
}

h5 {
    font-size: clamp(1.33rem, .66rem + .66vw, 2rem);
    font-family: laca-variable, sans-serif;
    font-weight: 550;
    line-height: 1.3em;
    }	

h6 {
    font-size: max(1.25vw, 1.2em, 1.25rem);
    font-family: laca-variable, sans-serif;
    font-weight: 550;
    line-height: 1.4em;
}	
/*
.et_pb_button {
    font-size: max(1.15vw, 1.1em, 1.1rem);	
    font-family: laca-variable, sans-serif;
    font-weight: 700;
    line-height: 1.4em;
}
*/
h5.et_pb_toggle_title {
    font-size: max(1.5rem, .75vw + 0.75rem)!important;
    font-family: 'laca-variable', sans-serif;
    font-weight: 800!important;
    line-height: 1.4em;  
}


p, .et_pb_text_inner, .et_pb_text_inner p, div.et_pb_text_inner p, .et_pb_toggle_content, .dipl_ajax_search .dipl_ajax_search_field {
    font-size: max(1.2rem,1.0vw);
    font-family: 'laca-variable', sans-serif;
    font-weight: 400;
    line-height: 1.4em;  
}

p a, .et_pb_text_inner a, div.et_pb_text_inner p a {
    font-size: max(1.2rem,1.0vw);
    font-family: laca-variable, sans-serif;
    font-weight: 700;
    line-height: 1.4em;
    position: relative;
    text-decoration: none;
    color: #6269ff;
}

p a:hover, div.et_pb_text_inner p a:hover {
    color: #6269ff;
}  

p a::before, div.et_pb_text_inner p a::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: .2rem;
    bottom: -.25rem;
    left: 0;
    background-color: #6269ff;
    transform: scaleX(1);
    transform-origin: top left;
    transition: transform 1000ms ease-in;
    border-radius: 2px;
}

p a:hover::before, div.et_pb_text_inner p a:hover::before {
      transform: scaleX(0);
      transition: transform 200ms ease-out;
}

/* Button alte Farbe 44BBA4  */

.et_pb_button {
    font-size: max(1.25rem,1vw);
	font-family: laca-variable, sans-serif;
	font-weight: 700;
	line-height: 1.2em;
    background-color:#6269ff;
    color:#f6f6f6;
    border:0px;
    border-radius:10rem;
    padding: .75rem 2rem;
    transition: all ease-out 1000ms!important;
}

.et_pb_button:hover {
  background:#02263e!important;
  color:#f6f6f6;
  border:0px!important;
  border-radius:10rem!important;
  padding: .75rem 2rem!important;
  box-shadow: 0px 12px 12px -6px rgba(57,62,65,0.35);
  transform:translateY(-.35rem)!important;
  transition: all ease-in 200ms!important;
}

.et_pb_button:hover:after {
   display:none;
}  

/*** SECTIONS ***/

@media only screen and (min-width: 1368px){
    et_pb_section {
    padding: 7.5rem 0;
    }
}

@media only screen and (max-width: 1367px) and (min-width: 981px) {
    et_pb_section {    
    padding: 7.5rem 0;
    }
}

@media only screen and (max-width: 980px) and (min-width: 768px) {
    et_pb_section {    
    padding: 7.5rem 0rem 5rem 0;
    }
}

@media only screen and (max-width: 767px) {
    et_pb_section {    
    padding: 7.5rem 0rem 5rem 0;
    }
}

/*** ROWS ***/
    
/* Querformat */
@media (orientation: landscape) {
    .et_pb_row {
        width:calc(100% - 35vw)!important;
        max-width:100vw!important;
        margin:0 auto;
    }

    .et_pb_row.desktop-row {   
        width: 100% !important;
        max-width:calc(100vw - 35%)!important;
    }

    .et_pb_row.nav-row {   
        width:100%!important;  
        max-width:100%!important;
    }
}

/* Hochformat */
@media (orientation: portrait) {
    .et_pb_row.desktop-row { 
        width:100%!important;  
        max-width:calc(100vw - 15%)!important;
    }

    .et_pb_row.nav-row {   
        width:100%!important;  
        max-width:100%!important;
    }

    .et_pb_row {
        width:calc(100% - 15vw)!important;
        max-width:100vw!important;
        margin:0 auto;
    }
}

/* iPad */
@media only screen and (min-width:981px) and (max-width:1440px) {
    .et_pb_row {
        width:calc(100% - 15vw)!important;
        margin:0 auto;
    }

    .et_pb_row.desktop-row {   
        width: 100%!important;
        max-width:calc(100vw - 20%)!important;
    }

    .et_pb_row.nav-row {   
        width: 100%!important;
        max-width:100%!important;
    }
}

/*Mobil blau 100%*/
@media only screen and (max-width:980px) {
    .et_pb_row.mobile-row {   
        width: 100%!important;
        max-width:100%!important;
    }
}


/*** COLUMNS 
    
@media only screen and (max-width: 1367px) and (min-width: 981px) {
    .et_pb_column {
        width: 70vw;
        margin-left: 15vw;
        margin-right: 15vw;
    }
}
    
@media only screen and (min-width: 1368px) {
    .et_pb_column {
        width: 60vw!;
        margin-left: 20vw;
        margin-right: 20vw;
    }
}
*/
/* HEAD Column */

.et_pb_column.head-row {
    display:flex;
    flex-direction:column;
    justify-content:center; 
    align-items:center;
    max-width:100%!important;
}

@media (orientation: portrait) {
    .et_pb_column.head-row {
        width: calc(100% - 15vw)!important;
    }
}

@media (orientation: landscape) {
    .et_pb_column.head-row {
        width: calc(100% - 35vw)!important;
    }
}

@media only screen and (min-width: 981px) and (max-width: 1440px) {
.et_pb_column.head-row {
    width: calc(100% - 15vw)!important;
  }
}


/*Underline White*/
.underline-white a:hover {
	background-size: 100% 100%;
	color: var(--color-1)!important;
	transition: all .2s ease-in-out!important;
}

.underline-white a, .underline-red a:hover {
    text-decoration: none;
}

.underline-white a {
	background-image: linear-gradient(120deg,var(--color-2) 0%,var(--color-2) 100%);
    padding:0.2rem 0.25rem; 
    background-repeat: no-repeat;
    background-size: 100% 2px;
	background-position: 0 100%;
    transition: background-size .5s ease-out!important;
    /*color: inherit!important;*/
    color: var(--color-2)!important;
}


/*Underline White*/
.underline-white a:hover {
	background-size: 100% 100%;
	color: var(--color-1)!important;
	transition: all .2s ease-in-out!important;
}

.underline-white a, .underline-red a:hover {
    text-decoration: none;
}

.underline-white a {
	background-image: linear-gradient(120deg,var(--color-2) 0%,var(--color-2) 100%);
    padding:0.2rem 0.25rem; 
    background-repeat: no-repeat;
    background-size: 100% 2px;
	background-position: 0 100%;
    transition: background-size .5s ease-out!important;
    /*color: inherit!important;*/
    color: var(--color-2)!important;
}




/*NAV BAR*/
#main-content{
top: -7vw;
}
 
.hide-header {
opacity: 0;
margin-top: -200px !important;
}
 
.show-header {
opacity: 1;
margin-top: 0px !important;
}
 
#global-header-section {
-webkit-transition: all 0.5s ease-in-out !important;
-moz-transition: all 0.5s ease-in-out !important;
-o-transition: all 0.5s ease-in-out !important;
-ms-transition: all 0.5s ease-in-out !important;
transition: all 0.5s ease-in-out !important;
}
/* Rotating */

.rotating {
        -webkit-animation: rotating 16s linear infinite;
        animation: rotating 16s linear infinite;
}

@-webkit-keyframes rotating {
        from{
            -webkit-transform: rotate(360deg);
        }
        to{
            -webkit-transform: rotate(0deg);
        }
}

@keyframes rotating {
          from{
              -webkit-transform: rotate(360deg);
          }
          to{
              -webkit-transform: rotate(0deg);
          }
}
    


      
/* Akkordeon Toogle Icon 
    
/*Toogle*/
    
.et_pb_toggle_close .et_pb_toggle_title:before {
    -webkit-transition: all .35s ease-in-out;
    -moz-transition: all .35s ease-in-out;
    -o-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
}
.et_pb_toggle_open .et_pb_toggle_title:before {
    -webkit-transition: all .35s ease-in-out;
    -moz-transition: all .35s ease-in-out;
    -o-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
    transform: rotate(45deg);
}
    
/* Button Bounce */
.bounce {
    -moz-animation: bounce 2s infinite;
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
}
    
@keyframes bounce {
      0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
      40% {
        transform: translateY(-15px);
    }
      60% {
        transform: translateY(-10px);
    }
}
    
/*Overflow*/
body, html {
    overflow-x: hidden!important;
    overflow: overlay!important;
    max-width: 100%!important;
    
    hyphens:auto;
    -webkit-hyphens:auto;
    -moz-hyphens: auto;
    -o-hyphens: auto;
    -ms-hyphens: auto;
    
    word-wrap: break-word;
    -webkit-word-wrap: break-word;
    -moz-word-wrap: break-word;
    -o-word-wrap: break-word;
    -ms-word-wrap: break-word;    
}
    
/* Columns Button Justify */
.el-flex-row {
    display: flex;
    flex-wrap: wrap;
}
    
.el-flex-row .et_pb_column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
    
/* phone-bezier */
.bezier {
    transform: translatey(0px);
    animation: float1 6s ease-in-out infinite;
    }
    
@keyframes float1 {
        0% {
            transform: translatey(0px);
        }
        50% {
            transform: translatey(-25px);
        }
        100% {
            transform: translatey(0px);
        }
}
    
/* phone-bezier2 */
.bezier2 {
        transform: translatey(0px);
        animation: float2 7s ease-in-out infinite;
    }
    
    @keyframes float2 {
        0% {
            transform: translatey(0px);
        }
        50% {
            transform: translatey(-15px);
        }
        100% {
            transform: translatey(0px);
      }
}
    
/* phone-bezier3 */

.bezier3 {
        transform: translatey(0px);
        animation: float3 8s ease-in-out infinite;
    }
    
    @keyframes float3 {
        0% {
            transform: translatey(0px);
        }
        50% {
            transform: translatey(-20px);
        }
        100% {
            transform: translatey(0px);
      }
}

/***Order of Columns***/

@media all and (max-width: 980px) {
    /*** wrap row in a flex box ***/
    .custom_row {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
    flex-wrap: wrap;
    }

    /*** custom classes that will designate the order of columns in the flex box row ***/

    .first-on-mobile {
        -webkit-order: 1;
        order: 1;
    }
     
    .second-on-mobile {
        -webkit-order: 2;
        order: 2;
    }
     
    .third-on-mobile {
        -webkit-order: 3;
        order: 3;
    }
     
    .fourth-on-mobile {
        -webkit-order: 4;
        order: 4;
    }
    
    /*** add margin to last column ***/
    
    .custom_row:last-child .et_pb_column:last-child {
        margin-bottom: 30px;
    }
}
    
/*** SectionDivider Animate ***/

.et_pb_section.wavey > div[class*="_inside_divider"] {
        animation:scaleAnimation 4s infinite;
        animation-timing-function: cubic-bezier(.36,.45,.63,.53);
}    

    @keyframes scaleAnimation {
        0%, to {
            transform: scale(1,1);
        }
        50% {
            transform: scale(1,1.4)
        }
}

/*** NameInput JavaScript ***/

#name-input {
        font-size:1.1em;
        font-family: 'capitana', sans-serif;
            text-align:center;
        font-weight: 900;
        padding: 0;
        border-radius: 0px;
        border: 0px;
        border-bottom: 0.15em solid #EF426F;
        width:75%;
        max-width: 20rem;
        background-color: transparent;
        color: #EF426F;
        line-height: 1.5em;
}

/*BLOG POST IMAGE SPIN*/

.et_pb_post .entry-featured-image-url {
	margin: 0;
}

.et_pb_blog_grid .et_pb_image_container {
	overflow: hidden;
}

.et_pb_blog_grid .et_pb_image_container img {
	transition: all 0.95s ease;
	-moz-transition: all 0.95s ease;
	-webkit-transition: all 0.95s ease;
}

.et_pb_blog_grid .et_pb_post:hover img {
	transform: scale(1.15) rotate(1deg);
	-moz-transform: scale(1.15) rotate(1deg);
	-webkit-transform: scale(1.15) rotate(1deg);
}    


/*MOBILE MENU*/
#mobile_menu1.et_mobile_menu {
min-width: 100vw;
position: fixed;
padding-top:5rem!important;
padding-left:2rem!important;
padding-right:2rem!important;
border-top:0px;
height:106vh;
top:6rem;
}  

@media (max-width: 980px){
.mobile_menu_bar {
z-index:9999;
}
.logo-nav {
z-index:9999;    
}
.et_mobile_menu {
z-index:9998;
min-width: 100vw;
position: fixed;
padding-top:10rem!important;
padding-left:2rem!important;
padding-right:4rem!important;
border-top:0px;
height:106vh;
}
.et_pb_menu .et_mobile_menu {
    top:-1rem;
}
}

.et_mobile_menu li a {
border-bottom:0px;	
}

.et_pb_contact_field[data-type=select]:after {
right: 1.5rem;
border-top-color:#6269ff;
}

a.mobile-toggle::after{
color: #6269ff!important;
font-size:1.5rem;
}
.et_pb_menu .nav li ul, .et_pb_menu .et_pb_menu__menu>nav>ul>li>ul {
border-radius:12px;
}

/*change Divi hamburger menu to X*/
.mobile_nav.opened .mobile_menu_bar:before {
  content: '\4d';
  color:white!important;
  background:transparent!important;

}  
/*rotate the Divi Menu icon on click*/
.mobile_menu_bar:before {
	transition: all .4s ease;
	transform: rotate(0deg);
	display: block;
  background: url("http://felixf14.sg-host.com/wp-content/uploads/2023/05/paw-solid.svg");
color:transparent!important;
}

/*rotate the Divi Menu icon on click*/
.mobile_nav.opened .mobile_menu_bar::before {
	transition: all .4s ease;
	transform: rotate(-90deg);
	display: block;
} 



/*Blurb Image*/
.et_pb_main_blurb_image {
margin-bottom:0px;
padding-bottom:0px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
}
.et_pb_main_blurb_image img {
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    margin-bottom: -1rem;
}
/*Blurb Text*/
.et_pb_blurb p {
    padding: 1rem 2rem 0;
    margin-bottom: 1rem;
}
.et_pb_menu_0_tb_header.et_pb_menu ul li a {
    font-family: 'laca-variable', sans-serif!important;
    font-weight:500;
    font-size: clamp(1.2rem, 1vw + 1rem, 1.5rem)!important;
	/*font-size: 1.25rem;*/
}


/*Suchleiste*/
.et_pb_search input.et_pb_s, .et_pb_search input.et_pb_searchsubmit {
font-family:laca-variable, sans-serif;	
}


/*Kontakt Button*/ 
.et_contact_bottom_container {
    float: none;
    text-align: center;
    margin-top: 3%;
    display: -moz-flex;
    display: -ms-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    margin-left: 0%;
    display: flex!important;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

/*Buttons next to each other -- Column!*/
.inline-buttons .et_pb_button_module_wrapper {
    display: inline-block;
	margin-right:1rem;
	margin-left:1rem;
}
.inline-buttons {
    text-align: center !important;
}