/**
 * ANCHOR Customising
 *
 */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-weight: 500;
    line-height: 1.1;
}

h1,
.h1 {
    font-size: 50px;
    margin-bottom: 30px;
}

h2,
.h2 {
    font-size: 36px;
}

h3,
.h3 {
    font-size: 28px;
}

h4,
.h4 {
    font-size: 20px;
}

h5,
.h5 {
    font-size: 18px;
}

h6,
.h6 {
    font-size: 18px;
}

h1+h2,
h2+h3,
h3+h4,
h4+h5,
h5+h6 {
    margin-top: 0;
}

.subnav {
    padding-top: 55px;
}

.divider {
    position: relative;
    padding-bottom: 25px;
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 36px;
    font-weight: 500;
    background-image: linear-gradient(to right, var(--clx-color) 0 100%);
    background-size: 78px 2px;
    background-repeat: no-repeat;
    background-position: 0 58px;
}

.leitbild {
    display: block;
    box-sizing: border-box;
    margin-top: 20px;
    padding: 5px 0 30px 90px;
    width: 100%;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 60px auto;

    & h2 {
        margin-top: 0;
    }
}

.leitbild-group-1 {
    background-image: url(../images/icon_leitbild_1.svg);
}

.leitbild-group-2 {
    background-image: url(../images/icon_leitbild_2.svg);
}

.leitbild-group-3 {
    background-image: url(../images/icon_leitbild_3.svg);
}

.leitbild-group-4 {
    background-image: url(../images/icon_leitbild_4.svg);
}

.leitbild-group-5 {
    background-image: url(../images/icon_leitbild_5.svg);
}

