@charset "UTF-8";

/********************************************************************************************************************************************************************************

	ALL STYLES BY:
	outline4.ch

*********************************************************************************************************************************************************************************/

:root {
	/*
		grid
	*/
	--grid-gap: 34px;

	/*
		page widths (+100)
	*/
	--site-width: 2500px;
	--page-width: 2000px;
	--claim-width: 1100px; /* 1200px */
	--content-width: 1400px;
	--page-padding: 40px;
	--ident-right: 60px;

	/*
		page heights
	*/


	/*
		colors
	*/
	--color-brand: #25D491;
	--color-brand-hover: #81e1bc;
	--color-month: #AA1BFF;
	--color-veranstaltung: #D183FF;
	--color-veranstaltung-hover: #EDCDFF;

	--color-permanent: #FF4695;
	--color-permanent-hover: #FFC5DE;

	--color-BNT: #F5E400;
	--color-BNT-hover: #FFFABC;
	--color-school: #0085DE;
	--color-school-hover: #8CC6EC;

	--color-gray: #575756;
	--color-light-gray: #DFDEDE;
	--color-text: #000;
	--color-title: #000;

	--color-link: var(--color-text);
	--color-link-hover: var(--color-brand);

	--color-body-background: #fff;
	--color-darker-body-background: #f8f8f8;

	--color-info: #F10077;

	--color-white: #fff;
	--color-line: #000;
	--color-line-active: var(--color-brand);
	--color-error: #F10077;
	--color-success: #187571;

	/*
		font families
	*/
	--font-regular-family: "GT Walsheim Condensed Medium", sans-serif;
	--font-regular-oblique-family: "GT Walsheim Condensed Medium Oblique", sans-serif;
	--font-title-family: "GT Walsheim Condensed Bold", sans-serif;
	--font-bold-family: "GT Walsheim Condensed Bold", sans-serif;
	--font-bold-oblique-family: "GT Walsheim Condensed Bold Oblique", sans-serif;

	/*
		font sizes (with scaling)
	*/
	--font-scale: 1;
	--font-scale-small: 1;
	--body-letter-spacing: 0.01em;

	--font-size: calc(34px * var(--font-scale));
	--font-line-height: calc(43px * var(--font-scale));

	--body-font-size: var(--font-size); /* general */
	--body-margin-height: var(--font-line-height); /* general vertical */
	--body-margin-size: var(--font-line-height); /* general vertical */
	--font-intro-size: var(--font-size); --font-intro-line-height: var(--font-line-height); /* main nav */

	--font-header-title-size: 28px; --font-header-title-lineheight: 34px;

	--font-cal-listing-title-size: calc(42px * var(--font-scale)); --font-cal-listing-title-line-height: calc(52px * var(--font-scale)); /* calendar listing */
	--event-day-h4-adjustment: 0; /* -4px */
	--font-cal-listing-meta-size: calc(28px * var(--font-scale)); --font-cal-listing-meta-line-height: calc(42px * var(--font-scale)); /* calendar listing */

	--font-filter-title-size: calc(27px * var(--font-scale-small)); --font-filter-title-line-height: calc(32px * var(--font-scale-small)); /* filter titles etc. */
	--font-filter-radio-size: calc(25px * var(--font-scale-small)); --font-filter-radio-line-height: calc(27px * var(--font-scale-small)); /* radio / checkboxes */
	--font-filter-radio-small-size: 19px; --font-filter-radio-small-line-height: 27px; /* radio veranstalter */

	--font-cal-detail-title-size: calc(50px * var(--font-scale)); --font-cal-detail-title-line-height: calc(61px * var(--font-scale)); /* calendar detail */
	--font-cal-detail-claim-size: calc(33px * var(--font-scale)); --font-cal-detail-claim-line-height: calc(43px * var(--font-scale)); /* calendar detail */
	--font-cal-detail-desc-size: calc(28px * var(--font-scale)); --font-cal-detail-desc-line-height: calc(38px * var(--font-scale)); /* calendar detail */
	--font-cal-detail-einfachgesagt-size: calc(33px * var(--font-scale)); --font-cal-detail-einfachgesagt-line-height: calc(43px * var(--font-scale)); /* calendar detail */

	--font-cal-detail-info-size: calc(28px * var(--font-scale)); --font-cal-detail-info-line-height: calc(35px * var(--font-scale)); /* calendar detail */

	--font-popup-title-size: calc(26px * var(--font-scale)); --font-popup-title-line-height: calc(35px * var(--font-scale)); /* Newsletter popup */
	--font-popup-form-size: calc(23px * var(--font-scale-small)); --font-popup-form-line-height: calc(28px * var(--font-scale-small)); /* Newsletter popup */
	--font-popup-size: calc(19px * var(--font-scale-small)); --font-popup-line-height: calc(28px * var(--font-scale-small)); /* Newsletter popup */

	--font-sub-nav-size: calc(39px * var(--font-scale));  --font-sub-nav-line-height: calc(48px * var(--font-scale)); /* Schulen 1. Kategorie titel | informationen | messages  */
	--font-sub-sub-nav-size: calc(35px * var(--font-scale)); --font-sub-sub-nav-line-height: calc(44px * var(--font-scale)); /* Schulen 2. Kategorie titel | informationen | messages  */
	--font-sub-detail-size: calc(25px * var(--font-scale)); --font-sub-detail-line-height: calc(33px * var(--font-scale)); /* Schulen | informationen Lauftext */
	--font-sub-text-size: var(--font-size); --font-sub-text-line-height: var(--font-line-height); /* Schulen | informationen LaufText */

	/* no scaling */
	--font-small-size: 23px; --font-small-line-height: 28px;
	--font-tiny-size: 19px; --font-tiny-line-height: 22px;

	/* individual scaling */
	--font-nav-size: 34px; --font-nav-line-height: 43px; /* main nav */

	--font-h1-size: 50px; --font-h1-line-height: 61px;
	--font-h2-size: 50px; --font-h2-line-height: 61px;
	--font-h3-size: 42px; --font-h3-line-height: 53px;

	/*
		Transformation
	*/
	--ease-speed: 0.5s;

	--transformation: 1.03;
	--transition: all .3s ease-out;
	--transform-slide-fade: transform 0.5s ease-out, opacity 0.5s ease-out;

	/*
		Design
	*/
	--text-decoration-thickness: 4px;
	--text-decoration-offset: 4px;
	--border-thickness: 6px;
	--filter-right-size: 433px;
	--header-top-height: 160px; /* 73px; */



	/*
		Forms
	*/
	--line-color: #9B9B9B;
	--input-border-thickness: 3px;
	--input-border: var(--input-border-thickness) solid var(--line-color);
	--input-border-color: var(--line-color);

	--select-padding: 8px 10px;
	--input-border-radius: 0px;
	--input-background-color: #f4f4f4;
	--input-padding: calc(var(--body-margin-height) / 4) calc(var(--body-margin-height) / 2);

	/*
		Decoration
	*/
	--box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

	/*
		Breakpoints:
		1200px (xlarge)
		850px (large)
		600px (medium)
		500px (small)
		380px (xsmall)
	*/
}


@media screen and (max-width: 1000px) {
	:root {
		--grid-gap: 28px;
		--page-padding: 20px; --ident-right: 0px; --header-top-height: 50px;
		--font-scale: 0.8;
		--font-scale-small: 0.92;
		--font-nav-size: 28px; --font-nav-line-height: 37px; /* main nav */
	}
	.content_width { width: 100%; margin-left: auto; }
	.sticky-inner { width: 100%; margin-left: auto; }
}


@media screen and (max-width: 680px) {
	:root {
		--grid-gap: 23px;

		--font-size: 23px;
		--font-line-height: 29px;
		--body-margin-height: 23px;

		--font-header-title-size: 18px; --font-header-title-lineheight: 22px;

		--font-cal-listing-title-size: 20px; --font-cal-listing-title-line-height: 24px; /* calendar listing */
		--event-day-h4-adjustment: 0;
		--font-cal-listing-meta-size: 16px; --font-cal-listing-meta-line-height: 21px; /* calendar listing */

		--font-filter-title-size: 16px; --font-filter-title-line-height: 21px; /* filter titles etc. */
		--font-filter-radio-size: 16px; --font-filter-radio-line-height: 21px; /* radio / checkboxes */
		--font-filter-radio-small-size: 16px; --font-filter-radio-small-line-height: 21px; /* radio veranstalter */

		--font-cal-detail-title-size: 26px; --font-cal-detail-title-line-height: 35px; /* calendar detail */
		--font-cal-detail-claim-size: 20px; --font-cal-detail-claim-line-height: 26px; /* calendar detail */
		--font-cal-detail-desc-size: 20px; --font-cal-detail-desc-line-height: 26px; /* calendar detail */
		--font-cal-detail-einfachgesagt-size: 23px; --font-cal-detail-einfachgesagt-line-height: 29px; /* calendar detail */

		--font-cal-detail-info-size: 20px; --font-cal-detail-info-line-height: 26px; /* h3 calendar detail */

		--font-sub-nav-size: 26px; --font-sub-nav-line-height: 35px; /* schulen 1. Kategorie titel | informationen | messages  */
		--font-sub-sub-nav-size: 23px; --font-sub-sub-nav-line-height: 29px;  /* schulen 2. Kategorie titel | messages  */
		--font-sub-detail-size: 20px; --font-sub-detail-line-height: 26px; /* Schulen | informationen Detail Text */
		--font-sub-text-size: 21px; --font-sub-text-line-height: 27px; /* Schulen | informationen Detail Text */

		--font-small-size: 16px; --font-small-line-height: 21px;
		--font-tiny-size: 16px; --font-tiny-line-height: 21px;

		/* individual scaling */
		--font-nav-size: 23px; --font-nav-line-height: 32px;

		--text-decoration-thickness: 2px;
		--text-decoration-offset: 2px;
		--border-thickness: 4px;

		--input-border-thickness: 2px;
		--font-nav-size: 23px; --font-nav-line-height: 32px; /* main nav */
	}
}

@media screen and (max-width: 680px) {
	:root {
		--font-nav-size: 23px; --font-nav-line-height: 32px;
	}
}

/* Brand Colors
------------------------------------------------------------------------------------------------------- */
body#jahreskalender { --color-brand: #25D491; --color-link-hover: #25D491; --color-brand-hover: #79d8b4; }
body#bnt { --color-brand: #F5E400; --color-link-hover: #000;  --color-brand-hover: #f5efa2; }
body#schulangebote { --color-brand: #0085DE; --color-link-hover: #0085DE; --color-brand-hover: #a8d1ed; }
body#informationen { --color-brand: #F10077; --color-link-hover: #F10077;  --color-brand-hover: #fccee5; }



/* General Semantic Tags
------------------------------------------------------------------------------------------------------- */
nav h1 { display: none; } /* Being friendly to newsreaders */

/* Set to 100%
------------------------------------------------------------------------------------------------------- */
html, body { }

