/* * {
    border: dashed 2px salmon;
} */

body, html {
    overflow-x: hidden;
  }

.bg 
{	
    position:absolute;
    background: cover;
    background: linear-gradient(130deg, #243036 0%,  #272123 100%);
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    z-index: 0;
    opacity: 1;
}

            a:link {
                color: inherit;
                text-decoration: none;
            } 
            a:visited {
                color: inherit;
            }
            a:hover {
                color: inherit;
                text-decoration: underline;
            }

html {
    font-size: 20px;
    scroll-behavior: smooth;
    /*     font-family: radikal,Arial,Helvetica,sans-serif;
    font-weight: 300; */
} 

img {
    width: 100%;
    height: 100%;
}

p {
    font-size: 1.2rem;
    line-height: 1.5;
    margin-bottom: 0;
    font-family: 'PT Sans', sans-serif;
}

h1 {
    width: 100%;
    font-size: 2.5rem;
    font-family: 'Merriweather', serif;
    line-height: 1.1;
}

h2 {
    font-size: 1.8rem;
    font-family:  'PT Sans', sans-serif;
    margin-bottom: 1em;
    margin-top: 2em;
}

h3 {
    font-size: 1.2rem;
    flex: 1;
    margin: 0;
    font-family:  'PT Sans', sans-serif;
    font-weight: 100;
}

h4 {
    font-size: 0.8rem;
    font-weight: 500;
    font-family: 'Merriweather', serif;
    font-family:  'PT Sans', sans-serif;
    line-height: 1.5;
}
h5 {
    font-size: 0.9rem;
    font-weight: 700;
    font-family: 'Merriweather', serif;
    font-family:  'PT Sans', sans-serif;
    line-height: 1.3;
    margin: 0;
    padding: 0;
    letter-spacing: .05rem;
    margin-bottom: 0.5em;
    color: #ececec;
}

h6 {
    font-size: 0.8rem;
    font-weight: 500;
    font-family: 'Merriweather', serif;
    font-family:  'PT Sans', sans-serif;
    line-height: 1.3;
    margin: 0;
    padding: 0;
    color: rgb(170, 170, 170);
    color: #646c6f;
}

.h4-minus-margin {
    margin-top: -1.5em;
}

.text-farbe-weiss {
    color: #dadddf;
}
.text-farbe-grau {
    color: #494f52;
}
.text-farbe-schwarz {
    color: #212528;
}
.flex-rechts {
    justify-content: flex-end;
}
.flex-links {
    justify-content: flex-start;
}
.flex-mitte {
    justify-content: center;
}
.flex-bottom {
   align-content: flex-end;
   align-items: flex-end;
   align-self: flex-end;
}
.flex-space-between {
    justify-content: space-between;
}
.text-links {
    text-align: left;
}
.text-rechts {
    text-align: right;
}
.text-mitte {
    text-align: center;
}

.hero {
    width: 100%;
    height: 158vh;
    height: auto;
    display: flex;
    position: relative;
    flex-wrap: wrap;
    justify-content: center;
    -background-color: #f00c7a;
}

.hero-main {
    width: 100%;
    height: 100vh;
    display: flex;
    position: relative;
    justify-content: flex-end;
    background: linear-gradient(130deg, rgba(36,48,54,0.75) 0%, rgba(39,33,35, 0.75) 100%);
    padding-left: calc((100% - 1440px) / 2 );
    padding-right: calc((100% - 1440px) / 2 );
    -background: #6fd2eb;
}

.hero-main-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-content: flex-start;
    width: 39%;
    height: 60%;
    margin-top: 11em;  
    -background: green;
}

.hero-main-text {
    width: 100%;
    line-height: 1;
}

.hero-sub-text {
    width: 64%;
    text-align: right;
    margin-top: -2.4em;
    line-height: 1.5;
    font-family: 'PT Sans', sans-serif;
    font-weight: 0;
}

