:root {
    --color-s01: #164257;
    --color-s02: #cbdde6;
    --color-s03: #d4dee3;
    --color-p: #4b4b4b;
    --color-cta: #fff400;
    --color-bg-white: #ffffff;
    --color-bg-lightblue: #e9f3f8;
    --color-bg-darkblue: #50788b;
    --color-bg-gradient: linear-gradient(180deg, rgb(29, 86, 111) 0%, rgb(29, 86, 111) 76%, rgb(149, 175, 184) 0%);
    --font-size-xs: 16px;
    --font-size-s: clamp(16px, 2vw, 22px);
    --font-size-m: clamp(26px, 2.7vw, 32px);
    --font-size-l: clamp(38px, 3.4vw, 45px);
    --font-size-xl: clamp(44px, 5vw, 74px);
    --element-spacing-s: clamp(7px, 3vw, 24px);
    --element-spacing-m: clamp(16px, 4vw, 38px);
    --element-spacing-l: clamp(25px, 5vw, 64px);
    --element-spacing-xl: clamp(36px, 6vw, 96px);
}

@font-face {
    font-family: PTSans-Regular;
    src: url(../assets/fonts/pt-sans.regular.ttf);
}

@font-face {
    font-family: PTSans-Bold;
    src: url(../assets/fonts/pt-sans.bold.ttf);
}

@font-face {
  font-family: "Bebas Neue";
  src: url(../assets/fonts/BebasNeue-Regular.ttf);
  font-weight: normal;
  font-style: normal;
}

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

body {
    font-size: 16px;
    max-width: 100vw;
    overflow-x: hidden;
}

.hidden__headline {
    height: 1px;
    width: 1px;
    margin-top: -1px;
    color: transparent;
    position: absolute;
    left: 0;
    top: 0;
    transform: translateX(-100%);
}

.headline__h1 {
    font-size: var(--font-size-xl);
    font-family: PTSans-Bold;
    line-height: 59px;
    letter-spacing: 0.76px;
}

.headline__h2 {
    font-size: var(--font-size-l);
    font-family: PTSans-Bold;
    line-height: 44px;
    letter-spacing: 0.46px;
}

.headline__h3 {
    font-size: var(--font-size-m);
    font-family: PTSans-Bold;
    line-height: 28px;
    letter-spacing: 0.7px;
}

.headline__h4 {
    font-size: var(--font-size-s);
    font-family: PTSans-Bold;
    line-height: 28px;
    letter-spacing: 1.1px;
}
.headline__h4_highlight {
    font-size: var(--font-size-l);
    font-family: PTSans-Bold;
    line-height: 44px;
    letter-spacing: 0.46px;
    color: #dd4c08;
}

p,
label {
    font-size: var(--font-size-xs);
    font-family: PTSans-Regular;
    line-height: 25px;
    letter-spacing: 0;
}

p {
    color: var(--color-p);
}

a,
button {
    font-family: PTSans-Bold;
    font-size: var(--font-size-xs);
    color: inherit;
}

a.cta {
    text-decoration: none;
}

header,
main,
footer {
    width: 100%;
    max-width: 94vw;
    margin: auto;
}

header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3rem;
    z-index: 99;
    display: flex;
}

header::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    width: 100vw;
    transform: translate(-50vw, 0);
    background-color: var(--color-bg-white);
    z-index: -1;
}

header nav {
    max-height: 100%;
    display: flex;
    align-items: center;
    gap: calc(var(--element-spacing-s) * 0.25);
}

header img {
    filter: invert();
    max-height: 60%;
}

main {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-left: clamp(1rem, 3vw, 20%);
    padding-right: clamp(1rem, 3vw, 20%)
}

main>section {
    padding: var(--element-spacing-xl) 0;
    max-width: 700px;
    width: 100%;
    height: 100%;
    margin: auto;
    display: grid;
    grid-template-rows: max-content;
    z-index: 1;
}

main>section>h2 {
    margin-bottom: var(--element-spacing-xl);
    text-align: center;
}

