/* =====================================================================================================================
 * All elements
 ==================================================================================================================== */
html, body{
	height:100%;
}
body{
	padding:0;
	margin:0;
	height:100vh;
}
figure,
p,
pre{
	margin:0;
}
a{
	cursor:pointer;
}
.texttooltip {
	cursor: help;
}

.download img {
	width: 1em;
	height: 1em;
	vertical-align: middle;
	margin-right: 0.4em;
}
.feicon {
	height:1.5em;
	width:1.5em;
	stroke-width:2px;
	stroke-linecap:round;
	stroke-linejoin:round;
}
.feicon1 {
	height:1em;
	width:1em;
	margin-right:0.2em;
	stroke-width:2px;
	stroke-linecap:round;
	stroke-linejoin:round;
}


.msg-icon {
	height:3em;
	width:3em;
}

/* =====================================================================================================================
 * All contents
 ==================================================================================================================== */
.block > div{
	position:relative;
}
.imgzoom img,
.galleryslider img{
	cursor:pointer;
}
.notification .ui-dialog-titlebar{
	display:none;
}
.notification{
	position:fixed;
}
.height10max{
	max-height:10vh !important;
}
.height20max{
	max-height:20vh !important;
}
.height30max{
	max-height:30vh !important;
}
.height40max{
	max-height:40vh !important;
}
.height50max{
	max-height:50vh !important;
}
.height60max{
	max-height:60vh !important;
}
.height70max{
	max-height:70vh !important;
}
.height80max{
	max-height:80vh !important;
}
.height90max{
	max-height:90vh !important;
}
.height100max{
	max-height:100vh !important;
}
.height10abs{
	height:10vh !important;
}
.height20abs{
	height:20vh !important;
}
.height30abs{
	height:30vh !important;
}
.height40abs{
	height:40vh !important;
}
.height50abs{
	height:50vh !important;
}
.height60abs{
	height:60vh !important;
}
.height70abs{
	height:70vh !important;
}
.height80abs{
	height:80vh !important;
}
.height90abs{
	height:90vh !important;
}
.height100abs{
	height:100vh !important;
}

.ui-dialog-titlebar-hidden{
	display:none;
}

/* =====================================================================================================================
 * Login dialog
 ==================================================================================================================== */
.loginlogo {
	text-align:center;
	padding:2em;
	font-weight:bold;
}
.logininput > .inputblock {
	margin-bottom:1em;
}

/* =====================================================================================================================
 * Checkboxes and radio buttons
 ==================================================================================================================== */
input.mycheckbox-origin{
	/*display:none;*/
	position:absolute;
	opacity:0;
	pointer-events:none;
}

input.mycheckbox-origin + label{
	display:inline-flex;
}

.mycheckbox-checkbox{
	border:0;
	padding:0.1em;
	background-color:#eee;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:1em;
	height:1em;
	cursor:pointer;
	margin-right:0.3em;
}

.mycheckbox-icon,
.mycheckbox-iconempty,
.mycheckbox-icondisabled{
	width:1em;
	height:1em;
	display:none;
}

input.mycheckbox-origin:checked + label .mycheckbox-checkbox .mycheckbox-icon{
	display:block;
}
input.mycheckbox-origin:not(:checked):not(:disabled) + label .mycheckbox-checkbox .mycheckbox-iconempty{
	display:block;
}
input.mycheckbox-origin:not(:checked):disabled + label .mycheckbox-checkbox .mycheckbox-icondisabled{
	display:block;
}

/* =====================================================================================================================
 * Radio buttons
 ==================================================================================================================== */
.myradio-fieldset .mycheckbox-checkbox{
	border-radius:50%;
}

.myradio-fieldset label{
	margin-right:1em;
}

/* =====================================================================================================================
 * Header
 ==================================================================================================================== */
.header{
	max-width:none;
	width:100%;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	padding-left:0;
	padding-right:0;
	z-index:0;
	display:flex;
	margin-bottom:1em;
}
.header h1{
	position:absolute;
	left:0;
	padding:0.5em 3em 0.5em;
	width:calc(100% - 6em);
	margin:0;
}
.header h1 a{
	text-decoration:none;
}
.header .headline{
	width:100%;
	position:absolute;
	bottom:0;
	background:rgba(0, 0, 0, .5);
}
.header figure.background{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	margin:0;
	display:block;
	z-index:-1;
}
.header figure.background img,
.header figure.background video{
	width:100%;
	max-width:100%;
	display:block;
	margin:0 auto;
	border-style:none;
	overflow-clip-margin:content-box;
	overflow:clip;
	object-fit:cover;
}
.header figure.profile{
	display:none;
}

@media screen and (max-width:48em){
	.header h1{
		padding:0.5em 1em 0.5em;
		width:calc(100% - 2em);
		font-size:150%;
		white-space:nowrap;
	}
}

@media screen and (max-width:1024px){
	.ui-dialog .inputblock.inputempty{
		display:none;
	}
}

/* =====================================================================================================================
 * Center Menu
 ==================================================================================================================== */
header h1 .centermenu,
header h1 .socialmedia {
	float:right;
	cursor:pointer;
	z-index:9999;
	height:1em;
	width:1em;
	margin-left:0.2em;
	stroke-width:2px;
	stroke-linecap:round;
	stroke-linejoin:round;
}
.centermenu-content {
	display:none;
	right:0;
	position:absolute;
	list-style-type:none;
	margin:0;
	padding:0;
	background-color:gray;
	color:black;
	overflow:auto;
	max-width:90%;
	font-weight:normal;
}
.centermenu-content > li {
	padding:0.5em 5em 0.5em 1em;
	cursor:pointer;
	font-size:1.2em;
}

@media screen and (max-width:1023px){
	.centermenu-content{
		width:100%;
	}
}

/* =====================================================================================================================
 * Content
 ==================================================================================================================== */
