/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/************/
/* Color Variables*/
/*************/
/*****************************************/
/* CSS for Contact Forms                 */
/*****************************************/

form input[type=submit]:hover{
background-color: transparent;
  color:black;
  transition: background-color 0.3s, color 0.3s;
}

input:not([type="checkbox"]):not([type="submit"]) {
    border: none;
    border-bottom: 1px solid;
    background-color: var(--Off-Grey, #E4EEEE);
    width: 100%;
}
form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: auto;
    gap: 24px;
    background: var(--Off-Grey, #E4EEEE);
    padding: 104px 153px;
    box-sizing: border-box;
    max-width: 1440px;
    border-radius: 16px;
    grid-template-rows: auto!important;

}

form {
  grid-template-columns: 1fr 1fr; /* Zwei Spalten für die ersten vier Inputs */
  grid-template-rows: repeat(4, 1fr); /* Vier Zeilen */
}


svg.svgLogo {
    position: absolute;
    right: max(40px, calc(50% - 600px));
}


@media screen and (min-width: 769px)
{
  form div:nth-child(-n+4) {
    grid-row: auto; /* Automatische Platzierung in den ersten vier Zeilen */
  }

  form div:nth-child(n+5) {
    grid-column: span 2; /* Erstreckt sich über beide Spalten */
  }
}

input{
    outline: none;
    padding: 8px;
}

label.hs-form-booleancheckbox-display {
    width: 50%!important;
    display: inline-block;
}

input[type="checkbox"] {
    margin-right: 5px;
}

form .hs-richtext {
    opacity: 0.3;
}

form h3 {
 max-width: 1360px!important;
  margin: 24px auto!important;
}

form input[type="submit"] {
    cursor:pointer;
   display: flex;
    justify-content: center;
    align-items: center;
       width: fit-content;
    height: 18px;
    padding: 8px 64px;
    border-radius: 8px;
      gap: 8px;
    box-sizing: border-box;
    height: auto;
    background-color: var(--black);
    color: var(--Grey, #DCE6E6);
}

@media screen and (max-width: 768px)
{
  form {
    padding: 48px 16px; 
    grid-template-columns: 1fr!important;
  }
  label.hs-form-booleancheckbox-display {
    width: 100%!important;
    display: inline-block;
  }
  form input[type="submit"] {
       width: 100%;

}
}
/* Primary and Secondary */
#hhs-main-nav{
display:none;
}
h1,h2,h3,h4,h5,h6,p{
hyphens:auto;
}
form{
  ul{
  list-style:none;
  }
  
}

[class*="-card-edges"] {
    border-radius: 16px;
}

h3.form-title {
 max-width: 1380px!important;
  margin: 24px auto!important;
  padding: 0 16px;
}

:root {
    --black:#000;
    --soft-black: #0C0C0C;
    --white:#fff;
  --off-white:#f4f4f4;
    --soft-white: #F4F4F4;
    --dark-green: #265861;
  --soft-dark-green:#22525B;
    --bright-green:  #1ED2AA;
  --soft-bright-green:  #18C59F;
  --red:  #EC6567;
  --soft-red:   #DC5F61;
  --light:   #DCE6E6;
  --soft-light:   #E4EEEE;
  --grey: #DCE6E6;

  }
  a {
    text-decoration: none; /* Remove underline */
    border: none; /* Remove border */
    color: inherit; /* Inherit text color */
    font-family: inherit; /* Inherit font family */
    font-size: inherit; /* Inherit font size */
  }
  ul, ol {
     
    padding: 0;
      margin: 0;
  }
  
  .kk-wrapper{
  max-width:1440px;
    margin-left:auto;
    margin-right:auto;
  }
h1, h2, h3, h4, p {
  margin: 0;
}

  
  /************/
  /* background-colors */
  /*************/
  .kk-bg-black {
      background-color: var(--black);
  }
  
  .kk-bg-soft-black {
      background-color: var(--soft-black);
  }
  
  .kk-bg-white {
      background-color: var(--white);
  }
  
  .kk-bg-soft-white {
      background-color: var(--soft-white);
  }
  
  .kk-bg-dark-green {
      background-color: var(--dark-green);
  }
  
  .kk-bg-soft-dark-green {
      background-color: var(--soft-dark-green);
  }
  
  .kk-bg-bright-green {
      background-color: var(--bright-green);
  }
  
  .kk-bg-soft-bright-green {
      background-color: var(--soft-bright-green);
  }
  
  .kk-bg-red {
      background-color: var(--red);
  }
  
  .kk-bg-soft-red {
      background-color: var(--soft-red);
  }
  
  .kk-bg-light {
      background-color: var(--light);
  }
  
  .kk-bg-soft-light {
      background-color: var(--soft-light);
  }

 .kk-bg-grey {
      background-color: var(--soft-grey);
  }
  
  /************/
  /* Font-Color */
  /*************/
  
  .kk-color-black {
      color: var(--black);
  }
  
  .kk-color-soft-black {
      color: var(--soft-black);
  }
  
  .kk-color-white {
      color: var(--white);
  }
  
  .kk-color-soft-white {
      color: var(--soft-white);
  }
  
  .kk-color-dark-green {
      color: var(--dark-green);
  }
  
  .kk-color-soft-dark-green {
      color: var(--soft-dark-green);
  }
  
  .kk-color-bright-green {
      color: var(--bright-green);
  }
  
  .kk-color-soft-bright-green {
      color: var(--soft-bright-green);
  }
  
  .kk-color-red {
      color: var(--red);
  }
  
  .kk-color-soft-red {
      color: var(--soft-red);
  }
  
  .kk-color-light {
      color: var(--light);
  }
  
  .kk-color-soft-light {
      color: var(--soft-light);
  }
  
  
  /************/
  /* Fonts */
  /*************/
  /* Headings */
@font-face {
  font-family: 'DM Sans';
  src: url('https://2531671.fs1.hubspotusercontent-na1.net/hubfs/2531671/Webseite%2008042024/Font/DMSans-VariableFont_opsz%2cwght.ttf');
}

html{
font-size:16px;
}
*{
font-family: 'DM Sans', sans-serif;
}

  h1, .kk-h1,h2, .kk-h2,h3, .kk-h3, h4, .kk-h4,p, .kk-bodytext, .kk-smalltext{
  margin:0;
  }
@media screen and (min-width: 768px) {
  h1, .kk-h1 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600; /* SemiBold */
    font-size: 4rem; /* 104px */
    line-height: 1.1; /* 110% */
  }
  
  h2, .kk-h2 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600; /* SemiBold */
    font-size:3rem; /* 76px */
    line-height: 1.05; /* auto */
  }
  
  h3, .kk-h3 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600; /* SemiBold */
    font-size: 2.5rem; /* 52px */
    line-height: 1.15; /* auto */
  }
  
  h4, .kk-h4 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600; /* SemiBold */
    font-size: 2rem; /* 24px */
    line-height: 1; /* auto */
  }
  
  /* Body Text */
  p, .kk-bodytext {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 1.25rem; /* 24px */
    line-height: normal; /* auto */
  }
  .kk-smalltext {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 1rem; /* Changed to 16px */
    line-height: normal; /* auto */
}

