/* @license
Theme Name:     Shedhalle (2023)
Theme URI:      
Description:
Author:         Studio Yukiko (design) | André Pahl (code & animations)
Author URI:
Version:		2.5
*/


/* 	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	
    COLORS:

    --orange: #32ff21;   rgb(50,255,33)
    --pink: #ea28f4;    rgb(234,40,244)
    --creme: #F6C4CA;   rgb(246,196,202)


	
    GOOD TO KNOW:

    -> Mobile page can have these classes:

        html.is_mobile_view 

        html.is_mobile_view.mobile_agenda_is_open

        html.is_mobile_view.mobile_menu_is_open


    -> No up/down scaling of type & margins at 1728px, there everything is 1:1 as in the design




    SHORTCUTS:

    -> Worm [www]

    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */




/* 	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	Fonts
	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* @font-face {
	font-family:  helvetica-lt-pro,"Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
	src: url('assets/fonts/TrainerGrotesk-Regular20.woff') format('woff');   
	font-style: normal;
	font-weight: normal;
}

@font-face {
	font-family:  helvetica-lt-pro,"Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
	src: url('assets/fonts/TrainerGrotesk-RegularItalic09.woff') format('woff');   
	font-style: normal;
	font-weight: normal;
}
 */


/* 	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	General
	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

html {
    text-rendering: optimizeLegibility;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    overflow-x: hidden;
    width: 100%;
}

body, html {
    height: auto;
    /* disable elastic scrolling on iOS */
    -ms-scroll-chaining: none;
    overscroll-behavior: none;
    width: 100%;
}

body {
	font-family:  helvetica-lt-pro,"Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
	font-size: calc(27px * var(--body_text_scale));
	line-height: calc(29/27);
	font-weight: normal;
	height: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scrollbar-width: none;
    -ms-overflow-style: none;
    background-color: #fff;
}

body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* not used for now */
body.disable_scrolling {
    /* lock body scrolling */
    overflow: hidden!important; 
}


html,
body,
button,
input,
select,
textarea {
    color: #000;
}


/* ------------------------------------------------------------------
   "kruh web 1" — decorative dotted-arc graphic (from Figma node 247:701)
   Full-width overlay, 128px from top, non-interactive.
   ------------------------------------------------------------------ */
#kruh_web_1 {
    position: fixed;
    top: 128px;
    left: 0;
    width: 100%;
    pointer-events: none;
    user-select: none;
    z-index: 25;
}

#kruh_web_1 img {
    display: block;
    width: 100%;
    height: auto;
}

/* Loading indicator: while a new page loads via ajax (html.is_loading),
   the dotted-arc graphic pulsates to signal that something is happening. */
@keyframes kruh_pulse {
    0%, 100% { opacity: 0.9; transform: scale(1); }
    50%      { opacity: 0.2; transform: scale(1.025); }
}

html.is_loading #kruh_web_1 img {
    animation: kruh_pulse 0.9s ease-in-out infinite;
    will-change: opacity, transform;
}


div,
article,
section,
header,
footer,
figure,
aside,
nav {
	position: relative;
}

iframe {
	border: none!important;
}

figure {
	margin: 0;
}

p {
	margin-top: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0; 
}

table td {
	vertical-align: top;
	text-align: left;
	padding: 0;
	margin: 0;
}

.table_view {
	display: table;
	table-layout: fixed;	
}

.table_view_nonfix {
	display: table;
}

.table_cell_mid {
	display: table-cell;
	vertical-align: middle;
}

.table_row {
	display: table-row;
}

.table_cell {
	display: table-cell;
	vertical-align: top;
}

ul {
	list-style: none;
    list-style-image: none;
	margin: 0;
	padding: 0;
}

.size-auto, 
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
	max-width: 100%;
	height: auto;
}

*,
*:before,
*:after {
	box-sizing: border-box;
}

* {
	outline: 0;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-focus-ring-color: rgba(0, 0, 0, 0);
}

a:active,
a:focus {
	outline: 0;
}

a[x-apple-data-detectors],
a[href^="tel"] {
	color: inherit!important;
	text-decoration: inherit!important;
	font-size: inherit!important;
	font-family: inherit!important;
	font-weight: inherit!important;
	line-height: inherit!important;
}

input[type=email]::-ms-clear {
  /* remove the big X on ie */
  display: none;
}

input[type=submit] {
  appearance: none;
}



/* helpers */
.clickable {
	cursor: pointer;
	touch-action: manipulation;
	-webkit-touch-callout: none;
	user-drag: none;  
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.noselect {
    user-drag: none;  
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
}

.nowrap {
	white-space: nowrap;
}

.nowrap a {
	word-break: keep-all;
	hyphens: none;
}

.hw_acc {
	transform: translate3d(0, 0, 0);
}

.antia {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.faded_out {
	opacity: 0!important;
}

.v_center_parent {
	transform-style: preserve-3d;
}

.v_center {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.flex {
    display: flex;
}

.flex_center {
    height: 100%;
    display: flex;
    justify-content: center; /* x align */
    align-items: center; /* y align */
}

.flex_v_center {
    height: 100%;
    display: flex;
    justify-content: flex-start; /* x align */
    align-items: center; /* y align */
}


/* Helper to measure real 100vh when the browser UI is gone in iOS*/
#full100vh {
	position: fixed;
	left: -10px;
	top: 0;
	width: 1px;
	height: 100vh;
	z-index: -1;
}

/* Helper to measure 100vh and substract the height of the browser UI in iOS */
#full100vh_minusUI {
	position: fixed;
	left: -10px;
	top: 0;
	width: 1px;
	height: 100vh;
    max-height: -webkit-fill-available;
    max-height: -moz-available;
    max-height: stretch;    
}


/* when hovering over an underlined link, the underline is still very thin visible in chrome..
   -> force repaint */
.fix_chrome_renderbug {
	transform: translate3d(0,0,0);
}







/* 	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	Animations
	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.opacity_fade03 {
	transition: opacity .3s linear;
}

.opacity_fade06 {
	transition: opacity .6s linear;
}

.opacity_fade10 {
	transition: opacity 1s linear;
}

.transform_all_03 {
	transition: all .3s ease-in-out;
}

.transform_all_06 {
	transition: all .6s ease-in-out;
}

.transform_all_10 {
	transition: all 1s ease-in-out;
}






/* 	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	Typography [mce]
	reflect changes in custom-editor-style.css 
	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.editor_content p {
	margin-top: 0;
	margin-bottom: 0;
	text-indent: var(--text_indent,100px);
}

h1,
h2,
h3,
h4 {
	margin-top: 0;
	font-style: normal;
	font-weight: normal;
    font-size: inherit;
    line-height: inherit;
}


i,
em {
	font-style: italic;
	font-weight: normal;
}

b,
strong {
	font-style: normal;
	font-weight: 700;
}

b i,
strong i,
b em,
em b,
i b,
i strong {
	font-style: italic;
	font-weight: normal;
}


/*  -----------------------------------------------------------------
	Big type
    -> Used for headlines
	----------------------------------------------------------------- */

.type_big {
    font-family:  helvetica-lt-pro,"Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
	font-size: var(--type_big,130px);
	line-height: var(--type_big_lh,101px);
	letter-spacing: calc((-30/1000)*var(--type_big,130px));
	margin-bottom: calc((13/130) * var(--type_big,130px));
    word-break: break-all;
	word-break: break-word;
	hyphens: auto;
    text-indent: 0!important;
}

.not_italic .type_big,
.type_big .not_italic,
.type_big.not_italic {
    font-family:  helvetica-lt-pro,"Helvetica Neue", Helvetica, Arial, system-ui, sans-serif!important;
}

p.type_big p,
.type_big p {
    text-indent: 0!important;
}

.type_big span.big_headline_indent {
    padding-left: var(--text_indent,100px);
}



/*  -----------------------------------------------------------------
	Sub Headlines
    -> Italics, same size as body text
	----------------------------------------------------------------- */

.type_subheadline {
	font-style: normal;
	font-weight: normal;
    margin-bottom: 0!important;
    text-indent: 0!important;
}

.type_subheadline.no_indent {
    padding-left: 0;
    text-indent: 0!important;
}





/*  -----------------------------------------------------------------
	Small type
    -> Used for Dates, Metadata, etc
	----------------------------------------------------------------- */

.type_small {
    font-size: var(--type_small,22px);
    line-height: var(--type_small_lh,28px);
}


/*  -----------------------------------------------------------------
	Buttons
    -> Same size as "Small type"
    -> But: Line height 1
    -> And letter spacing
	----------------------------------------------------------------- */

.type_buttons {
	font-size: var(--type_small,22px);
	line-height: 1;
	text-transform: uppercase;
}





/*  -----------------------------------------------------------------
	Letters in circles
    
    !! this is totally different than in editor_styles.css
    DONT COPY THERE !

    the items get processed by .js -> ap_slideshows_letter_ini()
    last word gets wrapped
	----------------------------------------------------------------- */

.cltr {
	padding-right: calc(5px * var(--body_text_scale));
	cursor: pointer;
	touch-action: manipulation;
	-webkit-touch-callout: none;
	user-select: none;
	text-indent: 0;
}

.cltr .lw {
	position: relative;
	display: inline-block;
	padding-right: calc((20px + 2px) * var(--body_text_scale));
	text-indent: 0;
}

.type_small .cltr .lw {
	padding-right: calc((19px + 2px) * var(--body_text_scale));
}

.cltr .lw::after {
	position: absolute;
	box-sizing: border-box;
	width: calc(17px * var(--body_text_scale));
	height: calc(17px * var(--body_text_scale));
	background-color: var(--orange);
	border-radius: 50%;
	border: 1px solid #000;
	font-size: calc(8px * var(--body_text_scale));
	line-height: 1.5;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	top: calc(3px * var(--body_text_scale));
	right: calc(1.5px * var(--body_text_scale));
	transform: scale(1);
	transform-origin: center center;
}

.no-touch .cltr:hover .lw::after {
	background-color: var(--pink);
	color: #000;
}

.cltr.click .lw::after {
    animation: click_pop 0.4s 1;
}

@keyframes click_pop {
	0% {
		transform: scale(1);
		animation-timing-function: ease-out;
	}
	30%{
		transform: scale(1.2);
		animation-timing-function: ease-in-out;
	}
	70%{
		transform: scale(0.9);
		animation-timing-function: ease-in;
	}
	100%{
		transform: scale(1);
		animation-timing-function: ease-out;
	}
}




/* all letters */
.cltr.letter_a .lw::after {
	content: 'a';
}

.cltr.letter_b .lw::after {
	content: 'b';
}

.cltr.letter_c .lw::after {
	content: 'c';
}

.cltr.letter_d .lw::after {
	content: 'd';
}

.cltr.letter_e .lw::after {
	content: 'e';
}

.cltr.letter_f .lw::after {
	content: 'f';
}

.cltr.letter_g .lw::after {
	content: 'g';
}

.cltr.letter_h .lw::after {
	content: 'h';
}

.cltr.letter_i .lw::after {
	content: 'i';
}

.cltr.letter_j .lw::after {
	content: 'j';
}

.cltr.letter_k .lw::after {
	content: 'k';
}

.cltr.letter_l .lw::after {
	content: 'l';
}

.cltr.letter_m .lw::after {
	content: 'm';
}

.cltr.letter_n .lw::after {
	content: 'n';
}

.cltr.letter_o .lw::after {
	content: 'o';
}

.cltr.letter_p .lw::after {
	content: 'p';
}

.cltr.letter_q .lw::after {
	content: 'q';
}

.cltr.letter_r .lw::after {
	content: 'r';
}

.cltr.letter_s .lw::after {
	content: 's';
}

.cltr.letter_t .lw::after {
	content: 't';
}

.cltr.letter_u .lw::after {
	content: 'u';
}

.cltr.letter_v .lw::after {
	content: 'v';
}

.cltr.letter_w .lw::after {
	content: 'w';
}

.cltr.letter_x .lw::after {
	content: 'x';
}

.cltr.letter_y .lw::after {
	content: 'y';
}

.cltr.letter_z .lw::after {
	content: 'z';
}


/*  -----------------------------------------------------------------
	Arrow before a word

    http://b64.io
    IMPORTANT: type MUST be "svg+xml"
	----------------------------------------------------------------- */

/* for later: noch adjusten für type_small */
.arrow_before {
	padding-left: calc(15px * 1.5 * var(--body_text_scale));
	position: relative;
	display: inline-block;
	text-indent: 0;
}

.arrow_before::before {
	content: '';
	position: absolute;
	top: calc(50% + (2px * 1.5 * var(--body_text_scale)));
    transform: translateY(-50%);
	left: 0;
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMiAxMSI+PHBhdGggZD0iTTUuNjIsOS41OCw4LjkzLDYuMjdILjE0VjQuNzNIOC45M0w1LjYyLDEuNDIsNi42OS4zMywxMS44Niw1LjUsNi42OSwxMC42N1oiLz48L3N2Zz4=) no-repeat;
	width: calc(12px * 1.5 * var(--body_text_scale));
	height: calc(11px * 1.5 * var(--body_text_scale));
	background-size: contain;
	background-position: 0 center;
}