.cta {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.8rem 3rem;
    text-transform: uppercase;
    color: black;
    border: none;
    outline: none;
    border-radius: 11px;
    font-family: PTSans-Bold;
    font-size: var(--font-size-s);
    line-height: 21px;
    letter-spacing: 0.16px;
    cursor: pointer;
}

.cta_yellow {
    background-color: var(--color-cta);
}

.cta_transparent {
    border: 2px solid white;
    color: white;
    background-color: transparent;
}

i.icon {
    display: flex;
    width: 1em;
    height: 1em;
    color: black;
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center;
}

i.icon--Icon_zusammenarbeiten {
    background-image: url(/assets/icons/Icon_zusammenarbeiten.svg);
}

i.icon--Icon_einbringen {
    background-image: url(/assets/icons/Icon_einbringen.svg);
}

i.icon--Icon_mitwirken {
    background-image: url(/assets/icons/Icon_mitwirken.svg);
}

i.icon--Icon_flexibel {
    background-image: url(/assets/icons/Icon_flexibel.svg);
}

i.icon--icon_machen {
    background-image: url(/assets/icons/icon_machen.svg);
}

i.icon--Icon_unterstuetzen {
    background-image: url(/assets/icons/Icon_unterstuetzen.svg);
}

i.icon--Icon_fokussieren {
    background-image: url(/assets/icons/Icon_fokussieren.svg);
}

i.icon--Icon_01 {
    background-image: url(/assets/icons/01.svg);
}

i.icon--Icon_02 {
    background-image: url(/assets/icons/02.svg);
}

i.icon--Icon_03 {
    background-image: url(/assets/icons/03.svg);
}

i.icon--Icon_sicher {
    background-image: url(/assets/icons/Icon_sicher.svg);
}

i.icon--Icon_sicher {
    background-image: url(/assets/icons/Icon_sicher.svg);
}

i.icon--Icon_ohne_installation {
    background-image: url(/assets/icons/Icon_ohne_installation.svg);
}

i.icon--Icon_flexibel {
    background-image: url(/assets/icons/Icon_flexibel.svg);
}

.disturber_container {
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: flex-end;
    justify-self: flex-end;
    text-align: center;
    padding-top: var(--element-spacing-m);
    padding-bottom: calc(var(--element-spacing-m) * 1.5);
    margin-top: var(--element-spacing-s);
    margin-bottom: var(--element-spacing-l);
    gap: var(--element-spacing-m);
    position: relative;
    z-index: 1;
}

.disturber_container::after {
    content: "";
    position: absolute;
    width: 100vw;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #164257;
    opacity: 0.5;
    z-index: -1;
}


.stage {
    width: 100%;
    height: fit-content;
    position: relative;
    color: white;
    text-align: center;
    margin: auto;
    margin-top: 3rem;
    margin-bottom: 0;
    padding-bottom: 0;
    z-index: 1;
    min-height: calc(100vh - (var(--element-spacing-m)*3));
}

.stage::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    width: 100vw;
    transform: translate(-50vw, 0);
    background: linear-gradient(180deg, rgb(29, 86, 111) 24%, rgb(149, 175, 184) 100%);
    z-index: -2;
}

.stage>svg {
    position: fixed;
    left: 0;
    bottom: 50%;
    min-height: 100%;
    width: 100%;
    max-width: 90vw;
    max-height: 80vh;
    transform: translateY(50%);
    opacity: 0.2;
    z-index: -1;
    pointer-events: none;
}

.stage>h1 {
    margin-bottom: var(--element-spacing-s);
    font-family: Bebas Neue, sans-serif;
    font-size: var(--font-size-xl);
}

.stage>p {
    margin-bottom: var(--element-spacing-s);
    font-family: PTSans-Regular;
    font-size: var(--font-size-s);
    font-weight: 200;
    line-height: 1.25;
}

.stage>h2 {
    margin-bottom: var(--element-spacing-s);
}

.stage img {
    width: 100%;
    max-width: 200px;
    height: auto;
    max-height: 30vh;
    aspect-ratio: 1/1;
    align-self: center;
    object-fit: scale-down;
}

