/* Basics */
html,
body {
    height: 100%;
}

body > footer {
    position: sticky;
    top: 100vh;
    margin-block-start: var(--space);
}

body > header,
body > footer {
    background-color: var(--theme-header-bg);
    padding-block: 1em;
    padding-inline: 1em;
}



/* Typo */
body {
    color: var(--theme-font-primary);
}

h1, .h1 {
    font-size: var(--size-3xl);
    line-height: 1.1;

    @media (min-width: 992px) {
        font-size: var(--size-5xl);
    }
}

h2, .h2 {
    font-size: var(--size-2xl);
    line-height: 1.1;

    @media (min-width: 992px) {
        font-size: var(--size-3xl);
    }
}

h3, .h3 {
    font-size: var(--size-xl);
    font-weight: normal;

    @media (min-width: 992px) {
        font-size: var(--size-2xl);
    }
}

h4, .h4 {
    font-size: var(--size-l);
}

h5, .h5 {
    font-size: var(--size-m);
}

h6, .h6 {
    font-size: var(--size-m);
}

h1.banner {
    font-size: var(--size-6xl);
}

h2.normalcase {
    text-transform: none;
}

p {
    line-height: 1.6;
    margin-block-end: 1.6em;
}

p.emphasis {
    font-weight: 500;
}

ul {
    padding-inline-start: 1em;
}

nav ul {
    padding-inline-start: 0;
}



/* Layout main header & footer */
.layout-grid {
    display: grid;
    grid-template-columns: repeat(12, [col-start] 1fr);
    gap: var(--size-l);
}

.layout-grid > * {
    grid-column: col-start / span 12;
}

@media (min-width: 768px) {

    /* header */
    .layout-grid #logo {
        grid-column: col-start / span 2;
    }

    .layout-grid #navMain {
        grid-column: col-start 3 / span 9;
    }

    .layout-grid #navLang {
        grid-column: col-start 13/ -1;
    }

    /* footer */
    .layout-grid #navMeta {
        grid-column: col-start / span 2;
    }

    .layout-grid #navSocial {
        grid-column: col-start 3 / span 9;
    }

    .layout-grid #copyright {
        grid-column: col-start 13/ -1;
    }
}



/* Logo */
.navbar.logo {
    max-width: 69px;
}



/* Main navigation */
nav.main {}



/* Language navigation */
nav.language {
    .flag {
        display: inline-block;
        color: transparent;

        max-width: var(--size-2xl);
        white-space: nowrap;
        overflow: hidden;

        background-image: url('../../Icons/LanguageFlags/language-icon.svg');
    }

    .de > .flag {
        background-image: url('../../Icons/LanguageFlags/de.svg');
    }

    .en > .flag {
        background-image: url('../../Icons/LanguageFlags/gb.svg');
    }
}



/* Social navigation */
nav.social {
    .icon {
        display: inline-block;
        color: transparent;

        max-width: var(--size-2xl);
        white-space: nowrap;
        overflow: hidden;

        background-image: url('../../Icons/Social/social-icon.svg');
    }

    a.icon[href*="youtube" i] {
        background-image: url('../../Icons/Social/youtube-logotype.svg');
    }

    a.icon[href*="instagram" i] {
        background-image: url('../../Icons/Social/instagram.svg');
    }

    a.icon[href*="linkedin" i] {
        background-image: url('../../Icons/Social/linkedin.svg');
    }

    a.icon[href*="facebook" i] {
        background-image: url('../../Icons/Social/facebook.svg');
    }
}



/* Container */
.section {
    margin-block-start: 100px;
    margin-block-end: 0;
}

.content-box {
    margin-block-start: 75px;
}

.section,
.content-box {

    /* Push content from border if there's any background */
    &[class*=' bg-'], div[class^='bg-'] {
        padding-inline: var(--size-xl);
    }

    &.bg-primary {
        background-color: var(--theme-primary-light);
    }

    &.bg-primary-darker {
        background-color: var(--theme-primary-medium);
    }

    .bg-primary *, .bg-primary-darker * {
        color: var(--theme-secondary-light);
    }

    &.bg-secondary {
        background-color: var(--theme-secondary-medium);
    }
}

.section {
    &[class*=' bg-'], div[class^='bg-'] {
        padding-block: var(--size-15xl);
    }
}

.content-box {
    &[class*=' bg-'], div[class^='bg-'] {
        padding-block: var(--size-10xl);
    }
}



.grid {
    margin-block-start: var(--size-6xl);
    margin-block-end: var(--size-xl);

    &.bg-primary > .col {
        background-color: var(--theme-primary-light);
    }

    &.bg-primary-darker > .col {
        background-color: var(--theme-primary-medium);
    }

    &.bg-secondary > .col {
        background-color: var(--theme-secondary-medium);
    }

    &.bg-secondary-lighter > .col {
        background-color: var(--theme-secondary-light);
    }
}



/* Content elements */
.section + .ce {
    margin-block-start: 100px;
}