/*  -----------------------------------------------------------------
	Newsletter trigger
	----------------------------------------------------------------- */

.newsletter_trigger_text {
	position: relative;
	display: inline-block;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-touch-callout: none;
	user-select: none;
	text-indent: 0!important;
	text-decoration: underline;
}

.no-touch .newsletter_trigger_text:hover {
	text-decoration: none!important;
}




/*  -----------------------------------------------------------------
    Narrow text column
    for later: nochmal checken
	----------------------------------------------------------------- */

.narrow_text {
	text-indent: 0!important;
	margin-left: var(--text_indent,100px);
	max-width: calc(250px * var(--body_text_scale));
}





/*  -----------------------------------------------------------------
    Space below a paragraph ( based on body type )
	----------------------------------------------------------------- */

.p_has_bm {
	margin-bottom: calc(24px * var(--body_text_scale))!important;
}

.p_has_big_bm {
	margin-bottom: calc((24px * 2) * var(--body_text_scale))!important;
}

.p_has_half_bm {
	margin-bottom: calc((24px / 2) * var(--body_text_scale))!important;
}




/*  -----------------------------------------------------------------
    Space below a paragraph ( based on smaller type )
	----------------------------------------------------------------- */

.type_small.p_has_bm,
.type_small .p_has_bm {
	margin-bottom: var(--type_small_lh,28px)!important;
}

.type_small.p_has_big_bm,
.type_small .p_has_big_bm {
	margin-bottom: calc(2*var(--type_small_lh,28px))!important;
}

.type_small.p_has_half_bm,
.type_small .p_has_half_bm {
	margin-bottom: calc(0.5*var(--type_small_lh,28px))!important;
}



/*  -----------------------------------------------------------------
    More etc
	----------------------------------------------------------------- */

/* add margin to a <span>, must be margin & not padding! */
.add_leftm {
	margin-left: var(--text_indent,100px);
}

.no_indent {
	text-indent: 0!important;
}

.all_indent {
	text-indent: 0!important;
	padding-left: var(--text_indent,100px);
}

.no_break {
	white-space: nowrap;
}

.uppercase {
	text-transform: uppercase;
}






/* 	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    End MCE editor
    ~
	Other Typography, Links, content of wysiwyg editor
	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* links */
a,
.like_link {
    position: relative;
	color: inherit;
	text-decoration: none;
	touch-action: manipulation;
    cursor: pointer;
    /* for later?
	word-break: break-all;
	word-break: break-word;
	hyphens: auto;
    */
}

.editor_content a {
	text-decoration: underline;
}


.editor_content .type_big a,
.editor_content a.type_big {
	text-decoration: underline;
	border-bottom: none;
}


.no-touch .editor_content .type_big a:hover,
.no-touch .editor_content a.type_big:hover {
	text-decoration: none;
	border-bottom: none;
}



/* no margin after last item in content from Wordpress text editor */
.editor_content > *:last-child {
	margin-bottom: 0;
}

.editor_content .last_item { 
    margin-bottom: 0!important;
}


/* tables */
.editor_content table {
    font-family: inherit;
    text-indent: 0!important;
    width: auto;
	max-width: calc(100% - var(--text_indent,100px));
    margin-left: var(--text_indent,100px);
    height: auto;
}

.editor_content table td {
    height: auto!important;
    width: auto!important;
    vertical-align: top;
    padding-right: calc((26/16) * var(--type_small,22px));
}

.editor_content table td p {
    text-indent: 0!important;
    margin-bottom: 0!important;
}




/* text selection highlightning */
*::selection {
	background: var(--orange);
	color: #000;
	text-shadow: none;
}









/* 	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	Lazy images / videos
	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

.max_w_wrap {
	display: inline-block;
	width: 100%;
}


/*  ---------------------------------
	Lazy images
	--------------------------------- */

/* lazy images [lll] */
.lazy_img_wrap {
    opacity: 0;
    transition: opacity .4s linear;
}

.lazy_img_wrap.cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.lazy_img_wrap img {
	opacity: 0;
	transition: opacity .4s linear;
}

.lazy_img_wrap img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%!important;
}

.lazy_img_wrap.cover img {
    width: 100%!important;
    height: 100%!important;
    object-fit: cover;
    object-position: center center;
}

/* for later: check */
.lazy_img_wrap.is_svg img {
	position: relative;
}







/*  ---------------------------------
	Lazy videos [vvv]
	--------------------------------- */

/* videos [vvv] */
.lazy_video { 
    transition: opacity .4s linear 2s;
    opacity: 0;
}

.lazy_video textarea {
    display: none!important;
}

.video_container {
	backface-visibility: hidden;
	height: 0;
	overflow: hidden;
	width: 100%;
    text-align: center;
}

.video_container.cover {
    position: absolute;
	top: 0;
	left: 0;
    width: 100%!important;
    height: 100%!important;
}

.video_container.cover video {
    object-fit: cover;
    object-position: center center;
}

.video_container iframe,
.video_container object,
.video_container embed,
.video_container video { 
	position: absolute;
	top: 0;
	left: 0;
	width: 100%!important;
	height: 100%!important;
	z-index: 1;
}






/* 	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	Main menu [mmm]
	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

#main_menu {
	position: fixed;
    top: calc(28px * var(--body_text_scale));
    left: 0;
    padding-left: calc(24px*var(--body_text_scale));
    padding-right: calc(14px*var(--body_text_scale));
    transition: opacity .3s linear;
	z-index: 11;
}

@media only screen and (min-width : 1024px) {
	#main_menu {
		display:block;
		padding-left: calc(211px * var(--scale));
	}

}
/*  -----------------------------------------------------------------
	Main menu items
	----------------------------------------------------------------- */

#main_menu ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    background: #ddd;
    position: relative;
	gap: 46px;
    padding: 0 20px;
}

#main_menu li {
	position: relative;
	width: auto;
}

#main_menu li a {
	margin-bottom: 0;
}

#main_menu li.lang a{
    aspect-ratio: 1;
    padding: 0;
    border-radius: 500em;
    color: #000;
    margin-bottom: -1px;
    background-color: var(--orange);
	text-decoration: none!important;
	text-transform: uppercase;
}

#main_menu li.lang a:hover{
	background-color: white;
}

#main_menu li.menu-item.lang {
    position: absolute !important;
    right: -13px;
    width: 0;
}