.stage>.headline__h4 {
    color: white;
}

.adminimator__main__stage>p {
    margin-top: var(--element-spacing-s);
    margin-bottom: var(--element-spacing-m);
}

.lynx__main__stage>.headline__h4 {
    margin-bottom: var(--element-spacing-m);
}

.lynx__main__stage>.disturber_container {
    padding-left: var(--element-spacing-s);
    padding-right: var(--element-spacing-s);
}


.lynx__main__stage>.disturber_container h3 {
    align-self: start;
}

.lynx__main__stage p {
    color: white;
}

.disturber_container .headline__h4 {
    color: white;
}

.lynx__main__stage>.disturber_container> .registration > form {
    display: flex;
    flex-direction: column;
    gap: var(--element-spacing-s);
}

.lynx__main__stage>.disturber_container> .registration > form>.cta {
    grid-column: 1/2;
}

.lynx__main__stage>.disturber_container> .registration >form>.error {
    color: red;
    display: flex;
    width: 100%;
    grid-column: 1/3;
}

.lynx__main__stage>.disturber_container> .registration >form>.error:empty {
    display: none;
}

.lynx__main__stage>.disturber_container> .registration>.successMessage {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    color: white;
}

.lynx__main__stage>.disturber_container>.registration>.successMessage h3 {
    width: 100%;
    margin-bottom: 1rem;
}

.lynx__main__stage>.disturber_container>.registration>.successMessage p {
    color: white;
}

.lynx__main__stage>.disturber_container>.registration>.successMessage img {
    width: 100%;
    max-width: 200px;
    height: auto;
    aspect-ratio: 1/1;
    align-self: center;
}

.lynx__main__stage>.disturber_container>.registration>.successMessage>p:has(>small) {
    text-align: center;
}