.hero-call-action {
    z-index: 5!important;
    width: 64%;
    text-align: right;
    margin-top: 4.4em;
    font-size: 0.8rem;
    font-family: 'PT Sans', sans-serif;
    font-weight: bold;
    transition: all 0.8s ease-in-out;
}

button {
    cursor: pointer;
    background-color: #0c2f4d;
    border: 0;
    padding: 0.8em 2.6em 0.8em 2.6em;
    transition: all 0.8s ease-in-out;
}

            button:hover {
                background-color: #071d31;
                transition: all 0.8s ease-in-out;
            }

.hero-addon {
    width: 100%;
    height: 20vh;
    display: flex;
    position: relative;
    justify-content: center;
    background: linear-gradient(130deg, #485e6c 0%, #23282a 100%);
    -background-color: #444e56;
}

.hero-image {
    position: absolute;
    content: '';
    z-index: 6!important;
    height: 140vh;
    left: 12%;
    margin-top: 6vh;
    left: clamp(0px, calc((100vw - 1440px - 0px) / 2), 9999px);
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

section {
    width: 100%;
    -max-width: 100vw;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    align-content: flex-start;
    -background-color: rgba(116, 194, 209, 0.5);
}

.section-color-weiss {
    background: #ececec;
}
.section-color-hell {
    background: linear-gradient(130deg, #8c969a 0%, #535a5d 100%);
}
.section-color-mittel {
    background: linear-gradient(130deg, #3f494d 0%, #5b696e 100%);
}
.section-color-dunkel {
    background: linear-gradient(130deg, #243036 0%, #272123 100%);
}
.section-color-dunkeldunkel {
    background: linear-gradient(130deg, #1a2327 0%, #131011 100%);
}
.section-color-lila {
    background: #3c3a6f;
}

.section-container {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    padding-left: calc((100% - 1440px) / 2 );
    padding-right: calc((100% - 1440px) / 2 );
    padding-top: 6em;
    padding-bottom: 6em;
    width: 100%;
}

.section-main-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    width: 39%;
    height: 50%;
    -background: green;
  }

#referenzen {
    position: relative;
}

.section1-image {
    position: absolute;
    z-index: 6!important;
    height: 69vh;
    width: auto;
    max-width: 100%;
    margin-bottom: 0;
    bottom: 0;
    right: clamp(0px, calc((100vw - 1440px - 160px) / 2), 9999px);
}

.section1-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.section, footer, .sub-footer {
    display: flex;
    height: auto;
    align-content: flex-start;
    align-items: flex-start;
}

.section1-height {
    width: 100%;
    height: calc(65vh + 15vh);
    height: 80vh;
    justify-content: flex-start;
}

.card-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 4em;
    transition: all 0.5s ease-in-out;
}

            .card-container:hover .card {
                filter: brightness(0.75);
                opacity: 0.8;
                transition: all 0.5s ease-in-out;
            }
        
            .card-container:hover .card:hover {
                filter: brightness(1);
                opacity: 1;
                transition: all 0.5s ease-in-out;
            }
    

.card {
    height: 500px;
    width: 19%; 
    border-radius: 10px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    opacity: 0.9;
    cursor: pointer;
}

.vorsorge {
    background-image: url(../img/bg_vorsorge.jpg);
    background-size: cover;
    background-position: center;
}
.investment {
    background-image: url(../img/bg_investment.jpg);
    background-size: cover;
    background-position: center;
}
.krankenkasse {
    background-image: url(../img/bg_krankenkasse.jpg);
    background-size: cover;
    background-position: center;
}
.eigenheim {
    background-image: url(../img/bg_eigenheim.jpg);
    background-size: cover;
    background-position: center;
}
.sach {
    background-image: url(../img/bg_sach.jpg);
    background-size: cover;
    background-position: center;
}
  
.card-header {
    text-align: left;
    padding: 1.8em;
    color: #fff;
    height: 65%;
}
  
.card-title {
    margin: 0;
    font-size: 1.4rem;
    margin-bottom: 2em;
    height: 1.6em;
    line-height: 1.2;
}
  
.card-subtitle {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
    position: relative;
    font-family: 'PT Sans', sans-serif;
}
  
.card-body {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    padding: 1em 0 1.4em 1.8em;
    width: 40px;
}

.card-body img {
    width: 100%;
    height: 100%;
}
  
.card-icon {
    height: 40px;
    width: 40px;
    margin-bottom: 20px;
}

/* .referenzen-image {
    position: absolute;
    z-index: 6 !important;
    width: 100vw;
    justify-self: center;
    bottom: -12vh;
} */

.referenzen-image {
    z-index: 6 !important;
    width: 100vw;
    margin-bottom: -4em;
    margin-top: -4em;
}
  
.referenzen-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.card-referenzen {
    height: auto;
    width: 32%; 
    border-radius: 10px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    margin-bottom: 2em;
}

.card-header-referenzen {
    text-align: left;
    padding: 36px 0 28px 0;
    color: #fff;
    height: 65%;
    position: relative;
}

.play-icon {
    position: absolute;
    width: 80px;
    left: 5%;
    top: 5%;
}

.bg-section {
    -position: absolute;
    background-image: url('../img/bg_section.jpg');
    background-color: #97a0a5;
    background-image: url('../img/bg_section.webp');
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-size: 100%;
/*     content: '';
    bottom: 0;
    margin-left: 3%;
    z-index: 4;
    width: 100%;
    max-width: 1440px;
    height: 100%; */
    -background: green;
    overflow: hidden;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-size: cover;
}

.hex1, .hex2 {
    stroke: none;
    width: 100%;
    height: 100%;
}

/* #color-fill {
    width: 40%;
    height: 100%;
    position: absolute;
    right: 0;
    -background-color: red;
} */

.container-faq {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #949494;  
    padding-bottom: 10px;
    cursor: pointer;
    margin-top: 1.2em;
}

.down-arrow {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #000;
    margin-left: 10px;
    margin-bottom: 10px;
    transition: all 0.3 ease-in-out;
}

.fa-chevron-down {
    transition: transform 0.5s ease-out; /* add a transition to transform property */
}

.rotate {
/*     -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg); */
    transition: transform 0.5s ease-out; /* add a transition to transform property */
    transform: scaleY(-1);
  }

.expandable {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    color: #b1b1b1;
}

.expandable p {
    font-size: 1rem;
    line-height: 1.3;
    margin-top: 0.5em;
    padding-left: 1em;
}

.expanded {
    max-height: 1000px; /* set to a high value to accommodate any amount of content */
    transition: max-height 1s ease-out;
}

.form-container {
    width: 100%;
    margin: auto;
    -display: flex;
    justify-content: center;
}

form {
    width: 100%;
    display: flex;
    flex-direction: column;
    font-family: 'PT Sans', sans-serif;;
}
  
label {
    font-weight: bold;
    margin-bottom: 10px;
}
  
input,
textarea {
    background-color: #dedede;
    padding: 10px;
    margin-bottom: 20px;
    border: none;
    border-radius: 4px;
}
  
button[type="submit"] {
    background-color: #ececec;
    color: #212528;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid rgb(102, 102, 102);
    width: 30%;
}
  
            button[type="submit"]:hover {
                background-color: #00306b;
                color: #ececec;
            }
  
textarea {
    height: 120px;
}
  
/* Add space between form and form-container */
.form-container form {
    margin-top: 20px;
}
  
/* Add horizontal line below form */
.form-container:after {
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    margin-top: 20px;
    background-color: #ececec;
}

.container-standort {
    width: 100%;
    min-width: 100%;
    margin-top: 2.2em;
    margin-bottom: 3.6em;
}

.icon-social-container {
    display: flex;
    margin-bottom: 2.8em;
    height: 40px;
}

.icon-social {
    width: 40px;
    padding-right: 1em;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}
            .icon-social:hover img {
                opacity: 1;
                transition: all 0.5s ease-in-out;
            }

.icon-social img{
    opacity: 0.8;
    width: 100%;
    height: 100%;
}

.logo-footer {
    width: 70px;
    margin-bottom: 1em;
}

.icon-social-container-footer {
    display: flex;
    margin-top: 3em;
    height: 26px;
}

.icon-social-footer {
    width: 26px;
    padding-right: 14px;
    opacity: 0.8;
    filter: invert(1);
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}

            .icon-social-footer:hover {
                opacity: 0.5;
                transition: all 0.5s ease-in-out;
            }

.footer-image {
    position: absolute;
    background-image: url('../img/logo.png');
    background-position: 100% 50%;
    background-repeat: no-repeat;
    background-size: 50%;
    content: '';
    bottom: 0;
    z-index: auto;
    width: 100%;
    max-width: 1440px;
    height: 100%;
    overflow: hidden;
    opacity: 0.01;
}

.sub-footer-container {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    padding-left: calc((100% - 1440px) / 2 );
    padding-right: calc((100% - 1440px) / 2 );
    padding-top: 1em;
    padding-bottom: 1em;
    width: 100%;
    justify-content: space-between;
    align-content: center;
}

.blackcloud-logo {
    cursor: pointer;
    height: 24px;
    opacity: 0.4;
    transition: all 0.4s ease-in-out;
}

.blackcloud-logo:hover {
    opacity: 1;
    transition: all 0.4s ease-in-out;
}

.partner-container {
    margin-top: -0.5em;
    width: 100%;
    display: flex;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    justify-items: center;
    -background-color: pink;
}

.partner100 {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0.6em;
    align-content: center;
    align-items: center;
    -border: 2px solid orangered;
}

.partner-logo {
    cursor: pointer;
    opacity: 0.5;
    justify-content: center;
    justify-self: center;
    display: inline-flex;
    transition: all 0.5s ease-in-out;
    width: 30%;
    -height: 40px;
    -border: 2px solid greenyellow;
}

            .partner-logo:hover {
                transition: all 0.5s ease-in-out;
                opacity: 1;
            }

.partner-logo img {
    width: 100%;
    height: auto;
}

.soon {
    position: absolute;
    content: '';
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.5);
    width: 100%;
    text-align: center;
    padding-top: 0.75em;
    padding-bottom: 1em;
}

#messageReply {
    width: 100%;
    margin-top: 1em;
    font-family: 'PT Sans', sans-serif;
}

#höheReferenz {
    -border: 2px solid red;
}