.kk-smalltext-bold{
color: var(--Black, #000);
font-size: 1rem;
font-style: normal;
font-weight: 700;
line-height: normal;
}
  
  /* Buttons */
  button, .kk-button {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem; /* 14px */
font-style: normal;
font-weight: 500;
line-height: normal;
  }
  .kk-button-font-large{
  font-size:1rem!important; /* 14px */
font-style: normal;
font-weight: 500;
line-height: normal;
  }
}
@media screen and (max-width: 768px) {
 h1, .kk-h1 {
  font-family: 'DM Sans', sans-serif;
    font-weight: 600; /* SemiBold */
    font-size: 3.25rem; /* 52px */
    line-height: 1.15; /* auto */
  }
  
  h2, .kk-h2 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600; /* SemiBold */
    font-size: 2.5rem; /* 76px */
    line-height: 1.05; /* auto */
  }
  
  h3, .kk-h3 {
    font-family: "DM Sans";
font-size: 2rem;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: -0.72px;
  }
  
  h4, .kk-h4 {
    font-family: "DM Sans";
font-size: 1.5rem;
font-style: normal;
font-weight: 600;
line-height: normal;
  }
  
  /* Body Text */
  p, .kk-bodytext {
font-family: "DM Sans";
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
  }
  .kk-smalltext {
   font-family: "DM Sans";
font-size: 0.75rem;
font-style: normal;
font-weight: 400;
line-height: normal;
}

.kk-smalltext-bold{
color: var(--Black, #000);
font-family: "DM Sans";
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
  
  /* Buttons */
  button, .kk-button {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem; /* 14px */
    line-height: 1; /* auto */
    /* Additional button styles */
  }
    .kk-button-font-large{
  font-size:0.875rem!important; /* 14px */
font-style: normal;
font-weight: 500;
line-height: normal;
  }
}
}

  /************/
  /* borders */
  /*************/
  
  /* borderradius */
  
  .kk-button-border {
      border-radius: 8px;
      border-style: solid;
      border-width: 1px!important;
  }
  
  .kk-card-edges {
      border-radius: 16px;
  }
  
  
  /* bordercolor */
  .kk-border-black {
      border-color: var(--black);
     border-style:solid;
  }
  
  .kk-border-soft-black {
      border-color: var(--soft-black);
     border-style:solid;
  }
  
  .kk-border-white {
      border-color: var(--white);
     border-style:solid;
  }
  
  .kk-border-soft-white {
      border-color: var(--soft-white);
     border-style:solid;
  }
  
  .kk-border-dark-green {
      border-color: var(--dark-green);
     border-style:solid;
  }
  
  .kk-border-soft-dark-green {
      border-color: var(--soft-dark-green);
     border-style:solid;
  }
  
  .kk-border-bright-green {
      border-color: var(--bright-green);
     border-style:solid;
  }
  
  .kk-border-soft-bright-green {
      border-color: var(--soft-bright-green);
     border-style:solid;
  }
  
  .kk-border-red {
      border-color: var(--red);
     border-style:solid;
  }
  
  .kk-border-soft-red {
      border-color: var(--soft-red);
     border-style:solid;
  }
  
  .kk-border-light {
      border-color: var(--light);
     border-style:solid;
  }
  
  .kk-border-soft-light {
      border-color: var(--soft-light);
     border-style:solid;
  }
  /************/
  /* Hover Effects */
  /*************/