.input_wrapper {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.lynx__main__stage>.disturber_container form>.input_wrapper>label {
    margin-bottom: calc(var(--element-spacing-s) * 0.5);
}

.lynx__main__stage>.disturber_container form>.input_wrapper.newLine {
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: row;
    grid-column: 1/3;
    column-gap: var(--element-spacing-s);
}

input:not([type="checkbox"]) {
    height: var(--font-size-l);
    font-size: var(--font-size-s);
    padding-left: 0.3rem;
    border-radius: 8px;
    outline: none;
}

.lynx__main__stage>.disturber_container form>.input_wrapper>input:not([type="checkbox"]) {
    border: none;
}

.input_wrapper>input[type="checkbox"] {
    height: var(--font-size-l);
    width: var(--font-size-l);
}

.lynx__main__stage>.disturber_container p:last-of-type {
    width: 100%;
    text-align: left;
}

.lynx__main__stage>.disturber_container form a {
    font-size: var(--font-size-s);
    font-family: PTSans-Regular;
    line-height: 25px;
    letter-spacing: 0;
}

.lynx__main__stage>.disturber_container .cta:last-of-type {
    width: 100%;
}

.adminimator__main__about {
    display: grid;
    grid-template-areas:
        "headline"
        "article"
        "image";
    max-width: 1100px;
}

.lynx__main__about {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1100px;
}

.lynx__main__about_articles {
    display: flex;
    flex-direction: column;
    row-gap: var(--element-spacing-m);
}

.lynx__main__about_articles>details>summary {
    width: 100%;
    padding: var(--element-spacing-s) var(--element-spacing-s);
    padding-right: calc(var(--element-spacing-l) + var(--element-spacing-s));
    list-style: none;
    display: flex;
    background-color: var(--color-s02);
    position: relative;
}

.lynx__main__about_articles>details>summary::after {
    content: "";
    position: absolute;
    width: var(--element-spacing-l);
    height: 100%;
    max-height: 35%;
    background-image: url(/assets/icons/arrow_down.svg);
    right: var(--element-spacing-s);
    top: 50%;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.lynx__main__about_articles>details>article {
    padding-left: var(--element-spacing-s);
    padding-top: var(--element-spacing-s);
    padding-bottom: var(--element-spacing-s);
    display: flex;
    flex-direction: column;
    row-gap: calc(var(--element-spacing-s) * 0.5);
    max-width: 100%;
}

.lynx__main__about_articles>details.lynx__main__about_articles__details--icon>.articleWrapper {
    padding-left: var(--element-spacing-s);
    padding-right: var(--element-spacing-s);
    margin-top: var(--element-spacing-m);
    margin-bottom: var(--element-spacing-m);
    display: flex;
    flex-direction: column;
    row-gap: var(--element-spacing-l);
}

.lynx__main__about_articles>details.lynx__main__about_articles__details--icon>.articleWrapper>article {
    display: grid;
    grid-template-areas:
        "icon ."
        "icon headline"
        "icon text"
        ". text";
    column-gap: var(--element-spacing-s);
}

.lynx__main__about_articles>details.lynx__main__about_articles__details--icon>.articleWrapper>article:nth-of-type(1) {
    grid-area: art1;
}

.lynx__main__about_articles>details.lynx__main__about_articles__details--icon>.articleWrapper>article:nth-of-type(2) {
    grid-area: art2;
}

.lynx__main__about_articles>details.lynx__main__about_articles__details--icon>.articleWrapper>article:nth-of-type(3) {
    grid-area: art3;
}

.lynx__main__about_articles__details--icon>.articleWrapper>article>.icon {
    grid-area: icon;
    font-size: calc(var(--font-size-xl) *1.5);
}

.lynx__main__about_articles__details--icon>.articleWrapper>article>h3 {
    grid-area: headline;
}

.lynx__main__about_articles__details--icon>.articleWrapper>article>p {
    grid-area: text;
}

.lynx__main__about_articles>details.lynx__main__about_articles__details--userprofile>.articleWrapper {
    padding-left: var(--element-spacing-s);
    padding-right: var(--element-spacing-s);
    margin-top: var(--element-spacing-m);
    margin-bottom: var(--element-spacing-m);
    display: flex;
    flex-direction: column;
    column-gap: var(--element-spacing-xl);
}

.lynx__main__about_articles>details.lynx__main__about_articles__details--userprofile>.articleWrapper>article {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: calc(var(--element-spacing-s) * 0.5);
}

.lynx__main__about_articles>details.lynx__main__about_articles__details--userprofile>.articleWrapper>article:first-of-type {
    grid-area: art1;
}

.lynx__main__about_articles>details.lynx__main__about_articles__details--userprofile>.articleWrapper>img {
    grid-area: or;
    width: 100%;
    max-height: calc(var(--element-spacing-xl) * 1.5);
    margin-top: var(--element-spacing-xl);
    margin-bottom: var(--element-spacing-xl);
    object-position: center;
    object-fit: contain;
}

.lynx__main__about_articles>details.lynx__main__about_articles__details--userprofile>.articleWrapper>article:last-of-type {
    grid-area: art2;
}

.lynx__main__about_articles>details.lynx__main__about_articles__details--userprofile>.articleWrapper>article>img {
    max-width: 100%;
    justify-self: center;
    object-position: bottom center;
    object-fit: contain;
    align-self: flex-end;
}

.adminimator__main__about>h2 {
    grid-area: headline;
}

.adminimator__main__about>.adminimator__main__about_articles {
    grid-area: article;
    display: grid;
    grid-template-columns: 1fr;
    column-gap: unset;
    row-gap: var(--element-spacing-s);
}

.adminimator__main__about>img {
    grid-area: image;
    justify-self: center;
    padding-top: var(--element-spacing-m);
    max-width: 100%;
}

.adminimator__main__about_articles>article {
    display: flex;
    flex-direction: column;
    row-gap: calc(var(--element-spacing-s) * 0.5);
}

.adminimator__main__about_articles>article>.icon {
    font-size: var(--font-size-xl);
}

.adminimator__main__howTo {
    position: relative;
    max-width: 840px;
}

.adminimator__main__howTo::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    width: 100vw;
    transform: translate(-50vw, 0);
    background-color: var(--color-bg-lightblue);
    z-index: -1;
}

.adminimator__main__howTo>article {
    display: grid;
    row-gap: var(--element-spacing-s);
    margin-bottom: var(--element-spacing-l);
    grid-template-areas:
        "number"
        "headline"
        "text";
    row-gap: var(--element-spacing-xs);
}

.adminimator__main__howTo>article>.number_icon_wrapper {
    grid-area: number;
    display: flex;
    gap: var(--element-spacing-s);
    align-items: center;
}

.adminimator__main__howTo>article>.number_icon_wrapper>p {
    font-size: calc(var(--font-size-xl) * 2);
    font-weight: bold;
}

.adminimator__main__howTo>article>.number_icon_wrapper>.icon {
    font-size: var(--font-size-xl);
}

.adminimator__main__howTo>article>.number_icon_wrapper>.icon:first-of-type {
    font-size: calc(var(--font-size-xl) * 2);
}

.adminimator__main__howTo>article>h3 {
    grid-area: headline;
}

.adminimator__main__howTo>article>p {
    grid-area: text;
}

.adminimator__main__access,
.lynx__main__access {
    position: relative;
    padding: 0 0;
    color: white;
    position: relative;
}

.adminimator__main__access>.disturber_container,
.lynx__main__access>.disturber_container {
    margin-top: 0;
    margin-bottom: 0;
}

.adminimator__main__access>.disturber_container::after,
.lynx__main__access>.disturber_container::after {
    background-color: var(--color-bg-darkblue);
    opacity: 1;
}

.adminimator__main__access img,
.lynx__main__access img {
    width: calc(var(--element-spacing-xl) * 2);
    position: initial;
    top: unset;
    left: unset;
    transform: unset
}

.adminimator__footer__linklist,
.lynx__footer__linklist {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-top: var(--element-spacing-s);
    padding-bottom: var(--element-spacing-s);
    column-gap: var(--element-spacing-s);
}

.adminimator__footer__linklist>a,
.lynx__footer__linklist>a {
    color: black;
    text-decoration: none;
    text-transform: uppercase;
}

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

    .adminimator__main__stage>svg,
    .lynx__main__stage>svg {
        max-width: 40vw;
    }

    .lynx__main__stage>.disturber_container> .registration >form {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
    }

    .lynx__main__stage>.disturber_container> .registration >form>.cta {
        grid-column: 1/3 !important;
    }

    .lynx__main__stage>.disturber_container> .registration >form>.input_wrapper.newLine {
        grid-column: 1/3 !important;
    }

    .adminimator__main__about>.adminimator__main__about_articles {
        grid-template-columns: repeat(3, 1fr);
        column-gap: var(--element-spacing-s);
    }

    .lynx__main__about_articles>details>article {
        max-width: 75%;
    }

    .lynx__main__about_articles>details.lynx__main__about_articles__details--icon>.articleWrapper {
        display: grid;
        grid-template-areas:
            "art1 art1 art1 . art2 art2 art2"
            ". . art3 art3 art3 . .";
    }

    .lynx__main__about_articles>details.lynx__main__about_articles__details--userprofile>.articleWrapper {
        display: grid;
        grid-template-areas:
            "art1 . art2"
            "art1 or art2"
            "art1 . art2";
        grid-template-rows: 1fr auto 2fr;
        column-gap: var(--element-spacing-xl);
    }

    .lynx__main__about_articles>details.lynx__main__about_articles__details--userprofile>.articleWrapper>p {
        margin: unset;
    }

    .adminimator__main__howTo>article {
        grid-template-areas:
            "number headline"
            "number text";
        column-gap: var(--element-spacing-m);
    }

    .adminimator__main__access img,
    .lynx__main__access img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(calc(-350px - 100%), -50%) scale(0.8);
    }

    .adminimator__main__howTo>article>.number_icon_wrapper {
        justify-content: center;
    }

}

.password-reset .cta {
    height: initial;
    font-size: var(--font-size-s);
    padding-left: 0;
    border-radius: 11px;
    outline: none;
}