.ce + .ce {
    margin-block-start: 75px;
}

.cb-fullscreen-media + .section {
    margin-block-start: 0;
}

.grid, .ce {
    + .cb-fullscreen-media {
        margin-block-start: 100px;
    }
}

.grid, .ce {
    + .cb-hero {
        margin-block-start: 100px;
    }
}

.ce header, .content-block header {
    h1, h2, h3 {
        margin-block-end: 0.2em;
    }
}

.ce header, .content-block header {
    margin-block-end: var(--size-m);
}

.ce {

    /* If .ce is *inside* a shortcut (insert records), somewhat similar to @at-root from Sass */
    .frame-type-shortcut & {
        padding-block-start: 0;
    }

    &.frame-limit-width-75 {
        @media (min-width: 768px) {
            max-width: 75%;
        }
    }

    &.frame-limit-width-90 {
        @media (min-width: 768px) {
            max-width: 90%;
        }
    }

    &.frame-box {
        padding: var(--size-2xl);
    }

    .ce-intext > .ce-gallery {
        max-width: 50%;
    }

    .ce-right > .ce-bodytext,
    .ce-left > .ce-gallery {
        padding-inline-end: var(--size-xl);
    }

    .ce-intext.ce-left .ce-gallery {
        margin-inline-end: 0;
    }

    .ce-intext.ce-right .ce-gallery {
        margin-inline-start: 0;
    }

    .ce-above .ce-gallery {
        margin-block-end: var(--size-2xl);
    }

    .ce-gallery:last-child,
    > p:last-child,
    .ce-bodytext p:last-child,
    .ce-bodytext ul:last-child {
        margin-block-end: 0;
    }
}



/* Content-Blocks global */
.content-block {
    .bg-primary {
        background-color: var(--theme-primary-light);
    }

    .bg-primary-darker {
        background-color: var(--theme-primary-medium);
    }

    .bg-primary *, .bg-primary-darker * {
        color: var(--theme-secondary-light);
    }

    .bg-secondary {
        background-color: var(--theme-secondary-dark);
        color: var(--theme-primary-dark);
    }

    .watermark {
        background-repeat: no-repeat;
        background-position: right 30px bottom 0;
        background-size: 40%;
    }

    .bg-primary.watermark {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 355.54 428.8"><g opacity="0.35"><circle cx="269.41" cy="43.03" r="43.03" fill="%23143a84"/><circle cx="87.92" cy="43.03" r="43.03" fill="%23143a84"/><path d="M326.39,133.19c4.42,26.75,8.3,52.72,11.47,77.91s5.97,49.93,8.3,74.27,4.26,48.38,5.74,72.1c1.47,23.72,2.64,47.52,3.64,71.32h-58.46c-.7-20.54-1.63-40.93-2.79-61.17-1.16-20.24-2.56-40.39-4.19-60.32-1.63-20-3.44-39.77-5.43-59.31-2.02-19.54-4.37-38.89-7.05-58.07l-68.54,108.07h-62.64l-70.47-108.85c-2.79,19.15-5.19,38.45-7.21,58.07-2.09,19.54-3.88,39.38-5.5,59.39-1.55,20.08-2.95,40.24-4.03,60.63s-2.09,40.93-2.87,61.56H0c.7-23.88,1.81-47.65,3.33-71.32,1.55-23.72,3.41-47.76,5.58-72.1,2.25-24.34,4.96-49.07,8.3-74.27s7.2-51.17,11.62-77.92h82.1l66.83,115.67,66.91-115.67h81.71Z" fill="%23143a84"/></g></svg>');
    }

    .bg-secondary.watermark {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 355.54 428.8"><g opacity="0.35"><circle cx="269.41" cy="43.03" r="43.03" fill="%23f8f8f8"/><circle cx="87.92" cy="43.03" r="43.03" fill="%23f8f8f8"/><path d="M326.39,133.19c4.42,26.75,8.3,52.72,11.47,77.91s5.97,49.93,8.3,74.27,4.26,48.38,5.74,72.1c1.47,23.72,2.64,47.52,3.64,71.32h-58.46c-.7-20.54-1.63-40.93-2.79-61.17-1.16-20.24-2.56-40.39-4.19-60.32-1.63-20-3.44-39.77-5.43-59.31-2.02-19.54-4.37-38.89-7.05-58.07l-68.54,108.07h-62.64l-70.47-108.85c-2.79,19.15-5.19,38.45-7.21,58.07-2.09,19.54-3.88,39.38-5.5,59.39-1.55,20.08-2.95,40.24-4.03,60.63s-2.09,40.93-2.87,61.56H0c.7-23.88,1.81-47.65,3.33-71.32,1.55-23.72,3.41-47.76,5.58-72.1,2.25-24.34,4.96-49.07,8.3-74.27s7.2-51.17,11.62-77.92h82.1l66.83,115.67,66.91-115.67h81.71Z" fill="%23f8f8f8"/></g></svg>');
    }

    .text {
        padding: var(--size-xl);
        /*max-width: var(--breakpoint-xl);*/
        width: var(--width-base);
        margin-inline: auto;
    }

    .text p:last-child,
    .text ul:last-child {
        margin-block-end: 0;
    }

    .text .btn {
        margin-block-end: var(--size-s);
        margin-inline-end: var(--size-l);
    }

    @media (min-width: 992px) {
        .text {
            padding: var(--size-10xl);
        }
    }
}