.wrapper{
	display:flex;
	flex-direction:column;
	min-height:100vh;
}
.content{
	padding:0;
	margin: 0 auto;
	flex: 1;
	width:100%;
}
.flex{
	position:relative;
	max-width:1024px;
	margin:auto;
	display:flex;
	flex-wrap:wrap;
	padding-top:0;
	clear:both;
}
.flex > div,
.flex > figure{
	width:100%;
}
figure.fleximg,
.multiplechoice .fleximg{
	text-align:center;
}
.flex > div.back,
.flex > div.archive{
	border-radius:inherit;
	background-color:inherit;
	box-shadow:inherit;
	width:100%;
}
.flex p,
.flex div.copyright,
.flex h2,
.flex h3,
.flex h4,
.flex h5,
.flex h6{
	margin:0;
	padding:1em;
}
.flex h2{
	font-size:1.3em;
}
.flex h3{
	font-size:1.2em;
}
.flex h4{
	font-size:1.1em;
}
.flex h5,
.flex h6{
	font-size:1em;
}
.center {
	text-align:center;
}
.flex p,
.flex div.copyright{
	padding:0.5em 1em;
}
.flex .element{
	display:flex;
	flex-direction:column;
}
.flex .element:has( > .fulltextbtn){
	padding-bottom:2em;
}
.flex.event div:has(.fulltextbtn){
	padding-bottom:1.2em;
}
.flex .element.sliderelement .fulltextbtn{
	display:none;
}
.flex .element .fulltextbb{
	display:none;
}
.flex .element p:has(> a.fulltextbb){
	margin-top:0;
	padding:0;
}
.flex .element p ~ p:has(> a.fulltextbb){
	margin-top:1em;
}
.flex .sliderelement .fulltextbb{
	display:inline-block;
	padding:0.5em;
}
.flex .sliderelement .fulltextbb:hover{
	text-decoration:none;
}
figcaption .fulltextbtn{
	padding:1em;
}
figcaption div + .fulltextbtn{
	padding-top:0;
}
figcaption .fulltextbtn span + span{
	display:none;
}
.element .fulltextbtn .fulltextbtnurl span:last-child,
.event .fulltextbtn .fulltextbtnurl span:last-child{
	position:absolute;
	right:1em;
}
.element .fulltextbtn,
.event .fulltextbtn{
	position:absolute;
	bottom:0;
	display:inline-block;
	width:100%;
}
.element .fulltextbtn a,
.event .fulltextbtn a{
	padding:0.5em 1em;
	display:block;
	width:calc(100% - 2em);
}
.element .fulltextbtn a:hover,
.event .fulltextbtn a:hover{
	text-decoration:none;
}
.flex p:first-child{
	margin-top:0.5em;
}
.flex .audio + div p:first-child{
	margin-top:0;
}
.flex p:last-child{
	padding-bottom:1em;
}
.flex > div{
	width:calc(100%);
}

.flex > div.img img{
	max-width:100%;
	max-height:90vh;
	overflow:auto;
}
.flex figure.fleximg{
	position:relative;
	bottom:0;
}
.flex.block{
	min-height:3em;
	margin-bottom:1em;
}

@media screen and (min-width:1024px){
	
	.flex.flex2 .flex2cols,
	.flex.flex2 .flex3cols,
	.flex.flex2 .flex4cols,
	.flex.flex2 .flex5cols,
	.flex.flex2 .flex6cols,
	.ui-dialog fieldset.flex.flex2 .flex2cols,
	.ui-dialog fieldset.flex.flex2 .flex3cols,
	.ui-dialog fieldset.flex.flex2 .flex4cols,
	.ui-dialog fieldset.flex.flex2 .flex5cols,
	.ui-dialog fieldset.flex.flex2 .flex6cols{
		width:100%;
	}
	
	.flex.flex3 .flex2cols{
		width:calc(66.66% - 0.40em);
	}
	
	.flex.flex3 .flex3cols,
	.flex.flex3 .flex4cols,
	.flex.flex3 .flex5cols,
	.flex.flex3 .flex6cols,
	.ui-dialog fieldset.flex.flex3 .flex3cols,
	.ui-dialog fieldset.flex.flex3 .flex4cols,
	.ui-dialog fieldset.flex.flex3 .flex5cols,
	.ui-dialog fieldset.flex.flex3 .flex6cols{
		width:calc(100%);
	}
	
	.flex.flex4 .flex2cols{
		width:calc(50% - 0.5em);
	}
	
	.flex.flex4 .flex3cols{
		width:calc(75% - 0.3em);
	}
	
	.flex.flex4 .flex4cols,
	.flex.flex4 .flex5cols,
	.flex.flex4 .flex6cols,
	.ui-dialog fieldset.flex.flex4 .flex4cols,
	.ui-dialog fieldset.flex.flex4 .flex5cols,
	.ui-dialog fieldset.flex.flex4 .flex6cols{
		width:calc(100%);
	}
	
	.flex2 > div,
	.flex2 > figure,
	/*.content:not(.archive):not(.fulltext) .flex .flex2,*/
	.ui-dialog fieldset.flex2 > div,
	.ui-dialog fieldset.flex .flex2{
		width:calc(50% - 0.5em);
	}
	
	.flex3 > div,
	.flex3 > figure,
	/*.content:not(.archive):not(.fulltext) .flex .flex3,*/
	.ui-dialog fieldset.flex3 > div,
	.ui-dialog fieldset.flex .flex3{
		width:calc(33.33% - 0.67em);
	}
	
	.flex4 > div,
	.flex4 > figure,
	/*.content:not(.archive):not(.fulltext) .flex .flex4,*/
	.ui-dialog fieldset.flex4 > div,
	.ui-dialog fieldset.flex .flex4{
		width:calc(25% - 0.75em);
	}
	
	.flex5 > div,
	.flex5 > figure,
	/*.content:not(.archive):not(.fulltext) .flex .flex5*/
	.ui-dialog fieldset.flex5 > div,
	.ui-dialog fieldset.flex .flex5{
		width:calc(20% - 0.8em);
	}
	
	.flex.flex5 .flex2cols{
		width:calc(40% - 0.6em);
	}
	
	.flex.flex5 .flex3cols{
		width:calc(60% - 0.4em);
	}
	
	.flex.flex5 .flex4cols{
		width:calc(80% - 0.2em);
	}
	
	.flex.flex5 .flex5cols,
	.flex.flex5 .flex6cols{
		width:100%;
	}
	
	.flex6 > div,
	.flex6 > figure,
	/*.content:not(.archive):not(.fulltext) .flex .flex6,*/
	.ui-dialog fieldset.flex6 > div,
	.ui-dialog fieldset.flex .flex6{
		width:calc(16% - 0.41em);
	}
	
	.flex6 .flex2cols{
		width:calc(33% - 0.44em);
	}
	
	.flex6 .flex3cols{
		width:calc(50% - 0.5em);
	}
	
	.flex6 .flex4cols{
		width:calc(67% - 0.54em);
	}
	
	.flex6 .flex5cols{
		width:calc(84% - 0.59em);
	}
	
	.flex.flex6 .flex6cols{
		width:100%;
	}
}

