@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

@font-face {
    font-family: "Outfit", sans-serif;
  }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background-color: #EDEDED;
    scroll-behavior: smooth;
    scroll-padding: 150px;
}    

body {
    font-family: Outfit;
    font-size: 20px;
    font-weight: 200;
    line-height: 1.3;
    color: #073A5D;
    letter-spacing: 1.1;
}
    
main {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
}

header, footer {
    background-color: #EDEDED;
    width: 100%;
}

footer {
    padding: 50px;
}

a {
    text-decoration: none;
}

header nav a, footer nav a {
    margin-left: 16px;
}

footer a {
    color: #046DB5;

}

footer nav a {
    color: #046DB5;
    font-size: 16px;
}

.mobile {
    text-align: right;
    display: none;
}

.mobile ul {
    list-style: none;
}

ul li ul {
    display: none;
}

ul li:hover ul {
    display: block;
}

ul li a {
    font-size: 50px;
    color: #073A5D;
}

/*
#menu-toggle:checked + .menu-icon + .menu {
    display: block;
}

.menu {
    display: none;
}

.menu:hover {
    display: block;
}
*/

.gradient .container h1 {
    animation: come-in 1s ease-in-out 0s 1 both;
}

.gradient .container .three {
    animation: come-in 2s ease-in-out 0s 1 both;
}

@keyframes come-in {
    0% {
        opacity: 0;
        transform: translate(0,5vw);
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
        transform: translate(0,0);
    }
}

.button {
    background-color: rgba(217, 217, 217, 0.80);
    border-radius: 50px;
    border: none;
    padding: 10px 20px;
    font-family: Outfit;
    font-weight: 400;
    color: #073A5D;
    font-size: 16px;
    cursor: pointer;
}

.blue .button {
    font-weight: 500;
    color: #fff;
    font-size: 30px;
    margin-top: 80px;
}

.container, .gradient .container-legal {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
}

.container-legal {
    margin-top: 50px;
}

header .container, footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
}

header h1 img {
    height: 80px;
}

h1 {
    font-size: 80px;
    font-weight: 100;
    line-height: 1.2;
}

.gradient h1, .blue h1, .blue h2 {
    color: fff;
}

h2 {
    color: #046DB5;
    font-size: 30px;
    font-weight: 500;
}

span {
    font-weight: 300;
}

p span {
    font-weight: 500;
}

p { 
    letter-spacing: 1;
}