/* Content-Block: Accordion */
.cb-accordion {
    /*margin-block-end: 3rem;*/
    margin-block-start: 75px;

    details {
        border-block-end: 1px solid rgba(0, 0, 0, 0.15);
        margin-block-end: 0;
    }

    details:first-of-type {
        border-block-start: 1px solid rgba(0, 0, 0, 0.15);
    }

    details > .content {
        padding-block-end: var(--space);
        margin-inline-end: 5rem;
        /* To clear the contained image's float */
        overflow: auto;
    }

    .content img {
        float: right;
        max-width: 33%;
        margin: 0 0 1rem 1rem;
    }

    summary {
        position: relative;
        anchor-name: --summary;

        padding-block: 0.9rem;
        cursor: pointer;
        font-size: var(--size-l);

        &::marker {
            content: "";
        }
    }

    /* Custom marker */
    summary::before,
    summary::after {
        /* Custom marker dimensions */
        content: "";
        border-block-start: 3px solid var(--theme-primary-light);
        height: 0;
        width: 1.2rem;

        /* Positions the lines */
        inset-block-start: 50%;
        inset-inline-end: 0;

        /* Anchor the shape to the summary */
        position: absolute;
        position-anchor: --summary;
        position-area: top end;
    }

    /* Rotate just the ::after line to create a "+"" shape */
    summary::after {
        transform: rotate(90deg);
        transform-origin: 50%;
    }

    /* Rotate the line when open
    details[open] summary::after {
        transform: rotate(0deg);
    }*/

    /* Rotate the whole cross when open */
    details[open] summary::before {
        transform: rotate(45deg);
    }

    details[open] summary::after {
        transform: rotate(135deg);
    }
}



/* Content-Block: Hero */
.cb-hero {
    position: relative;
    margin-bottom: 100px;

    /* Push element to full width without using helper tags or classes. Helps with bigger screen variants */
    .content {
        /* Debug helper */
        /*background-color: yellow;*/

        position: relative;
        width: calc(100% + (100vw - 100%));
        left: calc(-1 * ((100vw - 100%)/2));
    }

    .text {
        position: relative;
        margin-top: -25%;
    }


    @media (min-width: 1400px) {
        .content {
            width: auto;
            left: auto;
        }

        .breakout {
            width: calc(100% + ((100vw - 100%) / 2));
            position: relative;
        }

        .breakout.align-left {
            left: 50%;
            margin-left: -50vw;
        }

        .breakout.align-right {
            /*right: 50%;
            margin-right: -50vw;*/
        }

        .align-right {
            text-align: right;
        }

        .image {
            display: inline-block;
            max-width: 75%;
            max-height: 800px;

            img {
                min-height: 800px;
                width: auto;
            }
        }

        .image:has(.aspect-ratio-1x1) {
            max-width: 66%;
        }

        .text {
            position: absolute;
            margin-top: 0;

            right: 0;
            top: 15%;
            width: 55%;
            min-width: 850px;
            min-height: 70%;

            padding-inline-end: var(--size-15xl);
            margin-inline: initial;
            text-align: left;
        }

        .align-right .text {
            right: auto;
        }
    }
}



/* Content-Block: Fullscreen Media */
.cb-fullscreen-media {
    position: relative;

    .image, .text {
        position: relative;
        width: calc(100% + (100vw - 100%));
        left: calc(-1 * ((100vw - 100%)/2));
    }

    @media (min-width: 1400px) {
        .text {
            position: absolute;
            top: 33%;
            left: auto;
            width: 66%;
            min-width: 650px;
            min-height: 50%;
        }

        .align-right .text {
            right: 0;
        }
    }
}



/* Forms (Powermail) */
.powermail_form {}



/* Swiper adjustments */
.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: var(--size-l);
}

.swiper-pagination-bullet {
    background-color: transparent;
    border: 1px solid #fff;
    border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
    display: inline-block;
    height: var(--size-m);
    width: var(--size-m);
    opacity: 0.9;
}

.swiper-pagination-bullet-active {
    background-color: #fff;
    opacity: 1;
}



/* Swiper adjustments & fixes */
.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: var(--size-l);
}

.frame-img-slideshow > .ce-image {
    .ce-gallery {
        .ce-inner, .ce-outer {
            position: initial;
            float: initial;
            right: initial;
            left: initial;
        }
    }

    &.ce-right .ce-gallery,
    &.ce-left .ce-gallery {
        float: initial;
    }
}



/* Photoswipe Fix */
.pswp__container {
    max-width: initial;
}