@media screen and (max-width:1024px){
	.flex{
		margin:0 1em;
	}
}

/* =====================================================================================================================
 * Share buttons
 ==================================================================================================================== */
.share-block {
	text-align:right;
	padding:0.5em;
}
.share-element {
	cursor:pointer;
}
.share-element svg {
	width:1.2em;
	height:1.2em;
	margin-right:0.2em;
	stroke-width:2px;
	stroke-linecap:round;
	stroke-linejoin:round;
}

/* =====================================================================================================================
 * Images
 ==================================================================================================================== */
.flex figure.fleximg figcaption.figcaptionbottomright,
.flex figure.fleximg figcaption.figcaptionbottomleft,
.flex figure.fleximg figcaption.figcaptiontopright,
.flex figure.fleximg figcaption.figcaptiontopleft,
.flex figure.fleximg figcaption.figcaptiontop,
.flex figure.fleximg figcaption.figcaptionright,
.flex figure.fleximg figcaption.figcaptionbottom,
.flex figure.fleximg figcaption.figcaptionleft,
.flex figure.fleximg figcaption.figcaptionmiddle,
.header figure.background figcaption.figcaptionbottomright,
.header figure.background figcaption.figcaptionbottomleft,
.header figure.background figcaption.figcaptiontopright,
.header figure.background figcaption.figcaptiontopleft,
.header figure.background figcaption.figcaptiontop,
.header figure.background figcaption.figcaptionright,
.header figure.background figcaption.figcaptionbottom,
.header figure.background figcaption.figcaptionleft,
.header figure.background figcaption.figcaptionmiddle{
	position:absolute;
	margin:0.5em;
}
.flex figure.fleximg figcaption.figcaptionbottomright,
.header .background figcaption.figcaptionbottomright{
	bottom:0;
	right:0;
}
.flex figure.fleximg figcaption.figcaptionbottomleft,
.header .background figcaption.figcaptionbottomleft{
	bottom:0;
	left:0;
}
.flex figure.fleximg figcaption.figcaptiontopright,
.header .background figcaption.figcaptiontopright{
	top:0;
	right:0;
}
.flex figure.fleximg figcaption.figcaptiontopleft,
.header .background figcaption.figcaptiontopleft{
	top:0;
	left:0;
}
.flex figure.fleximg figcaption.figcaptionbottom,
.header .background figcaption.figcaptionbottom{
	/*text-align:center;*/
	bottom:0;
	left:0;
	right:0;
}
.flex figure.fleximg figcaption.figcaptiontop,
.header .background figcaption.figcaptiontop{
	/*text-align:center;*/
	top:0;
	left:0;
	right:0;
}
.flex figure.fleximg figcaption.figcaptionleft,
.header .background figcaption.figcaptionleft{
	/*text-align:center;*/
	writing-mode:sideways-lr;
	top:0;
	left:0;
	bottom:0;
}
.flex figure.fleximg figcaption.figcaptionmiddle,
.header .background figcaption.figcaptionmiddle{
	/*text-align:center;*/
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}
.flex figure.fleximg figcaption.figcaptionright,
.header .background figcaption.figcaptionright{
	/*text-align:center;*/
	writing-mode:vertical-rl;
	top:0;
	right:0;
	bottom:0;
}
.flex figcaption,
.header .background figcaption{
	text-align:left;
}
.imgviewer{
	background:#333 !important;
	text-align:center;
}
.imgviewer img{
	max-height:100%;
	max-width:100%;
	cursor:pointer;
}
.flex figure.fleximg img,
.flex figure.fleximg video,
.flex video{
	max-width:100%;
	max-height:90vh;
	
}
.flex figure.fleximg.fullimg a,
.flex figure.fleximg.fullimg picture img,
.flex figure.fleximg.fullimg video,
.flex .fullvideo video{
	height:100%;
	object-fit:cover;
	object-position:center bottom;
}
.flex figure.fleximg.fleximgembedded img,
.flex figure.fleximg.fleximgembedded video{
	border-radius:inherit;
}
.flex figcaption,
.header .background figcaption{
	padding:0.5em 1em;
	font-size:0.9em;
}
.flex .footnote{
	font-size:0.8em;
}
.flex{
	row-gap:1em;
	column-gap:1em;
}

/* =====================================================================================================================
 * Headline element
 ==================================================================================================================== */