/* Body
------------------------------------------------------------------------------------------------------- */
body {
	margin: 0;padding: 0;
	font-family: var(--font-regular-family);
	font-size: var(--font-size); line-height: var(--font-line-height);
	letter-spacing: var(--body-letter-spacing);
	color: var(--color-text);
	background: var(--color-body-background);
	transition: all 0.3s ease-in-out;

	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

#wrapper { position: relative; width: 100%; }

body#mein-profil { font-size: var(--font-small-size); line-height: var(--font-small-line-height); }

/* Widths
------------------------------------------------------------------------------------------------------- */

.site_width { position: relative; width: 100%; max-width: var(--site-width); }

.page_width {
	position: relative; width: calc(100% - var(--ident-right)); max-width: var(--page-width); margin-left: var(--ident-right); margin-right: auto;
	padding-left: var(--page-padding); padding-right: var(--page-padding);
}

	.page_width .page_width,
	.page_width .content_width { padding: 0; margin: 0; width: auto; max-width: auto; }

.content_width {
	position: relative; width: calc(100% - var(--ident-right)); max-width: calc(var(--content-width) + 2 * var(--page-padding)); margin-left: var(--ident-right); margin-right: auto;
	padding-left: var(--page-padding); padding-right: var(--page-padding);
}
	.content_width .content_width { padding: 0; margin: 0; width: auto; max-width: auto; }

.claim_width {
	position: relative; width: calc(100% - var(--ident-right)); max-width: calc(var(--claim-width) + 2 * var(--page-padding)); margin-left: var(--ident-right); margin-right: auto;
	padding-left: var(--page-padding); padding-right: var(--page-padding);
}
	.claim_width .claim_width { padding: 0; margin: 0; width: auto; max-width: auto; }


.content_max_width { max-width: var(--content-width); margin-left: auto; margin-right: auto; }
.page_max_width { max-width: var(--page-width); margin-left: auto; margin-right: auto; }


/* Headings & Formatting
------------------------------------------------------------------------------------------------------- */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 { color: var(--color-title); font-style: normal; font-weight: normal; }

h1, .h1 { font-family: var(--font-title-family); }
h2, .h2 { font-family: var(--font-regular-family); }
h3, .h3 { font-family: var(--font-title-family); }
h4, .h4 { font-family: var(--font-title-family); }



/* Links
------------------------------------------------------------------------------------------------------- */
a, .link { color: inherit; text-decoration: none; }
a:hover, .link:hover, a:focus, a:active { color: inherit; text-decoration: none; }
/* Image links remove the Magic border below images (another method would be to make images display as block) */
a img, a:hover img { border: none; text-decoration: none; vertical-align: bottom; }


/* Bold
------------------------------------------------------------------------------------------------------- */
b, strong  { font-family: var(--font-bold-family); }
i { font-family: var(--font-regular-oblique-family); }
em { font-family: var(--font-bold-oblique-family); }

/* Auswahl
------------------------------------------------------------------------------------------------------- */
::selection {
  background: var(--color-brand);
  color: #fff;
}

/* Main Format ! no vertical rhythem !
------------------------------------------------------------------------------------------------------- */
.main_format img { display: inline-block; vertical-align: bottom; }

.main_format a,
.small_format a {
	color: var(--color-link);
	text-decoration: underline;
	text-decoration-color: var(--color-brand);
	text-decoration-thickness: var(--text-decoration-thickness);
	text-decoration-offset: var(--text-decoration-offset); text-underline-offset: var(--text-decoration-offset);
	transition: all 0.3s ease-in-out;
}
	.main_format a:hover,
	.small_format a:hover {
		text-decoration: underline;
		text-decoration-thickness: var(--text-decoration-thickness);
		text-decoration-offset: var(--text-decoration-offset); text-underline-offset: var(--text-decoration-offset);
		color: var(--color-link-hover);
	}

.main_format h1 { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }

	.main_format h1 a { color: var(--color-title); text-decoration: none; border-bottom: none; }
	.main_format h1 a:hover { color: var(--color-brand); text-decoration: none; border-bottom: none; }
	.main_format a h1, .main_format a h2, .main_format a h3, .main_format a p { text-decoration: none; border-bottom: none; }


.main_format h1, .main_format h2, .main_format h3, .main_format h4 { font-family: var(--font-title-family); }

.main_format table { }
.main_format td, .main_format th {  text-align: left; padding-right: 15px; vertical-align: top;}
.main_format th { font-weight: normal; font-family: var(--font-title-family); }
.main_format td:last-child, .main_format th:last-child { padding-right: 0px; }


.main_format p.small, .main_format small { font-size: var(--font-small-size); line-height: var(--font-small-line-height); }


.main_format ul {  list-style-type: none; }
.main_format ul li:before { content: '\2014  '; position: relative; margin-left: -30px; }
.main_format li { position: relative; list-style-position: inside;  margin-left: 30px;}

.main_format ul.errors { }
.main_format ul.errors li:before { content: '⚠ '; position: relative; }


figcaption { font-size: var(--font-small-size); line-height: var(--font-small-line-height); }



/* Small Format
------------------------------------------------------------------------------------------------------- */

.small_format {
	font-family: inherit; font-size: var(--font-small-size)!important; line-height: var(--font-small-line-height)!important;
	margin-top: var(--font-small-line-height);
}

.small_format input[type="text"],
.small_format input[type="email"],
.small_format input[type="submit"] {
	padding: calc(var(--body-margin-height) / 2);
	padding-bottom: calc(var(--body-margin-height) / 2 - 4px);
}

.tiny_format {
	font-family: var(--font-regular-family); font-size: var(--font-tiny-size); line-height: var(--font-tiny-line-height);
	margin-top: var(--font-tiny-line-height);
}

.tiny_format h2 { font-size: var(--body-font-size); line-height: var(--body-margin-height), }


/* vertical rythem
------------------------------------------------------------------------------------------------------- */
.block p,
.block h1,
.block h2,
.block h3,
.block figure,
.block table,
.block iframe,

.vertical_format p,
.vertical_format h1,
.vertical_format h2,
.vertical_format h3,
.vertical_format ul,
.vertical_format figure,
.vertical_format table,
.vertical_format iframe {
	margin-top: var(--body-margin-height);
}

.small_vertical_format p,
.small_vertical_format h1,
.small_vertical_format h2,
.small_vertical_format h3,
.small_vertical_format ul,
.small_vertical_format figure,
.small_vertical_format table,
.small_vertical_format iframe {
	margin-top: var(--font-small-line-height);
}

/*

	titel gefolgt von text

*/
.block_titel + .block_text > p:first-child { margin-top: 0; }
h1 + p,
h2 + p,
h3 + p  { margin-top: 0px!important; }


/* HR horizontal rule
------------------------------------------------------------------------------------------------------- */
/* hr { background-color: var(--color-text); border-width: 0; color: var(--color-text); height: 1px; line-height: 0; margin-bottom: 22px; text-align: center; width: 100%; } */
/* hr::after { clear: both; content: ""; display: table; } */

/* Grid with fractions col-1-2 etc.
------------------------------------------------------------------------------------------------------- */
.grid {
		display: grid;
		grid-template-columns: repeat(12, 1fr); /* Define 12 columns by default */
		gap: 30px;
	}

	.grid.center_vertical { align-items: center; /* Vertikale Zentrierung */ }
	.grid.big_spacing { gap: calc(var(--body-margin-height) * 2); }

	.grid .grid { gap: 30px; }

	/* Einstellungen für jede Spalte */
	.column {
		grid-column: span var(--span);
	}

	@media (max-width: 750px) {
		.grid {
			grid-template-columns: repeat(4, 1fr); /* Change to 4 columns at 800px */
			margin-top: 0;
		}

		.col-1-2.image, .col-1-2.reverse_order_on_mobile { order: -1; /* Bild wird vor Text angezeigt */ }

		.column[data-span="6"] {
			grid-column: span 2; /* 50% width for span 6 (spanning 2 out of 4 columns) */
		}
		.column[data-span="4"] {
			grid-column: span 4; /* Full width for span 4 */
		}
	}

	@media (max-width: 600px) {
		.column[data-span="6"] {
			margin-top: 0;
			grid-column: span 4; /* 50% width for span 6 (spanning 2 out of 4 columns) */
		}
	}

	.col-1-1 { grid-column: span 12; }
	.col-1-2 { grid-column: span 6; }
	.col-1-3 { grid-column: span 4; } /* thirds */
	.col-2-3 { grid-column: span 8; }
	.col-1-4 { grid-column: span 3; } /* quarters */
	.col-2-4 { grid-column: span 6; }
	.col-3-4 { grid-column: span 9; }

	@media (max-width: 1000px) {
		.col-1-4 { grid-column: span 6; } /* quarters */
		.col-2-4 { grid-column: span 12; }
		.col-3-4 { grid-column: span 9; }
	}

	@media (max-width: 700px) {
		.col-1-1 { grid-column: span 12; }
		.col-1-2 { grid-column: span 6; }
		.col-1-3 { grid-column: span 6; } /* thirds */
		.col-2-3 { grid-column: span 6; }
		.col-1-4 { grid-column: span 3; } /* quarters */
		.col-2-4 { grid-column: span 6; }
		.col-3-4 { grid-column: span 9; }
	}

	@media (max-width: 500px) {
		.col-1-1 { grid-column: span 12; }
		.col-1-2 { grid-column: span 12; }
		.col-1-3 { grid-column: span 12; } /* thirds */
		.col-2-3 { grid-column: span 12; }
		.col-1-4 { grid-column: span 6; } /* quarters */
		.col-3-4 { grid-column: span 6; }
	}



/* google captcha v3
------------------------------------------------------------------------------------------------------- */
.grecaptcha-badge { z-index: 99; }
.grecaptcha-badge iframe { margin-top: 0; }


/* Design Elements
------------------------------------------------------------------------------------------------------- */
.border_top_bottom {
	border-top: var(--border-thickness) solid #000; border-bottom: var(--border-thickness) solid #000;
	margin-bottom: calc(-1 * var(--border-thickness));
}

body.hijack, body.no-scroll  { overflow: hidden; overflow-y: scroll; }
body.really-no-scroll { overflow: hidden; }

/* Header */
/* ---------------------------------------------------------------------------------------------------- */
#header { width: 100%; }

	#header-top { height: var(--header-top-height); }
	#header-title {
		display: flex;
		align-items: flex-end;    /* unten zentrieren */
		justify-content: center;
		z-index: 1;
		background: #fff;
		position: relative; top: 0; left: 0;
		font-size: var(--font-header-title-size); line-height: var(--font-header-title-lineheight);
		font-family: var(--font-bold-oblique-family);
		/* padding: calc(var(--body-margin-height) * 1/2) var(--page-padding); text-align: center; */
		height: var(--header-top-height);
		padding-bottom: 15px;
		white-space: nowrap;
		width: 100%; overflow: hidden; /* needed */
		/* border-bottom: var(--border-thickness) solid #000; */
	}
		#header-title-logo {
			position: absolute; top: 20px; left: 50px;
			width: 176px; height: 79px;
			background: url(/assets/images/stadt-bern-header.svg) no-repeat 0 0 transparent;
			background-size: contain;
		 }

	#nav-container {
		z-index: 3;
		position: relative; /* top: 77px; left: 0; */
		width: 100%;

		/* check scroll hijack script: height has to be the same! */
		height: 500px;
  		transition: height var(--ease-speed) ease;

		background-color: var(--color-brand);
		/* has class border_top_bottom */
	}
		#nav-container.collapsed { height: 200px; }

		#search-icon {
			cursor: pointer;
			position: absolute; top: -30px; right: 290px;
			width: 70px; height: 60px;
			background: url(/assets/images/icons/search-header.svg) no-repeat 0 0 transparent;
			background-size: contain;
			transition: opacity 0.2s ease-in-out;
		}
			#search-icon.hidden { opacity: 0; pointer-events: none; }

		#search-form { opacity: 0; pointer-events: none; }
		#search-form input[type="search"] {
			z-index: 1;
			position: absolute; top: -22px; right: 290px;
			padding-top: 5px;
			padding-left: 10px;
			width: 200px;
			border: var(--border-thickness) solid #000;
			background: #fff;
			font-family: var(--font-title-family);
			font-size: var(--font-nav-size);
			line-height: var(--font-nav-line-height);
			color: var(--color-brand);
		}
			#search-form.open { opacity: 1; pointer-events: all; }

		#main-navigation {
			position: absolute; top: -20px; left: 50px;
		}
		#newsletter-nav { position: absolute; top: -20px; right: 270px; text-align: right; display: inline-block; }

		#main-navigation ul { list-style: none; }
		#newsletter-nav a,
		#main-navigation li {
			position: absolute;
			white-space: nowrap;
			display: inline-block; padding: 5px 15px; border: var(--border-thickness) solid #000;
			background-color: #fff;
			font-family: var(--font-bold-oblique-family); font-size: var(--font-nav-size); line-height: var(--font-nav-line-height); letter-spacing: 0.01em;
			transition: transform 0.2s;

			overflow: hidden;
			text-overflow: ellipsis;
		}

			#main-nav-jahreskalender { top: 0; left: 50px; }
			#main-nav-bnt { top: 54px; left: 0px; }
			#main-nav-schulangebote { top: 108px; left: 30px; }
			#main-nav-informationen { top: 162px; left: 10px; }


		#newsletter-nav a:hover,
		#main-navigation li:hover  {
			z-index: 99!important;
			transform: rotate(-1.5deg);
			transform-origin: center center;
		}

		#newsletter-nav.here a,
		#main-navigation li.here {
			z-index: 99!important;
			background-color: #CBCBCB;
			transform: rotate(-1.5deg);
			transform-origin: center center;
		}
			#nav-container .main-nav-newsletter { display: none; /* position: absolute; top: 0px; right: 0px; left: auto; transform: translateX(calc(100vw - 100% + 50px)) rotate(0deg); transition: transform 0.2s; */ }
			#main-navigation .main-nav-newsletter:hover { /* transform: translateX(calc(100vw - 100% + 50px)) rotate(-1.5deg); z-index: 99 !important; */ }


		#header-claim, .claim_block {
			z-index: 1;
			position: relative;
			/* margin-top: 500px; */
			/* position: sticky; top: 100px; left: 0; */
			background-color: #fff;
			padding-top: calc(1 * var(--body-margin-height));
			padding-bottom: calc(1 * var(--body-margin-height));
			font-family: var(--font-regular-family);
			font-size: var(--font-intro-size); line-height: var(--font-intro-line-height);
			/* has class border_top_bottom */
		}

 			.claim_block {
				padding-top: 0; padding-bottom: 0;
				margin-top: calc(1 * var(--body-margin-height) + var(--border-thickness));
				margin-bottom: calc(1 * var(--body-margin-height) + var(--border-thickness));
			}

			#header-claim h2, .claim_block h2 { font-family: var(--font-bold-family); }

			#header-claim #claim-content {
				transition: max-height var(--ease-speed) ease-in-out, opacity 0.3s ease;
				overflow: hidden;
				max-height: 1000px; /* großzügig genug */
			}

			#header-claim.closed #claim-content  {
				max-height: 0;
			}

				#header-claim-close {
					position: absolute;

					bottom: -25px; right: 15px;
					width: 45px; height: 45px;
					background: url(/assets/images/icons/claim-close.svg) no-repeat center center transparent;
					background-size: contain;
				}
					.claim-closed #header-claim-close { background-image: url(/assets/images/icons/claim-open.svg); }
						/* #header-claim.closed #header-claim-close { background-image: url(/assets/images/icons/claim-open.svg); } */

					#header #header-claim-close { display: block; }
					#header.open #header-claim-close { display: none; }

		/* Wenn html.claim-closed gesetzt ist, verstecke den Claim und lege eine andere Klasse auf den Nav-Container, falls Du das brauchst */
		html.claim-closed #header-claim #claim-content {
		max-height: 0 !important;
		overflow: hidden;
		}
		html.claim-closed #nav-container {
		/* optional: wenn Du nav-container anders stylen willst */
		/* z.B. margin-top: 0; */
		}

		/* #header-claim.closed # { bottom: 88px; } */
		#jahreskalender #header-icon {
			position: absolute;
			bottom: -4px;
			left: calc(50% - 170px);
			transform: translateX(-10%) scale(1.5);
			transform-origin: bottom center;
			width: 290px;
			height: 126px;
			background: url(/assets/images/bike.svg) no-repeat center bottom transparent;
			background-size: contain;
			opacity: 1;
			transition: transform var(--ease-speed) ease; /* s	ame as nav-container */
		}
			/* header-icon im „collapsed“-Zustand */
			#jahreskalender #nav-container.collapsed #header-icon {
				transform: translateX(-10%) scale(1);
			}

		#schulangebote #header-icon {
			position: absolute;
			bottom: 30px;
			left: 50%;
			transform: translateX(-50%) scale(1.5);
			transform-origin: bottom center;
			width: 126px;
			height: 126px;
			background: url(/assets/images/ball.svg) no-repeat center center transparent;
			background-size: contain;
			opacity: 1;
			transition: transform var(--ease-speed) ease; /* s	ame as nav-container */
		}
			/* header-icon im „collapsed“-Zustand */
			#schulangebote #nav-container.collapsed #header-icon {
				transform: translateX(-50%) scale(1);
			}

		#bnt #header-icon {
			position: absolute;
			bottom: 30px;
			left: 50%;
			transform: translateX(-50%) scale(1);
			transform-origin: bottom center;
			width: 126px;
			height: 126px;
			background: url(/assets/images/eye.svg) no-repeat center center transparent;
			background-size: contain;
			opacity: 1;
			transition: transform var(--ease-speed) ease; /* s	ame as nav-container */
		}
			/* header-icon im „collapsed“-Zustand */
			#bnt #nav-container.collapsed #header-icon {
				transform: translateX(-50%) scale(1);
			}

		#informationen #header-icon {
			position: absolute;
			bottom: 30px;
			left: 50%;
			transform: translateX(-50%) scale(1.5);
			transform-origin: bottom center;
			width: 126px;
			height: 126px;
			background: url(/assets/images/bulb.svg) no-repeat center center transparent;
			background-size: contain;
			opacity: 1;
			transition: transform var(--ease-speed) ease; /* s	ame as nav-container */
		}
			/* header-icon im „collapsed“-Zustand */
			#informationen #nav-container.collapsed #header-icon {
				transform: translateX(-50%) scale(1);
			}

	/* mobile nav
	------------------------------------------------------------------------------------------------------- */
	#header.open #nav-container {
		display: block;
		position: fixed; top: var(--header-top-height); left: 0;
		z-index: 9;
		width: 100%;
		height: calc(100vh - var(--header-top-height))!important;
		transition: height var(--ease-speed) ease;
	}
		#header.open #header-icon {  }
		#header.open #header-top { position: fixed; top: 0; left: 0; width: 100%; z-index: 9; background: #fff;}
		#main-navigation.open {
			display: block;
			top: 30px;
			left: var(--page-padding);
		}

	/* Hamburger */
	/* ---------------------------------------------------------------------------------------------------- */
	#hamburger { display: none; }

		#nav_button { cursor: pointer; width: 100%; height: 33px; position: relative; display: flex; align-items: center; justify-content: center; }
		#nav_button::before,
		#nav_button::after {
			content: "";
			position: absolute;
 		   right: var(--page-padding);
			width: 33px; height: 4px;
			background: black;
			transition: transform 0.3s, top 0.3s, bottom 0.3s;
		}

		#nav_button::before { top: 8px }
		#nav_button::after { bottom: 8px; }

		#nav_button.open::before { top: 50%; transform: rotate(45deg); }
		#nav_button.open::after { bottom: 40%; transform: rotate(-45deg); }


	/* Main Navigation / header (mobile)
	------------------------------------------------------------------------------------------------------- */
	@media (max-width: 1000px) {
		#main-navigation { display: none; }
		#newsletter-nav { display: none; }
		#search-icon { display: none; }

		#jahreskalender #header-icon { transform: translateX(-10%) scale(1)!important;  }
		#bnt #header-icon,
		#schulangebote #header-icon,
		#informationen #header-icon { transform: translateX(-50%) scale(1)!important; }


		/* check scroll hijack script: breakpoint. has to be the same! */
		#nav-container { height: 200px!important; }

		#header-top { display: grid; grid-template-columns: auto 60px; align-items: center; height: var(--header-top-height) }
			#header-title { padding-left: 60px; /* damit es mittig ist */ padding-bottom: 5px; justify-content: space-evenly; }
				#header-title-logo { top: 6px; left: var(--page-padding); width: 80px; height: 37px; }

			#hamburger { display: block; text-align: right; }

		#header-claim-close { width: 30px; height: 45px; right: var(--page-padding); }


		#main-nav-jahreskalender { top: 0; }
		#main-nav-bnt { top: 49px; }
		#main-nav-schulangebote { top: 96px; }
		#main-nav-informationen { top: 144px; }
	}

	/*
		breakpoint 680px;
		--font-header-title-size: 18px; --font-header-title-lineheight: 22px;
	*/

	@media (max-width: 680px) {
		#header-title { align-items: center; padding-bottom: 0; padding-left: 45px; }
		/* weil schrift kleiner */
		#main-nav-jahreskalender { top: 0; }
		#main-nav-bnt { top: 41px; }
		#main-nav-schulangebote { top: 82px; }
		#main-nav-informationen { top: 125px; }

	}

	@media (max-width: 480px) {
		#header-title {
			font-size: var(--font-small-size);
			line-height: var(--font-small-size);
		}
			#header-title-logo { background-image: url(/assets/images/logo-stadt-bern.svg); width: 23px; height: 37px; }
	}

	@media (max-width: 350px) {
		:root {
			--font-small-size: 14px;
			--font-small-lineheight: 14px;
		}

	}