.kk-button-dark-green:hover {
background-color: transparent;
  border:1px solid var(--soft-dark-green);
     
  transition: background-color 0.5s, color 0.5s, border-color 0.5s;
}
  

 a.kk-bg-red:hover{
background-color: transparent;
  transition: background-color 0.5s, color 0.5s, border-color 0.5s;
   cursor:pointer;
}

a.kk-bg-red:hover>.kk-color-white{
color:var(--red);   transition: background-color 0.5s, color 0.5s, border-color 0.5s;
}


.kk-button-green:hover {
background-color: var(--black);
  transition: background-color 0.5s, color 0.5s, border-color 0.5s;
}
  
  a.kk-bg-black:hover>div{
         color:var(--black)!important;
  }
  a.kk-bg-black:hover{
background-color: transparent;
    border-color: var(--black);
    transition: background-color 0.5s, color 0.5s, border-color 0.5s;
}

a.kk-bg-black:hover>.kk-color-white{
color:white;  transition: background-color 0.5s, color 0.5s, border-color 0.5s;
}

a.kk-border-black:hover>.kk-color-black{
color:white;   transition: background-color 0.5s, color 0.5s, border-color 0.5s;
}

a.kk-button-border:not(.kk-bg-black, .kk-bg-dark-green, .kk-bg-bright-green, .kk-bg-red, .kk-border-red, .kk-border-bright-green,  .kk-border-dark-green):hover{
background-color: black;
    transition: background-color 0.5s, color 0.5s, border-color 0.5s;
}

a.kk-button-border:not(.kk-bg-black, .kk-bg-dark-green, .kk-bg-bright-green):hover>.kk-button-font{
color:white;  transition: background-color 0.5s, color 0.5s, border-color 0.5s;
}

.kk-border-black>div:hover{
color:var(--white)!important;  transition: background-color 0.5s, color 0.5s, border-color 0.5s;
}

  /************/
  /* Shadows*/
  /*************/
  .kk-shadow{
  box-shadow: 0px 0px 20px 0px #00000040;
  }
  .kk-shadow-y{
  box-shadow: 0px 4px 20px 0px #00000040;
  }
  
  /************/
  /* Animations*/
  /*************/
  
  
  /************/
  /* Partials */
  /*************/
  
  /* Horizontal Line */
  .kk-horizontal-line {
      border: none;
      border-top: 1px solid var(--black); 
      margin: 20px 0; 
  }
  .kk-horizontal-line-coral {
      border: none;
      border-top: 1px solid var(--red); 
      margin: 20px 0; 
  }
  
  /* Cards round */
  .kk-cards-round{
      height: fit-content;
      padding: 48px 40px;
      border-radius: 16px;
      gap: 24px;
  }
  
  
  .kk-shadow{
  box-shadow: 0px 0px 20px 0px #00000040;
  }
  
  /* Cards cut corners */
  
  .kk-cards-cut-corners {
        /*adjust as you need*/
    --edge-size: 0.5em;/*adjust as you need*/
        clip-path: polygon(
      var(--edge-size) 0%,
       calc(100% - var(--edge-size)) 0,
      100%  var(--edge-size),
      100% calc(100% - var(--edge-size)) ,
      calc(100% - var(--edge-size)) 100% ,
      var(--edge-size) 100%,
       0% calc(100% - var(--edge-size)),
      0% var(--edge-size)
    );
   padding:var(--edge-size);
  }
  /* Arrow Button */
  .kk-button-arrow {
    cursor:pointer;
      display: flex;
      justify-content: center;
      align-items: center;
         width: 18px;
      height: 18px;
      padding: 8px;
      border-radius: 8px;
      gap: 8px;
  }
  
  .kk-arrow {
      max-width: 100%;
      max-height: 100%;
  }
  
  .kk-arrow-right{
  }
  
  .kk-arrow-left{
  transform: rotate(180deg); /* Rotate the image by 180 degrees */
  }
  /* Button */

.columns-color-coral, .kk-button-border .kk-border-red :not(.kk-button-hero, .kk-button-font-large,.kk-blog-button){
 cursor:default!important;
}
div.kk-border-red{
cursor:default!important;
}

  .kk-button{
    cursor:pointer;
     display: flex;
      justify-content: center;
      align-items: center;
         width: fit-content;
      height: 18px;
      padding: 8px 16px;
      border-radius: 8px;
    gap: 8px;
    box-sizing: content-box;
    border-width:1px;
}


/* iFrames */

  #personio-iframe {
    width: 100%;
  }



/* Video */
.hs-video-container {
    max-width: 1056px!important;
    overflow: hidden;
    border-radius: 16px;
}