div.headline{
	position:relative;
	height:100%;
	max-width:100%;
	display:block;
	margin:0 auto;
	border-style:none;
	overflow-clip-margin:content-box;
	overflow:clip;
	object-fit:cover;
}
.header,
div.headline{
	margin-bottom:1em;
	position:relative;
}
div.headline > div > div{
	display:flex;
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
}
div.headline > div > div > p,
div.headline > div > div > h2{
	position:relative;
	width:1024px;
	max-width:1024px;
	margin:auto;
	padding:1em;
	font-size:1.4em;
	font-weight:bold;
}
div.headline img,
div.headline video{
	width:100%;
}
img.imgfocustopleft,
video.imgfocustopleft{
	object-fit:cover;
	object-position:0 0;
}
img.imgfocustopcenter,
video.imgfocustopcenter{
	object-fit:cover;
	object-position:50% 0;
}
img.imgfocustopright,
video.imgfocustopright{
	object-fit:cover;
	object-position:100% 0;
}
img.imgfocusmiddleleft,
video.imgfocusmiddleleft{
	object-fit:cover;
	object-position:0 50%;
}
img.imgfocusmiddlecenter,
video.imgfocusmiddlecenter{
	object-fit:cover;
	object-position:50% 50%;
}
img.imgfocusmiddleright,
video.imgfocusmiddleright{
	object-fit:cover;
	object-position:100% 50%;
}
img.imgfocusbottomleft,
video.imgfocusbottomleft{
	object-fit:cover;
	object-position:0 100%;
}
img.imgfocusbottomcenter,
video.imgfocusbottomcenter{
	object-fit:cover;
	object-position:50% 100%;
}
img.imgfocusbottomright,
video.imgfocusbottomright{
	object-fit:cover;
	object-position:100% 100%;
}

/* =====================================================================================================================
 * History back element
 ==================================================================================================================== */
p.back{
	text-align:center;
}

/* =====================================================================================================================
 * Footer
 ==================================================================================================================== */
.footer{
	position:relative;
}
.footer .footer1{
	position:relative;
	text-align:center;
	padding:1em;
}

/* =====================================================================================================================
 * Countdown
 ==================================================================================================================== */
.countdown{
	margin-bottom:0.5em;
}
.countdown .countdown_inner{
	padding:0 1em;
	white-space:nowrap;
}
.countdown .countdown_inner > div{
	padding:0.6em;
	margin:0.1em;
	vertical-align:middle;
	text-align:center;
	border-radius:0.5em;
	float:left;
	width:30px;
}
.countdown .countdown_inner .meta{
	font-size:50%;
}
.countdown .clear{
	clear:both;
}

/* =====================================================================================================================
 * Audio player
 ==================================================================================================================== */
audio{
	width:calc(100% - 1em);
	margin:0.5em;
}

/* =====================================================================================================================
 * Calendar list
 ==================================================================================================================== */
.event .title{
	font-weight:bold;
}
.event .time{
	display:none;
}
.eventgroup{
	font-weight:bold;
}

/* =====================================================================================================================
 * Slider gallery
 ==================================================================================================================== */
.slidergallery figure{
	display:inline-block;
	text-align:center;
	margin:0 auto;
}
.flex .element.hidden,
.slidergallery .hidden,
.multiplechoice .hidden,
.form .hidden{
	display:none;
}
.slidergallery .btn{
	z-index:1000;
	position:absolute;
	top:50%;
}
.slidergallery button.nav{
	font-size:2em;
	padding:0.2em 0.5em;
	border:none;
	background-color:rgba(255, 255, 255, 0.5);
	cursor:pointer;
}
.slidergallery button.nav:hover{
	background-color:rgba(255, 255, 255, 0.9);
}
.slidergallery .prev{
	left:0;
}
.slidergallery .next{
	right:0;
}
.slidergallery .imgcnt{
	position:absolute;
	top:0;
	right:0.2em;
	background-color:rgba(255, 255, 255, 0.8);
	padding:0.5em;
}
.slidergallery .img > div{
	position:relative;
}
.slidergallery:not(.slidergallerycontent) .img,
.slidergallerycontent .img .sliderelement:has(.fullimg){
	text-align:center;
}
.slidergallerycontent .img .sliderelement:not(:has(.fullimg)){
	text-align:inherit;
}
.flex .element.sliderelementactive{
	display:flex;
	flex-direction:row;
}
.slidergallerycontent .img .navbar{
	text-align:center;
}
.slidergallery .navbar{
	padding-top:0.5em;
	padding-bottom:0.5em;
}
.slidergallery .navbar span{
	width:0.6em;
	height:0.6em;
	border-radius:0.5em;
	display:inline-block;
	margin:0.2em;
	cursor:pointer;
}
.slidergallery .navbar span.active{
	width:2em;
	height:0.6em;
}
.slidergallery .timeoutbar{
	height:0.4em;
}
.slidergallery .timeoutbar div.timeout{
	width:0;
	height:100%;
}

@media screen and (min-width:1025px){
	.slidergallerycontent .sliderelement{
		clear:both;
	}
	
	.slidergallerycontent .sliderelement figure:not(.fullimg){
		max-width:33%;
		margin-right:1em;
	}
	
	.slidergallerycontent .navbar,
	.slidergallerycontent .timeoutbar{
		clear:both;
	}
}

/* =====================================================================================================================
 * Image / Calendar download
 ==================================================================================================================== */
.event > div{
	position:relative;
}
.event .icaldownload,
.sportbooking-event .icaldownload,
figure .imgdownloadcontainer{
	position:absolute;
	top:0.2em;
	right:0.2em;
}
figure .imgdownload,
.event .icaldownload,
.sportbooking-event .icaldownload,
.imgdownloadcontainer .mycheckbox-checkbox{
	background:rgba(255, 255, 255, 0.4);
	padding:0.2em;
	cursor:pointer;
}
figure .imgdownload:hover,
.event .icaldownload:hover,
.sportbooking-event .icaldownload:hover,
.imgdownloadcontainer .mycheckbox-checkbox:hover{
	background:rgba(255, 255, 255, 0.8);
}
figure .imgdownloadcontainer{
	display:flex;
}
.imgdownloadcontainer > span,
.imgdownloadcontainer > label{
	margin-left:0.2em;
}
.imgdownloadcontainer .mycheckbox-checkbox{
	width:24px;
	height:24px;
	margin-right:0;
}