/* Main has to be z-index: higher than the nav-container
------------------------------------------------------------------------------------------------------- */
main { /* position: relative; z-index: 2; background-color: #fff; */ }

/* Filter
------------------------------------------------------------------------------------------------------- */

.sticky-inner {
	margin-left: var(--ident-right); padding-left: var(--page-padding);
}

.filter_from_to input {
	background-color: var(--color-brand-hover)!important;
	border-color: #000!important;
}


/* Event filter Container
This height is used to reposition the position sticky values.
All that is inside of this.
------------------------------------------------------------------------------------------------------- */
#event-filter-container {
	position: sticky; top: 0; left: 0; z-index: 3;
	font-family: var(--font-regular-family);
	font-size: var(--font-filter-title-size); line-height: var(--font-filter-title-line-height);
	background-color: #fff;
}

	#event-filter-content {
		display: grid;
		width: 100%;
		grid-template-columns: auto var(--filter-right-size);
	}

	#event-shortcuts { background-color: #fff; padding-top: var(--border-thickness); padding-bottom: 0; }
		.event-shortcut {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			text-decoration: none;
			margin-right: var(--body-margin-height);
		}

		.event-shortcut .circle {
			width: 25px;
			height: 25px;
			border-radius: 50%;
			border: 4px solid black;
			display: inline-block;
			top:-1px;
		}
			.event-shortcut .circle.veranstaltung { background-color: var(--color-veranstaltung); }
			.event-shortcut:hover .circle.veranstaltung { background-color: var(--color-veranstaltung-hover); }
			.event-shortcut .circle.permanent { background-color: var(--color-permanent); }
			.event-shortcut:hover .circle.permanent { background-color: var(--color-permanent-hover); }

	#event-open-filter {
		background-color: var(--color-brand);
		padding-top: var(--border-thickness); padding-bottom: var(--border-thickness);
		padding-left: 10px; padding-right: 10px;
		border-left: var(--border-thickness) solid #000;

		display: grid;
		grid-template-columns: 1fr auto; /* z.B. Text links, Badge rechts */
		align-items: center;
	}
		.event-program-filter svg#filter-slider { vertical-align: bottom; width: 50px; height: 30px; margin-right: 6px; }

		@media screen and (max-width: 680px) {
			.event-program-filter svg#filter-slider { width: 30px; height: 20px; }
		}


		.isFiltered {
			margin-right: var(--body-margin-size);
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 25px;
			height: 25px;
			border-radius: 50%;
			background-color: #fff;
			border: 3px solid #000;
			font-size: var(--font-tiny-size); line-height: var(--font-tiny-line-height);
		}



	/* is Filtered Container
	------------------------------------------------------------------------------------------------------- */
	#event-isFiltered {
		background-color: var(--color-brand); color: #fff;
		padding-top: var(--border-thickness); padding-bottom: var(--border-thickness);
		border-bottom: var(--border-thickness) solid #000;
	}

	#event-isFiltered-inner {
		display: grid;
		grid-template-columns: auto var(--filter-right-size);
		gap: 0;
		align-items: center;
	}
		#filter-parameters {
			color: #fff;
			font-size: var(--font-small-size); line-height: var(--font-small-line-height);
		}

			#filter-parameters a { text-decoration: none; }
			.filter-parameter { padding-right: 20px; text-wrap: nowrap; }

			.close_button { position: relative; width: 16px; height: 16px; display: inline-block; }

				.close_button::before,
				.close_button::after { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 2px; background: #fff; transform-origin: center; }
				.close_button::before { transform: translate(-50%, -50%) rotate(45deg); }
				.close_button::after  { transform: translate(-50%, -50%) rotate(-45deg); }

		#filter-delete-parameters {
			font-size: var(--font-tiny-size); line-height: var(--font-tiny-line-height);
			color: #000;
			border-bottom-color: #000;
			text-decoration: underline;
			text-decoration-color: #000;
			text-decoration-thickness: 2px;
			padding-left: 21px;
		}

	@media screen and (max-width: 1110px) {
		#event-filter-container .sticky-inner { margin:0; padding:0; }
		#event-filter-content { grid-template-columns: 1fr; }
		#event-shortcuts { border-bottom: var(--border-thickness) solid #000; padding-left: calc(var(--ident-right) + var(--page-padding)); }
		#event-open-filter { border-left: none; padding-left: calc(var(--ident-right) + var(--page-padding));}
		#event-isFiltered-inner { grid-template-columns: 1fr; }
		#filter-parameters { padding-left: calc(var(--ident-right) + var(--page-padding)); }
		#filter-delete-parameters { margin-top: 10px; }
		.isFiltered { margin-right: 0px; }
	}


	/* Filter: Here's the magic!
	------------------------------------------------------------------------------------------------------- */
	#event-filter { display: none; background-color: #fff; }
	#event-filter.open { display: block; }
	#event-filter-inner {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 0;
		margin-bottom: calc(-1 * var(--input-border-thickness)); /* eliminate border from filter section */
	}
		#filter-empty-1 { display: block;}
		#filter-empty-2 { display: none;}
		.filter-section {
			border-left: var(--input-border-thickness) solid #000;
		}

			.filter-section:nth-of-type(4n+1) .filter-section-title,
			.filter-section:nth-of-type(4n+1) .filter-section-content {
				padding-left: calc(var(--ident-right) + var(--page-padding));
			}

			.filter-section-title, .filter-section-content {
				padding-left: 20px; padding-right: 20px;
			}

			.filter-section-title {
				position: sticky; top: 0; left: 0; z-index: 1;
				font-family: var(--font-bold-family); font-size: var(--font-filter-title-size); line-height: var(--font-filter-title-line-height);
				background-color: var(--color-brand);
				padding: var(--border-thickness) 20px; padding-right: 30px;
				cursor: pointer;
				border-bottom: var(--input-border-thickness) solid #000;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

				.filter-section.empty .filter-section-title::after { border: none }

				.filter-section-title::after {
					content: '';
					position: absolute; right: 14px; top: 60%;
					width: 14px; height: 14px;
					transform: translateY(-100%) rotate(45deg);
					border-right: 2px solid black; border-bottom: 2px solid black;
					transition: transform 0.2s ease;
				}

				.filter-section.open .filter-section-title::after {
					transform: translateY(-50%) rotate(-135deg);
				}

			.filter-section-content {
				display: none;
				max-height: 350px; overflow-y: auto;
				font-size: var(--font-filter-radio-size); line-height: var(--font-filter-radio-line-height);
				padding-top: 20px; padding-bottom: 20px;
			}
				.filter-section.open .filter-section-content { display: block; }
				.filter-section-content ul { list-style: none; }

				.filter-section-content li {
					position: relative;
					padding-left: 34px; /* Platz für Input */
					margin-bottom: 6px;
				}

				.filter-section-content input[type="radio"],
				.filter-section-content input[type="checkbox"] {
					position: absolute;
					top: 2px; /* ggf. anpassen für vertikale Mitte */
					left: 0;
					margin: 0;
					width: 20px;
					height: 20px;
				}

				.filter-section-content label {
					display: block;
					padding-left: 0;
				}

	@media screen and (max-width: 1110px) {
		#event-filter-inner { grid-template-columns: repeat(3, 1fr); }
		.filter-section:nth-of-type(3n+1) .filter-section-title,
		.filter-section:nth-of-type(3n+1) .filter-section-content {
			padding-left: calc(var(--ident-right) + var(--page-padding));
		}
	}
	@media screen and (max-width: 830px) {
		#event-filter-inner { grid-template-columns: repeat(2, 1fr); }
		.filter-section:nth-of-type(2n+1) .filter-section-title,
		.filter-section:nth-of-type(2n+1) .filter-section-content {
			padding-left: calc(var(--ident-right) + var(--page-padding));
		}
		#filter-empty-2 { display: none;}
	}


/* Jahreskalender Listing
------------------------------------------------------------------------------------------------------- */
#calendar-month {
	position: sticky; top: 50px; left: 0; z-index: 2;
	padding-top: var(--border-thickness); padding-bottom: var(--border-thickness);
	background-color: var(--color-month);
	color: #fff;
	/* has class border_top_bottom */
}
	#calendar-month a { color: #fff; }
	#calendar-month .content_width { max-width: 100%; } /* place heute to the right */

	#month-today { display: grid; gap: var(--body-margin-height); grid-template-columns: auto 60px; }
		#month-switcher { display: inline-block; }
		#calendar-today { display: inline-block; text-align: right; opacity: 0.6; white-space: nowrap; }


