/* Basics */
html, body {}

html {
    @media (min-width: 768px) {
        font-size: var(--size-ml);
    }
}

/* Typo */
body {
    color: var(--theme-black);
    min-height: 100%;
    margin: 0;
}

.element-header {}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    color: var(--theme-primary-medium);
}

h1, .h1 {
    font-size: var(--size-2xl);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.015em;
    margin-block-end: 0.4em;

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

h2, .h2 {
    font-size: var(--size-2xl);
    font-weight: 700;
    line-height: 1.125;
    text-transform: uppercase;
    margin-block-end: 0.2em;

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


h3, .h3 {
    font-size: var(--size-l);
    font-weight: 700;
    margin-block-end: 0.2em;

    @media (min-width: 992px) {
        font-size: var(--size-xl);
        /*letter-spacing: 0.15em;*/
    }
}

h3.element-subheader {
    font-size: var(--size-l);
    font-weight: 500;

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


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

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.66667;
    margin-block-end: 1.66667em;
}

p.emphasis {
    font-weight: 500;
}

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

ul.list-dash {
    /* TYPO3 bad style fix :-| */
    padding-left: 1em !important;

    list-style-type: none;

    > li {
        text-indent: -1em;
        padding-right: 1em;
    }

    > li:before {
        content: "- ";
        font-weight: bold;
        color: var(--theme-primary-light);
    }
}

ul.list-check {
    list-style-type: none;
    padding-inline-start: 0;

    > li {
        text-indent: 0;
    }

    > li:before {
        content: " ";
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOS4zODkiIGhlaWdodD0iMTQuMzA0IiB2aWV3Qm94PSIwIDAgMTkuMzg5IDE0LjMwNCI+CiAgPHBhdGggaWQ9ImNoZWNrXzI0ZHBfRTNFM0UzX0ZJTEwwX3dnaHQ0MDBfR1JBRDBfb3BzejI0IiBkPSJNMTYwLjc4LTcwNi43bC02Ljc4LTYuNzgsMS43LTEuNyw1LjA4NSw1LjA4NUwxNzEuNjk0LTcyMWwxLjcsMS43WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE1NCA3MjEpIiBmaWxsPSIjMWQ3MWI4Ii8+Cjwvc3ZnPgo=");
        background-repeat: no-repeat;
        background-size: 1em;
        background-position: center center;
        padding: 0 0 0 1em;
        margin-inline-end: 0.5em;
    }
}

strong {
    font-weight: 600;
}

a {
    color: var(--theme-primary-light);
    font-weight: 600;

    &:hover {
        color: var(--theme-primary-medium);
    }
}

.btn {
    color: #fff;
    font-weight: 700;
    padding-inline: 1.5rem;

    &:hover {
        color: #fff;
    }
}

/* Focus für alle interaktiven Elemente */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--theme-primary-medium);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Standard outline entfernen - aber NUR für Maus-Klicks */
:focus:not(:focus-visible) {
    outline: none;
}


/* 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-end: 0;
    margin-block-start: var(--size-6xl);

    @media (min-width: 768px) {
        margin-block-start: var(--size-15xl);
    }
}

.content-box {
    margin-block-start: var(--size-4xl);

    @media (min-width: 768px) {
        margin-block-start: var(--size-10xl);
    }
}

.section,
.content-box {

    /* Push content from border if there's any background */
    &[class*=' bg-'], div[class^='bg-'] {
        @media (min-width: 768px) {
            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);
    }

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

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

        @media (min-width: 768px) {
            padding-block: var(--size-15xl);
        }
    }
}

.content-box {
    &[class*=' bg-'], div[class^='bg-'] {

        padding-block: var(--size-10xl);
        padding-inline: var(--size-10xl);
    }
}



.grid {
    margin-block-start: var(--size-3xl);
    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: var(--size-6xl);

    @media (min-width: 768px) {
        margin-block-start: var(--size-15xl);
    }
}