.gallery:has(.imgdownloadmultiple:checked) .imgdownloadsinglebtn{
	display:none;
}
.gallery .imgdownloadmultiplebtn{
	display:none;
}
.gallery:has(.imgdownloadmultiple:checked) .imgdownloadmultiplebtn{
	display:inherit;
}

/* =====================================================================================================================
 * Code
 ==================================================================================================================== */
.flex pre{
	position:relative;
	padding:0.5em 0;
}

/* =====================================================================================================================
 * Index
 ==================================================================================================================== */
div.myindex ul{
	list-style-type:none;
	margin:0;
	padding:0 0 0 1em;
}
/*div.myindex li{
}*/

/* =====================================================================================================================
 * Charts
 ==================================================================================================================== */
.chartjs{
	position:relative;
	width:100%;
}
.chart canvas{
	background-color:white;
}

/* =====================================================================================================================
 * Emojis
 ==================================================================================================================== */
.emoji{
	width:1em;
}
.emoji2{
	width:2em;
}

/* =====================================================================================================================
 * Image options
 ==================================================================================================================== */
video.imgrot90,
img.imgrot90{
	transform:rotate(90deg);
}
img.imgrot180,
video.imgrot180{
	transform:rotate(180deg);
}
img.imgrot270,
video.imgrot270{
	transform:rotate(270deg);
}
img.imgrotreflectx,
video.imgrotreflectx{
	transform:scaleX(-1);
}
img.imgrotreflecty,
video.imgrotreflecty{
	transform:scaleY(-1);
}
img.imgrotreflectxy,
video.imgrotreflectxy{
	transform:scale(-1, -1);
}

/* =====================================================================================================================
 * Open Street Map
 ==================================================================================================================== */
.osmmap{
	height:300px;
}
.osmmap a:before,
.osmmap a:after,
.osmmap a:hover{
	text-decoration:inherit;
	content:inherit;
}
.editbar_element,
.editbar_block{
	z-index:1000;
}
.editbar_submenu{
	z-index:1001;
}
.map .leaflet-control svg{
	display:none !important;
}
.map .mapmarker img.mapmarker-icon{
	width:25px;
	height:41px;
}
.map .mapmarker img.mapmarker-overlay{
	position:absolute;
	left:3px;
	top:3px;
	background-color:white;
	padding:1px;
	border-radius:100%;
	width:17px;
	height:17px;
}
/* =====================================================================================================================
 * Default layout
 ==================================================================================================================== */
.popuplayout .flex.block{
	margin-bottom:0;
}
.popuplayout .flex > div,
.popuplayout .flex > figure,
.popuplayout .flex > div.img img,
.popuplayout .flex figure.fleximg img,
.popuplayout .flex figure.fleximg video,
.popuplayout .flex video,
.popuplayout .flex figure.fleximg.fullimg a,
.popuplayout .flex figure.fleximg.fullimg img,
.popuplayout .flex figure.fleximg.fullimg video,
.popuplayout .flex .fullvideo video,
.popuplayout .chart canvas,
.popuplayout .chart canvas.withhtml,
.editor .popuplayout .block:hover,
.half .flex > div,
.half .flex > figure,
.half .flex > div.img img,
.half .flex figure.fleximg img,
.half .flex figure.fleximg video,
.half .flex video,
.half .flex figure.fleximg.fullimg a,
.half .flex figure.fleximg.fullimg img,
.half .flex figure.fleximg.fullimg video,
.half .flex .fullvideo video,
.half .chart canvas,
.half .chart canvas.withhtml,
.editor .fulltext .block:hover,
.editor .archive .block:hover{
	border-radius:inherit;
	box-shadow:inherit;
}

.youtubevideo{
	width:100%;
	height:80vh;
}

/* =====================================================================================================================
 * Tables
 ==================================================================================================================== */
table{
	width:100%;
	border-collapse:collapse;
}
table th,
table td{
	padding:0.8em;
}
table th{
	font-weight:bold;
}
table td{
	text-align:center;
}

.table-container{
	overflow:auto;
	width:100%;
	max-height:90vh;
}
.table-sticky-head thead tr:first-child{
	position:sticky;
	top:0;
	z-index:2;
}

.table-sticky-body thead tr th:first-child,
.table-sticky-body tbody td:first-child,
.table-sticky-body tbody tr th:first-child{
	position:sticky;
	left:0;
	z-index:1;
}

/* =====================================================================================================================
 * Moving text
 ==================================================================================================================== */
.marquee{
	white-space:nowrap;
	overflow:hidden;
}
.marquee > span{
	margin:0;
	padding:0 0 0 100%;
	display:inline-block;
	animation-name:animation_marquee;
	animation-timing-function:linear;
	animation-duration:10s;
	animation-iteration-count:infinite;
}
@keyframes animation_marquee{
	0%{ transform:translate(0, 0); }
	100%{ transform:translate(-100%, 0); }
}

/* =====================================================================================================================
 * Blinking text
 ==================================================================================================================== */
.blink{
	animation-name:animation_blink;
	animation-timing-function:ease-in;
	animation-duration:1s;
	animation-iteration-count:infinite;
}

@keyframes animation_blink{
	0%{ opacity:1; }
	60%{ opacity:1; }
	70%{ opacity:0; }
	90%{ opacity:0; }
	100%{ opacity:1; }
}

/* =====================================================================================================================
 * Dialogs
 ==================================================================================================================== */