#calendar-month,
.event-day-wrapper h2 {
	font-family: var(--font-regular-family);
	font-size: var(--font-filter-title-size); line-height: var(--font-filter-title-line-height);
}
.event-day-wrapper h3 {
	font-family: var(--font-bold-family);
	font-size: var(--font-cal-listing-title-size); line-height: var(--font-cal-listing-title-line-height);
}
.event-day-wrapper h4 {
	font-family: var(--font-regular-family);
	font-size: var(--font-cal-listing-title-size); line-height: var(--font-cal-listing-title-line-height);
	margin-top: var(--event-day-h4-adjustment);
}

	.event-day-wrapper.event-hidden {
		display: none;
		transition: opacity .3s ease, height .3s ease;
	}

	.event-day-wrapper.event-hidden.show {
		display: block;
	}

	.event-day {
		position: sticky; top: 100px; left: 0; z-index: 1;
		padding-top: var(--border-thickness); padding-bottom: var(--border-thickness);
		background-color: var(--color-veranstaltung);
		/* has class border_top_bottom */
	}

	body#jahreskalender .event-day { background-color: var(--color-veranstaltung); }
	body#bnt .event-day {
		background-color: var(--color-BNT);
		top: 0;
	}

	.event {
		display: block;
		background-color: #fff;
		padding-top: calc(var(--font-cal-listing-meta-line-height) * 1);
		padding-bottom: calc(var(--font-cal-listing-meta-line-height) * 1);
		font-size: var(--font-cal-listing-meta-size); line-height: var(--font-cal-listing-meta-line-height);
		/* has class border_top_bottom */
	}

	.event.bnt {
		background-image: url(/assets/images/icons/nak-indicator.svg);
		background-repeat: no-repeat;
		background-position: 23px 50%;
		background-size: 55px;
	}

		@media screen and (max-width: 1000px) {
			.event.bnt { background-position: calc(100% - 5px) 50%; background-size: 44px; }
		}
		@media screen and (max-width: 680px) {
			.event.bnt { background-size: 33px; }
		}



		.event-title { }

		#veranstaltungen .event:hover { background-color: var(--color-veranstaltung-hover); }
		#permanent  .event:hover { background-color: var(--color-permanent-hover); }

		body#jahreskalender #veranstaltungen .event:hover { background-color: var(--color-veranstaltung-hover); }
		body#jahreskalender #veranstaltungen .event.bnt:hover { background-color: var(--color-BNT-hover); }

		body#bnt #veranstaltungen .event:hover { background-color: var(--color-BNT-hover); }
		body#bnt #veranstaltungen .event.bnt { background-image: none; }


/* Permanente angebote
------------------------------------------------------------------------------------------------------- */
	.permanente-angebote {
		position: sticky; top: 100px; left: 0; z-index: 1;
		padding-top: var(--border-thickness); padding-bottom: var(--border-thickness);
		background-color: var(--color-permanent);
		/* has class border_top_bottom */
	}


/* Abschluss
------------------------------------------------------------------------------------------------------- */
#abschluss-container {
	min-height: 290px;
	background: var(--color-light-gray);
}


/* Jahreskalender Event Detail
------------------------------------------------------------------------------------------------------- */
#veranstaltungen-detail-content {
	margin-top: calc(2 * var(--body-margin-height));
	margin-bottom: calc(2 * var(--body-margin-height));
}

.veranstaltungen_detail h1 { font-family: var(--font-bold-family); font-size: var(--font-cal-detail-title-size); line-height: var(--font-cal-detail-title-line-height); }
.veranstaltungen_detail h2 { font-family: var(--font-regular-family); font-size: var(--font-cal-detail-title-size); line-height: var(--font-cal-detail-title-line-height); }
.veranstaltungen_detail h3 { font-family: var(--font-bold-family); font-size: var(--font-cal-detail-info-size); line-height: var(--font-cal-detail-info-line-height); }
.veranstaltungen_detail { font-size: var(--font-cal-detail-info-size); line-height: var(--font-cal-detail-info-line-height); }

.veranstaltungen_detail .einfachgesagt { font-family: var(--font-bold-oblique-family); font-size: var(--font-cal-detail-einfachgesagt-size); line-height: var(--font-cal-detail-einfachgesagt-line-height); }
.veranstaltungen_detail .description { font-size: var(--font-cal-detail-desc-size); line-height: var(--font-cal-detail-desc-line-height); }
.veranstaltungen_detail figcaption { margin-top: 5px; font-size: var(--font-small-size); line-height: var(--font-small-line-height); }
.veranstaltungen_detail .claim { font-family: var(--font-bold-family); font-size: var(--font-cal-detail-claim-size-size); line-height: var(--font-cal-detail-claim-line-height); }