.cookie-consent {
    display: flex;
    position:fixed;
    padding: 1.5em;
    content: '';
    width: 12.5%;
    right: 0.8%;
    bottom: 8%;
    background-color: #5a686d;
    z-index: 1000!important;
    flex-wrap: wrap;
    border: 1px solid rgb(226, 226, 226);
}

.cookie-consent p {
    font-size: 0.9rem;
    margin: 0;
    padding: 0;
}

.cookie-data {
    display: inline;
}

.cookie-consent button {
    font-size: 1rem;
    font-weight: bold;
    margin-top: 1.5em;
    border: 6px solid rgb(132, 132, 132);
    background: none;
    font-family: 'PT Sans', sans-serif;
    padding: 0.5em;
    background-color: #5a686d;
}

.cookie-consent button:hover {
    background-color: #667479;
}

.hover-div {
    position: relative;
    cursor: pointer;
    display: inline-block; /* make the div only take up the necessary width */
  }
  
  .floating-img {
    height: 300px;
    width: auto;
    position: absolute;
    bottom: 90%;
    left: 50%;
    transform: translate(-50%, 0);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }
  

  .hover-div:hover + .floating-img {
    opacity: 1;
  }

  #video-modal, #video-modal2, #video-modal3 {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
  }

  .video-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
    background-color: rgb(33, 38, 41);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    padding: 20px;
    text-align: center;
  }
  
  .close-button, .close-button2, .close-button3 {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
    font-size: 24px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
  }
  
  .close-button:hover, .close-button2:hover, .close-button3:hover {
    background-color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
  }
  
  .close-button i, .close-button2 i, .close-button3 i {
    font-size: 16px;
  }