.ui-dialog{
	box-shadow:0.1em 0.1em 0.5em #333;
}
.ui-widget-content{
	padding:0;
}
.ui-dialog-titlebar{
	border-radius:0;
}
.ui-dialog-disabled{
	opacity:0.5;
	pointer-events:none;
}
.ui-dialog input,
.ui-dialog select,
.ui-dialog textarea{
	width:99%;
	border:0;
	padding:0.4em;
	background-color:#eee;
}
.ui-dialog input[type=checkbox]{
	width:2em;
}
.ui-dialog fieldset > div,
.ui-dialog-content > div.inputblock{
	margin-bottom:0.5em;
	width:100%;
}
.ui-dialog .inputblock.inputplocknowrap{
	white-space:inherit;
}
.ui-dialog-content fieldset.scrollable{
	overflow:auto;
	height:calc(100% - 1em);
}
.ui-dialog fieldset.flex{
	position:relative;
	display:flex;
	flex-wrap:wrap;
}
.ui-dialog fieldset.flex{
	row-gap:1em;
	column-gap:1em;
}
body.noscroll{
	overflow:hidden;
}
.inputform form > div{
	margin-bottom:0.5em;
	padding:0 0.5em;
}

/* =====================================================================================================================
 * Dashboard layout
 ==================================================================================================================== */
.dashboard .header{
	min-height:100vh;
}
.dashboard .header figure.background img,
.dashboard .header figure.background video{
	height:100vh;
}
.header figure.profile{
	margin-top:6em;
	margin-left:2em;
	display:flex;
	/*width:100%;*/
}
.header figure.profile img{
	border-radius:100%;
}

/* =====================================================================================================================
 * Default layout
 ==================================================================================================================== */
.half .content,
.halfdashboard .content{
	max-width:1024px;
	margin:auto;
	min-height:calc(50vh - 2.9em);
}
.half .flex.block{
	margin-bottom:0;
	padding-bottom:1em;
}
.half .flex.block:last-child{
	padding-bottom:0;
}
.half .header{
	min-height:50vh;
	max-height:50vh;
	margin-bottom:0;
}
.half .header figure.background img,
.half .header figure.background video{
	height:50vh
}
.half .content,
.halfdashboard .content{
	min-height:calc(50vh - 2.9em);
}

/* =====================================================================================================================
 * Tooltip
 ==================================================================================================================== */
.mytooltip{
	background:rgba(51, 51, 51, 0.9);
	padding:0.5em;
	border:none;
	box-shadow:0 0 0.5em #333;
	font-size:0.8em;
	color:#fff;
	z-index:9999;
	max-width:300px;
	display:block;
	position:absolute;
}
.mytooltiphidden{
	display:none;
}
@media screen and (max-width:350px){
	.mytooltip{
		max-width:90%;
	}
}

/* =====================================================================================================================
 * Forms
 ==================================================================================================================== */
form{
	margin-block-end:0;
}
.flex.form,
.flex .form,
.half .flex.block.form{
	margin-bottom:0.5em;
}
.dashboard .flex.form,
.dashboard .flex .form,
.dashboard .half .flex.block.form,
.dashboard .flex .element .form,
.halfdashboard .flex.form,
.halfdashboard .flex .form,
.halfdashboard .half .flex.block.form,
.halfdashboard .flex .element .form{
	margin-bottom:0;
}
.form .url{
	word-break:break-all;
}
.flex .element .form{
	padding:0.5em;
	margin-bottom:0.5em;
}
.flex form{
	margin:0;
	margin-block:0;
}
.flex form input,
.flex form select,
.flex form textarea,
form .passwordcontainer,
.myradio-fieldset .myradio-list{
	margin-bottom:0.3em;
}
.content .embeddedform button,
.content .embeddedform input[type='button'],
.flex .form button,
.flex form input[type='button'],
.flex form input[type='submit']{
	padding:0.5em;
	cursor:pointer;
	font-size:1em;
	margin-right:0.5em;
}
.flex form input[type='text'],
.flex form input[type='password'],
.flex form input[type='date'],
.flex form input[type='tel'],
.flex form input[type='email'],
.flex form input[type='number'],
.flex form textarea,
.flex form select{
	width:100%;
	border:0;
	padding:0.4em;
	font-size:1em;
}

.content .embeddedform button,
.content .embeddedform input[type='button'],
.flex .form button,
.flex form input[type='button'],
.flex form input[type='submit']{
	border:none;
}

.flex .inputform fieldset.formfield-fieldset{
	padding:0;
	margin:calc(0.5em - 1px);
	border:1px solid;
}
.flex .inputform fieldset.formfield-fieldset > legend{
	font-weight:bold;
	margin:0 1em;
}

.flex .inputform fieldset.myradio-fieldset > legend{
	cursor:default;
}

.flex .inputform fieldset.formfield-fieldset p,
.flex .inputform fieldset.formfield-fieldset fieldset.myradio-fieldset{
	padding:0.5em;
}

.flex .inputform fieldset.myradio-fieldset.formfield-box{
	margin:0.5em 0 0 0;
	border:0;
}
.flex .inputform fieldset p.formfield-radio-list{
	padding:0;
}
.flex .inputform fieldset p.formfield-radio-description{
	padding:0.3em 0 0 0;
}

.formdownloadpw .formfielderror{
	margin:1em;
}
.survey .formerror,
.inputform .formerror,
.inputform .formfielderror,
.formdownloadpw .formfielderror,
.sportbooking .formerror{
	border:2px solid darkred;
	background-color:lightcoral;
	margin-bottom:0.2em;
}

.content > .form .formfielderror fieldset,
.content > section > .form .formfielderror fieldset,
.content div.flex .form .formfielderror fieldset,
.content div.flex .element .form .formfielderror fieldset{
	border-color:darkred;
}