.veranstaltungen_detail figure,
.veranstaltungen_detail .detail-item,
.veranstaltungen_detail h3 { margin-top: calc(var(--font-cal-detail-desc-size) + 3px); }


.detail-content-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--body-margin-height);
	margin-top: var(--body-margin-height);
	align-items: start;
}

	.content-left, .content-right { position: sticky; top: 0; }

	.detail-image {
		border-top: var(--border-thickness) solid #000;
		border-bottom: var(--border-thickness) solid #000;
	}

	@media screen and (max-width: 750px) {
		.detail-content-container { grid-template-columns: 1fr; }
		.content-left, .content-right { position: relative; top: 0; }
	}

.related_list {
	list-style-position: outside;
}
.related_list li {
	padding-top: 9.5px;
	padding-bottom: 9.5px;
	list-style-position: outside;
}


/*
	Schulen / Schulangebote
	Nav categories / pages
------------------------------------------------------------------------------------------------------- */
#pages-children,
.nav_categories { margin-top: var(--body-margin-height);  margin-bottom: calc(var(--body-margin-height) * 4); }
.nav_categories,
.nav_categories > li > ul { list-style: none; }
.nav_categories > li > ul > li { margin-left: 40px; }

#pages-children > section > a,
.nav_categories > li > a {
	display: inline-block; width: 100%;
	padding-top: calc(var(--body-margin-height) * 0.5); padding-bottom: calc(var(--body-margin-height) * 0.5);
	font-size: var(--font-sub-nav-size); line-height: var(--font-sub-nav-line-height);
	padding-left: 70px;
	background: url(/assets/images/icons/sub-nav-open.svg) no-repeat 15px center transparent;
	background-size: 29px;
}
	#pages-children > section > a.open,
	.nav_categories > li > a.open { background-image: url(/assets/images/icons/sub-nav-close.svg); }
	#pages-children > section > a:hover,
	.nav_categories > li > a:hover { background-color: var(--color-brand-hover); }

	.nav_categories > li > ul > li > a {
		display: inline-block; width: 100%;
		padding-top: calc(var(--body-margin-height) * 0.5); padding-bottom: calc(var(--body-margin-height) * 0.5);

		font-family: var(--font-bold-family);
		font-size: var(--font-sub-sub-nav-size); line-height: var(--font-sub-sub-nav-line-height);

		padding-left: 31px;
		background: url(/assets/images/icons/sub-sub-nav-open.svg) no-repeat left center transparent;
		background-size: 20px;
	}
		.nav_categories > li > ul > li > a.open {
			background-image: url(/assets/images/icons/sub-sub-nav-close.svg);
			border-bottom: none;
		}
		.nav_categories > li > ul > li > a:hover { background-color: var(--color-brand-hover); }

		.children_content,
		.sub_content { margin-left: 32px; margin-bottom: var(--body-margin-height); }

			.sub_content_main, .children_content {
				font-family: var(--font-regular-family); font-size: var(--font-sub-text-size); line-height: var(--font-sub-text-line-height);
			 }
			.sub_content_details {
				font-family: var(--font-bold-family); font-size: var(--font-sub-detail-size); line-height: var(--font-sub-detail-line-height);
				margin-top: var(--body-margin-size);
			}
				.sub_content_details p { }

		.children_content { margin-left: 70px; }
		li.open > .sub_content { display: block; }





@media screen and (max-width: 1000px) {
	.nav_categories > li > ul > li { margin-left: 18px; }

	.children_content,
	.sub_content { margin-left: 0px; }
}

/* Suche
------------------------------------------------------------------------------------------------------- */

#suche .event-day { top: 0; }
.search_intro { margin-top: var(--body-margin-height); margin-bottom: var(--body-margin-height); }
.search_intro h2 { font-family: var(--font-bold-family); }
.search_results_item { border-bottom: var(--border-thickness) solid #000; padding-bottom: var(--body-margin-height); }


/* Scroll to top
/* ---------------------------------------------------------------------------------------------------- */
#scroll-to-top {
	position: fixed;
	bottom: 90px; right: 10px; width: 55px; height: 55px;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
	z-index: 10;
}
	#scroll-to-top.visible { opacity: 1; visibility: visible; }

	#scroll-to-top .icon-background { fill: var(--color-brand); }
	#scroll-to-top .icon-arrow-outline { stroke: #000; stroke-width: 2; }
	#scroll-to-top .icon-arrow-fill { fill: #000; }

	#jahreskalender .scroll-to-top .icon-background { fill: var(--color-brand); }
	#bnt .scroll-to-top .icon-background  { fill: var(--color-BNT); }



/* Footer */
/* ---------------------------------------------------------------------------------------------------- */

#footer {
	background-color: var(--color-brand);
	padding-top: calc(var(--body-margin-height) * 1);
	padding-bottom: calc(var(--body-margin-height) * 1);
	margin-top: 0;
	/* margin-top: calc(var(--body-margin-height) * 1); */
	/* has class border_top_bottom */
}

	#footer.small_format a { color: var(--color-text); text-decoration-color: var(--color-text); text-decoration: underline; }

	#footer-inner {
		display: flex;
		align-items: stretch;
		gap: var(--body-margin-height);
	}

	#footer-address { flex: 1; }
		/*
			#footer-address-logo { width: 120px; flex-shrink: 0; }
			#footer-address-content { flex: 1; align-self: flex-start; }
		*/

	#login-veranstalter {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}


	@media screen and (max-width: 960px) {
		#footer-inner {
		flex-direction: column;
		}

		/* Stell sicher, dass beide Blöcke jeweils eine ganze Zeile nehmen */
			#footer-address,
			#login-veranstalter {
			width: 100%;
		}
		#login-veranstalter { margin-top: calc(var(--body-margin-height) * 2); }
	}


/* Popup
------------------------------------------------------------------------------------------------------- */

#popup {
  z-index: 9;
  display: none;
  position: fixed;
  bottom: 170px;
  right: 20px;
  padding: 20px 20px;
  background-color: #fff;
  width: calc(100% - 40px);
  max-width: 800px;
  border: var(--border-thickness) solid #000;
}

#popup .close {
	position: absolute;
	top: -25px;
	right: 22px;
	width: 45px;
	height: 45px;
	background: url(/assets/images/icons/claim-close.svg) no-repeat center center transparent;
	background-size: auto;
	background-size: contain;
	cursor: pointer;
}

#popup-subscription h2 { font-family: var(--font-bold-family); font-size: var(--font-popup-title-size); line-height: var(--font-popup-title-line-height); }
#popup-subscription p { font-family: var(--font-regular-family); font-size: var(--font-popup-size); line-height: var(--font-popup-line-height); }




#popup-subscribe-form {
	display: flex; flex-wrap: wrap; gap: 10px;
	align-items: flex-start;
}

#popup-subscribe-form input { font-family: var(--font-regular-family); font-size: var(--font-popup-form-size); line-height: var(--font-popup-form-line-height); }

	.newsletter-input, .newsletter-submit {
		margin-top: 5px;
		color: #000!important; border-color: #000!important; background: var(--color-brand)!important;
		padding: calc(var(--body-margin-height) / 4)!important;
		padding-bottom: calc(var(--body-margin-height) / 4 - 4px)!important;

	}

	.newsletter-input { flex-grow: 1; flex: 1; min-width: 0; /* wichtig für Flexbox shrink */ margin-right: 5px; }
	.newsletter-submit { width: 80px; /* fixe Breite für Button */ flex-shrink: 0; }


/* Newsletter Subscription page */
/* ---------------------------------------------------------------------------------------------------- */


#newsletter_subscription { margin-top: calc(-1 * var(--body-margin-size)); }


/* Forms Semantics */
/* ---------------------------------------------------------------------------------------------------- */

.segment { margin-top: calc(var(--body-margin-height)*1.5); } /* segment class separates elements */

.field {
	text-align: left;
	position: relative;
	margin-top: calc(var(--body-margin-height)*1);
}



form label,
.field label { font-family: var(--font-regular-family); font-size: var(--font-small-size); line-height: var(--font-small-line-height); }

form p.no_label,
.field.no_label {
	margin-top: calc(var(--body-margin-height) + 30px);
}

#newsletter .field { margin-top: calc(var(--body-margin-height)/2); }
#newsletter .field.no_label { margin-top: calc(var(--body-margin-height)/2 + 30px); }




form span,
.instruction, .instructions {
	display: inline-block;
	font-size: var(--font-tiny-size); line-height: var(--font-tiny-line-height);
	margin-top: calc(var(--body-margin-height) / 4);
}

form span.error,
form span.mandatory,
form span.required {
	font-family: var(--font-bold-family);
	font-size: var(--font-small-size); line-height: var(--font-small-line-height);
	color: #FF4695;
}
	form span.mandatory, form span.required { margin-left: 10px; }

.field span.instructions textarea { margin-top: calc(var(--body-margin-height) / 2); }


/* Buttons (primary and secondary) */
/* ---------------------------------------------------------------------------------------------------- */

button, input[type="submit"], .button, a.btn, a.button, a:hover.button,
.btn.btn-secondary, .btn.btn-primary {
	appearance: none;
	display: inline-block;
	box-shadow: none; text-decoration: none; border-radius: 0;

	border: var(--input-border);
	background: var(--color-brand); color: var(--color-text);
	font-family: var(--font-title-family); font-size: var(--font-small-size); line-height: var(--font-small-line-height);
	text-transform: none; text-align: center;
	padding: calc(var(--body-margin-height) / 2) calc(var(--body-margin-height) * 1);
	border-radius: var(--input-border-radius);
}

	@media screen and (max-width: 700px) {
		button, input[type="submit"], .button, a.btn, a.button, a:hover.button {
			font-size: var(--font-small-size); line-height: var(--font-small-line-height);
			padding: calc(var(--body-margin-height) / 2) calc(var(--body-margin-height) * 1);
		}

	}

	button.small {
		font-size: var(--font-tiny-size); line-height: var(--font-tiny-line-height);
		padding: calc(var(--body-margin-height) / 2) calc(var(--body-margin-height) * 1);
		padding-bottom: calc(var(--body-margin-height) / 2 - 6px);
	}

a.btn.btn--inline { margin-right: var(--body-margin-height); margin-top: var(--body-margin-height); }


button.fluid, input[type="submit"].fluid, .button.fluid, a.button.fluid { width: 100%; }

button.secondary, input[type="submit"].secondary, .button.secondary, a.button.secondary,
button.gray, input[type="submit"].gray, .button.gray, a.button.gray {
	border: var(--input-border-thickness) dotted var(--color-line);
	background: var(--color-body-background); color: #000;
}

button:hover, input[type="submit"]:hover, a.btn:hover, .button:hover, a.button:hover {
	background-color: var(--color-link-hover);
	color: white; text-decoration: none;
}

button.secondary:hover, input[type="submit"].secondary:hover, .button.secondary:hover, a.button.secondary:hover,
button.gray:hover, input[type="submit"].gray:hover, .button.gray:hover, a.button.gray:hover {
	background-color: var(--color-body-background);
	border-color: var(--color-brand); color: var(--color-brand);
}

button:active, input[type="submit"]:active, .button:active, a.button:active {
	background-color: var(--color-link-hover);
}

button.secondary:active, input[type="submit"].secondary:active, .button.secondary:active, a.button.secondary:active,
button.gray:active, input[type="submit"].gray:active, .button.gray:active, a.button.gray:active {
	background-color: #FFD8DA; border-color: var(--color-brand); color: var(--color-brand);
}

