:root {

    /* colors */
    --color-black: #000000;
    --color-white: #ffffff;
    --color-green: #65b32e;
    --color-red: #e4072d;
    --color-grey: #f9f2f1;
    --color-bgheader: #f8eeed;


    --defaultunit: clamp(1.25rem, 0.2273rem + 2.7273vw, 3.5rem);
    /* 20px - 56px // 600px - 1920px */

    --header-maxwidth: 1920px;
    --header-height: 175px;

    --main-padding-left: clamp(3.5rem, -1.6989rem + 13.8636vw, 14.9375rem);
    --header-padding-right: clamp(1.25rem, -0.3977rem + 4.3939vw, 4.875rem);


    --fs-copy-normal: 22px;
}

html {
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: 'IBM Plex Sans Condensed';
    color: var(--color-black);
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;

}

a {
    color: inherit;
}

.frame-indent {
	margin-left: clamp(0rem, calc(-6.923rem + 14.423vw), 7.5rem);
	margin-right: 0;
}

#banner {
    padding-left: var(--defaultunit);
    padding-right: var(--defaultunit);
}

/* Kein Element in der Banner-Spalte: Platz für den fixierten Header reservieren */
#banner.banner--empty {
    padding-top: var(--header-height);
}

/* Mobil: Banner über volle Breite, ohne seitlichen Rand (Breakpoint wie Hero) */
@media (max-width: 767.98px) {
    #banner {
        padding-left: 0;
        padding-right: 0;
    }
}

.banner-wrapper {
    margin: 0 auto;
}



main {
    padding-left: var(--defaultunit);
    padding-right: var(--defaultunit);
}

.main-wrapper {
    max-width: calc(var(--header-maxwidth) - 2 * var(--defaultunit));
    margin: 0 auto;

    /* inner paddings */
    padding-left: var(--main-padding-left);
    padding-right: calc(2 * var(--header-padding-right));
    box-sizing: border-box;
}

@media (max-width: 1000px) {
    .main-wrapper {
        padding-left: 0;
        padding-right: 0;
    }

}

.main-wrapper:has(.frame-type-psprogramm_programlist) {
	padding-left: 0;
	padding-right: 0;
}


.main-wrapper:has(.frame-type-psprogramm_programlist) .frame-type-textmedia {
    max-width: calc(var(--header-maxwidth) - 2 * var(--defaultunit));
    margin: 0 auto;    
    padding-left: var(--main-padding-left);
    padding-right: calc(2 * var(--header-padding-right));
}

@media (max-width: 768px) {
    .main-wrapper:has(.frame-type-psprogramm_programlist) .frame-type-textmedia {
        padding-left: 0;
        padding-right: 0;
    }
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 0.5em 0;
    padding: 0;
    line-height: 1.2em;
}

.h-typ1 {
    color: var(--color-red);
    font-weight: 700;
    font-size: 60px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.h-typ2 {
    color: var(--color-black);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 23px;
}

.h-typ3 {
    font-weight: 700;
    font-size: 30px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.h-typ4 {
    font-weight: 700;
    font-size: 30px;
    letter-spacing: 0.05em;
}


.h-typprogramm {
    font-weight: 700;
    font-size: 45px;
    letter-spacing: 0.05em;
    margin-bottom: 0.2em;
}

.ff-caveat {
    font-family: 'Caveat';
    font-size: 145%;
    letter-spacing: 0;
}

p {
    margin: 0 0 1em 0;
    padding: 0;
    font-size: var(--fs-copy-normal);
    line-height: 1.5em;
    letter-spacing: 0.05em;
}

ul,
ol {
    margin: 0 0 1em 0;
    padding: 0;
    font-size: var(--fs-copy-normal);
    line-height: 1.5em;
    letter-spacing: 0.05em;
}

/*
main .ce-bodytext ul>li {
    background: url(../Icons/ulol-caret-black.svg) left 10px no-repeat;
    list-style-type: none;
    padding-left: 15px;
    border-bottom: 1px solid var(--color-yellow);
    padding-top: 5px;
    padding-bottom: 5px;
}
*/


.ce-bodytext ul>li:last-child {
    border-bottom: 0;
}


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

.color-white {
    color: var(--color-white);
}

.color-black {
    color: var(--color-black);
}

.color-green {
    color: var(--color-green);
}

.color-red {
    color: var(--color-red);
}

.color-grey {
    color: var(--color-grey)
}




/* Space */
.frame-space-before-extra-small {
    margin-top: 10px;
}

.frame-space-before-small {
    margin-top: 20;
}

.frame-space-before-medium {
    margin-top: clamp(20px, calc(15px + 1.563vw), 40px);
}

.frame-space-before-large {
    margin-top: clamp(20px, calc(10px + 3.125vw), 60px);
}

.frame-space-before-extra-large {
    margin-top: clamp(20px, calc(5px + 4.688vw), 80px);
}

.frame-space-after-extra-small {
    margin-bottom: 10px;
}

.frame-space-after-small {
    margin-bottom: 20px;
}

.frame-space-after-medium {
    margin-bottom: clamp(20px, calc(15px + 1.563vw), 40px);
}

.frame-space-after-large {
    margin-bottom: clamp(20px, calc(10px + 3.125vw), 60px);
}

.frame-space-after-extra-large {
    margin-bottom: clamp(20px, calc(5px + 4.688vw), 80px);
}






.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}


/* Mehrere Bilder nebeneinander */

div[data-ce-columns="3"] .ce-row,
div[data-ce-columns="2"] .ce-row {
    display: flex;
}

div[data-ce-columns="2"] .ce-row .ce-column,
div[data-ce-columns="3"] .ce-row .ce-column {
    flex: 1;
    float: none;
    margin-right: 0;
}


/* Text mit Galerie rechts neben dem Text */

.ce-textpic.ce-right:has(.ce-gallery + .ce-bodytext) {
    display: flex;
    gap: 30px;
}

.ce-textpic.ce-right:has(.ce-gallery + .ce-bodytext) .ce-bodytext {
    order: 1;
    flex: 1;
}

.ce-textpic.ce-right:has(.ce-gallery + .ce-bodytext) .ce-gallery {
    order: 2;
    flex: 1;
}

@media (max-width: 1000px) {

    .ce-textpic.ce-right:has(.ce-gallery + .ce-bodytext) {
        flex-direction: column;
    }

}


/* Text mit Galerie links neben dem Text */

.ce-textpic.ce-left:has(.ce-gallery + .ce-bodytext) {
    display: flex;
    gap: 50px;
}

.ce-textpic.ce-left:has(.ce-gallery + .ce-bodytext) .ce-bodytext {
    order: 2;
    flex: 1;
}

.ce-textpic.ce-left:has(.ce-gallery + .ce-bodytext) .ce-gallery {
    order: 1;
    flex: 1;
}

@media (max-width: 1000px) {

    .ce-textpic.ce-left:has(.ce-gallery + .ce-bodytext) {
        flex-direction: column;
    }

    .ce-textpic.ce-left:has(.ce-gallery + .ce-bodytext) .ce-bodytext {
        order: 1;
    }

    .ce-textpic.ce-left:has(.ce-gallery + .ce-bodytext) .ce-gallery {
        order: 2;
    }


}

@media (max-width: 768px) {

    .h-typ1 {
        font-size: 30px;
    }

    p {
        font-size: 19px;
    }
    .h-typ2 {
        font-size: 21px;
    }

    #banner.banner--empty {
        padding-top: 100px !important;
    }    
}