.survey .formsucceed,
.inputform .formsucceed,
.sportbooking .formsucceeded{
	border:2px solid darkgreen;
	background-color:lightgreen;
	margin-bottom:0.2em;
}
.sportbooking .formsucceeded,
.sportbooking .formerror{
	margin-bottom:1em;
}

.inputform .description,
form .description{
	font-size:0.8em;
}
.inputform .description.error{
	color:darkred;
}
.inputform .captcha-img{
	margin-bottom:0.2em;
}
.visually-hidden{
	display:none;
}

form .formfield-box{
	padding:0.5em 1em;
}
form .formfield-box-right {
	text-align:right;
}

.flex .inputform fieldset{
	padding-bottom:0.2em;
}

.inputform fieldset > div.formfielderror,
form fieldset > div.formfielderror{
	margin-bottom:0;
}

@media screen and (min-width:1024px){

	form.form2col {
		display: grid;
		grid-template-columns: 50% 50%;
	}

	form.form2col .formfield2cols,
	form.form2col .formfield3cols {
		grid-column: span 2;
	}

	form.form3col {
		display: grid;
		grid-template-columns: 33.33% 33.33% 33.33%;
	}

	form.form3col .formfield2cols {
		grid-column: span 2;
	}
	form.form3col .formfield3cols {
		grid-column: span 3;
	}

	p.formfullcol {
		grid-column: 1 / -1
	}
}

/* =====================================================================================================================
 * Input fields with icon.
 ==================================================================================================================== */
.inputiconcontainer,
.flex form .inputiconcontainer{
	width:100%;
	position:relative;
	display:inline-block;
}
.flex form .inputiconcontainer input[type='text'],
.flex form .inputiconcontainer input[type='password']{
	width:100%;
	margin-bottom:0;
}
.inputiconcontainer img,
.inputiconcontainer svg{
	position:absolute;
	right:0.5em;
	top:calc(50%);
	transform:translateY(-50%);
	cursor:pointer;
}

/* =====================================================================================================================
 * History back button.
 ==================================================================================================================== */
.element.back a.url,
a.historyback{
	padding:0.5em 1em;
}
.element.back a.url:hover,
a.historyback:hover{
	text-decoration:none;
}
.element.back a.url:before,
.element.back a.url:after,
a.url.historyback:before,
a.url.historyback:after{
	content:"";
}

/* =====================================================================================================================
 * Calendar week view
 ==================================================================================================================== */
.calendar-table table{
	border:1px solid lightgrey;
	border-collapse:collapse;
	position:relative;
}
.calendar-table td.calendar-week-view-cell,
.calendar-table th.calendar-week-view-cell{
	width:14.28%;
}
.calendar-table td{
	height:60px;
}
.calendar-table .singleevent{
	position:absolute;
	overflow:hidden;
	text-overflow:ellipsis;
}
.calendar-table .singleevent > div{
	padding:0.4em;
	max-width:100%;
	max-height:100%;
	text-align:center;
}
.calendar-table .singleevent:hover{
	z-index:9998;
	cursor:pointer;
}

.flex.calendar-table h3{
	padding:0;
	margin:0;
	font-size:1em;
}

.flex.event.calendar-table div:has(.fulltextbtn){
	padding-bottom:0;
}
.event.calendar-table .date,
.event.calendar-table .fulltextbtn,
.event.calendar-table .location{
	display:none;
}
.event.calendar-table .time{
	display:inherit;
	font-size:0.9em;
	white-space:nowrap;
}

.flex.calendar-table p:last-child{
	padding-bottom:0;
}

/* =====================================================================================================================
 * Survey
 ==================================================================================================================== */
.survey tr.choices th{
	white-space:nowrap;
}
.survey .name{
	text-align:center;
}
.survey td:first-child{
	min-width:10em;
}
.mysurvey-origin{
	position:absolute;
	opacity:0;
	pointer-events:none;
}
.survey .mysurvey-buttons,
.survey .mysurvey-description{
	margin:0.5em;
}
.survey .mysurvey-description{
	font-size:0.9em;
}
.mysurvey-checkbox{
	border:0;
	padding:0.1em;
	background-color:#eee;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:1em;
	height:1em;
	margin-right:0.3em;
}
.mysurvey-choice:not(:disabled) + label .mysurvey-checkbox{
	cursor:pointer;
}

.mysurvey-icon,
.mysurvey-iconempty,
.mysurvey-iconmaybe,
.mysurvey-icondisabled{
	width:1em;
	height:1em;
	display:none;
}

.mysurvey-origin[data-val='Y'] + label .mysurvey-checkbox{
	background-color:lightgreen;
}
.mysurvey-origin[data-val='Y'] + label .mysurvey-checkbox .mysurvey-icon{
	display:block;
	stroke:#000;
}
.mysurvey-origin[data-val=''] + label .mysurvey-checkbox .mysurvey-iconempty{
	display:block;
}
.mysurvey-origin[data-val='N'] + label .mysurvey-checkbox{
	background-color:lightcoral;
}
.mysurvey-origin[data-val='N'] + label .mysurvey-checkbox .mysurvey-icondisabled{
	display:block;
	stroke:#000;
}
.mysurvey-origin[data-val='?'] + label .mysurvey-checkbox{
	background-color:yellow;
}
.mysurvey-origin[data-val='?'] + label .mysurvey-checkbox .mysurvey-iconmaybe{
	display:block;
	stroke:#000;
}

.survey .membername{
	min-width:5em;
	max-width:5em;
	width:5em;
}
.survey .mysurvey-origin{
	min-width:0.1em;
	max-width:0.1em;
	width:0.1em;
}

/* =====================================================================================================================
 * Druck
 ==================================================================================================================== */