button.buy_ingwerer, input[type="submit"].buy_ingwerer, .button.buy_ingwerer, a.button.buy_ingwerer {
	min-width: 250px;
}


/*
*
*  Forms and Buttons
*
------------------------------------------------------------------------------------------------------- */

/* base styling */
/* ---------------------------------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="date"],
textarea,
select {
	position: relative;
	width: 100%;
	appearance: none;
	outline: none;
	background: var(--input-background-color); color: var(--color-text);
	border: var(--input-border); border-radius: var(--input-border-radius);
	padding: var(--input-padding);
	font-family: var(--font-regular-family); font-size: var(--font-small-size); line-height: var(--font-small-line-height);
}

.inverted input[type="text"],
.inverted input[type="email"],
.inverted input[type="number"],
.inverted input[type="tel"],
.inverted input[type="url"],
.inverted input[type="password"],
.inverted input[type="date"],
.inverted textarea,
.inverted select {
	background: var(--color-body-background); color: var(--color-text);
	border: 1px solid var(--color-footer);
}

.field.error input,
input[type="text"]:focus,
input[type="text"].error,
input[type="email"]:focus,
input[type="email"].error,
input[type="number"]:focus,
input[type="number"].error,
input[type="tel"]:focus,
input[type="tel"].error,
input[type="url"]:focus,
input[type="url"].error,
input[type="password"]:focus,
input[type="password"].error,
input[type="date"]:focus,
input[type="date"].error,
textarea:focus,
textarea.error,
select:focus,
select.error {
	border-color: var(--color-brand);
}

.inverted input[type="text"]:focus,
.inverted input[type="text"].error,
.inverted input[type="email"]:focus,
.inverted input[type="email"].error,
.inverted input[type="number"]:focus,
.inverted input[type="number"].error,
.inverted input[type="tel"]:focus,
.inverted input[type="tel"].error,
.inverted input[type="url"]:focus,
.inverted input[type="url"].error,
.inverted input[type="password"]:focus,
.inverted input[type="password"].error,
.inverted input[type="date"]:focus,
.inverted input[type="date"].error,
.inverted textarea:focus,
.inverted textarea.error,
.inverted select:focus,
.inverted select.error {
	border-color: var(--color-footer);
}


input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type=number] {
	-moz-appearance: textfield;
}

/* add required asterisk automatically */
input:required,
select:required,
textarea:required {
	background-image: url('/assets/images/icons/required.svg');
	background-repeat: no-repeat;
	background-position: calc(100% - 10px) center;
	background-size: 11px;
}

.inverted input:required,
.inverted select:required,
.inverted textarea:required {
	background-image: url('/assets/images/icons/required-white.svg');
}


textarea:required {
	background-position-y: 10px;
}

textarea {
	resize: vertical; /* user can resize vertically, but width is fixed */
	overflow: hidden;
}

/* Dropdown */
/* ---------------------------------------------------------------------------------------------------- */

select {
	min-width: 110px;
	background: url(/assets/images/icons/dropdown-arrow.svg) no-repeat calc(100% - 10px) center #fff;
	background-size: 15px;
	border: var(--input-border-thickness) solid var(--line-color);
	padding-right: 40px;
}

.inverted select {
	background: url(/assets/images/icons/dropdown-arrow.svg) no-repeat calc(100% - 10px) center var(--color-footer);
	background-size: 15px;
}

/* search */
/* ---------------------------------------------------------------------------------------------------- */

input[type="search"] {
	appearance: none;
	background: var(--color-body-background); color: var(--color-text);
	border: 1px solid var(--color-line); border-radius: var(--input-border-radius);
	padding-top: 7px; padding-bottom: 7px; padding-left: 42px;
	background: url(/assets/images/icons/Search-icon.svg) no-repeat 8px center transparent;
	background-size: 30px 25px;
}

/* checkbox / radio */
/* ---------------------------------------------------------------------------------------------------- */

input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  margin: 0;
  font: inherit;
  width: 20px;
  height: 20px;
  border: var(--input-border-thickness) solid black;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  vertical-align: middle;
}

input[type="radio"] {
  border-radius: 50%;
}

input[type="checkbox"]::before,
input[type="radio"]::before {
  content: "";
  width: 12px;
  height: 12px;
  background-color: var(--color-brand); /* z. B. grün */
  transform: scale(0);
  transition: transform 0.2s ease-in-out;
  border-radius: inherit;
}

input[type="checkbox"]:checked::before,
input[type="radio"]:checked::before {
  transform: scale(1);
}


input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  background-color: var(--color-permanent-hover)!important;
}

@media screen and (max-width: 1000px) {
	input[type="text"],
	input[type="email"],
	input[type="number"],
	input[type="tel"],
	input[type="url"],
	input[type="password"],
	input[type="date"],
	textarea,
	select {
		padding: calc(var(--body-margin-height) / 4) calc(var(--body-margin-height) / 3);
	}
}



/* Small Forms */
/* ---------------------------------------------------------------------------------------------------- */

.small input[type="text"],
.small input[type="email"],
.small input[type="number"],
.small input[type="tel"],
.small input[type="password"],
.small select {
	padding: 0 calc(var(--body-margin-height) / 4);
}

/* File input */
/* ---------------------------------------------------------------------------------------------------- */

.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.inputfile + label {
	cursor: pointer;
	padding-left: 38px;
	background-image: url(/assets/images/icons/upload-icon.svg);
	background-position: 10px center;
	background-repeat: no-repeat;
	background-size: 20px;
}

.inputfile:focus + label,
.inputfile + label:hover {
	background-color: var(--color-brand);
}

.inputfile + label * {
	pointer-events: none;
}


.input-mini {
	display: inline-block; width: 60px!important;
	text-align: center;
	padding: 7px 11px!important;
	margin: 0;
}


/*


Veranstalter Backend
=====================


------------------------------------------------------------------------------------------------------- */
#user_title { font-size: var(--body-font-size); line-height: var(--body-margin-height); }

/*
	veranstalter backend styling

*/
.mein_profil_left input[type="text"],
.mein_profil_left input[type="email"],
.mein_profil_left input[type="number"],
.mein_profil_left input[type="tel"],
.mein_profil_left input[type="url"],
.mein_profil_left input[type="password"],
.mein_profil_left input[type="date"],
.mein_profil_left textarea,
.mein_profil_left select {
	padding: calc(var(--body-margin-height) / 3) calc(var(--body-margin-height) / 3);
}

	.mein_profil_left select { padding-right: 40px; }

button,
input[type="submit"],
.button,
a.btn,
a.button,
a:hover.button,
.btn.btn-secondary, .btn.btn-primary {
	padding: calc(var(--body-margin-height) / 3) calc(var(--body-margin-height) / 2);
}
	.btn.btn-secondary { background-color: var(--color-light-gray); }


/* days */
.freq-list input[type="checkbox"] + label { height: 40px; width: 40px; padding: 6px 0 0;}
.freq-list input[type=checkbox]:checked + label { background: var(--color-brand); color: var(--color-text); }


#nav-container-backend {
	z-index: 3;
	position: relative;
	width: 100%; height: 200px;
	background-color: var(--color-brand);
	/* has class border_top_bottom */
}
	#mein-konto-nav-meine-veranstaltungen { top: 0; left: 0px; }
	#mein-konto-nav-neue-veranstaltung { top: 54px; left: 20px; }
	#mein-konto-nav-mein-profil{ top: 108px; left: 90px; }
	#mein-konto-nav-passwort-zuruecksetzen{ top: 162px; left: 10px; }

#steps_container {
	margin-top: var(--body-margin-height);
	width: 100%;
	text-align: center;
}

	#steps_title { display: inline-block; margin-right: 20px; }
	#steps_list { display: inline-block; list-style: none; }
	#steps_list li { display: inline-block; }
	#steps_list a {
		display: inline-block; padding: calc(var(--body-margin-height) / 3) calc(var(--body-margin-height) / 2);
		background-color: var(--color-brand-hover);
	 }
	#steps_list a:hover { background-color: var(--color-brand); }
	#steps_list a.steps_here { background: var(--color-brand); }


#veranstaltung_edit {
	display: grid;
	/* linke Spalte: nie weniger als 700px, ideal 40%, aber nicht mehr als 1fr (=Rest) */
	grid-template-columns: minmax(700px, 40%) 1fr;
	gap: 0px;
	align-items: stretch;
	/* margin-top: var(--body-margin-height); */
}

	.mein_profil_left, .mein_profil_right { padding: 20px 40px; }
		.mein_profil_left { background-color: var(--color-school-hover); border-right: var(--border-thickness) solid #000; }
		.mein_profil_right { background-color: var(--color-light-gray); }

	.mein_profil_left h2 {
		font-family: var(--font-title-family);
		font-size: var(--body-font-size); line-height: var(--font-line-height);
		margin-top: var(--body-margin-height);
	}

	.mein_profil_left { font-size: var(--font-small-size); line-height: var(--font-small-line-height); }

		/* Title length */
		.counter { position: absolute; top: 43px; right: 20px; pointer-events: none;  }
		.counter_textarea { position: absolute; bottom: -21px; right: 20px; pointer-events: none;  }
		#veranstaltung_title.bad .counter { color: orange !important; }
		#veranstaltung_title.verybad input { border-color: red !important; }
		#veranstaltung_title.verybad .counter { color: red !important; }



.super-table-row,
.user-table-row  {
	display: grid; grid-template-columns: 1fr 110px; gap: 10px; align-items: center;
	margin-bottom: var(--font-small-line-height);
}



.asset-table-row { width: 100%; margin-bottom: 5px; }
.asset-table-row::after { clear: both; content: ""; display: table; }
.asset-table-row .asset-col { float: left; display: block; width: calc(45% - 4px); overflow: hidden; margin-right: 4px; }
.asset-table-row .asset-col input[type=file] { font-size: 18px; }
.asset-table-row .text-col { float: left; display: block; width: calc(45% - 4px); margin-right: 4px; }
.asset-table-row .delete-col { float: left; display: block; width: 6%; }

#addRow_event_file_table { margin-top: 19px; }



	.form-group { margin-top: calc(var(--body-margin-height) / 2); margin-bottom: 0px;}


	.site_radio,
	.site_checkbox { margin-top: calc(var(--font-small-line-height) / 2); }

		.site_radio label,
		.site_checkbox label {
			display: inline-block;
			width: 100%;
			margin: 0 0 calc(var(--body-margin-height) / 4) 0;
		}


	.filename {
	padding-left: 15px;
	background: url(/assets/images/file.svg) no-repeat -2px -1px transparent;
	background-size: 15px;
	color: gray;
	font-size: 14px;
	line-height: 14px;
	font-style: italic;
	}

	.matrix a {
	border-bottom: none;
	}

	table.matrix thead.matrix th.matrix {
	background: rrgba(0, 0, 0, 0.06) !important;
	}

	table.matrix thead.matrix tr.matrix-first th.matrix {
	border-top-color: rgba(0, 0, 0, 0.06) !important;
	}

	#calendar_fields a { border-bottom: none !important; }
	#calendar_select { display: none; }
	#calendar_fields *, * #calendar_fields *:before, #calendar_fields *:after {
	-moz-box-sizing: content-box; /* Firefox 1, probably can drop this */
	-webkit-box-sizing: content-box; /* Safari 3-4, also probably droppable */
	box-sizing: content-box; /* Everything else */
	}
	#calendar_new_date { margin-left: 0; }
	#calendar_fields div.rule {
	-moz-box-sizing: border-box !important; /* Firefox 1, probably can drop this */
	-webkit-box-sizing: border-box !important; /* Safari 3-4, also probably droppable */
	box-sizing: border-box !important; /* Everything else */
	width: 100% !important;
	margin-right: 0 !important;
	background: #e5e5e5 !important;
	border: none !important;
	border-radius: 0 !important;
	float: left;
	}
	#calendar_fields div.rule div.group { border-top: none; }
	#calendar_fields div.rule div.selector a { background-color: #c4c4c4; }
	#calendar_fields div.rule div.selector a.selected,
	#calendar_fields div.rule div.selector a:hover,
	#calendar_fields div.rule div.selector div.close a:hover { background-color: #a8a8a8; }
	#calendar_fields div.rule div.selector { border: none !important; }
	#calendar_fields div.rule div.selector div.item { border: none !important; }
	#calendar_fields div.rule div.rule_number { top: 0px; left: 0; background-color: #c4c4c4; border: none; }
	#calendar_fields div.rule div.rule_close { top: 0px; right: 0; background-color: #c4c4c4; border: none; }
	#calendar_fields div.rule div.selector div.close a { background-color: #c4c4c4; }
	#calendar_fields div.rule div.options { float: left !important; }
	#calendar_fields div.rule div.end select { margin-top: 0 !important; }

	.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background: #c4c4c4; }
	#ui-datepicker-div { border: var(--input-border); display: none; }

	.ui-widget-content { background: var(--color-brand); }
	.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-radius: 0; }
	.ui-datepicker { display: block; }
	.ui-datepicker .ui-datepicker-header { background: transparent; border: none; height: 38px; }
	.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { border-bottom: none; }
	.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { margin-top: 0; }
	.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { /* width: 25%; */ }
	.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
		border: none;
		background: transparent;
	}
	.ui-helper-hidden-accessible { clip: auto !important; }
	a.ui-datepicker-prev ui-corner-all { border: none; }



	.legacy {
		position: relative;
		padding: .75rem 1.25rem;
		margin-bottom: 1rem; margin-top: 1rem;
		border: none;
		border-radius: 0;
		background: var(--color-BNT);
	}