#main_menu__submenu {
    background: var(--orange);
	display: flex;
	/* gap: 52px; */
    padding: 0 20px;
	justify-content: space-between;
}

/* 	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	Main Menu: Mobile view [mmm]
	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
    
/* ===================================================================
   Mobile menu (open state) — redesigned to match Figma "iPhone 16 - 2":
   a light-gray panel dropping from the top, plain centered text rows
   separated by full-width divider lines, orange "EN" circle at the end.
   =================================================================== */
html.is_mobile_view #main_menu {
    position: fixed;
    top: 0;
    bottom: auto;
    left: 0!important;
    width: 100%!important;
    height: auto;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    align-items: stretch;
    padding: calc(108px * var(--scale)) calc(22px * var(--scale)) calc(28px * var(--scale));
    transform: translate3d(0, 0, 200px); /* 200px -> z must be higher than FUTURE / PAST buttons */
    z-index: 5000;
}

html.is_mobile_view #main_menu .menu-header ul {
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    padding: 15px;
}

html.is_mobile_view #main_menu_content {
    width: 100%;
    z-index: 2;
}

/* for later: schöner machen wie das mobile menu reinkommt */
html.is_mobile_view:not(.mobile_menu_is_open) #main_menu {
    display: none!important;
}

html.is_mobile_view.mobile_menu_is_open #main_menu {
    display: flex!important;
	z-index: 7000;
}

html.is_mobile_view #main_menu ul {
    flex-flow: column nowrap;
    width: 100%;
	padding: 21px 14px;
}

/* every row carries a divider line on top; the language row's top line
   doubles as the closing line below the last nav item */
html.is_mobile_view #main_menu li {
    margin-bottom: 0;
    width: 100%;
    text-align: center;
    border-top: 1px solid #000;
}

html.is_mobile_view #main_menu li:first-child{
	border-top: 0;
}

html.is_mobile_view #main_menu li.lang {
    order: 1;
    position: static !important;   /* override desktop absolute/width:0 */
    right: auto !important;
    width: 100% !important;
    padding-top: calc(22px * var(--scale));
    border-top: 1px solid #000;
}

/* nav items: plain uppercase text rows (no pill background) */
html.is_mobile_view #main_menu .button_black {
    display: block;
    width: 100%;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: calc(15px * var(--scale)) 0;
    background: transparent !important;
    color: #000 !important;
    border-radius: 0;
    line-height: 1;
    text-transform: uppercase;
    font-size: calc(25px * var(--body_text_scale));
    letter-spacing: calc(.6px * var(--type_buttons_scale) * 1.305);
}

/* language switch rendered as an orange circle */
html.is_mobile_view #main_menu .language {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 0;
    margin: 0 auto;
    padding: 0;
    border-radius: 50%;
    background: var(--orange) !important;
    color: #000 !important;
    text-transform: uppercase;
    line-height: 1;
}

/* match-Figma: the agenda filter triggers are not part of the mobile
   menu in the new design (kept in DOM, just hidden here) */
html.is_mobile_view #main_menu #main_menu__archive {
    display: none !important;
}


/* submenu within mobile menu — sub-pages of the current section
   (e.g. ABOUT -> Shedhalle / Reglement / Team / …). Styled as a tidy
   secondary list that echoes the main menu's divider-row look, but
   smaller, so the hierarchy reads clearly. */
html.is_mobile_view #main_menu__submenu {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: stretch;
    background: transparent;
    margin: 0;
    padding: 0;
}

html.is_mobile_view #main_menu__submenu a {
    display: block;
    width: 100%;
    margin: 0;
    padding: calc(12px * var(--scale)) 0;
    border-top: 1px solid rgba(0, 0, 0, .28);
    background: transparent;
    color: #000;
    text-align: center;
    text-decoration: none;
    line-height: 1;
    font-size: calc(18px * var(--body_text_scale));
    letter-spacing: calc(.4px * var(--type_buttons_scale));
}

html.is_mobile_view #main_menu__submenu a.selected {
    color: var(--orange);
}


/* hide subpage navigation that is defined in incl-page.php in order to be cloned via .js to the main menu */
#page_content1 .subpage_navigation.below_main_menu,
#page_content2 .subpage_navigation.below_main_menu,
body:not(.page-template-page-template-archive) #mobile_archive_navigation 
{
    display: none!important;
}





/*  -----------------------------------------------------------------
	Mobile logo
	----------------------------------------------------------------- */

#mobile_logo {
	display: none;
}

html.is_mobile_view #mobile_logo {
	position: fixed;
	top: calc(8px * var(--scale));
	left: calc(22px * var(--scale));
	width: calc(100% - (22px*2*var(--scale)));
	height: auto;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	column-gap: calc(12px * var(--scale));
	/* 210px -> z must be higher than FUTURE / PAST buttons and also the menu  */
	transform: translate3d(0, 0, 210px);
	transition: opacity .3s linear;
	z-index: 7001;
}

html.is_mobile_view #mobile_logo:before {
    content: "";
    display: block;
    background: white;
    height: 105%;
    position: absolute;
    left: -16px;
    right: -16px;
    top: -9px;
}
html.mobile_menu_is_open.is_mobile_view #mobile_logo:before,
html.mobile_menu_is_open.is_mobile_view #mobile_archive_navigation {
	display: none!important;
}

/* hamburger / close toggle — now a separate button (was embedded in the
   old animated SVG); IDs kept so app.js toggle keeps working) */
html.is_mobile_view #mobile_logo .ml_toggle {
	position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: calc(6px * var(--scale)) calc(3px * var(--scale));
    border: 0;
    background: #DDDDDD;
    cursor: pointer;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: stretch;
    padding: 11px;
    border-radius: 500em;
}

html.is_mobile_view #mobile_logo .ml_toggle span {
	display: block;
	width: 100%;
	height: 2px;
	background: #000;
	border-radius: 2px;
}

/* close (X): two crossed bars */
html.is_mobile_view #mobile_logo #ml_close {
	justify-content: center;
}
html.is_mobile_view #mobile_logo #ml_close span {
	position: absolute;
	left: calc(12px * var(--scale));
	right: calc(12px * var(--scale));
	top: 50%;
	width: auto;
}
html.is_mobile_view #mobile_logo #ml_close span:nth-child(1) { transform: rotate(45deg); }
html.is_mobile_view #mobile_logo #ml_close span:nth-child(2) { transform: rotate(-45deg); }

/* static logo fills the remaining width next to the toggle */
html.is_mobile_view #mobile_logo .mobile_logo_aspect {
	flex: 1;
	min-width: 0;
	display: block;
	line-height: 0;
}
html.is_mobile_view #mobile_logo .mobile_logo_aspect img {
	display: block;
	width: 100%;
	height: auto;
}

/* archive nav (populated via .js) drops to its own row below */
html.is_mobile_view #mobile_logo #mobile_archive_navigation {
	flex: 0 0 100%;
    gap: 10px;
    display: flex;
    justify-content: center;
}

/* show burger when closed, X when open */
html.is_mobile_view:not(.mobile_menu_is_open):not(.mobile_agenda_is_open) #mobile_logo #ml_close {
	display: none!important;
}
html.is_mobile_view.mobile_menu_is_open #mobile_logo #ml_burger,
html.is_mobile_view.mobile_agenda_is_open #mobile_logo #ml_burger {
	display: none!important;
}

/* when the menu/agenda is open only the X stays — hide the wordmark so it
   doesn't overlap the menu items (matches Figma "iPhone 16 - 2") */
html.is_mobile_view.mobile_menu_is_open #mobile_logo .mobile_logo_aspect,
html.is_mobile_view.mobile_agenda_is_open #mobile_logo .mobile_logo_aspect {
	display: none;
}







/* 	-----------------------------------------------------------------
	Main Menu ~ Submenu
	----------------------------------------------------------------- */

.main_menu__submenu {
    /* filled in via .js */
}




/* 	-----------------------------------------------------------------
	Main Menu ~ Archive menu
	----------------------------------------------------------------- */

#main_menu__archive {
   /* for later: schöner animieren */ 
    display: none;
	background: var(--orange);
    padding: 0 20px;
	justify-content: space-between;
    background: var(--orange);
	gap: calc(52px * var(--scale));
}

body.page-template-page-template-archive #main_menu__archive {
    display: inline-flex;
}

#mobile_archive_navigation {
    display: none;
}

html.is_mobile_view.mobile_menu_is_open #mobile_archive_navigation {
    opacity: 0.3;
}

html.is_mobile_view #main_menu__archive {
    display: none!important;
}
    
html.is_mobile_view body.page-template-page-template-archive #mobile_archive_navigation {
    display: block;
}

#main_menu__archive .item,
#mobile_archive_navigation .item {
	margin-bottom: 1px;
}

#main_menu__archive .item.selected,
#mobile_archive_navigation .item.selected{
	background-color: var(--pink);
}


#main_menu__archive .item.search,
#mobile_archive_navigation .item.search {
    display: none!important; /* for later: implement search */
}


@media only screen and (max-width : 450px) { 
	/* make sure the ARCHIV filters are in one line and don't break at THE SHED
       for later: this doesn't work then when we have also SEARCH there    
    */
    
    #mobile_archive_navigation .button_white_plain {
        padding-left: calc(17px*var(--type_buttons_scale));
        padding-right: calc(17px*var(--type_buttons_scale));
    }
}


@media only screen and (max-width : 424px) { 
    #mobile_archive_navigation .button_white_plain {
        padding-left: calc(11px*var(--type_buttons_scale));
        padding-right: calc(11px*var(--type_buttons_scale));
    }
}






/* 	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	Newsletter Popup [nnn]
	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

#newsletter_overlay {
	position: fixed;
    top: 50%;
    left: calc(50% - var(--agenda_width,224px)/2);
    max-width: 596px;
	width: calc(100% - (11px * 2 * var(--scale)));
    transform: translate3d(-50%, -50%, 100px); /* 100px z-index for Safari/Rotation */
	transform-style: preserve-3d;
	backface-visibility: hidden;	
	z-index: 10010;
}