@media print {
	header,
	footer,
	.element.back,
	.slidergallery .navbar,
	.slidergallery .timeoutbar,
	.slidergallery .btn{
		display: none !important;
	}
	body {
		font-size: 12pt !important;
		line-height: 1.5 !important;
		margin: 2cm !important;
		background: white !important;
		color: black !important;
	}
	a {
		color: black !important;
		text-decoration: underline !important;
	}
	section {
		page-break-before: always;
	}
	a:after {
		content: " (" attr(href) ")" !important;
		font-size: 10pt;
	}
}

/* =====================================================================================================================
 * Sport booking
 ==================================================================================================================== */
.sportbooking-canceled{
	box-sizing: border-box;
	/*border-left:0.5em solid lightcoral;*/
}
.sportbooking-canceled .membercnt {
	display:none;
}
.sportbooking-full{
	box-sizing: border-box;
	/*border-left:0.5em solid orange;*/
}
/*.sportbooking-full .membercnt {
	background-color:orange;
}*/
.sportbooking-full-msg{
	/*color:lightcoral;*/
	font-weight:bold;
}
.flex p.sportbooking-full-msg {
	margin-left:0.5em;
	margin-right:0.5em;
	padding:0.5em;
}
.sportbooking .membercnt {
	padding:0.2em 1em;
}
.sportbooking-free{
	box-sizing: border-box;
	/*border-left:0.5em solid lightgreen;*/
}
/*.sportbooking-free .membercnt,
.sportbooking-checked .membercnt {
	background-color:lightgreen;
}
.sportbooking-notconfirmed .membercnt {
	background-color:orange;
}*/
.sportbooking-checked {
	box-sizing: border-box;
	/*border:0.5em solid lightgreen;*/
}

.sportbooking form label,
.sportbooking form input[type='text'],
.sportbooking form .passwordcontainer{
	margin-right:0.5em;
}
.sportbooking .form {
	margin-bottom:0;
}

@media screen and (min-width:1024px){
	.sportbooking-input {
		white-space:nowrap;
	}
	.sportbooking form input[type='text'],
	.sportbooking form .passwordcontainer{
		width:20%;
	}
}

/* =====================================================================================================================
 * Frontend dialog
 ==================================================================================================================== */
.frontend-dialog .ui-dialog-titlebar,
.frontend-dialog.ui-widget.ui-widget-content {
	border:0;
}
.frontend-dialog .ui-dialog-titlebar button {
	display:none;
}
.frontend-dialog .ui-corner-all {
	border-radius:0;
}
.frontend-dialog .ui-dialog-content{
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.frontend-dialog.frontend-dialog-noflex .ui-dialog-content{
	display: block;
}
.frontend-dialog.frontend-dialog-noflex .ui-dialog-content > div {
	margin-bottom:0.5em;
}
.frontend-dialog .symbol{
	flex: 0 0 auto;
}
.frontend-dialog .text{
	flex: 1 1 auto;
}

/* =====================================================================================================================
 * Copyright
 ==================================================================================================================== */
 @media screen and (min-width:1024px){
	.copyright {
		display:flex;
		gap: 1em;
	}
}
 @media screen and (max-width:1023px){
	.copyright img {
		max-width:48px;
		margin-bottom:1em;
	}
}
.flex div.copyright{
	margin:0.5em 0;
}
.loginlogo .personalcms25logo img,
.copyright .personalcms25logo img {
	border-radius:1em;
	padding:0.5em;
	background-color:#fff;
	border:3px solid #666666/*#4f963e*/;
}

/* =====================================================================================================================
 * Multiple-Choice
 ==================================================================================================================== */

 .multiplechoice-solve {
	width:1em;
	height:1em;
	display:inline-block;
 }
 .flex p.multiplechoice-failed{
	border:2px solid darkred;
	background-color:lightcoral;
	margin-bottom:0.2em;
}

 .flex p.multiplechoice-succeeded{
	border:2px solid darkgreen;
	background-color:lightgreen;
	margin-bottom:0.2em;
 }

 .flex .multiplechoice-question{
	font-weight: bold;
 }

.flex .multiplechoice-responses {
	container-type: inline-size;
}
.flex .multiplechoice-responses > div {
	display: grid;
	grid-template-columns: 1fr;
	margin-bottom:1em;
	gap:0.2em;
}

.flex .multiplechoice-responses > div > p {
	padding:0.5em 1em;
	margin:0;
}

.flex .multiplechoice figure.fleximg img,
.flex .multiplechoice img,
.flex .multiplechoice video,
.flex .multiplechoice figure.fleximg video{
	max-height:50vh;
}

@container (min-width: 500px) {
	.flex .multiplechoice-responses div {
		grid-template-columns: 1fr 1fr;
	}
}

/* =====================================================================================================================
 * Glossary
 ==================================================================================================================== */
.ui-dialog .ui-dialog-content.glossary-dialog {
	padding:0;
}
.glossary-dialog img,
.glossary-dialog video,
.glossary-dialog audio {
	max-width: 100%;
  	height: auto;
}

/* =====================================================================================================================
 * Mauerwerklayout
 ==================================================================================================================== */
 
@media screen and (min-width:1024px){
	.flex-masonry{
		column-gap:1em;
		display:inherit;
	}
	.flex-masonry-2{
   		column-count: 2;
	}
	.flex-masonry-3{
   		column-count: 3;
	}
	.flex-masonry-4{
   		column-count: 4;
	}
	.flex-masonry-5{
   		column-count: 5;
	}
	.flex-masonry-6{
   		column-count: 6;
	}
	.flex-masonry > div {
		margin-bottom: 1em;
		break-inside: avoid;
	}
	.flex-masonry .slidergallery {
		display: block;
		width: 100%;
		column-span: all;
	}
}

/* =====================================================================================================================
 * Line Clamp
 ==================================================================================================================== */
 .lineclamp:not(.lineclamp-expanded) {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	position: relative;
 }

 .lineclamp:not(.lineclamp-expanded)::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2em;
	pointer-events: none;
}

.lineclamp-more {
	cursor: pointer;
	display: inline-block;
}