.ce + .ce {
    margin-block-start: var(--size-4xl);

    @media (min-width: 768px) {
        margin-block-start: var(--size-10xl);
    }
}

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

.grid, .ce {
    + .cb-fullscreen-media {
        margin-block-start: var(--size-6xl);

        @media (min-width: 768px) {
            margin-block-start: var(--size-15xl);
        }
    }
}

.grid, .ce {
    + .cb-hero {
        margin-block-start: var(--size-6xl);

        @media (min-width: 768px) {
            margin-block-start: var(--size-15xl);
        }
    }
}

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

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

/* Space before/after */
.frame-space-before-extra-small {
    margin-block-start: var(--size-xl);
}

.frame-space-before-small {
    margin-block-start: var(--size-2xl);
}

.frame-space-before-medium {
    margin-block-start: var(--size-6xl);
}

.frame-space-before-large {
    margin-block-start: var(--size-10xl);
}

.frame-space-before-extra-large {
    margin-block-start: var(--size-15xl);
}

.frame-space-after-extra-small {
    margin-block-end: var(--size-xl);
}

.frame-space-after-small {
    margin-block-end: var(--size-2xl);
}

.frame-space-after-medium {
    margin-block-end: var(--size-6xl);
}

.frame-space-after-large {
    margin-block-end: var(--size-10xl);
}

.frame-space-after-extra-large {
    margin-block-end: var(--size-15xl);
}

.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-3xl);
        background-color: var(--theme-secondary-light);
        height: 100%;
    }

    .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 {

        /*max-width: var(--breakpoint-xl);*/
        width: var(--width-base);
        margin-inline: auto;
        padding: 40px 20px;

        @media (min-width: 768px) {
            padding: var(--size-xl);
        }

    }

    .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: var(--size-4xl);

    @media (min-width: 768px) {
        margin-block-start: var(--size-10xl);
    }

    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);
        color: var(--theme-primary-medium);

        strong {
            font-weight: 700;
        }

        &:hover {
            color: var(--theme-primary-light);
        }

        &::marker {
            content: "";
        }

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

            /* 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 */
        &::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: var(--size-6xl);

    @media (min-width: 768px) {
        margin-bottom: var(--size-15xl);
    }

    /* 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));

    }

    .text {
        padding: 40px 10px;

        @media (min-width: 768px) {
            padding: 120px 100px;
        }

    }


    img {
        width: 100%;
        max-width: 2560px;
        margin: 0 auto;
    }

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

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



/* Content-Block: Google Map */
.cb-google-map {
    position: relative;

    .text {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        padding: 0;
        text-align: center;
        vertical-align: middle;
        transform: translate(0, -50%);

        cursor: pointer;
    }

    h2, h3 {
        display: none;

        @media (min-width: 768px) {
            display: block;
        }
    }

    p {
        font-size: 0.7em;

        @media (min-width: 768px) {
            font-size: 1em;
        }
    }
}



/* Content-Block: Teaser */
.cb-teaser {
    position: relative;

    .cb-teaser-image {
        margin-block-end: var(--size-2xl);
    }

    .cb-teaser-text header {
        margin-block-end: 0;
    }

    .cb-teaser-text p:last-child,
    .cb-teaser-text ul:last-child {
        margin-block-end: 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;
        }
    }

    .image-embed-item {
        object-fit: cover;
        aspect-ratio: calc(64 / 53);

    }



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



.slider {
    .swiper-pagination {
        bottom: -50px;
    }

    .swiper-pagination-bullet {
        border: 1px solid #2C70B7;
    }

    .swiper-pagination-bullet-active {
        background-color: #2C70B7;
    }
}



/* Photoswipe Fix */
.pswp__container {
    max-width: initial;
}
/* Sprungziele (z. B. Inhaltsverzeichnis Datenschutz) nicht unter dem sticky Header verstecken */
main [id] {
    scroll-margin-top: 7.5rem;
}