#nlov_inner {
    position: relative;
	width: 100%;
	height: auto;
	padding: calc(30px * var(--scale)) calc(50px * var(--scale));
	border-radius: calc(51px * var(--scale));
	background-color: var(--orange);
	border: 1px solid #000;
    max-height: 95vh;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

#nlov_inner::-webkit-scrollbar {
    width: 0!important;
    background: transparent;
}

#nlov_inner::-webkit-scrollbar-track {
    background: transparent;
}

#nlov_inner::-webkit-scrollbar-thumb {
    background: transparent;
}

.no-touch #nlov_inner::-webkit-scrollbar-thumb:hover {
    background: transparent; 
}


/* Firefox 
https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width
*/
@supports (-moz-appearance:none) {
    #nlov_inner {
        scrollbar-width: none; /* >= Firefox 64 */
        scrollbar-color: transparent transparent;
    }
}


/* IE + Edge */
#nlov_inner {
    -ms-overflow-style: none;
}


#nlov_inner .main_wrap {
	display: flex;
	flex-flow: row nowrap;
	margin-bottom: calc(30px * var(--scale));
}

html.is_mobile_view #newsletter_overlay {
    width: 90.6%;
    left: 50%;
}
    
html.is_mobile_view #nlov_inner {
    border: none;
}



/* 	-----------------------------------------------
	Newsletter Popup: Close X
	----------------------------------------------- */

#nlov_close {
	position: absolute;
	top: 26px;
	right: calc(42px * var(--scale));
	width: var(--closex_w,22px);
	height: var(--closex_w,22px);
    display: flex;
	z-index: 10;
}

.no-touch #nlov_close:hover line {
	stroke: var(--pink)!important;
}
  
html.is_mobile_view #nlov_close::before {
    content: '';
    position: absolute;
    display: block;
    top: calc(-22px * var(--scale));
    right: calc(-22px * var(--scale));
    width: calc(22px*2*var(--scale) + var(--closex_w,22px));
    height: calc(22px*2*var(--scale) + var(--closex_w,22px));
    border: 1px solid #000;
    border-radius: 50%;
    z-index: 10;
}



/*  ---------------------------------
	Newsletter Popup: Headline
	--------------------------------- */

#nlov_inner h2 {
	width: 100%;
	margin-bottom: calc(0.37 * var(--type_big,130px));
}

#nlov_inner h2 span {
    display: block;
    width: 100%;
}

#nlov_inner h2 span:nth-child(2) {
    text-align: right;
}



/*  ---------------------------------
	Newsletter Popup: Email
	--------------------------------- */

#nlov_input_wrap {
	display: flex;
	width: auto;
	height: calc(39px * var(--type_buttons_scale));
	overflow: hidden;
	border-radius: calc((39px / 2) * var(--type_buttons_scale));
	background-color: transparent;
    border: 1px solid #000;
	flex-grow: 1;
}

#nlov_inner input:not([type="checkbox"]) {
	display: inline-block;
	position: relative;
	top: -1px;
	background-color: transparent;
	-webkit-appearance: none;
	border: none;
	border-radius: 0;
	width: 100%;
	padding-left: calc(12px * var(--type_buttons_scale));
	margin: 0;
}

::placeholder {
	color: #000;
}

:focus::placeholder {
	opacity: 0.2;
}



/*  ---------------------------------
	Newsletter Popup: Submit
	--------------------------------- */

#nlov_submit {
	margin: 0;
}



/* 	---------------------------------
	Newsletter Popup: Privacy
	--------------------------------- */

#newsletter_overlay .privacy_stuff {
    height: 0;
    overflow: hidden;
}

#newsletter_overlay .privacy_stuff a {
	text-decoration: none;
	border-bottom: 1px solid;
}

.no-touch #newsletter_overlay .privacy_stuff a:hover {
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

#newsletter_overlay .privacy_inner {
    padding-bottom: calc(30px * var(--scale));
}


#nlov_checkbox {
	position: relative;
    margin-left: 0;
    transition: all .2s ease-in-out;
}

#nlov_checkbox.error {
	color: #fff;
    margin-left: 7px; /* move to right becasue the overflow is hidden and then the error would be cut off on the left */
}

#nlov_checkbox span {
	display: inline-block;
	z-index: 2;
}

#nlov_checkbox.error::before {
	content: '';
	width: calc(100% + 17px);
	height: calc(100% + 9px);
	position: absolute;
	top: -3px;
	left: -7px;
	background-color: var(--pink);
	border-radius: 11px;
	z-index: -1;
}



/* 	---------------------------------
	Newsletter Popup: Social Links
	--------------------------------- */

#newsletter_overlay .soc {
    display: flex;
    justify-content: center;
    flex-flow: row nowrap;
    margin-bottom: calc(22px * var(--scale));
}

#newsletter_overlay .soc .button_black {
    margin-bottom: 0!important;
}



/*  ---------------------------------
	Newsletter Popup: Logo
	--------------------------------- */

#newsletter_overlay .logo {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

#newsletter_overlay .logo_aspect {
    width: 350px;
    max-width: 100%;
    line-height: 0;
}

#newsletter_overlay .logo_aspect img {
    display: block;
    width: 100%;
    height: auto;
}



/*  ---------------------------------
	Newsletter Popup: etc
	--------------------------------- */

#nlov_submit span {
	position: relative;
	top: -1px;
}

#nlov_inner #gdpr_33751 {
	position: relative;
	top: 2px;
	margin-right: 10px;
	z-index: 2;
}







/* 	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	AGENDA [aaa]

	- Desktop: On right side
    - Mobile: Floats below and moves up on activation
	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

#agenda {
	position: fixed;
	top: 0;
	right: 0;
	width: var(--agenda_width,224px);
	height: 100%;
	background-color: #FEFF99;
	color: #000;
    transition: opacity .3s linear;
	z-index: 10;
}

#agenda .type_small{
	text-transform: uppercase;
	font-family: adobe-garamond-pro, "Adobe Garamond", Garamond, serif;
}

#agenda_wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: calc(19px * var(--body_text_scale)) calc(30px * var(--body_text_scale));
	overflow-x: hidden;
	overflow-y: scroll;
	overflow: -moz-scrollbars-none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
    /* disable elastic scrolling on iOS */
    -ms-scroll-chaining: none;
    overscroll-behavior: none;
	scrollbar-width: none;
}

#agenda_wrap .event {
	margin-bottom: calc(30px * var(--body_text_scale));
    max-width: 660px; /* limit the width a bit on iPad, would be too broad otherwise */
}

.no-touch #agenda_wrap .event.has_link a:hover {
	color: var(--orange);
}

#agenda_wrap h3 {
	font-size: inherit;
	line-height: inherit;
	margin-bottom: calc(18px * var(--body_text_scale));
    /* add linebreaks for really long words like WEAK•END•OPERA */
    word-break: break-all;
	word-break: break-word;
	hyphens: auto;
}

#agenda_wrap .event .day {
    word-break: break-all;
	word-break: break-word;
	hyphens: auto;
}




/*  -----------------------------------------------------------------
	Mobile view: Agenda
	----------------------------------------------------------------- */

html.is_mobile_view #agenda {
	position: fixed;
	top: calc( var(--current100vh,100vh) - (40px * var(--type_buttons_scale) * 1.5));
	right: 0;
	width: 100%;
	height: calc(var(--current100vh,100vh) - var(--ml_height));/* ml_height= logo height */
	border-left: none;
	transform: translate3d(0, 0, 200px); /* 200px -> z must be higher than FUTURE / PAST buttons */
	transition: top .6s cubic-bezier(0.76, 0, 0.08, 1.02);
	z-index: 6000;
}

html.is_mobile_view #agenda_wrap {
    padding-top: 0;
	padding-left: var(--content_padding,18px);
	padding-right: var(--content_padding,18px);
}

html.is_mobile_view:not(.mobile_agenda_is_open) #agenda_wrap {
	overflow: hidden!important;
}



html.is_mobile_view #agenda_wrap h3,
html.is_mobile_view #agenda_wrap .time,
html.is_mobile_view #agenda_wrap .venue_price {
	padding-left: var(--text_indent,100px);
	/* padding-right: calc(45px * var(--body_text_scale)); */
}

html.is_mobile_view.mobile_agenda_is_open #agenda {
	top: var(--ml_height);/* ml_height= #mobile_logo height */
}

html.is_mobile_view #agenda .type_buttons {
	font-size: calc(16px * var(--type_buttons_scale) * 1.5);
	letter-spacing: calc(0.6px * var(--type_buttons_scale) * 1.5);
}

html.is_mobile_view #agenda_wrap .agenda_hl {
    height: calc(40px * var(--type_buttons_scale) * 1.5);
    /* center the word AGENDA vertically */
    line-height: 1!important;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* den space oberhalb von AGENDA ausgleichen, den die schrift oben hat */
    padding-bottom: calc(4px * var(--type_buttons_scale)*1.5);
    margin-bottom: calc(6px * var(--type_buttons_scale)*1.5);
}






/* 	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	Semi Transparent click area that's active when MOBILE AGENDA and MOBILE MENU are open on 
	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

#mobile_close_click_layer {
	display: none;
}

html.is_mobile_view #mobile_close_click_layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(255,255,255,0.7); /* debug rgba(255,0,0,0.4) */
    z-index: 4999;
}

html.is_mobile_view #mobile_close_click_layer:not(.hidden) {
    display: block;
}