/* solspace overrides */
.form-control {
  display: block;
  width: 100%;
  height: inherit;
  padding: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background-color: #fff;
  background-clip: padding-box;
  border: var(--input-border);
  border-radius: inherit;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.ui-timepicker-input { min-width: 100px; }

/* Scroll to top */
/* ---------------------------------------------------------------------------------------------------- */

.back-to-top {
	position: fixed;
	display: inline-block;
	width: 60px; height: 60px;
	bottom: 30px;
	right: 40px;
	border-radius: calc(var(--input-border-radius) * 2);
	/* background: url(/assets/images/icons/scroll-to-top.svg) no-repeat 0 0 transparent; */
}

@media (max-width: 500px) { /* Breakpoint bp-small */
	.back-to-top { bottom: 20px; right: 10px; }
}



/* Bezahlen
/* ---------------------------------------------------------------------------------------------------- */

/* No JS Message */
#no-js-message {
	display: block;
}


/* Hide elements */
/* ---------------------------------------------------------------------------------------------------- */

@media (max-width: 500px) { /* Breakpoint bp-small */
	.hide-on-small { display: none; }
}

.hide-on-large { display: none; }

@media (max-width: 500px) { /* Breakpoint bp-small */
	.hide-on-large { display: inline-block; }
}

.hide_on_desktop,
li.hide_on_desktop { display: none !important; }

@media (max-width: 500px) { /* Breakpoint bp-nav */
	.hide_on_desktop,
	li.hide_on_desktop { display: block; }
}




/*
//
//	Blocks
//
//
------------------------------------------------------------------------------------------------------- */

	/* Call to action
	------------------------------------------------------------------------------------------------------- */
	.block_callToAction { /* margin-top: var(--body-margin-size); */ }

	.call-to-action {
		position: relative;
		padding-top: calc(1 * var(--body-margin-height));
		padding-bottom: calc(1 * var(--body-margin-height));
		font-family: var(--font-regular-family);
		font-size: var(--font-intro-size);
		line-height: var(--font-intro-line-height);
	}


	/* Block Titel
	------------------------------------------------------------------------------------------------------- */
	.titel_block.centered { text-align: center; }


	/* Block text
	------------------------------------------------------------------------------------------------------- */
	.text_block.centered { text-align: center; }


	/* Two Column Block TwoCols
	------------------------------------------------------------------------------------------------------- */
	.twoCols_block {
		margin-top: calc(1 * var(--body-margin-height));
		padding-bottom: var(--body-margin-height);
	}

		.twoCols_block.dark {
			background-color: var(--color-darker-body-background);
			padding-top: calc(1 * var(--body-margin-height));
			padding-bottom: calc(2 * var(--body-margin-height));

		}

	/* Block image / Bild Block
	------------------------------------------------------------------------------------------------------- */
	.image_full_width, .full_width_image, .img_full_width { width: 100%; height: auto; }
	.image_percentage_height { height: auto; } /* the width is set within the block */

		.ratio_image {
			width: 100%;
			background-size: contain;
			background-repeat: no-repeat;
			background-color: transparent;
			background-position: center center;
		}

		/* image alignement for inline content */
		img.left {display: inline-block; float: left; padding-right: var(--body-margin-height); padding-bottom: calc(var(--body-margin-height) / 2); }
		img.right {display: inline-block; float: right; padding-left: var(--body-margin-height); padding-bottom: calc(var(--body-margin-height) / 2); }
		img.center {display: inline-block; text-align: center;}

		.image_thumbnail { display: inline-block; width: 100%; max-width: 150px; height: auto; }


	/* Block Download/files */
	/* ---------------------------------------------------------------------------------------------------- */

	a.download.icon {
		background: url(/assets/images/icons/download.svg) no-repeat left center transparent;
		background-size: var(--body-margin-height) var(--body-margin-height);
		padding-left: 25px;
	}

	/* Block Slideshow (type thumbnails)
	//
	//
	/* ---------------------------------------------------------------------------------------------------- */

	ul.thumbnail_slideshow_container {
		list-style: none;
		font-size: 0px;
		margin-left: -2%; /* should match li left margin */
	}

	@media (max-width: 500px) { /* Breakpoint bp-small */
		ul.thumbnail_slideshow_container {
			margin-left: 0;
		}
	}

	ul.thumbnail_slideshow_container li {
		display: inline-block;
		padding: 1%;
		margin: 0 0 1% 1%;
		font-size: 16px;
		font-size: 1rem;
		vertical-align: top;
		width: 19%; /* this value + 2.5 should = 20% */
	}

	@media (max-width: 600px) { /* Breakpoint bp-medium */
		ul.thumbnail_slideshow_container li { width: 32%; }
	}

	@media (max-width: 500px) { /* Breakpoint bp-small */
		ul.thumbnail_slideshow_container li { width: 49%; }
	}

	ul.thumbnail_slideshow_container li img {
		max-width: 100%; height: auto;
	}



	/*  Line Block
	------------------------------------------------------------------------------------------------------- */
	.line { width: 100%; border-top: var(--border-white); border-left: var(--border-white); border-right: var(--border-white);  }
		.line.normal { }
		.line.bigger { border-top-width: 5px; }
		.line.grid_gap { border-top-width: var(--grid-gap); }


	/*  Line Space
	------------------------------------------------------------------------------------------------------- */
	.space { width: 100%; height: 0; background-color: var(--color-body-background);  }

	/* Block divider
	------------------------------------------------------------------------------------------------------- */
	.white_space {
		margin: 0 auto; text-align: center; height: var(--body-margin-height); padding: 0px; width: 100%; max-width: 370px;
		background: #fff;
	}


	/* Block video
	------------------------------------------------------------------------------------------------------- */
	.video_full_width_container {
		position: relative;
		aspect-ratio: 16/9;
		margin-top: var(--body-margin-height);
		background: var(--color-block-background);
	}
		.video_full_width_container iframe {
			position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;
		}

	/* Google Maps
	------------------------------------------------------------------------------------------------------- */
	.google_maps_item {
		margin-top: calc(var(--body-margin-height) * 2);
	}
		.google_maps { width:100%; height:480px; position: relative; overflow:hidden; margin-top: var(--body-margin-height); }

		/* Responsive Google Maps */
		.google_maps_full_width {
			position: relative;
			aspect-ratio: 3/4;
			  height: 0;
		 }

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

	/* Block imageImage
	------------------------------------------------------------------------------------------------------- */
 	.image_left { float:left; width: 50%; padding-right: calc(var(--body-margin-height) / 2); }

		@media screen and (max-width: 500px) {
			.image_left { float: none; width: 100%; padding-right: 0; }
		}

	.image_right { float:left; width: 50%; padding-left: calc(var(--body-margin-height) / 2); }

		@media screen and (max-width: 500px) {
			.image_left { float: none; width: 100%; padding-left: 0; }
		}

	/* Block infoText - special Message */
	/* ---------------------------------------------------------------------------------------------------- */

	.message {
		background: var(--color-light-gray);
		color: var(--color-text);
		padding: var(--body-margin-height);
		margin-top: calc(var(--body-margin-height) * 1);
		border-radius: var(--input-border-radius);
	}

	.message h2,
	.message h3 {
		margin-top: calc(var(--body-margin-height) / 2);
		/* text-transform: uppercase; */
	}

	.message p, .message ul {
		font-family: var(--font-regular-family);
		font-size: var(--font-sub-nav-size);
		line-height: var(--font-sub-nav-line-height);
		margin-top: calc(var(--body-margin-height) / 2);
	}

	.message p:last-child {
		margin-bottom: 0;
	}

	.message a {
		color: var(--color-brand);
	}

	/* Icon message */
	.message.icon {
		display: table;
		width: 100%;
	}

	.message.icon .message_icon,
	.message.icon .message_content {
		display: table-cell;
		vertical-align: middle;
	}

	.message.icon .message_icon {
		width: 80px;
		background: url(/assets/images/icons/speaker-icon-black.svg) no-repeat left center transparent;
		background-size: 70%;
	}

	.message.icon .message_content {
		width: calc(100% - 80px);
	}

	@media (max-width: 500px) { /* Breakpoint bp-small */
		.message.icon {
			display: block;
		}

		.message.icon .message_icon {
			display: none;
		}

		.message.icon .message_content {
			display: block;
			vertical-align: top;
			width: 100%;
		}
	}

	/* Colored Variants */
	.message.red,
	.message.error,
	.message.success,
	.message.green {
		background: var(--color-brand);
		color: var(--color-white);
	}

	.message.red h2,
	.message.red a,
	.message.error h2,
	.message.error a,
	.message.success h2,
	.message.success a,
	.message.green h2,
	.message.green a {
		color: var(--color-white);
	}

	.message.red a:hover,
	.message.error a:hover,
	.message.success a:hover,
	.message.green a:hover {
		text-decoration: underline;
	}

	.message.red.icon .message_icon,
	.message.error.icon .message_icon,
	.message.success.icon .message_icon,
	.message.green.icon .message_icon {
		background-image: url(/assets/images/icons/speaker-icon-white.svg);
	}

	.message .btn {
		font-size: var(--font-h3-size); line-height: var(--font-h3-line-height);
		padding: calc(var(--body-margin-height) / 2) calc(var(--body-margin-height) * 1);
  padding-bottom: calc(var(--body-margin-height) / 2 - 6px);
	}