.gradient, .blue .button {
    background-image: linear-gradient(135deg, #046DB5, #E9456B 100%);
    background-repeat: no-repeat;
}

.gradient, .blue {
    padding: 80px 0 120px 0;
    border: none;
    border-radius: 16px;
}

.three {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.box, .grid-text-one, .grid-text-two, .grid-text-three, .grid-text-four {
    background-color: rgba(255, 255, 255, 0.80);
    border: none;
    border-radius: 16px;
    margin-top: 80px;
    padding: 20px;
}

.grid-text-one, .grid-text-two, .grid-text-three, .grid-text-four {
    margin-top: 0px;
}

.boxh {
    display: flex;
    align-items: center;
    margin: 0 0 32px 0;
}

.boxh img {
    width: 50px;
    margin-right: 20px;
}

.thema {
    text-align: center;
    margin: 80px 0 80px 0;
}

.grid {
    display: grid;
    background-image: url(pictures/DAREcraft-Bildmarke.svg);
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 20px;
    margin-top: 80px;
    margin-bottom: 100px;
}

.grid-text-one {
    grid-row: 2;
    grid-column: 1 / span 3;
}

.grid-text-two {
    grid-row: 1;
    grid-column: 4 / span 3;
}

.grid-text-three {
    grid-row: 3;
    grid-column: 4 / span 3;
}

.grid-text-four {
    grid-row: 4;
    grid-column: 1 / span 3;
}

.grid-picture {
    grid-row: 2 /span 3;
    grid-column: 2 / span 4;
}

.team {
    margin-top: 80px;
    text-align: center;
}

.team img {
    width: 350px;
    border: none;
    aspect-ratio: 1;
    clip-path: shape(from 97.97% 46.48%,curve to 97.97% 53.52% with 100% 50%,line to 77.03% 89.78%,curve to 70.93% 93.3% with 75% 93.3%,line to 29.07% 93.3%,curve to 22.97% 89.78% with 25% 93.3%,line to 2.03% 53.52%,curve to 2.03% 46.48% with 0% 50%,line to 22.97% 10.22%,curve to 29.07% 6.7% with 25% 6.7%,line to 70.93% 6.7%,curve to 77.03% 10.22% with 75% 6.7%);
    transition: clip-path 1s ease;
}

.team img:hover {
    aspect-ratio: 1;
    clip-path: shape(from 87.5% 28.35%,curve to 87.5% 71.65% with 100% 50%,line to 87.5% 71.65%,curve to 50% 93.3% with 75% 93.3%,line to 50% 93.3%,curve to 12.5% 71.65% with 25% 93.3%,line to 12.5% 71.65%,curve to 12.5% 28.35% with 0% 50%,line to 12.5% 28.35%,curve to 50% 6.7% with 25% 6.7%,line to 50% 6.7%,curve to 87.5% 28.35% with 75% 6.7%);
}

.team p, .content {
    text-align: left;
    margin-bottom: 20px;
}

.grid-two {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-top: 80px;
    margin-bottom: 100px;
}

.end {
    background-image: url(pictures/DAREcraft-Bildmarke-270.svg);
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: 150% 0%;
}

.end background-image {
    transform: rotate(270deg);
}

.grid-text-five {
    grid-column: 1 / span 2;
}

.blue {
    background-color: rgba(4, 109, 181, 0.79);
    text-align: center;
    margin-top: 400px;
}

.accordion {
    width: 100%;
    margin: 20px;
}

.accordion label {
    display: flex;
    align-items: center;
    padding: 0 10px;
    color: #046DB5;
    font-weight: 500;
    cursor: pointer;
}

.content a {
    color: rgb(4, 109, 181);
    font-weight: 400;
}

.two .accordion .content {
    padding: 0 50px 0 30px;
}

ul {
    padding-left: 42px;
    list-style-type: disc;
}

label::before {
    content: '+';
    margin-right: 10px;
    font-size: 24px;
    font-weight: 400;
}

.mobile label::before {
    content: ' ';
}

input[type="checkbox"] {
    display: none;
}

.accordion .content {
    padding: 0px 10px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s;
}

.accordion input[type="checkbox"]:checked + label + .content {
    max-height: 400px;
}

.accordion input[type="checkbox"]:checked + label::before {
    content: '-';
}

@media (max-width: 1054px) {
    .gradient, .header, .container {
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (max-width: 855px) {
    .mobile {
        display: block;
    }

    .desktop {
        display: none;
    }

    .header .container {
        height: auto;
        align-items: normal;
        padding: 10px 0 10px 0;
    }

    .header .container .button {
        font-size: 30px;
        margin: 10px 0 10px 0;
    }
    
    .team img {
        width: 300px;
        clip-path: none;
        border-radius: 50%;
}

    h1 {
        font-size: 50px;
    }

    h2 {
        font-size: 24px;
    }

    .three, .grid, .two {
        display: block;
    }

    .grid-text-one, .grid-text-two, .grid-text-three, .grid-text-four {
        margin-bottom: 30px;
    }

    .box {
        margin-top: 30px;
    }

    footer {
        padding: 50px 10px 30px, 10px;
    }
    
}

@media (max-width: 655px) {
    header .container {
        display: block;
    }

    .mobile {
        margin-top: -60px;
    }

    .gradient {
        padding: 30 0 50 0 ;
    }

    .gradient .container-legal {
        padding: 0 30px 0 30px;
    }

    .grid {
        background-size: 120%;
    }

    .end {
        background-size: 80%;
    }

    h1 {
        font-size: 36px;
    }

    h2 {
        font-size: 20px;
    }

    .thema {
        margin: 40px 0 40px 0;
    }

    .blue {
        padding: 40px 0 60px 0;
    }

    .grid-text-five {
        grid-column: 1 / span 3;
    }

    footer {
        padding: 50px 0 50px 0;
    }

    footer .container {
        display: block;
    }

    footer nav a {
        margin-left: 0;
        margin-right: 16px;
    }

    footer nav {
        margin-top: 30px;
    }

    footer p {
        font-size: 16px;
    }

}