/* 	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	Content [ccc]
	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

#content {
	position: fixed;
	top: 0;
	left: 0;
	width: calc(100% - var(--agenda_width,224px) + 2px); /* 2px -> avoid rouding errors & blitzer */
	height: 100%;
    transition: opacity .3s linear;
    z-index: 1; /* must be below agenda because it's 2px broader to prevent 'blitzers' ! */
}

html.is_mobile_view #content {
    width: 100%;
    overflow: hidden;
}


#content_inner {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: var(--current100vh,100vh);
	z-index: 1;
}


/* z-order of the two containers that load content of pages */
#page_content1,
#page_content2 {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: var(--current100vh,100vh);
	overflow: hidden;
}

#page_content1 {
	z-index: 1; /* changed via .js */
}

#page_content2 {
	z-index: 2; /* changed via .js */
}



/* one content-page that has a left and right column inside */
#content .content_page,
#content .content_page_colwrap {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	display: flex;
	flex-flow: row nowrap;
	height: var(--current100vh,100vh);
}


/* .content_page must NOT be a scroll container on mobile: it has no
   overflowing content of its own (it's exactly 100vh holding a 100vh
   colwrap). On iOS a redundant outer momentum-scroller swallows the
   vertical touch so the inner .content_page_colwrap never scrolls.
   Keep a single momentum scroller (the colwrap) -> overflow: hidden here. */
html.is_mobile_view #content .content_page {
    overflow: hidden;
}

    
html.is_mobile_view #content .content_page_colwrap {
    display: flex;
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    /* reserve vertical panning for this scroller; horizontal gestures stay
       free for the Flickity carousels inside */
    touch-action: pan-y;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* disable elastic scrolling on iOS */
    -ms-scroll-chaining: none;
    overscroll-behavior: none;
    -ms-overflow-style: none;
    flex-flow: row wrap; /* NOT column, dann zeigt es die rechte Column irgendwie nicht an! */
    height: var(--current100vh,100vh);
}


/* hide content that should not be displayed on mobile */
html.is_mobile_view .hide_on_mobile {
    display: none!important;
}




/*  -----------------------------------------------------------------
    Hidden Edit Post Link in upper right corner of Desktop
	----------------------------------------------------------------- */

#edit_the_post {
    position: fixed;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background-color: var(--orange);
    opacity: 0;
    z-index: 11;
}

.no-touch #edit_the_post:hover {
    opacity: 1;
}

html:not(.lgg) #edit_the_post,
html.is_mobile_view #edit_the_post {
    display: none!important;
}

#edit_the_post a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}




/*  -----------------------------------------------------------------
    Buttons (shared)

    for later: coolere Mouseovers machen
	----------------------------------------------------------------- */

.button_black,
.button_white,
.button_white_plain {
    display: inline-flex;
    position: relative;
	width: auto;
	height: calc(40px * var(--type_buttons_scale));
	margin: 0;
	padding: 0;
	text-indent: 0;
	margin-bottom: calc(9px * var(--type_buttons_scale));
	text-decoration: none;
    justify-content: center;
    align-items: center;
    /* same as type_buttons */
    font-size: var(--type_small,22px);
    line-height: 1;
    text-transform: uppercase;
}



/*  -----------------------------------------------------------------
    Black buttons with bevel
    -> Main menu
    -> Newsletter Popup
	----------------------------------------------------------------- */

.button_black {
	color: #000;
}

.button_black.selected,
.no-touch .button_black:hover,
#main_menu li.current-menu-item .button_black {
	text-decoration:underline;
}

.button_black.pink_mo.selected,
.no-touch .button_black.pink_mo:hover,
#main_menu li.current-menu-item .button_black.pink_mo {
    background-color: var(--pink);
    color: #000;
}




/*  -----------------------------------------------------------------
    White buttons with bevel
    -> Artist pages
	----------------------------------------------------------------- */

.button_white {
	color: #000;
    box-shadow: inset calc(2px * var(--type_buttons_scale)) calc(-3px * var(--type_buttons_scale)) calc(6px * var(--type_buttons_scale)) rgba(150, 150, 150, 0.51); 
	background-color: #fff;
}

a.button_white.type_buttons {
    font-size: calc(27px * var(--body_text_scale));
    background: none;
    box-shadow: none;
    height: auto;
}

/* for later: coolere Mouseovers machen */
.button_white.selected,
.no-touch .button_white:hover {
	background-color: #FEFF99;
}




/*  -----------------------------------------------------------------
    White buttons plain 
    -> Page submenu (ABOUT, ARCHIVE, ...)
    -> at end of page
	----------------------------------------------------------------- */

.button_white_plain {
    margin-bottom: 0;
    text-transform: uppercase;
    text-decoration: underline;
}

/* for later: coolere Mouseovers machen */
.button_white_plain.selected,
.no-touch .button_white_plain:hover {
	background: #FEFF99;
}

.button_white_plain.pink_mo.selected,
.no-touch .button_white_plain.pink_mo:hover {
	background-color: var(--pink);
}

#main_menu{
	.button_white_plain {
		margin-bottom: 0;
		text-transform: none;
		text-decoration: none;
	}
	.button_white_plain.selected,
	.button_white_plain:hover {
		background: none;
		text-decoration: underline;
	}
}



/* 	-----------------------------------------------------------------
	Page: ARCHIVE
	----------------------------------------------------------------- */

html.is_mobile_view .archive_list {
    /* den Abstand vom Filter ein bisschen vergrößern */
    padding-top: calc(40px*var(--scale) + var(--ml_height))!important;
}

.archive_list .item {
    margin-left: calc(-24px * var(--body_text_scale)); /* same settings as #content .content_left_col */
	margin-right: calc(-14px * var(--body_text_scale));
    padding-left: calc(24px * var(--body_text_scale));
	padding-right: calc(14px * var(--body_text_scale));
    padding-top: calc(12px * var(--body_text_scale));
    padding-bottom: calc(24px * var(--body_text_scale));
    width: auto;
    border-top: 1px solid #000;
}

/* don't show a line on top of the 1st item in the list */
.archive_list .item:first-of-type,
.archive_list .item.is_first {
    border-top: none;
}

.no-touch .archive_list .item:hover {
    background-color: #ddd;
}

/* cover the whole item with an invisible layer to prevent that inline links in the excerpt can get clicked */
.no-touch .archive_list .item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent; /* rgba(255,0,0,0.2) */ /* debug */
    z-index: 10;
}

.archive_list .item .excerpt_wrap {
    display: flex;
    flex-flow: column wrap;
}

/* make links in the excerpt non-underline, so we don't think we can click on them
   because the full item is clickable and leads to the article */
.archive_list .item .excerpt_wrap a {
    text-decoration: none!important;
}



/*  ---------------------------------
	Archive item: Headline 
    and text that has the .type_big
    attached 
    -> make it the smaller size
	--------------------------------- */

.archive_list .item .excerpt_wrap .type_big {
    font-size: calc(0.553846 * var(--type_big,130px));
    line-height: calc(0.553846 * var(--type_big_lh,101px));
    letter-spacing: calc(0.553846 * (-30/1000)*var(--type_big,130px));
    margin-bottom: calc(0.553846 * (13/130)*var(--type_big,130px));
    padding-left: var(--text_indent,100px); 
}

html.is_mobile_view .archive_list .item .excerpt_wrap .type_big {
    font-size: calc(100vw * (37/375))!important;
    line-height: calc(100vw * (34/375))!important;
    letter-spacing: calc(-1vw * (60/375))!important;
}

.archive_list .item .archive_headline p {
    margin-bottom: 0!important;
}

.archive_list .item .excerpt_wrap .type_big .big_headline_indent {
    padding-left: 0;
}






/*  ---------------------------------
	Archive item: Date & Cat
	--------------------------------- */

.archive_list .excerpt_wrap .date_and_cat {
    margin-top: calc(18px * var(--body_text_scale));
}

html.is_mobile_view .archive_list .excerpt_wrap .date_and_cat {
    position: absolute;
    right: 0;
    top: 0;
    margin-top: 0;
    background-color: #fff;
    padding: 0 6px 2px 6px;
    border-radius: 7px;
}

.archive_list .excerpt_wrap .date  {
	width: auto;
	margin: 0;
    display: flex;
    flex-flow: row nowrap;
}

.archive_list .excerpt_wrap .date_sep {
    display: inline-flex;
    margin: 0 calc(8px * var(--body_text_scale));
}

.archive_list .excerpt_wrap .cat {
    padding-left: var(--text_indent,100px);
    font-family:  helvetica-lt-pro,"Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
    text-transform: uppercase;
}

html.is_mobile_view .archive_list .excerpt_wrap .cat {
    padding-left: 0;
}





/*  ---------------------------------
	Archive item: Text
	--------------------------------- */

/* add some space on top of the text if it preceeds date & category */
.archive_list .excerpt_wrap .date_and_cat + .text {
    margin-top: calc((19/16) * var(--type_small,22px));
}

.archive_list .excerpt_wrap .text {
    max-height: calc(((8*19)/19) * var(--type_small_lh,28px)); /* show maximal 8 lines of text */
    margin-bottom: 0!important;
    padding-bottom: 0!important;
    overflow: hidden; 
}

/* hide text excerpt on mobile */
html.is_mobile_view .archive_list .excerpt_wrap .text {
    display: none!important;
}




/* 	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	SHARED: SLIDESHOW (left & right column)
    
    -> the one one the left column gets cloned via .js
    -> adjustments for left and right column further below at the correstponding column
	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


/* used for preloading of Soundcloud and iFrame type */
#content .slide_wrap textarea {
	display: none!important;
}

.flickity-viewport,
.flickity-slider {
    width: 100%;
}

.slide_wrap .slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
    justify-content: flex-start; /* x align */
    flex-flow: column nowrap!important;
	transform: translate3d(0, 0, 0);
}

/* bei Desktop haben die Slides die volle Bildschirmhöhe */
html:not(.is_mobile_view) .slide_wrap .slide {
    height: var(--current100vh,100vh);
}