/* Specials
----------------------------------------------------------------------------------------------------*/

	/* Pagination

		.pagination { display: block; margin-top: calc(3 * var(--body-margin-height)); }
		.pagination .page { display: inline-block; padding: 10px 20px; border: 1px solid var(--color-brand); background: var(--color-brand); color: #fff; }
		.pagination .page.active, .page:hover { background: var(--color-text); border: 1px solid var(--color-text); color: #fff; }
	------------------------------------------------------------------------------------------------------- */
	.pagination {
		display: flex;
		justify-content: space-between;
		align-items: center; /* optional, für vertikale Zentrierung */
		width: 100%;
		margin-top: calc(3 * var(--body-margin-height));
	}
		.page { padding-left: 3px; padding-right: 3px; }
		a.page { text-decoration: none; }
		a.page:hover { font-family: var(--font-bold-family); cursor: pointer; }

		.page.arrow_left, .page.arrow_right {
			font-family: var(--font-bold-family);
			background-repeat: no-repeat;
			background-size: 12px;
			background-position-y: center;
		}
			.page.arrow_left {
				background-image: url(/assets/images/arrows/arrow-left.svg);
				padding-left: 30px; background-position-x: left;
				margin-right: calc(0.5 * var(--body-margin-height));
			}
			.page.arrow_right {
				background-image: url(/assets/images/arrows/arrow-right.svg);
				padding-right: 30px; background-position-x: right;
				margin-left: calc(0.5 * var(--body-margin-height));
			}

		.pagination-pages { }
		.pagination-prev-next { }

	/* Hide
	------------------------------------------------------------------------------------------------------- */
	.hidden, .hide { display: none; }
	.visible { display: block; }
	.hide-text { font: 0/0 a; text-shadow: none; color: transparent; }

	/* Blockquote
	------------------------------------------------------------------------------------------------------- */
	blockquote { appearance: none; display: block; margin-top: var(--body-margin-height); background: var(--color-block-background); padding: var(--body-margin-height); text-align: center; }
		blockquote p { font-family: var(--font-title-family); font-size: var(--font-size); line-height: var(--bod); }
		blockquote cite { font-style: italic; }

	/* Tags
	------------------------------------------------------------------------------------------------------- */
	a.tag { background: #999; padding: 3px 5px; white-space: nowrap; border-radius: var(--border-radius); border-bottom: none!important; color: white; }
	a:hover.tag { background: var(--color-link); }

	/* Alignement
	------------------------------------------------------------------------------------------------------- */
	.align_right { text-align: right; }
		@media (max-width: 500px) { /* Breakpoint bp-small */
			.align_right { text-align: left; }
		}
	.align_center, .center { text-align: center; }
		@media (max-width: 500px) { /* Breakpoint bp-small */
			.align_center { text-align: left; }
		}
	.align_left { text-align: left; }
	.table_right { text-align: right; white-space: nowrap; }
	.padding_right { padding-right: 25px; }


	/* Text Styles
	------------------------------------------------------------------------------------------------------- */
	.uppercase {text-transform: uppercase;}
	.small { font-size: var(--font-small-size); line-height: var(--font-small-line-height); }
	.ident { padding-left: 15px; }

	/* Margin/Padding Top Classes
	------------------------------------------------------------------------------------------------------- */
	.margin_top, .main_format .margin_top {margin-top: var(--body-margin-height);}
	.mini_margin_top, .main_format .mini_margin_top { margin-top: calc(var(--body-margin-height) / 4); }
	.tiny_margin_top, .main_format .tiny_margin_top {margin-top: calc(var(--body-margin-height) / 3);}
	.small_margin_top, .main_format .small_margin_top {margin-top: calc(var(--body-margin-height) / 2);}
	.big_margin_top, .main_format .big_margin_top {margin-top: calc(var(--body-margin-height) * 2);}
	.very_big_margin_top, .main_format .very_big_margin_top {margin-top: calc(var(--body-margin-height) * 3);}
	.medium_margin_top, .main_format .medium_margin_top {margin-top: calc(var(--body-margin-height) * 1.2);}
	.huge_margin_top, .main_format .huge_margin_top {margin-top: calc(var(--body-margin-height) * 5);}
	.no_margin_top, .main_format .no_margin_top {margin-top: 0px!important;}

	.padding_top, .main_format .padding_top {padding-top: var(--body-margin-height);}
	.tiny_padding_top, .main_format .tiny_padding_top {padding-top: calc(var(--body-margin-height) / 3);}
	.small_padding_top, .main_format .small_padding_top {padding-top: calc(var(--body-margin-height) / 2);}
	.big_padding_top, .main_format .big_padding_top {padding-top: calc(var(--body-margin-height) * 2);}
	.very_big_padding_top, .main_format .very_big_padding_top {padding-top: calc(var(--body-margin-height) * 3);}
	.medium_padding_top, .main_format .medium_padding_top {padding-top: calc(var(--body-margin-height) * 1.2);}
	.huge_padding_top, .main_format .huge_padding_top {padding-top: calc(var(--body-margin-height) * 5);}
	.no_padding_top, .main_format .no_padding_top {padding-top: 0px!important;}

	/* Margin/Padding Bottom Classes
	------------------------------------------------------------------------------------------------------- */
	.margin_btm, .main_format .margin_btm {margin-bottom: var(--body-margin-height);}
	.mini_margin_btm, .main_format .mini_margin_btm { margin-bottom: calc(var(--body-margin-height) / 4); }
	.tiny_margin_btm, .main_format .tiny_margin_btm {margin-bottom: calc(var(--body-margin-height) / 3);}
	.small_margin_btm, .main_format .small_margin_btm {margin-bottom: calc(var(--body-margin-height) / 2);}
	.big_margin_btm, .main_format .big_margin_btm {margin-bottom: calc(var(--body-margin-height) * 2);}
	.very_big_margin_btm, .main_format .very_big_margin_btm {margin-bottom: calc(var(--body-margin-height) * 3);}
	.medium_margin_btm, .main_format .medium_margin_btm {margin-bottom: calc(var(--body-margin-height) * 1.2);}
	.huge_margin_btm, .main_format .huge_margin_btm {margin-bottom: calc(var(--body-margin-height) * 5);}
	.no_margin_btm, .main_format .no_margin_btm {margin-bottom: 0px!important;}

	.padding_btm, .main_format .padding_btm {padding-bottom: var(--body-margin-height);}
	.tiny_padding_btm, .main_format .tiny_padding_btm {padding-bottom: calc(var(--body-margin-height) / 3);}
	.small_padding_btm, .main_format .small_padding_btm {padding-bottom: calc(var(--body-margin-height) / 2);}
	.big_padding_btm, .main_format .big_padding_btm {padding-bottom: calc(var(--body-margin-height) * 2);}
	.very_big_padding_btm, .main_format .very_big_padding_btm {padding-bottom: calc(var(--body-margin-height) * 3);}
	.medium_padding_btm, .main_format .medium_padding_btm {padding-bottom: calc(var(--body-margin-height) * 1.2);}
	.huge_padding_btm, .main_format .huge_padding_btm {padding-bottom: calc(var(--body-margin-height) * 5);}
	.no_padding_btm, .main_format .no_padding_btm {padding-bottom: 0px!important;}

	/* NO Margin/Padding Bottom Classes
	------------------------------------------------------------------------------------------------------- */
	.no_margin_top {margin-top: 0!important;}
	.no_margin_btm {margin-bottom: 0!important;}
	.no_padding_top { padding-top: 0!important; }
	.no_padding_btm { padding-bottom: 0!important; }

	.no_wrap { white-space: nowrap!important; }
	.no_margin, .nomargin {margin-top: 0;}

	/* Special Paddings/Margins
	------------------------------------------------------------------------------------------------------- */
	.padding_left { padding-left: var(--body-margin-height); }
	.padding_right { padding-right: var(--body-margin-height); }
	.big_padding_left { padding-left: calc(var(--body-margin-height) * 2); }
	.big_padding_right { padding-right: calc(var(--body-margin-height) * 2); }

	.inline { display: inline-block; }
	/* Clear Floated Elements
	----------------------------------------------------------------------------------------------------*/
	.clearfix::after { clear: both; content: ""; display: table; }


	/* hide / show stuff
	----------------------------------------------------------------------------------------------------*/
	/* Versteckt das Element auf Desktop-Bildschirmen (ab 992px) */
	.hide_on_desktop { display: none; }
		@media (max-width: 800px) {
			/* Zeigt das Element auf kleineren Bildschirmen */
			.hide_on_desktop { display: inherit; }
		}

	/* Versteckt das Element auf mobilen Bildschirmen (bis 991px) */
	.hide_on_mobile { display: inherit; }

		@media (max-width: 800px) {
			/* Versteckt das Element auf mobilen Bildschirmen */
			.hide_on_mobile { display: none; }
		}

	.hyphen { word-break: break-word; hyphens: auto; }
	.break { word-break: break-word; }

	/* Truncate Text
	----------------------------------------------------------------------------------------------------*/
	.ellipsis  { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; }
	.no_wrap { white-space: nowrap; }

	a.modalbox_edit, a.admin_link { color : #fff!important; background: #999!important; font-size: 11px; padding: 2px 6px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; /* future proofing */ -khtml-border-radius: 3px; /* for old Konqueror browsers */ text-decoration: none;}
	a:hover.modalbox_edit, a:hover.admin_link { color : #fff; background: #333!important; text-decoration: none;}


	.success { color: var(--color-success); }
	.error, .errors { color: var(--color-error); }

	.uppercase {text-transform: uppercase!important;}



/* Choice of Email client
------------------------------------------------------------------------------------------------------- */

/* Overlay background with blur effect */
.email-overlay {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); /* Dark background with transparency */
  backdrop-filter: blur(5px); /* Blur effect */
  display: none; /* Hidden by default */
  justify-content: center;
  align-items: center;
}

/* Popup box */
.email-popup {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  max-width: 300px;
  width: 100%;
  animation: fadeIn 0.3s ease-in-out;
}


.email-popup h3 {
  margin-bottom: 15px;
  font-size: 20px;
  line-height: 28px;
  display: block;
  border-radius: 8px;
}

.email-icon {
	display: inline-block;
	margin: 10px 0;
	text-decoration: none;
	font-size: 18px;
	transition: color 0.2s;
	padding-left: 27px;
	background-repeat: no-repeat; background-color: transparent;
	background-position: left center;
	background-size: 21px;
}
	.email-icon.gmail { background-image: url(/assets/images/email-icons/gmail.svg); }
	.email-icon.outlook { background-image: url(/assets/images/email-icons/outlook.svg); }
	.email-icon.yahoo { background-image: url(/assets/images/email-icons/yahoo.svg); }
	.email-icon.mail { background-image: url(/assets/images/email-icons/mail.svg); }

/* Simple fade-in animation for popup */
@keyframes fadeIn {
  from {
	opacity: 0;
	transform: scale(0.9);
  }
  to {
	opacity: 1;
	transform: scale(1);
  }
}



/* Admin Elements */
/* ---------------------------------------------------------------------------------------------------- */

a.modalbox_1,
a.modalbox_edit {
  display: inline-block;
  margin-top: calc(var(--body-margin-height) / 2);
  margin-bottom: calc(var(--body-margin-height) / 2);
  font-size: var(--font-small-size);
  line-height: var(--font-small-line-height);
  padding: 6px 12px;
  background: var(--color-brand-hover);
  color: var(--color-text);
  border-bottom: none;
  border-radius: 8px;
}


a:hover.modalbox_1,
a:hover.modalbox_edit {
	background: var(--color-brand);
	text-decoration: none;
}