p {
    line-height: 1.3;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

strong,
b {
    font-weight: 500;
}

body {
    font-size: large;
    color: var(--clx-color);
    background-color: var(--clx-color-muted);
}

.clx-form input {

    &.searchbox {
        margin-left: -20px;
        margin-right: -20px;
        max-width: calc(100% + 40px);
        width: calc(100% + 40px);
        padding-left: 55px;
        border-radius: 25px;
        border: none;
        background: #ffffff url(../images/icon_search_light.svg) 20px center no-repeat;
        background-size: 20px auto;
    }
}

.clx-navigation-mobile {
    padding-top: 180px;
}

.bubble {
    position: absolute;
    box-sizing: border-box;
    left: 65%;
    bottom: -25px;
    padding: 3vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    width: fit-content;
    min-width: min-content;
    max-width: 32%;
    aspect-ratio: 1;
    border-radius: 50%;
    text-align: center;
    background-color: var(--color-yellow);
    transform: rotate(10deg);
    z-index: 80;
    animation-name: transfer;
    animation-duration: 2s;
    animation-timing-function: ease-out;

    & h2,
    & h3,
    & h4 {
        margin-top: 12px;
    }

}

@keyframes transfer {
    0% {
        bottom: -500px;
    }

    100% {
        bottom: -25px;
    }
}


header {
    display: block;
    position: fixed;
    width: 100%;
    height: 145px;
    background-color: var(--color-yellow);
    background-image: var(--color-header), var(--color-gradient-header-yellow);
    background-size: 100% 115px, 100% 100%;
    background-repeat: no-repeat;
    z-index: 100;

    & .logo {
        position: fixed;
        float: left;
        margin: 15px 0 0 0;
        width: 300px;
        background: transparent url(../images/logo_bg_yellow.svg) no-repeat;
        background-size: 100% auto;

        & img {
            float: left;
            width: 100%;
            height: auto;
        }
    }

    & .clx-navigation {
        margin-top: 66px;

        & ul li {

            & a {

                &.icon-login {
                    background: #ffffff url(../images/icon_login_dark.svg) center no-repeat;
                    background-size: 25px auto;
                    margin-left: 10px;

                    &:hover {
                        opacity: 0.5;
                    }
                }

                &.icon-search {
                    background: #ffffff url(../images/icon_search_dark.svg) center no-repeat;
                    background-size: 25px auto;
                    margin-left: 15px;

                    &:hover {
                        opacity: 0.5;
                    }
                }
            }

            & ul {
                margin-left: -5px;
                padding-left: 5px;
                padding-right: 5px;

            }

        }

    }

}

main.clx-main-home {


    & section:first-child {
        background-color: var(--clx-color-white);

        & .intro {
            position: relative;
            width: 100%;
            height: 100dvh;
            z-index: 1;
            overflow: hidden;
            background-color: var(--clx-color-white);

            & .intro_item_1,
            & .intro_item_2 {
                box-sizing: border-box;
                position: absolute;
                aspect-ratio: 1 / 1;
                border-radius: 50%;
                background-color: rgba(252, 196, 37, 0.25);
                transform: translate(-50%, -50%);
                animation-name: zoom;
                animation-duration: 2s;
                animation-timing-function: ease-out;

                &:has(img) {
                    background: none;
                }

                & img {
                    width: 100%;
                    border-radius: 50%;
                    z-index: 100;
                    opacity: 1;
                }
            }

            & .intro_item_1 {
                top: 45%;
                left: 63%;
                padding: max(55px, 4vw);
                width: 70dvw;
                max-width: 984px;
            }

            & .intro_item_2 {
                top: 66%;
                left: calc(50% - 310px);
                padding: max(50px, 3.6vw);
                width: 44dvw;
                max-width: 618px;
            }
        }
    }

    & .agenda {
        display: flex;
        flex-direction: column;
        gap: 22px;

        & article {

            & p {
                margin: 0;
            }

            & h3 {
                margin: 0;
            }
        }
    }
}

@keyframes zoom {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

main.clx-main-content {

    img {
        max-width: 100%;
    }

    & section:first-child {
        padding-top: 240px;
        min-height: calc(100dvh - 660px);
    }

    .teacher {
        padding-left: 11px;
        padding-right: 11px;

        & .clx-width-1-3\@m {
            padding: 4px;
        }

        & .clx-card {
            width: 100%;
            aspect-ratio: 1;
            background-color: #ffffff;

            & img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
            }

            & .info {
                position: absolute;
                box-sizing: border-box;
                bottom: 0;
                padding: 11px;
                width: 100%;
                background-color: rgba(255, 255, 255, 0.7);
            }
        }

    }

    .calendar {

        & div:first-child {
            width: 100px;
            font-size: 40px;
            font-weight: 300;
            line-height: 1;
        }

        & div:last-child {
            width: calc(100% - 100px);
        }
    }


    & .clx-navigation-skyscraper {

        & li a {
            font-size: 22px;
        }
    }

    & .position-sticky {
        top: 295px;
        position: sticky;
    }

    & .clx-link-listing {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-bottom: 10px;

        & a {
            width: fit-content;
        }
    }

}

footer {
    position: relative;
    padding-top: 11vw;
    height: auto;
    background: url(../images/bg_footer.svg), var(--color-gradient-footer-yellow);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: left -2px, left top;

    & .block-green,
    & .block-blue {
        display: none;
    }

    & p+p {
        margin-top: 25px;
    }

}

footer * {
    color: var(--clx-color-white);
}



/**
 * ANCHOR color scheme – green
 *
 */
.green-theme {

    header {

        background-color: var(--color-green);
        background-image: var(--color-header), var(--color-gradient-header-green);
        background-size: 100% 115px, 100% 100%;
        background-repeat: no-repeat;

        & .logo {
            background: transparent url(../images/logo_bg_green.svg) no-repeat;
            background-size: 100% auto;
        }
    }

    & footer {
        background: url(../images/bg_footer.svg), var(--color-gradient-footer-green);
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: left -2px, left top;

        & .block-yellow,
        & .block-blue {
            display: none;
        }

        & .block-green {
            display: block;
        }

    }

    nav,
    .clx-navigation,
    .clx-navigation-skyscraper {

        & :hover,
        & .active,
        & .starter_active {
            color: var(--color-font-green);
        }

    }

    .clx-navigation-mobile {

        & :hover,
        & .starter_active,
        & .active {
            color: var(--color-font-green);
        }
    }

    main.clx-main-content .clx-width-2-3 a {
        color: var(--color-font-green);

        &:hover {
            color: var(--clx-color-black);
        }
    }

}


/**
 * ANCHOR color scheme – blue
 *
 */
.blue-theme {

    header {

        background-color: var(--color-blue);
        background-image: var(--color-header), var(--color-gradient-header-blue);
        background-size: 100% 115px, 100% 100%;
        background-repeat: no-repeat;

        & .logo {
            background: transparent url(../images/logo_bg_blue.svg) no-repeat;
            background-size: 100% auto;
        }
    }

    & footer {
        background: url(../images/bg_footer.svg), var(--color-gradient-footer-blue);
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: left -2px, left top;

        & .block-yellow,
        & .block-green {
            display: none;
        }

        & .block-blue {
            display: block;
        }

    }

    nav,
    .clx-navigation,
    .clx-navigation-skyscraper {

        & :hover,
        & .active,
        & .starter_active {
            color: var(--color-font-blue);
        }

    }

    .clx-navigation-mobile {

        & :hover,
        & .starter_active,
        & .active {
            color: var(--color-font-blue);
        }
    }

    main.clx-main-content .clx-width-2-3 a {
        color: var(--color-font-blue);

        &:hover {
            color: var(--clx-color-black);
        }
    }

}


/**
 * ANCHOR Media Queries
 *
 */
@media (max-width: 960px) {

    .bubble {
        display: none;
    }

    h1,
    .h1 {
        font-size: 40px;
    }

    h2,
    .h2 {
        font-size: 30px;
    }

    h3,
    .h3 {
        font-size: 22px;
    }

    h4,
    .h4 {
        font-size: 18px;
    }

    .green-theme,
    .blue-theme {
        & header {
            background-size: 100% 72px, 100% 100%;
        }
    }

    header {
        height: 92px;
        background-size: 100% 72px, 100% 100%;

        & .logo {
            margin-top: 5px;
            width: 200px;
        }

        & .clx-navigation {
            display: none;
        }

        & .clx-navigation-burger {
            display: block;
            margin-top: 25px;
            margin-right: 0px;
        }
    }

    nav {
        float: left;
    }

    main.clx-main-home {

        & section:first-child {
            & .intro {
                & .intro_item_1 {
                    top: 40%;
                    left: 70%;
                    padding: 5vw;
                    width: 80%;
                }

                & .intro_item_2 {
                    top: 70%;
                    left: 25%;
                    padding: 5vw;
                    width: 60%;
                }

            }
        }
    }

    main.clx-main-content {
        & .subnav {
            display: none;
        }

        & .clx-width-2-3 {
            width: 100%;
        }

        & section:first-child {
            padding-top: 150px;
        }
    }

    .clx-form input {

        &.searchbox {
            margin-left: -5px;
            margin-right: -5px;
            max-width: calc(100% + 10px);
            width: calc(100% + 10px);
        }
    }


    /* m */
    .clx-width-1-2\@m,
    .clx-width-1-4\@m,
    .clx-width-3-4\@m {
        width: 100%;
    }

    .clx-width-1-3\@m {
        width: 50%;
    }

}

@media (max-width: 640px) {

    .clx-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* s */
    .clx-width-1-3\@m,
    .clx-width-1-2\@s,
    .clx-width-1-3\@s,
    .clx-width-1-4\@s,
    .clx-width-3-4\@s {
        width: 100%;
    }

    .clx-table th,
    .clx-table td {
        width: 100%;
        padding: 4px;
        width: 100%;
        float: left;
    }

    .clx-table th:not(:first-child),
    .clx-table td:not(:first-child) {
        padding-left: 4px;
        padding-top: 0;
    }

}

@media only screen and (orientation: portrait) {

    main.clx-main-home {

        & section:first-child {
            & .intro {
                & .intro_item_1 {
                    top: 45%;
                    left: 70%;
                    padding: 5vw;
                    width: 50vh;
                }

                & .intro_item_2 {
                    top: 70%;
                    left: 25%;
                    padding: 5vw;
                    width: 40vh;
                }

            }
        }
    }
}

@media print {

    p {
        font-size: 12px;
    }

    nav {
        display: none !important;
    }

    .clx-container {
        padding-left: 0;
        padding-right: 0;
    }

}

:root {

    interpolate-size: allow-keywords;

    /* Color */
    --clx-color-black: #000000;
    --clx-color-white: #ffffff;
    --clx-color-darkwhite: #F9F9F9;

    --clx-color: #000000;
    --clx-color-muted: #F2F2F2;
    --clx-color-primary: #165f77;
    --clx-color-secondary: #043546;
    --clx-color-success: #2e8d00;
    --clx-color-warning: #faa05a;
    --clx-color-danger: #d20000;
    --clx-color-header: #ffffff;
    --clx-color-footer: #165f77;
    --clx-color-primary-rev: var(--clx-color-white);
    --clx-color-secondary-rev: var(--clx-color-white);

    --color-yellow: rgb(252, 196, 37);
    --color-yellow-dark: rgb(235, 127, 5);
    --color-green: rgb(155, 186, 30);
    --color-green-dark: rgb(110, 133, 17);
    --color-blue: rgb(31, 159, 186);
    --color-blue-dark: rgb(13, 116, 138);

    --color-header: linear-gradient(var(--clx-color-white) 0,
            var(--clx-color-white) 100%);
    --color-gradient-header-yellow: linear-gradient(90deg,
            var(--color-yellow) 0%,
            var(--color-yellow) 50%,
            var(--color-yellow-dark) 100%);
    --color-gradient-footer-yellow: linear-gradient(90deg,
            var(--color-yellow) 0%,
            var(--color-yellow-dark) 100%);
    --color-gradient-header-green: linear-gradient(90deg,
            var(--color-green) 0%,
            var(--color-green) 50%,
            var(--color-green-dark) 100%);
    --color-gradient-footer-green: linear-gradient(90deg,
            var(--color-green) 0%,
            var(--color-green-dark) 100%);
    --color-gradient-header-blue: linear-gradient(90deg,
            var(--color-blue) 0%,
            var(--color-blue) 50%,
            var(--color-blue-dark) 100%);
    --color-gradient-footer-blue: linear-gradient(90deg,
            var(--color-blue) 0%,
            var(--color-blue-dark) 100%);

    --color-font-black: rgb(0, 0, 0);
    --color-font-yellow: rgb(240, 146, 14);
    --color-font-green: rgb(111, 136, 11);
    --color-font-blue: rgb(10, 127, 152);

    /* Navigation */
    --clx-nav-float: right;
    --clx-nav-ul-ul-height: 50rem;
    --clx-nav-ul-ul-bgcolor: var(--clx-color-white);
    --clx-nav-color-burger: var(--clx-color-black);
    --clx-nav-color-a: var(--color-font-black);
    --clx-nav-color-a-hover: var(--color-font-yellow);
    --clx-nav-a-weight: 400;
    --clx-nav-a-size: 24px;
    --clx-nav-a-a-weight: 400;
    --clx-nav-a-a-size: 20px;
    --clx-nav-margin-correction-left: 15px;
    --clx-nav-margin-correction-right: -15px;
    --clx-nav-padding-top: 5px;
    --clx-nav-padding-bottom: 5px;
    --clx-nav-padding-left: 15px;
    --clx-nav-padding-right: 15px;
    --clx-nav-padding-first-child: 5px;
    --clx-nav-padding-last-child: 10px;
    --clx-nav-margin-top: 2px;
    --clx-nav-margin-bottom: 2px;
    --clx-nav-margin-left: 0;
    --clx-nav-margin-right: 0;
    --clx-nav-lang-padding-left: 5px;
    --clx-nav-lang-padding-right: 5px;
    --clx-nav-burger-margin-top: 15px;
    --clx-nav-burger-padding-right: 40px;
    --clx-nav-burger-padding-left: 0;
    --clx-nav-mobile-bgcolor: var(--clx-color-muted);
    --clx-nav-mobile-padding-top: 100px;
    --clx-nav-mobile-padding-horizontal: 10px;
    --clx-nav-mobile-padding-vertical: 5px;
    --clx-nav-mobile-sub-padding: 15px;
    --clx-nav-mobile-font-size: larger;
    --clx-nav-mobile-color-a: var(--color-font-black);
    --clx-nav-mobile-color-a-hover: var(--color-font-yellow);
    --clx-nav-mobile-a-weight: 400;
    --clx-nav-mobile-a-size: 22px;
    --clx-nav-mobile-a-a-weight: 400;
    --clx-nav-mobile-a-a-size: 18px;


    /* Text */
    --clx-color-title: var(--clx-color-black);
    --clx-color-a: var(--color-font-yellow);
    --clx-color-a-hover: var(--clx-color-black);
    --clx-decoration-a: none;
    --clx-decoration-a-hover: none;
    --clx-button-color: var(--clx-color-black);
    --clx-button-color-hover: var(--clx-color-primary);
    --clx-button-bg-primary: var(--clx-color-primary);
    --clx-button-bg-primary-hover: var(--clx-color-black);
    --clx-button-color-primary: var(--clx-color-white);
    --clx-button-color-primary-hover: var(--clx-color-white);

    --clx-button-bg-secondary: var(--clx-color-secondary);
    --clx-button-bg-secondary-hover: var(--clx-color-black);
    --clx-button-color-secondary: var(--clx-color-white);
    --clx-button-color-secondary-hover: var(--clx-color-white);
    --clx-button-bg-muted: var(--clx-color-muted);
    --clx-button-bg-muted-hover: var(--clx-color-black);
    --clx-button-color-muted: var(--clx-color-white);
    --clx-button-color-muted-hover: var(--clx-color-white);

    /* Table */
    --clx-color-hover: #ffffdd;
    --clx-color-divider: var(--clx-color-muted);
    --clx-color-striped: var(--clx-color-darkwhite);

    /* Shadow */
    --clx-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;

    /* Radius */
    --clx-radius: 4px;

    /* Background Color */
    --clx-card-color: var(--clx-color-darkwhite);
    --clx-card-aspect-ratio: 16 / 9;

    /* Border/Form */
    --clx-border-color: #ffffff;
    --clx-border-color-focus: var(--clx-color-black);
    --clx-border-style: solid;
    --clx-border-width: 1px;
    --clx-border-radius: 6px;
    --clx-input-height: 50px;
    --clx-textarea-height: 120px;
    --clx-input-bg-color: var(--clx-color-white);
    --clx-placeholder-color: #B5B5B5;
    --clx-submit-bg-color: #666666;
    --clx-submit-bg-hover-color: var(--clx-color-black);
    --clx-submit-color: var(--clx-color-white);
    --clx-submit-hover-color: var(--clx-color-white);


    /* Distance */
    --clx-grid-margin: 15px;
    --clx-grid-margin-correction: -15px;
    --clx-grid-bottom: 30px;
    --clx-grid-gap: 30px;

    --clx-container-width: 1180px;
    --clx-indented-width: 578px;
    --clx-distance-small: 15px;
    --clx-distance-medium: 30px;
    --clx-distance-large: 45px;
    --clx-distance-xlarge: 60px;
    --clx-distance-xxlarge: 75px;
    --clx-distance-xxxlarge: 90px;

    /* Font */
    --clx-font-family: 'Jost', system-ui, sans-serif;
    --clx-font-size-small: calc(.8rem + .2vw);
    --clx-font-size-micro: calc(.6rem + .2vw);
    --clx-font-size: calc(1rem + .2vw);
    --clx-font-size-medium: calc(1.1rem + .2vw);
    --clx-font-size-large: calc(1.4rem + .2vw);

    --clx-font-light: 300;
    --clx-font-normal: 400;
    --clx-font-bold: 500;
    --clx-font-bolder: 600;
    --clx-font-color: var(--clx-color);
    --clx-line-height: 1;

}


/**
 * ANCHOR @fonts
 *
 */

@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/Jost/Jost-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Jost';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/Jost/Jost-LightItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Jost/Jost-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Jost';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Jost/Jost-Italic.ttf') format('truetype');
}

@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/Jost/Jost-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Jost';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/Jost/Jost-MediumItalic.ttf') format('truetype');
}