/* bei Mobile ist die Höhe variabel und so hoch, wie das Bild/Video ist */
html.is_mobile_view .slide_wrap .slide {
    height: auto;
}

/* height of the slider is animated on mobile */
html.is_mobile_view .flickity-viewport {
    transition: height .4s cubic-bezier(0.42, 0, 0.23, 1.01);
}



/*  ---------------------------------
	Slideshow (shared)
    -> Arrow navigation
	--------------------------------- */

.slide_wrap .slide_prev,
.slide_wrap .slide_next {
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
    width: calc(45px * var(--scale)); 
	height: calc(45px * var(--scale));
    display: flex;
	z-index: 5000;
}


/* we don't show navigation arrows on mobile but make a bounce animation there */
html.is_mobile_view .slide_wrap .slide_prev,
html.is_mobile_view .slide_wrap .slide_next {
    display: none!important;
}

/* but show cloned navigation arrows that are used for "iframe", "soundcloud", and "youtube/vimeo"
   because these types swallow the swipe */
html.is_mobile_view .slide_wrap .slide .slide_prev,
html.is_mobile_view .slide_wrap .slide .slide_next {
    display: block!important;
    width: calc(50px/1.8); 
	height: calc(20px/1.8);
    /* place it in the middle of the media, so we need to substract half of the caption height */
    margin-top: calc(((-20px/1.8) / 2) * var(--scale));
    top: calc(50% - (var(--caption_h,0px)/2));
}


/* make click areas bigger */
.slide_wrap .slide_prev::before,
.slide_wrap .slide_next::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -10px;
    right: -10px;
    bottom: -20px;
    background-color: transparent; /* debug rgba(255,0,0,0.5) */
    z-index: -1;
}

.slide_wrap .slide_prev svg,
.slide_wrap .slide_next svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.slide_wrap .slide_prev {
	left: calc(18px * var(--scale));
}

.slide_wrap .slide_next {
	right: calc(18px * var(--scale));
}

.no-touch .slide_wrap .slide_prev:hover rect,
.no-touch .slide_wrap .slide_next:hover rect
{
	fill: white!important;
}


html.is_mobile_view .slide_wrap .slide_prev {
    left: calc(18px * 0.7 * var(--scale));
    margin-top: calc((-20px / 4) * var(--scale));
    width: calc(50px * 0.5 * var(--scale));
    height: calc(20px * 0.5 * var(--scale));
}

html.is_mobile_view .slide_wrap .slide_next {
    right: calc(18px * 0.7 * var(--scale));
    margin-top: calc((-20px / 4) * var(--scale));
    width: calc(50px * 0.5 * var(--scale));
    height: calc(20px * 0.5 * var(--scale));
}




/*  ---------------------------------
	Slideshow (shared)
    -> Caption
	--------------------------------- */

.slide_wrap .caption {
	position: relative;
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
	background-color: var(--orange);
	font-size: calc(20px * var(--body_text_scale));
    text-align: right;
	border-top: 1px solid #000;
    /* padding left is for the (optional) letter in circle which is used for slides */
	padding: calc(12px * var(--body_text_scale)) calc(21px * var(--body_text_scale)) calc(29px * var(--body_text_scale)) calc(60px * var(--body_text_scale));
	transform: translate3d(0, 0, 0);
	transition: transform .4s cubic-bezier(0.42, 0, 0.23, 1.01);
    transition-delay: 0.3s;
    z-index: 2;
}

html:not(.is_mobile_view) .slide_wrap .slide:not(.is-selected) .caption {
    transform: translate3d(0, 100%, 0);
    transition-delay: 0s;
}

html:not(.is_mobile_view) .slide_wrap .caption {
    margin-top: auto;
    position: absolute;
}

/* on mobile the caption has a border below as well */
html.is_mobile_view .slide_wrap .caption {
    padding-bottom: calc(14px * 1.5 * var(--body_text_scale))!important;
    border-bottom: 1px solid #000;
    margin-bottom: 1px; /* to prevent rounding errors that would make the black line disappear */
}

.slide_wrap .caption p {
	margin-bottom: 0;
}

.slide_wrap .caption.has_letter p {
	text-indent: calc(30px * var(--body_text_scale)); /* make space for the circle with the letter */
}


/* circle w/ letter within the caption */
.slide_wrap .letter_circle {
	position: absolute;
	top: calc(10px * var(--body_text_scale));
	left: calc(10px * var(--body_text_scale));
	width: calc(24px * var(--body_text_scale));
	height: calc(24px * var(--body_text_scale));
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	background-color: #000;
	color: #fff;
	border-radius: 50%;
	line-height: calc(1.3 * var(--body_text_scale));
}

.slide_wrap .lazy_img_wrap,
.slide_wrap .archive_mouseover_image { 
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    z-index: 1;
}

.slide_wrap .lazy_img_wrap {
    position: relative!important;
}

/* make the image cover the whole right column if we're not in mobile view */
html:not(.is_mobile_view) .slide_wrap .lazy_img_wrap,
html:not(.is_mobile_view) .slide_wrap .archive_mouseover_image {
    height: var(--current100vh,100vh)!important;
}


/* for later: eine option machen, das man das erste bild in der serie stretcht, dann deckt es die Kachel völlig ab
.slide_wrap img.portrait {
	object-fit: cover;
	width: 100%!important;
	height: 100%!important;
	object-position: center center;
}
*/

.slide_wrap img.portrait,
.slide_wrap img.landscape {
	object-fit: contain;
	width: 100%!important;
	height: 100%!important;
	object-position: center center;
}



/*  ---------------------------------
	Slideshow (shared)
    -> MP3
	--------------------------------- */

html:not(.is_mobile_view) .slide_wrap .slide.type_mp3 .lazy_img_wrap {
    position: absolute!important;
}

html:not(.is_mobile_view) .slide_wrap .slide.type_mp3 .audio_wrap {
    position: absolute;
	top: 50%;
	left: 20%;
	width: 60%;
	height: auto;
    transform: translateY(-50%);
    z-index: 1;
    text-align: center;
}

html:not(.is_mobile_view) .slide_wrap .slide.type_mp3 .audio_player {
    flex: 1;
}

html:not(.is_mobile_view) .slide_wrap .slide.type_mp3 .audio_player audio {
    width: 100%;
}

.slide_wrap .slide.type_mp3 img {
    /* make background images for mp3s always cover the whole area, no matter if they're landscape or portrait */
    object-fit: cover!important;
}


html.is_mobile_view .slide_wrap .slide.type_mp3 .audio_player {
    position: relative;
	left: 0;
	width: 100%;
	height: 0;
    padding-bottom: calc(100%/(16/9));
    z-index: 2;
    text-align: center;
    overflow: hidden;
}

html.is_mobile_view .slide_wrap .slide.type_mp3 .audio_wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

html.is_mobile_view .slide_wrap .slide.type_mp3 .audio_player audio {
    width: 80%;
}


/* make image same dimensions as the audio player */
html.is_mobile_view .slide_wrap .slide.type_mp3 .lazy_img_wrap  {
    position: absolute!important;
    width: 100%!important;
    height: 100%!important;
}






/*  ---------------------------------
	Slideshow (shared)
    -> Video (self hosted)
	--------------------------------- */

html:not(.is_mobile_view) .slide_wrap .video_wrap {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: auto;
    transform: translateY(-50%);
    z-index: 1;
}

html.is_mobile_view .slide_wrap .video_wrap {
	position: relative;
	left: 0;
	width: 100%;
	height: auto;
    z-index: 1;
}




/*  ---------------------------------
	Slideshow (shared)
    -> Video embed (Youtube, Vimeo)
	--------------------------------- */

html:not(.is_mobile_view) .slide_wrap .slide.type_embed .video_content  {
	position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: auto;
    transform: translateY(-50%);
    z-index: 1;
}





/*  ---------------------------------
	Slideshow (shared)
    -> Soundcloud
	--------------------------------- */

html:not(.is_mobile_view) .slide_wrap .slide.type_soundcloud .soundcloud_wrap {
    position: absolute;
    top: 50%;
    left: 0;
	height: 0;
	width: 100%;
	overflow: hidden;
	padding-bottom: 56.25%;
	backface-visibility: hidden;
    transform: translateY(-50%);
}

.slide_wrap .slide.type_soundcloud .soundcloud_wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

html.is_mobile_view .slide_wrap .slide.type_soundcloud .soundcloud_wrap  {
	position: relative;
	height: 0;
	width: 100%;
	overflow: hidden;
	padding-bottom: 56.25%;
	backface-visibility: hidden;
}





/*  ---------------------------------
	Slideshow (shared)
    -> Iframe
	--------------------------------- */

html:not(.is_mobile_view) .slide_wrap .slide.type_iframe .iframe_wrap  {
	position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 0;
    transform: translateY(-50%);
    backface-visibility: hidden;
	overflow: hidden;
    text-align: center;
    z-index: 1;
}

.slide_wrap .slide.type_iframe .iframe_wrap iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

html.is_mobile_view .slide_wrap .slide.type_iframe .iframe_wrap {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    z-index: 1;
}






/*  ---------------------------------
	Slideshow (shared)
    -> Panorama
	--------------------------------- */

.slide_wrap .slide.type_pan {
    overflow: hidden; /* otherwise the panned image would be visible on other slides */
}

.slide_wrap .pano_container {
	position: absolute;
	top: 0;
	left: 0;
	width: auto;
	height: 100%;
}

.slide_wrap .pano_container img {
	/* hide alt text */
	text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
	color: rgba(0,0,0,0);
}

.slide_wrap img.pano {
	width: auto;
	height: 100%;
}

.slide_wrap .mobile_pano {
    display: none;
}

