@font-face {
    font-family: "Diatype";
    src: url("../fonts/ABCDiatype-Regular.woff2") format("woff2"),
         url("../fonts/ABCDiatype-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

:root {
    --lb: #e9ebfb;
    --sb: #FBF7AE;
    --sp: #68F6CE;
    --k: #5EA4F4;
    --footer: #A8D1FF;
    --fs-xsmall: 14px;
    --fs-xsmall-v: 13px;
    --lh-xsmall: 15px;
    --fs-small: 21px;
    --lh-small: 1.3;
    --fs-medium: 30px;
    --lh-medium: 1.16;
    --fs-large: 63px;
    --lh-large: 1.07;
    --p-120: 120px;
    --p-48: 48px;
    --p-24: 24px;
    --vh: 100vh; 
    --height: calc(var(--vh, 1vh) * 100);
}

html, body {
	position:relative;
	overflow-x:hidden;
}

body {
    font-family: 'Diatype', sans-serif;
    background: linear-gradient(180deg, rgba(233, 235, 251, 1) 1%, rgba(168,209,255,1) 100%);
    margin: 0;
    padding: 0 var(--p-24);
    min-height: calc(var(--vh, 1vh) * 100);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: black;
}

a {
    text-decoration: none;
    position: relative;
    color: inherit;
}

a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background-color: #000;
    transition: width 0.4s ease-in-out;
}


a:hover::after {
    width: 100%;
}


.soon {
    width: 100vw;
    height: calc(100vh - 80px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.soon p {
    text-indent: 0;
    text-align: center;
    padding: 0;
    margin: 0;
}

/* --------------------------------- */
/* ---------- Accordions ----------- */
/* -------------------------------- */

.wrapper {
    min-height: calc((var(--height) - 80px));
}
.accordion-header {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc((var(--height) - 80px) /4);
    position: relative;
    width: calc(100vw - var(--p-48));
    z-index: 1;
}

.description-bg {
    width: 100%;
    height: 200%;
    filter: blur(17px);
    position: absolute;
    right: 0;
    opacity: 0.7;
}

.accordion-header .description {
    opacity: 0;
    position: absolute;
    right: var(--p-24);
    text-align: center;
    text-transform: uppercase;
    width: 150px;
}

section:hover .description {
    opacity: 1;
}

.accordion-content {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out, padding 0.4s ease-in-out;
    padding-top: 0;
    padding-bottom: 0;
    width: calc(100vw - var(--p-48));
    visibility: hidden;
    z-index: 1;
}

.accordion-content.show {
    max-height: 5000px;
    opacity: 1;
    padding-top: 15px;
    padding-bottom: 70px;
    visibility: visible;
}

.wrapper section .accordion-header {
    transform: translate(0px, -16px);
    height: calc(((var(--height) - 80px) /4) + 10px);
}


.wrapper section:last-child  .accordion-header {
    transform: translate(0px, 0px);
    height: calc(((var(--height) - 80px) /4) - 30px);
}


section {
    position: relative;
    width: calc(100vw - var(--p-48));
    margin: 0 auto;
    transition: all 0.4s;
    z-index: 0;
}

section:hover {
    transform: translate(0px, -40px);
}

.color.kontakt,
.color.lb,
.color.sb,
.color.sp {
    -webkit-backface-visibility: hidden; /* Improve performance */
    -moz-backface-visibility: hidden; 
    backface-visibility: hidden;

    -webkit-transform: translate(0, 0); /* 2D transform */
    -moz-transform: translate(0, 0);
    transform: translate(0, 0);
    will-change: transform;
   
    width: 140%;
    height: 120%;
    top: -10%;
    filter: blur(40px);
    -webkit-filter: blur(40px);
    z-index: -1;
    position: absolute;
    left: -20%;
   
}

.color.show.lb, .color.show.sb, .color.show.sp, .color.show.kontakt {
    height: 100%;
    top: 0%;
    width: 140%;
    background-size: 140%;
}

.lb {
    background: var(--lb); 
}

.sb {
    background: var(--sb);
}

.sp {
    background: var(--sp);
}

.kontakt {
    background: var(--k);
}


.description-bg.lb {
    background: var(--lb);
    position: absolute;
  
}

.description-bg.sb {
    background: var(--sb);
    position: absolute;
}

.description-bg.sp {
    background: var(--sp);
    position: absolute;
}

.description-bg.kontakt {
    background: var(--k);
    position: absolute;
}

/* .lb::before {
    content: '';
    position: absolute;
    top: 0;
    left: -20%;
    width: 140%;
    height: var(--acc-height, 120%);
    background: var(--lb);
    filter: blur(40px);
    -webkit-filter: blur(40px);
    z-index: -1;
}

.sb::before {
    content: '';
    position: absolute;
    top: 0;
    left: -20%;
    width: 140%;
    height: var(--acc-height, 120%);
    background: var(--sb);
    filter: blur(40px);
    -webkit-filter: blur(40px);
    z-index: -1;
}

.sp::before {
    content: '';
    position: absolute;
    top: 0;
    left: -20%;
    width: 140%;
    height: var(--acc-height, 120%);
    background: var(--sp);
    filter: blur(40px);
    -webkit-filter: blur(40px);
    z-index: -1;
}

.kontakt::before {
    content: '';
    position: absolute;
    top: 0;
    left: -20%;
    width: 140%;
    height: var(--acc-height, 120%);
    background: var(--k);
    filter: blur(40px);
    -webkit-filter: blur(40px);
    z-index: -1;
} */

/* ------------------------------ */
/* ------------ Typo ------------ */
/* ------------------------------ */

.fs-xsmall {
    font-size: var(--fs-xsmall);
    line-height: var(--lh-xsmall);
}

.fs-xsmall-v {
    font-size: var(--fs-xsmall-v);
    line-height: var(--lh-xsmall);
}


.fs-small {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}


.content-block p,
.fs-medium {
    font-size: var(--fs-medium);
    font-size: calc(18.7px + (30 - 18.7)*((100vw - 375px) /(1512 - 375))) !important;
    line-height: var(--lh-medium);
    padding-left: calc((100vw - var(--p-48))/12*2);
    text-indent: 100px;
    hyphens: auto;
}

.content-block h1,
.content-block h2,
.content-block h3,
.fs-large {
    font-size: var(--fs-large);
    font-size: calc(26px + (63 - 26)*((100vw - 375px) /(1512 - 375))) !important;
    line-height: var(--lh-large);
    hyphens: auto;
}

strong {
    font-size: var(--fs-xsmall);
    /* text-transform: uppercase; */
    display: inline-block;
    min-width: calc((100vw - var(--p-48))/12*2);
    line-height: 1;
}

.content-block a {
    text-decoration: none;
    position: relative;
    color: inherit;
}

.content-block a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 2px;
    background-color: #000;
    transition: width 0.4s ease-in-out;
}

.content-block a:hover::after {
    width: 0;
}

h1 {
    font-size: 8vmin;
    text-transform: uppercase;
    text-align: center;
    transform: translate(0px, -1vmin);
}

.hidden-hyphen {
    opacity: 0;
    /* position: absolute; */
}

/* ---------------------------------- */
/* -------- Content Blocks ---------- */
/* ------------------------------ */

.content-block {
    padding: 0 0 var(--p-120);
    position: relative;
    width: calc(100vw - var(--p-48));
    margin: 0 auto;
}

.abschluss {
    text-indent: calc((100vw - var(--p-48))/12*2);
}
.content-block figure {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

ul {
    font-size: var(--fs-small);
    font-size: calc(14.85px + (21 - 14.85)*((100vw - 375px) /(1512 - 375))) !important;
    line-height: var(--lh-small);
    padding-left: calc((100vw - var(--p-48))/12*2);
    column-count: 3;
    column-gap: 20px;
    list-style: none;
    padding: 0;
}


ul li {
    position: relative;
    padding-left: 30px;
    break-inside: avoid;
    display: flex;
    align-items: flex-start;
}

ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5.6px;
    width: calc(8px + (18 - 8)*((100vw - 375px) /(1512 - 375))) !important;
    height: calc(8px + (18 - 8)*((100vw - 375px) /(1512 - 375))) !important;
    border-radius: 50%;
    background: #000;
   
}

 

footer {
    height: 80px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-direction: row;
    padding: 0 0 20px;
    position: relative;
}

footer div {
    display: flex;
    flex-direction: row;
    gap: 5px;
    opacity: 0.2;
}

/**************************** RESPONSIVE *****************************/

@media screen and (min-width: 1800px){ 

    :root {
        --p-120: 80px;
    }

    h1 {
        font-size: 84px;
    }

    .content-block p,
    .fs-medium {
        font-size: var(--fs-medium) !important;
    }

    .content-block h1,
    .content-block h2,
    .content-block h3,
    .fs-large {
        font-size: var(--fs-large) !important;
    }

    ul {
        font-size: var(--fs-small) !important;
    }

    ul li::before {
        width:18px !important;
        height: 18px !important;
    }
}

@media screen and (max-width: 1030px){
    h1 {
        width: 45vw;
        font-size: 7vmin;
        transform: translate(0px, -1vmin);
    }
}

@media screen and (min-width:506px) and (max-width: 900px){
    ul {
        column-count: 2;
    }

    ul li {
        padding-left: 20px;
    }
}




@media screen and (max-width:506px) {
    :root {
        --fs-xsmall: 11.45px;
        --fs-xsmall-v: 9.45px;
        --lh-xsmall: 11px;

        --fs-small: 14.85px;
        --lh-small: 1.3;

        --fs-medium: 18.7px;
        --lh-medium: 1.16;

        --fs-large: 26px;
        --lh-large: 1.06;

        --p-120: 60px;
        --p-48: 24px;
        --p-24: 12px;
    }

    .wrapper {
        width: calc(100vw - var(--p-48));
        min-height: calc((var(--height) - 50px));
    }
    .accordion-header {
        height: calc((var(--height) - 50px) / 4);
    }

    section:hover {
        transform: translate(0px, 0px);
    }

    .accordion-header .description {
        position: relative;
        right: 0;
    }

    h1 {
        width: 60vw;
        font-size: 39px;
    }

    ul {
        column-count: 1;
        column-gap: 0;
        padding-left: calc((100vw - var(--p-48)) / 12* 1);
    }

    ul li {
        padding-left: 16px;
    }

    ul li::before {

        width: 8px;
        height: 8px;
    }

    .content-block p {
        padding-left: calc((100vw - var(--p-48)) / 12* 1);
        text-indent: calc(2*var(--p-48));
        hyphens: auto;
    }

    footer {
        height: 50px;
    }
}