html.is_mobile_view .slide_wrap .mobile_pano {
    display: block;
}

html.is_mobile_view .pano_container {
    /* for later: pano container größer machen und dann automatisch pannen bei mobil */ 
    position: relative!important;
    width: 100%!important;
    height: auto!important;
}

html.is_mobile_view img.pano {
    display: none!important;
}





/*  ---------------------------------
	Slideshow (shared)
    -> Maps
	--------------------------------- */

.slide_wrap .osm_map {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

html.is_mobile_view .slide_wrap .osm_map {
    position: relative;
    height: 100vw; /* make the mobile map square, like the width of the window */
}





/* 	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	-> Date (type: Agenda)
    -> Headline
    -> Short Text (type: Agenda)
    -> Text (type: Page)
    -> Buttons ( either for more texts @ Agenda, or subpage navigation)

    -> Type Agenda: Readmore, Program, Artists, Opening times
    -> Type Agenda: cloned slideshow of the right column, needs to
    be cloned here to place it below the headline
	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

#content .content_left_col {
	width: 50%;
	height: var(--current100vh,100vh);
	overflow-x: hidden;
	overflow-y: scroll;
	overflow: -moz-scrollbars-none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
    /* disable elastic scrolling on iOS */
    -ms-scroll-chaining: none;
    overscroll-behavior: none;
	padding-left: calc(24px * var(--body_text_scale));
	padding-right: calc(14px * var(--body_text_scale));
    padding-top: calc(var(--left_col_top_margin, 121px) + 28px * var(--scale));
    padding-bottom: calc((40/130) * var(--type_big, 130px));
	background-color: #fff;
}

@media only screen and (min-width : 1024px) {
	#content .content_left_col.animated:before{
		content: "";
		position: absolute;
		background-image: url("assets/gfx/logo.svg");
		width: calc(158px * var(--scale));
		height: calc(278px * var(--scale));;
		display:block;
		position:absolute;
		top:0;
		left:0;
		transform: translate(calc(-25px * var(--scale) * -1), calc(-18px * var(--scale) * -1));
		background-size: 100% 100%;
		z-index: 11;
	}
	#content .content_left_col {
		padding-left: calc(158px * var(--body_text_scale));
		padding-top: calc(233px * var(--scale));
		padding-right: calc(33px * var(--body_text_scale));
	}
	#content .content_left_col.archive_list{
		padding-left:0;
		padding-right:0;
		padding-top: calc(var(--left_col_top_margin, 121px) + 0px * var(--scale)) !important;
	}
	#content .content_left_col.archive_list .excerpt_wrap{
		padding-left: calc(158px * var(--body_text_scale));
		padding-right: calc(33px * var(--body_text_scale));
	}

	#content  .archive_list .item{
		padding-top: calc(54px * var(--body_text_scale));
	}

	.archive_list .item .excerpt_wrap .type_big,
	.archive_list .excerpt_wrap .cat{
		padding-left: 0;
	}

	.archive_list .item .excerpt_wrap .type_big{
		font-size: calc(92px * (1902px / 100vw));
		font-size: min(92px,calc( 92px * (100vw / 1920px) * (100vw / 1920px)));
		line-height: 1.2;
	}
	
	#content .content_left_col .no_indent,
	#content .agenda_text_navigation
	{
		margin-left: calc((158px - 28px) * var(--body_text_scale) * -1);
	}
	#content .content_left_col .no_indent{
		font-family: adobe-garamond-pro, "Adobe Garamond", Garamond, serif;
	}

	#content .agenda_text_navigation{
		padding: 0 calc(37px * var(--scale));
        gap: calc(5% * var(--scale));
		justify-content: space-between;
        display: flex;
	}

	.editor_content p{
		text-indent: 0;
	}
	.all_indent {
		text-indent: 0 !important;
		padding-left: 0;
	}
}

/* add this class later via .js, otherwise it'd animate on initial page load which looks ugly */
#content .content_left_col.animated {
    transition: padding-top .6s ease-in-out;
}

body.page-template-page-template-archive #content .content_left_col {
    padding-top: calc(var(--left_col_top_margin, 121px) + 14px * var(--scale));
}


.edit_link {
    position: absolute;
    background: silver;
    color: white !important;
    right: 0;
    top: 0;
    font-size: 12px;
    border-radius: 500em;
    padding: 1px 5px;
    line-height: 1.2;
}



/* 	-------------------------------------------------
    Mobile view: Content of the left col 
    -> text
    -> cloned slideshow
    ------------------------------------------------- */

html.is_mobile_view	#content .content_left_col {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #000;
    padding-left: var(--content_padding,18px);
    padding-right: var(--content_padding,18px);
    padding-top: calc( 108px * var(--scale) + var(--ml_height)); /* ml_height = #mobile_logo height*/
    
    /* distance to the bottom (AGENDA) = distance of text after the slideshow
       40px*var(--type_buttons_scale)*1.5 = height of the AGENDA header */
    padding-bottom: calc(40px*var(--scale) + 40px*var(--type_buttons_scale)*1.5);
}







/*  -----------------------------------------------------------------
	Date above the title
    Only for items of AGENDA
	----------------------------------------------------------------- */

.agenda__date  {
	width: auto;
	margin: 0;
    margin-bottom: calc(3px * var(--scale));
    display: flex;
    flex-flow: row nowrap;
}

.agenda__date_sep {
    display: inline-flex;
    margin: 0 calc(8px * var(--body_text_scale));
    
}

#content .content_left_col .main_section_headline h2 {
	margin-bottom: calc(64px * var(--scale));
}



/*  -----------------------------------------------------------------
	LEFT COL: Headline
	----------------------------------------------------------------- */

#content .content_left_col .main_section_headline {
    margin-bottom: calc(40px * var(--scale));
}

html.is_mobile_view #content .content_left_col .main_section_headline {
    margin-top: calc(-16px * var(--scale)); /* move headline (= date ) up a bit on mobile */
}

#content .content_left_col .main_section_headline p {
    margin-bottom: 0!important;
}




/*  -----------------------------------------------------------------
	LEFT COL, TYPE AGENDA: Cloned slideshow
    ( needs to be cloned to be below the headline )
	----------------------------------------------------------------- */

html:not(.is_mobile_view) #content .content_left_col .mobile_slideshow {
    display: none;
}

html.is_mobile_view .content_left_col .mobile_slideshow {
    display: block;
    margin-bottom: calc(40px*var(--scale));
    width: calc(100% + (2 * var(--content_padding,18px)));
    margin-left: calc(-1 * var(--content_padding,18px));
}
    
.content_left_col .mobile_slideshow .slide_wrap {
    position: relative!important;
    height: auto!important;
}

.content_left_col .slide_wrap {
    /* get rid of the background color the slideshow had at the right side, because it causes bleeding/rounding errors
       we don't need it here as all images have a variable height and the slideshow adjusts to that */
    background-color: transparent!important; 
}

.content_left_col .slide_wrap .letter_box {
    /* for later: die box mit dem Buchstaben oben rechts verstecken bei mobil oder besser nicht?
       jetzt ist sie versteckt */
	display: none!important;
}

.content_left_col .slide_wrap .lazy_img_wrap {
    position: relative!important;
    height: auto!important;
    display: flex;
    /* BG of the lazy image instead of the whole slide with the bg color */
    background-color: var(--bg_color)!important;
}

.content_left_col .slide_wrap img.portrait {
    object-fit: inherit!important;
    height: auto!important;
}

.content_left_col .lazy_img_wrap img {
    position: relative!important;
}

.content_left_col .slide_wrap .slide {
    height: auto!important;
}

/* bounce the slideshow on mobile one time to show that we can slide, 
   but only if we have more that one slide -> .is-draggable */
.content_left_col .flickity-enabled.is-draggable .flickity-slider {
    animation-name: bounce_left;
    animation-duration: 0.9s;
    animation-delay: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: none;
    animation-direction: normal;
    animation-play-state: running;
}

@keyframes bounce_left {
	0%{
		margin-left: 0;
		animation-timing-function: ease-out;
	}
	30%{
		margin-left: -40px;
		animation-timing-function: ease-in-out;
	}
	70%{
		margin-left: 10px;
		animation-timing-function: ease-in;
	}
	100%{
		margin-left: 0;
		animation-timing-function: ease-out;
	}
}






/*  -----------------------------------------------------------------
	LEFT COL: Text
	----------------------------------------------------------------- */

#content .content_left_col .text,
#content .content_left_col .text_part {
	padding-bottom: calc(40px * var(--body_text_scale));
    user-select: text!important;
}

html.#content .content_left_col .text,
html.is_mobile_view #content .content_left_col .text_part {
    padding-bottom: calc(24px * var(--body_text_scale));
}

#content .content_left_col .short_text_label {
	text-transform: uppercase;
	font-family: adobe-garamond-pro, "Adobe Garamond", Garamond, serif;
    text-indent: 0!important;
	padding-left: calc(40px * var(--body_text_scale));
    margin-bottom: 0;
    position: absolute;
    transform: translate(8%, -119%);
}




/*  -----------------------------------------------------------------
	LEFT COL, TYPE AGENDA: Text navigation
	----------------------------------------------------------------- */

#content .agenda_text_navigation {
    margin-top: calc(80px * var(--body_text_scale));
}

html.is_mobile_view #content .agenda_text_navigation {
    margin-top: calc(40px * var(--body_text_scale));
}

html.is_mobile_view #content .agenda_text_navigation .button_white_plain {
    font-size: calc(20px * var(--body_text_scale));
}
#content .agenda_textpart {
    margin-top: calc(24px * var(--body_text_scale));
}

#content .opening_times{
    margin-top: calc(24px * var(--body_text_scale));
	font-size: calc(20px * var(--body_text_scale));
}

#content .agenda_textpart {
    padding-bottom: calc(40px * var(--body_text_scale));
}

#content .opening_times_headline {
    margin-bottom: calc((16/16) * var(--type_small,22px));
    /* text-indent: 0!important; */
	/* padding-left: var(--text_indent,100px); */
	margin-bottom: 0;
	padding-left: 0;
}

#content .agenda_textpart[data-id="artists"] {
    text-indent: 0!important;
	/* padding-left: var(--text_indent,100px); */
}




/*  -----------------------------------------------------------------
	LEFT COL: Subpage navigation Buttons after the text 
    ( in case Option "Show the navigation like this: As Buttons" 
    selected in the backend )
	----------------------------------------------------------------- */

#content .content_left_col .subpage_nav_buttons__text_before {
    padding-left: var(--text_indent,100px);
    margin-bottom: calc((20/16) * var(--type_small,22px));
}

#content .content_left_col .subpage_nav_buttons {
    margin-bottom: calc(1px + (20/16) * var(--type_small,22px)); /* add 1px because the buttons have -1px bottom margin */
}





/*  -----------------------------------------------------------------
	LEFT COL: Other buttons after the text
	----------------------------------------------------------------- */

/* left column: buttons on bottom 
    for later: vielleicht sticky machen? */
#content .content_left_col .buttons_bottom {
    margin-top: calc(24px * 3 * var(--body_text_scale)); /* for later: nochmal checken */
	display: flex;
    flex-flow: column wrap;
}

#content .content_left_col .buttons_bottom .line {
	display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}







/* 	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	CONTENT RIGHT COL

    -> Slideshow with images, videos, text
	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

#content .content_right_col {
	width: 50%;
	height: 100%;
	overflow: hidden;
}

/* bei Mobil ist die Slideshow in der linken Spalte unter der Headline, 
   von daher wird die rechte Spalte hier überflüssig und unsichtbar */
html.is_mobile_view .content_right_col {
    display: none!important;
}

#content .content_right_col .slide_wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    background-color: var(--bg_color);
    /* transition: background-color .2s linear; */
}

#content .content_right_col .slide_wrap_inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

html:not(.is_mobile_view) #content .content_right_col .slide_wrap .slide.extra_padding {
	padding-left: calc(134 / 1920 * 100vw);
	padding-right: calc(134 / 1920 * 100vw);
	box-sizing: border-box;
}






/*  -----------------------------------------------------------------
	RIGHT COL:  Slideshow
    -> box with letter on top right
	----------------------------------------------------------------- */

.slide_wrap .letter_box {
	position: absolute;
	top: 0;
	right: 0;
	width: calc(49px * var(--body_text_scale)); /* for later: check mobile */
	height: calc(49px * var(--body_text_scale));
	display: flex;
	justify-content: center;
    align-items: center;
	background-color: var(--orange);
	border: 1px solid #000;
	line-height: 1!important;
    padding-bottom: calc(5px * var(--body_text_scale));
    z-index: 20;
}













/* 	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	Leaflet/Maps customisations
	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* Greyscale, not used for now
.leaflet-tile-container {
    filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale");
    filter: gray;
    -webkit-filter: grayscale(100%);
}
*/

.maps_marker {
    width: calc(162px * var(--maps_marker_scale,1))!important;
	height: calc(126px * var(--maps_marker_scale,1))!important;
    margin-left: 0!important;
    margin-top: 0!important;
}

.maps_marker_inner {
    position: absolute;
    width: 100%;
	height: 100%;
    left: 0;
    top: 0;
    transform: translate3d(-50%,0%,0);
}

.maps_marker_inner_inner {
    position: absolute;
    width: 100%;
	height: 100%;
    left: 0;
    top: 0;
    background-image: url("assets/gfx/shedhalle_marker.svg");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
}



/* maps: zoom controls */
.leaflet-control-zoom.leaflet-bar {
    width: auto;
}


/* maps: credits */
.leaflet-control-container {
	width: 100%;
	height: 100%;
    bottom: 3px;
    right: 5px;
}

.leaflet-control-container .leaflet-control-attribution {
    font-family:  helvetica-lt-pro,"Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
    font-size: 8px!important;
    line-height: 1.2;
    background: rgba(252, 251, 235, 1);
    padding: 2px;
}


.leaflet-container a {
	color: #ccc;
}

.leaflet-control-attribution {
    width: auto;
	color: #ccc;
}


/* maps: credits */
.leaflet-control-container {
	width: 100%;
	height: 100%;
}

.leaflet-container .leaflet-control-attribution {
	background: rgba(255, 255, 255, 1);
}

.leaflet-container a {
	color: #ccc;
}

.leaflet-control-attribution {
    width: auto;
	color: #ccc;
}


/* maps: zoom controls */
.leaflet-control-zoom.leaflet-bar {
    width: auto;
}


/* maps: credits */
.leaflet-control-container {
	width: 100%;
	height: 100%;
    bottom: 3px;
    right: 5px;
}

.leaflet-control-container .leaflet-control-attribution {
    font-family:  helvetica-lt-pro,"Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
    font-size: 8px!important;
    line-height: 1.2;
    background: rgba(252, 251, 235, 1);
    padding: 2px;
}


.leaflet-container a {
	color: #ccc;
}

.leaflet-control-attribution {
    width: auto;
	color: #ccc;
}




/*  -----------------------------------------------------------------
	Leaflet.GestureHandling mofified !
	https://github.com/elmarquis/Leaflet.GestureHandling/
	----------------------------------------------------------------- */

.leaflet-container::after {
	font-family:  helvetica-lt-pro,"Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
	font-size: calc(22px * var(--body_text_scale));
	animation: leaflet-gestures-fadein 0.8s backwards;
    color: #000;
	line-height: 1.17;
	align-items: center;
	padding: 30px;
	position: absolute;
	text-align: center;
	transition: opacity .3s linear;
	opacity: 0;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgb(50,255,33, 0.9);
	pointer-events: none;
	z-index: 461;
    display: flex;
    visibility: hidden;
}

.leaflet-container.can_show_gesture_handling::after {
	visibility: visible;
}


html[lang="de-DE"] .leaflet-container::after {
    content: 'Verschieben der Karte mit zwei Fingern';
}

html[lang="en-US"] .leaflet-container::after {
    content: 'Move the map with two fingers';
}

.leaflet-gesture-handling-touch-warning::after {
	opacity: 1;
}










/* 	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	PAST / FUTURE navigation
	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

#button_future {
	position: fixed;
	z-index: 10;
	top: -1px;
	left: 50%; /* overwritten by .js */
	width: calc(176px * var(--scale));
	height: calc(138px * var(--scale));
	transform: translate3d(0, 0, 100px); /* 100px -> safari bug */
	display: none;
}

#button_future_inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}

.no-touch #button_future:hover g.fill {
	opacity: 1!important;
}

#button_past {
	position: fixed;
	z-index: 10;
	bottom: -1px;
	left: 50%; /* overwritten by .js */
	width: calc(176px * var(--scale));
	height: calc(138px * var(--scale));
	transform: translate3d(0, 0, 100px); /* 100px -> safari bug */
	display: none;
}

#button_past_inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}
	
.no-touch #button_past:hover g.fill {
	opacity: 1!important;
}

#button_future .mobile,
#button_past .mobile {
	display: none;
}


/*  -----------------------------------------------------------------
	Mobile view: FUTURE and PAST buttons

    for later: noch besser auf 320px
	----------------------------------------------------------------- */

html.is_mobile_view #button_future .mobile,
html.is_mobile_view #button_past .mobile {
	display: block;
}

html.is_mobile_view #button_future .desktop,
html.is_mobile_view #button_past .desktop {
	display: none!important;
}

html.is_mobile_view #button_future {
	top: calc(var(--ml_height) * 0.75);
	left: auto!important;
	right: 0;
	width: calc(30px * var(--mob_future_past_scale));
	height: calc(136px * var(--mob_future_past_scale));
	z-index: 4900;
}

html.is_mobile_view #button_past {
	bottom: calc(20px + (40px*var(--type_buttons_scale)*1.5)); /* 10px + AGENDA header height */
	left: auto!important;
	right: 0;
	width: calc(30px * var(--mob_future_past_scale));
	height: calc(136px * var(--mob_future_past_scale));
	z-index: 4900;
}


@media only screen and (max-width : 640px) { 
    html.is_mobile_view #button_future {
        top: calc(var(--ml_height) * 0.9);
    }
}


@media only screen and (max-width : 500px) { 
    html.is_mobile_view #button_future {
        top: 76px;
    }
    
    html.is_mobile_view #button_past {
        bottom: 58px;
       
    }
}










/* 	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	Animated Logo for Desktop  S H E D H A L L E 
    [www]
	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* we need this with the overflo hidden, otherwise it'd push the viewport in iPad Pro to more width */
#worm_container {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	pointer-events: none;
    overflow: hidden;
    z-index: 5010;
}

.worm_letter {
	position: absolute;
	top: -200px;
	left: -200px;
	width: calc(62px * var(--scale)); /* overwritten by .js */
	height: calc(62px * var(--scale)); /* overwritten by .js */
	z-index: 5010;
	pointer-events: none;
}

html.is_mobile_view .worm_letter {
    display: none!important;
}

.worm_letter svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* svg to draw the paths on */
#ap_w_svg {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: -1;
	opacity: 0;
	pointer-events: none;
    overflow: hidden;
}

/* show the paths for debug reasons */
html.debug__worm #ap_w_svg {
	z-index: 1;
	opacity: 1;
}

#ap_w_path1 {
	stroke-width: 1px;
	stroke: #88ce02;
	fill: none;
}

#ap_w_path2 {
	stroke-width: 3px;
	stroke: #F20CBE;
	fill: none;
}

#ap_w_svg circle {
	fill: white;
}

#ap_w_svg circle.red {
	fill: red;
}